llm-switcher 1.2.6 → 1.2.8

package/ui.html

@@ -811,6 +811,10 @@
         position: sticky;
         top: 0;
         height: auto;
+        /* The base rule makes this a scroll container, and a grid item that scrolls has an automatic
+           minimum size of zero. The row then collapsed to the padding (16 px measured) and the nav
+           was drawn outside it, so no link could be pressed. Reset it, or the height is ignored. */
+        overflow: visible;
         flex-direction: row;
         flex-wrap: wrap;
         align-items: center;
@@ -1086,17 +1090,17 @@
   </div>
 
   <!-- Profile Modal Editor -->
-  <div id="profile-modal-overlay" class="overlay" style="display:none;" onmousedown="overlayPressed = event.target === this" onclick="if (overlayPressed && event.target === this) closeProfileModal()">
+  <div id="profile-modal-overlay" class="overlay" style="display:none;" onmousedown="overlayPressed = event.target === this" onclick="if (overlayPressed && event.target === this) requestCloseProfileModal()">
     <div class="modal" role="dialog" aria-modal="true" aria-labelledby="form-title">
       <div class="mh">
         <div>
           <strong id="form-title">Edit Provider Profile</strong>
           <span id="active-tag" style="font-size:0.75rem; color:var(--ok); margin-left:0.5rem; font-weight:600;"></span>
         </div>
-        <button class="icon" type="button" onclick="closeProfileModal()" aria-label="Close dialog">✕</button>
+        <button class="icon" type="button" onclick="requestCloseProfileModal()" aria-label="Close dialog">✕</button>
       </div>
 
-      <form id="profile-form" onsubmit="saveProfile(event)" onkeydown="blockImplicitSubmit(event)" style="display:flex; flex-direction:column; overflow:hidden;">
+      <form id="profile-form" onsubmit="saveProfile(event)" onkeydown="blockImplicitSubmit(event)" oninput="formDirty = true" onchange="formDirty = true" style="display:flex; flex-direction:column; overflow:hidden;">
         <!-- Modal Inset Tabs -->
         <div style="padding:0.85rem 1.25rem 0.5rem; background:var(--card2);">
           <div class="tabs">
@@ -1206,7 +1210,7 @@
           </div>
           <div style="display:flex; gap:0.6rem;">
             <button type="button" id="btn-test-conn" class="btn btn-outline" onclick="testConnection()">Test Connection</button>
-            <button type="button" class="btn btn-outline" onclick="closeProfileModal()">Cancel</button>
+            <button type="button" class="btn btn-outline" onclick="requestCloseProfileModal()">Cancel</button>
             <button type="submit" class="btn btn-primary">Save Profile</button>
           </div>
         </div>
@@ -1323,17 +1327,51 @@
     for (const ev of ['focusout', 'click', 'scroll']) addEventListener(ev, hideTip, true);
 
     // Modal Control
+
+    // A result belongs to the profile it was measured on. Cleared on every open, because a dialog
+    // that opens showing "HTTP 200 OK" from the profile before it says the wrong thing about this one.
+    // Empties the three fields, never the box: they are static markup, and innerHTML would delete
+    // them for the rest of the session.
+    function clearTestResult() {
+      const box = document.getElementById('test-result');
+      if (!box) return;
+      for (const id of ['test-status-badge', 'test-latency', 'test-sample']) {
+        const el = document.getElementById(id);
+        if (el) el.textContent = '';
+      }
+      document.getElementById('test-status-badge')?.setAttribute('class', 'badge');
+      box.className = 'test-result-box';
+    }
+
     function openProfileModal(isNew = false) {
       const modal = document.getElementById('profile-modal-overlay');
       if (modal) modal.style.display = 'grid';
+      clearTestResult();
       if (isNew) {
         initNewProfile();
       }
+      // Without this the focus stays on the button behind the overlay, so the first Tab walks into
+      // the page under the dialog instead of through the dialog.
+      const first = modal?.querySelector('input:not([readonly]):not([disabled]), select, textarea, button');
+      first?.focus();
     }
 
     function closeProfileModal() {
       const modal = document.getElementById('profile-modal-overlay');
       if (modal) modal.style.display = 'none';
+      formDirty = false;
+      // render() reads this to draw the ring and the "Editing Profile" label. Left set, a card stayed
+      // marked as being edited after Escape, Cancel or a press on the dark area.
+      currentlyEditingKey = '';
+      formLoadedKey = null;
+      render();
+    }
+
+    // The close button, Cancel, the dark area and Escape. A save or a delete calls closeProfileModal
+    // directly, because by then nothing is left to lose.
+    function requestCloseProfileModal() {
+      if (formDirty && !confirm('Discard unsaved changes?')) return;
+      closeProfileModal();
     }
 
     // A text selection that starts in a field and ends on the overlay also clicks the overlay.
