diff --git a/.github/pr-assets/pr-agent-flavor-icons-before.jpg b/.github/pr-assets/pr-agent-flavor-icons-before.jpg
new file mode 100644
index 00000000..86f6e347
Binary files /dev/null and b/.github/pr-assets/pr-agent-flavor-icons-before.jpg differ
diff --git a/.github/pr-assets/pr-agent-flavor-icons-claude.jpg b/.github/pr-assets/pr-agent-flavor-icons-claude.jpg
new file mode 100644
index 00000000..9ddbd866
Binary files /dev/null and b/.github/pr-assets/pr-agent-flavor-icons-claude.jpg differ
diff --git a/.github/pr-assets/pr-agent-flavor-icons-codex.jpg b/.github/pr-assets/pr-agent-flavor-icons-codex.jpg
new file mode 100644
index 00000000..0e6b82cb
Binary files /dev/null and b/.github/pr-assets/pr-agent-flavor-icons-codex.jpg differ
diff --git a/web/src/components/AgentFlavorIcon.tsx b/web/src/components/AgentFlavorIcon.tsx
new file mode 100644
index 00000000..b88f2518
--- /dev/null
+++ b/web/src/components/AgentFlavorIcon.tsx
@@ -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>
+    )
+}
diff --git a/web/src/components/SessionHeader.tsx b/web/src/components/SessionHeader.tsx
index 046b11e3..67071d61 100644
--- a/web/src/components/SessionHeader.tsx
+++ b/web/src/components/SessionHeader.tsx
@@ -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 ? (
diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx
index 2e77a545..ebf51a9d 100644
--- a/web/src/components/SessionList.tsx
+++ b/web/src/components/SessionList.tsx
@@ -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>