vibefast-cli 0.6.2 → 0.7.1

package/2/apps/native/src/features/tracker-app/components/macro-card.tsx

@@ -1,80 +0,0 @@
-import type React from 'react';
-import { View } from 'react-native';
-
-import { Text } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-import AnimatedNumber from './animated-number';
-import CircularProgress from './circular-progress';
-
-interface MacroCardProps {
-  value: number;
-  unit: string;
-  label: string;
-  progress: number;
-  color: string;
-  icon: React.ReactNode;
-  delay?: number;
-}
-
-export default function MacroCard({
-  value,
-  unit,
-  label,
-  progress,
-  color,
-  icon,
-  delay = 0,
-}: MacroCardProps) {
-  const theme = useThemeConfig();
-
-  return (
-    <View
-      className="flex-1 items-start rounded-2xl border p-4"
-      style={{
-        backgroundColor: theme.colors.card,
-        borderColor: theme.colors.border,
-        shadowColor: theme.colors.foreground,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 8,
-        elevation: 4,
-      }}
-    >
-      <View className="mb-1 flex-row items-baseline">
-        <AnimatedNumber
-          value={value}
-          fontSize={32}
-          fontWeight="700"
-          color={theme.colors.foreground}
-          duration={1200}
-        />
-        <Text
-          className="ml-1 text-xl font-semibold"
-          style={{ color: theme.colors.foreground }}
-        >
-          {unit}
-        </Text>
-      </View>
-      <Text
-        className="mb-4 text-sm"
-        style={{ color: theme.colors.mutedForeground }}
-      >
-        {label}
-      </Text>
-      <View className="self-center">
-        <CircularProgress
-          size={60}
-          strokeWidth={6}
-          progress={progress}
-          color={color}
-          backgroundColor={theme.colors.muted}
-          duration={1800}
-          delay={delay}
-        >
-          <View className="items-center justify-center">{icon}</View>
-        </CircularProgress>
-      </View>
-    </View>
-  );
-}

package/2/apps/native/src/features/tracker-app/components/promo-banner.tsx

@@ -1,98 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-
-import { Text } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-export default function PromoBanner() {
-  const [timeLeft, setTimeLeft] = useState({
-    hours: 71,
-    minutes: 48,
-    seconds: 12,
-  });
-  const theme = useThemeConfig();
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTimeLeft((prev) => {
-        if (prev.seconds > 0) {
-          return { ...prev, seconds: prev.seconds - 1 };
-        }
-        if (prev.minutes > 0) {
-          return { ...prev, minutes: prev.minutes - 1, seconds: 59 };
-        }
-        if (prev.hours > 0) {
-          return { hours: prev.hours - 1, minutes: 59, seconds: 59 };
-        }
-        return prev;
-      });
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, []);
-
-  return (
-    <View
-      className="my-4 flex-row items-center justify-between rounded-2xl border p-5"
-      style={{
-        backgroundColor: theme.colors.muted,
-        borderColor: theme.colors.border,
-        shadowColor: theme.colors.foreground,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 8,
-        elevation: 4,
-      }}
-    >
-      <View className="flex-1">
-        <View
-          className="mb-2 self-start rounded-2xl border-2 px-3 py-1.5"
-          style={{
-            borderColor: theme.colors.destructive,
-            backgroundColor: theme.colors.card,
-          }}
-        >
-          <Text
-            className="text-sm font-bold"
-            style={{ color: theme.colors.destructive }}
-          >
-            80% off
-          </Text>
-        </View>
-        <Text
-          className="text-lg font-bold leading-5"
-          style={{ color: theme.colors.foreground }}
-        >
-          Your trial ends in
-        </Text>
-        <Text
-          className="text-lg font-bold leading-5"
-          style={{ color: theme.colors.foreground }}
-        >
-          2 days!!
-        </Text>
-      </View>
-      <View className="items-end">
-        <View className="mb-3">
-          <Text
-            className="text-base font-semibold"
-            style={{ color: theme.colors.mutedForeground }}
-          >
-            {timeLeft.hours} : {timeLeft.minutes} : {timeLeft.seconds}
-          </Text>
-        </View>
-        <TouchableOpacity
-          className="rounded-2xl px-5 py-3"
-          style={{ backgroundColor: theme.colors.primary }}
-        >
-          <Text
-            className="text-sm font-semibold"
-            style={{ color: theme.colors.primaryForeground }}
-          >
-            Resubscribe now
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-}

