Update ProgressModal.tsx

frontend/src/components/common/ProgressModal.tsx

@@ -192,10 +192,15 @@ export default function ProgressModal({
   functionId,
   stepLogs = [],
 }: ProgressModalProps) {
-  const hasAutoClosedRef = useRef(false);
   // Track which steps are visually completed (with delay)
   const [visuallyCompletedSteps, setVisuallyCompletedSteps] = React.useState<Set<string>>(new Set());
   const stepCompletionTimersRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
+  const visuallyCompletedStepsRef = useRef<Set<string>>(new Set());
+  
+  // Sync ref with state
+  useEffect(() => {
+    visuallyCompletedStepsRef.current = visuallyCompletedSteps;
+  }, [visuallyCompletedSteps]);
   
   // Get steps for this function
   const steps = getStepsForFunction(functionId, title);
@@ -283,7 +288,8 @@ export default function ProgressModal({
   const checklistItems = steps.map((step) => {
     const actuallyCompleted = isStepCompleted(step.phase, currentPhase, stepLogs);
     const visuallyCompleted = visuallyCompletedSteps.has(step.phase);
-    const inProgress = isStepInProgress(step.phase, currentPhase) && !visuallyCompleted;
+    // Only show as in progress if it's the current phase AND not visually completed yet
+    const inProgress = step.phase === currentPhase && !visuallyCompleted && !actuallyCompleted;
     
     // Get step log and format message
     const stepLog = stepLogs.find(log => log.stepName === step.phase);
@@ -306,6 +312,7 @@ export default function ProgressModal({
     if (!isOpen) {
       // Reset when modal closes
       setVisuallyCompletedSteps(new Set());
+      visuallyCompletedStepsRef.current = new Set();
       stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
       stepCompletionTimersRef.current.clear();
       return;
@@ -323,27 +330,24 @@ export default function ProgressModal({
       const shouldBeCompleted = currentIndex > stepIndex || 
         stepLogs.some(log => log.stepName === stepPhase && log.status === 'success');
       
-      // If step should be completed but isn't visually completed yet
-      if (shouldBeCompleted && !visuallyCompletedSteps.has(stepPhase)) {
+      // If step should be completed but isn't visually completed yet and not already scheduled
+      if (shouldBeCompleted && !visuallyCompletedStepsRef.current.has(stepPhase) && !stepCompletionTimersRef.current.has(stepPhase)) {
         // Check if previous step is visually completed (or if this is the first step)
         const previousStep = index > 0 ? steps[index - 1] : null;
-        const previousStepCompleted = !previousStep || visuallyCompletedSteps.has(previousStep.phase);
+        const previousStepCompleted = !previousStep || visuallyCompletedStepsRef.current.has(previousStep.phase);
         
         // Only schedule if previous step is completed (or this is first step)
         if (previousStepCompleted) {
-          // Clear any existing timer for this step
-          const existingTimer = stepCompletionTimersRef.current.get(stepPhase);
-          if (existingTimer) {
-            clearTimeout(existingTimer);
-          }
-          
           // Calculate delay: 2 seconds after previous step visually completed (or 0 for first step)
           const delay = previousStep ? 2000 : 0;
           
           // Schedule completion
           const timer = setTimeout(() => {
-            setVisuallyCompletedSteps(prev => new Set([...prev, stepPhase]));
-            stepCompletionTimersRef.current.delete(stepPhase);
+            setVisuallyCompletedSteps(prev => {
+              const newSet = new Set([...prev, stepPhase]);
+              stepCompletionTimersRef.current.delete(stepPhase);
+              return newSet;
+            });
           }, delay);
           
           stepCompletionTimersRef.current.set(stepPhase, timer);
@@ -356,22 +360,9 @@ export default function ProgressModal({
       stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
       stepCompletionTimersRef.current.clear();
     };
-  }, [isOpen, currentPhase, stepLogs, steps, visuallyCompletedSteps]);
+  }, [isOpen, currentPhase, stepLogs, steps]); // Removed visuallyCompletedSteps from dependencies
   
-  // Auto-close on completion after all steps are visually completed + 3 seconds
-  useEffect(() => {
-    if (status === 'completed' && allStepsVisuallyCompleted && onClose && !hasAutoClosedRef.current) {
-      hasAutoClosedRef.current = true;
-      // Wait 3 seconds after success alert appears
-      const timer = setTimeout(() => {
-        onClose();
-      }, 3000);
-      return () => clearTimeout(timer);
-    }
-    if (status !== 'completed' || !allStepsVisuallyCompleted) {
-      hasAutoClosedRef.current = false;
-    }
-  }, [status, allStepsVisuallyCompleted, onClose]);
+  // Don't auto-close - user must click close button
   
   // Show success alert only when all steps are visually completed AND status is completed
   const showSuccess = status === 'completed' && allStepsVisuallyCompleted;
@@ -382,38 +373,30 @@ export default function ProgressModal({
       isOpen={isOpen}
       onClose={onClose || (() => {})}
       className="max-w-lg"
-      showCloseButton={status === 'completed' || status === 'error'}
+      showCloseButton={false}
     >
       <div className="p-6 min-h-[200px]">
         {/* Header */}
-        <div className="flex items-start gap-4 mb-6">
-          <div className="flex-shrink-0 mt-1">
-            {status === 'error' ? (
-              <svg className="w-6 h-6 text-error-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            ) : showSuccess ? (
-              <svg className="w-6 h-6 text-success-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            ) : (
-              <svg className="w-6 h-6 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
+        <div className="mb-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1 text-center">
+            {title}
+          </h3>
+          {!showSuccess && status !== 'completed' && (
+            <p className="text-sm text-gray-600 dark:text-gray-400 text-center">{message}</p>
+          )}
+          {status === 'completed' && !allStepsVisuallyCompleted && (
+            <p className="text-sm text-gray-600 dark:text-gray-400 text-center">Processing...</p>
+          )}
+          
+          {/* Spinner below heading - only show when processing and not completed */}
+          {!showSuccess && status !== 'completed' && status !== 'error' && (
+            <div className="flex justify-center mt-4">
+              <svg className="w-8 h-8 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
                 <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                 <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
               </svg>
-            )}
-          </div>
-          <div className="flex-1">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
-              {title}
-            </h3>
-            {!showSuccess && status !== 'completed' && (
-              <p className="text-sm text-gray-600 dark:text-gray-400">{message}</p>
-            )}
-            {status === 'completed' && !allStepsVisuallyCompleted && (
-              <p className="text-sm text-gray-600 dark:text-gray-400">Processing...</p>
-            )}
-          </div>
+            </div>
+          )}
         </div>
 
         {/* Success Alert (shown when all steps are visually completed) */}
@@ -450,17 +433,14 @@ export default function ProgressModal({
                   : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60'
               }`}
             >
-              {/* Icon */}
+              {/* Icon - no spinner in steps, only checkmark or circle */}
               <div className="flex-shrink-0">
                 {item.completed ? (
                   <svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                   </svg>
                 ) : item.inProgress ? (
-                  <svg className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                  </svg>
+                  <div className="w-5 h-5 rounded-full border-2 border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/20" />
                 ) : (
                   <div className="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600" />
                 )}
@@ -483,8 +463,20 @@ export default function ProgressModal({
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3">
-          {onCancel && status !== 'completed' && status !== 'error' && (
+        {showSuccess && onClose && (
+          <div className="flex justify-center mt-6">
+            <Button 
+              variant="primary" 
+              size="lg" 
+              onClick={onClose}
+              className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 text-white px-8 py-3 text-base font-semibold"
+            >
+              Close
+            </Button>
+          </div>
+        )}
+        {onCancel && !showSuccess && status !== 'error' && (
+          <div className="flex justify-end gap-3 mt-6">
             <Button
               variant="secondary"
               size="sm"
@@ -493,13 +485,15 @@ export default function ProgressModal({
             >
               Cancel
             </Button>
-          )}
-          {(status === 'completed' || status === 'error') && onClose && (
+          </div>
+        )}
+        {status === 'error' && onClose && (
+          <div className="flex justify-end gap-3 mt-6">
             <Button variant="primary" size="sm" onClick={onClose}>
-              {status === 'completed' ? 'Close' : 'Dismiss'}
+              Dismiss
             </Button>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </Modal>
   );