From 56b49cb2a6f3728a6d035061dcef7b7886065d6d Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 3 Apr 2026 16:08:12 +0800
Subject: [PATCH] feat(issues): use ActorAvatar in agent live card header

Replace hand-rolled Bot icon circle with ActorAvatar component so
agent custom avatars display correctly, consistent with comment cards
and other agent-rendered UI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../issues/components/agent-live-card.tsx       | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/web/features/issues/components/agent-live-card.tsx b/apps/web/features/issues/components/agent-live-card.tsx
index 173e0d40..110eb1ff 100644
--- a/apps/web/features/issues/components/agent-live-card.tsx
+++ b/apps/web/features/issues/components/agent-live-card.tsx
@@ -8,6 +8,7 @@ import type { TaskMessagePayload, TaskCompletedPayload, TaskFailedPayload, TaskC
 import type { AgentTask } from "@/shared/types/agent";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
+import { ActorAvatar } from "@/components/common/actor-avatar";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { useActorName } from "@/features/workspace";
 import { redactSecrets } from "../utils/redact";
@@ -293,12 +294,16 @@ export function AgentLiveCard({ issueId, agentName, scrollContainerRef }: AgentL
       >
         {/* Header */}
         <div className="flex items-center gap-2 px-3 py-2">
-          <div className={cn(
-            "flex items-center justify-center h-5 w-5 rounded-full shrink-0",
-            isStuck ? "bg-brand/15 text-brand" : "bg-info/10 text-info",
-          )}>
-            <Bot className="h-3 w-3" />
-          </div>
+          {activeTask.agent_id ? (
+            <ActorAvatar actorType="agent" actorId={activeTask.agent_id} size={20} />
+          ) : (
+            <div className={cn(
+              "flex items-center justify-center h-5 w-5 rounded-full shrink-0",
+              isStuck ? "bg-brand/15 text-brand" : "bg-info/10 text-info",
+            )}>
+              <Bot className="h-3 w-3" />
+            </div>
+          )}
           <div className="flex items-center gap-1.5 text-xs font-medium min-w-0">
             <Loader2 className={cn("h-3 w-3 animate-spin shrink-0", isStuck ? "text-brand" : "text-info")} />
             <span className="truncate">{name} is working</span>