package/2/apps/native/src/features/tracker-app/components/recently-logged.tsx

@@ -1,64 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import React from 'react';
-import { Image, View } from 'react-native';
-
-import { Text } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-export default function RecentlyLogged() {
-  const theme = useThemeConfig();
-
-  return (
-    <View className="mt-4">
-      <Text
-        className="mb-4 text-xl font-bold"
-        style={{ color: theme.colors.foreground }}
-      >
-        Recently logged
-      </Text>
-      <View
-        className="flex-row items-center rounded-2xl border p-2 pr-4"
-        style={{
-          backgroundColor: theme.colors.card,
-          borderColor: theme.colors.border,
-          shadowColor: theme.colors.foreground,
-          shadowOffset: { width: 0, height: 2 },
-          shadowOpacity: 0.1,
-          shadowRadius: 8,
-          elevation: 4,
-        }}
-      >
-        <Image
-          source={{
-            uri: 'https://images.pexels.com/photos/1435735/pexels-photo-1435735.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&dpr=2',
-          }}
-          style={{ width: 70, height: 70 }}
-          className="mr-3 rounded-xl"
-        />
-        <View className="flex-1">
-          <Text
-            className="mb-1.5 text-base font-semibold"
-            style={{ color: theme.colors.foreground }}
-          >
-            Mixed Fruits and...
-          </Text>
-          <View className="flex-row items-center">
-            <Ionicons name="flame" size={16} color={theme.colors.warning} />
-            <Text
-              className="ml-1 text-sm font-semibold"
-              style={{ color: theme.colors.foreground }}
-            >
-              300 calories
-            </Text>
-          </View>
-        </View>
-        <Text
-          className="text-sm font-medium"
-          style={{ color: theme.colors.mutedForeground }}
-        >
-          12:27 PM
-        </Text>
-      </View>
-    </View>
-  );
-}

package/2/apps/native/src/features/tracker-app/components/week-calendar.tsx

