Upload 31 files

.gitignore

@@ -0,0 +1,62 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+.venv/
+venv/
+ENV/
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+.env-cmdrc
+dist/
+
+# Env
+.env
+.env.*
+!.env.example
+
+# IDE
+.vscode/
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+logs/
+
+# Test
+.coverage
+.pytest_cache/
+
+
+backend/.env

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 callmerem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,80 @@
+<img width="1364" height="689" alt="image" src="https://github.com/user-attachments/assets/0544d213-c0a9-4c0f-9c7e-024823e8101c" />
+
+
+
+
+## Gemini 3 Flash AI Trading Platform - Walkthrough
+
+This guide explains how to run and use the autonomous AI trading platform powered by Gemini 3 Flash.
+
+## Prerequisites
+- Python 3.10+ (with .venv activated)
+- Node.js 18+
+- MetaTrader 5 Terminal (installed and running)
+
+## 1. Configuration
+
+Ensure your .env file in backend/ has the correct credentials:
+
+```ini
+MT5_LOGIN=YOUR_ID
+MT5_PASSWORD=YOUR_PASSWORD
+MT5_SERVER=YOUR_SERVER
+GEMINI_API_KEY=YOUR_KEY
+ACCOUNT_MODE=demo
+```
+
+## 2. Starting the Platform
+
+**Backend (Python API + Agent)**
+
+Open a terminal in `backend/` and run:
+
+```bash
+# Activate venv if needed
+.venv\Scripts\activate
+
+#locate
+cd backend
+
+#launch backend
+python -m uvicorn main:app --reload --port 8000 --host 0.0.0.0
+
+
+```
+
+use backend because thats the directory name
+
+> You should see: Uvicorn running on http://0.0.0.0:8000
+
+
+**Frontend (User Interface)**
+
+Open a new terminal in frontend/ and run:
+
+```bash
+#locate
+cd frontend_react
+
+#launch frontend
+npm run dev
+```
+
+> You should see: Ready in ... at http://localhost:3000
+
+## 3. Using the Platform
+Open the App: Navigate to http://localhost:3000.
+Connection Status: Check the top header. You should see "CONNECTED" (green).
+If "DISCONNECTED", ensure the backend is running and MT5 is open.
+Start the Agent:
+Click the START button in the "Gemini Agent" panel.
+The AI reasoning sidebar will start streaming "thoughts" from Gemini 3 Flash.
+The agent will analyze the custom chart ticks and candles.
+Manual Trading:
+Use the BUY / SELL buttons to place trades manually.
+Set Volume, SL, and TP before trading.
+Open positions appear in the bottom panel.
+## 4. Verification & Troubleshooting
+Backend Health Check: Visit http://localhost:8000/api/health. It should return {"status": "online", "mt5_connected": true, ...}.
+MT5 Connection: If the bridge fails to connect, ensure "Algo Trading" is enabled in MT5 and the credentials are correct. The backlog will show Connected to MT5.
+Gemini API: If the agent is silent or errors, check your GEMINI_API_KEY.

STRUCTURE.md

@@ -0,0 +1,48 @@
+## Project Structure
+
+```text
+GeminiFlash-Trader/
+├── backend/
+│   ├── .env.example
+│   ├── agent.py
+│   ├── main.py
+│   ├── models.py
+│   ├── mt5_mcp.py
+│   ├── requirements.txt
+│   └── ws_manager.py
+├── frontend_react/
+│   ├── dist/
+│   │   ├── assets/
+│   │   │   ├── index-BBLjpDlg.js
+│   │   │   └── index-KlXNi27O.css
+│   │   ├── index.html
+│   │   └── vite.svg
+│   ├── public/
+│   │   └── vite.svg
+│   ├── src/
+│   │   ├── assets/
+│   │   │   └── react.svg
+│   │   ├── components/
+│   │   │   ├── AccountBar.jsx
+│   │   │   ├── CandlestickChart.jsx
+│   │   │   ├── PositionPanel.jsx
+│   │   │   ├── ReasoningSidebar.jsx
+│   │   │   └── TradeControls.jsx
+│   │   ├── lib/
+│   │   │   └── useWebSocket.js
+│   │   ├── App.css
+│   │   ├── App.jsx
+│   │   ├── index.css
+│   │   └── main.jsx
+│   ├── .gitignore
+│   ├── eslint.config.js
+│   ├── index.html
+│   ├── package-lock.json
+│   ├── package.json
+│   └── vite.config.js
+├── .gitignore
+├── LICENSE
+├── README.md
+├── TECHSTACK.md
+└── verify_strict_mode.py
+```

TECHSTACK.md

@@ -0,0 +1,18 @@
+## Techstack
+
+Audit of **GeminiFlash-Trader** project files (excluding environment and cache):
+
+| File Type | Count | Size (KB) |
+| :--- | :--- | :--- |
+| JSX (React) (.jsx) | 7 | 22.6 |
+| Python (.py) | 6 | 34.2 |
+| JavaScript (.js) | 4 | 206.9 |
+| (no extension) | 3 | 1.9 |
+| CSS (.css) | 3 | 28.0 |
+| SVG Image (.svg) | 3 | 7.0 |
+| HTML (.html) | 2 | 1.6 |
+| JSON (.json) | 2 | 98.6 |
+| EXAMPLE (.example) | 1 | 0.4 |
+| Markdown (.md) | 1 | 2.2 |
+| Plain Text (.txt) | 1 | 0.1 |
+| **Total** | **33** | **403.5** |

backend/.env.example

@@ -0,0 +1,16 @@
+# MetaTrader 5 Credentials
+MT5_LOGIN=your_number
+MT5_PASSWORD=your_password
+MT5_SERVER=your_server
+MT5_PATH=C:\Program Files\MetaTrader 5\terminal64_or_whatever_path
+
+# Account Mode: "demo" or "live"
+ACCOUNT_MODE=demo
+
+# Gemini API Key
+GEMINI_API_KEY=your_gemini_api_key
+
+# Trading Settings, this deppends on the symbols of your broker, im using Exness in my case
+TRADING_SYMBOL=XAUUSDm
+DEFAULT_VOLUME=0.01
+AGENT_INTERVAL_SECONDS=60

backend/agent.py

