ai debug and modal texts

frontend/src/pages/Writer/Tasks.tsx

@@ -23,6 +23,7 @@ import {
 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 { TaskIcon, PlusIcon, DownloadIcon } from '../../icons';
 import { createTasksPageConfig } from '../../config/pages/tasks.config';
@@ -85,11 +86,28 @@ export default function Tasks() {
     percentage?: number;
   }>>([]);
   
+  // Resource Debug toggle - controls AI Function Logs
+  const resourceDebugEnabled = useResourceDebug();
+
   // Track last logged step to avoid duplicates
   const lastLoggedStepRef = useRef<string | null>(null);
   const lastLoggedPercentageRef = useRef<number>(-1);
   const hasReloadedRef = useRef<boolean>(false);
 
+  // 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 clusters for filter dropdown
   useEffect(() => {
     const loadClusters = async () => {
@@ -230,12 +248,12 @@ export default function Tasks() {
       };
       
       // Log request
-      setAiLogs(prev => [...prev, {
+      addAiLog({
         timestamp: new Date().toISOString(),
         type: 'request',
         action: 'generate_content (Row Action)',
         data: requestData,
-      }]);
+      });
 
       try {
         const result = await autoGenerateContent([row.id]);
@@ -243,7 +261,7 @@ export default function Tasks() {
         if (result.success) {
           if (result.task_id) {
             // Log success with task_id
-            setAiLogs(prev => [...prev, {
+            addAiLog({
               timestamp: new Date().toISOString(),
               type: 'success',
               action: 'generate_content (Row Action)',
@@ -254,7 +272,7 @@ export default function Tasks() {
             toast.success('Content generation started');
           } else {
             // Log success with results
-            setAiLogs(prev => [...prev, {
+            addAiLog({
               timestamp: new Date().toISOString(),
               type: 'success',
               action: 'generate_content (Row Action)',
@@ -266,7 +284,7 @@ export default function Tasks() {
           }
         } else {
           // Log error
-          setAiLogs(prev => [...prev, {
+          addAiLog({
             timestamp: new Date().toISOString(),
             type: 'error',
             action: 'generate_content (Row Action)',
@@ -276,7 +294,7 @@ export default function Tasks() {
         }
       } catch (error: any) {
         // Log error
-        setAiLogs(prev => [...prev, {
+        addAiLog({
           timestamp: new Date().toISOString(),
           type: 'error',
           action: 'generate_content (Row Action)',
@@ -308,7 +326,7 @@ export default function Tasks() {
       };
       
       // Log request
-      setAiLogs(prev => [...prev, {
+      addAiLog({
         timestamp: new Date().toISOString(),
         type: 'request',
         action: 'generate_images (Bulk Action)',
@@ -320,7 +338,7 @@ export default function Tasks() {
         if (result.success) {
           if (result.task_id) {
             // Log success with task_id
-            setAiLogs(prev => [...prev, {
+            addAiLog({
               timestamp: new Date().toISOString(),
               type: 'success',
               action: 'generate_images (Bulk Action)',
@@ -331,7 +349,7 @@ export default function Tasks() {
             toast.success('Image generation started');
           } else {
             // Log success with results
-            setAiLogs(prev => [...prev, {
+            addAiLog({
               timestamp: new Date().toISOString(),
               type: 'success',
               action: 'generate_images (Bulk Action)',
@@ -343,7 +361,7 @@ export default function Tasks() {
           }
         } else {
           // Log error
-          setAiLogs(prev => [...prev, {
+          addAiLog({
             timestamp: new Date().toISOString(),
             type: 'error',
             action: 'generate_images (Bulk Action)',
@@ -353,7 +371,7 @@ export default function Tasks() {
         }
       } catch (error: any) {
         // Log error
-        setAiLogs(prev => [...prev, {
+        addAiLog({
           timestamp: new Date().toISOString(),
           type: 'error',
           action: 'generate_images (Bulk Action)',
@@ -383,7 +401,7 @@ export default function Tasks() {
       const stepType = currentStatus === 'error' ? 'error' : 
                       currentStatus === 'completed' ? 'success' : 'step';
       
-      setAiLogs(prev => [...prev, {
+      addAiLog({
         timestamp: new Date().toISOString(),
         type: stepType,
         action: progressModal.title || 'AI Function',
@@ -396,7 +414,7 @@ export default function Tasks() {
           status: currentStatus,
           details: progress.details,
         },
-      }]);
+      });
       
       lastLoggedStepRef.current = currentStep;
       lastLoggedPercentageRef.current = currentPercentage;
@@ -406,7 +424,7 @@ export default function Tasks() {
       const stepType = currentStatus === 'error' ? 'error' : 
                       currentStatus === 'completed' ? 'success' : 'step';
       
-      setAiLogs(prev => [...prev, {
+      addAiLog({
         timestamp: new Date().toISOString(),
         type: stepType,
         action: progressModal.title || 'AI Function',
@@ -419,7 +437,7 @@ export default function Tasks() {
           status: currentStatus,
           details: progress.details,
         },
-      }]);
+      });
       
       lastLoggedPercentageRef.current = currentPercentage;
     }
@@ -431,7 +449,7 @@ export default function Tasks() {
           (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',
@@ -444,12 +462,12 @@ export default function Tasks() {
             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(() => {
@@ -657,8 +675,8 @@ export default function Tasks() {
         }}
       />
 
-      {/* 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">