The official ttTrader frontend — a full-featured, 6-page trading console with real-time market data, algo intelligence, portfolio exposure, execution controls, and a Studio for recording & playback.
managerWebSocket_c). On connect it receives a full state snapshot,
then
incremental updates every 200ms. Order and fill events are pushed immediately.
Built with React 18, TypeScript 5, Recharts for charting, Tailwind CSS, and Vite for builds.
Zero additional server infrastructure required.
Sticky top bar with live feed state, latency, quote freshness, reconnect counters, sequence-gap diagnostics, and parsing/runtime telemetry. Always visible — you always know the health of your data feed.
Branded header with rotating account stats (equity, margin, P&L) and an execution-mode badge showing PRODUCTION, SIMULATION, or PLAYBACK. Mode-aware — the UI adapts to the backend state.
Workspace persisted in the URL query string:
?page=runtime&scope=2&symbol=BTC::Bitfinex.
Deep-link directly into any page, algo scope, or symbol. Browser back/forward navigates your
trading
workspace.
| Key | Action |
|---|---|
| 1–6 | Switch between the six trading pages |
| J / K | Cycle focused symbol up / down |
| [ / ] | Cycle algo scope |
| G | Clear algo scope (view all) |
| R | Send reduce-only |
| C | Cancel all orders |
| F | Flatten all positions |
Auto-reconnect with exponential backoff across candidate URLs. Stale-feed watchdog triggers reconnect after 45s of silence. Short disconnect (<60s): positions/orders preserved, stale surfaces clearly marked. Long disconnect (≥60s): full state reset — fresh snapshot on reconnect. Sequence-gap detection triggers immediate reconnect on message loss.
The landing page. At-a-glance health of your entire trading operation.
Scope selector (filter by algo) and KPI strip showing aggregate metrics across all strategies. One-click to drill into any algo.
Per-exchange connection status for Market Data, Account, and Trading streams. Stream states: connected (3), connecting (1), disconnected (0), N/A (−1). Unused streams excluded from health calculation.
All loaded algos with status: RUNNING, STOPPED, HALTED, or REDUCE_ONLY. Start time, status message, and quick-scope link per algo.
Active instruments grouped by exchange. Quote freshness and instrument count per venue.
Aggregate position count, total exposure, and active order count. Red/amber/green status indicators.
Reconnect counters, flush cadence (200ms timer health), sequence gaps detected, parse errors, pending-drop counters. Deep visibility into the data pipeline.
Everything about your running strategies — KPIs, status, positions, orders, and P&L curves.
Key metrics aggregated per algo: win rate, total P&L, Sharpe estimate, trade count, average hold time. Filter by scope — view all algos or drill into one.
Full lifecycle state per algo with transitions: STOPPED → RUNNING → HALTED. Visual indicators for running, stopped, halted, and undefined states.
Per-algo attribution list with quick scoping. Click any algo to scope the entire dashboard to that strategy. See exactly which algo is driving P&L.
Visual stacked or grouped chart showing contribution per algo to total P&L, exposure, or trade count. Identify top and bottom performers instantly.
Time-series equity curve with per-currency breakdown. Session mode (absolute) and Delta mode (PnL). What-if projection line showing equity if all positions were closed now. Dynamic fill gradient: green above zero, red below.
All positions filtered by current scope. Instrument, direction, size, entry price, mark price, unrealized P&L, fees. Instrument-aware precision formatting.
Active orders filtered by scope. Order ID, instrument, side, type, limit, size/size-left, state, timestamps. Quick status at a glance.
Live market data visualization with latency analysis, price charts, and trade tape.
Distribution of exchange-to-dashboard latency with p50, p95, p99 percentiles. Sliceable by exchange and instrument. Live-updating histogram with 2500 retained samples per key.
Acknowledgement timing distribution — time from order submission to exchange confirmation. Identify venue-specific latency characteristics.
Scrollable instrument list with live bid/ask/spread. Click any instrument to set the active focus — the chart, trade tape, and detail panels all switch to that symbol. Sort by symbol, exchange, spread.
Visual clock showing current UTC time with major market session overlaps (Asia, Europe, US). Helps contextualize volume and volatility patterns.
The centerpiece of market analysis. Multiple candle sources:
Real-time trade-by-trade feed for the focused instrument. Price, size, aggressor side (buy/sell), timestamp. Last 64 trades retained. Color-coded: green for buyer aggressor, red for seller.
Full metadata for the focused instrument: base/quote currency, price step, size step, min/max order size, contract size, maker/taker fees, leverage limits, instrument type.
Understand where your capital is deployed and where your risk lies.
Grid visualization of exposure across instruments and algos. Color intensity scales with position size. Click any cell to focus that symbol — the quotes panel, chart, and details all sync. Hover for exact exposure values.
Dedicated workspace for a single instrument: quote context (bid/ask/spread), pressure indicators, recent range, and combined order + execution ledger. Everything about one symbol in one view.
Per-exchange, per-currency breakdown: spot balance, available margin, used margin, total equity, buying power, session P&L, total P&L. Value delta precision from instrument metadata.
All positions with instrument-aware precision formatting. Symbol, direction (LONG/SHORT), size, entry price, mark price, unrealized P&L, fees, algo attribution. Sorted and filterable.
Equity time-series with Spot (green) and Margin (gold) area breakdown. Delta mode for session P&L with Spot/Margin/Combined/Overlay source selection. What-if projection line.
Ranked drawdown events: peak equity, trough equity, drawdown %, duration, recovery time. Identify worst-case scenarios and recovery patterns at a glance.
Complete order lifecycle visibility — from creation to fill, with emergency risk controls one keystroke away.
Activity summary: orders created, filled, cancelled, failed — per time window. Throughput metrics and fill rate statistics. Identify execution quality issues before they become problems.
Fill price vs. expected price analysis. Slippage distribution. Fee breakdown by exchange and instrument. Maker vs. taker fill ratio per algo.
Dedicated alert strip for anomalies: failed orders (with error reasons), drawdown pressure (positions approaching stop levels), risk-action anomalies. Never miss a problem.
Three emergency buttons with keyboard shortcuts: Reduce-Only (R) — all algos stop opening new positions. Cancel-All (C) — cancel every open order. Flatten-All (F) — market-close all positions. Each action tracked with request ID, ACK/NACK response, and timeout handling.
Live feed of the most recent fills: instrument, side, size, price, fee, timestamp. Color-coded by direction. 2000 retained executions.
Complete position lifecycle tracking. Each row is a closed turn: algo, instrument, direction, entry/exit price, size, realized P&L, fees, duration. Algo turn metrics: win rate, average win/loss, profit factor.
Complete order history with tabs: Active, Cancelled, Failed, All. Every order field visible: ID, instrument, side, type, limit, size, filled, state, location, algo, timestamps. 100 retained terminal orders per bucket.
The Studio page turns your trading desk into a research lab. Record live market data, replay it at any speed, and analyze strategy behavior with frame-by-frame precision — all through the same dashboard.
Start/stop recording of live JSON trading data directly from the backend.
Sessions saved as .ttpb files with full event fidelity — orders, fills, positions,
quotes, trades, account snapshots, and instrument state. Live status shows event count and
file size during recording.
Mode-aware: Recording controls only available in PRODUCTION or SIMULATION mode. Automatically hidden during playback.
Full playback transport: Play, Pause, Stop, Single-Step Forward. Speed selector: 1×, 10×, 100×. Loop mode for continuous replay. Click-to-seek on the interactive timeline.
Mode-aware: Transport controls only available in PLAYBACK mode.
Browse, load, delete, and rename .ttpb files from the server.
Each entry displays: file name, size (bytes), date range (start → end), total event count, and
contained instrument symbols. Click to load into the playback engine.
Visual scrubber showing playback progress as a filled bar. Current position marker with elapsed time. Click anywhere to seek. Hover for exact position preview. Events processed vs. total events counter.
Active playback session details: current file name, playback state (idle/loaded/playing/paused/complete/error), current speed, progress percentage, elapsed time range, events processed / total events. Recording session details: state, events recorded, current file size.
symbol::exchange.
Every component — the quotes panel, price chart, trade tape, positions table, orders table — reads
from
this single structure. No mixed-snapshot rendering. No fallback chains. Quote + instrument always
from the same entry.
Every field has exactly one canonical key name. No aliases, no alternative
spellings.
The strictRecord.ts parser enforces this at runtime: rejects unexpected keys,
throws on
missing mandatory fields, never silently fabricates defaults. A full codebase audit identified
and
tracked critical fallback patterns for remediation — no || 0 for missing P&L,
no || 'UNKNOWN' for missing exchange names.
Terminal orders are immutable — FILLED, CANCELED, FAILED, DELETED orders are frozen. Stale snapshots attempting to resurrect terminal orders are silently dropped. Defined-fields-only merge — deltas only update explicitly provided keys. Snapshot-only fields preserved across delta updates. Executions are append-only — each execution is a distinct entry by ID; duplicates throw.
| Data | Retention |
|---|---|
| Trade history per instrument | 64 prints |
| Trade candles | 120 × 1-min candles |
| Midpoint candles | 120 × 1-min candles |
| Quote statistics keys | 3000 (target 2500) |
| Feed latency samples | 2500 per key |
| Account history | 180 points |
| Terminal orders | 100 per bucket |
| Executions | 2000 |