From f94646d1fc8e867b599ce354bd7e68706cc458c4 Mon Sep 17 00:00:00 2001 From: pki Date: Tue, 11 Mar 2025 14:46:30 -0700 Subject: [PATCH] Upload files to "app_idea" --- app_idea/backend-documentation.md | 166 ++++++++++++++++ app_idea/database-schema.md | 263 +++++++++++++++++++++++++ app_idea/frontend-documentation.md | 148 ++++++++++++++ app_idea/state-management.md | 48 +++++ app_idea/user-flow.md | 303 +++++++++++++++++++++++++++++ 5 files changed, 928 insertions(+) create mode 100644 app_idea/backend-documentation.md create mode 100644 app_idea/database-schema.md create mode 100644 app_idea/frontend-documentation.md create mode 100644 app_idea/state-management.md create mode 100644 app_idea/user-flow.md diff --git a/app_idea/backend-documentation.md b/app_idea/backend-documentation.md new file mode 100644 index 0000000..aa5961b --- /dev/null +++ b/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 diff --git a/app_idea/database-schema.md b/app_idea/database-schema.md new file mode 100644 index 0000000..730529e --- /dev/null +++ b/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 diff --git a/app_idea/frontend-documentation.md b/app_idea/frontend-documentation.md new file mode 100644 index 0000000..77034e8 --- /dev/null +++ b/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 diff --git a/app_idea/state-management.md b/app_idea/state-management.md new file mode 100644 index 0000000..5bd5515 --- /dev/null +++ b/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 + }), + \ No newline at end of file diff --git a/app_idea/user-flow.md b/app_idea/user-flow.md new file mode 100644 index 0000000..6b68676 --- /dev/null +++ b/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