automation fixes part 3 using claude opus4.5

frontend/src/pages/Automation/AutomationPage.tsx

@@ -735,13 +735,35 @@ const AutomationPage: React.FC = () => {
               const isActive = currentRun?.current_stage === stage.number;
               const isComplete = currentRun && currentRun.current_stage > stage.number;
               const result = currentRun ? (currentRun[`stage_${stage.number}_result` as keyof AutomationRun] as any) : null;
-              // FIXED: Use stage-specific key for processed count instead of summing all numeric values
+
+              // FIXED: Get processed count from stage result using correct key
               const processed = getProcessedFromResult(result, stage.number);
-              // FIXED: Use initial snapshot for total when available, otherwise fallback to pending + processed
+
-              const initialCount = initialSnapshot?.[`stage_${stage.number}_initial` as keyof InitialSnapshot] as number | undefined;
+              // FIXED: For total, prioritize:
-              const total = initialCount ?? ((stage.pending ?? 0) + processed);
+              // 1. *_total from result (set during active processing, most accurate)
-              const remaining = Math.max(0, total - processed);
+              // 2. pending from real-time pipeline_overview (current DB state)
-              const progressPercent = total > 0 ? Math.round((processed / total) * 100) : 0;
+              // 3. Fallback to processed (for completed stages)
+              const totalKeyMap: Record<number, string> = {
+                1: 'keywords_total',
+                2: 'clusters_total',
+                3: 'ideas_total',
+                4: 'tasks_total',
+                5: 'content_total',
+                6: 'images_total',
+                7: 'review_total'
+              };
+              const resultTotal = result?.[totalKeyMap[stage.number]] ?? 0;
+
+              // pending = items still waiting to be processed (real-time from DB)
+              const pending = stage.pending ?? 0;
+
+              // For active/completed stages: use result total if available, else pending + processed
+              // For pending stages: just show current pending count
+              const total = isActive || isComplete
+                ? (resultTotal > 0 ? resultTotal : pending + processed)
+                : pending;
+
+              const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
               
               return (
                 <div
@@ -777,33 +799,29 @@ const AutomationPage: React.FC = () => {
                     </div>
                   </div>
                   
-                  {/* Queue Metrics */}
+                  {/* Simplified Queue Metrics: Only Pending & Processed */}
                   <div className="space-y-1.5 text-xs mb-3">
                     <div className="flex justify-between">
-                      <span className="text-gray-600 dark:text-gray-400">Total Items:</span>
+                      <span className="text-gray-600 dark:text-gray-400">Pending:</span>
-                      <span className="font-bold text-slate-900 dark:text-white">{total}</span>
+                      <span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-slate-400 dark:text-gray-500'}`}>
+                        {pending}
+                      </span>
                     </div>
                     <div className="flex justify-between">
                       <span className="text-gray-600 dark:text-gray-400">Processed:</span>
-                      <span className="font-bold text-slate-900 dark:text-white">{processed}</span>
+                      <span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-slate-400 dark:text-gray-500'}`}>
-                    </div>
+                        {processed}
-                    <div className="flex justify-between">
-                      <span className="text-gray-600 dark:text-gray-400">Remaining:</span>
-                      <span className={`font-bold ${stageConfig.textColor} dark:${stageConfig.textColor}`}>
-                        {remaining}
                       </span>
                     </div>
-                    {/* Credits and Time - Section 6 Enhancement */}
+                    {/* Credits and Duration - only show during/after run */}
-                    {result && result.credits_used !== undefined && (
+                    {result && (result.credits_used > 0 || result.time_elapsed) && (
-                      <div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700">
+                      <div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700 text-[10px]">
-                        <span className="text-gray-600 dark:text-gray-400">Credits Used:</span>
+                        {result.credits_used > 0 && (
-                        <span className="font-bold text-amber-600 dark:text-amber-400">{result.credits_used}</span>
+                          <span className="text-amber-600 dark:text-amber-400">{result.credits_used} credits</span>
-                      </div>
+                        )}
+                        {result.time_elapsed && (
+                          <span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
                         )}
-                    {result && result.time_elapsed && (
-                      <div className="flex justify-between">
-                        <span className="text-gray-600 dark:text-gray-400">Duration:</span>
-                        <span className="font-semibold text-gray-700 dark:text-gray-300">{result.time_elapsed}</span>
                       </div>
                     )}
                   </div>
@@ -838,13 +856,22 @@ const AutomationPage: React.FC = () => {
               const isActive = currentRun?.current_stage === stage.number;
               const isComplete = currentRun && currentRun.current_stage > stage.number;
               const result = currentRun ? (currentRun[`stage_${stage.number}_result` as keyof AutomationRun] as any) : null;
-              // FIXED: Use stage-specific key for processed count
+
+              // FIXED: Get processed count from stage result using correct key
               const processed = getProcessedFromResult(result, stage.number);
-              // FIXED: Use initial snapshot for total when available
+
-              const initialCount = initialSnapshot?.[`stage_${stage.number}_initial` as keyof InitialSnapshot] as number | undefined;
+              // FIXED: Same logic as stages 1-4
-              const total = initialCount ?? ((stage.pending ?? 0) + processed);
+              const totalKeyMap: Record<number, string> = {
-              const remaining = Math.max(0, total - processed);
+                5: 'content_total',
-              const progressPercent = total > 0 ? Math.round((processed / total) * 100) : 0;
+                6: 'images_total',
+              };
+              const resultTotal = result?.[totalKeyMap[stage.number]] ?? 0;
+              const pending = stage.pending ?? 0;
+              const total = isActive || isComplete
+                ? (resultTotal > 0 ? resultTotal : pending + processed)
+                : pending;
+
+              const progressPercent = total > 0 ? Math.min(Math.round((processed / total) * 100), 100) : 0;
               
               return (
                 <div
@@ -879,32 +906,29 @@ const AutomationPage: React.FC = () => {
                     </div>
                   </div>
                   
+                  {/* Simplified Queue Metrics: Only Pending & Processed */}
                   <div className="space-y-1.5 text-xs mb-3">
                     <div className="flex justify-between">
-                      <span className="text-gray-600 dark:text-gray-400">Total Items:</span>
+                      <span className="text-gray-600 dark:text-gray-400">Pending:</span>
-                      <span className="font-bold text-slate-900 dark:text-white">{total}</span>
+                      <span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-slate-400 dark:text-gray-500'}`}>
+                        {pending}
+                      </span>
                     </div>
                     <div className="flex justify-between">
                       <span className="text-gray-600 dark:text-gray-400">Processed:</span>
-                      <span className="font-bold text-slate-900 dark:text-white">{processed}</span>
+                      <span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-slate-400 dark:text-gray-500'}`}>
-                    </div>
+                        {processed}
-                    <div className="flex justify-between">
-                      <span className="text-gray-600 dark:text-gray-400">Remaining:</span>
-                      <span className={`font-bold ${stageConfig.textColor}`}>
-                        {remaining}
                       </span>
                     </div>
-                    {/* Credits and Time - Section 6 Enhancement */}
+                    {/* Credits and Duration - only show during/after run */}
-                    {result && result.credits_used !== undefined && (
+                    {result && (result.credits_used > 0 || result.time_elapsed) && (
-                      <div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700">
+                      <div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700 text-[10px]">
-                        <span className="text-gray-600 dark:text-gray-400">Credits Used:</span>
+                        {result.credits_used > 0 && (
-                        <span className="font-bold text-amber-600 dark:text-amber-400">{result.credits_used}</span>
+                          <span className="text-amber-600 dark:text-amber-400">{result.credits_used} credits</span>
-                      </div>
+                        )}
+                        {result.time_elapsed && (
+                          <span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
                         )}
-                    {result && result.time_elapsed && (
-                      <div className="flex justify-between">
-                        <span className="text-gray-600 dark:text-gray-400">Duration:</span>
-                        <span className="font-semibold text-gray-700 dark:text-gray-300">{result.time_elapsed}</span>
                       </div>
                     )}
                   </div>