For the complete documentation index, see llms.txt. This page is also available as Markdown.

15 - Basic UI Elements

Application Shell

frontend/src/App.tsx defines public, authenticated, standard-layout, and full-width routes. frontend/src/components/layout/Layout.tsx owns the standard navigation shell; FullWidthLayout.tsx is used for dense workspaces. frontend/src/config/navigation.ts determines visible navigation groups.

Operational Pages

Area
Routes/pages

Account

Dashboard, OrderBook, TradeBook, Positions, Holdings

Automation

Strategy, Chartink, Python Strategy Host, Flow

Execution

Action Center, Analyzer, Sandbox, Scalping

Monitoring

PnL Tracker, Latency, Traffic, Health, Security, Logs

Configuration

API key, broker credentials, admin, Telegram, WhatsApp

Data

Search, Historify, Download, Master Contract

Account pages combine TanStack Query with Socket.IO-triggered refreshes. The active broker capability store controls exchange/feature options; app mode comes from the backend analyzer setting.

Analytics And Trading Tools

Current routed tools include:

Route
Purpose
Backend source

/strategybuilder

Multi-leg payoff, Greeks, P&L, strategy chart, OI

Multiple strategy services

/optionchain

Live option chain and quick execution

option_chain_service.py

/ivchart

Historical IV/Greeks charts

iv_chart_service.py

/ivsmile

Call/put IV smile and skew

iv_smile_service.py

/volsurface

3D volatility surface

vol_surface_service.py

/gex

Gamma exposure by strike

gex_service.py

/gammadensity

Gamma-times-OI and convexity zones

gamma_density_service.py

/oitracker

OI bars and PCR

oi_tracker_service.py

/oirange

Client-side strike-range OI view

Option-chain API

/oiprofile

Candles plus OI profile

oi_profile_service.py

/maxpain

Max-pain distribution

OI tracker max-pain route

/straddle

ATM straddle chart

straddle_chart_service.py

/customstraddle

Custom multi-leg straddle chart

custom_straddle_service.py

/arbitrage

Futures calendar-spread scanner

arbitrage_service.py

/scalping

Keyboard execution and server-side stop risk

scalping.py, risk monitor

The tool list is not fixed at twelve; navigation and routes are the current source of truth.

Live Data

Tools use the shared MarketDataManager through hooks rather than opening ad hoc browser feeds. Continuous option-chain or price views merge initial REST snapshots with WebSocket ticks. Pages use visibility controls and stale-data fallbacks to avoid unnecessary broker traffic.

Shared Components

  • components/trading/: order dialog, market depth, quote header, GTT and basket execution.

  • components/strategy-builder/: leg editor, payoff, Greeks, P&L, strategy charts, portfolio save.

  • components/option-chain/: column configuration and bar settings.

  • components/scalping/: chart and stop-loss dialog.

  • components/ui/: local Radix/shadcn-style primitives.

Error And Loading Behavior

TanStack Query owns request states. Route modules are lazy-loaded, ErrorBoundary.tsx handles render failures, PageLoader covers route loading, and Sonner-based helpers in frontend/src/utils/toast.ts expose categorized user feedback.

Key Files

File
Purpose

frontend/src/App.tsx

Route inventory

frontend/src/config/navigation.ts

Navigation inventory

frontend/src/api/trading.ts

Account/trading client

frontend/src/hooks/useOrderEventRefresh.ts

Event-driven account refresh

frontend/src/lib/MarketDataManager.ts

Shared market-data subscriptions

blueprints/react_app.py

Production SPA route serving

Last updated