ai debug and modal texts

frontend/src/pages/Planner/Keywords.tsx

@@ -30,6 +30,7 @@ import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/di
 import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
+import { useResourceDebug } from '../../hooks/useResourceDebug';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { ArrowUpIcon, PlusIcon, ListIcon, DownloadIcon } from '../../icons';
 import { useKeywordsImportExport } from '../../config/import-export.config';
@@ -89,6 +90,9 @@ export default function Keywords() {
   const progressModal = useProgressModal();
   const hasReloadedRef = useRef(false);
 
+  // Resource Debug toggle - controls AI Function Logs
+  const resourceDebugEnabled = useResourceDebug();
+
   // AI Function Logs state
   const [aiLogs, setAiLogs] = useState<Array<{
     timestamp: string;
@@ -103,6 +107,20 @@ export default function Keywords() {
   const lastLoggedStepRef = useRef<string | null>(null);
   const lastLoggedPercentageRef = useRef<number>(-1);
 
+  // Helper function to add log entry (only if Resource Debug is enabled)
+  const addAiLog = useCallback((log: {
+    timestamp: string;
+    type: 'request' | 'success' | 'error' | 'step';
+    action: string;
+    data: any;
+    stepName?: string;
+    percentage?: number;
+  }) => {
+    if (resourceDebugEnabled) {
+      setAiLogs(prev => [...prev, log]);
+    }
+  }, [resourceDebugEnabled]);
+
   // Load sectors for active site using sector store
   useEffect(() => {
     if (activeSite) {
@@ -358,13 +376,13 @@ export default function Keywords() {
         sector_id: sectorId,
       };
       
-      // Log request
-      setAiLogs(prev => [...prev, {
+      // Log request (only if Resource Debug is enabled)
+      addAiLog({
         timestamp: new Date().toISOString(),
         type: 'request',
         action: 'auto_cluster (Bulk Action)',
         data: requestData,
-      }]);
+      });
       
       try {
         const result = await autoClusterKeywords(numIds, sectorId);
@@ -374,12 +392,12 @@ export default function Keywords() {
           // Error response from API
           const errorMsg = result.error || 'Failed to cluster keywords';
           // Log error
-          setAiLogs(prev => [...prev, {
+          addAiLog({
             timestamp: new Date().toISOString(),
             type: 'error',
             action: 'auto_cluster (Bulk Action)',
             data: { error: errorMsg, keyword_count: numIds.length },
-          }]);
+          });
           toast.error(errorMsg);
           return;
         }
@@ -387,19 +405,19 @@ export default function Keywords() {
         if (result && result.success) {
           if (result.task_id) {
             // Log success with task_id
-            setAiLogs(prev => [...prev, {
+            addAiLog({
               timestamp: new Date().toISOString(),
               type: 'success',
               action: 'auto_cluster (Bulk Action)',
               data: { task_id: result.task_id, message: result.message, keyword_count: numIds.length },
-            }]);
+            });
             // Async task - open progress modal
             hasReloadedRef.current = false;
             progressModal.openModal(result.task_id, 'Auto-Clustering Keywords', 'ai-auto-cluster-01');
             // Don't show toast - progress modal will show status
           } else {
             // Log success with results
-            setAiLogs(prev => [...prev, {
+            addAiLog({
               timestamp: new Date().toISOString(),
               type: 'success',
               action: 'auto_cluster (Bulk Action)',
@@ -409,7 +427,7 @@ export default function Keywords() {
                 keyword_count: numIds.length,
                 message: result.message,
               },
-            }]);
+            });
             // Synchronous completion
             toast.success(`Clustering complete: ${result.clusters_created || 0} clusters created, ${result.keywords_updated || 0} keywords updated`);
             if (!hasReloadedRef.current) {
@@ -421,12 +439,12 @@ export default function Keywords() {
           // Unexpected response format - show error
           const errorMsg = result?.error || 'Unexpected response format';
           // Log error
-          setAiLogs(prev => [...prev, {
+          addAiLog({
             timestamp: new Date().toISOString(),
             type: 'error',
             action: 'auto_cluster (Bulk Action)',
             data: { error: errorMsg, keyword_count: numIds.length },
-          }]);
+          });
           toast.error(errorMsg);
         }
       } catch (error: any) {
@@ -440,12 +458,12 @@ export default function Keywords() {
           }
         }
         // Log error
-        setAiLogs(prev => [...prev, {
+        addAiLog({
           timestamp: new Date().toISOString(),
           type: 'error',
           action: 'auto_cluster (Bulk Action)',
           data: { error: errorMsg, keyword_count: numIds.length },
-        }]);
+        });
         toast.error(errorMsg);
       }
     } else {
@@ -470,7 +488,7 @@ export default function Keywords() {
       const stepType = currentStatus === 'error' ? 'error' : 
                       currentStatus === 'completed' ? 'success' : 'step';
       
-      setAiLogs(prev => [...prev, {
+      addAiLog({
         timestamp: new Date().toISOString(),
         type: stepType,
         action: progressModal.title || 'AI Function',
@@ -483,7 +501,7 @@ export default function Keywords() {
           status: currentStatus,
           details: progress.details,
         },
-      }]);
+      });
       
       lastLoggedStepRef.current = currentStep;
       lastLoggedPercentageRef.current = currentPercentage;
@@ -493,7 +511,7 @@ export default function Keywords() {
       const stepType = currentStatus === 'error' ? 'error' : 
                       currentStatus === 'completed' ? 'success' : 'step';
       
-      setAiLogs(prev => [...prev, {
+      addAiLog({
         timestamp: new Date().toISOString(),
         type: stepType,
         action: progressModal.title || 'AI Function',
@@ -506,7 +524,7 @@ export default function Keywords() {
           status: currentStatus,
           details: progress.details,
         },
-      }]);
+      });
       
       lastLoggedPercentageRef.current = currentPercentage;
     }
@@ -518,7 +536,7 @@ export default function Keywords() {
           (currentStatus === 'completed' && lastLoggedStepRef.current !== 'completed')) {
         const stepType = currentStatus === 'error' ? 'error' : 'success';
         
-        setAiLogs(prev => [...prev, {
+        addAiLog({
           timestamp: new Date().toISOString(),
           type: stepType,
           action: progressModal.title || 'AI Function',
@@ -531,12 +549,12 @@ export default function Keywords() {
             status: currentStatus,
             details: progress.details,
           },
-        }]);
+        });
         
         lastLoggedStepRef.current = currentStep || currentStatus;
       }
     }
-  }, [progressModal.progress, progressModal.taskId, progressModal.isOpen, progressModal.title]);
+  }, [progressModal.progress, progressModal.taskId, progressModal.isOpen, progressModal.title, addAiLog]);
 
   // Reset step tracking when modal closes or opens
   useEffect(() => {
@@ -888,8 +906,8 @@ export default function Keywords() {
         }}
       />
 
-      {/* AI Function Logs - Display below table */}
-      {aiLogs.length > 0 && (
+      {/* AI Function Logs - Display below table (only when Resource Debug is enabled) */}
+      {resourceDebugEnabled && aiLogs.length > 0 && (
         <div className="mt-6 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
           <div className="flex items-center justify-between mb-3">
             <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">