@umituz/react-native-ai-generation-content 1.33.1 → 1.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.33.1",
+  "version": "1.34.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/generation/infrastructure/executors/video-executor.ts

@@ -1,6 +1,6 @@
 /**
  * Video Generation Executor
- * Generic executor for all video generation features
+ * Generic executor for all video generation features (provider-agnostic)
  */
 
 import type {
@@ -41,16 +41,12 @@ export class VideoExecutor
         return { success: false, error: "AI provider not initialized" };
       }
 
-      options?.onProgress?.(5);
-
       const modelInput = this.buildModelInput(input);
 
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.log("[VideoExecutor] Model input prepared");
       }
 
-      options?.onProgress?.(10);
-
       const result = await provider.subscribe(model, modelInput, {
         timeoutMs: options?.timeoutMs ?? 300000,
         onQueueUpdate: (status) => {
@@ -101,7 +97,7 @@ export class VideoExecutor
     }
   }
 
-  private buildModelInput(input: VideoGenerationInput) {
+  private buildModelInput(input: VideoGenerationInput): Record<string, unknown> {
     const { sourceImageBase64, targetImageBase64, prompt } = input;
 
     const formatBase64 = (base64: string): string => {

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

@@ -43,11 +43,24 @@ export interface VideoGenerationResult {
 async function extractPhotosFromWizardData(
   wizardData: Record<string, unknown>,
 ): Promise<string[]> {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoStrategy:extractPhotos] Starting extraction", {
+      wizardDataKeys: Object.keys(wizardData),
+    });
+  }
+
   const photoKeys = Object.keys(wizardData)
     .filter((k) => k.includes(PHOTO_KEY_PREFIX))
     .sort();
 
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoStrategy:extractPhotos] Found photo keys", { photoKeys });
+  }
+
   if (photoKeys.length === 0) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[VideoStrategy:extractPhotos] No photo keys found");
+    }
     return [];
   }
 
@@ -56,15 +69,35 @@ async function extractPhotosFromWizardData(
     const photo = wizardData[key] as { uri?: string };
     if (photo?.uri) {
       photoUris.push(photo.uri);
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[VideoStrategy:extractPhotos] Found photo URI", { key, uri: photo.uri.substring(0, 50) + "..." });
+      }
     }
   }
 
   if (photoUris.length === 0) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[VideoStrategy:extractPhotos] No photo URIs found");
+    }
     return [];
   }
 
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoStrategy:extractPhotos] Converting to base64", { count: photoUris.length });
+  }
+
   const photosBase64 = await Promise.all(photoUris.map((uri) => readFileAsBase64(uri)));
-  return photosBase64.filter(Boolean) as string[];
+  const validPhotos = photosBase64.filter(Boolean) as string[];
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoStrategy:extractPhotos] Converted photos", {
+      total: photoUris.length,
+      valid: validPhotos.length,
+      sizes: validPhotos.map((p) => `${(p.length / 1024).toFixed(1)}KB`),
+    });
+  }
+
+  return validPhotos;
 }
 
 // ============================================================================
@@ -91,20 +124,52 @@ export async function buildVideoInput(
   wizardData: Record<string, unknown>,
   scenario: WizardScenarioData,
 ): Promise<VideoGenerationInput | null> {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoStrategy:buildInput] START", {
+      scenarioId: scenario.id,
+      outputType: scenario.outputType,
+      hasAiPrompt: !!scenario.aiPrompt,
+    });
+  }
+
   const photos = await extractPhotosFromWizardData(wizardData);
 
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoStrategy:buildInput] Photos extracted", {
+      count: photos.length,
+      hasSource: !!photos[0],
+      hasTarget: !!photos[1],
+    });
+  }
+
   // Extract prompt using type-safe extractor with fallback
   let prompt = extractPrompt(wizardData, scenario.aiPrompt);
 
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoStrategy:buildInput] Prompt from wizard", {
+      hasPrompt: !!prompt,
+      promptLength: prompt?.length ?? 0,
+    });
+  }
+
   // For video processing features, use default prompt if none provided
   if (!prompt) {
     const defaultPrompt = VIDEO_PROCESSING_PROMPTS[scenario.id];
     if (defaultPrompt) {
       prompt = defaultPrompt;
       if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[VideoStrategy] Using default prompt for", scenario.id);
+        console.log("[VideoStrategy:buildInput] Using default prompt", {
+          scenarioId: scenario.id,
+          prompt: prompt.substring(0, 50) + "...",
+        });
       }
     } else {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[VideoStrategy:buildInput] ERROR: No prompt available", {
+          scenarioId: scenario.id,
+          availablePrompts: Object.keys(VIDEO_PROCESSING_PROMPTS),
+        });
+      }
       throw new Error("Prompt is required for video generation");
     }
   }
