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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.48.2",
+  "version": "1.49.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";
@@ -95,6 +98,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.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/useWizardGeneration.ts

@@ -1,13 +1,14 @@
 /**
  * useWizardGeneration Hook
- * Wizard generation with Firestore persistence
- * - Saves status="processing" at start
- * - Updates to status="completed" on success
- * - Updates to status="failed" on error
+ * Wizard generation with Firestore persistence and background support
+ * - Uses queue submission for videos (enables true background generation)
+ * - Uses blocking execution for images
+ * - Saves requestId/model to Firestore for background polling
  */
 
-import { useEffect, useRef, useMemo, useCallback } from "react";
+import { useEffect, useRef, useMemo, useCallback, useState } from "react";
 import { useGenerationOrchestrator } from "../../../../../presentation/hooks/generation";
+import { providerRegistry } from "../../../../../infrastructure/services/provider-registry.service";
 import { createWizardStrategy, buildWizardInput } from "../../infrastructure/strategies";
 import { createCreationPersistence } from "../../infrastructure/utils/creation-persistence.util";
 import type {
@@ -17,6 +18,8 @@ import type {
 
 declare const __DEV__: boolean;
 
+const POLL_INTERVAL_MS = 3000;
+
 export type {
   WizardOutputType,
   WizardScenarioData,
@@ -24,6 +27,32 @@ export type {
   UseWizardGenerationReturn,
 } from "./wizard-generation.types";
 
+interface FalResult {
+  video?: { url?: string };
+  output?: string;
+  images?: Array<{ url?: string }>;
+  image?: { url?: string };
+}
+
+function extractResultUrl(result: FalResult): { imageUrl?: string; videoUrl?: string } {
+  if (result.video?.url) {
+    return { videoUrl: result.video.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 };
+  }
+  if (result.images?.[0]?.url) {
+    return { imageUrl: result.images[0].url };
+  }
+  if (result.image?.url) {
+    return { imageUrl: result.image.url };
+  }
+  return {};
+}
+
 export const useWizardGeneration = (
   props: UseWizardGenerationProps,
 ): UseWizardGenerationReturn => {
@@ -41,23 +70,119 @@ export const useWizardGeneration = (
 
   const hasStarted = useRef(false);
   const creationIdRef = useRef<string | null>(null);
-  const inputRef = useRef<{ prompt: 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);
 
-  // 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(
+  // Cleanup polling on unmount
+  useEffect(() => {
+    return () => {
+      if (pollingRef.current) {
+        clearInterval(pollingRef.current);
+        pollingRef.current = null;
+      }
+    };
+  }, []);
+
+  const handleQueueComplete = useCallback(
+    async (urls: { imageUrl?: string; videoUrl?: string }) => {
+      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("[useWizardGeneration] updateToCompleted error:", err);
+          }
+        }
+      }
+
+      creationIdRef.current = null;
+      requestIdRef.current = null;
+      modelRef.current = null;
+      setIsGenerating(false);
+      onSuccess?.(urls);
+    },
+    [userId, persistence, onSuccess],
+  );
+
+  const handleQueueError = 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("[useWizardGeneration] updateToFailed error:", err);
+          }
+        }
+      }
+
+      creationIdRef.current = null;
+      requestIdRef.current = null;
+      modelRef.current = null;
+      setIsGenerating(false);
+      onError?.(errorMsg);
+    },
+    [userId, persistence, onError],
+  );
+
+  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("[useWizardGeneration] Poll status:", status.status);
+      }
+
+      if (status.status === "COMPLETED") {
+        if (pollingRef.current) {
+          clearInterval(pollingRef.current);
+          pollingRef.current = null;
+        }
+        const result = await provider.getJobResult<FalResult>(model, requestId);
+        const urls = extractResultUrl(result);
+        await handleQueueComplete(urls);
+      } else if (status.status === "FAILED") {
+        if (pollingRef.current) {
+          clearInterval(pollingRef.current);
+          pollingRef.current = null;
+        }
+        await handleQueueError("Generation failed");
+      }
+    } catch (err) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.error("[useWizardGeneration] Poll error:", err);
+      }
+    }
+  }, [handleQueueComplete, handleQueueError]);
+
+  // For images: use blocking execution with orchestrator
+  const handleBlockingSuccess = 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, {
@@ -73,17 +198,15 @@ export const useWizardGeneration = (
       }
 
       creationIdRef.current = null;
-      inputRef.current = null;
       onSuccess?.(result);
     },
     [userId, persistence, onSuccess],
   );
 
