vibefast-cli 0.2.4 → 0.3.1

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

@@ -0,0 +1,194 @@
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+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<Id<'imageAnalyses'> | 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/2/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}
+      />
+    </>
+  );
+}

package/2/apps/native/src/features/image-analyzer/app/trait-details.tsx

@@ -0,0 +1,172 @@
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import { ScrollView, View } from 'react-native';
+
+import { AnimatedHeader, Button, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { AdviceList } from '../components/results/advice-list';
+import { ContentCard } from '../components/results/content-card';
+import { ScoreDisplay } from '../components/results/score-display';
+import { formatTraitName } from '../services/analysis-service';
+import { ShareService } from '../services/share-service';
+import {
+  getScoreLevel,
+  getTraitAdvice,
+} from '../services/trait-details-service';
+
+type TraitDetailsParams = {
+  traitKey: string;
+  score: string;
+  analysisId: string;
+  feedback?: string;
+  structuredData?: string; // JSON string of structured trait data
+};
+
+export default function TraitDetailsScreen() {
+  const router = useRouter();
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  const { traitKey, score, feedback, structuredData } =
+    useLocalSearchParams<TraitDetailsParams>();
+
+  // Safely parse score with validation
+  const traitScore = (() => {
+    const parsed = Number.parseFloat(score || '0');
+    return isNaN(parsed) ? 0 : Math.max(0, Math.min(100, parsed)); // Clamp between 0-100
+  })();
+  const traitName = formatTraitName(traitKey || '');
+
+  // Parse structured data if available
+  let parsedStructuredData:
+    | {
+        feedback?: string;
+        strengths?: string[];
+        improvements?: string[];
+      }
+    | undefined;
+
+  try {
+    if (structuredData) {
+      parsedStructuredData = JSON.parse(structuredData);
+    }
+  } catch (error) {
+    console.warn('Failed to parse structured data:', error);
+  }
+
+  const traitAdvice = getTraitAdvice(
+    traitKey || '',
+    traitScore,
+    parsedStructuredData,
+  );
+  const scoreInfo = getScoreLevel(traitScore);
+
+  const handleConsultationPress = () => {
+    // TODO: Navigate to affiliate product recommendations
+    console.log('Shop products for', traitName);
+  };
+
+  const handleSaveAdvicePress = () => {
+    // TODO: Save advice to favorites
+    console.log('Save advice for', traitName);
+  };
+
+  const handleShareTrait = () => {
+    ShareService.shareQuickSummary(traitScore, {
+      name: traitName,
+      score: traitScore,
+    });
+  };
+
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <AnimatedHeader
+        onBack={() => router.back()}
+        title={`${traitName} Analysis`}
+        leftIcon="arrow-back"
+        showBorder={true}
+      />
+
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{ paddingBottom: 120 }}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Score Section */}
+        <View className="py-8">
+          <ScoreDisplay
+            score={traitScore}
+            scoreLevel={scoreInfo.level}
+            scoreColor={scoreInfo.color}
+            scoreDescription={scoreInfo.description}
+          />
+        </View>
+
+        {/* AI Feedback Section */}
+        {(parsedStructuredData?.feedback || feedback) && (
+          <ContentCard title="AI Analysis">
+            <Text
+              className={`text-base leading-6 ${
+                isDarkMode ? 'text-neutral-300' : 'text-neutral-700'
+              }`}
+            >
+              {parsedStructuredData?.feedback || feedback}
+            </Text>
+          </ContentCard>
+        )}
+
+        {/* Strengths Section (if available from structured data) */}
+        {parsedStructuredData?.strengths &&
+          parsedStructuredData.strengths.length > 0 && (
+            <ContentCard title="Your Strengths">
+              <AdviceList
+                items={parsedStructuredData.strengths}
+                bulletType="dot"
+                bulletColor="bg-green-500"
+              />
+            </ContentCard>
+          )}
+
+        {/* Personalized Advice */}
+        <ContentCard
+          title={
+            parsedStructuredData ? 'Improvement Areas' : 'Personalized Advice'
+          }
+        >
+          <AdviceList
+            items={traitAdvice.advice}
+            bulletType="dot"
+            bulletColor={traitAdvice.goodScore ? 'bg-green-500' : 'bg-blue-500'}
+          />
+        </ContentCard>
+
+        {/* Expert Tips */}
+        <ContentCard title="Expert Tips">
+          <AdviceList items={traitAdvice.tips} bulletType="emoji" emoji="💡" />
+        </ContentCard>
+
+        {/* Action Buttons */}
+        <View className="mx-6 mb-6 gap-y-3">
+          <Button
+            label="🛍️ Shop Recommended Products"
+            onPress={handleConsultationPress}
+            variant="default"
+          />
+
+          <Button
+            label="📤 Share This Trait"
+            onPress={handleShareTrait}
+            variant="outline"
+          />
+
+          <Button
+            label="⭐ Save This Advice"
+            onPress={handleSaveAdvicePress}
+            variant="outline"
+          />
+        </View>
+      </ScrollView>
+    </>
+  );
+}