@@ -114,7 +179,7 @@ export async function buildVideoInput(
   const aspectRatio = extractAspectRatio(wizardData);
   const resolution = extractResolution(wizardData);
 
-  return {
+  const input: VideoGenerationInput = {
     sourceImageBase64: photos[0],
     targetImageBase64: photos[1] || photos[0],
     prompt,
@@ -122,6 +187,21 @@ export async function buildVideoInput(
     aspectRatio,
     resolution,
   };
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoStrategy:buildInput] COMPLETE", {
+      hasSource: !!input.sourceImageBase64,
+      hasTarget: !!input.targetImageBase64,
+      sourceSize: input.sourceImageBase64 ? `${(input.sourceImageBase64.length / 1024).toFixed(1)}KB` : "N/A",
+      targetSize: input.targetImageBase64 ? `${(input.targetImageBase64.length / 1024).toFixed(1)}KB` : "N/A",
+      prompt: input.prompt.substring(0, 50) + "...",
+      duration: input.duration,
+      aspectRatio: input.aspectRatio,
+      resolution: input.resolution,
+    });
+  }
+
+  return input;
 }
 
 // ============================================================================
@@ -138,6 +218,14 @@ export function createVideoStrategy(options: CreateVideoStrategyOptions): Wizard
   const repository = createCreationsRepository(collectionName);
   const videoFeatureType = getVideoFeatureType(scenario.id);
 
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoStrategy:create] Created strategy", {
+      scenarioId: scenario.id,
+      videoFeatureType,
+      collectionName,
+    });
+  }
+
   let lastInputRef: VideoGenerationInput | null = null;
 
   return {
@@ -145,6 +233,15 @@ export function createVideoStrategy(options: CreateVideoStrategyOptions): Wizard
       const videoInput = input as VideoGenerationInput;
       lastInputRef = videoInput;
 
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[VideoStrategy:execute] START", {
+          featureType: videoFeatureType,
+          hasSource: !!videoInput.sourceImageBase64,
+          hasTarget: !!videoInput.targetImageBase64,
+          prompt: videoInput.prompt.substring(0, 50) + "...",
+        });
+      }
+
       const result = await executeVideoFeature(
         videoFeatureType,
         {
@@ -159,10 +256,28 @@ export function createVideoStrategy(options: CreateVideoStrategyOptions): Wizard
         },
       );
 
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[VideoStrategy:execute] RESULT", {
+          success: result.success,
+          hasVideoUrl: !!result.videoUrl,
+          error: result.error,
+          requestId: result.requestId,
+        });
+      }
+
       if (!result.success || !result.videoUrl) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[VideoStrategy:execute] FAILED", { error: result.error });
+        }
         throw new Error(result.error || "Video generation failed");
       }
 
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[VideoStrategy:execute] SUCCESS", {
+          videoUrl: result.videoUrl.substring(0, 80) + "...",
+        });
+      }
+
       return { videoUrl: result.videoUrl };
     },
 

package/src/domains/generation/wizard/presentation/components/GenericWizardFlow.tsx

@@ -66,6 +66,7 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
   const [currentCreation, setCurrentCreation] = useState<Creation | null>(null);
   const [showRatingPicker, setShowRatingPicker] = useState(false);
   const [hasRated, setHasRated] = useState(false);
+  const [isGeneratingDismissed, setIsGeneratingDismissed] = useState(false);
   const prevStepIdRef = useRef<string | undefined>(undefined);
 
   const repository = useMemo(() => createCreationsRepository("creations"), []);
