vibefast-cli 0.6.2 → 0.7.1

package/2/vf-agent/data/knowledge_base/starter-docs/quiz-reference.md

@@ -1,169 +0,0 @@
-# Quiz Feature Reference
-
-> Frontend paths reference the Expo workspace (`apps/native/src/...`); backend paths reference `packages/backend/convex/...`.
-
-## Overview
-
-The Quiz feature is a self-contained, animated, and interactive quiz component for React Native. It's designed to be easily integrated into any part of the application to present users with a series of questions.
-
-As of now, the Quiz feature is a **frontend-only** component. It receives its question data via props and does not automatically connect to a backend for fetching questions or saving results. This makes it highly flexible for various use cases, such as onboarding flows, surveys, or actual tests.
-
-### Core Technologies
-
-- **[React Native](https://reactnative.dev):** The core framework for the UI components.
-- **[Moti](https://moti.fyi/):** A powerful animation library used for all transitions, including the progress bar, question slides, and continue button appearances.
-- **[Expo Router](https://docs.expo.dev/router/):** Used for navigation, particularly for the back button functionality.
-
-## Getting Started
-
-To use the Quiz component, you need to import it and provide it with an array of question objects. The component handles all of its own internal state, including the current question, user selections, and progress.
-
-### Basic Usage
-
-```tsx
-import Quiz from '@/features/quiz';
-
-const myQuestions = [
-  {
-    text: 'What is your favorite color?',
-    mode: 'manual-advance', // User must tap 'Continue'
-    options: [
-      { id: '1', text: 'Red' },
-      { id: '2', text: 'Blue' },
-      { id: '3', text: 'Green' },
-    ],
-  },
-  {
-    text: 'Do you prefer cats or dogs?',
-    mode: 'auto-advance', // Automatically moves to next question on select
-    options: [
-      { id: '1', text: 'Cats' },
-      { id: '2', text: 'Dogs' },
-    ],
-  },
-];
-
-function MyQuizScreen() {
-  return <Quiz questions={myQuestions} />;
-}
-```
-
-### Question Modes
-
-The quiz supports two modes on a per-question basis, defined in `apps/native/src/features/quiz/config.ts`:
-
-- `QuestionMode.AutoAdvance`: As soon as the user selects an option, the quiz automatically proceeds to the next question after a short delay.
-- `QuestionMode.ManualAdvance`: After the user selects an option, a "Continue" button appears, and the user must tap it to proceed.
-
-## Key Components
-
-- `Quiz`: The main component that wraps the entire feature. It manages the overall state and renders the progress bar and the current question.
-- `Question`: Renders a single question and its associated options.
-- `Option`: A pressable component for a single answer choice, with built-in animation states for hover and press.
-- `ProgressBar`: A visual indicator of the user's progress through the quiz.
-
-## How-To Guides
-
-### 1. Customize Animations
-
-All animation durations and types can be configured in `apps/native/src/features/quiz/config.ts`.
-
-```ts
-// apps/native/src/features/quiz/config.ts
-export const quizConfig = {
-  // ...
-  animation: {
-    duration: 500, // Change duration from 300ms to 500ms
-  },
-};
-```
-
-You can also change the animation styles directly within the components by modifying the `from`, `animate`, and `transition` props on the `<MotiView>` and `<MotiPressable>` components.
-
-### 2. Connect to a Convex Backend
-
-To make the quiz dynamic, you can fetch questions from your Convex backend.
-
-#### Step 1: Define Schema in Convex
-
-First, define the schema for quizzes and questions in `packages/backend/convex/schema.ts`.
-
-```ts
-// packages/backend/convex/schema.ts
-export default defineSchema({
-  // ... other tables
-  quizzes: defineTable({
-    name: v.string(),
-    description: v.optional(v.string()),
-  }),
-
-  questions: defineTable({
-    quizId: v.id('quizzes'),
-    text: v.string(),
-    mode: v.union(v.literal('auto-advance'), v.literal('manual-advance')),
-  }).index('by_quizId', ['quizId']),
-
-  questionOptions: defineTable({
-    questionId: v.id('questions'),
-    text: v.string(),
-  }).index('by_questionId', ['questionId']),
-});
-```
-
-#### Step 2: Create a Convex Query
-
-Create a new file `convex/quizzes.ts` to fetch a quiz with all its questions and options.
-
-```ts
-// convex/quizzes.ts
-import { query } from './_generated/server';
-import { v } from 'convex/values';
-
-export const get = query({
-  args: { quizId: v.id('quizzes') },
-  handler: async (ctx, args) => {
-    const quiz = await ctx.db.get(args.quizId);
-    if (!quiz) return null;
-
-    const questions = await ctx.db
-      .query('questions')
-      .withIndex('by_quizId', (q) => q.eq('quizId', args.quizId))
-      .collect();
-
-    const questionsWithOptions = await Promise.all(
-      questions.map(async (q) => {
-        const options = await ctx.db
-          .query('questionOptions')
-          .withIndex('by_questionId', (opt) => opt.eq('questionId', q._id))
-          .collect();
-        return { ...q, options };
-      }),
-    );
-
-    return { ...quiz, questions: questionsWithOptions };
-  },
-});
-```
-
-#### Step 3: Use the Query in Your Frontend
-
-Finally, modify your quiz screen to use the `useQuery` hook to fetch the data.
-
-```tsx
-import Quiz from '@/features/quiz';
-import { useQuery } from 'convex/react';
-import { api } from 'convex/_generated/api';
-import { FullScreenLoader } from '@/components/ui';
-
-function MyDynamicQuizScreen() {
-  // Assume you get quizId from router params or state
-  const quizId = 'your_quiz_id_here';
-  const quizData = useQuery(api.quizzes.get, { quizId });
-
-  if (!quizData) {
-    return <FullScreenLoader />;
-  }
-
-  return <Quiz questions={quizData.questions} />;
-}
-```

package/2/vf-agent/data/knowledge_base/starter-docs/settings-reference.md

@@ -1,146 +0,0 @@
-# Settings Feature Reference
-
-> Frontend paths reference the Expo workspace (`apps/native/src/...`).
-
-## Overview
-
-The Settings feature provides a collection of reusable components to quickly and easily build a settings screen for your application. It includes pre-built components for common settings like changing the app theme and language, and is designed to be easily extendable.
-
-### Core Technologies
-
-- **[React Context](https://react.dev/learn/passing-data-deeply-with-context):** The theme and language items hook into the app-wide context (`useSelectedTheme`, `useSelectedLanguage`) to manage and persist user preferences.
-- **[i18next](https://www.i18next.com/):** The `LanguageItem` component works directly with the app's localization system to change the language on the fly.
-- **Component-Based Architecture:** The feature is composed of small, reusable components (`Item`, `ItemsContainer`) that can be combined to build a visually consistent settings screen.
-
-## Getting Started
-
-The settings components are designed to be dropped into any screen. The main settings screen is located at `apps/native/src/app/(tabs)/settings.tsx`, where you can see these components in action.
-
-### Basic Usage
-
-To build a settings screen, you combine `ItemsContainer` and `Item` components.
-
-```tsx
-import { ScrollView, View } from 'react-native';
-import {
-  ItemsContainer,
-  Item,
-  ThemeItem,
-  LanguageItem,
-} from '@/features/settings';
-import { useAuth } from '@/features/authentication'; // Assuming useAuth has a signOut method
-
-function SettingsScreen() {
-  const { signOut } = useAuth();
-
-  return (
-    <ScrollView>
-      <View className="p-4">
-        <ItemsContainer title="Appearance">
-          <ThemeItem />
-          <LanguageItem />
-        </ItemsContainer>
-
-        <ItemsContainer title="Account">
-          <Item
-            text="settings.account.edit_profile"
-            onPress={() => {
-              /* Navigate to profile edit */
-            }}
-          />
-          <Item text="settings.account.logout" onPress={signOut} />
-        </ItemsContainer>
-      </View>
-    </ScrollView>
-  );
-}
-```
-
-## Key Components
-
-- **`ItemsContainer`:** A styled wrapper component that groups related settings items. It provides a border and an optional title for the section.
-
-- **`Item`:** The base component for a single row in a settings list. It can display a label, a value, an icon, and can handle press events to navigate or trigger actions.
-
-- **`ThemeItem`:** A specialized `Item` component that is pre-wired to the app's theme context. When pressed, it opens a modal allowing the user to select between `Light`, `Dark`, and `System` themes. The selection is persisted across the app.
-
-- **`LanguageItem`:** A specialized `Item` component that is pre-wired to the app's localization context. When pressed, it opens a modal for the user to switch between available languages (e.g., English and Arabic).
-
-## How-To Guides
-
-### 1. Add a New Settings Item
-
-To add a new, simple settings item (e.g., a link to a "Terms of Service" screen), use the base `Item` component within an `ItemsContainer`.
-
-```tsx
-import { useRouter } from 'expo-router';
-
-// ... inside your settings screen component
-const router = useRouter();
-
-<ItemsContainer title="Legal">
-  <Item
-    text="settings.legal.terms_of_service" // Add this key to your translation files
-    onPress={() => router.push('/terms')}
-  />
-  <Item
-    text="settings.legal.privacy_policy"
-    onPress={() => router.push('/privacy')}
-  />
-</ItemsContainer>;
-```
-
-### 2. Add a New Selectable Option (e.g., Notification Sound)
-
-To create a new settings item with multiple choices that opens a modal, you can follow the pattern used by `ThemeItem` and `LanguageItem`.
-
-1.  **Create a Context/Hook:** First, you need a way to manage the state of the setting globally. This is often done with `React.createContext` and `useContext` or a state management library like Zustand.
-
-    ```ts
-    // e.g., in apps/native/src/core/notifications/sound-context.ts
-    const { useNotificationSound, NotificationSoundProvider } = // ... your implementation
-    ```
-
-2.  **Create a New Component:** Create a new file, e.g., `NotificationSoundItem.tsx`.
-
-    ```tsx
-    // apps/native/src/features/settings/components/notification-sound-item.tsx
-    import { useModal, Options } from '@/components/ui';
-    import { useNotificationSound } from '@/core/notifications/sound-context';
-
-    export function NotificationSoundItem() {
-      const { sound, setSound } = useNotificationSound();
-      const modal = useModal();
-
-      const sounds = [
-        { label: 'Default', value: 'default' },
-        { label: 'Chime', value: 'chime' },
-        { label: 'None', value: 'none' },
-      ];
-
-      const onSelect = (option) => {
-        setSound(option.value);
-        modal.dismiss();
-      };
-
-      const selectedSound = sounds.find((s) => s.value === sound);
-
-      return (
-        <>
-          <Item
-            text="settings.notifications.sound"
-            value={selectedSound?.label}
-            onPress={modal.present}
-          />
-          <Options
-            ref={modal.ref}
-            options={sounds}
-            onSelect={onSelect}
-            value={sound}
-          />
-        </>
-      );
-    }
-    ```
-
-3.  **Use the Component:** Add your new `<NotificationSoundItem />` to your settings screen.

package/2/vf-agent/data/knowledge_base/starter-docs/tech-stack.md

@@ -1,159 +0,0 @@
-# Technology Stack
-
-## Overview
-
-This document provides a comprehensive overview of the key technologies, libraries, and services used in the VibeFast project. This is the single source of truth for the project's technical stack.
-
-### Core Platform
-
-| Technology       | Version  | Purpose                                                 | Rationale                                                                      |
-| :--------------- | :------- | :------------------------------------------------------ | :----------------------------------------------------------------------------- |
-| **React Native** | 0.79.5   | The core framework for building the mobile application. | Enables cross-platform development for iOS and Android from a single codebase. |
-| **Expo**         | ~53.0.22 | The platform for building and deploying the app.        | Simplifies the development workflow, build process, and updates.               |
-| **TypeScript**   | ^5.8.3   | The primary programming language for the entire stack.  | Provides strong typing to reduce errors and improve developer experience.      |
-| **React**        | 19.0.0   | The core React library for building user interfaces.    | Foundation for React Native and component-based architecture.                  |
-
-### Frontend
-
-| Technology                  | Version | Purpose                                          | Rationale                                                                      |
-| :-------------------------- | :------ | :----------------------------------------------- | :----------------------------------------------------------------------------- |
-| **Expo Router**             | ~5.1.5  | File-based routing and navigation.               | Offers a modern, web-like routing experience for native apps.                  |
-| **NativeWind**              | ^4.1.21 | Utility-first styling (Tailwind CSS for Native). | Allows for rapid and consistent UI development with a proven styling paradigm. |
-| **TailwindCSS**             | 3.4.4   | Core CSS framework for NativeWind.               | Industry-standard utility-first CSS framework for consistent styling.          |
-| **Zustand**                 | ^5.0.5  | Global state management.                         | A minimal and unopinionated state management solution, easy for AI to use.     |
-| **React Hook Form**         | ^7.53.0 | Form state management and validation.            | Simplifies complex form logic and integrates seamlessly with Zod.              |
-| **Zod**                     | ^3.23.8 | Schema declaration and validation.               | Provides robust, type-safe validation for forms and API data.                  |
-| **React Native Reanimated** | ~3.17.5 | High-performance animations.                     | Powers smooth, fluid animations for a polished user experience.                |
-| **Moti**                    | ^0.29.0 | Animation library built on Reanimated.           | Provides declarative animations with a simple API for UI transitions.          |
-| **Lottie**                  | 7.2.2   | Renders high-quality animations from JSON files. | Used for engaging onboarding and loading sequences.                            |
-| **@gorhom/bottom-sheet**    | ^5.0.5  | A performant bottom sheet component.             | Provides a native-like, customizable bottom sheet for modals and menus.        |
-| **@tanstack/react-query**   | ^5.52.1 | Server state management and caching.             | Handles data fetching, caching, and synchronization with the backend.          |
-
-### Backend (Convex)
-
-| Technology             | Version | Purpose                                | Rationale                                                                         |
-| :--------------------- | :------ | :------------------------------------- | :-------------------------------------------------------------------------------- |
-| **Convex**             | ^1.25.2 | Full-stack backend platform.           | Provides a real-time database, serverless functions, and file storage in one.     |
-| **@convex-dev/auth**   | ^0.0.87 | Authentication and session management. | A dedicated auth library for Convex that simplifies user management and security. |
-| **Resend**             | ^4.6.0  | Email delivery service.                | Used for sending transactional emails like OTPs and password resets.              |
-| **@convex-dev/resend** | ^0.1.6  | Convex integration for Resend.         | Provides seamless integration between Convex backend and Resend email service.    |
-| **Lucia**              | ^3.2.2  | Authentication library.                | Provides additional auth utilities and session management capabilities.           |
-| **bcryptjs**           | ^3.0.2  | Password hashing library.              | Secure password hashing for user authentication.                                  |
-
-### AI & Machine Learning
-
-| Technology                | Version | Purpose                                         | Rationale                                                                   |
-| :------------------------ | :------ | :---------------------------------------------- | :-------------------------------------------------------------------------- |
-| **Vercel AI SDK**         | ^4.3.17 | A library for building AI-powered applications. | Provides hooks (`useChat`) and utilities for streaming AI responses.        |
-| **@ai-sdk/openai**        | ^1.3.23 | OpenAI integration for AI SDK.                  | Provides access to GPT models for text generation and analysis.             |
-| **@ai-sdk/google**        | ^1.2.22 | Google AI integration for AI SDK.               | Enables integration with Google's Gemini models for text and multimodal AI. |
-| **@ai-sdk/replicate**     | ^0.2.8  | Replicate integration for AI SDK.               | Provides access to various AI models hosted on Replicate platform.          |
-| **@ai-sdk/react**         | ^1.2.12 | React hooks for AI SDK.                         | Provides React-specific hooks like `useChat` for AI interactions.           |
-| **@google/generative-ai** | ^0.24.1 | Google's Generative AI library.                 | Direct integration with Google's generative AI models and services.         |
-
-### Real-time Communication & Voice
-
-| Technology                              | Version  | Purpose                                        | Rationale                                                                |
-| :-------------------------------------- | :------- | :--------------------------------------------- | :----------------------------------------------------------------------- |
-| **LiveKit React Native**                | ^2.9.1   | Real-time audio/video communication framework. | Provides high-quality, low-latency real-time communication capabilities. |
-| **LiveKit React Native WebRTC**         | ^137.0.1 | WebRTC implementation for LiveKit.             | Native WebRTC support for peer-to-peer audio/video streaming.            |
-| **LiveKit Client**                      | ^2.15.5  | JavaScript client for LiveKit.                 | Core client library for interacting with LiveKit servers.                |
-| **LiveKit React Native Expo Plugin**    | ^1.0.1   | Expo plugin for LiveKit integration.           | Seamless integration of LiveKit with Expo projects.                      |
-| **@config-plugins/react-native-webrtc** | ^12.0.0  | WebRTC configuration plugin.                   | Configures WebRTC for React Native applications.                         |
-| **ElevenLabs React Native**             | ^0.2.1   | Voice synthesis and text-to-speech.            | High-quality AI-powered voice generation for natural speech synthesis.   |
-
-### Testing
-
-| Technology                       | Version | Purpose                           | Rationale                                                                     |
-| :------------------------------- | :------ | :-------------------------------- | :---------------------------------------------------------------------------- |
-| **Jest**                         | ^29.7.0 | The primary testing framework.    | A widely-adopted and robust framework for unit and integration tests.         |
-| **React Native Testing Library** | ^12.7.2 | A library for testing components. | Encourages testing practices that resemble how users interact with the app.   |
-| **Vitest**                       | ^3.1.4  | Fast unit test framework.         | Modern testing framework for backend Convex functions with fast execution.    |
-| **Convex Test**                  | ^0.0.37 | Testing utilities for Convex.     | Provides testing helpers and mocks specifically for Convex backend functions. |
-| **Jest Expo**                    | ~53.0.7 | Jest preset for Expo projects.    | Configures Jest to work seamlessly with Expo and React Native environment.    |
-
-### Tooling & CI/CD
-
-| Technology                   | Version | Purpose                 | Rationale                                                             |
-| :--------------------------- | :------ | :---------------------- | :-------------------------------------------------------------------- |
-| **pnpm**                     | 10.12.3 | Package manager.        | Fast and disk-space efficient, managing dependencies in the monorepo. |
-| **ESLint**                   | ^9.28.0 | Code linting.           | Enforces code quality and consistency across the project.             |
-| **Prettier**                 | ^3.3.3  | Code formatting.        | Ensures a consistent code style automatically.                        |
-| **Husky**                    | ^9.1.5  | Git hooks.              | Automates pre-commit checks for code quality and testing.             |
-| **Commitlint**               | ^19.2.2 | Commit message linting. | Enforces conventional commit message format for better git history.   |
-| **Cross-env**                | ^7.0.3  | Environment variables.  | Enables cross-platform environment variable setting in scripts.       |
-| **@dev-plugins/react-query** | ^0.0.7  | React Query dev tools.  | Development tools for debugging React Query operations.               |
-
-### Development Tools
-
-| Technology   | Version | Purpose                    | Rationale                                                        |
-| :----------- | :------ | :------------------------- | :--------------------------------------------------------------- |
-| **Expo CLI** | Latest  | Expo development tools.    | Essential tooling for Expo project development and deployment.   |
-| **EAS CLI**  | Latest  | Expo Application Services. | Cloud-based build and deployment services for Expo applications. |
-| **Maestro**  | Latest  | Mobile UI testing.         | End-to-end testing framework for mobile applications.            |
-
-### Additional Libraries & Utilities
-
-| Technology                                | Version       | Purpose                                     | Rationale                                                            |
-| :---------------------------------------- | :------------ | :------------------------------------------ | :------------------------------------------------------------------- |
-| **Expo Audio**                            | ~0.4.9        | Audio playback and recording.               | Provides cross-platform audio functionality.                         |
-| **Expo Video**                            | ~2.2.2        | Video playback and processing.              | Native video player with advanced features.                          |
-| **Expo Image**                            | ~2.4.0        | Advanced image display and caching.         | High-performance image component with caching and optimization.      |
-| **Expo Camera**                           | ~16.1.11      | Camera access and photo/video capture.      | Native camera functionality for iOS and Android.                     |
-| **Expo Image Picker**                     | ~16.1.4       | Image and video selection from gallery.     | Access to device photo library and camera roll.                      |
-| **Expo Media Library**                    | ~17.1.7       | Media library access and management.        | Full access to device's media library.                               |
-| **Expo File System**                      | ~18.1.11      | File system operations.                     | Read/write files, manage directories, and handle file operations.    |
-| **Expo Notifications**                    | ~0.31.4       | Push notifications and local notifications. | Comprehensive notification system for iOS and Android.               |
-| **Expo Secure Store**                     | ~14.2.4       | Secure key-value storage.                   | Encrypted storage for sensitive data like tokens and keys.           |
-| **Expo Auth Session**                     | ~6.2.1        | OAuth and authentication flows.             | Handles authentication with various OAuth providers.                 |
-| **Expo Web Browser**                      | ~14.2.0       | In-app web browser.                         | Open web content within the app using native browsers.               |
-| **Expo Linear Gradient**                  | ~14.1.5       | Linear gradient backgrounds.                | Create smooth color gradients for UI elements.                       |
-| **Expo Blur**                             | ~14.1.5       | Blur effects and background blur.           | Add blur effects to components and backgrounds.                      |
-| **Expo Haptics**                          | ~14.1.4       | Haptic feedback.                            | Provide tactile feedback to user interactions.                       |
-| **Expo Device**                           | ~7.1.4        | Device information and capabilities.        | Access device-specific information and features.                     |
-| **Expo Application**                      | ~6.1.6        | Application metadata and state.             | Get information about the app and its current state.                 |
-| **Expo Constants**                        | ~17.1.6       | App constants and configuration.            | Access app configuration and system constants.                       |
-| **Expo Linking**                          | ~7.1.5        | Deep linking and URL handling.              | Handle deep links and external URL schemes.                          |
-| **Expo Localization**                     | ~16.1.5       | Localization and internationalization.      | Access device locale and localization settings.                      |
-| **Expo Splash Screen**                    | ~0.30.9       | Custom splash screen management.            | Control the appearance and behavior of the splash screen.            |
-| **Expo Status Bar**                       | ~2.2.3        | Status bar customization.                   | Customize the appearance of the device status bar.                   |
-| **Expo Store Review**                     | ~8.1.5        | App store review prompts.                   | Request app reviews from users in the app stores.                    |
-| **Expo System UI**                        | ~5.0.11       | System UI customization.                    | Control system UI elements like navigation bars.                     |
-| **Expo Updates**                          | ~0.28.17      | Over-the-air updates.                       | Enable OTA updates without app store submissions.                    |
-| **Expo Crypto**                           | ~14.1.5       | Cryptographic functions.                    | Access to native cryptographic APIs.                                 |
-| **Expo Dev Client**                       | ~5.2.1        | Development client for Expo.                | Enhanced development experience with Expo.                           |
-| **Expo Modules**                          | Various       | Native functionality access.                | Provides access to device features like camera, file system, etc.    |
-| **React Native MMKV**                     | ~3.1.0        | High-performance key-value storage.         | Fast, efficient local storage solution for app data.                 |
-| **React Native Gesture Handler**          | ~2.24.0       | Advanced gesture recognition.               | Enables complex touch interactions and gestures.                     |
-| **React Native Screens**                  | ^4.11.1       | Native screen management.                   | Optimizes navigation performance with native screen components.      |
-| **React Native SVG**                      | ~15.11.2      | SVG rendering support.                      | Enables scalable vector graphics in React Native applications.       |
-| **Lucide React Native**                   | ^0.525.0      | Icon library.                               | Comprehensive icon set with React Native compatibility.              |
-| **React Native Flash Message**            | ^0.4.2        | Toast notifications.                        | User-friendly notification system for app feedback.                  |
-| **Sonner Native**                         | ^0.21.1       | Modern toast notifications.                 | Beautiful, customizable toast notifications for React Native.        |
-| **i18next**                               | ^23.14.0      | Internationalization framework.             | Comprehensive i18n solution for multi-language support.              |
-| **React i18next**                         | ^15.0.1       | React bindings for i18next.                 | React-specific hooks and components for internationalization.        |
-| **PostHog React Native**                  | ^4.2.1        | Product analytics.                          | User behavior tracking and product analytics platform.               |
-| **PostHog React Native Session Replay**   | ^1.1.1        | Session recording and replay.               | Record and replay user sessions for debugging and analytics.         |
-| **Sentry React Native**                   | ~6.14.0       | Error tracking and monitoring.              | Real-time error tracking and performance monitoring.                 |
-| **React Native Purchases**                | ^8.11.9       | In-app purchase management.                 | Handles subscription and purchase logic with RevenueCat integration. |
-| **React Native Purchases UI**             | ^8.11.9       | Purchase UI components.                     | Pre-built UI components for in-app purchases.                        |
-| **Expo Quick Actions**                    | ^5.0.0        | Home screen quick actions.                  | Provides iOS and Android home screen shortcuts for quick app access. |
-| **@shopify/flash-list**                   | 1.7.6         | High-performance list component.            | Memory-efficient list component for large datasets.                  |
-| **@shopify/react-native-skia**            | v2.0.0-next.4 | 2D graphics and animations.                 | Powerful 2D graphics library for React Native.                       |
-| **React Native Animated Glow**            | ^2.0.0        | Glow animation effects.                     | Add glow effects to components with animations.                      |
-| **React Native Animated Rolling Numbers** | ^2.0.0        | Animated number counters.                   | Smooth animated number transitions and counters.                     |
-| **React Native CSS Interop**              | ^0.1.22       | CSS interoperability.                       | Bridge between CSS and React Native styling.                         |
-| **React Native Keyboard Controller**      | ^1.17.4       | Keyboard interaction control.               | Advanced keyboard handling and animations.                           |
-| **React Native Restart**                  | 0.0.27        | App restart functionality.                  | Programmatically restart the React Native app.                       |
-| **@bacons/apple-targets**                 | ^3.0.2        | Apple-specific build targets.               | Support for Apple-specific build configurations.                     |
-| **@expo-google-fonts/plus-jakarta-sans**  | ^0.4.1        | Google Fonts integration.                   | Easy integration of Google Fonts in Expo apps.                       |
-| **@expo/metro-runtime**                   | ^5.0.4        | Metro bundler runtime.                      | Enhanced Metro bundler integration for Expo.                         |
-| **@expo/vector-icons**                    | ^14.1.0       | Vector icon library.                        | Comprehensive collection of vector icons.                            |
-| **@react-native-community/netinfo**       | 11.4.1        | Network state information.                  | Monitor network connectivity and state.                              |
-| **React Error Boundary**                  | ^4.0.13       | Error boundary component.                   | Graceful error handling and fallback UI.                             |
-| **Tailwind Merge**                        | ^3.3.1        | Tailwind CSS class merging.                 | Intelligently merge Tailwind CSS classes.                            |
-| **Tailwind Variants**                     | ^0.2.1        | Tailwind CSS variant utilities.             | Create variant-based component styles with Tailwind.                 |
-| **D3 Shape**                              | ^3.2.0        | Data visualization shapes.                  | Mathematical functions for data visualization.                       |
-| **Lodash Memoize**                        | ^4.1.2        | Function memoization.                       | Optimize function performance with memoization.                      |
-
----

package/2/vf-agent/data/knowledge_base/starter-docs/tracker-app-reference.md

@@ -1,150 +0,0 @@
-# Tracker App Feature Reference
-
-> Frontend paths reference the Expo workspace (`apps/native/src/...`); backend paths reference `packages/backend/convex/...` when persisting data.
-
-## Overview
-
-The Tracker App is a visually-rich, **frontend-only** demonstration of a calorie and macronutrient tracking application. It serves as an excellent example of how to build a complex, animated, and component-based UI within the VibeFast starter kit. It showcases custom progress indicators, animated numbers, and a well-structured card-based layout.
-
-**Important:** As of now, this feature is a UI demonstration. It is not connected to a backend, and all data displayed on the screen is hardcoded within the components.
-
-### Core Technologies
-
-- **[React Native](https://reactnative.dev):** The core framework for all UI components.
-- **[Reanimated 2](https://docs.swmansion.com/react-native-reanimated/):** Used extensively for the animations, including the `CircularProgress` and `AnimatedNumber` components.
-- **[React Native SVG](https://github.com/react-native-svg/react-native-svg):** Used as the foundation for the `CircularProgress` component.
-- **[Component-Based Architecture](https://react.dev/learn/thinking-in-react):** The screen is composed of many small, reusable components found in `apps/native/src/features/tracker-app/components/`.
-
-## Getting Started
-
-The main screen for this feature is located at `apps/native/src/features/tracker-app/app/index.tsx`. You can navigate to this screen to see the complete UI in action. Since it's a frontend-only demo, no additional setup is required.
-
-## Key Components
-
-This feature is an excellent showcase of how to build custom UI components.
-
-- **`CalorieCard`:** A large card that displays the primary metric (e.g., calories left) and features a prominent `CircularProgress` indicator.
-- **`MacroCard`:** Smaller cards for displaying secondary metrics like protein, carbs, and fat. Each card also contains its own `CircularProgress` indicator.
-- **`CircularProgress`:** A highly reusable component that renders an animated circular progress bar. It is built with SVG and Reanimated and can be customized for size, color, and stroke width.
-- **`AnimatedNumber`:** A component that animates a number rolling up to its final value, providing a dynamic feel to data presentation.
-- **`WeekCalendar`:** A simple component to display a weekly calendar for date selection.
-- **`PromoBanner` & `RecentlyLogged`:** Examples of other card-based UI elements that can be used to build a dashboard.
-
-## How-To Guides
-
-### 1. Customize Component Appearances
-
-All components are styled using Tailwind CSS classes directly in the files. You can easily change colors, sizes, and spacing by editing the class strings.
-
-For example, to change the color of the progress bar in the `CalorieCard`:
-
-**File to Edit:** `apps/native/src/features/tracker-app/components/calorie-card.tsx`
-
-```tsx
-// ...
-<CircularProgress
-  // ...
-  color={theme.colors.accent} // Change from theme.colors.primary
-  // ...
-/>
-// ...
-```
-
-### 2. Connect the Tracker to a Convex Backend
-
-To turn this UI demonstration into a functional application, you need to connect it to a backend to fetch and store user data.
-
-#### Step 1: Define Schema in Convex
-
-Define the necessary tables in `convex/schema.ts` to store daily tracking data.
-
-```ts
-// convex/schema.ts
-export default defineSchema({
-  // ... other tables
-  dailyEntries: defineTable({
-    userId: v.id('users'),
-    date: v.string(), // e.g., "2024-12-25"
-    calories: v.number(),
-    protein: v.number(),
-    carbs: v.number(),
-    fat: v.number(),
-  }).index('by_user_and_date', ['userId', 'date']),
-
-  loggedFoods: defineTable({
-    userId: v.id('users'),
-    entryId: v.id('dailyEntries'),
-    name: v.string(),
-    calories: v.number(),
-  }).index('by_entry', ['entryId']),
-});
-```
-
-#### Step 2: Create Convex Queries and Mutations
-
-Create a new file `convex/tracking.ts` with functions to get and update a user's daily entry.
-
-```ts
-// convex/tracking.ts
-import { query, mutation } from './_generated/server';
-import { v } from 'convex/values';
-
-// Get the entry for a specific day
-export const getDailyEntry = query({
-  args: { date: v.string() },
-  handler: async (ctx, args) => {
-    const userId = (await ctx.auth.getUserIdentity())?.subject;
-    if (!userId) return null;
-
-    return await ctx.db
-      .query('dailyEntries')
-      .withIndex('by_user_and_date', (q) =>
-        q.eq('userId', userId).eq('date', args.date),
-      )
-      .first();
-  },
-});
-
-// Add a new food item
-export const logFood = mutation({
-  // ... implementation to add a food and update the daily entry ...
-});
-```
-
-#### Step 3: Use the Query in the Frontend
-
-Modify the main screen component to fetch data from Convex instead of using hardcoded values.
-
-**File to Edit:** `apps/native/src/features/tracker-app/app/index.tsx`
-
-```tsx
-import { useQuery } from 'convex/react';
-import { api } from 'convex/_generated/api';
-import { FullScreenLoader } from '@/components/ui';
-
-export default function HomeScreen() {
-  const theme = useThemeConfig();
-  const today = new Date().toISOString().split('T')[0]; // Get date as "YYYY-MM-DD"
-
-  const dailyData = useQuery(api.tracking.getDailyEntry, { date: today });
-
-  // You would show a loader while dailyData is undefined
-  if (dailyData === undefined) {
-    return <FullScreenLoader />;
-  }
-
-  // You might have a default state if dailyData is null (no entry for today)
-  const calories = dailyData?.calories ?? 2000;
-  const progress = dailyData ? (dailyData.calories / 2000) * 100 : 0;
-
-  return (
-    <SafeAreaView /* ... */>
-      <ScrollView /* ... */>
-        {/* ... */}
-        <CalorieCard calories={calories} progress={progress} />
-        {/* ... other components using data from dailyData ... */}
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-```