From ffdc0019fcfe4b626e1ed94a717c1a14ec33d878 Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Thu, 16 Apr 2026 18:03:51 +0800
Subject: [PATCH] fix(ui): replace Codex icon to remove opaque white background

The upstream Codex.Color icon from @lobehub/icons renders an SVG with a
white background rectangle, which appears as a white square on dark
backgrounds. Replace it with a custom CodexColorIcon that renders only
the logo path with its original gradient fill, and adjust the viewBox to
better fit the content area.
---
 src/components/agent-icon.tsx | 45 +++++++++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/components/agent-icon.tsx b/src/components/agent-icon.tsx
index efe271d..e12851e 100644
--- a/src/components/agent-icon.tsx
+++ b/src/components/agent-icon.tsx
@@ -1,3 +1,5 @@
+import { memo, useId } from "react"
+
 import type { AgentType } from "@/lib/types"
 import { AGENT_COLORS } from "@/lib/types"
 import { cn } from "@/lib/utils"
@@ -5,7 +7,6 @@ import { cn } from "@/lib/utils"
 import {
   ClaudeCode,
   Cline,
-  Codex,
   GeminiCLI,
   OpenClaw,
   OpenCode,
@@ -16,12 +17,52 @@ interface AgentIconProps {
   className?: string
 }
 
+// Codex.Color has a white background rect that shows as a white square on
+// dark backgrounds. This component renders only the logo path with its
+// gradient, without the opaque background.
+const CodexColorIcon = memo(function CodexColorIcon({
+  size = "1em",
+}: {
+  size?: string | number
+}) {
+  const id = useId()
+  return (
+    <svg
+      height={size}
+      style={{ flex: "none", lineHeight: 1 }}
+      viewBox="2 2 20 20"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Codex</title>
+      <path
+        d="M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388zm3.482 10.565a.637.637 0 000 1.272h3.636a.637.637 0 100-1.272h-3.636zM8.462 9.23a.637.637 0 00-1.106.631l1.272 2.224-1.266 2.136a.636.636 0 101.095.649l1.454-2.455a.636.636 0 00.005-.64L8.462 9.23z"
+        fill={`url(#${id})`}
+      />
+      <defs>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={id}
+          x1="12"
+          x2="12"
+          y1="3"
+          y2="21"
+        >
+          <stop stopColor="#B1A7FF" />
+          <stop offset=".5" stopColor="#7A9DFF" />
+          <stop offset="1" stopColor="#3941FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+})
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyIcon = React.ComponentType<any>
 
 const COLOR_ICONS: Partial<Record<AgentType, AnyIcon>> = {
   claude_code: ClaudeCode.Color,
-  codex: Codex.Color,
+  codex: CodexColorIcon,
   gemini: GeminiCLI.Color,
   open_claw: OpenClaw.Color,
 }