Clean up homepage: remove hero section and quick action icons
- 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
This commit is contained in:
103
.github/copilot-instructions.md
vendored
103
.github/copilot-instructions.md
vendored
@@ -1,3 +1,104 @@
|
|||||||
<!-- Use this file to provide workspace-specific custom instructions to Copilot. For more details, visit https://code.visualstudio.com/docs/copilot/copilot-customization#_use-a-githubcopilotinstructionsmd-file -->
|
<!-- Use this file to provide workspace-specific custom instructions to Copilot. For more details, visit https://code.visualstudio.com/docs/copilot/copilot-customization#_use-a-githubcopilotinstructionsmd-file -->
|
||||||
|
|
||||||
This project is a Next.js 15 App Router application with TypeScript, Tailwind CSS, Prisma, and API routes. It is a trading bot dashboard with AI-powered analysis, auto-trading, trade execution, screenshot capture, and developer settings. Please generate code that is idiomatic for this stack and follows best practices for modern Next.js apps.
|
# 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.
|
||||||
|
|||||||
59
app/page.js
59
app/page.js
@@ -4,66 +4,9 @@ import StatusOverview from '../components/StatusOverview.js'
|
|||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-8">
|
<div>
|
||||||
{/* Hero Section */}
|
|
||||||
<div className="text-center py-8">
|
|
||||||
<h1 className="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-blue-600 bg-clip-text text-transparent mb-4">
|
|
||||||
AI Trading Dashboard
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
|
||||||
Advanced cryptocurrency trading with AI-powered analysis, automated execution, and real-time monitoring.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Status Overview */}
|
{/* Status Overview */}
|
||||||
<StatusOverview />
|
<StatusOverview />
|
||||||
|
|
||||||
{/* Quick Actions */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div className="card card-gradient text-center">
|
|
||||||
<div className="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<span className="text-blue-400 text-2xl">📊</span>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-white mb-2">AI Analysis</h3>
|
|
||||||
<p className="text-gray-400 text-sm mb-4">Get market insights and TradingView analysis</p>
|
|
||||||
<a href="/analysis" className="inline-flex items-center px-4 py-2 bg-blue-600/20 text-blue-400 rounded-lg hover:bg-blue-600/30 transition-colors text-sm">
|
|
||||||
View Analysis
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card card-gradient text-center">
|
|
||||||
<div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<span className="text-green-400 text-2xl">💰</span>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-white mb-2">Manual Trading</h3>
|
|
||||||
<p className="text-gray-400 text-sm mb-4">Execute trades and view history</p>
|
|
||||||
<a href="/trading" className="inline-flex items-center px-4 py-2 bg-green-600/20 text-green-400 rounded-lg hover:bg-green-600/30 transition-colors text-sm">
|
|
||||||
Trade Now
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card card-gradient text-center">
|
|
||||||
<div className="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<span className="text-purple-400 text-2xl">🤖</span>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-white mb-2">Auto Trading</h3>
|
|
||||||
<p className="text-gray-400 text-sm mb-4">Configure automation</p>
|
|
||||||
<a href="/automation" className="inline-flex items-center px-4 py-2 bg-purple-600/20 text-purple-400 rounded-lg hover:bg-purple-600/30 transition-colors text-sm">
|
|
||||||
Setup Bot
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card card-gradient text-center">
|
|
||||||
<div className="w-16 h-16 bg-orange-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<span className="text-orange-400 text-2xl">⚙️</span>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-white mb-2">Settings</h3>
|
|
||||||
<p className="text-gray-400 text-sm mb-4">Developer configuration</p>
|
|
||||||
<a href="/settings" className="inline-flex items-center px-4 py-2 bg-orange-600/20 text-orange-400 rounded-lg hover:bg-orange-600/30 transition-colors text-sm">
|
|
||||||
Configure
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user