ProgressModalUpdates

frontend/src/components/common/ProgressModal.tsx

@@ -201,15 +201,93 @@ export default function ProgressModal({
   const steps = getStepsForFunction(functionId, title);
   const currentPhase = getCurrentPhase(stepLogs, percentage);
   
+  // Format step message with counts and better formatting
+  const formatStepMessage = (stepPhase: string, stepLog: any, defaultLabel: string, allStepLogs: any[], functionId?: string, title?: string): string => {
+    const funcName = (functionId || title || '').toLowerCase();
+    const message = stepLog?.message || defaultLabel;
+    
+    // Extract counts from message
+    const extractCount = (pattern: RegExp): string => {
+      const match = message.match(pattern);
+      return match && match[1] ? match[1] : '';
+    };
+    
+    if (funcName.includes('cluster')) {
+      if (stepPhase === 'INIT') {
+        // For INIT: Message already includes keyword names from backend (e.g., "Validating keyword1, keyword2, keyword3 and 5 more keywords")
+        // Just return the message as-is since backend formats it
+        return message;
+      } else if (stepPhase === 'PREP') {
+        // For PREP: Show count of keywords being loaded
+        const keywordCount = extractCount(/(\d+)\s+keyword/i);
+        if (keywordCount) {
+          return `Loading ${keywordCount} keyword${keywordCount !== '1' ? 's' : ''} for clustering`;
+        }
+        return message;
+      } else if (stepPhase === 'AI_CALL') {
+        // For AI_CALL: Show count of keywords being sent
+        const keywordCount = extractCount(/(\d+)\s+keyword/i);
+        if (keywordCount) {
+          return `Sending ${keywordCount} keyword${keywordCount !== '1' ? 's' : ''} for clustering`;
+        }
+        return message;
+      } else if (stepPhase === 'PARSE') {
+        // For PARSE: Show count of clusters created
+        const clusterCount = extractCount(/(\d+)\s+cluster/i);
+        if (clusterCount) {
+          return `${clusterCount} cluster${clusterCount !== '1' ? 's' : ''} created`;
+        }
+        // Try to find cluster count in any step log
+        for (const log of allStepLogs) {
+          const count = log.message?.match(/(\d+)\s+cluster/i);
+          if (count && count[1]) {
+            return `${count[1]} cluster${count[1] !== '1' ? 's' : ''} created`;
+          }
+        }
+        return message;
+      } else if (stepPhase === 'SAVE') {
+        // For SAVE: Show count of clusters being saved
+        const clusterCount = extractCount(/(\d+)\s+cluster/i);
+        if (clusterCount) {
+          return `Saving ${clusterCount} cluster${clusterCount !== '1' ? 's' : ''}`;
+        }
+        return message;
+      }
+    } else if (funcName.includes('idea')) {
+      if (stepPhase === 'PARSE') {
+        const ideaCount = extractCount(/(\d+)\s+idea/i);
+        if (ideaCount) {
+          return `${ideaCount} idea${ideaCount !== '1' ? 's' : ''} created`;
+        }
+      }
+    } else if (funcName.includes('content')) {
+      if (stepPhase === 'PARSE') {
+        const articleCount = extractCount(/(\d+)\s+article/i);
+        if (articleCount) {
+          return `${articleCount} article${articleCount !== '1' ? 's' : ''} created`;
+        }
+      }
+    } else if (funcName.includes('image')) {
+      if (stepPhase === 'PARSE') {
+        const imageCount = extractCount(/(\d+)\s+image/i);
+        if (imageCount) {
+          return `${imageCount} image${imageCount !== '1' ? 's' : ''} created`;
+        }
+      }
+    }
+    
+    return message;
+  };
+
   // Build checklist items with visual completion state (needed for allStepsVisuallyCompleted)
   const checklistItems = steps.map((step) => {
     const actuallyCompleted = isStepCompleted(step.phase, currentPhase, stepLogs);
     const visuallyCompleted = visuallyCompletedSteps.has(step.phase);
     const inProgress = isStepInProgress(step.phase, currentPhase) && !visuallyCompleted;
     
-    // Get user-friendly message from step logs if available (includes counts from backend)
+    // Get step log and format message
     const stepLog = stepLogs.find(log => log.stepName === step.phase);
-    const stepMessage = stepLog?.message || step.label;
+    const stepMessage = formatStepMessage(step.phase, stepLog, step.label, stepLogs, functionId, title);
     
     return {
       label: stepMessage,
@@ -329,9 +407,12 @@ export default function ProgressModal({
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
               {title}
             </h3>
-            {!showSuccess && (
+            {!showSuccess && status !== 'completed' && (
               <p className="text-sm text-gray-600 dark:text-gray-400">{message}</p>
             )}
+            {status === 'completed' && !allStepsVisuallyCompleted && (
+              <p className="text-sm text-gray-600 dark:text-gray-400">Processing...</p>
+            )}
           </div>
         </div>