feat(ui): upgrade @lobehub/icons to v5 and update agent icon colors

Upgrade @lobehub/icons from v4 to v5.3.0, adopt new icon components (ClaudeCode, Codex, GeminiCLI) with Color variants, and align fallback AGENT_COLORS with official brand colors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 21:42:22 +08:00
parent 768d1326b1
commit 8d97ba6f44
4 changed files with 34 additions and 64 deletions
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
  },
  "dependencies": {
    "@base-ui/react": "^1.1.0",
-    "@lobehub/icons": "^4.11.0",
+    "@lobehub/icons": "^5.3.0",
    "@monaco-editor/react": "^4.7.0",
    "@radix-ui/react-use-controllable-state": "^1.2.2",
    "@streamdown/cjk": "^1.0.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ importers:
        specifier: ^1.1.0
        version: 1.1.0(@types/react@19.2.13)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      '@lobehub/icons':
-        specifier: ^4.11.0
-        version: 4.11.0(@lobehub/ui@4.36.2)(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        specifier: ^5.3.0
+        version: 5.3.0(@lobehub/ui@4.36.2)(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      '@monaco-editor/react':
        specifier: ^4.7.0
        version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -218,12 +218,6 @@ packages:
      react: '>=18'
      react-dom: '>=18'

-  '@ant-design/cssinjs@2.1.0':
-    resolution: {integrity: sha512-eZFrPCnrYrF3XtL7qA4L75P0qA3TtZta8H3Yggy7UYFh8gZgu5bSMNF+v4UVCzGxzYmx8ZvPdgOce0BJ6PsW9g==}
-    peerDependencies:
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
-
  '@ant-design/cssinjs@2.1.2':
    resolution: {integrity: sha512-2Hy8BnCEH31xPeSLbhhB2ctCPXE2ZnASdi+KbSeS79BNbUhL9hAEe20SkUk+BR8aKTmqb6+FKFruk7w8z0VoRQ==}
    peerDependencies:
@@ -913,10 +907,10 @@ packages:
      react: ^19.0.0
      react-dom: ^19.0.0

-  '@lobehub/icons@4.11.0':
-    resolution: {integrity: sha512-/ACd7mqP1TjNUPEUuw/BnEWiTVGF9o3KtKom0ZRtYozk+ibQuPCzY+i7FSYyxBjVPXtidKAFL3zcaApDXaLkGA==}
+  '@lobehub/icons@5.3.0':
+    resolution: {integrity: sha512-W/nQ1JSBHwYLnHup/TN7ml35eSsYqBoG5vpqChjH83WsuIRLT1vSpkPCkHOJ7pvmJCXXCwTicAwdhUS0lmIPaA==}
    peerDependencies:
-      '@lobehub/ui': ^4.3.3
+      '@lobehub/ui': ^5.0.0
      antd: ^6.1.1
      react: ^19.0.0
      react-dom: ^19.0.0
@@ -2189,12 +2183,6 @@ packages:
      react: '>=18.0.0'
      react-dom: '>=18.0.0'

-  '@rc-component/util@1.9.0':
-    resolution: {integrity: sha512-5uW6AfhIigCWeEQDthTozlxiT4Prn6xYQWeO0xokjcaa186OtwPRHBZJ2o0T0FhbjGhZ3vXdbkv0sx3gAYW7Vg==}
-    peerDependencies:
-      react: '>=18.0.0'
-      react-dom: '>=18.0.0'
-
  '@rc-component/virtual-list@1.0.2':
    resolution: {integrity: sha512-uvTol/mH74FYsn5loDGJxo+7kjkO4i+y4j87Re1pxJBs0FaeuMuLRzQRGaXwnMcV1CxpZLi2Z56Rerj2M00fjQ==}
    engines: {node: '>=8.x'}
@@ -6528,18 +6516,6 @@ snapshots:
      react: 19.2.4
      react-dom: 19.2.4(react@19.2.4)

-  '@ant-design/cssinjs@2.1.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      '@babel/runtime': 7.28.6
-      '@emotion/hash': 0.8.0
-      '@emotion/unitless': 0.7.5
-      '@rc-component/util': 1.9.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      clsx: 2.1.1
-      csstype: 3.2.3
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      stylis: 4.3.6
-
  '@ant-design/cssinjs@2.1.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
    dependencies:
      '@babel/runtime': 7.29.2
@@ -6919,7 +6895,7 @@ snapshots:
  '@emotion/babel-plugin@11.13.5':
    dependencies:
      '@babel/helper-module-imports': 7.28.6
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
      '@emotion/hash': 0.9.2
      '@emotion/memoize': 0.9.0
      '@emotion/serialize': 1.3.3
@@ -6962,7 +6938,7 @@ snapshots:

  '@emotion/react@11.14.0(@types/react@19.2.13)(react@19.2.4)':
    dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
      '@emotion/babel-plugin': 11.13.5
      '@emotion/cache': 11.14.0
      '@emotion/serialize': 1.3.3
@@ -7315,9 +7291,9 @@ snapshots:
      - antd
      - supports-color

-  '@lobehub/icons@4.11.0(@lobehub/ui@4.36.2)(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@lobehub/icons@5.3.0(@lobehub/ui@4.36.2)(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
    dependencies:
-      '@lobehub/ui': 4.36.2(@lobehub/fluent-emoji@4.1.0(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@lobehub/icons@4.11.0)(@types/mdast@4.0.4)(@types/react-dom@19.2.3(@types/react@19.2.13))(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(micromark-util-types@2.0.2)(micromark@4.0.2)(motion@12.34.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@lobehub/ui': 4.36.2(@lobehub/fluent-emoji@4.1.0(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@lobehub/icons@5.3.0)(@types/mdast@4.0.4)(@types/react-dom@19.2.3(@types/react@19.2.13))(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(micromark-util-types@2.0.2)(micromark@4.0.2)(motion@12.34.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      antd: 6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      antd-style: 4.1.0(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      lucide-react: 0.469.0(react@19.2.4)
@@ -7328,7 +7304,7 @@ snapshots:
      - '@types/react'
      - supports-color

-  '@lobehub/ui@4.36.2(@lobehub/fluent-emoji@4.1.0(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@lobehub/icons@4.11.0)(@types/mdast@4.0.4)(@types/react-dom@19.2.3(@types/react@19.2.13))(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(micromark-util-types@2.0.2)(micromark@4.0.2)(motion@12.34.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@lobehub/ui@4.36.2(@lobehub/fluent-emoji@4.1.0(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(@lobehub/icons@5.3.0)(@types/mdast@4.0.4)(@types/react-dom@19.2.3(@types/react@19.2.13))(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(micromark-util-types@2.0.2)(micromark@4.0.2)(motion@12.34.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
    dependencies:
      '@ant-design/cssinjs': 2.1.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      '@base-ui/react': 1.0.0(@types/react@19.2.13)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -7342,7 +7318,7 @@ snapshots:
      '@floating-ui/react': 0.27.19(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      '@giscus/react': 3.1.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      '@lobehub/fluent-emoji': 4.1.0(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@lobehub/icons': 4.11.0(@lobehub/ui@4.36.2)(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@lobehub/icons': 5.3.0(@lobehub/ui@4.36.2)(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      '@mdx-js/mdx': 3.1.1
      '@mdx-js/react': 3.1.1(@types/react@19.2.13)(react@19.2.4)
      '@pierre/diffs': 1.1.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -8774,13 +8750,6 @@ snapshots:
      react-dom: 19.2.4(react@19.2.4)
      react-is: 18.3.1

-  '@rc-component/util@1.9.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
-    dependencies:
-      is-mobile: 5.0.0
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      react-is: 18.3.1
-
  '@rc-component/virtual-list@1.0.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
    dependencies:
      '@babel/runtime': 7.29.2
@@ -9541,8 +9510,8 @@ snapshots:

  antd-style@4.1.0(@types/react@19.2.13)(antd@6.3.0(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
    dependencies:
-      '@ant-design/cssinjs': 2.1.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@babel/runtime': 7.28.6
+      '@ant-design/cssinjs': 2.1.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@babel/runtime': 7.29.2
      '@emotion/cache': 11.14.0
      '@emotion/css': 11.13.5
      '@emotion/react': 11.14.0(@types/react@19.2.13)(react@19.2.4)
@@ -9712,7 +9681,7 @@ snapshots:

  babel-plugin-macros@3.1.0:
    dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2
      cosmiconfig: 7.1.0
      resolve: 1.22.11

@@ -12528,7 +12497,7 @@ snapshots:

  polished@4.3.1:
    dependencies:
-      '@babel/runtime': 7.28.6
+      '@babel/runtime': 7.29.2

  possible-typed-array-names@1.1.0: {}

--- a/src/components/agent-icon.tsx
+++ b/src/components/agent-icon.tsx
@@ -2,11 +2,14 @@ import type { AgentType } from "@/lib/types"
 import { AGENT_COLORS } from "@/lib/types"
 import { cn } from "@/lib/utils"

-import ClaudeColor from "@lobehub/icons/es/Claude/components/Color"
-import GeminiColor from "@lobehub/icons/es/Gemini/components/Color"
-import OpenClawColor from "@lobehub/icons/es/OpenClaw/components/Color"
-import ClineMono from "@lobehub/icons/es/Cline/components/Mono"
-import { OpenAI, OpenCode } from "@lobehub/icons"
+import {
+  ClaudeCode,
+  Cline,
+  Codex,
+  GeminiCLI,
+  OpenClaw,
+  OpenCode,
+} from "@lobehub/icons"

 interface AgentIconProps {
  agentType: AgentType
@@ -17,21 +20,19 @@ interface AgentIconProps {
 type AnyIcon = React.ComponentType<any>

 const COLOR_ICONS: Partial<Record<AgentType, AnyIcon>> = {
-  claude_code: ClaudeColor,
-  gemini: GeminiColor,
-  open_claw: OpenClawColor,
+  claude_code: ClaudeCode.Color,
+  codex: Codex.Color,
+  gemini: GeminiCLI.Color,
+  open_claw: OpenClaw.Color,
 }

 const MONO_ICONS: Partial<Record<AgentType, AnyIcon>> = {
-  codex: OpenAI,
  open_code: OpenCode,
-  cline: ClineMono,
+  cline: Cline,
 }

 // Text-color versions for Mono icons
-const AGENT_TEXT_COLORS: Partial<Record<AgentType, string>> = {
-  open_code: "text-blue-500",
-}
+const AGENT_TEXT_COLORS: Partial<Record<AgentType, string>> = {}

 export function AgentIcon({ agentType, className }: AgentIconProps) {
  const ColorIcon = COLOR_ICONS[agentType]
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -245,10 +245,10 @@ export const AGENT_LABELS: Record<AgentType, string> = {
 }

 export const AGENT_COLORS: Record<AgentType, string> = {
-  claude_code: "bg-orange-500",
-  codex: "bg-green-500",
-  open_code: "bg-blue-500",
-  gemini: "bg-blue-400",
+  claude_code: "bg-[#D97757]",
+  codex: "bg-[#7A9DFF]",
+  open_code: "bg-black",
+  gemini: "bg-[#3186FF]",
  open_claw: "bg-emerald-600",
  cline: "bg-purple-500",
 }