package/2/apps/native/src/features/image-analyzer/app/use-analysis-data.ts

@@ -0,0 +1,143 @@
+import { useLocalSearchParams } from 'expo-router';
+import { useEffect, useState } from 'react';
+
+import { useAnalysis } from '../hooks';
+import {
+  type AnalysisScores,
+  createMockAnalysis,
+  extractScoresFromAnalysis,
+  getUnlockedAchievements,
+  type LocalAnalysis,
+  processImageUrl,
+} from '../services/analysis-service';
+
+export const useAnalysisData = () => {
+  const {
+    analysisId,
+    localImageUri: localImageUriParam,
+    localImageUris: localImageUrisParam,
+    isFirstTime,
+  } = useLocalSearchParams<{
+    analysisId: string;
+    localImageUri?: string;
+    localImageUris?: string;
+    isFirstTime?: string;
+  }>();
+
+  const {
+    analysis: convexAnalysis,
+    isLoading: isConvexLoading,
+    error: convexError,
+  } = useAnalysis(analysisId);
+
+  const [localAnalysis, setLocalAnalysis] = useState<LocalAnalysis | null>(
+    null,
+  );
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [extractedScores, setExtractedScores] = useState<AnalysisScores | null>(
+    null,
+  );
+  const [processedImageUrl, setProcessedImageUrl] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const loadAnalysisData = async () => {
+      if (!analysisId) {
+        setError('Analysis ID is missing.');
+        setIsLoading(false);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        let analysisData: LocalAnalysis | null = null;
+
+        if (
+          convexAnalysis &&
+          convexAnalysis.status === 'completed' &&
+          convexAnalysis.results
+        ) {
+          analysisData = {
+            id: analysisId,
+            localImageUri: undefined,
+            aiResults: {
+              overallScore: convexAnalysis.results.overallScore,
+              overallMessage:
+                convexAnalysis.results.overallMessage ||
+                convexAnalysis.results.analysis,
+              confidence: convexAnalysis.results.confidence,
+              traitScores: convexAnalysis.results.traitScores,
+              recommendations: convexAnalysis.results.recommendations,
+              analysisType: convexAnalysis.results.analysisType,
+              processingTime: convexAnalysis.results.processingTime,
+            },
+          };
+        } else if (convexAnalysis && convexAnalysis.status === 'processing') {
+          setIsLoading(true);
+          return;
+        } else if (convexAnalysis && convexAnalysis.status === 'failed') {
+          setError('Analysis failed. Please try again.');
+          setIsLoading(false);
+          return;
+        } else if (!convexAnalysis || convexAnalysis.status === 'processing') {
+          analysisData = createMockAnalysis(analysisId);
+        }
+
+        if (analysisData) {
+          setLocalAnalysis(analysisData);
+
+          const imageUrl = processImageUrl(
+            localImageUriParam || null,
+            localImageUrisParam || null,
+            analysisData.localImageUri ?? null,
+          );
+          setProcessedImageUrl(imageUrl ?? null);
+
+          if (analysisData.aiResults) {
+            const scores = extractScoresFromAnalysis(analysisData.aiResults);
+            setExtractedScores(scores);
+
+            if (scores) {
+              const achievements = getUnlockedAchievements(scores);
+              if (achievements.length > 0 && isFirstTime) {
+                console.log('Unlocked achievements:', achievements);
+              }
+            }
+          }
+        }
+      } catch (_err) {
+        console.error('Error loading analysis:', _err);
+        setError('Failed to load analysis data.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadAnalysisData();
+  }, [
+    analysisId,
+    localImageUriParam,
+    localImageUrisParam,
+    isFirstTime,
+    convexAnalysis,
+  ]);
+
+  useEffect(() => {
+    if (convexError) {
+      setError(convexError);
+      setIsLoading(false);
+    } else if (isConvexLoading) {
+      setIsLoading(true);
+    }
+  }, [convexError, isConvexLoading]);
+
+  return {
+    localAnalysis,
+    isLoading,
+    error,
+    extractedScores,
+    processedImageUrl,
+  };
+};