Keep showing steps

frontend/src/components/common/ProgressModal.tsx

@@ -150,14 +150,78 @@ export default function ProgressModal({
   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());
   
-  // Auto-close on completion after 3 seconds
+  // Get steps for this function
+  const steps = getStepsForFunction(functionId, title);
+  const currentPhase = getCurrentPhase(stepLogs, percentage);
+  
+  // Track step completions with 2-second delay between each step
+  useEffect(() => {
+    if (!isOpen) {
+      // Reset when modal closes
+      setVisuallyCompletedSteps(new Set());
+      stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
+      stepCompletionTimersRef.current.clear();
+      return;
+    }
+    
+    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);
+      
+      // Check if step should be completed (we've moved past it or have log entry)
+      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)) {
+        // 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);
+        
+        // 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);
+          }, delay);
+          
+          stepCompletionTimersRef.current.set(stepPhase, timer);
+        }
+      }
+    });
+    
+    // Cleanup on unmount
+    return () => {
+      stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
+      stepCompletionTimersRef.current.clear();
+    };
+  }, [isOpen, currentPhase, stepLogs, steps, visuallyCompletedSteps]);
+  
+  // Auto-close on completion after 5 seconds (increased to allow all steps to show)
   useEffect(() => {
     if (status === 'completed' && onClose && !hasAutoClosedRef.current) {
       hasAutoClosedRef.current = true;
       const timer = setTimeout(() => {
         onClose();
-      }, 3000);
+      }, 5000);
       return () => clearTimeout(timer);
     }
     if (status !== 'completed') {
@@ -165,14 +229,11 @@ export default function ProgressModal({
     }
   }, [status, onClose]);
   
-  // Get steps for this function
+  // Build checklist items with visual completion state
-  const steps = getStepsForFunction(functionId, title);
-  const currentPhase = getCurrentPhase(stepLogs, percentage);
-  
-  // Build checklist items
   const checklistItems = steps.map((step) => {
-    const completed = isStepCompleted(step.phase, currentPhase, stepLogs);
+    const actuallyCompleted = isStepCompleted(step.phase, currentPhase, stepLogs);
-    const inProgress = isStepInProgress(step.phase, currentPhase);
+    const visuallyCompleted = visuallyCompletedSteps.has(step.phase);
+    const inProgress = isStepInProgress(step.phase, currentPhase) && !visuallyCompleted;
     
     // Get user-friendly message from step logs if available
     const stepLog = stepLogs.find(log => log.stepName === step.phase);
@@ -181,7 +242,7 @@ export default function ProgressModal({
     return {
       label: stepMessage,
       phase: step.phase,
-      completed,
+      completed: visuallyCompleted, // Use visual completion state
       inProgress,
     };
   });
@@ -200,20 +261,22 @@ export default function ProgressModal({
       <div className="p-6 min-h-[200px]">
         {/* Header */}
         <div className="flex items-start gap-4 mb-6">
-          {!showSuccess && (
+          <div className="flex-shrink-0 mt-1">
-            <div className="flex-shrink-0 mt-1">
+            {status === 'error' ? (
-              {status === 'error' ? (
+              <svg className="w-6 h-6 text-error-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <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" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
-                </svg>
+            ) : showSuccess ? (
-              ) : (
+              <svg className="w-6 h-6 text-success-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <svg className="w-6 h-6 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              </svg>
-                  <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>
+              <svg className="w-6 h-6 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" />
-            </div>
+                <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}
@@ -238,52 +301,50 @@ export default function ProgressModal({
           </div>
         )}
 
-        {/* Checklist-style Progress Steps */}
+        {/* Checklist-style Progress Steps - Always visible */}
-        {!showSuccess && (
+        <div className="mb-6 space-y-3">
-          <div className="mb-6 space-y-3">
+          {checklistItems.map((item, index) => (
-            {checklistItems.map((item, index) => (
+            <div
-              <div
+              key={index}
-                key={index}
+              className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
-                className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
+                item.completed
+                  ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
+                  : item.inProgress
+                  ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
+                  : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60'
+              }`}
+            >
+              {/* Icon */}
+              <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-gray-300 dark:border-gray-600" />
+                )}
+              </div>
+              
+              {/* Step Text */}
+              <span
+                className={`flex-1 text-sm font-medium ${
                   item.completed
-                    ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
+                    ? 'text-green-800 dark:text-green-300'
                     : item.inProgress
-                    ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
+                    ? 'text-blue-800 dark:text-blue-300'
-                    : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60'
+                    : 'text-gray-500 dark:text-gray-400'
                 }`}
               >
-                {/* Icon */}
+                {item.label}
-                <div className="flex-shrink-0">
+              </span>
-                  {item.completed ? (
+            </div>
-                    <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" />
+        </div>
-                    </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-gray-300 dark:border-gray-600" />
-                  )}
-                </div>
-                
-                {/* Step Text */}
-                <span
-                  className={`flex-1 text-sm font-medium ${
-                    item.completed
-                      ? 'text-green-800 dark:text-green-300'
-                      : item.inProgress
-                      ? 'text-blue-800 dark:text-blue-300'
-                      : 'text-gray-500 dark:text-gray-400'
-                  }`}
-                >
-                  {item.label}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
 
         {/* Footer */}
         <div className="flex justify-end gap-3">