Merge pull request #560 from microsoft/psl-bug-23829

fix: Code change to load newly created task on left side panel (fix for bug 23829).

Author: Roopan-Microsoft

src/frontend/src/components/common/PlanCancellationDialog.tsx

@@ -8,6 +8,8 @@ import {
   DialogBody,
   DialogActions,
   Button,
+  DialogOpenChangeEvent,
+  DialogOpenChangeData
 } from '@fluentui/react-components';
 import { Warning20Regular } from '@fluentui/react-icons';
 import "../../styles/Panel.css";
@@ -29,7 +31,7 @@ const PlanCancellationDialog: React.FC<PlanCancellationDialogProps> = ({
   loading = false
 }) => {
   return (
-    <Dialog open={isOpen} onOpenChange={(_, data) => !data.open && onCancel()}>
+    <Dialog open={isOpen} onOpenChange={(_: DialogOpenChangeEvent, data: DialogOpenChangeData) => !data.open && onCancel()}>
       <DialogSurface>
         <DialogBody>
           <DialogTitle>

src/frontend/src/components/common/TeamSelector.tsx

@@ -19,7 +19,13 @@ import {
   RadioGroup,
   Tab,
   TabList,
-  Tooltip
+  Tooltip,
+  DialogOpenChangeEvent,
+  DialogOpenChangeData,
+  TabValue,
+  SelectTabEvent,
+  SelectTabData,
+  InputOnChangeData
 } from '@fluentui/react-components';
 import {
   ChevronUpDown16Regular,
@@ -474,15 +480,15 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
               size="small"
               disabled={true}
               className={`${styles.moreButton} ${styles.moreButtonDisabled || ''}`}
-              onClick={(e) => e.stopPropagation()}
+              onClick={(e: React.MouseEvent) => e.stopPropagation()}
             />
           </Tooltip>
         ) : (
           <Button
             icon={<MoreHorizontal20Regular />}
             appearance="subtle"
             size="small"
-            onClick={(e) => handleDeleteTeam(team, e)}
+            onClick={(e: React.MouseEvent) => handleDeleteTeam(team, e)}
             className={styles.moreButton}
           />
         )}
@@ -492,7 +498,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
 
   return (
     <>
-      <Dialog open={isOpen} onOpenChange={(event, data) => handleOpenChange(data.open)}>
+      <Dialog open={isOpen} onOpenChange={(event: DialogOpenChangeEvent, data: DialogOpenChangeData) => handleOpenChange(data.open)}>
         <DialogTrigger disableButtonEnhancement>
           <Button
             appearance="subtle"
@@ -527,7 +533,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
                 <TabList
                   className={styles.tabList}
                   selectedValue={activeTab}
-                  onTabSelect={(event, data) => setActiveTab(data.value as string)}
+                  onTabSelect={(event: SelectTabEvent, data: SelectTabData) => setActiveTab(data.value as string)}
                 >
                   <Tab
                     value="teams"
@@ -559,7 +565,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
                           className={styles.searchInput}
                           placeholder="Search teams..."
                           value={searchQuery}
-                          onChange={(e, data) => {
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
                             console.log('Search changed:', data.value);
                             setSearchQuery(data.value || '');
                           }}
@@ -716,7 +722,7 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({
         </DialogSurface>
       </Dialog>
 
-      <Dialog open={deleteConfirmOpen} onOpenChange={(event, data) => setDeleteConfirmOpen(data.open)}>
+      <Dialog open={deleteConfirmOpen} onOpenChange={(event: DialogOpenChangeEvent, data: DialogOpenChangeData) => setDeleteConfirmOpen(data.open)}>
         <DialogSurface className={styles.deleteDialogSurface}>
           <DialogContent className={styles.deleteDialogContent}>
             <DialogBody className={styles.deleteDialogBody}>

src/frontend/src/components/content/PlanPanelLeft.tsx

@@ -60,17 +60,27 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
       console.log("Loading plans, forceRefresh:", forceRefresh);
       setPlansLoading(true);
       setPlansError(null);
-      const plansData = await apiService.getPlans(undefined, forceRefresh);
+      const plansData = await apiService.getPlans(undefined, !forceRefresh); // Invert forceRefresh for useCache
       setPlans(plansData);
+      
+      // Reset the reload flag after successful load
+      if (forceRefresh && restReload) {
+        restReload();
+      }
     } catch (error) {
       console.log("Failed to load plans:", error);
       setPlansError(
         error instanceof Error ? error : new Error("Failed to load plans")
       );
+      
+      // Reset the reload flag even on error to prevent infinite loops
+      if (forceRefresh && restReload) {
+        restReload();
+      }
     } finally {
       setPlansLoading(false);
     }
-  }, []);
+  }, [restReload]);
 
 
   // Fetch plans
