diff --git a/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.test.tsx b/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.test.tsx
index a70b7602e5b..5ac3b8b2b64 100644
--- a/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.test.tsx
@@ -1,7 +1,9 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactElement, ReactNode } from "react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import type { RouterSettingsFormValue } from "../router_settings/RouterSettingsForm";
+import { fetchAvailableModels, fetchAvailableModelsForTeam } from "@/components/llm_calls/fetch_models";
import RouterSettingsAccordion, { RouterSettingsAccordionValue } from "./RouterSettingsAccordion";
vi.mock("../networking", () => ({
@@ -9,11 +11,14 @@ vi.mock("../networking", () => ({
}));
vi.mock("@/components/llm_calls/fetch_models", () => ({
- fetchAvailableModels: vi.fn().mockResolvedValue([]),
+ fetchAvailableModels: vi.fn().mockResolvedValue([{ model_group: "global-model" }]),
+ fetchAvailableModelsForTeam: vi.fn().mockResolvedValue([{ model_group: "openai/*" }, { model_group: "gpt-5" }]),
}));
vi.mock("../Settings/RouterSettings/Fallbacks/FallbackSelectionForm", () => ({
- FallbackSelectionForm: () => null,
+ FallbackSelectionForm: ({ availableModels }: { availableModels: string[] }) => (
+
{availableModels.join(",")}
+ ),
}));
vi.mock("@tremor/react", () => ({
@@ -39,9 +44,19 @@ vi.mock("../router_settings/RouterSettingsForm", () => ({
),
}));
+const renderWithQueryClient = (ui: ReactElement) => {
+ const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+ return render(ui, {
+ wrapper: ({ children }: { children: ReactNode }) => (
+ {children}
+ ),
+ });
+};
+
describe("RouterSettingsAccordion", () => {
beforeEach(() => {
- vi.useFakeTimers();
+ vi.clearAllMocks();
+ vi.useFakeTimers({ shouldAdvanceTime: true });
});
afterEach(() => {
@@ -58,7 +73,7 @@ describe("RouterSettingsAccordion", () => {
it("debounces propagation and calls onChange once with the last value", async () => {
const onChange = vi.fn<(value: RouterSettingsAccordionValue) => void>();
- render();
+ renderWithQueryClient();
await flushInitialPropagation(onChange);
fireEvent.click(screen.getByText("set-least-busy"));
@@ -81,9 +96,51 @@ describe("RouterSettingsAccordion", () => {
expect(onChange.mock.calls[0][0].router_settings.routing_strategy).toBe("usage-based-routing");
});
+ it("offers the team's own models, including team-scoped BYOK ones, when a teamId is given", async () => {
+ renderWithQueryClient();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("available-models")).toHaveTextContent("gpt-5,openai/*");
+ });
+ expect(fetchAvailableModelsForTeam).toHaveBeenCalledWith("test-token", "team-123");
+ expect(fetchAvailableModels).not.toHaveBeenCalled();
+ });
+
+ it("falls back to the proxy-wide model listing when no teamId is given", async () => {
+ renderWithQueryClient();
+
+ await waitFor(() => {
+ expect(screen.getByTestId("available-models")).toHaveTextContent("global-model");
+ });
+ expect(fetchAvailableModelsForTeam).not.toHaveBeenCalled();
+ });
+
+ it("ignores a stale team's model response that resolves after a newer team was selected", async () => {
+ const resolvers: ((models: { model_group: string }[]) => void)[] = [];
+ vi.mocked(fetchAvailableModelsForTeam).mockImplementation(
+ () => new Promise((resolve) => resolvers.push(resolve)) as Promise<{ model_group: string }[]>,
+ );
+
+ const { rerender } = renderWithQueryClient();
+ await waitFor(() => expect(resolvers).toHaveLength(1));
+
+ rerender();
+ await waitFor(() => expect(resolvers).toHaveLength(2));
+
+ await act(async () => {
+ resolvers[1]([{ model_group: "fast-team-model" }]);
+ resolvers[0]([{ model_group: "slow-team-model" }]);
+ });
+
+ await waitFor(() => {
+ expect(screen.getByTestId("available-models")).toHaveTextContent("fast-team-model");
+ });
+ expect(screen.getByTestId("available-models")).not.toHaveTextContent("slow-team-model");
+ });
+
it("does not call onChange when unmounted mid-wait", async () => {
const onChange = vi.fn<(value: RouterSettingsAccordionValue) => void>();
- const { unmount } = render();
+ const { unmount } = renderWithQueryClient();
await flushInitialPropagation(onChange);
fireEvent.click(screen.getByText("set-least-busy"));
diff --git a/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx b/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx
index 08b917e302f..56227abe9ea 100644
--- a/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx
@@ -1,12 +1,13 @@
import React, { useEffect, useState, useImperativeHandle, forwardRef, useRef } from "react";
import { TabPanel, TabPanels, TabGroup, TabList, Tab } from "@tremor/react";
+import { useQuery } from "@tanstack/react-query";
import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
import { getRouterSettingsCall } from "../networking";
import RouterSettingsForm, { RouterSettingsFormValue } from "../router_settings/RouterSettingsForm";
import { Fallbacks } from "../Settings/RouterSettings/Fallbacks/AddFallbacks";
import { FallbackSelectionForm } from "../Settings/RouterSettings/Fallbacks/FallbackSelectionForm";
import { FallbackGroup } from "../Settings/RouterSettings/Fallbacks/FallbackGroupConfig";
-import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
+import { fetchAvailableModels, fetchAvailableModelsForTeam, ModelGroup } from "@/components/llm_calls/fetch_models";
export interface RouterSettingsAccordionValue {
router_settings: {
@@ -30,6 +31,7 @@ interface RouterSettingsAccordionProps {
value?: RouterSettingsAccordionValue;
onChange?: (value: RouterSettingsAccordionValue) => void;
modelData?: any;
+ teamId?: string | null;
}
export interface RouterSettingsAccordionRef {
@@ -39,7 +41,7 @@ export interface RouterSettingsAccordionRef {
const PROPAGATE_WAIT_MS = 100;
const RouterSettingsAccordion = forwardRef(
- ({ accessToken, value, onChange, modelData }, ref) => {
+ ({ accessToken, value, onChange, modelData, teamId }, ref) => {
const [formValue, setFormValue] = useState({
routerSettings: {},
selectedStrategy: null,
@@ -47,7 +49,6 @@ const RouterSettingsAccordion = forwardRef([]);
const [fallbackGroups, setFallbackGroups] = useState([]);
- const [modelInfo, setModelInfo] = useState([]);
const [availableRoutingStrategies, setAvailableRoutingStrategies] = useState([]);
const [routerFieldsMetadata, setRouterFieldsMetadata] = useState<{ [key: string]: any }>({});
const [routingStrategyDescriptions, setRoutingStrategyDescriptions] = useState<{ [key: string]: string }>({});
@@ -175,21 +176,11 @@ const RouterSettingsAccordion = forwardRef {
- if (!accessToken) {
- return;
- }
- const loadModels = async () => {
- try {
- const uniqueModels = await fetchAvailableModels(accessToken);
- setModelInfo(uniqueModels);
- } catch (error) {
- console.error("Error fetching model info for fallbacks:", error);
- }
- };
- loadModels();
- }, [accessToken]);
+ const { data: modelInfo = [] } = useQuery({
+ queryKey: ["fallbackAvailableModels", accessToken, teamId ?? null],
+ queryFn: () => (teamId ? fetchAvailableModelsForTeam(accessToken, teamId) : fetchAvailableModels(accessToken)),
+ enabled: Boolean(accessToken),
+ });
// Helper function to build router_settings from current state
const buildRouterSettings = (): RouterSettingsAccordionValue["router_settings"] => {
diff --git a/ui/litellm-dashboard/src/components/llm_calls/fetch_models.test.tsx b/ui/litellm-dashboard/src/components/llm_calls/fetch_models.test.tsx
new file mode 100644
index 00000000000..bd691c7f629
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/llm_calls/fetch_models.test.tsx
@@ -0,0 +1,33 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { modelAvailableCall } from "@/components/networking";
+import { fetchAvailableModelsForTeam } from "./fetch_models";
+
+vi.mock("@/components/networking", () => ({
+ modelAvailableCall: vi.fn(),
+ modelHubCall: vi.fn(),
+}));
+
+const modelAvailableCallMock = vi.mocked(modelAvailableCall);
+
+describe("fetchAvailableModelsForTeam", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("requests the models scoped to the team so team-only BYOK models are included", async () => {
+ modelAvailableCallMock.mockResolvedValue({
+ data: [{ id: "all-proxy-models" }, { id: "openai/*" }, { id: "gpt-5-mini" }, { id: "openai/*" }],
+ });
+
+ const models = await fetchAvailableModelsForTeam("token", "team-123");
+
+ expect(modelAvailableCallMock).toHaveBeenCalledWith("token", "", "", false, "team-123");
+ expect(models).toEqual([{ model_group: "gpt-5-mini" }, { model_group: "openai/*" }]);
+ });
+
+ it("returns an empty list when the team has no models", async () => {
+ modelAvailableCallMock.mockResolvedValue({ data: [] });
+
+ expect(await fetchAvailableModelsForTeam("token", "team-123")).toEqual([]);
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/llm_calls/fetch_models.tsx b/ui/litellm-dashboard/src/components/llm_calls/fetch_models.tsx
index 0de98330c2e..a1690b1307e 100644
--- a/ui/litellm-dashboard/src/components/llm_calls/fetch_models.tsx
+++ b/ui/litellm-dashboard/src/components/llm_calls/fetch_models.tsx
@@ -1,12 +1,22 @@
// fetch_models.ts
-import { modelHubCall } from "@/components/networking";
+import { excludeProxyWideSentinel } from "@/components/key_team_helpers/fetch_available_models_team_key";
+import { modelAvailableCall, modelHubCall } from "@/components/networking";
export interface ModelGroup {
model_group: string;
mode?: string;
}
+export const fetchAvailableModelsForTeam = async (accessToken: string, teamId: string): Promise => {
+ const response = await modelAvailableCall(accessToken, "", "", false, teamId);
+ const modelNames: string[] = (response?.data ?? []).map((model: { id: string }) => model.id);
+
+ return excludeProxyWideSentinel(Array.from(new Set(modelNames)))
+ .sort((a, b) => a.localeCompare(b))
+ .map((model) => ({ model_group: model }));
+};
+
/**
* Fetches available models using modelHubCall and formats them for the selection dropdown.
*/
diff --git a/ui/litellm-dashboard/src/components/team/TeamInfo.tsx b/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
index e57bf59b2da..6c6fdcaedd6 100644
--- a/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
+++ b/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
@@ -1215,6 +1215,7 @@ const TeamInfoView: React.FC = ({