@umituz/react-native-ai-generation-content 1.48.2 → 1.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.48.2",
+  "version": "1.50.0",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/creations/domain/entities/Creation.ts

@@ -35,6 +35,9 @@ export interface Creation {
   // Extended fields for job-based creations
   readonly status?: CreationStatus;
   readonly output?: CreationOutput;
+  // Background job tracking - FAL queue requestId and model
+  readonly requestId?: string;
+  readonly model?: string;
   // Soft delete - if set, the creation is considered deleted
   readonly deletedAt?: Date;
 }
@@ -58,6 +61,9 @@ export interface CreationDocument {
   readonly createdAt: FirebaseTimestamp | Date;
   readonly completedAt?: FirebaseTimestamp | Date;
   readonly deletedAt?: FirebaseTimestamp | Date;
+  // Background job tracking - FAL queue requestId and model
+  readonly requestId?: string;
+  readonly model?: string;
 }
 
 interface FirebaseTimestamp {
@@ -113,6 +119,8 @@ export function mapDocumentToCreation(
     ratedAt: ratedAtDate,
     status: data.status as CreationStatus | undefined,
     output: data.output ?? undefined,
+    requestId: data.requestId,
+    model: data.model,
     deletedAt: deletedAtDate,
   };
 }

package/src/domains/creations/index.ts

@@ -125,6 +125,11 @@ export type {
   BaseProcessingStartData,
   BaseProcessingResult,
 } from "./presentation/hooks/useCreationPersistence";
+export { useProcessingJobsPoller } from "./presentation/hooks/useProcessingJobsPoller";
+export type {
+  UseProcessingJobsPollerConfig,
+  UseProcessingJobsPollerReturn,
+} from "./presentation/hooks/useProcessingJobsPoller";
 
 // =============================================================================
 // PRESENTATION LAYER - Components

package/src/domains/creations/infrastructure/repositories/CreationsWriter.ts

