From f9f6c21048d5fcd8f9cf1f9cd8b2d3f90f3d5c88 Mon Sep 17 00:00:00 2001
From: RealZST <zst9626@126.com>
Date: Sat, 30 May 2026 00:17:43 +0300
Subject: [PATCH] style(extensions): retune agent filter colors off semantic
 status hues

Shift each agent's brand color away from error-red / disabled-gray so the
active filter no longer reads as an error or disabled control:
- claude: red (hue 25 ~= error red) -> orange (hue 60), matching the real brand
- codex: neutral gray -> indigo borrowed from its icon
- cursor: flat gray -> warm charcoal (light) / off-white (dark), per its brand
- copilot: arbitrary purple -> official GitHub Copilot violet (hue 296)
- windsurf: lower chroma (less fluorescent)
- soften active fill from /15 to /10

Addresses the concern in #67 by @Orchardxyz (colored fills reading as
error/disabled), keeping the native <select> for consistency with the
app's other filters.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../extensions/extension-filters.tsx          | 16 ++---
 src/index.css                                 | 60 +++++++++----------
 2 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/extensions/extension-filters.tsx b/src/components/extensions/extension-filters.tsx
index 540d0fb8..f8905c4e 100644
--- a/src/components/extensions/extension-filters.tsx
+++ b/src/components/extensions/extension-filters.tsx
@@ -33,15 +33,15 @@ const kinds: (ExtensionKind | null)[] = [
 ];
 /** Per-agent background + text colors for the active filter state. */
 const AGENT_FILTER_COLORS: Record<string, string> = {
-  claude: "bg-agent-claude/15 text-agent-claude border-agent-claude/30",
-  codex: "bg-agent-codex/15 text-agent-codex border-agent-codex/30",
-  gemini: "bg-agent-gemini/15 text-agent-gemini border-agent-gemini/30",
-  cursor: "bg-agent-cursor/15 text-agent-cursor border-agent-cursor/30",
+  claude: "bg-agent-claude/10 text-agent-claude border-agent-claude/30",
+  codex: "bg-agent-codex/10 text-agent-codex border-agent-codex/30",
+  gemini: "bg-agent-gemini/10 text-agent-gemini border-agent-gemini/30",
+  cursor: "bg-agent-cursor/10 text-agent-cursor border-agent-cursor/30",
   antigravity:
-    "bg-agent-antigravity/15 text-agent-antigravity border-agent-antigravity/30",
-  copilot: "bg-agent-copilot/15 text-agent-copilot border-agent-copilot/30",
-  windsurf: "bg-agent-windsurf/15 text-agent-windsurf border-agent-windsurf/30",
-  opencode: "bg-agent-opencode/15 text-agent-opencode border-agent-opencode/30",
+    "bg-agent-antigravity/10 text-agent-antigravity border-agent-antigravity/30",
+  copilot: "bg-agent-copilot/10 text-agent-copilot border-agent-copilot/30",
+  windsurf: "bg-agent-windsurf/10 text-agent-windsurf border-agent-windsurf/30",
+  opencode: "bg-agent-opencode/10 text-agent-opencode border-agent-opencode/30",
 };
 
 export function ExtensionFilters() {
diff --git a/src/index.css b/src/index.css
index a2e45523..f80ea31b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -88,13 +88,13 @@
   --paper-config: oklch(0.93 0.005 260 / 0.9);
   --tag-global: oklch(0.5144 0.1605 267.44);
   --tag-project: oklch(0.48 0.08 175);
-  --agent-claude: oklch(0.62 0.14 25);
-  --agent-codex: oklch(0.55 0.01 250);
+  --agent-claude: oklch(0.6 0.12 60);
+  --agent-codex: oklch(0.55 0.12 275);
   --agent-gemini: oklch(0.58 0.16 260);
-  --agent-cursor: oklch(0.55 0 0);
+  --agent-cursor: oklch(0.45 0.013 95);
   --agent-antigravity: oklch(0.58 0.12 250);
-  --agent-copilot: oklch(0.52 0.14 290);
-  --agent-windsurf: oklch(0.68 0.16 225);
+  --agent-copilot: oklch(0.55 0.13 296);
+  --agent-windsurf: oklch(0.68 0.1 225);
   --agent-opencode: oklch(0.52 0.07 250);
   --toast-success-bg: oklch(0.94 0.06 155);
   --toast-success-border: oklch(0.72 0.16 155);
@@ -190,13 +190,13 @@
   --paper-config: oklch(0.27 0 0 / 0.82);
   --tag-global: oklch(0.72 0.12 267.44);
   --tag-project: oklch(0.68 0.07 175);
-  --agent-claude: oklch(0.72 0.12 25);
-  --agent-codex: oklch(0.72 0.01 250);
+  --agent-claude: oklch(0.72 0.08 60);
+  --agent-codex: oklch(0.72 0.11 275);
   --agent-gemini: oklch(0.72 0.14 260);
-  --agent-cursor: oklch(0.72 0 0);
+  --agent-cursor: oklch(0.85 0.02 95);
   --agent-antigravity: oklch(0.72 0.1 250);
-  --agent-copilot: oklch(0.72 0.12 290);
-  --agent-windsurf: oklch(0.8 0.13 225);
+  --agent-copilot: oklch(0.75 0.13 296);
+  --agent-windsurf: oklch(0.8 0.1 225);
   --agent-opencode: oklch(0.76 0.06 250);
   --toast-success-bg: oklch(0.23 0.04 155);
   --toast-success-border: oklch(0.55 0.14 155);
@@ -286,13 +286,13 @@
   --kind-cli: oklch(0.58 0.14 45);
   --tag-global: oklch(0.53 0.12 55);
   --tag-project: oklch(0.52 0.11 155);
-  --agent-claude: oklch(0.62 0.14 25);
-  --agent-codex: oklch(0.55 0.01 250);
+  --agent-claude: oklch(0.6 0.12 60);
+  --agent-codex: oklch(0.55 0.12 275);
   --agent-gemini: oklch(0.58 0.16 260);
-  --agent-cursor: oklch(0.55 0 0);
+  --agent-cursor: oklch(0.45 0.013 95);
   --agent-antigravity: oklch(0.58 0.12 250);
-  --agent-copilot: oklch(0.52 0.14 290);
-  --agent-windsurf: oklch(0.68 0.16 225);
+  --agent-copilot: oklch(0.55 0.13 296);
+  --agent-windsurf: oklch(0.68 0.1 225);
   --agent-opencode: oklch(0.52 0.07 250);
   --toast-success-bg: oklch(0.94 0.06 155);
   --toast-success-border: oklch(0.65 0.15 155);
@@ -376,13 +376,13 @@
   --kind-cli: oklch(0.65 0.14 45);
   --tag-global: oklch(0.72 0.11 55);
   --tag-project: oklch(0.72 0.1 155);
-  --agent-claude: oklch(0.72 0.12 25);
-  --agent-codex: oklch(0.72 0.01 250);
+  --agent-claude: oklch(0.72 0.08 60);
+  --agent-codex: oklch(0.72 0.11 275);
   --agent-gemini: oklch(0.72 0.14 260);
-  --agent-cursor: oklch(0.72 0 0);
+  --agent-cursor: oklch(0.85 0.02 95);
   --agent-antigravity: oklch(0.72 0.1 250);
-  --agent-copilot: oklch(0.72 0.12 290);
-  --agent-windsurf: oklch(0.8 0.13 225);
+  --agent-copilot: oklch(0.75 0.13 296);
+  --agent-windsurf: oklch(0.8 0.1 225);
   --agent-opencode: oklch(0.76 0.06 250);
   --toast-success-bg: oklch(0.26 0.04 155);
   --toast-success-border: oklch(0.55 0.14 155);
@@ -478,13 +478,13 @@
   --kind-cli: oklch(0.58 0.14 45);
   --tag-global: oklch(0.5144 0.1605 267.44);
   --tag-project: oklch(0.48 0.08 175);
-  --agent-claude: oklch(0.62 0.14 25);
-  --agent-codex: oklch(0.55 0.01 250);
+  --agent-claude: oklch(0.6 0.12 60);
+  --agent-codex: oklch(0.55 0.12 275);
   --agent-gemini: oklch(0.58 0.16 260);
-  --agent-cursor: oklch(0.55 0 0);
+  --agent-cursor: oklch(0.45 0.013 95);
   --agent-antigravity: oklch(0.58 0.12 250);
-  --agent-copilot: oklch(0.52 0.14 290);
-  --agent-windsurf: oklch(0.68 0.16 225);
+  --agent-copilot: oklch(0.55 0.13 296);
+  --agent-windsurf: oklch(0.68 0.1 225);
   --agent-opencode: oklch(0.52 0.07 250);
   --toast-success-bg: oklch(0.94 0.06 155);
   --toast-success-border: oklch(0.72 0.16 155);
@@ -574,13 +574,13 @@
   --kind-cli: oklch(0.65 0.14 45);
   --tag-global: oklch(0.72 0.12 267.44);
   --tag-project: oklch(0.68 0.07 175);
-  --agent-claude: oklch(0.72 0.12 25);
-  --agent-codex: oklch(0.72 0.01 250);
+  --agent-claude: oklch(0.72 0.08 60);
+  --agent-codex: oklch(0.72 0.11 275);
   --agent-gemini: oklch(0.72 0.14 260);
-  --agent-cursor: oklch(0.72 0 0);
+  --agent-cursor: oklch(0.85 0.02 95);
   --agent-antigravity: oklch(0.72 0.1 250);
-  --agent-copilot: oklch(0.72 0.12 290);
-  --agent-windsurf: oklch(0.8 0.13 225);
+  --agent-copilot: oklch(0.75 0.13 296);
+  --agent-windsurf: oklch(0.8 0.1 225);
   --agent-opencode: oklch(0.76 0.06 250);
   --toast-success-bg: oklch(0.23 0.04 155);
   --toast-success-border: oklch(0.55 0.14 155);