+ {/* CardHeader's own slots rather than hand-rolled rows: the action column is
+ sized to its content and the title column takes the rest, so the subtitle
+ never competes with the controls for width and neither moves when it grows.
+ The controls wrap within their column instead of pushing past the card */}
-
-
-
Savings
-
{savingsSubtitle}
-
-
-
- setAccumulation(value as SavingsAccumulation)}>
-
- Cumulative
- {intervalLabel}
-
-
-
-
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.test.ts
index dc08799a3c4d..5c73f0fc5dca 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.test.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.test.ts
@@ -10,6 +10,7 @@ import {
localIsoDay,
toCumulative,
topToolsBySpend,
+ usd,
withStartAnchor,
} from "./costOptimizationUtils";
@@ -239,22 +240,25 @@ describe("localIsoDay", () => {
});
describe("toCumulative", () => {
- const point = (date: string, compression: number, caching: number) => ({
+ const point = (date: string, compression: number, caching: number, autorouter: number = 0) => ({
date,
Compression: compression,
"Prompt caching": caching,
+ "Auto-router": autorouter,
});
it("turns each reading into everything saved up to that point", () => {
const running = toCumulative([point("Jul 1", 1, 10), point("Jul 2", 2, 20), point("Jul 3", 3, 30)]);
expect(running.map((p) => p.Compression)).toEqual([1, 3, 6]);
expect(running.map((p) => p["Prompt caching"])).toEqual([10, 30, 60]);
+ expect(running.map((p) => p["Auto-router"])).toEqual([0, 0, 0]);
});
it("accumulates each driver on its own, so one flat series cannot lift the other", () => {
const running = toCumulative([point("Jul 1", 0, 5), point("Jul 2", 0, 5)]);
expect(running.map((p) => p.Compression)).toEqual([0, 0]);
expect(running.map((p) => p["Prompt caching"])).toEqual([5, 10]);
+ expect(running.map((p) => p["Auto-router"])).toEqual([0, 0]);
});
it("never falls, even across a quiet interval", () => {
@@ -267,13 +271,19 @@ describe("toCumulative", () => {
expect(running.map((p) => p.date)).toEqual(["9am", "10am"]);
expect(toCumulative([])).toEqual([]);
});
+
+ it("accumulates auto-router savings like other drivers", () => {
+ const running = toCumulative([point("Jul 1", 1, 1, 5), point("Jul 2", 1, 1, 10)]);
+ expect(running.map((p) => p["Auto-router"])).toEqual([5, 15]);
+ });
});
describe("withStartAnchor", () => {
- const point = (date: string, compression: number, caching: number) => ({
+ const point = (date: string, compression: number, caching: number, autorouter: number = 0) => ({
date,
Compression: compression,
"Prompt caching": caching,
+ "Auto-router": autorouter,
});
it("lifts a single-day cumulative off a floating dot by prepending a $0 origin", () => {
@@ -285,6 +295,7 @@ describe("withStartAnchor", () => {
const anchored = withStartAnchor([point("Jul 16", 5, 1), point("Jul 17", 9, 4)], "Jul 16");
expect(anchored.map((p) => p.Compression)).toEqual([0, 5, 9]);
expect(anchored.map((p) => p["Prompt caching"])).toEqual([0, 1, 4]);
+ expect(anchored.map((p) => p["Auto-router"])).toEqual([0, 0, 0]);
});
it("leaves an empty series alone so the chart's own no-data state can show", () => {
@@ -306,3 +317,19 @@ describe("formatRangeLabel", () => {
expect(formatRangeLabel(new Date(2026, 6, 23), undefined)).toBe("");
});
});
+
+describe("usd", () => {
+ it("keeps four decimals for sub-dollar amounts so small savings stay visible", () => {
+ expect(usd(0.05)).toBe("$0.0500");
+ expect(usd(1.5)).toBe("$1.50");
+ expect(usd(0)).toBe("$0.00");
+ });
+
+ it("signs a loss ahead of the symbol and keeps its precision", () => {
+ // A driver can be negative once a model switch is charged for its cold cache.
+ // Sizing decimals off the raw value would render this as "$-0.00".
+ expect(usd(-0.05)).toBe("-$0.0500");
+ expect(usd(-0.0004)).toBe("-$0.0004");
+ expect(usd(-12.4)).toBe("-$12.40");
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.ts
index 32eb6ae198db..43ebdea82d4c 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.ts
@@ -3,8 +3,11 @@ import { ToolSpendDailyEntry, ToolSpendEntry } from "@/components/networking";
import { formatNumberWithCommas } from "@/utils/dataUtils";
export const usd = (value: number): string => {
- const decimals = value > 0 && value < 1 ? 4 : 2;
- return `$${formatNumberWithCommas(value, decimals)}`;
+ // Sized and signed off the magnitude: a driver can come out negative, and a small
+ // loss rendered at two decimals would read as "$-0.00"
+ const magnitude = Math.abs(value);
+ const decimals = magnitude > 0 && magnitude < 1 ? 4 : 2;
+ return `${value < 0 ? "-" : ""}$${formatNumberWithCommas(magnitude, decimals)}`;
};
export const pct = (ratio: number): string => `${formatNumberWithCommas(ratio * 100, 1)}%`;
@@ -161,9 +164,10 @@ export type SavingsPoint = {
date: string;
Compression: number;
"Prompt caching": number;
+ "Auto-router": number;
};
-export const SAVINGS_SERIES = ["Compression", "Prompt caching"] as const;
+export const SAVINGS_SERIES = ["Compression", "Prompt caching", "Auto-router"] as const;
/**
* Running total of each series across the selected window. The total restarts
@@ -179,6 +183,7 @@ export const toCumulative = (points: readonly SavingsPoint[]): SavingsPoint[] =>
date: point.date,
Compression: (previous?.Compression ?? 0) + point.Compression,
"Prompt caching": (previous?.["Prompt caching"] ?? 0) + point["Prompt caching"],
+ "Auto-router": (previous?.["Auto-router"] ?? 0) + point["Auto-router"],
},
];
}, []);
@@ -193,7 +198,7 @@ export const toCumulative = (points: readonly SavingsPoint[]): SavingsPoint[] =>
export const withStartAnchor = (cumulative: readonly SavingsPoint[], startLabel: string): SavingsPoint[] =>
cumulative.length === 0
? [...cumulative]
- : [{ date: startLabel, Compression: 0, "Prompt caching": 0 }, ...cumulative];
+ : [{ date: startLabel, Compression: 0, "Prompt caching": 0, "Auto-router": 0 }, ...cumulative];
/** "Jul 16 – Jul 23", collapsing to a single date when the range is one day. */
export const formatRangeLabel = (from: Date | undefined, to: Date | undefined): string => {
diff --git a/ui/litellm-dashboard/src/components/UsagePage/types.ts b/ui/litellm-dashboard/src/components/UsagePage/types.ts
index bf33fa371117..b10fc79be159 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/types.ts
+++ b/ui/litellm-dashboard/src/components/UsagePage/types.ts
@@ -11,6 +11,7 @@ export interface SpendMetrics {
compression_saved_tokens?: number;
compression_savings_spend?: number;
prompt_caching_savings_spend?: number;
+ autorouter_savings_spend?: number;
}
export type DailyData = {
diff --git a/ui/litellm-dashboard/src/lib/http/schema.d.ts b/ui/litellm-dashboard/src/lib/http/schema.d.ts
index 109d638fb9c0..fc722a3fdd8c 100644
--- a/ui/litellm-dashboard/src/lib/http/schema.d.ts
+++ b/ui/litellm-dashboard/src/lib/http/schema.d.ts
@@ -23487,6 +23487,11 @@ export interface components {
* @default 0
*/
total_api_requests: number;
+ /**
+ * Total Autorouter Savings Spend
+ * @default 0
+ */
+ total_autorouter_savings_spend: number;
/**
* Total Cache Creation Input Tokens
* @default 0
@@ -25936,6 +25941,8 @@ export interface components {
auto_router_default_model?: string | null;
/** Auto Router Embedding Model */
auto_router_embedding_model?: string | null;
+ /** Auto Router Savings Baseline Model */
+ auto_router_savings_baseline_model?: string | null;
/** Aws Access Key Id */
aws_access_key_id?: string | null;
/** Aws Bedrock Project Id */
@@ -31388,6 +31395,11 @@ export interface components {
* @default 0
*/
api_requests: number;
+ /**
+ * Autorouter Savings Spend
+ * @default 0
+ */
+ autorouter_savings_spend: number;
/**
* Cache Creation Input Tokens
* @default 0
@@ -34068,6 +34080,8 @@ export interface components {
auto_router_default_model?: string | null;
/** Auto Router Embedding Model */
auto_router_embedding_model?: string | null;
+ /** Auto Router Savings Baseline Model */
+ auto_router_savings_baseline_model?: string | null;
/** Aws Access Key Id */
aws_access_key_id?: string | null;
/** Aws Bedrock Project Id */