@@ -1,68 +0,0 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-
-import { Text } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-interface Day {
-  letter: string;
-  number: number;
-  isToday?: boolean;
-}
-
-const days: Day[] = [
-  { letter: 'S', number: 22 },
-  { letter: 'S', number: 23 },
-  { letter: 'M', number: 24 },
-  { letter: 'T', number: 25 },
-  { letter: 'W', number: 26 },
-  { letter: 'T', number: 27, isToday: true },
-  { letter: 'F', number: 28 },
-];
-
-export default function WeekCalendar() {
-  const [selectedDay, setSelectedDay] = useState(5); // Thursday 27
-  const theme = useThemeConfig();
-
-  return (
-    <View className="mb-6 flex-row justify-between px-1">
-      {days.map((day, index) => (
-        <TouchableOpacity
-          key={index}
-          className="items-center justify-center rounded-2xl border-2 border-dashed px-4 py-6"
-          style={{
-            borderColor:
-              index === selectedDay
-                ? theme.colors.primary
-                : theme.colors.border,
-            backgroundColor: 'transparent',
-          }}
-          onPress={() => setSelectedDay(index)}
-        >
-          <Text
-            className="mb-2 text-xs font-medium"
-            style={{
-              color:
-                index === selectedDay
-                  ? theme.colors.primary
-                  : theme.colors.mutedForeground,
-            }}
-          >
-            {day.letter}
-          </Text>
-          <Text
-            className="text-base font-semibold"
-            style={{
-              color:
-                index === selectedDay
-                  ? theme.colors.primary
-                  : theme.colors.foreground,
-            }}
-          >
-            {day.number}
-          </Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-  );
-}

package/2/apps/native/src/features/vibefast-features.ts

@@ -1,42 +0,0 @@
-/**
- * VibeFast CLI Managed Features
- *
- * ⚠️ DO NOT EDIT THIS FILE MANUALLY
- * This file is automatically managed by the VibeFast CLI.
- *
- * Features are added/removed via:
- * - vf add <feature-name>
- * - vf remove <feature-name>
- */
-
-export interface VibeFastFeature {
-  id: string;
-  title: string;
-  icon: string;
-  color: string;
-  description: string;
-  route: string;
-  testID: string;
-}
-
-export const vibefastFeatures: VibeFastFeature[] = [
-  // --- @vibefast:features:start ---
-  {
-    id: 'charts',
-    title: 'Charts',
-    icon: '📊',
-    color: '#6366F1',
-    description: 'Charts feature',
-    route: '/charts',
-    testID: 'charts-button',
-  },
-  {
-    id: 'chatbot',
-    title: 'AI Chatbot',
-    icon: '💬',
-    color: '#F43F5E',
-    description: 'AI Chatbot feature',
-    route: '/chatbot',
-    testID: 'chatbot-button',
-  }, // --- @vibefast:features:end ---
-];

package/2/apps/native/src/features/voice-bot/README.md

@@ -1,185 +0,0 @@
-# Voice Bot Feature
-
-A real-time voice conversation feature powered by ElevenLabs Conversational AI SDK.
-
-## Features
-
-- **Real-time Voice Conversations**: Have natural voice conversations with AI
-- **Text Messaging**: Send text messages and contextual updates during conversations
-- **Feedback System**: Provide feedback on AI responses with like/dislike buttons
-- **Connection Status**: Visual indicators for connection status and speaking state
-- **Auto-Cleanup**: Automatically ends conversations when user leaves the screen to prevent resource waste
-- **VibeFast Integration**: Fully integrated with VibeFast theming and component system
-
-## Setup
-
-### 1. ElevenLabs Account Setup
-
-1. Go to [ElevenLabs](https://elevenlabs.io/)
-2. Create an account or sign in
-3. Navigate to **Conversational AI** section
-4. Create a new agent
-5. Copy the agent ID from your agent settings
-
-### 2. Environment Configuration
-
-Add your ElevenLabs agent ID to your environment file:
-
-```bash
-# .env.local
-ELEVENLABS_AGENT_ID=your_agent_id_here
-```
-
-### 3. Required Dependencies
-
-The following dependencies are automatically installed:
-
-- `@elevenlabs/react-native` - ElevenLabs React Native SDK
-- `@livekit/react-native-expo-plugin` - WebRTC support for Expo
-- `@config-plugins/react-native-webrtc` - WebRTC configuration plugin
-
-### 4. Permissions
-
-The app.config.ts has been updated with the required permissions:
-
-**iOS:**
-
-- `NSMicrophoneUsageDescription` - For voice input
-
-**Android:**
-
-- `android.permission.RECORD_AUDIO` - For voice input
-- `android.permission.ACCESS_NETWORK_STATE` - For network connectivity
-- `android.permission.INTERNET` - For internet access
-- `android.permission.MODIFY_AUDIO_SETTINGS` - For audio configuration
-- `android.permission.BLUETOOTH` - For Bluetooth audio devices
-
-## Usage
-
-### Basic Implementation
-
-```tsx
-import { VoiceBotScreen } from '@/features/voice-bot';
-
-function MyVoiceBotScreen() {
-  return (
-    <VoiceBotScreen
-      config={{ agentId: 'your-agent-id' }}
-      title="Voice Assistant"
-      subtitle="Start a conversation with your AI assistant"
-    />
-  );
-}
-```
-
-### Custom Hook Usage
-
-```tsx
-import { useVoiceBot } from '@/features/voice-bot';
-
-function CustomVoiceBotComponent() {
-  const { state, actions, textInput, setTextInput } = useVoiceBot(
-    { agentId: 'your-agent-id' },
-    {
-      onConnect: (conversationId) => {
-        console.log('Connected:', conversationId);
-      },
-      onMessage: (message) => {
-        console.log('New message:', message);
-      },
-    },
-  );
-
-  return (
-    <View>
-      <Text>Status: {state.status}</Text>
-      <Button
-        label="Start Conversation"
-        onPress={actions.startConversation}
-        disabled={state.status !== 'disconnected'}
-      />
-    </View>
-  );
-}
-```
-
-## Components
-
-### VoiceBotScreen
-
-Main screen component that provides a complete voice bot interface.
-
-**Props:**
-
-- `config: VoiceBotConfig` - Configuration object with agent ID
-- `title?: string` - Screen title (optional)
-- `subtitle?: string` - Screen subtitle (optional)
-
-### ConversationStatusIndicator
-
-Displays the current connection status and conversation information.
-
-### VoiceControls
-
-Provides start/stop conversation buttons and feedback controls.
-
-### MessageInput
-
-Text input component for sending messages and contextual updates.
-
-## Development Build Required
-
-**Important**: This feature requires a development build and cannot run in Expo Go due to WebRTC native dependencies.
-
-### Building for Development
-
-```bash
-# Prebuild (required for native dependencies)
-pnpx expo prebuild
-
-# iOS
-pnpm ios -d
-
-# Android
-pnpm android -d
-```
-
-### Simulator Audio Settings
-
-When running on simulators, adjust audio settings:
-
-**iOS Simulator:**
-
-- In I/O menu, set correct audio input/output devices
-- Increase volume (defaults to 0)
-
-**Android Emulator:**
-
-- In Extended Controls, enable "Virtual microphone uses host audio input"
-
-## Architecture
-
-The voice bot feature follows VibeFast architecture patterns:
-
-- **Services**: `useVoiceBot` hook for state management and API interactions
-- **Components**: Modular UI components following VibeFast design system
-- **Types**: TypeScript interfaces for type safety
-- **Environment**: Secure configuration through environment variables
-- **Lifecycle Management**: Automatic cleanup on component unmount and screen navigation
-
-## Security Considerations
-
-- Agent ID is configured through environment variables
-- For production apps, consider generating short-lived signed URLs server-side
-- See [ElevenLabs Authentication Docs](https://elevenlabs.io/docs/conversational-ai/customization/authentication) for advanced security
-
-## Troubleshooting
-
-1. **Build Errors**: Ensure you're using development builds, not Expo Go
-2. **Audio Issues**: Check simulator audio settings and permissions
-3. **Connection Issues**: Verify agent ID and network connectivity
-4. **WebRTC Errors**: Ensure all native dependencies are properly installed
-
-## API Reference
-
-See the [ElevenLabs React Native SDK Documentation](https://elevenlabs.io/docs/conversational-ai/libraries/react-native) for detailed API reference.

package/2/apps/native/src/features/voice-bot/components/conversation-status.tsx

@@ -1,76 +0,0 @@
-import type { ConversationStatus } from '@elevenlabs/react-native';
-import React from 'react';
-import { View } from 'react-native';
-
-import { Text } from '@/components/ui';
-
-interface ConversationStatusIndicatorProps {
-  status: ConversationStatus;
-  conversationId?: string | null;
-  isSpeaking?: boolean;
-}
-
-export function ConversationStatusIndicator({
-  status,
-  conversationId,
-  isSpeaking,
-}: ConversationStatusIndicatorProps) {
-  const getStatusColor = (status: ConversationStatus): string => {
-    switch (status) {
-      case 'connected':
-        return 'bg-success-500';
-      case 'connecting':
-        return 'bg-warning-500';
-      case 'disconnected':
-        return 'bg-neutral-400';
-      default:
-        return 'bg-neutral-400';
-    }
-  };
-
-  const getStatusText = (status: ConversationStatus): string => {
-    return status.charAt(0).toUpperCase() + status.slice(1);
-  };
-
-  return (
-    <View className="items-center gap-4">
-      {/* Status Indicator */}
-      <View className="flex-row items-center gap-2">
-        <View className={`size-3 rounded-full ${getStatusColor(status)}`} />
-        <Text className="text-base font-medium text-foreground">
-          {getStatusText(status)}
-        </Text>
-      </View>
-
-      {/* Conversation ID Display */}
-      {status === 'connected' && conversationId && (
-        <View className="w-full rounded-lg border border-border bg-muted p-3">
-          <Text className="text-mutedForeground mb-1 text-xs font-semibold">
-            Conversation ID:
-          </Text>
-          <Text className="rounded border border-border bg-background p-2 font-mono text-sm text-foreground">
-            {conversationId}
-          </Text>
-        </View>
-      )}
-
-      {/* Speaking Indicator */}
-      {status === 'connected' && (
-        <View className="flex-row items-center gap-2">
-          <View
-            className={`size-3 rounded-full ${
-              isSpeaking ? 'bg-success' : 'bg-muted'
-            }`}
-          />
-          <Text
-            className={`text-sm font-medium ${
-              isSpeaking ? 'text-success' : 'text-mutedForeground'
-            }`}
-          >
-            {isSpeaking ? '🎤 AI Speaking' : '👂 AI Listening'}
-          </Text>
-        </View>
-      )}
-    </View>
-  );
-}

package/2/apps/native/src/features/voice-bot/components/index.ts

@@ -1,4 +0,0 @@
-export * from './conversation-status';
-export * from './message-input';
-export * from './voice-bot-screen';
-export * from './voice-controls';