vibefast-cli 0.2.4 → 0.3.0

package/2/apps/native/src/features/image-analyzer/app/analysis-options-screen.tsx

@@ -0,0 +1,304 @@
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import { useCallback, useMemo, useState } from 'react';
+import {
+  Alert,
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { Image, ScreenFooter, Text } from '@/components/ui';
+import type {
+  AnalysisGoal,
+  FeedbackStyle,
+} from '@/features/image-analyzer/config/analysis-config';
+import type { AnalysisFlowConfig } from '@/features/image-analyzer/config/master-analysis-config';
+import { useNavigationOptions } from '@/lib/hooks/use-navigation-options';
+
+type DynamicAnalysisOptionsProps = {
+  config: AnalysisFlowConfig;
+};
+
+// Enhanced goal options with colors and icons
+const createEnhancedGoals = (goals: readonly AnalysisGoal[]) => [
+  {
+    ...goals[0],
+    color: 'bg-blue-500',
+    icon: '🔍',
+    accent:
+      'border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20',
+  },
+  {
+    ...goals[1],
+    color: 'bg-green-500',
+    icon: '⚡',
+    accent:
+      'border-green-200 bg-green-50 dark:border-green-700 dark:bg-green-900/20',
+  },
+  {
+    ...goals[2],
+    color: 'bg-purple-500',
+    icon: '🎯',
+    accent:
+      'border-purple-200 bg-purple-50 dark:border-purple-700 dark:bg-purple-900/20',
+  },
+  {
+    ...goals[3],
+    color: 'bg-orange-500',
+    icon: '⚖️',
+    accent:
+      'border-orange-200 bg-orange-50 dark:border-orange-700 dark:bg-orange-900/20',
+  },
+];
+
+// Enhanced feedback styles with colors and icons
+const createEnhancedStyles = (styles: readonly FeedbackStyle[]) => [
+  {
+    ...styles[0],
+    color: 'bg-neutral-600',
+    icon: '👔',
+    accent:
+      'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900/20',
+  },
+  {
+    ...styles[1],
+    color: 'bg-cyan-500',
+    icon: '😊',
+    accent:
+      'border-cyan-200 bg-cyan-50 dark:border-cyan-700 dark:bg-cyan-900/20',
+  },
+  {
+    ...styles[2],
+    color: 'bg-indigo-600',
+    icon: '🔬',
+    accent:
+      'border-indigo-200 bg-indigo-50 dark:border-indigo-700 dark:bg-indigo-900/20',
+  },
+  {
+    ...styles[3],
+    color: 'bg-pink-500',
+    icon: '🎨',
+    accent:
+      'border-pink-200 bg-pink-50 dark:border-pink-700 dark:bg-pink-900/20',
+  },
+];
+
+export function DynamicAnalysisOptionsScreen({
+  config,
+}: DynamicAnalysisOptionsProps) {
+  const router = useRouter();
+  const { standard } = useNavigationOptions();
+  const params = useLocalSearchParams();
+
+  const imageUris: string[] = useMemo(
+    () => (params.imageUris ? JSON.parse(params.imageUris as string) : []),
+    [params.imageUris],
+  );
+
+  const [selectedGoal, setSelectedGoal] = useState<string>('');
+  const [selectedFeedbackStyle, setSelectedFeedbackStyle] =
+    useState<string>('');
+
+  // Create enhanced versions with emojis and colors
+  const enhancedGoals = useMemo(
+    () => createEnhancedGoals(config.availableGoals),
+    [config.availableGoals],
+  );
+  const enhancedStyles = useMemo(
+    () => createEnhancedStyles(config.availableFeedbackStyles),
+    [config.availableFeedbackStyles],
+  );
+
+  const handleStartAnalysis = useCallback(() => {
+    if (!selectedGoal || !selectedFeedbackStyle) {
+      Alert.alert(
+        'Selection Required',
+        'Please select both an analysis goal and feedback style to continue.',
+      );
+      return;
+    }
+
+    router.push({
+      pathname: '/analysis/[type]/loading' as any,
+      params: {
+        type: config.id,
+        imageUris: JSON.stringify(imageUris),
+        analysisGoal: selectedGoal,
+        feedbackStyle: selectedFeedbackStyle,
+      },
+    });
+  }, [selectedGoal, selectedFeedbackStyle, imageUris, router, config.id]);
+
+  const handleBackToCapture = useCallback(() => {
+    router.back();
+  }, [router]);
+
+  const selectedGoalData = enhancedGoals.find(
+    (goal) => goal.id === selectedGoal,
+  );
+  const selectedStyleData = enhancedStyles.find(
+    (style) => style.id === selectedFeedbackStyle,
+  );
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          ...standard,
+          title: config.name,
+          headerBackButtonDisplayMode: 'generic',
+        }}
+      />
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{
+          paddingBottom: 120,
+          paddingTop: Platform.OS === 'ios' ? 78 : 0,
+        }}
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="px-6 py-8">
+          {/* Image Preview Section */}
+          <View className="mb-8 rounded-2xl bg-white p-4 py-2 shadow-sm dark:bg-neutral-800">
+            <Text className="mb-4 ml-1 text-base font-medium text-neutral-800 dark:text-neutral-200">
+              📷 {imageUris.length} Images Ready
+            </Text>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+              <View className="flex-row gap-3">
+                {imageUris.map((uri, index) => (
+                  <View key={index} className="items-center">
+                    <View className="size-20 overflow-hidden rounded-xl bg-neutral-200 dark:bg-neutral-700">
+                      <Image
+                        source={{ uri }}
+                        className="size-full"
+                        contentFit="cover"
+                      />
+                    </View>
+                    <Text className="mt-1 text-xs text-neutral-500">
+                      {index + 1}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            </ScrollView>
+          </View>
+
+          {/* Analysis Goal Selection */}
+          <View className="mb-8">
+            <Text className="mb-4 text-xl font-bold text-neutral-900 dark:text-white">
+              Analysis Goal
+            </Text>
+            <View className="gap-y-3">
+              {enhancedGoals.map((goal) => (
+                <TouchableOpacity
+                  key={goal.id}
+                  onPress={() => setSelectedGoal(goal.id)}
+                  className={`flex-row items-center rounded-2xl border-2 p-4 ${
+                    selectedGoal === goal.id
+                      ? goal.accent
+                      : 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800'
+                  }`}
+                >
+                  <View
+                    className={`mr-4 size-12 items-center justify-center rounded-xl ${goal.color}`}
+                  >
+                    <Text className="text-xl">{goal.icon}</Text>
+                  </View>
+                  <View className="flex-1">
+                    <Text className="mb-1 text-base font-semibold text-neutral-900 dark:text-white">
+                      {goal.label}
+                    </Text>
+                    <Text className="text-sm text-neutral-600 dark:text-neutral-400">
+                      {goal.description}
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+
+          {/* Feedback Style Selection */}
+          <View className="mb-8">
+            <Text className="mb-4 text-xl font-bold text-neutral-900 dark:text-white">
+              Feedback Tone
+            </Text>
+            <View className="gap-y-3">
+              {enhancedStyles.map((style) => (
+                <TouchableOpacity
+                  key={style.id}
+                  onPress={() => setSelectedFeedbackStyle(style.id)}
+                  className={`flex-row items-center rounded-2xl border-2 p-4 ${
+                    selectedFeedbackStyle === style.id
+                      ? style.accent
+                      : 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800'
+                  }`}
+                >
+                  <View
+                    className={`mr-4 size-12 items-center justify-center rounded-xl ${style.color}`}
+                  >
+                    <Text className="text-xl">{style.icon}</Text>
+                  </View>
+                  <View className="flex-1">
+                    <Text className="mb-1 text-base font-semibold text-neutral-900 dark:text-white">
+                      {style.label}
+                    </Text>
+                    <Text className="text-sm text-neutral-600 dark:text-neutral-400">
+                      {style.description}
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+
+          {/* Selection Summary */}
+          <View className="mb-8 min-h-[100px]">
+            {selectedGoal || selectedFeedbackStyle ? (
+              <View className="rounded-2xl border border-border p-4 dark:bg-card">
+                <Text className="mb-2 text-lg font-semibold">
+                  Your Selection
+                </Text>
+                {selectedGoalData && (
+                  <Text className="mb-2 text-sm">
+                    {selectedGoalData.icon} Goal: {selectedGoalData.label}
+                  </Text>
+                )}
+                {selectedStyleData && (
+                  <Text className="text-sm">
+                    {selectedStyleData.icon} Tone: {selectedStyleData.label}
+                  </Text>
+                )}
+              </View>
+            ) : (
+              <View className="rounded-2xl border border-neutral-200 bg-neutral-50 p-4 opacity-50 dark:border-neutral-700 dark:bg-neutral-800">
+                <Text className="mb-2 text-lg font-semibold text-neutral-500 dark:text-neutral-400">
+                  Your Selection
+                </Text>
+                <Text className="text-sm text-neutral-400 dark:text-neutral-500">
+                  Please select your analysis preferences above
+                </Text>
+              </View>
+            )}
+          </View>
+        </View>
+      </ScrollView>
+
+      <ScreenFooter
+        buttons={[
+          {
+            text: 'Back to Capture',
+            onPress: handleBackToCapture,
+            variant: 'outline',
+          },
+          {
+            text: 'Start Analysis',
+            onPress: handleStartAnalysis,
+            variant: 'default',
+            disabled: !selectedGoal || !selectedFeedbackStyle,
+          },
+        ]}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,221 @@
+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 { Button, Image, Text } from '@/components/ui';
+import { useCameraCaptureStore } from '@/features/image-analyzer/hooks/use-image-analysis';
+
+type CameraScreenParams = {
+  stepId: string;
+  stepLabel: string;
+  stepDescription: string;
+  guideText: string;
+};
+
+/**
+ * Dedicated camera screen for capturing images with frame overlay guide.
+ * Based on coin-identifier-real camera implementation.
+ */
+export default function CameraScreen() {
+  const router = useRouter();
+  const params = useLocalSearchParams() as CameraScreenParams;
+  const setCapturedImage = useCameraCaptureStore(
+    (state) => state.setCapturedImage,
+  );
+  const [permission, requestPermission] = useCameraPermissions();
+  const [facing, setFacing] = useState<CameraType>('back');
+  const [capturedImageUri, setCapturedImageUri] = useState<string | null>(null);
+  const [isCapturing, setIsCapturing] = useState(false);
+  const cameraRef = useRef<CameraView>(null);
+
+  // Handle photo capture
+  const handleTakePhoto = useCallback(async () => {
+    if (!cameraRef.current || isCapturing) return;
+
+    try {
+      setIsCapturing(true);
+      const photo = await cameraRef.current.takePictureAsync({
+        quality: 0.8,
+      });
+
+      if (photo?.uri) {
+        setCapturedImageUri(photo.uri);
+      }
+    } catch (error) {
+      console.error('Error taking photo:', error);
+      Alert.alert('Error', 'Failed to take photo. Please try again.');
+    } finally {
+      setIsCapturing(false);
+    }
+  }, [isCapturing]);
+
+  // Handle retake
+  const handleRetake = useCallback(() => {
+    setCapturedImageUri(null);
+  }, []);
+
+  // Handle accept photo
+  const handleAccept = useCallback(() => {
+    if (capturedImageUri) {
+      // Store the captured image in Zustand store
+      setCapturedImage(capturedImageUri, params.stepId);
+      // Simply navigate back
+      router.back();
+    }
+  }, [capturedImageUri, setCapturedImage, params.stepId, router]);
+
+  // Toggle camera facing
+  const toggleCameraFacing = useCallback(() => {
+    setFacing((current) => (current === 'back' ? 'front' : 'back'));
+  }, []);
+
+  // Check camera permissions
+  if (!permission) {
+    return (
+      <View className="flex-1 items-center justify-center bg-black">
+        <ActivityIndicator size="large" color="white" />
+      </View>
+    );
+  }
+
+  if (!permission.granted) {
+    return (
+      <View className="flex-1 items-center justify-center bg-black px-6">
+        <Text className="mb-4 text-center text-white">
+          Camera permission is required to take photos
+        </Text>
+        <Button
+          label="Grant Permission"
+          onPress={requestPermission}
+          variant="outline"
+        />
+      </View>
+    );
+  }
+
+  // Render photo preview
+  if (capturedImageUri) {
+    return (
+      <>
+        <Stack.Screen options={{ headerShown: false }} />
+        <View className="flex-1 bg-black">
+          <Image
+            source={{ uri: capturedImageUri }}
+            className="flex-1"
+            contentFit="contain"
+          />
+
+          {/* Overlay 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>
+
+          {/* Action buttons */}
+          <View className="absolute inset-x-0 bottom-12 flex-row justify-center gap-x-4 px-6">
+            <Button
+              label="Retake"
+              variant="outline"
+              onPress={handleRetake}
+              className="flex-1 border-slate-500 bg-slate-800"
+              textClassName="text-black"
+            />
+            <Button
+              label="Accept"
+              onPress={handleAccept}
+              className="flex-1"
+              style={{ backgroundColor: '#059669' }}
+            />
+          </View>
+        </View>
+      </>
+    );
+  }
+
+  // Render camera view
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <View className="flex-1 bg-black">
+        <CameraView
+          ref={cameraRef}
+          style={{ flex: 1 }}
+          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>
+          </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>
+      </View>
+    </>
+  );
+}