Update ProgressModal.tsx

frontend/src/components/common/ProgressModal.tsx

@@ -46,13 +46,13 @@ const getSuccessMessage = (functionId?: string, title?: string, stepLogs?: any[]
     const clusterCount = extractCount(/(\d+)\s+cluster/i, stepLogs || []);
     
     if (keywordCount && clusterCount) {
-      return `Clustering complete — ${clusterCount} cluster${clusterCount !== '1' ? 's' : ''} created from ${keywordCount} keyword${keywordCount !== '1' ? 's' : ''}.`;
+      return `Clustering complete\n${clusterCount} cluster${clusterCount !== '1' ? 's' : ''} created from ${keywordCount} keyword${keywordCount !== '1' ? 's' : ''}`;
     } else if (clusterCount) {
-      return `Clustering complete — ${clusterCount} cluster${clusterCount !== '1' ? 's' : ''} created.`;
+      return `Clustering complete\n${clusterCount} cluster${clusterCount !== '1' ? 's' : ''} created`;
     } else if (keywordCount) {
-      return `Clustering complete — processed ${keywordCount} keyword${keywordCount !== '1' ? 's' : ''}.`;
+      return `Clustering complete\nProcessed ${keywordCount} keyword${keywordCount !== '1' ? 's' : ''}`;
     }
-    return 'Clustering complete — keywords grouped into meaningful clusters.';
+    return 'Clustering complete\nKeywords grouped into meaningful clusters';
   }
   if (funcName.includes('idea')) {
     const clusterCount = extractCount(/(\d+)\s+cluster/i, stepLogs || []);
@@ -235,12 +235,39 @@ export default function ProgressModal({
     
     if (funcName.includes('cluster')) {
       if (stepPhase === 'INIT') {
-        // For INIT: Backend message already includes keyword names (e.g., "Validating keyword1, keyword2, keyword3 and 5 more keywords")
+        // For INIT: Try to extract keyword count from message or stepLogs
-        // If message doesn't have keywords, try to extract from stepLogs or use default
+        // Backend message might include keyword names (e.g., "Validating keyword1, keyword2, keyword3 and 5 more keywords")
+        // Or we need to extract the total count
         if (message && message !== defaultLabel && message.includes('Validating')) {
+          // Try to extract total count from message
+          const countMatch = message.match(/(\d+)\s+more keyword/i);
+          if (countMatch) {
+            const moreCount = parseInt(countMatch[1], 10);
+            // Count keywords before "and X more" - typically 3
+            const shownCount = 3;
+            const totalCount = shownCount + moreCount;
+            return `Validating ${totalCount} keyword${totalCount !== 1 ? 's' : ''}`;
+          }
+          // Try to find total keyword count in any step log
+          for (const log of allStepLogs) {
+            const keywordCountMatch = log.message?.match(/(\d+)\s+keyword/i);
+            if (keywordCountMatch) {
+              const totalCount = parseInt(keywordCountMatch[1], 10);
+              return `Validating ${totalCount} keyword${totalCount !== 1 ? 's' : ''}`;
+            }
+          }
+          // If message has keyword names but no count, return as-is
           return message;
         }
-        // Fallback: use default label
+        // Fallback: try to extract count from stepLogs
+        for (const log of allStepLogs) {
+          const keywordCountMatch = log.message?.match(/(\d+)\s+keyword/i);
+          if (keywordCountMatch) {
+            const totalCount = parseInt(keywordCountMatch[1], 10);
+            return `Validating ${totalCount} keyword${totalCount !== 1 ? 's' : ''}`;
+          }
+        }
+        // Final fallback: use default label
         return defaultLabel;
       } else if (stepPhase === 'PREP') {
         // For PREP: Show count of keywords being loaded
@@ -434,8 +461,8 @@ export default function ProgressModal({
         {/* Header */}
         <div className="mb-6">
           <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1 text-center">
-            {title}
+              {title}
-          </h3>
+            </h3>
           {!showSuccess && status !== 'completed' && (
             <p className="text-sm text-gray-600 dark:text-gray-400 text-center">{message}</p>
           )}
@@ -450,13 +477,13 @@ export default function ProgressModal({
                 <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                 <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
               </svg>
-            </div>
+          </div>
           )}
         </div>
 
         {/* Success Alert (shown when all steps are visually completed) */}
         {showSuccess && (
-          <div className="mb-6">
+        <div className="mb-6">
             {/* Big centered check icon */}
             <div className="flex justify-center mb-4">
               <div className="w-16 h-16 rounded-full bg-green-600 dark:bg-green-700 flex items-center justify-center">
@@ -464,13 +491,13 @@ export default function ProgressModal({
                   <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                 </svg>
               </div>
-            </div>
+        </div>
-            
+
             {/* Dark success alert box with centered text */}
             <div className="p-5 rounded-lg bg-green-600 dark:bg-green-700 border border-green-700 dark:border-green-600">
-              <p className="text-base font-semibold text-white text-center">
+              <div className="text-base font-semibold text-white text-center whitespace-pre-line">
                 {successMessage}
-              </p>
+              </div>
             </div>
           </div>
         )}
@@ -513,9 +540,9 @@ export default function ProgressModal({
               >
                 {item.label}
               </span>
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
 
         {/* Footer */}
         {showSuccess && onClose && (
@@ -541,14 +568,14 @@ export default function ProgressModal({
               Cancel
             </Button>
           </div>
-        )}
+          )}
         {status === 'error' && onClose && (
           <div className="flex justify-end gap-3 mt-6">
             <Button variant="primary" size="sm" onClick={onClose}>
               Dismiss
             </Button>
           </div>
-        )}
+          )}
       </div>
     </Modal>
   );