fix(provider-icons): colorize brand icons and correct the OpenCodeX mark

[Wibias]

What

Provider icons across the dashboard were a mix of monochrome currentColor
marks (rendered gray in light mode), Simple-Icons-style paths without any fill
(rendered solid black), icons with wildly different intrinsic sizes (16 px from
width="1em" up to 800 px), and a generic server icon for providers without an
asset. The OpenCodeX mark itself rendered in gray instead of the brand color.

Changes

• OpenCodeX mark: opencode.svg keeps the original frame shape (as in the
  shipped logo) and renders in the official warm dark tone #211E1E with a
  transparent inner field — no more gray placeholder or accent-purple — used by
  the OpenCode providers in the rail and the API tab's OpenCode export-client
  row.
• Colored provider icons: every existing icon now carries an explicit
  official brand-color fill (Anthropic clay, Gemini gradients, NVIDIA green,
  Cloudflare orange, Mistral orange, Groq orange, DeepSeek blue, Xiaomi orange,
  Baidu blue, Hugging Face yellow, GitLab orange, Alibaba orange, Fireworks
  pink, LM Studio purple, Moonshot blue, Qwen indigo, OpenRouter indigo, vLLM
  blue, OpenAI brand purple, plus black for officially black brands: xAI,
  Ollama, Vercel, GitHub Copilot, Kimi). xAI uses the plain monochrome grok.svg
  — the previous grok-color.svg was a duplicate that only rendered black, so it
  was removed.
• No duplicate monochrome variants: unused non-color files are removed where
  a -color logo is the only referenced asset — claude.svg, gemini.svg,
  copilot.svg, antigravity.svg, kiro.svg, cursor.svg (Gemini keeps only
  its colored variant).
• Uniform icon sizing: all provider SVGs are normalized to
  viewBox="0 0 24 24" with no fixed width/height, so every icon renders at
  the CSS size of its slot instead of its intrinsic size (previously 16 px up to
  800 px depending on the file).
• Fallback for providers without a logo asset: long-tail presets and custom
  providers now get a deterministic colored initial-letter tile (hue derived
  from the provider id) instead of the gray server icon — in the rail, provider
  details, and the overview dashboard.
• Usage surface marks: the Codex/Claude/Grok segmented control uses the
  colored variants; the dark-mode invert(1) filter was removed so brand colors
  stay correct in both themes.

Verification

• bun run build green
• bun run lint green
• bun test tests — 584/584 green (usage-grok-filter test updated to the
  colored asset)
• Root bun x tsc --noEmit green
• All touched SVGs parse as valid XML and use a uniform 24×24 viewBox

Notes

• Brands whose logos are officially monochrome (OpenAI per Simple Icons, xAI,
  Ollama, Vercel, GitHub Copilot, Kimi) render in their official black/brand
  color rather than an invented color.
• No dependency changes; no locale/copy changes.

[coderabbitai]

📝 Walkthrough

Walkthrough

Provider workspace icons now use localized fallback marks with deterministic colors and initials. Usage filters use colored Claude and xAI assets. Dark-theme inversion rules for usage source marks were removed.

Changes

Provider icon visual updates

Layer / File(s)	Summary
Localized provider fallback rendering gui/src/components/provider-workspace/ProviderRail.tsx, gui/src/styles/provider-workspace-shell.css	ProviderIcon passes localized provider names to the exported ProviderFallbackMark. The fallback derives a deterministic hue and renders the provider initial. CSS defines its layout and typography.
Colored usage provider icons gui/src/pages/Usage.tsx, gui/src/styles.css, gui/src/provider-icons.ts	Claude uses claude-color.svg, xAI uses grok.svg, and dark-theme inversion rules no longer modify usage source marks.

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

Sequence Diagram(s)

sequenceDiagram
  participant ProviderIcon
  participant Translation
  participant ProviderFallbackMark
  participant ProviderIconStyles
  ProviderIcon->>Translation: Resolve localized provider name
  Translation-->>ProviderIcon: Return display name
  ProviderIcon->>ProviderFallbackMark: Pass name and label
  ProviderFallbackMark->>ProviderIconStyles: Apply fallback styling
  ProviderIconStyles-->>ProviderFallbackMark: Render colored initial tile

Loading

Possibly related PRs

• lidge-jun/opencodex#434: Both PRs modify provider icon resolution and mappings.
• lidge-jun/opencodex#480: Both PRs modify provider display-name handling and icon mappings.
• lidge-jun/opencodex#842: This PR extends the provider workspace fallback UI.

Suggested reviewers: ingwannu, lidge-jun

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main changes: colorized provider icons and corrected the OpenCodeX mark.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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