vibefast-cli 1.3.0 → 1.3.1

package/recipes/image-analysis/apps/native/src/features/image-analyzer/app/camera.tsx

@@ -2,7 +2,13 @@ import { MaterialIcons } from '@expo/vector-icons';
 import { type CameraType, CameraView, useCameraPermissions } from 'expo-camera';
 import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useCallback, useRef, useState } from 'react';
-import { ActivityIndicator, Alert, TouchableOpacity, View } from 'react-native';
+import {
+  ActivityIndicator,
+  Alert,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
 import { Button, Image, Text } from '@/components/ui';
 import { useCameraCaptureStore } from '@/features/image-analyzer/hooks/use-image-analysis';
@@ -11,7 +17,6 @@ type CameraScreenParams = {
   stepId: string;
   stepLabel: string;
   stepDescription: string;
-  guideText: string;
 };
 
 /**
@@ -28,11 +33,12 @@ export default function CameraScreen() {
   const [facing, setFacing] = useState<CameraType>('back');
   const [capturedImageUri, setCapturedImageUri] = useState<string | null>(null);
   const [isCapturing, setIsCapturing] = useState(false);
+  const [isCameraReady, setIsCameraReady] = useState(false);
   const cameraRef = useRef<CameraView>(null);
 
   // Handle photo capture
   const handleTakePhoto = useCallback(async () => {
-    if (!cameraRef.current || isCapturing) return;
+    if (!cameraRef.current || isCapturing || !isCameraReady) return;
 
     try {
       setIsCapturing(true);
@@ -49,7 +55,7 @@ export default function CameraScreen() {
     } finally {
       setIsCapturing(false);
     }
-  }, [isCapturing]);
+  }, [isCapturing, isCameraReady]);
 
   // Handle retake
   const handleRetake = useCallback(() => {
@@ -147,74 +153,75 @@ export default function CameraScreen() {
       <View className="flex-1 bg-black">
         <CameraView
           ref={cameraRef}
-          style={{ flex: 1 }}
+          style={StyleSheet.absoluteFill}
           facing={facing}
           mode="picture"
-        >
-          {/* Header with step info */}
-          <View className="absolute inset-x-0 top-12 px-6">
-            <View className="rounded-xl bg-black/70 p-4">
-              <Text className="text-center text-lg font-bold text-white">
-                {params.stepLabel}
-              </Text>
-              <Text className="text-center text-sm text-white/80">
-                📸 {params.guideText}
-              </Text>
-            </View>
+          onCameraReady={() => setIsCameraReady(true)}
+        />
+
+        {/* Header with step info */}
+        <View className="absolute inset-x-0 top-12 px-6">
+          <View className="rounded-xl bg-black/70 p-4">
+            <Text className="text-center text-lg font-bold text-white">
+              {params.stepLabel}
+            </Text>
+            <Text className="text-center text-sm text-white/80">
+              📸 {params.stepDescription}
+            </Text>
           </View>
+        </View>
 
-          {/* Frame guide overlay */}
-          <View className="absolute inset-0 items-center justify-center">
-            <View className="relative size-80">
-              {/* Frame */}
-              <View className="absolute inset-0 rounded-2xl border-2 border-white/60" />
-
-              {/* Corner guides */}
-              <View className="absolute left-2 top-2 size-6 border-l-4 border-t-4 border-white" />
-              <View className="absolute right-2 top-2 size-6 border-r-4 border-t-4 border-white" />
-              <View className="absolute bottom-2 left-2 size-6 border-b-4 border-l-4 border-white" />
-              <View className="absolute bottom-2 right-2 size-6 border-b-4 border-r-4 border-white" />
-
-              {/* Center guide */}
-              <View className="absolute inset-0 items-center justify-center">
-                <View className="h-1 w-8 bg-white/60" />
-                <View className="absolute h-8 w-1 bg-white/60" />
-              </View>
+        {/* Frame guide overlay */}
+        <View className="absolute inset-0 items-center justify-center">
+          <View className="relative size-80">
+            {/* Frame */}
+            <View className="absolute inset-0 rounded-2xl border-2 border-white/60" />
+
+            {/* Corner guides */}
+            <View className="absolute left-2 top-2 size-6 border-l-4 border-t-4 border-white" />
+            <View className="absolute right-2 top-2 size-6 border-r-4 border-t-4 border-white" />
+            <View className="absolute bottom-2 left-2 size-6 border-b-4 border-l-4 border-white" />
+            <View className="absolute bottom-2 right-2 size-6 border-b-4 border-r-4 border-white" />
+
+            {/* Center guide */}
+            <View className="absolute inset-0 items-center justify-center">
+              <View className="h-1 w-8 bg-white/60" />
+              <View className="absolute h-8 w-1 bg-white/60" />
             </View>
           </View>
