Internals
The unusual patterns inside the SPA — always-mounted tabs, dual stores, key-bump remount, structured-503 popup. Each card explains why, how, and what breaks if you touch it without reading.
Patterns10
Modules Covered6
ADRs Referenced6
Tribal KnowledgeNow Discoverable
Patterns (10)
Always-mounted hidden tabs
TradingShell + TradingWizard mount once and toggle visibility
client/src/App.tsx:529-545Why this exists
The trading wizard's multi-step state, React Query cache, and any open log-viewer popup must survive a tab switch. Conventional React Router unmount would discard local state.
How it works
Trading and the Algorithm wizard are mounted at app start (eager imports at App.tsx:17-19). They are hidden via a CSS `hidden` class rather than mounted/unmounted on tab switch. Other tabs are lazy-loaded as conventional URL-routed routes.
What can go wrong
useEffect cleanups in TradingShell / TradingWizard do NOT run on tab switch. Any subscription, timer, or poller continues to run in the hidden tab. Anyone changing this pattern to lazy-load + state lift MUST audit every long-running effect in the affected subtrees first.
References
ADR-001A-STATE-009