Initial commit: Terminal.AI monorepo (PaaS-ready)

- Frontend: Next.js 16 + React + TypeScript + Plotly
- Backend: FastAPI + VectorBT + yfinance
- LEAPS Scanner: S&P 100 concurrent anomaly detection
- Options Flow: Per-ticker chain analysis
- Dark theme terminal UI
- CORS configured for Vercel + Render deployment
- Legacy Docker files moved to _archive/

.env.example

@@ -0,0 +1,10 @@
+# Terminal.AI Production Environment
+# Domain'ini buraya yaz:
+DOMAIN=yourdomain.com
+
+# Backend
+BACKEND_PORT=8000
+
+# Frontend
+FRONTEND_PORT=3000
+NEXT_PUBLIC_API_URL=/api

.gitignore

@@ -0,0 +1,59 @@
+# ==========================================
+# Terminal.AI — Monorepo .gitignore
+# ==========================================
+
+# --- OS & Editor ---
+.DS_Store
+Thumbs.db
+*.swp
+*.swo
+*~
+.idea/
+.vscode/
+*.sublime-*
+
+# --- Environment & Secrets ---
+.env
+.env.local
+.env.*.local
+.env.production
+.env.development
+*.pem
+*.key
+
+# --- Python (Backend) ---
+backend/venv/
+backend/.venv/
+backend/__pycache__/
+backend/*.pyc
+backend/*.pyo
+backend/.pytest_cache/
+backend/.mypy_cache/
+backend/*.egg-info/
+backend/dist/
+backend/build/
+
+# --- Node (Frontend) ---
+frontend/node_modules/
+frontend/.next/
+frontend/out/
+frontend/.cache/
+frontend/.turbo/
+frontend/coverage/
+frontend/*.log
+
+# --- Build & Dist (Root) ---
+dist/
+build/
+*.tar.gz
+
+# --- Docker (artık kullanılmıyor, arşivde) ---
+# docker-compose.yml
+# nginx/
+# deploy.sh
+# setup-ssl.sh
+
+# --- Misc ---
+*.bak
+*.tmp
+.cache/

AGENTS.md

@@ -0,0 +1,156 @@
+# Terminal.AI — VectorBT Finansal Backtest Terminali
+
+## Proje Özeti
+VectorBT kütüphanesini temel alan, profesyonel trading terminallerinden ilham alan (dark theme, monospaced estetiği) bir finansal backtest ve analiz platformu. "Terminal.AI" markası altında siyah zemin üzerine beyaz/turuncu aksanlarla kurgulanmıştır. Opsiyon akışı (options flow) modülüyle LEAPS ve anormal opsiyon aktivitelerini izleme desteği mevcuttur.
+
+## Teknik Mimari
+
+### Backend (v1.1.0)
+- **Framework:** FastAPI (Python) — Port 8000
+- **Analiz Motoru:** vectorbt==0.26.2
+- **Veri Kaynağı:** yfinance==1.3.0 (curl_cffi tabanlı)
+- **Stratejiler:** SMA Crossover, EMA Crossover, Bollinger Bands
+- **İndikatörler:** RSI, MACD
+- **Sabitler:** init_cash=10000, fees=0.001 (arka planda)
+- **Cache:** 10dk TTL in-memory cache (fundamentals + ticker range), 5dk options flow cache
+
+### Frontend
+- **Framework:** Next.js 16.2.6 (App Router, Turbopack) — Port 3000
+- **CSS:** TailwindCSS v4
+- **Grafik:** react-plotly.js ^2.6.0 + plotly.js ^3.5.1
+- **Dil:** TypeScript, React 19
+
+## Proje Dizin Yapısı
+```
+HERMES(deneme)/
+├── AGENTS.md / GEMINI.md    # Proje bağlam dosyaları
+├── backend/
+│   ├── main.py              # FastAPI (v1.1.0) — endpoint'ler + cache
+│   ├── strategies.py        # Stratejiler: sma, ema, bollinger + rsi, macd
+│   ├── data_fetcher.py      # yfinance ile OHLCV veri çekme
+│   ├── encoder.py           # NanEncoder — NaN/Inf/DateTime serializer
+│   ├── options_flow.py      # Opsiyon akışı + LEAPS detay (tek hisse)
+│   ├── leaps_scanner.py     # S&P 100 concurrent LEAPS anomali tarama
+│   ├── requirements.txt, start.sh, .env
+│   └── venv/                # Sanal ortam
+└── frontend/
+    ├── app/
+    │   ├── page.tsx          # Ana sayfa — backtest + compare + options
+    │   ├── layout.tsx        # Root layout (suppressHydrationWarning)
+    │   ├── globals.css       # Dark tema CSS değişkenleri
+    │   ├── api.ts            # Backend API client (options dahil)
+    │   └── components/
+    │       ├── BacktestForm.tsx      # Strateji + ticker + tarih (boş başlar)
+    │       ├── FundamentalsPanel.tsx # Şirket çarpanları (P/E, P/B, vb.)
+    │       ├── OptionsFlowPanel.tsx  # Opsiyon akışı + LEAPS detay
+    │       ├── PriceChart.tsx        # Candlestick/Line + overlay + sinyaller
+    │       ├── CandlestickChart.tsx, VolumeChart.tsx
+    │       ├── EquityChart.tsx, DrawdownChart.tsx
+    │       ├── IndicatorChart.tsx    # RSI/MACD
+    │       ├── ComparePanel.tsx      # Strateji karşılaştırma
+    │       └── TerminalHeader.tsx
+    ├── AGENTS.md, CLAUDE.md
+    └── package.json
+```
+
+## API Endpoint'ler
+
+### Backtest & Analiz
+- `GET /api/health` → `{"status":"ok","version":"1.1.0"}`
+- `GET /api/strategies` → sma, ema, bollinger listesi
+- `POST /api/backtest` → Strateji seçerek backtest. Parametreler: `strategy`, `fast_ma`, `slow_ma`, `bb_window`, `bb_std`, `rsi_window`, `macd_*`. Response: OHLCV + overlay + RSI/MACD + sinyaller + equity + drawdown.
+- `POST /api/compare` → Tüm stratejileri karşılaştırır.
+- `GET /api/ticker/{ticker}` → Ticker bilgisi
+- `GET /api/ticker/{ticker}/range` → `{earliest, latest, data_points}` (10dk cache)
+- `GET /api/ticker/{ticker}/fundamentals` → Şirket çarpanları (10dk cache)
+
+### Opsiyon Akışı (Options Flow)
+- `GET /api/ticker/{ticker}/options-flow` → Tek hisse opsiyon zinciri analizi
+  - Per-expiry call/put volumes, OI, volume/OI ratios
+  - LEAPS (vade > 365 gün) ayrı işaretlenmiş
+  - Anormal hacim/OI spike'ları (vol/OI ≥ 2x)
+  - Call/Put oranı
+  - Cache: 5 dakika
+  - Response: `{ ticker, as_of, has_leaps, leaps_expiries, summary, all_expiries, leaps, unusual_activities }`
+
+- `GET /api/options-flow/leaps-board` → 22 ticker taraması, LEAPS aktivitesine göre sıralı (async concurrent)
+  - Response: `{ count, scan_tickers, results: [{ ticker, has_leaps, leaps_count, total_call_volume, total_put_volume, call_put_ratio, unusual_count, top_leaps_expiry }] }`
+
+- `GET /api/leaps/scanner` → **S&P 100 tabanlı LEAPS anomali tarama** (yeni!)
+  - S&P 100 ticker listesini concurrent tarar (~100 hisse, ~10 saniye)
+  - LEAPS opsiyonlarda volume/OI ≥ 2x anormal spike yakalar
+  - Parametreler: `max_tickers` (1-100, varsayılan 100), `min_spikes` (varsayılan 1)
+  - Response: `{ tickers: [{ ticker, total_leaps_call_vol, total_leaps_put_vol, total_leaps_vol, call_put_ratio, unusual_count, top_spike, all_spikes, leaps_expiries_count, nearest_leaps_expiry }], count, scan_info }`
+
+## Mevcut Durum
+- [x] **3 strateji:** SMA, EMA, Bollinger
+- [x] RSI + MACD indikatörleri
+- [x] Candlestick/Line toggle, Volume, Drawdown grafikleri
+- [x] Strateji karşılaştırma (Compare All)
+- [x] **Fundamentals paneli** — Market Cap, P/E, P/B, EV/EBITDA, ROE, Beta, vb.
+- [x] Ticker yazınca direkt fundamentals + tarih aralığı (800ms debounce)
+- [x] "All Time" butonu ile full range seçimi
+- [x] Equity curve, pan/zoom modebar
+- [x] 10dk backend cache (rate limit koruması)
+- [x] Dark tema (Terminal.AI — siyah+turuncu)
+- [x] **Options Flow modülü** — `options_flow.py` (yfinance tabanlı, tek hisse detay)
+- [x] **LEAPS Scanner** — `leaps_scanner.py` (S&P 100 concurrent, ~10s)
+- [x] **Options sekmesi** — Frontend'te LEAPS Scanner tablosu + per-ticker options flow
+- [x] Backend + Frontend birlikte çalışıyor
+
+## Bilinen Sorunlar ve Çözümler
+
+### 1. vectorbt MACD — `histogram` → `hist`
+**Dosya:** `backend/strategies.py` · Çözüm: `macd.histogram` yerine `macd.hist`.
+
+### 2. vectorbt'de EMA yok
+**Dosya:** `backend/strategies.py` → `run_ema_crossover()`
+**Çözüm:** `close.ewm(span=N, adjust=False).mean()` ile pandas EMA, crossover manuel.
+
+### 3. vectorbt BBANDS.run bug'li
+**Dosya:** `backend/strategies.py` → `run_bollinger_bands()`
+**Çözüm:** `close.rolling(w).mean() + std()` ile manuel hesaplama.
+
+### 4. Port cakismasi (Windows/MSYS)
+**Çözüm:** `cmd //c "taskkill /PID <PID> /F"` — start.sh otomatik temizler.
+
+### 5. Dark Reader hydration
+**Dosya:** `frontend/app/layout.tsx` → `<html suppressHydrationWarning>`.
+
+### 6. yfinance eski surum → 0.2.43 → 1.3.0
+
+### 7. Plotly TypeScript tip uyumsuzlukları
+**Sorun:** `react-plotly.js` ile `plotly.js` versiyon mismatch → TS2769 hataları
+**Durum:** Next.js Turbopack bunları ignore eder, runtime'da sorun çıkarmaz. Düşük öncelik.
+
+## Options Flow Modülü Detayları
+
+### `backend/options_flow.py` (tek hisse detay)
+- `fetch_options_flow(ticker)` — Tek hisse tam opsiyon zinciri analizi
+- `rank_single_ticker(sym)` — Tek hisse özet (LEAPS board için)
+- `rank_tickers_by_leaps_activity(tickers)` — Çoklu ticker sıralama (senkron, fallback)
+- `DEFAULT_SCAN_TICKERS` — 22 ticker statik liste
+
+### `backend/leaps_scanner.py` (S&P 100 anomali tarama)
+- `scan_ticker_leaps(sym)` — Tek ticker LEAPS tarama (vol/OI ≥ 2x)
+- `scan_all_sp100_leaps(max_tickers)` — S&P 100 concurrent tarama (ThreadPoolExecutor, 10 worker)
+- `SP100_TICKERS` — S&P 100 ticker listesi (~100 hisse)
+- Sabitler: `LEAPS_MIN_DAYS=365`, `UNUSUAL_VOL_OI_MIN=2.0`, `MAX_WORKERS=10`
+
+### `frontend/app/components/OptionsFlowPanel.tsx`
+- Props: `ticker: string`
+- KPI satırı: Call Vol, Put Vol, C/P Ratio, Expiries, LEAPS count
+- Expiry breakdown: Her vade için açılır/kapanır kart (top calls/puts tablosu)
+- Unusual Activity tablosu: vol/OI ≥ 2x olan sinyaller
+
+### `frontend/app/api.ts` — Yeni tipler
+- `OptionsFlowResponse`, `OptionsChainExpiry`, `OptionStrike`, `UnusualActivity`
+- `LeapsBoardEntry`, `LeapsBoardResponse` (22 ticker board)
+- `LeapsScannerEntry`, `LeapsScannerResponse` (S&P 100 scanner)
+- Fonksiyonlar: `fetchOptionsFlow(ticker)`, `fetchLeapsBoard(limit)`, `fetchLeapsScanner(max_tickers, min_spikes)`
+
+## Hizli Calistirma
+```bash
+cd backend && bash start.sh    # port 8000 (otomatik port temizliği)
+cd frontend && npm run dev     # port 3000
+```

GEMINI.md

@@ -0,0 +1,165 @@
+# Terminal.AI — VectorBT Finansal Backtest Terminali
+
+## Proje Özeti
+VectorBT kütüphanesini temel alan, profesyonel trading terminallerinden ilham alan (dark theme, monospaced estetiği) bir finansal backtest ve analiz platformu. Kullanıcıların teknik göstergeleri (SMA, RSI, MACD) test etmesine ve sonuçları interaktif grafiklerle görmesine olanak tanır. "Terminal.AI" markası altında siyah zemin üzerine beyaz/turuncu aksanlarla kurgulanmıştır. Opsiyon akışı modülüyle LEAPS ve anormal opsiyon aktivitelerini izleme desteği mevcuttur.
+
+## Teknik Mimari
+
+### Backend (v1.1.0)
+- **Framework:** FastAPI (Python)
+- **Port:** 8000
+- **Analiz Motoru:** vectorbt==0.26.2
+- **Veri Kaynağı:** yfinance==1.3.0 (curl_cffi tabanlı)
+- **Stratejiler:** SMA Crossover, EMA Crossover, Bollinger Bands
+- **İndikatörler:** RSI, MACD
+- **Sabitler:** init_cash=10000, fees=0.001 (arka planda)
+- **Cache:** 10dk TTL in-memory cache (fundamentals + ticker range), 5dk options flow cache
+- **Diğer:** pandas==2.2.3, numpy==1.26.4, pydantic==2.9.2
+- **Çalıştırma:** `cd backend && bash start.sh`
+
+### Frontend
+- **Framework:** Next.js 16.2.6 (App Router, Turbopack)
+- **Port:** 3000
+- **CSS:** TailwindCSS v4
+- **Grafik:** react-plotly.js ^2.6.0 + plotly.js ^3.5.1
+- **Dil:** TypeScript, React 19
+- **Çalıştırma:** `cd frontend && npm run dev`
+
+## Proje Dizin Yapısı
+```
+HERMES(deneme)/
+├── AGENTS.md / GEMINI.md    # Proje bağlam dosyaları
+├── backend/
+│   ├── main.py              # FastAPI (v1.1.0) — endpoint'ler + cache
+│   ├── strategies.py        # Stratejiler: sma, ema, bollinger + rsi, macd
+│   ├── data_fetcher.py      # yfinance ile OHLCV veri çekme
+│   ├── encoder.py           # NanEncoder — NaN/Inf/DateTime serializer
+│   ├── options_flow.py      # Opsiyon akışı (tek hisse detay)
+│   ├── leaps_scanner.py     # S&P 100 concurrent LEAPS anomali tarama
+│   ├── requirements.txt     # Python bağımlılıkları
+│   ├── start.sh             # Başlatma scripti (port temizliği dahil)
+│   └── venv/                # Sanal ortam
+└── frontend/
+    ├── app/
+    │   ├── page.tsx          # Ana sayfa — backtest + compare + options
+    │   ├── layout.tsx        # Root layout
+    │   ├── globals.css       # Dark tema CSS değişkenleri
+    │   ├── api.ts            # Backend API client
+    │   └── components/
+    │       ├── BacktestForm.tsx      # Parametre giriş formu
+    │       ├── StatsPanel.tsx        # Portföy istatistik paneli
+    │       ├── PriceChart.tsx        # Fiyat + overlay grafiği
+    │       ├── CandlestickChart.tsx  # Mum grafiği
+    │       ├── VolumeChart.tsx       # Hacim grafiği
+    │       ├── EquityChart.tsx       # Equity curve grafiği
+    │       ├── DrawdownChart.tsx     # Drawdown grafiği
+    │       ├── IndicatorChart.tsx    # RSI/MACD indikatör grafiği
+    │       ├── ComparePanel.tsx      # Strateji karşılaştırma
+    │       ├── FundamentalsPanel.tsx # Şirket çarpanları
+    │       ├── OptionsFlowPanel.tsx  # Opsiyon akışı detay
+    │       └── TerminalHeader.tsx    # Terminal.AI başlık
+    ├── AGENTS.md             # Next.js uyarısı
+    ├── CLAUDE.md             # AGENTS.md referansı
+    └── package.json          # Node.js bağımlılıkları
+```
+
+## API Endpoint'ler
+
+### Backtest & Analiz
+- `GET /api/health` → `{"status": "ok", "version": "1.1.0"}`
+- `GET /api/strategies` → Mevcut stratejileri listeler
+- `POST /api/backtest` → SMA Crossover backtest + RSI + MACD indikatörleri çalıştırır
+- `POST /api/compare` → Tüm stratejileri karşılaştırır
+- `GET /api/ticker/{ticker}` → Ticker bilgisi ve son fiyat
+- `GET /api/ticker/{ticker}/range` → Tarih aralığı (10dk cache)
+- `GET /api/ticker/{ticker}/fundamentals` → Şirket çarpanları (10dk cache)
+
+### Opsiyon Akışı
+- `GET /api/ticker/{ticker}/options-flow` → Tek hisse opsiyon zinciri analizi (5dk cache)
+- `GET /api/options-flow/leaps-board` → 22 ticker LEAPS board (async concurrent)
+- `GET /api/leaps/scanner?max_tickers=100&min_spikes=1` → S&P 100 LEAPS anomali tarama (~10s)
+
+## Backtest Request/Response
+
+**Request:**
+```json
+{
+  "ticker": "AAPL",
+  "start_date": "2024-01-01",
+  "end_date": "2024-06-30",
+  "interval": "1d",
+  "fast_ma": 10,
+  "slow_ma": 30,
+  "fees": 0.001,
+  "init_cash": 10000,
+  "rsi_window": 14,
+  "macd_fast": 12,
+  "macd_slow": 26,
+  "macd_signal": 9
+}
+```
+
+**Response:** OHLCV verisi + portföy istatistikleri + trade log + SMA/RSI/MACD indikatör verileri + al/sat sinyalleri + equity curve + drawdown.
+
+## Mevcut Durum
+- [x] SMA Crossover stratejisi çalışıyor
+- [x] EMA Crossover stratejisi çalışıyor
+- [x] Bollinger Bands stratejisi çalışıyor
+- [x] RSI ve MACD indikatörleri backend'de hesaplanıyor
+- [x] Frontend'de tüm grafikler (fiyat, equity, RSI, MACD, volume, drawdown) gösteriliyor
+- [x] Strateji karşılaştırma (Compare All)
+- [x] Fundamentals paneli (Market Cap, P/E, P/B, EV/EBITDA, ROE, Beta)
+- [x] Ticker değişince otomatik fundamentals + tarih aralığı (800ms debounce)
+- [x] Options Flow modülü (tek hisse detay + LEAPS board + S&P 100 scanner)
+- [x] Options sekmesi (LEAPS Scanner tablosu + per-ticker options flow)
+- [x] Dark tema (Terminal.AI markası)
+- [x] yfinance 1.3.0'a yükseltildi (curl_cffi tabanlı)
+- [x] Backend + Frontend birlikte çalışıyor
+
+## Bilinen Sorunlar ve Çözümler
+
+### 1. vectorbt MACD — `histogram` attribute'ı yok
+**Hata:** `'MACD' object has no attribute 'histogram'`
+**Çözüm:** `macd.histogram` yerine `macd.hist` kullanılmalı (vectorbt 0.26.2 API değişikliği).
+**Dosya:** `backend/strategies.py`
+
+### 2. Port çakışması (Windows)
+**Sorun:** Eski process kapatılmazsa port 8000 dolu kalır.
+**Çözüm:** `start.sh` otomatik port temizliği yapar. Manuel: `cmd //c "taskkill /PID <PID> /F"`
+
+### 3. Dark Reader hydration hatası
+**Sorun:** Dark Reader eklentisi `<html>`'e attribute ekler, hydration uyuşmazlığı oluşur.
+**Çözüm:** `<html lang="en" suppressHydrationWarning>` — layout.tsx'te eklendi.
+
+### 4. yfinance eski sürüm
+**Sorun:** yfinance 0.2.43 Yahoo Finance API'den veri çekemiyordu.
+**Çözüm:** yfinance 1.3.0'a yükseltildi (curl_cffi tabanlı, Cloudflare bypass).
+
+### 5. Plotly TypeScript tipleri
+**Sorun:** `react-plotly.js` ile `plotly.js` versiyon mismatch → TS2769
+**Durum:** Turbopack ignore eder, runtime sorun yok.
+
+## LEAPS Scanner Detayı (`backend/leaps_scanner.py`)
+- S&P 100 ticker listesini ~10 saniyede concurrent tarar
+- LEAPS = vade > 365 gün
+- Anomali = volume/openInterest ≥ 2x
+- Sonuçlar toplam LEAPS hacmine göre sıralı
+- Her ticker için en büyük spike + tüm spike'lar döner
+
+## Yapılacaklar / Gelecek Özellikler
+- [ ] Portföy optimizasyonu (çoklu ticker backtest)
+- [ ] LEAPS Scanner sonuçlarını export (CSV)
+- [ ] Canlı veri / WebSocket desteği
+- [ ] Responsive mobil görünüm iyileştirmeleri
+- [ ] Plotly TS tip düzeltmeleri
+
+## Çalıştırma (Hızlı Başlangıç)
+```bash
+# Backend
+cd backend && bash start.sh
+# -> http://localhost:8000
+
+# Frontend (ayrı terminal)
+cd frontend && npm run dev
+# -> http://localhost:3000
+```

README.md

@@ -0,0 +1,236 @@
+<div align="center">
+
+# ⚡ Terminal.AI
+
+**VectorBT Finansal Backtest + LEAPS Opsiyon Scanner**
+
+[![Next.js](https://img.shields.io/badge/Next.js-16-black?logo=nextdotjs)](https://nextjs.org/)
+[![FastAPI](https://img.shields.io/badge/FastAPI-0.115-green?logo=fastapi)](https://fastapi.tiangolo.com/)
+[![Python](https://img.shields.io/badge/Python-3.11-blue?logo=python)](https://python.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://typescriptlang.org/)
+[![License](https://img.shields.io/badge/License-MIT-yellow)](LICENSE)
+
+[Demo](https://terminal-ai.vercel.app) · [Hataları Bildir](https://github.com/username/terminal-ai/issues) · [Özellik İste](https://github.com/username/terminal-ai/issues)
+
+</div>
+
+---
+
+## 📖 Hakkında
+
+Terminal.AI, **VectorBT** kütüphanesini temel alan, profesyonel trading terminallerinden ilham alan bir **finansal backtest ve opsiyon analiz platformudur**. Siyah zemin üzerine turuncu aksanlarla kurgulanmış terminal estetiğiyle, teknik göstergeleri test etmenizi ve sonuçları interaktif grafiklerle görmenizi sağlar.
+
+### Temel Özellikler
+
+- **3 Strateji:** SMA Crossover, EMA Crossover, Bollinger Bands
+- **İndikatörler:** RSI, MACD
+- **Grafikler:** Candlestick, Volume, Equity Curve, Drawdown, RSI/MACD
+- **Strateji Karşılaştırma:** Tüm stratejileri tek seferde karşılaştır
+- **Fundamentals Paneli:** Market Cap, P/E, P/B, EV/EBITDA, ROE, Beta
+- **Options Flow:** Tek hisse opsiyon zinciri analizi (LEAPS + anormal hacim/OI)
+- **LEAPS Scanner:** S&P 100 concurrent taraması (~10 saniye), tıklanabilir satırlar
+
+---
+
+## 🏗️ Mimari
+
+Bu proje **monorepo** yapısında olup **PaaS (Platform as a Service)** mimarisinde deploy edilmiştort.
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    GitHub (Monorepo)                     │
+│  ┌───────────────────┐    ┌──────────────────────────┐  │
+│  │   frontend/       │    │      backend/            │  │
+│  │   (Next.js)       │    │      (FastAPI)           │  │
+│  └────────┬──────────┘    └───────────┬──────────────┘  │
+└───────────┼───────────────────────────┼──────────────────┘
+            │                           │
+            ▼                           ▼
+    ┌───────────────┐          ┌────────────────┐
+    │    Vercel     │          │     Render     │
+    │   (Frontend)  │◄────────►│    (Backend)   │
+    └───────────────┘          └────────────────┘
+```
+
+### Frontend → Vercel
+- **Root Directory:** `frontend/`
+- **Framework:** Next.js 16 (App Router, Turbopack)
+- **Build Command:** `npm run build`
+- **Output Directory:** `.next/`
+- **Environment:** `NEXT_PUBLIC_API_URL=https://your-backend.onrender.com`
+
+### Backend → Render
+- **Root Directory:** `backend/`
+- **Runtime:** Python 3.11
+- **Build Command:** `pip install -r requirements.txt`
+- **Start Command:** `uvicorn main:app --host 0.0.0.0 --port 8000`
+- **Environment:** `FRONTEND_URL=https://your-frontend.vercel.app`
+
+---
+
+## 📁 Klasör Yapısı
+
+```
+terminal-ai/
+├── frontend/                    # Next.js Frontend
+│   ├── app/
+│   │   ├── page.tsx             # Ana sayfa (Backtest / Compare / Options)
+│   │   ├── layout.tsx           # Root layout
+│   │   ├── globals.css          # Dark tema CSS
+│   │   ├── api.ts               # Backend API client
+│   │   └── components/
+│   │       ├── BacktestForm.tsx
+│   │       ├── PriceChart.tsx
+│   │       ├── CandlestickChart.tsx
+│   │       ├── VolumeChart.tsx
+│   │       ├── EquityChart.tsx
+│   │       ├── DrawdownChart.tsx
+│   │       ├── IndicatorChart.tsx
+│   │       ├── ComparePanel.tsx
+│   │       ├── FundamentalsPanel.tsx
+│   │       ├── OptionsFlowPanel.tsx
+│   │       └── TerminalHeader.tsx
+│   ├── public/
+│   └── package.json
+│
+├── backend/                     # FastAPI Backend
+│   ├── main.py                  # Endpoint'ler + CORS + Cache
+│   ├── strategies.py            # SMA, EMA, Bollinger + RSI, MACD
+│   ├── data_fetcher.py          # yfinance OHLCV
+│   ├── encoder.py               # NaN/Inf/DateTime serializer
+│   ├── options_flow.py          # Tek hisse opsiyon zinciri
+│   ├── leaps_scanner.py         # S&P 100 LEAPS anomali tarama
+│   ├── requirements.txt
+│   └── start.sh
+│
+├── _archive/                    # Eski Docker deployment dosyaları
+│   ├── docker-compose.yml
+│   ├── nginx/
+│   ├── deploy.sh
+│   ├── setup-ssl.sh
+│   ├── Dockerfile.backend
+│   ├── Dockerfile.frontend
+│   └── DEPLOY.md
+│
+├── .gitignore                   # Kök + alt dizin ignore kuralları
+├── AGENTS.md                    # Proje bağlam dosyası (AI agent'ları için)
+├── GEMINI.md                    # Proje bağlam dosyası (Gemini için)
+└── README.md                    # Bu dosya
+```
+
+---
+
+## 🚀 Deploy Rehberi
+
+### Frontend (Vercel)
+
+1. [Vercel](https://vercel.com)'e GitHub hesabınla giriş yap
+2. **Add New Project** → Repository'yi seç
+3. **Root Directory:** `frontend` olarak ayarla
+4. **Framework Preset:** Next.js
+5. **Environment Variables:**
+   ```
+   NEXT_PUBLIC_API_URL=https://your-backend.onrender.com
+   ```
+6. **Deploy** butonuna tıkla
+
+### Backend (Render)
+
+1. [Render](https://render.com)'e giriş yap
+2. **New +** → **Web Service**
+3. GitHub repo'nu bağla
+4. **Root Directory:** `backend` olarak ayarla
+5. **Runtime:** Python 3
+6. **Build Command:** `pip install -r requirements.txt`
+7. **Start Command:** `uvicorn main:app --host 0.0.0.0 --port 8000`
+8. **Environment Variables:**
+   ```
+   FRONTEND_URL=https://your-frontend.vercel.app
+   ```
+9. **Create Web Service** butonuna tıkla
+
+### Environment Değişkenleri
+
+| Değişken | Servis | Açıklama |
+|-----------|--------|----------|
+| `NEXT_PUBLIC_API_URL` | Frontend | Backend URL'si (örn: `https://terminal-ai-api.onrender.com`) |
+| `FRONTEND_URL` | Backend | Frontend URL'si (CORS için, örn: `https://terminal-ai.vercel.app`) |
+
+---
+
+## 💻 Geliştirme
+
+### Gereksinimler
+- Python 3.11+
+- Node.js 20+
+- npm veya yarn
+
+### Backend
+
+```bash
+cd backend
+python -m venv venv
+source venv/bin/activate  # Windows: venv\Scripts\activate
+pip install -r requirements.txt
+python main.py
+# → http://localhost:8000
+```
+
+### Frontend
+
+```bash
+cd frontend
+npm install
+npm run dev
+# → http://localhost:3000
+```
+
+### API Dokümantasyonu
+
+Backend çalışırken: `http://localhost:8000/docs` (Swagger UI)
+
+---
+
+## 📡 API Endpoint'ler
+
+### Backtest & Analiz
+| Method | Endpoint | Açıklama |
+|--------|----------|----------|
+| GET | `/api/health` | Health check |
+| GET | `/api/strategies` | Strateji listesi |
+| POST | `/api/backtest` | Backtest çalıştır |
+| POST | `/api/compare` | Tüm stratejileri karşılaştır |
+| GET | `/api/ticker/{ticker}` | Ticker bilgisi |
+| GET | `/api/ticker/{ticker}/range` | Tarih aralığı |
+| GET | `/api/ticker/{ticker}/fundamentals` | Şirket çarpanları |
+
+### Opsiyon Akışı
+| Method | Endpoint | Açıklama |
+|--------|----------|----------|
+| GET | `/api/ticker/{ticker}/options-flow` | Tek hisse opsiyon zinciri |
+| GET | `/api/options-flow/leaps-board` | 22 ticker LEAPS board |
+| GET | `/api/leaps/scanner` | S&P 100 LEAPS anomali tarama |
+
+---
+
+## ⚠️ Bilinen Sorunlar
+
+1. **vectorbt MACD:** `histogram` attribute'ı yok, `hist` kullanılıyor
+2. **vectorbt EMA:** Yok, pandas `ewm()` ile manuel hesaplanıyor
+3. **vectorbt BBANDS:** `.run()` bug'lı, pandas `rolling()` ile manuel
+4. **Plotly TS tipleri:** Versiyon mismatch var ama Turbopack ignore ediyor
+5. **yfinance rate limit:** IP bazlı, aşırı sorgu yapılmamalı
+
+---
+
+## 📄 Lisans
+
+MIT License — Detaylar için [LICENSE](LICENSE) dosyasına bakın.
+
+---
+
+<div align="center">
+
+**⭐ Beğendiyseniz yıldız vermeyi unutmayın!**
+
+</div>

_archive/DEPLOY.md

@@ -0,0 +1,82 @@
+# Terminal.AI — Production Deployment
+
+VectorBT tabanlı finansal backtest ve LEAPS opsiyon tarama platformu.
+
+## Gereksinimler
+
+- Docker >= 24.0
+- Docker Compose >= 2.20
+- Domain adı (SSL için)
+- Sunucu: en az 1GB RAM, 1 vCPU
+
+## Hızlı Kurulum
+
+```bash
+# 1. Projeyi klonla
+git clone https://github.com/username/terminal-ai.git
+cd HERMES(deneme)
+
+# 2. Environment dosyasını oluştur
+cp .env.example .env
+# .env dosyasını domain'ine göre düzenle
+
+# 3. Deploy et
+chmod +x deploy.sh
+./deploy.sh
+```
+
+## SSL Kurulumu (Opsiyonel ama önerilir)
+
+```bash
+# Domain'i DNS'de sunucu IP'sine yönlendirdikten sonra:
+chmod +x setup-ssl.sh
+./setup-ssl.sh yourdomain.com
+```
+
+## Komutlar
+
+```bash
+# Çalıştır
+docker compose up -d
+
+# Durdur
+docker compose down
+
+# Logları izle
+docker compose logs -f
+
+# Sadece backend/backend logları
+docker compose logs -f backend
+docker compose logs -f frontend
+
+# Yeniden build & deploy
+docker compose up -d --build
+
+# Container durumu
+docker compose ps
+```
+
+## Yapı
+
+```
+├── backend/          # FastAPI + vectorbt + yfinance
+├── frontend/         # Next.js + React + Plotly
+├── nginx/            # Reverse proxy + SSL
+├── docker-compose.yml
+├── deploy.sh
+└── setup-ssl.sh
+```
+
+## Portlar
+
+- 80  → Nginx (HTTP)
+- 443 → Nginx (HTTPS, SSL aktifken)
+- 3000 → Next.js (sadece internal)
+- 8000 → FastAPI (sadece internal)
+
+## Notlar
+
+- Backend cache: 10 dakika (in-memory, container restart'ında temizlenir)
+- LEAPS Scanner: S&P 100 taraması ~10 saniye
+- yfinance rate limit: ~2000 saatlik istek (IP bazlı)
+- SSL olmadan da çalışır (HTTP)

_archive/Dockerfile.backend

@@ -0,0 +1,16 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Expose port
+EXPOSE 8000
+
+# Run with uvicorn
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--workers", "2"]

_archive/Dockerfile.frontend

@@ -0,0 +1,33 @@
+# Multi-stage build for Next.js frontend
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Copy built assets from builder
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/node_modules ./node_modules
+
+# Expose port
+EXPOSE 3000
+
+# Start the application
+CMD ["npm", "start"]

_archive/deploy.sh

@@ -0,0 +1,63 @@
+#!/bin/bash
+# Terminal.AI Deploy Script
+# Kullanım: ./deploy.sh
+
+set -e
+
+echo "========================================="
+echo "  Terminal.AI Deployment"
+echo "========================================="
+
+# Renkler
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+# Dizin kontrol
+if [ ! -f "docker-compose.yml" ]; then
+    echo -e "${RED}Hata: docker-compose.yml bulunamadı!${NC}"
+    echo "Lütfen proje kök dizininde çalıştırın."
+    exit 1
+fi
+
+# SSL dizinleri oluştur
+mkdir -p nginx/ssl
+
+# Güncel kodu çek (git kullanıyorsan)
+if [ -d ".git" ]; then
+    echo -e "${YELLOW}Güncel kod çekiliyor...${NC}"
+    git pull origin main 2>/dev/null || true
+fi
+
+# Docker Compose ile build & deploy
+echo -e "${YELLOW}Container'lar build ediliyor...${NC}"
+docker compose build --no-cache
+
+echo -e "${YELLOW}Container'lar başlatılıyor...${NC}"
+docker compose up -d
+
+# Health check
+echo -e "${YELLOW}Health check...${NC}"
+sleep 5
+
+if curl -sf http://localhost/api/health > /dev/null 2>&1; then
+    echo -e "${GREEN}Backend: OK${NC}"
+else
+    echo -e "${RED}Backend: FAIL${NC}"
+fi
+
+if curl -sf http://localhost > /dev/null 2>&1; then
+    echo -e "${GREEN}Frontend: OK${NC}"
+else
+    echo -e "${RED}Frontend: FAIL${NC}"
+fi
+
+echo ""
+echo -e "${GREEN}=========================================${NC}"
+echo -e "${GREEN}  Deployment tamamlandı!${NC}"
+echo -e "${GREEN}=========================================${NC}"
+echo ""
+echo "Logları izle:  docker compose logs -f"
+echo "Durdur:        docker compose down"
+echo "Yeniden başlat: docker compose restart"

_archive/docker-compose.yml

@@ -0,0 +1,75 @@
+version: "3.8"
+
+services:
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: terminal-ai-backend
+    restart: unless-stopped
+    expose:
+      - "8000"
+    environment:
+      - PYTHONUNBUFFERED=1
+    volumes:
+      - backend-data:/app/data
+    networks:
+      - terminal-ai
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: terminal-ai-frontend
+    restart: unless-stopped
+    expose:
+      - "3000"
+    environment:
+      - NEXT_PUBLIC_API_URL=/api
+    depends_on:
+      backend:
+        condition: service_healthy
+    networks:
+      - terminal-ai
+
+  nginx:
+    image: nginx:alpine
+    container_name: terminal-ai-nginx
+    restart: unless-stopped
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./nginx/ssl:/etc/nginx/ssl:ro
+      - certbot-webroot:/var/www/certbot:ro
+      - certbot-certs:/etc/letsencrypt:ro
+    depends_on:
+      - frontend
+      - backend
+    networks:
+      - terminal-ai
+
+  # Opsiyonel: SSL sertifikası için Certbot
+  # İlk kurulumda comment out edildi, sonra aktif edilecek
+  # certbot:
+  #   image: certbot/certbot
+  #   container_name: terminal-ai-certbot
+  #   volumes:
+  #     - certbot-webroot:/var/www/certbot
+  #     - certbot-certs:/etc/letsencrypt
+  #   entrypoint: "/bin/sh -c 'trap exit TERM; while :; do certbot renew; sleep 12h & wait $${!}; done;'"
+
+volumes:
+  backend-data:
+  certbot-webroot:
+  certbot-certs:
+
+networks:
+  terminal-ai:
+    driver: bridge

_archive/nginx/nginx.conf

@@ -0,0 +1,139 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # Logging
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+    access_log /var/log/nginx/access.log main;
+    error_log /var/log/nginx/error.log;
+
+    # Performance
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
+
+    # Rate limiting
+    limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
+    limit_req_zone $binary_remote_addr zone=general:10m rate=30r/s;
+
+    # Upstream servers
+    upstream frontend {
+        server frontend:3000;
+    }
+
+    upstream backend {
+        server backend:8000;
+    }
+
+    # HTTP → HTTPS redirect (SSL aktifken)
+    # server {
+    #     listen 80;
+    #     server_name yourdomain.com www.yourdomain.com;
+    #     location /.well-known/acme-challenge/ {
+    #         root /var/www/certbot;
+    #     }
+    #     location / {
+    #         return 301 https://$server_name$request_uri;
+    #     }
+    # }
+
+    # HTTPS server (SSL aktifken)
+    # server {
+    #     listen 443 ssl http2;
+    #     server_name yourdomain.com www.yourdomain.com;
+    #
+    #     ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
+    #     ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
+    #     ssl_protocols TLSv1.2 TLSv1.3;
+    #     ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
+    #     ssl_prefer_server_ciphers off;
+    #
+    #     # Security headers
+    #     add_header X-Frame-Options "SAMEORIGIN" always;
+    #     add_header X-Content-Type-Options "nosniff" always;
+    #     add_header X-XSS-Protection "1; mode=block" always;
+    #     add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    #
+    #     # Frontend
+    #     location / {
+    #         limit_req zone=general burst=50 nodelay;
+    #         proxy_pass http://frontend;
+    #         proxy_http_version 1.1;
+    #         proxy_set_header Upgrade $http_upgrade;
+    #         proxy_set_header Connection "upgrade";
+    #         proxy_set_header Host $host;
+    #         proxy_set_header X-Real-IP $remote_addr;
+    #         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    #         proxy_set_header X-Forwarded-Proto $scheme;
+    #     }
+    #
+    #     # Backend API
+    #     location /api/ {
+    #         limit_req zone=api burst=20 nodelay;
+    #         proxy_pass http://backend;
+    #         proxy_http_version 1.1;
+    #         proxy_set_header Host $host;
+    #         proxy_set_header X-Real-IP $remote_addr;
+    #         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    #         proxy_set_header X-Forwarded-Proto $scheme;
+    #         proxy_read_timeout 120s;
+    #     }
+    # }
+
+    # HTTP server (SSL'siz, ilk kurulum için)
+    server {
+        listen 80;
+        server_name _;
+
+        # Security headers
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+
+        # Frontend
+        location / {
+            limit_req zone=general burst=50 nodelay;
+            proxy_pass http://frontend;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # Backend API
+        location /api/ {
+            limit_req zone=api burst=20 nodelay;
+            proxy_pass http://backend;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_read_timeout 120s;
+        }
+
+        # Health check
+        location /health {
+            access_log off;
+            return 200 "OK\n";
+        }
+    }
+}

_archive/setup-ssl.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+# SSL Sertifika Kurulumu (Let's Encrypt)
+# Kullanım: ./setup-ssl.sh yourdomain.com
+
+set -e
+
+DOMAIN=$1
+
+if [ -z "$DOMAIN" ]; then
+    echo "Kullanım: ./setup-ssh.sh yourdomain.com"
+    exit 1
+fi
+
+echo "SSL kurulumu başlıyor: $DOMAIN"
+
+# Nginx config'i güncelle
+sed -i "s/yourdomain.com/$DOMAIN/g" nginx/nginx.conf
+
+# HTTP server'ı comment out, HTTPS server'ı aktif et
+sed -i 's/^    # server {/    server {/' nginx/nginx.conf
+sed -i 's/^    #     listen 443/    listen 443/' nginx/nginx.conf
+sed -i 's/^    #     ssl_certificate/    ssl_certificate/' nginx/nginx.conf
+# ... (tüm comment'leri kaldır)
+
+# Certbot ile sertifika al
+docker run -it --rm \
+    -v $(pwd)/certbot-webroot:/var/www/certbot \
+    -v $(pwd)/certbot-certs:/etc/letsencrypt \
+    certbot/certbot certonly \
+    --webroot \
+    --webroot-path=/var/www/certbot \
+    --email admin@$DOMAIN \
+    --agree-tos \
+    --no-eff-email \
+    -d $DOMAIN \
+    -d www.$DOMAIN
+
+# Nginx'i yeniden başlat
+docker compose restart nginx
+
+echo "SSL kurulumu tamamlandı!"
+echo "https://$DOMAIN adresinden erişebilirsiniz."

_archive/test_options.py

@@ -0,0 +1,54 @@
+"""Test if yfinance has options support and can detect unusual options activity."""
+import yfinance as yf
+import pandas as pd
+
+print("=== yfinance Options Support Test ===\n")
+
+# Test AAPL options
+ticker = yf.Ticker("AAPL")
+try:
+    opts = ticker.options
+    print(f"AAPL Option expiry dates available: {len(opts)}")
+    if opts:
+        print(f"  Nearest expiry: {opts[0]}, Farthest: {opts[-1]}")
+        
+        chain = ticker.option_chain(opts[0])
+        print(f"\n  Calls columns: {list(chain.calls.columns)}")
+        print(f"  Puts  columns: {list(chain.puts.columns)}")
+        
+        print("\n  --- Top 5 Calls by volume ---")
+        top_calls = chain.calls.nlargest(5, 'volume')[['strike', 'lastPrice', 'volume', 'openInterest', 'impliedVolatility', 'contractSymbol']]
+        print(top_calls.to_string(index=False))
+        
+        print("\n  --- Top 5 Puts by volume ---")
+        top_puts = chain.puts.nlargest(5, 'volume')[['strike', 'lastPrice', 'volume', 'openInterest', 'impliedVolatility', 'contractSymbol']]
+        print(top_puts.to_string(index=False))
+except Exception as e:
+    print(f"AAPL options error: {e}")
+
+# Test multiple tickers for LEAPS (far OTM calls can be LEAPS proxy)
+print("\n\n=== Multi-ticker Options Test (LEAPS focus) ===\n")
+for sym in ['AAPL', 'TSLA', 'NVDA', 'MSFT', 'SPY', 'AMZN']:
+    try:
+        t = yf.Ticker(sym)
+        o = t.options
+        if o:
+            # Find far-dated expiry (more than 6 months out = potential LEAPS)
+            from datetime import datetime
+            today = datetime.today()
+            far_expiries = [
+                exp for exp in o
+                if (datetime.strptime(exp, '%Y-%m-%d') - today).days > 180
+            ]
+            print(f"{sym}: {len(o)} expiries, {len(far_expiries)} LEAPS-range (>6mo)")
+            
+            # If far expiries exist, check call volume
+            if far_expiries:
+                far_chain = t.option_chain(far_expiries[0])
+                total_call_vol = far_chain.calls['volume'].sum()
+                total_put_vol = far_chain.puts['volume'].sum()
+                print(f"  Far expiry {far_expiries[0]}: call_vol={total_call_vol}, put_vol={total_put_vol}")
+        else:
+            print(f"{sym}: No options data")
+    except Exception as e:
+        print(f"{sym}: Error - {e}")

_archive/test_options2.py

@@ -0,0 +1,60 @@
+"""Explore what 'abnormal options activity' means + yfinance options schema."""
+import yfinance as yf
+import pandas as pd
+from datetime import datetime
+
+print("=== Contract Symbol Format ===\n")
+ticker = yf.Ticker("AAPL")
+opts = ticker.options
+today = datetime.today()
+
+# Analyze all expiries to find LEAPS pattern and high-volume activities
+print(f"All expiries for AAPL ({len(opts)} total):")
+for i, exp in enumerate(opts):
+    try:
+        dt = datetime.strptime(exp, "%Y-%m-%d")
+        days_out = (dt - today).days
+        is_leaps = days_out > 365
+        flag = " <<< LEAPS" if is_leaps else ""
+        print(f"  {exp} ({days_out}d from now){flag}")
+    except:
+        print(f"  {exp} (parse error)")
+
+# Fetch the farthest expiry for LEAPS analysis
+if opts:
+    far_exp = opts[-1]
+    print(f"\n=== Far expiry chain: {far_exp} ===")
+    chain = ticker.option_chain(far_exp)
+    
+    calls = chain.calls.copy()
+    puts = chain.puts.copy()
+    
+    print(f"\nCalls: {len(calls)} rows")
+    print(f"Puts:  {len(puts)} rows")
+    
+    # Unusual call activity: high volume vs OI call ratio > 2
+    print("\n--- Top 10 calls by volume/oi ratio (> 2 = unusual) ---")
+    calls_active = calls[calls['volume'] > 0].copy()
+    calls_active['vol_oi_ratio'] = calls_active['volume'] / (calls_active['openInterest'] + 1)
+    unusual_calls = calls_active[calls_active['vol_oi_ratio'] > 2].nlargest(10, 'volume')
+    print(unusual_calls[['strike', 'volume', 'openInterest', 'vol_oi_ratio', 'impliedVolatility', 'contractSymbol']].to_string(index=False))
+    
+    # Unusual put activity: high volume vs OI put ratio > 2
+    print("\n--- Top 10 puts by volume/oi ratio (> 2 = unusual) ---")
+    puts_active = puts[puts['volume'] > 0].copy()
+    puts_active['vol_oi_ratio'] = puts_active['volume'] / (puts_active['openInterest'] + 1)
+    unusual_puts = puts_active[puts_active['vol_oi_ratio'] > 2].nlargest(10, 'volume')
+    print(unusual_puts[['strike', 'volume', 'openInterest', 'vol_oi_ratio', 'impliedVolatility', 'contractSymbol']].to_string(index=False))
+    
+    # Overall option flow signal
+    total_call_vol = calls['volume'].sum()
+    total_put_vol = puts['volume'].sum()
+    cpr = total_call_vol / (total_put_vol + 1)
+    print(f"\nCall/Put Volume Ratio: {cpr:.2f} (higher = bullish)")
+    print(f"Total Call Volume: {total_call_vol:,.0f}")
+    print(f"Total Put  Volume: {total_put_vol:,.0f}")
+    
+    # Highest IV strikes (potential LEAPS)
+    high_iv = calls.nlargest(5, 'impliedVolatility')[['strike', 'volume', 'openInterest', 'impliedVolatility', 'contractSymbol']]
+    print(f"\n--- 5 highest IV calls ---")
+    print(high_iv.to_string(index=False))

backend/.dockerignore

@@ -0,0 +1,8 @@
+venv/
+__pycache__/
+*.pyc
+.env
+.git/
+*.log
+test_*.py
+tmp/

backend/.gitignore

@@ -0,0 +1,16 @@
+# Backend .gitignore
+venv/
+.venv/
+__pycache__/
+*.pyc
+*.pyo
+.pytest_cache/
+.mypy_cache/
+*.egg-info/
+dist/
+build/
+.env
+.env.local
+*.log
+test_*.py
+tmp/

backend/data_fetcher.py

@@ -0,0 +1,47 @@
+"""
+Data fetching module using yfinance.
+Provides OHLCV data for given ticker and date range.
+"""
+
+import yfinance as yf
+import pandas as pd
+from datetime import datetime
+
+
+def fetch_ohlcv(
+    ticker: str,
+    start: str,
+    end: str,
+    interval: str = "1d"
+) -> pd.DataFrame:
+    """
+    Fetch OHLCV data from Yahoo Finance.
+
+    Args:
+        ticker: Stock/crypto ticker symbol (e.g., "AAPL", "BTC-USD")
+        start: Start date in YYYY-MM-DD format
+        end: End date in YYYY-MM-DD format
+        interval: Data interval - "1m", "5m", "15m", "1h", "1d", "1wk", "1mo"
+
+    Returns:
+        pd.DataFrame with columns: Open, High, Low, Close, Volume
+    """
+    try:
+        asset = yf.Ticker(ticker)
+        df = asset.history(start=start, end=end, interval=interval)
+
+        if df.empty:
+            raise ValueError(f"No data found for {ticker} in range {start} to {end}")
+
+        # Standardize column names
+        df.index.name = "Date"
+        df = df[["Open", "High", "Low", "Close", "Volume"]]
+
+        # Remove timezone info from index for JSON compat
+        if df.index.tz is not None:
+            df.index = df.index.tz_localize(None)
+
+        return df
+
+    except Exception as e:
+        raise RuntimeError(f"Failed to fetch data for {ticker}: {str(e)}")

backend/encoder.py

@@ -0,0 +1,85 @@
+"""
+NanEncoder - Custom JSON serializer for vectorbt output.
+Handles NaN, Inf, datetime, numpy types, and pandas objects.
+"""
+
+import json
+import math
+import numpy as np
+import pandas as pd
+from datetime import datetime, date
+
+
+class NanEncoder(json.JSONEncoder):
+    """Custom JSON encoder that handles vectorbt/pandas/numpy edge cases."""
+
+    def default(self, obj):
+        # numpy types
+        if isinstance(obj, (np.integer,)):
+            return int(obj)
+        if isinstance(obj, (np.floating,)):
+            if np.isnan(obj) or np.isinf(obj):
+                return None
+            return float(obj)
+        if isinstance(obj, np.ndarray):
+            return obj.tolist()
+        if isinstance(obj, (np.bool_,)):
+            return bool(obj)
+
+        # pandas types
+        if isinstance(obj, pd.Timestamp):
+            return obj.isoformat()
+        if isinstance(obj, pd.Series):
+            return obj.to_dict()
+        if isinstance(obj, pd.DataFrame):
+            return obj.to_dict(orient="records")
+        if isinstance(obj, pd.Timedelta):
+            return str(obj)
+
+        # datetime
+        if isinstance(obj, (datetime, date)):
+            return obj.isoformat()
+
+        # timedelta
+        from datetime import timedelta
+        if isinstance(obj, timedelta):
+            return str(obj)
+
+        return super().default(obj)
+
+
+def safe_json_response(data: dict) -> dict:
+    """
+    Convert a dict with numpy/pandas values to JSON-safe dict.
+    Replaces NaN/Inf with None, converts timestamps to ISO strings.
+    """
+    def _clean(value):
+        if isinstance(value, dict):
+            return {k: _clean(v) for k, v in value.items()}
+        if isinstance(value, (list, tuple)):
+            return [_clean(v) for v in value]
+        if isinstance(value, (np.floating, float)):
+            if math.isnan(value) or math.isinf(value):
+                return None
+            return float(value)
+        if isinstance(value, (np.integer,)):
+            return int(value)
+        if isinstance(value, (np.bool_,)):
+            return bool(value)
+        if isinstance(value, np.ndarray):
+            return _clean(value.tolist())
+        if isinstance(value, pd.Timestamp):
+            return value.isoformat()
+        if isinstance(value, (datetime, date)):
+            return value.isoformat()
+        if isinstance(value, pd.Timedelta):
+            return str(value)
+        if isinstance(value, pd.Series):
+            return _clean(value.to_dict())
+        if isinstance(value, pd.DataFrame):
+            return _clean(value.to_dict(orient="records"))
+        if pd.isna(value):
+            return None
+        return value
+
+    return _clean(data)

backend/leaps_scanner.py

@@ -0,0 +1,182 @@
+"""
+LEAPS Scanner — S&P 100 tabanlı concurrent LEAPS anomali tarama.
+Yakın zamanda yüksek miktarda LEAPS opsiyonu alınan hisseleri tespit eder.
+
+Kaynak: yfinance (ücretsiz, ~15-20 dakika gecikmeli veri)
+Strateji: S&P 100 ticker listesini concurrent tarayarak volume/OI > 2x LEAPS spike yakalar.
+"""
+
+import yfinance as yf
+import pandas as pd
+import numpy as np
+from datetime import datetime, timedelta
+from concurrent.futures import ThreadPoolExecutor, as_completed
+from typing import Optional
+
+# ── Constants ──────────────────────────────────────────────────────────
+
+LEAPS_MIN_DAYS = 365          # Vade > 1 yıl = LEAPS
+UNUSUAL_VOL_OI_MIN = 2.0      # volume/openInterest >= 2x = anormal
+MAX_WORKERS = 10              # Concurrent thread sayısı
+TIMEOUT_PER_TICKER = 15       # Ticker başına saniye timeout
+
+# S&P 100 ticker listesi (OEX — 100 büyük hacimli hisse)
+SP100_TICKERS = [
+    "AAPL", "MSFT", "GOOGL", "GOOG", "AMZN", "NVDA", "TSLA", "META",
+    "BRK-B", "JPM", "V", "JNJ", "WMT", "PG", "MA", "UNH", "HD", "DIS",
+    "PYPL", "BAC", "XOM", "INTC", "VZ", "ADBE", "NFLX", "CRM", "CSCO",
+    "PFE", "ABT", "ACN", "TMO", "AVGO", "DHR", "NKE", "TXN", "QCOM",
+    "COST", "NEE", "LIN", "PM", "BMY", "HON", "UNP", "LOW", "IBM",
+    "RTX", "SBUX", "AMD", "INTU", "GS", "CAT", "MDT", "AMGN", "BLK",
+    "GILD", "ADI", "ISRG", "BKNG", "T", "PLTR", "NOW", "SPGI", "MO",
+    "ELV", "SYK", "ZTS", "ADP", "MMC", "CB", "CI", "SO", "DUK",
+    "BDX", "TMUS", "SCHW", "EOG", "REGN", "LRCX", "PGR", "APD", "CL",
+    "SHW", "SLB", "ETN", "AON", "ITW", "BSX", "CME", "HUM", "MRNA",
+    "ABNB", "ORLY", "ATVI", "MCO", "KLAC", "PANW", "SNPS", "CDNS",
+    "FTNT", "NXPI", "ADM", "KDP", "MNST", "MCHP", "CTAS", "PAYX",
+    "AEP", "EXC", "AZN", "LHX", "NOC", "STZ", "KHC", "MAR", "DXCM",
+]
+
+
+# ── Helpers ────────────────────────────────────────────────────────────
+
+def _safe_ratio(num, den, default=0.0):
+    if den == 0 or pd.isna(den):
+        return default
+    return float(num) / float(den)
+
+
+def _is_leaps(expiry_date_str: str) -> bool:
+    """Vade > 365 gün ise LEAPS."""
+    try:
+        dt = datetime.strptime(expiry_date_str, "%Y-%m-%d")
+        return (dt - datetime.today()).days >= LEAPS_MIN_DAYS
+    except ValueError:
+        return False
+
+
+def scan_ticker_leaps(sym: str) -> Optional[dict]:
+    """
+    Tek ticker tarama: LEAPS opsiyonlarda anormal hacim/OI spike ara.
+    Sonuç bulunamazsa None döner.
+    """
+    try:
+        stock = yf.Ticker(sym)
+        expiry_dates = stock.options
+        if not expiry_dates:
+            return None
+
+        # LEAPS vadelerini belirle
+        leaps_expiries = [exp for exp in expiry_dates if _is_leaps(exp)]
+        if not leaps_expiries:
+            return None
+
+        total_leaps_call_vol = 0
+        total_leaps_put_vol = 0
+        total_leaps_call_oi = 0
+        total_leaps_put_oi = 0
+        unusual_spikes = []
+
+        for exp in leaps_expiries:
+            try:
+                chain = stock.option_chain(exp)
+            except Exception:
+                continue
+
+            for is_call, df in [(True, chain.calls), (False, chain.puts)]:
+                if df.empty:
+                    continue
+
+                active = df[df["volume"] > 0].copy()
+                if active.empty:
+                    continue
+
+                # Volume/OI ratio hesapla
+                active["vol_oi"] = active.apply(
+                    lambda r: _safe_ratio(r.get("volume", 0), r.get("openInterest", 0)),
+                    axis=1,
+                )
+
+                # Toplam hacim/OI
+                vol_sum = int(active["volume"].sum())
+                oi_sum = int(active["openInterest"].sum())
+                if is_call:
+                    total_leaps_call_vol += vol_sum
+                    total_leaps_call_oi += oi_sum
+                else:
+                    total_leaps_put_vol += vol_sum
+                    total_leaps_put_oi += oi_sum
+
+                # Anormal spike'lar: vol/OI >= threshold
+                spikes = active[active["vol_oi"] >= UNUSUAL_VOL_OI_MIN]
+                for _, row in spikes.iterrows():
+                    unusual_spikes.append({
+                        "type": "LEAPS CALL" if is_call else "LEAPS PUT",
+                        "expiry": exp,
+                        "strike": float(row.get("strike", 0)),
+                        "volume": int(row.get("volume", 0)),
+                        "openInterest": int(row.get("openInterest", 0)),
+                        "vol_oi_ratio": round(float(row.get("vol_oi", 0)), 1),
+                        "lastPrice": float(row.get("lastPrice", 0)) if pd.notna(row.get("lastPrice")) else 0,
+                        "impliedVolatility": round(float(row.get("impliedVolatility", 0)), 4) if pd.notna(row.get("impliedVolatility")) else 0,
+                        "signal": "BULLISH" if is_call else "BEARISH",
+                    })
+
+        if not unusual_spikes:
+            return None
+
+        # Özet hesapla
+        total_vol = total_leaps_call_vol + total_leaps_put_vol
+        cp_ratio = _safe_ratio(total_leaps_call_vol, total_leaps_put_vol)
+
+        # En büyük spike'ı bul
+        top_spike = max(unusual_spikes, key=lambda x: x["volume"])
+
+        return {
+            "ticker": sym,
+            "total_leaps_call_vol": total_leaps_call_vol,
+            "total_leaps_put_vol": total_leaps_put_vol,
+            "total_leaps_vol": total_vol,
+            "call_put_ratio": round(cp_ratio, 2),
+            "unusual_count": len(unusual_spikes),
+            "top_spike": top_spike,
+            "all_spikes": unusual_spikes[:10],  # Max 10 spike
+            "leaps_expiries_count": len(leaps_expiries),
+            "nearest_leaps_expiry": leaps_expiries[0] if leaps_expiries else None,
+            "scan_time": datetime.utcnow().isoformat(),
+        }
+
+    except Exception:
+        return None
+
+
+def scan_all_sp100_leaps(max_tickers: int = 100) -> list[dict]:
+    """
+    S&P 100 ticker listesini concurrent tarayarak LEAPS anomali bulur.
+    Sonuçları toplam LEAPS hacmine göre sıralı döndürür.
+
+    Parametre:
+        max_tickers: Taranacak maks ticker sayısı (varsayılan 100, S&P 100)
+
+    Dönüş:
+        list[dict]: LEAPS anomali bulunan ticker'lar, hacme göre sıralı
+    """
+    tickers = SP100_TICKERS[:max_tickers]
+    results = []
+
+    with ThreadPoolExecutor(max_workers=MAX_WORKERS) as executor:
+        future_to_sym = {
+            executor.submit(scan_ticker_leaps, sym): sym
+            for sym in tickers
+        }
+        for future in as_completed(future_to_sym, timeout=120):
+            try:
+                result = future.result(timeout=TIMEOUT_PER_TICKER)
+                if result is not None:
+                    results.append(result)
+            except Exception:
+                continue
+
+    # Toplam LEAPS hacmine göre sırala
+    results.sort(key=lambda x: x["total_leaps_vol"], reverse=True)
+    return results

backend/main.py

@@ -0,0 +1,530 @@
+"""
+Terminal.AI - VectorBT Financial Analysis Backend
+FastAPI server providing backtesting and technical analysis endpoints.
+"""
+
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel, Field
+from typing import Optional, Literal
+import pandas as pd
+import time
+import os
+from datetime import datetime
+
+from data_fetcher import fetch_ohlcv
+from strategies import (
+    run_strategy, run_all_strategies, STRATEGIES,
+    calculate_rsi, calculate_macd,
+)
+from options_flow import (
+    fetch_options_flow, rank_tickers_by_leaps_activity, rank_single_ticker,
+    DEFAULT_SCAN_TICKERS,
+)
+from leaps_scanner import scan_all_sp100_leaps
+from encoder import safe_json_response
+
+app = FastAPI(
+    title="Terminal.AI",
+    description="VectorBT-based financial backtesting and analysis platform",
+    version="1.1.0"
+)
+
+# CORS - allow Next.js frontend
+# Production'da FRONTEND_URL env'den okunur (Vercel URL'i)
+# Development'da localhost:3000 varsayılan
+import os as _os
+_cors_origins = ["http://localhost:3000"]
+_frontend_url = _os.environ.get("FRONTEND_URL", "")
+if _frontend_url:
+    _cors_origins.append(_frontend_url)
+    # https:// ön ekini de ekle (Vercel bazen https döndürür)
+    if _frontend_url.startswith("https://"):
+        _cors_origins.append(_frontend_url.replace("https://", "http://"))
+    elif _frontend_url.startswith("http://"):
+        _cors_origins.append(_frontend_url.replace("http://", "https://"))
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=_cors_origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ── Simple in-memory cache ──────────────────────────────────────────
+_cache: dict = {}
+_CACHE_TTL = 600  # 10 minutes
+
+
+def _cached(key: str, ttl: int = _CACHE_TTL):
+    """Decorator-like helper: return cached value or None if expired/missing."""
+    entry = _cache.get(key)
+    if entry and time.time() - entry["ts"] < ttl:
+        return entry["data"]
+    return None
+
+
+def _set_cache(key: str, data):
+    _cache[key] = {"data": data, "ts": time.time()}
+
+
+# ── Request / Response Models ──────────────────────────────────────
+
+class BacktestRequest(BaseModel):
+    ticker: str = Field(..., description="Ticker symbol, e.g. AAPL, BTC-USD")
+    start_date: str = Field(..., description="Start date YYYY-MM-DD")
+    end_date: str = Field(..., description="End date YYYY-MM-DD")
+    interval: str = Field(default="1d", description="Data interval: 1d, 1h, 1wk, etc.")
+    strategy: str = Field(default="sma", description="Strategy: sma, ema, bollinger")
+    fast_ma: int = Field(default=10, ge=2, le=200, description="Fast MA period (SMA/EMA)")
+    slow_ma: int = Field(default=30, ge=2, le=500, description="Slow MA period (SMA/EMA)")
+    bb_window: int = Field(default=20, ge=2, le=200, description="Bollinger Bands window")
+    bb_std: float = Field(default=2.0, ge=0.5, le=4.0, description="Bollinger Bands std dev")
+    fees: float = Field(default=0.001, ge=0, le=0.1, description="Transaction fee")
+    init_cash: float = Field(default=10000.0, ge=100, description="Initial cash")
+    rsi_window: int = Field(default=14, ge=2, le=100, description="RSI period")
+    macd_fast: int = Field(default=12, ge=2, le=100, description="MACD fast period")
+    macd_slow: int = Field(default=26, ge=2, le=200, description="MACD slow period")
+    macd_signal: int = Field(default=9, ge=2, le=100, description="MACD signal period")
+
+
+class HealthResponse(BaseModel):
+    status: str
+    version: str
+
+
+# ── Helpers ──────────────────────────────────────────────────────────
+
+def _get_strategy_kwargs(request: BacktestRequest) -> dict:
+    """Extract strategy-specific kwargs from request."""
+    if request.strategy == "bollinger":
+        return {
+            "window": request.bb_window,
+            "std": request.bb_std,
+            "fees": request.fees,
+            "init_cash": request.init_cash,
+        }
+    else:
+        return {
+            "fast_window": request.fast_ma,
+            "slow_window": request.slow_ma,
+            "fees": request.fees,
+            "init_cash": request.init_cash,
+        }
+
+
+def _build_backtest_response(df: pd.DataFrame, result: dict, request: BacktestRequest) -> dict:
+    """Build the standard backtest response dict."""
+    close = df["Close"]
+    dates = close.index.tolist()
+
+    # Calculate indicators
+    rsi_data = calculate_rsi(close, window=request.rsi_window)
+    macd_data = calculate_macd(
+        close=close,
+        fast_window=request.macd_fast,
+        slow_window=request.macd_slow,
+        signal_window=request.macd_signal,
+    )
+
+    response = {
+        "ticker": request.ticker,
+        "start_date": request.start_date,
+        "end_date": request.end_date,
+        "interval": request.interval,
+        "strategy": request.strategy,
+        "data_points": len(df),
+        "dates": dates,
+        "ohlcv": {
+            "open": df["Open"].tolist(),
+            "high": df["High"].tolist(),
+            "low": df["Low"].tolist(),
+            "close": close.tolist(),
+            "volume": df["Volume"].tolist(),
+        },
+        "portfolio": {
+            "stats": result["stats"],
+            "trades": result["trades"],
+            "equity_curve": result["equity_curve"],
+            "returns": result["returns"],
+            "drawdown": result["drawdown"],
+        },
+        "indicators": {
+            "rsi": rsi_data,
+            "macd": macd_data,
+        },
+        "signals": {
+            "entries": result["entries"],
+            "exits": result["exits"],
+        },
+    }
+
+    # Add strategy-specific indicator data
+    if request.strategy == "sma":
+        response["indicators"]["sma"] = {
+            "fast": result["fast_sma"],
+            "slow": result["slow_sma"],
+            "fast_window": request.fast_ma,
+            "slow_window": request.slow_ma,
+        }
+    elif request.strategy == "ema":
+        response["indicators"]["ema"] = {
+            "fast": result["fast_ema"],
+            "slow": result["slow_ema"],
+            "fast_window": request.fast_ma,
+            "slow_window": request.slow_ma,
+        }
+    elif request.strategy == "bollinger":
+        response["indicators"]["bollinger"] = {
+            "middle": result["middle"],
+            "upper": result["upper"],
+            "lower": result["lower"],
+            "window": request.bb_window,
+            "std": request.bb_std,
+        }
+
+    return response
+
+
+# ── Endpoints ──────────────────────────────────────────────────────
+
+@app.get("/api/health", response_model=HealthResponse)
+async def health_check():
+    """Health check endpoint."""
+    return {"status": "ok", "version": "1.1.0"}
+
+
+@app.get("/api/strategies")
+async def list_strategies():
+    """List available strategies and their default parameters."""
+    return {
+        "strategies": [
+            {
+                "id": "sma",
+                "name": "SMA Crossover",
+                "description": "Buy when fast SMA crosses above slow SMA",
+                "params": {"fast_window": 10, "slow_window": 30},
+            },
+            {
+                "id": "ema",
+                "name": "EMA Crossover",
+                "description": "Buy when fast EMA crosses above slow EMA",
+                "params": {"fast_window": 12, "slow_window": 26},
+            },
+            {
+                "id": "bollinger",
+                "name": "Bollinger Bands",
+                "description": "Mean reversion: buy at lower band, sell at upper band",
+                "params": {"window": 20, "std": 2.0},
+            },
+        ]
+    }
+
+
+@app.post("/api/backtest")
+async def backtest(request: BacktestRequest):
+    """Run a backtest with the selected strategy and indicators."""
+    try:
+        # 1. Fetch data
+        df = fetch_ohlcv(
+            ticker=request.ticker,
+            start=request.start_date,
+            end=request.end_date,
+            interval=request.interval,
+        )
+
+        close = df["Close"]
+
+        # 2. Run selected strategy
+        strategy_kwargs = _get_strategy_kwargs(request)
+        strategy_kwargs["freq"] = request.interval
+        result = run_strategy(request.strategy, close=close, **strategy_kwargs)
+
+        # 3. Build response
+        response = _build_backtest_response(df, result, request)
+        return safe_json_response(response)
+
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except RuntimeError as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Internal error: {str(e)}")
+
+
+@app.post("/api/compare")
+async def compare_strategies(request: BacktestRequest):
+    """Run all strategies and return comparison results."""
+    try:
+        df = fetch_ohlcv(
+            ticker=request.ticker,
+            start=request.start_date,
+            end=request.end_date,
+            interval=request.interval,
+        )
+
+        close = df["Close"]
+        dates = close.index.tolist()
+
+        # Run all strategies with default params + user's fees/cash/freq
+        comparison = run_all_strategies(
+            close=close,
+            fees=request.fees,
+            init_cash=request.init_cash,
+            freq=request.interval,
+        )
+
+        # Calculate indicators (same for all strategies)
+        rsi_data = calculate_rsi(close, window=request.rsi_window)
+        macd_data = calculate_macd(
+            close=close,
+            fast_window=request.macd_fast,
+            slow_window=request.macd_slow,
+            signal_window=request.macd_signal,
+        )
+
+        response = {
+            "ticker": request.ticker,
+            "start_date": request.start_date,
+            "end_date": request.end_date,
+            "interval": request.interval,
+            "data_points": len(df),
+            "dates": dates,
+            "ohlcv": {
+                "open": df["Open"].tolist(),
+                "high": df["High"].tolist(),
+                "low": df["Low"].tolist(),
+                "close": close.tolist(),
+                "volume": df["Volume"].tolist(),
+            },
+            "indicators": {
+                "rsi": rsi_data,
+                "macd": macd_data,
+            },
+            "comparison": comparison,
+        }
+
+        return safe_json_response(response)
+
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except RuntimeError as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Internal error: {str(e)}")
+
+
+@app.get("/api/ticker/{ticker}")
+async def get_ticker_info(ticker: str):
+    """Get basic ticker info and latest price."""
+    try:
+        df = fetch_ohlcv(ticker=ticker, start="2000-01-01", end="2030-12-31")
+        return safe_json_response({
+            "ticker": ticker,
+            "latest_close": df["Close"].iloc[-1] if not df.empty else None,
+            "data_points": len(df),
+            "date_range": {
+                "start": df.index[0].isoformat(),
+                "end": df.index[-1].isoformat(),
+            }
+        })
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/api/ticker/{ticker}/range")
+async def get_ticker_range(ticker: str):
+    """Get the earliest and latest available date for a ticker."""
+    cache_key = f"range:{ticker.upper()}"
+    cached = _cached(cache_key)
+    if cached:
+        return cached
+
+    try:
+        df = fetch_ohlcv(ticker=ticker, start="2000-01-01", end="2030-12-31")
+        if df.empty:
+            raise HTTPException(status_code=404, detail=f"No data found for {ticker}")
+        result = {
+            "ticker": ticker,
+            "earliest": df.index[0].isoformat(),
+            "latest": df.index[-1].isoformat(),
+            "data_points": len(df),
+        }
+        _set_cache(cache_key, result)
+        return result
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except RuntimeError as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Internal error: {str(e)}")
+
+
+@app.get("/api/ticker/{ticker}/fundamentals")
+async def get_ticker_fundamentals(ticker: str):
+    """Get company fundamentals and valuation multiples."""
+    cache_key = f"fundamentals:{ticker.upper()}"
+    cached = _cached(cache_key)
+    if cached:
+        return cached
+
+    try:
+        import yfinance as yf
+        stock = yf.Ticker(ticker)
+        info = stock.info
+
+        def safe(v):
+            if v is None or v == "None":
+                return None
+            return v
+
+        result = {
+            "ticker": ticker,
+            "company": {
+                "name": safe(info.get("shortName")),
+                "sector": safe(info.get("sector")),
+                "industry": safe(info.get("industry")),
+                "summary": safe(info.get("longBusinessSummary")),
+            },
+            "valuation": {
+                "marketCap": safe(info.get("marketCap")),
+                "enterpriseValue": safe(info.get("enterpriseValue")),
+                "trailingPE": safe(info.get("trailingPE")),
+                "forwardPE": safe(info.get("forwardPE")),
+                "priceToBook": safe(info.get("priceToBook")),
+                "enterpriseToEbitda": safe(info.get("enterpriseToEbitda")),
+                "priceToSales": safe(info.get("priceToSalesTrailing12Months")),
+            },
+            "financials": {
+                "revenuePerShare": safe(info.get("revenuePerShare")),
+                "earningsPerShare": safe(info.get("trailingEps")),
+                "profitMargins": safe(info.get("profitMargins")),
+                "operatingMargins": safe(info.get("operatingMargins")),
+                "returnOnEquity": safe(info.get("returnOnEquity")),
+                "debtToEquity": safe(info.get("debtToEquity")),
+                "currentRatio": safe(info.get("currentRatio")),
+                "freeCashflow": safe(info.get("freeCashflow")),
+                "revenueGrowth": safe(info.get("revenueGrowth")),
+            },
+            "trading": {
+                "beta": safe(info.get("beta")),
+                "dividendYield": safe(info.get("dividendYield")),
+                "fiftyTwoWeekHigh": safe(info.get("fiftyTwoWeekHigh")),
+                "fiftyTwoWeekLow": safe(info.get("fiftyTwoWeekLow")),
+                "averageVolume": safe(info.get("averageVolume")),
+            },
+        }
+        _set_cache(cache_key, result)
+        return result
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to fetch fundamentals for {ticker}: {str(e)}")
+
+
+# ── Options Flow Endpoints ────────────────────────────────────────────
+
+@app.get("/api/ticker/{ticker}/options-flow")
+async def get_options_flow(ticker: str):
+    """
+    Get full options chain analysis for a ticker:
+    - Per-expiry call/put volumes, OI, volume/OI ratios
+    - LEAPS (expiry > 1 year) highlighted separately
+    - Unusual volume/OI spikes (vol/OI > 2x)
+    - Call/Put volume ratio overall
+    - Last 24h change data when available
+    Cached for 5 minutes (options data doesn't change intra-minute).
+    """
+    cache_key = f"options-flow:{ticker.upper()}"
+    cached = _cached(cache_key, ttl=300)
+    if cached:
+        return cached
+
+    try:
+        data = fetch_options_flow(ticker)
+        _set_cache(cache_key, data)
+        return safe_json_response(data)
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except RuntimeError as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Options data error for {ticker}: {str(e)}")
+
+
+@app.get("/api/options-flow/leaps-board")
+async def get_leaps_board(limit: int = 15):
+    """
+    Scan the top tickers by LEAPS (long-dated >1yr) options activity.
+    Returns tickers ranked by total unusual + high-volume options flow.
+    Useful for spotting which stocks have unusual long-dated options buying.
+    Default scan set: 22 liquid US equities + ETFs.
+    Set limit to control how many results returned (max 50).
+    """
+    import asyncio
+    limit = max(1, min(limit, 50))
+    try:
+        # Run blocking yfinance calls in thread pool for concurrency
+        loop = asyncio.get_event_loop()
+        tasks = [
+            loop.run_in_executor(None, rank_single_ticker, sym)
+            for sym in DEFAULT_SCAN_TICKERS
+        ]
+        results_raw = await asyncio.gather(*tasks, return_exceptions=True)
+        ranked = [r for r in results_raw if isinstance(r, dict)]
+        ranked.sort(
+            key=lambda x: x.get("total_call_volume", 0) + x.get("total_put_volume", 0),
+            reverse=True,
+        )
+        return safe_json_response({
+            "count": len(ranked),
+            "scan_tickers": DEFAULT_SCAN_TICKERS,
+            "results": ranked[:limit],
+        })
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"LEAPS board error: {str(e)}")
+
+
+@app.get("/api/leaps/scanner")
+async def leaps_scanner(max_tickers: int = 100, min_spikes: int = 1):
+    """
+    S&P 100 tabanlı LEAPS anomali tarama.
+    Yakın zamanda yüksek miktarda LEAPS opsiyonu alınan hisseleri tespit eder.
+
+    Parametreler:
+        max_tickers: Taranacak maks ticker sayısı (varsayılan 100, max 100)
+        min_spikes: Minimum anormal spike sayısı filtresi (varsayılan 1)
+
+    Response:
+        tickers: LEAPS anomali bulunan ticker'lar (hacme göre sıralı)
+        scan_info: Tarama bilgisi (ticker sayısı, süre, zaman)
+    """
+    import time as _time
+    max_tickers = max(1, min(max_tickers, 100))
+    min_spikes = max(1, min_spikes)
+
+    try:
+        t0 = _time.time()
+        results = scan_all_sp100_leaps(max_tickers=max_tickers)
+        elapsed = round(_time.time() - t0, 1)
+
+        # Min spike filtresi
+        if min_spikes > 1:
+            results = [r for r in results if r["unusual_count"] >= min_spikes]
+
+        return safe_json_response({
+            "tickers": results,
+            "count": len(results),
+            "scan_info": {
+                "max_tickers": max_tickers,
+                "min_spikes": min_spikes,
+                "scan_time_sec": elapsed,
+                "scanned_at": datetime.utcnow().isoformat(),
+            },
+        })
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"LEAPS scanner error: {str(e)}")
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000, timeout_keep_alive=300)

backend/options_flow.py

@@ -0,0 +1,268 @@
+"""
+Options flow and unusual activity module.
+Provides LEAPS detection, call/put ratio, and unusual volume analysis
+via yfinance option chain data.
+"""
+
+import yfinance as yf
+import pandas as pd
+import numpy as np
+from datetime import datetime, timedelta
+from typing import Optional
+
+# ── Constants ──────────────────────────────────────────────────────────
+
+LEAPS_MIN_DAYS = 365          # Expiry > 1 year = LEAPS
+UNUSUAL_VOL_OI_THRESHOLD = 2.0  # volume / openInterest threshold for unusual activity
+CPR_BULLISH = 3.0             # Call/Put ratio above this = bullish
+CPR_BEARISH = 0.33            # Call/Put ratio below this = bearish
+
+# Tickers to scan for the top LEAPS movers board
+DEFAULT_SCAN_TICKERS = [
+    "AAPL", "MSFT", "GOOGL", "AMZN", "NVDA", "TSLA", "META",
+    "SPY", "QQQ", "IWM", "AMD", "INTC", "PLTR", "COIN",
+    "JPM", "BAC", "GS", "JNJ", "PFE", "UNH", "XOM", "CVX",
+]
+
+
+# ── Helpers ────────────────────────────────────────────────────────────
+
+def _safe_ratio(num, den, default=0.0):
+    """Avoid division by zero."""
+    if den == 0 or pd.isna(den):
+        return default
+    return float(num) / float(den)
+
+
+def _detect_leaps(expiry_dates: list[str]) -> list[str]:
+    """Filter expiries that are LEAPS-range (> 365 days out)."""
+    today = datetime.today()
+    leaps = []
+    for exp in expiry_dates:
+        try:
+            dt = datetime.strptime(exp, "%Y-%m-%d")
+            if (dt - today).days >= LEAPS_MIN_DAYS:
+                leaps.append(exp)
+        except ValueError:
+            continue
+    return leaps
+
+
+def _analyze_chain(
+    calls: pd.DataFrame,
+    puts: pd.DataFrame,
+    expiry: str,
+    is_leaps: bool = False,
+) -> dict:
+    """Analyze a single option chain (calls + puts) for one expiry."""
+    result = {
+        "expiry": expiry,
+        "is_leaps": is_leaps,
+        "total_call_volume": 0,
+        "total_put_volume": 0,
+        "total_call_oi": 0,
+        "total_put_oi": 0,
+        "call_put_ratio": 0.0,
+        "top_calls": [],
+        "top_puts": [],
+        "unusual_calls": [],
+        "unusual_puts": [],
+    }
+
+    # --- Calls ---
+    active_calls = calls[calls["volume"] > 0].copy()
+    if not active_calls.empty:
+        active_calls["vol_oi_ratio"] = active_calls.apply(
+            lambda r: _safe_ratio(r["volume"], r["openInterest"]), axis=1
+        )
+        result["total_call_volume"] = int(calls["volume"].sum())
+        result["total_call_oi"] = int(calls["openInterest"].sum())
+        # Top calls by volume
+        top = active_calls.nlargest(5, "volume")[
+            ["strike", "lastPrice", "volume", "openInterest",
+             "vol_oi_ratio", "impliedVolatility", "inTheMoney", "contractSymbol"]
+        ]
+        result["top_calls"] = _rows_to_dicts(top)
+        # Unusual: vol_oi_ratio > threshold
+        unusual = active_calls[active_calls["vol_oi_ratio"] >= UNUSUAL_VOL_OI_THRESHOLD].nlargest(10, "volume")
+        result["unusual_calls"] = _rows_to_dicts(unusual)
+
+    # --- Puts ---
+    active_puts = puts[puts["volume"] > 0].copy()
+    if not active_puts.empty:
+        active_puts["vol_oi_ratio"] = active_puts.apply(
+            lambda r: _safe_ratio(r["volume"], r["openInterest"]), axis=1
+        )
+        result["total_put_volume"] = int(puts["volume"].sum())
+        result["total_put_oi"] = int(puts["openInterest"].sum())
+        top = active_puts.nlargest(5, "volume")[
+            ["strike", "lastPrice", "volume", "openInterest",
+             "vol_oi_ratio", "impliedVolatility", "inTheMoney", "contractSymbol"]
+        ]
+        result["top_puts"] = _rows_to_dicts(top)
+        unusual = active_puts[active_puts["vol_oi_ratio"] >= UNUSUAL_VOL_OI_THRESHOLD].nlargest(10, "volume")
+        result["unusual_puts"] = _rows_to_dicts(unusual)
+
+    # Overall call/put ratio
+    result["call_put_ratio"] = _safe_ratio(
+        result["total_call_volume"], result["total_put_volume"]
+    )
+    return result
+
+
+def _rows_to_dicts(df: pd.DataFrame) -> list[dict]:
+    """Convert DataFrame rows to list of dicts with safe JSON types."""
+    records = []
+    if df.empty:
+        return records
+    for _, row in df.iterrows():
+        rec = {}
+        for col in df.columns:
+            val = row[col]
+            if isinstance(val, (pd.Timestamp,)):
+                rec[col] = val.isoformat()
+            elif isinstance(val, (np.integer,)):
+                rec[col] = int(val)
+            elif isinstance(val, (np.floating,)):
+                rec[col] = float(val)
+            elif pd.isna(val):
+                rec[col] = None
+            else:
+                rec[col] = val
+        records.append(rec)
+    return records
+
+
+# ── Public API ─────────────────────────────────────────────────────────
+
+def fetch_options_flow(ticker: str) -> dict:
+    """
+    Fetch full options flow data for a ticker:
+    - All expiries (near and far)
+    - LEAPS highlighted
+    - Unusual volume/OI spikes
+    - Call/Put volume ratio
+
+    Returns a structured dict for JSON response.
+    """
+    try:
+        stock = yf.Ticker(ticker)
+        expiry_dates = stock.options
+        if not expiry_dates:
+            raise ValueError(f"No options data available for {ticker}")
+
+        has_leaps = False
+        leaps_expiries = _detect_leaps(expiry_dates)
+        if leaps_expiries:
+            has_leaps = True
+
+        all_expiries_data = []
+        unusual_activities = []
+        leaps_data = []
+
+        for i, exp in enumerate(expiry_dates):
+            is_leaps_flag = exp in leaps_expiries
+            chain = stock.option_chain(exp)
+            expiry_info = _analyze_chain(
+                chain.calls, chain.puts, expiry=exp, is_leaps=is_leaps_flag
+            )
+
+            if is_leaps_flag:
+                leaps_data.append(expiry_info)
+                # Mark highest volume/vol_oi strikes as unusual
+                for uc in expiry_info.get("unusual_calls", []):
+                    uc["expiry"] = exp
+                    uc["type"] = "leaps_call"
+                    uc["signal"] = "BULLISH"
+                    unusual_activities.append(uc)
+                for up in expiry_info.get("unusual_puts", []):
+                    up["expiry"] = exp
+                    up["type"] = "leaps_put"
+                    up["signal"] = "BEARISH"
+                    unusual_activities.append(up)
+
+            all_expiries_data.append(expiry_info)
+
+        # Sort unusual activities by volume descending
+        unusual_activities.sort(key=lambda x: x.get("volume", 0), reverse=True)
+        unusual_activities = unusual_activities[:20]  # cap at 20
+
+        # Compute summary using the NEAREST expiry as primary
+        nearest = all_expiries_data[0] if all_expiries_data else {}
+        total_callVol = sum(e["total_call_volume"] for e in all_expiries_data)
+        total_putVol = sum(e["total_put_volume"] for e in all_expiries_data)
+
+        return {
+            "ticker": ticker,
+            "as_of": datetime.utcnow().isoformat(),
+            "has_leaps": has_leaps,
+            "leaps_expiries": leaps_expiries,
+            "summary": {
+                "total_call_volume": total_callVol,
+                "total_put_volume": total_putVol,
+                "call_put_ratio": round(_safe_ratio(total_callVol, total_putVol), 2),
+                "total_expiries": len(expiry_dates),
+                "nearest_call_put_ratio": nearest.get("call_put_ratio", 0.0),
+                "unusual_count": len(unusual_activities),
+            },
+            "all_expiries": all_expiries_data,
+            "leaps": leaps_data,
+            "unusual_activities": unusual_activities,
+        }
+
+    except ValueError:
+        raise
+    except Exception as e:
+        raise RuntimeError(f"Failed to fetch options data for {ticker}: {str(e)}")
+
+
+def rank_single_ticker(sym: str) -> dict | None:
+    """Fetch options flow for a single ticker, returning a compact summary dict."""
+    try:
+        data = fetch_options_flow(sym)
+        summary = data["summary"]
+        return {
+            "ticker": sym,
+            "has_leaps": data["has_leaps"],
+            "leaps_count": len(data["leaps"]),
+            "total_call_volume": summary["total_call_volume"],
+            "total_put_volume": summary["total_put_volume"],
+            "call_put_ratio": summary["call_put_ratio"],
+            "nearest_call_put_ratio": summary["nearest_call_put_ratio"],
+            "unusual_count": summary["unusual_count"],
+            "top_leaps_expiry": data["leaps_expiries"][-1] if data["leaps_expiries"] else None,
+        }
+    except Exception:
+        return None
+
+
+def rank_tickers_by_leaps_activity(tickers: list[str]) -> list[dict]:
+    """
+    Scan multiple tickers and rank them by options flow activity.
+    Returns list of {ticker, leaps_count, leaps_call_vol, leaps_put_vol, call_put_ratio, top_leaps_expiry}
+    sorted by total unusual activity.
+    """
+    results = []
+    for sym in tickers:
+        try:
+            data = fetch_options_flow(sym)
+            summary = data["summary"]
+
+            results.append({
+                "ticker": sym,
+                "has_leaps": data["has_leaps"],
+                "leaps_count": len(data["leaps"]),
+                "total_call_volume": summary["total_call_volume"],
+                "total_put_volume": summary["total_put_volume"],
+                "call_put_ratio": summary["call_put_ratio"],
+                "nearest_call_put_ratio": summary["nearest_call_put_ratio"],
+                "unusual_count": summary["unusual_count"],
+                "top_leaps_expiry": data["leaps_expiries"][-1] if data["leaps_expiries"] else None,
+            })
+        except Exception:
+            # Skip tickers with no options data
+            continue
+
+    # Sort by total call volume + put volume descending
+    results.sort(key=lambda x: x.get("total_call_volume", 0) + x.get("total_put_volume", 0), reverse=True)
+    return results

backend/requirements.txt

@@ -0,0 +1,9 @@
+fastapi==0.115.0
+uvicorn==0.30.6
+vectorbt==0.26.2
+yfinance==0.2.54
+pandas==2.2.3
+numpy==1.26.4
+pydantic==2.9.2
+python-dateutil==2.9.0
+httpx==0.27.0

backend/start.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+# Backend başlat — önce portu temizle (Windows uyumlu)
+
+PORT=8000
+
+# Python ile portu temizle
+python -c "
+import subprocess, sys
+result = subprocess.run(['netstat', '-ano'], capture_output=True, text=True)
+for line in result.stdout.splitlines():
+    if ':${PORT}' in line and 'LISTENING' in line:
+        pid = line.strip().split()[-1]
+        print(f'Killing PID {pid} on port ${PORT}')
+        subprocess.run(['taskkill', '/PID', pid, '/F'], capture_output=True)
+        break
+"
+
+sleep 2
+
+echo "Starting FastAPI on port $PORT..."
+source venv/Scripts/activate
+python main.py

backend/strategies.py

@@ -0,0 +1,277 @@
+"""
+Strategy module using vectorbt.
+Implements SMA Crossover, EMA Crossover, Bollinger Bands, RSI, and MACD.
+"""
+
+import vectorbt as vbt
+import pandas as pd
+import numpy as np
+
+
+def run_sma_crossover(
+    close: pd.Series,
+    fast_window: int = 10,
+    slow_window: int = 30,
+    fees: float = 0.001,
+    init_cash: float = 10000.0,
+    freq: str = "1D"
+) -> dict:
+    """Run SMA Crossover backtest using vectorbt."""
+    fast_sma = vbt.MA.run(close, window=fast_window)
+    slow_sma = vbt.MA.run(close, window=slow_window)
+
+    entries = fast_sma.ma_crossed_above(slow_sma)
+    exits = fast_sma.ma_crossed_below(slow_sma)
+
+    portfolio = vbt.Portfolio.from_signals(
+        close=close,
+        entries=entries,
+        exits=exits,
+        init_cash=init_cash,
+        fees=fees,
+        freq=freq
+    )
+
+    stats = portfolio.stats()
+    trades = portfolio.trades.records_readable
+    equity_curve = portfolio.value()
+    returns = portfolio.returns()
+    drawdown = portfolio.drawdown()
+
+    return {
+        "stats": stats,
+        "trades": trades,
+        "equity_curve": equity_curve,
+        "returns": returns,
+        "drawdown": drawdown,
+        "fast_sma": fast_sma.ma,
+        "slow_sma": slow_sma.ma,
+        "entries": entries,
+        "exits": exits,
+        "label": f"SMA({fast_window}/{slow_window})",
+    }
+
+
+def run_ema_crossover(
+    close: pd.Series,
+    fast_window: int = 12,
+    slow_window: int = 26,
+    fees: float = 0.001,
+    init_cash: float = 10000.0,
+    freq: str = "1D"
+) -> dict:
+    """Run EMA Crossover backtest using pandas EWM.
+
+    Note: vectorbt 0.26.x doesn't export vbt.EMA directly,
+    so we compute EMAs via pandas ewm() then detect crossovers manually.
+    """
+    fast_ema_series = close.ewm(span=fast_window, adjust=False).mean()
+    slow_ema_series = close.ewm(span=slow_window, adjust=False).mean()
+
+    entries = pd.Series(False, index=close.index)
+    exits = pd.Series(False, index=close.index)
+
+    for i in range(1, len(close)):
+        f_prev, f_curr = fast_ema_series.iloc[i - 1], fast_ema_series.iloc[i]
+        s_prev, s_curr = slow_ema_series.iloc[i - 1], slow_ema_series.iloc[i]
+        if pd.isna(f_curr) or pd.isna(s_curr) or pd.isna(f_prev) or pd.isna(s_prev):
+            continue
+        if f_prev <= s_prev and f_curr > s_curr:
+            entries.iloc[i] = True
+        if f_prev >= s_prev and f_curr < s_curr:
+            exits.iloc[i] = True
+
+    portfolio = vbt.Portfolio.from_signals(
+        close=close,
+        entries=entries,
+        exits=exits,
+        init_cash=init_cash,
+        fees=fees,
+        freq=freq
+    )
+
+    stats = portfolio.stats()
+    trades = portfolio.trades.records_readable
+    equity_curve = portfolio.value()
+    returns = portfolio.returns()
+    drawdown = portfolio.drawdown()
+
+    return {
+        "stats": stats,
+        "trades": trades,
+        "equity_curve": equity_curve,
+        "returns": returns,
+        "drawdown": drawdown,
+        "fast_ema": fast_ema_series,
+        "slow_ema": slow_ema_series,
+        "entries": entries,
+        "exits": exits,
+        "label": f"EMA({fast_window}/{slow_window})",
+    }
+
+
+def run_bollinger_bands(
+    close: pd.Series,
+    window: int = 20,
+    std: float = 2.0,
+    fees: float = 0.001,
+    init_cash: float = 10000.0,
+    freq: str = "1D"
+) -> dict:
+    """Run Bollinger Bands mean-reversion backtest using pandas.
+
+    Note: vectorbt 0.26.x BBANDS.run has a parameter conflict,
+    so we compute bands manually with pandas rolling.
+    """
+    import numpy as np
+
+    rolling_mean = close.rolling(window=window).mean()
+    rolling_std = close.rolling(window=window).std(ddof=0)
+
+    middle = rolling_mean
+    upper = rolling_mean + (rolling_std * std)
+    lower = rolling_mean - (rolling_std * std)
+
+    # Mean reversion signals
+    entries = pd.Series(False, index=close.index)
+    exits = pd.Series(False, index=close.index)
+
+    for i in range(len(close)):
+        if pd.isna(lower.iloc[i]) or pd.isna(upper.iloc[i]) or pd.isna(close.iloc[i]):
+            continue
+        if close.iloc[i] <= lower.iloc[i]:
+            entries.iloc[i] = True
+        if close.iloc[i] >= upper.iloc[i]:
+            exits.iloc[i] = True
+
+    portfolio = vbt.Portfolio.from_signals(
+        close=close,
+        entries=entries,
+        exits=exits,
+        init_cash=init_cash,
+        fees=fees,
+        freq=freq
+    )
+
+    stats = portfolio.stats()
+    trades = portfolio.trades.records_readable
+    equity_curve = portfolio.value()
+    returns = portfolio.returns()
+    drawdown = portfolio.drawdown()
+
+    return {
+        "stats": stats,
+        "trades": trades,
+        "equity_curve": equity_curve,
+        "returns": returns,
+        "drawdown": drawdown,
+        "middle": middle,
+        "upper": upper,
+        "lower": lower,
+        "entries": entries,
+        "exits": exits,
+        "label": f"Bollinger({window},{std})",
+    }
+
+
+# ── Strategy Registry ────────────────────────────────────────────────
+
+STRATEGIES = {
+    "sma": {
+        "fn": run_sma_crossover,
+        "name": "SMA Crossover",
+        "params": {"fast_window": 10, "slow_window": 30},
+    },
+    "ema": {
+        "fn": run_ema_crossover,
+        "name": "EMA Crossover",
+        "params": {"fast_window": 12, "slow_window": 26},
+    },
+    "bollinger": {
+        "fn": run_bollinger_bands,
+        "name": "Bollinger Bands",
+        "params": {"window": 20, "std": 2.0},
+    },
+}
+
+
+def run_strategy(
+    strategy: str,
+    close: pd.Series,
+    **kwargs
+) -> dict:
+    """Run a named strategy with given parameters."""
+    if strategy not in STRATEGIES:
+        raise ValueError(f"Unknown strategy: {strategy}. Available: {list(STRATEGIES.keys())}")
+    return STRATEGIES[strategy]["fn"](close=close, **kwargs)
+
+
+def run_all_strategies(
+    close: pd.Series,
+    fees: float = 0.001,
+    init_cash: float = 10000.0,
+    freq: str = "1D"
+) -> dict:
+    """Run all strategies and return comparison results."""
+    results = {}
+    for name, cfg in STRATEGIES.items():
+        try:
+            result = cfg["fn"](
+                close=close,
+                fees=fees,
+                init_cash=init_cash,
+                freq=freq,
+                **cfg["params"]
+            )
+            stats = result["stats"]
+            results[name] = {
+                "label": result["label"],
+                "name": cfg["name"],
+                "stats": stats,
+                "equity_curve": result["equity_curve"],
+                "returns": result["returns"],
+                "drawdown": result["drawdown"],
+                "trades": result["trades"],
+            }
+        except Exception as e:
+            results[name] = {"label": cfg["name"], "error": str(e)}
+    return results
+
+
+# ── Indicators ───────────────────────────────────────────────────────
+
+def calculate_rsi(
+    close: pd.Series,
+    window: int = 14
+) -> dict:
+    """Calculate RSI indicator."""
+    rsi = vbt.RSI.run(close, window=window)
+    return {
+        "rsi": rsi.rsi,
+        "overbought": 70,
+        "oversold": 30,
+        "window": window,
+    }
+
+
+def calculate_macd(
+    close: pd.Series,
+    fast_window: int = 12,
+    slow_window: int = 26,
+    signal_window: int = 9
+) -> dict:
+    """Calculate MACD indicator."""
+    macd = vbt.MACD.run(
+        close,
+        fast_window=fast_window,
+        slow_window=slow_window,
+        signal_window=signal_window
+    )
+    return {
+        "macd": macd.macd,
+        "signal": macd.signal,
+        "histogram": macd.hist,
+        "fast_window": fast_window,
+        "slow_window": slow_window,
+        "signal_window": signal_window,
+    }

frontend/.dockerignore

@@ -0,0 +1,5 @@
+node_modules/
+.next/
+.git/
+*.log
+.env.local

frontend/.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env
+.env.local
+.env.*.local
+.env.production
+.env.development
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

frontend/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/api.ts

@@ -0,0 +1,356 @@
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
+export interface BacktestRequest {
+  ticker: string;
+  start_date: string;
+  end_date: string;
+  interval?: string;
+  strategy?: string;
+  fast_ma?: number;
+  slow_ma?: number;
+  bb_window?: number;
+  bb_std?: number;
+  fees?: number;
+  init_cash?: number;
+  rsi_window?: number;
+  macd_fast?: number;
+  macd_slow?: number;
+  macd_signal?: number;
+}
+
+export interface StrategyInfo {
+  id: string;
+  name: string;
+  description: string;
+  params: Record<string, number>;
+}
+
+export interface BacktestResponse {
+  ticker: string;
+  start_date: string;
+  end_date: string;
+  interval: string;
+  strategy: string;
+  data_points: number;
+  dates: string[];
+  ohlcv: {
+    open: number[];
+    high: number[];
+    low: number[];
+    close: number[];
+    volume: number[];
+  };
+  portfolio: {
+    stats: Record<string, unknown>;
+    trades: unknown[];
+    equity_curve: Record<string, number>;
+    returns: Record<string, number>;
+    drawdown: Record<string, number>;
+  };
+  indicators: {
+    sma?: {
+      fast: Record<string, number>;
+      slow: Record<string, number>;
+      fast_window: number;
+      slow_window: number;
+    };
+    ema?: {
+      fast: Record<string, number>;
+      slow: Record<string, number>;
+      fast_window: number;
+      slow_window: number;
+    };
+    bollinger?: {
+      middle: Record<string, number>;
+      upper: Record<string, number>;
+      lower: Record<string, number>;
+      window: number;
+      std: number;
+    };
+    rsi: {
+      rsi: Record<string, number>;
+      overbought: number;
+      oversold: number;
+      window: number;
+    };
+    macd: {
+      macd: Record<string, number>;
+      signal: Record<string, number>;
+      histogram: Record<string, number>;
+      fast_window: number;
+      slow_window: number;
+      signal_window: number;
+    };
+  };
+  signals: {
+    entries: Record<string, boolean>;
+    exits: Record<string, boolean>;
+  };
+}
+
+// ── Options Flow ──────────────────────────────────────────────────────
+
+export interface OptionsFlowResponse {
+  ticker: string;
+  as_of: string;
+  has_leaps: boolean;
+  leaps_expiries: string[];
+  summary: {
+    total_call_volume: number;
+    total_put_volume: number;
+    call_put_ratio: number;
+    total_expiries: number;
+    nearest_call_put_ratio: number;
+    unusual_count: number;
+  };
+  all_expiries: OptionsChainExpiry[];
+  leaps: OptionsChainExpiry[];
+  unusual_activities: UnusualActivity[];
+}
+
+export interface OptionsChainExpiry {
+  expiry: string;
+  is_leaps: boolean;
+  total_call_volume: number;
+  total_put_volume: number;
+  total_call_oi: number;
+  total_put_oi: number;
+  call_put_ratio: number;
+  top_calls: OptionStrike[];
+  top_puts: OptionStrike[];
+  unusual_calls: OptionStrike[];
+  unusual_puts: OptionStrike[];
+}
+
+export interface OptionStrike {
+  strike: number;
+  lastPrice?: number;
+  volume?: number;
+  openInterest?: number;
+  vol_oi_ratio?: number;
+  impliedVolatility?: number;
+  inTheMoney?: boolean;
+  contractSymbol?: string;
+  contractSize?: number;
+  expiry?: string;
+  type?: "leaps_call" | "leaps_put";
+  signal?: "BULLISH" | "BEARISH";
+}
+
+export interface UnusualActivity extends OptionStrike {}
+
+// ── LEAPS Board (22 ticker statik liste) ──────────────────────────────
+
+export interface LeapsBoardEntry {
+  ticker: string;
+  has_leaps: boolean;
+  leaps_count: number;
+  total_call_volume: number;
+  total_put_volume: number;
+  call_put_ratio: number;
+  nearest_call_put_ratio: number;
+  unusual_count: number;
+  top_leaps_expiry: string | null;
+}
+
+export interface LeapsBoardResponse {
+  count: number;
+  scan_tickers: string[];
+  results: LeapsBoardEntry[];
+}
+
+// ── LEAPS Scanner (S&P 100 concurrent tarama) ─────────────────────────
+
+export interface LeapsScannerSpike {
+  type: string;
+  expiry: string;
+  strike: number;
+  volume: number;
+  openInterest: number;
+  vol_oi_ratio: number;
+  lastPrice?: number;
+  impliedVolatility?: number;
+  signal: string;
+}
+
+export interface LeapsScannerEntry {
+  ticker: string;
+  total_leaps_call_vol: number;
+  total_leaps_put_vol: number;
+  total_leaps_vol: number;
+  call_put_ratio: number;
+  unusual_count: number;
+  top_spike: LeapsScannerSpike;
+  all_spikes: LeapsScannerSpike[];
+  leaps_expiries_count: number;
+  nearest_leaps_expiry: string | null;
+  scan_time: string;
+}
+
+export interface LeapsScannerResponse {
+  tickers: LeapsScannerEntry[];
+  count: number;
+  scan_info: {
+    max_tickers: number;
+    min_spikes: number;
+    scan_time_sec: number;
+    scanned_at: string;
+  };
+}
+
+// ── Fetch Functions ───────────────────────────────���───────────────────
+
+export const DEFAULT_SCAN_TICKERS = [
+  "AAPL","MSFT","GOOGL","AMZN","NVDA","TSLA","META",
+  "SPY","QQQ","IWM","AMD","INTC","PLTR","COIN",
+  "JPM","BAC","GS","JNJ","PFE","UNH","XOM","CVX",
+];
+
+export async function fetchOptionsFlow(ticker: string): Promise<OptionsFlowResponse> {
+  const res = await fetch(`${API_BASE}/api/ticker/${encodeURIComponent(ticker)}/options-flow`);
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ detail: "Unknown error" }));
+    throw new Error(err.detail || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+export async function fetchLeapsBoard(limit: number = 15): Promise<LeapsBoardResponse> {
+  const res = await fetch(
+    `${API_BASE}/api/options-flow/leaps-board?limit=${encodeURIComponent(String(limit))}`
+  );
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ detail: "Unknown error" }));
+    throw new Error(err.detail || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+export async function fetchLeapsScanner(
+  max_tickers: number = 100,
+  min_spikes: number = 1,
+): Promise<LeapsScannerResponse> {
+  const res = await fetch(
+    `${API_BASE}/api/leaps/scanner?max_tickers=${encodeURIComponent(String(max_tickers))}&min_spikes=${encodeURIComponent(String(min_spikes))}`
+  );
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ detail: "Unknown error" }));
+    throw new Error(err.detail || `HTTP ${res.status}`);
+  }
+  return res.json();
+}
+
+export interface CompareResponse {
+  ticker: string;
+  start_date: string;
+  end_date: string;
+  interval: string;
+  data_points: number;
+  dates: string[];
+  ohlcv: {
+    open: number[];
+    high: number[];
+    low: number[];
+    close: number[];
+    volume: number[];
+  };
+  indicators: {
+    rsi: { rsi: Record<string, number>; overbought: number; oversold: number; window: number };
+    macd: {
+      macd: Record<string, number>;
+      signal: Record<string, number>;
+      histogram: Record<string, number>;
+      fast_window: number;
+      slow_window: number;
+      signal_window: number;
+    };
+  };
+  comparison: Record<string, {
+    label: string;
+    name: string;
+    stats: Record<string, unknown>;
+    equity_curve: Record<string, number>;
+    returns: Record<string, number>;
+    drawdown: Record<string, number>;
+    trades: unknown[];
+    error?: string;
+  }>;
+}
+
+export async function fetchStrategies(): Promise<StrategyInfo[]> {
+  const res = await fetch(`${API_BASE}/api/strategies`);
+  if (!res.ok) throw new Error("Failed to load strategies");
+  const data = await res.json();
+  return data.strategies;
+}
+
+export async function runBacktest(request: BacktestRequest): Promise<BacktestResponse> {
+  const res = await fetch(`${API_BASE}/api/backtest`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request),
+  });
+
+  if (!res.ok) {
+    const error = await res.json().catch(() => ({ detail: "Unknown error" }));
+    throw new Error(error.detail || `HTTP ${res.status}`);
+  }
+
+  return res.json();
+}
+
+export async function compareStrategies(request: BacktestRequest): Promise<CompareResponse> {
+  const res = await fetch(`${API_BASE}/api/compare`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request),
+  });
+
+  if (!res.ok) {
+    const error = await res.json().catch(() => ({ detail: "Unknown error" }));
+    throw new Error(error.detail || `HTTP ${res.status}`);
+  }
+
+  return res.json();
+}
+
+export async function healthCheck(): Promise<{ status: string; version: string }> {
+  const res = await fetch(`${API_BASE}/api/health`);
+  if (!res.ok) throw new Error("Backend unavailable");
+  return res.json();
+}
+
+export async function fetchTickerRange(ticker: string): Promise<{ earliest: string; latest: string; data_points: number }> {
+  const res = await fetch(`${API_BASE}/api/ticker/${encodeURIComponent(ticker)}/range`);
+  if (!res.ok) throw new Error(`No data for ${ticker}`);
+  return res.json();
+}
+
+export interface FundamentalsData {
+  ticker: string;
+  company: { name?: string; sector?: string; industry?: string; summary?: string };
+  valuation: {
+    marketCap?: number; enterpriseValue?: number;
+    trailingPE?: number; forwardPE?: number;
+    priceToBook?: number; enterpriseToEbitda?: number; priceToSales?: number;
+  };
+  financials: {
+    revenuePerShare?: number; earningsPerShare?: number;
+    profitMargins?: number; operatingMargins?: number;
+    returnOnEquity?: number; debtToEquity?: number;
+    currentRatio?: number; freeCashflow?: number; revenueGrowth?: number;
+  };
+  trading: {
+    beta?: number; dividendYield?: number;
+    fiftyTwoWeekHigh?: number; fiftyTwoWeekLow?: number; averageVolume?: number;
+  };
+}
+
+export async function fetchFundamentals(ticker: string): Promise<FundamentalsData> {
+  const res = await fetch(`${API_BASE}/api/ticker/${encodeURIComponent(ticker)}/fundamentals`);
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ detail: "Unknown error" }));
+    throw new Error(err.detail || `HTTP ${res.status}`);
+  }
+  return res.json();
+}

frontend/app/components/BacktestForm.tsx

@@ -0,0 +1,376 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { fetchStrategies, fetchTickerRange, type StrategyInfo } from "../api";
+
+interface BacktestFormProps {
+  onSubmit: (config: BacktestConfig) => void;
+  onCompare?: (config: BacktestConfig) => void;
+  onTickerChange?: (ticker: string) => void;
+  isLoading: boolean;
+  isComparing?: boolean;
+}
+
+export interface BacktestConfig {
+  ticker: string;
+  start_date: string;
+  end_date: string;
+  interval: string;
+  strategy: string;
+  fast_ma: number;
+  slow_ma: number;
+  bb_window: number;
+  bb_std: number;
+  fees: number;
+  init_cash: number;
+  rsi_window: number;
+  macd_fast: number;
+  macd_slow: number;
+  macd_signal: number;
+}
+
+function getDefaultDates() {
+  const end = new Date();
+  const start = new Date(end);
+  start.setFullYear(start.getFullYear() - 1);
+  const fmt = (d: Date) => d.toISOString().split("T")[0];
+  return { start: fmt(start), end: fmt(end) };
+}
+
+const defaults = getDefaultDates();
+
+const defaultConfig: BacktestConfig = {
+  ticker: "",
+  start_date: defaults.start,
+  end_date: defaults.end,
+  interval: "1d",
+  strategy: "sma",
+  fast_ma: 10,
+  slow_ma: 30,
+  bb_window: 20,
+  bb_std: 2.0,
+  fees: 0.001,
+  init_cash: 10000,
+  rsi_window: 14,
+  macd_fast: 12,
+  macd_slow: 26,
+  macd_signal: 9,
+};
+
+export default function BacktestForm({ onSubmit, onCompare, onTickerChange, isLoading, isComparing }: BacktestFormProps) {
+  const [config, setConfig] = useState<BacktestConfig>(defaultConfig);
+  const [strategies, setStrategies] = useState<StrategyInfo[]>([]);
+
+  useEffect(() => {
+    fetchStrategies()
+      .then(setStrategies)
+      .catch(() => setStrategies([
+        { id: "sma", name: "SMA Crossover", description: "", params: {} },
+        { id: "ema", name: "EMA Crossover", description: "", params: {} },
+        { id: "bollinger", name: "Bollinger Bands", description: "", params: {} },
+      ]));
+  }, []);
+
+  // Auto-fetch full available date range when ticker changes
+  const [loadingRange, setLoadingRange] = useState(false);
+  const tickerRef = useRef(config.ticker);
+  useEffect(() => {
+    const t = config.ticker.trim();
+    if (!t || t === tickerRef.current) return;
+    tickerRef.current = t;
+    const timer = setTimeout(() => {
+      setLoadingRange(true);
+      fetchTickerRange(t)
+        .then((range) => {
+          setConfig((prev) => ({
+            ...prev,
+            start_date: range.earliest.split("T")[0],
+            end_date: range.latest.split("T")[0],
+          }));
+        })
+        .catch(() => {})
+        .finally(() => setLoadingRange(false));
+    }, 600);
+    return () => clearTimeout(timer);
+  }, [config.ticker]);
+
+  const setFullRange = async () => {
+    const t = config.ticker.trim();
+    if (!t) return;
+    setLoadingRange(true);
+    try {
+      const range = await fetchTickerRange(t);
+      setConfig((prev) => ({
+        ...prev,
+        start_date: range.earliest.split("T")[0],
+        end_date: range.latest.split("T")[0],
+      }));
+    } catch {}
+    setLoadingRange(false);
+  };
+
+  const handleChange = (field: keyof BacktestConfig, value: string | number) => {
+    setConfig((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(config);
+  };
+
+  const handleCompare = () => {
+    if (onCompare) onCompare(config);
+  };
+
+  const inputClass =
+    "w-full px-3 py-2 rounded text-sm outline-none transition-colors focus:border-[var(--accent-orange)]";
+  const labelClass = "text-xs text-[var(--text-secondary)] uppercase tracking-wider mb-1 block";
+
+  const isBollinger = config.strategy === "bollinger";
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-5">
+      <div className="flex items-center gap-2 mb-4">
+        <span className="text-[var(--accent-orange)]">$</span>
+        <h2 className="text-sm font-bold uppercase tracking-wider">Backtest Configuration</h2>
+      </div>
+
+      {/* Row 1: Ticker + Interval */}
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <div>
+          <label className={labelClass}>Ticker Symbol</label>
+          <input
+            type="text"
+            value={config.ticker}
+            onChange={(e) => {
+              handleChange("ticker", e.target.value.toUpperCase());
+              onTickerChange?.(e.target.value.toUpperCase());
+            }}
+            className={inputClass}
+            placeholder="e.g. AAPL, TSLA, BTC-USD"
+          />
+        </div>
+        <div>
+          <label className={labelClass}>Interval</label>
+          <select
+            value={config.interval}
+            onChange={(e) => handleChange("interval", e.target.value)}
+            className={inputClass}
+          >
+            <option value="1m">1 Minute</option>
+            <option value="5m">5 Minutes</option>
+            <option value="15m">15 Minutes</option>
+            <option value="1h">1 Hour</option>
+            <option value="1d">1 Day</option>
+            <option value="1wk">1 Week</option>
+            <option value="1mo">1 Month</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Row 2: Date Range */}
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <label className={labelClass}>Start Date</label>
+            <button
+              type="button"
+              onClick={setFullRange}
+              disabled={loadingRange}
+              className="text-[10px] text-[var(--accent-orange)] hover:underline uppercase tracking-wider disabled:opacity-40"
+            >
+              {loadingRange ? "..." : "All Time"}
+            </button>
+          </div>
+          <input
+            type="date"
+            value={config.start_date}
+            onChange={(e) => handleChange("start_date", e.target.value)}
+            className={inputClass}
+          />
+        </div>
+        <div>
+          <label className={labelClass}>End Date</label>
+          <input
+            type="date"
+            value={config.end_date}
+            onChange={(e) => handleChange("end_date", e.target.value)}
+            className={inputClass}
+          />
+        </div>
+      </div>
+
+      {/* Row 3: Strategy Select */}
+      <div className="border-t border-[var(--border-color)] pt-4 mt-4">
+        <h3 className="text-xs text-[var(--accent-orange)] uppercase tracking-wider mb-3">
+          Strategy
+        </h3>
+        <div className="grid grid-cols-3 gap-2 mb-4">
+          {strategies.map((s) => (
+            <button
+              key={s.id}
+              type="button"
+              onClick={() => handleChange("strategy", s.id)}
+              className={`px-3 py-2 rounded text-xs font-bold uppercase tracking-wider transition-colors ${
+                config.strategy === s.id
+                  ? "bg-[var(--accent-orange)] text-black"
+                  : "bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:bg-[var(--border-color)]"
+              }`}
+            >
+              {s.name.split(" ")[0]}
+            </button>
+          ))}
+        </div>
+        <div className="text-[10px] text-[var(--text-muted)] mb-4 italic">
+          {strategies.find((s) => s.id === config.strategy)?.description || ""}
+        </div>
+      </div>
+
+      {/* Row 4: Strategy Parameters */}
+      <div className="border-t border-[var(--border-color)] pt-4">
+        <h3 className="text-xs text-[var(--accent-orange)] uppercase tracking-wider mb-3">
+          {isBollinger ? "Bollinger Bands" : "MA Parameters"}
+        </h3>
+        {isBollinger ? (
+          <div className="grid grid-cols-2 gap-4 mb-4">
+            <div>
+              <label className={labelClass}>Window</label>
+              <input
+                type="number"
+                value={config.bb_window}
+                onChange={(e) => handleChange("bb_window", parseInt(e.target.value) || 2)}
+                min={2}
+                max={200}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Std Dev</label>
+              <input
+                type="number"
+                value={config.bb_std}
+                onChange={(e) => handleChange("bb_std", parseFloat(e.target.value) || 0.5)}
+                min={0.5}
+                max={4}
+                step={0.1}
+                className={inputClass}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 gap-4 mb-4">
+            <div>
+              <label className={labelClass}>Fast MA Period</label>
+              <input
+                type="number"
+                value={config.fast_ma}
+                onChange={(e) => handleChange("fast_ma", parseInt(e.target.value) || 2)}
+                min={2}
+                max={200}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Slow MA Period</label>
+              <input
+                type="number"
+                value={config.slow_ma}
+                onChange={(e) => handleChange("slow_ma", parseInt(e.target.value) || 2)}
+                min={2}
+                max={500}
+                className={inputClass}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Row 5: Indicator Settings */}
+      <div className="border-t border-[var(--border-color)] pt-4">
+        <h3 className="text-xs text-[var(--accent-orange)] uppercase tracking-wider mb-3">
+          Indicators
+        </h3>
+        <div className="grid grid-cols-4 gap-3 mb-4">
+          <div>
+            <label className={labelClass}>RSI Period</label>
+            <input
+              type="number"
+              value={config.rsi_window}
+              onChange={(e) => handleChange("rsi_window", parseInt(e.target.value) || 2)}
+              min={2}
+              max={100}
+              className={inputClass}
+            />
+          </div>
+          <div>
+            <label className={labelClass}>MACD Fast</label>
+            <input
+              type="number"
+              value={config.macd_fast}
+              onChange={(e) => handleChange("macd_fast", parseInt(e.target.value) || 2)}
+              min={2}
+              max={100}
+              className={inputClass}
+            />
+          </div>
+          <div>
+            <label className={labelClass}>MACD Slow</label>
+            <input
+              type="number"
+              value={config.macd_slow}
+              onChange={(e) => handleChange("macd_slow", parseInt(e.target.value) || 2)}
+              min={2}
+              max={200}
+              className={inputClass}
+            />
+          </div>
+          <div>
+            <label className={labelClass}>MACD Signal</label>
+            <input
+              type="number"
+              value={config.macd_signal}
+              onChange={(e) => handleChange("macd_signal", parseInt(e.target.value) || 2)}
+              min={2}
+              max={100}
+              className={inputClass}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Submit */}
+      <div className="flex gap-2">
+        <button
+          type="submit"
+          disabled={isLoading || isComparing}
+          className="flex-1 px-4 py-3 bg-[var(--accent-orange)] hover:bg-[var(--accent-orange-hover)] disabled:opacity-50 disabled:cursor-not-allowed text-black font-bold text-sm uppercase tracking-wider rounded transition-colors glow-orange"
+        >
+          {isLoading ? (
+            <span className="flex items-center justify-center gap-2">
+              <span className="inline-block w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin" />
+              Running...
+            </span>
+          ) : (
+            <span className="flex items-center justify-center gap-2">
+              <span>{">"}</span> Execute
+            </span>
+          )}
+        </button>
+        {onCompare && (
+          <button
+            type="button"
+            onClick={handleCompare}
+            disabled={isLoading || isComparing}
+            className="px-4 py-3 bg-[var(--bg-tertiary)] hover:bg-[var(--border-color)] disabled:opacity-50 disabled:cursor-not-allowed text-[var(--text-secondary)] font-bold text-sm uppercase tracking-wider rounded transition-colors"
+          >
+            {isComparing ? (
+              <span className="inline-block w-4 h-4 border-2 border-[var(--text-secondary)] border-t-transparent rounded-full animate-spin" />
+            ) : (
+              "Compare All"
+            )}
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}

frontend/app/components/CandlestickChart.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
+
+interface CandlestickChartProps {
+  dates: string[];
+  open: number[];
+  high: number[];
+  low: number[];
+  close: number[];
+  ticker: string;
+  /** Strategy-specific overlay lines e.g. SMA/EMA/BB */
+  overlays?: { name: string; values: (number | null)[]; color: string; dash?: string }[];
+}
+
+export default function CandlestickChart({
+  dates,
+  open,
+  high,
+  low,
+  close,
+  ticker,
+  overlays,
+}: CandlestickChartProps) {
+  const layout = {
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    font: { color: "#a0a0a0", family: "JetBrains Mono, monospace", size: 10 },
+    margin: { t: 30, r: 20, b: 40, l: 60 },
+    xaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+      rangeslider: { visible: false },
+    },
+    yaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+      title: "Price ($)",
+      titlefont: { size: 10 },
+    },
+    legend: {
+      font: { size: 10 },
+      bgcolor: "rgba(0,0,0,0)",
+      bordercolor: "#2a2a2a",
+      borderwidth: 1,
+    },
+    hovermode: "x unified" as const,
+    dragmode: "pan" as const,
+    title: {
+      text: `${ticker} — Price Chart`,
+      font: { size: 13, color: "#ffffff" },
+    },
+  };
+
+  const config = { responsive: true, displayModeBar: true, displaylogo: false, scrollZoom: true, modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d', 'resetScale2d'], modeBarButtons: [['zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetViews']] };
+
+  // Build the data array
+  const data: unknown[] = [
+    {
+      x: dates,
+      open: open,
+      high: high,
+      low: low,
+      close: close,
+      type: "candlestick",
+      name: "OHLC",
+      increasing: { line: { color: "#10b981" }, fillcolor: "#10b981" },
+      decreasing: { line: { color: "#ef4444" }, fillcolor: "#ef4444" },
+    },
+  ];
+
+  // Add overlay lines
+  if (overlays) {
+    overlays.forEach((line) => {
+      data.push({
+        x: dates,
+        y: line.values,
+        type: "scatter",
+        mode: "lines",
+        name: line.name,
+        line: { color: line.color, width: 1.5, dash: line.dash || "solid" as const },
+      });
+    });
+  }
+
+  // Add entry/exit markers if we could compute them
+  // (They are passed separately in PriceChart for signal visibility)
+
+  return (
+    <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4">
+      <Plot data={data} layout={layout} config={config} style={{ width: "100%", height: "450px" }} />
+    </div>
+  );
+}

