fix(web): usage chart no longer makes Claude look like the bigger spender

[t3dotgg]

The daily chart on the usage page stacked the two providers, and Claude Code was always the upper band. So Claude always looked like it was winning, even on days where Codex spent 5x more. The shape you read first was a ranking that did not exist.

The series are now layered instead of stacked. Both start from the same zero baseline, so height means the same thing for both, and the point where one overtakes the other is exactly where the lines cross. Fills drop to 12% and the strokes go to 2px, so nothing is hidden behind anything.

Two side effects worth knowing:

• The Y axis now scales to the largest single provider-day, not the largest combined day. In practice the chart uses more of its height than it used to.
• The combined daily total is no longer readable as a silhouette. The hover card still lists both providers plus the total, and the left-hand stat block still carries period totals and share of cost.

Picked from six options. Mocks with all of them: https://cupw3euvewrb.postplan.dev

Verified by rendering the real component at both revisions and comparing the output. buildDayColumns now returns absolute per-provider values rather than stack offsets, and the test that asserted contiguous additive bands is replaced by one that pins the values down as absolute.

---

Written by Claude Opus 5 (1M context) on Claude Code.

---

Note

Low Risk
Visualization-only change on the usage page with updated unit tests; no API, auth, or billing logic.

Overview
Fixes misleading usage page daily provider chart: stacked areas always put Claude Code on top, so it looked like the bigger spender even when Codex spent more.

buildDayColumns now emits absolute per-provider values (no base/top stack offsets); daily total stays the sum of bands. UsageProviderChart draws layered smoothed lines and faint fills from zero (not closed stack bands), drops reversedCurvePath, scales the Y axis to the max single provider-day (not combined daily total), sorts series by period total for paint order, and renders fills then strokes (12% opacity, 2px lines) so lines stay visible. Hover totals are unchanged.

Tests assert absolute band values and that column totals match the sum of bands. usageProviders comments clarify PROVIDER_ORDER is legend/table order only, not chart stacking.

^{Reviewed by Cursor Bugbot for commit 6d47bf5. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix usage chart to render providers as layered zero-baseline series instead of stacked bands

• The chart previously stacked provider usage bands cumulatively, which inflated the visual footprint of providers rendered higher in the stack.
• UsageProviderChart now renders each provider as an independent zero-baseline area/line series, with fills extending to the bottom of the plot.
• The y-axis peak is scaled to the largest single-provider value on any day rather than the sum across providers.
• Series are z-ordered by total usage so heavier providers are painted first; fills and strokes are drawn in two separate passes so no line is obscured.
• Behavioral Change: buildDayColumns no longer returns base/top fields on bands — only provider and value — and total is now the sum of band values.

^{Macroscope summarized 6d47bf5.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 05f2deae-2f59-4845-badf-4feb723af111

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 6d47bf5. Configure here.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	11.3 KiB	11.3 KiB	−3 B (−0.0%)	15.1 KiB	✅
Codex	Thread snapshot wire	5.5 KiB	5.5 KiB	0 B (0.0%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	5.9 KiB	5.9 KiB	−3 B (−0.0%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	49.7 KiB	49.7 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	11.3 KiB	11.3 KiB	−17 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	5.5 KiB	5.5 KiB	−6 B (−0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	5.9 KiB	5.8 KiB	−11 B (−0.2%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	50.6 KiB	50.6 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: 8101cd0 · PR result: 6d47bf5 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 94.6 KiB
• Claude decoded thread snapshot: 95.4 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved 6d47bf5

Self-contained visualization fix in a usage chart component, changing from stacked to layered rendering. Author owns this file. The Medium-severity duplicate key finding blocks approval at the configured threshold independently.

^{You can customize Macroscope's approvability policy. Learn more.}