From 30b8db325e85740eb86901d08597da845b206504 Mon Sep 17 00:00:00 2001 From: "devin-ai-integration[bot]" <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Wed, 14 Oct 2026 09:38:25 +0000 Subject: [PATCH] feat(ui): show decision models as decisions and list the supported ones in the AI Hub (#45965) * feat(ui): show decision models as decisions and list the supported ones in the AI Hub * fix(ui): gate the decision garden's Add model links and sort the Mode column by its label The garden shows Add model only for providers the Add Model form can create and only when the session can add models, since a view-only admin's session role reads as Admin. The AI Hub's Mode column sorts by the label it shows, and the Models page parses its tab slug as a string literal * fix(ui): label the make-public dialog's decision models, clear the prefill after the add, and gate the garden's Add model by the Models page's rule * fix(ui): drop the dead decisions billing-row filter and the unread team fetch on the AI Hub The /decisions/ cost map keys never shipped, so the garden filter matched nothing. The AI Hub page fetched /team/list for every visitor and read it for nobody, since only proxy admins reach the add-model check. The org-admin page test now asserts the role string a session carries * fix(ui): keep self-hosted decision models off the /v1/decisions claim, order the garden one per provider, and show the decisions example on the public hub * fix(ui): mark decision models this proxy cannot serve yet in the AI Hub garden * fix(ui): use singular wording in the decision garden header when one model is left * fix(ui): list gpt-6-luna in the decision garden, send Foundry to its deployment-name docs, and record Models page tab clicks * fix(ui): say the decisions filter matched no model in decisions mode, and mock usePathname in the Models page integration test * fix(ui): stop saying deployed decision models still need adding --------- Co-authored-by: mateo-berri <277851410+mateo-berri@users.noreply.github.com> --- .../providers/useProxyDecisionProviders.ts | 17 ++ .../(dashboard)/model-hub-table/page.test.tsx | 57 ++++ .../app/(dashboard)/model-hub-table/page.tsx | 8 +- .../page.integration.test.tsx | 5 +- .../models-and-endpoints/page.test.tsx | 91 +++++- .../(dashboard)/models-and-endpoints/page.tsx | 46 ++- .../panels/AddModelPanel.integration.test.tsx | 80 ++++- .../panels/AddModelPanel.tsx | 38 ++- .../src/app/model_hub_table/page.tsx | 1 + .../components/AIHub/DecisionModelGarden.tsx | 159 ++++++++++ .../components/AIHub/ModelHubTable.test.tsx | 275 +++++++++++++++++- .../src/components/AIHub/ModelHubTable.tsx | 47 ++- .../components/AIHub/ModelHubTableColumns.tsx | 2 +- .../AIHub/forms/MakeModelPublicForm.test.tsx | 13 + .../AIHub/forms/MakeModelPublicForm.tsx | 3 +- .../components/PublicModelHubTableColumns.tsx | 3 +- .../src/components/model_filters.tsx | 15 +- .../publicModelHubFilters.test.ts | 6 + .../publicModelHub/publicModelHubFilters.ts | 3 + .../src/components/public_model_hub.test.tsx | 48 ++- .../src/components/public_model_hub.tsx | 77 +++-- .../src/lib/decisionModels.test.ts | 121 +++++++- .../src/lib/decisionModels.ts | 68 ++++- 23 files changed, 1086 insertions(+), 97 deletions(-) create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/hooks/providers/useProxyDecisionProviders.ts create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.test.tsx create mode 100644 ui/litellm-dashboard/src/components/AIHub/DecisionModelGarden.tsx diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/providers/useProxyDecisionProviders.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/providers/useProxyDecisionProviders.ts new file mode 100644 index 00000000000..fd79bb2fbb4 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/providers/useProxyDecisionProviders.ts @@ -0,0 +1,17 @@ +import { getGuardrailUISettings } from "@/components/networking"; +import { parseProxyDecisionProviders } from "@/lib/decisionModels"; +import { useQuery } from "@tanstack/react-query"; +import { createQueryKeys } from "../common/queryKeysFactory"; + +const proxyDecisionProvidersKeys = createQueryKeys("proxyDecisionProviders"); + +export const useProxyDecisionProviders = (accessToken: string | null) => { + const query = { + queryKey: proxyDecisionProvidersKeys.list({}), + queryFn: async () => parseProxyDecisionProviders(await getGuardrailUISettings(accessToken ?? "")), + enabled: accessToken !== null, + retry: false, + staleTime: 24 * 60 * 60 * 1000, + }; + return useQuery(query); +}; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.test.tsx new file mode 100644 index 00000000000..c6348cdb052 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.test.tsx @@ -0,0 +1,57 @@ +import { render, screen } from "@testing-library/react"; +import { beforeEach, describe, expect, it, vi } from "vitest"; +import ModelHubTablePage from "./page"; + +const mockUseAuthorized = vi.fn(); +const hubProps = vi.fn(); + +vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ default: () => mockUseAuthorized() })); +vi.mock("@/components/AIHub/ModelHubTable", () => ({ + default: (props: { canAddModels: boolean }) => { + hubProps(props); + return
; + }, +})); +vi.mock("@/components/public_model_hub", () => ({ + default: () =>
, +})); + +const session = (userRole: string, isViewOnly = false) => ({ + accessToken: "token", + userRole, + userId: "user-1", + premiumUser: false, + isViewOnly, +}); + +describe("ModelHubTablePage", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("lets a proxy admin add models from the garden", () => { + mockUseAuthorized.mockReturnValue(session("Admin")); + render(); + expect(hubProps).toHaveBeenCalledWith(expect.objectContaining({ canAddModels: true })); + }); + + it("keeps the garden read-only for a view-only admin", () => { + mockUseAuthorized.mockReturnValue(session("Admin", true)); + render(); + expect(hubProps).toHaveBeenCalledWith(expect.objectContaining({ canAddModels: false })); + }); + + it("sends an org admin to the public hub under the role string a session carries", () => { + mockUseAuthorized.mockReturnValue(session("Org Admin")); + render(); + expect(screen.getByTestId("public-model-hub")).toBeInTheDocument(); + expect(hubProps).not.toHaveBeenCalled(); + }); + + it("sends a non-admin to the public hub", () => { + mockUseAuthorized.mockReturnValue(session("internal_user")); + render(); + expect(screen.getByTestId("public-model-hub")).toBeInTheDocument(); + expect(hubProps).not.toHaveBeenCalled(); + }); +}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.tsx index c9eb8762ed2..d402af41112 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.tsx @@ -3,13 +3,18 @@ import ModelHubTable from "@/components/AIHub/ModelHubTable"; import PublicModelHub from "@/components/public_model_hub"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; +import { canCreateModels } from "@/utils/modelPermissions"; import { isAdminRole } from "@/utils/roles"; export default function ModelHubTablePage() { - const { accessToken, userRole, premiumUser, isViewOnly } = useAuthorized(); + const { accessToken, userRole, userId: userID, premiumUser, isViewOnly } = useAuthorized(); if (!isAdminRole(userRole)) { return ; } + const canAddModels = canCreateModels( + { userRole, userID, isViewOnly }, + { teams: null, disabledForInternalUsers: false }, + ); return ( ); } diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.integration.test.tsx index fa62f43c2d1..4d18966625e 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.integration.test.tsx @@ -39,7 +39,10 @@ vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ }), })); -vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) })); +vi.mock("next/navigation", () => ({ + useRouter: () => ({ push: vi.fn() }), + usePathname: () => "/ui/models-and-endpoints", +})); vi.mock("@/components/networking", () => ({ serverRootPath: "", diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.test.tsx index a9cb68ae8dd..3cfed7297c8 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.test.tsx @@ -1,10 +1,15 @@ /* @vitest-environment jsdom */ -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { render, screen } from "@testing-library/react"; +import { screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { beforeEach, describe, expect, it, vi } from "vitest"; +import type { OnUrlUpdateFunction } from "nuqs/adapters/testing"; +import { beforeEach, describe, expect, it, vi, type Mock } from "vitest"; +import { renderWithProviders } from "../../../../tests/test-utils"; +import { recordUiEvent } from "@/lib/telemetry/uiEvents"; import ModelsAndEndpointsPage from "./page"; +vi.mock("@/lib/telemetry/uiEvents", () => ({ recordUiEvent: vi.fn(() => Promise.resolve()) })); +vi.mock("next/navigation", () => ({ usePathname: () => "/ui/models-and-endpoints" })); + vi.mock("./panels/AllModelsPanel", () => ({ default: () =>
})); vi.mock("./panels/AddModelPanel", () => ({ default: () =>
})); vi.mock("./panels/AutoRoutersTabPanel", () => ({ default: () =>
})); @@ -61,14 +66,13 @@ const NON_ADMIN = { // A proxy_admin_viewer session: effectiveSessionRole masquerades the role as "Admin". const VIEW_ONLY_ADMIN = { ...ADMIN, isViewOnly: true }; -const renderPage = () => { - const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 } } }); - return render( - - - , - ); -}; +const renderPage = (options?: { searchParams?: string; onUrlUpdate?: OnUrlUpdateFunction }) => + renderWithProviders(, options); + +const lastUrlParams = (onUrlUpdate: Mock): URLSearchParams | undefined => + onUrlUpdate.mock.calls.at(-1)?.[0].searchParams; + +const ADD_MODEL_PREFILL_LINK = "?tab=add&provider=typesafe&litellm_model=typesafe%2Fjev-latest"; describe("ModelsAndEndpointsPage", () => { beforeEach(() => { @@ -224,4 +228,69 @@ describe("ModelsAndEndpointsPage", () => { expect(screen.queryByRole("tab", { name: /Auto-Routers/ })).not.toBeInTheDocument(); }); }); + + describe("tab from the URL", () => { + it("opens the Add Model tab from ?tab=add for an admin", () => { + renderPage({ searchParams: "?tab=add" }); + + expect(screen.getByRole("tab", { name: "Add Model" })).toHaveAttribute("aria-selected", "true"); + expect(screen.getByTestId("panel-add")).toBeInTheDocument(); + expect(screen.queryByTestId("panel-all-models")).not.toBeInTheDocument(); + }); + + it("falls back to Deployed Models on ?tab=add for a view-only admin, who has no Add Model tab", () => { + mockUseAuthorized.mockReturnValue(VIEW_ONLY_ADMIN); + renderPage({ searchParams: "?tab=add" }); + + expect(screen.getByRole("tab", { name: "Deployed Models" })).toHaveAttribute("aria-selected", "true"); + expect(screen.getByTestId("panel-all-models")).toBeInTheDocument(); + expect(screen.queryByTestId("panel-add")).not.toBeInTheDocument(); + }); + + it("falls back to Deployed Models on an unknown ?tab", () => { + renderPage({ searchParams: "?tab=nope" }); + + expect(screen.getByRole("tab", { name: "Deployed Models" })).toHaveAttribute("aria-selected", "true"); + expect(screen.getByTestId("panel-all-models")).toBeInTheDocument(); + }); + + it("records a UI event for each tab the user clicks", async () => { + const user = userEvent.setup(); + renderPage(); + + await user.click(screen.getByRole("tab", { name: "Health Status" })); + + expect(recordUiEvent).toHaveBeenCalledWith({ + page: "models-and-endpoints", + action: "click", + target: "tab=health", + }); + }); + + it("writes the clicked tab to the URL and clears it for Deployed Models", async () => { + const user = userEvent.setup(); + const onUrlUpdate = vi.fn(); + renderPage({ onUrlUpdate }); + + await user.click(screen.getByRole("tab", { name: "Health Status" })); + await waitFor(() => expect(lastUrlParams(onUrlUpdate)?.get("tab")).toBe("health")); + expect(screen.getByTestId("panel-health")).toBeInTheDocument(); + + await user.click(screen.getByRole("tab", { name: "Deployed Models" })); + await waitFor(() => expect(lastUrlParams(onUrlUpdate)?.get("tab")).toBeNull()); + expect(screen.getByTestId("panel-all-models")).toBeInTheDocument(); + }); + + it("drops the Add Model prefill params when the user leaves the tab", async () => { + const user = userEvent.setup(); + const onUrlUpdate = vi.fn(); + renderPage({ searchParams: ADD_MODEL_PREFILL_LINK, onUrlUpdate }); + + await user.click(screen.getByRole("tab", { name: "Deployed Models" })); + + await waitFor(() => expect(lastUrlParams(onUrlUpdate)?.get("tab")).toBeNull()); + expect(lastUrlParams(onUrlUpdate)?.get("provider")).toBeNull(); + expect(lastUrlParams(onUrlUpdate)?.get("litellm_model")).toBeNull(); + }); + }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx index a54c4ee7292..9f1ee04c5a2 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx @@ -2,10 +2,12 @@ import { useMemo, useState } from "react"; import { RefreshCw } from "lucide-react"; +import { parseAsString, useQueryStates } from "nuqs"; import { useQueryClient } from "@tanstack/react-query"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams"; import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings"; +import { useUrlTab } from "@/hooks/useUrlTab"; import { all_admin_roles, internalUserRoles } from "@/utils/roles"; import { autoRouterCreationScope, canCreateModels } from "@/utils/modelPermissions"; import BetaBadge from "@/components/BetaBadge"; @@ -27,19 +29,26 @@ import PriceDataPanel from "@/app/(dashboard)/models-and-endpoints/panels/PriceD import { Button } from "@/components/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -type ModelTabSlug = - | "add" - | "auto-routers" - | "llm-credentials" - | "pass-through" - | "health" - | "retry-settings" - | "model-group-alias" - | "access-group-budgets" - | "price-data"; +const MODEL_TAB_SLUGS = [ + "add", + "auto-routers", + "llm-credentials", + "pass-through", + "health", + "retry-settings", + "model-group-alias", + "access-group-budgets", + "price-data", +] as const; + +type ModelTabSlug = (typeof MODEL_TAB_SLUGS)[number]; const BASE_TAB_KEY = "all-models"; +const TAB_KEYS = [BASE_TAB_KEY, ...MODEL_TAB_SLUGS] as const; + +const PREFILL_URL_PARAMS = { provider: parseAsString, litellm_model: parseAsString }; + const TAB_LABELS: Record = { add: "Add Model", "auto-routers": "Auto-Routers", @@ -87,7 +96,8 @@ export default function ModelsAndEndpointsPage() { const { modelId, teamId, close } = useModelDetailRouting(); const { availableModelAccessGroups, allModelsOnProxy } = useModelDashboardData(); - const [activeKey, setActiveKey] = useState(BASE_TAB_KEY); + const [requestedTab, setRequestedTab] = useUrlTab(TAB_KEYS, BASE_TAB_KEY); + const [, setPrefillParams] = useQueryStates(PREFILL_URL_PARAMS); const [lastRefreshed, setLastRefreshed] = useState(""); const isInternalUser = userRole && internalUserRoles.includes(userRole); @@ -124,6 +134,18 @@ export default function ModelsAndEndpointsPage() { [canCreate, canViewAutoRouters, isAdmin, isInternalUser, isViewOnly], ); + const visibleKeys: readonly string[] = visibleSlugs.map((slug) => slug || BASE_TAB_KEY); + const activeKey = visibleKeys.includes(requestedTab) ? requestedTab : BASE_TAB_KEY; + + const handleTabChange = (key: string) => { + const next = TAB_KEYS.find((tabKey) => tabKey === key); + if (next === undefined) { + return; + } + setRequestedTab(next); + void setPrefillParams({ provider: null, litellm_model: null }); + }; + const allModelsLabel = isAdmin ? "Deployed Models" : "Your Models"; const tabLabel = (slug: "" | ModelTabSlug): React.ReactNode => { if (!slug) return allModelsLabel; @@ -192,7 +214,7 @@ export default function ModelsAndEndpointsPage() { modelAccessGroups={availableModelAccessGroups} /> ) : ( - +
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/AddModelPanel.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/AddModelPanel.integration.test.tsx index 05560c9e7cd..99656df3b0e 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/AddModelPanel.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/AddModelPanel.integration.test.tsx @@ -1,5 +1,6 @@ import { useSyncExternalStore } from "react"; import { act, renderWithProviders, screen, waitFor, within } from "../../../../../tests/test-utils"; +import type { OnUrlUpdateFunction } from "nuqs/adapters/testing"; import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event"; import { beforeEach, describe, expect, it, vi } from "vitest"; import AddModelPanel from "./AddModelPanel"; @@ -140,9 +141,9 @@ const baseModelInfo = { access_groups: undefined, mode: undefined }; const { api_base: _omitted, ...ALWAYS_MOUNTED_WITHOUT_API_BASE } = alwaysMounted; -const setup = async () => { +const setup = async (searchParams?: string, onUrlUpdate?: OnUrlUpdateFunction) => { const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never }); - renderWithProviders(); + renderWithProviders(, { searchParams, onUrlUpdate }); await screen.findByText("Provider"); const openAdvanced = async () => { @@ -595,3 +596,78 @@ describe("AddModelPanel decision models", () => { expect(note).not.toHaveTextContent("/chat/completions"); }); }); + +describe("AddModelPanel prefill from the URL", () => { + const COST_MAP = { + "typesafe/jev-latest": { litellm_provider: "typesafe", mode: "evaluation" }, + "gpt-4o-2024-08-06": { litellm_provider: "openai", mode: "chat" }, + }; + + beforeEach(() => { + vi.clearAllMocks(); + mockUseModelCostMap.mockReturnValue({ data: COST_MAP }); + mockPtuEnabled.mockReturnValue(false); + mockAuthorized.mockReturnValue(PROXY_ADMIN); + }); + + it("preselects the provider and model named in the URL and submits that model", async () => { + const { submit } = await setup("?provider=typesafe&litellm_model=typesafe%2Fjev-latest"); + + await waitFor(() => expect(screen.getByRole("combobox", { name: /provider/i })).toHaveValue("TypeSafe")); + expect(screen.getByRole("combobox", { name: "Select models" })).toBeInTheDocument(); + expect(screen.getByDisplayValue("typesafe/jev-latest")).toBeInTheDocument(); + expect(await screen.findByRole("note", { name: "Decision model notice" })).toBeInTheDocument(); + + await submit(); + + expect(lastCreatedModel()).toStrictEqual({ + model_name: "typesafe/jev-latest", + litellm_params: { api_key: undefined, custom_llm_provider: "typesafe", model: "typesafe/jev-latest" }, + model_info: { ...baseModelInfo }, + }); + }); + + it("drops the prefill params from the URL once the prefilled model is added", async () => { + const onUrlUpdate = vi.fn(); + const { submit } = await setup("?provider=typesafe&litellm_model=typesafe%2Fjev-latest", onUrlUpdate); + await waitFor(() => expect(screen.getByRole("combobox", { name: /provider/i })).toHaveValue("TypeSafe")); + + await submit(); + + await waitFor(() => { + const params = onUrlUpdate.mock.calls.at(-1)?.[0].searchParams; + expect(params?.has("provider")).toBe(false); + expect(params?.has("litellm_model")).toBe(false); + }); + }); + + it("leaves the form on its defaults when the provider slug matches no provider, model included", async () => { + const { submitExpectingRejection } = await setup("?provider=unknownslug&litellm_model=typesafe%2Fjev-latest"); + + expect(screen.getByRole("combobox", { name: /provider/i })).toHaveValue(""); + expect(screen.queryByDisplayValue("typesafe/jev-latest")).not.toBeInTheDocument(); + + await submitExpectingRejection("Required"); + + expect(modelCreateCall).not.toHaveBeenCalled(); + }); + + it("keeps a provider the user picks after the prefill instead of re-applying the URL", async () => { + const { user, submit } = await setup("?provider=typesafe&litellm_model=typesafe%2Fjev-latest"); + await waitFor(() => expect(screen.getByRole("combobox", { name: /provider/i })).toHaveValue("TypeSafe")); + + const provider = screen.getByRole("combobox", { name: /provider/i }); + await user.clear(provider); + await user.type(provider, "OpenAI"); + await user.click(await screen.findByRole("option", { name: /OpenAI/ })); + await user.click(await screen.findByPlaceholderText("Select models")); + await user.click(await screen.findByText("gpt-4o-2024-08-06")); + await submit(); + + expect(lastCreatedModel()).toStrictEqual({ + model_name: "gpt-4o-2024-08-06", + litellm_params: { ...alwaysMounted, model: "gpt-4o-2024-08-06" }, + model_info: { ...baseModelInfo }, + }); + }); +}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/AddModelPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/AddModelPanel.tsx index 4703bda8d20..392a3c3940a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/AddModelPanel.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/panels/AddModelPanel.tsx @@ -1,7 +1,8 @@ "use client"; -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { useForm, useWatch } from "react-hook-form"; +import { parseAsString, useQueryStates } from "nuqs"; import { useQueryClient } from "@tanstack/react-query"; import AddModelForm from "@/components/add_model/AddModelForm"; import { handleAddModelSubmit } from "@/components/add_model/handle_add_model_submit"; @@ -13,12 +14,15 @@ import { import { Providers, getPlaceholder, getProviderModels } from "@/components/provider_info_helpers"; import { useModelCostMap } from "@/app/(dashboard)/hooks/models/useModelCostMap"; import { useCredentials } from "@/app/(dashboard)/hooks/credentials/useCredentials"; +import { useProviderFields } from "@/app/(dashboard)/hooks/providers/useProviderFields"; import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import { buildDecisionCatalog } from "@/lib/decisionModels"; const INITIAL_VALUES: MountedFormValues = { litellm_credential_name: null }; +const PREFILL_URL_PARAMS = { provider: parseAsString, litellm_model: parseAsString }; + export default function AddModelPanel() { const { accessToken } = useAuthorized(); const form = useForm({ mode: "onChange", defaultValues: INITIAL_VALUES }); @@ -28,6 +32,31 @@ export default function AddModelPanel() { const { data: credentialsResponse } = useCredentials(); const { data: teams } = useTeams(); const [selectedProvider, setSelectedProvider] = useState(Providers.Anthropic); + const [{ provider: prefillProviderSlug, litellm_model: prefillModel }, setPrefillParams] = + useQueryStates(PREFILL_URL_PARAMS); + const { data: providerMetadata } = useProviderFields(); + const prefillProvider = useMemo( + () => + prefillProviderSlug === null + ? null + : providerMetadata?.find((info) => info.litellm_provider === prefillProviderSlug)?.provider ?? null, + [prefillProviderSlug, providerMetadata], + ); + const prefillApplied = useRef(false); + + useEffect(() => { + if (prefillApplied.current || prefillProvider === null) { + return; + } + prefillApplied.current = true; + setSelectedProvider(prefillProvider); + form.setValue("custom_llm_provider", prefillProvider); + if (prefillModel === null) { + return; + } + form.setValue("model", [prefillModel]); + }, [form, prefillModel, prefillProvider]); + const pickedProvider = useWatch({ control: form.control, name: "custom_llm_provider" }); const providerModels = useMemo( () => (typeof pickedProvider === "string" ? getProviderModels(pickedProvider, modelCostMapData) : []), @@ -48,7 +77,12 @@ export default function AddModelPanel() { await handleAddModelSubmit( mountedValues(), accessToken, - { resetFields: () => form.reset(INITIAL_VALUES) }, + { + resetFields: () => { + form.reset(INITIAL_VALUES); + void setPrefillParams({ provider: null, litellm_model: null }); + }, + }, refresh, ); return true; diff --git a/ui/litellm-dashboard/src/app/model_hub_table/page.tsx b/ui/litellm-dashboard/src/app/model_hub_table/page.tsx index 46c7394cff7..af6764dcd4c 100644 --- a/ui/litellm-dashboard/src/app/model_hub_table/page.tsx +++ b/ui/litellm-dashboard/src/app/model_hub_table/page.tsx @@ -22,6 +22,7 @@ function PublicModelHubTableContent() { premiumUser={false} userRole={null} canOpenPlayground={false} + canAddModels={false} /> ); } diff --git a/ui/litellm-dashboard/src/components/AIHub/DecisionModelGarden.tsx b/ui/litellm-dashboard/src/components/AIHub/DecisionModelGarden.tsx new file mode 100644 index 00000000000..dcd2528c761 --- /dev/null +++ b/ui/litellm-dashboard/src/components/AIHub/DecisionModelGarden.tsx @@ -0,0 +1,159 @@ +import React, { useMemo, useState } from "react"; +import { BookOpen, Plus, Sparkles } from "lucide-react"; + +import { useModelCostMap } from "@/app/(dashboard)/hooks/models/useModelCostMap"; +import { useProviderFields } from "@/app/(dashboard)/hooks/providers/useProviderFields"; +import { useProxyDecisionProviders } from "@/app/(dashboard)/hooks/providers/useProxyDecisionProviders"; +import { Logo } from "@/components/molecules/logo/Logo"; +import { getProviderLogoAndName } from "@/components/provider_info_helpers"; +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { + DECISIONS_DOCS_URL, + DECISIONS_PROVIDERS_DOCS_URL, + DECISIONS_SELF_HOSTED_DOCS_URL, + DecisionGardenModel, + DecisionRoute, + buildDecisionGarden, +} from "@/lib/decisionModels"; +import { uiHref } from "@/utils/uiHref"; + +const PREVIEW_COUNT = 8; + +const plural = (count: number, one: string, many: string): string => (count === 1 ? one : many); + +const ROUTE_LINKS: Readonly> = { + decisions: { href: DECISIONS_DOCS_URL, label: "/v1/decisions docs" }, + "self-hosted": { href: DECISIONS_SELF_HOSTED_DOCS_URL, label: "Self-hosted, own route" }, + "needs-upgrade": { href: DECISIONS_PROVIDERS_DOCS_URL, label: "Needs a newer LiteLLM" }, +}; + +const DEPLOYMENT_NAMED_PROVIDERS: ReadonlySet = new Set(["azure", "azure_ai"]); + +const OWN_DEPLOYMENT_LINK = { href: DECISIONS_PROVIDERS_DOCS_URL, label: "Deploy under your own name" } as const; + +const needsOwnDeploymentName = (row: DecisionGardenModel): boolean => + row.route === "decisions" && DEPLOYMENT_NAMED_PROVIDERS.has(row.provider); + +const cardLink = (row: DecisionGardenModel) => + needsOwnDeploymentName(row) ? OWN_DEPLOYMENT_LINK : ROUTE_LINKS[row.route]; + +export const addModelHref = (row: DecisionGardenModel): string => { + const params = new URLSearchParams({ tab: "add", provider: row.provider, litellm_model: row.model }); + return `${uiHref("models-and-endpoints")}?${params.toString()}`; +}; + +interface DecisionModelCardProps { + readonly row: DecisionGardenModel; + readonly canAddModels: boolean; +} + +function DecisionModelCard({ row, canAddModels }: DecisionModelCardProps) { + const { displayName } = getProviderLogoAndName(row.provider); + const link = cardLink(row); + return ( +
+
+ + {displayName} +
+ + {row.model} + +
+ + {link.label} + + {canAddModels && ( + + )} +
+
+ ); +} + +interface DecisionModelGardenProps { + readonly accessToken: string | null; + readonly canAddModels: boolean; +} + +const DecisionModelGarden: React.FC = ({ accessToken, canAddModels }) => { + const { data: costMap } = useModelCostMap(true, true); + const { data: providerFields } = useProviderFields(); + const { data: proxyProviders, isLoading: proxyProvidersLoading } = useProxyDecisionProviders(accessToken); + const rows = useMemo(() => buildDecisionGarden(costMap, proxyProviders ?? null), [costMap, proxyProviders]); + const addableProviders = useMemo( + () => new Set((providerFields ?? []).map((info) => info.litellm_provider)), + [providerFields], + ); + const [showAll, setShowAll] = useState(false); + const isAddable = (row: DecisionGardenModel): boolean => + row.route === "decisions" && !needsOwnDeploymentName(row) && addableProviders.has(row.provider); + + if (proxyProvidersLoading || rows.length === 0) { + return null; + } + + const routedRows = rows.filter((row) => row.route === "decisions"); + const routedProviderCount = new Set(routedRows.map((row) => row.provider)).size; + const selfHostedCount = rows.filter((row) => row.route === "self-hosted").length; + const needsUpgradeCount = rows.filter((row) => row.route === "needs-upgrade").length; + const visibleRows = showAll ? rows : rows.slice(0, PREVIEW_COUNT); + + return ( + +
+
+ +
+
+

Decision models LiteLLM supports

+

+ {routedRows.length} decision {plural(routedRows.length, "model", "models")} across {routedProviderCount}{" "} + {plural(routedProviderCount, "provider", "providers")} {plural(routedRows.length, "answers", "answer")} on{" "} + /v1/decisions. + {selfHostedCount > 0 && + ` ${selfHostedCount} more ${plural(selfHostedCount, "is self-hosted and answers on its own route", "are self-hosted and answer on their own routes")}.`} + {needsUpgradeCount > 0 && + ` ${needsUpgradeCount} more ${plural(needsUpgradeCount, "needs", "need")} a newer LiteLLM version.`} +

+
+ +
+
+ {visibleRows.map((row) => ( + + ))} +
+ {rows.length > PREVIEW_COUNT && ( +
+ +
+ )} + + ); +}; + +export default DecisionModelGarden; diff --git a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.test.tsx b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.test.tsx index cc3ac1d2591..d1a118f238d 100644 --- a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.test.tsx +++ b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.test.tsx @@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event"; import { act } from "@testing-library/react"; import type { MCPServerData } from "./MCPHubTableColumns"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; -import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils"; +import { renderWithProviders, screen, testQueryClient, waitFor, within } from "../../../tests/test-utils"; import ModelHubTable from "./ModelHubTable"; const mockUseUISettings = vi.hoisted(() => vi.fn()); @@ -24,8 +24,31 @@ vi.mock("@/components/networking", () => ({ makeMCPPublicCall: vi.fn(), getUiSettings: vi.fn(), getClaudeCodePluginsList: vi.fn(() => Promise.resolve({ plugins: [] })), + modelCostMap: vi.fn(() => Promise.resolve({})), + getProviderCreateMetadata: vi.fn(() => Promise.resolve([])), + getGuardrailUISettings: vi.fn(() => Promise.resolve({})), })); +const GARDEN_COST_MAP = { + "typesafe/jev-latest": { litellm_provider: "typesafe", mode: "evaluation" }, + "cloudflare/clef": { litellm_provider: "cloudflare", mode: "evaluation" }, + "newvendor/decider": { litellm_provider: "newvendor", mode: "evaluation" }, + "laya/english": { litellm_provider: "laya", mode: "evaluation", supported_endpoints: ["/v1/systemone"] }, + "claude-opus-4-8": { litellm_provider: "anthropic", mode: "chat" }, +}; + +const ADDABLE_PROVIDER_FIELDS = [ + { provider: "TypeSafe", provider_display_name: "TypeSafe", litellm_provider: "typesafe", credential_fields: [] }, + { provider: "Laya", provider_display_name: "Laya", litellm_provider: "laya", credential_fields: [] }, + { provider: "OpenAI", provider_display_name: "OpenAI", litellm_provider: "openai", credential_fields: [] }, + { + provider: "Azure_AI_Studio", + provider_display_name: "Azure AI Foundry (Studio)", + litellm_provider: "azure_ai", + credential_fields: [], + }, +]; + vi.mock("next/navigation", () => ({ useRouter: () => ({ replace: mockRouterReplace, @@ -72,6 +95,7 @@ describe("ModelHubTable", () => { writable: true, }); vi.clearAllMocks(); + testQueryClient.clear(); }); // Reusable helper function to setup mocks for auth redirect tests @@ -123,6 +147,7 @@ describe("ModelHubTable", () => { premiumUser={false} userRole={null} canOpenPlayground={false} + canAddModels={false} />, ); @@ -163,6 +188,7 @@ describe("ModelHubTable", () => { premiumUser={false} userRole={null} canOpenPlayground + canAddModels />, ); @@ -181,7 +207,14 @@ describe("ModelHubTable", () => { }); renderWithProviders( - , + , ); expect(await screen.findByText("No models yet")).toBeInTheDocument(); @@ -215,6 +248,7 @@ describe("ModelHubTable", () => { premiumUser={false} userRole={null} canOpenPlayground={false} + canAddModels={false} />, ); @@ -248,6 +282,7 @@ describe("ModelHubTable", () => { premiumUser={false} userRole="Admin" canOpenPlayground={canOpenPlayground} + canAddModels />, ); await user.click(await screen.findByRole("button", { name: model.model_group })); @@ -289,6 +324,241 @@ describe("ModelHubTable", () => { }); }); + describe("decision model garden", () => { + const renderHub = async ( + models: { model_group: string; providers: string[]; mode: string }[], + { + userRole = "Admin", + canAddModels = true, + loadProxySettings = async () => ({ decision_model_providers: ["typesafe", "cloudflare"] }), + costMap = GARDEN_COST_MAP, + }: { + userRole?: string; + canAddModels?: boolean; + loadProxySettings?: () => Promise; + costMap?: Record; + } = {}, + ) => { + vi.mocked(networking.modelHubCall).mockResolvedValue({ data: models }); + vi.mocked(networking.modelCostMap).mockResolvedValue(costMap); + vi.mocked(networking.getProviderCreateMetadata).mockResolvedValue([ + ...ADDABLE_PROVIDER_FIELDS, + { + provider: "NewVendor", + provider_display_name: "NewVendor", + litellm_provider: "newvendor", + credential_fields: [], + }, + ]); + vi.mocked(networking.getGuardrailUISettings).mockImplementation(loadProxySettings); + vi.mocked(networking.getConfigFieldSetting).mockResolvedValue({ field_value: false }); + vi.mocked(networking.getAgentsList).mockResolvedValue({ agents: [] }); + vi.mocked(networking.fetchMCPServers).mockResolvedValue([]); + vi.mocked(networking.getUiSettings).mockResolvedValue({ values: {} }); + mockUseUISettings.mockReturnValue({ data: { values: {} }, isLoading: false }); + const user = userEvent.setup(); + renderWithProviders( + , + ); + await screen.findByText(/Showing \d+ of \d+ models/); + return { user, modeSelect: () => screen.getByDisplayValue("All Modes") }; + }; + + const chatOnly = [{ model_group: "claude-opus-4-8", providers: ["anthropic"], mode: "chat" }]; + + it("lists the decision models from the cost map when the proxy has none configured", async () => { + await renderHub(chatOnly); + + const garden = await screen.findByTestId("decision-model-garden"); + expect(garden).toHaveTextContent("2 decision models across 2 providers answer on /v1/decisions"); + expect(within(garden).getByTestId("decision-model-card-typesafe/jev-latest")).toHaveTextContent("TypeSafe"); + expect(within(garden).getByTestId("decision-model-card-cloudflare/clef")).toHaveTextContent("Cloudflare"); + expect(within(garden).queryByText("claude-opus-4-8")).not.toBeInTheDocument(); + }); + + it("sends a self-hosted model that does not answer on /v1/decisions to its own docs, with no Add Model link", async () => { + await renderHub(chatOnly); + + const garden = await screen.findByTestId("decision-model-garden"); + expect(garden).toHaveTextContent("1 more is self-hosted and answers on its own route."); + const layaCard = within(garden).getByTestId("decision-model-card-laya/english"); + expect(within(layaCard).queryByRole("link", { name: "/v1/decisions docs" })).not.toBeInTheDocument(); + expect(within(layaCard).getByRole("link", { name: "Self-hosted, own route" })).toHaveAttribute( + "href", + "https://docs.litellm.ai/docs/decisions#self-hosted-laya-and-nimble", + ); + expect(await within(garden).findAllByRole("link", { name: "Add model" })).toHaveLength(1); + expect(within(layaCard).queryByRole("link", { name: "Add model" })).not.toBeInTheDocument(); + }); + + it("links each card to the decisions docs and to Add Model prefilled with that provider and model", async () => { + await renderHub(chatOnly); + + const card = within(await screen.findByTestId("decision-model-garden")).getByTestId( + "decision-model-card-typesafe/jev-latest", + ); + expect(within(card).getByRole("link", { name: "/v1/decisions docs" })).toHaveAttribute( + "href", + "https://docs.litellm.ai/docs/decisions", + ); + expect(await within(card).findByRole("link", { name: "Add model" })).toHaveAttribute( + "href", + expect.stringMatching(/\/models-and-endpoints\?tab=add&provider=typesafe&litellm_model=typesafe%2Fjev-latest$/), + ); + }); + + it("labels a model whose provider this proxy cannot serve on /v1/decisions, with no Add Model and no count", async () => { + await renderHub(chatOnly); + + const garden = await screen.findByTestId("decision-model-garden"); + expect(garden).toHaveTextContent("2 decision models across 2 providers answer on /v1/decisions"); + expect(garden).toHaveTextContent("1 more needs a newer LiteLLM version."); + const newCard = within(garden).getByTestId("decision-model-card-newvendor/decider"); + expect(within(newCard).getByRole("link", { name: "Needs a newer LiteLLM" })).toHaveAttribute( + "href", + "https://docs.litellm.ai/docs/decisions#supported-providers", + ); + expect(await within(garden).findAllByRole("link", { name: "Add model" })).toHaveLength(1); + expect(within(newCard).queryByRole("link", { name: "Add model" })).not.toBeInTheDocument(); + }); + + it("lists OpenAI's chat model that answers on /v1/decisions, with Add Model prefilled", async () => { + await renderHub(chatOnly, { + loadProxySettings: async () => ({ decision_model_providers: ["openai"] }), + costMap: { + "gpt-6-luna": { + litellm_provider: "openai", + mode: "chat", + supported_endpoints: ["/v1/chat/completions", "/v1/decisions"], + }, + "gpt-5.5": { litellm_provider: "openai", mode: "chat", supported_endpoints: ["/v1/chat/completions"] }, + }, + }); + + const garden = await screen.findByTestId("decision-model-garden"); + expect(garden).toHaveTextContent("1 decision model across 1 provider answers on /v1/decisions."); + const card = within(garden).getByTestId("decision-model-card-gpt-6-luna"); + expect(await within(card).findByRole("link", { name: "Add model" })).toHaveAttribute( + "href", + expect.stringMatching(/\?tab=add&provider=openai&litellm_model=gpt-6-luna$/), + ); + expect(within(garden).queryByTestId("decision-model-card-gpt-5.5")).not.toBeInTheDocument(); + }); + + it("sends a Foundry decision model to the docs for its deployment name instead of prefilling one Azure refuses", async () => { + await renderHub(chatOnly, { + loadProxySettings: async () => ({ decision_model_providers: ["typesafe", "azure_ai"] }), + costMap: { + "typesafe/jev-latest": { litellm_provider: "typesafe", mode: "evaluation" }, + "azure_ai/Microsoft-Decision-1": { litellm_provider: "azure_ai", mode: "evaluation" }, + }, + }); + + const garden = await screen.findByTestId("decision-model-garden"); + expect(garden).toHaveTextContent("2 decision models across 2 providers answer on /v1/decisions"); + const foundryCard = within(garden).getByTestId("decision-model-card-azure_ai/Microsoft-Decision-1"); + expect(within(foundryCard).getByRole("link", { name: "Deploy under your own name" })).toHaveAttribute( + "href", + "https://docs.litellm.ai/docs/decisions#supported-providers", + ); + expect(await within(garden).findAllByRole("link", { name: "Add model" })).toHaveLength(1); + expect(within(foundryCard).queryByRole("link", { name: "Add model" })).not.toBeInTheDocument(); + }); + + it("falls back to the cost map alone when this proxy's decision provider list cannot be read", async () => { + await renderHub(chatOnly, { + loadProxySettings: async () => { + throw new Error("Failed to get guardrail UI settings"); + }, + }); + + const garden = await screen.findByTestId("decision-model-garden"); + expect(garden).toHaveTextContent("3 decision models across 3 providers answer on /v1/decisions"); + expect(garden).not.toHaveTextContent("a newer LiteLLM version"); + }); + + it("offers a decisions mode option that keeps the garden, hides the chat rows, and points at the garden", async () => { + const { user, modeSelect } = await renderHub(chatOnly); + await screen.findByTestId("decision-model-garden"); + + expect(within(modeSelect()).queryByRole("option", { name: "evaluation" })).not.toBeInTheDocument(); + await user.selectOptions(modeSelect(), "decisions"); + + expect(screen.getByTestId("decision-model-garden")).toBeInTheDocument(); + expect(screen.queryByRole("button", { name: "claude-opus-4-8" })).not.toBeInTheDocument(); + expect(screen.getByText("Showing 0 of 1 models")).toBeInTheDocument(); + expect(screen.getByText("No model on this proxy uses the decisions mode")).toBeInTheDocument(); + expect(screen.queryByText("Adjust the filters to see more models.")).not.toBeInTheDocument(); + }); + + it("hides the garden while a non-decision mode is selected", async () => { + const { user, modeSelect } = await renderHub(chatOnly); + await screen.findByTestId("decision-model-garden"); + + await user.selectOptions(modeSelect(), "chat"); + expect(screen.queryByTestId("decision-model-garden")).not.toBeInTheDocument(); + + await user.click(screen.getByRole("button", { name: "Clear Filters" })); + expect(await screen.findByTestId("decision-model-garden")).toBeInTheDocument(); + }); + + it("labels a configured evaluation model as decisions in the table and under the decisions filter", async () => { + const { user, modeSelect } = await renderHub([ + ...chatOnly, + { model_group: "jev-latest", providers: ["typesafe"], mode: "evaluation" }, + ]); + + const row = screen.getByRole("button", { name: "jev-latest" }).closest("tr"); + expect(row).toHaveTextContent("decisions"); + expect(row).not.toHaveTextContent("evaluation"); + + await user.selectOptions(modeSelect(), "decisions"); + expect(screen.getByText("Showing 1 of 2 models")).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "jev-latest" })).toBeInTheDocument(); + }); + + it("drops the Add Model link for an admin session that cannot add models", async () => { + await renderHub(chatOnly, { canAddModels: false }); + + const garden = await screen.findByTestId("decision-model-garden"); + expect(within(garden).queryByRole("link", { name: "Add model" })).not.toBeInTheDocument(); + expect(within(garden).getAllByRole("link", { name: "/v1/decisions docs" })).toHaveLength(2); + }); + + it("drops the Add Model link on a card whose provider the Add Model form cannot create", async () => { + await renderHub(chatOnly); + + const garden = await screen.findByTestId("decision-model-garden"); + const typesafeCard = within(garden).getByTestId("decision-model-card-typesafe/jev-latest"); + const cloudflareCard = within(garden).getByTestId("decision-model-card-cloudflare/clef"); + expect(await within(typesafeCard).findByRole("link", { name: "Add model" })).toBeInTheDocument(); + expect(within(cloudflareCard).queryByRole("link", { name: "Add model" })).not.toBeInTheDocument(); + expect(within(cloudflareCard).getByRole("link", { name: "/v1/decisions docs" })).toBeInTheDocument(); + }); + + it("sorts the Mode column by the label it shows, placing decisions between chat and embedding", async () => { + const { user } = await renderHub([ + { model_group: "text-embedding-4", providers: ["openai"], mode: "embedding" }, + { model_group: "jev-latest", providers: ["typesafe"], mode: "evaluation" }, + ...chatOnly, + ]); + + await user.click(screen.getByTestId("sort-header-mode")); + + const order = screen + .getAllByRole("button", { name: /^(claude-opus-4-8|jev-latest|text-embedding-4)$/ }) + .map((button) => button.textContent); + expect(order).toEqual(["claude-opus-4-8", "jev-latest", "text-embedding-4"]); + }); + }); + describe("hub tabs", () => { const renderHub = async (agents: object[] = [], mcpServers: Promise = Promise.resolve([])) => { vi.mocked(networking.modelHubCall).mockResolvedValue({ @@ -308,6 +578,7 @@ describe("ModelHubTable", () => { premiumUser={false} userRole="Admin" canOpenPlayground + canAddModels />, ); return { user, search: await screen.findByPlaceholderText("Search model names...") }; diff --git a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx index 2007020e117..3e23d64d28a 100644 --- a/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx +++ b/ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx @@ -44,7 +44,14 @@ import { checkTokenValidity } from "@/utils/jwtUtils"; import { getCookie } from "@/utils/cookieUtils"; import { getLoginUrl } from "@/utils/returnUrlUtils"; import { uiHref } from "@/utils/uiHref"; -import { DECISIONS_DOCS_URL, SYSTEM_ONE_PLAYGROUND_ROUTE, displayMode, isDecisionMode } from "@/lib/decisionModels"; +import { + DECISIONS_DOCS_URL, + DECISIONS_MODE, + SYSTEM_ONE_PLAYGROUND_ROUTE, + displayMode, + isDecisionMode, +} from "@/lib/decisionModels"; +import DecisionModelGarden from "@/components/AIHub/DecisionModelGarden"; interface ModelHubTableProps { accessToken: string | null; @@ -52,12 +59,29 @@ interface ModelHubTableProps { premiumUser: boolean; userRole: string | null; canOpenPlayground: boolean; + canAddModels: boolean; } function isMCPHubVisibilityDisabled(isLoading: boolean, servers: readonly MCPServerData[] | null): boolean { return isLoading || servers === null; } +function modelTableEmptyState( + models: readonly ModelHubData[], + showsDecisionGarden: boolean, + selectedMode: string, +): { title: string; body: string } { + if (showsDecisionGarden && selectedMode === DECISIONS_MODE && !models.some((model) => isDecisionMode(model.mode))) { + return { + title: "No model on this proxy uses the decisions mode", + body: "The decision models LiteLLM supports are listed below.", + }; + } + return models.length > 0 + ? { title: "No matching models", body: "Adjust the filters to see more models." } + : { title: "No models yet", body: "Models added to this proxy will appear here." }; +} + function HubEmptyState({ title, body }: { title: string; body: string }) { return (
@@ -76,6 +100,7 @@ const ModelHubTable: React.FC = ({ premiumUser, userRole, canOpenPlayground, + canAddModels, }) => { const syntaxTheme = useSyntaxTheme(prism); // Admin Viewer follows the read-parity rule: see the AI Hub catalog, but @@ -88,6 +113,8 @@ const ModelHubTable: React.FC = ({ const [isModalVisible, setIsModalVisible] = useState(false); const [selectedModel, setSelectedModel] = useState(null); const [filteredData, setFilteredData] = useState([]); + const [selectedMode, setSelectedMode] = useState(""); + const showDecisionGarden = !publicPage && (selectedMode === "" || selectedMode === DECISIONS_MODE); const [isMakePublicModalVisible, setIsMakePublicModalVisible] = useState(false); // Agent Hub state const [agentHubData, setAgentHubData] = useState(null); @@ -479,7 +506,12 @@ const ModelHubTable: React.FC = ({ )} {/* Filters */} - + {/* Model Table */} = ({ isLoading={loading} loadingMessage="Loading models…" noDataMessage={ - + } size="compact" /> @@ -511,6 +536,8 @@ const ModelHubTable: React.FC = ({ Showing {filteredData.length} of {modelHubData?.length || 0} models

+ + {showDecisionGarden && } {/* Agent Hub Tab */} diff --git a/ui/litellm-dashboard/src/components/AIHub/ModelHubTableColumns.tsx b/ui/litellm-dashboard/src/components/AIHub/ModelHubTableColumns.tsx index 559c18930c7..1a5f8889c93 100644 --- a/ui/litellm-dashboard/src/components/AIHub/ModelHubTableColumns.tsx +++ b/ui/litellm-dashboard/src/components/AIHub/ModelHubTableColumns.tsx @@ -129,7 +129,7 @@ export const getModelHubTableColumns = ({ onModelClick }: ModelHubTableColumnsDe }, { id: "mode", - accessorKey: "mode", + accessorFn: (row) => (row.mode ? displayMode(row.mode) : ""), meta: { title: "Mode", className: "hidden lg:table-cell" }, header: ({ column }) => , size: 110, diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.test.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.test.tsx index bbeee883b1a..f99facad6fb 100644 --- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.test.tsx +++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.test.tsx @@ -329,6 +329,19 @@ describe("MakeModelPublicForm", () => { expect(screen.getAllByText("openai")).toHaveLength(2); }); + it("labels an evaluation-mode model as decisions, matching the mode filter", () => { + const decisionModel = { + ...mockProps.modelHubData[0], + model_group: "jev-latest", + providers: ["typesafe"], + mode: "evaluation", + }; + render(); + + expect(screen.getByText("decisions")).toBeInTheDocument(); + expect(screen.queryByText("evaluation")).not.toBeInTheDocument(); + }); + it("should handle submit error properly", async () => { const errorMessage = "Network error"; mockMakeModelGroupPublic.mockRejectedValueOnce(new Error(errorMessage)); diff --git a/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.tsx b/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.tsx index 073eedca191..20fa0295fed 100644 --- a/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.tsx +++ b/ui/litellm-dashboard/src/components/AIHub/forms/MakeModelPublicForm.tsx @@ -8,6 +8,7 @@ import { cn } from "@/lib/cva.config"; import { makeModelGroupPublic } from "../../networking"; import ModelFilters from "../../model_filters"; import { toast } from "@/lib/toast"; +import { displayMode } from "@/lib/decisionModels"; const STEP_TITLES = ["Select Models", "Confirm"]; @@ -186,7 +187,7 @@ const MakeModelPublicForm: React.FC = ({

{model.model_group}

- {model.mode && {model.mode}} + {model.mode && {displayMode(model.mode)}}
{model.providers.map((provider) => ( diff --git a/ui/litellm-dashboard/src/components/PublicModelHubTableColumns.tsx b/ui/litellm-dashboard/src/components/PublicModelHubTableColumns.tsx index 2fae8044d6b..0288c58e31e 100644 --- a/ui/litellm-dashboard/src/components/PublicModelHubTableColumns.tsx +++ b/ui/litellm-dashboard/src/components/PublicModelHubTableColumns.tsx @@ -7,6 +7,7 @@ import { CellTooltip, IdentityCell, StatusBadge, type StatusTone } from "@/compo import { Badge } from "@/components/ui/badge"; import { getProviderLogoAndName } from "@/components/provider_info_helpers"; import { PUBLIC_MODEL_HUB_SORTABLE_FIELDS } from "@/components/publicModelHub/publicModelHubFilters"; +import { displayMode } from "@/lib/decisionModels"; export interface ModelGroupInfo { model_group: string; @@ -203,7 +204,7 @@ export const getPublicModelHubColumns = ({ onModelClick }: PublicModelHubColumns cell: ({ row }) => ( {getModeIcon(row.original.mode || "")} - {row.original.mode || "Chat"} + {row.original.mode ? displayMode(row.original.mode) : "Chat"} ), }, diff --git a/ui/litellm-dashboard/src/components/model_filters.tsx b/ui/litellm-dashboard/src/components/model_filters.tsx index 1eef5083f16..165cbf68fe0 100644 --- a/ui/litellm-dashboard/src/components/model_filters.tsx +++ b/ui/litellm-dashboard/src/components/model_filters.tsx @@ -26,6 +26,8 @@ interface ModelFiltersProps { onFilteredDataChange: (filteredData: ModelGroupInfo[]) => void; showFiltersCard?: boolean; className?: string; + extraModes?: readonly string[]; + onModeChange?: (mode: string) => void; } const ModelFilters: React.FC = ({ @@ -33,6 +35,8 @@ const ModelFilters: React.FC = ({ onFilteredDataChange, showFiltersCard = true, className = "", + extraModes = [], + onModeChange, }) => { const [searchTerm, setSearchTerm] = useState(""); const [selectedProvider, setSelectedProvider] = useState(""); @@ -50,7 +54,7 @@ const ModelFilters: React.FC = ({ }; const getUniqueModes = (data: ModelGroupInfo[]) => { - const modes = new Set(); + const modes = new Set(extraModes); data.forEach((model) => { const mode = displayMode(model.mode); if (mode) modes.add(mode); @@ -58,6 +62,11 @@ const ModelFilters: React.FC = ({ return Array.from(modes); }; + const changeMode = (mode: string) => { + setSelectedMode(mode); + onModeChange?.(mode); + }; + const getUniqueFeatures = (data: ModelGroupInfo[]) => { const features = new Set(); data.forEach((model) => { @@ -119,7 +128,7 @@ const ModelFilters: React.FC = ({ const resetFilters = () => { setSearchTerm(""); setSelectedProvider(""); - setSelectedMode(""); + changeMode(""); setSelectedFeature(""); }; @@ -159,7 +168,7 @@ const ModelFilters: React.FC = ({

Mode: