fix: center Grok provider marks

CHANGELOG.md

@@ -6,6 +6,11 @@ follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+### Fixed
+
+- Optically center the Grok mark in provider rings, menu items, cards and
+  Settings. Preserve the original provider artwork and existing icon sizes.
+
 ## [0.3.0-beta.3] - 2026-10-17
 
 ### Release

docs/KB.md

@@ -236,6 +236,10 @@ Release documentation refresh: 2026-10-17; build 61 executable inputs are unchan
   synthetic proof do not establish live availability or universal cloud,
   device or product coverage. See [ADR 0022](adr/0022-codex-account-token-history.md).
 
+- Electron provider marks share one renderer. The Grok mask has a one-pixel
+  optical offset to balance its right-heavy artwork at both icon sizes. The
+  original logo files, ring centers and notch geometry stay unchanged.
+
 ## Verification gaps
 
 - The Electron candidate still needs native GUI launch/relaunch, preferences/account/offline journeys, tray/focus/accessibility, notification/login/share/updater paths, drag/display persistence and two different-height notch captures. Verified packaging and headless JSON cannot close migration or cutover.

src/renderer/app.tsx

@@ -22,7 +22,7 @@ function Mark({ slot, state }: { slot: Slot; state: ViewState }) {
   const id = useId();
   const status = extract(state.snapshot.statuses[slot.provider])?.severity;
   const tint = status === undefined || status === "operational" ? colours[slot.provider] : status === "degraded" ? "var(--warn)" : status === "unknown" ? "var(--muted)" : "var(--alert)";
-  if (logos[slot.provider]) return <span aria-hidden="true" className="mark" style={{ background: tint, maskImage: `url(./${logos[slot.provider]})`, WebkitMaskImage: `url(./${logos[slot.provider]})` }} />;
+  if (logos[slot.provider]) return <span aria-hidden="true" className="mark" data-provider={slot.provider} style={{ background: tint, maskImage: `url(./${logos[slot.provider]})`, WebkitMaskImage: `url(./${logos[slot.provider]})` }} />;
   if (slot.provider === "claude") return <svg aria-hidden="true" className="mark" viewBox="0 0 1 1" style={{ color: tint }}><defs><mask id={`eyes-${id}`}><rect width="1" height="1" fill="white" /><rect x=".27" y=".28" width=".15" height=".20" fill="black" /><rect x=".58" y=".28" width=".15" height=".20" fill="black" /></mask></defs><g fill="currentColor" mask={`url(#eyes-${id})`}><rect x=".08" y=".10" width=".84" height=".60" rx=".16" />{[.16, .35, .54, .73].map((x, i) => <rect key={x} x={x} y=".66" width=".11" height={i === 0 || i === 3 ? .22 : .24} />)}</g></svg>;
   return <span aria-hidden="true" className="mark" style={{ background: tint, maskImage: `url(./${slot.provider}-symbol.png)`, WebkitMaskImage: `url(./${slot.provider}-symbol.png)` }} />;
 }

src/renderer/style.css

@@ -13,6 +13,8 @@
 .surface-flyout, .surface-settings { display: flow-root; }
 @media (prefers-color-scheme: dark) { .theme-system { --grok: #ebebf0; --claude: #d97706; --antigravity: #60a5fa; --opencode: #2dd4bf; --openrouter: #a78bfa; --canvas: #1c1c1e; --surface: #262629; --well: #343438; --border: #ffffff19; --text: #efeff2; --muted: #b0b0b8; --good: #30d158; --warn: #ffb340; --alert: #ff6961; } }
 .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .secondary { color: var(--muted); font-size: 11px; } .stale { font-size: 11px; color: var(--warn); margin: 8px 0; } .empty { padding: 20px; color: var(--muted); } .badge { color: var(--muted); background: var(--well); padding: 2px 6px; border-radius: 5px; font-size: 10px; } .app-header { margin-bottom: 12px; flex-wrap: wrap; } .header-actions { display: flex; flex-wrap: wrap; gap: 6px; } .app-header small { color: var(--warn); font-size: 11px; font-weight: 400; } .flyout { padding: 14px; } .provider-card { padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 10px; } .provider-heading { display: flex; align-items: center; gap: 7px; min-width: 0; } .provider-heading h2 { overflow-wrap: anywhere; } .mark { flex-shrink: 0; width: 16px; height: 16px; display: inline-block; mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .pending-symbol { text-align: center; font-weight: 650; } .status { margin: 5px 0; } .quota-window { margin: 10px 0; } .meter { background: var(--well); height: 5px; border-radius: 4px; overflow: hidden; margin: 5px 0; } .meter span { display: block; height: 100%; border-radius: inherit; } .quota-window .secondary { align-items: flex-start; } .quota-window .secondary > :last-child { text-align: right; } .well { background: var(--well); padding: 8px; border-radius: 6px; } .credit { margin: 10px 0; } .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 10px 0; } dt { font-size: 10px; color: var(--muted); } dd { font-size: 13px; margin: 0; } .sparkline { width: 100%; height: 45px; margin: 6px 0; } .heatmap { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; margin: 8px 0; } .heatmap > span { aspect-ratio: 1; border-radius: 2px; } .session { padding: 7px 0; border-bottom: 1px solid var(--border); } .session span { overflow-wrap: anywhere; } summary { color: var(--muted); font-size: 11px; cursor: pointer; padding-top: 8px; } .reset-credit { padding: 6px 0; } footer { margin-top: 12px; }
+/* Balance Grok's right-heavy artwork within the shared icon layout. */
+.mark[data-provider="grok"] { transform: translate(-1px, -1px); }
 .provider-setting { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
 .settings { padding: 16px; max-width: 760px; margin: auto; font-size: 13px; }
 .settings .settings-header { margin-bottom: 14px; }