From ff8b844abed14c1107a3cd83bb60bf4cd9bbb923 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Sat, 28 Mar 2026 15:24:07 +0200
Subject: [PATCH] fix(team): show MemberBadge with avatar in ToolApprovalSheet
 header

Replace plain text teammate name with MemberBadge component showing
avatar + colored name badge, consistent with how members are displayed
in the Messages panel.
---
 src/renderer/components/team/ToolApprovalSheet.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/team/ToolApprovalSheet.tsx b/src/renderer/components/team/ToolApprovalSheet.tsx
index 91a4b640..ccb876c6 100644
--- a/src/renderer/components/team/ToolApprovalSheet.tsx
+++ b/src/renderer/components/team/ToolApprovalSheet.tsx
@@ -7,6 +7,8 @@ import { shortenDisplayPath } from '@renderer/utils/pathDisplay';
 import { highlightLines } from '@renderer/utils/syntaxHighlighter';
 import { AlertTriangle, FileText, Search, Terminal } from 'lucide-react';
 
+import { MemberBadge } from './MemberBadge';
+
 import {
   ToolApprovalSettingsContent,
   ToolApprovalSettingsToggle,
@@ -189,6 +191,13 @@ export const ToolApprovalSheet: React.FC = () => {
   const teamColor = getTeamColorSet(colorName);
   const displayName = current.teamDisplayName ?? teamSummary?.displayName ?? current.teamName;
 
+  // Resolve teammate color for MemberBadge (when source !== 'lead')
+  const sourceColor = useMemo(() => {
+    if (current.source === 'lead') return undefined;
+    const member = selectedTeamData?.members?.find((m) => m.name === current.source);
+    return member?.color;
+  }, [current.source, selectedTeamData?.members]);
+
   return (
     <>
       {/* Backdrop overlay */}
@@ -208,9 +217,11 @@ export const ToolApprovalSheet: React.FC = () => {
           style={{ borderColor: 'var(--color-border)' }}
         >
           <div className="flex items-center gap-2">
+            {current.source !== 'lead' && (
+              <MemberBadge name={current.source} color={sourceColor} size="xs" disableHoverCard />
+            )}
             {getToolIcon(current.toolName)}
             <span className="text-sm font-semibold" style={{ color: 'var(--color-text)' }}>
-              {current.source !== 'lead' ? `${current.source} — ` : ''}
               {current.toolName}
             </span>
           </div>