-  const handleError = useCallback(
+  const handleBlockingError = 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);
@@ -95,22 +218,21 @@ export const useWizardGeneration = (
       }
 
       creationIdRef.current = null;
-      inputRef.current = null;
       onError?.(err.message);
     },
     [userId, persistence, onError],
   );
 
-  const { generate, isGenerating } = useGenerationOrchestrator(strategy, {
+  const { generate, isGenerating: isBlockingGenerating } = useGenerationOrchestrator(strategy, {
     userId,
     alertMessages,
     onCreditsExhausted,
-    onSuccess: handleSuccess,
-    onError: handleError,
+    onSuccess: handleBlockingSuccess,
+    onError: handleBlockingError,
   });
 
   useEffect(() => {
-    if (isGeneratingStep && !hasStarted.current && !isGenerating) {
+    if (isGeneratingStep && !hasStarted.current && !isGenerating && !isBlockingGenerating) {
       hasStarted.current = true;
 
       buildWizardInput(wizardData, scenario)
@@ -121,30 +243,85 @@ 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);
+          const useQueueMode = scenario.outputType === "video" && !!strategy.submitToQueue;
+
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.log("[useWizardGeneration] Mode:", useQueueMode ? "QUEUE" : "BLOCKING");
+          }
+
+          if (useQueueMode && strategy.submitToQueue) {
+            // Queue mode for videos
+            setIsGenerating(true);
+
+            // Submit to queue first to get requestId
+            const queueResult = await strategy.submitToQueue(input);
+
+            if (!queueResult.success || !queueResult.requestId || !queueResult.model) {
+              hasStarted.current = false;
+              setIsGenerating(false);
+              onError?.(queueResult.error || "Queue submission failed");
+              return;
+            }
+
+            requestIdRef.current = queueResult.requestId;
+            modelRef.current = queueResult.model;
+
+            // Save to Firestore with requestId and model
+            if (userId && typedInput.prompt) {
+              try {
+                const creationId = await persistence.saveAsProcessing(userId, {
+                  scenarioId: scenario.id,
+                  scenarioTitle: scenario.title || scenario.id,
+                  prompt: typedInput.prompt,
+                  requestId: queueResult.requestId,
+                  model: queueResult.model,
+                });
+                creationIdRef.current = creationId;
+
+                if (typeof __DEV__ !== "undefined" && __DEV__) {
+                  console.log("[useWizardGeneration] Saved with requestId:", {
+                    creationId,
+                    requestId: queueResult.requestId,
+                  });
+                }
+              } catch (err) {
+                if (typeof __DEV__ !== "undefined" && __DEV__) {
+                  console.error("[useWizardGeneration] saveAsProcessing error:", err);
+                }
               }
-            } catch (err) {
-              if (typeof __DEV__ !== "undefined" && __DEV__) {
-                console.error("[useWizardGeneration] saveAsProcessing error:", err);
+            }
+
+            // Start polling for completion
+            pollingRef.current = setInterval(() => {
+              void pollQueueStatus();
+            }, POLL_INTERVAL_MS);
+
+            // Initial poll
+            void pollQueueStatus();
+          } else {
+            // Blocking mode for images
+            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);
+                }
               }
             }
-          }
 
-          generate(input);
+            generate(input);
+          }
         })
         .catch((error) => {
           hasStarted.current = false;
@@ -155,7 +332,19 @@ export const useWizardGeneration = (
     if (!isGeneratingStep && hasStarted.current) {
       hasStarted.current = false;
     }
-  }, [isGeneratingStep, scenario, wizardData, isGenerating, generate, onError, userId, persistence]);
+  }, [
+    isGeneratingStep,
+    scenario,
+    wizardData,
+    isGenerating,
+    isBlockingGenerating,
+    generate,
+    onError,
+    userId,
+    persistence,
+    strategy,
+    pollQueueStatus,
+  ]);
 
-  return { isGenerating };
+  return { isGenerating: isGenerating || isBlockingGenerating };
 };

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,