Refactor plan approval state management

Fr4nc3 · Fr4nc3 · commit 7a8ba1008199 · 2025-09-07T19:23:03.000-04:00
Moves plan approval request and waiting state management from PlanChat and PlanPanelRight into PlanPage, passing them as props. This centralizes WebSocket handling and plan state, simplifies component logic, and ensures consistent plan approval UI updates across components.
diff --git a/src/frontend/src/components/content/PlanChat.tsx b/src/frontend/src/components/content/PlanChat.tsx
@@ -34,6 +34,9 @@ import PlanChatBody from "./PlanChatBody";
 interface SimplifiedPlanChatProps extends PlanChatProps {
   onPlanReceived?: (planData: MPlanData) => void;
   initialTask?: string;
+  planApprovalRequest: MPlanData | null;
+  waitingForPlan: boolean;
+  messagesContainerRef: React.RefObject<HTMLDivElement>;
 }
 
 const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
@@ -45,67 +48,25 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
   onPlanApproval,
   onPlanReceived,
   initialTask,
+  planApprovalRequest,
+  waitingForPlan,
+  messagesContainerRef
+
 }) => {
   const navigate = useNavigate();
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
   const { showToast, dismissToast } = useInlineToaster();
   // States
-  const [planApprovalRequest, setPlanApprovalRequest] = useState<MPlanData | null>(null);
+
   const [processingApproval, setProcessingApproval] = useState(false);
-  const [waitingForPlan, setWaitingForPlan] = useState(true);
-  const [userFeedback, setUserFeedback] = useState('');
-  const [showFeedbackInput, setShowFeedbackInput] = useState(false);
+
+  const [showApprovalButtons, setShowApprovalButtons] = useState(true);
+
 
 
-  // Auto-scroll helper
-  const scrollToBottom = useCallback(() => {
-    setTimeout(() => {
-      if (messagesContainerRef.current) {
-        messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
-      }
-    }, 100);
-  }, []);
 
   // Listen for m_plan streaming
-  useEffect(() => {
-    const unsubscribe = webSocketService.on(WebsocketMessageType.PLAN_APPROVAL_REQUEST, (approvalRequest: any) => {
-      console.log('📋 Plan received:', approvalRequest);
-
-      let mPlanData: MPlanData | null = null;
-
-      // Handle the different message structures
-      if (approvalRequest.parsedData) {
-        // Direct parsedData property
-        mPlanData = approvalRequest.parsedData;
-      } else if (approvalRequest.data && typeof approvalRequest.data === 'object') {
-        // Data property with nested object
-        if (approvalRequest.data.parsedData) {
-          mPlanData = approvalRequest.data.parsedData;
-        } else {
-          // Try to parse the data object directly
-          mPlanData = approvalRequest.data;
-        }
-      } else if (approvalRequest.rawData) {
-        // Parse the raw data string
-        mPlanData = PlanDataService.parsePlanApprovalRequest(approvalRequest.rawData);
-      } else {
-        // Try to parse the entire object
-        mPlanData = PlanDataService.parsePlanApprovalRequest(approvalRequest);
-      }
-
-      if (mPlanData) {
-        console.log('✅ Parsed plan data:', mPlanData);
-        setPlanApprovalRequest(mPlanData);
-        setWaitingForPlan(false);
-        onPlanReceived?.(mPlanData);
-        scrollToBottom();
-      } else {
-        console.error('❌ Failed to parse plan data', approvalRequest);
-      }
-    });
-
-    return () => unsubscribe();
-  }, [onPlanReceived, scrollToBottom]);
+
 
   // Handle plan approval
   const handleApprovePlan = useCallback(async () => {
@@ -118,12 +79,12 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
         m_plan_id: planApprovalRequest.id,
         plan_id: planData?.plan?.id,
         approved: true,
-        feedback: userFeedback || 'Plan approved by user'
+        feedback: 'Plan approved by user'
       });
 
       dismissToast(id);
-      setShowFeedbackInput(false);
       onPlanApproval?.(true);
+      setShowApprovalButtons(false);
 
     } catch (error) {
       dismissToast(id);
@@ -132,7 +93,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
     } finally {
       setProcessingApproval(false);
     }
