+
);
};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.test.tsx
index 048d9a34d31..0e2f16c5d93 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.test.tsx
@@ -1,16 +1,13 @@
import { render } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
+import type { ToolSpendResponse } from "@/components/networking";
import type { DailyData, SpendMetrics } from "@/components/UsagePage/types";
-const mockUsePaginatedDailyActivity = vi.fn();
-
-vi.mock("@/app/(dashboard)/usage/_components/hooks/usePaginatedDailyActivity", () => ({
- usePaginatedDailyActivity: (args: unknown) => mockUsePaginatedDailyActivity(args),
-}));
+const mockGetToolSpend = vi.fn();
vi.mock("@/components/networking", () => ({
- userDailyActivityCall: vi.fn(),
+ getToolSpend: (...args: unknown[]) => mockGetToolSpend(...args),
}));
vi.mock("@/components/shared/advanced_date_picker", () => ({
@@ -25,10 +22,16 @@ vi.mock("@/components/shared/charts", () => ({
DonutChart: ({ data, label }: { data: unknown; label: string }) => (
),
+ BarChart: ({ data, categories }: { data: unknown; categories: string[] }) => (
+
+ ),
+ DEFAULT_COLOR_CYCLE: ["emerald", "blue", "violet", "amber"],
}));
import UsageTab from "./UsageTab";
+const emptyToolSpend: ToolSpendResponse = { by_tool: [], daily: [], total_spend: 0, start_date: null, end_date: null };
+
const baseMetrics = (overrides: Partial
): SpendMetrics => ({
spend: 0,
prompt_tokens: 0,
@@ -55,9 +58,20 @@ const day = (date: string, metrics: Partial): DailyData => ({
},
});
-const renderWith = (results: DailyData[]) => {
- mockUsePaginatedDailyActivity.mockReturnValue({ data: { results }, loading: false, isFetchingMore: false });
- return render();
+const renderWith = (results: DailyData[], toolSpend = emptyToolSpend) => {
+ mockGetToolSpend.mockResolvedValue(toolSpend);
+ return render(
+ ,
+ );
};
describe("UsageTab", () => {
@@ -105,4 +119,22 @@ describe("UsageTab", () => {
const slices = JSON.parse(getByTestId("donut-chart").getAttribute("data-slices") ?? "[]");
expect(slices).toEqual([{ driver: "Compression", usd: expect.closeTo(0.04, 5) }]);
});
+
+ it("renders spend-by-tool bars from the tool spend endpoint", async () => {
+ const toolSpend = {
+ by_tool: [
+ { tool_name: "search", spend: 4.0, call_count: 3, total_tokens: 150 },
+ { tool_name: "read_file", spend: 1.0, call_count: 2, total_tokens: 50 },
+ ],
+ daily: [{ date: "2026-07-12", tool_name: "search", spend: 4.0, call_count: 3 }],
+ total_spend: 5.0,
+ start_date: "2026-07-12",
+ end_date: "2026-07-12",
+ };
+ const { findAllByTestId } = renderWith([day("2026-07-12", {})], toolSpend);
+
+ const bars = await findAllByTestId("bar-chart");
+ const series = JSON.parse(bars[0].getAttribute("data-series") ?? "[]");
+ expect(series[0]).toMatchObject({ tool_name: "search", spend: 4.0 });
+ });
});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.tsx
index 8e6fc40b5ad..9216dbfaad2 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.tsx
@@ -1,35 +1,35 @@
"use client";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
import { Collapse } from "antd";
-import { AreaChart, DonutChart } from "@/components/shared/charts";
+import { AreaChart, BarChart, DonutChart, DEFAULT_COLOR_CYCLE } from "@/components/shared/charts";
import AdvancedDatePicker from "@/components/shared/advanced_date_picker";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { userDailyActivityCall } from "@/components/networking";
-import { DailyData, SpendMetrics } from "@/components/UsagePage/types";
+import { getToolSpend, ToolSpendResponse } from "@/components/networking";
+import { SpendMetrics } from "@/components/UsagePage/types";
import { formatNumberWithCommas } from "@/utils/dataUtils";
-import { all_admin_roles } from "@/utils/roles";
-import { usePaginatedDailyActivity } from "@/app/(dashboard)/usage/_components/hooks/usePaginatedDailyActivity";
+import { buildDailyToolSeries, topToolsBySpend, usd } from "./costOptimizationUtils";
+import { DailyActivityRange } from "./useDailyActivityRange";
interface UsageTabProps {
accessToken: string | null;
- userId: string | null;
- userRole: string;
+ activity: DailyActivityRange;
}
-type DateRange = { from?: Date; to?: Date };
-
-const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000;
-
-const usd = (value: number): string => {
- const decimals = value > 0 && value < 1 ? 4 : 2;
- return `$${formatNumberWithCommas(value, decimals)}`;
+const EMPTY_TOOL_SPEND: ToolSpendResponse = {
+ by_tool: [],
+ daily: [],
+ total_spend: 0,
+ start_date: null,
+ end_date: null,
};
const shortDate = (iso: string): string =>
new Date(`${iso}T00:00:00`).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+const isoDay = (d: Date): string => d.toISOString().slice(0, 10);
+
const compressionOf = (m: SpendMetrics): number => m.compression_savings_spend ?? 0;
const cachingOf = (m: SpendMetrics): number => m.prompt_caching_savings_spend ?? 0;
const savedTokensOf = (m: SpendMetrics): number => m.compression_saved_tokens ?? 0;
@@ -81,23 +81,33 @@ const SummaryCard = ({ label, value, hint }: { label: string; value: string; hin
);
-const UsageTab: React.FC = ({ accessToken, userId, userRole }) => {
- const initialFrom = useMemo(() => new Date(new Date().getTime() - THIRTY_DAYS_MS), []);
- const initialTo = useMemo(() => new Date(), []);
- const [dateValue, setDateValue] = useState({ from: initialFrom, to: initialTo });
+const UsageTab: React.FC = ({ accessToken, activity }) => {
+ const { dateValue, onDateChange, results, loading, isFetchingMore } = activity;
const startTime = dateValue.from ?? null;
const endTime = dateValue.to ?? null;
- const isAdmin = all_admin_roles.includes(userRole);
- const effectiveUserId = isAdmin ? null : userId;
- const { data, loading, isFetchingMore } = usePaginatedDailyActivity({
- fetchFn: userDailyActivityCall,
- args: [accessToken, startTime, endTime, effectiveUserId],
- enabled: !!accessToken && !!startTime && !!endTime,
- });
+ const toolSpendEnabled = !!accessToken && !!startTime && !!endTime;
+ const rangeKey = startTime && endTime ? `${isoDay(startTime)}|${isoDay(endTime)}` : "";
+ const [toolSpendState, setToolSpendState] = useState<{ key: string; data: ToolSpendResponse } | null>(null);
- const results = data.results as DailyData[];
+ useEffect(() => {
+ if (!accessToken || !startTime || !endTime) return;
+ let cancelled = false;
+ getToolSpend(accessToken, isoDay(startTime), isoDay(endTime))
+ .then((res) => {
+ if (!cancelled) setToolSpendState({ key: rangeKey, data: res });
+ })
+ .catch(() => {
+ if (!cancelled) setToolSpendState({ key: rangeKey, data: EMPTY_TOOL_SPEND });
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [accessToken, startTime, endTime, rangeKey]);
+
+ const toolSpend = toolSpendState?.key === rangeKey ? toolSpendState.data : null;
+ const toolSpendLoading = toolSpendEnabled && toolSpend === null;
const compressionTotal = useMemo(() => results.reduce((sum, d) => sum + compressionOf(d.metrics), 0), [results]);
const cachingTotal = useMemo(() => results.reduce((sum, d) => sum + cachingOf(d.metrics), 0), [results]);
@@ -123,11 +133,27 @@ const UsageTab: React.FC = ({ accessToken, userId, userRole }) =>
[compressionTotal, cachingTotal],
);
+ const topTools = useMemo(() => topToolsBySpend(toolSpend?.by_tool ?? []), [toolSpend]);
+ const topToolNames = useMemo(() => topTools.map((t) => t.tool_name), [topTools]);
+ const topToolsChart = useMemo[]>(
+ () => topTools.map((t) => ({ tool_name: t.tool_name, spend: t.spend })),
+ [topTools],
+ );
+ const dailyToolSeries = useMemo(
+ () =>
+ buildDailyToolSeries(toolSpend?.daily ?? [], topToolNames).map((point) => ({
+ ...point,
+ date: shortDate(String(point.date)),
+ })),
+ [toolSpend, topToolNames],
+ );
+ const toolColors = useMemo(() => DEFAULT_COLOR_CYCLE.slice(0, Math.max(topToolNames.length, 1)), [topToolNames]);
+
return (
@@ -177,6 +203,50 @@ const UsageTab: React.FC = ({ accessToken, userId, userRole }) =>
+
+
+
+ Spend by tool
+
+ Spend on requests that called each tool (MCP and client-side tools). A request that used multiple tools
+ counts its full spend toward each, so this attributes rather than partitions spend.
+
+
+
+ {topTools.length === 0 ? (
+
+ {toolSpendLoading ? "Loading..." : "No tool usage in this range."}
+
+ ) : (
+
+
+
+
Daily spend by tool
+
+
+
);
};
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
new file mode 100644
index 00000000000..562552ffb50
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.test.ts
@@ -0,0 +1,156 @@
+import { describe, expect, it } from "vitest";
+
+import type { DailyData, SpendMetrics } from "@/components/UsagePage/types";
+import type { ToolSpendDailyEntry, ToolSpendEntry } from "@/components/networking";
+import { buildDailyToolSeries, computeCacheLeakage, topToolsBySpend } from "./costOptimizationUtils";
+
+const metrics = (overrides: Partial): SpendMetrics => ({
+ spend: 0,
+ prompt_tokens: 0,
+ completion_tokens: 0,
+ total_tokens: 0,
+ api_requests: 0,
+ successful_requests: 0,
+ failed_requests: 0,
+ cache_read_input_tokens: 0,
+ cache_creation_input_tokens: 0,
+ ...overrides,
+});
+
+const day = (
+ date: string,
+ keys: Record }>,
+): DailyData => ({
+ date,
+ metrics: metrics({}),
+ breakdown: {
+ models: {},
+ model_groups: {},
+ mcp_servers: {},
+ providers: {},
+ entities: {},
+ api_keys: Object.fromEntries(
+ Object.entries(keys).map(([hash, v]) => [
+ hash,
+ { metrics: metrics(v.metrics), metadata: { key_alias: v.alias, team_id: null } },
+ ]),
+ ),
+ },
+});
+
+describe("computeCacheLeakage", () => {
+ it("aggregates a key's tokens and savings across multiple days", () => {
+ const results = [
+ day("2026-07-01", { h1: { alias: "svc-a", metrics: { prompt_tokens: 1000, cache_read_input_tokens: 0 } } }),
+ day("2026-07-02", { h1: { alias: "svc-a", metrics: { prompt_tokens: 500, cache_read_input_tokens: 0 } } }),
+ ];
+ const { rows } = computeCacheLeakage(results);
+ expect(rows).toHaveLength(1);
+ expect(rows[0].uncachedPromptTokens).toBe(1500);
+ });
+
+ it("subtracts cache reads and writes from prompt tokens instead of double-counting them", () => {
+ const results = [
+ day("2026-07-01", {
+ h1: {
+ alias: "svc-a",
+ metrics: { prompt_tokens: 1000, cache_read_input_tokens: 400, cache_creation_input_tokens: 100 },
+ },
+ }),
+ ];
+ const { rows } = computeCacheLeakage(results);
+ expect(rows).toHaveLength(1);
+ expect(rows[0].uncachedPromptTokens).toBe(500);
+ expect(rows[0].cacheHitRatio).toBeCloseTo(0.4, 6);
+ });
+
+ it("prices leakage at the portfolio's realized cache-read discount and drops fully cached keys", () => {
+ const results = [
+ day("2026-07-01", {
+ cacher: {
+ alias: "cacher",
+ metrics: { prompt_tokens: 1000, cache_read_input_tokens: 1000, prompt_caching_savings_spend: 2.0 },
+ },
+ leaker: { alias: "leaker", metrics: { prompt_tokens: 500 } },
+ }),
+ ];
+ const { rows, discountPerToken } = computeCacheLeakage(results);
+ expect(discountPerToken).toBeCloseTo(0.002, 6);
+ expect(rows.map((r) => r.keyAlias)).toEqual(["leaker"]);
+ expect(rows[0].estSavingsLeft).toBeCloseTo(1.0, 6);
+ });
+
+ it("returns null estimate and ranks by uncached tokens when nobody used caching", () => {
+ const results = [
+ day("2026-07-01", {
+ big: { alias: "big", metrics: { prompt_tokens: 9000 } },
+ small: { alias: "small", metrics: { prompt_tokens: 100 } },
+ }),
+ ];
+ const { rows, discountPerToken } = computeCacheLeakage(results);
+ expect(discountPerToken).toBeNull();
+ expect(rows.map((r) => r.keyAlias)).toEqual(["big", "small"]);
+ expect(rows.every((r) => r.estSavingsLeft === null)).toBe(true);
+ });
+
+ it("computes cache hit ratio against total prompt tokens and clamps inconsistent data at zero", () => {
+ const results = [
+ day("2026-07-01", {
+ onlycache: { alias: "onlycache", metrics: { cache_read_input_tokens: 100 } },
+ mixed: { alias: "mixed", metrics: { prompt_tokens: 1000, cache_read_input_tokens: 750 } },
+ }),
+ ];
+ const { rows } = computeCacheLeakage(results);
+ expect(rows.map((r) => r.keyAlias)).toEqual(["mixed"]);
+ expect(rows[0].cacheHitRatio).toBeCloseTo(0.75, 6);
+ expect(rows[0].uncachedPromptTokens).toBe(250);
+ });
+
+ it("respects the row limit", () => {
+ const keys = Object.fromEntries(
+ Array.from({ length: 15 }, (_, i) => [`h${i}`, { alias: `k${i}`, metrics: { prompt_tokens: i + 1 } }]),
+ );
+ const { rows } = computeCacheLeakage([day("2026-07-01", keys)], 5);
+ expect(rows).toHaveLength(5);
+ });
+});
+
+describe("buildDailyToolSeries", () => {
+ const daily: ToolSpendDailyEntry[] = [
+ { date: "2026-07-01", tool_name: "search", spend: 1.0, call_count: 1 },
+ { date: "2026-07-01", tool_name: "read", spend: 0.5, call_count: 1 },
+ { date: "2026-07-02", tool_name: "search", spend: 2.0, call_count: 1 },
+ { date: "2026-07-01", tool_name: "excluded", spend: 9.0, call_count: 1 },
+ ];
+
+ it("pivots to per-date points keyed by the selected tools, dropping others", () => {
+ const series = buildDailyToolSeries(daily, ["search", "read"]);
+ expect(series).toEqual([
+ { date: "2026-07-01", search: 1.0, read: 0.5 },
+ { date: "2026-07-02", search: 2.0, read: 0 },
+ ]);
+ });
+
+ it("sums repeated (date, tool) rows", () => {
+ const series = buildDailyToolSeries(
+ [
+ { date: "2026-07-01", tool_name: "search", spend: 1.0, call_count: 1 },
+ { date: "2026-07-01", tool_name: "search", spend: 2.5, call_count: 1 },
+ ],
+ ["search"],
+ );
+ expect(series[0].search).toBe(3.5);
+ });
+});
+
+describe("topToolsBySpend", () => {
+ const byTool: ToolSpendEntry[] = [
+ { tool_name: "a", spend: 1, call_count: 1, total_tokens: 1 },
+ { tool_name: "b", spend: 5, call_count: 1, total_tokens: 1 },
+ { tool_name: "c", spend: 3, call_count: 1, total_tokens: 1 },
+ ];
+
+ it("sorts by spend descending and truncates to the limit", () => {
+ expect(topToolsBySpend(byTool, 2).map((t) => t.tool_name)).toEqual(["b", "c"]);
+ });
+});
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
new file mode 100644
index 00000000000..2868bdac880
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/costOptimizationUtils.ts
@@ -0,0 +1,123 @@
+import { DailyData } from "@/components/UsagePage/types";
+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)}`;
+};
+
+export const pct = (ratio: number): string => `${formatNumberWithCommas(ratio * 100, 1)}%`;
+
+export interface CacheLeakageRow {
+ apiKey: string;
+ keyAlias: string | null;
+ teamId: string | null;
+ uncachedPromptTokens: number;
+ cacheReadTokens: number;
+ cacheHitRatio: number;
+ realizedCachingSavings: number;
+ estSavingsLeft: number | null;
+}
+
+export interface CacheLeakageResult {
+ rows: CacheLeakageRow[];
+ discountPerToken: number | null;
+}
+
+interface KeyAccumulator {
+ keyAlias: string | null;
+ teamId: string | null;
+ promptTokens: number;
+ cacheReadTokens: number;
+ cacheCreationTokens: number;
+ realizedCachingSavings: number;
+}
+
+const emptyAccumulator = (): KeyAccumulator => ({
+ keyAlias: null,
+ teamId: null,
+ promptTokens: 0,
+ cacheReadTokens: 0,
+ cacheCreationTokens: 0,
+ realizedCachingSavings: 0,
+});
+
+export const computeCacheLeakage = (results: readonly DailyData[], limit = 10): CacheLeakageResult => {
+ const byKey = new Map();
+ for (const day of results) {
+ const apiKeys = day.breakdown?.api_keys ?? {};
+ for (const [apiKey, entry] of Object.entries(apiKeys)) {
+ const acc = byKey.get(apiKey) ?? emptyAccumulator();
+ const m = entry.metrics;
+ const next: KeyAccumulator = {
+ keyAlias: acc.keyAlias ?? entry.metadata?.key_alias ?? null,
+ teamId: acc.teamId ?? entry.metadata?.team_id ?? null,
+ promptTokens: acc.promptTokens + (m.prompt_tokens ?? 0),
+ cacheReadTokens: acc.cacheReadTokens + (m.cache_read_input_tokens ?? 0),
+ cacheCreationTokens: acc.cacheCreationTokens + (m.cache_creation_input_tokens ?? 0),
+ realizedCachingSavings: acc.realizedCachingSavings + (m.prompt_caching_savings_spend ?? 0),
+ };
+ byKey.set(apiKey, next);
+ }
+ }
+
+ const totals = [...byKey.values()].reduce(
+ (agg, a) => ({
+ cacheReadTokens: agg.cacheReadTokens + a.cacheReadTokens,
+ realizedCachingSavings: agg.realizedCachingSavings + a.realizedCachingSavings,
+ }),
+ { cacheReadTokens: 0, realizedCachingSavings: 0 },
+ );
+ const discountPerToken = totals.cacheReadTokens > 0 ? totals.realizedCachingSavings / totals.cacheReadTokens : null;
+
+ const rows: CacheLeakageRow[] = [...byKey.entries()]
+ .map(([apiKey, a]) => {
+ const uncachedPromptTokens = Math.max(0, a.promptTokens - a.cacheReadTokens - a.cacheCreationTokens);
+ return {
+ apiKey,
+ keyAlias: a.keyAlias,
+ teamId: a.teamId,
+ uncachedPromptTokens,
+ cacheReadTokens: a.cacheReadTokens,
+ cacheHitRatio: a.promptTokens > 0 ? a.cacheReadTokens / a.promptTokens : 0,
+ realizedCachingSavings: a.realizedCachingSavings,
+ estSavingsLeft: discountPerToken != null ? uncachedPromptTokens * discountPerToken : null,
+ };
+ })
+ .filter((row) => row.uncachedPromptTokens > 0);
+
+ const sorted = rows.sort((x, y) =>
+ discountPerToken != null
+ ? (y.estSavingsLeft ?? 0) - (x.estSavingsLeft ?? 0)
+ : y.uncachedPromptTokens - x.uncachedPromptTokens,
+ );
+
+ return { rows: sorted.slice(0, limit), discountPerToken };
+};
+
+export interface DailyToolSpendPoint {
+ date: string;
+ [toolName: string]: string | number;
+}
+
+export const buildDailyToolSeries = (
+ daily: readonly ToolSpendDailyEntry[],
+ topToolNames: readonly string[],
+): DailyToolSpendPoint[] => {
+ const top = new Set(topToolNames);
+ const byDate = new Map();
+ for (const d of daily) {
+ if (!top.has(d.tool_name)) continue;
+ const point = byDate.get(d.date) ?? seedPoint(d.date, topToolNames);
+ point[d.tool_name] = (Number(point[d.tool_name]) || 0) + d.spend;
+ byDate.set(d.date, point);
+ }
+ return [...byDate.values()].sort((a, b) => a.date.localeCompare(b.date));
+};
+
+const seedPoint = (date: string, toolNames: readonly string[]): DailyToolSpendPoint =>
+ toolNames.reduce((p, name) => ({ ...p, [name]: 0 }), { date });
+
+export const topToolsBySpend = (byTool: readonly ToolSpendEntry[], limit = 8): ToolSpendEntry[] =>
+ [...byTool].sort((a, b) => b.spend - a.spend).slice(0, limit);
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/useDailyActivityRange.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/useDailyActivityRange.test.tsx
new file mode 100644
index 00000000000..9fd27d80c37
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/useDailyActivityRange.test.tsx
@@ -0,0 +1,39 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const mockUsePaginatedDailyActivity = vi.fn();
+
+vi.mock("@/app/(dashboard)/usage/_components/hooks/usePaginatedDailyActivity", () => ({
+ usePaginatedDailyActivity: (args: unknown) => {
+ mockUsePaginatedDailyActivity(args);
+ return { data: { results: [] }, loading: false, isFetchingMore: false };
+ },
+}));
+
+vi.mock("@/components/networking", () => ({
+ userDailyActivityCall: vi.fn(),
+}));
+
+import { useDailyActivityRange } from "./useDailyActivityRange";
+
+const argsOfLastCall = () => mockUsePaginatedDailyActivity.mock.calls.at(-1)?.[0].args as unknown[];
+
+describe("useDailyActivityRange", () => {
+ it("queries every user's activity for an admin", () => {
+ renderHook(() => useDailyActivityRange("test-token", "u1", "proxy_admin"));
+
+ expect(argsOfLastCall()).toEqual(["test-token", expect.any(Date), expect.any(Date), null]);
+ });
+
+ it("scopes the query to the caller for a non-admin", () => {
+ renderHook(() => useDailyActivityRange("test-token", "u1", "internal_user"));
+
+ expect(argsOfLastCall()).toEqual(["test-token", expect.any(Date), expect.any(Date), "u1"]);
+ });
+
+ it("stays disabled until an access token is available", () => {
+ renderHook(() => useDailyActivityRange(null, "u1", "proxy_admin"));
+
+ expect(mockUsePaginatedDailyActivity).toHaveBeenLastCalledWith(expect.objectContaining({ enabled: false }));
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/useDailyActivityRange.ts b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/useDailyActivityRange.ts
new file mode 100644
index 00000000000..1c3f706726e
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/useDailyActivityRange.ts
@@ -0,0 +1,49 @@
+import { useMemo, useState } from "react";
+
+import { userDailyActivityCall } from "@/components/networking";
+import { DailyData } from "@/components/UsagePage/types";
+import { all_admin_roles } from "@/utils/roles";
+import { usePaginatedDailyActivity } from "@/app/(dashboard)/usage/_components/hooks/usePaginatedDailyActivity";
+
+const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000;
+
+export interface DateRange {
+ from?: Date;
+ to?: Date;
+}
+
+export interface DailyActivityRange {
+ dateValue: DateRange;
+ onDateChange: (value: DateRange) => void;
+ results: DailyData[];
+ loading: boolean;
+ isFetchingMore: boolean;
+}
+
+export const useDailyActivityRange = (
+ accessToken: string | null,
+ userId: string | null,
+ userRole: string,
+): DailyActivityRange => {
+ const initialFrom = useMemo(() => new Date(new Date().getTime() - THIRTY_DAYS_MS), []);
+ const initialTo = useMemo(() => new Date(), []);
+ const [dateValue, setDateValue] = useState({ from: initialFrom, to: initialTo });
+
+ const startTime = dateValue.from ?? null;
+ const endTime = dateValue.to ?? null;
+ const effectiveUserId = all_admin_roles.includes(userRole) ? null : userId;
+
+ const { data, loading, isFetchingMore } = usePaginatedDailyActivity({
+ fetchFn: userDailyActivityCall,
+ args: [accessToken, startTime, endTime, effectiveUserId],
+ enabled: !!accessToken && !!startTime && !!endTime,
+ });
+
+ return {
+ dateValue,
+ onDateChange: setDateValue,
+ results: data.results as DailyData[],
+ loading,
+ isFetchingMore,
+ };
+};
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index f5fe3990ba7..9dcb4321445 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -7582,6 +7582,38 @@ export const fetchToolsList = async (accessToken: string): Promise =>
return data.tools ?? [];
};
+export interface ToolSpendEntry {
+ tool_name: string;
+ spend: number;
+ call_count: number;
+ total_tokens: number;
+}
+
+export interface ToolSpendDailyEntry {
+ date: string;
+ tool_name: string;
+ spend: number;
+ call_count: number;
+}
+
+export interface ToolSpendResponse {
+ by_tool: ToolSpendEntry[];
+ daily: ToolSpendDailyEntry[];
+ total_spend: number;
+ start_date: string | null;
+ end_date: string | null;
+}
+
+export const getToolSpend = async (
+ accessToken: string,
+ startDate?: string,
+ endDate?: string,
+): Promise =>
+ apiClient.get(`/v1/tool/spend`, {
+ accessToken,
+ query: { start_date: startDate, end_date: endDate },
+ });
+
export interface ToolPolicyOverrideRow {
override_id: string;
tool_name: string;
diff --git a/ui/litellm-dashboard/src/lib/http/schema.d.ts b/ui/litellm-dashboard/src/lib/http/schema.d.ts
index e0223aa4af6..825d06d6a38 100644
--- a/ui/litellm-dashboard/src/lib/http/schema.d.ts
+++ b/ui/litellm-dashboard/src/lib/http/schema.d.ts
@@ -17900,6 +17900,32 @@ export interface paths {
patch?: never;
trace?: never;
};
+ "/v1/tool/spend": {
+ parameters: {
+ query?: never;
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ /**
+ * Get Tool Spend
+ * @description Spend attributed to each tool over a date range, for the Cost Optimization dashboard.
+ *
+ * Joins ``LiteLLM_SpendLogToolIndex`` (which tool names ran on which request) to
+ * ``LiteLLM_SpendLogs`` (what the request cost). A request that used multiple tools
+ * counts its full spend toward each of those tools, so per-tool numbers are
+ * attributions. ``total_spend`` is the deduplicated spend of every request that
+ * called at least one tool in the window, so it never double counts.
+ */
+ get: operations["get_tool_spend_v1_tool_spend_get"];
+ put?: never;
+ post?: never;
+ delete?: never;
+ options?: never;
+ head?: never;
+ patch?: never;
+ trace?: never;
+ };
"/v1/tool/{tool_name}": {
parameters: {
query?: never;
@@ -31978,6 +32004,67 @@ export interface components {
/** Updated */
updated: boolean;
};
+ /**
+ * ToolSpendDailyEntry
+ * @description Spend attributed to one tool on one UTC day.
+ */
+ ToolSpendDailyEntry: {
+ /**
+ * Call Count
+ * @default 0
+ */
+ call_count: number;
+ /** Date */
+ date: string;
+ /**
+ * Spend
+ * @default 0
+ */
+ spend: number;
+ /** Tool Name */
+ tool_name: string;
+ };
+ /**
+ * ToolSpendEntry
+ * @description Total spend attributed to one tool over the requested window.
+ */
+ ToolSpendEntry: {
+ /**
+ * Call Count
+ * @default 0
+ */
+ call_count: number;
+ /**
+ * Spend
+ * @description Attributed spend: a request that used several tools counts its full spend toward each of them
+ * @default 0
+ */
+ spend: number;
+ /** Tool Name */
+ tool_name: string;
+ /**
+ * Total Tokens
+ * @default 0
+ */
+ total_tokens: number;
+ };
+ /** ToolSpendResponse */
+ ToolSpendResponse: {
+ /** By Tool */
+ by_tool?: components["schemas"]["ToolSpendEntry"][];
+ /** Daily */
+ daily?: components["schemas"]["ToolSpendDailyEntry"][];
+ /** End Date */
+ end_date?: string | null;
+ /** Start Date */
+ start_date?: string | null;
+ /**
+ * Total Spend
+ * @description Deduplicated spend of every request that called at least one tool in the window; less than the sum of per-tool attributed spend whenever multi-tool requests exist
+ * @default 0
+ */
+ total_spend: number;
+ };
/**
* ToolUsageLogEntry
* @description One spend log row for a tool call (for UI "recent logs" table).
@@ -56176,6 +56263,40 @@ export interface operations {
};
};
};
+ get_tool_spend_v1_tool_spend_get: {
+ parameters: {
+ query?: {
+ /** @description YYYY-MM-DD (defaults to 30 days ago) */
+ start_date?: string | null;
+ /** @description YYYY-MM-DD (defaults to today) */
+ end_date?: string | null;
+ };
+ header?: never;
+ path?: never;
+ cookie?: never;
+ };
+ requestBody?: never;
+ responses: {
+ /** @description Successful Response */
+ 200: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "application/json": components["schemas"]["ToolSpendResponse"];
+ };
+ };
+ /** @description Validation Error */
+ 422: {
+ headers: {
+ [name: string]: unknown;
+ };
+ content: {
+ "application/json": components["schemas"]["HTTPValidationError"];
+ };
+ };
+ };
+ };
get_tool_v1_tool__tool_name__get: {
parameters: {
query?: never;