Upload files to "app_idea"

app_idea/backend-documentation.md

@@ -0,0 +1,166 @@
+# Backend Documentation
+
+## Backend Framework and Language
+
+**Framework**: Node.js with Express.js
+**Language**: JavaScript/TypeScript
+**Architecture**: RESTful API with layered architecture
+
+Node.js with Express.js is chosen for:
+- Excellent performance for real-time applications
+- Rich ecosystem of packages for financial data processing
+- Good compatibility with React frontend
+- Efficient handling of asynchronous operations (important for LLM API calls)
+- Seamless integration with Supabase
+
+## API Design
+
+### API Structure
+
+The API follows RESTful principles with the following main resources:
+
+1. **Auth**
+   - `/api/auth/login` - Social login with Google
+   - `/api/auth/logout` - User logout
+   - `/api/auth/refresh` - Token refresh
+
+2. **Users**
+   - `/api/users/profile` - User profile management
+   - `/api/users/api-keys` - Secure API key management
+   - `/api/users/credits` - Credit management
+
+3. **Indicators**
+   - `/api/indicators` - CRUD operations for indicators
+   - `/api/indicators/categories` - Get indicators by category
+   - `/api/indicators/trending` - Get trending indicators
+
+4. **Strategies**
+   - `/api/strategies` - CRUD operations for strategies
+   - `/api/strategies/generate` - AI strategy generation
+   - `/api/strategies/export` - Generate PineScript code
+   - `/api/strategies/versions` - Strategy version management
+
+5. **Community**
+   - `/api/community/strategies` - Shared strategies
+   - `/api/community/users` - User profiles
+
+### API Versioning
+
+The API will be versioned using URL path versioning:
+- `/api/v1/...` - Initial version
+
+### Authentication and Authorization
+
+1. **Authentication**
+   - JWT (JSON Web Tokens) for session management
+   - Google OAuth for social login
+   - Refresh token rotation for security
+
+2. **Authorization**
+   - Role-based access control (Free user vs. Paid user)
+   - Resource-based permissions
+
+## LLM Integration
+
+### Supported Providers
+- OpenAI
+- Anthropic
+- OpenRouter.ai
+
+### Integration Architecture
+
+1. **Provider Adapter Pattern**
+   - Abstract interface for LLM providers
+   - Concrete implementations for each provider
+   - Fallback mechanism if primary provider fails
+
+2. **Prompt Engineering**
+   - Structured prompts for strategy generation
+   - Context management for complex strategies
+   - Response validation and error handling
+
+3. **Security Considerations**
+   - Encrypted storage of API keys
+   - No persistence of full strategy responses
+   - Rate limiting to prevent abuse
+
+## Error Handling
+
+1. **Standardized Error Responses**
+   ```json
+   {
+     "status": "error",
+     "code": "ERROR_CODE",
+     "message": "User-friendly error message",
+     "details": { /* Additional error details */ }
+   }
+   ```
+
+2. **Error Categories**
+   - Authentication errors (401)
+   - Authorization errors (403)
+   - Resource not found (404)
+   - Validation errors (422)
+   - Server errors (500)
+   - LLM provider errors (502)
+
+3. **Graceful Degradation**
+   - Fallback options when services are unavailable
+   - Detailed user instructions for recovery
+
+## Third-Party Integrations
+
+1. **Payment Processing**
+   - Stripe integration for subscription management
+   - PayPal as alternative payment method
+   - Coupon code functionality
+
+2. **Email Service**
+   - Transactional emails for account verification
+   - Subscription notifications
+   - Strategy export delivery
+
+## Caching Strategy
+
+1. **Redis Cache**
+   - Cache common indicator configurations
+   - Store frequently accessed strategy templates
+   - Temporary storage for generated strategies
+
+2. **Cache Invalidation**
+   - Time-based expiration for market data
+   - Event-based invalidation for user-specific data
+
+## Security Measures
+
+1. **Data Protection**
+   - Encryption of sensitive data at rest
+   - Secure transmission with TLS
+   - API key encryption with AES-256
+
+2. **API Security**
+   - Rate limiting to prevent abuse
+   - CORS configuration for frontend access
+   - Input validation and sanitization
+   - Protection against common attacks (XSS, CSRF, injection)
+
+3. **Monitoring and Logging**
+   - Structured logging for operations
+   - Error tracking and alerting
+   - Audit trail for sensitive operations
+
+## Performance Optimization
+
+1. **Query Optimization**
+   - Efficient database queries
+   - Pagination for large result sets
+   - Eager loading of related data
+
+2. **Asynchronous Processing**
+   - Background jobs for resource-intensive tasks
+   - Queuing system for LLM requests
+
+3. **Scaling Considerations**
+   - Horizontal scaling readiness
+   - Stateless API design
+   - Connection pooling for database access

