Add function_id tracking and enable JSON mode for all AI functions

frontend/src/components/common/ProgressModal.tsx

@@ -19,8 +19,16 @@ export interface ProgressModalProps {
   onClose?: () => void;
   onCancel?: () => void;
   taskId?: string;
+  functionId?: string; // AI function ID for tracking (e.g., "ai-cluster-01")
 }
 
+// Generate modal instance ID (increments per modal instance)
+let modalInstanceCounter = 0;
+const getModalInstanceId = () => {
+  modalInstanceCounter++;
+  return `modal-${String(modalInstanceCounter).padStart(2, '0')}`;
+};
+
 export default function ProgressModal({
   isOpen,
   title,
@@ -31,7 +39,17 @@ export default function ProgressModal({
   onClose,
   onCancel,
   taskId,
+  functionId,
 }: ProgressModalProps) {
+  // Generate modal instance ID on first render
+  const modalInstanceIdRef = React.useRef<string | null>(null);
+  if (!modalInstanceIdRef.current) {
+    modalInstanceIdRef.current = getModalInstanceId();
+  }
+  const modalInstanceId = modalInstanceIdRef.current;
+  
+  // Build full function ID with modal instance
+  const fullFunctionId = functionId ? `${functionId}-${modalInstanceId}` : null;
   // Auto-close on completion after 2 seconds
   // Don't auto-close on error - let user manually close to see error details
   const hasAutoClosedRef = React.useRef(false);
@@ -175,10 +193,15 @@ export default function ProgressModal({
           </div>
         )}
 
-        {/* Task ID (for debugging) */}
-        {taskId && import.meta.env.DEV && (
-          <div className="mb-4 text-xs text-gray-400 dark:text-gray-600">
-            Task ID: {taskId}
+        {/* Function ID and Task ID (for debugging) */}
+        {(fullFunctionId || taskId) && import.meta.env.DEV && (
+          <div className="mb-4 space-y-1 text-xs text-gray-400 dark:text-gray-600">
+            {fullFunctionId && (
+              <div>Function ID: {fullFunctionId}</div>
+            )}
+            {taskId && (
+              <div>Task ID: {taskId}</div>
+            )}
           </div>
         )}
 

frontend/src/hooks/useProgressModal.ts

@@ -19,17 +19,19 @@ export interface UseProgressModalReturn {
   isOpen: boolean;
   title: string;
   taskId: string | null;
-  openModal: (taskId: string, title: string) => void;
+  openModal: (taskId: string, title: string, functionId?: string) => void;
   updateTaskId: (taskId: string) => void;
   closeModal: () => void;
   setError: (errorMessage: string) => void;
   reset: () => void;
+  functionId?: string; // AI function ID for tracking
 }
 
 export function useProgressModal(): UseProgressModalReturn {
   const [isOpen, setIsOpen] = useState(false);
   const [taskId, setTaskId] = useState<string | null>(null);
   const [title, setTitle] = useState('');
+  const [functionId, setFunctionId] = useState<string | undefined>(undefined);
   const [progress, setProgress] = useState<ProgressState>({
     percentage: 0,
     message: 'Initializing...',
@@ -532,7 +534,7 @@ export function useProgressModal(): UseProgressModalReturn {
     };
   }, [taskId, isOpen]);
 
-  const openModal = useCallback((newTaskId: string, newTitle: string) => {
+  const openModal = useCallback((newTaskId: string, newTitle: string, newFunctionId?: string) => {
     // Clear any existing transition timeout
     if (stepTransitionTimeoutRef.current) {
       clearTimeout(stepTransitionTimeoutRef.current);
@@ -542,6 +544,7 @@ export function useProgressModal(): UseProgressModalReturn {
     currentStepRef.current = null;
     setTaskId(newTaskId);
     setTitle(newTitle);
+    setFunctionId(newFunctionId);
     setIsOpen(true);
     setProgress({
       percentage: 0,
@@ -610,6 +613,7 @@ export function useProgressModal(): UseProgressModalReturn {
     reset,
     title, // Expose title for use in component
     taskId, // Expose taskId for use in ProgressModal
+    functionId, // Expose functionId for use in ProgressModal
   };
 }
 

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');
+          progressModal.openModal(result.task_id, 'Generating Ideas', 'ai-generate-ideas-01');
         } 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');
+            progressModal.openModal(result.task_id, 'Generating Content Ideas', 'ai-generate-ideas-01');
             // Don't show toast - progress modal will show status
           } else {
             // Synchronous completion
@@ -481,6 +481,7 @@ export default function Clusters() {
         message={progressModal.progress.message}
         details={progressModal.progress.details}
         taskId={progressModal.taskId || undefined}
+        functionId={progressModal.functionId}
         onClose={() => {
           progressModal.closeModal();
           // Reload once when modal closes if task was completed

frontend/src/pages/Planner/Ideas.tsx

@@ -400,6 +400,7 @@ export default function Ideas() {
         message={progressModal.progress.message}
         details={progressModal.progress.details}
         taskId={progressModal.taskId || undefined}
+        functionId={progressModal.functionId}
         onClose={() => {
           const wasCompleted = progressModal.progress.status === 'completed';
           progressModal.closeModal();

frontend/src/pages/Planner/Keywords.tsx

@@ -395,7 +395,7 @@ export default function Keywords() {
             }]);
             // Async task - open progress modal
             hasReloadedRef.current = false;
-            progressModal.openModal(result.task_id, 'Auto-Clustering Keywords');
+            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
@@ -870,6 +870,7 @@ export default function Keywords() {
         message={progressModal.progress.message}
         details={progressModal.progress.details}
         taskId={progressModal.taskId || undefined}
+        functionId={progressModal.functionId}
         onClose={() => {
           progressModal.closeModal();
           // Reload once when modal closes if task was completed

frontend/src/pages/Writer/Tasks.tsx

@@ -250,7 +250,7 @@ export default function Tasks() {
               data: { task_id: result.task_id, message: result.message },
             }]);
             // Async task - show progress modal
-            progressModal.openModal(result.task_id, 'Generating Content');
+            progressModal.openModal(result.task_id, 'Generating Content', 'ai-generate-content-03');
             toast.success('Content generation started');
           } else {
             // Log success with results
@@ -635,6 +635,7 @@ export default function Tasks() {
         message={progressModal.progress.message}
         details={progressModal.progress.details}
         taskId={progressModal.taskId || undefined}
+        functionId={progressModal.functionId}
         onClose={() => {
           const wasCompleted = progressModal.progress.status === 'completed';
           progressModal.closeModal();