skip stage configured and working

frontend/src/components/Automation/ConfigModal.tsx

@@ -21,6 +21,13 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
     is_enabled: config.is_enabled,
     frequency: config.frequency,
     scheduled_time: config.scheduled_time,
+    stage_1_enabled: config.stage_1_enabled ?? true,
+    stage_2_enabled: config.stage_2_enabled ?? true,
+    stage_3_enabled: config.stage_3_enabled ?? true,
+    stage_4_enabled: config.stage_4_enabled ?? true,
+    stage_5_enabled: config.stage_5_enabled ?? true,
+    stage_6_enabled: config.stage_6_enabled ?? true,
+    stage_7_enabled: config.stage_7_enabled ?? true,
     stage_1_batch_size: config.stage_1_batch_size,
     stage_2_batch_size: config.stage_2_batch_size,
     stage_3_batch_size: config.stage_3_batch_size,
@@ -97,8 +104,68 @@ const ConfigModal: React.FC<ConfigModalProps> = ({ config, onSave, onCancel }) =
             />
           </div>
 
+          {/* Stage Processing Toggles */}
+          <div className="mb-4 border-t pt-4">
+            <h3 className="font-semibold mb-2">Stage Processing</h3>
+            <p className="text-sm text-gray-600 mb-3">
+              Enable or disable individual stages. Disabled stages will be skipped during automation.
+            </p>
+
+            <div className="grid grid-cols-1 gap-2">
+              <Checkbox
+                label="Stage 1: Keywords → Clusters"
+                checked={formData.stage_1_enabled ?? true}
+                onChange={(checked) =>
+                  setFormData({ ...formData, stage_1_enabled: checked })
+                }
+              />
+              <Checkbox
+                label="Stage 2: Clusters → Ideas"
+                checked={formData.stage_2_enabled ?? true}
+                onChange={(checked) =>
+                  setFormData({ ...formData, stage_2_enabled: checked })
+                }
+              />
+              <Checkbox
+                label="Stage 3: Ideas → Tasks"
+                checked={formData.stage_3_enabled ?? true}
+                onChange={(checked) =>
+                  setFormData({ ...formData, stage_3_enabled: checked })
+                }
+              />
+              <Checkbox
+                label="Stage 4: Tasks → Content"
+                checked={formData.stage_4_enabled ?? true}
+                onChange={(checked) =>
+                  setFormData({ ...formData, stage_4_enabled: checked })
+                }
+              />
+              <Checkbox
+                label="Stage 5: Content → Image Prompts"
+                checked={formData.stage_5_enabled ?? true}
+                onChange={(checked) =>
+                  setFormData({ ...formData, stage_5_enabled: checked })
+                }
+              />
+              <Checkbox
+                label="Stage 6: Image Prompts → Images"
+                checked={formData.stage_6_enabled ?? true}
+                onChange={(checked) =>
+                  setFormData({ ...formData, stage_6_enabled: checked })
+                }
+              />
+              <Checkbox
+                label="Stage 7: Review → Published"
+                checked={formData.stage_7_enabled ?? true}
+                onChange={(checked) =>
+                  setFormData({ ...formData, stage_7_enabled: checked })
+                }
+              />
+            </div>
+          </div>
+
           {/* Batch Sizes */}
-          <div className="mb-4">
+          <div className="mb-4 border-t pt-4">
             <h3 className="font-semibold mb-2">Batch Sizes</h3>
             <p className="text-sm text-gray-600 mb-3">
               Configure how many items to process in each stage

frontend/src/pages/Automation/AutomationPage.tsx

