Research component integration, Copilotkit implementation, SEO copilotkit implementation, Wix SEO metadata complete, Wix SEO metadata review

frontend/src/hooks/useBlogWriterState.ts

@@ -116,10 +116,10 @@ export const useBlogWriterState = () => {
         }
       }
       
-      // Save to localStorage for persistence
+      // Save to localStorage for persistence (using shared cache utility)
       try {
-        localStorage.setItem('blog_outline', JSON.stringify(result.outline));
-        localStorage.setItem('blog_title_options', JSON.stringify(result.title_options || []));
+        const { blogWriterCache } = require('../services/blogWriterCache');
+        blogWriterCache.cacheOutline(result.outline, result.title_options);
         localStorage.setItem('blog_selected_title', result.title_options?.[0] || '');
         console.log('Saved outline data to localStorage');
       } catch (error) {

frontend/src/hooks/useCopilotKitHealth.ts

@@ -0,0 +1,161 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useCopilotKitHealthContext } from '../contexts/CopilotKitHealthContext';
+
+interface UseCopilotKitHealthOptions {
+  /**
+   * Initial delay before first health check (milliseconds)
+   * @default 1000
+   */
+  initialDelay?: number;
+  /**
+   * Interval between health checks when healthy (milliseconds)
+   * @default 60000 (1 minute)
+   */
+  healthyInterval?: number;
+  /**
+   * Exponential backoff intervals when unhealthy (milliseconds)
+   * @default [5000, 10000, 30000, 60000]
+   */
+  unhealthyIntervals?: number[];
+  /**
+   * Enable automatic health checking
+   * @default true
+   */
+  enabled?: boolean;
+}
+
+/**
+ * Hook to monitor CopilotKit health status with automatic polling
+ * Uses exponential backoff when unhealthy
+ */
+export const useCopilotKitHealth = (options: UseCopilotKitHealthOptions = {}) => {
+  const {
+    initialDelay = 1000,
+    healthyInterval = 60000, // 1 minute
+    unhealthyIntervals = [5000, 10000, 30000, 60000], // 5s, 10s, 30s, 60s
+    enabled = true,
+  } = options;
+
+  const {
+    isHealthy,
+    isChecking,
+    lastChecked,
+    errorMessage,
+    retryCount,
+    isAvailable,
+    checkHealth,
+    markUnhealthy,
+  } = useCopilotKitHealthContext();
+
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const scheduleNextCheck = useCallback(() => {
+    // Clear any existing timeouts/intervals
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    if (!enabled) return;
+
+    // Calculate next check interval based on health status
+    let nextInterval: number;
+    
+    if (isHealthy) {
+      // When healthy, use standard interval
+      nextInterval = healthyInterval;
+    } else {
+      // When unhealthy, use exponential backoff
+      const intervalIndex = Math.min(retryCount, unhealthyIntervals.length - 1);
+      nextInterval = unhealthyIntervals[intervalIndex];
+    }
+
+    // Schedule next check
+    timeoutRef.current = setTimeout(() => {
+      checkHealth();
+    }, nextInterval);
+  }, [enabled, isHealthy, retryCount, healthyInterval, unhealthyIntervals, checkHealth]);
+
+  // Initial health check on mount
+  useEffect(() => {
+    if (!enabled) return;
+
+    // Initial delay before first check
+    const initialTimeout = setTimeout(() => {
+      checkHealth();
+    }, initialDelay);
+
+    return () => {
+      clearTimeout(initialTimeout);
+    };
+  }, [enabled, initialDelay, checkHealth]);
+
+  // Schedule next check after health status changes
+  useEffect(() => {
+    if (!enabled || isChecking) return;
+
+    scheduleNextCheck();
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [enabled, isChecking, scheduleNextCheck]);
+
+  // Also handle CopilotKit runtime errors by listening to window events
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleCopilotKitError = (event: Event) => {
+      // Check if this is a CopilotKit-related error
+      const errorEvent = event as ErrorEvent;
+      if (
+        errorEvent.message?.includes('copilotkit') ||
+        errorEvent.message?.includes('CopilotKit') ||
+        errorEvent.filename?.includes('copilotkit')
+      ) {
+        markUnhealthy(`Runtime error: ${errorEvent.message}`);
+      }
+    };
+
+    window.addEventListener('error', handleCopilotKitError);
+    window.addEventListener('unhandledrejection', (event) => {
+      const reason = event.reason;
+      if (
+        typeof reason === 'string' && (
+          reason.includes('copilotkit') ||
+          reason.includes('CopilotKit') ||
+          reason.includes('ERR_CERT_COMMON_NAME_INVALID') ||
+          reason.includes('CORS')
+        )
+      ) {
+        markUnhealthy(`Unhandled promise rejection: ${reason}`);
+      }
+    });
+
+    return () => {
+      window.removeEventListener('error', handleCopilotKitError);
+    };
+  }, [enabled, markUnhealthy]);
+
+  return {
+    isHealthy,
+    isAvailable,
+    isChecking,
+    lastChecked,
+    errorMessage,
+    retryCount,
+    checkHealth,
+    markUnhealthy,
+  };
+};
+

frontend/src/hooks/usePhaseNavigation.ts

@@ -170,8 +170,8 @@ export const usePhaseNavigation = (
         // User is NOT in SEO phase - can progress to publish
         // This handles cases where user navigates away and comes back
         // Only auto-progress if user is already in a different phase (not actively in SEO)
-        if (currentPhase !== 'publish') {
-          setCurrentPhase('publish');
+      if (currentPhase !== 'publish') {
+        setCurrentPhase('publish');
         }
       }
     }

frontend/src/hooks/usePolling.ts

@@ -153,7 +153,7 @@ export function usePolling(
         attemptsRef.current++;
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
-        console.error('Polling error:', errorMessage);
+        console.error('Polling error:', errorMessage, err);
         
         // Check if this is an axios error with subscription limit status
         // This is a fallback in case the interceptor doesn't catch it
@@ -161,15 +161,17 @@ export function usePolling(
         if (axiosError?.response?.status === 429 || axiosError?.response?.status === 402) {
           console.log('usePolling: Detected subscription error in axios error response', {
             status: axiosError.response.status,
-            data: axiosError.response.data
+            data: axiosError.response.data,
+            errorDataKeys: axiosError.response.data ? Object.keys(axiosError.response.data) : null
           });
           
           // Trigger subscription error handler (modal will show)
+          // Note: The interceptor may have already called this, but we call it again to be safe
           const handled = triggerSubscriptionError(axiosError);
           console.log('usePolling: triggerSubscriptionError returned', handled);
           
           if (handled) {
-            console.log('usePolling: Subscription error handled, stopping polling');
+            console.log('usePolling: Subscription error handled, stopping polling - modal should be visible');
             const errorMsg = axiosError.response?.data?.message || 
                            axiosError.response?.data?.error || 
                            'Subscription limit exceeded';