# Frontend Client Workspace

The frontend is a single-page React client built with TypeScript, Vite, Tailwind CSS, and lightweight UI components. It renders the trading workspace, manages websocket subscriptions, and displays real-time price trends.

---

## Technical Components & Integration Details

### 1. TradingView Lightweight Charts (`StockChart.tsx`)
The centerpiece of the UI is the stock chart widget, which utilizes the `lightweight-charts` library:
- **WebSocket Real-Time Streaming:** The chart opens a connection to the backend WebSocket server (`ws://localhost:8000/api/v1/ws/ticks`). As ticks arrive from the Redpanda broker, they are pushed directly to the candlestick series update channel.
- **Tick Accumulation:** If a tick arrives for the current minute, its price updates the close of the current candle. If a new minute arrives, a new candle is created.
- **Historical Data Backfill:** When switching tickers, the chart calls the API to download the last 100 historical candles from NeonDB to prevent gaps in chart history.

### 2. Component Directory Map

- **`App.tsx`**: Core routing, layout shell, and global authentication states.
- **`components/StockChart.tsx`**: Embeds the main candlestick chart, indicators toggle, and price-scaling canvas handlers.
- **`components/AIAnalyst.tsx`**: Interactive side-panel allowing users to query the Gemini ReAct agent loop. It displays reasoning steps, tool calls, and model outputs in real time.
- **`components/TrendingHub.tsx`**: A social trading feed displaying strategies and prediction records generated by the background ML models.
- **`components/WatchlistSidebar.tsx`**: Sidebar allowing users to add, remove, and manage monitored tickers. Saves state directly to NeonDB.
- **`components/PriceAlerts.tsx`**: Threshold settings page where users configure price levels for alerts.
- **`components/RechargeModal.tsx`**: A payment interface managing balance credits and subscription upgrades.

---

## Production Build & Deploy Verification

### Strict TypeScript Constraints
The project runs clean type verification during compilation:
```bash
npm run build
```
Under the hood, this executes `tsc -b` and `vite build`. To prevent production crashes:
- Any declared variables, parameters, or import statements that are unused will throw compiler error `TS6133` and fail the build.
- Always check that your dependencies are imported correctly and clean up unused code before deploying.

### Deployment Configuration
The client is optimized for Vercel deployment:
- **`vercel.json`**: Sets up URL routing rules to redirect all page requests to `index.html` to support React client-side routing.
- **Vite Proxy Config**: Proxy rules are configured to redirect `/api/v1` routes to the backend port during local development.