@@ -0,0 +1,196 @@
+"""
+Gemini 3 Flash Trading Agent — the 'Antigravity Trader'.
+Analyzes XAUUSDc market data and makes autonomous trading decisions.
+"""
+
+import os
+import json
+from datetime import datetime
+from typing import Optional
+from dotenv import load_dotenv
+
+load_dotenv()
+
+# Try importing Google GenAI
+try:
+    from google import genai
+    from google.genai import types
+    GENAI_AVAILABLE = True
+except ImportError:
+    GENAI_AVAILABLE = False
+    print("[Agent] google-genai not available — running with MOCK agent")
+
+
+SYSTEM_PROMPT = """You are **Antigravity Trader**, an elite AI trading agent specializing in XAUUSDc (Gold vs USD) trading on MetaTrader 5.
+
+## Your Role
+You analyze real-time market data and make precise trading decisions. You run autonomously, making buy/sell/hold decisions based on price action, candlestick patterns, and market structure.
+
+## Your Trading Rules
+1. **Risk Management First**: Never risk more than 2% of account balance per trade.
+2. **Always set SL/TP**: Stop Loss and Take Profit are mandatory. Minimum SL: 50 pips from entry. TP should be at least 1.5x the SL distance (risk-reward ratio).
+3. **One position at a time**: Don't open a new position if one is already open. You can CLOSE an existing position or HOLD.
+4. **Market Structure**: Look for support/resistance, trend direction, and key price levels in the candle data.
+5. **Confidence threshold**: Only trade with confidence >= 0.7. Below that, HOLD or DO_NOTHING.
+
+## Input Data
+You will receive:
+- **Recent candles**: OHLCV data (most recent candles for the timeframe)
+- **Current tick**: Latest bid/ask prices
+- **Account info**: Balance, equity, margin, profit
+- **Open positions**: Currently held positions (if any)
+
+## Output Format
+You MUST respond with ONLY valid JSON (no markdown, no extra text):
+{
+    "action": "BUY" | "SELL" | "CLOSE" | "HOLD" | "DO_NOTHING",
+    "reasoning": "Your detailed analysis explaining WHY you made this decision. Include what patterns you see, key levels, and your risk assessment.",
+    "confidence": 0.0 to 1.0,
+    "sl": null or price level for stop loss,
+    "tp": null or price level for take profit,
+    "volume": null or lot size (e.g. 0.01)
+}
+
+## Action Definitions
+- **BUY**: Open a long position (you expect price to go UP)
+- **SELL**: Open a short position (you expect price to go DOWN)
+- **CLOSE**: Close the current open position
+- **HOLD**: Keep the current position open, no changes
+- **DO_NOTHING**: No position open and no good setup — wait
+"""
+
+
+class TradingAgent:
+    """Gemini 3 Flash Agent for autonomous XAUUSDc trading."""
+
+    def __init__(self):
+        self.api_key = os.getenv("GEMINI_API_KEY", "")
+        self.model_name = "gemini-2.5-flash"
+        self.client = None
+        self.decision_history: list[dict] = []
+
+        if GENAI_AVAILABLE and self.api_key:
+            self.client = genai.Client(api_key=self.api_key)
+            print(f"[Agent] Gemini client initialized with model: {self.model_name}")
+        else:
+            print("[Agent] No Gemini API key — using mock decisions")
+
+    async def analyze(self, candles: list, tick: dict, account: dict,
+                      positions: list) -> dict:
+        """
+        Analyze market data and return a trading decision.
+        Returns: { action, reasoning, confidence, sl, tp, volume }
+        """
+        if not self.client:
+            # In strict usage, we simply return DO_NOTHING if no AI is available
+            return {
+                "action": "DO_NOTHING",
+                "reasoning": "Gemini API client not initialized (check keys)",
+                "confidence": 0.0,
+                "sl": None, "tp": None, "volume": None
+            }
+
+        # Build the market context prompt
+        recent_candles = candles[-20:] if len(candles) > 20 else candles
+        candle_text = self._format_candles(recent_candles)
+
+        prompt = f"""## Current Market State — {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}
+
+### Latest Tick
+Bid: {tick.get('bid', 'N/A')} | Ask: {tick.get('ask', 'N/A')}
+
+### Recent Candles (OHLCV, most recent last)
+{candle_text}
+
+### Account Status
+Balance: ${account.get('balance', 0):.2f}
+Equity: ${account.get('equity', 0):.2f}
+Free Margin: ${account.get('free_margin', 0):.2f}
+Current P&L: ${account.get('profit', 0):.2f}
+
+### Open Positions
+{self._format_positions(positions)}
+
+### Recent Decision History
+{self._format_history()}
+
+Analyze the market and make your trading decision now."""
+
+        try:
+            response = self.client.models.generate_content(
+                model=self.model_name,
+                contents=prompt,
+                config=types.GenerateContentConfig(
+                    system_instruction=SYSTEM_PROMPT,
+                    temperature=0.3,
+                    max_output_tokens=8192,
+                    response_mime_type="application/json",
+                )
+            )
+
+            response_text = response.text.strip()
+            decision = json.loads(response_text)
+
+            # Validate required fields
+            decision.setdefault("action", "DO_NOTHING")
+            decision.setdefault("reasoning", "No reasoning provided")
+            decision.setdefault("confidence", 0.5)
+            decision.setdefault("sl", None)
+            decision.setdefault("tp", None)
+            decision.setdefault("volume", float(os.getenv("DEFAULT_VOLUME", "0.01")))
+
+            # Save to history
+            self.decision_history.append({
+                "time": datetime.now().isoformat(),
+                "action": decision["action"],
+                "confidence": decision["confidence"],
+            })
+            if len(self.decision_history) > 50:
+                self.decision_history = self.decision_history[-50:]
+
+            return decision
+
+        except json.JSONDecodeError as e:
+            return {
+                "action": "DO_NOTHING",
+                "reasoning": f"Failed to parse agent response: {str(e)}. Raw: {response_text[:200]}",
+                "confidence": 0.0,
+                "sl": None, "tp": None, "volume": None
+            }
+        except Exception as e:
+            return {
+                "action": "DO_NOTHING",
+                "reasoning": f"Agent error: {str(e)}",
+                "confidence": 0.0,
+                "sl": None, "tp": None, "volume": None
+            }
+
+    # Mock decision method removed for production/strict mode safety
+
+    def _format_candles(self, candles: list) -> str:
+        """Format candle data as a readable table."""
+        lines = ["Time | Open | High | Low | Close | Volume"]
+        for c in candles:
+            t = datetime.fromtimestamp(c["time"]).strftime("%H:%M")
+            lines.append(f"{t} | {c['open']:.2f} | {c['high']:.2f} | {c['low']:.2f} | {c['close']:.2f} | {c['volume']}")
+        return "\n".join(lines)
+
+    def _format_positions(self, positions: list) -> str:
+        if not positions:
+            return "No open positions."
+        lines = []
+        for p in positions:
+            lines.append(
+                f"Ticket #{p['ticket']}: {p['type'].upper()} {p['volume']} lots @ {p['price_open']:.2f} "
+                f"→ Current: {p['price_current']:.2f} | P&L: ${p['profit']:.2f} | SL: {p['sl']} | TP: {p['tp']}"
+            )
+        return "\n".join(lines)
+
+    def _format_history(self) -> str:
+        if not self.decision_history:
+            return "No previous decisions."
+        recent = self.decision_history[-5:]
+        lines = []
+        for d in recent:
+            lines.append(f"{d['time']}: {d['action']} (conf: {d['confidence']:.1%})")
+        return "\n".join(lines)

backend/main.py

@@ -0,0 +1,248 @@
+"""
+FastAPI Server for Gemini 3 Flash AI Trading Platform.
+Connects the MCP MT5 bridge, Gemini Agent, and Next.js frontend via WebSockets.
+"""
+
+import os
+import asyncio
+import json
+from contextlib import asynccontextmanager
+from typing import List, Optional
+from datetime import datetime
+
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException, BackgroundTasks
+from fastapi.middleware.cors import CORSMiddleware
+from dotenv import load_dotenv
+
+from models import (
+    CandleData, TickData, PositionInfo, AccountInfo, AgentDecision,
+    TradeRequest, WSMessage
+)
+from mt5_mcp import MT5Bridge
+from agent import TradingAgent
+from ws_manager import ConnectionManager
+
+load_dotenv()
+
+# Initialize components
+mt5_bridge = MT5Bridge()
+agent = TradingAgent()
+ws_manager = ConnectionManager()
+
+# Global state
+agent_running = False
+background_task_handle = None
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    """Lifecycle events: connect details on startup, cleanup on shutdown."""
+    print("[Main] Starting up...")
+    
+    # 1. Connect to MT5
+    result = mt5_bridge.initialize()
+    if not result["success"]:
+        print(f"[Main] SEVERE: {result['message']}")
+        # In strict mode, we should ideally stop here
+        if os.getenv("FORCE_MT5_DATA", "false").lower() == "true":
+            raise RuntimeError(f"STRICT MODE: Failed to connect to MT5. {result['message']}")
+    else:
+        print(f"[Main] {result['message']}")
+
+    # 2. Start background data loop (non-blocking)
+    asyncio.create_task(market_data_loop())
+
+    yield
+    
+    print("[Main] Shutting down...")
+    mt5_bridge.shutdown()
+
+
+app = FastAPI(title="Gemini 3 Flash Trader", lifespan=lifespan)
+
+# CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, specify frontend URL
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+# ── REST API ────────────────────────────────────────────────
+
+@app.get("/api/health")
+async def health_check():
+    """Check system health and connection status."""
+    return {
+        "status": "online",
+        "mt5_connected": mt5_bridge.connected,
+        "agent_running": agent_running,
+        "mode": "simulation" if mt5_bridge.simulation_mode else "live"
+    }
+
+
+@app.get("/api/account", response_model=AccountInfo)
+async def get_account():
+    """Get current account information."""
+    info = mt5_bridge.get_account_info()
+    if "error" in info:
+        raise HTTPException(status_code=500, detail=info["error"])
+    return info
+
+
+@app.get("/api/positions", response_model=List[PositionInfo])
+async def get_positions():
+    """Get all open positions."""
+    return mt5_bridge.get_positions()
+
+
+@app.get("/api/candles", response_model=List[CandleData])
+async def get_candles(timeframe: str = "M5", count: int = 200):
+    """Get historical candle data."""
+    return mt5_bridge.get_rates(timeframe=timeframe, count=count)
+
+
+@app.post("/api/trade")
+async def execute_trade(trade: TradeRequest):
+    """Execute a manual trade."""
+    if trade.action == "close":
+        if not trade.ticket:
+            raise HTTPException(status_code=400, detail="Ticket required for close")
+        result = mt5_bridge.close_position(trade.ticket)
+    else:
+        result = mt5_bridge.place_order(
+            action=trade.action,
+            symbol=trade.symbol,
+            volume=trade.volume,
+            sl=trade.sl or 0.0,
+            tp=trade.tp or 0.0
+        )
+
+    if not result.get("success"):
+        raise HTTPException(status_code=400, detail=result.get("message"))
+
+    # Broadcast trade event
+    await ws_manager.broadcast("trade_event", result)
+    return result
+
+
+@app.post("/api/agent/toggle")
+async def toggle_agent(enable: bool):
+    """Start or stop the autonomous trading agent."""
+    global agent_running
+    agent_running = enable
+    status = "running" if agent_running else "stopped"
+    print(f"[Main] Agent {status}")
+    await ws_manager.broadcast("agent_status", {"status": status})
+    return {"status": status}
+
+
+# ── WebSocket ───────────────────────────────────────────────
+
+@app.websocket("/ws")
+async def websocket_endpoint(websocket: WebSocket):
+    await ws_manager.connect(websocket)
+    try:
+        # Send initial state
+        await ws_manager.send_personal(websocket, "status", {
+            "mt5": mt5_bridge.connected,
+            "agent": agent_running
+        })
+        
+        while True:
+            # Keep connection alive + handle incoming messages (e.g. ping)
+            data = await websocket.receive_text()
+            # Parse if needed, currently we just listen
+    except WebSocketDisconnect:
+        ws_manager.disconnect(websocket)
+
+
+# ── Background Loops ────────────────────────────────────────
+
+async def market_data_loop():
+    """
+    Main loop:
+    1. Stream prices (candles/ticks) to frontend
+    2. Invoke Agent if enabled
+    """
+    print("[Main] Market data loop started")
+    last_candle_time = 0
+    
+    while True:
+        try:
+            # 1. Fetch & Broadcast Market Data
+            current_tick = mt5_bridge.get_tick()
+            candles = mt5_bridge.get_rates(count=2)  # Just need latest for updates
+            
+            if candles:
+                latest_candle = candles[-1]
+                await ws_manager.broadcast("candle_update", latest_candle)
+            
+            if current_tick:
+                await ws_manager.broadcast("tick_update", current_tick)
+
+            # 2. Agent Logic (if running)
+            if agent_running:
+                # Run agent roughly every new candle or every N seconds
+                # For this demo, we'll run it every 10s to see activity
+                if int(datetime.now().timestamp()) % 10 == 0:
+                    await run_agent_cycle(current_tick)
+
+            # 3. Broadcast Account/Positions periodically
+            if int(datetime.now().timestamp()) % 2 == 0:
+                positions = mt5_bridge.get_positions()
+                account = mt5_bridge.get_account_info()
+                await ws_manager.broadcast("positions", positions)
+                await ws_manager.broadcast("account", account)
+
+            await asyncio.sleep(1)  # 1Hz update rate
+
+        except Exception as e:
+            print(f"[Loop Error] {e}")
+            await asyncio.sleep(5)
+
+
+async def run_agent_cycle(tick: dict):
+    """One cycle of the AI agent: Analyze -> Reason -> Act."""
+    print("[Agent] Analyzing market...")
+    
+    # Gather context
+    candles = mt5_bridge.get_rates(count=50) # Give agent more history
+    positions = mt5_bridge.get_positions()
+    account = mt5_bridge.get_account_info()
+    
+    # 1. Ask Gemini
+    decision = await agent.analyze(candles, tick, account, positions)
+    
+    # 2. Broadcast Reasoning
+    await ws_manager.broadcast("reasoning", {
+        "action": decision["action"],
+        "reasoning": decision["reasoning"],
+        "confidence": decision["confidence"],
+        "timestamp": datetime.now().isoformat()
+    })
+    
+    # 3. Execute Decision
+    if decision["action"] in ["BUY", "SELL"]:
+        # Check confidence threshold
+        if decision["confidence"] >= 0.7:
+            print(f"[Agent] Executing {decision['action']} ({decision['confidence']})")
+            result = mt5_bridge.place_order(
+                action=decision["action"],
+                volume=decision.get("volume", 0.01),
+                sl=decision.get("sl", 0.0),
+                tp=decision.get("tp", 0.0)
+            )
+            await ws_manager.broadcast("trade_event", result)
+    elif decision["action"] == "CLOSE":
+        # Close all relevant positions
+        for p in positions:
+            res = mt5_bridge.close_position(p["ticket"])
+            await ws_manager.broadcast("trade_event", res)
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/models.py

