engineering · quant-uiSHIPPED 2026-08-01 · UTC+8
00 / case study
Operator cockpit for a systematic crypto-alpha desk.
An operator cockpit for a systematic crypto-alpha desk: live chart, strategy registry, entry finder, 7-timeframe switcher. Built under a 5-gate ship contract, NDA-clean by construction.
01 / setup
Context, scope, and the constraint that bound the design.
The desk runs systematic crypto-alpha strategies on BTC, ETH, and SOL perpetual futures. Strategies are pre-registered, signal-only (manual execution), and gate-validated before any capital is risked. The cockpit is the operator\'s view: live chart, registry of valid strategies, a normalized entry-ticket surface, and a 7-timeframe switcher. Nothing here auto-fires. The hard guard is part of the parser, not a UI affordance.
02 / method
Pattern → build → gate. Every cycle, the same 5-beat cadence.
Four design beats, each a constraint that shaped a different part of the surface. No beat is optional; the order is the cheapest sequence that converges.
01
Surface the constraint, not the chrome.
A cockpit with 12 widgets is a cockpit nobody uses. The first move is the operator's question: "where do I enter?" Everything else (chart, registry, timeframes) is in service of that one question.
02
Ship under a gate contract, not a vibe.
Five gates (build · a11y · quality · graph · chrome). Each gate is a binary pass / fail. PARTIAL is acceptable only with a named precedent in the mission ledger. No gate skipped.
03
Static widget, dynamic signal.
The TradingView widget is the only iframe on the surface. CSP is tightened to a single host (frame-src https://s.tradingview.com). Everything else is server-rendered HTML + a tiny parser-driven JSON contract.
04
Empty state is a feature.
The entry finder ships empty by default. role="status" + aria-live="polite" so screen readers narrate the load. The first fire is a single, deterministic, audit-able event.
03 / result
Six mono-prefixed metrics. Gate verdict table. Live risk register.
Every metric below binds to a mono prefix (>, ≥, =, <, !) so the reader can audit at a glance whether the number is a floor, a ceiling, an exact claim, or a guard.
>
gates passed
4 / 5
gate 4 PARTIAL ship-acceptable
≥
strategies wired
4
registry rows live, signal hook ready
≥
timeframes
7
1m / 5m / 15m / 1h / 4h / 1d / 1w
=
chart reload on switch
true
fresh frameElementId per switch, no stale state
<
registry TTL
5 min
TTL + mtime invalidate, never stale
!
hard guard
no auto-submit
assert "submit_order" not in dir() at parse time
5-gate verdict
| # | gate | verdict | note |
|---|---|---|---|
| 1 | qa | PASS | smoke · 5 routes · 0 fail |
| 2 | a11y | PASS | axe-core · 0 color-contrast · 0 landmark |
| 3 | quality | PASS | visual contract · chrome invariants · 0 regression |
| 4 | graph | PARTIAL | ship-acceptable per pair-trade precedent; 2-component fragmentation filed for follow-up |
| 5 | chrome | PASS | mono + 1 amber · no halo · no gradient · 0 hex literal |
Risk register (post-ship)
- R1bars data path pending : graceful 200 with signal_value: null until data population.
- R2script-src single-host carve (TradingView) : acknowledged; SRI follow-up RFC.
- R3CSP-block heuristic : offsetHeight === 0 + 4s watchdog; no silent failures.
- R4upstream_error info-disclosure : internal-only; redact before any external surface.
- R5seed_graph.py --verify re-introduces 2 orphan skill nodes : soft regression owned by seed script.
04 / shipped
Endpoints, parser, components. Every artifact is on disk.
Eight artifacts shipped. Each has a kind (endpoint · parser · component), a label, and a one-line detail. The hard guard is in the parser, not the UI: if any strategy file ships a submit_order callable, the registry refuses to load.
- endpoint
/api/trading/strategies
strategy registry feed · 4 rows · status + signal + G-progress + confidence + CTA
- endpoint
/api/trading/entries
normalized entry-ticket schema · empty-state-aware · deep-linkable
- endpoint
/api/trading/strategies/{id}/signal
per-strategy signal poll · graceful 200 with signal_value: null until bars land
- parser
build/strategy/strategy_registry.py
573 lines · 5-min TTL + mtime invalidate · hard guard assert "submit_order" not in dir()
- component
TradingView widget
MEXC BTCUSDT.P · dark theme · watchlist BTC / ETH / SOL · allow_symbol_change=true · CSP single-host
- component
7-timeframe switcher
1m / 5m / 15m / 1h / 4h / 1d / 1w · default 1d · fresh frameElementId on switch
- component
strategy registry panel
P10 · status chips · signal · G-progress · confidence · Open MEXC CTA
- component
entry finder panel
P11 · empty-state-aware · role="status" · aria-live="polite" · ready for first fire
Handoff + follow-ups
Two follow-ups are filed, both owned: a data-engineer mission to populate the bars path so the entry finder fires its first signal, and a graph-ratchet mission to repair the 2-component fragmentation surfaced at gate 4. Neither blocks ship. Both are in the mission ledger under money-by-next-week · phase-e.
LAST UPDATED · 2026-08-09 · UTC+8