From db2c82475b081e8ba11bfea80560d32dbf9f5c8d Mon Sep 17 00:00:00 2001
From: 777genius <quantjumppro@gmail.com>
Date: Sun, 31 May 2026 05:37:33 +0300
Subject: [PATCH] perf(renderer): pass composer member avatars

---
 src/renderer/components/team/MemberBadge.tsx              | 7 +++++--
 src/renderer/components/team/messages/MessageComposer.tsx | 5 ++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/team/MemberBadge.tsx b/src/renderer/components/team/MemberBadge.tsx
index fb5981c2..942c6022 100644
--- a/src/renderer/components/team/MemberBadge.tsx
+++ b/src/renderer/components/team/MemberBadge.tsx
@@ -26,6 +26,8 @@ interface MemberBadgeProps {
   teamName?: string;
   /** Avatar + badge size variant */
   size?: 'xs' | 'sm' | 'md';
+  /** Pre-resolved avatar URL from a caller that already owns the member roster. */
+  avatarUrl?: string;
   /** Hide the avatar icon, show only the name badge */
   hideAvatar?: boolean;
   onClick?: (name: string) => void;
@@ -59,6 +61,7 @@ export const MemberBadge = memo(
     color,
     teamName,
     size = 'sm',
+    avatarUrl,
     hideAvatar,
     onClick,
     disableHoverCard,
@@ -66,7 +69,7 @@ export const MemberBadge = memo(
     const colors = getTeamColorSet(color ?? '');
     const { isLight } = useTheme();
     const effectiveAvatarTeamName = useStore((s) =>
-      hideAvatar ? null : (teamName ?? s.selectedTeamName)
+      hideAvatar || avatarUrl != null ? null : (teamName ?? s.selectedTeamName)
     );
     const teamMembers = useStore((s) =>
       effectiveAvatarTeamName
@@ -87,7 +90,7 @@ export const MemberBadge = memo(
 
     const avatar = (
       <img
-        src={avatarMap.get(name) ?? agentAvatarUrl(name, avatarSize)}
+        src={avatarUrl ?? avatarMap.get(name) ?? agentAvatarUrl(name, avatarSize)}
         alt=""
         className={`${avatarClass} shrink-0 rounded-full bg-[var(--color-surface-raised)]`}
         loading="lazy"
diff --git a/src/renderer/components/team/messages/MessageComposer.tsx b/src/renderer/components/team/messages/MessageComposer.tsx
index 5d9e0db3..51ba22de 100644
--- a/src/renderer/components/team/messages/MessageComposer.tsx
+++ b/src/renderer/components/team/messages/MessageComposer.tsx
@@ -26,7 +26,7 @@ import {
   validateAttachmentPayloadsForMember,
 } from '@renderer/utils/attachmentRecipientCapabilities';
 import { formatAgentRole } from '@renderer/utils/formatAgentRole';
-import { buildMemberColorMap } from '@renderer/utils/memberHelpers';
+import { buildMemberAvatarMap, buildMemberColorMap } from '@renderer/utils/memberHelpers';
 import { isOpenCodeRuntimeDeliveryHardUxFailureFromDebugDetails } from '@renderer/utils/openCodeRuntimeDeliveryDiagnostics';
 import { nameColorSet } from '@renderer/utils/projectColor';
 import { getSuggestedSlashCommandsForProvider } from '@renderer/utils/providerSlashCommands';
@@ -293,6 +293,7 @@ export const MessageComposer = ({
   const slashCommandDataEnabled = textHasSlashCommandTrigger;
 
   const colorMap = useMemo(() => buildMemberColorMap(members), [members]);
+  const avatarMap = useMemo(() => buildMemberAvatarMap(members), [members]);
 
   const mentionSuggestions = useMemo<MentionSuggestion[]>(
     () =>
@@ -1129,6 +1130,7 @@ export const MessageComposer = ({
                         name={recipient}
                         color={selectedResolvedColor}
                         size="sm"
+                        avatarUrl={avatarMap.get(recipient)}
                         hideAvatar={recipient === 'user'}
                         disableHoverCard
                       />
@@ -1207,6 +1209,7 @@ export const MessageComposer = ({
                               name={m.name}
                               color={resolvedColor}
                               size="sm"
+                              avatarUrl={avatarMap.get(m.name)}
                               hideAvatar={m.name === 'user'}
                               disableHoverCard
                             />