Refactor plan approval logic to PlanPage

Moved plan approval and rejection logic from PlanChat to PlanPage for better separation of concerns. Updated PlanChat props to receive approval handlers and state from PlanPage. Improved error handling and UI state management for plan approval workflow. Minor UI adjustment in StreamingPlanState.

Author: Fr4nc3

src/frontend/src/components/content/PlanChat.tsx

@@ -43,7 +43,11 @@ interface SimplifiedPlanChatProps extends PlanChatProps {
   streamingMessageBuffer: string;
   agentMessages: AgentMessageData[];
   showProcessingPlanSpinner: boolean;
-  setShowProcessingPlanSpinner: (show: boolean) => void;
+  showApprovalButtons: boolean;
+  handleApprovePlan: () => Promise<void>;
+  handleRejectPlan: () => Promise<void>;
+  processingApproval: boolean;
+
 }
 
 const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
@@ -61,79 +65,23 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
   streamingMessageBuffer,
   agentMessages,
   showProcessingPlanSpinner,
-  setShowProcessingPlanSpinner
+  showApprovalButtons,
+  handleApprovePlan,
+  handleRejectPlan,
+  processingApproval
+
 
 }) => {
   const navigate = useNavigate();
 
   const { showToast, dismissToast } = useInlineToaster();
   // States
 
-  const [processingApproval, setProcessingApproval] = useState(false);
-
-  const [showApprovalButtons, setShowApprovalButtons] = useState(true);
-
-
-
-
-  // Listen for m_plan streaming
-
-
-  // Handle plan approval
-  const handleApprovePlan = useCallback(async () => {
-    if (!planApprovalRequest) return;
-
-    setProcessingApproval(true);
-    let id = showToast("Submitting Approval", "progress");
-    try {
-      await apiService.approvePlan({
-        m_plan_id: planApprovalRequest.id,
-        plan_id: planData?.plan?.id,
-        approved: true,
-        feedback: 'Plan approved by user'
-      });
-
-      dismissToast(id);
-      onPlanApproval?.(true);
-      setShowProcessingPlanSpinner?.(true);
-      setShowApprovalButtons(false);
-
-    } catch (error) {
-      dismissToast(id);
-      showToast("Failed to submit approval", "error");
-      console.error('❌ Failed to approve plan:', error);
-    } finally {
-      setProcessingApproval(false);
-    }
-  }, [planApprovalRequest, planData, onPlanApproval, setShowProcessingPlanSpinner]);
-
-  // Handle plan rejection  
-  const handleRejectPlan = useCallback(async () => {
-    if (!planApprovalRequest) return;
-
-    setProcessingApproval(true);
-    let id = showToast("Submitting cancellation", "progress");
-    try {
-      await apiService.approvePlan({
-        m_plan_id: planApprovalRequest.id,
-        plan_id: planData?.plan?.id,
-        approved: false,
-        feedback: 'Plan rejected by user'
-      });
-
-      dismissToast(id);
-      onPlanApproval?.(false);
-      navigate('/');
-
-    } catch (error) {
-      dismissToast(id);
-      showToast("Failed to submit cancellation", "error");
-      console.error('❌ Failed to reject plan:', error);
-      navigate('/');
-    } finally {
-      setProcessingApproval(false);
-    }
-  }, [planApprovalRequest, planData, onPlanApproval, navigate]);
+
+
+
+
+
 
   if (!planData)
     return (

src/frontend/src/components/content/streaming/StreamingPlanState.tsx

@@ -60,7 +60,8 @@ const renderPlanExecutionMessage = () => {
             backgroundColor: tokens.colorNeutralBackground2,
             borderRadius: tokens.borderRadiusMedium,
             border: `1px solid ${tokens.colorNeutralStroke1}`,
-            marginBottom: tokens.spacingVerticalXL
+            marginBottom: tokens.spacingVerticalXL,
+            marginTop: tokens.spacingVerticalXL
         }}>
             <Spinner size="small" />
             <span style={{

src/frontend/src/pages/HomePage.tsx

@@ -77,39 +77,14 @@ const HomePage: React.FC = () => {
                         }
                     }
 
-                } else {
-                    throw new Error('Invalid response from init_team endpoint');
                 }
 
             } catch (error) {
                 console.error('Error initializing team from backend:', error);
-                showToast("Team initialization failed, using fallback", "warning");
+                showToast("Team initialization failed", "warning");
 
                 // Fallback to the old client-side method
-                try {
-                    console.log('Using fallback: client-side team loading...');
-                    const teams = await TeamService.getUserTeams();
-                    if (teams.length > 0) {
-                        const hrTeam = teams.find(team => team.name === "Human Resources Team");
-                        const defaultTeam = hrTeam || teams[0];
-                        setSelectedTeam(defaultTeam);
-                        TeamService.storageTeam(defaultTeam);
 
-                        showToast(
-                            `${defaultTeam.name} team loaded (fallback mode)`,
-                            "info"
-                        );
-                    } else {
-                        console.log('No teams found - user needs to upload a team configuration');
-                        showToast(
-                            "No teams found. Please upload a team configuration.",
-                            "warning"
-                        );
-                    }
-                } catch (fallbackError) {
-                    console.error('Fallback team loading also failed:', fallbackError);
-                    showToast("Failed to load team configuration", "error");
-                }
             } finally {
                 setIsLoadingTeam(false);
             }

