vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/api-client/shared.ts

@@ -0,0 +1,43 @@
+import { api } from '@vibefast/backend/_generated/api';
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+import { useMutation, useQuery } from 'convex/react';
+
+const skipToken = 'skip' as const;
+
+/**
+ * Shared API Gateway
+ *
+ * This gateway provides typed wrappers around shared Convex functions
+ * that are used across multiple features (files, utilities, etc.).
+ *
+ * Usage:
+ * - Import this gateway in feature code: `import { sharedApi } from '@/platform/api/shared'`
+ * - Never import from `@vibefast/backend/_generated/api` directly in feature code
+ */
+export const sharedApi = {
+  /**
+   * Generate an upload URL for file storage
+   */
+  useGenerateUploadUrl() {
+    return useMutation(api['shared/index'].generateUploadUrl);
+  },
+
+  /**
+   * Delete an uploaded file from storage
+   */
+  useDeleteUploadedFile() {
+    return useMutation(api['shared/index'].deleteUploadedFile);
+  },
+
+  /**
+   * Get URLs for multiple storage IDs in batch
+   */
+  useGetUrlsForStorageIds(storageIds?: Id<'_storage'>[] | null) {
+    return useQuery(
+      api['shared/index'].getUrlsForStorageIds,
+      storageIds && storageIds.length > 0 ? { storageIds } : skipToken,
+    );
+  },
+};
+
+export type SharedApi = typeof sharedApi;

package/2/apps/native/src/app/(root)/(protected)/(tabs)/_layout.tsx

@@ -0,0 +1,166 @@
+import { isLiquidGlassAvailable } from 'expo-glass-effect';
+import { SplashScreen, Tabs, useRouter } from 'expo-router';
+import { Icon, Label, NativeTabs } from 'expo-router/unstable-native-tabs';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Platform } from 'react-native';
+
+import {
+  Home,
+  Settings as SettingsIcon,
+  Style as StyleIcon,
+  User as UserIcon,
+} from '@/components/ui/icons';
+import { translate } from '@/lib';
+import { useAuthClientStore } from '@/lib/state';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function TabLayout() {
+  const router = useRouter();
+  const isAuthenticated = useAuthClientStore((state) => state.isAuthenticated);
+  const authHydrated = useAuthClientStore((state) => !state.isLoading);
+  const theme = useThemeConfig();
+  const hasRedirectedRef = useRef(false);
+
+  const hideSplash = useCallback(async () => {
+    await SplashScreen.hideAsync();
+  }, []);
+
+  // Hide splash screen once auth is fully hydrated
+  useEffect(() => {
+    if (authHydrated) {
+      hideSplash();
+    }
+  }, [hideSplash, authHydrated]);
+
+  // Handle authentication redirect logic
+  useEffect(() => {
+    if (!authHydrated) {
+      return;
+    }
+
+    if (!isAuthenticated && !hasRedirectedRef.current) {
+      hasRedirectedRef.current = true;
+      router.replace('/login');
+      return;
+    }
+
+    if (isAuthenticated) {
+      hasRedirectedRef.current = false;
+    }
+  }, [authHydrated, isAuthenticated, router]);
+
+  // Translated titles
+  const homeTitle = translate('home.title');
+  const styleTitle = translate('style.title');
+  const profileTitle = translate('profile.title');
+  const settingsTitle = translate('settings.title');
+
+  // Memoized tab screen options
+  const tabsScreenOptions = useMemo(
+    () => ({
+      tabBarActiveTintColor: theme.colors.primary,
+      tabBarInactiveTintColor: theme.colors.secondaryForeground,
+      tabBarStyle: {
+        backgroundColor: theme.colors.background,
+        borderTopColor: theme.colors.border,
+        ...(Platform.OS === 'android' && {
+          height: 112,
+          paddingTop: 4,
+        }),
+      },
+    }),
+    [
+      theme.colors.background,
+      theme.colors.border,
+      theme.colors.primary,
+      theme.colors.secondaryForeground,
+    ],
+  );
+
+  // Wait for auth to be fully hydrated before making routing decisions
+  // This prevents Fast Refresh from prematurely redirecting to login
+  if (!authHydrated) {
+    return null; // Keep splash screen visible
+  }
+
+  // Redirect to login if not authenticated
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  if (isLiquidGlassAvailable()) {
+    return (
+      <>
+        <NativeTabs>
+          <NativeTabs.Trigger name="index">
+            <Icon sf="house" />
+            <Label>Home</Label>
+          </NativeTabs.Trigger>
+          <NativeTabs.Trigger name="style" disableScrollToTop>
+            <Icon sf="paintpalette.fill" />
+            <Label>Style</Label>
+          </NativeTabs.Trigger>
+          <NativeTabs.Trigger name="profile">
+            <Icon sf="person.fill" />
+            <Label>Profile</Label>
+          </NativeTabs.Trigger>
+          <NativeTabs.Trigger name="settings">
+            <Icon sf="gear" />
+            <Label>Settings</Label>
+          </NativeTabs.Trigger>
+        </NativeTabs>
+      </>
+    );
+  }
+  return (
+    <>
+      <Tabs screenOptions={tabsScreenOptions}>
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: homeTitle,
+            tabBarIcon: ({ color }) => <Home color={color} />,
+            tabBarButtonTestID: 'home-tab',
+            headerShown: false,
+          }}
+        />
+        <Tabs.Screen
+          name="style"
+          options={{
+            title: styleTitle,
+            headerShown: true,
+            headerTintColor: theme.colors.text,
+            headerTitleAlign: 'center',
+            headerShadowVisible: false,
+            tabBarIcon: ({ color }) => <StyleIcon color={color} />,
+            tabBarButtonTestID: 'style-tab',
+          }}
+        />
+        <Tabs.Screen
+          name="profile"
+          options={{
+            title: profileTitle,
+            headerShown: true,
+            headerTintColor: theme.colors.text,
+            headerTitleAlign: 'center',
+            headerShadowVisible: false,
+            tabBarIcon: ({ color }) => <UserIcon color={color} />,
+            tabBarButtonTestID: 'profile-tab',
+          }}
+        />
+        <Tabs.Screen
+          name="settings"
+          options={{
+            title: settingsTitle,
+            headerShown: true,
+            headerTintColor: theme.colors.text,
+            headerTitleAlign: 'center',
+            headerShadowVisible: false,
+            tabBarIcon: ({ color }) => <SettingsIcon color={color} />,
+            tabBarButtonTestID: 'settings-tab',
+          }}
+        />
+      </Tabs>
+    </>
+  );
+}

