12

frontend/src/hooks/useProgressModal.ts

@@ -58,6 +58,7 @@ export function useProgressModal(): UseProgressModalReturn {
   const displayedPercentageRef = useRef(0);
   const currentStepRef = useRef<string | null>(null);
   const stepTransitionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const autoIncrementIntervalRef = useRef<NodeJS.Timeout | null>(null);
   
   // Step mapping with user-friendly messages and percentages
   const getStepInfo = (stepName: string, message: string = '', allSteps: any[] = []): { percentage: number; friendlyMessage: string } => {
@@ -350,6 +351,8 @@ export function useProgressModal(): UseProgressModalReturn {
                   stepTransitionTimeoutRef.current = setTimeout(animateProgress, 200);
                 } else {
                   stepTransitionTimeoutRef.current = null;
+                  // After reaching target, start auto-increment if below 80%
+                  startAutoIncrement();
                 }
               }
             };
@@ -381,6 +384,8 @@ export function useProgressModal(): UseProgressModalReturn {
                 phase: meta.phase,
               },
             });
+            // Start auto-increment if below 80%
+            startAutoIncrement();
           } else {
             // Same percentage - just update message and details if needed
             currentStepRef.current = currentStep;
@@ -395,8 +400,61 @@ export function useProgressModal(): UseProgressModalReturn {
                 phase: meta.phase,
               },
             }));
+            // Start auto-increment if below 80%
+            startAutoIncrement();
           }
           
+          // Helper function to start auto-increment progress (1% every 300ms until 80%)
+          const startAutoIncrement = () => {
+            // Clear any existing auto-increment interval
+            if (autoIncrementIntervalRef.current) {
+              clearInterval(autoIncrementIntervalRef.current);
+              autoIncrementIntervalRef.current = null;
+            }
+            
+            // Only start if we're below 80%
+            if (displayedPercentageRef.current < 80) {
+              autoIncrementIntervalRef.current = setInterval(() => {
+                setProgress(prev => {
+                  // Check current status - stop if not processing
+                  if (prev.status !== 'processing') {
+                    if (autoIncrementIntervalRef.current) {
+                      clearInterval(autoIncrementIntervalRef.current);
+                      autoIncrementIntervalRef.current = null;
+                    }
+                    return prev;
+                  }
+                  
+                  const current = displayedPercentageRef.current;
+                  if (current < 80) {
+                    const newPercentage = Math.min(current + 1, 80);
+                    displayedPercentageRef.current = newPercentage;
+                    
+                    // Stop if we've reached 80%
+                    if (newPercentage >= 80) {
+                      if (autoIncrementIntervalRef.current) {
+                        clearInterval(autoIncrementIntervalRef.current);
+                        autoIncrementIntervalRef.current = null;
+                      }
+                    }
+                    
+                    return {
+                      ...prev,
+                      percentage: newPercentage,
+                    };
+                  } else {
+                    // Stop if we've reached 80%
+                    if (autoIncrementIntervalRef.current) {
+                      clearInterval(autoIncrementIntervalRef.current);
+                      autoIncrementIntervalRef.current = null;
+                    }
+                    return prev;
+                  }
+                });
+              }, 300);
+            }
+          };
+          
           // Update step logs if available
           if (meta.request_steps || meta.response_steps) {
             // Collect all steps for display in modal
@@ -657,6 +715,11 @@ export function useProgressModal(): UseProgressModalReturn {
         clearTimeout(stepTransitionTimeoutRef.current);
         stepTransitionTimeoutRef.current = null;
       }
+      // Clear auto-increment interval
+      if (autoIncrementIntervalRef.current) {
+        clearInterval(autoIncrementIntervalRef.current);
+        autoIncrementIntervalRef.current = null;
+      }
       // Reset displayed percentage
       displayedPercentageRef.current = 0;
       currentStepRef.current = null;
@@ -669,6 +732,11 @@ export function useProgressModal(): UseProgressModalReturn {
       clearTimeout(stepTransitionTimeoutRef.current);
       stepTransitionTimeoutRef.current = null;
     }
+    // Clear auto-increment interval
+    if (autoIncrementIntervalRef.current) {
+      clearInterval(autoIncrementIntervalRef.current);
+      autoIncrementIntervalRef.current = null;
+    }
     displayedPercentageRef.current = 0;
     currentStepRef.current = null;
     setStepLogs([]); // Reset step logs when opening modal
@@ -699,6 +767,11 @@ export function useProgressModal(): UseProgressModalReturn {
       clearTimeout(stepTransitionTimeoutRef.current);
       stepTransitionTimeoutRef.current = null;
     }
+    // Clear auto-increment interval
+    if (autoIncrementIntervalRef.current) {
+      clearInterval(autoIncrementIntervalRef.current);
+      autoIncrementIntervalRef.current = null;
+    }
     displayedPercentageRef.current = 0;
     currentStepRef.current = null;
     setStepLogs([]); // Clear step logs when closing modal
@@ -722,6 +795,11 @@ export function useProgressModal(): UseProgressModalReturn {
       clearTimeout(stepTransitionTimeoutRef.current);
       stepTransitionTimeoutRef.current = null;
     }
+    // Clear auto-increment interval
+    if (autoIncrementIntervalRef.current) {
+      clearInterval(autoIncrementIntervalRef.current);
+      autoIncrementIntervalRef.current = null;
+    }
     displayedPercentageRef.current = 0;
     currentStepRef.current = null;
     setProgress({