vibefast-cli 1.1.3 → 1.2.1

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

@@ -0,0 +1,214 @@
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Alert, Animated, View } from 'react-native';
+
+import { Button, Text } from '@/components/ui';
+import type { AnalysisFlowConfig } from '@/features/image-analyzer/config/master-analysis-config';
+import {
+  useAnalysisStatus,
+  useAnalyzeImages,
+} from '@/features/image-analyzer/hooks/use-image-analysis';
+
+type LoadingScreenParams = {
+  imageUris: string; // JSON stringified array of image URIs
+  analysisGoal: string;
+  feedbackStyle: string;
+};
+
+type LoadingScreenProps = {
+  config: AnalysisFlowConfig;
+};
+
+/**
+ * Loading screen that handles image analysis creation with background processing.
+ * Shows progress and navigates to results when complete.
+ */
+export function LoadingScreen({ config }: LoadingScreenProps) {
+  const router = useRouter();
+  const params = useLocalSearchParams() as LoadingScreenParams;
+
+  // Parse parameters
+  const imageUris: string[] = useMemo(
+    () => (params.imageUris ? JSON.parse(params.imageUris) : []),
+    [params.imageUris],
+  );
+  const { analysisGoal, feedbackStyle } = params;
+
+  const [currentStep, setCurrentStep] = useState<string>(
+    'Preparing analysis...',
+  );
+  const [progress, setProgress] = useState(0);
+  const [analysisId, setAnalysisId] = useState<string | undefined>(undefined);
+
+  const analyzeImages = useAnalyzeImages();
+
+  // Poll for analysis completion
+  const analysisData = useAnalysisStatus(analysisId);
+
+  // Handle analysis creation
+  const handleCreateAnalysis = useCallback(async () => {
+    try {
+      setCurrentStep('Converting images...');
+      setProgress(10);
+
+      const id = await analyzeImages({
+        imageUris,
+        preferences: {
+          goal: analysisGoal,
+          feedbackStyle,
+        },
+        onProgress: (step: string, progressValue: number) => {
+          setCurrentStep(step);
+          setProgress(progressValue);
+        },
+      });
+
+      if (id) {
+        setAnalysisId(id);
+        setCurrentStep('Analysis started...');
+        setProgress(60);
+      } else {
+        throw new Error('Failed to start analysis');
+      }
+    } catch (error) {
+      console.error('Error creating analysis:', error);
+      Alert.alert(
+        'Analysis Failed',
+        'Failed to start the analysis. Please try again.',
+        [
+          {
+            text: 'Retry',
+            onPress: handleCreateAnalysis,
+          },
+          {
+            text: 'Go Back',
+            style: 'cancel',
+            onPress: () => router.back(),
+          },
+        ],
+      );
+    }
+  }, [imageUris, analysisGoal, feedbackStyle, analyzeImages, router]);
+
+  // Start analysis on mount
+  useEffect(() => {
+    handleCreateAnalysis();
+  }, [handleCreateAnalysis]);
+
+  // Listen for analysis completion
+  useEffect(() => {
+    if (analysisData) {
+      switch (analysisData.status) {
+        case 'processing':
+          setCurrentStep('AI is analyzing your images...');
+          setProgress(80);
+          break;
+        case 'completed':
+          setCurrentStep('Analysis complete!');
+          setProgress(100);
+          // Navigate to results after a brief delay
+          setTimeout(() => {
+            router.replace({
+              pathname: '/analysis/[type]/results' as any,
+              params: {
+                type: config.id,
+                analysisId,
+                localImageUris: JSON.stringify(imageUris),
+                isFirstTime: 'true',
+              },
+            });
+          }, 1000);
+          break;
+        case 'failed':
+          setCurrentStep('Analysis failed');
+          setProgress(0);
+          Alert.alert(
+            'Analysis Failed',
+            'The analysis could not be completed. Please try again.',
+            [
+              {
+                text: 'Retry',
+                onPress: handleCreateAnalysis,
+              },
+              {
+                text: 'Go Back',
+                style: 'cancel',
+                onPress: () => router.back(),
+              },
+            ],
+          );
+          break;
+      }
+    }
+  }, [
+    analysisData,
+    router,
+    analysisId,
+    handleCreateAnalysis,
+    imageUris,
+    config.id,
+  ]);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerShown: false,
+        }}
+      />
+      <View className="flex-1 items-center justify-center bg-white px-6 dark:bg-neutral-900">
+        {/* Config Header */}
+        <View className="mb-6 items-center">
+          <View
+            className="mb-3 size-16 items-center justify-center rounded-full"
+            style={{ backgroundColor: config.color }}
+          >
+            <Text className="text-3xl">{config.icon}</Text>
+          </View>
+          <Text className="text-center text-xl font-bold text-neutral-900 dark:text-white">
+            {config.name} Analysis
+          </Text>
+        </View>
+
+        {/* Main Loading Indicator */}
+        <View className="mb-8 items-center">
+          <ActivityIndicator size="large" className="mb-4 text-primary-600" />
+          <Text className="text-center text-lg font-semibold text-neutral-700 dark:text-neutral-300">
+            Processing Your Analysis
+          </Text>
+        </View>
+
+        {/* Progress Bar */}
+        <View className="mb-6 w-full max-w-sm">
+          <View className="mb-2 h-2 w-full rounded-full bg-neutral-200 dark:bg-neutral-700">
+            <Animated.View
+              className="h-full rounded-full bg-primary-600 transition-all duration-500"
+              style={{ width: `${progress}%` }}
+            />
+          </View>
+          <Text className="text-center text-sm text-neutral-600 dark:text-neutral-400">
+            {progress}% complete
+          </Text>
+        </View>
+
+        {/* Current Step */}
+        <View className="mb-8">
+          <Text className="text-center text-base text-neutral-700 dark:text-neutral-300">
+            {currentStep}
+          </Text>
+        </View>
+
+        {/* Emergency Back Button */}
+        <View className="absolute inset-x-6 bottom-8">
+          <Button
+            label="Cancel Analysis"
+            variant="ghost"
+            onPress={() => router.back()}
+            className="w-full"
+            testID="cancel-analysis-button"
+          />
+        </View>
+      </View>
+    </>
+  );
+}

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

