UI WAVE 2 — Modern React Parity Console ("deep work" brief)

Worktree: C:/Users/Capsizer/source/repos/nse_ui_wave2 · branch ui/wave2-modern-react (base b7274225).

All frontend work happens under frontend/ ONLY. Never touch Web/, src/nexus_scalp/, or the

main checkout.

Mission

Port everything the legacy Web/ dashboard does into the clean-architecture React console at

/alt, and make it prettier, more modern, and better rendered — without breaking a single invariant.

Architecture (already at HEAD — follow it, do not invent a new one)

src/features/<name>/ has api.ts (transport calls), model.ts (DTO types/normalizers),

useCases.ts (react-query keys/fns), ui/<Name>Page.tsx, index.ts (registration).

send, sendV1, drop, toQuery. Auth is handled by core/middleware — never add headers yourself.

(useRealtimeSnapshot, useRealtimeStatus, useRealtimeVersion, useCoreEvent) over

src/websocket/realtimeSocket.ts (state_version out-of-order guard). WS is NOT available (ws="none").

Segmented, Skeleton, EmptyState, ErrorState, ConfirmModal, ToastHost). Viz: src/components/viz/

(Gauge, Sparkline, HeatBar, DrawdownChart, EquityCurveChart, PnlWaterfall, geometry.ts — SVG/canvas

helpers, no external chart libs).

--red, --amber, --violet, mono/sans stacks). Density via body.dense. New CSS: one scoped file per

feature (ui/<feature>.css) using the tokens; light glassmorphism, depth shadows via

--elevate-hi/--elevate-lo, CSS 3D transforms (perspective/transform-style: preserve-3d) for card

lift are welcome. No CSS framework, no CDN.

is the rendering toolkit (legacy command_center_spatial.js is itself Canvas2D 2.5D — match it).

Hard invariants (non-negotiable, repo law)

  1. Backend-authoritative: render what the API sends. NEVER fabricate, interpolate, or demo-fill values.

null/missing → "—" or honest empty/waiting state (see legacy "NEVER fake numbers").

  1. Stale/error states are display state, never invented data; keep lastGood on stale (widget pattern).
  2. No client-side indicator/feature math (audit lane-09 forbids it). Display transforms of backend

counts (bar widths, gauge needle angle from backend sell/neutral/buy counts) ARE allowed.

  1. Money paths fail closed; typed-confirm "LIVE" escalation semantics must survive porting.
  2. Legacy files are REFERENCE ONLY (some are huge — Web/app.js is 13k lines: always grep + read a

range, never whole-file). The React tree must not import anything from Web/.

Known defects to fix in this wave (from docs/audit/wave_20260914/09_indicators_ui.md)

types/features.ts:34-38 and ai-analysis/model.ts:121 declare it wrong; AiAnalysisPage.tsx:345-357

crashes on it. Fix DTOs, render a real pivot MATRIX (levels × 7 families: Classic/Fibonacci/Camarilla/

Woodie/Demas/DeMark/Fibonacci variants as backend sends), delete phantom fields signal/kind/label/params.

aliases client-side until backend T-09.1 lands.

Market Radar (app.js:9995+) but by NO React page — port it verbatim (state, best setup type/direction/

quality, compatible strategies, news blackout, decision, updated) with a modern look.

Acceptance gates (each lane runs its own before committing)

must list exactly your scope, then commit. NEVER git add -A.

Lane ownership (stay inside; anything outside = integration owner only)