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.

VENUE
TradingView widget (BTCUSDT.P · MEXC perpetuals)
DESK
systematic crypto-alpha · 4 wired strategies
EXECUTION
manual only · no algo · no auto-submit
GATE CONTRACT
5 gates · 4 PASS · 1 PARTIAL (ship-acceptable)
NDA
clean by construction · no employer names · no internal paths

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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

#gateverdictnote
1qaPASSsmoke · 5 routes · 0 fail
2a11yPASSaxe-core · 0 color-contrast · 0 landmark
3qualityPASSvisual contract · chrome invariants · 0 regression
4graphPARTIALship-acceptable per pair-trade precedent; 2-component fragmentation filed for follow-up
5chromePASSmono + 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