src/frontend/src/pages/PlanPage.tsx

@@ -45,11 +45,12 @@ const PlanPage: React.FC = () => {
     const [submittingChatDisableInput, setSubmittingChatDisableInput] = useState<boolean>(true);
     const [error, setError] = useState<Error | null>(null);
     const [clarificationMessage, setClarificationMessage] = useState<ParsedUserClarification | null>(null);
-
+    const [processingApproval, setProcessingApproval] = useState(false);
     const [planApprovalRequest, setPlanApprovalRequest] = useState<MPlanData | null>(null);
     const [reloadLeftList, setReloadLeftList] = useState(true);
     const [waitingForPlan, setWaitingForPlan] = useState(true);
     const [showProcessingPlanSpinner, setShowProcessingPlanSpinner] = useState<boolean>(false);
+    const [showApprovalButtons, setShowApprovalButtons] = useState<boolean>(true);
     // WebSocket connection state
     const [wsConnected, setWsConnected] = useState(false);
     const [streamingMessages, setStreamingMessages] = useState<StreamingPlanUpdate[]>([]);
@@ -362,6 +363,60 @@ const PlanPage: React.FC = () => {
         loadPlanDataRef.current = loadPlanData;
     }, [loadPlanData]);
 
+    // Handle plan approval
+    const handleApprovePlan = useCallback(async () => {
+        if (!planApprovalRequest) return;
+
+        setProcessingApproval(true);
+        let id = showToast("Submitting Approval", "progress");
+        try {
+            await apiService.approvePlan({
+                m_plan_id: planApprovalRequest.id,
+                plan_id: planData?.plan?.id,
+                approved: true,
+                feedback: 'Plan approved by user'
+            });
+
+            dismissToast(id);
+            setShowProcessingPlanSpinner(true);
+            setShowApprovalButtons(false);
+
+        } catch (error) {
+            dismissToast(id);
+            showToast("Failed to submit approval", "error");
+            console.error('❌ Failed to approve plan:', error);
+        } finally {
+            setProcessingApproval(false);
+        }
+    }, [planApprovalRequest, planData, setProcessingApproval]);
+
+    // Handle plan rejection  
+    const handleRejectPlan = useCallback(async () => {
+        if (!planApprovalRequest) return;
+
+        setProcessingApproval(true);
+        let id = showToast("Submitting cancellation", "progress");
+        try {
+            await apiService.approvePlan({
+                m_plan_id: planApprovalRequest.id,
+                plan_id: planData?.plan?.id,
+                approved: false,
+                feedback: 'Plan rejected by user'
+            });
+
+            dismissToast(id);
+
+            navigate('/');
+
+        } catch (error) {
+            dismissToast(id);
+            showToast("Failed to submit cancellation", "error");
+            console.error('❌ Failed to reject plan:', error);
+            navigate('/');
+        } finally {
+            setProcessingApproval(false);
+        }
+    }, [planApprovalRequest, planData, navigate, setProcessingApproval]);
     // Chat submission handler - updated for v3 backend compatibility
     const handleOnchatSubmit = useCallback(
         async (chatInput: string) => {
@@ -518,13 +573,16 @@ const PlanPage: React.FC = () => {
                                 streamingMessages={streamingMessages}
                                 wsConnected={wsConnected}
                                 onPlanApproval={(approved) => setPlanApproved(approved)}
-                                setShowProcessingPlanSpinner={(showProcessingPlanSpinner) => setShowProcessingPlanSpinner(showProcessingPlanSpinner)}
                                 planApprovalRequest={planApprovalRequest}
                                 waitingForPlan={waitingForPlan}
                                 messagesContainerRef={messagesContainerRef}
                                 streamingMessageBuffer={streamingMessageBuffer}
                                 agentMessages={agentMessages}
                                 showProcessingPlanSpinner={showProcessingPlanSpinner}
+                                showApprovalButtons={showApprovalButtons}
+                                processingApproval={processingApproval}
+                                handleApprovePlan={handleApprovePlan}
+                                handleRejectPlan={handleRejectPlan}
 
                             />
                         </>