From f0ebc628c6dd83fd0c7963078ad7778ce6028d0c Mon Sep 17 00:00:00 2001
From: Wout Stiens <71498452+StiensWout@users.noreply.github.com>
Date: Sat, 15 Aug 2026 10:42:35 +0200
Subject: [PATCH] fix(web): improve Codex usage graph contrast (#6669)

---
 apps/web/src/components/usage/UsagePage.tsx   | 12 ++---
 .../components/usage/UsageProviderChart.tsx   | 23 +++++----
 .../src/components/usage/usageProviders.ts    | 47 +++++++++----------
 3 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 7a5cdd883db2482844cf88287d3ccd18f39b7adc..92e2c5b6fc346911db56dd3d9ae7d3a37094015e 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -25,7 +25,7 @@ import { SidebarInset } from "../ui/sidebar";
 import { WorkspaceBreadcrumb, WorkspaceBreadcrumbItem } from "../WorkspaceBreadcrumb";
 import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "../../workspaceTitlebar";
 import { UsageChartLegend, UsageProviderChart, type UsageChartMetric } from "./UsageProviderChart";
-import { PROVIDER_COLOR, PROVIDER_LABEL, PROVIDER_MARK, PROVIDER_ORDER } from "./usageProviders";
+import { PROVIDER_ORDER, PROVIDER_PRESENTATION } from "./usageProviders";
 
 const WINDOW_OPTIONS = [
   { days: 1, label: "Past 24h" },
@@ -209,7 +209,7 @@ export function UsagePage() {
                           <div className="flex items-baseline justify-between">
                             <span className="flex items-center gap-2 text-sm text-foreground">
                               <ProviderMark provider={provider.provider} className="size-4" />
-                              {PROVIDER_LABEL[provider.provider]}
+                              {PROVIDER_PRESENTATION[provider.provider].label}
                             </span>
                             <span className="text-sm text-foreground tabular-nums">
                               {metric === "cost"
@@ -222,7 +222,7 @@ export function UsagePage() {
                               className="h-full"
                               style={{
                                 width: `${(share * 100).toFixed(1)}%`,
-                                backgroundColor: PROVIDER_COLOR[provider.provider],
+                                backgroundColor: PROVIDER_PRESENTATION[provider.provider].color,
                               }}
                             />
                           </div>
@@ -385,7 +385,7 @@ export function UsagePage() {
                           <th className="py-2 font-normal">{isPast24Hours ? "Hour" : "Day"}</th>
                           {PROVIDER_ORDER.map((provider) => (
                             <th key={provider} className="py-2 text-right font-normal">
-                              {PROVIDER_LABEL[provider]}
+                              {PROVIDER_PRESENTATION[provider].label}
                             </th>
                           ))}
                           <th className="py-2 text-right font-normal">Total</th>
@@ -448,7 +448,7 @@ function ProviderMark({
   readonly provider: UsageProviderKind;
   readonly className: string;
 }) {
-  const Mark = PROVIDER_MARK[provider];
+  const Mark = PROVIDER_PRESENTATION[provider].mark;
   return <Mark className={cn("shrink-0", className)} aria-hidden />;
 }
 
@@ -595,7 +595,7 @@ function UsageSkeleton({ resolution }: { readonly resolution: "day" | "hour" })
               <div className="flex items-center justify-between">
                 <span className="flex items-center gap-2 text-sm text-foreground">
                   <ProviderMark provider={provider} className="size-4" />
-                  {PROVIDER_LABEL[provider]}
+                  {PROVIDER_PRESENTATION[provider].label}
                 </span>
                 <div className="h-3.5 w-14 rounded-sm bg-muted" />
               </div>
diff --git a/apps/web/src/components/usage/UsageProviderChart.tsx b/apps/web/src/components/usage/UsageProviderChart.tsx
index f41945bfe286d76bd66ceb61bdf45ab647e4e9e1..d7582a0e4bdc8319461bd3906b0470fe27d2185e 100644
--- a/apps/web/src/components/usage/UsageProviderChart.tsx
+++ b/apps/web/src/components/usage/UsageProviderChart.tsx
@@ -9,7 +9,7 @@ import {
   formatTokens,
   formatUsd,
 } from "@t3tools/shared/usageFormat";
-import { PROVIDER_COLOR, PROVIDER_LABEL, PROVIDER_MARK, PROVIDER_ORDER } from "./usageProviders";
+import { PROVIDER_ORDER, PROVIDER_PRESENTATION } from "./usageProviders";
 
 const VIEW_WIDTH = 960;
 const VIEW_HEIGHT = 260;
@@ -339,14 +339,19 @@ export function UsageProviderChart({
 
             {/* Fills first, then every stroke, so no series covers another's line. */}
             {paths.map(({ provider, area }) => (
-              <path key={provider} d={area} fill={PROVIDER_COLOR[provider]} fillOpacity={0.12} />
+              <path
+                key={provider}
+                d={area}
+                fill={PROVIDER_PRESENTATION[provider].color}
+                fillOpacity={0.12}
+              />
             ))}
             {paths.map(({ provider, line }) => (
               <path
                 key={provider}
                 d={line}
                 fill="none"
-                stroke={PROVIDER_COLOR[provider]}
+                stroke={PROVIDER_PRESENTATION[provider].color}
                 strokeWidth={2}
                 vectorEffect="non-scaling-stroke"
               />
@@ -376,12 +381,12 @@ export function UsageProviderChart({
             >
               <div className="mb-1 text-muted-foreground">{formatTooltipPeriod(hoveredPeriod)}</div>
               {PROVIDER_ORDER.map((provider) => {
-                const Mark = PROVIDER_MARK[provider];
+                const { label, mark: Mark } = PROVIDER_PRESENTATION[provider];
                 return (
                   <div key={provider} className="flex items-center justify-between gap-3">
                     <span className="flex items-center gap-1.5 text-muted-foreground">
                       <Mark className="size-3 shrink-0" aria-hidden />
-                      {PROVIDER_LABEL[provider]}
+                      {label}
                     </span>
                     <span className="text-foreground tabular-nums">
                       {format(
@@ -423,13 +428,13 @@ export function UsageChartLegend() {
   return (
     <div className="flex items-center gap-4">
       {PROVIDER_ORDER.map((provider) => {
-        // The marks carry the same fills as the bands, so they key the chart
-        // just as a colour swatch would.
-        const Mark = PROVIDER_MARK[provider];
+        // Brand marks keep monochrome providers identifiable even when their
+        // chart series use distinct colors.
+        const { label, mark: Mark } = PROVIDER_PRESENTATION[provider];
         return (
           <span key={provider} className="flex items-center gap-1.5 text-xs text-muted-foreground">
             <Mark className="size-3.5 shrink-0" aria-hidden />
-            {PROVIDER_LABEL[provider]}
+            {label}
           </span>
         );
       })}
diff --git a/apps/web/src/components/usage/usageProviders.ts b/apps/web/src/components/usage/usageProviders.ts
index f8b65877dcf40f80425d8e9bfba99a613245d1ab..00db67e28a84c137521d013cbe2b527bc09686de 100644
--- a/apps/web/src/components/usage/usageProviders.ts
+++ b/apps/web/src/components/usage/usageProviders.ts
@@ -2,32 +2,29 @@ import type { UsageProviderKind } from "@t3tools/contracts";
 
 import { ClaudeAI, type Icon, OpenAI } from "../Icons";
 
-/**
- * Series and table order. The chart layers both providers from a shared zero
- * baseline, so this only fixes the reading order of legends, tables and hover
- * rows; it does not decide which series sits above the other.
- */
-export const PROVIDER_ORDER: readonly UsageProviderKind[] = ["codex", "claude"];
-
-export const PROVIDER_LABEL: Record<UsageProviderKind, string> = {
-  claude: "Claude Code",
-  codex: "Codex",
-};
-
-/** Claude's brand orange against a neutral white for Codex. */
-export const PROVIDER_COLOR: Record<UsageProviderKind, string> = {
-  claude: "#d97757",
-  codex: "#e6e6e6",
+type UsageProviderPresentation = {
+  readonly label: string;
+  readonly color: string;
+  readonly mark: Icon;
 };
 
 /**
- * Brand marks, reused from the provider picker.
- *
- * These ship their own fills (`#d97757` for Claude, white on dark for OpenAI),
- * which are the same colours as the chart bands, so swapping a colour dot for a
- * mark keeps the series association intact rather than trading it away.
+ * Exhaustive presentation for providers supported by the usage contract.
+ * Declaration order is reused by every chart, table, legend, and skeleton, so
+ * adding a provider only requires its contract support and one entry here.
  */
-export const PROVIDER_MARK: Record<UsageProviderKind, Icon> = {
-  claude: ClaudeAI,
-  codex: OpenAI,
-};
+export const PROVIDER_PRESENTATION = {
+  codex: {
+    label: "Codex",
+    color: "var(--foreground)",
+    mark: OpenAI,
+  },
+  claude: {
+    label: "Claude Code",
+    color: "#d97757",
+    mark: ClaudeAI,
+  },
+} satisfies Record<UsageProviderKind, UsageProviderPresentation>;
+
+/** The chart layers every series from zero, so order only controls how it is read. */
+export const PROVIDER_ORDER = Object.keys(PROVIDER_PRESENTATION) as UsageProviderKind[];
-- 
2.54.0