@@ -133,10 +134,31 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
       if (prevStepIdRef.current !== currentStepId) {
         prevStepIdRef.current = currentStepId;
         onStepChange(currentStep.id, currentStep.type);
+        // Reset dismissed state when entering generating step
+        if (currentStep.type === StepType.GENERATING) {
+          setIsGeneratingDismissed(false);
+        }
       }
     }
   }, [currentStep, currentStepIndex, onStepChange]);
 
+  // Handle dismiss generating - go back but generation continues in background
+  const handleDismissGenerating = useCallback(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[GenericWizardFlow] Dismissing generating screen - generation continues in background");
+    }
+    setIsGeneratingDismissed(true);
+    // Show alert that generation continues
+    alert.show(
+      AlertType.INFO,
+      AlertMode.TOAST,
+      t("generator.backgroundTitle"),
+      t("generator.backgroundMessage")
+    );
+    // Go back to previous step (or close)
+    onBack?.();
+  }, [alert, t, onBack]);
+
   const handleBack = useCallback(() => {
     if (currentStepIndex === 0) {
       onBack?.();
@@ -209,6 +231,7 @@ export const GenericWizardFlow: React.FC<GenericWizardFlowProps> = ({
         onShare={handleShare}
         onRate={handleOpenRatingPicker}
         onTryAgain={onTryAgain}
+        onDismissGenerating={handleDismissGenerating}
         t={t}
         renderPreview={renderPreview}
         renderGenerating={renderGenerating}

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.tsx

@@ -28,6 +28,7 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
   onShare,
   onRate,
   onTryAgain,
+  onDismissGenerating,
   t,
   renderPreview,
   renderGenerating,
@@ -61,7 +62,12 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
     case StepType.GENERATING: {
       if (renderGenerating) return renderGenerating(generationProgress);
       return (
-        <GeneratingScreen progress={generationProgress} scenario={scenario} t={t} />
+        <GeneratingScreen
+          progress={generationProgress}
+          scenario={scenario}
+          t={t}
+          onDismiss={onDismissGenerating}
+        />
       );
     }
 

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.types.ts

@@ -18,6 +18,8 @@ export interface WizardStepRendererProps {
   readonly onShare: () => void;
   readonly onRate?: () => void;
   readonly onTryAgain?: () => void;
+  /** Called when user dismisses generating screen - generation continues in background */
+  readonly onDismissGenerating?: () => void;
   readonly t: (key: string) => string;
   readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
   readonly renderGenerating?: (progress: number) => React.ReactElement | null;

package/src/domains/generation/wizard/presentation/screens/GeneratingScreen.tsx

@@ -2,11 +2,12 @@
  * Generic Generating Screen
  * Shows indeterminate progress while AI generates content
  * Uses status messages instead of fake percentages (UX best practice)
+ * Supports background generation - user can dismiss and generation continues
  */
 
 import React, { useMemo } from "react";
-import { View, StyleSheet, ActivityIndicator } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { View, StyleSheet, ActivityIndicator, TouchableOpacity } from "react-native";
+import { useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
 import { useGenerationPhase } from "../hooks/useGenerationPhase";
 import { IndeterminateProgressBar } from "../components/IndeterminateProgressBar";
 
@@ -20,17 +21,19 @@ export interface GeneratingScreenProps {
       readonly title?: string;
       readonly waitMessage?: string;
       readonly hint?: string;
+      readonly backgroundHint?: string;
     };
   };
   readonly t: (key: string) => string;
-  readonly onCancel?: () => void;
+  /** Called when user dismisses the screen - generation continues in background */
+  readonly onDismiss?: () => void;
 }
 
 export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
   progress: _progress,
   scenario,
   t,
-  onCancel: _onCancel,
+  onDismiss,
 }) => {
   const tokens = useAppDesignTokens();
   const phase = useGenerationPhase();
@@ -48,6 +51,7 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
       title: custom?.title || t("generator.title"),
       waitMessage: custom?.waitMessage || t("generator.waitMessage"),
       hint: custom?.hint || t("generator.hint"),
+      backgroundHint: custom?.backgroundHint || t("generator.backgroundHint"),
     };
   }, [scenario, t]);
 
@@ -66,6 +70,17 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {/* Close button - allows user to dismiss and continue in background */}
+      {onDismiss && (
+        <TouchableOpacity
+          style={styles.closeButton}
+          onPress={onDismiss}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <AtomicIcon name="close" size="md" customColor={tokens.colors.textSecondary} />
+        </TouchableOpacity>
+      )}
+
       <View style={styles.content}>
         <ActivityIndicator size="large" color={tokens.colors.primary} />
 
@@ -93,6 +108,15 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
         <AtomicText type="bodySmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
           {messages.hint}
         </AtomicText>
+
+        {/* Background hint - tap to dismiss */}
+        {onDismiss && (
+          <TouchableOpacity style={styles.backgroundHintButton} onPress={onDismiss}>
+            <AtomicText type="bodySmall" style={[styles.backgroundHint, { color: tokens.colors.primary }]}>
+              {messages.backgroundHint}
+            </AtomicText>
+          </TouchableOpacity>
+        )}
       </View>
     </View>
   );
