vibefast-cli 1.1.5 → 1.3.0

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

@@ -0,0 +1,62 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Platform, View } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Pressable, Text } from '@/components/ui';
+import { useResponsiveSize } from '@/lib/hooks';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type ResultsHeaderProps = {
+  onBack: () => void;
+  scrollY: SharedValue<number>;
+  title?: string;
+};
+
+export function ResultsHeader({
+  onBack,
+  scrollY,
+  title = 'Analysis Results',
+}: ResultsHeaderProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+  const { isTablet } = useResponsiveSize();
+  const insets = useSafeAreaInsets();
+
+  const headerAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(scrollY.value, [0, 50], [1, 0], Extrapolation.CLAMP),
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        { paddingTop: insets.top + (Platform.OS === 'android' ? 10 : 0) },
+        headerAnimatedStyle,
+      ]}
+      className={`absolute inset-x-0 top-0 z-10 flex-row items-center justify-between border-b px-4 pb-2 ${isDarkMode ? 'border-neutral-700/30 bg-neutral-800/80' : 'border-neutral-200/50 bg-neutral-100/80'}`}
+    >
+      <Pressable
+        onPress={onBack}
+        hitSlop={8}
+        className={`items-center justify-center rounded-full ${isTablet ? 'size-12' : 'size-10'} ${isDarkMode ? 'bg-neutral-700/80' : 'bg-neutral-200/80'}`}
+      >
+        <Ionicons
+          name="chevron-back"
+          size={isTablet ? 30 : 24}
+          color={isDarkMode ? '#FFFFFF' : '#000000'}
+        />
+      </Pressable>
+      <Text
+        className={`font-bold ${isTablet ? 'text-2xl' : 'text-xl'} ${isDarkMode ? 'text-white' : 'text-neutral-900'}`}
+      >
+        {title}
+      </Text>
+      <View className={`${isTablet ? 'w-12' : 'w-10'}`} />
+    </Animated.View>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/score-display.tsx

