[lucyfromnaarm]

Problem

A provider account with a black (or very dark) accent color has an invisible bar on the Usage page in dark mode. The fill is drawn with the accent at 35% opacity, which disappears against the dark track, so only the account name and pace tick show.

Repro: set a Claude account's accent to #000000, open Usage in dark mode.

Change

usageAccentColor resolves an account accent as light-dark(accent, oklch(from accent max(l, 0.6) c h)). In dark mode a dark accent gets a lightness floor of 0.6 with its hue and chroma kept; light mode and lighter accents are unchanged. It replaces the two normalizeProviderAccentColor(...) ?? fallback call sites that feed the usage bars (single-account and pooled).

Scope and approval

Very small, focused fix for an obvious rendering bug: a user-selectable accent makes its usage bar unreadable. No behavior change outside the usage bar colors.

Verification

Rendered UsageLimitsPooled in a temporary browser test with three Claude accounts (#000000, #16a34a, #7c3aed), on main and on this branch, in both themes.

Dark, before (black account's bar is empty):

Dark, after:

Light, before / after (unchanged):

Accents already above lightness 0.6 render the same; ones just below it (purple #7c3aed, L≈0.54) get slightly lighter in dark mode.

Also ran: tsc --noEmit for apps/web, vp lint, vp fmt --check and UsageLimitsPooled.browser.test.tsx, all passing.

Written by Claude Opus 5.5 in Claude Code (T3 Code).

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at 698b1bd

Macroscope's review found this PR approvable — Dark custom accents are lightened in dark-mode usage bars so they remain visible, while light-mode colors and fallback colors stay unchanged. The change is presentation-only and does not alter usage calculations or saved settings.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

Usage bars now use a shared helper to normalize provider accent colors and set a minimum dark-mode lightness. Both individual and pooled bars retain their existing fallback colors when no normalized accent is available.

Changes: Usage bar accent colors

Layer / File(s)	Summary
Shared accent resolution and bar integration apps/web/src/components/usage/UsageLimits.tsx, apps/web/src/components/usage/UsageLimitsPooled.tsx	usageAccentColor normalizes provider accents and returns a light-dark() color with dark-mode lightness of at least 0.6. Individual and pooled usage bars use the helper and keep their existing fallback colors.

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix

Possibly related PRs

• pingdotgg/t3code#24630: Introduced account accent colors for these usage bars using normalizeProviderAccentColor.

Suggested labels: size:XS

Suggested reviewers: dfakkeldy, juliusmarminge, macroscopeapp

Merge Risk: Minimal · up to 698b1

No supported current-head defect remains that should block merging.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title names the main change: dark accent colors in usage bars no longer render invisible. It follows the conventional commit format and matches the raw summary (usageAccentColor lifts dark-mode ac…
Description check		The description follows the template. It has Problem, Change, Scope and approval, and Verification sections. The Problem section states the bug and gives a repro. The Change section explains the light…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Title check

Explanation

The title names the main change: dark accent colors in usage bars no longer render invisible. It follows the conventional commit format and matches the raw summary (usageAccentColor lifts dark-mode accents to a 0.6 OKLCH lightness floor) and the PR objectives.

Full details: Description check

Explanation

The description follows the template. It has Problem, Change, Scope and approval, and Verification sections. The Problem section states the bug and gives a repro. The Change section explains the lightness floor and the two call sites. Scope and approval says the fix is very small and focused, and it explains why no prior issue is linked. Verification lists the browser test, before/after screenshots in both themes, and the checks run. The description does not link a triaged issue or maintainer approval. The template asks for that link or an explanation for a small obvious fix, and the author gave the explanation. The template also asks the author to end with the model and harness that did the work. The description has this (Claude Opus 5.5 in Claude Code), so this requirement is met.

Finishing Touches

Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Tip

🎯 Customize your risk assessments

Guide how CodeRabbit assesses merge risk and security architecture risk. Highlight sensitive changes and explain your security boundaries using Merge Risk Instructions and Security Risk Instructions in your review settings. Security architecture risk assessments require the Advanced plan or above.

✅ Automatic approvals, with your rules

Let CodeRabbit approve pull requests once required threads are resolved, pre-merge checks pass, and your risk limits are met. Enable Automatic approvals in review settings, with overrides for teams or file paths.

Recent review info

Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: 8b44f42
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: 5b0720f6-1f44-4321-a55e-7b8a769bece0

Commits

Reviewing files that changed from the base of the PR and between 8b44f42 and 698b1bd.

Files selected for processing: 2

• apps/web/src/components/usage/UsageLimits.tsx
• apps/web/src/components/usage/UsageLimitsPooled.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.