@@ -8,6 +8,7 @@ declare const __DEV__: boolean;
 const UPDATABLE_FIELDS = [
   "metadata", "isShared", "uri", "type", "prompt", "status",
   "output", "rating", "ratedAt", "isFavorite", "deletedAt",
+  "requestId", "model",
 ] as const;
 
 /**
@@ -34,6 +35,8 @@ export class CreationsWriter {
       ...(creation.status !== undefined && { status: creation.status }),
       ...(creation.output !== undefined && { output: creation.output }),
       ...(creation.prompt !== undefined && { prompt: creation.prompt }),
+      ...(creation.requestId !== undefined && { requestId: creation.requestId }),
+      ...(creation.model !== undefined && { model: creation.model }),
     };
 
     try {

package/src/domains/creations/presentation/hooks/useProcessingJobsPoller.ts

@@ -0,0 +1,163 @@
+/**
+ * useProcessingJobsPoller Hook
+ * Polls FAL queue status for "processing" creations and updates Firestore when complete
+ * Enables true background generation - works even after wizard is dismissed
+ * Uses provider registry internally - no need to pass FAL functions
+ */
+
+import { useEffect, useRef, useCallback } from "react";
+import { providerRegistry } from "../../../../infrastructure/services/provider-registry.service";
+import type { Creation } from "../../domain/entities/Creation";
+import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
+
+declare const __DEV__: boolean;
+
+const POLL_INTERVAL_MS = 5000; // Poll every 5 seconds
+
+export interface UseProcessingJobsPollerConfig {
+  readonly userId?: string | null;
+  readonly creations: Creation[];
+  readonly repository: ICreationsRepository;
+  readonly enabled?: boolean;
+}
+
+export interface UseProcessingJobsPollerReturn {
+  readonly processingCount: number;
+}
+
+interface FalResult {
+  video?: { url?: string };
+  output?: string;
+  images?: Array<{ url?: string }>;
+  image?: { url?: string };
+}
+
+function extractResultUrl(result: FalResult): { imageUrl?: string; videoUrl?: string } {
+  // Video result
+  if (result.video?.url) {
+    return { videoUrl: result.video.url };
+  }
+  // Output URL (some models)
+  if (typeof result.output === "string" && result.output.startsWith("http")) {
+    if (result.output.includes(".mp4") || result.output.includes("video")) {
+      return { videoUrl: result.output };
+    }
+    return { imageUrl: result.output };
+  }
+  // Images array
+  if (result.images?.[0]?.url) {
+    return { imageUrl: result.images[0].url };
+  }
+  // Single image
+  if (result.image?.url) {
+    return { imageUrl: result.image.url };
+  }
+  return {};
+}
+
+export function useProcessingJobsPoller(
+  config: UseProcessingJobsPollerConfig,
+): UseProcessingJobsPollerReturn {
+  const {
+    userId,
+    creations,
+    repository,
+    enabled = true,
+  } = config;
+
+  const pollingRef = useRef<Set<string>>(new Set());
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Find creations that need polling
+  const processingJobs = creations.filter(
+    (c) => c.status === "processing" && c.requestId && c.model,
+  );
+
+  const pollJob = useCallback(
+    async (creation: Creation) => {
+      if (!userId || !creation.requestId || !creation.model) return;
+      if (pollingRef.current.has(creation.id)) return;
+
+      const provider = providerRegistry.getActiveProvider();
+      if (!provider || !provider.isInitialized()) return;
+
+      pollingRef.current.add(creation.id);
+
+      try {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[ProcessingJobsPoller] Checking status:", creation.id);
+        }
+
+        const status = await provider.getJobStatus(creation.model, creation.requestId);
+
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[ProcessingJobsPoller] Status:", creation.id, status.status);
+        }
+
+        if (status.status === "COMPLETED") {
+          // Fetch the result
+          const result = await provider.getJobResult<FalResult>(creation.model, creation.requestId);
+          const urls = extractResultUrl(result);
+
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.log("[ProcessingJobsPoller] Completed:", creation.id, urls);
+          }
+
+          // Update Firestore
+          const uri = urls.videoUrl || urls.imageUrl || "";
+          await repository.update(userId, creation.id, {
+            status: "completed",
+            uri,
+            output: urls,
+          });
+        } else if (status.status === "FAILED") {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.log("[ProcessingJobsPoller] Failed:", creation.id);
+          }
+
+          await repository.update(userId, creation.id, {
+            status: "failed",
+            metadata: { error: "Generation failed" },
+          });
+        }
+        // If still IN_PROGRESS or IN_QUEUE, we'll check again next interval
+      } catch (error) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.error("[ProcessingJobsPoller] Poll error:", creation.id, error);
+        }
+      } finally {
+        pollingRef.current.delete(creation.id);
+      }
+    },
+    [userId, repository],
+  );
+
+  useEffect(() => {
+    if (!enabled || !userId || processingJobs.length === 0) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+
+    // Initial poll
+    processingJobs.forEach((job) => void pollJob(job));
+
+    // Set up interval polling
+    intervalRef.current = setInterval(() => {
+      processingJobs.forEach((job) => void pollJob(job));
+    }, POLL_INTERVAL_MS);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [enabled, userId, processingJobs, pollJob]);
+
+  return {
+    processingCount: processingJobs.length,
+  };
+}

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -8,6 +8,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
+import { useProcessingJobsPoller } from "../hooks/useProcessingJobsPoller";
 import { useGalleryFilters } from "../hooks/useGalleryFilters";
 import { useGalleryCallbacks } from "../hooks/useGalleryCallbacks";
 import { GalleryHeader, CreationCard, GalleryEmptyStates } from "../components";