@@ -0,0 +1,54 @@
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { CircularProgress } from './circular-progress';
+
+type ScoreDisplayProps = {
+  score: number;
+  scoreLevel: string;
+  scoreColor: string;
+  scoreDescription: string;
+  size?: number;
+  strokeWidth?: number;
+  showScore?: boolean;
+};
+
+export function ScoreDisplay({
+  score,
+  scoreLevel,
+  scoreColor,
+  scoreDescription,
+  size = 140,
+  strokeWidth = 16,
+  showScore = false,
+}: ScoreDisplayProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  return (
+    <View className="items-center justify-center">
+      <CircularProgress
+        value={score}
+        size={size}
+        strokeWidth={strokeWidth}
+        label={showScore ? `${score}/100` : ''}
+        isCard={false}
+      />
+
+      <View className="mt-2 items-center">
+        <Text className="text-xl font-bold" style={{ color: scoreColor }}>
+          {scoreLevel}
+        </Text>
+        <Text
+          className={`mt-1 text-center text-sm ${
+            isDarkMode ? 'text-neutral-400' : 'text-neutral-600'
+          }`}
+        >
+          {scoreDescription}
+        </Text>
+      </View>
+    </View>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/share-options-modal.tsx

@@ -0,0 +1,110 @@
+import { Modal, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Button, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import type {
+  AnalysisScores,
+  LocalAnalysis,
+} from '../../services/analysis-service';
+import { formatTraitName } from '../../services/analysis-service';
+import { ShareService } from '../../services/share-service';
+
+type ShareOptionsModalProps = {
+  visible: boolean;
+  onClose: () => void;
+  analysis: LocalAnalysis;
+  extractedScores: AnalysisScores;
+  imageUrl?: string | null;
+};
+
+export function ShareOptionsModal({
+  visible,
+  onClose,
+  analysis,
+  extractedScores,
+  imageUrl,
+}: ShareOptionsModalProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+  const insets = useSafeAreaInsets();
+
+  // Find the highest scoring trait for quick summary
+  const topTrait = Object.entries(extractedScores)
+    .filter(([key]) => key !== 'overall')
+    .reduce(
+      (max, [key, score]) =>
+        score > max.score ? { name: formatTraitName(key), score } : max,
+      { name: '', score: 0 },
+    );
+
+  const handleFullResults = async () => {
+    await ShareService.shareAnalysisResults(
+      analysis,
+      extractedScores,
+      imageUrl,
+    );
+    onClose();
+  };
+
+  const handleQuickSummary = async () => {
+    await ShareService.shareQuickSummary(extractedScores.overall, topTrait);
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <View className="flex-1 justify-end bg-black/50">
+        <TouchableOpacity
+          className="flex-1"
+          onPress={onClose}
+          activeOpacity={1}
+        />
+
+        <View
+          className={`rounded-t-3xl px-6 pt-6 ${
+            isDarkMode ? 'bg-neutral-800' : 'bg-white'
+          }`}
+          style={{ paddingBottom: insets.bottom + 24 }}
+        >
+          {/* Handle bar */}
+          <View
+            className={`mx-auto mb-6 h-1 w-12 rounded-full ${
+              isDarkMode ? 'bg-neutral-600' : 'bg-neutral-300'
+            }`}
+          />
+
+          <Text
+            className={`mb-6 text-center text-xl font-semibold ${
+              isDarkMode ? 'text-white' : 'text-neutral-900'
+            }`}
+          >
+            Share Your Results
+          </Text>
+
+          <View className="gap-y-3">
+            <Button
+              label="📊 Share Full Analysis"
+              onPress={handleFullResults}
+              variant="default"
+            />
+
+            <Button
+              label="⚡ Share Quick Summary"
+              onPress={handleQuickSummary}
+              variant="outline"
+            />
+
+            <Button label="Cancel" onPress={onClose} variant="ghost" />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/traits-grid.tsx

@@ -0,0 +1,74 @@
+import { memo } from 'react';
+import { View } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+
+import { useResponsiveSize } from '@/lib/hooks';
+
+import { CircularProgress } from './circular-progress';
+
+type TraitScore = {
+  key: string;
+  trait: string;
+  score: number;
+};
+
+type TraitsGridProps = {
+  overallScore: number;
+  traitScores: TraitScore[];
+  scale: SharedValue<number>;
+  onTraitPress: (trait: string) => void;
+  isSubscribed?: boolean;
+};
+
+export const TraitsGrid = memo(function TraitsGrid({
+  overallScore,
+  traitScores,
+  scale,
+  onTraitPress,
+  isSubscribed = false,
+}: TraitsGridProps) {
+  const { isTablet } = useResponsiveSize();
+
+  const scoreAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  return (
+    <View className="px-6">
+      <View className="m-[3.5px] flex-row flex-wrap">
+        <View className={`${isTablet ? 'w-1/3' : 'w-1/2'} p-[3.5px]`}>
+          <Animated.View style={scoreAnimatedStyle}>
+            <CircularProgress
+              value={overallScore}
+              size={isTablet ? 130 : 115}
+              strokeWidth={isTablet ? 16 : 14}
+              label="Overall Score"
+              onPress={() => onTraitPress('overall')}
+              showViewAdvice
+              isCard
+              isSubscribed={isSubscribed}
+            />
+          </Animated.View>
+        </View>
+        {traitScores.map(({ key, trait, score }) => (
+          <View
+            key={key}
+            className={`${isTablet ? 'w-1/3' : 'w-1/2'} p-[3.5px]`}
+          >
+            <CircularProgress
+              value={score}
+              isSubscribed={isSubscribed}
+              size={isTablet ? 130 : 115}
+              strokeWidth={isTablet ? 16 : 14}
+              label={trait}
+              onPress={() => onTraitPress(key)}
+              showViewAdvice
+              isCard
+            />
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+});

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/config/analysis-config.ts

@@ -0,0 +1,80 @@
+export type AnalysisGoal = {
+  id: string;
+  label: string;
+  description: string;
+};
+
+export type FeedbackStyle = {
+  id: string;
+  label: string;
+  description: string;
+};
+
+export const ANALYSIS_GOALS: AnalysisGoal[] = [
+  {
+    id: 'comprehensive',
+    label: 'Comprehensive Analysis',
+    description: 'Complete detailed analysis covering all aspects',
+  },
+  {
+    id: 'quick_assessment',
+    label: 'Quick Assessment',
+    description: 'Fast overview with key insights',
+  },
+  {
+    id: 'specific_features',
+    label: 'Specific Features',
+    description: 'Focus on particular features or characteristics',
+  },
+  {
+    id: 'comparison',
+    label: 'Comparison Analysis',
+    description: 'Compare against standards or references',
+  },
+];
+
+export const FEEDBACK_STYLES: FeedbackStyle[] = [
+  {
+    id: 'professional',
+    label: 'Professional',
+    description: 'Formal, technical analysis with detailed explanations',
+  },
+  {
+    id: 'casual',
+    label: 'Casual',
+    description: 'Friendly, easy-to-understand language',
+  },
+  {
+    id: 'scientific',
+    label: 'Scientific',
+    description: 'Research-based approach with data and references',
+  },
+  {
+    id: 'creative',
+    label: 'Creative',
+    description: 'Imaginative perspective with artistic insights',
+  },
+];
+
+export const PHOTO_STEPS = [
+  {
+    id: 'front',
+    label: 'Front View',
+    description: 'Capture a direct front-facing image',
+    guideText: '',
+  },
+  {
+    id: 'side',
+    label: 'Side View',
+    description: 'Capture a profile view from the side',
+    guideText: '',
+  },
+  {
+    id: 'threeQuarter',
+    label: 'Three-Quarter View',
+    description: 'Capture an angled view between front and side',
+    guideText: '',
+  },
+] as const;
+
+export type PhotoStep = (typeof PHOTO_STEPS)[number];

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/config/master-analysis-config.ts

@@ -0,0 +1,157 @@
+import type { AnalysisGoal, FeedbackStyle } from './analysis-config';
+
+/**
+ * Configuration for a complete analysis flow
+ */
+export type AnalysisFlowConfig = {
+  id: string;
+  name: string;
+  icon: string;
+  color: string;
+  analysisConfigId: string;
+  photoSteps: readonly {
+    id: string;
+    label: string;
+    description: string;
+    guideImage: any;
+  }[];
+  skipOptionsScreen?: boolean;
+  defaultPreferences?: {
+    goal: string;
+    feedbackStyle: string;
+  };
+  availableGoals: readonly AnalysisGoal[];
+  availableFeedbackStyles: readonly FeedbackStyle[];
+};
+
+/**
+ * Master configuration registry for all analysis flows
+ */
+export const MASTER_ANALYSIS_CONFIGS: Record<string, AnalysisFlowConfig> = {
+  'face-analysis': {
+    id: 'face-analysis',
+    name: 'Face Analysis',
+    icon: '👤',
+    color: '#3B82F6',
+    analysisConfigId: 'face_analysis',
+    photoSteps: [
+      {
+        id: 'front',
+        label: 'Front View',
+        description: 'Capture a direct front-facing image',
+        guideImage: require('@assets/features/image-analyzer/front.jpg'),
+      },
+      {
+        id: 'side',
+        label: 'Side View',
+        description: 'Capture a profile view from the side',
+        guideImage: require('@assets/features/image-analyzer/side.jpg'),
+      },
+      {
+        id: 'threeQuarter',
+        label: 'Three-Quarter View',
+        description: 'Capture an angled view between front and side',
+        guideImage: require('@assets/features/image-analyzer/threeQuarter.jpg'),
+      },
+    ],
+    skipOptionsScreen: false,
+    availableGoals: [
+      {
+        id: 'comprehensive',
+        label: 'Comprehensive Analysis',
+        description: 'Complete detailed analysis covering all aspects',
+      },
+      {
+        id: 'quick_assessment',
+        label: 'Quick Assessment',
+        description: 'Fast overview with key insights',
+      },
+      {
+        id: 'specific_features',
+        label: 'Specific Features',
+        description: 'Focus on particular features or characteristics',
+      },
+      {
+        id: 'comparison',
+        label: 'Comparison Analysis',
+        description: 'Compare against standards or references',
+      },
+    ],
+    availableFeedbackStyles: [
+      {
+        id: 'professional',
+        label: 'Professional',
+        description: 'Formal, technical analysis with detailed explanations',
+      },
+      {
+        id: 'casual',
+        label: 'Casual',
+        description: 'Friendly, easy-to-understand language',
+      },
+      {
+        id: 'scientific',
+        label: 'Scientific',
+        description: 'Research-based approach with data and references',
+      },
+      {
+        id: 'creative',
+        label: 'Creative',
+        description: 'Imaginative perspective with artistic insights',
+      },
+    ],
+  },
+  'dashboard-warning-check': {
+    id: 'dashboard-warning-check',
+    name: 'Dashboard Check',
+    icon: '⚠️',
+    color: '#F59E0B',
+    analysisConfigId: 'dashboard_warning',
+    photoSteps: [
+      {
+        id: 'dashboard',
+        label: 'Dashboard Photo',
+        description: 'Capture a clear image of your vehicle dashboard',
+        guideImage: require('@assets/features/image-analyzer/front.jpg'), // Placeholder - would need actual dashboard guide image
+      },
+    ],
+    skipOptionsScreen: true,
+    defaultPreferences: {
+      goal: 'identify_warning',
+      feedbackStyle: 'direct',
+    },
+    availableGoals: [],
+    availableFeedbackStyles: [],
+  },
+};
+
+/**
+ * Get analysis flow configuration by ID
+ */
+export function getAnalysisFlowConfig(flowId: string): AnalysisFlowConfig {
+  const config = MASTER_ANALYSIS_CONFIGS[flowId];
+  if (!config) {
+    throw new Error(`Unknown analysis flow: ${flowId}`);
+  }
+  return config;
+}
+
+/**
+ * Safely get analysis flow configuration with fallback
+ * Returns null if the flow doesn't exist instead of throwing
+ */
+export function getAnalysisFlowConfigSafe(
+  flowId: string,
+): AnalysisFlowConfig | null {
+  const config = MASTER_ANALYSIS_CONFIGS[flowId];
+  if (!config) {
+    return null;
+  }
+  return config;
+}
+
+/**
+ * Get all available analysis flow configurations
+ */
+export function getAllAnalysisFlowConfigs(): AnalysisFlowConfig[] {
+  return Object.values(MASTER_ANALYSIS_CONFIGS);
+}

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

@@ -0,0 +1 @@
+export * from './use-analysis';

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

@@ -0,0 +1,38 @@
+import {
+  useImageAnalysis,
+  useUserImageAnalyses,
+} from '@/api-client/supabase/image-analyzer';
+
+/**
+ * Hook to get analysis data from Supabase backend
+ */
+export function useAnalysis(analysisId: string | null) {
+  const { data: analysis, isLoading, error } = useImageAnalysis(analysisId);
+
+  return {
+    analysis,
+    isLoading,
+    error: error ? (error as Error).message : null,
+  };
+}
+
+/**
+ * Hook to get all user analyses with optional pagination
+ */
+export function useUserAnalyses(paginationOpts?: {
+  limit: number;
+  offset: number;
+}) {
+  const { data, isLoading } = useUserImageAnalyses({
+    limit: paginationOpts?.limit ?? 50,
+  });
+  const pages = data?.pages ?? [];
+  const allAnalyses = pages.flatMap((page) => page?.analyses ?? []);
+
+  return {
+    analyses: allAnalyses,
+    isLoading,
+    isDone: allAnalyses.length < (paginationOpts?.limit ?? 50),
+    continueCursor: null,
+  };
+}