@@ -104,6 +128,13 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
+  closeButton: {
+    position: "absolute",
+    top: 16,
+    right: 16,
+    zIndex: 10,
+    padding: 8,
+  },
   content: {
     width: "80%",
     maxWidth: 400,
@@ -125,4 +156,13 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginTop: 8,
   },
+  backgroundHintButton: {
+    marginTop: 24,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  backgroundHint: {
+    textAlign: "center",
+    fontWeight: "600",
+  },
 });

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

@@ -26,13 +26,28 @@ export async function executeVideoFeature(
   request: VideoFeatureRequest,
   options?: ExecuteVideoFeatureOptions,
 ): Promise<VideoFeatureResult> {
+  if (__DEV__) {
+    console.log(`[VideoExecutor:${featureType}] START`, {
+      hasSource: !!request.sourceImageBase64,
+      hasTarget: !!request.targetImageBase64,
+      promptLength: request.prompt?.length ?? 0,
+      options: request.options,
+    });
+  }
+
   const provider = providerRegistry.getActiveProvider();
 
   if (!provider) {
+    if (__DEV__) {
+      console.log(`[VideoExecutor:${featureType}] ERROR: No provider`);
+    }
     return { success: false, error: "No AI provider configured" };
   }
 
   if (!provider.isInitialized()) {
+    if (__DEV__) {
+      console.log(`[VideoExecutor:${featureType}] ERROR: Provider not initialized`);
+    }
     return { success: false, error: "AI provider not initialized" };
   }
 
@@ -41,7 +56,7 @@ export async function executeVideoFeature(
   const model = provider.getVideoFeatureModel(featureType);
 
   if (__DEV__) {
-    console.log(`[Video:${featureType}] Provider: ${provider.providerId}, Model: ${model}`);
+    console.log(`[VideoExecutor:${featureType}] Provider: ${provider.providerId}, Model: ${model}`);
   }
 
   try {
@@ -52,31 +67,74 @@ export async function executeVideoFeature(
       options: request.options,
     };
 
+    if (__DEV__) {
+      console.log(`[VideoExecutor:${featureType}] InputData prepared`, {
+        sourceSize: inputData.sourceImageBase64 ? `${(inputData.sourceImageBase64.length / 1024).toFixed(1)}KB` : "N/A",
+        targetSize: inputData.targetImageBase64 ? `${(inputData.targetImageBase64.length / 1024).toFixed(1)}KB` : "N/A",
+        prompt: inputData.prompt?.substring(0, 50) + "...",
+      });
+    }
+
     const input = provider.buildVideoFeatureInput(featureType, inputData);
 
+    if (__DEV__) {
+      console.log(`[VideoExecutor:${featureType}] Built input for API`, {
+        inputKeys: Object.keys(input),
+        hasImageUrl: !!(input as Record<string, unknown>).image_url,
+        hasPrompt: !!(input as Record<string, unknown>).prompt,
+      });
+    }
+
+    let statusCount = 0;
     const result = await provider.subscribe(model, input, {
       timeoutMs: VIDEO_TIMEOUT_MS,
       onQueueUpdate: (status) => {
-        if (__DEV__) {
-          console.log(`[Video:${featureType}] Queue status:`, status.status);
+        statusCount++;
+        // Log every 10th status update to avoid spam
+        if (__DEV__ && statusCount % 10 === 1) {
+          console.log(`[VideoExecutor:${featureType}] Queue #${statusCount}:`, status.status);
         }
         onStatusChange?.(status.status);
       },
     });
 
+    if (__DEV__) {
+      console.log(`[VideoExecutor:${featureType}] API Response received`, {
+        totalStatusUpdates: statusCount,
+        resultKeys: result ? Object.keys(result as object) : "null",
+        resultType: typeof result,
+      });
+    }
+
     // Check for FAL API error in result (may return with COMPLETED status)
     checkFalApiError(result);
 
     const extractor = extractResult ?? extractVideoResult;
     const videoUrl = extractor(result);
 
+    if (__DEV__) {
+      console.log(`[VideoExecutor:${featureType}] Extracted video URL`, {
+        hasVideoUrl: !!videoUrl,
+        urlPreview: videoUrl ? videoUrl.substring(0, 80) + "..." : "N/A",
+      });
+    }
+
     if (!videoUrl) {
       if (__DEV__) {
-        console.log(`[Video:${featureType}] No video URL found in result`);
+        console.log(`[VideoExecutor:${featureType}] FAILED: No video URL`, {
+          result: JSON.stringify(result).substring(0, 500),
+        });
       }
       return { success: false, error: "No video in response" };
     }
 
+    if (__DEV__) {
+      console.log(`[VideoExecutor:${featureType}] SUCCESS`, {
+        videoUrl: videoUrl.substring(0, 80) + "...",
+        requestId: (result as { requestId?: string })?.requestId,
+      });
+    }
+
     return {
       success: true,
       videoUrl,
@@ -84,6 +142,12 @@ export async function executeVideoFeature(
     };
   } catch (error) {
     const message = extractErrorMessage(error, "Processing failed", `Video:${featureType}`);
+    if (__DEV__) {
+      console.log(`[VideoExecutor:${featureType}] EXCEPTION`, {
+        error: message,
+        originalError: error instanceof Error ? error.message : String(error),
+      });
+    }
     return { success: false, error: message };
   }
 }

package/src/presentation/layouts/DualImageFeatureLayout.tsx

@@ -5,7 +5,7 @@
  * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -31,6 +31,19 @@ export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
   const { width: screenWidth, horizontalPadding } = useResponsive();
   const imageSize = screenWidth - horizontalPadding * 2;
 
+  // Background generation: user can dismiss progress but generation continues
+  const [isProgressDismissed, setIsProgressDismissed] = useState(false);
+
+  useEffect(() => {
+    if (feature.isProcessing) {
+      setIsProgressDismissed(false);
+    }
+  }, [feature.isProcessing]);
+
+  const handleDismissProgress = useCallback(() => {
+    setIsProgressDismissed(true);
+  }, []);
+
   const handleProcess = useCallback(() => {
     void feature.process();
   }, [feature]);
@@ -48,7 +61,8 @@ export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
   }, [feature]);
 
   // Processing view - fullscreen (FutureUS pattern, no Modal)
-  if (feature.isProcessing) {
+  // Show only if processing AND not dismissed
+  if (feature.isProcessing && !isProgressDismissed) {
     return (
       <View
         style={[
@@ -63,6 +77,7 @@ export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
           message={modalTranslations.message}
           hint={modalTranslations.hint}
           backgroundHint={modalTranslations.backgroundHint}
+          onClose={handleDismissProgress}
           backgroundColor={tokens.colors.surface}
           textColor={tokens.colors.textPrimary}
           progressColor={tokens.colors.primary}

package/src/presentation/layouts/DualImageVideoFeatureLayout.tsx

@@ -5,7 +5,7 @@
  * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -27,6 +27,19 @@ export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutPr
 }) => {
   const tokens = useAppDesignTokens();
 
+  // Background generation: user can dismiss progress but generation continues
+  const [isProgressDismissed, setIsProgressDismissed] = useState(false);
+
+  useEffect(() => {
+    if (feature.isProcessing) {
+      setIsProgressDismissed(false);
+    }
+  }, [feature.isProcessing]);
+
+  const handleDismissProgress = useCallback(() => {
+    setIsProgressDismissed(true);
+  }, []);
+
   const handleProcess = useCallback(() => {
     void feature.process();
   }, [feature]);
@@ -44,7 +57,8 @@ export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutPr
   }, [feature]);
 
   // Processing view - fullscreen (FutureUS pattern, no Modal)
-  if (feature.isProcessing) {
+  // Show only if processing AND not dismissed
+  if (feature.isProcessing && !isProgressDismissed) {
     return (
       <View
         style={[
@@ -59,6 +73,7 @@ export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutPr
           message={modalTranslations.message}
           hint={modalTranslations.hint}
           backgroundHint={modalTranslations.backgroundHint}
+          onClose={handleDismissProgress}
           backgroundColor={tokens.colors.surface}
           textColor={tokens.colors.textPrimary}
           progressColor={tokens.colors.primary}

package/src/presentation/layouts/SingleImageFeatureLayout.tsx

@@ -5,7 +5,7 @@
  * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -32,6 +32,20 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
   const { width: screenWidth, horizontalPadding } = useResponsive();
   const imageSize = screenWidth - horizontalPadding * 2;
 
+  // Background generation: user can dismiss progress but generation continues
+  const [isProgressDismissed, setIsProgressDismissed] = useState(false);
+
+  // Reset dismissed state when processing starts
+  useEffect(() => {
+    if (feature.isProcessing) {
+      setIsProgressDismissed(false);
+    }
+  }, [feature.isProcessing]);
+
+  const handleDismissProgress = useCallback(() => {
+    setIsProgressDismissed(true);
+  }, []);
+
   const handleProcess = useCallback(() => {
     void feature.process();
   }, [feature]);
@@ -45,7 +59,8 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
   }, [feature]);
 
   // Processing view - fullscreen (FutureUS pattern, no Modal)
-  if (feature.isProcessing) {
+  // Show only if processing AND not dismissed (user can dismiss and generation continues)
+  if (feature.isProcessing && !isProgressDismissed) {
     return (
       <View
         style={[
@@ -60,6 +75,7 @@ export const SingleImageFeatureLayout: React.FC<SingleImageFeatureLayoutProps> =
           message={modalTranslations.message}
           hint={modalTranslations.hint}
           backgroundHint={modalTranslations.backgroundHint}
+          onClose={handleDismissProgress}
           backgroundColor={tokens.colors.surface}
           textColor={tokens.colors.textPrimary}
           progressColor={tokens.colors.primary}

package/src/presentation/layouts/SingleImageWithPromptFeatureLayout.tsx

@@ -6,7 +6,7 @@
  * Note: No Modal wrapper - shows fullscreen progress when processing (FutureUS pattern)
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -32,6 +32,19 @@ export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptF
   const { width: screenWidth, horizontalPadding } = useResponsive();
   const imageSize = screenWidth - horizontalPadding * 2;
 
+  // Background generation: user can dismiss progress but generation continues
+  const [isProgressDismissed, setIsProgressDismissed] = useState(false);
+
+  useEffect(() => {
+    if (feature.isProcessing) {
+      setIsProgressDismissed(false);
+    }
+  }, [feature.isProcessing]);
+
+  const handleDismissProgress = useCallback(() => {
+    setIsProgressDismissed(true);
+  }, []);
+
   const handleProcess = useCallback(() => {
     void feature.process();
   }, [feature]);
@@ -52,7 +65,8 @@ export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptF
   );
 
   // Processing view - fullscreen (FutureUS pattern, no Modal)
-  if (feature.isProcessing) {
+  // Show only if processing AND not dismissed
+  if (feature.isProcessing && !isProgressDismissed) {
     return (
       <View
         style={[
@@ -67,6 +81,7 @@ export const SingleImageWithPromptFeatureLayout: React.FC<SingleImageWithPromptF
           message={modalTranslations.message}
           hint={modalTranslations.hint}
           backgroundHint={modalTranslations.backgroundHint}
+          onClose={handleDismissProgress}
           backgroundColor={tokens.colors.surface}
           textColor={tokens.colors.textPrimary}
           progressColor={tokens.colors.primary}