Live L2 Order Book + Trade Tape visualization (Bookmap-style)
New components:
- hyperliquid-ws.ts: WebSocket hook for Hyperliquid L2 + trades
- Auto-reconnect, ring buffer (500 trades)
- Computes imbalance, total bid/ask volume, mid, spread
- Type-safe interfaces: L2Snapshot, TradeTapeEntry
- orderbook-depth-map.tsx: Dual-panel Canvas 2D visualization
- Top panel (~55%): L2 volume profile histogram
- Green bid bars (#00C853), red ask bars (#FF1744)
- Yellow mid line (#FFEB3B) with floating price labels
- Price axis, volume scale, orange mid marker
- Quant overlay system: fair value, VWAP, signals
- Bottom panel (~45%): Live trade tape
- Amber trade path (#FFAB00)
- Buy/sell markers (green/red dots sized by trade size)
- Latest trade callout with side + price
- Dark theme (#000000), monospace fonts, zero flicker
Integration:
- Added to all strategy detail views (live tab only)
- Renders below trade history table
- WebSocket connects on mount, reconnects on error
Visual specification per user request:
- Bid/ask bars: neon green/red on pure black
- Mid line: yellow dashed with floating labels
- Trade path: amber staircase with colored markers
- No grid clutter, professional trading terminal aesthetic
ramseshk
2f74e076b4