From cd63c7e5a7f925268f899c0992d4fc3e6bc79650 Mon Sep 17 00:00:00 2001 From: tin-berri Date: Thu, 27 Aug 2026 00:22:38 -0700 Subject: [PATCH] feat(ui): put the auto-router savings hero on a spend rail and a four-tile row (#38470) The savings card carried four numbers in two stacked halves: the headline saving with its delta on the left over the two spend rows, and avg saved per session on the right. Give the headline the whole left half, move the two spend rows into a rail on the right, and drop avg saved per session into the metric row below as its first tile, with the session count as an inline hint. Each spend row stays a description list so assistive tech keeps the label to value association, with the shadcn Separator between the two rows. Both hero columns are minmax(0,1fr) so a large total wraps instead of overflowing the card, which also fixes the clipping the old 1fr columns already had. Metric grows one optional hint slot so the new tile reuses the same presenter as its three siblings. --- .../AutoRouterBenchmarksTab.test.tsx | 41 ++++++++++++--- .../_components/AutoRouterBenchmarksTab.tsx | 52 +++++++++++-------- 2 files changed, 62 insertions(+), 31 deletions(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.test.tsx index 9cc4333b1e8..ce0cd75cd36 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.test.tsx @@ -1,5 +1,5 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { fireEvent, render, screen } from "@testing-library/react"; +import { fireEvent, render, screen, within } from "@testing-library/react"; import React from "react"; import { beforeEach, describe, expect, it, vi } from "vitest"; @@ -151,15 +151,18 @@ describe("AutoRouterBenchmarksTab", () => { mockAutoRouters(); }); - it("leads with total estimated savings, before the three session-shape metrics", () => { + it("leads with total estimated savings, before the four session-shape metrics", () => { mockHook({ data: response([group(), group({ router_name: "gpt-auto" })]) }); renderTab(); const labels = screen - .getAllByText(/Total estimated savings|Avg turns per session|Avg session length|Avg tokens per session/) + .getAllByText( + /Total estimated savings|Avg saved per session|Avg turns per session|Avg session length|Avg tokens per session/, + ) .map((node) => node.textContent); expect(labels).toEqual([ "Total estimated savings", + "Avg saved per session", "Avg turns per session", "Avg session length", "Avg tokens per session", @@ -181,13 +184,35 @@ describe("AutoRouterBenchmarksTab", () => { expect(screen.getByText("5.3M")).toBeInTheDocument(); }); - it("pairs the savings with the session count it was earned over", () => { + it("pairs the savings with the session count it was earned over, in its own tile", () => { mockHook({ data: response([group(), group({ router_name: "gpt-auto" })]) }); renderTab(); - expect(screen.getByText("Avg saved per session")).toBeInTheDocument(); - expect(screen.getByText("$23.13")).toBeInTheDocument(); - expect(screen.getByText("across 94 sessions")).toBeInTheDocument(); + const tile = screen.getByText("Avg saved per session").closest('[data-slot="card"]'); + if (!tile) throw new Error("expected avg saved per session to render as a metric tile"); + + expect(within(tile).getByText("$23.13")).toBeInTheDocument(); + expect(within(tile).getByText("· 94 sessions")).toBeInTheDocument(); + }); + + it("exposes each spend row as a term and its value, not as loose text", () => { + mockHook({ data: response([group()]) }); + renderTab(); + + const terms = screen.getAllByRole("term").map((node) => node.textContent); + const values = screen.getAllByRole("definition").map((node) => node.textContent); + expect(terms).toEqual(["Actual auto-router spend", "Estimated spend at highest-tier model"]); + expect(values).toEqual(["$359.86", "$2,534.45"]); + }); + + it("lets both hero columns shrink below their content so a large total cannot clip", () => { + const huge = totals({ saved_spend: 123_456_789_012.34 }); + mockHook({ data: response([group(huge)], huge) }); + renderTab(); + + const figure = screen.getByText("$123,456,789,012.34"); + const grid = figure.closest('[data-slot="card"]')?.firstElementChild; + expect(grid).toHaveClass("md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"); }); it("shows a cost increase as a positive delta rather than a saving", () => { @@ -315,7 +340,7 @@ describe("AutoRouterBenchmarksTab", () => { expect(screen.getByText("Total estimated savings")).toBeInTheDocument(); expect(screen.getAllByText("$0.00")).toHaveLength(4); - expect(screen.getByText("across 0 sessions")).toBeInTheDocument(); + expect(screen.getByText("· 0 sessions")).toBeInTheDocument(); expect(screen.getByText("0s")).toBeInTheDocument(); expect(screen.getByText(/turns measured/)).toBeInTheDocument(); expect(screen.getAllByText("0.0%").length).toBeGreaterThan(0); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.tsx index fda1c1b1155..09a0cf0242b 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutoRouterBenchmarksTab.tsx @@ -8,6 +8,7 @@ import AdvancedDatePicker from "@/components/shared/advanced_date_picker"; 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 { Separator } from "@/components/ui/separator"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; @@ -39,51 +40,51 @@ const Message: React.FC<{ children: React.ReactNode }> = ({ children }) => (

{children}

); -const Metric: React.FC<{ label: string; value: string }> = ({ label, value }) => ( +const Metric: React.FC<{ label: string; value: string; hint?: string }> = ({ label, value, hint }) => ( {label} - +

{value}

+ {hint &&

{hint}

} ); +const SpendRow: React.FC<{ label: string; value: string }> = ({ label, value }) => ( +
+
{label}
+
{value}
+
+); + const HeroCard: React.FC<{ view: BenchmarkView }> = ({ view }) => { const stats = view.stats; const cheaper = stats.saved_spend >= 0; return ( -
-
-

Total estimated savings

-
-

{usd(stats.saved_spend)}

+
+
+

+ Total estimated savings +

+
+

{usd(stats.saved_spend)}

{stats.saved_spend !== 0 && (cheaper ? "-" : "+")} {Math.abs(stats.saved_pct).toFixed(0)}%
-
-
-
Actual auto-router spend
-
{usd(stats.spend)}
-
-
-
Estimated spend at highest-tier model
-
{usd(stats.baseline_spend)}
-
-
-
-

Avg saved per session

-

{usd(stats.saved_per_session)}

-

across {stats.sessions.toLocaleString()} sessions

+
+ + +
@@ -239,7 +240,12 @@ const BenchmarksBody: React.FC = ({ isPending, error, data, -
+
+