@@ -38,6 +39,14 @@ export function CreationsGalleryScreen({
   const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
   const deleteMutation = useDeleteCreation({ userId, repository });
 
+  // Poll FAL queue for "processing" creations (enables true background generation)
+  useProcessingJobsPoller({
+    userId,
+    creations: creations ?? [],
+    repository,
+    enabled: !!userId && (creations?.length ?? 0) > 0,
+  });
+
   useEffect(() => {
     if (initialCreationId && creations && creations.length > 0 && !hasAutoSelectedRef.current) {
       const creation = creations.find((c) => c.id === initialCreationId);

package/src/domains/generation/wizard/infrastructure/strategies/video-generation.strategy.ts

@@ -3,7 +3,10 @@
  * Handles video-specific generation logic (execution only)
  */
 
-import { executeVideoFeature } from "../../../../../infrastructure/services/video-feature-executor.service";
+import {
+  executeVideoFeature,
+  submitVideoFeatureToQueue,
+} from "../../../../../infrastructure/services/video-feature-executor.service";
 import { buildUnifiedPrompt } from "./shared/unified-prompt-builder";
 import type { WizardScenarioData } from "../../presentation/hooks/useWizardGeneration";
 import type { WizardStrategy } from "./wizard-strategy.types";
@@ -40,6 +43,10 @@ export async function buildVideoInput(
     if (defaultPrompt) {
       basePrompt = defaultPrompt;
     } else {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.error("[VideoStrategy] No prompt found for scenario:", scenario.id);
+        console.error("[VideoStrategy] Available defaults:", Object.keys(VIDEO_PROCESSING_PROMPTS));
+      }
       throw new Error("error.generation.promptRequired");
     }
   }
@@ -95,6 +102,28 @@ export function createVideoStrategy(options: CreateVideoStrategyOptions): Wizard
       return { videoUrl: result.videoUrl };
     },
 
+    submitToQueue: async (input: unknown) => {
+      const videoInput = input as WizardVideoInput;
+
+      const result = await submitVideoFeatureToQueue(videoFeatureType, {
+        sourceImageBase64: videoInput.sourceImageBase64,
+        targetImageBase64: videoInput.targetImageBase64,
+        prompt: videoInput.prompt,
+        options: {
+          duration: videoInput.duration,
+          aspect_ratio: videoInput.aspectRatio,
+          resolution: videoInput.resolution,
+        },
+      });
+
+      return {
+        success: result.success,
+        requestId: result.requestId,
+        model: result.model,
+        error: result.error,
+      };
+    },
+
     getCreditCost: () => creditCost,
   };
 }

package/src/domains/generation/wizard/infrastructure/strategies/wizard-strategy.constants.ts

@@ -50,4 +50,7 @@ export const VIDEO_PROCESSING_PROMPTS: Record<string, string> = {
   "ai-kiss": "Create a romantic video where these two people share a gentle, loving kiss",
   "ai-hug": "Create a heartwarming video where these two people share a warm, affectionate hug",
   "image-to-video": "Animate this image with natural, smooth motion while preserving the original style",
+  "solo_renaissance_portrait": "Transform this person into an elegant Renaissance-style animated portrait with classical artistic movements and period-appropriate lighting",
+  "renaissance_portrait": "Transform this portrait into a majestic Renaissance-style animated painting with subtle classical movements",
+  "historical_portrait": "Animate this portrait in a historical style with period-appropriate subtle movements",
 };

package/src/domains/generation/wizard/infrastructure/strategies/wizard-strategy.types.ts

@@ -3,9 +3,18 @@
  * Shared types for all wizard strategies
  */
 
+export interface QueueSubmissionResult {
+  readonly success: boolean;
+  readonly requestId?: string;
+  readonly model?: string;
+  readonly error?: string;
+}
+
 export interface WizardStrategy {
-  /** Execute the generation - returns result with URLs */
+  /** Execute the generation - returns result with URLs (blocking) */
   execute: (input: unknown) => Promise<{ imageUrl?: string; videoUrl?: string }>;
+  /** Submit to queue for background processing - returns immediately with requestId */
+  submitToQueue?: (input: unknown) => Promise<QueueSubmissionResult>;
   /** Get credit cost for this generation */
   getCreditCost: () => number;
 }

package/src/domains/generation/wizard/infrastructure/utils/creation-persistence.util.ts

@@ -16,6 +16,9 @@ export interface ProcessingCreationData {
   readonly scenarioId: string;
   readonly scenarioTitle: string;
   readonly prompt: string;
+  // Background job tracking - FAL queue
+  readonly requestId?: string;
+  readonly model?: string;
 }
 
 export interface CompletedCreationData {
@@ -51,6 +54,8 @@ export function createCreationPersistence(config: CreationPersistenceConfig = {}
         createdAt: new Date(),
         isShared: false,
         isFavorite: false,
+        requestId: data.requestId,
+        model: data.model,
         metadata: {
           scenarioId: data.scenarioId,
           scenarioTitle: data.scenarioTitle,
@@ -58,7 +63,11 @@ export function createCreationPersistence(config: CreationPersistenceConfig = {}
       });
 
       if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[CreationPersistence] Saved as processing", { creationId });
+        console.log("[CreationPersistence] Saved as processing", {
+          creationId,
+          requestId: data.requestId,
+          model: data.model,
+        });
       }
 
       return creationId;
@@ -104,6 +113,26 @@ export function createCreationPersistence(config: CreationPersistenceConfig = {}
         console.log("[CreationPersistence] Updated to failed", { creationId, error });
       }
     },
+
+    /**
+     * Update creation with FAL queue requestId and model after job submission
+     * Call this after fal.queue.submit() returns
+     */
+    updateRequestId: async (
+      userId: string,
+      creationId: string,
+      requestId: string,
+      model: string,
+    ): Promise<void> => {
+      await repository.update(userId, creationId, {
+        requestId,
+        model,
+      });
+
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[CreationPersistence] Updated requestId", { creationId, requestId, model });
+      }
+    },
   };
 }
 

