feat(web): auto-discover models — connection-card datalist + refresh button

Backend already had GET /api/models proxying the endpoint's /v1/models;
the SPA was ignoring it and forcing users to type the full model name.

- api.ts: listModels({base_url, adapter, api_key_env}) returning
  ModelInfo[] (id / owned_by / created).
- store.ts: availableModels / modelsLoading / modelsError / modelsKey
  state plus loadModels() with module-level token cancellation so
  rapid baseUrl edits don't race-write a stale list.
- connection-card.tsx:
  - Mount-time + debounced (350ms) auto-fetch when baseUrl / adapter /
    apiKeyEnv settle, gated on s.hydrated so the very first paint
    hits the .env baseUrl rather than the static OpenAI default.
  - <datalist id="evalbox-model-options"> populated with the live
    list, attached via list= on the model input → native autocomplete
    in Chrome/Edge/Safari/Firefox. Free typing still works for
    gateways that don't expose /v1/models or that omit some served
    models (proxies in front of vLLM commonly do).
  - <ModelStatusPill> shows loading spinner / "{count} models" with
    a refresh button / amber error pill when /v1/models is missing.
- i18n: ko + en strings for models_loading / models_count /
  models_refresh / models_error.

Verified live against cliproxy.kch3dri4n.kr — 8 models discovered,
error pill renders when baseUrl is bogus, restoring the URL re-fetches.

Author: Chedrian07

web_src/src/components/connection-card.tsx

