feat(ui): shadow evals tab beside auto-router usage

ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.test.tsx

@@ -8,6 +8,7 @@ import { ApiError } from "@/lib/http/client";
 
 vi.mock("./useAutoRouterBenchmarks", () => ({ useAutoRouterBenchmarks: vi.fn() }));
 vi.mock("@/app/(dashboard)/hooks/models/useModels", () => ({ useAutoRouters: vi.fn() }));
+vi.mock("./ShadowEvalSection", () => ({ default: () => <div data-testid="shadow-eval-section" /> }));
 
 import { useAutoRouters } from "@/app/(dashboard)/hooks/models/useModels";
 
@@ -274,6 +275,33 @@ describe("AutoRouterBenchmarksTab", () => {
     expect(screen.getByText("Last 24 hours")).toBeInTheDocument();
   });
 
+  it("shows usage by default and mounts shadow evals only when its sub-tab is selected", () => {
+    mockHook({ data: response([group()]) });
+    renderTab();
+
+    expect(screen.getByRole("tab", { name: "Usage" })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("Total estimated savings")).toBeInTheDocument();
+    expect(screen.queryByTestId("shadow-eval-section")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("tab", { name: "Shadow Evals" }));
+    expect(screen.getByRole("tab", { name: "Shadow Evals" })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByTestId("shadow-eval-section")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("tab", { name: "Usage" }));
+    expect(screen.getByText("Total estimated savings")).toBeInTheDocument();
+    expect(screen.getByTestId("shadow-eval-section")).toBeInTheDocument();
+  });
+
+  it("keeps the shadow evals sub-tab reachable while the usage body is in its error state", () => {
+    mockHook({ error: new ApiError("boom", 500, {}) });
+    renderTab();
+
+    expect(screen.getByText("Auto-router usage is unavailable right now")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("tab", { name: "Shadow Evals" }));
+    expect(screen.getByTestId("shadow-eval-section")).toBeInTheDocument();
+  });
+
   it("keeps the window picker reachable while a window has no sessions", () => {
     mockHook({ data: response([]) });
     renderTab();

ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.tsx

@@ -8,7 +8,7 @@ import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { ApiError } from "@/lib/http/client";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
@@ -31,6 +31,7 @@ import {
   type BucketRow,
 } from "./autoRouterBenchmarks";
 import { usd } from "./costOptimizationUtils";
+import ShadowEvalSection from "./ShadowEvalSection";
 import TierTurnsChart from "./TierTurnsChart";
 import { useAutoRouterBenchmarks } from "./useAutoRouterBenchmarks";
 
@@ -268,7 +269,7 @@ interface AutoRouterBenchmarksTabProps {
   accessToken: string | null;
 }
 
-const AutoRouterBenchmarksTab: React.FC<AutoRouterBenchmarksTabProps> = ({ accessToken }) => {
+const UsageView: React.FC<AutoRouterBenchmarksTabProps> = ({ accessToken }) => {
   const [range, setRange] = useState<BenchmarkWindow>("30d");
   const { data, isPending, error } = useAutoRouterBenchmarks(accessToken, range);
   const [selectedKey, setSelectedKey] = useState<string>(ALL_ROUTERS);
@@ -321,4 +322,36 @@ const AutoRouterBenchmarksTab: React.FC<AutoRouterBenchmarksTabProps> = ({ acces
   );
 };
 
+const AutoRouterBenchmarksTab: React.FC<AutoRouterBenchmarksTabProps> = ({ accessToken }) => {
+  const [visitedTabs, setVisitedTabs] = useState<readonly string[]>(["usage"]);
+
+  const handleTabChange = (value: unknown) => {
+    if (typeof value !== "string") {
+      return;
+    }
+
+    setVisitedTabs((currentTabs) => (currentTabs.includes(value) ? currentTabs : [...currentTabs, value]));
+  };
+
+  return (
+    <Tabs defaultValue="usage" onValueChange={handleTabChange} className="w-full gap-4">
+      <TabsList>
+        <TabsTrigger value="usage" className="px-3">
+          Usage
+        </TabsTrigger>
+        <TabsTrigger value="shadow-evals" className="px-3">
+          Shadow Evals
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="usage" keepMounted={visitedTabs.includes("usage")}>
+        <UsageView accessToken={accessToken} />
+      </TabsContent>
+      <TabsContent value="shadow-evals" keepMounted={visitedTabs.includes("shadow-evals")}>
+        <ShadowEvalSection />
+      </TabsContent>
+    </Tabs>
+  );
+};
+
 export default AutoRouterBenchmarksTab;