Revert "Update ProgressModal.tsx"

This reverts commit d97be87385.

frontend/src/components/common/ProgressModal.tsx

@@ -298,24 +298,11 @@ export default function ProgressModal({
 
   // Build checklist items with visual completion state (needed for allStepsVisuallyCompleted)
   const checklistItems = useMemo(() => {
-    const phaseOrder = ['INIT', 'PREP', 'AI_CALL', 'PARSE', 'SAVE', 'DONE'];
-    
-    return steps.map((step, index) => {
+    return steps.map((step) => {
       const actuallyCompleted = isStepCompleted(step.phase, currentPhase, stepLogs);
       const visuallyCompleted = visuallyCompletedSteps.has(step.phase);
-      
-      // Determine if this step should be in progress
-      // A step is in progress if:
-      // 1. It's the current phase (backend is working on it)
-      // 2. It's not visually completed yet
-      // 3. All previous steps are visually completed
-      // 4. Status is still processing (not completed or error)
-      const previousStepsCompleted = index === 0 || steps.slice(0, index).every(s => visuallyCompletedSteps.has(s.phase));
-      const isCurrentPhase = step.phase === currentPhase;
-      const inProgress = isCurrentPhase && 
-                        !visuallyCompleted && 
-                        previousStepsCompleted && 
-                        status === 'processing';
+      // 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);
@@ -328,15 +315,12 @@ export default function ProgressModal({
         inProgress,
       };
     });
-  }, [steps, currentPhase, stepLogs, visuallyCompletedSteps, functionId, title, status]);
+  }, [steps, currentPhase, stepLogs, visuallyCompletedSteps, functionId, title]);
 
   // Check if all steps are visually completed
   const allStepsVisuallyCompleted = steps.length > 0 && 
     steps.every(step => visuallyCompletedSteps.has(step.phase));
   
-  // Track the count of visually completed steps to detect changes without causing infinite loops
-  const visuallyCompletedCount = visuallyCompletedSteps.size;
-  
   // Track step completions with 2-second delay between each step
   useEffect(() => {
     if (!isOpen) {
@@ -350,11 +334,19 @@ export default function ProgressModal({
       return;
     }
     
+    // Only process if stepLogs or currentPhase actually changed in a meaningful way
+    if (stepLogsHash === lastProcessedStepLogsHashRef.current && currentPhase === lastProcessedPhaseRef.current) {
+      return;
+    }
+    
+    // Update last processed values
+    lastProcessedStepLogsHashRef.current = stepLogsHash;
+    lastProcessedPhaseRef.current = currentPhase;
+    
     const phaseOrder = ['INIT', 'PREP', 'AI_CALL', 'PARSE', 'SAVE', 'DONE'];
     
-    // Process steps sequentially - find the first step that should be completed but isn't visually completed yet
-    for (let index = 0; index < steps.length; index++) {
-      const step = steps[index];
+    // Check each step in order
+    steps.forEach((step, index) => {
       const stepPhase = step.phase;
       const stepIndex = phaseOrder.indexOf(stepPhase);
       const currentIndex = phaseOrder.indexOf(currentPhase);
@@ -372,7 +364,6 @@ export default function ProgressModal({
         // Only schedule if previous step is completed (or this is first step)
         if (previousStepCompleted) {
           // Calculate delay: 2 seconds after previous step visually completed (or 0 for first step)
-          // For subsequent steps, add 2 seconds delay
           const delay = previousStep ? 2000 : 0;
           
           // Schedule completion
@@ -385,22 +376,16 @@ export default function ProgressModal({
           }, delay);
           
           stepCompletionTimersRef.current.set(stepPhase, timer);
-          
-          // Only process one step at a time - break after scheduling the first eligible step
-          break;
-        } else {
-          // Previous step is not completed yet, stop processing
-          break;
         }
       }
-    }
+    });
     
     // Cleanup on unmount
     return () => {
       stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
       stepCompletionTimersRef.current.clear();
     };
-  }, [isOpen, currentPhase, stepLogsHash, steps, stepLogs, visuallyCompletedCount]); // Use count instead of Set to avoid infinite loops
+  }, [isOpen, currentPhase, stepLogsHash, steps]); // Use stepLogsHash instead of stepLogs
   
   // Don't auto-close - user must click close button
   
@@ -428,15 +413,15 @@ export default function ProgressModal({
             <p className="text-sm text-gray-600 dark:text-gray-400 text-center">Processing...</p>
           )}
           
-          {/* Spinner below heading - show when processing (including when completed but steps not all visually done) */}
-          {status === 'processing' || (status === 'completed' && !allStepsVisuallyCompleted) ? (
+          {/* 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>
-          ) : null}
+          )}
         </div>
 
         {/* Success Alert (shown when all steps are visually completed) */}