-  }, [planApprovalRequest, planData, userFeedback, onPlanApproval]);
+  }, [planApprovalRequest, planData, onPlanApproval]);
 
   // Handle plan rejection  
   const handleRejectPlan = useCallback(async () => {
@@ -145,7 +106,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
         m_plan_id: planApprovalRequest.id,
         plan_id: planData?.plan?.id,
         approved: false,
-        feedback: userFeedback || 'Plan rejected by user'
+        feedback: 'Plan rejected by user'
       });
 
       dismissToast(id);
@@ -192,7 +153,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
         {renderThinkingState(waitingForPlan)}
 
         {/* Plan response with all information */}
-        {renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval)}
+        {renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval, showApprovalButtons)}
       </div>
 
       {/* Chat Input - only show if no plan is waiting for approval */}
diff --git a/src/frontend/src/components/content/PlanPanelRight.tsx b/src/frontend/src/components/content/PlanPanelRight.tsx
@@ -28,6 +28,8 @@ interface PlanPanelRightProps {
   planApproved: boolean;
   onPlanApproval?: (approved: boolean) => void;
   wsConnected?: boolean;
+  planApprovalRequest: MPlanData | null;
+
 }
 
 interface GroupedMessage {
@@ -56,9 +58,9 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
   streamingMessages = [],
   planApproved,
   wsConnected = false,
+  planApprovalRequest
 }) => {
   const [groupedStreamingMessages, setGroupedStreamingMessages] = useState<GroupedMessage[]>([]);
-  const [planApprovalRequest, setPlanApprovalRequest] = useState<MPlanData | null>(null);
   const [hasStreamingStarted, setHasStreamingStarted] = useState(false);
 
   // Helper function to get clean agent display name
@@ -107,24 +109,7 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
     }
   }, [streamingMessages, hasStreamingStarted]);
 
-  // Add WebSocket listener for plan approval requests - but only store, don't display until streaming starts
-  useEffect(() => {
-    const unsubscribePlanApproval = webSocketService.onPlanApprovalRequest((approvalRequest) => {
-      if (approvalRequest.parsedData) {
-        const parsedData = PlanDataService.parsePlanApprovalRequest(approvalRequest);
-        if (parsedData) {
-          console.log('📥 Right panel received plan approval request:', parsedData);
-          setPlanApprovalRequest(parsedData);
-          // Reset states when new plan comes in
-          setHasStreamingStarted(false);
-        }
-      }
-    });
 
-    return () => {
-      unsubscribePlanApproval();
-    };
-  }, []);
 
   // Group streaming messages by agent 
   const groupStreamingMessages = useCallback((messages: StreamingPlanUpdate[]): GroupedMessage[] => {
@@ -170,7 +155,7 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
   }, [streamingMessages, groupStreamingMessages]);
 
   // ✅ NEW: Get comprehensive agent status combining planned and streaming agents