@@ -0,0 +1,82 @@
+"""
+Pydantic data models for the Gemini 3 Flash AI Trading Platform.
+"""
+
+from pydantic import BaseModel, Field
+from typing import Optional, Literal
+from datetime import datetime
+from enum import Enum
+
+
+class TradeAction(str, Enum):
+    BUY = "BUY"
+    SELL = "SELL"
+    CLOSE = "CLOSE"
+    HOLD = "HOLD"
+    DO_NOTHING = "DO_NOTHING"
+
+
+class CandleData(BaseModel):
+    time: int
+    open: float
+    high: float
+    low: float
+    close: float
+    volume: float
+
+
+class TickData(BaseModel):
+    bid: float
+    ask: float
+    time: int
+    symbol: str
+
+
+class PositionInfo(BaseModel):
+    ticket: int
+    symbol: str
+    type: str  # "buy" or "sell"
+    volume: float
+    price_open: float
+    price_current: float
+    sl: float
+    tp: float
+    profit: float
+    time: int
+
+
+class AccountInfo(BaseModel):
+    login: int
+    balance: float
+    equity: float
+    margin: float
+    free_margin: float
+    margin_level: Optional[float] = None
+    profit: float
+    server: str
+    currency: str
+    trade_mode: str  # "demo" or "live"
+
+
+class AgentDecision(BaseModel):
+    action: TradeAction
+    reasoning: str
+    confidence: float = Field(ge=0.0, le=1.0)
+    sl: Optional[float] = None
+    tp: Optional[float] = None
+    volume: Optional[float] = None
+
+
+class TradeRequest(BaseModel):
+    action: Literal["buy", "sell", "close"]
+    symbol: str = "XAUUSDc"
+    volume: float = 0.01
+    sl: Optional[float] = None
+    tp: Optional[float] = None
+    ticket: Optional[int] = None  # for closing specific position
+
+
+class WSMessage(BaseModel):
+    type: str  # "candles", "tick", "reasoning", "trade_event", "positions", "account", "agent_status"
+    data: dict
+    timestamp: str = Field(default_factory=lambda: datetime.now().isoformat())

backend/mt5_mcp.py

