From 18e87d30396ec5fad1d32a753760bec42ce7d9f8 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrish+github@berri.ai>
Date: Fri, 9 Oct 2026 09:56:59 -0700
Subject: [PATCH] fix(ui): title usage overview chart "Daily usage" and label
 the model table "Top models" (#45604)

* fix(ui): title usage overview chart "Daily usage" and label the model table "Top models"

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* fix(ui): clarify usage chart subtitle as top 8 models plus Other

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

---------

Co-authored-by: Krrish Dholakia <krrishdholakia@berri.ai>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/UsagePageView.test.tsx         | 21 ++++++++++++++++++-
 .../components/overview/UsageOverview.tsx     |  7 ++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
index bad366ad510..d4011f2e5db 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
@@ -620,10 +620,29 @@ describe("UsagePage", () => {
     expect(totalTokensElements.length).toBeGreaterThan(0);
 
     // Check for chart titles (these are in the Overview tab)
+    expect(screen.getByText("Daily usage")).toBeInTheDocument();
+    expect(screen.getByText("Daily spend by model (top 8, rest grouped as Other)")).toBeInTheDocument();
     expect(screen.getByText("Top models")).toBeInTheDocument();
     expect(screen.getByText("Top Virtual Keys")).toBeInTheDocument();
   });
 
+  it("should rename the usage chart when the weekly bucket is selected", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<UsagePage {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(mockUserDailyActivityAggregatedCall).toHaveBeenCalled();
+    });
+
+    expect(screen.getByText("Daily usage")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("radio", { name: "Weekly" }));
+
+    expect(screen.getByText("Weekly usage")).toBeInTheDocument();
+    expect(screen.getByText("Weekly spend by model (top 8, rest grouped as Other)")).toBeInTheDocument();
+    expect(screen.queryByText("Daily usage")).not.toBeInTheDocument();
+  });
+
   it("should render the top models chart stacked in the shared usage palette", async () => {
     const { container } = renderWithProviders(<UsagePage {...defaultProps} />);
 
@@ -660,7 +679,7 @@ describe("UsagePage", () => {
     });
 
     // Default view should show Global Usage (for admin)
-    expect(screen.getByText("Top models")).toBeInTheDocument();
+    expect(screen.getByText("Daily usage")).toBeInTheDocument();
 
     // Switch to Team Usage view
     const usageSelect = screen.getByTestId("usage-view-select");
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/overview/UsageOverview.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/overview/UsageOverview.tsx
index b6623a8bc6c..abac29a2503 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/overview/UsageOverview.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/overview/UsageOverview.tsx
@@ -120,8 +120,8 @@ export default function UsageOverview({
       </div>
 
       <Panel
-        title="Top models"
-        subtitle={`${granularity === "day" ? "Daily" : "Weekly"} ${METRIC_NOUN[state.metric]}, top 8 stacked`}
+        title={`${granularity === "day" ? "Daily" : "Weekly"} usage`}
+        subtitle={`${granularity === "day" ? "Daily" : "Weekly"} ${METRIC_NOUN[state.metric]} by model (top 8, rest grouped as Other)`}
         action={
           <>
             <BreakdownControls state={state} onChange={setState} showDimension={false} />
@@ -153,7 +153,8 @@ export default function UsageOverview({
             />
           )}
         </div>
-        <div className={cn("border-t py-2", PANEL_INSET_X)}>
+        <div className={cn("border-t pt-3 pb-2", PANEL_INSET_X)}>
+          <h4 className="text-sm leading-5 font-medium text-foreground">Top models</h4>
           <Leaderboard
             ranking={ranking}
             series={dailySeries}