fix(web): keep provider badge legible in dark themes

[RakshithBhat03]

The Codex provider badge became unreadable in dark mode. Its translucent --muted fill let the OpenAI mark show through the CO initials, making the provider icon look different from light mode.

Neutral badges now composite muted, card, and background over an opaque Canvas layer before drawing the initials. Accent-colored badges keep their solid provider color, and the same component behavior remains consistent in the composer, sidebar, model picker, and settings. Translucent imported themes are covered as well.

Tests: 39 focused tests and targeted lint. The scoped web typecheck still reports two existing conditionalUI errors in apps/web/src/components/clerk/electronPasskeys.test.ts, outside this change.

Screenshots

Before / after capture

Built by GPT-5.6 Sol in T3 Code through the Codex harness.

Note

Fix ProviderInstanceIcon badge legibility in dark themes

The neutral provider badge used bg-muted, which is translucent in dark themes and let the underlying glyph show through. A new NEUTRAL_BADGE_SURFACE constant stacks --muted, --card, --background, and Canvas as layered linear-gradients to fully occlude the glyph. The badge now uses bg-card text-muted-foreground and applies the layered surface via inline style when no accentColor is set; solid accent badges are unchanged. Added test coverage in ProviderInstanceIcon.test.tsx.

^{Macroscope summarized 454e353.}

---

Note

Low Risk
Small CSS-only badge styling change in a presentational icon component, with new unit tests and no auth or data-path impact.

Overview
Fixes unreadable Codex (and other) instance badges in dark mode, where a translucent --muted fill let the provider glyph show through the initials.

Neutral badges now stack muted, card, and background over an opaque Canvas layer (bg-card instead of bg-muted). Accent-colored badges stay a solid provider color with no extra layers. Adds ProviderInstanceIcon tests covering initials, hidden badges, custom borders, and the no-glyph fallback.

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

[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: fad8ea8d-c287-47fa-b6ce-ef1ee192e5bb

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.}

[macroscopeapp]

Approvability

Verdict: Skipped

Macroscope did not run approvability analysis for this PR. Macroscope could not determine whether this PR modifies its approvability configuration, so the PR was not approved automatically. A PR that may change the rules that govern approval is never approved automatically.