package/src/domains/generation/wizard/presentation/hooks/generation-result.utils.ts

@@ -0,0 +1,47 @@
+/**
+ * Generation Result Utilities
+ * Shared utilities for extracting and processing generation results
+ */
+
+export interface FalResult {
+  video?: { url?: string };
+  output?: string;
+  images?: Array<{ url?: string }>;
+  image?: { url?: string };
+}
+
+export interface GenerationUrls {
+  imageUrl?: string;
+  videoUrl?: string;
+}
+
+/**
+ * Extracts image/video URL from FAL result
+ * Handles various result formats from different FAL models
+ */
+export function extractResultUrl(result: FalResult): GenerationUrls {
+  // Video result
+  if (result.video?.url) {
+    return { videoUrl: result.video.url };
+  }
+
+  // Output URL (some models return direct URL)
+  if (typeof result.output === "string" && result.output.startsWith("http")) {
+    if (result.output.includes(".mp4") || result.output.includes("video")) {
+      return { videoUrl: result.output };
+    }
+    return { imageUrl: result.output };
+  }
+
+  // Images array (most image models)
+  if (result.images?.[0]?.url) {
+    return { imageUrl: result.images[0].url };
+  }
+
+  // Single image
+  if (result.image?.url) {
+    return { imageUrl: result.image.url };
+  }
+
+  return {};
+}

package/src/domains/generation/wizard/presentation/hooks/usePhotoBlockingGeneration.ts

@@ -0,0 +1,132 @@
+/**
+ * usePhotoBlockingGeneration Hook
+ * Handles photo generation via blocking execution
+ * - Uses orchestrator for synchronous generation
+ * - Waits for result before returning
+ * - Best for quick image operations (10-30 seconds)
+ */
+
+import { useRef, useCallback } from "react";
+import { useGenerationOrchestrator } from "../../../../../presentation/hooks/generation";
+import type { CreationPersistence } from "../../infrastructure/utils/creation-persistence.util";
+import type { WizardStrategy } from "../../infrastructure/strategies/wizard-strategy.types";
+import type { WizardScenarioData } from "./wizard-generation.types";
+import type { AlertMessages } from "../../../../../presentation/hooks/generation/types";
+
+declare const __DEV__: boolean;
+
+export interface UsePhotoBlockingGenerationProps {
+  readonly userId?: string;
+  readonly scenario: WizardScenarioData;
+  readonly persistence: CreationPersistence;
+  readonly strategy: WizardStrategy;
+  readonly alertMessages: AlertMessages;
+  readonly onSuccess?: (result: unknown) => void;
+  readonly onError?: (error: string) => void;
+  readonly onCreditsExhausted?: () => void;
+}
+
+export interface UsePhotoBlockingGenerationReturn {
+  readonly isGenerating: boolean;
+  readonly startGeneration: (input: unknown, prompt: string) => Promise<void>;
+}
+
+export function usePhotoBlockingGeneration(
+  props: UsePhotoBlockingGenerationProps,
+): UsePhotoBlockingGenerationReturn {
+  const {
+    userId,
+    scenario,
+    persistence,
+    strategy,
+    alertMessages,
+    onSuccess,
+    onError,
+    onCreditsExhausted,
+  } = props;
+
+  const creationIdRef = useRef<string | null>(null);
+
+  const handleSuccess = useCallback(
+    async (result: unknown) => {
+      const typedResult = result as { imageUrl?: string; videoUrl?: string };
+      const creationId = creationIdRef.current;
+
+      if (creationId && userId) {
+        try {
+          await persistence.updateToCompleted(userId, creationId, {
+            uri: typedResult.imageUrl || typedResult.videoUrl || "",
+            imageUrl: typedResult.imageUrl,
+            videoUrl: typedResult.videoUrl,
+          });
+        } catch (err) {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.error("[PhotoBlockingGeneration] updateToCompleted error:", err);
+          }
+        }
+      }
+
+      creationIdRef.current = null;
+      onSuccess?.(result);
+    },
+    [userId, persistence, onSuccess],
+  );
+
+  const handleError = useCallback(
+    async (err: { message: string }) => {
+      const creationId = creationIdRef.current;
+
+      if (creationId && userId) {
+        try {
+          await persistence.updateToFailed(userId, creationId, err.message);
+        } catch (updateErr) {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.error("[PhotoBlockingGeneration] updateToFailed error:", updateErr);
+          }
+        }
+      }
+
+      creationIdRef.current = null;
+      onError?.(err.message);
+    },
+    [userId, persistence, onError],
+  );
+
+  const { generate, isGenerating } = useGenerationOrchestrator(strategy, {
+    userId,
+    alertMessages,
+    onCreditsExhausted,
+    onSuccess: handleSuccess,
+    onError: handleError,
+  });
+
+  const startGeneration = useCallback(
+    async (input: unknown, prompt: string) => {
+      // Save to Firestore first
+      if (userId && prompt) {
+        try {
+          const creationId = await persistence.saveAsProcessing(userId, {
+            scenarioId: scenario.id,
+            scenarioTitle: scenario.title || scenario.id,
+            prompt,
+          });
+          creationIdRef.current = creationId;
+
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.log("[PhotoBlockingGeneration] Saved as processing:", creationId);
+          }
+        } catch (err) {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.error("[PhotoBlockingGeneration] saveAsProcessing error:", err);
+          }
+        }
+      }
+
+      // Start blocking generation
+      generate(input);
+    },
+    [userId, scenario, persistence, generate],
+  );
+
+  return { isGenerating, startGeneration };
+}