@@ -85,7 +95,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
   useEffect(() => {
     console.log("Reload tasks changed:", reloadTasks);
     if (reloadTasks) {
-      loadPlansData();
+      loadPlansData(true); // Force refresh when reloadTasks is true
     }
   }, [loadPlansData, setUserInfo, reloadTasks]);
   useEffect(() => {

src/frontend/src/coral/components/PromptCard.tsx

@@ -37,14 +37,14 @@ const PromptCard: React.FC<PromptCardProps> = ({
         transition: "background-color 0.2s ease-in-out",
       }}
       // 🧠 Only apply hover if not disabled
-      onMouseOver={(e) => {
+      onMouseOver={(e: React.MouseEvent<HTMLDivElement>) => {
         if (!disabled) {
           e.currentTarget.style.backgroundColor =
             "var(--colorNeutralBackground3Hover)";
             e.currentTarget.style.border = "1px solid var(--colorNeutralStroke1)"; // subtle shadow on hover
         }
       }}
-      onMouseOut={(e) => {
+      onMouseOut={(e: React.MouseEvent<HTMLDivElement>) => {
         if (!disabled) {
           e.currentTarget.style.backgroundColor =
             "var(--colorNeutralBackground3)";

src/frontend/src/pages/PlanPage.tsx

@@ -132,19 +132,36 @@ const PlanPage: React.FC = () => {
         // Persist / forward to backend (fire-and-forget with logging)
         const agentMessageResponse = PlanDataService.createAgentMessageResponse(agentMessageData, planData, is_final, streaming_message);
         console.log('📤 Persisting agent message:', agentMessageResponse);
-        void apiService.sendAgentMessage(agentMessageResponse)
+        const sendPromise = apiService.sendAgentMessage(agentMessageResponse)
             .then(saved => {
                 console.log('[agent_message][persisted]', {
                     agent: agentMessageData.agent,
                     type: agentMessageData.agent_type,
                     ts: agentMessageData.timestamp
                 });
+                
+                // If this is a final message, refresh the task list after successful persistence
+                if (is_final) {
+                    // Single refresh with a delay to ensure backend processing is complete
+                    setTimeout(() => {
+                        setReloadLeftList(true);
+                    }, 1000);
+                }
             })
             .catch(err => {
                 console.warn('[agent_message][persist-failed]', err);
+                // Even if persistence fails, still refresh the task list for final messages
+                // The local plan data has been updated, so the UI should reflect that
+                if (is_final) {
+                    setTimeout(() => {
+                        setReloadLeftList(true);
+                    }, 1000);
+                }
             });
 
-    }, []);
+        return sendPromise;
+
+    }, [setReloadLeftList]);
 
     const resetPlanVariables = useCallback(() => {
         setInput("");
@@ -335,20 +352,17 @@ const PlanPage: React.FC = () => {
                     setPlanData({ ...planData });
                 }
 
+                // Wait for the agent message to be processed and persisted
+                // The processAgentMessage function will handle refreshing the task list
                 processAgentMessage(agentMessageData, planData, is_final, streamingMessageBuffer);
 
-                setTimeout(() => {
-                    console.log('✅ Plan completed, refreshing left list');
-                    setReloadLeftList(true);
-                }, 1000);
-
             }
 
 
         });
 
         return () => unsubscribe();
-    }, [scrollToBottom, planData, processAgentMessage, streamingMessageBuffer, setSelectedTeam, setReloadLeftList]);
+    }, [scrollToBottom, planData, processAgentMessage, streamingMessageBuffer, setSelectedTeam]);
 
     //WebsocketMessageType.AGENT_MESSAGE
     useEffect(() => {