@@ -0,0 +1,191 @@
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Alert, View } from 'react-native';
+
+import { Button, Text } from '@/components/ui';
+import {
+  useAnalysisStatus,
+  useAnalyzeImages,
+} from '@/features/image-analyzer/hooks/use-image-analysis';
+import { translate } from '@/lib';
+
+type LoadingScreenParams = {
+  type: string; // Analysis type from route parameter
+  imageUris: string; // JSON stringified array of image URIs
+  analysisGoal: string;
+  feedbackStyle: string;
+};
+
+/**
+ * Loading screen that handles image analysis creation with background processing.
+ * Shows progress and navigates to results when complete.
+ */
+export default function LoadingScreen() {
+  const router = useRouter();
+  const params = useLocalSearchParams() as LoadingScreenParams;
+  const { type } = params;
+
+  // Parse parameters
+  const imageUris: string[] = useMemo(
+    () => (params.imageUris ? JSON.parse(params.imageUris) : []),
+    [params.imageUris],
+  );
+  const { analysisGoal, feedbackStyle } = params;
+
+  const [currentStep, setCurrentStep] = useState<string>(
+    'Preparing analysis...',
+  );
+  const [progress, setProgress] = useState(0);
+  const [analysisId, setAnalysisId] = useState<string | undefined>(undefined);
+
+  const analyzeImages = useAnalyzeImages();
+
+  // Poll for analysis completion
+  const analysisData = useAnalysisStatus(analysisId);
+
+  // Handle analysis creation
+  const handleCreateAnalysis = useCallback(async () => {
+    try {
+      setCurrentStep('Converting images...');
+      setProgress(10);
+
+      const id = await analyzeImages({
+        imageUris,
+        preferences: {
+          goal: analysisGoal,
+          feedbackStyle,
+        },
+        onProgress: (step: string, progressValue: number) => {
+          setCurrentStep(step);
+          setProgress(progressValue);
+        },
+      });
+
+      if (id) {
+        setAnalysisId(id);
+        setCurrentStep('Analysis started...');
+        setProgress(60);
+      } else {
+        throw new Error('Failed to start analysis');
+      }
+    } catch (error) {
+      console.error('Error creating analysis:', error);
+      Alert.alert(
+        'Analysis Failed',
+        'Failed to start the analysis. Please try again.',
+        [
+          {
+            text: 'Retry',
+            onPress: handleCreateAnalysis,
+          },
+          {
+            text: 'Go Back',
+            style: 'cancel',
+            onPress: () => router.back(),
+          },
+        ],
+      );
+    }
+  }, [imageUris, analysisGoal, feedbackStyle, analyzeImages, router]);
+
+  // Start analysis on mount
+  useEffect(() => {
+    handleCreateAnalysis();
+  }, [handleCreateAnalysis]);
+
+  // Listen for analysis completion
+  useEffect(() => {
+    if (analysisData) {
+      switch (analysisData.status) {
+        case 'processing':
+          setCurrentStep('AI is analyzing your images...');
+          setProgress(80);
+          break;
+        case 'completed':
+          setCurrentStep('Analysis complete!');
+          setProgress(100);
+          // Navigate to results after a brief delay
+          setTimeout(() => {
+            router.replace({
+              pathname: `/analysis/${type}/results` as any,
+              params: {
+                analysisId,
+                localImageUris: JSON.stringify(imageUris),
+                isFirstTime: 'true',
+              },
+            });
+          }, 1000);
+          break;
+        case 'failed':
+          setCurrentStep('Analysis failed');
+          setProgress(0);
+          Alert.alert(
+            'Analysis Failed',
+            'The analysis could not be completed. Please try again.',
+            [
+              {
+                text: 'Retry',
+                onPress: handleCreateAnalysis,
+              },
+              {
+                text: 'Go Back',
+                style: 'cancel',
+                onPress: () => router.back(),
+              },
+            ],
+          );
+          break;
+      }
+    }
+  }, [analysisData, router, analysisId, handleCreateAnalysis, imageUris, type]);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: translate('analysis.loading_title'),
+          headerBackButtonDisplayMode: 'generic',
+        }}
+      />
+      <View className="flex-1 items-center justify-center bg-white px-6 dark:bg-neutral-900">
+        {/* Main Loading Indicator */}
+        <View className="mb-8 items-center">
+          <ActivityIndicator size="large" className="mb-4 text-primary-600" />
+          <Text className="text-center text-xl font-bold text-neutral-900 dark:text-white">
+            Processing Your Analysis
+          </Text>
+        </View>
+
+        {/* Progress Bar */}
+        <View className="mb-6 w-full max-w-sm">
+          <View className="mb-2 h-2 w-full rounded-full bg-neutral-200 dark:bg-neutral-700">
+            <View
+              className="h-full rounded-full bg-primary-600 transition-all duration-500"
+              style={{ width: `${progress}%` }}
+            />
+          </View>
+          <Text className="text-center text-sm text-neutral-600 dark:text-neutral-400">
+            {progress}% complete
+          </Text>
+        </View>
+
+        {/* Current Step */}
+        <View className="mb-8">
+          <Text className="text-center text-base text-neutral-700 dark:text-neutral-300">
+            {currentStep}
+          </Text>
+        </View>
+        {/* Emergency Back Button */}
+        <View className="absolute inset-x-6 bottom-8">
+          <Button
+            label="Cancel Analysis"
+            variant="ghost"
+            onPress={() => router.back()}
+            className="w-full"
+            testID="cancel-analysis-button"
+          />
+        </View>
+      </View>
+    </>
+  );
+}

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