+        </View>
 
-          {/* Controls */}
-          <View className="absolute inset-x-0 bottom-12 flex-row items-center justify-center px-6">
-            {/* Close button */}
-            <TouchableOpacity
-              onPress={() => router.back()}
-              className="absolute left-6 size-12 items-center justify-center rounded-full bg-black/50"
-            >
-              <Text className="text-xl text-white">✕</Text>
-            </TouchableOpacity>
-
-            {/* Shutter button */}
-            <TouchableOpacity
-              onPress={handleTakePhoto}
-              disabled={isCapturing}
-              className="size-20 items-center justify-center rounded-full border-4 border-white bg-white/20"
-            >
-              {isCapturing ? (
-                <ActivityIndicator size="large" color="white" />
-              ) : (
-                <View className="size-16 rounded-full bg-white" />
-              )}
-            </TouchableOpacity>
-
-            {/* Flip camera button */}
-            <TouchableOpacity
-              onPress={toggleCameraFacing}
-              className="absolute right-6 size-12 items-center justify-center rounded-full bg-black/50"
-            >
-              <MaterialIcons name="cameraswitch" size={24} color="white" />
-            </TouchableOpacity>
-          </View>
-        </CameraView>
+        {/* Controls */}
+        <View className="absolute inset-x-0 bottom-12 flex-row items-center justify-center px-6">
+          {/* Close button */}
+          <TouchableOpacity
+            onPress={() => router.back()}
+            className="absolute left-6 size-12 items-center justify-center rounded-full bg-black/50"
+          >
+            <Text className="text-xl text-white">✕</Text>
+          </TouchableOpacity>
+
+          {/* Shutter button */}
+          <TouchableOpacity
+            onPress={handleTakePhoto}
+            disabled={isCapturing || !isCameraReady}
+            className="size-20 items-center justify-center rounded-full border-4 border-white bg-white/20"
+          >
+            {isCapturing ? (
+              <ActivityIndicator size="large" color="white" />
+            ) : (
+              <View className="size-16 rounded-full bg-white" />
+            )}
+          </TouchableOpacity>
+
+          {/* Flip camera button */}
+          <TouchableOpacity
+            onPress={toggleCameraFacing}
+            className="absolute right-6 size-12 items-center justify-center rounded-full bg-black/50"
+          >
+            <MaterialIcons name="cameraswitch" size={24} color="white" />
+          </TouchableOpacity>
+        </View>
       </View>
     </>
   );

package/recipes/image-analysis/apps/native/src/features/image-analyzer/app/image-capture-screen.tsx

@@ -1,19 +1,17 @@
 import * as ImagePicker from 'expo-image-picker';
 import { Stack, useRouter } from 'expo-router';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Alert, ScrollView, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Button, Image, Text } from '@/components/ui';
 import type { AnalysisFlowConfig } from '@/features/image-analyzer/config/master-analysis-config';
-import { useCameraCaptureStore } from '@/features/image-analyzer/hooks/use-image-analysis';
+import {
+  useCameraCaptureStore,
+  useImageCaptureFlowStore,
+} from '@/features/image-analyzer/hooks/use-image-analysis';
 import { translate } from '@/lib';
 
-export type CapturedImage = {
-  uri: string;
-  stepId: string;
-};
-
 type ImageCaptureScreenProps = {
   config: AnalysisFlowConfig;
 };
