Automation final fixes

frontend/src/components/Automation/CurrentProcessingCardV2.tsx

@@ -1,9 +1,9 @@
 /**
  * Current Processing Card V2 - Simplified
- * Shows real-time automation progress with animated progress bar
+ * Shows real-time automation progress
  * Clean UI without cluttered "Currently Processing" and "Up Next" sections
  */
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { automationService, ProcessingState, AutomationRun, PipelineStage } from '../../services/automationService';
 import { useToast } from '../ui/toast/ToastContainer';
 import Button from '../ui/button/Button';
@@ -100,12 +100,7 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
   const [isPausing, setIsPausing] = useState(false);
   const [isResuming, setIsResuming] = useState(false);
   const [isCancelling, setIsCancelling] = useState(false);
-  
-  // Animated progress state - moves 1% per second until 80%, then waits for actual data
-  const [animatedPercent, setAnimatedPercent] = useState(0);
-  const lastRealPercent = useRef(0);
-  const animationTimer = useRef<ReturnType<typeof setInterval> | null>(null);
-  
+
   const toast = useToast();
 
   // Fetch processing state
@@ -146,45 +141,10 @@ const CurrentProcessingCard: React.FC<CurrentProcessingCardProps> = ({
   const realProcessed = processingState?.processed_items ?? getProcessedFromResult(stageResult, currentRun.current_stage);
   const realTotal = processingState?.total_items ?? getTotalFromResult(stageResult, currentRun.current_stage) ?? (stageOverview?.pending ?? 0) + realProcessed;
   const realPercent = realTotal > 0 ? Math.round((realProcessed / realTotal) * 100) : 0;
-  
-  // Animated progress: moves 1% per second up to 80%, then follows real progress
-  useEffect(() => {
-    // Track when real percent changes
-    if (realPercent > lastRealPercent.current) {
-      lastRealPercent.current = realPercent;
-      setAnimatedPercent(realPercent);
-    }
-    
-    // Clear existing timer
-    if (animationTimer.current) {
-      clearInterval(animationTimer.current);
-    }
-    
-    // Only animate if running and not paused
-    if (currentRun.status !== 'running') {
-      return;
-    }
-    
-    // Animate 1% per second up to 80% of current ceiling
-    const ceiling = Math.min(80, realPercent + 20); // Don't go more than 20% ahead
-    animationTimer.current = setInterval(() => {
-      setAnimatedPercent(prev => {
-        if (prev >= ceiling || prev >= realPercent + 10) {
-          return prev; // Stop animation
-        }
-        return Math.min(prev + 1, ceiling);
-      });
-    }, 1000);
-    
-    return () => {
-      if (animationTimer.current) {
-        clearInterval(animationTimer.current);
-      }
-    };
-  }, [currentRun.status, realPercent]);
-  
-  // Use the higher of animated or real percent
-  const displayPercent = Math.max(animatedPercent, realPercent);
+
+  // REMOVED: Animated progress that was causing confusion
+  // Now using real percentage directly from backend
+  const displayPercent = Math.min(realPercent, 100);
   
   const isPaused = currentRun.status === 'paused';
   const stageName = STAGE_NAMES[currentRun.current_stage] || `Stage ${currentRun.current_stage}`;

frontend/src/components/Automation/GlobalProgressBar.tsx

@@ -58,11 +58,6 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
   stages,
   initialSnapshot,
 }) => {
-  // Animated progress state - moves 1% every 10 seconds
-  const [animatedPercent, setAnimatedPercent] = React.useState(0);
-  const lastRealPercent = React.useRef(0);
-  const animationTimer = React.useRef<ReturnType<typeof setInterval> | null>(null);
-  
   // Don't render if no run or run is completed with 100%
   if (!currentRun) {
     return null;
@@ -105,42 +100,10 @@ const GlobalProgressBar: React.FC<GlobalProgressBarProps> = ({
   };
   
   const { percentage: realPercent, completed, total } = calculateGlobalProgress();
-  
-  // Animated progress: moves 1% per 10 seconds, within current stage bounds
-  React.useEffect(() => {
-    if (realPercent > lastRealPercent.current) {
-      lastRealPercent.current = realPercent;
-      setAnimatedPercent(realPercent);
-    }
-    
-    if (animationTimer.current) {
-      clearInterval(animationTimer.current);
-    }
-    
-    if (currentRun.status !== 'running') {
-      return;
-    }
-    
-    // Calculate ceiling based on current stage (each stage is ~14% of total)
-    const stageCeiling = Math.min(currentRun.current_stage * 14, realPercent + 10);
-    
-    animationTimer.current = setInterval(() => {
-      setAnimatedPercent(prev => {
-        if (prev >= stageCeiling || prev >= realPercent + 5) {
-          return prev;
-        }
-        return Math.min(prev + 1, stageCeiling);
-      });
-    }, 10000); // 1% every 10 seconds
-    
-    return () => {
-      if (animationTimer.current) {
-        clearInterval(animationTimer.current);
-      }
-    };
-  }, [currentRun.status, realPercent, currentRun.current_stage]);
-  
-  const percentage = Math.max(animatedPercent, realPercent);
+
+  // REMOVED: Animated progress that was causing confusion
+  // Now using real percentage directly from backend
+  const percentage = realPercent;
   
   // Hide if completed and at 100%
   if (currentRun.status === 'completed' && percentage >= 100) {