Revert "dup remocal"

This reverts commit cfddf3d8fd.

docs/IMAGE_GENERATION_CHANGELOG.md

@@ -147,7 +147,7 @@
    - Queue number (1, 2, 3...)
    - Label (Featured Image, In-Article Image 1, etc.)
    - Content title
-   - Status: "Pending" (with TimeIcon)
+   - Status: "⏳ Pending"
    - Progress: 0%
    - Thumbnail placeholder: "No image"
 
@@ -272,46 +272,5 @@ Example:
 
 ---
 
----
-
-## Stage 1 Cleanup: Removed Duplicate/Unused Code
-
-**Date:** 2025-01-XX  
-**Status:** Completed
-
-### Changes Made:
-
-1. **Removed Image Generation Code from ProgressModal**
-   - Removed all code related to `generate_images_from_prompts` function
-   - **Kept** code for `generate_image_prompts` (image prompt generation) - this is different and still uses ProgressModal
-   - Removed step definitions for image generation from prompts
-   - Removed success message handling for image generation
-   - Removed subtitle and message formatting for image generation
-
-2. **Removed ImageQueue from useProgressModal**
-   - Removed `ImageQueueItem` interface (now only in ImageQueueModal)
-   - Removed `imageQueue` state from useProgressModal hook
-   - Removed image queue extraction from task progress meta
-   - Removed image queue from return interface
-   - **Reason:** ImageQueueModal handles its own queue state, no need for duplicate
-
-3. **Updated Changelog**
-   - Fixed emoji reference to use icon description instead
-
-### Files Modified:
-- ✅ `frontend/src/components/common/ProgressModal.tsx` (CLEANED - removed image generation code)
-- ✅ `frontend/src/hooks/useProgressModal.ts` (CLEANED - removed imageQueue)
-- ✅ `docs/IMAGE_GENERATION_CHANGELOG.md` (UPDATED)
-
-### What Was Kept:
-- ✅ **Image Prompt Generation** (`generate_image_prompts`) - Still uses ProgressModal (not touched)
-- ✅ **ImageQueueModal** - Our new modal for image generation from prompts
-
-### What Was Removed:
-- ❌ **Image Generation from Prompts** code in ProgressModal (duplicate, not needed)
-- ❌ **ImageQueue** state in useProgressModal (duplicate, not needed)
-
----
-
 **End of Stage 1 Changelog**
 

frontend/src/components/common/ProgressModal.tsx

@@ -73,8 +73,15 @@ const getSuccessMessage = (functionId?: string, title?: string, stepLogs?: any[]
     }
     return 'Article drafted successfully.';
   }