@@ -26,13 +24,27 @@ export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
   const router = useRouter();
   const { capturedImageUri, stepId, clearCapturedImage } =
     useCameraCaptureStore();
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [capturedImages, setCapturedImages] = useState<
-    (CapturedImage | null)[]
-  >(new Array(config.photoSteps.length).fill(null));
+  const {
+    currentStepIndex,
+    capturedImages,
+    initFlow,
+    setCurrentStepIndex,
+    setCapturedImageForStep,
+  } = useImageCaptureFlowStore();
+
+  useEffect(() => {
+    initFlow(config.id, config.photoSteps.length);
+  }, [config.id, config.photoSteps.length, initFlow]);
 
-  const currentStep = config.photoSteps[currentStepIndex];
-  const allImagesCaptured = capturedImages.every((img) => img !== null);
+  const stepImages =
+    capturedImages.length === config.photoSteps.length
+      ? capturedImages
+      : new Array(config.photoSteps.length).fill(null);
+  const safeStepIndex =
+    currentStepIndex < config.photoSteps.length ? currentStepIndex : 0;
+  const currentStep = config.photoSteps[safeStepIndex];
+  const activeStepIndex = safeStepIndex;
+  const allImagesCaptured = stepImages.every((img) => img !== null);
 
   // Handle incoming captured image from camera screen via Zustand store
   useEffect(() => {
@@ -49,13 +61,9 @@ export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
       }
 
       // Update the captured images array
-      setCapturedImages((prevImages) => {
-        const newCapturedImages = [...prevImages];
-        newCapturedImages[capturedStepIndex] = {
-          uri: capturedImageUri,
-          stepId: stepId,
-        };
-        return newCapturedImages;
+      setCapturedImageForStep(capturedStepIndex, {
+        uri: capturedImageUri,
+        stepId: stepId,
       });
 
       // Only auto-advance if we're currently viewing the step we just captured
@@ -72,7 +80,14 @@ export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
 
       clearCapturedImage();
     }
-  }, [capturedImageUri, stepId, clearCapturedImage, config.photoSteps]);
+  }, [
+    capturedImageUri,
+    stepId,
+    clearCapturedImage,
+    config.photoSteps,
+    setCapturedImageForStep,
+    setCurrentStepIndex,
+  ]);
 
   // Handle camera launch
   const handleOpenCamera = useCallback(async () => {
@@ -124,35 +139,40 @@ export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
       if (!result.canceled && result.assets[0]) {
         const imageUri = result.assets[0].uri;
 
-        setCapturedImages((prevImages) => {
-          const newCapturedImages = [...prevImages];
-          newCapturedImages[currentStepIndex] = {
-            uri: imageUri,
-            stepId: currentStep.id,
-          };
-          return newCapturedImages;
+        setCapturedImageForStep(activeStepIndex, {
+          uri: imageUri,
+          stepId: currentStep.id,
         });
 
         // Auto-advance to next step if not last
-        const isLastStep = currentStepIndex === config.photoSteps.length - 1;
+        const isLastStep = activeStepIndex === config.photoSteps.length - 1;
         if (!isLastStep) {
-          setCurrentStepIndex(currentStepIndex + 1);
+          setCurrentStepIndex(activeStepIndex + 1);
         }
       }
     } catch (error) {
       console.error('Error selecting from gallery:', error);
       Alert.alert('Error', 'Failed to select image. Please try again.');
     }
-  }, [currentStepIndex, currentStep.id, config.photoSteps.length]);
+  }, [
+    activeStepIndex,
+    currentStep.id,
+    config.photoSteps.length,
+    setCapturedImageForStep,
+    setCurrentStepIndex,
+  ]);
 
   // Handle step switching - allow clicking any step freely
