From 430ecb9f2f61b5e8aa396a395701b27e12e50774 Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Fri, 19 Jun 2026 13:34:48 +0100
Subject: [PATCH] Show persona avatars on agent cards

---
 .../features/agents/ui/AgentIdentityCard.tsx  |  4 ++-
 .../agents/ui/AgentProviderCollage.tsx        | 27 ++++++++++++++-----
 .../agents/ui/UnifiedAgentsSection.tsx        |  1 +
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/desktop/src/features/agents/ui/AgentIdentityCard.tsx b/desktop/src/features/agents/ui/AgentIdentityCard.tsx
index 1f782f6d8..90630a374 100644
--- a/desktop/src/features/agents/ui/AgentIdentityCard.tsx
+++ b/desktop/src/features/agents/ui/AgentIdentityCard.tsx
@@ -3,6 +3,7 @@ import { AgentProviderCollage } from "./AgentProviderCollage";
 
 type AgentIdentityCardProps = {
   ariaLabel: string;
+  avatarUrl?: string | null;
   dataTestId: string;
   label: string;
   modelLabel: string;
@@ -11,6 +12,7 @@ type AgentIdentityCardProps = {
 
 export function AgentIdentityCard({
   ariaLabel,
+  avatarUrl,
   dataTestId,
   label,
   modelLabel,
@@ -26,7 +28,7 @@ export function AgentIdentityCard({
       onClick={onClick}
       type="button"
     >
-      <AgentProviderCollage label={label} />
+      <AgentProviderCollage avatarUrl={avatarUrl} label={label} />
 
       <div className="absolute right-3 bottom-3 left-3 z-30 flex min-w-0 flex-col gap-0.5 text-left text-sm leading-5">
         <span className="min-w-0 truncate font-semibold text-foreground tracking-normal">
diff --git a/desktop/src/features/agents/ui/AgentProviderCollage.tsx b/desktop/src/features/agents/ui/AgentProviderCollage.tsx
index 34166dad7..9fbd0d025 100644
--- a/desktop/src/features/agents/ui/AgentProviderCollage.tsx
+++ b/desktop/src/features/agents/ui/AgentProviderCollage.tsx
@@ -1,5 +1,6 @@
 import type { CSSProperties } from "react";
 
+import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
 import { IdentityInitialsAvatar } from "./IdentityInitialsAvatar";
 
 type ClusterLayout = {
@@ -7,13 +8,17 @@ type ClusterLayout = {
 };
 
 type AgentProviderCollageProps = {
+  avatarUrl?: string | null;
   label: string;
 };
 
 const CLUSTER_CENTER_TOP_PERCENT = 50;
 const AGENT_INITIAL_AVATAR_SIZE = 152;
 
-export function AgentProviderCollage({ label }: AgentProviderCollageProps) {
+export function AgentProviderCollage({
+  avatarUrl,
+  label,
+}: AgentProviderCollageProps) {
   const { avatarStyle } = buildClusterPoints();
 
   return (
@@ -24,11 +29,21 @@ export function AgentProviderCollage({ label }: AgentProviderCollageProps) {
           data-agent-cluster-item="avatar"
           style={avatarStyle}
         >
-          <IdentityInitialsAvatar
-            colorSeed={label}
-            label={label}
-            size={AGENT_INITIAL_AVATAR_SIZE}
-          />
+          {avatarUrl ? (
+            <ProfileAvatar
+              avatarUrl={avatarUrl}
+              className="h-full w-full"
+              iconClassName="h-12 w-12"
+              label={label}
+              testId="agent-card-avatar"
+            />
+          ) : (
+            <IdentityInitialsAvatar
+              colorSeed={label}
+              label={label}
+              size={AGENT_INITIAL_AVATAR_SIZE}
+            />
+          )}
         </div>
       </div>
     </div>
diff --git a/desktop/src/features/agents/ui/UnifiedAgentsSection.tsx b/desktop/src/features/agents/ui/UnifiedAgentsSection.tsx
index cad96d62f..d52318898 100644
--- a/desktop/src/features/agents/ui/UnifiedAgentsSection.tsx
+++ b/desktop/src/features/agents/ui/UnifiedAgentsSection.tsx
@@ -231,6 +231,7 @@ function AgentPersonaCard({
   return (
     <AgentIdentityCard
       ariaLabel={`${title} agent profile`}
+      avatarUrl={persona.avatarUrl}
       dataTestId={`persona-agent-row-${persona.id}`}
       label={title}
       modelLabel={modelLabel}