Frontend Visualization

The Trading System Dashboard provides a comprehensive interface for analyzing backtest results and monitoring live trading operations. Built with a modern React frontend and a FastAPI backend, the visualization layer translates complex multi-agent reasoning into actionable insights and performance metrics.

Dashboard Overview

The dashboard is designed for high-density information display, utilizing a dark-themed interface to prioritize data legibility. It serves as the primary interface for:

• Performance Analysis: Evaluating equity growth and risk-adjusted returns.
• Agent Transparency: Inspecting the specific reasoning and confidence levels of the AI agents behind every trade.
• Real-time Monitoring: Tracking live trade execution through WebSocket integration.

Key Visualization Components

1. Performance Metrics Panel

The metrics panel provides a high-level summary of strategy effectiveness. It extracts data from the backtest engine to calculate key financial indicators:

• Total Return (%): Cumulative percentage gain or loss.
• Sharpe Ratio: Risk-adjusted return metric.
• Max Drawdown: The largest peak-to-trough decline.
• Win Rate: Percentage of profitable trades.
• Alpha vs Hold: Performance relative to a simple Buy & Hold strategy for the same asset.

2. Equity Curve & Trade Mapping

The primary chart visualizes the portfolio value over time.

• Time-Series Plot: Displays the equity curve against the underlying asset price (e.g., BTC/USD).
• Trade Markers: Overlay markers on the chart indicate exactly where entry (BUY) and exit (SELL) points occurred, allowing for visual correlation between market movements and agent decisions.

3. Trade Execution Log & Agent Reasoning

This is the most critical component for debugging and strategy refinement. For every trade, the dashboard displays:

• Action & Price: Standard execution details (e.g., BUY @ $45,000).
• Confidence Score: A 0-100 scale representing the consensus strength among agents.
• Reasoning Breakdown: Detailed text logs from the Technical, Sentiment, Fundamental, and Risk agents explaining the logic behind the trade.

Real-Time Updates via WebSockets

The frontend implements a WebSocket client that listens for live events from the backend orchestrator. When the trading system is running in live mode:

• The dashboard status badge switches to "Live".
• New trades appear instantly in the log without requiring a page refresh.
• Metric cards update dynamically as the portfolio value fluctuates.

Usage Guide

Running the Visualization Suite

The dashboard requires both the backend API and the frontend development server to be active.

1. Start the Backend API:

# From the project root
python dashboard/backend/main.py

The API will be available at http://localhost:8000. You can view the interactive Swagger documentation at /docs.

2. Start the Frontend:

# Navigate to the frontend directory
cd dashboard/frontend
npm install
npm run dev

The dashboard will be accessible at http://localhost:5173.

Selecting Backtests

Use the dropdown selector at the top of the page to toggle between different backtest runs stored in the database. The dashboard will automatically update all charts and metrics to reflect the selected session.

Data Integration API

For developers looking to extend the visualization or integrate with other tools, the backend exposes several REST endpoints:

| Endpoint | Method | Description | | :--- | :--- | :--- | | /api/backtests | GET | Returns a summary list of all available backtest reports. | | /api/backtests/{id} | GET | Returns detailed time-series data, trades, and metrics for a specific run. | | /ws | WS | WebSocket endpoint for receiving real-time trade signals. |

Example Trade Data Object

The frontend consumes trade data in the following structured format:

{
  "id": 105,
  "timestamp": "2024-03-20T14:30:00Z",
  "action": "BUY",
  "price": 63200.50,
  "reasoning": "Technical agent reports oversold RSI; Sentiment agent notes positive news flow...",
  "confidence": 85,
  "metadata": {
    "rsi_signal": "OVERSOLD",
    "stop_loss": 61000.00
  }
}