frontend/app/components/ComparePanel.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
+
+interface ComparePanelProps {
+  comparison: Record<string, {
+    label: string;
+    name: string;
+    stats: Record<string, unknown>;
+    equity_curve: Record<string, number>;
+    error?: string;
+  }>;
+  dates: string[];
+}
+
+export default function ComparePanel({ comparison, dates }: ComparePanelProps) {
+  const entries = Object.entries(comparison).filter(([, v]) => !v.error);
+  const errors = Object.entries(comparison).filter(([, v]) => v.error);
+
+  if (entries.length === 0) {
+    return (
+      <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-5">
+        <div className="text-center py-8 text-[var(--text-muted)] text-sm">
+          No strategies to compare
+        </div>
+      </div>
+    );
+  }
+
+  // Equity curve comparison chart
+  const equityData = entries.map(([key, val]) => {
+    const curve = val.equity_curve || {};
+    const values = dates.map((d) => {
+      const v = (curve as Record<string, number>)[d];
+      return v !== undefined ? v : null;
+    });
+    return {
+      x: dates,
+      y: values,
+      type: "scatter",
+      mode: "lines",
+      name: val.label || key,
+      line: { width: 1.5 },
+    };
+  });
+
+  const equityLayout = {
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    font: { color: "#a0a0a0", family: "JetBrains Mono, monospace", size: 10 },
+    margin: { t: 30, r: 20, b: 40, l: 60 },
+    xaxis: { gridcolor: "#2a2a2a", zerolinecolor: "#2a2a2a", showgrid: true },
+    yaxis: { gridcolor: "#2a2a2a", zerolinecolor: "#2a2a2a", showgrid: true, titlefont: { size: 10 } },
+    hovermode: "x unified" as const,
+    dragmode: "pan" as const,
+    title: { text: "Strategy Comparison — Equity Curve", font: { size: 12, color: "#ffffff" } },
+    legend: { font: { size: 10 }, bgcolor: "rgba(0,0,0,0)", bordercolor: "#2a2a2a", borderwidth: 1 },
+  };
+
+  const colors = ["#f59e0b", "#10b981", "#3b82f6", "#a78bfa", "#ef4444"];
+  equityData.forEach((d: unknown, i: number) => {
+    (d as Record<string, unknown>).line = { ...(d as Record<string, unknown>).line as object, color: colors[i % colors.length] };
+  });
+
+  const config = { responsive: true, displayModeBar: true, displaylogo: false, modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d'], modeBarButtons: [['zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetViews']] };
+
+  // Key metrics comparison table
+  const metricKeys = ["Total Return [%]", "End Value", "Sharpe Ratio", "Max Drawdown [%]", "Total Trades", "Win Rate [%]"];
+
+  return (
+    <div className="space-y-6">
+      {/* Equity curve comparison */}
+      <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4">
+        <Plot data={equityData} layout={equityLayout} config={config} style={{ width: "100%", height: "300px" }} />
+      </div>
+
+      {/* Comparison table */}
+      <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-5">
+        <div className="flex items-center gap-2 mb-4">
+          <span className="text-[var(--accent-orange)]">#</span>
+          <h2 className="text-sm font-bold uppercase tracking-wider">Strategy Comparison</h2>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-xs">
+            <thead className="text-[var(--text-muted)] uppercase tracking-wider">
+              <tr>
+                <th className="text-left py-2 px-3">Metric</th>
+                {entries.map(([key, val]) => (
+                  <th key={key} className="text-right py-2 px-3">{val.label || key}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {metricKeys.map((metric) => (
+                <tr key={metric} className="border-t border-[var(--border-color)]">
+                  <td className="py-2 px-3 text-[var(--text-secondary)]">{metric}</td>
+                  {entries.map(([key, val]) => {
+                    const raw = val.stats?.[metric];
+                    const display = raw != null ? String(raw) : "N/A";
+                    return (
+                      <td key={key} className="py-2 px-3 text-right font-bold">{display}</td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Errors */}
+      {errors.length > 0 && (
+        <div className="bg-red-950/30 border border-red-800 rounded-lg p-4">
+          <div className="flex items-center gap-2 text-red-400 text-sm">[ERROR] Some strategies failed</div>
+          {errors.map(([key, val]) => (
+            <div key={key} className="text-xs text-red-300 mt-1">
+              {key}: {val.error}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/app/components/DrawdownChart.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
+
+interface DrawdownChartProps {
+  dates: string[];
+  drawdown: (number | null)[];
+  maxDrawdown?: number;
+}
+
+export default function DrawdownChart({ dates, drawdown, maxDrawdown }: DrawdownChartProps) {
+  const layout = {
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    font: { color: "#a0a0a0", family: "JetBrains Mono, monospace", size: 10 },
+    margin: { t: 35, r: 60, b: 45, l: 65 },
+    xaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+    },
+    yaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+      title: "Drawdown",
+      titlefont: { size: 10 },
+      tickformat: ".1%",
+      range: [Math.min(...drawdown.filter((v): v is number => v !== null)) * 1.15, 0.01],
+    },
+    hovermode: "x unified" as const,
+    dragmode: "pan" as const,
+    showlegend: false,
+    title: {
+      text: maxDrawdown
+        ? `Drawdown — Max: ${(maxDrawdown * 100).toFixed(2)}%`
+        : "Drawdown",
+      font: { size: 12, color: "#ffffff" },
+    },
+    annotations: maxDrawdown
+      ? [
+          {
+            x: dates[0],
+            y: maxDrawdown,
+            xref: "x" as const,
+            yref: "y" as const,
+            text: `Max DD ${(maxDrawdown * 100).toFixed(2)}%`,
+            showarrow: true,
+            arrowhead: 2,
+            arrowcolor: "#ef4444",
+            arrowsize: 1,
+            ax: 0,
+            ay: -30,
+            font: { color: "#ef4444", size: 9 },
+            bgcolor: "rgba(0,0,0,0.6)",
+            bordercolor: "#ef4444",
+            borderwidth: 1,
+            borderpad: 3,
+          },
+        ]
+      : undefined,
+  };
+
+  const config = {
+    responsive: true,
+    displayModeBar: true,
+    displaylogo: false,
+    modeBarButtonsToRemove: ["sendDataToCloud", "lasso2d", "select2d"],
+    modeBarButtons: [["zoom2d", "pan2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetViews"]],
+  };
+
+  const data = [
+    {
+      x: dates,
+      y: drawdown,
+      type: "scatter",
+      mode: "lines",
+      name: "Drawdown",
+      line: { color: "#ef4444", width: 2 },
+      fill: "tozeroy",
+      fillcolor: "rgba(239, 68, 68, 0.15)",
+    },
+    {
+      x: dates,
+      y: drawdown.map(() => 0),
+      type: "scatter",
+      mode: "lines",
+      name: "Zero",
+      line: { color: "#ef4444", width: 1, dash: "dot" },
+    },
+  ];
+
+  return (
+    <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4">
+      <Plot data={data} layout={layout} config={config} style={{ width: "100%", height: "220px" }} />
+    </div>
+  );
+}

frontend/app/components/EquityChart.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
+
+interface EquityChartProps {
+  dates: string[];
+  equity: (number | null)[];
+  initCash: number;
+}
+
+export default function EquityChart({ dates, equity, initCash }: EquityChartProps) {
+  const layout = {
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    font: { color: "#a0a0a0", family: "JetBrains Mono, monospace", size: 10 },
+    margin: { t: 30, r: 20, b: 40, l: 60 },
+    xaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+    },
+    yaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+      title: "Value ($)",
+      titlefont: { size: 10 },
+    },
+    hovermode: "x unified" as const,
+    dragmode: "pan" as const,
+    title: {
+      text: "Equity Curve",
+      font: { size: 12, color: "#ffffff" },
+    },
+    shapes: [
+      {
+        type: "line" as const,
+        x0: dates[0],
+        x1: dates[dates.length - 1],
+        y0: initCash,
+        y1: initCash,
+        line: { color: "#666666", width: 1, dash: "dot" as const },
+      },
+    ],
+    annotations: [
+      {
+        x: dates[0],
+        y: initCash,
+        xref: "x" as const,
+        yref: "y" as const,
+        text: `$${initCash.toLocaleString()}`,
+        showarrow: false,
+        font: { color: "#666666", size: 9 },
+      },
+    ],
+  };
+
+  const config = { responsive: true, displayModeBar: true, displaylogo: false, modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d'], modeBarButtons: [['zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetViews']] };
+
+  const data = [
+    {
+      x: dates,
+      y: equity,
+      type: "scatter" as const,
+      mode: "lines" as const,
+      name: "Portfolio Value",
+      line: { color: "#f59e0b", width: 1.5 },
+      fill: "tozeroy" as const,
+      fillcolor: "rgba(245, 158, 11, 0.05)",
+    },
+  ];
+
+  return (
+    <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4">
+      <Plot data={data} layout={layout} config={config} style={{ width: "100%", height: "300px" }} />
+    </div>
+  );
+}

frontend/app/components/FundamentalsPanel.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+interface FundamentalsPanelProps {
+  data: {
+    ticker: string;
+    company: { name?: string; sector?: string; industry?: string; summary?: string };
+    valuation: {
+      marketCap?: number; enterpriseValue?: number;
+      trailingPE?: number; forwardPE?: number;
+      priceToBook?: number; enterpriseToEbitda?: number; priceToSales?: number;
+    };
+    financials: {
+      revenuePerShare?: number; earningsPerShare?: number;
+      profitMargins?: number; operatingMargins?: number;
+      returnOnEquity?: number; debtToEquity?: number;
+      currentRatio?: number; freeCashflow?: number; revenueGrowth?: number;
+    };
+    trading: {
+      beta?: number; dividendYield?: number;
+      fiftyTwoWeekHigh?: number; fiftyTwoWeekLow?: number; averageVolume?: number;
+    };
+  };
+}
+
+function fmt(v: number | undefined | null, type: "money" | "percent" | "ratio" | "volume" = "ratio"): string {
+  if (v == null) return "—";
+  if (type === "money") {
+    if (v >= 1e12) return `$${(v / 1e12).toFixed(2)}T`;
+    if (v >= 1e9) return `$${(v / 1e9).toFixed(2)}B`;
+    if (v >= 1e6) return `$${(v / 1e6).toFixed(2)}M`;
+    return `$${v.toLocaleString()}`;
+  }
+  if (type === "percent") return `${(v * 100).toFixed(2)}%`;
+  if (type === "volume") return v >= 1e6 ? `${(v / 1e6).toFixed(1)}M` : v.toLocaleString();
+  return v.toFixed(2);
+}
+
+function StatRow({ label, value, color }: { label: string; value: string; color?: string }) {
+  return (
+    <div className="flex justify-between items-center py-1.5 border-b border-[var(--border-color)] last:border-0">
+      <span className="text-[10px] text-[var(--text-secondary)] uppercase tracking-wider">{label}</span>
+      <span className={`text-xs font-bold ${color || "text-[var(--text-primary)]"}`}>{value}</span>
+    </div>
+  );
+}
+
+export default function FundamentalsPanel({ data }: FundamentalsPanelProps) {
+  const { valuation, financials, trading } = data;
+
+  return (
+    <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-5">
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-[var(--accent-orange)]">$</span>
+        <h2 className="text-sm font-bold uppercase tracking-wider">Fundamentals</h2>
+      </div>
+      <div className="text-xs text-[var(--text-muted)] mb-4 leading-relaxed line-clamp-3">
+        {data.company.sector} — {data.company.industry}
+      </div>
+
+      {/* Valuation Multiples */}
+      <div className="mb-3">
+        <div className="text-[10px] text-[var(--accent-orange)] uppercase tracking-wider mb-1 font-bold">Valuation</div>
+        <StatRow label="Market Cap" value={fmt(valuation.marketCap, "money")} />
+        <StatRow label="Enterprise Value" value={fmt(valuation.enterpriseValue, "money")} />
+        <StatRow label="P/E (Trailing)" value={fmt(valuation.trailingPE)} />
+        <StatRow label="P/E (Forward)" value={fmt(valuation.forwardPE)} />
+        <StatRow label="P/B" value={fmt(valuation.priceToBook)} />
+        <StatRow label="EV/EBITDA" value={fmt(valuation.enterpriseToEbitda)} />
+        {valuation.priceToSales != null && (
+          <StatRow label="P/S" value={fmt(valuation.priceToSales)} />
+        )}
+      </div>
+
+      {/* Financial Health */}
+      <div className="mb-3">
+        <div className="text-[10px] text-[var(--accent-orange)] uppercase tracking-wider mb-1 font-bold">Financials</div>
+        <StatRow label="Revenue / Share" value={fmt(financials.revenuePerShare)} />
+        <StatRow label="EPS (TTM)" value={fmt(financials.earningsPerShare)} />
+        <StatRow label="Profit Margin" value={fmt(financials.profitMargins, "percent")} />
+        <StatRow label="Operating Margin" value={fmt(financials.operatingMargins, "percent")} />
+        <StatRow label="ROE" value={fmt(financials.returnOnEquity, "percent")} />
+        <StatRow label="Revenue Growth" value={fmt(financials.revenueGrowth, "percent")}
+          color={financials.revenueGrowth != null && financials.revenueGrowth >= 0 ? "text-emerald-400" : "text-red-400"} />
+        <StatRow label="D/E" value={fmt(financials.debtToEquity)} />
+        <StatRow label="Current Ratio" value={fmt(financials.currentRatio)} />
+        <StatRow label="Free Cash Flow" value={fmt(financials.freeCashflow, "money")} />
+      </div>
+
+      {/* Trading */}
+      <div>
+        <div className="text-[10px] text-[var(--accent-orange)] uppercase tracking-wider mb-1 font-bold">Trading</div>
+        <StatRow label="Beta" value={fmt(trading.beta)} />
+        <StatRow label="Div. Yield" value={fmt(trading.dividendYield, "percent")} />
+        <StatRow label="52W High" value={trading.fiftyTwoWeekHigh != null ? `$${trading.fiftyTwoWeekHigh.toFixed(2)}` : "—"} />
+        <StatRow label="52W Low" value={trading.fiftyTwoWeekLow != null ? `$${trading.fiftyTwoWeekLow.toFixed(2)}` : "—"} />
+        <StatRow label="Avg Volume" value={fmt(trading.averageVolume, "volume")} />
+      </div>
+    </div>
+  );
+}

frontend/app/components/IndicatorChart.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
+
+interface IndicatorChartProps {
+  dates: string[];
+  values: (number | null)[];
+  title: string;
+  color: string;
+  overbought?: number;
+  oversold?: number;
+  secondaryValues?: (number | null)[];
+  secondaryColor?: string;
+  secondaryName?: string;
+  histogramValues?: (number | null)[];
+}
+
+export default function IndicatorChart({
+  dates,
+  values,
+  title,
+  color,
+  overbought,
+  oversold,
+  secondaryValues,
+  secondaryColor,
+  secondaryName,
+  histogramValues,
+}: IndicatorChartProps) {
+  const layout = {
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    font: { color: "#a0a0a0", family: "JetBrains Mono, monospace", size: 10 },
+    margin: { t: 30, r: 20, b: 40, l: 60 },
+    xaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+    },
+    yaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+    },
+    legend: {
+      font: { size: 10 },
+      bgcolor: "rgba(0,0,0,0)",
+      bordercolor: "#2a2a2a",
+      borderwidth: 1,
+    },
+    hovermode: "x unified" as const,
+    dragmode: "pan" as const,
+    title: {
+      text: title,
+      font: { size: 12, color: "#ffffff" },
+    },
+    shapes: [
+      ...(overbought != null
+        ? [{
+            type: "line" as const,
+            x0: dates[0],
+            x1: dates[dates.length - 1],
+            y0: overbought,
+            y1: overbought,
+            line: { color: "#ef4444", width: 1, dash: "dot" as const },
+          }]
+        : []),
+      ...(oversold != null
+        ? [{
+            type: "line" as const,
+            x0: dates[0],
+            x1: dates[dates.length - 1],
+            y0: oversold,
+            y1: oversold,
+            line: { color: "#10b981", width: 1, dash: "dot" as const },
+          }]
+        : []),
+    ],
+    annotations: [
+      ...(overbought != null
+        ? [{
+            x: dates[dates.length - 1],
+            y: overbought,
+            xref: "x" as const,
+            yref: "y" as const,
+            text: "OB",
+            showarrow: false,
+            font: { color: "#ef4444", size: 9 },
+            xanchor: "left" as const,
+          }]
+        : []),
+      ...(oversold != null
+        ? [{
+            x: dates[dates.length - 1],
+            y: oversold,
+            xref: "x" as const,
+            yref: "y" as const,
+            text: "OS",
+            showarrow: false,
+            font: { color: "#10b981", size: 9 },
+            xanchor: "left" as const,
+          }]
+        : []),
+    ],
+  };
+
+  const config = { responsive: true, displayModeBar: true, displaylogo: false, modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d'], modeBarButtons: [['zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetViews']] };
+
+  const data: unknown[] = [];
+
+  if (histogramValues) {
+    data.push({
+      x: dates,
+      y: histogramValues,
+      type: "bar",
+      name: "Histogram",
+      marker: { color: histogramValues.map((v) => (v != null && v >= 0 ? "#10b981" : "#ef4444")), opacity: 0.5 },
+    });
+  }
+
+  data.push({
+    x: dates,
+    y: values,
+    type: "scatter",
+    mode: "lines",
+    name: title.split(" ")[0],
+    line: { color, width: 1.5 },
+  });
+
+  if (secondaryValues && secondaryColor && secondaryName) {
+    data.push({
+      x: dates,
+      y: secondaryValues,
+      type: "scatter",
+      mode: "lines",
+      name: secondaryName,
+      line: { color: secondaryColor, width: 1, dash: "dash" },
+    });
+  }
+
+  return (
+    <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4">
+      <Plot data={data} layout={layout} config={config} style={{ width: "100%", height: "250px" }} />
+    </div>
+  );
+}

frontend/app/components/OptionsFlowPanel.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { fetchOptionsFlow, type OptionsFlowResponse } from "../api";
+import dynamic from "next/dynamic";
+
+// Lazy-load Plotly
+const Plot = dynamic(() => import("react-plotly.js").then((m) => m.default), { ssr: false });
+
+// ── Types ──────────────────────────────────────────────────────────────
+
+interface StrikeData {
+  strike: number;
+  volume: number;
+  openInterest: number;
+  vol_oi_ratio: number;
+  contractSymbol?: string;
+}
+
+interface ExpiryData {
+  expiry: string;
+  is_leaps: boolean;
+  total_call_volume: number;
+  total_put_volume: number;
+  call_put_ratio: number;
+  top_calls: StrikeData[];
+  top_puts: StrikeData[];
+}
+
+interface UnusualActivity {
+  type: string;
+  expiry: string;
+  strike: number;
+  volume: number;
+  openInterest: number;
+  vol_oi_ratio: number;
+  signal: string;
+  contractSymbol: string;
+}
+
+interface SummaryData {
+  total_call_volume: number;
+  total_put_volume: number;
+  call_put_ratio: number;
+  total_expiries: number;
+  unusual_count: number;
+}
+
+// ── Helpers ────────────────────────────────────────────────────────────
+
+function fmtVol(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return String(n);
+}
+
+function rpColor(ratio: number): string {
+  if (ratio === 0) return "#555";
+  return ratio > 1 ? "#22c55e" : ratio < 1 ? "#ef4444" : "#f59e0b";
+}
+
+function rpLabel(r: number): string {
+  if (r > 3) return "Strongly Bullish";
+  if (r > 1.5) return "Bullish";
+  if (r > 1) return "Slightly Bullish";
+  if (r > 0.67) return "Neutral";
+  if (r > 0.33) return "Slightly Bearish";
+  return "Strongly Bearish";
+}
+
+// ── Sub-components ─────────────────────────────────────────────────────
+
+function Kpi({ label, value, color, sub }: { label: string; value: string; color: string; sub?: string }) {
+  return (
+    <div style={{ background: "#0f0f0f", borderRadius: 4, padding: "8px 10px", border: "1px solid #1a1a1a" }}>
+      <p style={{ margin: 0, color: "#555", fontFamily: "monospace", fontSize: 10 }}>{label}</p>
+      <p style={{ margin: "2px 0 0", color, fontFamily: "monospace", fontSize: 18, fontWeight: 700 }}>{value}</p>
+      {sub && <p style={{ margin: 0, color: "#888", fontFamily: "monospace", fontSize: 9 }}>{sub}</p>}
+    </div>
+  );
+}
+
+function ExpiryCard({ expiry, isLeaps, callVol, putVol, ratio, topCalls, topPuts }: {
+  expiry: string; isLeaps: boolean; callVol: number;
+  putVol: number; ratio: number; topCalls: StrikeData[]; topPuts: StrikeData[];
+}) {
+  const [open, setOpen] = useState(true);
+  return (
+    <div style={{
+      background: "#0f0f0f", border: `1px solid ${isLeaps ? "#f97316" : "#2a2a2a"}`,
+      borderRadius: 6, marginBottom: 8, overflow: "hidden",
+    }}>
+      <button
+        onClick={() => setOpen(!open)}
+        style={{
+          width: "100%", padding: "8px 12px", display: "flex",
+          alignItems: "center", justifyContent: "space-between", cursor: "pointer",
+          background: "transparent", border: "none", color: "#e5e7eb",
+          fontFamily: "monospace", fontSize: 12,
+        }}
+      >
+        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <span>{expiry}</span>
+          {isLeaps && <span style={{ color: "#f97316", fontSize: 9, fontWeight: 700 }}>LEAPS</span>}
+        </span>
+        <span style={{ color: rpColor(ratio), fontSize: 11 }}>
+          C/P {ratio.toFixed(2)}
+        </span>
+      </button>
+      {open && (
+        <div style={{ padding: "0 12px 12px", display: "flex", gap: 24 }}>
+          <div style={{ flex: 1 }}>
+            <p style={{ margin: "0 0 4px", color: "#22c55e", fontFamily: "monospace", fontSize: 11, fontWeight: 600 }}>
+              CALLS {fmtVol(callVol)}
+            </p>
+            <MiniTable rows={topCalls.slice(0, 4)} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <p style={{ margin: "0 0 4px", color: "#ef4444", fontFamily: "monospace", fontSize: 11, fontWeight: 600 }}>
+              PUTS {fmtVol(putVol)}
+            </p>
+            <MiniTable rows={topPuts.slice(0, 4)} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MiniTable({ rows }: { rows: StrikeData[] }) {
+  return (
+    <table style={{ width: "100%", borderCollapse: "collapse", tableLayout: "fixed", fontFamily: "monospace", fontSize: 11 }}>
+      <thead>
+        <tr style={{ color: "#555", borderBottom: "1px solid #222" }}>
+          <th style={{ padding: "2px 4px", textAlign: "left" }}>Strike</th>
+          <th style={{ padding: "2px 4px", textAlign: "left" }}>Vol</th>
+          <th style={{ padding: "2px 4px", textAlign: "left" }}>OI</th>
+          <th style={{ padding: "2px 4px", textAlign: "left" }}>V/OI</th>
+        </tr>
+      </thead>
+      <tbody style={{ color: "#e5e7eb" }}>
+        {rows.map((s, i) => (
+          <tr key={i} style={{ borderBottom: "1px solid #111" }}>
+            <td style={{ padding: "2px 4px" }}>{s.strike}</td>
+            <td style={{ padding: "2px 4px" }}>{fmtVol(s.volume ?? 0)}</td>
+            <td style={{ padding: "2px 4px" }}>{fmtVol(s.openInterest ?? 0)}</td>
+            <td style={{ padding: "2px 4px", color: (s.vol_oi_ratio ?? 0) > 2 ? "#f97316" : "#888" }}>
+              {(s.vol_oi_ratio ?? 0).toFixed(1)}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function UnusualTable({ activities }: { activities: UnusualActivity[] }) {
+  if (activities.length === 0) {
+    return <p style={{ color: "#555", fontFamily: "monospace", fontSize: 11 }}>No unusual activity detected.</p>;
+  }
+  return (
+    <div style={{ overflowX: "auto" }}>
+      <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "monospace", fontSize: 11 }}>
+        <thead>
+          <tr style={{ color: "#555", borderBottom: "1px solid #333", textAlign: "left" }}>
+            <th style={{ padding: "6px 8px" }}>Type</th>
+            <th style={{ padding: "6px 8px" }}>Expiry</th>
+            <th style={{ padding: "6px 8px" }}>Strike</th>
+            <th style={{ padding: "6px 8px" }}>Volume</th>
+            <th style={{ padding: "6px 8px" }}>OI</th>
+            <th style={{ padding: "6px 8px" }}>V/OI</th>
+            <th style={{ padding: "6px 8px" }}>Signal</th>
+          </tr>
+        </thead>
+        <tbody>
+          {activities.map((a, i) => (
+            <tr key={i} style={{ borderBottom: "1px solid #1a1a1a" }}>
+              <td style={{ padding: "4px 8px", color: a.type === "leaps_call" ? "#22c55e" : "#ef4444", fontWeight: 600 }}>
+                {a.type === "leaps_call" ? "LEAPS CALL" : "LEAPS PUT"}
+              </td>
+              <td style={{ padding: "4px 8px", color: "#888" }}>{a.expiry}</td>
+              <td style={{ padding: "4px 8px" }}>${(a.strike ?? 0).toFixed(0)}</td>
+              <td style={{ padding: "4px 8px" }}>{fmtVol(a.volume ?? 0)}</td>
+              <td style={{ padding: "4px 8px" }}>{fmtVol(a.openInterest ?? 0)}</td>
+              <td style={{ padding: "4px 8px", color: (a.vol_oi_ratio ?? 0) > 3 ? "#f97316" : "#bbb" }}>
+                {(a.vol_oi_ratio ?? 0).toFixed(1)}
+              </td>
+              <td style={{ padding: "4px 8px", fontWeight: 700, color: a.signal === "BULLISH" ? "#22c55e" : "#ef4444" }}>
+                {a.signal}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ── Main Panel ──────────────────────────────────────────────────────────
+
+interface OptionsFlowPanelProps {
+  ticker: string;
+}
+
+export default function OptionsFlowPanel({ ticker }: OptionsFlowPanelProps) {
+  const [data, setData] = useState<OptionsFlowResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!ticker) return;
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    fetchOptionsFlow(ticker)
+      .then((d) => { if (!cancelled) setData(d); })
+      .catch(() => { if (!cancelled) setError("Options data unavailable."); })
+      .finally(() => { if (!cancelled) setIsLoading(false); });
+    return () => { cancelled = true; };
+  }, [ticker]);
+
+  if (!ticker) return null;
+  if (isLoading) return <p style={{ color: "#666", marginTop: 8, fontFamily: "monospace" }}>Loading options flow…</p>;
+  if (error) return <p style={{ color: "#ef4444", marginTop: 8, fontFamily: "monospace" }}>{error}</p>;
+  if (!data) return null;
+
+  const summary = data.summary as SummaryData;
+  const expiries = (data.all_expiries || []) as ExpiryData[];
+  const leaps = (data.leaps || []) as ExpiryData[];
+  const unusual = (data.unusual_activities || []) as UnusualActivity[];
+
+  const nearestIdx = expiries.findIndex((e: ExpiryData) => !e.is_leaps);
+  const primaryExpiry = nearestIdx >= 0 ? expiries[nearestIdx] : expiries[0] || null;
+
+  return (
+    <div style={{
+      background: "#0a0a0a", border: "1px solid #1e1e1e",
+      borderRadius: 6, padding: 16, marginTop: 12,
+    }}>
+      {/* Header */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
+        <h3 style={{ margin: 0, color: "#f97316", fontFamily: "monospace", fontSize: 14, fontWeight: 700, letterSpacing: 1 }}>
+          OPTIONS FLOW ─ {data.ticker}
+        </h3>
+        <span style={{ color: "#555", fontFamily: "monospace", fontSize: 10 }}>
+          {new Date(data.as_of).toLocaleString("en-US", { hour12: false })}
+        </span>
+      </div>
+
+      {/* KPI row */}
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8, marginBottom: 16 }}>
+        <Kpi label="CALL VOL" value={fmtVol(summary.total_call_volume)} color="#22c55e" />
+        <Kpi label="PUT VOL" value={fmtVol(summary.total_put_volume)} color="#ef4444" />
+        <Kpi label="C/P RATIO" value={summary.call_put_ratio.toFixed(2)} sub={rpLabel(summary.call_put_ratio)} color={rpColor(summary.call_put_ratio)} />
+        <Kpi label="EXPIRIES" value={String(summary.total_expiries)} color="#777" />
+        <Kpi label="LEAPS" value={String(leaps.length)} sub={leaps.length > 0 ? (data as any).leaps_expiries?.[0] : "—"} color="#f97316" />
+      </div>
+
+      {/* Expiry breakdown */}
+      <div style={{ marginBottom: 12 }}>
+        <p style={{ margin: "0 0 6px", color: "#888", fontFamily: "monospace", fontSize: 11, fontWeight: 600 }}>
+          EXPIRY BREAKDOWN ({expiries.length} total, {leaps.length} LEAPS)
+        </p>
+        {expiries.slice().reverse().map((e: ExpiryData) => (
+          <ExpiryCard
+            key={e.expiry}
+            expiry={e.expiry}
+            isLeaps={e.is_leaps}
+            callVol={e.total_call_volume}
+            putVol={e.total_put_volume}
+            ratio={e.call_put_ratio}
+            topCalls={e.top_calls || []}
+            topPuts={e.top_puts || []}
+          />
+        ))}
+      </div>
+
+      {/* Unusual Activity */}
+      {unusual.length > 0 && (
+        <div>
+          <p style={{ margin: "0 0 6px", color: "#f97316", fontFamily: "monospace", fontSize: 11, fontWeight: 700 }}>
+            ⚑ UNUSUAL ACTIVITY ({summary.unusual_count}) — vol/OI ≥ 2
+          </p>
+          <UnusualTable activities={unusual} />
+        </div>
+      )}
+
+      {unusual.length === 0 && (
+        <p style={{ color: "#444", fontFamily: "monospace", fontSize: 10, marginTop: 4 }}>
+          No unusual vol/OI spikes detected.
+        </p>
+      )}
+    </div>
+  );
+}

frontend/app/components/PriceChart.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useMemo } from "react";
+
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
+
+interface PriceChartProps {
+  dates: string[];
+  open: number[];
+  high: number[];
+  low: number[];
+  close: number[];
+  entries: boolean[];
+  exits: boolean[];
+  ticker: string;
+  /** Strategy overlays */
+  overlays?: { name: string; values: (number | null)[]; color: string; dash?: string }[];
+  /** Use candlestick style instead of line */
+  candlestick?: boolean;
+}
+
+export default function PriceChart({
+  dates,
+  open,
+  high,
+  low,
+  close,
+  entries,
+  exits,
+  ticker,
+  overlays,
+  candlestick,
+}: PriceChartProps) {
+  const entryPoints = useMemo(() => {
+    const x: string[] = [];
+    const y: number[] = [];
+    entries.forEach((v, i) => {
+      if (v && close[i] != null) {
+        x.push(dates[i]);
+        y.push(close[i]);
+      }
+    });
+    return { x, y };
+  }, [entries, dates, close]);
+
+  const exitPoints = useMemo(() => {
+    const x: string[] = [];
+    const y: number[] = [];
+    exits.forEach((v, i) => {
+      if (v && close[i] != null) {
+        x.push(dates[i]);
+        y.push(close[i]);
+      }
+    });
+    return { x, y };
+  }, [exits, dates, close]);
+
+  const layout = {
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    font: { color: "#a0a0a0", family: "JetBrains Mono, monospace", size: 10 },
+    margin: { t: 30, r: 20, b: 40, l: 60 },
+    xaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+      title: "",
+      rangeslider: { visible: candlestick ? false : undefined },
+    },
+    yaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+      title: "Price ($)",
+      titlefont: { size: 10 },
+    },
+    legend: {
+      font: { size: 10 },
+      bgcolor: "rgba(0,0,0,0)",
+      bordercolor: "#2a2a2a",
+      borderwidth: 1,
+    },
+    hovermode: "x unified" as const,
+    dragmode: "pan" as const,
+    title: {
+      text: `${ticker} — Price Chart`,
+      font: { size: 13, color: "#ffffff" },
+    },
+  };
+
+  const config = { responsive: true, displayModeBar: true, displaylogo: false, scrollZoom: true, modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d', 'resetScale2d'], modeBarButtons: [['zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetViews']] };
+
+  const data: unknown[] = [];
+
+  if (candlestick && open.length > 0 && high.length > 0) {
+    // Candlestick chart
+    data.push({
+      x: dates,
+      open: open,
+      high: high,
+      low: low,
+      close: close,
+      type: "candlestick",
+      name: "OHLC",
+      increasing: { line: { color: "#10b981" }, fillcolor: "#10b981" },
+      decreasing: { line: { color: "#ef4444" }, fillcolor: "#ef4444" },
+    });
+  } else {
+    // Line chart
+    data.push({
+      x: dates,
+      y: close,
+      type: "scatter",
+      mode: "lines",
+      name: "Close",
+      line: { color: "#ffffff", width: 1.5 },
+    });
+  }
+
+  // Overlay lines (SMA/EMA/BB)
+  if (overlays) {
+    overlays.forEach((line) => {
+      data.push({
+        x: dates,
+        y: line.values,
+        type: "scatter",
+        mode: "lines",
+        name: line.name,
+        line: { color: line.color, width: 1, dash: line.dash || "solid" },
+      });
+    });
+  }
+
+  // Entry markers
+  if (entryPoints.x.length > 0) {
+    data.push({
+      x: entryPoints.x,
+      y: entryPoints.y,
+      type: "scatter",
+      mode: "markers",
+      name: "Buy",
+      marker: { color: "#10b981", size: 10, symbol: "triangle-up" },
+    });
+  }
+
+  // Exit markers
+  if (exitPoints.x.length > 0) {
+    data.push({
+      x: exitPoints.x,
+      y: exitPoints.y,
+      type: "scatter",
+      mode: "markers",
+      name: "Sell",
+      marker: { color: "#ef4444", size: 10, symbol: "triangle-down" },
+    });
+  }
+
+  return (
+    <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4">
+      <Plot data={data} layout={layout} config={config} style={{ width: "100%", height: "400px" }} />
+    </div>
+  );
+}

frontend/app/components/StatsPanel.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+interface StatsPanelProps {
+  stats: Record<string, unknown> | null;
+  ticker: string;
+}
+
+export default function StatsPanel({ stats, ticker }: StatsPanelProps) {
+  if (!stats) {
+    return (
+      <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-5">
+        <div className="flex items-center gap-2 mb-4">
+          <span className="text-[var(--accent-orange)]">#</span>
+          <h2 className="text-sm font-bold uppercase tracking-wider">Portfolio Statistics</h2>
+        </div>
+        <div className="text-center py-8 text-[var(--text-muted)] text-sm">
+          Run a backtest to see statistics
+        </div>
+      </div>
+    );
+  }
+
+  const totalReturn = typeof stats["Total Return [%]"] === "number"
+    ? (stats["Total Return [%]"] as number)
+    : typeof stats["Total Return"] === "number"
+      ? (stats["Total Return"] as number) * 100
+      : null;
+
+  const sharpe = typeof stats["Sharpe Ratio"] === "number"
+    ? stats["Sharpe Ratio"] as number
+    : null;
+
+  const maxDD = typeof stats["Max Drawdown [%]"] === "number"
+    ? stats["Max Drawdown [%]"] as number
+    : typeof stats["Max Drawdown"] === "number"
+      ? (stats["Max Drawdown"] as number) * 100
+      : null;
+
+  const endValue = typeof stats["End Value"] === "number"
+    ? stats["End Value"] as number
+    : typeof stats["Final Value"] === "number"
+      ? stats["Final Value"] as number
+      : null;
+
+  const winRate = typeof stats["Win Rate [%]"] === "number"
+    ? stats["Win Rate [%]"] as number
+    : null;
+
+  const closedTrades = typeof stats["Total Closed Trades"] === "number"
+    ? stats["Total Closed Trades"] as number
+    : typeof stats["Total Trades"] === "number"
+      ? stats["Total Trades"] as number
+      : null;
+
+  return (
+    <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-5">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <span className="text-[var(--accent-orange)]">#</span>
+          <h2 className="text-sm font-bold uppercase tracking-wider">Portfolio Statistics</h2>
+        </div>
+        <span className="text-xs text-[var(--text-muted)] bg-[var(--bg-tertiary)] px-2 py-1 rounded">
+          {ticker}
+        </span>
+      </div>
+
+      {/* Key Metrics — only 4 cards */}
+      <div className="grid grid-cols-2 gap-3 mb-4">
+        {totalReturn !== null && (
+          <div className="bg-[var(--bg-tertiary)] rounded p-3 text-center">
+            <div className="text-[10px] text-[var(--text-muted)] uppercase tracking-wider mb-1">Total Return</div>
+            <div className={`text-lg font-bold ${totalReturn >= 0 ? "text-emerald-400" : "text-red-400"}`}>
+              {totalReturn.toFixed(2)}%
+            </div>
+          </div>
+        )}
+        {endValue !== null && (
+          <div className="bg-[var(--bg-tertiary)] rounded p-3 text-center">
+            <div className="text-[10px] text-[var(--text-muted)] uppercase tracking-wider mb-1">Final Value</div>
+            <div className="text-lg font-bold text-[var(--text-primary)]">
+              ${endValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+            </div>
+          </div>
+        )}
+        {sharpe !== null && (
+          <div className="bg-[var(--bg-tertiary)] rounded p-3 text-center">
+            <div className="text-[10px] text-[var(--text-muted)] uppercase tracking-wider mb-1">Sharpe Ratio</div>
+            <div className="text-lg font-bold text-[var(--accent-orange)]">
+              {sharpe.toFixed(3)}
+            </div>
+          </div>
+        )}
+        {maxDD !== null && (
+          <div className="bg-[var(--bg-tertiary)] rounded p-3 text-center">
+            <div className="text-[10px] text-[var(--text-muted)] uppercase tracking-wider mb-1">Max Drawdown</div>
+            <div className="text-lg font-bold text-red-400">
+              {maxDD.toFixed(2)}%
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Only Win Rate + Closed Trades */}
+      <div className="space-y-0">
+        {winRate !== null && (
+          <div className="flex justify-between items-center py-2 border-b border-[var(--border-color)] last:border-0">
+            <span className="text-xs text-[var(--text-secondary)] uppercase tracking-wider">Win Rate</span>
+            <span className={`text-sm font-bold ${winRate >= 50 ? "text-emerald-400" : "text-red-400"}`}>
+              {winRate.toFixed(1)}%
+            </span>
+          </div>
+        )}
+        {closedTrades !== null && closedTrades > 0 && (
+          <div className="flex justify-between items-center py-2 border-b border-[var(--border-color)] last:border-0">
+            <span className="text-xs text-[var(--text-secondary)] uppercase tracking-wider">Closed Trades</span>
+            <span className="text-sm font-bold text-[var(--text-primary)]">{String(closedTrades)}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/app/components/TerminalHeader.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+interface TerminalHeaderProps {
+  status: "connected" | "disconnected" | "loading";
+}
+
+export default function TerminalHeader({ status }: TerminalHeaderProps) {
+  const statusColor = {
+    connected: "bg-emerald-500",
+    disconnected: "bg-red-500",
+    loading: "bg-amber-500",
+  }[status];
+
+  return (
+    <header className="border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-6 py-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            <span className="text-[var(--accent-orange)] text-lg font-bold">{">"}</span>
+            <h1 className="text-lg font-bold tracking-wider text-[var(--text-primary)]">
+              Terminal<span className="text-[var(--accent-orange)]">.AI</span>
+            </h1>
+          </div>
+          <span className="text-[var(--text-muted)] text-xs">v1.0.0</span>
+          <span className="text-[var(--text-muted)] text-xs">|</span>
+          <span className="text-[var(--text-muted)] text-xs">VectorBT Engine</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${statusColor}`} />
+          <span className="text-xs text-[var(--text-secondary)] uppercase tracking-wider">
+            {status === "connected" ? "ONLINE" : status === "loading" ? "CONNECTING" : "OFFLINE"}
+          </span>
+        </div>
+      </div>
+    </header>
+  );
+}

frontend/app/components/VolumeChart.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
+
+interface VolumeChartProps {
+  dates: string[];
+  volume: number[];
+  close: number[];
+}
+
+export default function VolumeChart({ dates, volume, close }: VolumeChartProps) {
+  // Color bars green/red based on price movement
+  const colors = close.map((c, i) => {
+    if (i === 0) return "#10b981";
+    return c >= (close[i - 1] || c) ? "#10b981" : "#ef4444";
+  });
+
+  const layout = {
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    font: { color: "#a0a0a0", family: "JetBrains Mono, monospace", size: 10 },
+    margin: { t: 25, r: 20, b: 40, l: 60 },
+    xaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+    },
+    yaxis: {
+      gridcolor: "#2a2a2a",
+      zerolinecolor: "#2a2a2a",
+      showgrid: true,
+      title: "Volume",
+      titlefont: { size: 10 },
+    },
+    hovermode: "x unified" as const,
+    dragmode: "pan" as const,
+    showlegend: false,
+    title: {
+      text: "Volume",
+      font: { size: 12, color: "#ffffff" },
+    },
+    bargap: 0,
+  };
+
+  const config = { responsive: true, displayModeBar: true, displaylogo: false, modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d'], modeBarButtons: [['zoom2d', 'pan2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetViews']] };
+
+  const data = [
+    {
+      x: dates,
+      y: volume,
+      type: "bar",
+      marker: { color: colors, opacity: 0.6 },
+    },
+  ];
+
+  return (
+    <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4">
+      <Plot data={data} layout={layout} config={config} style={{ width: "100%", height: "150px" }} />
+    </div>
+  );
+}

frontend/app/globals.css

@@ -0,0 +1,84 @@
+@import "tailwindcss";
+
+:root {
+  --bg-primary: #0a0a0a;
+  --bg-secondary: #111111;
+  --bg-tertiary: #1a1a1a;
+  --border-color: #2a2a2a;
+  --accent-orange: #f59e0b;
+  --accent-orange-hover: #d97706;
+  --accent-green: #10b981;
+  --accent-red: #ef4444;
+  --text-primary: #ffffff;
+  --text-secondary: #a0a0a0;
+  --text-muted: #666666;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-orange);
+}
+
+/* Terminal cursor blink */
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+.cursor-blink {
+  animation: blink 1s infinite;
+}
+
+/* Glow effect for accent elements */
+.glow-orange {
+  box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
+}
+
+/* Input styling */
+input[type="text"],
+input[type="number"],
+select {
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  font-family: inherit;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
+/* Plotly overrides for dark theme */
+.js-plotly-plot .plotly .main-svg {
+  background: transparent !important;
+}

frontend/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Terminal.AI — VectorBT Financial Analysis",
+  description: "Professional backtesting and technical analysis platform powered by VectorBT",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="min-h-screen antialiased" suppressHydrationWarning>
+        {children}
+      </body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,548 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import TerminalHeader from "./components/TerminalHeader";
+import BacktestForm, { type BacktestConfig } from "./components/BacktestForm";
+import PriceChart from "./components/PriceChart";
+import IndicatorChart from "./components/IndicatorChart";
+import EquityChart from "./components/EquityChart";
+import VolumeChart from "./components/VolumeChart";
+import DrawdownChart from "./components/DrawdownChart";
+import ComparePanel from "./components/ComparePanel";
+import FundamentalsPanel from "./components/FundamentalsPanel";
+import OptionsFlowPanel from "./components/OptionsFlowPanel";
+import {
+  runBacktest, compareStrategies, healthCheck, fetchFundamentals,
+  fetchOptionsFlow, fetchLeapsScanner,
+  type BacktestResponse, type CompareResponse, type FundamentalsData,
+  type OptionsFlowResponse, type LeapsScannerEntry, type LeapsScannerResponse,
+} from "./api";
+
+export default function Home() {
+  const [status, setStatus] = useState<"connected" | "disconnected" | "loading">("loading");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isComparing, setIsComparing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<BacktestResponse | null>(null);
+  const [compareResult, setCompareResult] = useState<CompareResponse | null>(null);
+  const [fundamentals, setFundamentals] = useState<FundamentalsData | null>(null);
+  const [useCandlestick, setUseCandlestick] = useState(true);
+  const [activeTab, setActiveTab] = useState<"backtest" | "compare" | "options">("backtest");
+  const [optionsData, setOptionsData] = useState<OptionsFlowResponse | null>(null);
+  const [optionsLoading, setOptionsLoading] = useState(false);
+  const [leapsScanner, setLeapsScanner] = useState<LeapsScannerEntry[]>([]);
+  const [leapsScannerLoading, setLeapsScannerLoading] = useState(false);
+  const [leapsScannerInfo, setLeapsScannerInfo] = useState<LeapsScannerResponse["scan_info"] | null>(null);
+  const fundTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const dictToArray = useCallback(
+    (dict: Record<string, number> | undefined, dates: string[]): (number | null)[] => {
+      if (!dict) return [];
+      return dates.map((d) => {
+        const v = dict[d];
+        return v !== undefined ? v : null;
+      });
+    },
+    [],
+  );
+
+  useEffect(() => {
+    healthCheck().then(() => setStatus("connected")).catch(() => setStatus("disconnected"));
+  }, []);
+
+  useEffect(() => {
+    if (activeTab === "options") loadLeapsScanner();
+  }, [activeTab]);
+
+  const loadLeapsScanner = async () => {
+    setLeapsScannerLoading(true);
+    try {
+      const data = await fetchLeapsScanner(100, 1);
+      setLeapsScanner(data.tickers);
+      setLeapsScannerInfo(data.scan_info);
+    } catch {
+      setLeapsScanner([]);
+    } finally {
+      setLeapsScannerLoading(false);
+    }
+  };
+
+  const handleBacktest = async (config: BacktestConfig) => {
+    setIsLoading(true);
+    setError(null);
+    setResult(null);
+    setCompareResult(null);
+    setFundamentals(null);
+    setActiveTab("backtest");
+    try {
+      const [data, fundData] = await Promise.all([
+        runBacktest(config),
+        fetchFundamentals(config.ticker).catch(() => null),
+      ]);
+      setResult(data);
+      if (fundData) setFundamentals(fundData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCompare = async (config: BacktestConfig) => {
+    setIsComparing(true);
+    setError(null);
+    setResult(null);
+    setCompareResult(null);
+    setFundamentals(null);
+    setActiveTab("compare");
+    try {
+      const [data, fundData] = await Promise.all([
+        compareStrategies(config),
+        fetchFundamentals(config.ticker).catch(() => null),
+      ]);
+      setCompareResult(data);
+      if (fundData) setFundamentals(fundData);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setIsComparing(false);
+    }
+  };
+
+  // Derived data
+  const dates = result?.dates || [];
+  const close = result?.ohlcv?.close || [];
+  const open = result?.ohlcv?.open || [];
+  const high = result?.ohlcv?.high || [];
+  const low = result?.ohlcv?.low || [];
+  const volume = result?.ohlcv?.volume || [];
+
+  const strategyName = result?.strategy || "sma";
+  const fastOverlay = dictToArray(result?.indicators?.sma?.fast as Record<string, number> | undefined, dates);
+  const slowOverlay = dictToArray(result?.indicators?.sma?.slow as Record<string, number> | undefined, dates);
+  const emaFastOverlay = dictToArray(result?.indicators?.ema?.fast as Record<string, number> | undefined, dates);
+  const emaSlowOverlay = dictToArray(result?.indicators?.ema?.slow as Record<string, number> | undefined, dates);
+  const bbUpper = dictToArray(result?.indicators?.bollinger?.upper as Record<string, number> | undefined, dates);
+  const bbMiddle = dictToArray(result?.indicators?.bollinger?.middle as Record<string, number> | undefined, dates);
+  const bbLower = dictToArray(result?.indicators?.bollinger?.lower as Record<string, number> | undefined, dates);
+
+  const entries = dictToArray(result?.signals?.entries as unknown as Record<string, number> | undefined, dates).map(Boolean);
+  const exits = dictToArray(result?.signals?.exits as unknown as Record<string, number> | undefined, dates).map(Boolean);
+
+  const rsiValues = dictToArray(result?.indicators?.rsi?.rsi as Record<string, number> | undefined, dates);
+  const macdLine = dictToArray(result?.indicators?.macd?.macd as Record<string, number> | undefined, dates);
+  const macdSignal = dictToArray(result?.indicators?.macd?.signal as Record<string, number> | undefined, dates);
+  const macdHist = dictToArray(result?.indicators?.macd?.histogram as Record<string, number> | undefined, dates);
+  const equityArr = dictToArray(result?.portfolio?.equity_curve as Record<string, number> | undefined, dates);
+  const drawdownArr = dictToArray(result?.portfolio?.drawdown as Record<string, number> | undefined, dates);
+
+  const overlays: { name: string; values: (number | null)[]; color: string; dash?: string }[] = [];
+  if (strategyName === "sma" && fastOverlay.length > 0) {
+    overlays.push({ name: "Fast SMA", values: fastOverlay, color: "#f59e0b", dash: "dot" });
+    overlays.push({ name: "Slow SMA", values: slowOverlay, color: "#3b82f6", dash: "dash" });
+  } else if (strategyName === "ema" && emaFastOverlay.length > 0) {
+    overlays.push({ name: "Fast EMA", values: emaFastOverlay, color: "#f59e0b", dash: "dot" });
+    overlays.push({ name: "Slow EMA", values: emaSlowOverlay, color: "#3b82f6", dash: "dash" });
+  } else if (strategyName === "bollinger" && bbUpper.length > 0) {
+    overlays.push({ name: "Upper BB", values: bbUpper, color: "#a78bfa", dash: "dot" });
+    overlays.push({ name: "Middle BB", values: bbMiddle, color: "#a78bfa" });
+    overlays.push({ name: "Lower BB", values: bbLower, color: "#a78bfa", dash: "dot" });
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <TerminalHeader status={status} />
+
+      <main className="flex-1 p-6">
+        <div className="max-w-[1600px] mx-auto">
+          {/* Terminal prompt line */}
+          <div className="flex items-center gap-2 mb-6 text-sm flex-wrap">
+            <span className="text-[var(--accent-orange)]">{">"}</span>
+            <span className="text-[var(--text-secondary)]">vectorbt</span>
+            <span className="text-[var(--text-muted)]">--backtest</span>
+            <span className="text-[var(--text-muted)]">--engine={result?.strategy || "sma"}</span>
+            <span className="text-[var(--text-muted)]">--indicators=rsi,macd</span>
+            <span className="cursor-blink text-[var(--accent-orange)]">_</span>
+
+            {/* Tabs */}
+            <div className="ml-auto flex gap-1">
+              <button
+                onClick={() => setActiveTab("backtest")}
+                className={`px-2 py-1 text-[10px] uppercase tracking-wider rounded ${
+                  activeTab === "backtest"
+                    ? "bg-[var(--accent-orange)] text-black"
+                    : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+                }`}
+              >
+                Backtest
+              </button>
+              {compareResult && (
+                <button
+                  onClick={() => setActiveTab("compare")}
+                  className={`px-2 py-1 text-[10px] uppercase tracking-wider rounded ${
+                    activeTab === "compare"
+                      ? "bg-[var(--accent-orange)] text-black"
+                      : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+                  }`}
+                >
+                  Compare
+                </button>
+              )}
+              <button
+                onClick={() => { setActiveTab("options"); loadLeapsScanner(); }}
+                className={`px-2 py-1 text-[10px] uppercase tracking-wider rounded ${
+                  activeTab === "options"
+                    ? "bg-[var(--accent-orange)] text-black"
+                    : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+                }`}
+              >
+                Options
+              </button>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-12 gap-6">
+            {/* Left Panel */}
+            <div className="col-span-12 lg:col-span-3 space-y-6">
+              <BacktestForm
+                onSubmit={handleBacktest}
+                onCompare={handleCompare}
+                onTickerChange={(ticker) => {
+                  if (!ticker.trim()) return;
+                  if (fundTimerRef.current) clearTimeout(fundTimerRef.current);
+                  fundTimerRef.current = setTimeout(() => {
+                    fetchFundamentals(ticker).then(setFundamentals).catch(() => {});
+                  }, 800);
+                  fetchOptionsFlow(ticker).then(setOptionsData).catch(() => {});
+                }}
+                isLoading={isLoading}
+                isComparing={isComparing}
+              />
+              {fundamentals && <FundamentalsPanel data={fundamentals} />}
+            </div>
+
+            {/* Right Panel */}
+            <div className="col-span-12 lg:col-span-9 space-y-6">
+              {/* Error */}
+              {error && (
+                <div className="bg-red-950/30 border border-red-800 rounded-lg p-4">
+                  <div className="flex items-center gap-2 text-red-400 text-sm">
+                    <span>[ERROR]</span>
+                    <span>{error}</span>
+                  </div>
+                </div>
+              )}
+
+              {/* Loading */}
+              {(isLoading || isComparing) && (
+                <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-12 text-center">
+                  <div className="inline-block w-8 h-8 border-2 border-[var(--accent-orange)] border-t-transparent rounded-full animate-spin mb-4" />
+                  <div className="text-[var(--text-secondary)] text-sm">
+                    {isComparing ? "Running all strategies..." : "Running backtest simulation..."}
+                  </div>
+                  <div className="text-[var(--text-muted)] text-xs mt-1">
+                    Fetching data from Yahoo Finance + VectorBT analysis
+                  </div>
+                </div>
+              )}
+
+              {/* Empty state */}
+              {!isLoading && !isComparing && !result && !compareResult && !error && (
+                <div className="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-12 text-center">
+                  <div className="text-[var(--text-muted)] text-4xl mb-4">{">"}_</div>
+                  <div className="text-[var(--text-secondary)] text-sm mb-2">Terminal.AI Ready</div>
+                  <div className="text-[var(--text-muted)] text-xs">
+                    Configure parameters and execute a backtest to begin analysis
+                  </div>
+                </div>
+              )}
+
+              {/* Backtest Results */}
+              {result && !isLoading && activeTab === "backtest" && (
+                <>
+                  <div className="flex items-center gap-4 text-xs text-[var(--text-muted)] flex-wrap">
+                    <span>[{result.ticker}] {result.start_date} → {result.end_date}</span>
+                    <span>|</span>
+                    <span>{result.data_points} data points</span>
+                    <span>|</span>
+                    <span>Interval: {result.interval}</span>
+                    <span>|</span>
+                    <span>Strategy: {result.strategy.toUpperCase()}</span>
+                    <label className="ml-auto flex items-center gap-2 cursor-pointer">
+                      <span className="text-[var(--text-muted)] text-[10px] uppercase tracking-wider">
+                        {useCandlestick ? "Candlestick" : "Line"}
+                      </span>
+                      <button
+                        onClick={() => setUseCandlestick(!useCandlestick)}
+                        className={`w-8 h-4 rounded-full transition-colors ${
+                          useCandlestick ? "bg-[var(--accent-orange)]" : "bg-[var(--bg-tertiary)]"
+                        }`}
+                      >
+                        <span
+                          className={`block w-3 h-3 bg-black rounded-full transition-transform mt-0.5 ${
+                            useCandlestick ? "translate-x-4" : "translate-x-0.5"
+                          }`}
+                        />
+                      </button>
+                    </label>
+                  </div>
+
+                  <PriceChart
+                    dates={dates} open={open} high={high} low={low} close={close}
+                    entries={entries} exits={exits} ticker={result.ticker}
+                    overlays={overlays} candlestick={useCandlestick}
+                  />
+
+                  {volume.length > 0 && (
+                    <VolumeChart dates={dates} volume={volume} close={close} />
+                  )}
+
+                  <EquityChart
+                    dates={dates} equity={equityArr}
+                    initCash={
+                      result.portfolio.stats && typeof result.portfolio.stats["Start Value"] === "number"
+                        ? (result.portfolio.stats["Start Value"] as number)
+                        : 10000
+                    }
+                  />
+
+                  {drawdownArr.length > 0 && (
+                    <DrawdownChart
+                      dates={dates} drawdown={drawdownArr}
+                      maxDrawdown={
+                        result.portfolio.stats && typeof result.portfolio.stats["Max Drawdown [%]"] === "number"
+                          ? (result.portfolio.stats["Max Drawdown [%]"] as number) / 100
+                          : undefined
+                      }
+                    />
+                  )}
+
+                  <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+                    <IndicatorChart
+                      dates={dates} values={rsiValues}
+                      title={`RSI (${result.indicators.rsi.window})`}
+                      color="#a78bfa"
+                      overbought={result.indicators.rsi.overbought}
+                      oversold={result.indicators.rsi.oversold}
+                    />
+                    <IndicatorChart
+                      dates={dates} values={macdLine}
+                      title={`MACD (${result.indicators.macd.fast_window}/${result.indicators.macd.slow_window}/${result.indicators.macd.signal_window})`}
+                      color="#f59e0b"
+                      secondaryValues={macdSignal}
+                      secondaryColor="#3b82f6"
+                      secondaryName="Signal"
+                      histogramValues={macdHist}
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* Compare Results */}
+              {compareResult && !isComparing && activeTab === "compare" && (
+                <>
+                  <div className="flex items-center gap-4 text-xs text-[var(--text-muted)] flex-wrap">
+                    <span>[{compareResult.ticker}] {compareResult.start_date} → {compareResult.end_date}</span>
+                    <span>|</span>
+                    <span>{compareResult.data_points} data points</span>
+                    <span>|</span>
+                    <span>Interval: {compareResult.interval}</span>
+                  </div>
+
+                  <ComparePanel
+                    comparison={compareResult.comparison}
+                    dates={compareResult.dates}
+                  />
+
+                  <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+                    <IndicatorChart
+                      dates={compareResult.dates}
+                      values={dictToArray(compareResult.indicators.rsi.rsi as Record<string, number>, compareResult.dates)}
+                      title={`RSI (${compareResult.indicators.rsi.window})`}
+                      color="#a78bfa"
+                      overbought={compareResult.indicators.rsi.overbought}
+                      oversold={compareResult.indicators.rsi.oversold}
+                    />
+                    <IndicatorChart
+                      dates={compareResult.dates}
+                      values={dictToArray(compareResult.indicators.macd.macd as Record<string, number>, compareResult.dates)}
+                      title={`MACD (${compareResult.indicators.macd.fast_window}/${compareResult.indicators.macd.slow_window}/${compareResult.indicators.macd.signal_window})`}
+                      color="#f59e0b"
+                      secondaryValues={dictToArray(compareResult.indicators.macd.signal as Record<string, number>, compareResult.dates)}
+                      secondaryColor="#3b82f6"
+                      secondaryName="Signal"
+                      histogramValues={dictToArray(compareResult.indicators.macd.histogram as Record<string, number>, compareResult.dates)}
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* Options Tab */}
+              {activeTab === "options" && (
+                <div className="space-y-6">
+                  {/* Per-ticker options flow panel */}
+                  {result && <OptionsFlowPanel ticker={result.ticker} />}
+                  {!result && (
+                    <div style={{
+                      background: "var(--bg-secondary)", border: "1px solid var(--border-color)",
+                      borderRadius: 8, padding: 48, textAlign: "center",
+                    }}>
+                      <div style={{ color: "var(--text-muted)", fontSize: 48, marginBottom: 16 }}>Op_</div>
+                      <div style={{ color: "var(--text-secondary)", fontSize: 14, marginBottom: 8 }}>Options Flow</div>
+                      <div style={{ color: "var(--text-muted)", fontSize: 12 }}>
+                        Run a backtest first to view options flow for that ticker.
+                      </div>
+                    </div>
+                  )}
+
+                  {/* LEAPS Scanner — S&P 100 (en alt) */}
+                  <div style={{
+                    background: "#0a0a0a", border: "1px solid #1e1e1e",
+                    borderRadius: 6, padding: 16,
+                  }}>
+                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
+                      <h3 style={{
+                        margin: 0, color: "#f97316", fontFamily: "monospace",
+                        fontSize: 14, fontWeight: 700, letterSpacing: 1,
+                      }}>
+                        ⚑ LEAPS SCANNER — S&P 100 — anormal hacim/OI spike
+                      </h3>
+                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                        {leapsScannerInfo && (
+                          <span style={{ color: "#555", fontFamily: "monospace", fontSize: 10 }}>
+                            {leapsScannerInfo.scan_time_sec}s — {leapsScanner.length} anomalili
+                          </span>
+                        )}
+                        <button
+                          onClick={loadLeapsScanner}
+                          disabled={leapsScannerLoading}
+                          style={{
+                            background: leapsScannerLoading ? "#333" : "#f97316",
+                            color: leapsScannerLoading ? "#666" : "#000",
+                            border: "none", borderRadius: 4, padding: "4px 10px",
+                            fontFamily: "monospace", fontSize: 10, fontWeight: 700,
+                            cursor: leapsScannerLoading ? "not-allowed" : "pointer",
+                          }}
+                        >
+                          {leapsScannerLoading ? "Scanning…" : "↻ Rescan"}
+                        </button>
+                      </div>
+                    </div>
+
+                    {leapsScannerLoading ? (
+                      <p style={{ color: "#888", fontFamily: "monospace" }}>Scanning S&P 100 for LEAPS anomalies… (~10s)</p>
+                    ) : leapsScanner.length ? (
+                      <table style={{
+                        width: "100%", borderCollapse: "collapse", fontFamily: "monospace", fontSize: 11,
+                      }}>
+                        <thead>
+                          <tr>
+                            <th style={{ padding: "6px 8px", textAlign: "left", color: "#888" }}>Ticker</th>
+                            <th style={{ padding: "6px 8px", textAlign: "right", color: "#888" }}>LEAPS Vol</th>
+                            <th style={{ padding: "6px 8px", textAlign: "right", color: "#888" }}>C/P</th>
+                            <th style={{ padding: "6px 8px", textAlign: "right", color: "#888" }}>Spikes</th>
+                            <th style={{ padding: "6px 8px", textAlign: "left", color: "#888" }}>Top Spike</th>
+                            <th style={{ padding: "6px 8px", textAlign: "right", color: "#888" }}>Signal</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {leapsScanner.map((entry, i) => {
+                            const spike = entry.top_spike;
+                            const handleClickTicker = async () => {
+                              setActiveTab("backtest");
+                              setIsLoading(true);
+                              setError(null);
+                              setResult(null);
+                              setCompareResult(null);
+                              setFundamentals(null);
+                              try {
+                                const ticker = entry.ticker;
+                                // Get full date range for this ticker
+                                let startDate, endDate;
+                                try {
+                                  const { default: api } = await import("./api");
+                                  // fetchTickerRange is exported from api
+                                  const rangeRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/api/ticker/${encodeURIComponent(ticker)}/range`);
+                                  if (rangeRes.ok) {
+                                    const range = await rangeRes.json();
+                                    startDate = range.earliest.split("T")[0];
+                                    endDate = range.latest.split("T")[0];
+                                  }
+                                } catch {}
+                                if (!startDate) {
+                                  const end = new Date();
+                                  const start = new Date(end);
+                                  start.setFullYear(start.getFullYear() - 1);
+                                  const fmt = (d: Date) => d.toISOString().split("T")[0];
+                                  startDate = fmt(start);
+                                  endDate = fmt(end);
+                                }
+                                const config: BacktestConfig = {
+                                  ticker, start_date: startDate, end_date: endDate,
+                                  interval: "1d", strategy: "sma",
+                                  fast_ma: 10, slow_ma: 30, bb_window: 20, bb_std: 2.0,
+                                  fees: 0.001, init_cash: 10000,
+                                  rsi_window: 14, macd_fast: 12, macd_slow: 26, macd_signal: 9,
+                                };
+                                const [data, fundData] = await Promise.all([
+                                  runBacktest(config),
+                                  fetchFundamentals(ticker).catch(() => null),
+                                ]);
+                                setResult(data);
+                                if (fundData) setFundamentals(fundData);
+                              } catch (err) {
+                                setError(err instanceof Error ? err.message : "Unknown error");
+                              } finally {
+                                setIsLoading(false);
+                              }
+                            };
+                            return (
+                              <tr
+                                key={i}
+                                onClick={handleClickTicker}
+                                style={{ borderBottom: "1px solid #1a1a1a", cursor: "pointer" }}
+                                className="hover:bg-[#1a1a1a] transition-colors"
+                              >
+                                <td style={{ padding: "6px 8px", color: "#f97316", fontWeight: 700 }}>{entry.ticker}</td>
+                                <td style={{ padding: "6px 8px", textAlign: "right", color: "#e5e7eb" }}>{entry.total_leaps_vol.toLocaleString()}</td>
+                                <td style={{
+                                  padding: "6px 8px", textAlign: "right",
+                                  color: entry.call_put_ratio > 1 ? "#22c55e" : "#ef4444",
+                                }}>{entry.call_put_ratio.toFixed(2)}</td>
+                                <td style={{ padding: "6px 8px", textAlign: "right", color: "#f97316" }}>{entry.unusual_count}</td>
+                                <td style={{ padding: "6px 8px", color: "#888", fontSize: 10 }}>
+                                  {spike?.type} {spike?.expiry} K={spike?.strike?.toFixed(0)} vol={spike?.volume?.toLocaleString()} voi={spike?.vol_oi_ratio}
+                                </td>
+                                <td style={{
+                                  padding: "6px 8px", textAlign: "right", fontWeight: 700,
+                                  color: entry.call_put_ratio > 1.5 ? "#22c55e" : entry.call_put_ratio < 0.67 ? "#ef4444" : "#f59e0b",
+                                }}>
+                                  {entry.call_put_ratio > 1.5 ? "Bullish" : entry.call_put_ratio < 0.67 ? "Bearish" : "Neutral"}
+                                </td>
+                              </tr>
+                            );
+                          })}
+                        </tbody>
+                      </table>
+                    ) : !leapsScannerLoading ? (
+                      <p style={{ color: "#555", fontFamily: "monospace", fontSize: 10 }}>
+                        No LEAPS anomalies found. Click Rescan to try again.
+                      </p>
+                    ) : null}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <footer className="border-t border-[var(--border-color)] bg-[var(--bg-secondary)] px-6 py-3">
+        <div className="max-w-[1600px] mx-auto flex items-center justify-between text-xs text-[var(--text-muted)]">
+          <span>Terminal.AI v1.1.0 — Powered by VectorBT + FastAPI + Next.js</span>
+          <span>Data: Yahoo Finance (yfinance)</span>
+        </div>
+      </footer>
+    </div>
+  );
+}

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;