From 8d5f43e8063b48f6f518c7110904ec110bbf3c00 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaan@berri.ai>
Date: Wed, 22 Apr 2026 17:11:18 -0700
Subject: [PATCH] fetch available models in EvalsCatalog on mount so judge
 model dropdown is populated

Without this, navigating directly to Evals without visiting Models first
leaves availableModels empty and the judge model select unusable.
---
 .../src/components/evals/EvalsCatalog.tsx       | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/evals/EvalsCatalog.tsx b/ui/litellm-dashboard/src/components/evals/EvalsCatalog.tsx
index a1f29590010..64d7a74d78b 100644
--- a/ui/litellm-dashboard/src/components/evals/EvalsCatalog.tsx
+++ b/ui/litellm-dashboard/src/components/evals/EvalsCatalog.tsx
@@ -15,7 +15,7 @@ import {
   message,
 } from "antd";
 import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
-import { createLiteLLMEval, listLiteLLMEvals, deleteLiteLLMEval } from "../networking";
+import { createLiteLLMEval, listLiteLLMEvals, deleteLiteLLMEval, modelAvailableCall } from "../networking";
 
 const { Title, Text } = Typography;
 
@@ -44,11 +44,12 @@ interface Props {
   availableModels?: string[];
 }
 
-export default function EvalsCatalog({ accessToken, userRole, availableModels = [] }: Props) {
+export default function EvalsCatalog({ accessToken, userRole, availableModels: availableModelsProp = [] }: Props) {
   const [evals, setEvals] = useState<LiteLLMEval[]>([]);
   const [loading, setLoading] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [availableModels, setAvailableModels] = useState<string[]>(availableModelsProp);
   const [form] = Form.useForm();
 
   const fetchEvals = async () => {
@@ -64,8 +65,20 @@ export default function EvalsCatalog({ accessToken, userRole, availableModels =
     }
   };
 
+  const fetchModels = async () => {
+    if (!accessToken || availableModelsProp.length > 0) return;
+    try {
+      const data = await modelAvailableCall(accessToken, null, null);
+      const names: string[] = data?.data?.map((m: any) => m.id) ?? [];
+      setAvailableModels(names);
+    } catch {
+      // best-effort; leave empty
+    }
+  };
+
   useEffect(() => {
     fetchEvals();
+    fetchModels();
   }, [accessToken]);
 
   const handleCreate = async (values: any) => {