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, or NEUTRAL).
• 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 (CALM vs VOLATILE) 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_scan task 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):

1. Poll: Requests /api/scan to trigger the latest sequence analysis.
2. Fetch: Consumes /api/results to update the local React state.
3. 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.