Merge pull request #503 from microsoft/macae-v3-fr-dev-92

Macae v3 fr dev 92

Author: Fr4nc3

src/frontend/src/api/config.tsx

@@ -131,51 +131,6 @@ export function headerBuilder(headers?: Record<string, string>): Record<string,
     };
 }
 
-/**
- * Initialize team on the backend - takes about 20 seconds
- * @returns Promise with team initialization response
- */
-// export async function initializeTeam(): Promise<{
-//     status: string;
-//     team_id: string;
-// }> {
-//     const apiUrl = getApiUrl();
-//     if (!apiUrl) {
-//         throw new Error('API URL not configured');
-//     }
-
-//     const headers = headerBuilder({
-//         'Content-Type': 'application/json',
-//     });
-
-//     console.log('initializeTeam: Starting team initialization...');
-
-//     try {
-//         const response = await fetch(`${apiUrl}/init_team`, {
-//             method: 'GET',
-//             headers,
-//         });
-
-//         if (!response.ok) {
-//             const errorText = await response.text();
-//             throw new Error(errorText || `HTTP error! status: ${response.status}`);
-//         }
-
-//         const data = await response.json();
-//         console.log('initializeTeam: Team initialization completed:', data);
-
-//         // Validate the expected response format
-//         if (data.status !== 'Request started successfully' || !data.team_id) {
-//             throw new Error('Invalid response format from init_team endpoint');
-//         }
-
-//         return data;
-//     } catch (error) {
-//         console.error('initializeTeam: Error initializing team:', error);
-//         throw error;
-//     }
-// }
-
 export const toBoolean = (value: any): boolean => {
     if (typeof value !== 'string') {
         return false;
@@ -192,5 +147,4 @@ export default {
     config,
     USER_ID,
     API_URL,
-    //initializeTeam 
 };

src/frontend/src/pages/HomePage.tsx

@@ -1,14 +1,8 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-    Button,
     Spinner
 } from '@fluentui/react-components';
-import {
-    Add20Regular,
-    ErrorCircle20Regular,
-    Sparkle20Filled
-} from '@fluentui/react-icons';
 import '../styles/PlanPage.css';
 import CoralShellColumn from '../coral/components/Layout/CoralShellColumn';
 import CoralShellRow from '../coral/components/Layout/CoralShellRow';
@@ -17,7 +11,6 @@ import HomeInput from '@/components/content/HomeInput';
 import { NewTaskService } from '../services/NewTaskService';
 import PlanPanelLeft from '@/components/content/PlanPanelLeft';
 import ContentToolbar from '@/coral/components/Content/ContentToolbar';
-import { TaskService } from '../services/TaskService';
 import { TeamConfig } from '../models/Team';
 import { TeamService } from '../services/TeamService';
 import InlineToaster, { useInlineToaster } from "../components/toast/InlineToaster";
@@ -30,16 +23,15 @@ const HomePage: React.FC = () => {
     const navigate = useNavigate();
     const { showToast, dismissToast } = useInlineToaster();
     const [selectedTeam, setSelectedTeam] = useState<TeamConfig | null>(null);
-    const [isLoadingTeam, setIsLoadingTeam] = useState(true);
-
+    const [isLoadingTeam, setIsLoadingTeam] = useState<boolean>(true);
+    const [reloadLeftList, setReloadLeftList] = useState<boolean>(true);
 
     useEffect(() => {
         const initTeam = async () => {
             setIsLoadingTeam(true);
 
             try {
                 console.log('Initializing team from backend...');
-
                 // Call the backend init_team endpoint (takes ~20 seconds)
                 const initResponse = await TeamService.initializeTeam();
 
@@ -91,7 +83,7 @@ const HomePage: React.FC = () => {
         };
 
         initTeam();
-    }, []);
+    }, [setIsLoadingTeam, showToast, navigate, setReloadLeftList]);
 
     /**
     * Handle new task creation from the "New task" button
@@ -112,6 +104,7 @@ const HomePage: React.FC = () => {
                 // TODO REFRACTOR THIS CODE 
                 setIsLoadingTeam(true);
                 const initResponse = await TeamService.initializeTeam(true);
+                setReloadLeftList(true)
                 if (initResponse.data?.status === 'Request started successfully' && initResponse.data?.team_id) {
                     console.log('Team initialization completed:', initResponse.data?.team_id);
 
@@ -152,7 +145,7 @@ const HomePage: React.FC = () => {
                 "info"
             );
         }
-    }, [showToast]);
+    }, [showToast, setReloadLeftList]);
 
 
     /**
@@ -187,6 +180,7 @@ const HomePage: React.FC = () => {
             <CoralShellColumn>
                 <CoralShellRow>
                     <PlanPanelLeft
+                        reloadTasks={reloadLeftList}
                         onNewTaskButton={handleNewTaskButton}
                         onTeamSelect={handleTeamSelect}
                         onTeamUpload={handleTeamUpload}

src/frontend/src/pages/PlanPage.tsx

@@ -65,9 +65,6 @@ const PlanPage: React.FC = () => {
     const processAgentMessage = useCallback((agentMessageData: AgentMessageData, planData: ProcessedPlanData, is_final: boolean = false) => {
 
         // Persist / forward to backend (fire-and-forget with logging)
-        console.log(planData)
-        console.log(is_final)
-        console.log(agentMessageData)
         const agentMessageResponse = PlanDataService.createAgentMessageResponse(agentMessageData, planData, is_final);
         console.log('📤 Persisting agent message:', agentMessageResponse);
         void apiService.sendAgentMessage(agentMessageResponse)
@@ -262,45 +259,6 @@ const PlanPage: React.FC = () => {
 
         return () => unsubscribe();
     }, [scrollToBottom, planData, processAgentMessage]); //onPlanReceived, scrollToBottom
-    // Create loadPlanData function with useCallback to memoize it
-    const loadPlanData = useCallback(
-        async (useCache = true): Promise<ProcessedPlanData | null> => {
-            if (!planId) return null;
-
-            setLoading(true);
-            try {
-
-                let planResult: ProcessedPlanData | null = null;
-                console.log("Fetching plan with ID:", planId);
-                planResult = await PlanDataService.fetchPlanData(planId, useCache);
-                console.log("Plan data fetched:", planResult);
-                if (planResult?.plan?.overall_status === PlanStatus.IN_PROGRESS) {
-                    setShowApprovalButtons(true);
-
-                } else {
-                    setShowApprovalButtons(false);
-                    setWaitingForPlan(false);
-                }
-                if (planResult?.plan?.overall_status !== PlanStatus.COMPLETED) {
-                    setContinueWithWebsocketFlow(true);
-                }
-                if (planResult?.messages) {
-                    setAgentMessages(planResult.messages);
-                }
-                if (planResult?.mplan) {
-                    setPlanApprovalRequest(planResult.mplan);
-                }
-                setPlanData(planResult);
-                return planResult;
-            } catch (err) {
-                console.log("Failed to load plan data:", err);
-                return null;
-            } finally {
-                setLoading(false);
-            }
-        },
-        [planId, navigate]
-    );
 
     // Loading message rotation effect
     useEffect(() => {
@@ -376,7 +334,47 @@ const PlanPage: React.FC = () => {
                 webSocketService.disconnect();
             };
         }
-    }, [planId, loading, continueWithWebsocketFlow, loadPlanData, planData]);
+    }, [planId, loading, continueWithWebsocketFlow]);
+
+    // Create loadPlanData function with useCallback to memoize it
+    const loadPlanData = useCallback(
+        async (useCache = true): Promise<ProcessedPlanData | null> => {
+            if (!planId) return null;
+
+            setLoading(true);
+            try {
+
+                let planResult: ProcessedPlanData | null = null;
+                console.log("Fetching plan with ID:", planId);
+                planResult = await PlanDataService.fetchPlanData(planId, useCache);
+                console.log("Plan data fetched:", planResult);
+                if (planResult?.plan?.overall_status === PlanStatus.IN_PROGRESS) {
+                    setShowApprovalButtons(true);
+
+                } else {
+                    setShowApprovalButtons(false);
+                    setWaitingForPlan(false);
+                }
+                if (planResult?.plan?.overall_status !== PlanStatus.COMPLETED) {
+                    setContinueWithWebsocketFlow(true);
+                }
+                if (planResult?.messages) {
+                    setAgentMessages(planResult.messages);
+                }
+                if (planResult?.mplan) {
+                    setPlanApprovalRequest(planResult.mplan);
+                }
+                setPlanData(planResult);
+                return planResult;
+            } catch (err) {
+                console.log("Failed to load plan data:", err);
+                return null;
+            } finally {
+                setLoading(false);
+            }
+        },
+        [planId, navigate]
+    );
 
 
     // Handle plan approval