feat(migrations): Rename indexes and update global integration settings fields for improved clarity and functionality

feat(admin): Add API monitoring, debug console, and system health templates for enhanced admin interface

docs: Add AI system cleanup summary and audit report detailing architecture, token management, and recommendations

docs: Introduce credits and tokens system guide outlining configuration, data flow, and monitoring strategies

frontend/src/pages/Planner/Keywords.tsx

@@ -31,7 +31,6 @@ 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, GroupIcon, BoltIcon } from '../../icons';
 import { useKeywordsImportExport } from '../../config/import-export.config';
@@ -90,37 +89,6 @@ 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;
-    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);
-
-  // 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) {
@@ -332,21 +300,6 @@ export default function Keywords() {
       const numIds = ids.map(id => parseInt(id));
       const sectorId = activeSector?.id;
       const selectedKeywords = keywords.filter(k => numIds.includes(k.id));
-      const requestData = {
-        ids: numIds,
-        keyword_count: numIds.length,
-        keyword_names: selectedKeywords.map(k => k.keyword),
-        sector_id: sectorId,
-      };
-      
-      // 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);
         
@@ -354,43 +307,17 @@ export default function Keywords() {
         if (result && result.success === false) {
           // Error response from API
           const errorMsg = result.error || 'Failed to cluster keywords';
-          // Log error
-          addAiLog({
-            timestamp: new Date().toISOString(),
-            type: 'error',
-            action: 'auto_cluster (Bulk Action)',
-            data: { error: errorMsg, keyword_count: numIds.length },
-          });
           toast.error(errorMsg);
           return;
         }
         
         if (result && result.success) {
           if (result.task_id) {
-            // Log success with task_id
-            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
-            addAiLog({
-              timestamp: new Date().toISOString(),
-              type: 'success',
-              action: 'auto_cluster (Bulk Action)',
-              data: { 
-                clusters_created: result.clusters_created || 0, 
-                keywords_updated: result.keywords_updated || 0,
-                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) {
@@ -401,13 +328,6 @@ export default function Keywords() {
         } else {
           // Unexpected response format - show error
           const errorMsg = result?.error || 'Unexpected response format';
-          // Log error
-          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) {
@@ -420,13 +340,6 @@ export default function Keywords() {
             errorMsg = error.message;
           }
         }
-        // Log error
-        addAiLog({
-          timestamp: new Date().toISOString(),
-          type: 'error',
-          action: 'auto_cluster (Bulk Action)',
-          data: { error: errorMsg, keyword_count: numIds.length },
-        });
         toast.error(errorMsg);
       }
     } else {
@@ -434,96 +347,9 @@ export default function Keywords() {
     }
   }, [toast, activeSector, loadKeywords, progressModal, keywords]);
 
-  // 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';
-      
-      addAiLog({
-        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';
-      
-      addAiLog({
-        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';
-        
-        addAiLog({
-          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, addAiLog]);
-
-  // Reset step tracking when modal closes or opens
+  // Reset reload flag 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
@@ -984,74 +810,6 @@ export default function Keywords() {
           }
         }}
       />
-
-      {/* 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">
-              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>
-      )}
     </>
   );
 }