M9: A Trading System at Scale

// v1: a tick is a message, a message is setState, setState is a render. correct at 5 ticks a second; seconds behind at 2,000
rt.subscribe(`book:${sym}`, m => setBook(b => applyDelta(b, JSON.parse(m))))      // ~8 ms render per tick; at 200/s the renders queue
function Book({ book }) { return book.asks.slice(0, 20).map(l => <Row key={l.px} px={l.px} sz={l.sz} />) }   // 40 rows re-rendered per tick

// v2: the book as typed arrays with integer ticks; deltas applied in place; a gap resnapshots; a canvas reads it per frame
class Book {
  // bids sorted descending, asks ascending; parallel sizes; a Map for O(1) lookup; depth capped at what the feed sends
  bidPx = new Int32Array(512); bidSz = new Int32Array(512); nBid = 0; bidIdx = new Map<number, number>()
  askPx = new Int32Array(512); askSz = new Int32Array(512); nAsk = 0; askIdx = new Map<number, number>()
  seq = 0; changed = new Set<number>()                       // price levels touched since the last frame (for highlights)
  snapshot(s: Snapshot) { this.seq = s.seq; this.nBid = this.nAsk = 0; this.bidIdx.clear(); this.askIdx.clear(); for (const [px, sz] of s.bids) this.set(0, px, sz); for (const [px, sz] of s.asks) this.set(1, px, sz) }
  apply(d: Delta): 'ok' | 'gap' {
    if (d.seq !== this.seq + 1) return 'gap'                  // the only correct response: stop, resubscribe, resnapshot
    this.seq = d.seq; this.set(d.side, d.px, d.sz); this.changed.add(d.px); return 'ok'
  }
  private set(side: 0 | 1, px: number, sz: number) {
    const [P, S, idx] = side === 0 ? [this.bidPx, this.bidSz, this.bidIdx] : [this.askPx, this.askSz, this.askIdx]
    const i = idx.get(px)
    if (i !== undefined) { if (sz === 0) this.remove(side, i); else S[i] = sz; return }
    if (sz === 0) return
    const n = side === 0 ? this.nBid : this.nAsk
    let lo = 0, hi = n; while (lo < hi) { const m = (lo + hi) >> 1; if (side === 0 ? P[m] > px : P[m] < px) lo = m + 1; else hi = m }   // binary search the insertion point
    P.copyWithin(lo + 1, lo, n); S.copyWithin(lo + 1, lo, n); P[lo] = px; S[lo] = sz   // splice O(depth) in a typed array: microseconds
    for (let k = lo; k <= n; k++) idx.set(P[k], k)
    side === 0 ? this.nBid++ : this.nAsk++
  }
  // remove(): the mirror; decode(): a DataView over the 40-byte binary frame: seq u32, side u8, px i32 (ticks), sz i32
}
// render, once per frame: const top = Math.min(20, book.nAsk); for (let i = top - 1; i >= 0; i--) drawRow(ctx, book.askPx[i] / 1e4, book.askSz[i], cum, book.changed.has(book.askPx[i])); …; book.changed.clear()
// feed → book: rt.subscribe(`book:${sym}`, m => { if (m.kind === 'snapshot') book.snapshot(m); else if (book.apply(m) === 'gap') rt.resubscribe(`book:${sym}`) })

// v3: order entry with continuous client-side risk, a warm binary submit, and a per-order state machine keyed by client id
const risk = useRiskTopic(account)            // buying power, positions, bands, halts: updated by fills over M8
const check = useMemo(() => validate(ticket, risk, lastTrade), [ticket, risk, lastTrade])   // { ok, reasons[] } on every keystroke
<button disabled={!check.ok} onClick={() => submit(ticket)}>Submit</button>
{check.reasons.map(r => <p className="reason" key={r.code}>{r.text}</p>)}

function submit(t: Ticket) {
  const clientOrderId = crypto.randomUUID()
  orders.upsert({ clientOrderId, ...t, state: 'sending', sentAt: performance.now() })       // the pending row, immediately
  rt.sendBinary(encodeOrder({ clientOrderId, ...t }))                                       // warm socket; no fetch setup, no JSON
  const timer = setTimeout(() => { if (orders.get(clientOrderId)?.state === 'sending') rt.sendBinary(encodeOrder({ clientOrderId, ...t })) }, 2000)   // resend, same id: server dedupes
  pending.set(clientOrderId, timer)
}
rt.subscribe(`orders:${account}`, m => {                      // ack / reject / fill / cancel-ack, all correlated by id
  if (m.kind === 'ack') orders.update(m.clientOrderId, { orderId: m.orderId, state: 'accepted' })
  if (m.kind === 'reject') orders.update(m.clientOrderId, { state: 'rejected', reason: m.reason })
  if (m.kind === 'fill') orders.update(m.clientOrderId, o => ({ filled: o.filled + m.qty, state: o.filled + m.qty >= o.qty ? 'filled' : 'partial' }))
  clearTimeout(pending.get(m.clientOrderId)); pending.delete(m.clientOrderId)
})
rt.on('reconnected', async () => { const snap = await api.orders.snapshot(account); orders.reconcile(snap); for (const id of pending.keys()) if (!snap.has(id)) orders.update(id, { state: 'unknown' }) })   // honest: "unknown: check"
// confirmations: notional over threshold → a modal showing symbol, side, qty, price, notional, tick age; "flatten" has its own