app_idea/database-schema.md

@@ -0,0 +1,263 @@
+# Database Schema
+
+## Overview
+
+The application uses **Supabase** as the database provider, which is built on PostgreSQL. This provides:
+- Relational database capabilities
+- Built-in authentication
+- Row-level security
+- Real-time capabilities
+- Storage options for larger objects
+
+## Tables and Relationships
+
+### Users
+Stores user account information and preferences.
+
+```sql
+CREATE TABLE users (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  email TEXT UNIQUE NOT NULL,
+  full_name TEXT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  credits INTEGER DEFAULT 5,
+  is_premium BOOLEAN DEFAULT FALSE,
+  preferences JSONB DEFAULT '{}'::JSONB,
+  last_login TIMESTAMP WITH TIME ZONE
+);
+```
+
+### ApiKeys
+Stores encrypted API keys for LLM services.
+
+```sql
+CREATE TABLE api_keys (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
+  provider TEXT NOT NULL,
+  key_encrypted TEXT NOT NULL,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  last_used TIMESTAMP WITH TIME ZONE,
+  UNIQUE(user_id, provider)
+);
+```
+
+### Indicators
+Stores the library of available technical indicators.
+
+```sql
+CREATE TABLE indicators (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  name TEXT NOT NULL,
+  description TEXT,
+  category TEXT NOT NULL,
+  type TEXT NOT NULL, -- trend, entry, exit, stop_loss
+  parameters JSONB NOT NULL DEFAULT '{}'::JSONB,
+  defaults JSONB NOT NULL DEFAULT '{}'::JSONB,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  created_by UUID REFERENCES users(id),
+  is_custom BOOLEAN DEFAULT FALSE,
+  is_public BOOLEAN DEFAULT TRUE,
+  accuracy_rating DECIMAL(3,2)
+);
+```
+
+### CustomIndicators
+Stores user-created custom indicators (premium feature).
+
+```sql
+CREATE TABLE custom_indicators (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
+  name TEXT NOT NULL,
+  description TEXT,
+  category TEXT NOT NULL,
+  type TEXT NOT NULL, -- trend, entry, exit, stop_loss
+  parameters JSONB NOT NULL DEFAULT '{}'::JSONB,
+  pine_script TEXT NOT NULL,
+  is_public BOOLEAN DEFAULT FALSE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+```
+
+### Strategies
+Stores created trading strategies.
+
+```sql
+CREATE TABLE strategies (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
+  name TEXT NOT NULL,
+  description TEXT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  is_ai_generated BOOLEAN DEFAULT FALSE,
+  is_public BOOLEAN DEFAULT FALSE,
+  market_type TEXT, -- futures, stocks, crypto, forex
+  timeframe TEXT, -- 1m, 5m, 15m, 1h, 4h, 1d
+  config JSONB NOT NULL
+);
+```
+
+### StrategyVersions
+Stores versions of strategies for version control.
+
+```sql
+CREATE TABLE strategy_versions (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  strategy_id UUID REFERENCES strategies(id) ON DELETE CASCADE,
+  version_number INTEGER NOT NULL,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  config JSONB NOT NULL,
+  notes TEXT,
+  UNIQUE(strategy_id, version_number)
+);
+```
+
+### StrategyComponents
+Links strategies to their component indicators with configuration.
+
+```sql
+CREATE TABLE strategy_components (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  strategy_id UUID REFERENCES strategies(id) ON DELETE CASCADE,
+  indicator_id UUID, -- Can reference either indicators or custom_indicators
+  is_custom BOOLEAN DEFAULT FALSE,
+  component_type TEXT NOT NULL, -- trend, entry, exit, stop_loss
+  parameters JSONB NOT NULL DEFAULT '{}'::JSONB,
+  position INTEGER NOT NULL, -- Order within the component type
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+```
+
+### Subscriptions
+Stores user subscription information.
+
+```sql
+CREATE TABLE subscriptions (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
+  status TEXT NOT NULL,
+  provider TEXT NOT NULL, -- stripe, paypal
+  provider_subscription_id TEXT,
+  plan_type TEXT NOT NULL,
+  current_period_start TIMESTAMP WITH TIME ZONE,
+  current_period_end TIMESTAMP WITH TIME ZONE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+```
+
+### Coupons
+Stores discount coupon codes.
+
+```sql
+CREATE TABLE coupons (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  code TEXT UNIQUE NOT NULL,
+  discount_percent INTEGER NOT NULL,
+  description TEXT,
+  is_active BOOLEAN DEFAULT TRUE,
+  max_uses INTEGER,
+  current_uses INTEGER DEFAULT 0,
+  expiration_date TIMESTAMP WITH TIME ZONE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+```
+
+### UserCoupons
+Tracks coupon usage by users.
+
+```sql
+CREATE TABLE user_coupons (
+  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
+  coupon_id UUID REFERENCES coupons(id) ON DELETE CASCADE,
+  used_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  UNIQUE(user_id, coupon_id)
+);
+```
+
+## Indexes
+
+```sql
+-- For faster user lookups by email
+CREATE INDEX idx_users_email ON users(email);
+
+-- For filtering indicators by type and category
+CREATE INDEX idx_indicators_type_category ON indicators(type, category);
+
+-- For retrieving user strategies
+CREATE INDEX idx_strategies_user_id ON strategies(user_id);
+
+-- For retrieving strategy versions
+CREATE INDEX idx_strategy_versions_strategy_id ON strategy_versions(strategy_id);
+
+-- For retrieving strategy components
+CREATE INDEX idx_strategy_components_strategy_id ON strategy_components(strategy_id);
+
+-- For coupon code lookups
+CREATE INDEX idx_coupons_code ON coupons(code);
+```
+
+## Row Level Security (RLS)
+
+Supabase provides row-level security to ensure users can only access their own data:
+
+```sql
+-- Users table
+ALTER TABLE users ENABLE ROW LEVEL SECURITY;
+CREATE POLICY user_self_access ON users 
+  FOR ALL USING (auth.uid() = id);
+
+-- API Keys table
+ALTER TABLE api_keys ENABLE ROW LEVEL SECURITY;
+CREATE POLICY api_keys_self_access ON api_keys 
+  FOR ALL USING (auth.uid() = user_id);
+
+-- Strategies table
+ALTER TABLE strategies ENABLE ROW LEVEL SECURITY;
+CREATE POLICY strategies_self_access ON strategies 
+  FOR ALL USING (auth.uid() = user_id OR is_public = TRUE);
+
+-- Custom indicators table
+ALTER TABLE custom_indicators ENABLE ROW LEVEL SECURITY;
+CREATE POLICY custom_indicators_self_access ON custom_indicators 
+  FOR ALL USING (auth.uid() = user_id OR is_public = TRUE);
+```
+
+## Data Encryption
+
+Sensitive data like API keys will be encrypted using Supabase's pgcrypto extension:
+
+```sql
+-- Setup pgcrypto extension if not already enabled
+CREATE EXTENSION IF NOT EXISTS pgcrypto;
+
+-- Function to encrypt API keys
+CREATE OR REPLACE FUNCTION encrypt_api_key(key_text TEXT, secret TEXT)
+RETURNS TEXT AS $$
+BEGIN
+  RETURN encode(encrypt(key_text::bytea, secret::bytea, 'aes-cbc/pad:pkcs')::bytea, 'base64');
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- Function to decrypt API keys
+CREATE OR REPLACE FUNCTION decrypt_api_key(encrypted_key TEXT, secret TEXT)
+RETURNS TEXT AS $$
+BEGIN
+  RETURN convert_from(decrypt(decode(encrypted_key, 'base64')::bytea, secret::bytea, 'aes-cbc/pad:pkcs')::bytea, 'UTF8');
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+```
+
+## Migrations
+
+Migrations will be managed using Supabase migrations, which provide:
+- Version control for database schema
+- Rollback capability
+- Environment-specific configurations