@@ -0,0 +1,137 @@
+import { Stack } from 'expo-router';
+import React from 'react';
+import Animated from 'react-native-reanimated';
+
+import { AnimatedHeader, ScreenFooter } from '@/components/ui';
+
+import { AchievementsSection } from '../components/results/achievements-section';
+import { ErrorState } from '../components/results/error-state';
+import { LoadingState } from '../components/results/loading-state';
+import { ProfileImage } from '../components/results/profile-image';
+import { ShareOptionsModal } from '../components/results/share-options-modal';
+import { TraitsGrid } from '../components/results/traits-grid';
+import {
+  formatTraitName,
+  getUnlockedAchievements,
+} from '../services/analysis-service';
+import { useResultsScreen } from './use-results-screen';
+
+/**
+ * Clean, modular Results Screen without localization
+ */
+export default function ResultsScreen() {
+  const {
+    localAnalysis,
+    isLoading,
+    error,
+    extractedScores,
+    imageLoadError,
+    processedImageUrl,
+    isSubscribed,
+    showShareModal,
+    scrollY,
+    scale,
+    handleBackPress,
+    handleImageError,
+    handleTraitPress,
+    handleNewAnalysis,
+    handleShareResults,
+    setShowShareModal,
+    scrollHandler,
+  } = useResultsScreen();
+
+  // Calculate achievements
+  const achievements = extractedScores
+    ? getUnlockedAchievements(extractedScores)
+    : [];
+
+  // Prepare trait scores for display - completely dynamic
+  const traitScores = React.useMemo(() => {
+    if (!extractedScores) return [];
+
+    return Object.entries(extractedScores)
+      .filter(([key]) => key !== 'overall')
+      .map(([key, score]) => ({
+        key,
+        trait: formatTraitName(key),
+        score,
+      }));
+  }, [extractedScores]);
+
+  // Early returns for loading and error states
+  if (isLoading) {
+    return <LoadingState />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} onRetry={handleBackPress} />;
+  }
+
+  if (!localAnalysis || !extractedScores) {
+    return (
+      <ErrorState
+        error="No analysis data available."
+        onRetry={handleBackPress}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <AnimatedHeader
+        onBack={handleBackPress}
+        scrollY={scrollY}
+        title="Analysis Results"
+      />
+      <Animated.ScrollView
+        onScroll={scrollHandler}
+        scrollEventThrottle={16}
+        className="flex-1"
+        contentContainerStyle={{ paddingBottom: 120 }}
+        showsVerticalScrollIndicator={false}
+      >
+        <ProfileImage
+          imageUrl={processedImageUrl}
+          hasError={imageLoadError}
+          onError={handleImageError}
+        />
+
+        <TraitsGrid
+          overallScore={extractedScores.overall}
+          traitScores={traitScores}
+          scale={scale}
+          onTraitPress={handleTraitPress}
+          isSubscribed={isSubscribed}
+        />
+
+        <AchievementsSection achievements={achievements} />
+      </Animated.ScrollView>
+
+      <ScreenFooter
+        buttons={[
+          {
+            text: 'New Analysis',
+            onPress: handleNewAnalysis,
+            variant: 'outline',
+            icon: 'camera',
+          },
+          {
+            text: 'Share Results',
+            onPress: handleShareResults,
+            variant: 'default',
+            icon: 'share',
+          },
+        ]}
+      />
+
+      <ShareOptionsModal
+        visible={showShareModal}
+        onClose={() => setShowShareModal(false)}
+        analysis={localAnalysis}
+        extractedScores={extractedScores}
+        imageUrl={processedImageUrl}
+      />
+    </>
+  );
+}