package/src/domains/generation/wizard/presentation/hooks/useVideoQueueGeneration.ts

@@ -0,0 +1,169 @@
+/**
+ * useVideoQueueGeneration Hook
+ * Handles video generation via FAL queue with background support
+ * - Submits to queue for non-blocking generation
+ * - Polls for completion status
+ * - Supports background generation (user can dismiss wizard)
+ */
+
+import { useEffect, useRef, useCallback, useState } from "react";
+import { providerRegistry } from "../../../../../infrastructure/services/provider-registry.service";
+import { extractResultUrl, type FalResult, type GenerationUrls } from "./generation-result.utils";
+import type { CreationPersistence } from "../../infrastructure/utils/creation-persistence.util";
+import type { WizardStrategy } from "../../infrastructure/strategies/wizard-strategy.types";
+import type { WizardScenarioData } from "./wizard-generation.types";
+
+declare const __DEV__: boolean;
+
+const POLL_INTERVAL_MS = 3000;
+
+export interface UseVideoQueueGenerationProps {
+  readonly userId?: string;
+  readonly scenario: WizardScenarioData;
+  readonly persistence: CreationPersistence;
+  readonly strategy: WizardStrategy;
+  readonly onSuccess?: (result: unknown) => void;
+  readonly onError?: (error: string) => void;
+}
+
+export interface UseVideoQueueGenerationReturn {
+  readonly isGenerating: boolean;
+  readonly startGeneration: (input: unknown, prompt: string) => Promise<void>;
+}
+
+export function useVideoQueueGeneration(
+  props: UseVideoQueueGenerationProps,
+): UseVideoQueueGenerationReturn {
+  const { userId, scenario, persistence, strategy, onSuccess, onError } = props;
+
+  const creationIdRef = useRef<string | null>(null);
+  const requestIdRef = useRef<string | null>(null);
+  const modelRef = useRef<string | null>(null);
+  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  // Cleanup polling on unmount
+  useEffect(() => {
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current);
+        pollingRef.current = null;
+      }
+    };
+  }, []);
+
+  const resetRefs = useCallback(() => {
+    creationIdRef.current = null;
+    requestIdRef.current = null;
+    modelRef.current = null;
+    setIsGenerating(false);
+  }, []);
+
+  const handleComplete = useCallback(
+    async (urls: GenerationUrls) => {
+      const creationId = creationIdRef.current;
+      if (creationId && userId) {
+        try {
+          await persistence.updateToCompleted(userId, creationId, {
+            uri: urls.videoUrl || urls.imageUrl || "",
+            imageUrl: urls.imageUrl,
+            videoUrl: urls.videoUrl,
+          });
+        } catch (err) {
+          if (typeof __DEV__ !== "undefined" && __DEV__) console.error("[VideoQueueGeneration] updateToCompleted error:", err);
+        }
+      }
+      resetRefs();
+      onSuccess?.(urls);
+    },
+    [userId, persistence, onSuccess, resetRefs],
+  );
+
+  const handleError = useCallback(
+    async (errorMsg: string) => {
+      const creationId = creationIdRef.current;
+      if (creationId && userId) {
+        try {
+          await persistence.updateToFailed(userId, creationId, errorMsg);
+        } catch (err) {
+          if (typeof __DEV__ !== "undefined" && __DEV__) console.error("[VideoQueueGeneration] updateToFailed error:", err);
+        }
+      }
+      resetRefs();
+      onError?.(errorMsg);
+    },
+    [userId, persistence, onError, resetRefs],
+  );
+
+  const pollQueueStatus = useCallback(async () => {
+    const requestId = requestIdRef.current;
+    const model = modelRef.current;
+    const provider = providerRegistry.getActiveProvider();
+    if (!requestId || !model || !provider) return;
+
+    try {
+      const status = await provider.getJobStatus(model, requestId);
+      if (typeof __DEV__ !== "undefined" && __DEV__) console.log("[VideoQueueGeneration] Poll:", status.status);
+
+      if (status.status === "COMPLETED" || status.status === "FAILED") {
+        if (pollingRef.current) { clearInterval(pollingRef.current); pollingRef.current = null; }
+        if (status.status === "COMPLETED") {
+          const result = await provider.getJobResult<FalResult>(model, requestId);
+          await handleComplete(extractResultUrl(result));
+        } else {
+          await handleError("Generation failed");
+        }
+      }
+    } catch (err) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) console.error("[VideoQueueGeneration] Poll error:", err);
+    }
+  }, [handleComplete, handleError]);
+
+  const startGeneration = useCallback(
+    async (input: unknown, prompt: string) => {
+      if (!strategy.submitToQueue) { onError?.("Queue submission not available"); return; }
+      setIsGenerating(true);
+
+      // Save to Firestore FIRST (enables background visibility)
+      let creationId: string | null = null;
+      if (userId && prompt) {
+        try {
+          creationId = await persistence.saveAsProcessing(userId, {
+            scenarioId: scenario.id, scenarioTitle: scenario.title || scenario.id, prompt,
+          });
+          creationIdRef.current = creationId;
+          if (typeof __DEV__ !== "undefined" && __DEV__) console.log("[VideoQueueGeneration] Saved:", creationId);
+        } catch (err) {
+          if (typeof __DEV__ !== "undefined" && __DEV__) console.error("[VideoQueueGeneration] save error:", err);
+        }
+      }
+
+      const queueResult = await strategy.submitToQueue(input);
+      if (!queueResult.success || !queueResult.requestId || !queueResult.model) {
+        if (creationId && userId) await persistence.updateToFailed(userId, creationId, queueResult.error || "Queue submission failed");
+        setIsGenerating(false);
+        onError?.(queueResult.error || "Queue submission failed");
+        return;
+      }
+
+      requestIdRef.current = queueResult.requestId;
+      modelRef.current = queueResult.model;
+
+      // Update with requestId for background polling
+      if (creationId && userId) {
+        try {
+          await persistence.updateRequestId(userId, creationId, queueResult.requestId, queueResult.model);
+          if (typeof __DEV__ !== "undefined" && __DEV__) console.log("[VideoQueueGeneration] Updated requestId:", queueResult.requestId);
+        } catch (err) {
+          if (typeof __DEV__ !== "undefined" && __DEV__) console.error("[VideoQueueGeneration] updateRequestId error:", err);
+        }
+      }
+
+      pollingRef.current = setInterval(() => void pollQueueStatus(), POLL_INTERVAL_MS);
+      void pollQueueStatus();
+    },
+    [userId, scenario, persistence, strategy, pollQueueStatus, onError],
+  );
+
+  return { isGenerating, startGeneration };
+}

