From d262589616f26b68276b4e019f3db36d09cf39f8 Mon Sep 17 00:00:00 2001
From: Jithin <jithin.k@keyvalue.systems>
Date: Sat, 18 Jul 2026 12:00:04 +0530
Subject: [PATCH] fix: unify llm config ui and require model before run

---
 runners/extension/popup.html | 229 ++++++++++++++++-------------------
 runners/extension/popup.js   |  74 ++++-------
 2 files changed, 130 insertions(+), 173 deletions(-)

diff --git a/runners/extension/popup.html b/runners/extension/popup.html
index 97e0fe8..7a118bc 100644
--- a/runners/extension/popup.html
+++ b/runners/extension/popup.html
@@ -427,6 +427,17 @@
         margin-bottom: 6px;
       }
 
+      /* LLM config — one labeled field per row, consistent for every provider */
+      .llm-field {
+        margin-bottom: 8px;
+      }
+      .llm-field:last-child {
+        margin-bottom: 0;
+      }
+      .llm-field > .endpoint-step-label {
+        margin-bottom: 6px;
+      }
+
       .toggle {
         width: 32px;
         height: 18px;
@@ -496,6 +507,12 @@
       .api-key-wrap input[type="text"] {
         letter-spacing: 0;
       }
+      /* Keep the placeholder in the regular UI font — the mono/letter-spacing above
+         is for the typed key value, not the hint text. */
+      .api-key-wrap input::placeholder {
+        font-family: "Google Sans", system-ui, sans-serif;
+        letter-spacing: 0;
+      }
       .eye-btn {
         position: absolute;
         right: 8px;
@@ -2140,138 +2157,69 @@
             </div>
           </div>
 
-          <!-- Model -->
+          <!-- LLM config -->
           <div>
-            <div class="section-label agent-desc-label">Model</div>
-            <div id="providerDropdown" class="dd" data-open="false" style="margin-bottom: 8px">
-              <button class="dd-button" type="button">
-                <span class="label">OpenAI</span>
-                <span class="chev">
-                  <svg width="12" height="12" viewBox="0 0 24 24">
-                    <path
-                      d="M6 9l6 6 6-6"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <div class="dd-menu" role="listbox"></div>
-            </div>
+            <div class="section-label agent-desc-label">Model selection</div>
 
-            <!-- Endpoint config card (openai-compatible: accordion; azure: plain) -->
-            <div id="endpointSection" style="display: none; margin-bottom: 8px">
-              <button
-                id="endpointCardHead"
-                type="button"
-                class="endpoint-card-head"
-                style="display: none"
-              >
-                <span>Configure endpoint</span>
-                <span class="endpoint-chev">
-                  <svg width="12" height="12" viewBox="0 0 24 24">
-                    <path
-                      d="M6 9l6 6 6-6"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <div id="endpointCardBody" class="endpoint-card-body" data-open="true">
-                <!-- Step 1: Base URL -->
-                <div class="endpoint-step">
-                  <div class="endpoint-step-label">
-                    Base URL
-                    <span
-                      class="info-tip"
-                      data-tooltip="Root URL of your OpenAI-compatible server, e.g. http://localhost:11434/v1"
-                    >
-                      <svg
-                        width="12"
-                        height="12"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      >
-                        <circle cx="12" cy="12" r="10" />
-                        <line x1="12" y1="8" x2="12" y2="12" />
-                        <line x1="12" y1="16" x2="12.01" y2="16" />
-                      </svg>
-                    </span>
-                  </div>
-                  <input
-                    id="baseUrl"
-                    type="text"
-                    placeholder="https://api.openai.com/v1"
-                    autocomplete="off"
-                    spellcheck="false"
-                  />
-                </div>
-                <!-- <div id="endpointDivider1" class="endpoint-divider" style="display: none"></div> -->
-                <!-- Step 2: API Key -->
-                <div class="endpoint-step">
-                  <div class="endpoint-step-label">
-                    API Key
-                    <span id="endpointKeyOptional" class="endpoint-optional" style="display: none"
-                      >optional for local servers</span
-                    >
-                    <span
-                      id="endpointKeyHint"
-                      class="info-tip"
-                      style="display: none"
-                      data-tooltip="Leave empty if your server doesn't require authentication."
-                    >
-                      <svg
-                        width="12"
-                        height="12"
-                        viewBox="0 0 24 24"
+            <!-- Provider -->
+            <div class="llm-field">
+              <div class="endpoint-step-label">Provider</div>
+              <div id="providerDropdown" class="dd" data-open="false">
+                <button class="dd-button" type="button">
+                  <span class="label">OpenAI</span>
+                  <span class="chev">
+                    <svg width="12" height="12" viewBox="0 0 24 24">
+                      <path
+                        d="M6 9l6 6 6-6"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="2"
                         stroke-linecap="round"
                         stroke-linejoin="round"
-                      >
-                        <circle cx="12" cy="12" r="10" />
-                        <line x1="12" y1="8" x2="12" y2="12" />
-                        <line x1="12" y1="16" x2="12.01" y2="16" />
-                      </svg>
-                    </span>
-                  </div>
-                  <div class="api-key-wrap" style="margin-top: 0">
-                    <input id="apiKeyCard" type="password" placeholder="sk-…" autocomplete="off" />
-                    <button id="apiKeyCardEye" class="eye-btn" type="button" title="Show">
-                      <svg id="eyeIconCard" width="14" height="14" viewBox="0 0 24 24">
-                        <g
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-width="1.7"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        >
-                          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z" />
-                          <circle cx="12" cy="12" r="3" />
-                        </g>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <div class="dd-menu" role="listbox"></div>
               </div>
             </div>
 
-            <!-- Standalone API key (simple providers: OpenAI, Anthropic, Google, Groq, DeepSeek) -->
-            <div id="standaloneApiKey" style="display: none; margin-bottom: 8px">
+            <!-- API Key -->
+            <div class="llm-field">
+              <div class="endpoint-step-label">
+                API Key
+                <span id="apiKeyOptional" class="endpoint-optional" style="display: none"
+                  >optional for local servers</span
+                >
+                <span
+                  id="apiKeyHint"
+                  class="info-tip"
+                  style="display: none"
+                  data-tooltip="Leave empty if your server doesn't require authentication."
+                >
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="8" x2="12" y2="12" />
+                    <line x1="12" y1="16" x2="12.01" y2="16" />
+                  </svg>
+                </span>
+              </div>
               <div class="api-key-wrap" style="margin-top: 0">
-                <input id="apiKey" type="password" placeholder="sk-…" autocomplete="off" />
+                <input
+                  id="apiKey"
+                  type="password"
+                  placeholder="Paste key here"
+                  autocomplete="off"
+                />
                 <button id="apiKeyEye" class="eye-btn" type="button" title="Show">
                   <svg id="eyeIcon" width="14" height="14" viewBox="0 0 24 24">
                     <g
@@ -2288,9 +2236,42 @@
                 </button>
               </div>
             </div>
-            <!-- Model dropdown (outside endpoint card for non-compatible providers) -->
-            <div id="modelSection">
-              <div class="endpoint-step-label" style="margin-bottom: 6px">
+
+            <!-- Base URL (Azure + OpenAI-compatible only) -->
+            <div class="llm-field" id="baseUrlField" style="display: none">
+              <div class="endpoint-step-label">
+                Base URL
+                <span
+                  class="info-tip"
+                  data-tooltip="Root URL of your OpenAI-compatible server, e.g. http://localhost:11434/v1"
+                >
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="8" x2="12" y2="12" />
+                    <line x1="12" y1="16" x2="12.01" y2="16" />
+                  </svg>
+                </span>
+              </div>
+              <input
+                id="baseUrl"
+                type="text"
+                placeholder="https://api.openai.com/v1"
+                autocomplete="off"
+                spellcheck="false"
+              />
+            </div>
+            <!-- Model -->
+            <div id="modelSection" class="llm-field">
+              <div class="endpoint-step-label">
                 Model
                 <button
                   id="refreshModelsBtn"
diff --git a/runners/extension/popup.js b/runners/extension/popup.js
index cd98bc9..fc8578d 100644
--- a/runners/extension/popup.js
+++ b/runners/extension/popup.js
@@ -441,9 +441,10 @@ function shortSev(s) {
 // ── Run button enable/disable ──────────────────────────────────
 function updateRunButton() {
   const missingKey = !state.apiKey.trim();
+  const missingModel = !state.model.trim();
   const missingEvals = state.selectedEvaluators.size === 0;
   const missingSuite = !state.suiteId || !state.catalog;
-  $("runBtn").disabled = missingKey || missingEvals || missingSuite;
+  $("runBtn").disabled = missingKey || missingModel || missingEvals || missingSuite;
 }
 
 // ── Suite description + dropdown wiring ────────────────────────
@@ -459,6 +460,7 @@ function resetCompatModels() {
   modelDD?.setValue("");
   state.model = "";
   setModelHint("");
+  updateRunButton();
 }
 
 /**
@@ -2720,40 +2722,32 @@ function scrollDropdownIntoView(root) {
   });
 }
 
+/** Placeholder for the API-key input. Kept short; the "optional" note is shown separately. */
+function apiKeyPlaceholder(provider) {
+  return provider === PROVIDERS.OPENAI_COMPATIBLE ? "Paste key (optional)" : "Paste key here";
+}
+
 function applyProvider({ resetModel = false } = {}) {
   const isCompatible = state.provider === PROVIDERS.OPENAI_COMPATIBLE;
   const needsBaseUrl = PROVIDERS_NEEDING_BASE_URL.has(state.provider);
   const isSimple = !!SIMPLE_PROVIDER_FETCH_CONFIG[state.provider];
 
-  // Reparent modelSection: inside endpointCardBody for custom, outside for others
-  const modelSec = $("modelSection");
-  const cardBody = $("endpointCardBody");
-  const standaloneKey = $("standaloneApiKey");
-  if (isCompatible) {
-    if (modelSec.parentElement !== cardBody) cardBody.appendChild(modelSec);
-  } else {
-    if (modelSec.previousElementSibling !== standaloneKey) {
-      standaloneKey.insertAdjacentElement("afterend", modelSec);
-    }
-  }
-
-  // Endpoint card — only Azure + OpenAI-compatible
-  $("endpointSection").style.display = needsBaseUrl ? "" : "none";
-  $("endpointKeyHint").style.display = isCompatible ? "inline-flex" : "none";
-  $("endpointKeyOptional").style.display = isCompatible ? "" : "none";
+  // Unified layout: every provider renders the same labeled rows
+  // (Provider → API Key → Base URL → Model). Only the Base URL row and the
+  // OpenAI-compatible affordances (optional-key note, model refresh) toggle.
+  $("baseUrlField").style.display = needsBaseUrl ? "" : "none";
+  $("apiKeyHint").style.display = isCompatible ? "inline-flex" : "none";
+  $("apiKeyOptional").style.display = isCompatible ? "" : "none";
   $("refreshModelsBtn").style.display = isCompatible ? "" : "none";
-
-  // Standalone API key — simple providers only
-  $("standaloneApiKey").style.display = isSimple ? "" : "none";
+  $("apiKey").placeholder = apiKeyPlaceholder(state.provider);
 
   setModelHint("");
 
   if (isCompatible) {
-    $("endpointCardBody").dataset.open = "true";
-    $("modelSection").style.display = "";
-    $("modelDropdown").style.display = "";
+    // Models come from the user's own endpoint — cleared here, then fetched once
+    // a Base URL (and optional key) is entered or the model dropdown is opened.
+    if (resetModel) resetCompatModels();
   } else if (isSimple) {
-    $("modelSection").style.display = "";
     if (resetModel) {
       modelDD?.setOptions([]);
       modelDD?.setValue("");
@@ -2765,9 +2759,7 @@ function applyProvider({ resetModel = false } = {}) {
       }
     }
   } else {
-    // Azure
-    $("endpointCardBody").dataset.open = "true";
-    $("modelSection").style.display = "";
+    // Azure — static model list.
     const models = modelsForProvider(state.provider);
     modelDD?.setOptions(models);
     if (resetModel) {
@@ -2778,11 +2770,6 @@ function applyProvider({ resetModel = false } = {}) {
   }
 }
 
-function setEndpointChevron(open) {
-  const chev = $("endpointCardHead")?.querySelector(".endpoint-chev");
-  if (chev) chev.style.transform = open ? "rotate(0deg)" : "rotate(-90deg)";
-}
-
 async function fetchModelsFromBaseUrl(reopen = false) {
   const baseUrl = state.baseUrl?.trim().replace(/\/$/, "");
   if (!baseUrl) {
@@ -2809,6 +2796,7 @@ async function fetchModelsFromBaseUrl(reopen = false) {
     state.model = keep;
     modelDD?.setValue(keep);
     saveModelAndKey();
+    updateRunButton();
     _compatModelsLoaded = true;
     setModelHint(`${ids.length} model${ids.length > 1 ? "s" : ""} loaded.`, "ok");
     if (reopen) modelDD?.open();
@@ -2862,6 +2850,7 @@ async function fetchModelsForSimpleProvider() {
     state.model = keep;
     modelDD?.setValue(keep);
     saveModelAndKey();
+    updateRunButton();
     _compatModelsLoaded = true;
     setModelHint("");
   } catch (e) {
@@ -2895,6 +2884,7 @@ function wire() {
     (v) => {
       state.model = v;
       saveModelAndKey();
+      updateRunButton();
     },
     {
       inlineSearch: true,
@@ -2977,14 +2967,15 @@ function wire() {
     }
   });
 
-  // Standalone API key (simple providers)
+  // API key (single field, shared by every provider)
   $("apiKey").addEventListener("input", (e) => {
     state.apiKey = e.target.value;
-    $("apiKeyCard").value = e.target.value;
     saveModelAndKey();
     updateRunButton();
     setModelHint("");
     _compatModelsLoaded = false;
+    // Reset loaded models when the key changes so the next open re-fetches.
+    if (state.provider === PROVIDERS.OPENAI_COMPATIBLE) resetCompatModels();
   });
 
   function wireEyeBtn(btnId, iconId, inputId) {
@@ -3006,20 +2997,6 @@ function wire() {
   }
   wireEyeBtn("apiKeyEye", "eyeIcon", "apiKey");
 
-  // Card API key (Azure + OpenAI-compatible)
-  $("apiKeyCard").addEventListener("input", (e) => {
-    state.apiKey = e.target.value;
-    $("apiKey").value = e.target.value;
-    saveModelAndKey();
-    updateRunButton();
-    setModelHint("");
-    // Reset loaded models when key changes so the next dropdown open re-fetches
-    if (state.provider === PROVIDERS.OPENAI_COMPATIBLE) {
-      resetCompatModels();
-    }
-  });
-  wireEyeBtn("apiKeyCardEye", "eyeIconCard", "apiKeyCard");
-
   // Buttons
   $("runBtn").addEventListener("click", () => startRun({ resume: false }));
   $("pauseBtn").addEventListener("click", requestPause);
@@ -3335,7 +3312,6 @@ async function init() {
   modelDD.setValue(state.model);
   $("baseUrl").value = state.baseUrl;
   $("apiKey").value = state.apiKey;
-  $("apiKeyCard").value = state.apiKey;
   applyProvider();
   updateRunButton();
   // Auto-fetch models on mount if we already have what we need