-  // Image prompt generation (generate_image_prompts)
+  // Check for image generation from prompts FIRST (more specific)
-  if (funcName.includes('image') && (funcName.includes('prompt') || funcName.includes('extract'))) {
+  if (funcName.includes('image') && funcName.includes('from')) {
+    // Image generation from prompts
+    const imageCount = extractCount(/(\d+)\s+image/i, stepLogs || []);
+    if (imageCount) {
+      return `${imageCount} image${imageCount !== '1' ? 's' : ''} generated successfully`;
+    }
+    return 'Images generated successfully';
+  } else if (funcName.includes('image') && (funcName.includes('prompt') || funcName.includes('extract'))) {
     // Image prompt generation
     // Try to extract from SAVE step message first (most reliable)
     const saveStepLog = stepLogs?.find(log => log.stepName === 'SAVE');
@@ -159,8 +166,17 @@ const getStepsForFunction = (functionId?: string, title?: string): Array<{phase:
     ];
   }
   
-  // Image prompt generation (generate_image_prompts)
+  // Check for image generation from prompts FIRST (more specific)
-  if (funcName.includes('image') && (funcName.includes('prompt') || funcName.includes('extract'))) {
+  if (funcName.includes('image') && funcName.includes('from')) {
+    // Image generation from prompts
+    return [
+      { phase: 'INIT', label: 'Validating image prompts' },
+      { phase: 'PREP', label: 'Preparing image generation queue' },
+      { phase: 'AI_CALL', label: 'Generating images with AI' },
+      { phase: 'PARSE', label: 'Processing image URLs' },
+      { phase: 'SAVE', label: 'Saving image URLs' },
+    ];
+  } else if (funcName.includes('image') && (funcName.includes('prompt') || funcName.includes('extract'))) {
     // Image prompt generation
     return [
       { phase: 'INIT', label: 'Checking content and image slots' },
@@ -376,6 +392,55 @@ export default function ProgressModal({
           return `${articleCount} article${articleCount !== '1' ? 's' : ''} created`;
         }
       }
+    } else if (funcName.includes('image') && funcName.includes('from')) {
+      // Image generation from prompts
+      if (stepPhase === 'PREP') {
+        // Extract image count from PREP step message
+        const imageCount = extractCount(/(\d+)\s+image/i);
+        if (imageCount) {
+          return `Preparing to generate ${imageCount} image${imageCount !== '1' ? 's' : ''}`;
+        }
+        if (stepLog?.message) {
+          const match = stepLog.message.match(/Preparing to generate (\d+)\s+image/i);
+          if (match && match[1]) {
+            return `Preparing to generate ${match[1]} image${match[1] !== '1' ? 's' : ''}`;
+          }
+        }
+        return 'Preparing image generation queue';
+      } else if (stepPhase === 'AI_CALL') {
+        // Extract current image number from message
+        const match = stepLog?.message?.match(/Generating.*image (\d+)/i);
+        if (match && match[1]) {
+          return `Generating image ${match[1]} with AI`;
+        }
+        return 'Generating images with AI';
+      } else if (stepPhase === 'PARSE') {
+        // Extract image count from PARSE step
+        const imageCount = extractCount(/(\d+)\s+image/i);
+        if (imageCount) {
+          return `${imageCount} image${imageCount !== '1' ? 's' : ''} generated successfully`;
+        }
+        if (stepLog?.message) {
+          const match = stepLog.message.match(/(\d+)\s+image.*generated/i);
+          if (match && match[1]) {
+            return `${match[1]} image${match[1] !== '1' ? 's' : ''} generated successfully`;
+          }
+        }
+        return 'Processing image URLs';
+      } else if (stepPhase === 'SAVE') {
+        // Extract image count from SAVE step
+        const imageCount = extractCount(/(\d+)\s+image/i);
+        if (imageCount) {
+          return `Saving ${imageCount} image${imageCount !== '1' ? 's' : ''}`;
+        }
+        if (stepLog?.message) {
+          const match = stepLog.message.match(/Saved image (\d+)/i);
+          if (match && match[1]) {
+            return `Saving image ${match[1]}`;
+          }
+        }
+        return 'Saving image URLs';
+      }
     } else if (funcName.includes('image') && (funcName.includes('prompt') || funcName.includes('extract'))) {
       // Image prompt generation
       if (stepPhase === 'PREP') {
@@ -593,17 +658,30 @@ export default function ProgressModal({
                 } else if (funcName.includes('idea')) {
                   // For idea generation, use fixed heading
                   return 'Generating Content Ideas & Outline';
+                } else if (funcName.includes('image') && funcName.includes('from')) {
+                  // For image generation from prompts
+                  return 'Generate Images';
                 } else if (funcName.includes('image') && (funcName.includes('prompt') || funcName.includes('extract'))) {
                   // For image prompt generation
                   return 'Smart Image Prompts';
+                } else if (funcName.includes('image')) {
+                  // Fallback for other image functions
+                  return 'Generate Images';
                 }
                 return title;
               })()}
             </h3>
-          {/* Subtitle for image prompt generation */}
+          {/* Subtitle for image functions */}
           {(() => {
             const funcName = (functionId || title || '').toLowerCase();
-            if (funcName.includes('image') && (funcName.includes('prompt') || funcName.includes('extract'))) {
+            if (funcName.includes('image') && funcName.includes('from')) {
+              // Image generation from prompts
+              return (
+                <p className="text-sm text-gray-500 dark:text-gray-400 text-center mt-1">
+                  Generating images from prompts using AI
+                </p>
+              );
+            } else if (funcName.includes('image') && (funcName.includes('prompt') || funcName.includes('extract'))) {
               // Image prompt generation
               return (
                 <p className="text-sm text-gray-500 dark:text-gray-400 text-center mt-1">
@@ -615,7 +693,22 @@ export default function ProgressModal({
           })()}
           {!showSuccess && status !== 'completed' && (
             <p className="text-sm text-gray-600 dark:text-gray-400 text-center">
-              {message}
+              {(() => {
+                const funcName = (functionId || title || '').toLowerCase();
+                // For image generation, show a more specific message
+                if (funcName.includes('image') && funcName.includes('from')) {
+                  // Get current step message from step logs
+                  const currentStepLog = stepLogs.find(log => log.stepName === currentPhase);
+                  if (currentStepLog?.message) {
+                    return currentStepLog.message;
+                  }
+                  // Fallback to step label
+                  const currentStep = steps.find(s => s.phase === currentPhase);
+                  return currentStep?.label || 'Generating images...';
+                }
+                // For other functions, use the message prop
+                return message;
+              })()}
             </p>
           )}
           {status === 'completed' && !allStepsVisuallyCompleted && (

frontend/src/hooks/useProgressModal.ts

@@ -14,6 +14,17 @@ export interface ProgressState {
   };
 }
 
+export interface ImageQueueItem {
+  image_id: number;
+  index: number;
+  label: string;
+  content_title: string;
+  status: 'pending' | 'processing' | 'completed' | 'failed';
+  progress: number;
+  image_url: string | null;
+  error: string | null;
+}
+
 export interface UseProgressModalReturn {
   progress: ProgressState;
   isOpen: boolean;
@@ -32,6 +43,7 @@ export interface UseProgressModalReturn {
     message: string;
     timestamp?: number;
   }>; // Step logs for debugging
+  imageQueue?: ImageQueueItem[]; // Image queue for image generation
 }
 
 export function useProgressModal(): UseProgressModalReturn {
@@ -54,6 +66,9 @@ export function useProgressModal(): UseProgressModalReturn {
     timestamp?: number;
   }>>([]);
   
+  // Image queue state for image generation
+  const [imageQueue, setImageQueue] = useState<ImageQueueItem[] | undefined>(undefined);
+  
   // Track displayed percentage and current step for step-based progress
   const displayedPercentageRef = useRef(0);
   const currentStepRef = useRef<string | null>(null);
@@ -458,6 +473,11 @@ export function useProgressModal(): UseProgressModalReturn {
             }
           }
           
+          // Extract image queue if available (for image generation)
+          if (meta.image_queue && Array.isArray(meta.image_queue)) {
+            setImageQueue(meta.image_queue as ImageQueueItem[]);
+          }
+          
           // Update step logs if available
           if (meta.request_steps || meta.response_steps) {
             // Collect all steps for display in modal
@@ -736,6 +756,7 @@ export function useProgressModal(): UseProgressModalReturn {
     displayedPercentageRef.current = 0;
     currentStepRef.current = null;
     setStepLogs([]); // Clear step logs when closing modal
+    setImageQueue(undefined); // Clear image queue when closing modal
     setIsOpen(false);
     // Clear taskId to stop polling when modal closes
     setTaskId(null);
@@ -769,6 +790,7 @@ export function useProgressModal(): UseProgressModalReturn {
       status: 'pending',
     });
     setStepLogs([]);
+    setImageQueue(undefined);
     setTaskId(null);
     setTitle('');
     setIsOpen(false);
@@ -786,6 +808,7 @@ export function useProgressModal(): UseProgressModalReturn {
     taskId, // Expose taskId for use in ProgressModal
     functionId, // Expose functionId for use in ProgressModal
     stepLogs, // Expose step logs for debugging
+    imageQueue, // Expose image queue for image generation
   };
 }