package/src/domains/generation/wizard/presentation/hooks/useWizardGeneration.ts

@@ -1,15 +1,15 @@
 /**
  * useWizardGeneration Hook
- * Wizard generation with Firestore persistence
- * - Saves status="processing" at start
- * - Updates to status="completed" on success
- * - Updates to status="failed" on error
+ * Orchestrates wizard-based generation by delegating to appropriate mode:
+ * - Video: Queue-based generation with background support
+ * - Photo: Blocking execution for quick results
  */
 
-import { useEffect, useRef, useMemo, useCallback } from "react";
-import { useGenerationOrchestrator } from "../../../../../presentation/hooks/generation";
+import { useEffect, useRef, useMemo } from "react";
 import { createWizardStrategy, buildWizardInput } from "../../infrastructure/strategies";
 import { createCreationPersistence } from "../../infrastructure/utils/creation-persistence.util";
+import { useVideoQueueGeneration } from "./useVideoQueueGeneration";
+import { usePhotoBlockingGeneration } from "./usePhotoBlockingGeneration";
 import type {
   UseWizardGenerationProps,
   UseWizardGenerationReturn,
@@ -40,77 +40,42 @@ export const useWizardGeneration = (
   } = props;
 
   const hasStarted = useRef(false);
-  const creationIdRef = useRef<string | null>(null);
-  const inputRef = useRef<{ prompt: string } | null>(null);
 
-  // Persistence utility - separate from strategy
   const persistence = useMemo(() => createCreationPersistence(), []);
-
-  // Strategy - only handles execution, creditCost is passed from app
   const strategy = useMemo(
     () => createWizardStrategy({ scenario, creditCost }),
     [scenario, creditCost],
   );
 
-  const handleSuccess = useCallback(
-    async (result: unknown) => {
-      const typedResult = result as { imageUrl?: string; videoUrl?: string };
-      const creationId = creationIdRef.current;
-
-      // Update to completed in Firestore
-      if (creationId && userId) {
-        try {
-          await persistence.updateToCompleted(userId, creationId, {
-            uri: typedResult.imageUrl || typedResult.videoUrl || "",
-            imageUrl: typedResult.imageUrl,
-            videoUrl: typedResult.videoUrl,
-          });
-        } catch (err) {
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.error("[useWizardGeneration] updateToCompleted error:", err);
-          }
-        }
-      }
-
-      creationIdRef.current = null;
-      inputRef.current = null;
-      onSuccess?.(result);
-    },
-    [userId, persistence, onSuccess],
-  );
+  const isVideoMode = scenario.outputType === "video" && !!strategy.submitToQueue;
 