-  const handleStepSwitch = useCallback((targetIndex: number) => {
-    setCurrentStepIndex(targetIndex);
-  }, []);
+  const handleStepSwitch = useCallback(
+    (targetIndex: number) => {
+      setCurrentStepIndex(targetIndex);
+    },
+    [setCurrentStepIndex],
+  );
 
   // Handle continue - either to options or directly to loading based on config
   const handleContinue = useCallback(() => {
-    const imageUris = capturedImages.map((img) => img!.uri);
+    const imageUris = stepImages.map((img) => img!.uri);
 
     if (config.skipOptionsScreen) {
       // Go directly to loading with default preferences
@@ -176,7 +196,7 @@ export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
         },
       });
     }
-  }, [capturedImages, router, config]);
+  }, [stepImages, router, config]);
 
   const insets = useSafeAreaInsets();
 
@@ -203,16 +223,16 @@ export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
                   <TouchableOpacity
                     onPress={() => handleStepSwitch(index)}
                     className={`relative z-10 size-16 items-center justify-center rounded-full border-2 ${
-                      capturedImages[index] !== null
+                      stepImages[index] !== null
                         ? 'border-green-500 bg-green-500'
-                        : index === currentStepIndex
+                        : index === activeStepIndex
                           ? 'border-primary-600 bg-primary-600'
                           : 'border-neutral-300 bg-white dark:border-neutral-600 dark:bg-neutral-800'
                     }`}
                   >
