Add SEO fields to Tasks model, improve content generation response handling, and enhance progress bar animation

- Added primary_keyword, secondary_keywords, tags, and categories fields to Tasks model
- Updated generate_content function to handle full JSON response with all SEO fields
- Improved progress bar animation: smooth 1% increments every 300ms
- Enhanced step detection for content generation vs clustering vs ideas
- Fixed progress modal to show correct messages for each function type
- Added comprehensive logging to Keywords and Tasks pages for AI functions
- Fixed error handling to show meaningful error messages instead of generic failures

frontend/src/pages/Writer/Tasks.tsx

@@ -3,7 +3,7 @@
  * Consistent with Keywords page layout, structure and design
  */
 
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import {
   fetchTasks,
@@ -75,6 +75,21 @@ export default function Tasks() {
   // Progress modal for AI functions
   const progressModal = useProgressModal();
 
+  // AI Function Logs state
+  const [aiLogs, setAiLogs] = useState<Array<{
+    timestamp: string;
+    type: 'request' | 'success' | 'error' | 'step';
+    action: string;
+    data: any;
+    stepName?: string;
+    percentage?: number;
+  }>>([]);
+  
+  // Track last logged step to avoid duplicates
+  const lastLoggedStepRef = useRef<string | null>(null);
+  const lastLoggedPercentageRef = useRef<number>(-1);
+  const hasReloadedRef = useRef<boolean>(false);
+
   // Load clusters for filter dropdown
   useEffect(() => {
     const loadClusters = async () => {
@@ -208,23 +223,65 @@ export default function Tasks() {
       //   return;
       // }
       
+      const requestData = {
+        ids: [row.id],
+        task_title: row.title,
+        task_id: row.id,
+      };
+      
+      // Log request
+      setAiLogs(prev => [...prev, {
+        timestamp: new Date().toISOString(),
+        type: 'request',
+        action: 'generate_content (Row Action)',
+        data: requestData,
+      }]);
+
       try {
         const result = await autoGenerateContent([row.id]);
         
         if (result.success) {
           if (result.task_id) {
+            // Log success with task_id
+            setAiLogs(prev => [...prev, {
+              timestamp: new Date().toISOString(),
+              type: 'success',
+              action: 'generate_content (Row Action)',
+              data: { task_id: result.task_id, message: result.message },
+            }]);
             // Async task - show progress modal
             progressModal.openModal(result.task_id, 'Generating Content');
             toast.success('Content generation started');
           } else {
+            // Log success with results
+            setAiLogs(prev => [...prev, {
+              timestamp: new Date().toISOString(),
+              type: 'success',
+              action: 'generate_content (Row Action)',
+              data: { tasks_updated: result.tasks_updated || 0, message: result.message },
+            }]);
             // Synchronous completion
             toast.success(`Content generated successfully: ${result.tasks_updated || 0} article generated`);
             await loadTasks();
           }
         } else {
+          // Log error
+          setAiLogs(prev => [...prev, {
+            timestamp: new Date().toISOString(),
+            type: 'error',
+            action: 'generate_content (Row Action)',
+            data: { error: result.error || 'Failed to generate content' },
+          }]);
           toast.error(result.error || 'Failed to generate content');
         }
       } catch (error: any) {
+        // Log error
+        setAiLogs(prev => [...prev, {
+          timestamp: new Date().toISOString(),
+          type: 'error',
+          action: 'generate_content (Row Action)',
+          data: { error: error.message || 'Unknown error occurred' },
+        }]);
         toast.error(`Failed to generate content: ${error.message}`);
       }
     }
@@ -242,29 +299,169 @@ export default function Tasks() {
         toast.error('Maximum 10 tasks allowed for image generation');
         return;
       }
+      const numIds = ids.map(id => parseInt(id));
+      const selectedTasks = tasks.filter(t => numIds.includes(t.id));
+      const requestData = {
+        ids: numIds,
+        task_count: numIds.length,
+        task_titles: selectedTasks.map(t => t.title),
+      };
+      
+      // Log request
+      setAiLogs(prev => [...prev, {
+        timestamp: new Date().toISOString(),
+        type: 'request',
+        action: 'generate_images (Bulk Action)',
+        data: requestData,
+      }]);
+
       try {
-        const numIds = ids.map(id => parseInt(id));
         const result = await autoGenerateImages(numIds);
         if (result.success) {
           if (result.task_id) {
+            // Log success with task_id
+            setAiLogs(prev => [...prev, {
+              timestamp: new Date().toISOString(),
+              type: 'success',
+              action: 'generate_images (Bulk Action)',
+              data: { task_id: result.task_id, message: result.message, task_count: numIds.length },
+            }]);
             // Async task - show progress modal
             progressModal.openModal(result.task_id, 'Generating Images');
             toast.success('Image generation started');
           } else {
+            // Log success with results
+            setAiLogs(prev => [...prev, {
+              timestamp: new Date().toISOString(),
+              type: 'success',
+              action: 'generate_images (Bulk Action)',
+              data: { images_created: result.images_created || 0, message: result.message, task_count: numIds.length },
+            }]);
             // Synchronous completion
             toast.success(`Image generation complete: ${result.images_created || 0} images generated`);
             await loadTasks();
           }
         } else {
+          // Log error
+          setAiLogs(prev => [...prev, {
+            timestamp: new Date().toISOString(),
+            type: 'error',
+            action: 'generate_images (Bulk Action)',
+            data: { error: result.error || 'Failed to generate images', task_count: numIds.length },
+          }]);
           toast.error(result.error || 'Failed to generate images');
         }
       } catch (error: any) {
+        // Log error
+        setAiLogs(prev => [...prev, {
+          timestamp: new Date().toISOString(),
+          type: 'error',
+          action: 'generate_images (Bulk Action)',
+          data: { error: error.message || 'Unknown error occurred', task_count: numIds.length },
+        }]);
         toast.error(`Failed to generate images: ${error.message}`);
       }
     } else {
       toast.info(`Bulk action "${action}" for ${ids.length} items`);
     }
-  }, [toast, loadTasks, progressModal]);
+  }, [toast, loadTasks, progressModal, tasks]);
+
+  // Log AI function progress steps
+  useEffect(() => {
+    if (!progressModal.taskId || !progressModal.isOpen) {
+      return;
+    }
+
+    const progress = progressModal.progress;
+    const currentStep = progress.details?.phase || '';
+    const currentPercentage = progress.percentage;
+    const currentMessage = progress.message;
+    const currentStatus = progress.status;
+
+    // Log step changes
+    if (currentStep && currentStep !== lastLoggedStepRef.current) {
+      const stepType = currentStatus === 'error' ? 'error' : 
+                      currentStatus === 'completed' ? 'success' : 'step';
+      
+      setAiLogs(prev => [...prev, {
+        timestamp: new Date().toISOString(),
+        type: stepType,
+        action: progressModal.title || 'AI Function',
+        stepName: currentStep,
+        percentage: currentPercentage,
+        data: {
+          step: currentStep,
+          message: currentMessage,
+          percentage: currentPercentage,
+          status: currentStatus,
+          details: progress.details,
+        },
+      }]);
+      
+      lastLoggedStepRef.current = currentStep;
+      lastLoggedPercentageRef.current = currentPercentage;
+    }
+    // Log percentage changes for same step (if significant change)
+    else if (currentStep && Math.abs(currentPercentage - lastLoggedPercentageRef.current) >= 10) {
+      const stepType = currentStatus === 'error' ? 'error' : 
+                      currentStatus === 'completed' ? 'success' : 'step';
+      
+      setAiLogs(prev => [...prev, {
+        timestamp: new Date().toISOString(),
+        type: stepType,
+        action: progressModal.title || 'AI Function',
+        stepName: currentStep,
+        percentage: currentPercentage,
+        data: {
+          step: currentStep,
+          message: currentMessage,
+          percentage: currentPercentage,
+          status: currentStatus,
+          details: progress.details,
+        },
+      }]);
+      
+      lastLoggedPercentageRef.current = currentPercentage;
+    }
+    // Log status changes (error, completed)
+    else if (currentStatus === 'error' || currentStatus === 'completed') {
+      // Only log if we haven't already logged this status for this step
+      if (currentStep !== lastLoggedStepRef.current || 
+          (currentStatus === 'error' && lastLoggedStepRef.current !== 'error') ||
+          (currentStatus === 'completed' && lastLoggedStepRef.current !== 'completed')) {
+        const stepType = currentStatus === 'error' ? 'error' : 'success';
+        
+        setAiLogs(prev => [...prev, {
+          timestamp: new Date().toISOString(),
+          type: stepType,
+          action: progressModal.title || 'AI Function',
+          stepName: currentStep || 'Final',
+          percentage: currentPercentage,
+          data: {
+            step: currentStep || 'Final',
+            message: currentMessage,
+            percentage: currentPercentage,
+            status: currentStatus,
+            details: progress.details,
+          },
+        }]);
+        
+        lastLoggedStepRef.current = currentStep || currentStatus;
+      }
+    }
+  }, [progressModal.progress, progressModal.taskId, progressModal.isOpen, progressModal.title]);
+
+  // Reset step tracking when modal closes or opens
+  useEffect(() => {
+    if (!progressModal.isOpen) {
+      lastLoggedStepRef.current = null;
+      lastLoggedPercentageRef.current = -1;
+      hasReloadedRef.current = false; // Reset reload flag when modal closes
+    } else {
+      // Reset reload flag when modal opens for a new task
+      hasReloadedRef.current = false;
+    }
+  }, [progressModal.isOpen, progressModal.taskId]);
 
   // Create page config
   const pageConfig = useMemo(() => {
@@ -442,12 +639,84 @@ export default function Tasks() {
           const wasCompleted = progressModal.progress.status === 'completed';
           progressModal.closeModal();
           // Reload data after modal closes (if completed)
-          if (wasCompleted) {
+          if (wasCompleted && !hasReloadedRef.current) {
+            hasReloadedRef.current = true;
             loadTasks();
+            setTimeout(() => {
+              hasReloadedRef.current = false;
+            }, 1000);
           }
         }}
       />
 
+      {/* AI Function Logs - Display below table */}
+      {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">
+              AI Function Logs
+            </h3>
+            <button
+              onClick={() => setAiLogs([])}
+              className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            >
+              Clear Logs
+            </button>
+          </div>
+          <div className="space-y-2 max-h-96 overflow-y-auto">
+            {aiLogs.slice().reverse().map((log, index) => (
+              <div
+                key={index}
+                className={`p-3 rounded border text-xs font-mono ${
+                  log.type === 'request'
+                    ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
+                    : log.type === 'success'
+                    ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
+                    : log.type === 'error'
+                    ? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800'
+                    : 'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800'
+                }`}
+              >
+                <div className="flex items-center justify-between mb-1">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className={`font-semibold ${
+                      log.type === 'request'
+                        ? 'text-blue-700 dark:text-blue-300'
+                        : log.type === 'success'
+                        ? 'text-green-700 dark:text-green-300'
+                        : log.type === 'error'
+                        ? 'text-red-700 dark:text-red-300'
+                        : 'text-purple-700 dark:text-purple-300'
+                    }`}>
+                      [{log.type.toUpperCase()}]
+                    </span>
+                    <span className="text-gray-700 dark:text-gray-300">
+                      {log.action}
+                    </span>
+                    {log.stepName && (
+                      <span className="text-xs px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                        {log.stepName}
+                      </span>
+                    )}
+                    {log.percentage !== undefined && (
+                      <span className="text-xs text-gray-500 dark:text-gray-400">
+                        {log.percentage}%
+                      </span>
+                    )}
+                  </div>
+                  <span className="text-gray-500 dark:text-gray-400">
+                    {new Date(log.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+                <pre className="text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-words">
+                  {JSON.stringify(log.data, null, 2)}
+                </pre>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* Create/Edit Modal */}
       <FormModal
         isOpen={isModalOpen}