feat: add cancel button to generation progress and fix stuck loading state

frontend/components/generation/BatchProgress.tsx

@@ -4,16 +4,18 @@ import React, { useState, useEffect } from "react";
 import { Card, CardContent } from "@/components/ui/Card";
 import { ProgressBar } from "@/components/ui/ProgressBar";
 import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
-import { 
-  Sparkles, 
-  Image as ImageIcon, 
-  Database, 
-  CheckCircle2, 
+import {
+  Sparkles,
+  Image as ImageIcon,
+  Database,
+  CheckCircle2,
   AlertCircle,
   Wand2,
   Zap,
-  Package
+  Package,
+  X
 } from "lucide-react";
+import { useGenerationStore } from "@/store/generationStore";
 
 interface BatchProgressProps {
   progress: number; // 0-100
@@ -57,6 +59,7 @@ export const BatchProgressComponent: React.FC<BatchProgressProps> = ({
   const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
   const [elapsedTime, setElapsedTime] = useState(0);
   const [estimatedTimeRemaining, setEstimatedTimeRemaining] = useState<number | null>(null);
+  const reset = useGenerationStore((state) => state.reset);
 
   const clampedProgress = Math.min(100, Math.max(0, progress));
   const isComplete = clampedProgress >= 100;
@@ -71,7 +74,7 @@ export const BatchProgressComponent: React.FC<BatchProgressProps> = ({
       const interval = setInterval(() => {
         const elapsed = Math.floor((Date.now() - generationStartTime) / 1000);
         setElapsedTime(elapsed);
-        
+
         // Estimate time remaining based on progress
         if (clampedProgress > 5 && clampedProgress < 100) {
           const rate = clampedProgress / elapsed; // % per second
@@ -119,120 +122,129 @@ export const BatchProgressComponent: React.FC<BatchProgressProps> = ({
     <div className="sticky top-20 z-30 mb-6 animate-scale-in">
       <Card variant="glass" className="overflow-hidden shadow-xl border-2 border-blue-200/50 backdrop-blur-xl">
         <CardContent className="pt-6">
-        <div className="space-y-6">
-          {/* Header with animated icon */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4">
-              {isComplete ? (
-                <div className="relative">
-                  <div className="absolute inset-0 bg-green-500 rounded-full animate-ping opacity-75"></div>
-                  <CheckCircle2 className="h-8 w-8 text-green-500 relative z-10" />
+          <div className="space-y-6">
+            {/* Header with animated icon */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                {isComplete ? (
+                  <div className="relative">
+                    <div className="absolute inset-0 bg-green-500 rounded-full animate-ping opacity-75"></div>
+                    <CheckCircle2 className="h-8 w-8 text-green-500 relative z-10" />
+                  </div>
+                ) : (
+                  <div className="relative">
+                    <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
+                    <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
+                      <Package className="h-5 w-5 text-white animate-pulse" />
+                    </div>
+                  </div>
+                )}
+                <div>
+                  <h3 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                    {isComplete ? "Batch Generation Complete!" : "Generating Batch Ads"}
+                  </h3>
+                  <p className="text-sm text-gray-600 mt-0.5 transition-all duration-500">
+                    {isComplete ? "All ads are ready!" : getCurrentMessage()}
+                  </p>
+                  {elapsedTime > 30 && !isComplete && (
+                    <p className="text-xs text-gray-500 mt-1">
+                      {Math.floor(elapsedTime / 60)}m {elapsedTime % 60}s elapsed
+                    </p>
+                  )}
                 </div>
-              ) : (
-                <div className="relative">
-                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
-                  <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
-                    <Package className="h-5 w-5 text-white animate-pulse" />
+              </div>
+              {estimatedTimeRemaining !== null && !isComplete && (
+                <div className="text-right">
+                  <div className="flex items-center space-x-1 text-sm font-semibold text-gray-700">
+                    <Zap className="h-4 w-4 text-yellow-500 animate-pulse" />
+                    <span>~{estimatedTimeRemaining}s</span>
                   </div>
+                  <p className="text-xs text-gray-500">remaining</p>
                 </div>
               )}
-              <div>
-                <h3 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
-                  {isComplete ? "Batch Generation Complete!" : "Generating Batch Ads"}
-                </h3>
-                <p className="text-sm text-gray-600 mt-0.5 transition-all duration-500">
-                  {isComplete ? "All ads are ready!" : getCurrentMessage()}
-                </p>
-                {elapsedTime > 30 && !isComplete && (
-                  <p className="text-xs text-gray-500 mt-1">
-                    {Math.floor(elapsedTime / 60)}m {elapsedTime % 60}s elapsed
-                  </p>
-                )}
-              </div>
+              {!isComplete && (
+                <button
+                  onClick={() => reset()}
+                  className="p-2 hover:bg-red-50 text-gray-400 hover:text-red-500 rounded-full transition-colors group"
+                  title="Cancel Generation"
+                >
+                  <X className="h-5 w-5 group-hover:rotate-90 transition-transform duration-300" />
+                </button>
+              )}
             </div>
-            {estimatedTimeRemaining !== null && !isComplete && (
-              <div className="text-right">
-                <div className="flex items-center space-x-1 text-sm font-semibold text-gray-700">
-                  <Zap className="h-4 w-4 text-yellow-500 animate-pulse" />
-                  <span>~{estimatedTimeRemaining}s</span>
-                </div>
-                <p className="text-xs text-gray-500">remaining</p>
-              </div>
-            )}
-          </div>
 
-          {/* Batch Stats */}
-          {totalCount > 0 && (
-            <div className="grid grid-cols-3 gap-4">
-              <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-4 border border-blue-200">
-                <div className="flex items-center space-x-2 mb-1">
-                  <Package className="h-4 w-4 text-blue-600" />
-                  <p className="text-xs font-semibold text-gray-600">Total Ads</p>
+            {/* Batch Stats */}
+            {totalCount > 0 && (
+              <div className="grid grid-cols-3 gap-4">
+                <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-4 border border-blue-200">
+                  <div className="flex items-center space-x-2 mb-1">
+                    <Package className="h-4 w-4 text-blue-600" />
+                    <p className="text-xs font-semibold text-gray-600">Total Ads</p>
+                  </div>
+                  <p className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                    {totalCount}
+                  </p>
                 </div>
-                <p className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
-                  {totalCount}
-                </p>
-              </div>
-              <div className="bg-gradient-to-br from-cyan-50 to-pink-50 rounded-xl p-4 border border-cyan-200">
-                <div className="flex items-center space-x-2 mb-1">
-                  <ImageIcon className="h-4 w-4 text-cyan-600" />
-                  <p className="text-xs font-semibold text-gray-600">Variations</p>
+                <div className="bg-gradient-to-br from-cyan-50 to-pink-50 rounded-xl p-4 border border-cyan-200">
+                  <div className="flex items-center space-x-2 mb-1">
+                    <ImageIcon className="h-4 w-4 text-cyan-600" />
+                    <p className="text-xs font-semibold text-gray-600">Variations</p>
+                  </div>
+                  <p className="text-2xl font-bold bg-gradient-to-r from-cyan-600 to-pink-600 bg-clip-text text-transparent">
+                    {totalVariations}
+                  </p>
                 </div>
-                <p className="text-2xl font-bold bg-gradient-to-r from-cyan-600 to-pink-600 bg-clip-text text-transparent">
-                  {totalVariations}
-                </p>
-              </div>
-              <div className="bg-gradient-to-br from-pink-50 to-purple-50 rounded-xl p-4 border border-pink-200">
-                <div className="flex items-center space-x-2 mb-1">
-                  <Sparkles className="h-4 w-4 text-pink-600" />
-                  <p className="text-xs font-semibold text-gray-600">Current</p>
+                <div className="bg-gradient-to-br from-pink-50 to-purple-50 rounded-xl p-4 border border-pink-200">
+                  <div className="flex items-center space-x-2 mb-1">
+                    <Sparkles className="h-4 w-4 text-pink-600" />
+                    <p className="text-xs font-semibold text-gray-600">Current</p>
+                  </div>
+                  <p className="text-2xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">
+                    {currentAdNumber}/{totalCount}
+                  </p>
                 </div>
-                <p className="text-2xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">
-                  {currentAdNumber}/{totalCount}
-                </p>
               </div>
-            </div>
-          )}
+            )}
 
-          {/* Progress Bar */}
-          <div className="space-y-2">
-            <div className="flex justify-between items-center">
-              <span className="text-sm font-semibold text-gray-700">Overall Progress</span>
-              <span className="text-sm font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
-                {Math.round(clampedProgress)}%
-              </span>
+            {/* Progress Bar */}
+            <div className="space-y-2">
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-semibold text-gray-700">Overall Progress</span>
+                <span className="text-sm font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                  {Math.round(clampedProgress)}%
+                </span>
+              </div>
+              <ProgressBar
+                progress={clampedProgress}
+                showPercentage={false}
+              />
+              {totalCount > 0 && currentIndex >= 0 && (
+                <p className="text-xs text-gray-500 text-center mt-2">
+                  {currentAdNumber} of {totalCount} ads completed
+                  {imagesPerAd > 1 && ` • ${currentVariation} of ${totalVariations} variations`}
+                </p>
+              )}
             </div>
-            <ProgressBar
-              progress={clampedProgress}
-              showPercentage={false}
-            />
-            {totalCount > 0 && currentIndex >= 0 && (
-              <p className="text-xs text-gray-500 text-center mt-2">
-                {currentAdNumber} of {totalCount} ads completed
-                {imagesPerAd > 1 && ` • ${currentVariation} of ${totalVariations} variations`}
-              </p>
-            )}
-          </div>
 
-          {/* Success State */}
-          {isComplete && (
-            <div className="mt-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl animate-scale-in">
-              <div className="flex items-center space-x-3">
-                <CheckCircle2 className="h-6 w-6 text-green-600 flex-shrink-0" />
-                <div>
-                  <p className="text-sm font-semibold text-green-900">
-                    Batch generation completed successfully!
-                  </p>
-                  <p className="text-xs text-green-700 mt-0.5">
-                    {totalCount > 0 ? `${totalCount} ads with ${totalVariations} total variations are ready!` : "All ads are ready to use"}
-                  </p>
+            {/* Success State */}
+            {isComplete && (
+              <div className="mt-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl animate-scale-in">
+                <div className="flex items-center space-x-3">
+                  <CheckCircle2 className="h-6 w-6 text-green-600 flex-shrink-0" />
+                  <div>
+                    <p className="text-sm font-semibold text-green-900">
+                      Batch generation completed successfully!
+                    </p>
+                    <p className="text-xs text-green-700 mt-0.5">
+                      {totalCount > 0 ? `${totalCount} ads with ${totalVariations} total variations are ready!` : "All ads are ready to use"}
+                    </p>
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
-        </div>
-      </CardContent>
-    </Card>
+            )}
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 };

frontend/components/generation/GenerationProgress.tsx

@@ -4,16 +4,18 @@ import React, { useState, useEffect } from "react";
 import { Card, CardContent } from "@/components/ui/Card";
 import { ProgressBar } from "@/components/ui/ProgressBar";
 import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
-import { 
-  Sparkles, 
-  Image as ImageIcon, 
-  Database, 
-  CheckCircle2, 
+import {
+  Sparkles,
+  Image as ImageIcon,
+  Database,
+  CheckCircle2,
   AlertCircle,
   Wand2,
-  Zap
+  Zap,
+  X
 } from "lucide-react";
 import type { GenerationProgress } from "@/types";
+import { useGenerationStore } from "@/store/generationStore";
 
 interface GenerationProgressProps {
   progress: GenerationProgress;
@@ -21,30 +23,36 @@ interface GenerationProgressProps {
 }
 
 const STEPS = [
-  { key: "copy", label: "Crafting Copy", icon: Sparkles, color: "from-blue-500 to-cyan-500", messages: [
-    "Brainstorming compelling headlines...",
-    "Writing persuasive ad copy...",
-    "Polishing the perfect message...",
-    "Adding psychological triggers...",
-  ]},
-  { key: "image", label: "Generating Images", icon: ImageIcon, color: "from-cyan-500 to-pink-500", messages: [
-    "Creating stunning visuals...",
-    "Bringing your vision to life...",
-    "Rendering high-quality images...",
-    "Adding creative flair...",
-    "Generation may take a while...",
-    "Almost there!",
-    "Working on the perfect image...",
-    "This is worth the wait...",
-    "Crafting something amazing...",
-    "Just a few more moments...",
-  ]},
-  { key: "saving", label: "Saving", icon: Database, color: "from-pink-500 to-purple-500", messages: [
-    "Storing your creative...",
-    "Securing your masterpiece...",
-    "Almost done...",
-    "Finalizing everything...",
-  ]},
+  {
+    key: "copy", label: "Crafting Copy", icon: Sparkles, color: "from-blue-500 to-cyan-500", messages: [
+      "Brainstorming compelling headlines...",
+      "Writing persuasive ad copy...",
+      "Polishing the perfect message...",
+      "Adding psychological triggers...",
+    ]
+  },
+  {
+    key: "image", label: "Generating Images", icon: ImageIcon, color: "from-cyan-500 to-pink-500", messages: [
+      "Creating stunning visuals...",
+      "Bringing your vision to life...",
+      "Rendering high-quality images...",
+      "Adding creative flair...",
+      "Generation may take a while...",
+      "Almost there!",
+      "Working on the perfect image...",
+      "This is worth the wait...",
+      "Crafting something amazing...",
+      "Just a few more moments...",
+    ]
+  },
+  {
+    key: "saving", label: "Saving", icon: Database, color: "from-pink-500 to-purple-500", messages: [
+      "Storing your creative...",
+      "Securing your masterpiece...",
+      "Almost done...",
+      "Finalizing everything...",
+    ]
+  },
 ] as const;
 
 // Engaging messages for when stuck at high progress
@@ -65,6 +73,7 @@ export const GenerationProgressComponent: React.FC<GenerationProgressProps> = ({
 }) => {
   const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
   const [elapsedTime, setElapsedTime] = useState(0);
+  const reset = useGenerationStore((state) => state.reset);
 
   const stepProgress = {
     idle: 0,
@@ -118,12 +127,12 @@ export const GenerationProgressComponent: React.FC<GenerationProgressProps> = ({
   // Get message for current step
   const getStepMessage = () => {
     if (progress.message) return progress.message;
-    
+
     // If stuck at high progress, show engaging messages
     if (isStuckAtHighProgress) {
       return ENGAGING_MESSAGES[currentMessageIndex];
     }
-    
+
     const step = STEPS.find(s => s.key === progress.step);
     if (step && step.messages.length > 0) {
       return step.messages[currentMessageIndex % step.messages.length];
@@ -135,154 +144,161 @@ export const GenerationProgressComponent: React.FC<GenerationProgressProps> = ({
     <div className="sticky top-20 z-30 mb-6 animate-scale-in">
       <Card variant="glass" className="overflow-hidden shadow-xl border-2 border-blue-200/50 backdrop-blur-xl">
         <CardContent className="pt-6">
-        <div className="space-y-6">
-          {/* Header with animated icon */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4">
-              {isComplete ? (
-                <div className="relative">
-                  <div className="absolute inset-0 bg-green-500 rounded-full animate-ping opacity-75"></div>
-                  <CheckCircle2 className="h-8 w-8 text-green-500 relative z-10" />
+          <div className="space-y-6">
+            {/* Header with animated icon */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                {isComplete ? (
+                  <div className="relative">
+                    <div className="absolute inset-0 bg-green-500 rounded-full animate-ping opacity-75"></div>
+                    <CheckCircle2 className="h-8 w-8 text-green-500 relative z-10" />
+                  </div>
+                ) : isError ? (
+                  <AlertCircle className="h-8 w-8 text-red-500 animate-pulse" />
+                ) : (
+                  <div className="relative">
+                    <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
+                    <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
+                      <Wand2 className="h-5 w-5 text-white animate-spin-slow" />
+                    </div>
+                  </div>
+                )}
+                <div>
+                  <h3 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                    {isComplete ? "Generation Complete!" : isError ? "Generation Failed" : "Creating Your Ad"}
+                  </h3>
+                  <p className="text-sm text-gray-600 mt-0.5 transition-all duration-500">
+                    {isComplete ? "Your ad is ready!" : isError ? "Something went wrong" : getStepMessage()}
+                  </p>
+                  {elapsedTime > 30 && !isComplete && !isError && (
+                    <p className="text-xs text-gray-500 mt-1">
+                      {Math.floor(elapsedTime / 60)}m {elapsedTime % 60}s elapsed
+                    </p>
+                  )}
                 </div>
-              ) : isError ? (
-                <AlertCircle className="h-8 w-8 text-red-500 animate-pulse" />
-              ) : (
-                <div className="relative">
-                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full animate-ping opacity-20"></div>
-                  <div className="relative bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full p-2">
-                    <Wand2 className="h-5 w-5 text-white animate-spin-slow" />
+              </div>
+              {progress.estimatedTimeRemaining && !isComplete && !isError && (
+                <div className="text-right">
+                  <div className="flex items-center space-x-1 text-sm font-semibold text-gray-700">
+                    <Zap className="h-4 w-4 text-yellow-500 animate-pulse" />
+                    <span>~{Math.ceil(progress.estimatedTimeRemaining)}s</span>
                   </div>
+                  <p className="text-xs text-gray-500">remaining</p>
                 </div>
               )}
-              <div>
-                <h3 className="text-lg font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
-                  {isComplete ? "Generation Complete!" : isError ? "Generation Failed" : "Creating Your Ad"}
-                </h3>
-                <p className="text-sm text-gray-600 mt-0.5 transition-all duration-500">
-                  {isComplete ? "Your ad is ready!" : isError ? "Something went wrong" : getStepMessage()}
-                </p>
-                {elapsedTime > 30 && !isComplete && !isError && (
-                  <p className="text-xs text-gray-500 mt-1">
-                    {Math.floor(elapsedTime / 60)}m {elapsedTime % 60}s elapsed
-                  </p>
-                )}
-              </div>
+              {!isComplete && !isError && (
+                <button
+                  onClick={() => reset()}
+                  className="p-2 hover:bg-red-50 text-gray-400 hover:text-red-500 rounded-full transition-colors group"
+                  title="Cancel Generation"
+                >
+                  <X className="h-5 w-5 group-hover:rotate-90 transition-transform duration-300" />
+                </button>
+              )}
             </div>
-            {progress.estimatedTimeRemaining && !isComplete && !isError && (
-              <div className="text-right">
-                <div className="flex items-center space-x-1 text-sm font-semibold text-gray-700">
-                  <Zap className="h-4 w-4 text-yellow-500 animate-pulse" />
-                  <span>~{Math.ceil(progress.estimatedTimeRemaining)}s</span>
+
+            {/* Step Indicators */}
+            {!isComplete && !isError && (
+              <div className="flex items-center justify-between relative">
+                {/* Progress line */}
+                <div className="absolute top-5 left-0 right-0 h-0.5 bg-gray-200 -z-10">
+                  <div
+                    className="h-full bg-gradient-to-r from-blue-500 via-cyan-500 to-pink-500 transition-all duration-500 ease-out"
+                    style={{ width: `${currentProgress}%` }}
+                  />
                 </div>
-                <p className="text-xs text-gray-500">remaining</p>
+
+                {STEPS.map((step, index) => {
+                  const StepIcon = step.icon;
+                  const isActive = progress.step === step.key;
+                  const isCompleted = currentStepIndex > index;
+                  const isUpcoming = currentStepIndex < index;
+
+                  return (
+                    <div key={step.key} className="flex flex-col items-center flex-1">
+                      <div className={`relative w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${isActive
+                          ? `bg-gradient-to-r ${step.color} shadow-lg scale-110 animate-pulse`
+                          : isCompleted
+                            ? "bg-gradient-to-r from-green-500 to-emerald-500 shadow-md"
+                            : "bg-gray-200"
+                        }`}>
+                        {isActive ? (
+                          <div className="text-white">
+                            <LoadingSpinner size="sm" />
+                          </div>
+                        ) : isCompleted ? (
+                          <CheckCircle2 className="h-5 w-5 text-white" />
+                        ) : (
+                          <StepIcon className={`h-5 w-5 ${isUpcoming ? "text-gray-400" : "text-white"}`} />
+                        )}
+                        {isActive && (
+                          <div className={`absolute inset-0 rounded-full bg-gradient-to-r ${step.color} animate-ping opacity-75`}></div>
+                        )}
+                      </div>
+                      <p className={`text-xs font-medium mt-2 text-center ${isActive
+                          ? "text-gray-900 font-bold"
+                          : isCompleted
+                            ? "text-green-600"
+                            : "text-gray-400"
+                        }`}>
+                        {step.label}
+                      </p>
+                    </div>
+                  );
+                })}
               </div>
             )}
-          </div>
 
-          {/* Step Indicators */}
-          {!isComplete && !isError && (
-            <div className="flex items-center justify-between relative">
-              {/* Progress line */}
-              <div className="absolute top-5 left-0 right-0 h-0.5 bg-gray-200 -z-10">
-                <div 
-                  className="h-full bg-gradient-to-r from-blue-500 via-cyan-500 to-pink-500 transition-all duration-500 ease-out"
-                  style={{ width: `${currentProgress}%` }}
-                />
+            {/* Progress Bar */}
+            <div className="space-y-2">
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-semibold text-gray-700">Overall Progress</span>
+                <span className="text-sm font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                  {Math.round(currentProgress)}%
+                </span>
               </div>
-              
-              {STEPS.map((step, index) => {
-                const StepIcon = step.icon;
-                const isActive = progress.step === step.key;
-                const isCompleted = currentStepIndex > index;
-                const isUpcoming = currentStepIndex < index;
+              <ProgressBar
+                progress={currentProgress}
+                showPercentage={false}
+              />
+            </div>
 
-                return (
-                  <div key={step.key} className="flex flex-col items-center flex-1">
-                    <div className={`relative w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300 ${
-                      isActive 
-                        ? `bg-gradient-to-r ${step.color} shadow-lg scale-110 animate-pulse`
-                        : isCompleted
-                        ? "bg-gradient-to-r from-green-500 to-emerald-500 shadow-md"
-                        : "bg-gray-200"
-                    }`}>
-                      {isActive ? (
-                        <div className="text-white">
-                          <LoadingSpinner size="sm" />
-                        </div>
-                      ) : isCompleted ? (
-                        <CheckCircle2 className="h-5 w-5 text-white" />
-                      ) : (
-                        <StepIcon className={`h-5 w-5 ${isUpcoming ? "text-gray-400" : "text-white"}`} />
-                      )}
-                      {isActive && (
-                        <div className={`absolute inset-0 rounded-full bg-gradient-to-r ${step.color} animate-ping opacity-75`}></div>
-                      )}
-                    </div>
-                    <p className={`text-xs font-medium mt-2 text-center ${
-                      isActive 
-                        ? "text-gray-900 font-bold"
-                        : isCompleted
-                        ? "text-green-600"
-                        : "text-gray-400"
-                    }`}>
-                      {step.label}
+            {/* Success State */}
+            {isComplete && (
+              <div className="mt-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl animate-scale-in">
+                <div className="flex items-center space-x-3">
+                  <CheckCircle2 className="h-6 w-6 text-green-600 flex-shrink-0" />
+                  <div>
+                    <p className="text-sm font-semibold text-green-900">
+                      Ad generated successfully!
+                    </p>
+                    <p className="text-xs text-green-700 mt-0.5">
+                      Your creative is ready to use
                     </p>
                   </div>
-                );
-              })}
-            </div>
-          )}
-
-          {/* Progress Bar */}
-          <div className="space-y-2">
-            <div className="flex justify-between items-center">
-              <span className="text-sm font-semibold text-gray-700">Overall Progress</span>
-              <span className="text-sm font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
-                {Math.round(currentProgress)}%
-              </span>
-            </div>
-            <ProgressBar
-              progress={currentProgress}
-              showPercentage={false}
-            />
-          </div>
-
-          {/* Success State */}
-          {isComplete && (
-            <div className="mt-4 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl animate-scale-in">
-              <div className="flex items-center space-x-3">
-                <CheckCircle2 className="h-6 w-6 text-green-600 flex-shrink-0" />
-                <div>
-                  <p className="text-sm font-semibold text-green-900">
-                    Ad generated successfully!
-                  </p>
-                  <p className="text-xs text-green-700 mt-0.5">
-                    Your creative is ready to use
-                  </p>
                 </div>
               </div>
-            </div>
-          )}
+            )}
 
-          {/* Error State */}
-          {isError && (
-            <div className="mt-4 p-4 bg-gradient-to-r from-red-50 to-pink-50 border-2 border-red-200 rounded-xl animate-scale-in">
-              <div className="flex items-center space-x-3">
-                <AlertCircle className="h-6 w-6 text-red-600 flex-shrink-0" />
-                <div>
-                  <p className="text-sm font-semibold text-red-900">
-                    Generation failed
-                  </p>
-                  <p className="text-xs text-red-700 mt-0.5">
-                    {progress.message || "An error occurred. Please try again."}
-                  </p>
+            {/* Error State */}
+            {isError && (
+              <div className="mt-4 p-4 bg-gradient-to-r from-red-50 to-pink-50 border-2 border-red-200 rounded-xl animate-scale-in">
+                <div className="flex items-center space-x-3">
+                  <AlertCircle className="h-6 w-6 text-red-600 flex-shrink-0" />
+                  <div>
+                    <p className="text-sm font-semibold text-red-900">
+                      Generation failed
+                    </p>
+                    <p className="text-xs text-red-700 mt-0.5">
+                      {progress.message || "An error occurred. Please try again."}
+                    </p>
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
-        </div>
-      </CardContent>
-    </Card>
+            )}
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 };