From 4c0d6b0c47efd1b3a71284382f8953f49fe2f0e9 Mon Sep 17 00:00:00 2001
From: extoci <hi@extoci.lol>
Date: Sat, 5 Sep 2026 19:27:03 +0000
Subject: [PATCH 1/2] fix(web): remember usage page selection

---
 .../src/components/usage/UsagePage.test.tsx   |  6 ++-
 apps/web/src/components/usage/UsagePage.tsx   | 44 ++++++++++++++++---
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/usage/UsagePage.test.tsx b/apps/web/src/components/usage/UsagePage.test.tsx
index 944987388b06..0afe57403836 100644
--- a/apps/web/src/components/usage/UsagePage.test.tsx
+++ b/apps/web/src/components/usage/UsagePage.test.tsx
@@ -5,8 +5,9 @@ import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
 
 const testState = vi.hoisted(() => ({
   useUsage: vi.fn(),
-  metric: "cost" as "cost" | "tokens",
+  metric: "cost" as "cost" | "tokens" | "limits",
   breakdown: "time" as "model" | "time",
+  setPreferences: vi.fn(),
 }));
 
 vi.mock("react", async (importOriginal) => {
@@ -37,6 +38,9 @@ vi.mock("react", async (importOriginal) => {
 });
 
 vi.mock("../../env", () => ({ isElectron: false }));
+vi.mock("../../hooks/useLocalStorage", () => ({
+  useLocalStorage: () => [{ metric: testState.metric, windowDays: 30 }, testState.setPreferences],
+}));
 vi.mock("../../state/usage", () => ({ useUsage: testState.useUsage }));
 vi.mock("../ui/button", () => ({ Button: "button" }));
 vi.mock("../ui/scroll-area", () => ({ ScrollArea: "div" }));
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index e957002115ab..31701c2c7b0e 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -1,4 +1,5 @@
 import { useAtomValue } from "@effect/atom-react";
+import * as Schema from "effect/Schema";
 import {
   USAGE_CONTRACT_VERSION,
   type EnvironmentId,
@@ -20,6 +21,7 @@ import {
 } from "@t3tools/shared/usageMerge";
 
 import { isElectron } from "../../env";
+import { useLocalStorage } from "../../hooks/useLocalStorage";
 import { cn } from "../../lib/utils";
 import { environmentPresentations } from "../../state/presentation";
 import { serverEnvironment } from "../../state/server";
@@ -70,6 +72,20 @@ const METRIC_OPTIONS = [
   { value: "limits", label: "Limits" },
 ] as const satisfies readonly { value: UsageMetric; label: string }[];
 
+const USAGE_PAGE_PREFERENCES_STORAGE_KEY = "t3code:usage-page-preferences:v1";
+const UsageMetricSchema = Schema.Literals(["cost", "tokens", "limits"]);
+const UsageWindowDaysSchema = Schema.Literals([1, 7, 30, 90]);
+type UsageWindowDays = typeof UsageWindowDaysSchema.Type;
+const UsagePagePreferencesSchema = Schema.Struct({
+  metric: UsageMetricSchema,
+  windowDays: UsageWindowDaysSchema,
+});
+type UsagePagePreferences = typeof UsagePagePreferencesSchema.Type;
+const DEFAULT_USAGE_PAGE_PREFERENCES: UsagePagePreferences = {
+  metric: "cost",
+  windowDays: 30,
+};
+
 function isUsageMetric(value: string | null | undefined): value is UsageMetric {
   return METRIC_OPTIONS.some((option) => option.value === value);
 }
@@ -81,12 +97,25 @@ const WINDOW_OPTIONS = [
   { days: 90, label: "90 days" },
 ] as const;
 
+function isUsageWindowDays(value: number): value is UsageWindowDays {
+  return WINDOW_OPTIONS.some((option) => option.days === value);
+}
+
 export function UsagePage() {
+  const [preferences, setPreferences] = useLocalStorage(
+    USAGE_PAGE_PREFERENCES_STORAGE_KEY,
+    DEFAULT_USAGE_PAGE_PREFERENCES,
+    UsagePagePreferencesSchema,
+  );
   const [windowSelection, setWindowSelection] = useState(() => ({
-    days: 30,
-    window: makeWindow(30),
+    days: preferences.windowDays,
+    window: makeWindow(
+      preferences.windowDays,
+      undefined,
+      preferences.windowDays === 1 ? "hour" : "day",
+    ),
   }));
-  const [metric, setMetric] = useState<UsageMetric>("cost");
+  const metric = preferences.metric;
   const showingLimits = metric === "limits";
   const [breakdown, setBreakdown] = useState<"model" | "time">("model");
   const [selectedEnvironmentIds, setSelectedEnvironmentIds] =
@@ -132,11 +161,16 @@ export function UsagePage() {
   const timeValueColumnWidth = `${60 / (activeProviders.length + 2)}%`;
 
   const selectWindow = (days: number) => {
+    if (!isUsageWindowDays(days)) return;
+    setPreferences((current) => ({ ...current, windowDays: days }));
     setWindowSelection({
       days,
       window: makeWindow(days, undefined, days === 1 ? "hour" : "day"),
     });
   };
+  const selectMetric = (nextMetric: UsageMetric) => {
+    setPreferences((current) => ({ ...current, metric: nextMetric }));
+  };
   const refreshWindow = () => {
     if (showingLimits) {
       for (const [environmentId, presentation] of presentations) {
@@ -195,7 +229,7 @@ export function UsagePage() {
           value={[metric]}
           onValueChange={(next) => {
             const value = next[0];
-            if (isUsageMetric(value)) setMetric(value);
+            if (isUsageMetric(value)) selectMetric(value);
           }}
         >
           {METRIC_OPTIONS.map((option) => (
@@ -235,7 +269,7 @@ export function UsagePage() {
         <Select
           value={metric}
           onValueChange={(value) => {
-            if (isUsageMetric(value)) setMetric(value);
+            if (isUsageMetric(value)) selectMetric(value);
           }}
         >
           <SelectTrigger

From 50f517b95c7833bce268f56df7fc1743ff5542ac Mon Sep 17 00:00:00 2001
From: shivam <91240327+shivamhwp@users.noreply.github.com>
Date: Sun, 6 Sep 2026 03:50:50 +0000
Subject: [PATCH 2/2] fix(web): keep usage controls working when storage fails

---
 .../src/components/usage/UsagePage.test.tsx   | 41 ++++++-----
 apps/web/src/components/usage/UsagePage.tsx   | 37 ++++------
 .../usage/usagePagePreferences.test.ts        | 70 +++++++++++++++++++
 .../components/usage/usagePagePreferences.ts  | 32 +++++++++
 4 files changed, 135 insertions(+), 45 deletions(-)
 create mode 100644 apps/web/src/components/usage/usagePagePreferences.test.ts
 create mode 100644 apps/web/src/components/usage/usagePagePreferences.ts

diff --git a/apps/web/src/components/usage/UsagePage.test.tsx b/apps/web/src/components/usage/UsagePage.test.tsx
index 0afe57403836..e41843e6d9cc 100644
--- a/apps/web/src/components/usage/UsagePage.test.tsx
+++ b/apps/web/src/components/usage/UsagePage.test.tsx
@@ -7,7 +7,6 @@ const testState = vi.hoisted(() => ({
   useUsage: vi.fn(),
   metric: "cost" as "cost" | "tokens" | "limits",
   breakdown: "time" as "model" | "time",
-  setPreferences: vi.fn(),
 }));
 
 vi.mock("react", async (importOriginal) => {
@@ -15,32 +14,31 @@ vi.mock("react", async (importOriginal) => {
   return {
     ...actual,
     useState: vi.fn((initial: unknown) => [
-      typeof initial === "function"
-        ? {
-            days: 1,
-            window: {
-              sinceDay: "2026-08-10",
-              untilDay: "2026-08-11",
-              timeZone: "UTC",
-              resolution: "hour",
-              sinceTime: "2026-08-10T12:37:00.000Z",
-              untilTime: "2026-08-11T12:37:00.000Z",
-            },
-          }
-        : initial === "cost"
-          ? testState.metric
-          : initial === "model"
-            ? testState.breakdown
-            : initial,
+      initial === readUsagePagePreferences
+        ? { metric: testState.metric, windowDays: 30 }
+        : typeof initial === "function"
+          ? {
+              days: 1,
+              window: {
+                sinceDay: "2026-08-10",
+                untilDay: "2026-08-11",
+                timeZone: "UTC",
+                resolution: "hour",
+                sinceTime: "2026-08-10T12:37:00.000Z",
+                untilTime: "2026-08-11T12:37:00.000Z",
+              },
+            }
+          : initial === "cost"
+            ? testState.metric
+            : initial === "model"
+              ? testState.breakdown
+              : initial,
       vi.fn(),
     ]),
   };
 });
 
 vi.mock("../../env", () => ({ isElectron: false }));
-vi.mock("../../hooks/useLocalStorage", () => ({
-  useLocalStorage: () => [{ metric: testState.metric, windowDays: 30 }, testState.setPreferences],
-}));
 vi.mock("../../state/usage", () => ({ useUsage: testState.useUsage }));
 vi.mock("../ui/button", () => ({ Button: "button" }));
 vi.mock("../ui/scroll-area", () => ({ ScrollArea: "div" }));
@@ -74,6 +72,7 @@ vi.mock("./usageProviders", async (importOriginal) => {
 });
 
 import { UsagePage } from "./UsagePage";
+import { readUsagePagePreferences } from "./usagePagePreferences";
 
 const providerTotals = (codex: number, claude: number) =>
   new Map([
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 31701c2c7b0e..8930c79a8bfe 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -1,5 +1,4 @@
 import { useAtomValue } from "@effect/atom-react";
-import * as Schema from "effect/Schema";
 import {
   USAGE_CONTRACT_VERSION,
   type EnvironmentId,
@@ -21,7 +20,6 @@ import {
 } from "@t3tools/shared/usageMerge";
 
 import { isElectron } from "../../env";
-import { useLocalStorage } from "../../hooks/useLocalStorage";
 import { cn } from "../../lib/utils";
 import { environmentPresentations } from "../../state/presentation";
 import { serverEnvironment } from "../../state/server";
@@ -64,6 +62,11 @@ import { UsageLimitsSection } from "./UsageLimits";
 import { UsagePriceOverrides } from "./UsagePriceOverrides";
 import { UsageProviderChart, type UsageChartMetric } from "./UsageProviderChart";
 import { PROVIDER_ORDER, PROVIDER_PRESENTATION, providersWithUsage } from "./usageProviders";
+import {
+  readUsagePagePreferences,
+  saveUsagePagePreferences,
+  type UsagePagePreferences,
+} from "./usagePagePreferences";
 
 type UsageMetric = UsageChartMetric | "limits";
 const METRIC_OPTIONS = [
@@ -72,20 +75,6 @@ const METRIC_OPTIONS = [
   { value: "limits", label: "Limits" },
 ] as const satisfies readonly { value: UsageMetric; label: string }[];
 
-const USAGE_PAGE_PREFERENCES_STORAGE_KEY = "t3code:usage-page-preferences:v1";
-const UsageMetricSchema = Schema.Literals(["cost", "tokens", "limits"]);
-const UsageWindowDaysSchema = Schema.Literals([1, 7, 30, 90]);
-type UsageWindowDays = typeof UsageWindowDaysSchema.Type;
-const UsagePagePreferencesSchema = Schema.Struct({
-  metric: UsageMetricSchema,
-  windowDays: UsageWindowDaysSchema,
-});
-type UsagePagePreferences = typeof UsagePagePreferencesSchema.Type;
-const DEFAULT_USAGE_PAGE_PREFERENCES: UsagePagePreferences = {
-  metric: "cost",
-  windowDays: 30,
-};
-
 function isUsageMetric(value: string | null | undefined): value is UsageMetric {
   return METRIC_OPTIONS.some((option) => option.value === value);
 }
@@ -97,16 +86,12 @@ const WINDOW_OPTIONS = [
   { days: 90, label: "90 days" },
 ] as const;
 
-function isUsageWindowDays(value: number): value is UsageWindowDays {
+function isUsageWindowDays(value: number): value is UsagePagePreferences["windowDays"] {
   return WINDOW_OPTIONS.some((option) => option.days === value);
 }
 
 export function UsagePage() {
-  const [preferences, setPreferences] = useLocalStorage(
-    USAGE_PAGE_PREFERENCES_STORAGE_KEY,
-    DEFAULT_USAGE_PAGE_PREFERENCES,
-    UsagePagePreferencesSchema,
-  );
+  const [preferences, setPreferences] = useState(readUsagePagePreferences);
   const [windowSelection, setWindowSelection] = useState(() => ({
     days: preferences.windowDays,
     window: makeWindow(
@@ -162,14 +147,18 @@ export function UsagePage() {
 
   const selectWindow = (days: number) => {
     if (!isUsageWindowDays(days)) return;
-    setPreferences((current) => ({ ...current, windowDays: days }));
+    const nextPreferences = { metric, windowDays: days };
+    setPreferences(nextPreferences);
+    saveUsagePagePreferences(nextPreferences);
     setWindowSelection({
       days,
       window: makeWindow(days, undefined, days === 1 ? "hour" : "day"),
     });
   };
   const selectMetric = (nextMetric: UsageMetric) => {
-    setPreferences((current) => ({ ...current, metric: nextMetric }));
+    const nextPreferences = { metric: nextMetric, windowDays };
+    setPreferences(nextPreferences);
+    saveUsagePagePreferences(nextPreferences);
   };
   const refreshWindow = () => {
     if (showingLimits) {
diff --git a/apps/web/src/components/usage/usagePagePreferences.test.ts b/apps/web/src/components/usage/usagePagePreferences.test.ts
new file mode 100644
index 000000000000..dcdde98fa247
--- /dev/null
+++ b/apps/web/src/components/usage/usagePagePreferences.test.ts
@@ -0,0 +1,70 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+
+import { readUsagePagePreferences, saveUsagePagePreferences } from "./usagePagePreferences";
+
+const key = "t3code:usage-page-preferences:v1";
+let values: Map<string, string>;
+let storage: Pick<Storage, "getItem" | "setItem">;
+
+beforeEach(() => {
+  values = new Map();
+  storage = {
+    getItem: (key) => values.get(key) ?? null,
+    setItem: (key, value) => {
+      values.set(key, value);
+    },
+  };
+  vi.stubGlobal("window", { localStorage: storage });
+  vi.spyOn(console, "error").mockImplementation(() => {});
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe("Usage page preferences", () => {
+  it("uses defaults when no preference has been saved", () => {
+    expect(readUsagePagePreferences()).toEqual({ metric: "cost", windowDays: 30 });
+  });
+
+  it.each([1, 7, 30, 90] as const)("round-trips every metric with a %i-day range", (windowDays) => {
+    for (const metric of ["cost", "tokens", "limits"] as const) {
+      saveUsagePagePreferences({ metric, windowDays });
+      expect(readUsagePagePreferences()).toEqual({ metric, windowDays });
+    }
+  });
+
+  it.each([
+    "not-json",
+    '{"metric":"unknown","windowDays":7}',
+    '{"metric":"cost","windowDays":365}',
+  ])("replaces invalid preferences on the next save: %s", (value) => {
+    values.set(key, value);
+    expect(readUsagePagePreferences()).toEqual({ metric: "cost", windowDays: 30 });
+    saveUsagePagePreferences({ metric: "tokens", windowDays: 7 });
+    expect(readUsagePagePreferences()).toEqual({ metric: "tokens", windowDays: 7 });
+  });
+
+  it("contains write failures and can save again after storage recovers", () => {
+    saveUsagePagePreferences({ metric: "cost", windowDays: 30 });
+    const write = vi.spyOn(storage, "setItem").mockImplementation(() => {
+      throw new Error("QuotaExceededError");
+    });
+    expect(() => saveUsagePagePreferences({ metric: "tokens", windowDays: 7 })).not.toThrow();
+    expect(readUsagePagePreferences()).toEqual({ metric: "cost", windowDays: 30 });
+    write.mockRestore();
+    saveUsagePagePreferences({ metric: "limits", windowDays: 7 });
+    expect(readUsagePagePreferences()).toEqual({ metric: "limits", windowDays: 7 });
+  });
+
+  it("contains failures when the browser blocks storage access", () => {
+    vi.stubGlobal("window", {
+      get localStorage() {
+        throw new Error("SecurityError");
+      },
+    });
+    expect(readUsagePagePreferences()).toEqual({ metric: "cost", 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
new file mode 100644
index 000000000000..ddd6d5341cc0
--- /dev/null
+++ b/apps/web/src/components/usage/usagePagePreferences.ts
@@ -0,0 +1,32 @@
+import * as Schema from "effect/Schema";
+
+import { getLocalStorageItem, setLocalStorageItem } from "../../hooks/useLocalStorage";
+
+const STORAGE_KEY = "t3code:usage-page-preferences:v1";
+const UsagePagePreferencesSchema = Schema.Struct({
+  metric: Schema.Literals(["cost", "tokens", "limits"]),
+  windowDays: Schema.Literals([1, 7, 30, 90]),
+});
+export type UsagePagePreferences = typeof UsagePagePreferencesSchema.Type;
+
+export function readUsagePagePreferences(): UsagePagePreferences {
+  try {
+    return (
+      getLocalStorageItem(STORAGE_KEY, UsagePagePreferencesSchema) ?? {
+        metric: "cost",
+        windowDays: 30,
+      }
+    );
+  } catch (error) {
+    console.error("Could not read Usage page preferences.", error);
+    return { metric: "cost", windowDays: 30 };
+  }
+}
+
+export function saveUsagePagePreferences(preferences: UsagePagePreferences): void {
+  try {
+    setLocalStorageItem(STORAGE_KEY, preferences, UsagePagePreferencesSchema);
+  } catch (error) {
+    console.error("Could not save Usage page preferences.", error);
+  }
+}