Add step logging functionality to ProgressModal and useProgressModal

- Introduced stepLogs to ProgressModal and useProgressModal for enhanced debugging.
- Updated ProgressModal to display step logs with status indicators.
- Modified useProgressModal to manage step logs, collecting and sorting steps from AI requests.
- Adjusted Clusters and Ideas pages to pass stepLogs to ProgressModal for improved user feedback during asynchronous tasks.
- Fixed a typo in Usage.tsx header for clarity.

frontend/src/hooks/useProgressModal.ts

@@ -25,6 +25,13 @@ export interface UseProgressModalReturn {
   setError: (errorMessage: string) => void;
   reset: () => void;
   functionId?: string; // AI function ID for tracking
+  stepLogs: Array<{
+    stepNumber: number;
+    stepName: string;
+    status: string;
+    message: string;
+    timestamp?: number;
+  }>; // Step logs for debugging
 }
 
 export function useProgressModal(): UseProgressModalReturn {
@@ -38,6 +45,15 @@ export function useProgressModal(): UseProgressModalReturn {
     status: 'pending',
   });
   
+  // Step logs state for debugging
+  const [stepLogs, setStepLogs] = useState<Array<{
+    stepNumber: number;
+    stepName: string;
+    status: string;
+    message: string;
+    timestamp?: number;
+  }>>([]);
+  
   // Track displayed percentage and current step for step-based progress
   const displayedPercentageRef = useRef(0);
   const currentStepRef = useRef<string | null>(null);
@@ -383,6 +399,44 @@ export function useProgressModal(): UseProgressModalReturn {
           
           // Update step logs if available
           if (meta.request_steps || meta.response_steps) {
+            // Collect all steps for display in modal
+            const allSteps: Array<{
+              stepNumber: number;
+              stepName: string;
+              status: string;
+              message: string;
+              timestamp?: number;
+            }> = [];
+            
+            if (meta.request_steps && Array.isArray(meta.request_steps)) {
+              meta.request_steps.forEach((step: any) => {
+                allSteps.push({
+                  stepNumber: step.stepNumber || 0,
+                  stepName: step.stepName || 'Unknown',
+                  status: step.status || 'success',
+                  message: step.message || '',
+                  timestamp: step.timestamp,
+                });
+              });
+            }
+            
+            if (meta.response_steps && Array.isArray(meta.response_steps)) {
+              meta.response_steps.forEach((step: any) => {
+                allSteps.push({
+                  stepNumber: step.stepNumber || 0,
+                  stepName: step.stepName || 'Unknown',
+                  status: step.status || 'success',
+                  message: step.message || '',
+                  timestamp: step.timestamp,
+                });
+              });
+            }
+            
+            // Sort by step number and update state
+            allSteps.sort((a, b) => a.stepNumber - b.stepNumber);
+            setStepLogs(allSteps);
+            
+            // Also update AI request logs store
             const { useAIRequestLogsStore } = await import('../store/aiRequestLogsStore').catch(() => ({ useAIRequestLogsStore: null }));
             const logs = useAIRequestLogsStore?.getState().logs || [];
             const log = logs.find(l => l.response?.data?.task_id === taskId);
@@ -435,6 +489,44 @@ export function useProgressModal(): UseProgressModalReturn {
           
           // Update final step logs
           if (meta.request_steps || meta.response_steps) {
+            // Collect all steps for display in modal
+            const allSteps: Array<{
+              stepNumber: number;
+              stepName: string;
+              status: string;
+              message: string;
+              timestamp?: number;
+            }> = [];
+            
+            if (meta.request_steps && Array.isArray(meta.request_steps)) {
+              meta.request_steps.forEach((step: any) => {
+                allSteps.push({
+                  stepNumber: step.stepNumber || 0,
+                  stepName: step.stepName || 'Unknown',
+                  status: step.status || 'success',
+                  message: step.message || '',
+                  timestamp: step.timestamp,
+                });
+              });
+            }
+            
+            if (meta.response_steps && Array.isArray(meta.response_steps)) {
+              meta.response_steps.forEach((step: any) => {
+                allSteps.push({
+                  stepNumber: step.stepNumber || 0,
+                  stepName: step.stepName || 'Unknown',
+                  status: step.status || 'success',
+                  message: step.message || '',
+                  timestamp: step.timestamp,
+                });
+              });
+            }
+            
+            // Sort by step number and update state
+            allSteps.sort((a, b) => a.stepNumber - b.stepNumber);
+            setStepLogs(allSteps);
+            
+            // Also update AI request logs store
             const { useAIRequestLogsStore } = await import('../store/aiRequestLogsStore').catch(() => ({ useAIRequestLogsStore: null }));
             const logs = useAIRequestLogsStore?.getState().logs || [];
             // Find log by task_id in response data or by matching the most recent log
@@ -579,6 +671,7 @@ export function useProgressModal(): UseProgressModalReturn {
     }
     displayedPercentageRef.current = 0;
     currentStepRef.current = null;
+    setStepLogs([]); // Reset step logs when opening modal
     setTaskId(newTaskId);
     setTitle(newTitle);
     setFunctionId(newFunctionId);
@@ -608,6 +701,7 @@ export function useProgressModal(): UseProgressModalReturn {
     }
     displayedPercentageRef.current = 0;
     currentStepRef.current = null;
+    setStepLogs([]); // Clear step logs when closing modal
     setIsOpen(false);
     // Clear taskId to stop polling when modal closes
     setTaskId(null);
@@ -651,6 +745,7 @@ export function useProgressModal(): UseProgressModalReturn {
     title, // Expose title for use in component
     taskId, // Expose taskId for use in ProgressModal
     functionId, // Expose functionId for use in ProgressModal
+    stepLogs, // Expose step logs for debugging
   };
 }