vibefast-cli 1.2.1 → 1.3.1

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/markdown/code-block.tsx

@@ -1,16 +1,43 @@
+// vibefast license: c1e9fcd2-muhammad
 import { Feather } from '@expo/vector-icons';
 import React, { useCallback, useState } from 'react';
 import {
   type ImageStyle,
   Pressable,
+  ScrollView,
+  Text,
   type TextStyle,
   View,
   type ViewStyle,
 } from 'react-native';
-import SyntaxHighlighter from 'react-native-syntax-highlighter';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash';
+import css from 'react-syntax-highlighter/dist/esm/languages/hljs/css';
+import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
+import ts from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
+import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml';
 
 import { translate } from '@/lib';
 
+// Register languages for the Light build
+SyntaxHighlighter.registerLanguage('javascript', js);
+SyntaxHighlighter.registerLanguage('js', js);
+SyntaxHighlighter.registerLanguage('typescript', ts);
+SyntaxHighlighter.registerLanguage('ts', ts);
+SyntaxHighlighter.registerLanguage('tsx', ts);
+SyntaxHighlighter.registerLanguage('jsx', js);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('py', python);
+SyntaxHighlighter.registerLanguage('json', json);
+SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage('sh', bash);
+SyntaxHighlighter.registerLanguage('shell', bash);
+SyntaxHighlighter.registerLanguage('css', css);
+SyntaxHighlighter.registerLanguage('html', xml);
+SyntaxHighlighter.registerLanguage('xml', xml);
+
 type CodeBlockProps = {
   containerStyle: ViewStyle | TextStyle | ImageStyle;
   content: string;
@@ -26,44 +53,51 @@ type CodeBlockProps = {
   onCopyCode: (code: string) => Promise<void>;
 };
 
+/**
+ * Custom renderer for React Native - converts syntax highlighter output to Text components
+ */
+function createNativeRenderer(fontFamily: string, fontSize: number) {
+  return function renderer({
+    rows,
+    stylesheet,
+  }: {
+    rows: any[];
+    stylesheet: Record<string, any>;
+  }) {
+    return rows.map((row, i) => {
+      const children = row.children?.map((child: any, j: number) => {
+        if (child.type === 'text') {
+          return child.value;
+        }
+        const className = child.properties?.className?.[0] || '';
+        const style = stylesheet[className] || {};
+        return (
+          <Text
+            key={j}
+            style={{
+              fontFamily,
+              fontSize,
+              color: style.color,
+              fontWeight: style.fontWeight,
+              fontStyle: style.fontStyle,
+            }}
+          >
+            {child.children?.map((c: any) => c.value).join('') || ''}
+          </Text>
+        );
+      });
+
+      return (
+        <Text key={i} style={{ fontFamily, fontSize }}>
+          {children}
+        </Text>
+      );
+    });
+  };
+}
+
 /**
  * CodeBlock component for rendering syntax-highlighted code with collapse/expand functionality.
- *
- * Features:
- * - Syntax highlighting using react-native-syntax-highlighter
- * - Copy to clipboard functionality
- * - Collapse/expand animation with FlashList preparation
- * - Smooth 220ms easeInEaseOut animation
- * - Independent animation for multiple code blocks
- *
- * Requirements addressed:
- * - 9.1: Prepare FlashList for layout animation before collapse
- * - 9.2: Animate height change over 220ms with easeInEaseOut
- * - 9.3: Animate each code block independently
- * - 9.4: Restore full content with same animation timing
- * - 9.5: Complete animation without interruption during scroll
- *
- * @param props - CodeBlock component props
- * @returns Rendered code block with syntax highlighting and controls
- *
- * @example
- * ```tsx
- * <CodeBlock
- *   containerStyle={styles.code_block}
- *   content="const hello = 'world';"
- *   language="javascript"
- *   codeSyntaxTheme={atomOneDark}
- *   monospaceFontFamily="Menlo"
- *   subtleText="#888"
- *   codeContentStyle={styles.codeContent}
- *   codeActionsContainerStyle={styles.actions}
- *   codeActionButtonBaseStyle={styles.button}
- *   codeToggleButtonSpacingStyle={styles.spacing}
- *   codeContentContainerStyle={styles.container}
- *   onCopyCode={copyToClipboard}
- *   onPrepareLayoutAnimation={prepareFlashList}
- * />
- * ```
  */
 export const CodeBlock = React.memo(function CodeBlock({
   containerStyle,
@@ -81,14 +115,12 @@ export const CodeBlock = React.memo(function CodeBlock({
 }: CodeBlockProps) {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
-  /**
-   * Toggle collapsed state without animation.
-   * LayoutAnimation causes scroll jitter, so we disable it.
-   */
   const toggleCollapsed = useCallback(() => {
     setIsCollapsed((prev) => !prev);
   }, []);
 
+  const renderer = createNativeRenderer(monospaceFontFamily, 15);
+
   return (
     <View
       style={[
@@ -146,18 +178,19 @@ export const CodeBlock = React.memo(function CodeBlock({
         pointerEvents={isCollapsed ? 'none' : 'auto'}
       >
         {isCollapsed ? null : (
-          <SyntaxHighlighter
-            language={language.length > 0 ? language : 'plaintext'}
-            style={codeSyntaxTheme}
-            highlighter="hljs"
-            fontFamily={monospaceFontFamily}
-            fontSize={15}
-            PreTag={View}
-            CodeTag={View}
-            customStyle={codeContentStyle}
-          >
-            {content}
-          </SyntaxHighlighter>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <SyntaxHighlighter
+              language={language.length > 0 ? language : 'plaintext'}
+              style={codeSyntaxTheme}
+              renderer={renderer}
+              customStyle={{
+                ...codeContentStyle,
+                backgroundColor: 'transparent',
+              }}
+            >
+              {content}
+            </SyntaxHighlighter>
+          </ScrollView>
         )}
       </View>
     </View>

package/recipes/chatbot-supabase/recipe.json

@@ -1,7 +1,7 @@
 {
-  "name": "chatbot",
+  "name": "chatbot-supabase",
   "version": "1.0.0",
-  "description": "AI-powered chat assistant with Supabase backend",
+  "description": "AI-powered chat assistant with Supabase",
   "copy": [
     {
       "from": "apps/native/src/app/chatbot",
@@ -11,10 +11,6 @@
       "from": "apps/native/src/features/chatbot",
       "to": "apps/native/src/features/chatbot"
     },
-    {
-      "from": "apps/native/src/api-client/supabase/chatbot.ts",
-      "to": "apps/native/src/api-client/supabase/chatbot.ts"
-    },
     {
       "from": "packages/backend/supabase/functions/chat-stream",
       "to": "packages/backend/supabase/functions/chat-stream"
@@ -22,27 +18,17 @@
     {
       "from": "packages/backend/supabase/migrations/chatbot.sql",
       "to": "packages/backend/supabase/migrations/chatbot.sql"
-    },
-    {
-      "from": "packages/backend/src/services/conversations.ts",
-      "to": "packages/backend/src/services/conversations.ts"
-    },
-    {
-      "from": "packages/backend/src/services/messages.ts",
-      "to": "packages/backend/src/services/messages.ts"
     }
   ],
   "nav": {
     "href": "/(root)/(protected)/chatbot",
-    "label": "AI Chatbot",
+    "label": "AI Chatbot (Supabase)",
     "icon": "💬",
     "color": "#F43F5E"
   },
   "target": "native",
   "dependencies": {
     "expo": [
-      "@supabase/supabase-js",
-      "@tanstack/react-query",
       "expo-clipboard",
       "markdown-it",
       "react-native-markdown-display",
@@ -50,30 +36,5 @@
       "react-native-reanimated",
       "react-native-safe-area-context"
     ]
-  },
-  "env": [
-    {
-      "key": "OPENAI_API_KEY",
-      "description": "OpenAI API key for chat completions",
-      "example": "sk-...",
-      "link": "https://platform.openai.com/api-keys",
-      "file": "packages/backend/supabase/.env",
-      "required": true
-    }
-  ],
-  "manualSteps": [
-    {
-      "title": "Apply Supabase migration",
-      "description": "Run: cd packages/backend && supabase db push",
-      "content": "supabase db push"
-    },
-    {
-      "title": "Deploy Edge Function",
-      "description": "Run: cd packages/backend && supabase functions deploy chat-stream",
-      "content": "supabase functions deploy chat-stream"
-    }
-  ],
-  "postInstall": {
-    "message": "📦 Remember to run 'supabase db push' and 'supabase functions deploy chat-stream'"
   }
 }

package/recipes/glowing-button/recipe.json

@@ -1,7 +1,7 @@
 {
   "name": "glowing-button",
   "version": "1.0.0",
-  "description": "Animated glowing button with multiple presets",
+  "description": "Advanced UI component: glowing-button",
   "target": "native",
   "copy": [
     {
@@ -10,6 +10,10 @@
     }
   ],
   "dependencies": {
-    "expo": ["react-native-reanimated"]
+    "expo": [
+      "react-native-animated-glow",
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
   }
 }

package/recipes/image-analysis/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/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/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/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} />;
+}

package/recipes/image-analysis/apps/native/src/app/analysis/[type]/loading.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 { LoadingScreen } from '@/features/image-analyzer/app/loading-screen';
+import { getAnalysisFlowConfigSafe } from '@/features/image-analyzer/config/master-analysis-config';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Dynamic loading route that loads the appropriate configuration
+ * based on the type parameter
+ */
+export default function DynamicLoadingRoute() {
+  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 <LoadingScreen config={config} />;
+}

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

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

package/recipes/image-analysis/apps/native/src/app/analysis/[type]/trait-details.tsx

@@ -0,0 +1,3 @@
+import TraitDetailsScreen from '@/features/image-analyzer/app/trait-details';
+
+export default TraitDetailsScreen;

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

@@ -88,7 +88,7 @@ export function DynamicAnalysisOptionsScreen({
   config,
 }: DynamicAnalysisOptionsProps) {
   const router = useRouter();
-  const { standard } = useNavigationOptions();
+  const { scrollable } = useNavigationOptions();
   const params = useLocalSearchParams();
 
   const imageUris: string[] = useMemo(
@@ -145,7 +145,7 @@ export function DynamicAnalysisOptionsScreen({
     <>
       <Stack.Screen
         options={{
-          ...standard,
+          ...scrollable,
           title: config.name,
           headerBackButtonDisplayMode: 'generic',
         }}

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

@@ -2,7 +2,13 @@ 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 {
+  ActivityIndicator,
+  Alert,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 
 import { Button, Image, Text } from '@/components/ui';
 import { useCameraCaptureStore } from '@/features/image-analyzer/hooks/use-image-analysis';
@@ -11,7 +17,6 @@ type CameraScreenParams = {
   stepId: string;
   stepLabel: string;
   stepDescription: string;
-  guideText: string;
 };
 
 /**
@@ -28,11 +33,12 @@ export default function CameraScreen() {
   const [facing, setFacing] = useState<CameraType>('back');
   const [capturedImageUri, setCapturedImageUri] = useState<string | null>(null);
   const [isCapturing, setIsCapturing] = useState(false);
+  const [isCameraReady, setIsCameraReady] = useState(false);
   const cameraRef = useRef<CameraView>(null);
 
   // Handle photo capture
   const handleTakePhoto = useCallback(async () => {
-    if (!cameraRef.current || isCapturing) return;
+    if (!cameraRef.current || isCapturing || !isCameraReady) return;
 
     try {
       setIsCapturing(true);
@@ -49,7 +55,7 @@ export default function CameraScreen() {
     } finally {
       setIsCapturing(false);
     }
-  }, [isCapturing]);
+  }, [isCapturing, isCameraReady]);
 
   // Handle retake
   const handleRetake = useCallback(() => {
@@ -147,74 +153,75 @@ export default function CameraScreen() {
       <View className="flex-1 bg-black">
         <CameraView
           ref={cameraRef}
-          style={{ flex: 1 }}
+          style={StyleSheet.absoluteFill}
           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>
+          onCameraReady={() => setIsCameraReady(true)}
+        />
+
+        {/* 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.stepDescription}
+            </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>
+        {/* 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>
+        {/* 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 || !isCameraReady}
+            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>
       </View>
     </>
   );