-  const getAgentStatus = useCallback((): AgentStatus[] => {
+  const getAgentStatus = useCallback((planApprovalRequest: MPlanData | null): AgentStatus[] => {
     const agentStatusMap = new Map<string, AgentStatus>();
 
     // Add planned agents from the plan approval request
@@ -249,21 +234,7 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
 
   // ✅ ENHANCED: Show waiting message only when we don't have plan approval request
   if (!planApprovalRequest) {
-    return (
-      <div style={{
-        width: '280px',
-        height: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        color: 'var(--colorNeutralForeground3)',
-        fontSize: '14px',
-        padding: '20px',
-        textAlign: 'center'
-      }}>
-        Waiting for plan creation...
-      </div>
-    );
+    return null;
   }
 
   // Render Plan Section - show once we have plan approval request
@@ -354,7 +325,7 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
 
   // ✅ ENHANCED: Render Agents Section - show planned agents immediately, update with streaming status
   const renderAgentsSection = () => {
-    const agents = getAgentStatus();
+    const agents = getAgentStatus(planApprovalRequest);
 
     return (
       <div style={{
diff --git a/src/frontend/src/components/content/streaming/StreamingPlanResponse.tsx b/src/frontend/src/components/content/streaming/StreamingPlanResponse.tsx
@@ -4,7 +4,7 @@ import { BotRegular, CheckmarkRegular, DismissRegular } from "@fluentui/react-ic
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 // Render the complete plan with all information
-const renderPlanResponse = (planApprovalRequest: MPlanData | null, handleApprovePlan: () => void, handleRejectPlan: () => void, processingApproval: boolean,) => {
+const renderPlanResponse = (planApprovalRequest: MPlanData | null, handleApprovePlan: () => void, handleRejectPlan: () => void, processingApproval: boolean, showApprovalButtons: boolean) => {
     if (!planApprovalRequest) return null;
 
     return (
@@ -55,7 +55,7 @@ const renderPlanResponse = (planApprovalRequest: MPlanData | null, handleApprove
                     }}>
                         <span>Plan ID: {planApprovalRequest.id}</span>
                         <Tag size="extra-small" appearance="outline">
-                            {planApprovalRequest.status?.replace(/^.*'([^']*)'.*$/, '$1') || planApprovalRequest.status || 'PENDING_APPROVAL'}
+                            {planApprovalRequest.status?.replace(/^.*'([^']*)'.*$/, '$1') || planApprovalRequest.status || 'Pending'}
                         </Tag>
                     </div>
                 </div>
@@ -203,46 +203,49 @@ const renderPlanResponse = (planApprovalRequest: MPlanData | null, handleApprove
 
 
                 {/* Action Buttons - Separate section */}
-                <div style={{
-                    display: 'flex',
-                    gap: '12px',
-                    alignItems: 'center',
-                    padding: '20px',
-                    backgroundColor: 'var(--colorNeutralBackground2)',
-                    borderRadius: '12px',
-                    border: '1px solid var(--colorNeutralStroke2)',
-                    marginTop: '20px'
-                }}>
+                {showApprovalButtons && <>
                     <div style={{
-                        flex: 1,
-                        fontSize: '14px',
-                        color: 'var(--colorNeutralForeground2)'
+                        display: 'flex',
+                        gap: '12px',
+                        alignItems: 'center',
+                        padding: '20px',
+                        backgroundColor: 'var(--colorNeutralBackground2)',
+                        borderRadius: '12px',
+                        border: '1px solid var(--colorNeutralStroke2)',
+                        marginTop: '20px'
                     }}>
-                        <span>Ready for approval</span>
+                        <div style={{
+                            flex: 1,
+                            fontSize: '14px',
+                            color: 'var(--colorNeutralForeground2)'
+                        }}>
+                            <span>Ready for approval</span>
 
-                    </div>
+                        </div>
 
-                    <Button
-                        appearance="primary"
-                        icon={processingApproval ? <Spinner size="extra-tiny" /> : <CheckmarkRegular />}
-                        onClick={handleApprovePlan}
-                        disabled={processingApproval}
-                        size="medium"
-                        style={{ minWidth: '140px' }}
-                    >
-                        {processingApproval ? 'Processing...' : 'Approve'}
-                    </Button>
-                    <Button
-                        appearance="outline"
-                        icon={<DismissRegular />}
-                        onClick={handleRejectPlan}
-                        disabled={processingApproval}
-                        size="medium"
-                        style={{ minWidth: '100px' }}
-                    >
-                        Cancel
-                    </Button>
-                </div>
+                        <Button
+                            appearance="primary"
+                            icon={processingApproval ? <Spinner size="extra-tiny" /> : <CheckmarkRegular />}
+                            onClick={handleApprovePlan}
+                            disabled={processingApproval}
+                            size="medium"
+                            style={{ minWidth: '140px' }}
+                        >
+                            {processingApproval ? 'Processing...' : 'Approve'}
+                        </Button>
+                        <Button
+                            appearance="outline"
+                            icon={<DismissRegular />}
+                            onClick={handleRejectPlan}
+                            disabled={processingApproval}
+                            size="medium"
+                            style={{ minWidth: '100px' }}
+                        >
+                            Cancel
+                        </Button>
+
+                    </div>
+                </>}
             </div>
         </div>
     );
diff --git a/src/frontend/src/pages/PlanPage.tsx b/src/frontend/src/pages/PlanPage.tsx
