diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/ShadowEvalSection.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/ShadowEvalSection.test.tsx index d4d26650086..e342ee33f25 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/ShadowEvalSection.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/ShadowEvalSection.test.tsx @@ -46,6 +46,7 @@ vi.mock("@/app/(dashboard)/hooks/models/useModels", () => ({ { model_name: "gpt-auto", litellm_params: { model: "auto_router/gpt-auto" } }, ], })), + usePlainModelGroups: vi.fn(() => new Set(["prod-claude"])), })); vi.mock("@/app/(dashboard)/hooks/models/useModelCostMap", () => ({ @@ -72,6 +73,8 @@ const job = (overrides: Partial = {}): ShadowEvalJob => ({ job_id: "job-1", status: "running", router_name: "claude-auto", + direction: "forward", + baseline_model: null, judge_model: "anthropic/claude-sonnet-5", shadow_percentage: 10, max_turns: 200, @@ -367,6 +370,58 @@ describe("ShadowEvalSection", () => { expect(start.mutate).toHaveBeenCalledWith(expectedBody); }); + it("requires a baseline model in reverse mode and submits it, while forward mode never shows the picker", async () => { + const user = userEvent.setup(); + const { start } = mockHooks({}); + render(); + + expect(screen.queryByPlaceholderText("Select a baseline model")).not.toBeInTheDocument(); + + await user.click(screen.getByText("Adoption check: key's traffic vs the router")); + await user.click(await screen.findByText("Regression check: router's picks vs a baseline")); + await user.click(screen.getByPlaceholderText("Search keys by alias")); + await user.click(await screen.findByText("prod-alpha")); + await user.click(screen.getByPlaceholderText("Select an auto-router")); + await user.click(await screen.findByText("gpt-auto")); + await user.click(screen.getByPlaceholderText("Select a judge model")); + await user.click(await screen.findByRole("option", { name: /anthropic\/claude-sonnet-5/ })); + + expect(screen.getByText("Start shadow eval")).toBeDisabled(); + + await user.click(screen.getByPlaceholderText("Select a baseline model")); + expect(await screen.findByRole("option", { name: /openai\/gpt-4o/ })).toBeInTheDocument(); + await user.click(screen.getByRole("option", { name: /prod-claude/ })); + await user.click(screen.getByText("Start shadow eval")); + + const expectedBody = { + api_key_id: "hash-alpha", + router_name: "gpt-auto", + direction: "reverse", + baseline_model: "prod-claude", + shadow_percentage: 10, + duration_days: 7, + max_turns: 200, + judge_model: "anthropic/claude-sonnet-5", + }; + expect(start.mutate).toHaveBeenCalledWith(expectedBody); + }); + + it("flips the arm labels and headline for a reverse job's results", () => { + const j = job({ direction: "reverse", baseline_model: "openai/gpt-4o" }); + mockHooks({ jobs: [j], detailsById: { "job-1": j } }); + render(); + + expect(screen.getByText(/on 10% of its traffic/)).toBeInTheDocument(); + expect(screen.getByText("Router matched or beat the baseline")).toBeInTheDocument(); + expect(screen.getByText("52.0%")).toBeInTheDocument(); + expect(screen.getByText(/Router won 30.0%/)).toBeInTheDocument(); + expect(screen.getByText(/Baseline won 48.0%/)).toBeInTheDocument(); + expect(screen.getAllByText("Baseline wins")).toHaveLength(2); + expect(screen.getByText("Router pick")).toBeInTheDocument(); + expect(screen.queryByText(/Current model/)).not.toBeInTheDocument(); + expect(screen.queryByText("Compared against")).not.toBeInTheDocument(); + }); + it("keeps an older job's verdicts reachable through the previous evaluations list", async () => { const user = userEvent.setup(); const emptyOverrides: Partial = { diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/ShadowEvalSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/ShadowEvalSection.tsx index 711fc1af539..df2989d3990 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/ShadowEvalSection.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/ShadowEvalSection.tsx @@ -5,7 +5,7 @@ import React, { useMemo, useState } from "react"; import { useInfiniteKeys } from "@/app/(dashboard)/hooks/keys/useKeys"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import { useModelCostMap } from "@/app/(dashboard)/hooks/models/useModelCostMap"; -import { useAutoRouters } from "@/app/(dashboard)/hooks/models/useModels"; +import { useAutoRouters, usePlainModelGroups } from "@/app/(dashboard)/hooks/models/useModels"; import { PaginatedSearchSelect } from "@/components/shared/PaginatedSearchSelect"; import { SearchSelect, type SearchSelectOption } from "@/components/shared/SearchSelect"; import { Badge } from "@/components/ui/badge"; @@ -31,6 +31,37 @@ const pct = (value: number): string => `${value.toFixed(1)}%`; const MIN_TURNS_FOR_CONFIDENCE = 30; +type ShadowEvalDirection = ShadowEvalJob["direction"]; + +const otherArmLabel = (direction: ShadowEvalDirection): string => + direction === "reverse" ? "Baseline" : "Current model"; + +const routerWinRate = (direction: ShadowEvalDirection, slice: ShadowEvalSlice): number => + direction === "reverse" ? slice.real_win_rate_pct : slice.shadow_win_rate_pct; + +const otherArmWinRate = (direction: ShadowEvalDirection, slice: ShadowEvalSlice): number => + direction === "reverse" ? slice.shadow_win_rate_pct : slice.real_win_rate_pct; + +const routerMatchedOrBeatPct = ( + direction: ShadowEvalDirection, + results: NonNullable, +): number => + direction === "reverse" + ? 100 - results.overall_shadow_win_rate_pct + : results.overall_shadow_win_rate_pct + results.overall_tie_rate_pct; + +const jobHeadline = (job: ShadowEvalJob): React.ReactNode => + job.direction === "reverse" ? ( + <> + Comparing {job.router_name} to{" "} + {job.baseline_model} on {job.shadow_percentage}% of its traffic + + ) : ( + <> + Shadowing {job.shadow_percentage}% via {job.router_name} + + ); + const isActive = (job: ShadowEvalJob): boolean => job.status === "running"; const endsIn = (endsAt: string | null | undefined): string | null => { @@ -54,16 +85,22 @@ const StatusBadge: React.FC<{ status: string }> = ({ status }) => ( ); -const SliceTable: React.FC<{ groupHeader: string; slices: readonly ShadowEvalSlice[] }> = ({ groupHeader, slices }) => ( +const SliceTable: React.FC<{ + groupHeader: string; + direction: ShadowEvalDirection; + slices: readonly ShadowEvalSlice[]; +}> = ({ groupHeader, direction, slices }) => ( {groupHeader} - {["Judged turns", "Router wins", "Current model wins", "Ties", "Judge confidence"].map((label) => ( - - {label} - - ))} + {["Judged turns", "Router wins", `${otherArmLabel(direction)} wins`, "Ties", "Judge confidence"].map( + (label) => ( + + {label} + + ), + )} @@ -77,9 +114,9 @@ const SliceTable: React.FC<{ groupHeader: string; slices: readonly ShadowEvalSli {slice.turn_count.toLocaleString()} - {pct(slice.shadow_win_rate_pct)} + {pct(routerWinRate(direction, slice))} - {pct(slice.real_win_rate_pct)} + {pct(otherArmWinRate(direction, slice))} {pct(slice.tie_rate_pct)} {slice.avg_judge_confidence.toFixed(2)} @@ -88,13 +125,23 @@ const SliceTable: React.FC<{ groupHeader: string; slices: readonly ShadowEvalSli
); -const VerdictBar: React.FC<{ results: NonNullable }> = ({ results }) => { - const routerWins = results.overall_shadow_win_rate_pct; +const VerdictBar: React.FC<{ direction: ShadowEvalDirection; results: NonNullable }> = ({ + direction, + results, +}) => { const ties = results.overall_tie_rate_pct; + const routerWins = + direction === "reverse" + ? Math.max(0, 100 - results.overall_shadow_win_rate_pct - ties) + : results.overall_shadow_win_rate_pct; const segments = [ { label: "Router won", value: routerWins, fill: "bg-emerald-500" }, { label: "Tie", value: ties, fill: "bg-emerald-200" }, - { label: "Current model won", value: Math.max(0, 100 - routerWins - ties), fill: "bg-muted-foreground/30" }, + { + label: `${otherArmLabel(direction)} won`, + value: Math.max(0, 100 - routerWins - ties), + fill: "bg-muted-foreground/30", + }, ]; return (
@@ -133,20 +180,22 @@ const ResultsBody: React.FC<{ job: ShadowEvalJob; resultsError?: boolean }> = ({ <>

- Router matched or beat your current model -

-

- {pct(results.overall_shadow_win_rate_pct + results.overall_tie_rate_pct)} + Router matched or beat {job.direction === "reverse" ? "the baseline" : "your current model"}

+

{pct(routerMatchedOrBeatPct(job.direction, results))}

of {(job.judged_count ?? 0).toLocaleString()} judged responses

- + {results.by_current_model.length > 0 && ( - + )} {results.by_tier.length > 0 && (
0 ? "border-t" : ""}> - +
)} @@ -168,9 +217,7 @@ const JobResults: React.FC<{
-

- Shadowing {job.shadow_percentage}% via {job.router_name} -

+

{jobHeadline(job)}

{(job.judged_count ?? 0).toLocaleString()} of {job.max_turns.toLocaleString()} turns judged ·{" "} {(job.error_count ?? 0).toLocaleString()} errored · {usd(job.judge_spend ?? 0)} judge spend @@ -201,25 +248,55 @@ interface CostMapEntry { mode?: string; } -const useJudgeModelOptions = (): SearchSelectOption[] => { +const useChatModelNames = (): string[] => { const { data: costMap } = useModelCostMap(); + return useMemo(() => { + if (!costMap) return []; + const chatModels = Object.entries(costMap as Record) + .filter(([, value]) => value?.mode === "chat" && value?.litellm_provider) + .map(([key, value]) => (key.startsWith(`${value.litellm_provider}/`) ? key : `${value.litellm_provider}/${key}`)); + return [...new Set(chatModels)].toSorted((a, b) => a.localeCompare(b)); + }, [costMap]); +}; + +const useJudgeModelOptions = (): SearchSelectOption[] => { + const chatModels = useChatModelNames(); return useMemo(() => { const pinned: SearchSelectOption[] = RECOMMENDED_JUDGE_MODELS.map((model) => ({ label: model, value: model, sublabel: "Recommended", })); - if (!costMap) return pinned; const pinnedNames = new Set(RECOMMENDED_JUDGE_MODELS); - const chatModels = Object.entries(costMap as Record) - .filter(([, value]) => value?.mode === "chat" && value?.litellm_provider) - .map(([key, value]) => (key.startsWith(`${value.litellm_provider}/`) ? key : `${value.litellm_provider}/${key}`)); - const rest = [...new Set(chatModels)] - .filter((model) => !pinnedNames.has(model)) - .toSorted((a, b) => a.localeCompare(b)) - .map((model) => ({ label: model, value: model })); + const rest = chatModels.filter((model) => !pinnedNames.has(model)).map((model) => ({ label: model, value: model })); return [...pinned, ...rest]; - }, [costMap]); + }, [chatModels]); +}; + +const useBaselineModelOptions = (): SearchSelectOption[] => { + const configuredGroups = usePlainModelGroups(); + const chatModels = useChatModelNames(); + return useMemo(() => { + const configured = [...configuredGroups] + .toSorted((a, b) => a.localeCompare(b)) + .map((model) => ({ label: model, value: model, sublabel: "Configured on this gateway" })); + const rest = chatModels + .filter((model) => !configuredGroups.has(model)) + .map((model) => ({ label: model, value: model })); + return [...configured, ...rest]; + }, [configuredGroups, chatModels]); +}; + +const DIRECTION_OPTIONS: readonly { value: ShadowEvalDirection; label: string }[] = [ + { value: "forward", label: "Adoption check: key's traffic vs the router" }, + { value: "reverse", label: "Regression check: router's picks vs a baseline" }, +] as const; + +const START_FORM_DESCRIPTION: Record = { + forward: + "Duplicates a sampled slice of the key's traffic through the auto-router and has an LLM judge compare both answers blind. The router's answers are never served to users; judge calls bill to the shadowed key.", + reverse: + "Duplicates a sampled slice of the traffic the auto-router already serves against a fixed baseline model and has an LLM judge compare both answers blind. The baseline's answers are never served to users; judge calls bill to the shadowed key.", }; const DURATION_OPTIONS = [ @@ -282,12 +359,15 @@ const StartForm: React.FC = () => { const { accessToken } = useAuthorized(); const [apiKeyId, setApiKeyId] = useState(""); const [routerName, setRouterName] = useState(""); + const [direction, setDirection] = useState("forward"); + const [baselineModel, setBaselineModel] = useState(""); const [percentage, setPercentage] = useState("10"); const [durationDays, setDurationDays] = useState("7"); const [judgeModel, setJudgeModel] = useState(""); const [maxTurns, setMaxTurns] = useState("200"); const { data: autoRouters } = useAutoRouters(); const judgeModelOptions = useJudgeModelOptions(); + const baselineModelOptions = useBaselineModelOptions(); const start = useStartShadowEval(); const routerOptions = useMemo(() => { @@ -301,14 +381,17 @@ const StartForm: React.FC = () => { const percentageValid = parsedPct >= 0.1 && parsedPct <= 100; const parsedMaxTurns = Number.parseInt(maxTurns, 10); const maxTurnsValid = parsedMaxTurns >= 1 && parsedMaxTurns <= 2000; - const filled = [apiKeyId, routerName, judgeModel].every((field) => field !== ""); + const filled = + [apiKeyId, routerName, judgeModel].every((field) => field !== "") && + (direction === "forward" || baselineModel !== ""); const boundsValid = percentageValid && maxTurnsValid; const valid = Boolean(accessToken) && filled && boundsValid; const handleStart = () => { const startBody = { api_key_id: apiKeyId, router_name: routerName, - direction: "forward" as const, + direction, + ...(direction === "reverse" ? { baseline_model: baselineModel } : {}), shadow_percentage: parsedPct, duration_days: Number.parseInt(durationDays, 10), max_turns: parsedMaxTurns, @@ -321,13 +404,27 @@ const StartForm: React.FC = () => { Start a shadow eval -

- Duplicates a sampled slice of the key's traffic through the auto-router and has an LLM judge compare both - answers blind. The router's answers are never served to users; judge calls bill to the shadowed key. -

+

{START_FORM_DESCRIPTION[direction]}

+ + + @@ -390,6 +487,17 @@ const StartForm: React.FC = () => {

Enter a value from 1 to 2000

)} + {direction === "reverse" && ( + + + + )} { const previousSummary = (job: ShadowEvalJob): string => { const results = job.results; - if (results) return pct(results.overall_shadow_win_rate_pct + results.overall_tie_rate_pct); + if (results) return pct(routerMatchedOrBeatPct(job.direction, results)); return job.judged_count === 0 ? "no verdicts" : "view results"; }; @@ -429,9 +537,7 @@ const PreviousJob: React.FC<{ job: ShadowEvalJob }> = ({ job }) => {
-

- {shown.shadow_percentage}% via {shown.router_name} -

+

{jobHeadline(shown)}

{shown.judged_count != null && `${shown.judged_count.toLocaleString()} judged · ${(shown.error_count ?? 0).toLocaleString()} errored · ${usd(shown.judge_spend ?? 0)} judge spend · `} @@ -507,8 +613,8 @@ const ShadowEvalSection: React.FC = () => {

Shadow eval

- Would the auto-router have answered as well as the models you use today? Find out on your real traffic, before - switching anything. + Blind-judge the auto-router on your real traffic: against the models a key uses today before switching, or + against a fixed baseline after it has switched.

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.test.ts index f04c4b7bfcd..411e8402e11 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.test.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.test.ts @@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest"; import { isAutoRouterDeployment, selectAutoRouterModelGroups, + selectPlainModelGroups, useAllProxyModels, useAutoRouterModelGroups, useAutoRouters, @@ -977,6 +978,32 @@ describe("selectAutoRouterModelGroups", () => { }); }); +describe("selectPlainModelGroups", () => { + it("keeps only non-auto-router model groups", () => { + const deployments: AutoRouterCandidateDeployment[] = [ + { model_name: "smart-router", litellm_params: { model: "auto_router/complexity_router" } }, + { model_name: "claude-haiku", litellm_params: { model: "anthropic/claude-haiku-4-5" } }, + { model_name: "claude-sonnet", litellm_params: { model: "anthropic/claude-sonnet-4-5" } }, + { model_name: "cheap-router", litellm_params: { model: "auto_router/adaptive_router" } }, + ]; + + expect(selectPlainModelGroups(deployments)).toEqual(new Set(["claude-haiku", "claude-sonnet"])); + }); + + it("drops a group name that also fronts an auto-router deployment", () => { + const deployments: AutoRouterCandidateDeployment[] = [ + { model_name: "shared-name", litellm_params: { model: "auto_router/complexity_router" } }, + { model_name: "shared-name", litellm_params: { model: "anthropic/claude-sonnet-4-5" } }, + ]; + + expect(selectPlainModelGroups(deployments)).toEqual(new Set()); + }); + + it("drops deployments that have no public model_name", () => { + expect(selectPlainModelGroups([{ model_name: "", litellm_params: { model: "openai/gpt-4o" } }])).toEqual(new Set()); + }); +}); + describe("useAutoRouterModelGroups", () => { let queryClient: QueryClient; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts index 68044a45edc..a5fbc433ea3 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/models/useModels.ts @@ -123,6 +123,16 @@ export const selectAutoRouterModelGroups = (deployments: AutoRouterCandidateDepl export const selectAutoRouterDeployments = (deployments: AutoRouterDeployment[]): AutoRouterDeployment[] => deployments.filter(isAutoRouterDeployment); +export const selectPlainModelGroups = (deployments: AutoRouterCandidateDeployment[]): ReadonlySet => { + const autoRouterGroups = selectAutoRouterModelGroups(deployments); + return new Set( + deployments + .map((deployment) => deployment.model_name) + .filter((modelName): modelName is string => Boolean(modelName)) + .filter((modelName) => !autoRouterGroups.has(modelName)), + ); +}; + export const fetchAllModelDeployments = async ( accessToken: string, userId: string, @@ -172,6 +182,17 @@ export const useAutoRouterModelGroups = (): ReadonlySet => { return data ?? NO_AUTO_ROUTERS; }; +export const usePlainModelGroups = (): ReadonlySet => { + const { accessToken, userId, userRole } = useAuthorized(); + const { data } = useQuery>({ + queryKey: autoRouterListKey(userId, userRole), + queryFn: async () => await fetchAllModelDeployments(accessToken!, userId!, userRole!), + enabled: Boolean(accessToken && userId && userRole), + select: selectPlainModelGroups, + }); + return data ?? NO_AUTO_ROUTERS; +}; + export const useAutoRouters = (): UseQueryResult => { const { accessToken, userId, userRole } = useAuthorized(); return useQuery({