From d3ee9f23c2488b3c47ab9b5b0c358f2830e18329 Mon Sep 17 00:00:00 2001 From: Devvyn <22340871+opticon454@users.noreply.github.com> Date: Mon, 21 Sep 2026 12:22:40 +0800 Subject: [PATCH] fix(cli-registry): correct accent colours, and a real gemini/antigravity/omp rendering bug MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two related fixes, found while re-measuring stock.ts's `accent` field against the actual rendered UI (docs/cli-registry.md flags this field as "transcribed, not authoritative — re-measure before wiring one up"): 1. A real, user-visible bug: `.btn-toolbar.btn-run.mode-gemini`, `.mode-antigravity` and `.mode-omp` had no override rule inside the `html:not([data-skin="og"])` block, unlike codex/pi/grok/deepseek, which do. The generic `.btn-toolbar.btn-run` rule in that block resolves at higher specificity than the base sheet's per-mode pair, so all three rendered as plain claude-blue on every skin except `og` — including `daylight-blue`, which is the actual DEFAULT skin for a fresh install (index.html's pre-paint script), not an edge case. Added the three missing rules, sourced from each CLI's own already-designed og-skin colours (no new colours invented), mirroring the exact pattern pi/grok/deepseek already use. Also corrected the stale comment on the pi rule, which claimed this was still broken for gemini/antigravity. 2. `stock.ts`'s `accent` field was simply wrong for most CLIs — e.g. claude was registered as Anthropic's brand orange (#d97757) while its button renders blue, antigravity was registered purple while it renders cyan, pi was registered green while it renders pink. Measured each CLI's real `border-color` from its own `.mode-` rule on the og skin (the cleanest single representative hex each entry's gradient resolves around) and corrected all 9 non-shell entries to match. `accent` has no reader yet (confirmed via the DECLARED_FOR_LATER guard test), so this changes no rendered output — it's a data-accuracy fix, matching the registry's own "transcribed, not authoritative" warning taken literally. Also fixed a false claim in types.ts's doc comment for the field ("CSS derives every per-CLI gradient from it via --cli-accent") — no such CSS variable exists anywhere in the codebase. Full gate: 406 files / 7721 tests / 0 failures, typecheck/lint/format:check/ check:public-assets/check:frontend-syntax all clean. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01GuHtuPiHXdykq9T6rKQJ9n --- src/config/cli-registry/stock.ts | 28 +++++++++++++++++++--------- src/config/cli-registry/types.ts | 8 +++++++- src/web/public/styles.css | 30 +++++++++++++++++++++++++----- 3 files changed, 51 insertions(+), 15 deletions(-) diff --git a/src/config/cli-registry/stock.ts b/src/config/cli-registry/stock.ts index 1e455192..9ca275cf 100644 --- a/src/config/cli-registry/stock.ts +++ b/src/config/cli-registry/stock.ts @@ -75,11 +75,21 @@ function agentDefaults(): Pick< }; } +// `accent` on every entry below (except SHELL, which the frontend renders no +// distinct color for) is measured from the actual `.btn-toolbar.btn-run.mode-` +// CSS rule's `border-color` on the OG skin (styles.css) — the single cleanest +// representative hex each entry's own multi-stop gradient resolves around. +// Corrected 2026-09-21 after PR #458's review found several were simply wrong +// (e.g. claude was registered as Anthropic's brand orange, `#d97757`, but the +// button renders blue): `docs/cli-registry.md`'s own "transcribed, not +// authoritative, re-measure before wiring one up" warning for this +// DECLARED-FOR-LATER field, taken literally. This is a data-accuracy fix only — +// `accent` still has no reader, so nothing rendered changes because of it. const CLAUDE: CliEntry = { id: 'claude' as CliEntry['id'], label: 'Claude', shortBadge: 'CC', - accent: '#d97757', + accent: '#3b82f6', enabled: true, stock: true, order: 0, @@ -368,7 +378,7 @@ const OPENCODE: CliEntry = { id: 'opencode' as CliEntry['id'], label: 'OpenCode', shortBadge: 'OC', - accent: '#f59e0b', + accent: '#10b981', enabled: true, stock: true, order: 10, @@ -454,7 +464,7 @@ const CODEX: CliEntry = { id: 'codex' as CliEntry['id'], label: 'Codex', shortBadge: 'CX', - accent: '#6b7fd7', + accent: '#a855f7', enabled: true, stock: true, order: 20, @@ -565,7 +575,7 @@ const GEMINI: CliEntry = { id: 'gemini' as CliEntry['id'], label: 'Gemini', shortBadge: 'GM', - accent: '#4285f4', + accent: '#60a5fa', enabled: true, stock: true, order: 30, @@ -657,7 +667,7 @@ const ANTIGRAVITY: CliEntry = { id: 'antigravity' as CliEntry['id'], label: 'Antigravity', shortBadge: 'AG', - accent: '#8b5cf6', + accent: '#22d3ee', enabled: true, stock: true, order: 40, @@ -727,7 +737,7 @@ const PI: CliEntry = { id: 'pi' as CliEntry['id'], label: 'Pi', shortBadge: 'PI', - accent: '#10b981', + accent: '#f472b6', enabled: true, stock: true, order: 50, @@ -854,7 +864,7 @@ const GROK: CliEntry = { // `accent` is a single hex, so this is the closest single value (the run-mode-dot colour, // zinc-400). Nothing reads `accent` yet — the frontend is untouched in this change and // keeps its own hand-authored CSS; the field is here so the entry is complete. - accent: '#a1a1aa', + accent: '#d4d4d8', enabled: true, stock: true, order: 70, @@ -986,7 +996,7 @@ const DEEPSEEK: CliEntry = { id: 'deepseek' as CliEntry['id'], label: 'DeepSeek', shortBadge: 'DS', - accent: '#4d6bfe', + accent: '#7c93ff', enabled: true, stock: true, order: 80, @@ -1151,7 +1161,7 @@ const OMP: CliEntry = { id: 'omp' as CliEntry['id'], label: 'OMP', shortBadge: 'OM', - accent: '#7c9cf5', + accent: '#818cf8', enabled: true, stock: true, order: 90, diff --git a/src/config/cli-registry/types.ts b/src/config/cli-registry/types.ts index 871a3762..57be0c79 100644 --- a/src/config/cli-registry/types.ts +++ b/src/config/cli-registry/types.ts @@ -651,7 +651,13 @@ export interface CliEntry { label: string; /** Two-ish character tab badge, e.g. 'OC'. */ shortBadge: string; - /** Single hex colour. CSS derives every per-CLI gradient from it via --cli-accent. */ + /** + * Single hex colour, measured from the CLI's actual `.btn-toolbar.btn-run.mode-` + * gradient in styles.css (see stock.ts's comment above `CLAUDE` for the exact + * methodology). DECLARED-FOR-LATER (below) — no code reads this yet; styles.css's + * gradients are still hand-authored per id, not derived from this field via any + * CSS custom property. There is no `--cli-accent` variable in the codebase. + */ accent: string; enabled: boolean; /** Set by the loader from the shipped catalog; a user entry can never claim it. */ diff --git a/src/web/public/styles.css b/src/web/public/styles.css index e0cc8e4a..4b1c02b3 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -15142,11 +15142,31 @@ html:not([data-skin="og"]) { color: #061c20; } .btn-toolbar.btn-run.mode-codex:hover { box-shadow: 0 0 14px -2px rgba(43, 203, 187, 0.45); } -/* Pi keeps its rose identity on the non-og skins. This rule has to live INSIDE - this nested block: the generic `.btn-toolbar.btn-run` above resolves to (0,3,1) - here and would otherwise beat the base sheet's (0,3,0) `.mode-pi` pair, which - is exactly why gemini's and antigravity's gradients render as generic claude - blue on the default skin. */ +/* Gemini, Antigravity, Pi, OMP, Grok and DeepSeek all keep their own identity + on the non-og skins. Each rule has to live INSIDE this nested block: the + generic `.btn-toolbar.btn-run` above resolves to (0,3,1) here and would + otherwise beat the base sheet's (0,3,0) `.mode-` pair — which is exactly + what gemini/antigravity/omp did until this fix, rendering as generic claude + blue on `daylight-blue`, the actual DEFAULT skin for a fresh install + (`index.html`'s pre-paint script), not just a corner case on `og`. */ +.btn-toolbar.btn-run.mode-gemini { + background: linear-gradient(135deg, #174ea6, #4f46e5); + border-color: #123a7a; + color: #dbeafe; +} +.btn-toolbar.btn-run.mode-gemini:hover { box-shadow: 0 0 14px -2px rgba(96, 165, 250, 0.45); } +.btn-toolbar.btn-run.mode-antigravity { + background: linear-gradient(135deg, #0e7490, #0891b2); + border-color: #0b5566; + color: #cffafe; +} +.btn-toolbar.btn-run.mode-antigravity:hover { box-shadow: 0 0 14px -2px rgba(34, 211, 238, 0.45); } +.btn-toolbar.btn-run.mode-omp { + background: linear-gradient(135deg, #4f46e5, #6366f1); + border-color: #3730a3; + color: #e0e7ff; +} +.btn-toolbar.btn-run.mode-omp:hover { box-shadow: 0 0 14px -2px rgba(129, 140, 248, 0.45); } .btn-toolbar.btn-run.mode-pi { background: linear-gradient(135deg, #be185d, #f472b6); border-color: #be185d;