feat: add support for "named" agent colors (CC compatibility)

packages/app/src/utils/agent.ts

@@ -3,6 +3,14 @@ const defaults: Record<string, string> = {
   build: "var(--icon-agent-build-base)",
   docs: "var(--icon-agent-docs-base)",
   plan: "var(--icon-agent-plan-base)",
+  red: "var(--syntax-critical)",
+  blue: "var(--syntax-info)",
+  green: "var(--syntax-success)",
+  yellow: "var(--syntax-warning)",
+  purple: "var(--syntax-property)",
+  orange: "var(--syntax-warning)",
+  pink: "var(--syntax-property)",
+  cyan: "var(--syntax-info)",
 }
 
 const palette = [

packages/opencode/src/cli/cmd/tui/context/local.tsx

@@ -92,8 +92,12 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
           if (agent?.color) {
             const color = agent.color
             if (color.startsWith("#")) return RGBA.fromHex(color)
-            // already validated by config, just satisfying TS here
-            return theme[color as keyof typeof theme] as RGBA
+
+            if (color in theme) return theme[color as keyof typeof theme]
+
+            // fallback to built-in color parser
+            const hex = Bun.color(color, "hex")
+            if (hex) return RGBA.fromHex(hex)
           }
           return colors()[index % colors().length]
         },

packages/opencode/src/config/agent.ts

@@ -18,6 +18,7 @@ const log = Log.create({ service: "config" })
 const Color = Schema.Union([
   Schema.String.check(Schema.isPattern(/^#[0-9a-fA-F]{6}$/)),
   Schema.Literals(["primary", "secondary", "accent", "success", "warning", "error", "info"]),
+  Schema.Literals(["red", "blue", "green", "yellow", "purple", "orange", "pink", "cyan"]),
 ])
 
 const AgentSchema = Schema.StructWithRest(
@@ -40,7 +41,7 @@ const AgentSchema = Schema.StructWithRest(
     }),
     options: Schema.optional(Schema.Record(Schema.String, Schema.Any)),
     color: Schema.optional(Color).annotate({
-      description: "Hex color code (e.g., #FF5733) or theme color (e.g., primary)",
+      description: "Hex color code (e.g., #FF5733), theme color (e.g., primary) or other valid CSS colors (e.g., red)",
     }),
     steps: Schema.optional(PositiveInt).annotate({
       description: "Maximum number of agentic iterations before forcing text-only response",

packages/sdk/js/src/v2/gen/types.gen.ts

@@ -1256,9 +1256,25 @@ export type AgentConfig = {
     [key: string]: unknown
   }
   /**
-   * Hex color code (e.g., #FF5733) or theme color (e.g., primary)
+   * Hex color code (e.g., #FF5733), theme color (e.g., primary) or other valid CSS colors (e.g., red)
    */
-  color?: string | "primary" | "secondary" | "accent" | "success" | "warning" | "error" | "info"
+  color?:
+    | string
+    | "primary"
+    | "secondary"
+    | "accent"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "red"
+    | "blue"
+    | "green"
+    | "yellow"
+    | "purple"
+    | "orange"
+    | "pink"
+    | "cyan"
   /**
    * Maximum number of agentic iterations before forcing text-only response
    */
@@ -1290,6 +1306,14 @@ export type AgentConfig = {
     | "warning"
     | "error"
     | "info"
+    | "red"
+    | "blue"
+    | "green"
+    | "yellow"
+    | "purple"
+    | "orange"
+    | "pink"
+    | "cyan"
     | number
     | PermissionConfig
     | undefined

packages/ui/src/components/message-part.tsx

@@ -281,6 +281,14 @@ const agentTones: Record<string, string> = {
   build: "var(--icon-agent-build-base)",
   docs: "var(--icon-agent-docs-base)",
   plan: "var(--icon-agent-plan-base)",
+  red: "var(--syntax-critical)",
+  blue: "var(--syntax-info)",
+  green: "var(--syntax-success)",
+  yellow: "var(--syntax-warning)",
+  purple: "var(--syntax-property)",
+  orange: "var(--syntax-warning)",
+  pink: "var(--syntax-property)",
+  cyan: "var(--syntax-info)",
 }
 
 const agentPalette = [

packages/web/src/content/docs/agents.mdx

@@ -627,7 +627,7 @@ Users can always invoke any subagent directly via the `@` autocomplete menu, eve
 
 Customize the agent's visual appearance in the UI with the `color` option. This affects how the agent appears in the interface.
 
-Use a valid hex color (e.g., `#FF5733`) or theme color: `primary`, `secondary`, `accent`, `success`, `warning`, `error`, `info`.
+Use a valid hex color (e.g., `#FF5733`), theme color: `primary`, `secondary`, `accent`, `success`, `warning`, `error`, `info` or other valid CSS color (e.g., `red`).
 
 ```json title="opencode.json"
 {