app_idea/frontend-documentation.md

@@ -0,0 +1,148 @@
+# Frontend Documentation
+
+## UI Framework and Library
+
+**Framework**: React
+**Styling**: Tailwind CSS
+**Additional UI Libraries**: Headless UI (for accessible components)
+
+## Design Philosophy
+
+The application follows a minimalistic, modern design inspired by Apple's design language with:
+- Clean, uncluttered interfaces
+- Ample white space
+- Subtle animations and transitions
+- Focus on content and functionality
+- Support for both light and dark mode
+
+## Navigation Structure
+
+The application uses a sidebar navigation layout with the following primary sections:
+
+1. **Dashboard** - Overview of user activity and saved strategies
+2. **Strategy Builder** - Main interface for creating strategies
+3. **My Strategies** - Library of saved and generated strategies
+4. **Community** - Social features and shared strategies
+5. **Settings** - Account management and preferences
+
+Mobile view will use a collapsible hamburger menu to ensure responsiveness.
+
+## State Management
+
+**Solution**: Zustand
+
+Zustand is selected for state management due to its:
+- Simplified API compared to Redux
+- Strong performance for complex state
+- Minimal boilerplate code
+- Good compatibility with React's concurrent features
+- Ability to handle complex nested state required for strategy configurations
+
+## Component Structure
+
+### Core Components
+
+1. **StrategyBuilder**
+   - Main component for strategy creation
+   - Contains sub-sections for each framework part
+   - Houses the visual indicator selection interface
+
+2. **IndicatorSelector**
+   - Allows selection from pre-built indicators
+   - Provides customization controls for indicator parameters
+   - Displays visual representation of indicator behavior
+
+3. **StrategyViewer**
+   - Displays the complete strategy with all selected components
+   - Provides export options
+   - Shows educational content about strategy components
+
+4. **CodeExporter**
+   - Generates PineScript code
+   - Toggles between minimal and commented code
+   - Provides copy functionality
+
+5. **AIStrategyGenerator**
+   - Interface for API key management
+   - Controls for AI-based strategy generation
+   - Displays generated strategies with explanations
+
+6. **StrategyVersionControl**
+   - Manages different versions of strategies
+   - Provides comparison tools
+   - Allows reverting to previous versions
+
+### Shared Components
+
+1. **Header**
+   - App logo and navigation
+   - User profile and account menu
+   - Theme toggle (light/dark mode)
+
+2. **Sidebar**
+   - Main navigation menu
+   - Collapsible on mobile devices
+
+3. **Modal**
+   - Reusable modal component for alerts, confirmations, etc.
+
+4. **Toast**
+   - Notification system for success/error messages
+
+5. **Button**
+   - Consistent button styles across the application
+   - Various states (primary, secondary, disabled)
+
+6. **Card**
+   - Container for strategy items and content blocks
+
+## Forms and Inputs
+
+1. **API Key Management Form**
+   - Secure input for LLM API keys
+   - Validation for proper key format
+   - Test connection functionality
+
+2. **Strategy Parameters Form**
+   - Number inputs with min/max validation
+   - Toggle switches for boolean options
+   - Dropdown selects for pre-defined options
+
+3. **Filter and Search Forms**
+   - Used in strategy library and community sections
+   - Quick filtering by strategy type, performance, etc.
+
+## Responsive Design
+
+The application will follow a mobile-first approach with specific breakpoints for:
+- Mobile (< 640px)
+- Tablet (640px - 1024px)
+- Desktop (> 1024px)
+
+Tailwind's responsive classes will be utilized for consistent responsive behavior.
+
+## Theme Management
+
+The application will support both light and dark modes:
+- System preference detection by default
+- User toggle option
+- Persistent preference storage
+- Smooth transition between themes
+
+## Performance Considerations
+
+1. **Code Splitting**
+   - Route-based code splitting
+   - Dynamic imports for heavy components
+
+2. **Lazy Loading**
+   - Defer loading of non-critical components
+   - Implement for community features and advanced settings
+
+3. **Memoization**
+   - Use React.memo for complex component renders
+   - Implement useMemo for expensive calculations
+
+4. **Asset Optimization**
+   - Optimize images and icons
+   - Use SVGs where possible for crisp rendering at all sizes

