From fc73de040eff86be2bcbb2779ea1da7e9ec58623 Mon Sep 17 00:00:00 2001
From: roshan <38771624+rohoswagger@users.noreply.github.com>
Date: Fri, 31 Jul 2026 14:59:57 -0700
Subject: [PATCH] fix(usage): sort per-model usage breakdown by cost descending
 (#13676)

---
 web/src/app/app/settings/usage/UsageSettings.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/app/app/settings/usage/UsageSettings.tsx b/web/src/app/app/settings/usage/UsageSettings.tsx
index fd3a532c66..9fdff295a9 100644
--- a/web/src/app/app/settings/usage/UsageSettings.tsx
+++ b/web/src/app/app/settings/usage/UsageSettings.tsx
@@ -48,6 +48,10 @@ function WindowCostSection({ windowCostCents, rows }: WindowCostSectionProps) {
     0
   );
   const hasCache = rows.some((row) => row.cache_read_tokens > 0);
+  const sortedRows = useMemo(
+    () => [...rows].sort((a, b) => b.cost_cents - a.cost_cents),
+    [rows]
+  );
 
   return (
     <Section gap={0.75} justifyContent="start">
@@ -68,7 +72,7 @@ function WindowCostSection({ windowCostCents, rows }: WindowCostSectionProps) {
         />
       ) : (
         <Card>
-          {rows.map((row, index) => (
+          {sortedRows.map((row, index) => (
             <div key={`${row.day}-${row.model}`}>
               {index > 0 && <Divider />}
               <Section gap={0.5} alignItems="start" justifyContent="start">