Observatory UI Overview
The Observatory is the central command-and-control interface for Signal.Engine. Built with React, Vite, and Tailwind CSS, it provides a high-fidelity, real-time visualization of the AI's "thought process," market signals, and paper-trading performance.
The interface is designed for high-density information display, utilizing a custom "Void" design system with glassmorphism effects and editorial-grade typography (Syne & JetBrains Mono).
Core Interface Modules
1. The Signal Panel (Intelligence Feed)
This is the primary module where the "Brain" outputs its decisions. Each signal is presented as an actionable card containing:
- Ticker & Action: The target asset (e.g.,
RELIANCE.NS) and the recommended operation (BULLISH,BEARISH, orNEUTRAL). - Confidence Score: A percentage derived from the LSTM/PPO consensus. Signals above 85% confidence trigger system alerts.
- Decision Rationale: A list of heuristic and quantitative "reasons" generated by the hybrid brain (e.g., "High Volatility detected," "LSTM Sequence confirm").
- Quantitative Risk (QuantRisk): Real-time calculation of Expected Value (EV), Win Rate, and Value at Risk (VaR 95%).
2. Strategic Portfolio HUD
The top-level simulation bar tracks the performance of the integrated RL agent in a live-emulated environment:
- Balance & Equity: Real-time tracking of capital.
- Market Mood: A global heuristic indicator (
CALMvsVOLATILE) that dictates the agent's aggression level. - Portfolio Status: Visual indicators of current drawdowns or profit peaks.
3. Thinking Nodes (Scanner Status)
The UI features a background execution tracker that monitors the src.api.main background tasks.
- Pulse Indicator: A visual "heartbeat" when the brain is actively processing sequences.
- Scanning State: Displays "Thinking..." when the
background_scantask is running via the FastAPI backend.
Signal Grading & Visual Indicators
The Observatory uses a semantic color system to represent risk and opportunity at a glance:
| Badge Style | Meaning | Confidence Range |
| :--- | :--- | :--- |
| Signal-Sage | High-conviction Buy/Long | > 75% |
| Signal-Crimson | High-conviction Sell/Short | > 75% |
| Signal-Amber | Cautionary/Neutral Hold | 40% - 70% |
| Signal-Muted | Low confidence/Insufficent Data | < 40% |
Real-Time Features
Browser Notifications
The notificationService integrates with the Browser Notification API to provide desktop alerts.
- High Confidence Alerts: Automatically triggered for any signal with $\ge 85%$ confidence.
- Portfolio Thresholds: Notifications are dispatched if the simulation equity breaches specific profit or loss milestones.
Live Telemetry Loop
The dashboard operates on a 2000ms polling cycle (configurable in App.tsx):
- Poll: Requests
/api/scanto trigger the latest sequence analysis. - Fetch: Consumes
/api/resultsto update the local React state. - Sync: Updates the Simulation Engine state to ensure the UI reflects the latest trades executed by the back-end.
Configuration & Deployment
API Connection
The frontend communicates with the FastAPI backend via axios. Ensure your backend is running at the expected endpoint:
// Located in frontend/src/App.tsx
axios.get('http://localhost:8000/api/simulation/state')
Running the Dashboard
To launch the Observatory in a development environment:
cd frontend
npm install
npm run dev
Production Build
To generate a static optimized build (which the FastAPI server can serve via StaticFiles):
npm run build
The resulting files in frontend/dist (or build) are optimized for low-latency updates and PWA (Progressive Web App) compatibility.