From 633872cb98b05eac5fa001cf9750bb912ecbe6f7 Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Sun, 15 Mar 2026 22:39:55 +0700
Subject: [PATCH] feat(agents): display emoji icon from other_config in agent
 list and detail views

Show the emoji from other_config.emoji instead of the default Bot icon
in agent-card (grid), agent-list-row (list), and agent-detail-page (header).
Falls back to Bot icon when no emoji is set.
---
 ui/web/src/pages/agents/agent-card.tsx                     | 6 ++++--
 ui/web/src/pages/agents/agent-detail/agent-detail-page.tsx | 5 ++++-
 ui/web/src/pages/agents/agent-list-row.tsx                 | 6 ++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui/web/src/pages/agents/agent-card.tsx b/ui/web/src/pages/agents/agent-card.tsx
index 18151444..4fda2298 100644
--- a/ui/web/src/pages/agents/agent-card.tsx
+++ b/ui/web/src/pages/agents/agent-card.tsx
@@ -18,7 +18,9 @@ export function AgentCard({ agent, onClick, onResummon, onDelete }: AgentCardPro
   const { t } = useTranslation("agents");
   const displayName = agent.display_name
     || (UUID_RE.test(agent.agent_key) ? t("card.unnamedAgent") : agent.agent_key);
-  const selfEvolve = agent.agent_type === "predefined" && Boolean((agent.other_config as Record<string, unknown> | null)?.self_evolve);
+  const otherCfg = (agent.other_config ?? {}) as Record<string, unknown>;
+  const selfEvolve = agent.agent_type === "predefined" && Boolean(otherCfg.self_evolve);
+  const emoji = typeof otherCfg.emoji === "string" ? otherCfg.emoji : "";
 
   // Show agent_key as subtitle only if there's a display_name and agent_key is meaningful
   const showSubtitle = agent.display_name && !UUID_RE.test(agent.agent_key);
@@ -32,7 +34,7 @@ export function AgentCard({ agent, onClick, onResummon, onDelete }: AgentCardPro
       {/* Top row: icon + name + status */}
       <div className="flex items-center gap-3">
         <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
-          <Bot className="h-4.5 w-4.5" />
+          {emoji ? <span className="text-lg leading-none">{emoji}</span> : <Bot className="h-4.5 w-4.5" />}
         </div>
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
diff --git a/ui/web/src/pages/agents/agent-detail/agent-detail-page.tsx b/ui/web/src/pages/agents/agent-detail/agent-detail-page.tsx
index d6b6b0fa..e1339a8f 100644
--- a/ui/web/src/pages/agents/agent-detail/agent-detail-page.tsx
+++ b/ui/web/src/pages/agents/agent-detail/agent-detail-page.tsx
@@ -67,6 +67,9 @@ export function AgentDetailPage({ agentId, onBack }: AgentDetailPageProps) {
 
   const title = agentDisplayName(agent, t("card.unnamedAgent"));
   const subtitle = agentSubtitle(agent);
+  const emoji = typeof (agent.other_config as Record<string, unknown> | null)?.emoji === "string"
+    ? (agent.other_config as Record<string, unknown>).emoji as string
+    : "";
 
   return (
     <TooltipProvider>
@@ -77,7 +80,7 @@ export function AgentDetailPage({ agentId, onBack }: AgentDetailPageProps) {
           <ArrowLeft className="h-4 w-4" />
         </Button>
         <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-          <Bot className="h-6 w-6" />
+          {emoji ? <span className="text-2xl leading-none">{emoji}</span> : <Bot className="h-6 w-6" />}
         </div>
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
diff --git a/ui/web/src/pages/agents/agent-list-row.tsx b/ui/web/src/pages/agents/agent-list-row.tsx
index 1457a428..35febcb8 100644
--- a/ui/web/src/pages/agents/agent-list-row.tsx
+++ b/ui/web/src/pages/agents/agent-list-row.tsx
@@ -19,7 +19,9 @@ export function AgentListRow({ agent, ownerName, onClick, onResummon, onDelete }
   const { t } = useTranslation("agents");
   const displayName = agent.display_name
     || (UUID_RE.test(agent.agent_key) ? t("card.unnamedAgent") : agent.agent_key);
-  const selfEvolve = agent.agent_type === "predefined" && Boolean((agent.other_config as Record<string, unknown> | null)?.self_evolve);
+  const otherCfg = (agent.other_config ?? {}) as Record<string, unknown>;
+  const selfEvolve = agent.agent_type === "predefined" && Boolean(otherCfg.self_evolve);
+  const emoji = typeof otherCfg.emoji === "string" ? otherCfg.emoji : "";
 
   return (
     <button
@@ -29,7 +31,7 @@ export function AgentListRow({ agent, ownerName, onClick, onResummon, onDelete }
     >
       {/* Icon */}
       <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
-        <Bot className="h-4 w-4" />
+        {emoji ? <span className="text-base leading-none">{emoji}</span> : <Bot className="h-4 w-4" />}
       </div>
 
       {/* Name + key */}