package/2/apps/native/src/app/(root)/(protected)/(tabs)/index.tsx

@@ -0,0 +1,174 @@
+import { router, Stack } from 'expo-router';
+import { ScrollView, View } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+
+import { FeatureButton, FocusAwareStatusBar } from '@/components/ui';
+import { vibefastFeatures } from '@/features/vibefast-features';
+import { translate } from '@/lib';
+import { useResponsiveSize } from '@/lib/hooks';
+import { useScreenOptions } from '@/lib/hooks/use-navigation-options';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function Home() {
+  const { isTablet } = useResponsiveSize();
+  const scrollY = useSharedValue(0);
+  const theme = useThemeConfig();
+
+  const builtInFeatures = [
+    {
+      id: 'voice-bot',
+      title: 'Voice Assistant',
+      icon: '🗣️',
+      color: '#14B8A6', // teal
+      description: 'Have real-time voice conversations with AI',
+      route: '/voice-bot',
+      testID: 'voice-bot-button',
+    },
+    {
+      id: 'chatbot',
+      title: translate('home.features.ai_assistant'),
+      icon: '💬',
+      color: '#F43F5E', // rose
+      description: translate('home.features.ai_assistant_description'),
+      route: '/chatbot',
+      testID: 'chatbot-button',
+    },
+    {
+      id: 'image-generator',
+      title: translate('home.features.image_generator'),
+      icon: '🎨',
+      color: '#A855F7', // violet
+      description: translate('home.features.image_generator_description'),
+      route: '/image-generator',
+      testID: 'image-generator-button',
+    },
+    {
+      id: 'quiz',
+      title: 'Quiz',
+      icon: '📱',
+      color: '#F97316', // orange
+      description: 'Take a fun and engaging quiz!',
+      route: '/quiz',
+      testID: 'quiz-button',
+    },
+    {
+      id: 'analytics',
+      title: translate('home.features.chart_preview'),
+      icon: '📊',
+      color: '#6366F1', // indigo (distinct from sky)
+      description: translate('home.features.chart_preview_description'),
+      route: '/charts',
+      testID: 'analytics-button',
+    },
+    {
+      id: 'face-analysis',
+      title: translate('home.features.image_analysis'),
+      icon: '🔍',
+      color: '#22C55E', // green
+      description: translate('home.features.image_analysis_description'),
+      route: '/analysis/face-analysis',
+      testID: 'face-analysis-button',
+    },
+    {
+      id: 'audio-recorder',
+      title: translate('home.features.voice_notes'),
+      icon: '🎤',
+      color: '#EF4444', // red
+      description: translate('home.features.voice_notes_description'),
+      route: '/audio-recorder',
+      testID: 'audio-recorder-button',
+    },
+    {
+      id: 'wake-word-test',
+      title: 'Wake Word Test',
+      icon: '🎤',
+      color: '#0EA5E9', // sky
+      description: 'Test "Hello World" wake word detection',
+      route: '/test-wake-word',
+      testID: 'wake-word-test-button',
+    },
+    {
+      id: 'onboarding',
+      title: translate('home.features.onboarding'),
+      icon: '🎯',
+      color: '#84CC16', // lime
+      description: translate('home.features.onboarding_description'),
+      route: '/onboarding',
+      testID: 'onboarding-selection-button',
+    },
+    {
+      id: 'paywall-selection',
+      title: translate('home.features.all_paywalls'),
+      icon: '💳',
+      color: '#F59E0B', // amber
+      description: translate('home.features.all_paywalls_description'),
+      route: '/paywall',
+      testID: 'paywall-selection-button',
+    },
+    {
+      id: 'tracker-app',
+      title: translate('home.features.tracker_app'),
+      icon: '🍎',
+      color: '#06B6D4', // cyan
+      description: translate('home.features.tracker_app_description'),
+      route: '/tracker-app',
+      testID: 'dashboard-warning-button',
+    },
+  ];
+
+  // Merge built-in features with VibeFast CLI installed features
+  const features = [...builtInFeatures, ...vibefastFeatures];
+
+  const handleFeaturePress = (route: string) => {
+    router.push(route as any);
+  };
+
+  // Determine grid columns based on screen size
+  const columns = isTablet ? 3 : 2;
+
+  const screenOptions = useScreenOptions(
+    {
+      title: translate('home.title'),
+      headerShown: false,
+    },
+    'scrollable',
+  );
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <Stack.Screen options={screenOptions} />
+      {/* Scrollable Content */}
+      <ScrollView
+        style={{ backgroundColor: theme.colors.background }}
+        className="flex-1 pt-10"
+        onScroll={(event) => {
+          scrollY.value = event.nativeEvent.contentOffset.y;
+        }}
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Features Grid */}
+        <View className="px-6 py-8">
+          <View className="-mx-2 flex-row flex-wrap">
+            {features.map((feature) => (
+              <View
+                key={feature.id}
+                className={`px-2 pb-4 ${columns === 2 ? 'w-1/2' : 'w-1/3'}`}
+              >
+                <FeatureButton
+                  title={feature.title}
+                  icon={feature.icon}
+                  color={feature.color}
+                  description={feature.description}
+                  testID={feature.testID}
+                  onPress={() => handleFeaturePress(feature.route)}
+                />
+              </View>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+}

package/2/apps/native/src/app/(root)/(protected)/(tabs)/profile.tsx

@@ -0,0 +1,320 @@
+import { Env } from '@env';
+import * as SecureStore from 'expo-secure-store';
+import type React from 'react';
+import { ActivityIndicator, Alert, ScrollView, View } from 'react-native';
+import { MMKV } from 'react-native-mmkv';
+
+import {
+  Button,
+  FocusAwareStatusBar,
+  handleError,
+  Text,
+} from '@/components/ui';
+import { User as UserIcon } from '@/components/ui/icons';
+import { defaultCacheService } from '@/core/cache';
+import { error as logError } from '@/core/logging';
+import { storage } from '@/core/storage';
+import { useConvexAuth } from '@/features/authentication/services';
+import { DebugInfo } from '@/features/settings/ui/debug-info';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Simple profile item component for displaying profile information
+ */
+const ProfileItem = ({ label, value }: { label: string; value: string }) => (
+  <View className="flex-1 flex-row items-center justify-between p-3.5">
+    <Text className="text-base">{label}</Text>
+    <Text className="text-neutral-600 dark:text-white">{value}</Text>
+  </View>
+);
+
+/**
+ * Simple profile container component with regular string title
+ */
+const ProfileContainer = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <>
+    <Text className="pb-2 pt-4 text-lg font-medium">{title}</Text>
+    <View className="rounded-md border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-900">
+      {children}
+    </View>
+  </>
+);
+
+export default function Profile() {
+  const { userQuery, isLoading, signOut } = useConvexAuth();
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center">
+        <ActivityIndicator size="large" color={theme.colors.primary} />
+      </View>
+    );
+  }
+
+  const user = userQuery;
+  const displayName = user?.name || translate('profile.guest');
+  const email = user?.email || translate('profile.no_email');
+  const credits = user?.credits || 0;
+  const joinedDate = user?._creationTime
+    ? new Date(user._creationTime).toLocaleDateString()
+    : translate('profile.unknown');
+
+  const getAllMMKVData = (mmkvInstance: MMKV, instanceName: string) => {
+    const keys = mmkvInstance.getAllKeys();
+    const data = keys.map((key) => {
+      const str = mmkvInstance.getString(key);
+      if (str !== undefined) return { key, value: str, type: 'string' };
+
+      const num = mmkvInstance.getNumber(key);
+      if (num !== undefined) return { key, value: num, type: 'number' };
+
+      const bool = mmkvInstance.getBoolean(key);
+      if (bool !== undefined) return { key, value: bool, type: 'boolean' };
+
+      return { key, value: null, type: 'unknown' };
+    });
+
+    return { instanceName, keys: keys.length, data };
+  };
+
+  const handleViewAllMMKVData = () => {
+    try {
+      const legacyData = getAllMMKVData(storage, 'Legacy Storage');
+
+      const cacheServiceInstance = new MMKV();
+      const cacheData = getAllMMKVData(cacheServiceInstance, 'Cache Service');
+
+      const allData = [legacyData, cacheData];
+
+      let displayText = '';
+      let totalKeys = 0;
+
+      allData.forEach(({ instanceName, keys, data }) => {
+        totalKeys += keys;
+        displayText += `\n=== ${instanceName} (${keys} keys) ===\n`;
+
+        if (data.length === 0) {
+          displayText += 'No data found\n';
+        } else {
+          data.forEach(({ key, value, type }) => {
+            let displayValue = String(value);
+            if (type === 'string' && displayValue.length > 100) {
+              displayValue = displayValue.substring(0, 100) + '...';
+            }
+            displayText += `\n${key} (${type}):\n${displayValue}\n`;
+          });
+        }
+      });
+
+      if (totalKeys === 0) {
+        Alert.alert(
+          translate('profile.mmkv_debug'),
+          translate('profile.no_data_found'),
+        );
+      } else {
+        Alert.alert(
+          `${translate('profile.mmkv_debug')} (${totalKeys} total keys)`,
+          displayText.trim(),
+          [{ text: translate('common.ok') }],
+        );
+      }
+    } catch (error) {
+      Alert.alert(
+        translate('profile.error'),
+        translate('profile.failed_read_mmkv'),
+      );
+      handleError(error, {
+        feature: 'profile.mmkv_debug',
+        fallbackMessage: 'Error reading MMKV data',
+        toast: false,
+      });
+    }
+  };
+  const handleClearCache = async () => {
+    try {
+      await defaultCacheService.clearAll();
+      storage.clearAll();
+      // Remove Convex auth tokens stored via SecureStore adapter
+      const authKeys = [
+        'convexAuth:accessToken',
+        'convexAuth:refreshToken',
+        'convexAuth:tokenExpiresAt',
+      ];
+      await Promise.all(
+        authKeys.map((key) =>
+          SecureStore.deleteItemAsync(key).catch(() => undefined),
+        ),
+      );
+      await signOut();
+      Alert.alert(
+        translate('profile.success'),
+        translate('profile.storage_cleared'),
+      );
+    } catch (err) {
+      handleError(err, {
+        feature: 'profile.clear_storage',
+        toast: false, // Don't show toast since we're showing Alert
+      });
+      Alert.alert(
+        translate('profile.error'),
+        translate('profile.storage_clear_failed'),
+      );
+    }
+  };
+  const handleViewCacheKeys = async () => {
+    try {
+      const commonCacheKeys = [
+        'chatbot_settings',
+        'image_generator_settings',
+        'gallery_images',
+        'onboarding_completed',
+        'theme_preference',
+        'language_preference',
+      ];
+
+      const foundKeys: string[] = [];
+
+      for (const key of commonCacheKeys) {
+        try {
+          const value = await defaultCacheService.getItem(key);
+          if (value !== null) {
+            foundKeys.push(`${key}: Found`);
+          }
+        } catch (error) {
+          logError(
+            error instanceof Error
+              ? error
+              : new Error(`Error checking key ${key}`),
+            { feature: 'profile.cache_keys', key },
+          );
+        }
+      }
+
+      if (foundKeys.length === 0) {
+        Alert.alert(
+          translate('profile.cache_keys_found'),
+          translate('profile.no_cache_keys'),
+        );
+      } else {
+        Alert.alert(
+          translate('profile.cache_keys_found'),
+          foundKeys.join('\n'),
+        );
+      }
+    } catch (error) {
+      Alert.alert(
+        translate('profile.error'),
+        translate('profile.failed_view_cache'),
+      );
+      handleError(error, {
+        feature: 'profile.cache_keys',
+        fallbackMessage: 'Error viewing cache keys',
+        toast: false,
+      });
+    }
+  };
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <ScrollView className="bg-background pt-6">
+        <View className="flex-1 px-4">
+          <View className="mb-2 flex items-center">
+            <View
+              className={`size-24 items-center justify-center rounded-full ${
+                isDarkMode ? 'bg-neutral-900' : 'bg-neutral-200'
+              }`}
+            >
+              <UserIcon
+                color={isDarkMode ? '#9CA3AF' : '#6B7280'}
+                width={42}
+                height={42}
+              />
+            </View>
+          </View>
+
+          {/* Account Information */}
+          <ProfileContainer title={translate('profile.account_information')}>
+            <ProfileItem
+              label={translate('profile.name')}
+              value={displayName}
+            />
+            <ProfileItem label={translate('profile.email')} value={email} />
+            <ProfileItem
+              label={translate('profile.member_since')}
+              value={joinedDate}
+            />
+            <ProfileItem
+              label={translate('profile.available_credits')}
+              value={credits.toString()}
+            />
+          </ProfileContainer>
+
+          {/* App Information */}
+          <ProfileContainer title={translate('profile.app_information')}>
+            <ProfileItem
+              label={translate('profile.version')}
+              value={Env.VERSION}
+            />
+            <ProfileItem
+              label={translate('profile.environment')}
+              value={Env.APP_ENV}
+            />
+          </ProfileContainer>
+
+          {/* Developer Tools - Only visible in local environment */}
+          {Env.APP_ENV === 'local' && (
+            <>
+              <Text className="pb-2 pt-10 text-lg font-medium">
+                {translate('profile.development_only')}
+              </Text>
+              <View className="rounded-md border border-neutral-200 p-4 dark:border-neutral-700 dark:bg-neutral-900">
+                <Text className="mb-3 text-base font-medium">
+                  {translate('profile.storage_cache')}
+                </Text>
+
+                <Button
+                  size="sm"
+                  variant="outline"
+                  label={translate('profile.view_all_mmkv_data')}
+                  onPress={handleViewAllMMKVData}
+                  className="mb-2 h-10"
+                />
+
+                <Button
+                  size="sm"
+                  variant="outline"
+                  label={translate('profile.view_cache_keys')}
+                  onPress={handleViewCacheKeys}
+                  className="mb-2 h-10"
+                />
+
+                <Button
+                  size="sm"
+                  variant="destructive"
+                  label={translate('profile.clear_all_storage')}
+                  onPress={handleClearCache}
+                  className="mb-4 h-10"
+                />
+              </View>
+            </>
+          )}
+
+          {/* Debug Info - Only visible in local environment */}
+          {Env.APP_ENV === 'local' && <DebugInfo />}
+
+          <View className="mb-8" />
+        </View>
+      </ScrollView>
+    </>
+  );
+}