-  const handleError = useCallback(
-    async (err: { message: string }) => {
-      const creationId = creationIdRef.current;
-
-      // Update to failed in Firestore
-      if (creationId && userId) {
-        try {
-          await persistence.updateToFailed(userId, creationId, err.message);
-        } catch (updateErr) {
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.error("[useWizardGeneration] updateToFailed error:", updateErr);
-          }
-        }
-      }
-
-      creationIdRef.current = null;
-      inputRef.current = null;
-      onError?.(err.message);
-    },
-    [userId, persistence, onError],
-  );
+  // Video generation hook (queue-based)
+  const videoGeneration = useVideoQueueGeneration({
+    userId,
+    scenario,
+    persistence,
+    strategy,
+    onSuccess,
+    onError,
+  });
 
-  const { generate, isGenerating } = useGenerationOrchestrator(strategy, {
+  // Photo generation hook (blocking)
+  const photoGeneration = usePhotoBlockingGeneration({
     userId,
+    scenario,
+    persistence,
+    strategy,
     alertMessages,
+    onSuccess,
+    onError,
     onCreditsExhausted,
-    onSuccess: handleSuccess,
-    onError: handleError,
   });
 
+  // Main effect: trigger generation when step becomes active
   useEffect(() => {
-    if (isGeneratingStep && !hasStarted.current && !isGenerating) {
+    const isAlreadyGenerating = videoGeneration.isGenerating || photoGeneration.isGenerating;
+
+    if (isGeneratingStep && !hasStarted.current && !isAlreadyGenerating) {
       hasStarted.current = true;
 
       buildWizardInput(wizardData, scenario)
@@ -121,32 +86,22 @@ export const useWizardGeneration = (
             return;
           }
 
-          inputRef.current = input as { prompt: string };
-
-          // Save to Firestore with status="processing"
           const typedInput = input as { prompt?: string };
-          if (userId && typedInput.prompt) {
-            try {
-              const creationId = await persistence.saveAsProcessing(userId, {
-                scenarioId: scenario.id,
-                scenarioTitle: scenario.title || scenario.id,
-                prompt: typedInput.prompt,
-              });
-              creationIdRef.current = creationId;
-
-              if (typeof __DEV__ !== "undefined" && __DEV__) {
-                console.log("[useWizardGeneration] Saved as processing:", creationId);
-              }
-            } catch (err) {
-              if (typeof __DEV__ !== "undefined" && __DEV__) {
-                console.error("[useWizardGeneration] saveAsProcessing error:", err);
-              }
-            }
+
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.log("[WizardGeneration] Mode:", isVideoMode ? "VIDEO_QUEUE" : "PHOTO_BLOCKING");
           }
 
-          generate(input);
+          if (isVideoMode) {
+            await videoGeneration.startGeneration(input, typedInput.prompt || "");
+          } else {
+            await photoGeneration.startGeneration(input, typedInput.prompt || "");
+          }
         })
         .catch((error) => {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.error("[WizardGeneration] Build input error:", error.message);
+          }
           hasStarted.current = false;
           onError?.(error.message);
         });
@@ -155,7 +110,17 @@ export const useWizardGeneration = (
     if (!isGeneratingStep && hasStarted.current) {
       hasStarted.current = false;
     }
-  }, [isGeneratingStep, scenario, wizardData, isGenerating, generate, onError, userId, persistence]);
+  }, [
+    isGeneratingStep,
+    scenario,
+    wizardData,
+    isVideoMode,
+    videoGeneration,
+    photoGeneration,
+    onError,
+  ]);
 
