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

Author: blessing-sanusi

src/frontend/src/components/content/HomeInput.tsx

@@ -40,17 +40,20 @@ const truncateDescription = (description: string, maxLength: number = 180): stri
         return description;
     }
 
-    // Find the last space before the limit to avoid cutting words
+
     const truncated = description.substring(0, maxLength);
     const lastSpaceIndex = truncated.lastIndexOf(' ');
 
-    // If there's a space within the last 20 characters, cut there
-    // Otherwise, cut at the exact limit
     const cutPoint = lastSpaceIndex > maxLength - 20 ? lastSpaceIndex : maxLength;
 
     return description.substring(0, cutPoint) + '...';
 };
 
+// Extended QuickTask interface to store both truncated and full descriptions
+interface ExtendedQuickTask extends QuickTask {
+    fullDescription: string; // Store the full, untruncated description
+}
+
 const HomeInput: React.FC<HomeInputProps> = ({
     selectedTeam,
 }) => {
@@ -148,13 +151,12 @@ const HomeInput: React.FC<HomeInputProps> = ({
         }
     };
 
-    const handleQuickTaskClick = (task: QuickTask) => {
-        setInput(task.description);
+    const handleQuickTaskClick = (task: ExtendedQuickTask) => {
+        setInput(task.fullDescription);
         setRAIError(null); // Clear any RAI errors when selecting a quick task
         if (textareaRef.current) {
             textareaRef.current.focus();
         }
-
     };
 
     useEffect(() => {
@@ -164,15 +166,16 @@ const HomeInput: React.FC<HomeInputProps> = ({
         }
     }, [input]);
 
-    // Convert team starting_tasks to QuickTask format
-    const tasksToDisplay: QuickTask[] = selectedTeam && selectedTeam.starting_tasks ?
+    // Convert team starting_tasks to ExtendedQuickTask format
+    const tasksToDisplay: ExtendedQuickTask[] = selectedTeam && selectedTeam.starting_tasks ?
         selectedTeam.starting_tasks.map((task, index) => {
             // Handle both string tasks and StartingTask objects
             if (typeof task === 'string') {
                 return {
                     id: `team-task-${index}`,
                     title: task,
                     description: truncateDescription(task),
+                    fullDescription: task, // Store the full description
                     icon: getIconFromString("📋")
                 };
             } else {
@@ -183,6 +186,7 @@ const HomeInput: React.FC<HomeInputProps> = ({
                     id: startingTask.id || `team-task-${index}`,
                     title: startingTask.name || startingTask.prompt || 'Task',
                     description: truncateDescription(taskDescription),
+                    fullDescription: taskDescription, // Store the full description
                     icon: getIconFromString(startingTask.logo || "📋")
                 };
             }

src/frontend/src/components/content/PlanPanelRight.tsx

@@ -3,12 +3,10 @@ import {
   Body1,
 } from "@fluentui/react-components";
 import {
-  PersonRegular,
   ArrowTurnDownRightRegular,
 } from "@fluentui/react-icons";
 import { MPlanData, PlanDetailsProps } from "../../models";
-import { TaskService } from "../../services/TaskService";
-import { AgentTypeUtils, AgentType } from "../../models/enums";
+import { getAgentIcon, getAgentDisplayNameWithSuffix } from '../../utils/agentIconUtils'; 
 import ContentNotFound from "../NotFound/ContentNotFound";
 
 
@@ -18,121 +16,82 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
   planApprovalRequest
 }) => {
 
-  // Helper function to get clean agent display name
-  const getAgentDisplayName = (agentName: string): string => {
-    if (!agentName) return 'Assistant';
-
-    let cleanName = TaskService.cleanTextToSpaces(agentName);
-    if (cleanName.toLowerCase().includes('agent')) {
-      cleanName = cleanName.replace(/agent/gi, '').trim();
-    }
-    return cleanName.replace(/\b\w/g, l => l.toUpperCase()) || 'Assistant';
-  };
-
-  // Helper function to get agent icon based on name and type
-  const getAgentIcon = (agentName: string) => {
-    // Try to determine agent type from name
-    const cleanName = agentName.toLowerCase();
-    let agentType: AgentType;
-
-    if (cleanName.includes('coder')) {
-      agentType = AgentType.CODER;
-    } else if (cleanName.includes('executor')) {
-      agentType = AgentType.EXECUTOR;
-    } else if (cleanName.includes('filesurfer')) {
-      agentType = AgentType.FILE_SURFER;
-    } else if (cleanName.includes('websurfer')) {
-      agentType = AgentType.WEB_SURFER;
-    } else if (cleanName.includes('hr')) {
-      agentType = AgentType.HR;
-    } else if (cleanName.includes('marketing')) {
-      agentType = AgentType.MARKETING;
-    } else if (cleanName.includes('procurement')) {
-      agentType = AgentType.PROCUREMENT;
-    } else if (cleanName.includes('proxy')) {
-      agentType = AgentType.GENERIC;
-    } else {
-      agentType = AgentType.GENERIC;
-    }
-
-    // Get the icon name from the utility
-    const iconName = AgentTypeUtils.getAgentIcon(agentType);
-
-    // Return the appropriate icon component or fallback to PersonRegular
-    return <PersonRegular style={{
-      color: 'var(--colorPaletteBlueForeground2)',
-      fontSize: '16px'
-    }} />;
-  };
-
   if (!planData && !loading) {
     return <ContentNotFound subtitle="The requested page could not be found." />;
   }
 
   if (!planApprovalRequest) {
-    return null;
+    return (
+      <div style={{
+        width: '280px',
+        height: '100vh',
+        padding: '20px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderLeft: '1px solid var(--colorNeutralStroke1)',
+        color: 'var(--colorNeutralForeground3)',
+        fontSize: '14px',
+        fontStyle: 'italic'
+      }}>
+        No plan available
+      </div>
+    );
   }
 
-  // Parse plan steps - items ending with colons are headings, others are substeps
-  const parsePlanSteps = () => {
-    if (!planApprovalRequest.steps || planApprovalRequest.steps.length === 0) return [];
-
-    const result: Array<{ type: 'heading' | 'substep'; text: string }> = [];
-
-    planApprovalRequest.steps.forEach(step => {
-      const action = step.cleanAction || step.action || '';
-      const trimmedAction = action.trim();
-
-      if (trimmedAction) {
-        // Check if the step ends with a colon
-        if (trimmedAction.endsWith(':')) {
-          // This is a heading
-          result.push({ type: 'heading', text: trimmedAction });
-        } else {
-          // This is a substep
-          result.push({ type: 'substep', text: trimmedAction });
-        }
-      }
-    });
+  // Extract plan steps from the planApprovalRequest
+  const extractPlanSteps = () => {
+    if (!planApprovalRequest.steps || planApprovalRequest.steps.length === 0) {
+      return [];
+    }
 
-    return result;
+    return planApprovalRequest.steps.map((step, index) => {
+      const action = step.action || step.cleanAction || '';
+      const isHeading = action.trim().endsWith(':');
+      
+      return {
+        text: action.trim(),
+        isHeading,
+        key: `${index}-${action.substring(0, 20)}`
+      };
+    }).filter(step => step.text.length > 0);
   };
 
-  // Render Plan Section with scrolling
+  // Render Plan Section
   const renderPlanSection = () => {
-    const parsedSteps = parsePlanSteps();
+    const planSteps = extractPlanSteps();
 
     return (
       <div style={{
+        marginBottom: '24px',
         paddingBottom: '20px',
-        marginBottom: '20px',
-        borderBottom: '1px solid var(--colorNeutralStroke2)',
-        maxHeight: '50vh',
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column'
+        borderBottom: '1px solid var(--colorNeutralStroke1)'
       }}>
         <Body1 style={{
           marginBottom: '16px',
-          flexShrink: 0,
           fontSize: '14px',
           fontWeight: 600,
           color: 'var(--colorNeutralForeground1)'
         }}>
-          Plan
+          Plan Overview
         </Body1>
 
-        {/* Scrollable Plan Steps */}
-        <div style={{
-          flex: 1,
-          overflow: 'auto',
-          paddingRight: '8px'
-        }}>
+        {planSteps.length === 0 ? (
+          <div style={{
+            textAlign: 'center',
+            color: 'var(--colorNeutralForeground3)',
+            fontSize: '14px',
+            fontStyle: 'italic',
+            padding: '20px'
+          }}>
+            Plan is being generated...
+          </div>
+        ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-            {parsedSteps.map((step, index) => (
-              <div key={index}>
-                {step.type === 'heading' ? (
-                  // Heading - no arrow, just the text
+            {planSteps.map((step, index) => (
+              <div key={step.key} style={{ display: 'flex', flexDirection: 'column' }}>
+                {step.isHeading ? (
+                  // Heading - larger text, bold
                   <Body1 style={{
                     fontSize: '14px',
                     fontWeight: 600,
@@ -167,7 +126,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
               </div>
             ))}
           </div>
-        </div>
+        )}
       </div>
     );
   };
@@ -220,7 +179,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
                   justifyContent: 'center',
                   flexShrink: 0
                 }}>
-                  {getAgentIcon(agentName)}
+                  {getAgentIcon(agentName, planData, planApprovalRequest)}
                 </div>
 
                 {/* Agent Info - just name */}
@@ -230,7 +189,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
                     fontSize: '14px',
                     color: 'var(--colorNeutralForeground1)'
                   }}>
-                    {getAgentDisplayName(agentName)} Agent
+                    {getAgentDisplayNameWithSuffix(agentName)}
                   </Body1>
                 </div>
               </div>