-                    {capturedImages[index] !== null ? (
+                    {stepImages[index] !== null ? (
                       <Text className="text-2xl font-bold text-white">✓</Text>
-                    ) : index === currentStepIndex ? (
+                    ) : index === activeStepIndex ? (
                       <Text className="text-xl font-semibold text-white">
                         {index + 1}
                       </Text>
@@ -227,9 +247,9 @@ export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
                   {index < config.photoSteps.length - 1 && (
                     <View
                       className={`mx-3 h-0.5 flex-1 ${
-                        capturedImages[index] !== null
+                        stepImages[index] !== null
                           ? 'bg-green-500'
-                          : index < currentStepIndex
+                          : index < activeStepIndex
                             ? 'bg-primary-600'
                             : 'bg-neutral-300 dark:bg-neutral-600'
                       }`}
@@ -274,8 +294,8 @@ export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
             {/* Guide Image or Captured Image */}
             <Image
               source={
-                capturedImages[currentStepIndex]
-                  ? { uri: capturedImages[currentStepIndex]!.uri }
+                stepImages[activeStepIndex]
+                  ? { uri: stepImages[activeStepIndex]!.uri }
                   : currentStep.guideImage
               }
               className="aspect-square w-full rounded-3xl"
@@ -294,9 +314,7 @@ export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
         <View className="mb-1 flex-row gap-x-3">
           <Button
             onPress={handleOpenCamera}
-            label={
-              capturedImages[currentStepIndex] ? 'Retake Photo' : 'Take Photo'
-            }
+            label={stepImages[activeStepIndex] ? 'Retake Photo' : 'Take Photo'}
             className="flex-1 bg-primary-600"
             textClassName="text-white font-semibold"
           />

package/recipes/image-analysis/apps/native/src/features/image-analyzer/app/loading-screen.tsx

@@ -1,6 +1,12 @@
 import type { Id } from '@vibefast/backend/_generated/dataModel';
 import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { ActivityIndicator, Alert, Animated, View } from 'react-native';
 
 import { Button, Text } from '@/components/ui';
@@ -42,6 +48,10 @@ export function LoadingScreen({ config }: LoadingScreenProps) {
   const [analysisId, setAnalysisId] = useState<Id<'imageAnalyses'> | undefined>(
     undefined,
   );
+  const hasStartedRef = useRef(false);
+  const isRunningRef = useRef(false);
+  const hasHandledFailureRef = useRef(false);
+  const hasNavigatedRef = useRef(false);
 
   const analyzeImages = useAnalyzeImages();
 
@@ -50,6 +60,12 @@ export function LoadingScreen({ config }: LoadingScreenProps) {
 
   // Handle analysis creation
   const handleCreateAnalysis = useCallback(async () => {
+    if (isRunningRef.current) {
+      return;
+    }
+
+    isRunningRef.current = true;
+    hasHandledFailureRef.current = false;
     try {
       setCurrentStep('Converting images...');
       setProgress(10);
@@ -60,6 +76,7 @@ export function LoadingScreen({ config }: LoadingScreenProps) {
           goal: analysisGoal,
           feedbackStyle,
         },
+        analysisConfigId: config.convexAnalysisConfigId,
         onProgress: (step: string, progressValue: number) => {
           setCurrentStep(step);
           setProgress(progressValue);
@@ -90,11 +107,25 @@ export function LoadingScreen({ config }: LoadingScreenProps) {
           },
         ],
       );
+    } finally {
+      isRunningRef.current = false;
     }
-  }, [imageUris, analysisGoal, feedbackStyle, analyzeImages, router]);
+  }, [
+    imageUris,
+    analysisGoal,
+    feedbackStyle,
+    analyzeImages,
+    router,
+    config.convexAnalysisConfigId,
+  ]);
 
   // Start analysis on mount
   useEffect(() => {
+    if (hasStartedRef.current) {
+      return;
+    }
+
+    hasStartedRef.current = true;
     handleCreateAnalysis();
   }, [handleCreateAnalysis]);
 
@@ -107,6 +138,11 @@ export function LoadingScreen({ config }: LoadingScreenProps) {
           setProgress(80);
           break;
         case 'completed':
+          if (hasNavigatedRef.current) {
+            return;
+          }
+
+          hasNavigatedRef.current = true;
           setCurrentStep('Analysis complete!');
           setProgress(100);
           // Navigate to results after a brief delay
@@ -123,6 +159,11 @@ export function LoadingScreen({ config }: LoadingScreenProps) {
           }, 1000);
           break;
         case 'failed':
+          if (hasHandledFailureRef.current) {
+            return;
+          }
+
+          hasHandledFailureRef.current = true;
           setCurrentStep('Analysis failed');
           setProgress(0);
           Alert.alert(

package/recipes/image-analysis/apps/native/src/features/image-analyzer/app/loading.tsx

@@ -1,6 +1,12 @@
 import type { Id } from '@vibefast/backend/_generated/dataModel';
 import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { ActivityIndicator, Alert, View } from 'react-native';
 
 import { Button, Text } from '@/components/ui';
@@ -40,6 +46,10 @@ export default function LoadingScreen() {
   const [analysisId, setAnalysisId] = useState<Id<'imageAnalyses'> | undefined>(
     undefined,
   );
+  const hasStartedRef = useRef(false);
+  const isRunningRef = useRef(false);
+  const hasHandledFailureRef = useRef(false);
+  const hasNavigatedRef = useRef(false);
 
   const analyzeImages = useAnalyzeImages();
 
@@ -48,6 +58,12 @@ export default function LoadingScreen() {
 
   // Handle analysis creation
   const handleCreateAnalysis = useCallback(async () => {
+    if (isRunningRef.current) {
+      return;
+    }
+
+    isRunningRef.current = true;
+    hasHandledFailureRef.current = false;
     try {
       setCurrentStep('Converting images...');
       setProgress(10);
@@ -88,11 +104,18 @@ export default function LoadingScreen() {
           },
         ],
       );
+    } finally {
+      isRunningRef.current = false;
     }
   }, [imageUris, analysisGoal, feedbackStyle, analyzeImages, router]);
 
   // Start analysis on mount
   useEffect(() => {
+    if (hasStartedRef.current) {
+      return;
+    }
+
+    hasStartedRef.current = true;
     handleCreateAnalysis();
   }, [handleCreateAnalysis]);
 
@@ -105,6 +128,11 @@ export default function LoadingScreen() {
           setProgress(80);
           break;
         case 'completed':
+          if (hasNavigatedRef.current) {
+            return;
+          }
+
+          hasNavigatedRef.current = true;
           setCurrentStep('Analysis complete!');
           setProgress(100);
           // Navigate to results after a brief delay
@@ -120,6 +148,11 @@ export default function LoadingScreen() {
           }, 1000);
           break;
         case 'failed':
+          if (hasHandledFailureRef.current) {
+            return;
+          }
+
+          hasHandledFailureRef.current = true;
           setCurrentStep('Analysis failed');
           setProgress(0);
           Alert.alert(

package/recipes/image-analysis/apps/native/src/features/image-analyzer/hooks/use-image-analysis.ts

@@ -1,5 +1,5 @@
 import type { Id } from '@vibefast/backend/_generated/dataModel';
-import * as FileSystem from 'expo-file-system';
+import * as FileSystem from 'expo-file-system/legacy';
 import * as ImageManipulator from 'expo-image-manipulator';
 import { useCallback } from 'react';
 import { create } from 'zustand';
@@ -28,6 +28,7 @@ export type AnalyzeImagesParams = {
     goal: string;
     feedbackStyle: string;
   };
+  analysisConfigId?: string;
   onProgress?: (step: string, progress: number) => void;
 };
 
@@ -40,6 +41,85 @@ export type CreateImageAnalysisParams = {
   onProgress?: (step: string, progress: number) => void;
 };
 
+export type CapturedImage = {
+  uri: string;
+  stepId: string;
+};
+
+type StepIndexUpdater = number | ((current: number) => number);
+
+type ImageCaptureFlowState = {
+  flowId: string | null;
+  stepsCount: number;
+  currentStepIndex: number;
+  capturedImages: (CapturedImage | null)[];
+  initFlow: (flowId: string, stepsCount: number) => void;
+  setCurrentStepIndex: (updater: StepIndexUpdater) => void;
+  setCapturedImageForStep: (stepIndex: number, image: CapturedImage) => void;
+  clearFlow: () => void;
+};
+
+export const useImageCaptureFlowStore = create<ImageCaptureFlowState>(
+  (set) => ({
+    flowId: null,
+    stepsCount: 0,
+    currentStepIndex: 0,
+    capturedImages: [],
+    initFlow: (flowId, stepsCount) =>
+      set((state) => {
+        if (
+          state.flowId === flowId &&
+          state.stepsCount === stepsCount &&
+          state.capturedImages.length === stepsCount
+        ) {
+          return state;
+        }
+
+        return {
+          flowId,
+          stepsCount,
+          currentStepIndex: 0,
+          capturedImages: new Array(stepsCount).fill(null),
+        };
+      }),
+    setCurrentStepIndex: (updater) =>
+      set((state) => {
+        const nextIndex =
+          typeof updater === 'function'
+            ? updater(state.currentStepIndex)
+            : updater;
+        if (state.stepsCount <= 0) {
+          return { currentStepIndex: nextIndex };
+        }
+
+        const maxIndex = state.stepsCount - 1;
+        const clampedIndex = Math.max(0, Math.min(nextIndex, maxIndex));
+        return { currentStepIndex: clampedIndex };
+      }),
+    setCapturedImageForStep: (stepIndex, image) =>
+      set((state) => {
+        const nextImages =
+          state.stepsCount > 0 ? new Array(state.stepsCount).fill(null) : [];
+
+        if (state.capturedImages.length === state.stepsCount) {
+          state.capturedImages.forEach((item, index) => {
+            nextImages[index] = item;
+          });
+        }
+
+        nextImages[stepIndex] = image;
+        return { capturedImages: nextImages };
+      }),
+    clearFlow: () =>
+      set({
+        flowId: null,
+        stepsCount: 0,
+        currentStepIndex: 0,
+        capturedImages: [],
+      }),
+  }),
+);
+
 /**
  * Hook for analyzing images using the new background processing flow.
  */
@@ -50,7 +130,7 @@ export function useAnalyzeImages() {
     async (
       params: AnalyzeImagesParams,
     ): Promise<Id<'imageAnalyses'> | null> => {
-      const { imageUris, preferences, onProgress } = params;
+      const { imageUris, preferences, analysisConfigId, onProgress } = params;
 
       try {
         onProgress?.('Optimizing images...', 15);
@@ -92,6 +172,7 @@ export function useAnalyzeImages() {
         const analysisId = await analyzeAction({
           imagesAsBase64: base64Images,
           preferences,
+          analysisConfigId,
         });
 
         onProgress?.('Analysis in progress...', 50);