fix(web): show agent flavor icon in session header (#714)

* fix(web): reuse agent flavor icon in session header

* fix(web): use neutral badge for unknown agent flavor

Author: techotaku39

.github/pr-assets/pr-agent-flavor-icons-before.jpg

@@ -0,0 +1,45 @@
+const FLAVOR_BADGES: Record<string, { label: string; colors: string }> = {
+    claude: {
+        label: 'Cl',
+        colors: 'bg-[#d97706] text-white',
+    },
+    codex: {
+        label: 'Cx',
+        colors: 'bg-[#111827] text-white',
+    },
+    cursor: {
+        label: 'Cu',
+        colors: 'bg-[#0f766e] text-white',
+    },
+    gemini: {
+        label: 'Gm',
+        colors: 'bg-[#2563eb] text-white',
+    },
+    kimi: {
+        label: 'Km',
+        colors: 'bg-[#7c3aed] text-white',
+    },
+    opencode: {
+        label: 'Op',
+        colors: 'bg-[#15803d] text-white',
+    },
+}
+
+const UNKNOWN_FLAVOR_BADGE = {
+    label: 'Un',
+    colors: 'bg-[var(--app-secondary-bg)] text-[var(--app-hint)]',
+}
+
+export function AgentFlavorIcon({ flavor, className }: { flavor?: string | null; className?: string }) {
+    const normalized = (flavor ?? '').trim().toLowerCase()
+    const badge = FLAVOR_BADGES[normalized] ?? UNKNOWN_FLAVOR_BADGE
+
+    return (
+        <span
+            aria-hidden="true"
+            className={`inline-flex items-center justify-center rounded-sm text-[8px] font-semibold leading-none ${badge.colors} ${className ?? 'h-4 w-4'}`}
+        >
+            {badge.label}
+        </span>
+    )
+}

.github/pr-assets/pr-agent-flavor-icons-claude.jpg

@@ -8,6 +8,7 @@ import { RenameSessionDialog } from '@/components/RenameSessionDialog'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
 import { getSessionModelLabel } from '@/lib/sessionModelLabel'
 import { useTranslation } from '@/lib/use-translation'
+import { AgentFlavorIcon } from '@/components/AgentFlavorIcon'
 
 function getSessionTitle(session: Session): string {
     if (session.metadata?.name) {
@@ -162,7 +163,7 @@ export function SessionHeader(props: {
                         </div>
                         <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-[var(--app-hint)]">
                             <span className="inline-flex items-center gap-1">
-                                <span aria-hidden="true">❖</span>
+                                <AgentFlavorIcon flavor={session.metadata?.flavor} className="h-3.5 w-3.5 shrink-0" />
                                 {session.metadata?.flavor?.trim() || 'unknown'}
                             </span>
                             {modelLabel ? (

.github/pr-assets/pr-agent-flavor-icons-codex.jpg

@@ -11,6 +11,7 @@ import { CopyIcon, CheckIcon } from '@/components/icons'
 import { cn } from '@/lib/utils'
 import { useTranslation } from '@/lib/use-translation'
 import { DEFAULT_SESSION_PREVIEW_LIMIT, useSessionPreviewLimit } from '@/hooks/useSessionPreviewLimit'
+import { AgentFlavorIcon } from '@/components/AgentFlavorIcon'
 
 type SessionGroup = {
     key: string
@@ -481,45 +482,6 @@ function SessionListSearch(props: {
     )
 }
 
-const FLAVOR_BADGES: Record<string, { label: string; colors: string }> = {
-    claude: {
-        label: 'Cl',
-        colors: 'bg-[#d97706] text-white',
-    },
-    codex: {
-        label: 'Cx',
-        colors: 'bg-[#111827] text-white',
-    },
-    cursor: {
-        label: 'Cu',
-        colors: 'bg-[#0f766e] text-white',
-    },
-    gemini: {
-        label: 'Gm',
-        colors: 'bg-[#2563eb] text-white',
-    },
-    kimi: {
-        label: 'Km',
-        colors: 'bg-[#7c3aed] text-white',
-    },
-    opencode: {
-        label: 'Op',
-        colors: 'bg-[#15803d] text-white',
-    },
-}
-
-function FlavorIcon({ flavor, className }: { flavor?: string | null; className?: string }) {
-    const badge = FLAVOR_BADGES[(flavor ?? 'claude').trim().toLowerCase()] ?? FLAVOR_BADGES.claude
-    return (
-        <span
-            aria-hidden="true"
-            className={`inline-flex items-center justify-center rounded-sm text-[8px] font-semibold leading-none ${badge.colors} ${className ?? 'h-4 w-4'}`}
-        >
-            {badge.label}
-        </span>
-    )
-}
-
 function MachineIcon(props: { className?: string }) {
     return (
         <svg
@@ -604,7 +566,7 @@ function SessionItem(props: {
             >
                 <div className={`flex items-center justify-between gap-3 ${!s.active ? 'opacity-50' : ''}`}>
                     <div className="flex items-center gap-2 min-w-0">
-                        <FlavorIcon flavor={s.metadata?.flavor} className="h-4 w-4 shrink-0" />
+                        <AgentFlavorIcon flavor={s.metadata?.flavor} className="h-4 w-4 shrink-0" />
                         <div className={`truncate text-sm font-medium ${s.active ? 'text-[var(--app-fg)]' : 'text-[var(--app-hint)]'}`}>
                             {sessionName}
                         </div>