From ede6ff538154a784e2a2eb5fab10153633c9e391 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Fri, 11 Sep 2026 10:07:20 -0700
Subject: [PATCH] feat(web): open Usage on the Limits tab by default

Limits is the view most people come to the Usage page for, but it was the
last option after Cost and Tokens and easy to miss. The first-visit default
is now Limits on web, desktop, and mobile; the last-picked tab still sticks.

Made with Claude Fable 5 in Claude Code.

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 .../mobile/src/features/usage/UsageRouteScreen.tsx |  4 +++-
 .../components/usage/usagePagePreferences.test.ts  |  6 +++---
 .../src/components/usage/usagePagePreferences.ts   | 14 +++++++-------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/mobile/src/features/usage/UsageRouteScreen.tsx b/apps/mobile/src/features/usage/UsageRouteScreen.tsx
index ad54d6e323ee..b3232acc6810 100644
--- a/apps/mobile/src/features/usage/UsageRouteScreen.tsx
+++ b/apps/mobile/src/features/usage/UsageRouteScreen.tsx
@@ -67,7 +67,9 @@ const CHART_HEIGHT = 180;
 export function UsageRouteScreen() {
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();
-  const [tab, setTab] = useState<UsageTab>("usage");
+  // Limits first: remaining quota and reset time are what most people open
+  // the screen for.
+  const [tab, setTab] = useState<UsageTab>("limits");
   const [windowSelection, setWindowSelection] = useState(() => ({
     days: 30,
     window: makeWindow(30),
diff --git a/apps/web/src/components/usage/usagePagePreferences.test.ts b/apps/web/src/components/usage/usagePagePreferences.test.ts
index dcdde98fa247..f5686de012be 100644
--- a/apps/web/src/components/usage/usagePagePreferences.test.ts
+++ b/apps/web/src/components/usage/usagePagePreferences.test.ts
@@ -25,7 +25,7 @@ afterEach(() => {
 
 describe("Usage page preferences", () => {
   it("uses defaults when no preference has been saved", () => {
-    expect(readUsagePagePreferences()).toEqual({ metric: "cost", windowDays: 30 });
+    expect(readUsagePagePreferences()).toEqual({ metric: "limits", windowDays: 30 });
   });
 
   it.each([1, 7, 30, 90] as const)("round-trips every metric with a %i-day range", (windowDays) => {
@@ -41,7 +41,7 @@ describe("Usage page preferences", () => {
     '{"metric":"cost","windowDays":365}',
   ])("replaces invalid preferences on the next save: %s", (value) => {
     values.set(key, value);
-    expect(readUsagePagePreferences()).toEqual({ metric: "cost", windowDays: 30 });
+    expect(readUsagePagePreferences()).toEqual({ metric: "limits", windowDays: 30 });
     saveUsagePagePreferences({ metric: "tokens", windowDays: 7 });
     expect(readUsagePagePreferences()).toEqual({ metric: "tokens", windowDays: 7 });
   });
@@ -64,7 +64,7 @@ describe("Usage page preferences", () => {
         throw new Error("SecurityError");
       },
     });
-    expect(readUsagePagePreferences()).toEqual({ metric: "cost", windowDays: 30 });
+    expect(readUsagePagePreferences()).toEqual({ metric: "limits", windowDays: 30 });
     expect(() => saveUsagePagePreferences({ metric: "tokens", windowDays: 7 })).not.toThrow();
   });
 });
diff --git a/apps/web/src/components/usage/usagePagePreferences.ts b/apps/web/src/components/usage/usagePagePreferences.ts
index ddd6d5341cc0..630e78e98fe2 100644
--- a/apps/web/src/components/usage/usagePagePreferences.ts
+++ b/apps/web/src/components/usage/usagePagePreferences.ts
@@ -9,17 +9,17 @@ const UsagePagePreferencesSchema = Schema.Struct({
 });
 export type UsagePagePreferences = typeof UsagePagePreferencesSchema.Type;
 
+// Limits is what most people open the page for (how much subscription quota is
+// left, and when it resets), so it is the first-visit default; the last picked
+// tab sticks after that.
+const DEFAULT_PREFERENCES: UsagePagePreferences = { metric: "limits", windowDays: 30 };
+
 export function readUsagePagePreferences(): UsagePagePreferences {
   try {
-    return (
-      getLocalStorageItem(STORAGE_KEY, UsagePagePreferencesSchema) ?? {
-        metric: "cost",
-        windowDays: 30,
-      }
-    );
+    return getLocalStorageItem(STORAGE_KEY, UsagePagePreferencesSchema) ?? DEFAULT_PREFERENCES;
   } catch (error) {
     console.error("Could not read Usage page preferences.", error);
-    return { metric: "cost", windowDays: 30 };
+    return DEFAULT_PREFERENCES;
   }
 }