Added YouTube Creator scene building flow documentation

frontend/src/hooks/useContentAssets.ts

@@ -29,7 +29,7 @@ export interface ContentAsset {
 
 export interface AssetFilters {
   asset_type?: 'text' | 'image' | 'video' | 'audio';
-  source_module?: string;
+  source_module?: string | string[]; // Support single or multiple source modules
   search?: string;
   tags?: string[];
   favorites_only?: boolean;
@@ -119,7 +119,15 @@ export const useContentAssets = (filters: AssetFilters = {}) => {
       const currentFilters = filtersRef.current;
       const params = new URLSearchParams();
       if (currentFilters.asset_type) params.append('asset_type', currentFilters.asset_type);
-      if (currentFilters.source_module) params.append('source_module', currentFilters.source_module);
+      if (currentFilters.source_module) {
+        // Handle both string and array cases
+        if (Array.isArray(currentFilters.source_module)) {
+          // For arrays, use the first value (backend doesn't support multiple yet)
+          params.append('source_module', currentFilters.source_module[0]);
+        } else {
+          params.append('source_module', currentFilters.source_module);
+        }
+      }
       if (currentFilters.search) params.append('search', currentFilters.search);
       if (currentFilters.tags && currentFilters.tags.length > 0) params.append('tags', currentFilters.tags.join(','));
       if (currentFilters.favorites_only) params.append('favorites_only', 'true');

frontend/src/hooks/usePreflightCheck.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { checkPreflight, PreflightOperation, PreflightCheckResponse } from '../services/billingService';
 
 export interface UsePreflightCheckOptions {
@@ -6,17 +6,77 @@ export interface UsePreflightCheckOptions {
   onAllowed?: (response: PreflightCheckResponse) => void;
 }
 
+// Global cache for preflight checks to prevent duplicate API calls
+const preflightCache = new Map<string, { response: PreflightCheckResponse; timestamp: number }>();
+const CACHE_TTL = 30000; // 30 seconds cache TTL
+
+// Generate cache key from operation
+const getCacheKey = (operation: PreflightOperation): string => {
+  return `${operation.provider}_${operation.operation_type}_${operation.tokens_requested || 0}`;
+};
+
+// Check if cached response is still valid
+const isCacheValid = (timestamp: number): boolean => {
+  return Date.now() - timestamp < CACHE_TTL;
+};
+
 export const usePreflightCheck = (options?: UsePreflightCheckOptions) => {
   const [isChecking, setIsChecking] = useState(false);
   const [lastCheck, setLastCheck] = useState<PreflightCheckResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const checkingRef = useRef<Set<string>>(new Set()); // Track ongoing checks to prevent duplicates
 
   const check = useCallback(async (operation: PreflightOperation): Promise<PreflightCheckResponse> => {
+    const cacheKey = getCacheKey(operation);
+    
+    // Check cache first
+    const cached = preflightCache.get(cacheKey);
+    if (cached && isCacheValid(cached.timestamp)) {
+      setLastCheck(cached.response);
+      return cached.response;
+    }
+    
+    // Prevent duplicate concurrent checks for the same operation
+    if (checkingRef.current.has(cacheKey)) {
+      // Wait for existing check to complete
+      return new Promise((resolve) => {
+        const checkInterval = setInterval(() => {
+          const cached = preflightCache.get(cacheKey);
+          if (cached && isCacheValid(cached.timestamp)) {
+            clearInterval(checkInterval);
+            setLastCheck(cached.response);
+            resolve(cached.response);
+          }
+        }, 100);
+        
+        // Timeout after 5 seconds
+        setTimeout(() => {
+          clearInterval(checkInterval);
+          resolve({
+            can_proceed: true,
+            estimated_cost: 0,
+            operations: [],
+            total_cost: 0,
+            usage_summary: null,
+            cached: false,
+          } as PreflightCheckResponse);
+        }, 5000);
+      });
+    }
+    
+    checkingRef.current.add(cacheKey);
     setIsChecking(true);
     setError(null);
     
     try {
       const response = await checkPreflight(operation);
+      
+      // Cache the response
+      preflightCache.set(cacheKey, {
+        response,
+        timestamp: Date.now(),
+      });
+      
       setLastCheck(response);
       
       if (!response.can_proceed) {
@@ -53,6 +113,7 @@ export const usePreflightCheck = (options?: UsePreflightCheckOptions) => {
       return blockedResponse;
     } finally {
       setIsChecking(false);
+      checkingRef.current.delete(cacheKey);
     }
   }, [options]);
 

frontend/src/hooks/useYouTubeCreatorState.ts

@@ -0,0 +1,132 @@
+import { useState, useCallback, useEffect } from 'react';
+import { VideoPlan, Scene } from '../services/youtubeApi';
+import { Resolution, DurationType, VideoType } from '../components/YouTubeCreator/constants';
+
+export interface YouTubeCreatorState {
+  // Step 1: Plan inputs
+  userIdea: string;
+  durationType: DurationType;
+  videoType: VideoType | '';
+  targetAudience: string;
+  videoGoal: string;
+  brandStyle: string;
+  referenceImage: string;
+  avatarUrl: string | null;
+  // Note: avatarPreview is not persisted (can be blob URL) - regenerated from avatarUrl
+  
+  // Step 1: Plan output
+  videoPlan: VideoPlan | null;
+  
+  // Step 2: Scenes
+  scenes: Scene[];
+  editingSceneId: number | null;
+  editedScene: Partial<Scene> | null;
+  
+  // Step 3: Render
+  renderTaskId: string | null;
+  renderStatus: any;
+  renderProgress: number;
+  resolution: Resolution;
+  combineScenes: boolean;
+  
+  // UI state
+  activeStep: number;
+  
+  // Timestamps
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+const DEFAULT_STATE: YouTubeCreatorState = {
+  userIdea: '',
+  durationType: 'medium',
+  videoType: '',
+  targetAudience: '',
+  videoGoal: '',
+  brandStyle: '',
+  referenceImage: '',
+  avatarUrl: null,
+  videoPlan: null,
+  scenes: [],
+  editingSceneId: null,
+  editedScene: null,
+  renderTaskId: null,
+  renderStatus: null,
+  renderProgress: 0,
+  resolution: '720p',
+  combineScenes: true,
+  activeStep: 0,
+};
+
+const STORAGE_KEY = 'youtube_creator_state';
+
+export const useYouTubeCreatorState = () => {
+  const [state, setState] = useState<YouTubeCreatorState>(() => {
+    // Initialize from localStorage if available
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        
+        // Restore state with defaults for any missing fields
+        const restoredState: YouTubeCreatorState = {
+          ...DEFAULT_STATE,
+          ...parsed,
+          // Ensure arrays are arrays (not null/undefined)
+          scenes: Array.isArray(parsed.scenes) ? parsed.scenes : [],
+          // Ensure dates are preserved
+          createdAt: parsed.createdAt || new Date().toISOString(),
+          updatedAt: parsed.updatedAt || new Date().toISOString(),
+        };
+        
+        console.log('[useYouTubeCreatorState] Restored state from localStorage:', {
+          hasPlan: !!restoredState.videoPlan,
+          scenesCount: restoredState.scenes.length,
+          activeStep: restoredState.activeStep,
+        });
+        
+        return restoredState;
+      }
+    } catch (error) {
+      console.error('[useYouTubeCreatorState] Error loading state from localStorage:', error);
+    }
+    return DEFAULT_STATE;
+  });
+
+  // Persist state to localStorage on every change
+  useEffect(() => {
+    try {
+      const stateToSave: YouTubeCreatorState = {
+        ...state,
+        updatedAt: new Date().toISOString(),
+        createdAt: state.createdAt || new Date().toISOString(),
+      };
+      
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
+    } catch (error) {
+      console.error('[useYouTubeCreatorState] Error saving state to localStorage:', error);
+    }
+  }, [state]);
+
+  // Update state helper
+  const updateState = useCallback((updates: Partial<YouTubeCreatorState>) => {
+    setState((prev) => ({
+      ...prev,
+      ...updates,
+    }));
+  }, []);
+
+  // Clear state helper (for reset/new project)
+  const clearState = useCallback(() => {
+    setState(DEFAULT_STATE);
+    localStorage.removeItem(STORAGE_KEY);
+    console.log('[useYouTubeCreatorState] State cleared');
+  }, []);
+
+  return {
+    state,
+    updateState,
+    clearState,
+  };
+};
+