fix: brought back the testing visualisation for workflows

Author: MichielMAnalytics

client/src/components/SidePanel/WorkflowBuilder/WorkflowBuilder.tsx

@@ -88,21 +88,21 @@ const WorkflowBuilder: React.FC<WorkflowBuilderProps> = ({
     },
   );
 
+  // Initialize state with workflow data
+  const workflowState = useWorkflowState({
+    currentWorkflowData,
+    userTimezone: timezone,
+  });
+
   // Query the latest execution result for step outputs
   const { data: latestExecutionData, refetch: refetchLatestExecution } =
     useLatestWorkflowExecutionQuery(currentWorkflowId || '', {
       enabled: !!currentWorkflowId,
       refetchOnWindowFocus: false,
-      refetchInterval: false,
-      staleTime: 10000,
+      refetchInterval: workflowState.isTesting ? 1000 : false, // Poll every 1s during testing
+      staleTime: workflowState.isTesting ? 0 : 10000, // Fresh data during testing
     });
 
-  // Initialize state with workflow data
-  const workflowState = useWorkflowState({
-    currentWorkflowData,
-    userTimezone: timezone,
-  });
-
   // Fetch triggers for selected app - MOVED HERE so we can access workflowState
   const {
     data: appTriggersData,
@@ -186,9 +186,21 @@ const WorkflowBuilder: React.FC<WorkflowBuilderProps> = ({
               setTestingWorkflows((prev) => new Set(prev).add(testWorkflowId));
             }
           },
-          onStepUpdate: (testWorkflowId) => {
+          onStepUpdate: (testWorkflowId, stepData) => {
             if (testWorkflowId === currentWorkflowId) {
-              // Handle step updates
+              // Map step name to step ID
+              const step = workflowState.steps.find((s) => s.name === stepData.stepName);
+              
+              if (step) {
+                if (stepData.status === 'running') {
+                  workflowState.setCurrentRunningStepId(step.id);
+                } else if (stepData.status === 'completed') {
+                  workflowState.setCurrentRunningStepId(null);
+                  workflowState.setCompletedStepIds((prev) => new Set(prev).add(step.id));
+                } else if (stepData.status === 'failed') {
+                  workflowState.setCurrentRunningStepId(null);
+                }
+              }
             }
           },
           onTestComplete: (testWorkflowId) => {
@@ -438,11 +450,12 @@ const WorkflowBuilder: React.FC<WorkflowBuilderProps> = ({
     });
   };
 
-  // Get step status for styling
+  // Get step status for styling - restored original logic
   const getStepStatus = (stepId: string) => {
     if (!workflowState.isTesting) return 'idle';
     if (workflowState.completedStepIds.has(stepId)) return 'completed';
 
+    // Check if this step is currently running by matching name from execution data
     const step = workflowState.steps.find((s) => s.id === stepId);
     const actualExecutionData = latestExecutionData as any;
     const currentExecStep = actualExecutionData?.steps?.find((s: any) => s.name === step?.name);

client/src/hooks/Chat/useChatHelpers.ts

@@ -518,6 +518,28 @@ export default function useChatHelpers(index = 0, paramId?: string) {
           queryClient.invalidateQueries([QueryKeys.schedulerTasks]);
         } else if (data.type === 'task_status_update' || data.type === 'task_notification') {
           console.log('[SchedulerSSE] 📋 Processing task status update:', data);
+          
+          // Check if this is a workflow task and convert to workflow notification
+          if (data.taskId && data.taskId.startsWith('workflow_')) {
+            const workflowNotificationData = {
+              type: 'workflow_status_update',
+              workflowId: data.taskId,
+              notificationType: data.notificationType === 'started' ? 'test_started' : 
+                              data.notificationType === 'completed' ? 'execution_completed' :
+                              data.notificationType === 'failed' ? 'execution_failed' : 
+                              data.notificationType,
+              details: data.details,
+              timestamp: data.timestamp,
+              taskName: data.taskName
+            };
+            
+            // Dispatch as workflow notification
+            const workflowEvent = new CustomEvent('workflowNotification', { 
+              detail: workflowNotificationData 
+            });
+            window.dispatchEvent(workflowEvent);
+          }
+          
           // Handle task status updates (started, failed, cancelled, etc.)
           // These don't necessarily create new messages but do update task status
           queryClient.invalidateQueries([QueryKeys.schedulerTasks]);