- Remove 'AI Trading Dashboard' title and description text - Remove grid of quick action cards (AI Analysis, Trading, etc.) - Keep only StatusOverview component for cleaner interface - Update .github/copilot-instructions.md with comprehensive AI agent guidance
4.0 KiB
4.0 KiB
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
// 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.tsmanages 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
'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 interfacecomponents/Dashboard.tsx- Main trading dashboard with real Drift positionscomponents/AdvancedTradingPanel.tsx- Drift Protocol trading interface- Layout:
app/layout.jswith gradient styling and navigation
Environment Variables
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
# 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.