-  return { isGenerating };
+  return {
+    isGenerating: videoGeneration.isGenerating || photoGeneration.isGenerating,
+  };
 };

package/src/index.ts

@@ -47,6 +47,7 @@ export {
 export {
   providerRegistry, generationOrchestrator, pollJob, createJobPoller,
   executeImageFeature, hasImageFeatureSupport, executeVideoFeature, hasVideoFeatureSupport,
+  submitVideoFeatureToQueue,
 } from "./infrastructure/services";
 
 export type {

package/src/infrastructure/services/index.ts

@@ -20,6 +20,7 @@ export type { ImageResultExtractor } from "../utils/url-extractor";
 export {
   executeVideoFeature,
   hasVideoFeatureSupport,
+  submitVideoFeatureToQueue,
 } from "./video-feature-executor.service";
 export type {
   ExecuteVideoFeatureOptions,

package/src/infrastructure/services/video-feature-executor.service.ts

@@ -160,6 +160,67 @@ export function hasVideoFeatureSupport(): boolean {
   return provider !== null && provider.isInitialized();
 }
 
+/**
+ * Submit a video feature to the queue for background processing
+ * Returns immediately with requestId and model for later status polling
+ */
+export async function submitVideoFeatureToQueue(
+  featureType: VideoFeatureType,
+  request: VideoFeatureRequest,
+): Promise<{ success: boolean; requestId?: string; model?: string; error?: string }> {
+  if (__DEV__) {
+    console.log(`[VideoExecutor:${featureType}] QUEUE SUBMIT`, {
+      hasSource: !!request.sourceImageBase64,
+      hasTarget: !!request.targetImageBase64,
+      promptLength: request.prompt?.length ?? 0,
+    });
+  }
+
+  const provider = providerRegistry.getActiveProvider();
+
+  if (!provider) {
+    return { success: false, error: "No AI provider configured" };
+  }
+
+  if (!provider.isInitialized()) {
+    return { success: false, error: "AI provider not initialized" };
+  }
+
+  const model = provider.getVideoFeatureModel(featureType);
+
+  try {
+    const inputData: VideoFeatureInputData = {
+      sourceImageBase64: cleanBase64(request.sourceImageBase64),
+      targetImageBase64: cleanBase64(request.targetImageBase64),
+      prompt: request.prompt,
+      options: request.options,
+    };
+
+    const input = provider.buildVideoFeatureInput(featureType, inputData);
+
+    const submission = await provider.submitJob(model, input);
+
+    if (__DEV__) {
+      console.log(`[VideoExecutor:${featureType}] QUEUE SUBMITTED`, {
+        requestId: submission.requestId,
+        model,
+      });
+    }
+
+    return {
+      success: true,
+      requestId: submission.requestId,
+      model,
+    };
+  } catch (error) {
+    const message = extractErrorMessage(error, "Queue submission failed", `Video:${featureType}`);
+    if (__DEV__) {
+      console.error(`[VideoExecutor:${featureType}] QUEUE EXCEPTION`, { error: message });
+    }
+    return { success: false, error: message };
+  }
+}
+
 export type {
   ExecuteVideoFeatureOptions,
   VideoFeatureResult,