app_idea/state-management.md

@@ -0,0 +1,48 @@
+# State Management Documentation
+
+## State Management Solution
+
+The application uses **Zustand** as the primary state management solution for the following reasons:
+
+- Simplified API with minimal boilerplate
+- Strong performance characteristics for complex state
+- Good compatibility with React's concurrent features
+- Excellent TypeScript support
+- Middleware support for additional functionality
+
+## State Structure
+
+The state is divided into several specialized stores for different concerns:
+
+### 1. User Store
+
+Manages authentication state and user profile information.
+
+```javascript
+// userStore.js
+import create from 'zustand';
+import { persist } from 'zustand/middleware';
+
+const useUserStore = create(
+  persist(
+    (set, get) => ({
+      user: null,
+      isAuthenticated: false,
+      credits: 0,
+      isPremium: false,
+      
+      // Actions
+      setUser: (userData) => set({
+        user: userData,
+        isAuthenticated: true,
+        credits: userData.credits,
+        isPremium: userData.isPremium
+      }),
+      
+      logout: () => set({
+        user: null,
+        isAuthenticated: false,
+        credits: 0,
+        isPremium: false
+      }),
+      

app_idea/user-flow.md

@@ -0,0 +1,303 @@
+# User Flow Documentation
+
+## Onboarding Flow
+
+```mermaid
+stateDiagram-v2
+    [*] --> LandingPage: User visits site
+    
+    LandingPage --> Registration: Click "Sign Up"
+    Registration --> GoogleAuth: Click "Sign in with Google"
+    
+    GoogleAuth --> WelcomePage: Successfully authenticated
+    GoogleAuth --> Registration: Authentication failed
+    
+    WelcomePage --> SetupOptions: Choose setup path
+    
+    SetupOptions --> GuidedTour: Choose "Show me around"
+    SetupOptions --> APIKeySetup: Choose "Set up API keys"
+    SetupOptions --> SkipSetup: Choose "Skip for now"
+    
+    GuidedTour --> APIKeySetup: Tour complete
+    APIKeySetup --> Dashboard: API keys set
+    SkipSetup --> Dashboard: Skip setup
+    
+    Dashboard --> [*]
+```
+
+### Steps Breakdown:
+
+1. **Landing Page**
+   - Introduction to TradingScriptPro
+   - Value proposition
+   - Call-to-action for sign-up
+   - Login option for existing users
+
+2. **Registration**
+   - Google social login option
+   - Terms of service acceptance
+   - Privacy policy acknowledgment
+
+3. **Google Authentication**
+   - Secure OAuth flow
+   - Email permission request
+
+4. **Welcome Page**
+   - Welcome message for new users
+   - Brief explanation of the 5 free credits
+   - Setup options presentation
+
+5. **API Key Setup (Optional)**
+   - Educational content about LLM API keys
+   - Secure input fields for API keys
+   - Validation and test connection
+
+6. **Guided Tour (Optional)**
+   - Interactive walkthrough of key features
+   - Example strategy creation
+   - Quick tips for best results
+
+## Core User Journey: Strategy Creation
+
+```mermaid
+stateDiagram-v2
+    [*] --> Dashboard: User logged in
+    
+    Dashboard --> StrategyBuilder: Click "Create New Strategy"
+    Dashboard --> AIGenerator: Click "AI Generate Strategy"
+    
+    StrategyBuilder --> TrendSetup: Step 1
+    TrendSetup --> EntrySetup: Continue
+    EntrySetup --> ExitSetup: Continue
+    ExitSetup --> StopLossSetup: Continue
+    
+    StopLossSetup --> StrategyReview: All components configured
+    
+    AIGenerator --> AIPromptInput: Describe strategy goals
+    AIPromptInput --> AIProcessing: Submit request
+    AIProcessing --> AIResults: Strategy generated
+    AIProcessing --> AIError: Generation failed
+    
+    AIError --> AIPromptInput: Retry with modifications
+    AIResults --> StrategyReview: Review generated strategy
+    
+    StrategyReview --> StrategyTesting: Preview strategy
+    StrategyReview --> StrategyModification: Edit components
+    
+    StrategyModification --> StrategyReview: Changes complete
+    
+    StrategyTesting --> StrategySaving: Save strategy
+    StrategySaving --> ExportOptions: Strategy saved
+    
+    ExportOptions --> PineScriptMinimal: Export minimal code
+    ExportOptions --> PineScriptDetailed: Export detailed code
+    ExportOptions --> ShareCommunity: Share with community
+    
+    PineScriptMinimal --> Dashboard: Return to dashboard
+    PineScriptDetailed --> Dashboard: Return to dashboard
+    ShareCommunity --> Dashboard: Return to dashboard
+```
+
+### Steps Breakdown:
+
+1. **Strategy Builder Entry**
+   - Two paths: Manual builder or AI generator
+   - Clear explanation of each approach
+   - Credit usage information for AI generation
+
+2. **Manual Strategy Building**
+   - **Trend Setup**:
+     - Select from trend indicators
+     - Configure parameters
+     - Visual feedback on selection
+   
+   - **Entry Setup**:
+     - Select from entry indicators
+     - Configure parameters
+     - Rules for entry conditions
+   
+   - **Exit Setup**:
+     - Select from exit indicators
+     - Configure parameters
+     - Rules for exit conditions
+   
+   - **Stop Loss Setup**:
+     - Configure stop loss approach
+     - Set parameters (fixed, trailing, indicator-based)
+     - Risk management options
+
+3. **AI Strategy Generation**
+   - **Prompt Input**:
+     - Market selection
+     - Trading style preferences
+     - Goals and risk tolerance
+   
+   - **Processing**:
+     - Loading indicator
+     - Status updates
+     - Credit usage notification
+   
+   - **Results**:
+     - Complete strategy presentation
+     - Educational explanation of components
+     - Options to modify or accept
+
+4. **Strategy Review**
+   - Complete strategy overview
+   - Component interaction explanation
+   - Performance expectations
+   - Modification options
+
+5. **Export Options**
+   - PineScript code generation:
+     - Minimal code option
+     - Detailed commented code option
+   - Copy to clipboard functionality
+   - Community sharing option
+   - Version saving
+
+## Account Management Flow
+
+```mermaid
+stateDiagram-v2
+    [*] --> Dashboard
+    
+    Dashboard --> AccountSettings: Click user avatar
+    
+    AccountSettings --> SubscriptionManagement: "Subscription" tab
+    AccountSettings --> APIKeyManagement: "API Keys" tab
+    AccountSettings --> ProfileSettings: "Profile" tab
+    
+    SubscriptionManagement --> ViewCurrentPlan: View subscription details
+    SubscriptionManagement --> UpgradePlan: Upgrade to premium
+    SubscriptionManagement --> EnterCoupon: Apply coupon code
+    
+    UpgradePlan --> PaymentSelection: Choose payment method
+    PaymentSelection --> StripeCheckout: Stripe selected
+    PaymentSelection --> PayPalCheckout: PayPal selected
+    
+    StripeCheckout --> SubscriptionConfirmation: Payment successful
+    PayPalCheckout --> SubscriptionConfirmation: Payment successful
+    
+    SubscriptionConfirmation --> Dashboard: Return to dashboard
+    
+    APIKeyManagement --> AddNewKey: Add new provider key
+    APIKeyManagement --> RemoveKey: Remove existing key
+    APIKeyManagement --> UpdateKey: Update existing key
+    
+    AddNewKey --> APIKeyValidation: Test connection
+    UpdateKey --> APIKeyValidation: Test connection
+    
+    APIKeyValidation --> APIKeySuccess: Validation passed
+    APIKeyValidation --> APIKeyError: Validation failed
+    
+    APIKeySuccess --> APIKeyManagement: Return to key management
+    APIKeyError --> AddNewKey: Try again
+    
+    RemoveKey --> APIKeyManagement: Key removed
+    
+    ProfileSettings --> UpdateProfile: Edit profile information
+    UpdateProfile --> ProfileSettings: Save changes
+```
+
+### Steps Breakdown:
+
+1. **Account Settings Entry**
+   - User avatar menu in header
+   - Settings categories
+   - Account status overview
+
+2. **Subscription Management**
+   - Current plan display
+   - Usage statistics (credits remaining)
+   - Upgrade options with benefits
+   - Coupon code redemption
+
+3. **Payment Process**
+   - Payment method selection
+   - Secure checkout integration
+   - Order summary
+   - Confirmation and receipt
+
+4. **API Key Management**
+   - Current keys display (partially masked)
+   - Add/update/remove functionality
+   - Connection testing
+   - Security information
+
+5. **Profile Settings**
+   - Basic profile information
+   - Email preferences
+   - Account deletion option
+
+## Error Handling Flows
+
+```mermaid
+stateDiagram-v2
+    [*] --> UserAction: User performs action
+    
+    UserAction --> Success: Action completes successfully
+    UserAction --> Error: Action fails
+    
+    Error --> ValidationError: Input validation fails
+    Error --> APIError: API call fails
+    Error --> CreditsExhausted: User out of credits
+    Error --> AuthError: Authentication issue
+    
+    ValidationError --> InlineErrorDisplay: Show error next to input
+    ValidationError --> UserAction: User corrects input
+    
+    APIError --> ConnectionErrorModal: Show API connection error
+    APIError --> APITroubleshooting: Show troubleshooting steps
+    
+    CreditsExhausted --> UpgradePrompt: Show upgrade offer
+    CreditsExhausted --> CouponPrompt: Offer coupon option
+    
+    AuthError --> ReauthPrompt: Prompt for reauthentication
+    
+    InlineErrorDisplay --> UserAction: User corrects error
+    ConnectionErrorModal --> APIKeyManagement: Go to API key settings
+    APITroubleshooting --> UserAction: User retries after troubleshooting
+    UpgradePrompt --> SubscriptionManagement: User opts to upgrade
+    CouponPrompt --> EnterCoupon: User enters coupon
+    ReauthPrompt --> GoogleAuth: User reauthenticates
+```
+
+### Error Scenarios and Recovery:
+
+1. **Validation Errors**
+   - Field-specific error messages
+   - Immediate feedback on input
+   - Clear recovery instructions
+
+2. **API Connection Errors**
+   - Clear explanation of the issue
+   - Troubleshooting steps:
+     - Check API key validity
+     - Verify internet connection
+     - Check LLM provider service status
+   - Retry options with backoff
+
+3. **Credits Exhausted**
+   - Friendly notification
+   - Options to:
+     - Upgrade to premium
+     - Enter coupon code
+     - Review existing strategies
+
+4. **Authentication Errors**
+   - Session expiration handling
+   - Secure re-authentication
+   - Session persistence options
+
+## Alternative Flows
+
+1. **Guest Mode (Limited Features)**
+   - Strategy browsing only
+   - Community section access
+   - Call-to-action for registration
+
+2. **Free vs. Premium User Paths**
+   - Clear indicators of premium features
+   - Upgrade prompts at strategic points
+   - Value demonstration before paywall