Dashboard & UI
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard and User Interface of Rabid Raccoon provide a multi-layered visualization and analysis platform for MES (Micro E-mini S&P 500) futures and related global markets. The UI is designed to synthesize high-frequency market data, technical indicators, and AI-driven analysis into a cohesive trading environment. It spans from broad market overview grids to specialized intraday dashboards focused on specific trading setups like "Touch-Hook-Go".
Sources: src/components/MarketsPage.tsx, src/components/MesIntraday/MesIntradayDashboard.tsx
Component Architecture
The UI is built using a modular component architecture that separates data fetching (via hooks like useMarketBatch and useMesSetups) from presentation. The primary entry points are the MarketsPage for general overview and MesIntradayDashboard for active trading sessions.
Layout Overview
| Component | Description |
|---|---|
MarketsPage | The primary hub, containing the analysis panel, hero chart, and markets grid. |
AnalysePanel | A tri-functional interface for triggering AI chart vision, macro analysis, and trade scanning. |
MarketsGrid | A categorized display (Equity, Commodities, Macro) of market tiles with real-time direction and confidence. |
TechChart | A specialized SVG-based chart for rendering MES 15-min price action, Fibonacci levels, and measured moves. |
SetupLog | A chronological feed of intraday setup phases (Touched, Hooked, Go Fired). |
Sources: src/components/MarketsPage.tsx:14-55, src/components/AnalysePanel.tsx:75-164, src/components/MarketsGrid.tsx:37-88, src/components/TechChart.tsx:21-45, src/components/MesIntraday/SetupLog.tsx:44-111
Data Flow for Market Analysis
The UI employs a reactive data flow where analysis results from the AnalysePanel are propagated to the MarketsGrid to override default signal data with high-confidence AI insights.
This diagram shows how analysis data flows from the specialized analysis component back through the main page to update individual market tiles.
Sources: src/components/MarketsPage.tsx:15-18, src/components/MarketsGrid.tsx:30-65
Specialized Analysis Modules
The AnalysePanel serves as the central orchestration point for three distinct analysis workflows.
AI Chart Vision
Users can capture a screenshot of the current chart and send it to an AI backend (Claude Opus 4.6). The API accepts a base64 image and returns structured technical patterns, including reversals, continuations, and key price levels.
Sources: src/components/AnalysePanel.tsx:88-111, src/app/api/analyse/chart/route.ts:15-38
Market Macro Analysis
This module fetches comprehensive market context including regime factors, correlations, and news theme scores. It classifies the market into RISK-ON, RISK-OFF, or MIXED regimes.
Sources: src/components/AnalysePanel.tsx:113-131, src/components/AnalysePanel.tsx:291-314
Measured Move Trade Scanner
The "Upcoming Trades" module scans for AB=CD measured move patterns across 15M and 1H timeframes. It visualizes entry, stop, and target levels with a quality score.
Sources: src/components/AnalysePanel.tsx:133-151, src/components/AnalysePanel.tsx:408-511
Technical Charting Engine
The TechChart component provides a custom SVG implementation for technical visualization. Unlike standard charting libraries, it is optimized for overlaying specific Rabid Raccoon logic.
Visualization Layers
- Price Action: Candlestick rendering with color coding for bullish/bearish sessions.
- Fibonacci: Subtle dashed lines for ratios between 0 and 1.
- Trade Levels: Distinct horizontal markers for Entry (White), Stop (Red), and Target (Green).
- Measured Moves: Polyline paths (A→B→C→D) showing forming or active patterns.
- Swing Points: Tiny dots marking local highs and lows detected by the system.
Sources: src/components/TechChart.tsx:55-155, src/components/TechChart.tsx:180-224
This sequence diagram illustrates the internal rendering order of the custom SVG charting component to ensure correct layering of indicators over price.
Sources: src/components/TechChart.tsx:47-240
Intraday Dashboard & Setup Tracking
The MesIntradayDashboard is a specialized interface for active MES trading. It focuses on the "Touch-Hook-Go" methodology.
Setup Lifecycle
The SetupLog tracks the progression of trades through specific phases:
- TOUCHED: Price has reached a significant level.
- HOOKED: Price has begun to react/retrace from the level.
- GO_FIRED: The entry signal has been triggered.
- INVALIDATED/EXPIRED: The setup is no longer tradeable.
Sources: src/components/MesIntraday/SetupLog.tsx:21-32, src/components/MesIntraday/SetupLog.tsx:44-60
Dashboard Tiles
The top row of the intraday dashboard provides immediate status updates:
- StatusTile: Shows counts of active setups in each phase and current price.
- SignalTile: Highlights the "Lead Setup" (typically the most recent
GO_FIREDsignal). - RiskTile: Displays risk metrics and grade (A, B, or C) for the active trade.
Sources: src/components/MesIntraday/MesIntradayDashboard.tsx:47-57, src/components/MesIntraday/SetupLog.tsx:85-101
Conclusion
The Dashboard & UI system provides a highly technical, data-dense environment for futures trading. By combining custom SVG charting with modular AI analysis panels and real-time setup logging, it enables traders to move from macro-regime identification to precise intraday execution within a single unified interface.