fix(gui): keep brand colors on usage source icons in dark mode

[Wibias]

Summary

• Usage page surface filter icons now render with correct colors in dark mode: brand-colored marks (Claude, Codex/OpenAI) keep their brand hue, while the monochrome Grok mark keeps the dark-theme invert that makes it visible on the dark surface.
• Previously the blanket dark-mode filter: invert(1) applied to every .usage-source-mark, which inverted the brand-colored Claude and Codex/OpenAI SVGs and shifted their brand hues (Claude orange → cyan, OpenAI green → pink).

Validation

• bun test tests/usage-layout.test.ts tests/usage-grok-filter.test.ts (gui) — 8 pass, 0 fail
• bun run test (gui) — 677 pass, 0 fail
• bun run typecheck — pass
• bun run lint (gui) — pass
• Added regression test asserting Claude and Codex keep their color SVGs and only the monochrome Grok mark is inverted, covering both explicit dark-theme and OS prefers-color-scheme selector paths.

Review notes

• The fix scopes the invert to a usage-source-mark--mono modifier on the Grok mark only; Claude ships claude-color.svg and Codex/OpenAI ships the brand-green openai.svg, neither of which should be inverted.

Fixes #1252

Summary by CodeRabbit

• Bug Fixes

  • Corrected provider icons in usage views so brand-colored marks retain their colors across themes.
  • Updated the Grok icon to use appropriate monochrome styling and dark-theme inversion.

• Tests

  • Added coverage to verify provider icon assets and theme-specific styling.

[github-actions]

✅ Deterministic PR hygiene checks passed.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Usage page applies monochrome styling to the Grok icon. Dark-theme inversion now targets only monochrome marks. Tests validate provider assets, classes, and inversion behavior for explicit and system dark themes.

Changes

Usage provider mark styling

Layer / File(s)	Summary
Provider mark classification and theme behavior gui/src/pages/Usage.tsx, gui/src/styles.css, gui/tests/usage-layout.test.ts	UsageFilters applies usage-source-mark--mono to the Grok icon. Dark-theme inversion now targets only monochrome marks. Tests validate Claude, OpenAI, and Grok assets, modifiers, and theme behavior.

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

Possibly related PRs

• lidge-jun/opencodex#1037: Modifies provider icon assets and Usage page source-mark styling.

Suggested reviewers: ingwannu, lidge-jun

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes preserve Claude colors, limit inversion to monochrome marks, and add regression coverage for issue #1252.
Out of Scope Changes check	✅ Passed	All changes in Usage.tsx, styles.css, and usage-layout.test.ts directly support the linked issue objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: preserving brand colors for Usage page source icons in dark mode.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/fix-usage-source-icon-colors

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@gui/tests/usage-layout.test.ts`:
- Around line 158-160: Add assertions in the usage-source-mark CSS test to cover
the dark-mode `@media (prefers-color-scheme: dark)` path, verifying
`:root:not([data-theme="light"]) .usage-source-mark--mono` receives inversion
while the broader `.usage-source-mark` selector does not. Preserve the existing
explicit dark-theme assertions.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: f2cc0385-40e9-4bae-89a6-f8bc3360f6bc

📥 Commits

Reviewing files that changed from the base of the PR and between fa821de and b17fa1d.

📒 Files selected for processing (3)

• gui/src/pages/Usage.tsx
• gui/src/styles.css
• gui/tests/usage-layout.test.ts

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b17fa1d415

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Keep the colored OpenAI mark out of mono inversion

In dark mode, this modifier still applies filter: invert(1) to openai.svg, but that asset is not monochrome: gui/public/provider-icons/openai.svg explicitly uses the brand-green fill #10A37F (and was introduced specifically as the official green mark). The filter turns it into a pink inverse, so the change preserves the same brand-color corruption for the Codex filter that it fixes for Claude, while the new test incorrectly codifies the asset as monochrome. Remove the mono modifier from the OpenAI image and update the assertion, leaving it only on the actually black Grok mark.

Useful? React with 👍 / 👎.

[Wibias]

[GD] Addressed on head 17615935b.

Verified against the assets: gui/public/provider-icons/openai.svg uses brand-green #10A37F and claude-color.svg is brand-colored; only grok.svg is black/monochrome. Removed the usage-source-mark--mono modifier from the Codex/OpenAI mark in gui/src/pages/Usage.tsx so it keeps its brand green in dark mode, and updated the regression test to assert the OpenAI mark is not mono-inverted. The invert now applies only to the Grok mark.