vibefast-cli 1.2.1 → 1.3.1

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);

package/recipes/image-analysis/recipe.json

@@ -1,38 +1,30 @@
 {
   "name": "image-analysis",
   "version": "1.0.0",
-  "description": "AI-powered image analysis",
+  "description": "AI image analysis",
   "copy": [
+    {
+      "from": "apps/native/src/app/analysis",
+      "to": "apps/native/src/app/(root)/(protected)/analysis"
+    },
     {
       "from": "apps/native/src/features/image-analyzer",
       "to": "apps/native/src/features/image-analyzer"
     },
     {
-      "from": "apps/native/src/api-client/image-analyzer.ts",
-      "to": "apps/native/src/api-client/image-analyzer.ts"
+      "from": "packages/backend/convex/imageAnalysis",
+      "to": "packages/backend/convex/imageAnalysis"
     },
     {
       "from": "packages/backend/convex/imageAnalysis.ts",
       "to": "packages/backend/convex/imageAnalysis.ts"
-    },
-    {
-      "from": "packages/backend/convex/imageAnalysis",
-      "to": "packages/backend/convex/imageAnalysis"
     }
   ],
-  "configuration": {
-    "apiClient": {
-      "exports": [
-        "export { type ImageAnalyzerApi, imageAnalyzerApi } from './image-analyzer';"
-      ]
-    }
-  },
   "nav": {
-    "href": "/(root)/(protected)/image-analyzer",
-    "label": "Image Analyzer",
+    "href": "/(root)/(protected)/analysis/face-analysis",
+    "label": "Image Analysis",
     "icon": "🔍",
-    "color": "#3B82F6"
+    "color": "#22C55E"
   },
-  "target": "native",
-  "dependencies": { "expo": ["expo-camera", "expo-image-picker"] }
+  "target": "native"
 }

package/recipes/image-analysis-supabase/apps/native/src/app/analysis/[type]/_layout.tsx

@@ -0,0 +1,5 @@
+import { Slot } from 'expo-router';
+
+export default function AnalysisLayout() {
+  return <Slot />;
+}

package/recipes/image-analysis-supabase/apps/native/src/app/analysis/[type]/analysis-options.tsx

@@ -0,0 +1,50 @@
+import { Redirect, useLocalSearchParams } from 'expo-router';
+import React from 'react';
+import { View } from 'react-native';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { DynamicAnalysisOptionsScreen } from '@/features/image-analyzer/app/analysis-options-screen';
+import { getAnalysisFlowConfigSafe } from '@/features/image-analyzer/config/master-analysis-config';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Dynamic analysis options route that loads the appropriate configuration
+ * based on the type parameter
+ */
+export default function DynamicAnalysisOptionsRoute() {
+  const { type } = useLocalSearchParams<{ type: string }>();
+  const theme = useThemeConfig();
+
+  if (!type || typeof type !== 'string') {
+    return <Redirect href="/(protected)/(tabs)" />;
+  }
+
+  const config = getAnalysisFlowConfigSafe(type);
+
+  if (!config) {
+    // Invalid analysis type, redirect to home with a user-friendly message
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 20,
+        }}
+      >
+        <FocusAwareStatusBar />
+        <Text className="mb-4 text-center text-lg font-medium">
+          {translate('common.invalid_analysis_type')}
+        </Text>
+        <Text className="mb-6 text-center text-muted-foreground">
+          {translate('common.redirecting_home')}
+        </Text>
+        <Redirect href="/(protected)/(tabs)" />
+      </View>
+    );
+  }
+
+  return <DynamicAnalysisOptionsScreen config={config} />;
+}

package/recipes/image-analysis-supabase/apps/native/src/app/analysis/[type]/camera.tsx

@@ -0,0 +1,2 @@
+// Re-export the camera screen
+export { default } from '@/features/image-analyzer/app/camera';

package/recipes/image-analysis-supabase/apps/native/src/app/analysis/[type]/index.tsx

@@ -0,0 +1,50 @@
+import { Redirect, useLocalSearchParams } from 'expo-router';
+import React from 'react';
+import { View } from 'react-native';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { ImageCaptureScreen } from '@/features/image-analyzer/app/image-capture-screen';
+import { getAnalysisFlowConfigSafe } from '@/features/image-analyzer/config/master-analysis-config';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Dynamic analysis route that loads the appropriate configuration
+ * based on the type parameter
+ */
+export default function DynamicAnalysisScreen() {
+  const { type } = useLocalSearchParams<{ type: string }>();
+  const theme = useThemeConfig();
+
+  if (!type || typeof type !== 'string') {
+    return <Redirect href="/(protected)/(tabs)" />;
+  }
+
+  const config = getAnalysisFlowConfigSafe(type);
+
+  if (!config) {
+    // Invalid analysis type, redirect to home with a user-friendly message
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 20,
+        }}
+      >
+        <FocusAwareStatusBar />
+        <Text className="mb-4 text-center text-lg font-medium">
+          {translate('common.invalid_analysis_type')}
+        </Text>
+        <Text className="mb-6 text-center text-muted-foreground">
+          {translate('common.redirecting_home')}
+        </Text>
+        <Redirect href="/(protected)/(tabs)" />
+      </View>
+    );
+  }
+
+  return <ImageCaptureScreen config={config} />;
+}