feat: add centralized agent icon system and fix agent name formatting

Author: blessing-sanusi

src/frontend/src/utils/agentIconUtils.tsx

@@ -7,12 +7,216 @@ import {
     Search20Regular,
     Globe20Regular,
     Database20Regular,
-    Wrench20Regular
+    Wrench20Regular,
+    DocumentData20Regular,
+    ChartMultiple20Regular,
+    Bot20Regular,
+    DataUsage20Regular,
+    TableSimple20Regular,
+    DataTrending20Regular,  // Replace Analytics20Regular with DataTrending20Regular
+    Settings20Regular,
+    Brain20Regular,
+    Target20Regular,
+    Flash20Regular,
+    Shield20Regular
 } from '@fluentui/react-icons';
 import { TeamService } from '@/services/TeamService';
 import { TaskService } from '@/services';
 import { iconMap } from '@/models/homeInput';
 
+// Extended icon mapping for user-uploaded string icons
+const fluentIconMap: Record<string, React.ComponentType<any>> = {
+    'Desktop20Regular': Desktop20Regular,
+    'Code20Regular': Code20Regular,
+    'Building20Regular': Building20Regular,
+    'Organization20Regular': Organization20Regular,
+    'Search20Regular': Search20Regular,
+    'Globe20Regular': Globe20Regular,
+    'Database20Regular': Database20Regular,
+    'Wrench20Regular': Wrench20Regular,
+    'DocumentData20Regular': DocumentData20Regular,
+    'ChartMultiple20Regular': ChartMultiple20Regular,
+    'Bot20Regular': Bot20Regular,
+    'DataUsage20Regular': DataUsage20Regular,
+    'TableSimple20Regular': TableSimple20Regular,
+    'DataTrending20Regular': DataTrending20Regular,  // Updated
+    'Analytics20Regular': DataTrending20Regular,     // Keep Analytics as alias
+    'Settings20Regular': Settings20Regular,
+    'Brain20Regular': Brain20Regular,
+    'Target20Regular': Target20Regular,
+    'Flash20Regular': Flash20Regular,
+    'Shield20Regular': Shield20Regular,
+    // Add common variations and aliases
+    'desktop': Desktop20Regular,
+    'code': Code20Regular,
+    'building': Building20Regular,
+    'organization': Organization20Regular,
+    'search': Search20Regular,
+    'globe': Globe20Regular,
+    'database': Database20Regular,
+    'wrench': Wrench20Regular,
+    'document': DocumentData20Regular,
+    'chart': ChartMultiple20Regular,
+    'bot': Bot20Regular,
+    'data': DataUsage20Regular,
+    'table': TableSimple20Regular,
+    'analytics': DataTrending20Regular,
+    'trending': DataTrending20Regular,
+    'settings': Settings20Regular,
+    'brain': Brain20Regular,
+    'target': Target20Regular,
+    'flash': Flash20Regular,
+    'shield': Shield20Regular
+};
+
+// Icon pool for unique assignment (excluding Person20Regular)
+const AGENT_ICON_POOL = [
+    Bot20Regular,
+    DataTrending20Regular,  // Updated
+    TableSimple20Regular,
+    ChartMultiple20Regular,
+    DataUsage20Regular,
+    DocumentData20Regular,
+    Settings20Regular,
+    Brain20Regular,
+    Target20Regular,
+    Flash20Regular,
+    Shield20Regular,
+    Code20Regular,
+    Search20Regular,
+    Globe20Regular,
+    Building20Regular,
+    Organization20Regular,
+    Wrench20Regular,
+    Database20Regular,
+    Desktop20Regular
+];
+
+// Cache for agent icon assignments to ensure consistency
+const agentIconAssignments: Record<string, React.ComponentType<any>> = {};
+
+/**
+ * Generate a consistent hash from a string for icon assignment
+ */
+const generateHash = (str: string): number => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return Math.abs(hash);
+};
+
+/**
+ * Match user-uploaded string icon to Fluent UI component
+ */
+const matchStringToFluentIcon = (iconString: string): React.ComponentType<any> | null => {
+    if (!iconString || typeof iconString !== 'string') return null;
+    
+    // Try exact match first
+    if (fluentIconMap[iconString]) {
+        return fluentIconMap[iconString];
+    }
+    
+    // Try case-insensitive match
+    const lowerIconString = iconString.toLowerCase();
+    if (fluentIconMap[lowerIconString]) {
+        return fluentIconMap[lowerIconString];
+    }
+    
+    // Try removing common suffixes and prefixes
+    const cleanedIconString = iconString
+        .replace(/20Regular$/i, '')
+        .replace(/Regular$/i, '')
+        .replace(/20$/i, '')
+        .replace(/^fluent/i, '')
+        .replace(/^icon/i, '')
+        .toLowerCase()
+        .trim();
+    
+    if (fluentIconMap[cleanedIconString]) {
+        return fluentIconMap[cleanedIconString];
+    }
+    
+    return null;
+};
+
+/**
+ * Get deterministic icon for agent based on name pattern matching
+ * This ensures agents with the same name always get the same icon
+ */
+const getDeterministicAgentIcon = (cleanName: string): React.ComponentType<any> => {
+    // Pattern-based assignment - deterministic based on agent name
+    if (cleanName.includes('data') && cleanName.includes('order')) {
+        return TableSimple20Regular;
+    } else if (cleanName.includes('data') && cleanName.includes('customer')) {
+        return DataUsage20Regular;
+    } else if (cleanName.includes('analysis') || cleanName.includes('recommend') || cleanName.includes('insight')) {
+        return DataTrending20Regular;
+    } else if (cleanName.includes('proxy') || cleanName.includes('interface')) {
+        return Bot20Regular;
+    } else if (cleanName.includes('brain') || cleanName.includes('ai') || cleanName.includes('intelligence')) {
+        return Brain20Regular;
+    } else if (cleanName.includes('security') || cleanName.includes('protect') || cleanName.includes('guard')) {
+        return Shield20Regular;
+    } else if (cleanName.includes('target') || cleanName.includes('goal') || cleanName.includes('objective')) {
+        return Target20Regular;
+    } else if (cleanName.includes('fast') || cleanName.includes('quick') || cleanName.includes('speed')) {
+        return Flash20Regular;
+    } else if (cleanName.includes('code') || cleanName.includes('dev') || cleanName.includes('program')) {
+        return Code20Regular;
+    } else if (cleanName.includes('search') || cleanName.includes('find') || cleanName.includes('lookup')) {
+        return Search20Regular;
+    } else if (cleanName.includes('web') || cleanName.includes('internet') || cleanName.includes('online')) {
+        return Globe20Regular;
+    } else if (cleanName.includes('business') || cleanName.includes('company') || cleanName.includes('enterprise')) {
+        return Building20Regular;
+    } else if (cleanName.includes('hr') || cleanName.includes('human') || cleanName.includes('people')) {
+        return Organization20Regular;
+    } else if (cleanName.includes('tool') || cleanName.includes('utility') || cleanName.includes('helper')) {
+        return Wrench20Regular;
+    } else if (cleanName.includes('document') || cleanName.includes('file') || cleanName.includes('report')) {
+        return DocumentData20Regular;
+    } else if (cleanName.includes('config') || cleanName.includes('setting') || cleanName.includes('manage')) {
+        return Settings20Regular;
+    } else if (cleanName.includes('data') || cleanName.includes('database')) {
+        return Database20Regular;
+    } else {
+        // Use hash-based assignment for consistent selection across identical names
+        const hash = generateHash(cleanName);
+        const iconIndex = hash % AGENT_ICON_POOL.length;
+        return AGENT_ICON_POOL[iconIndex];
+    }
+};
+
+/**
+ * Get unique icon for an agent based on their name and context
+ * Ensures agents with identical names get identical icons
+ */
+const getUniqueAgentIcon = (
+    agentName: string,
+    allAgentNames: string[],
+    iconStyle: React.CSSProperties
+): React.ReactNode => {
+    const cleanName = TaskService.cleanTextToSpaces(agentName).toLowerCase();
+    
+    // If we already assigned an icon to this agent, use it
+    if (agentIconAssignments[cleanName]) {
+        const IconComponent = agentIconAssignments[cleanName];
+        return React.createElement(IconComponent, { style: iconStyle });
+    }
+    
+    // Get deterministic icon based on agent name patterns
+    // This ensures same names always get the same icon regardless of assignment order
+    const selectedIcon = getDeterministicAgentIcon(cleanName);
+    
+    // Cache the assignment for future lookups
+    agentIconAssignments[cleanName] = selectedIcon;
+    
+    return React.createElement(selectedIcon, { style: iconStyle });
+};
+
 /**
  * Comprehensive utility function to get agent icon from multiple data sources
  * with consistent fallback patterns across all components
@@ -25,7 +229,33 @@ export const getAgentIcon = (
 ): React.ReactNode => {
     const iconStyle = { fontSize: '16px', color: iconColor };
 
-    // 1. First priority: Get from stored team configuration (TeamService)
+    // 1. First priority: Get from uploaded team configuration in planData
+    if (planData?.team?.agents) {
+        const cleanAgentName = TaskService.cleanTextToSpaces(agentName);
+
+        const agent = planData.team.agents.find((a: any) =>
+            TaskService.cleanTextToSpaces(a.name || '').toLowerCase().includes(cleanAgentName.toLowerCase()) ||
+            TaskService.cleanTextToSpaces(a.type || '').toLowerCase().includes(cleanAgentName.toLowerCase()) ||
+            TaskService.cleanTextToSpaces(a.input_key || '').toLowerCase().includes(cleanAgentName.toLowerCase())
+        );
+
+        if (agent?.icon) {
+            // Try to match string to Fluent icon component first
+            const FluentIconComponent = matchStringToFluentIcon(agent.icon);
+            if (FluentIconComponent) {
+                return React.createElement(FluentIconComponent, { style: iconStyle });
+            }
+            
+            // Fallback: check if it's in the existing iconMap
+            if (iconMap[agent.icon]) {
+                return React.cloneElement(iconMap[agent.icon] as React.ReactElement, {
+                    style: iconStyle
+                });
+            }
+        }
+    }
+
+    // 2. Second priority: Get from stored team configuration (TeamService)
     const storedTeam = TeamService.getStoredTeam();
     if (storedTeam?.agents) {
         const cleanAgentName = TaskService.cleanTextToSpaces(agentName);
@@ -43,7 +273,7 @@ export const getAgentIcon = (
         }
     }
 
-    // 2. Second priority: Get from participant_descriptions in planApprovalRequest
+    // 3. Third priority: Get from participant_descriptions in planApprovalRequest
     if (planApprovalRequest?.context?.participant_descriptions) {
         const participantDesc = planApprovalRequest.context.participant_descriptions[agentName];
         if (participantDesc?.icon && iconMap[participantDesc.icon]) {
@@ -53,44 +283,28 @@ export const getAgentIcon = (
         }
     }
 
-    // 3. Third priority: Get from planData team configuration
-    if (planData?.team?.agents) {
-        const cleanAgentName = TaskService.cleanTextToSpaces(agentName);
-
-        const agent = planData.team.agents.find((a: any) =>
-            TaskService.cleanTextToSpaces(a.name).toLowerCase().includes(cleanAgentName.toLowerCase()) ||
-            a.type.toLowerCase().includes(cleanAgentName.toLowerCase()) ||
-            a.input_key.toLowerCase().includes(cleanAgentName.toLowerCase())
-        );
-
-        if (agent?.icon && iconMap[agent.icon]) {
-            return React.cloneElement(iconMap[agent.icon] as React.ReactElement, {
-                style: iconStyle
-            });
-        }
-    }
-
-    // 4. Fallback: Pattern-based icon assignment based on agent name
-    const cleanName = agentName.toLowerCase();
-    
-    if (cleanName.includes('coder') || cleanName.includes('coding') || cleanName.includes('executor')) {
-        return <Code20Regular style={iconStyle} />;
-    } else if (cleanName.includes('research') || cleanName.includes('data') || cleanName.includes('analyst')) {
-        return <Database20Regular style={iconStyle} />;
-    } else if (cleanName.includes('websurfer') || cleanName.includes('web') || cleanName.includes('browser')) {
-        return <Globe20Regular style={iconStyle} />;
-    } else if (cleanName.includes('search') || cleanName.includes('kb') || cleanName.includes('knowledge')) {
-        return <Search20Regular style={iconStyle} />;
-    } else if (cleanName.includes('hr') || cleanName.includes('human') || cleanName.includes('manager')) {
-        return <Organization20Regular style={iconStyle} />;
-    } else if (cleanName.includes('marketing') || cleanName.includes('business') || cleanName.includes('sales')) {
-        return <Building20Regular style={iconStyle} />;
-    } else if (cleanName.includes('custom') || cleanName.includes('tool') || cleanName.includes('utility')) {
-        return <Wrench20Regular style={iconStyle} />;
+    // 4. Deterministic icon assignment - ensures same names get same icons
+    // Get all agent names from current context for unique assignment
+    let allAgentNames: string[] = [];
+    
+    if (planApprovalRequest?.team) {
+        allAgentNames = planApprovalRequest.team;
+    } else if (planData?.team?.agents) {
+        allAgentNames = planData.team.agents.map((a: any) => a.name || a.type || '');
+    } else if (storedTeam?.agents) {
+        allAgentNames = storedTeam.agents.map(a => a.name);
     }
+    
+    return getUniqueAgentIcon(agentName, allAgentNames, iconStyle);
+};
 
-    // 5. Final fallback: Desktop icon for AI agents
-    return <Desktop20Regular style={iconStyle} />;
+/**
+ * Clear agent icon assignments (useful when switching teams/contexts)
+ */
+export const clearAgentIconAssignments = (): void => {
+    Object.keys(agentIconAssignments).forEach(key => {
+        delete agentIconAssignments[key];
+    });
 };
 
 /**