@@ -923,6 +923,10 @@ const AutomationPage: React.FC = () => {
               const stageBorderColors = ['border-l-brand-500', 'border-l-purple-500', 'border-l-warning-500', 'border-l-gray-600'];
               const stageBorderColor = stageBorderColors[index] || 'border-l-brand-500';
               
+              // Check if this stage is enabled in config
+              const stageEnabledKey = `stage_${stage.number}_enabled` as keyof AutomationConfig;
+              const isStageEnabled = config?.[stageEnabledKey] ?? true;
+              
               return (
                 <div
                   key={stage.number}
@@ -947,9 +951,11 @@ const AutomationPage: React.FC = () => {
                         <StageIcon className="size-4 text-white" />
                       </div>
                       <span className="text-base font-bold text-gray-900 dark:text-white">Stage {stage.number}</span>
-                      {isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full font-medium">● Active</span>}
+                      {isActive && isStageEnabled && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full font-medium">● Active</span>}
+                      {isActive && !isStageEnabled && <span className="text-xs px-2 py-0.5 bg-orange-500 text-white rounded-full font-medium">Skipped</span>}
                       {isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full font-medium">✓</span>}
-                      {!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full font-medium">Ready</span>}
+                      {!isActive && !isComplete && stage.pending > 0 && !isStageEnabled && <span className="text-xs px-2 py-0.5 bg-orange-500 text-white rounded-full font-medium">Skipped</span>}
+                      {!isActive && !isComplete && stage.pending > 0 && isStageEnabled && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full font-medium">Ready</span>}
                     </div>
                     {/* Stage Function Name - Right side, larger font */}
                     <div className={`text-sm font-bold ${stageConfig.textColor}`}>{stageConfig.name}</div>
@@ -1053,6 +1059,10 @@ const AutomationPage: React.FC = () => {
               const stageBorderColors56 = ['border-l-brand-500', 'border-l-purple-500'];
               const stageBorderColor = stageBorderColors56[index] || 'border-l-brand-500';
               
+              // Check if this stage is enabled in config
+              const stageEnabledKey = `stage_${stage.number}_enabled` as keyof AutomationConfig;
+              const isStageEnabled = config?.[stageEnabledKey] ?? true;
+              
               return (
                 <div
                   key={stage.number}
@@ -1076,9 +1086,11 @@ const AutomationPage: React.FC = () => {
                         <StageIcon className="size-4 text-white" />
                       </div>
                       <span className="text-base font-bold text-gray-900 dark:text-white">Stage {stage.number}</span>
-                      {isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full font-medium">● Active</span>}
+                      {isActive && isStageEnabled && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full font-medium">● Active</span>}
+                      {isActive && !isStageEnabled && <span className="text-xs px-2 py-0.5 bg-orange-500 text-white rounded-full font-medium">Skipped</span>}
                       {isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full font-medium">✓</span>}
-                      {!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full font-medium">Ready</span>}
+                      {!isActive && !isComplete && stage.pending > 0 && !isStageEnabled && <span className="text-xs px-2 py-0.5 bg-orange-500 text-white rounded-full font-medium">Skipped</span>}
+                      {!isActive && !isComplete && stage.pending > 0 && isStageEnabled && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full font-medium">Ready</span>}
                     </div>
                     {/* Stage Function Name - Right side, larger font */}
                     <div className={`text-sm font-bold ${stageConfig.textColor}`}>{stageConfig.name}</div>
@@ -1162,6 +1174,9 @@ const AutomationPage: React.FC = () => {
               
               const progressPercent = totalReview > 0 ? Math.min(Math.round((approvedCount / totalReview) * 100), 100) : 0;
               
+              // Check if stage 7 is enabled in config
+              const isStage7Enabled = config?.stage_7_enabled ?? true;
+              
               return (
                 <div
                   className={`
@@ -1184,9 +1199,12 @@ const AutomationPage: React.FC = () => {
                         <PaperPlaneIcon className="size-4 text-white" />
                       </div>
                       <span className="text-base font-bold text-gray-900 dark:text-white">Stage 7</span>
-                      {isActive && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full font-medium">● Active</span>}
+                      {isActive && isStage7Enabled && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full font-medium">● Active</span>}
+                      {isActive && !isStage7Enabled && <span className="text-xs px-2 py-0.5 bg-orange-500 text-white rounded-full font-medium">Skipped</span>}
+                      {isActive && !isStage7Enabled && <span className="text-xs px-2 py-0.5 bg-orange-500 text-white rounded-full font-medium">Skipped</span>}
                       {isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full font-medium">✓</span>}
-                      {!isActive && !isComplete && pendingReview > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full font-medium">Ready</span>}
+                      {!isActive && !isComplete && pendingReview > 0 && !isStage7Enabled && <span className="text-xs px-2 py-0.5 bg-orange-500 text-white rounded-full font-medium">Skipped</span>}
+                      {!isActive && !isComplete && pendingReview > 0 && isStage7Enabled && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full font-medium">Ready</span>}
                     </div>
                     {/* Stage Function Name - Right side, larger font */}
                     <div className={`text-sm font-bold ${stageConfig.textColor}`}>{stageConfig.name}</div>

frontend/src/services/automationService.ts

@@ -7,6 +7,13 @@ export interface AutomationConfig {
   is_enabled: boolean;
   frequency: 'daily' | 'weekly' | 'monthly';
   scheduled_time: string;
+  stage_1_enabled: boolean;
+  stage_2_enabled: boolean;
+  stage_3_enabled: boolean;
+  stage_4_enabled: boolean;
+  stage_5_enabled: boolean;
+  stage_6_enabled: boolean;
+  stage_7_enabled: boolean;
   stage_1_batch_size: number;
   stage_2_batch_size: number;
   stage_3_batch_size: number;