From a1379db81847cc70b2c9535fd8370b69f9ebf291 Mon Sep 17 00:00:00 2001
From: Rakshith Bhat <88523594+RakshithBhat03@users.noreply.github.com>
Date: Tue, 25 Aug 2026 03:21:32 +0530
Subject: [PATCH] fix(web): sort usage models by token count (#8108)

---
 .../src/components/usage/UsagePage.test.tsx   | 75 ++++++++++++++++++-
 apps/web/src/components/usage/UsagePage.tsx   | 13 +++-
 2 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/usage/UsagePage.test.tsx b/apps/web/src/components/usage/UsagePage.test.tsx
index 373e8a07c79e8cc7458b32b6ee6c14476abb5008..8e86b521e890a748a3d97c21a7f29c9cf71611e2 100644
--- a/apps/web/src/components/usage/UsagePage.test.tsx
+++ b/apps/web/src/components/usage/UsagePage.test.tsx
@@ -5,6 +5,8 @@ import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
 
 const testState = vi.hoisted(() => ({
   useUsage: vi.fn(),
+  metric: "cost" as "cost" | "tokens",
+  breakdown: "time" as "model" | "time",
 }));
 
 vi.mock("react", async (importOriginal) => {
@@ -24,9 +26,11 @@ vi.mock("react", async (importOriginal) => {
               untilTime: "2026-08-11T12:37:00.000Z",
             },
           }
-        : initial === "model"
-          ? "time"
-          : initial,
+        : initial === "cost"
+          ? testState.metric
+          : initial === "model"
+            ? testState.breakdown
+            : initial,
       vi.fn(),
     ]),
   };
@@ -72,10 +76,40 @@ const providerTotals = (codex: number, claude: number) =>
     ["claude", { costUsd: claude, totalTokens: claude * 1_000 }],
   ] as const);
 
+const modelTotals = Object.freeze([
+  {
+    model: "expensive-model",
+    provider: "claude" as const,
+    costUsd: 10,
+    totalTokens: 100,
+    records: 1,
+    costShare: 10 / 16,
+  },
+  {
+    model: "token-heavy-model",
+    provider: "codex" as const,
+    costUsd: 5,
+    totalTokens: 1_000,
+    records: 1,
+    costShare: 5 / 16,
+  },
+  {
+    model: "token-heavy-cheaper-model",
+    provider: "codex" as const,
+    costUsd: 1,
+    totalTokens: 1_000,
+    records: 1,
+    costShare: 1 / 16,
+  },
+]);
+
 beforeEach(() => {
+  testState.metric = "cost";
+  testState.breakdown = "time";
   testState.useUsage.mockReturnValue({
     merged: {
       ...mergeUsage([], USAGE_CONTRACT_VERSION),
+      models: modelTotals,
       hourly: [
         {
           day: "2026-08-10",
@@ -110,4 +144,39 @@ describe("UsagePage hourly breakdown", () => {
     expect(body).toContain("$13.00");
     expect(body.indexOf("$11.00")).toBeLessThan(body.indexOf("$13.00"));
   });
+
+  it("keeps chronological ordering when the token metric is selected", () => {
+    testState.metric = "tokens";
+
+    const markup = renderToStaticMarkup(<UsagePage />);
+    const body = markup.match(/<tbody>(.*?)<\/tbody>/)?.[1] ?? "";
+
+    expect(body).toMatch(/\$11\.00.*\$13\.00/);
+  });
+});
+
+describe("UsagePage model breakdown", () => {
+  it("sorts models by cost when the cost metric is selected", () => {
+    testState.breakdown = "model";
+
+    const markup = renderToStaticMarkup(<UsagePage />);
+    const body = markup.match(/<tbody>(.*?)<\/tbody>/)?.[1] ?? "";
+
+    expect(body).toMatch(/expensive-model.*token-heavy-model.*token-heavy-cheaper-model/);
+  });
+
+  it("sorts models by token usage when the token metric is selected", () => {
+    testState.metric = "tokens";
+    testState.breakdown = "model";
+
+    const markup = renderToStaticMarkup(<UsagePage />);
+    const body = markup.match(/<tbody>(.*?)<\/tbody>/)?.[1] ?? "";
+
+    expect(body).toMatch(/token-heavy-model.*token-heavy-cheaper-model.*expensive-model/);
+    expect(modelTotals.map((model) => model.model)).toEqual([
+      "expensive-model",
+      "token-heavy-model",
+      "token-heavy-cheaper-model",
+    ]);
+  });
 });
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 2330403dc765c29f28c2d781ad8e268074b69c63..7474bb9d61207879b5975d6ef7a5e623e2549148 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -74,6 +74,15 @@ export function UsagePage() {
     () => (isPast24Hours ? merged.hourly : merged.daily).toReversed(),
     [isPast24Hours, merged.daily, merged.hourly],
   );
+  const breakdownModels = useMemo(
+    () =>
+      breakdown === "model" && metric === "tokens"
+        ? merged.models.toSorted(
+            (left, right) => right.totalTokens - left.totalTokens || right.costUsd - left.costUsd,
+          )
+        : merged.models,
+    [breakdown, merged.models, metric],
+  );
   const activeProviders = useMemo(() => providersWithUsage(merged.providers), [merged.providers]);
   const timeValueColumnWidth = `${60 / (activeProviders.length + 2)}%`;
 
@@ -350,14 +359,14 @@ export function UsagePage() {
                         </tr>
                       </thead>
                       <tbody>
-                        {merged.models.length === 0 ? (
+                        {breakdownModels.length === 0 ? (
                           <tr>
                             <td colSpan={4} className="py-6 text-center text-muted-foreground">
                               No activity in this window.
                             </td>
                           </tr>
                         ) : (
-                          merged.models.map((model) => (
+                          breakdownModels.map((model) => (
                             <tr
                               key={`${model.provider}:${model.model}`}
                               className="border-b border-border/50 transition-colors hover:bg-muted/50"
-- 
2.54.0