@@ -1349,7 +1387,7 @@
       if (e.key === 'Escape' && !e.target.closest?.('input, select, textarea')) {
         const modal = document.getElementById('profile-modal-overlay');
         if (modal && modal.style.display !== 'none') {
-          closeProfileModal();
+          requestCloseProfileModal();
         }
       }
     });
@@ -1405,7 +1443,7 @@
         }
         actionsEl.innerHTML = `
           <button class="btn btn-primary" onclick="openProfileModal(true)">+ Add Profile</button>
-          <button class="btn btn-outline" id="btn-toggle" onclick="toggleProxy()">${activeTargets.length > 0 ? 'Use official endpoints' : 'Activate compatible routes'}</button>
+          <button class="btn btn-outline" id="btn-toggle-routes" onclick="toggleProxy()">${activeTargets.length > 0 ? 'Use official endpoints' : 'Activate compatible routes'}</button>
           <button class="btn btn-outline" onclick="loadStatus()">Refresh</button>
         `;
       } else if (route === 'models') {
@@ -1856,13 +1894,13 @@
         const data = await res.json();
         if (data.success) {
           showToast('Updated ' + target + ' routing');
-          await loadStatus();
         } else {
           showToast(data.error || 'Failed to switch target', true);
         }
       } catch (err) {
         showToast('Network error switching target', true);
       }
+      await loadStatus();
     }
 
     async function toggleProfileAllCli(key, enable) {
@@ -1876,19 +1914,20 @@
         const data = await res.json();
         if (data.success) {
           showToast(key + (enable ? ' activated' : ' deactivated'));
-          await loadStatus();
         } else {
           showToast(data.error || 'Failed to toggle profile', true);
         }
       } catch (err) {
         showToast('Network error toggling profile', true);
       }