@@ -0,0 +1,360 @@
+"""
+MT5 MCP Bridge — wraps the MetaTrader5 Python SDK into clean tool functions
+for the AI agent to call. Supports both demo and live accounts.
+Falls back to simulated data when MT5 is not available.
+"""
+
+import os
+import time
+import random
+import math
+from datetime import datetime, timedelta
+from typing import Optional
+from dotenv import load_dotenv
+
+load_dotenv()
+
+# Try to import MetaTrader5; if unavailable, use simulation mode
+try:
+    import MetaTrader5 as mt5
+    MT5_AVAILABLE = True
+except ImportError:
+    MT5_AVAILABLE = False
+    if os.getenv("FORCE_MT5_DATA", "false").lower() == "true":
+        raise ImportError("CRITICAL: MetaTrader5 package not found and FORCE_MT5_DATA=true")
+    print("[MT5] MetaTrader5 package not available — running in SIMULATION mode")
+
+try:
+    import pandas as pd
+    PANDAS_AVAILABLE = True
+except ImportError:
+    PANDAS_AVAILABLE = False
+
+
+class MT5Bridge:
+    """Bridge to MetaTrader 5 via the official Python SDK."""
+
+    TIMEFRAME_MAP = {
+        "M1": mt5.TIMEFRAME_M1 if MT5_AVAILABLE else 1,
+        "M5": mt5.TIMEFRAME_M5 if MT5_AVAILABLE else 5,
+        "M15": mt5.TIMEFRAME_M15 if MT5_AVAILABLE else 15,
+        "M30": mt5.TIMEFRAME_M30 if MT5_AVAILABLE else 30,
+        "H1": mt5.TIMEFRAME_H1 if MT5_AVAILABLE else 60,
+        "H4": mt5.TIMEFRAME_H4 if MT5_AVAILABLE else 240,
+        "D1": mt5.TIMEFRAME_D1 if MT5_AVAILABLE else 1440,
+    }
+
+    def __init__(self):
+        self.connected = False
+        self.simulation_mode = not MT5_AVAILABLE
+        self.symbol = os.getenv("TRADING_SYMBOL", "XAUUSDm")
+        self._sim_base_price = 2650.0
+        self._sim_positions = []
+        self._sim_ticket_counter = 1000
+
+    def initialize(self) -> dict:
+        """Connect to the MT5 terminal."""
+        if self.simulation_mode:
+            if os.getenv("FORCE_MT5_DATA", "false").lower() == "true":
+                return {
+                    "success": False,
+                    "message": "CRITICAL: MT5 not available but FORCE_MT5_DATA is true. Exiting."
+                }
+            self.connected = True
+            return {
+                "success": True,
+                "message": "Running in SIMULATION mode (MT5 not available)",
+                "mode": "simulation"
+            }
+
+        mt5_path = os.getenv("MT5_PATH")
+        login = int(os.getenv("MT5_LOGIN", "0"))
+        password = os.getenv("MT5_PASSWORD", "")
+        server = os.getenv("MT5_SERVER", "")
+
+        init_kwargs = {}
+        if mt5_path:
+            init_kwargs["path"] = mt5_path
+
+        if not mt5.initialize(**init_kwargs):
+            err_code = mt5.last_error()
+            if os.getenv("FORCE_MT5_DATA", "false").lower() == "true":
+                return {"success": False, "message": f"CRITICAL: MT5 init failed: {err_code}"}
+            return {"success": False, "message": f"MT5 init failed: {err_code}"}
+
+        if login and password and server:
+            authorized = mt5.login(login=login, password=password, server=server)
+            if not authorized:
+                return {"success": False, "message": f"MT5 login failed: {mt5.last_error()}"}
+
+        self.connected = True
+        account = mt5.account_info()
+        mode = "demo" if account.trade_mode == 0 else "live"
+        return {
+            "success": True,
+            "message": f"Connected to MT5 ({mode}) — Account #{account.login}",
+            "mode": mode
+        }
+
+    def shutdown(self):
+        """Disconnect from MT5."""
+        if not self.simulation_mode and MT5_AVAILABLE:
+            mt5.shutdown()
+        self.connected = False
+
+    def get_account_info(self) -> dict:
+        """Get trading account information."""
+        if self.simulation_mode:
+            return {
+                "login": 12345678,
+                "balance": 10000.00,
+                "equity": 10000.00 + sum(p.get("profit", 0) for p in self._sim_positions),
+                "margin": sum(p.get("volume", 0) * 1000 for p in self._sim_positions),
+                "free_margin": 10000.00 - sum(p.get("volume", 0) * 1000 for p in self._sim_positions),
+                "margin_level": 0.0,
+                "profit": sum(p.get("profit", 0) for p in self._sim_positions),
+                "server": "SimulationServer",
+                "currency": "USD",
+                "trade_mode": os.getenv("ACCOUNT_MODE", "demo")
+            }
+
+        account = mt5.account_info()
+        if account is None:
+            return {"error": "Failed to get account info"}
+
+        return {
+            "login": account.login,
+            "balance": account.balance,
+            "equity": account.equity,
+            "margin": account.margin,
+            "free_margin": account.margin_free,
+            "margin_level": account.margin_level,
+            "profit": account.profit,
+            "server": account.server,
+            "currency": account.currency,
+            "trade_mode": "demo" if account.trade_mode == 0 else "live"
+        }
+
+    def get_rates(self, symbol: Optional[str] = None, timeframe: str = "M5", count: int = 200) -> list:
+        """Fetch OHLCV candle data."""
+        symbol = symbol or self.symbol
+
+        if self.simulation_mode:
+            return self._simulate_candles(count, timeframe)
+
+        tf = self.TIMEFRAME_MAP.get(timeframe, mt5.TIMEFRAME_M5)
+        rates = mt5.copy_rates_from_pos(symbol, tf, 0, count)
+
+        if rates is None or len(rates) == 0:
+            return []
+
+        candles = []
+        for r in rates:
+            candles.append({
+                "time": int(r["time"]),
+                "open": float(r["open"]),
+                "high": float(r["high"]),
+                "low": float(r["low"]),
+                "close": float(r["close"]),
+                "volume": float(r["tick_volume"]),
+            })
+        return candles
+
+    def get_tick(self, symbol: Optional[str] = None) -> dict:
+        """Get latest tick (bid/ask)."""
+        symbol = symbol or self.symbol
+
+        if self.simulation_mode:
+            price = self._sim_base_price + random.uniform(-5, 5)
+            spread = random.uniform(0.1, 0.5)
+            return {
+                "bid": round(price, 2),
+                "ask": round(price + spread, 2),
+                "time": int(time.time()),
+                "symbol": symbol
+            }
+
+        tick = mt5.symbol_info_tick(symbol)
+        if tick is None:
+            return {"error": f"No tick data for {symbol}"}
+
+        return {
+            "bid": tick.bid,
+            "ask": tick.ask,
+            "time": tick.time,
+            "symbol": symbol
+        }
+
+    def get_positions(self, symbol: Optional[str] = None) -> list:
+        """List open positions."""
+        symbol = symbol or self.symbol
+
+        if self.simulation_mode:
+            tick = self.get_tick(symbol)
+            for p in self._sim_positions:
+                if p["type"] == "buy":
+                    p["price_current"] = tick["bid"]
+                    p["profit"] = round((tick["bid"] - p["price_open"]) * p["volume"] * 100, 2)
+                else:
+                    p["price_current"] = tick["ask"]
+                    p["profit"] = round((p["price_open"] - tick["ask"]) * p["volume"] * 100, 2)
+            return self._sim_positions
+
+        positions = mt5.positions_get(symbol=symbol)
+        if positions is None:
+            return []
+
+        result = []
+        for p in positions:
+            result.append({
+                "ticket": p.ticket,
+                "symbol": p.symbol,
+                "type": "buy" if p.type == 0 else "sell",
+                "volume": p.volume,
+                "price_open": p.price_open,
+                "price_current": p.price_current,
+                "sl": p.sl,
+                "tp": p.tp,
+                "profit": p.profit,
+                "time": p.time,
+            })
+        return result
+
+    def place_order(self, action: str, symbol: Optional[str] = None,
+                    volume: float = 0.01, sl: float = 0.0, tp: float = 0.0) -> dict:
+        """Place a market order (buy or sell)."""
+        symbol = symbol or self.symbol
+
+        if self.simulation_mode:
+            if os.getenv("FORCE_MT5_DATA", "false").lower() == "true":
+                return {"success": False, "message": "Cannot place mock order in STRICT MT5 mode."}
+
+            tick = self.get_tick(symbol)
+            price = tick["ask"] if action.lower() == "buy" else tick["bid"]
+            self._sim_ticket_counter += 1
+            pos = {
+                "ticket": self._sim_ticket_counter,
+                "symbol": symbol,
+                "type": action.lower(),
+                "volume": volume,
+                "price_open": price,
+                "price_current": price,
+                "sl": sl,
+                "tp": tp,
+                "profit": 0.0,
+                "time": int(time.time()),
+            }
+            self._sim_positions.append(pos)
+            return {"success": True, "ticket": pos["ticket"], "price": price, "action": action}
+
+        # Real MT5 order
+        tick = mt5.symbol_info_tick(symbol)
+        if tick is None:
+            return {"success": False, "message": f"Cannot get tick for {symbol}"}
+
+        order_type = mt5.ORDER_TYPE_BUY if action.lower() == "buy" else mt5.ORDER_TYPE_SELL
+        price = tick.ask if action.lower() == "buy" else tick.bid
+
+        request = {
+            "action": mt5.TRADE_ACTION_DEAL,
+            "symbol": symbol,
+            "volume": volume,
+            "type": order_type,
+            "price": price,
+            "deviation": 20,
+            "magic": 3000000,
+            "comment": "Gemini3Flash-Agent",
+            "type_time": mt5.ORDER_TIME_GTC,
+            "type_filling": mt5.ORDER_FILLING_IOC,
+        }
+
+        if sl > 0:
+            request["sl"] = sl
+        if tp > 0:
+            request["tp"] = tp
+
+        result = mt5.order_send(request)
+        if result is None or result.retcode != mt5.TRADE_RETCODE_DONE:
+            error_msg = result.comment if result else "Unknown error"
+            return {"success": False, "message": error_msg}
+
+        return {
+            "success": True,
+            "ticket": result.order,
+            "price": result.price,
+            "action": action
+        }
+
+    def close_position(self, ticket: int) -> dict:
+        """Close a specific position by ticket."""
+        if self.simulation_mode:
+            for i, p in enumerate(self._sim_positions):
+                if p["ticket"] == ticket:
+                    closed = self._sim_positions.pop(i)
+                    return {"success": True, "ticket": ticket, "profit": closed["profit"]}
+            return {"success": False, "message": f"Position {ticket} not found"}
+
+        positions = mt5.positions_get(ticket=ticket)
+        if not positions:
+            return {"success": False, "message": f"Position {ticket} not found"}
+
+        pos = positions[0]
+        close_type = mt5.ORDER_TYPE_SELL if pos.type == 0 else mt5.ORDER_TYPE_BUY
+        tick = mt5.symbol_info_tick(pos.symbol)
+        price = tick.bid if pos.type == 0 else tick.ask
+
+        request = {
+            "action": mt5.TRADE_ACTION_DEAL,
+            "symbol": pos.symbol,
+            "volume": pos.volume,
+            "type": close_type,
+            "position": ticket,
+            "price": price,
+            "deviation": 20,
+            "magic": 3000000,
+            "comment": "Gemini3Flash-Close",
+            "type_time": mt5.ORDER_TIME_GTC,
+            "type_filling": mt5.ORDER_FILLING_IOC,
+        }
+
+        result = mt5.order_send(request)
+        if result is None or result.retcode != mt5.TRADE_RETCODE_DONE:
+            error_msg = result.comment if result else "Unknown error"
+            return {"success": False, "message": error_msg}
+
+        return {"success": True, "ticket": ticket, "profit": pos.profit}
+
+    # ── Simulation helpers ──────────────────────────────────────────
+
+    def _simulate_candles(self, count: int, timeframe: str = "M5") -> list:
+        """Generate realistic-looking simulated gold candle data."""
+        tf_minutes = {
+            "M1": 1, "M5": 5, "M15": 15, "M30": 30,
+            "H1": 60, "H4": 240, "D1": 1440
+        }.get(timeframe, 5)
+
+        candles = []
+        now = int(time.time())
+        price = self._sim_base_price
+
+        for i in range(count):
+            t = now - (count - i) * tf_minutes * 60
+            change = random.gauss(0, 2.5)
+            o = round(price, 2)
+            c = round(price + change, 2)
+            h = round(max(o, c) + abs(random.gauss(0, 1.5)), 2)
+            low = round(min(o, c) - abs(random.gauss(0, 1.5)), 2)
+            vol = random.randint(50, 500)
+
+            candles.append({
+                "time": t,
+                "open": o,
+                "high": h,
+                "low": low,
+                "close": c,
+                "volume": vol,
+            })
+            price = c
+            self._sim_base_price = c
+
+        return candles

backend/requirements.txt

@@ -0,0 +1,8 @@
+fastapi
+uvicorn[standard]
+websockets
+MetaTrader5
+google-genai
+python-dotenv
+pydantic
+pandas

backend/ws_manager.py

