feat(gui): Models page allowlist editor + search/pagination for large providers (#52)

Wire the Models page to /api/selected-models: per-provider "Only selected"
toggle reveals a checkbox allowlist (empty = all), plus a per-provider search
box and a 60-row render cap with "show more" so a provider exposing thousands of
models stays usable. i18n for en/ko/zh.

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

Author: lidge-jun

gui/src/i18n/en.ts

@@ -145,6 +145,11 @@ export const en = {
   "models.noRouted": "No routed models",
   "models.noRoutedHint": "Log into a provider or add one first.",
   "models.loading": "Loading…",
+  "models.search": "Search models…",
+  "models.showMore": "Show {n} more",
+  "models.allowlistLabel": "Only selected",
+  "models.allowlistHint": "Only checked models ship to the catalog (empty = all). Useful for providers exposing thousands of models.",
+  "models.selectedCount": "{n} selected",
 
   // subagents
   "sub.subtitle": "Codex's {cmd} advertises only the first 5 models (by priority) as overrides. Pick up to 5 here — native gpt or routed — and opencodex sets their catalog priority so exactly these lead. Any other model is still callable by its exact name; this only controls what's shown.",

gui/src/i18n/ko.ts

@@ -145,6 +145,11 @@ export const ko: Record<TKey, string> = {
   "models.noRouted": "라우팅된 모델 없음",
   "models.noRoutedHint": "먼저 프로바이더에 로그인하거나 추가하세요.",
   "models.loading": "불러오는 중…",
+  "models.search": "모델 검색…",
+  "models.showMore": "{n}개 더 보기",
+  "models.allowlistLabel": "선택만 노출",
+  "models.allowlistHint": "체크한 모델만 카탈로그에 노출돼요 (비우면 전체). 수천 개 모델을 노출하는 프로바이더에 유용해요.",
+  "models.selectedCount": "{n}개 선택",
 
   // subagents
   "sub.subtitle": "Codex의 {cmd} 는 우선순위 상위 5개 모델만 오버라이드로 노출합니다. 여기서 최대 5개를 선택하면 — 네이티브 gpt 또는 라우팅된 모델 — opencodex가 카탈로그 우선순위를 설정해 정확히 이들이 앞에 옵니다. 다른 모델도 정확한 이름으로 호출할 수 있으며, 이 설정은 표시 항목만 제어합니다.",

gui/src/i18n/zh.ts

@@ -145,6 +145,11 @@ export const zh: Record<TKey, string> = {
   "models.noRouted": "没有已路由的模型",
   "models.noRoutedHint": "请先登录提供方或添加一个。",
   "models.loading": "加载中…",
+  "models.search": "搜索模型…",
+  "models.showMore": "再显示 {n} 个",
+  "models.allowlistLabel": "仅所选",
+  "models.allowlistHint": "仅勾选的模型进入目录（留空 = 全部）。适用于暴露成千上万模型的提供商。",
+  "models.selectedCount": "已选 {n} 个",
 
   // subagents
   "sub.subtitle": "Codex 的 {cmd} 仅将优先级最高的前 5 个模型作为覆盖项公开。在此最多选择 5 个 — 原生 gpt 或已路由模型 — opencodex 会设置它们的目录优先级，使其正好排在前面。其他模型仍可按确切名称调用；此设置仅控制显示项。",

gui/src/pages/Models.tsx

@@ -19,8 +19,14 @@ interface ProviderContextCapsResponse {
   caps?: Record<string, number>;
 }
 
+interface SelectedModelsResponse {
+  selected?: Record<string, string[]>;
+  available?: Record<string, string[]>;
+}
+
 const CAP_OPTIONS = Array.from({ length: 18 }, (_, i) => 100_000 + i * 50_000); // 100k … 950k
 const CUSTOM_OPTION = "custom";
+const PAGE = 60; // rows rendered per provider before a "show more" (keeps 1000s-of-models providers usable)
 
 function fmtK(n: number): string {
   if (!Number.isFinite(n) || n <= 0) return String(n);
@@ -31,6 +37,10 @@ export default function Models({ apiBase }: { apiBase: string }) {
   const t = useT();
   const [models, setModels] = useState<ModelRow[]>([]);
   const [disabled, setDisabled] = useState<Set<string>>(new Set());
+  const [selected, setSelected] = useState<Record<string, string[]>>({});
+  const [allowlistOn, setAllowlistOn] = useState<Set<string>>(new Set());
+  const [search, setSearch] = useState<Record<string, string>>({});
+  const [limit, setLimit] = useState<Record<string, number>>({});
   const [contextCaps, setContextCaps] = useState<Record<string, number>>({});
   const [contextCapValue, setContextCapValue] = useState(350_000);
   const [customCap, setCustomCap] = useState("");
@@ -44,9 +54,10 @@ export default function Models({ apiBase }: { apiBase: string }) {
 
   const load = async () => {
     try {
-      const [data, capsData] = await Promise.all([
+      const [data, capsData, sel] = await Promise.all([
         fetch(`${apiBase}/api/models`).then(r => r.json()) as Promise<ModelRow[]>,
         fetch(`${apiBase}/api/provider-context-caps`).then(r => r.json()) as Promise<ProviderContextCapsResponse>,
+        fetch(`${apiBase}/api/selected-models`).then(r => r.json()).catch(() => ({})) as Promise<SelectedModelsResponse>,
       ]);
       setModels(data);
       setDisabled(new Set(data.filter(m => m.disabled).map(m => m.namespaced)));
@@ -55,6 +66,15 @@ export default function Models({ apiBase }: { apiBase: string }) {
         : (typeof capsData.cap === "number" && Number.isFinite(capsData.cap) && capsData.cap > 0 ? capsData.cap : undefined);
       if (value !== undefined) setContextCapValue(value);
       setContextCaps(capsData.caps ?? {});
+      const selMap = sel.selected ?? {};
+      setSelected(selMap);
+      // Reveal the allowlist editor for providers that already have a selection; keep any the user
+      // toggled on this session (don't clobber a just-opened, still-empty editor on the 10s refresh).
+      setAllowlistOn(prev => {
+        const next = new Set(prev);
+        for (const [p, ids] of Object.entries(selMap)) if (ids.length > 0) next.add(p);
+        return next;
+      });
     } catch {
       setOk(false); setStatus(t("models.loadFail"));
     } finally {
@@ -101,6 +121,39 @@ export default function Models({ apiBase }: { apiBase: string }) {
     if (next.has(ns)) next.delete(ns); else next.add(ns);
     apply(next);
   };
+
+  const putSelected = async (provider: string, ids: string[]) => {
+    setBusy(true);
+    busyRef.current = true;
+    setStatus("");
+    try {
+      const r = await fetch(`${apiBase}/api/selected-models`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ provider, models: ids }),
+      });
+      if (r.ok) { setSelected(prev => ({ ...prev, [provider]: ids })); setOk(true); setStatus(t("models.applied")); }
+      else { setOk(false); setStatus(t("models.saveFailed")); }
+    } catch {
+      setOk(false); setStatus(t("models.networkError"));
+    } finally {
+      setBusy(false);
+      busyRef.current = false;
+    }
+  };
+
+  const toggleAllowlist = (provider: string) => {
+    const wasOn = allowlistOn.has(provider);
+    setAllowlistOn(prev => { const n = new Set(prev); if (n.has(provider)) n.delete(provider); else n.add(provider); return n; });
+    if (wasOn) void putSelected(provider, []); // turning the allowlist off clears it (revert to all)
+  };
+
+  const toggleSelected = (provider: string, id: string) => {
+    const cur = new Set(selected[provider] ?? []);
+    if (cur.has(id)) cur.delete(id); else cur.add(id);
+    void putSelected(provider, [...cur]);
+  };
+
   const toggleProviderCap = async (provider: string) => {
     setBusy(true);
     busyRef.current = true;
@@ -237,23 +290,52 @@ export default function Models({ apiBase }: { apiBase: string }) {
         const isCollapsed = collapsed.has(provider);
         const activeCount = rows.filter(m => !disabled.has(m.namespaced)).length;
         const capOn = contextCaps[provider] === contextCapValue;
+        const isAllowlist = allowlistOn.has(provider);
+        const sel = new Set(selected[provider] ?? []);
+        const q = (search[provider] ?? "").trim().toLowerCase();
+        const filtered = q ? rows.filter(m => m.id.toLowerCase().includes(q)) : rows;
+        const shown = limit[provider] ?? PAGE;
+        const visible = filtered.slice(0, shown);
+        const remaining = filtered.length - visible.length;
         return (
           <div key={provider} className="card" style={{ marginBottom: 8, overflow: "hidden" }}>
             <div onClick={() => toggleCollapse(provider)}
               className="row" style={{ padding: "10px 12px", background: "var(--raised)", cursor: "pointer" }}>
               <IconChevron style={{ width: 14, height: 14, color: "var(--muted)", transform: isCollapsed ? "none" : "rotate(90deg)", transition: "transform .12s" }} />
               <span style={{ fontWeight: 600, fontSize: 14 }}>{provider}</span>
               <span className="muted mono" style={{ fontSize: 12 }}>{t("models.active", { active: activeCount, total: rows.length })}</span>
+              {isAllowlist && sel.size > 0 && <span className="muted mono" style={{ fontSize: 12 }}>· {t("models.selectedCount", { n: sel.size })}</span>}
               <div style={{ flex: 1 }} />
               <div className="row" onClick={e => e.stopPropagation()} style={{ gap: 6 }}>
+                <Switch on={isAllowlist} onClick={() => toggleAllowlist(provider)} disabled={busy} label={t("models.allowlistLabel")} />
+                <span className="muted mono" style={{ fontSize: 12 }}>{t("models.allowlistLabel")}</span>
                 <Switch on={capOn} onClick={() => toggleProviderCap(provider)} disabled={busy} label={t("models.capValue", { value: fmtK(contextCapValue) })} />
                 <span className="muted mono" style={{ fontSize: 12 }}>{t("models.capValue", { value: fmtK(contextCapValue) })}</span>
               </div>
             </div>
             {!isCollapsed && (
               <div style={{ padding: "6px 12px" }}>
-                {rows.map(m => {
+                {rows.length > PAGE / 2 && (
+                  <input
+                    className="input"
+                    style={{ width: "100%", marginBottom: 6 }}
+                    placeholder={t("models.search")}
+                    value={search[provider] ?? ""}
+                    onChange={e => setSearch(prev => ({ ...prev, [provider]: e.target.value }))}
+                  />
+                )}
+                {isAllowlist && <p className="muted" style={{ fontSize: 12, margin: "2px 0 6px" }}>{t("models.allowlistHint")}</p>}
+                {visible.map(m => {
                   const off = disabled.has(m.namespaced);
+                  if (isAllowlist) {
+                    const on = sel.has(m.id);
+                    return (
+                      <label key={m.namespaced} className="row" style={{ padding: "5px 0", cursor: "pointer", gap: 8 }}>
+                        <input type="checkbox" checked={on} disabled={busy} onChange={() => toggleSelected(provider, m.id)} />
+                        <code className="mono" style={{ fontSize: 13, color: on ? "var(--text)" : "var(--faint)" }}>{m.id}</code>
+                      </label>
+                    );
+                  }
                   return (
                     <div key={m.namespaced} className="row" style={{ padding: "5px 0" }}>
                       <Switch on={!off} onClick={() => toggle(m.namespaced)} disabled={busy} label={m.id} />
@@ -262,6 +344,13 @@ export default function Models({ apiBase }: { apiBase: string }) {
                     </div>
                   );
                 })}
+                {remaining > 0 && (
+                  <button
+                    onClick={() => setLimit(prev => ({ ...prev, [provider]: shown + PAGE }))}
+                    className="btn btn-ghost btn-sm"
+                    style={{ marginTop: 4 }}
+                  >{t("models.showMore", { n: remaining })}</button>
+                )}
               </div>
             )}
           </div>