From 2e6aa6f140624f9c8ef672d8c98524ab8982b8d2 Mon Sep 17 00:00:00 2001 From: Desktop Date: Mon, 10 Nov 2025 19:53:51 +0500 Subject: [PATCH] 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. --- .../src/components/common/ProgressModal.tsx | 46 ++++++++- frontend/src/hooks/useProgressModal.ts | 95 +++++++++++++++++++ frontend/src/pages/Billing/Usage.tsx | 2 +- frontend/src/pages/Planner/Clusters.tsx | 5 +- frontend/src/pages/Planner/Ideas.tsx | 1 + 5 files changed, 145 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/common/ProgressModal.tsx b/frontend/src/components/common/ProgressModal.tsx index 5a7378de..b142c03e 100644 --- a/frontend/src/components/common/ProgressModal.tsx +++ b/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(null); @@ -170,7 +178,7 @@ export default function ProgressModal({ {/* Function ID and Task ID (for debugging) */} - {(fullFunctionId || taskId) && import.meta.env.DEV && ( + {(fullFunctionId || taskId) && (
{fullFunctionId && (
Function ID: {fullFunctionId}
@@ -181,6 +189,42 @@ export default function ProgressModal({
)} + {/* Step Logs / Debug Logs */} + {stepLogs.length > 0 && ( +
+
+

+ Step Logs +

+ + {stepLogs.length} step{stepLogs.length !== 1 ? 's' : ''} + +
+
+ {stepLogs.map((step, index) => ( +
+
+ + [{step.stepNumber}] + + {step.stepName}: + {step.message} +
+
+ ))} +
+
+ )} + {/* Footer */}
{onCancel && status !== 'completed' && status !== 'error' && ( diff --git a/frontend/src/hooks/useProgressModal.ts b/frontend/src/hooks/useProgressModal.ts index b23e9018..a333fe7f 100644 --- a/frontend/src/hooks/useProgressModal.ts +++ b/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>([]); + // Track displayed percentage and current step for step-based progress const displayedPercentageRef = useRef(0); const currentStepRef = useRef(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 }; } diff --git a/frontend/src/pages/Billing/Usage.tsx b/frontend/src/pages/Billing/Usage.tsx index 64e17e9f..96622989 100644 --- a/frontend/src/pages/Billing/Usage.tsx +++ b/frontend/src/pages/Billing/Usage.tsx @@ -71,7 +71,7 @@ export default function Usage() {
-

Acoount Limits Usage the End1

+

Acoount Limits Usagennot

Monitor your plan limits and usage statistics

diff --git a/frontend/src/pages/Planner/Clusters.tsx b/frontend/src/pages/Planner/Clusters.tsx index 572e16b6..b402d315 100644 --- a/frontend/src/pages/Planner/Clusters.tsx +++ b/frontend/src/pages/Planner/Clusters.tsx @@ -207,7 +207,7 @@ export default function Clusters() { if (result.success && result.task_id) { // Async task - show progress modal - progressModal.openModal(result.task_id, 'Generating Ideas', 'ai-generate-ideas-01'); + progressModal.openModal(result.task_id, 'Generating Ideas', 'ai-generate-ideas-01-desktop'); } else if (result.success && result.ideas_created) { // Synchronous completion toast.success(result.message || 'Ideas generated successfully'); @@ -249,7 +249,7 @@ export default function Clusters() { if (result.task_id) { // Async task - open progress modal hasReloadedRef.current = false; - progressModal.openModal(result.task_id, 'Generating Content Ideas', 'ai-generate-ideas-01'); + progressModal.openModal(result.task_id, 'Generating Content Ideas', 'ai-generate-ideas-01-desktop'); // Don't show toast - progress modal will show status } else { // Synchronous completion @@ -482,6 +482,7 @@ export default function Clusters() { details={progressModal.progress.details} taskId={progressModal.taskId || undefined} functionId={progressModal.functionId} + stepLogs={progressModal.stepLogs} onClose={() => { progressModal.closeModal(); // Reload once when modal closes if task was completed diff --git a/frontend/src/pages/Planner/Ideas.tsx b/frontend/src/pages/Planner/Ideas.tsx index 2bdafd06..17f83af2 100644 --- a/frontend/src/pages/Planner/Ideas.tsx +++ b/frontend/src/pages/Planner/Ideas.tsx @@ -401,6 +401,7 @@ export default function Ideas() { details={progressModal.progress.details} taskId={progressModal.taskId || undefined} functionId={progressModal.functionId} + stepLogs={progressModal.stepLogs} onClose={() => { const wasCompleted = progressModal.progress.status === 'completed'; progressModal.closeModal();