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/components/common/ProgressModal.tsx

@@ -20,6 +20,13 @@ export interface ProgressModalProps {
   onCancel?: () => void;
   taskId?: string;
   functionId?: string; // AI function ID for tracking (e.g., "ai-cluster-01")
+  stepLogs?: Array<{
+    stepNumber: number;
+    stepName: string;
+    status: string;
+    message: string;
+    timestamp?: number;
+  }>; // Step logs for debugging
 }
 
 // Generate modal instance ID (increments per modal instance)
@@ -40,6 +47,7 @@ export default function ProgressModal({
   onCancel,
   taskId,
   functionId,
+  stepLogs = [],
 }: ProgressModalProps) {
   // Generate modal instance ID on first render
   const modalInstanceIdRef = React.useRef<string | null>(null);
@@ -170,7 +178,7 @@ export default function ProgressModal({
         </div>
 
         {/* Function ID and Task ID (for debugging) */}
-        {(fullFunctionId || taskId) && import.meta.env.DEV && (
+        {(fullFunctionId || taskId) && (
           <div className="mb-4 space-y-1 text-xs text-gray-400 dark:text-gray-600">
             {fullFunctionId && (
               <div>Function ID: {fullFunctionId}</div>
@@ -181,6 +189,42 @@ export default function ProgressModal({
           </div>
         )}
 
+        {/* Step Logs / Debug Logs */}
+        {stepLogs.length > 0 && (
+          <div className="mb-4 max-h-48 overflow-y-auto bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-3">
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+                Step Logs
+              </h4>
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                {stepLogs.length} step{stepLogs.length !== 1 ? 's' : ''}
+              </span>
+            </div>
+            <div className="space-y-1">
+              {stepLogs.map((step, index) => (
+                <div
+                  key={index}
+                  className={`text-xs p-2 rounded border ${
+                    step.status === 'success'
+                      ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-300'
+                      : step.status === 'error'
+                      ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-300'
+                      : 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300'
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="font-mono font-semibold">
+                      [{step.stepNumber}]
+                    </span>
+                    <span className="font-semibold">{step.stepName}:</span>
+                    <span>{step.message}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
         {/* Footer */}
         <div className="flex justify-end gap-3">
           {onCancel && status !== 'completed' && status !== 'error' && (