+      await loadStatus();
     }
 
     function loadProfileToForm(key) {
       const p = state.config?.profiles?.[key];
       if (!p) return;
       formLoadedKey = key;
+      formDirty = false;
       currentProfileBuffer = JSON.parse(JSON.stringify(p));
 
       document.getElementById('form-title').textContent = 'Edit Profile: ' + p.name;
@@ -1916,6 +1955,7 @@
 
     function initNewProfile() {
       creatingNew = true;
+      formDirty = false;
       currentlyEditingKey = '';
       formLoadedKey = null;
       currentProfileBuffer = {
@@ -1977,7 +2017,7 @@
       vertex: {
         name: 'Google Vertex AI',
         baseURL: 'https://us-central1-aiplatform.googleapis.com/v1',
-        tool: 'anthropic',
+        tool: 'claude',
         outFormat: 'vertex',
         mode: 'convert',
         thinkingMode: 'auto',
@@ -2007,6 +2047,7 @@
       document.getElementById('p-mode').value = t.mode;
       document.getElementById('p-thinking-mode').value = t.thinkingMode;
       currentProfileBuffer = { ...currentProfileBuffer, ...t };
+      formDirty = true;
       renderModelSlots(t.tool || 'auto', t);
       showToast('Template "' + t.name + '" applied');
     }
@@ -2024,13 +2065,13 @@
         const data = await res.json();
         if (data.success) {
           showToast(isAnyActive ? 'Using official endpoints' : 'Gateway activated');
-          await loadStatus();
         } else {
           showToast(data.error || 'Failed to toggle routes', true);
         }
       } catch (err) {
         showToast('Network error toggling routes', true);
       }
+      await loadStatus();
     }
 
     async function saveProfile(e) {
@@ -2039,19 +2080,29 @@
       if (!key) return;
 
       collectCurrentSlotValues();
+      if (creatingNew && state.config?.profiles?.[key]) {
+        showToast('Profile "' + key + '" already exists. Use another key, or edit that profile.', true);
+        return;
+      }
       const existing = state.config?.profiles?.[key] || {};
       const keyVal = document.getElementById('p-key-val').value.trim();
 
       const profilePayload = {
         name: document.getElementById('p-name').value.trim(),
         baseURL: document.getElementById('p-url').value.trim(),
-        tool: document.getElementById('p-tool').value,
+        // "auto" in the list means a profile for both tools, which config.json stores as null.
+        tool: document.getElementById('p-tool').value === 'auto' ? null : document.getElementById('p-tool').value,
         outFormat: document.getElementById('p-outformat').value,
         mode: document.getElementById('p-mode').value,
-        thinkingMode: document.getElementById('p-thinking-mode').value,
-        defaultModels: { ...(existing.defaultModels || {}), ...(currentProfileBuffer?.defaultModels || {}) },
-        model1M: { ...(existing.model1M || {}), ...(currentProfileBuffer?.model1M || {}) }
+        // The buffer already holds what the profile had, minus what the person emptied.
+        defaultModels: { ...(currentProfileBuffer?.defaultModels || {}) }
       };
+      // A save with no edit must leave the profile as it was: write a default only where the profile
+      // already had the key.
+      const model1M = { ...(currentProfileBuffer?.model1M || {}) };
+      if (Object.keys(model1M).length || existing.model1M) profilePayload.model1M = model1M;
+      const thinkingMode = document.getElementById('p-thinking-mode').value;
+      if (thinkingMode !== 'auto' || existing.thinkingMode) profilePayload.thinkingMode = thinkingMode;
 
       if (keyVal === MASKED_KEY) {
         profilePayload.apiKey = existing.apiKey || '';
@@ -2065,6 +2116,15 @@
       if (existing.publicModels) profilePayload.publicModels = existing.publicModels;
 
       showToast('Saving profile "' + key + '"...');
+      // A double-click sent the save twice. The same pattern as the catalog sync button: disabled
+      // while the request runs, re-enabled in `finally` so a failed save can be tried again.
+      const submit = e.target?.querySelector?.('button[type="submit"]')
+        || document.querySelector('#profile-modal-overlay button[type="submit"]');
+      if (submit) {
+        if (submit.disabled) return;
+        submit.disabled = true;
+        submit.setAttribute('aria-busy', 'true');
+      }
       try {
         const res = await api('/api/save-profile', {
           method: 'POST',
@@ -2081,6 +2141,11 @@
         }
       } catch (err) {
         showToast('Network error saving profile', true);
+      } finally {
+        if (submit) {
+          submit.disabled = false;
+          submit.removeAttribute('aria-busy');
+        }
       }
     }
 
@@ -2356,6 +2421,7 @@
       const model = combo?.matches?.[Number(li.dataset.i)];
       if (!model) return;
       combo.querySelector('input').value = model;
+      formDirty = true;
       closeCombo(combo);
       update1mWarnings();
     }
@@ -2412,8 +2478,15 @@
         const ctModels = document.getElementById('ct-models');
         if (ctModels) ctModels.textContent = claudeModels.length + codexModels.length;
 
-        document.getElementById('badge-claude-count').textContent = claudeModels.length + ' models · ' + claudeTiers.size + ' tiers';
-        document.getElementById('badge-codex-count').textContent = codexModels.length + ' models · ' + codexRoles.size + ' roles';
+        // `data-full` is what the search box restores when it is emptied again.
+        for (const [id, text] of [
+          ['badge-claude-count', claudeModels.length + ' models · ' + claudeTiers.size + ' tiers'],
+          ['badge-codex-count', codexModels.length + ' models · ' + codexRoles.size + ' roles']
+        ]) {
+          const el = document.getElementById(id);
+          el.textContent = text;
+          el.dataset.full = text;
+        }
 
         claudeContainer.innerHTML = claudeModels.map(m => `
           <div class="row" style="padding:0.6rem 0.8rem; background:var(--card2); border-radius:8px;">
@@ -2443,12 +2516,40 @@
       }
     }
 
+    // A filter that hides every row but keeps the header count reads as a broken page: the header
+    // still promised 11 models over an empty list. So the count follows the filter, and an empty
+    // result says so in words.
     function filterCatalogView(q) {
       const term = (q || '').toLowerCase();
-      document.querySelectorAll('#catalog-claude-items .row, #catalog-codex-items .row').forEach(row => {
-        const text = row.textContent.toLowerCase();
-        row.style.display = text.includes(term) ? 'flex' : 'none';
-      });
+      for (const [list, badge, unit] of [
+        ['#catalog-claude-items', 'badge-claude-count', 'models'],
+        ['#catalog-codex-items', 'badge-codex-count', 'models']
+      ]) {
+        const container = document.querySelector(list);
+        if (!container) continue;
+        let shown = 0;
+        container.querySelectorAll('.row').forEach(row => {
+          const hit = row.textContent.toLowerCase().includes(term);
+          row.style.display = hit ? 'flex' : 'none';
+          if (hit) shown++;
+        });
+        let empty = container.querySelector('.catalog-empty');
+        if (!shown) {
+          if (!empty) {
+            empty = document.createElement('div');
+            empty.className = 'catalog-empty hint';
+            empty.style.padding = '0.8rem';
+            container.appendChild(empty);
+          }
+          empty.textContent = term ? 'No model matches "' + term + '".' : 'No model in this list.';
+          empty.style.display = 'block';
+        } else if (empty) {
+          empty.style.display = 'none';
+        }
+        const el = document.getElementById(badge);
+        // `data-full` is the unfiltered text that the render wrote. An empty box restores it.
+        if (el) el.textContent = term ? shown + ' ' + unit + ' shown' : (el.dataset.full || el.textContent);
+      }
     }
 
     async function refreshCatalogUpstream() {