# AI-Powered Trading Bot Dashboard This is a Next.js 15 App Router application with TypeScript, Tailwind CSS, and API routes. It's a production-ready trading bot with AI analysis, automated screenshot capture, and real-time trading execution via Drift Protocol and Jupiter DEX. ## Core Architecture ### Dual-Session Screenshot Automation - **AI Layout**: `Z1TzpUrf` - RSI (top), EMAs, MACD (bottom) - **DIY Layout**: `vWVvjLhP` - Stochastic RSI (top), VWAP, OBV (bottom) - Parallel browser sessions for multi-layout capture in `lib/enhanced-screenshot.ts` - TradingView automation with session persistence in `lib/tradingview-automation.ts` ### AI Analysis Pipeline - OpenAI GPT-4o mini for cost-effective chart analysis (~$0.006 per analysis) - Multi-layout comparison and consensus detection - Professional trading setups with exact entry/exit levels and risk management - Layout-specific indicator analysis (RSI vs Stochastic RSI, MACD vs OBV) ### Trading Integration - **Drift Protocol**: Perpetual futures trading via `@drift-labs/sdk` - **Jupiter DEX**: Spot trading on Solana - Position management and P&L tracking - Real-time account balance and collateral monitoring ## Critical Development Patterns ### Docker Environment Use Docker for consistency: `npm run docker:dev` (port 9001) or `npm run docker:up` (port 9000) - Multi-stage builds with browser automation optimizations - Session persistence via volume mounts - Chromium path: `/usr/bin/chromium` ### API Route Structure ```typescript // Enhanced screenshot with progress tracking POST /api/enhanced-screenshot { symbol: "SOLUSD", timeframe: "240", layouts: ["ai", "diy"], analyze: true } // Returns: { screenshots, analysis, sessionId } ``` ### Progress Tracking System - `lib/progress-tracker.ts` manages real-time analysis progress - SessionId-based tracking for multi-step operations - Steps: init → auth → navigation → loading → capture → analysis ### Timeframe Mapping Critical: Always use minute values first to avoid TradingView confusion ```typescript '4h': ['240', '240m', '4h', '4H'] // 240 minutes FIRST, not "4h" '1h': ['60', '60m', '1h', '1H'] // 60 minutes FIRST ``` ### Component Architecture - `components/AIAnalysisPanel.tsx` - Multi-timeframe analysis interface - `components/Dashboard.tsx` - Main trading dashboard with real Drift positions - `components/AdvancedTradingPanel.tsx` - Drift Protocol trading interface - Layout: `app/layout.js` with gradient styling and navigation ## Environment Variables ```bash OPENAI_API_KEY= # Required for AI analysis TRADINGVIEW_EMAIL= # Required for automation TRADINGVIEW_PASSWORD= # Required for automation SOLANA_RPC_URL= # Drift trading DRIFT_PRIVATE_KEY= # Drift trading (base58 encoded) ``` ## Build & Development Commands ```bash # Development (recommended) npm run docker:dev # Port 9001, hot reload npm run docker:logs # View container logs npm run docker:exec # Shell access # Production deployment npm run docker:prod:up # Port 9000, optimized build # Testing automation node test-enhanced-screenshot.js # Test dual-session capture ./test-docker-comprehensive.sh # Full system test ``` ## Code Style Guidelines - Use `"use client"` for client components with state/effects - Tailwind with gradient backgrounds and glassmorphism effects - TypeScript interfaces for all trading parameters and API responses - Error handling with detailed logging for browser automation - Session persistence to avoid TradingView captchas ## Key Integration Points - Session data: `.tradingview-session/` (volume mounted) - Screenshots: `screenshots/` directory - Progress tracking: EventEmitter-based real-time updates - Database: Prisma with SQLite (file:./prisma/dev.db) Generate code that follows these patterns and integrates seamlessly with the existing trading infrastructure.