@@ -0,0 +1,60 @@
+"""
+WebSocket connection manager for broadcasting real-time data
+to all connected frontend clients.
+"""
+
+import json
+import asyncio
+from fastapi import WebSocket
+from datetime import datetime
+
+
+class ConnectionManager:
+    """Manages WebSocket connections and broadcasts messages."""
+
+    def __init__(self):
+        self.active_connections: list[WebSocket] = []
+
+    async def connect(self, websocket: WebSocket):
+        await websocket.accept()
+        self.active_connections.append(websocket)
+        print(f"[WS] Client connected. Total: {len(self.active_connections)}")
+
+    def disconnect(self, websocket: WebSocket):
+        if websocket in self.active_connections:
+            self.active_connections.remove(websocket)
+        print(f"[WS] Client disconnected. Total: {len(self.active_connections)}")
+
+    async def broadcast(self, message_type: str, data: dict):
+        """Broadcast a message to all connected clients."""
+        message = json.dumps({
+            "type": message_type,
+            "data": data,
+            "timestamp": datetime.now().isoformat()
+        })
+
+        disconnected = []
+        for connection in self.active_connections:
+            try:
+                await connection.send_text(message)
+            except Exception:
+                disconnected.append(connection)
+
+        for conn in disconnected:
+            self.disconnect(conn)
+
+    async def send_personal(self, websocket: WebSocket, message_type: str, data: dict):
+        """Send a message to a specific client."""
+        message = json.dumps({
+            "type": message_type,
+            "data": data,
+            "timestamp": datetime.now().isoformat()
+        })
+        try:
+            await websocket.send_text(message)
+        except Exception:
+            self.disconnect(websocket)
+
+    @property
+    def client_count(self) -> int:
+        return len(self.active_connections)

frontend_react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend_react/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend_react/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gemini Trader</title>
+    <meta name="description" content="AI-powered trading terminal with Gemini 3 Flash" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend_react/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "frontend_react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.569.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.3.1"
+  }
+}

frontend_react/src/App.css

@@ -0,0 +1 @@
+/* App.css - cleared of Vite defaults */

frontend_react/src/App.jsx

@@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react';
+import CandlestickChart from './components/CandlestickChart';
+import ReasoningSidebar from './components/ReasoningSidebar';
+import TradeControls from './components/TradeControls';
+import PositionPanel from './components/PositionPanel';
+import AccountBar from './components/AccountBar';
+import { useWebSocket } from './lib/useWebSocket';
+import { AlertTriangle } from 'lucide-react';
+import './App.css';
+
+function App() {
+  const { connected, data, sendMessage } = useWebSocket('ws://localhost:8000/ws');
+
+  const [candles, setCandles] = useState([]);
+  const [tick, setTick] = useState(null);
+  const [account, setAccount] = useState(null);
+  const [positions, setPositions] = useState([]);
+  const [agentStatus, setAgentStatus] = useState('stopped');
+  const [logs, setLogs] = useState([]);
+
+  useEffect(() => {
+    if (!data) return;
+
+    if (data.type === 'status') {
+      setAgentStatus(data.data.agent ? 'running' : 'stopped');
+    } else if (data.type === 'candle_update') {
+      setCandles(prev => {
+        const newCandle = data.data;
+        const last = prev[prev.length - 1];
+        if (last && last.time === newCandle.time) {
+          return [...prev.slice(0, -1), newCandle];
+        }
+        return [...prev, newCandle].slice(-500);
+      });
+    } else if (data.type === 'tick_update') {
+      setTick(data.data);
+    } else if (data.type === 'account') {
+      setAccount(data.data);
+    } else if (data.type === 'positions') {
+      setPositions(data.data);
+    } else if (data.type === 'agent_status') {
+      setAgentStatus(data.data.status);
+    } else if (data.type === 'reasoning') {
+      setLogs(prev => [...prev, data.data].slice(-50));
+    } else if (data.type === 'trade_event') {
+      console.log('Trade Event:', data.data);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    fetch('http://localhost:8000/api/candles').then(r => r.json()).then(setCandles).catch(console.error);
+    fetch('http://localhost:8000/api/account').then(r => r.json()).then(setAccount).catch(console.error);
+    fetch('http://localhost:8000/api/positions').then(r => r.json()).then(setPositions).catch(console.error);
+  }, []);
+
+  const handleToggleAgent = (running) => {
+    fetch(`http://localhost:8000/api/agent/toggle?enable=${running}`, { method: 'POST' });
+  };
+
+  const handleManualTrade = (action, volume, sl, tp) => {
+    fetch('http://localhost:8000/api/trade', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action, symbol: 'XAUUSDc', volume, sl, tp })
+    });
+  };
+
+  return (
+    <div className="app-layout">
+      {/* Top Bar */}
+      <div className="top-bar">
+        <div className="top-bar-brand">
+          <div className="top-bar-logo">G3</div>
+          <span className="top-bar-title">GEMINI TRADER</span>
+        </div>
+        <div className="top-bar-content">
+          <AccountBar account={account} connected={connected} />
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="main-content">
+        {/* Left: Chart & Positions */}
+        <div className="chart-column">
+          {/* Chart */}
+          <div className="chart-area">
+            <CandlestickChart data={candles} tick={tick} />
+
+            {/* Trade Controls Overlay */}
+            <div className="trade-overlay">
+              <TradeControls
+                status={agentStatus}
+                onToggleAgent={handleToggleAgent}
+                onManualTrade={handleManualTrade}
+              />
+            </div>
+          </div>
+
+          {/* Positions */}
+          <div className="positions-panel">
+            <div className="positions-panel-header">
+              Open Positions
+            </div>
+            <div className="positions-panel-body">
+              <PositionPanel positions={positions} currentTick={tick} />
+            </div>
+          </div>
+        </div>
+
+        {/* Right: AI Reasoning Sidebar */}
+        <div className="sidebar">
+          <ReasoningSidebar logs={logs} status={agentStatus} />
+        </div>
+      </div>
+
+      {/* Mobile Warning */}
+      <div className="mobile-warning">
+        <AlertTriangle size={40} color="var(--accent-gold)" />
+        <h2>Desktop Only</h2>
+        <p>This trading platform is designed for large screens.</p>
+      </div>
+    </div>
+  );
+}
+
+export default App;

frontend_react/src/components/AccountBar.jsx

@@ -0,0 +1,32 @@
+import { Signal } from 'lucide-react';
+
+export default function AccountBar({ account, connected }) {
+    if (!account || !account.balance) return null;
+
+    return (
+        <div className="account-bar">
+            <div className="account-metrics">
+                <div className="connection-indicator">
+                    <div className={`connection-dot ${connected ? 'connection-dot-on' : 'connection-dot-off'}`} />
+                    <span>{connected ? 'CONNECTED' : 'DISCONNECTED'}</span>
+                </div>
+                <div className="account-metric">
+                    <span className="account-metric-label">Balance:</span>
+                    <span className="account-metric-value">${account.balance.toFixed(2)}</span>
+                </div>
+                <div className="account-metric">
+                    <span className="account-metric-label">Equity:</span>
+                    <span className="account-metric-value">${account.equity.toFixed(2)}</span>
+                </div>
+                <div className="account-metric">
+                    <span className="account-metric-label">Margin:</span>
+                    <span className="color-secondary font-mono">${account.margin.toFixed(2)}</span>
+                </div>
+            </div>
+
+            <div className={`badge ${account.trade_mode === 'demo' ? 'badge-blue' : 'badge-red'}`}>
+                {account.trade_mode ? account.trade_mode.toUpperCase() : 'DEMO'}
+            </div>
+        </div>
+    );
+}

frontend_react/src/components/CandlestickChart.jsx

