Revert "Update ProgressModal.tsx"

This reverts commit d97be87385.

frontend/src/components/common/ProgressModal.tsx

@@ -197,7 +197,7 @@ export default function ProgressModal({
   const stepCompletionTimersRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
   const visuallyCompletedStepsRef = useRef<Set<string>>(new Set());
   const lastProcessedStepLogsHashRef = useRef<string>('');
-  const lastVisuallyCompletedCountRef = useRef<number>(0);
+  const lastProcessedPhaseRef = useRef<string>('');
   
   // Sync ref with state
   useEffect(() => {
@@ -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,7 +315,7 @@ 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 && 
@@ -341,33 +328,25 @@ export default function ProgressModal({
       setVisuallyCompletedSteps(new Set());
       visuallyCompletedStepsRef.current = new Set();
       lastProcessedStepLogsHashRef.current = '';
-      lastVisuallyCompletedCountRef.current = 0;
+      lastProcessedPhaseRef.current = '';
       stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
       stepCompletionTimersRef.current.clear();
       return;
     }
     
-    const phaseOrder = ['INIT', 'PREP', 'AI_CALL', 'PARSE', 'SAVE', 'DONE'];
-    const currentVisuallyCompletedCount = visuallyCompletedSteps.size;
-    
-    // Check if we need to process:
-    // 1. Backend progress changed (stepLogsHash or currentPhase)
-    // 2. A step just completed visually (count increased)
-    const currentHash = `${stepLogsHash}|${currentPhase}`;
-    const hashChanged = currentHash !== lastProcessedStepLogsHashRef.current;
-    const countChanged = currentVisuallyCompletedCount > lastVisuallyCompletedCountRef.current;
-    
-    if (!hashChanged && !countChanged) {
-      return; // Nothing changed, skip processing
+    // Only process if stepLogs or currentPhase actually changed in a meaningful way
+    if (stepLogsHash === lastProcessedStepLogsHashRef.current && currentPhase === lastProcessedPhaseRef.current) {
+      return;
     }
     
-    // Update tracking refs
-    lastProcessedStepLogsHashRef.current = currentHash;
-    lastVisuallyCompletedCountRef.current = currentVisuallyCompletedCount;
+    // Update last processed values
+    lastProcessedStepLogsHashRef.current = stepLogsHash;
+    lastProcessedPhaseRef.current = currentPhase;
     
-    // 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];
+    const phaseOrder = ['INIT', 'PREP', 'AI_CALL', 'PARSE', 'SAVE', 'DONE'];
+    
+    // Check each step in order
+    steps.forEach((step, index) => {
       const stepPhase = step.phase;
       const stepIndex = phaseOrder.indexOf(stepPhase);
       const currentIndex = phaseOrder.indexOf(currentPhase);
@@ -397,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, visuallyCompletedSteps.size]); // Use .size instead of the Set
+  }, [isOpen, currentPhase, stepLogsHash, steps]); // Use stepLogsHash instead of stepLogs
   
   // Don't auto-close - user must click close button
   
@@ -440,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) */}