@@ -1,6 +1,6 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { CheckCircle2, XCircle, Loader2 } from "lucide-react";
+import { CheckCircle2, XCircle, Loader2, RefreshCw } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -16,6 +16,22 @@ export function ConnectionCard({ compact = false }: { compact?: boolean }) {
   const [busy, setBusy] = useState(false);
   const [err, setErr] = useState<string | null>(null);
 
+  // Auto-fetch the model list whenever connection inputs settle (debounced).
+  // This gives users a native datalist autocomplete instead of having to type
+  // the full model name. Gateways that don't expose /v1/models surface an
+  // error and we keep the input free-typing.
+  useEffect(() => {
+    if (!s.hydrated) return;
+    if (compact) return;
+    const baseUrl = s.baseUrl.trim();
+    if (!baseUrl) return;
+    const handle = setTimeout(() => {
+      void s.loadModels();
+    }, 350);
+    return () => clearTimeout(handle);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [s.hydrated, s.baseUrl, s.adapter, s.apiKeyEnv, compact]);
+
   async function test() {
     setBusy(true);
     setErr(null);
@@ -65,12 +81,32 @@ export function ConnectionCard({ compact = false }: { compact?: boolean }) {
             />
           </div>
           <div className="space-y-1">
-            <Label>{t("connection.model")}</Label>
+            <Label className="flex items-center justify-between">
+              <span>{t("connection.model")}</span>
+              <ModelStatusPill />
+            </Label>
             <Input
               value={s.model}
               placeholder={t("connection.model_placeholder")!}
+              list="evalbox-model-options"
+              autoComplete="off"
+              spellCheck={false}
               onChange={(e) => s.setConnection({ model: e.target.value })}
+              onFocus={() => {
+                // Refresh on focus if we never loaded — covers the case where
+                // hydration finished after the initial debounce window.
+                if (s.availableModels.length === 0 && !s.modelsLoading) {
+                  void s.loadModels();
+                }
+              }}
             />
+            <datalist id="evalbox-model-options">
+              {s.availableModels.map((m) => (
+                <option key={m.id} value={m.id}>
+                  {m.owned_by ? `${m.owned_by}` : ""}
+                </option>
+              ))}
+            </datalist>
           </div>
           <div className="space-y-1">
             <Label>{t("connection.adapter")}</Label>
@@ -163,6 +199,50 @@ function CapabilityBadge({ ok, label }: { ok: boolean; label: string }) {
   );
 }
 
+function ModelStatusPill() {
+  const { t } = useTranslation();
+  const loading = useApp((s) => s.modelsLoading);
+  const error = useApp((s) => s.modelsError);
+  const count = useApp((s) => s.availableModels.length);
+  const loadModels = useApp((s) => s.loadModels);
+
+  if (loading) {
+    return (
+      <span className="inline-flex items-center gap-1 text-[0.7rem] font-normal text-muted-foreground">
+        <Loader2 className="h-3 w-3 animate-spin" />
+        {t("connection.models_loading")}
+      </span>
+    );
+  }
+  if (error) {
+    return (
+      <span
+        className="text-[0.7rem] font-normal text-amber-500"
+        title={error}
+      >
+        {t("connection.models_error")}
+      </span>
+    );
+  }
+  if (count > 0) {
+    return (
+      <span className="inline-flex items-center gap-1 text-[0.7rem] font-normal text-muted-foreground">
+        {t("connection.models_count", { count })}
+        <button
+          type="button"
+          onClick={() => void loadModels({ force: true })}
+          className="inline-flex items-center text-muted-foreground/70 transition hover:text-foreground"
+          title={t("connection.models_refresh")!}
+          aria-label={t("connection.models_refresh")!}
+        >
+          <RefreshCw className="h-3 w-3" />
+        </button>
+      </span>
+    );
+  }
+  return null;
+}
+
 function hostOnly(url: string): string {
   try {
     return new URL(url).host;

web_src/src/i18n/en.json

@@ -32,7 +32,11 @@
     "model_count": "{{count}} models exposed",
     "latency": "Dry call: {{ms}}ms",
     "thinking_observed": "Thinking observed in dry call",
-    "learned_drop_params": "doctor learned drop_params: {{params}}"
+    "learned_drop_params": "doctor learned drop_params: {{params}}",
+    "models_loading": "Loading models…",
+    "models_count": "{{count}} models",
+    "models_refresh": "Refresh",
+    "models_error": "This gateway doesn't expose /v1/models — type the model name"
   },
   "capability": {
     "title": "Capability",

web_src/src/i18n/ko.json

@@ -32,7 +32,11 @@
     "model_count": "{{count}}개 모델 노출",
     "latency": "Dry call: {{ms}}ms",
     "thinking_observed": "Dry call 에서 thinking 감지됨",
-    "learned_drop_params": "doctor 학습 drop_params: {{params}}"
+    "learned_drop_params": "doctor 학습 drop_params: {{params}}",
+    "models_loading": "모델 목록 불러오는 중…",
+    "models_count": "{{count}}개 모델",
+    "models_refresh": "새로고침",
+    "models_error": "이 게이트웨이는 /v1/models 를 노출하지 않음 — 모델명 직접 입력"
   },
   "capability": {
     "title": "Capability",

web_src/src/lib/api.ts

@@ -99,10 +99,25 @@ export interface ServerDefaults {
   api_keys: Record<string, boolean>;
 }
 
+export interface ModelInfo {
+  id: string;
+  owned_by: string | null;
+  created: number | null;
+}
+
 export const api = {
   health: () => request<{ status: string; version: string }>("/api/health"),
   defaults: () => request<ServerDefaults>("/api/defaults"),
   benchmarks: () => request<BenchmarkInfo[]>("/api/benchmarks"),
+  listModels: (
+    args: { base_url: string; adapter?: string; api_key_env?: string },
+    init?: RequestInit,
+  ) => {
+    const qs = new URLSearchParams({ base_url: args.base_url });
+    if (args.adapter) qs.set("adapter", args.adapter);
+    if (args.api_key_env) qs.set("api_key_env", args.api_key_env);
+    return request<ModelInfo[]>(`/api/models?${qs.toString()}`, init);
+  },
   testConnection: (req: ConnectionRequest) =>
     request<ConnectionResponse>("/api/connection/test", {
       method: "POST",

web_src/src/lib/store.ts

@@ -2,7 +2,8 @@
 // Global app state: connection config, selected benches, run lifecycle.
 
 import { create } from "zustand";
-import type { CapabilityInfo, ConnectionResponse, ServerDefaults } from "./api";
+import { api } from "./api";
+import type { CapabilityInfo, ConnectionResponse, ModelInfo, ServerDefaults } from "./api";
 
 export type Stage = "setup" | "running" | "results";
 
@@ -39,6 +40,17 @@ interface AppState {
   setConnResponse: (resp: ConnectionResponse) => void;
   hydrateFromServer: (d: ServerDefaults) => void;
 
+  // Model discovery (proxy to GET /v1/models on the configured endpoint)
+  availableModels: ModelInfo[];
+  modelsLoading: boolean;
+  /** Last error from /api/models — most gateways without /v1/models surface
+      a 502 here; we keep the input free-typing so users can still set a model. */
+  modelsError: string | null;
+  /** Tuple of inputs the last successful list was fetched for — lets us skip
+      redundant fetches when the user types but hasn't changed the connection. */
+  modelsKey: string | null;
+  loadModels: (opts?: { force?: boolean }) => Promise<void>;
+
   // Setup
   selectedBenches: Set<string>;
   toggleBench: (name: string) => void;
@@ -75,6 +87,11 @@ interface AppState {
   setFinalResult: (r: any | null) => void;
 }
 
+// Module-level token so concurrent loadModels() calls cancel earlier in-flights.
+// (AbortController would also work; this is simpler since fetch() in api.ts
+// doesn't take a signal yet and we only need "ignore stale results".)
+let _modelsLoadToken = 0;
+
 const detectDefaultBaseUrl = (): string => {
   // Try to read EVALBOX_BASE_URL via a meta tag if the host injected one.
   if (typeof document !== "undefined") {
@@ -84,7 +101,7 @@ const detectDefaultBaseUrl = (): string => {
   return "https://api.openai.com/v1";
 };
 
-export const useApp = create<AppState>((set) => ({
+export const useApp = create<AppState>((set, get) => ({
   baseUrl: detectDefaultBaseUrl(),
   model: "gpt-4o-mini",
   adapter: "auto",
@@ -95,6 +112,39 @@ export const useApp = create<AppState>((set) => ({
   hasServerApiKey: false,
   serverApiKeys: {},
   hydrated: false,
+  availableModels: [],
+  modelsLoading: false,
+  modelsError: null,
+  modelsKey: null,
+  loadModels: async (opts) => {
+    const s = get();
+    const baseUrl = s.baseUrl.trim();
+    if (!baseUrl) {
+      set({ availableModels: [], modelsError: null, modelsKey: null });
+      return;
+    }
+    const key = `${baseUrl}|${s.adapter}|${s.apiKeyEnv}`;
+    if (!opts?.force && key === s.modelsKey && s.availableModels.length > 0) return;
+    const token = ++_modelsLoadToken;
+    set({ modelsLoading: true, modelsError: null });
+    try {
+      const list = await api.listModels({
+        base_url: baseUrl,
+        adapter: s.adapter,
+        api_key_env: s.apiKeyEnv,
+      });
+      if (token !== _modelsLoadToken) return; // stale
+      set({ availableModels: list, modelsLoading: false, modelsKey: key });
+    } catch (e: any) {
+      if (token !== _modelsLoadToken) return;
+      set({
+        availableModels: [],
+        modelsLoading: false,
+        modelsError: e?.message?.slice(0, 200) || "list_models failed",
+        modelsKey: null,
+      });
+    }
+  },
   setConnection: (patch) =>
     set((prev) => {
       const next: Partial<AppState> = { ...patch };