@@ -0,0 +1,243 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+export default function CandlestickChart({ data, tick }) {
+    const canvasRef = useRef(null);
+    const containerRef = useRef(null);
+
+    // Viewport state: Offset from the RIGHT (0 means latest candle is at edge)
+    // Scale: Pixels per candle (width + gap)
+    const [viewport, setViewport] = useState({ offset: 0, scale: 10 });
+    const [isDragging, setIsDragging] = useState(false);
+    const lastMouseX = useRef(0);
+
+    const colors = {
+        bg: '#080b14',
+        grid: '#1e2329',
+        text: '#8b949e',
+        up: '#26a641',
+        down: '#da3633',
+        crosshair: '#f0b429',
+    };
+
+    // Handle Resize
+    useEffect(() => {
+        const handleResize = () => draw();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    // Main Draw Function
+    const draw = useCallback(() => {
+        const canvas = canvasRef.current;
+        const container = containerRef.current;
+        if (!canvas || !container || !data) return;
+
+        const rect = container.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+
+        // Handle Retina displays
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+
+        const ctx = canvas.getContext('2d');
+        ctx.scale(dpr, dpr);
+
+        // Clear background
+        ctx.fillStyle = colors.bg;
+        ctx.fillRect(0, 0, width, height);
+
+        if (data.length === 0) return;
+
+        const { offset, scale } = viewport;
+        const candleWidth = scale * 0.7; // 70% body, 30% gap
+        const rightMargin = 80; // Space for price scale
+        const chartWidth = width - rightMargin;
+
+        // Calculate visible range
+        // Visible candles = chartWidth / scale
+        const visibleCount = Math.ceil(chartWidth / scale);
+
+        // Index of the rightmost candle to show
+        // If offset is 0, we show data[len-1] at the right edge
+        const rightIndex = data.length - 1 - Math.floor(offset / scale);
+        const leftIndex = Math.max(0, rightIndex - visibleCount - 1);
+
+        // Subset for rendering
+        const visibleData = data.slice(leftIndex, rightIndex + 1);
+
+        if (visibleData.length === 0) return;
+
+        // Calculate Y-axis range (Min/Max Price)
+        let minPrice = Infinity;
+        let maxPrice = -Infinity;
+        visibleData.forEach(c => {
+            if (c.low < minPrice) minPrice = c.low;
+            if (c.high > maxPrice) maxPrice = c.high;
+        });
+
+        // Add padding to price range
+        const padding = (maxPrice - minPrice) * 0.1 || 1.0;
+        minPrice -= padding;
+        maxPrice += padding;
+        const priceRange = maxPrice - minPrice;
+
+        // Helper: Price to Y coordinate
+        const getY = (price) => height - ((price - minPrice) / priceRange) * height;
+
+        // Helper: Index to X coordinate
+        // We render from right to left conceptually
+        // X = chartWidth - ( (total_data_index - right_index_offset) * scale )
+        // Simply: x position relative to the right edge of the chart area
+        const getX = (index) => {
+            const posFromRight = (data.length - 1 - index) * scale + (offset % scale);
+            return chartWidth - posFromRight - (scale / 2);
+        };
+
+        // Draw Grid & Price Labels
+        ctx.strokeStyle = colors.grid;
+        ctx.lineWidth = 0.5;
+        ctx.fillStyle = colors.text;
+        ctx.font = '11px monospace';
+        ctx.textAlign = 'left';
+
+        // Vertical Price Grid
+        const gridLines = 8;
+        for (let i = 0; i <= gridLines; i++) {
+            const y = (height / gridLines) * i;
+            const price = maxPrice - (i / gridLines) * priceRange;
+
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(chartWidth, y);
+            ctx.stroke();
+
+            ctx.fillText(price.toFixed(2), chartWidth + 5, y + 4);
+        }
+
+        // Horizontal Time Grid (simplified)
+        // ... (could add time labels here)
+
+        // Draw Candles
+        visibleData.forEach((candle, i) => {
+            const originalIndex = leftIndex + i;
+            const x = getX(originalIndex);
+
+            const yOpen = getY(candle.open);
+            const yClose = getY(candle.close);
+            const yHigh = getY(candle.high);
+            const yLow = getY(candle.low);
+
+            const isUp = candle.close >= candle.open;
+            const color = isUp ? colors.up : colors.down;
+
+            ctx.fillStyle = color;
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1;
+
+            // Wick
+            ctx.beginPath();
+            ctx.moveTo(x, yHigh);
+            ctx.lineTo(x, yLow);
+            ctx.stroke();
+
+            // Body
+            const bodyH = Math.max(Math.abs(yClose - yOpen), 1);
+            ctx.fillRect(x - candleWidth / 2, Math.min(yOpen, yClose), candleWidth, bodyH);
+        });
+
+        // Draw Current Price Line (Bid)
+        if (tick && tick.bid) {
+            const yBid = getY(tick.bid);
+            if (yBid >= 0 && yBid <= height) {
+                ctx.strokeStyle = colors.crosshair;
+                ctx.setLineDash([4, 4]);
+                ctx.beginPath();
+                ctx.moveTo(0, yBid);
+                ctx.lineTo(chartWidth, yBid);
+                ctx.stroke();
+                ctx.setLineDash([]);
+
+                // Label
+                ctx.fillStyle = colors.crosshair;
+                ctx.fillRect(chartWidth, yBid - 10, 60, 20);
+                ctx.fillStyle = '#000';
+                ctx.fillText(tick.bid.toFixed(2), chartWidth + 5, yBid + 4);
+            }
+        }
+    }, [data, tick, viewport, colors]);
+
+    // Redraw when dependencies change
+    useEffect(() => {
+        draw();
+    }, [draw]);
+
+    // Interaction Handlers
+    const handleMouseDown = (e) => {
+        setIsDragging(true);
+        lastMouseX.current = e.clientX;
+    };
+
+    const handleMouseMove = (e) => {
+        if (!isDragging) return;
+        const deltaX = e.clientX - lastMouseX.current;
+        lastMouseX.current = e.clientX;
+
+        setViewport(prev => ({
+            ...prev,
+            offset: prev.offset - deltaX // Dragging right moves view left (history)
+        }));
+    };
+
+    const handleMouseUp = () => {
+        setIsDragging(false);
+    };
+
+    const handleWheel = (e) => {
+        e.preventDefault();
+        const zoomSensitivity = 0.001;
+        setViewport(prev => {
+            const newScale = Math.max(2, Math.min(50, prev.scale * (1 - e.deltaY * zoomSensitivity)));
+            return { ...prev, scale: newScale };
+        });
+    };
+
+    return (
+        <div
+            ref={containerRef}
+            className="chart-container"
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+            onWheel={handleWheel}
+            style={{
+                cursor: isDragging ? 'grabbing' : 'grab',
+                touchAction: 'none',
+                width: '100%',
+                height: '100%',
+                position: 'relative'
+            }}
+        >
+            <canvas ref={canvasRef} style={{ display: 'block' }} />
+
+            {/* Simple OHLC overlay */}
+            {data && data.length > 0 && (
+                <div style={{
+                    position: 'absolute',
+                    top: 10,
+                    left: 10,
+                    color: '#8b949e',
+                    fontFamily: 'monospace',
+                    fontSize: '12px',
+                    pointerEvents: 'none'
+                }}>
+                    Last: O:{data[data.length - 1].open.toFixed(2)} H:{data[data.length - 1].high.toFixed(2)} L:{data[data.length - 1].low.toFixed(2)} C:{data[data.length - 1].close.toFixed(2)}
+                </div>
+            )}
+        </div>
+    );
+}

frontend_react/src/components/PositionPanel.jsx

@@ -0,0 +1,57 @@
+import { XCircle } from 'lucide-react';
+
+export default function PositionPanel({ positions }) {
+    if (!positions || positions.length === 0) {
+        return (
+            <div className="pos-table-empty">
+                No open positions
+            </div>
+        );
+    }
+
+    return (
+        <div className="pos-table">
+            <div className="pos-header">
+                <div>Ticket</div>
+                <div>Type</div>
+                <div>Vol</div>
+                <div>Open</div>
+                <div>Current</div>
+                <div style={{ textAlign: 'right' }}>P&L</div>
+                <div style={{ textAlign: 'right' }}>Action</div>
+            </div>
+
+            {positions.map(pos => {
+                const isProfit = pos.profit >= 0;
+                return (
+                    <div key={pos.ticket} className="pos-row">
+                        <div className="pos-cell color-muted">#{pos.ticket}</div>
+                        <div className={`pos-cell font-bold ${pos.type === 'buy' ? 'color-green' : 'color-red'}`}>
+                            {pos.type.toUpperCase()}
+                        </div>
+                        <div className="pos-cell color-secondary">{pos.volume}</div>
+                        <div className="pos-cell">{pos.price_open.toFixed(2)}</div>
+                        <div className="pos-cell color-secondary">{pos.price_current.toFixed(2)}</div>
+                        <div className={`pos-cell-right font-bold ${isProfit ? 'color-green' : 'color-red'}`}>
+                            {pos.profit > 0 ? '+' : ''}{pos.profit.toFixed(2)}
+                        </div>
+                        <div className="pos-close-btn">
+                            <button
+                                title="Close Position"
+                                onClick={() => {
+                                    fetch('http://localhost:8000/api/trade', {
+                                        method: 'POST',
+                                        headers: { 'Content-Type': 'application/json' },
+                                        body: JSON.stringify({ action: 'close', ticket: pos.ticket })
+                                    });
+                                }}
+                            >
+                                <XCircle size={14} />
+                            </button>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

frontend_react/src/components/ReasoningSidebar.jsx

@@ -0,0 +1,72 @@
+import { useRef, useEffect } from 'react';
+import { Cpu, Activity } from 'lucide-react';
+
+export default function ReasoningSidebar({ logs, status }) {
+    const bottomRef = useRef(null);
+
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [logs]);
+
+    return (
+        <>
+            {/* Header */}
+            <div className="sidebar-header">
+                <div className="sidebar-header-left">
+                    <Cpu size={16} className={status === 'running' ? 'color-green anim-pulse' : 'color-muted'} />
+                    <span className="sidebar-header-title">GEMINI 3 FLASH</span>
+                </div>
+                <div className={`badge ${status === 'running' ? 'badge-green' : 'badge-red'}`}>
+                    {status.toUpperCase()}
+                </div>
+            </div>
+
+            {/* Log Stream */}
+            <div className="sidebar-body">
+                {(!logs || logs.length === 0) && (
+                    <div className="sidebar-empty">
+                        <Activity size={28} strokeWidth={1} />
+                        <span>Waiting for agent thoughts...</span>
+                    </div>
+                )}
+
+                {logs && [...logs].reverse().map((log, i) => (
+                    <div key={i} className="log-entry fade-in">
+                        <div className="log-entry-header">
+                            <span className={`badge ${log.action === 'BUY' ? 'badge-green' :
+                                    log.action === 'SELL' ? 'badge-red' :
+                                        log.action === 'CLOSE' ? 'badge-blue' :
+                                            'badge-neutral'
+                                }`}>
+                                {log.action}
+                            </span>
+                            <div className="confidence-info">
+                                <div className="confidence-bar-track">
+                                    <div
+                                        className={`confidence-bar-fill ${log.confidence > 0.7 ? 'confidence-bar-high' : 'confidence-bar-low'}`}
+                                        style={{ width: `${log.confidence * 100}%` }}
+                                    />
+                                </div>
+                                <span>{(log.confidence * 100).toFixed(0)}%</span>
+                            </div>
+                        </div>
+
+                        <p className="log-entry-body">{log.reasoning}</p>
+
+                        <div className="log-entry-footer">
+                            <span>{new Date(log.timestamp).toLocaleTimeString()}</span>
+                            <span>GEMINI-2.0-FLASH</span>
+                        </div>
+                    </div>
+                ))}
+                <div ref={bottomRef} />
+            </div>
+
+            {/* Footer */}
+            <div className="sidebar-footer">
+                <span className="live-dot" />
+                <span>Live connection established</span>
+            </div>
+        </>
+    );
+}

frontend_react/src/components/TradeControls.jsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { Play, Pause, Activity } from 'lucide-react';
+
+export default function TradeControls({ status, onToggleAgent, onManualTrade }) {
+    const [vol, setVol] = useState(0.01);
+    const [sl, setSl] = useState(0);
+    const [tp, setTp] = useState(0);
+
+    const isRunning = status === 'running';
+
+    return (
+        <div className="trade-controls-gap">
+            {/* Agent Toggle */}
+            <div className="agent-toggle">
+                <div className="agent-toggle-left">
+                    <div className={`agent-icon ${isRunning ? 'agent-icon-on anim-pulse' : 'agent-icon-off'}`}>
+                        <Activity size={16} />
+                    </div>
+                    <div>
+                        <div className="agent-info-title">Gemini Agent</div>
+                        <div className="agent-info-status">{isRunning ? 'Analyzing Market...' : 'Stopped'}</div>
+                    </div>
+                </div>
+                <button
+                    className={`btn ${isRunning ? 'btn-stop' : 'btn-start'}`}
+                    onClick={() => onToggleAgent(!isRunning)}
+                >
+                    {isRunning ? <><Pause size={12} /> STOP</> : <><Play size={12} /> START</>}
+                </button>
+            </div>
+
+            {/* Inputs */}
+            <div className="inputs-row">
+                <div className="input-group">
+                    <label className="input-label">Volume</label>
+                    <input
+                        type="number" step="0.01"
+                        value={vol} onChange={e => setVol(parseFloat(e.target.value))}
+                        className="input-field"
+                    />
+                </div>
+                <div className="input-group">
+                    <label className="input-label">SL</label>
+                    <input
+                        type="number" step="0.1"
+                        value={sl} onChange={e => setSl(parseFloat(e.target.value))}
+                        className="input-field"
+                        placeholder="Opt"
+                    />
+                </div>
+                <div className="input-group">
+                    <label className="input-label">TP</label>
+                    <input
+                        type="number" step="0.1"
+                        value={tp} onChange={e => setTp(parseFloat(e.target.value))}
+                        className="input-field"
+                        placeholder="Opt"
+                    />
+                </div>
+            </div>
+
+            {/* Buy / Sell */}
+            <div className="trade-buttons-row">
+                <button className="btn-buy" onClick={() => onManualTrade('BUY', vol, sl, tp)}>
+                    BUY
+                </button>
+                <button className="btn-sell" onClick={() => onManualTrade('SELL', vol, sl, tp)}>
+                    SELL
+                </button>
+            </div>
+        </div>
+    );
+}

frontend_react/src/index.css

@@ -0,0 +1,891 @@
+/* ============================================================
+   GEMINI TRADER - Trading Terminal Design System
+   ============================================================ */
+
+/* --- Color Tokens --- */
+:root {
+  --bg-primary: #080b14;
+  --bg-secondary: #0d1117;
+  --bg-panel: #161b22;
+  --bg-panel-hover: #1c2128;
+  --bg-elevated: #1e242c;
+  --bg-input: #0d1117;
+
+  --border-primary: rgba(255, 255, 255, 0.08);
+  --border-secondary: rgba(255, 255, 255, 0.04);
+  --border-hover: rgba(255, 255, 255, 0.15);
+
+  --text-primary: #e6edf3;
+  --text-secondary: #8b949e;
+  --text-muted: #484f58;
+  --text-heading: #f0f6fc;
+
+  --accent-gold: #f0b429;
+  --accent-gold-dim: rgba(240, 180, 41, 0.15);
+  --accent-green: #26a641;
+  --accent-green-bright: #3fb950;
+  --accent-green-dim: rgba(46, 160, 67, 0.15);
+  --accent-red: #da3633;
+  --accent-red-bright: #f85149;
+  --accent-red-dim: rgba(218, 54, 33, 0.15);
+  --accent-blue: #388bfd;
+  --accent-blue-dim: rgba(56, 139, 253, 0.15);
+  --accent-yellow: #d29922;
+  --accent-yellow-dim: rgba(210, 153, 34, 0.15);
+
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+
+  --transition-fast: 120ms ease;
+  --transition-normal: 200ms ease;
+}
+
+/* --- Global Reset --- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* --- App Layout --- */
+.app-layout {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+/* --- Top Bar --- */
+.top-bar {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  min-height: 44px;
+  max-height: 44px;
+  padding: 0 16px;
+  background-color: var(--bg-panel);
+  border-bottom: 1px solid var(--border-primary);
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.top-bar-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.top-bar-logo {
+  width: 24px;
+  height: 24px;
+  background: linear-gradient(135deg, #f0b429, #e67e22);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 9px;
+  color: #000;
+  letter-spacing: -0.5px;
+}
+
+.top-bar-title {
+  font-weight: 700;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+  color: var(--text-heading);
+}
+
+.top-bar-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* --- Main Content Area --- */
+.main-content {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* --- Chart Column (left side) --- */
+.chart-column {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* --- Chart Area --- */
+.chart-area {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  background-color: var(--bg-secondary);
+  overflow: hidden;
+}
+
+.chart-container {
+  position: absolute;
+  inset: 0;
+  cursor: crosshair;
+}
+
+.chart-container canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.chart-ohlc-overlay {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  display: flex;
+  gap: 12px;
+  padding: 6px 10px;
+  background: rgba(8, 11, 20, 0.75);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  pointer-events: none;
+  z-index: 5;
+}
+
+.chart-ohlc-overlay span {
+  white-space: nowrap;
+}
+
+.chart-ohlc-value {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+/* --- Trade Controls Overlay --- */
+.trade-overlay {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 260px;
+  z-index: 10;
+  background: rgba(22, 27, 34, 0.92);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  padding: 14px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+/* --- Positions Panel (bottom of chart column) --- */
+.positions-panel {
+  height: 180px;
+  min-height: 180px;
+  max-height: 180px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--border-primary);
+  background-color: var(--bg-panel);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.positions-panel-header {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border-secondary);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.positions-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px;
+  min-height: 0;
+}
+
+/* --- Sidebar --- */
+.sidebar {
+  width: 360px;
+  min-width: 360px;
+  max-width: 360px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--border-primary);
+  background-color: var(--bg-secondary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 44px;
+  min-height: 44px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-primary);
+  background-color: var(--bg-panel);
+}
+
+.sidebar-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sidebar-header-title {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  color: var(--text-heading);
+}
+
+.sidebar-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.sidebar-footer {
+  height: 32px;
+  min-height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  border-top: 1px solid var(--border-primary);
+  background-color: var(--bg-primary);
+  font-size: 10px;
+  color: var(--text-muted);
+  gap: 6px;
+}
+
+.sidebar-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  color: var(--text-muted);
+  gap: 8px;
+  font-size: 12px;
+}
+
+/* --- Status Badge --- */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  border: 1px solid transparent;
+}
+
+.badge-green {
+  background: var(--accent-green-dim);
+  border-color: rgba(46, 160, 67, 0.2);
+  color: var(--accent-green-bright);
+}
+
+.badge-red {
+  background: var(--accent-red-dim);
+  border-color: rgba(218, 54, 33, 0.2);
+  color: var(--accent-red-bright);
+}
+
+.badge-blue {
+  background: var(--accent-blue-dim);
+  border-color: rgba(56, 139, 253, 0.2);
+  color: var(--accent-blue);
+}
+
+.badge-yellow {
+  background: var(--accent-yellow-dim);
+  border-color: rgba(210, 153, 34, 0.2);
+  color: var(--accent-yellow);
+}
+
+.badge-neutral {
+  background: rgba(110, 118, 129, 0.1);
+  border-color: rgba(110, 118, 129, 0.2);
+  color: var(--text-secondary);
+}
+
+/* --- Account Bar --- */
+.account-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.account-metrics {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.account-metric {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.account-metric-label {
+  color: var(--text-muted);
+}
+
+.account-metric-value {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.connection-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-secondary);
+}
+
+.connection-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.connection-dot-on {
+  background-color: var(--accent-green-bright);
+  box-shadow: 0 0 6px var(--accent-green);
+}
+
+.connection-dot-off {
+  background-color: var(--accent-red);
+}
+
+/* --- Log Entry Card --- */
+.log-entry {
+  background: var(--bg-panel);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--radius-md);
+  padding: 10px 12px;
+  transition: border-color var(--transition-normal);
+}
+
+.log-entry:hover {
+  border-color: var(--border-hover);
+}
+
+.log-entry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.log-entry-body {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  font-family: var(--font-sans);
+}
+
+.log-entry-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border-secondary);
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+.confidence-bar-track {
+  width: 48px;
+  height: 4px;
+  background: rgba(110, 118, 129, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.confidence-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width var(--transition-normal);
+}
+
+.confidence-bar-high {
+  background: var(--accent-green-bright);
+}
+
+.confidence-bar-low {
+  background: var(--accent-yellow);
+}
+
+.confidence-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+/* --- Trade Controls --- */
+.agent-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+}
+
+.agent-toggle-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.agent-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.agent-icon-on {
+  background: var(--accent-green-dim);
+  color: var(--accent-green-bright);
+}
+
+.agent-icon-off {
+  background: rgba(110, 118, 129, 0.15);
+  color: var(--text-muted);
+}
+
+.agent-info-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-heading);
+}
+
+.agent-info-status {
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+
+/* --- Buttons --- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  outline: none;
+}
+
+.btn:active {
+  transform: scale(0.97);
+}
+
+.btn-start {
+  background: var(--accent-green-dim);
+  color: var(--accent-green-bright);
+}
+
+.btn-start:hover {
+  background: rgba(46, 160, 67, 0.25);
+}
+
+.btn-stop {
+  background: var(--accent-red-dim);
+  color: var(--accent-red-bright);
+}
+
+.btn-stop:hover {
+  background: rgba(218, 54, 33, 0.25);
+}
+
+.btn-buy {
+  flex: 1;
+  padding: 10px 0;
+  background: var(--accent-green);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  border-radius: var(--radius-md);
+  border: none;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  box-shadow: 0 2px 8px rgba(38, 166, 65, 0.2);
+}
+
+.btn-buy:hover {
+  background: var(--accent-green-bright);
+}
+
+.btn-buy:active {
+  transform: scale(0.97);
+}
+
+.btn-sell {
+  flex: 1;
+  padding: 10px 0;
+  background: var(--accent-red);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  border-radius: var(--radius-md);
+  border: none;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  box-shadow: 0 2px 8px rgba(218, 54, 33, 0.2);
+}
+
+.btn-sell:hover {
+  background: var(--accent-red-bright);
+}
+
+.btn-sell:active {
+  transform: scale(0.97);
+}
+
+/* --- Input Fields --- */
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.input-label {
+  font-size: 10px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.input-field {
+  width: 100%;
+  padding: 6px 8px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.input-field:focus {
+  border-color: var(--border-hover);
+}
+
+.inputs-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
+}
+
+.trade-buttons-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.trade-controls-gap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* --- Position Table --- */
+.pos-table-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.pos-table {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pos-header {
+  display: grid;
+  grid-template-columns: 1fr 0.7fr 0.7fr 1fr 1fr 0.8fr 0.5fr;
+  padding: 4px 10px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.pos-row {
+  display: grid;
+  grid-template-columns: 1fr 0.7fr 0.7fr 1fr 1fr 0.8fr 0.5fr;
+  align-items: center;
+  padding: 8px 10px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+}
+
+.pos-row:hover {
+  background: var(--bg-panel-hover);
+  border-color: var(--border-hover);
+}
+
+.pos-cell {
+  font-family: var(--font-mono);
+}
+
+.pos-cell-right {
+  text-align: right;
+  font-family: var(--font-mono);
+}
+
+.pos-close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pos-close-btn button {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+}
+
+.pos-close-btn button:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+/* --- Color Utility Classes --- */
+.color-green {
+  color: var(--accent-green-bright);
+}
+
+.color-red {
+  color: var(--accent-red-bright);
+}
+
+.color-blue {
+  color: var(--accent-blue);
+}
+
+.color-gold {
+  color: var(--accent-gold);
+}
+
+.color-muted {
+  color: var(--text-muted);
+}
+
+.color-secondary {
+  color: var(--text-secondary);
+}
+
+.color-primary {
+  color: var(--text-primary);
+}
+
+.color-heading {
+  color: var(--text-heading);
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-mono {
+  font-family: var(--font-mono);
+}
+
+/* --- Scrollbar --- */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(110, 118, 129, 0.3);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(110, 118, 129, 0.5);
+}
+
+/* --- Animations --- */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes liveDot {
+
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 4px var(--accent-green);
+  }
+
+  50% {
+    opacity: 0.4;
+    box-shadow: 0 0 1px var(--accent-green);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.25s ease-out forwards;
+}
+
+.anim-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.live-dot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: var(--accent-green-bright);
+  animation: liveDot 2s ease-in-out infinite;
+}
+
+/* --- Mobile Warning --- */
+.mobile-warning {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .app-layout>*:not(.mobile-warning) {
+    display: none;
+  }
+
+  .mobile-warning {
+    display: flex;
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background: var(--bg-primary);
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+    text-align: center;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .mobile-warning h2 {
+    font-size: 18px;
+    color: var(--accent-gold);
+    margin: 0;
+  }
+
+  .mobile-warning p {
+    color: var(--text-secondary);
+    font-size: 13px;
+  }
+}

frontend_react/src/lib/useWebSocket.js

@@ -0,0 +1,87 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export const useWebSocket = (url) => {
+    const [data, setData] = useState(null);
+    const [connected, setConnected] = useState(false);
+    const ws = useRef(null);
+    const reconnectTimer = useRef(null);
+    const mountedRef = useRef(true);
+    const reconnectDelay = useRef(1000);
+
+    const connect = useCallback(() => {
+        if (!mountedRef.current) return;
+
+        // Clean up any existing connection
+        if (ws.current) {
+            ws.current.onopen = null;
+            ws.current.onclose = null;
+            ws.current.onmessage = null;
+            ws.current.onerror = null;
+            if (ws.current.readyState === WebSocket.OPEN || ws.current.readyState === WebSocket.CONNECTING) {
+                ws.current.close();
+            }
+        }
+
+        console.log('[WS] Connecting to', url);
+        ws.current = new WebSocket(url);
+
+        ws.current.onopen = () => {
+            if (!mountedRef.current) return;
+            console.log('[WS] Connected');
+            setConnected(true);
+            reconnectDelay.current = 1000; // Reset backoff on success
+        };
+
+        ws.current.onclose = (event) => {
+            if (!mountedRef.current) return;
+            console.log('[WS] Disconnected, code:', event.code);
+            setConnected(false);
+
+            // Auto-reconnect with exponential backoff
+            const delay = reconnectDelay.current;
+            reconnectDelay.current = Math.min(delay * 2, 10000);
+            console.log(`[WS] Reconnecting in ${delay}ms...`);
+            reconnectTimer.current = setTimeout(() => {
+                if (mountedRef.current) connect();
+            }, delay);
+        };
+
+        ws.current.onmessage = (event) => {
+            try {
+                const message = JSON.parse(event.data);
+                setData(message);
+            } catch (err) {
+                console.error('[WS] Parse Error', err);
+            }
+        };
+
+        ws.current.onerror = (err) => {
+            console.error('[WS] Error', err);
+        };
+    }, [url]);
+
+    useEffect(() => {
+        mountedRef.current = true;
+        connect();
+
+        return () => {
+            mountedRef.current = false;
+            clearTimeout(reconnectTimer.current);
+            if (ws.current) {
+                ws.current.onopen = null;
+                ws.current.onclose = null;
+                ws.current.onmessage = null;
+                ws.current.onerror = null;
+                ws.current.close();
+            }
+        };
+    }, [connect]);
+
+    const sendMessage = useCallback((msg) => {
+        if (ws.current && ws.current.readyState === WebSocket.OPEN) {
+            ws.current.send(JSON.stringify(msg));
+        }
+    }, []);
+
+    return { connected, data, sendMessage };
+};

frontend_react/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend_react/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

verify_strict_mode.py

@@ -0,0 +1,44 @@
+import os
+import sys
+
+# Ensure we can import from backend
+sys.path.append(os.path.join(os.getcwd(), 'backend'))
+
+# Mocking environment for the test
+os.environ["FORCE_MT5_DATA"] = "true"
+os.environ["MT5_PATH"] = r"C:\Program Files\MetaTrader 5\terminal64.exe" # Typical path
+
+try:
+    # Try importing directly if we are in the folder, or via backend if not
+    try:
+        from backend.mt5_mcp import MT5Bridge
+    except ImportError:
+        sys.path.append(os.getcwd())
+        from mt5_mcp import MT5Bridge
+
+    print("[TEST] Importing MT5Bridge successful.")
+    
+    bridge = MT5Bridge()
+    print(f"[TEST] Bridge initialized. Simulation mode: {bridge.simulation_mode}")
+    
+    # We expect this to FAIL if MT5 is not installed/running, or SUCCEED if it is.
+    # But crucially, it should NOT return success=True with mode="simulation"
+    result = bridge.initialize()
+    print(f"[TEST] Initialize result: {result}")
+    
+    if result["success"] and result.get("mode") == "simulation":
+        print("[FAIL] Strict mode failed! It fell back to simulation.")
+        sys.exit(1)
+    elif not result["success"] and "CRITICAL" in result["message"]:
+        print("[PASS] Strict mode correctly blocked simulation (or MT5 connect failed as expected in test env).")
+    elif result["success"] and result.get("mode") != "simulation":
+         print("[PASS] Connected to real MT5.")
+    else:
+        print(f"[WARN] Unexpected state: {result}")
+
+except ImportError:
+    print("[PASS] Strict mode correctly raised ImportError (if MT5 lib missing).")
+except Exception as e:
+    print(f"[TEST] Exception: {e}")
+    import traceback
+    traceback.print_exc()