reorganized data files and enhance backtesting structure, monte carlo sim

2026-04-13 01:30:34 +02:00
parent 373e589297
commit 7d53f8589a
26 changed files with 65383 additions and 766 deletions
@@ -0,0 +1,942 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { motion } from 'motion/react';
+import {
+  CandlestickSeries,
+  LineSeries,
+  createChart,
+  createSeriesMarkers,
+} from 'lightweight-charts';
+
+const CHART_THEME = {
+  layout: { background: { color: '#0a0a0a' }, textColor: '#737373', fontFamily: 'Inter, system-ui, sans-serif', fontSize: 11 },
+  grid: { vertLines: { color: '#1a1a1a' }, horzLines: { color: '#1a1a1a' } },
+  crosshair: {
+    vertLine: { color: 'rgba(250, 250, 250, 0.15)', labelBackgroundColor: '#262626' },
+    horzLine: { color: 'rgba(250, 250, 250, 0.15)', labelBackgroundColor: '#262626' },
+  },
+  rightPriceScale: { borderColor: '#262626', textColor: '#737373' },
+  timeScale: { borderColor: '#262626', timeVisible: true, secondsVisible: false },
+};
+
+const TIMEFRAMES = [
+  { label: '1m', value: 1 },
+  { label: '3m', value: 3 },
+  { label: '5m', value: 5 },
+  { label: '15m', value: 15 },
+  { label: '30m', value: 30 },
+  { label: '1H', value: 60 },
+];
+
+const RR_OPTIONS = [1, 1.5, 2, 2.5, 3];
+const SESSIONS = ['london', 'new_york', 'asian', 'london_close', 'london_ny_overlap', 'all'];
+const DAYS = [
+  { label: 'Mon', value: 0 },
+  { label: 'Tue', value: 1 },
+  { label: 'Wed', value: 2 },
+  { label: 'Thu', value: 3 },
+  { label: 'Fri', value: 4 },
+];
+const STARTING_BALANCE = 10000;
+const PRESETS_KEY = 'nq_backtest_presets';
+const RESULT_HISTORY_KEY = 'nq_backtest_recent_results';
+
+function formatMoney(v) {
+  return v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+function calculateProfitFactor(trades) {
+  const winners = trades.filter((trade) => trade.pnl > 0).reduce((sum, trade) => sum + trade.pnl, 0);
+  const losers = Math.abs(trades.filter((trade) => trade.pnl < 0).reduce((sum, trade) => sum + trade.pnl, 0));
+  if (losers <= 0) return winners > 0 ? 999 : 0;
+  return Number((winners / losers).toFixed(2));
+}
+
+function calculateMaxDrawdown(trades, startingBalance = STARTING_BALANCE) {
+  if (!trades.length) return 0;
+  let equity = startingBalance;
+  let peak = startingBalance;
+  let maxDrawdown = 0;
+  trades
+      .slice()
+      .sort((a, b) => new Date(a.exit_time) - new Date(b.exit_time))
+      .forEach((trade) => {
+        equity += trade.pnl;
+        if (equity > peak) peak = equity;
+        const drawdown = ((peak - equity) / peak) * 100;
+        if (drawdown > maxDrawdown) maxDrawdown = drawdown;
+      });
+  return Number(maxDrawdown.toFixed(2));
+}
+
+function loadPresets() {
+  try {
+    return JSON.parse(localStorage.getItem(PRESETS_KEY) || '{}');
+  } catch { return {}; }
+}
+
+function savePresets(presets) {
+  localStorage.setItem(PRESETS_KEY, JSON.stringify(presets));
+}
+
+function loadRecentResults() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(RESULT_HISTORY_KEY) || '[]');
+    return Array.isArray(parsed) ? parsed.slice(0, 5) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveRecentResults(results) {
+  localStorage.setItem(RESULT_HISTORY_KEY, JSON.stringify(results.slice(0, 5)));
+}
+
+function NumberInput({ label, value, onChange, min, max, step = 1 }) {
+  return (
+      <div className="flex flex-col gap-1.5">
+        <label className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">{label}</label>
+        <input
+            type="number"
+            value={value}
+            min={min}
+            max={max}
+            step={step}
+            onChange={(e) => onChange(Number(e.target.value))}
+            className="w-full border border-[#262626] bg-black text-[#fafafa] font-mono text-[13px] px-3 py-2 outline-none focus:border-[#404040] transition-colors"
+        />
+      </div>
+  );
+}
+
+function ToggleInput({ label, value, onChange, color = '#10b981' }) {
+  return (
+      <button
+          className={`flex items-center gap-2 px-3 py-2 text-[12px] font-mono border transition-colors ${
+              value ? 'border-[#404040] text-[#fafafa]' : 'border-[#262626] text-[#525252]'
+          }`}
+          onClick={() => onChange(!value)}
+      >
+        <span className="w-1.5 h-1.5" style={{ background: value ? color : '#525252' }} />
+        {label}
+      </button>
+  );
+}
+
+function SectionHeader({ title, subtitle }) {
+  return (
+      <div className="mb-4 mt-2">
+        <h3 className="text-[14px] font-semibold tracking-tight">{title}</h3>
+        {subtitle && <p className="text-[11px] text-[#525252] font-mono mt-0.5">{subtitle}</p>}
+      </div>
+  );
+}
+
+export function BacktestingTab({ datasets = [], selectedDataset, onDatasetChange, onBacktestComplete }) {
+  const chartContainerRef = useRef(null);
+  const equityChartRef = useRef(null);
+  const chartRef = useRef(null);
+  const equityChartObjRef = useRef(null);
+  const candleSeriesRef = useRef(null);
+  const equitySeriesRef = useRef(null);
+  const markersRef = useRef(null);
+  const progressIntervalRef = useRef(null);
+  const progressResetTimeoutRef = useRef(null);
+
+  const [chartsReady, setChartsReady] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [results, setResults] = useState(null);
+  const [autoRun, setAutoRun] = useState(false);
+  const [progressPct, setProgressPct] = useState(0);
+  const [mcLoading, setMcLoading] = useState(false);
+  const [mcErrorMessage, setMcErrorMessage] = useState('');
+  const [mcResult, setMcResult] = useState(null);
+  const [mcRuns, setMcRuns] = useState(500);
+  const [mcVariationPct, setMcVariationPct] = useState(15);
+  const [mcPriceNoisePct, setMcPriceNoisePct] = useState(0);
+  const [mcSlippage, setMcSlippage] = useState(0);
+  const [mcSpread, setMcSpread] = useState(0);
+  const [mcRuinDrawdownPct, setMcRuinDrawdownPct] = useState(20);
+  const [mcShuffleTrades, setMcShuffleTrades] = useState(true);
+
+  const [timeframe, setTimeframe] = useState(1);
+  const [riskReward, setRiskReward] = useState(2.5);
+  const [lookback, setLookback] = useState(7);
+  const [atrMult, setAtrMult] = useState(2.5);
+  const [session, setSession] = useState('london');
+
+  const [useFvg, setUseFvg] = useState(true);
+  const [useOb, setUseOb] = useState(true);
+  const [useLiquiditySweep, setUseLiquiditySweep] = useState(true);
+  const [obMaxAge, setObMaxAge] = useState(50);
+  const [proximityPct, setProximityPct] = useState(0.5);
+  const [sweepLookback, setSweepLookback] = useState(5);
+
+  const [minGapSize, setMinGapSize] = useState(0.0);
+  const [impulseMultiplier, setImpulseMultiplier] = useState(0.0);
+  const [requireUnmitigatedFvg, setRequireUnmitigatedFvg] = useState(true);
+  const [requireBosConfluence, setRequireBosConfluence] = useState(false);
+
+  const [minObSize, setMinObSize] = useState(0.0);
+  const [requireFvgObConfluence, setRequireFvgObConfluence] = useState(false);
+
+  const [asianSweepOnly, setAsianSweepOnly] = useState(false);
+  const [useBreakEven, setUseBreakEven] = useState(false);
+  const [beTriggerRr, setBeTriggerRr] = useState(1.0);
+  const [usePartialTp, setUsePartialTp] = useState(false);
+  const [partialTpRr, setPartialTpRr] = useState(1.0);
+  const [partialTpPercent, setPartialTpPercent] = useState(50);
+
+  const [dayFilter, setDayFilter] = useState([0, 1, 2, 3, 4]);
+
+  const [maxDailyLoss, setMaxDailyLoss] = useState(0.0);
+  const [maxConsecutiveLosses, setMaxConsecutiveLosses] = useState(0);
+
+  // Presets
+  const [presets, setPresets] = useState(loadPresets);
+  const [presetName, setPresetName] = useState('');
+  const [showPresets, setShowPresets] = useState(false);
+  const [recentResults, setRecentResults] = useState(loadRecentResults);
+
+  const getSettings = () => ({
+    timeframe, riskReward, lookback, atrMult, session,
+    useFvg, useOb, useLiquiditySweep, obMaxAge, proximityPct, sweepLookback,
+    minGapSize, impulseMultiplier, requireUnmitigatedFvg, requireBosConfluence,
+    minObSize, requireFvgObConfluence, asianSweepOnly, dayFilter,
+    useBreakEven, beTriggerRr,
+    usePartialTp, partialTpRr, partialTpPercent,
+    maxDailyLoss, maxConsecutiveLosses,
+  });
+
+  const applySettings = (s) => {
+    if (s.timeframe !== undefined) setTimeframe(s.timeframe);
+    if (s.riskReward !== undefined) setRiskReward(s.riskReward);
+    if (s.lookback !== undefined) setLookback(s.lookback);
+    if (s.atrMult !== undefined) setAtrMult(s.atrMult);
+    if (s.session !== undefined) setSession(s.session);
+    if (s.useFvg !== undefined) setUseFvg(s.useFvg);
+    if (s.useOb !== undefined) setUseOb(s.useOb);
+    if (s.useLiquiditySweep !== undefined) setUseLiquiditySweep(s.useLiquiditySweep);
+    if (s.obMaxAge !== undefined) setObMaxAge(s.obMaxAge);
+    if (s.proximityPct !== undefined) setProximityPct(s.proximityPct);
+    if (s.sweepLookback !== undefined) setSweepLookback(s.sweepLookback);
+    if (s.minGapSize !== undefined) setMinGapSize(s.minGapSize);
+    if (s.impulseMultiplier !== undefined) setImpulseMultiplier(s.impulseMultiplier);
+    if (s.requireUnmitigatedFvg !== undefined) setRequireUnmitigatedFvg(s.requireUnmitigatedFvg);
+    if (s.requireBosConfluence !== undefined) setRequireBosConfluence(s.requireBosConfluence);
+    if (s.minObSize !== undefined) setMinObSize(s.minObSize);
+    if (s.requireFvgObConfluence !== undefined) setRequireFvgObConfluence(s.requireFvgObConfluence);
+    if (s.asianSweepOnly !== undefined) setAsianSweepOnly(s.asianSweepOnly);
+    if (s.useBreakEven !== undefined) setUseBreakEven(s.useBreakEven);
+    if (s.beTriggerRr !== undefined) setBeTriggerRr(s.beTriggerRr);
+    if (s.usePartialTp !== undefined) setUsePartialTp(s.usePartialTp);
+    if (s.partialTpRr !== undefined) setPartialTpRr(s.partialTpRr);
+    if (s.partialTpPercent !== undefined) setPartialTpPercent(s.partialTpPercent);
+    if (s.dayFilter !== undefined) setDayFilter(s.dayFilter);
+    if (s.maxDailyLoss !== undefined) setMaxDailyLoss(s.maxDailyLoss);
+    if (s.maxConsecutiveLosses !== undefined) setMaxConsecutiveLosses(s.maxConsecutiveLosses);
+  };
+
+  const handleSavePreset = () => {
+    const name = presetName.trim();
+    if (!name) return;
+    const updated = { ...presets, [name]: getSettings() };
+    setPresets(updated);
+    savePresets(updated);
+    setPresetName('');
+  };
+
+  const handleLoadPreset = (name) => {
+    const preset = presets[name];
+    if (preset) applySettings(preset);
+    setShowPresets(false);
+  };
+
+  const handleDeletePreset = (name) => {
+    const updated = { ...presets };
+    delete updated[name];
+    setPresets(updated);
+    savePresets(updated);
+  };
+
+  const toggleDay = (day) => {
+    setDayFilter((prev) => {
+      if (prev.includes(day)) {
+        const next = prev.filter((d) => d !== day);
+        return next.length ? next : prev;
+      }
+      return [...prev, day].sort();
+    });
+  };
+
+  useEffect(() => {
+    if (!chartContainerRef.current) return;
+
+    const chart = createChart(chartContainerRef.current, {
+      width: chartContainerRef.current.clientWidth,
+      height: 420,
+      ...CHART_THEME,
+    });
+
+    const candleSeries = chart.addSeries(CandlestickSeries, {
+      upColor: '#10b981',
+      downColor: '#ef4444',
+      borderVisible: false,
+      wickUpColor: '#10b981',
+      wickDownColor: '#ef4444',
+    });
+
+    chartRef.current = chart;
+    candleSeriesRef.current = candleSeries;
+
+    if (equityChartRef.current) {
+      const eqChart = createChart(equityChartRef.current, {
+        width: equityChartRef.current.clientWidth,
+        height: 160,
+        ...CHART_THEME,
+        layout: { ...CHART_THEME.layout, fontSize: 10 },
+      });
+      equityChartObjRef.current = eqChart;
+      equitySeriesRef.current = eqChart.addSeries(LineSeries, {
+        color: '#10b981',
+        lineWidth: 2,
+        priceLineVisible: false,
+        lastValueVisible: true,
+      });
+    }
+
+    setChartsReady(true);
+
+    const handleResize = () => {
+      if (chartContainerRef.current) chart.applyOptions({ width: chartContainerRef.current.clientWidth });
+      if (equityChartRef.current && equityChartObjRef.current) equityChartObjRef.current.applyOptions({ width: equityChartRef.current.clientWidth });
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      chart.remove();
+      equityChartObjRef.current?.remove();
+    };
+  }, []);
+
+  const runBacktest = useCallback(async () => {
+    if (!chartsReady) return;
+
+    if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
+    if (progressResetTimeoutRef.current) clearTimeout(progressResetTimeoutRef.current);
+    setProgressPct(8);
+    progressIntervalRef.current = setInterval(() => {
+      setProgressPct((prev) => (prev < 92 ? prev + 3 : prev));
+    }, 140);
+
+    setLoading(true);
+
+    try {
+      const params = new URLSearchParams({
+        timeframe: timeframe.toString(),
+        rr: riskReward.toString(),
+        lookback: lookback.toString(),
+        atr_mult: atrMult.toString(),
+        session,
+        sweep: useLiquiditySweep.toString(),
+        sweep_lookback: sweepLookback.toString(),
+        ob_age: obMaxAge.toString(),
+        dataset: selectedDataset,
+        use_fvg: useFvg.toString(),
+        use_ob: useOb.toString(),
+        proximity_pct: proximityPct.toString(),
+        min_gap_size: minGapSize.toString(),
+        impulse_multiplier: impulseMultiplier.toString(),
+        require_unmitigated_fvg: requireUnmitigatedFvg.toString(),
+        require_bos_confluence: requireBosConfluence.toString(),
+        min_ob_size: minObSize.toString(),
+        require_fvg_ob_confluence: requireFvgObConfluence.toString(),
+        asian_sweep_only: asianSweepOnly.toString(),
+        use_break_even: useBreakEven.toString(),
+        be_trigger_rr: beTriggerRr.toString(),
+        use_partial_tp: usePartialTp.toString(),
+        partial_tp_rr: partialTpRr.toString(),
+        partial_tp_percent: partialTpPercent.toString(),
+        day_filter: dayFilter.join(','),
+        max_daily_loss: maxDailyLoss.toString(),
+        max_consecutive_losses: maxConsecutiveLosses.toString(),
+      });
+
+      const [candleRes, backtestRes] = await Promise.all([
+        fetch(`http://localhost:8000/api/candles?timeframe=${timeframe}&dataset=${encodeURIComponent(selectedDataset)}`),
+        fetch(`http://localhost:8000/api/backtest?${params}`),
+      ]);
+
+      const candleData = await candleRes.json();
+      const backtestData = await backtestRes.json();
+
+      const candles = candleData.candles.map((c) => ({
+        time: Math.floor(new Date(c.time).getTime() / 1000),
+        open: c.open,
+        high: c.high,
+        low: c.low,
+        close: c.close,
+      }));
+      candleSeriesRef.current?.setData(candles);
+
+      const markers = [];
+      if (backtestData.trades) {
+        backtestData.trades.forEach((trade) => {
+          const isWin = trade.pnl > 0;
+          markers.push({
+            time: Math.floor(new Date(trade.enter_time).getTime() / 1000),
+            position: trade.direction === 'long' ? 'belowBar' : 'aboveBar',
+            color: isWin ? '#10b981' : '#ef4444',
+            shape: trade.direction === 'long' ? 'arrowUp' : 'arrowDown',
+            text: trade.direction === 'long' ? 'BUY' : 'SELL',
+          });
+          markers.push({
+            time: Math.floor(new Date(trade.exit_time).getTime() / 1000),
+            position: 'inBar',
+            color: isWin ? '#10b981' : '#ef4444',
+            shape: 'circle',
+            text: isWin ? `+${trade.pnl.toFixed(2)}` : trade.pnl.toFixed(2),
+          });
+        });
+      }
+
+      markers.sort((a, b) => a.time - b.time);
+      markersRef.current?.setMarkers([]);
+      markersRef.current = createSeriesMarkers(candleSeriesRef.current, markers);
+      chartRef.current?.timeScale().fitContent();
+
+      if (backtestData.trades?.length) {
+        let equity = STARTING_BALANCE;
+        const sortedTrades = backtestData.trades.slice().sort((a, b) => new Date(a.exit_time) - new Date(b.exit_time));
+        const eqData = sortedTrades.map((t) => {
+          equity += t.pnl;
+          return {
+            time: Math.floor(new Date(t.exit_time).getTime() / 1000),
+            value: Number(equity.toFixed(2)),
+          };
+        });
+        equitySeriesRef.current?.setData(eqData);
+        equityChartObjRef.current?.timeScale().fitContent();
+      } else {
+        equitySeriesRef.current?.setData([]);
+      }
+
+      setResults(backtestData);
+      onBacktestComplete?.(backtestData);
+
+      if (backtestData?.stats) {
+        const snapshot = {
+          id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          runAt: new Date().toISOString(),
+          dataset: selectedDataset,
+          timeframe,
+          riskReward,
+          totalPnl: Number(backtestData.stats.total_pnl ?? 0),
+          winRate: Number(backtestData.stats.win_rate ?? 0),
+          totalTrades: Number(backtestData.stats.total_trades ?? 0),
+        };
+        setRecentResults((prev) => {
+          const next = [snapshot, ...prev].slice(0, 5);
+          saveRecentResults(next);
+          return next;
+        });
+      }
+    } catch (err) {
+      console.error('Backtest failed:', err);
+    } finally {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
+      setProgressPct(100);
+      setLoading(false);
+      progressResetTimeoutRef.current = setTimeout(() => {
+        setProgressPct(0);
+      }, 500);
+    }
+  }, [
+    chartsReady, timeframe, riskReward, lookback, atrMult, session,
+    useFvg, useOb, useLiquiditySweep, sweepLookback, obMaxAge,
+    selectedDataset, proximityPct, minGapSize, impulseMultiplier,
+    requireUnmitigatedFvg, requireBosConfluence, minObSize,
+    requireFvgObConfluence, asianSweepOnly, dayFilter,
+    useBreakEven, beTriggerRr,
+    usePartialTp, partialTpRr, partialTpPercent,
+    maxDailyLoss, maxConsecutiveLosses, onBacktestComplete,
+  ]);
+
+  const runMonteCarlo = useCallback(async () => {
+    if (!results?.trades?.length) {
+      setMcErrorMessage('Run a backtest first so Monte Carlo has trades to simulate.');
+      return;
+    }
+
+    const trades = results.trades;
+    const totalTradesLocal = trades.length;
+    const totalPnlLocal = trades.reduce((sum, trade) => sum + Number(trade.pnl ?? 0), 0);
+    const winRateLocal = totalTradesLocal ? (trades.filter((trade) => trade.pnl > 0).length / totalTradesLocal) * 100 : 0;
+
+    setMcLoading(true);
+    setMcErrorMessage('');
+    setMcResult(null);
+
+    try {
+      const response = await fetch('http://localhost:8000/api/backtest/monte-carlo', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          trade_r_multiples: results.trades.map((trade) => Number(trade.r_multiple ?? 0)),
+          runs: mcRuns,
+          starting_balance: STARTING_BALANCE,
+          risk_per_trade_pct: 1,
+          sampling_method: mcShuffleTrades ? 'shuffle' : 'bootstrap',
+          missed_trade_pct: 0,
+          pnl_variation_pct: mcVariationPct,
+          price_noise_pct: mcPriceNoisePct,
+          slippage_per_trade: mcSlippage,
+          spread_per_trade: mcSpread,
+          ruin_drawdown_pct: mcRuinDrawdownPct,
+          base_trade_count: totalTradesLocal,
+          base_net_pnl: totalPnlLocal,
+          base_win_rate: winRateLocal,
+          base_profit_factor: calculateProfitFactor(results.trades),
+          base_max_drawdown_pct: calculateMaxDrawdown(results.trades, STARTING_BALANCE),
+        }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data?.detail ?? 'Monte Carlo run failed');
+      }
+
+      setMcResult(data);
+    } catch (err) {
+      setMcErrorMessage(err instanceof Error ? err.message : 'Monte Carlo run failed');
+    } finally {
+      setMcLoading(false);
+    }
+  }, [
+    results,
+    mcRuns,
+    mcVariationPct,
+    mcPriceNoisePct,
+    mcSlippage,
+    mcSpread,
+    mcRuinDrawdownPct,
+    mcShuffleTrades,
+  ]);
+
+  useEffect(() => {
+    if (chartsReady && autoRun) runBacktest();
+  }, [runBacktest, chartsReady, autoRun]);
+
+  useEffect(() => {
+    let f2 = 0;
+    const f1 = requestAnimationFrame(() => {
+      f2 = requestAnimationFrame(() => {
+        if (chartRef.current && chartContainerRef.current) {
+          chartRef.current.applyOptions({ width: chartContainerRef.current.clientWidth });
+          chartRef.current.timeScale().fitContent();
+        }
+        if (equityChartObjRef.current && equityChartRef.current) {
+          equityChartObjRef.current.applyOptions({ width: equityChartRef.current.clientWidth });
+          equityChartObjRef.current.timeScale().fitContent();
+        }
+      });
+    });
+    return () => { cancelAnimationFrame(f1); cancelAnimationFrame(f2); };
+  }, []);
+
+  useEffect(() => () => {
+    if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
+    if (progressResetTimeoutRef.current) clearTimeout(progressResetTimeoutRef.current);
+  }, []);
+
+  const stats = results?.stats;
+  const totalTrades = stats?.total_trades ?? 0;
+  const winRate = stats?.win_rate ?? 0;
+  const totalPnl = stats?.total_pnl ?? 0;
+  const partialTpTrades = stats?.partial_tp_trades ?? 0;
+  const partialTpRate = stats?.partial_tp_rate ?? 0;
+  const partialTpRealized = stats?.partial_tp_realized_total ?? 0;
+  const presetNames = Object.keys(presets);
+  const mcRunsData = mcResult?.sample_runs ?? mcResult?.distribution ?? [];
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 18 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.52, ease: [0.22, 1, 0.36, 1] } },
+  };
+
+  return (
+      <div className="space-y-6">
+        <motion.div variants={itemVariants} className="border border-[#262626] bg-[#0a0a0a] p-6">
+          {/* Header row */}
+          <div className="flex items-center justify-between mb-6 flex-wrap gap-4">
+            <div>
+              <h2 className="text-[20px] font-semibold tracking-tight mb-1">Backtesting Engine</h2>
+              <p className="text-[13px] text-[#525252] font-mono">Adjust parameters and run strategy</p>
+            </div>
+            <div className="flex items-center gap-3 flex-wrap">
+              <ToggleInput label="Auto Run" value={autoRun} onChange={setAutoRun} color="#fafafa" />
+              {loading && <div className="w-2 h-2 bg-[#10b981] animate-pulse" />}
+              <button
+                  onClick={() => setShowPresets((p) => !p)}
+                  className="px-4 py-2 text-[13px] font-mono border border-[#262626] text-[#737373] hover:text-[#fafafa] hover:border-[#404040] transition-colors"
+              >
+                Presets
+              </button>
+              <button
+                  onClick={runBacktest}
+                  disabled={loading}
+                  className="px-5 py-2 text-[13px] font-semibold font-mono bg-[#fafafa] text-black hover:bg-[#e5e5e5] transition-colors disabled:opacity-40"
+              >
+                {loading ? 'Running...' : 'Run Backtest'}
+              </button>
+              <button
+                  onClick={runMonteCarlo}
+                  disabled={loading || mcLoading || !results?.trades?.length}
+                  className="px-5 py-2 text-[13px] font-semibold font-mono border border-[#6366f1] text-[#6366f1] hover:bg-[#6366f1] hover:text-white transition-colors disabled:opacity-40"
+              >
+                {mcLoading ? 'Running MC...' : 'Monte Carlo'}
+              </button>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <div className="flex items-center justify-between text-[11px] font-mono text-[#737373] mb-1">
+              <span>{loading ? 'Running backtest...' : 'Backtest progress'}</span>
+              <span>{Math.round(progressPct)}%</span>
+            </div>
+            <div className="h-2 border border-[#1f1f1f] bg-black/50 overflow-hidden">
+              <div
+                className={`h-full transition-all duration-150 ${loading ? 'bg-[#10b981]' : 'bg-[#404040]'}`}
+                style={{ width: `${progressPct}%` }}
+              />
+            </div>
+          </div>
+
+          {/* Presets panel */}
+          {showPresets && (
+              <div className="mb-6 p-5 border border-[#262626] bg-black">
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-[14px] font-semibold tracking-tight">Presets</h3>
+                  <button
+                      onClick={() => setShowPresets(false)}
+                      className="text-[#525252] hover:text-[#fafafa] text-[18px] leading-none transition-colors"
+                  >
+                    x
+                  </button>
+                </div>
+
+                {/* Save */}
+                <div className="flex gap-2 mb-4">
+                  <input
+                      type="text"
+                      placeholder="Preset name..."
+                      value={presetName}
+                      onChange={(e) => setPresetName(e.target.value)}
+                      onKeyDown={(e) => e.key === 'Enter' && handleSavePreset()}
+                      className="flex-1 border border-[#262626] bg-[#0a0a0a] text-[#fafafa] font-mono text-[13px] px-3 py-2 outline-none focus:border-[#404040] transition-colors"
+                  />
+                  <button
+                      onClick={handleSavePreset}
+                      disabled={!presetName.trim()}
+                      className="px-4 py-2 text-[13px] font-mono bg-[#fafafa] text-black hover:bg-[#e5e5e5] transition-colors disabled:opacity-30"
+                  >
+                    Save Current
+                  </button>
+                </div>
+
+                {/* List */}
+                {presetNames.length === 0 ? (
+                    <p className="text-[13px] text-[#525252] font-mono">No saved presets yet.</p>
+                ) : (
+                    <div className="space-y-2">
+                      {presetNames.map((name) => (
+                          <div key={name} className="flex items-center justify-between p-3 border border-[#1a1a1a] hover:border-[#262626] transition-colors">
+                            <span className="text-[13px] font-mono text-[#fafafa]">{name}</span>
+                            <div className="flex gap-2">
+                              <button
+                                  onClick={() => handleLoadPreset(name)}
+                                  className="px-3 py-1 text-[12px] font-mono border border-[#262626] text-[#737373] hover:text-[#fafafa] hover:border-[#404040] transition-colors"
+                              >
+                                Load
+                              </button>
+                              <button
+                                  onClick={() => handleDeletePreset(name)}
+                                  className="px-3 py-1 text-[12px] font-mono border border-[#262626] text-[#ef4444] hover:border-[#ef4444] transition-colors"
+                              >
+                                Delete
+                              </button>
+                            </div>
+                          </div>
+                      ))}
+                    </div>
+                )}
+              </div>
+          )}
+
+          {/* Core Strategy */}
+          <SectionHeader title="Core Strategy" />
+          <div className="flex flex-wrap gap-6 items-end mb-6">
+            <div className="flex flex-col gap-1.5">
+              <span className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">Timeframe</span>
+              <div className="flex border border-[#262626]">
+                {TIMEFRAMES.map((tf) => (
+                    <button key={tf.value} className={`px-3 py-1.5 text-[12px] font-mono transition-colors ${timeframe === tf.value ? 'bg-[#fafafa] text-black' : 'text-[#737373] hover:text-[#fafafa]'}`} onClick={() => setTimeframe(tf.value)}>{tf.label}</button>
+                ))}
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <span className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">Risk : Reward</span>
+              <div className="flex border border-[#262626]">
+                {RR_OPTIONS.map((rr) => (
+                    <button key={rr} className={`px-3 py-1.5 text-[12px] font-mono transition-colors ${riskReward === rr ? 'bg-[#fafafa] text-black' : 'text-[#737373] hover:text-[#fafafa]'}`} onClick={() => setRiskReward(rr)}>1:{rr}</button>
+                ))}
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <span className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">Session</span>
+              <div className="flex flex-wrap border border-[#262626]">
+                {SESSIONS.map((s) => (
+                    <button key={s} className={`px-3 py-1.5 text-[12px] font-mono transition-colors capitalize ${session === s ? 'bg-[#fafafa] text-black' : 'text-[#737373] hover:text-[#fafafa]'}`} onClick={() => setSession(s)}>{s.replace(/_/g, ' ')}</button>
+                ))}
+              </div>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <span className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">Dataset</span>
+              <select className="border border-[#262626] bg-black text-[#fafafa] font-mono text-[13px] px-3 py-2 outline-none focus:border-[#404040] transition-colors" value={selectedDataset} onChange={(e) => onDatasetChange(e.target.value)}>
+                {datasets.map((d) => (<option key={d.id} value={d.id}>{d.label}</option>))}
+              </select>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-6">
+            <NumberInput label="Lookback" value={lookback} onChange={setLookback} min={1} max={50} />
+            <NumberInput label="ATR Multiplier" value={atrMult} onChange={setAtrMult} min={0.1} max={10} step={0.1} />
+            <NumberInput label="OB Max Age" value={obMaxAge} onChange={setObMaxAge} min={1} max={200} />
+            <NumberInput label="Proximity %" value={proximityPct} onChange={setProximityPct} min={0.01} max={5} step={0.01} />
+            <NumberInput label="Sweep Lookback" value={sweepLookback} onChange={setSweepLookback} min={1} max={50} />
+          </div>
+
+          <div className="border-t border-[#1a1a1a] my-6" />
+          <SectionHeader title="FVG Settings" subtitle="Fair Value Gap quality filters" />
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-4">
+            <NumberInput label="Min Gap Size" value={minGapSize} onChange={setMinGapSize} min={0} max={0.01} step={0.0001} />
+            <NumberInput label="Impulse Multiplier" value={impulseMultiplier} onChange={setImpulseMultiplier} min={0} max={5} step={0.1} />
+          </div>
+          <div className="flex flex-wrap gap-3 mb-6">
+            <ToggleInput label="Fair Value Gaps" value={useFvg} onChange={setUseFvg} />
+            <ToggleInput label="Require Unmitigated" value={requireUnmitigatedFvg} onChange={setRequireUnmitigatedFvg} />
+            <ToggleInput label="Require BOS Confluence" value={requireBosConfluence} onChange={setRequireBosConfluence} />
+          </div>
+
+          <div className="border-t border-[#1a1a1a] my-6" />
+          <SectionHeader title="Order Block Settings" subtitle="Order block quality filters" />
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-4">
+            <NumberInput label="Min OB Size" value={minObSize} onChange={setMinObSize} min={0} max={0.01} step={0.0001} />
+          </div>
+          <div className="flex flex-wrap gap-3 mb-6">
+            <ToggleInput label="Order Blocks" value={useOb} onChange={setUseOb} />
+            <ToggleInput label="Require FVG + OB Confluence" value={requireFvgObConfluence} onChange={setRequireFvgObConfluence} />
+          </div>
+
+          <div className="border-t border-[#1a1a1a] my-6" />
+          <SectionHeader title="Liquidity Settings" subtitle="Sweep and liquidity filters" />
+          <div className="flex flex-wrap gap-3 mb-6">
+            <ToggleInput label="Liquidity Sweep" value={useLiquiditySweep} onChange={setUseLiquiditySweep} />
+            <ToggleInput label="Asian Range Sweep Only" value={asianSweepOnly} onChange={setAsianSweepOnly} />
+          </div>
+
+          <div className="border-t border-[#1a1a1a] my-6" />
+          <SectionHeader title="Day Filter" subtitle="Select which days to trade" />
+          <div className="flex gap-2 mb-6">
+            {DAYS.map((d) => (
+                <button key={d.value} className={`px-4 py-2 text-[12px] font-mono border transition-colors ${dayFilter.includes(d.value) ? 'bg-[#fafafa] text-black border-[#fafafa]' : 'border-[#262626] text-[#525252] hover:text-[#fafafa]'}`} onClick={() => toggleDay(d.value)}>{d.label}</button>
+            ))}
+          </div>
+
+          <div className="border-t border-[#1a1a1a] my-6" />
+          <SectionHeader title="Risk Management" subtitle="Daily loss limits and streak protection" />
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+            <NumberInput label="Max Daily Loss %" value={maxDailyLoss} onChange={setMaxDailyLoss} min={0} max={10} step={0.5} />
+            <NumberInput label="Max Consecutive Losses" value={maxConsecutiveLosses} onChange={setMaxConsecutiveLosses} min={0} max={20} step={1} />
+            <NumberInput label="BE Trigger (RR)" value={beTriggerRr} onChange={setBeTriggerRr} min={0.1} max={10} step={0.1} />
+            <NumberInput label="Partial TP RR" value={partialTpRr} onChange={setPartialTpRr} min={0.1} max={10} step={0.1} />
+            <NumberInput label="Partial TP %" value={partialTpPercent} onChange={setPartialTpPercent} min={1} max={100} step={1} />
+          </div>
+          <div className="flex flex-wrap gap-3 mt-4">
+            <ToggleInput label="Use Break-Even" value={useBreakEven} onChange={setUseBreakEven} />
+            <ToggleInput label="Use Partial TP" value={usePartialTp} onChange={setUsePartialTp} />
+          </div>
+        </motion.div>
+
+        {/* Chart */}
+        <motion.div variants={itemVariants} className="border border-[#262626] bg-[#0a0a0a] p-6">
+          <div className="mb-4">
+            <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-1">Backtest Chart</p>
+            <h2 className="text-[20px] font-semibold tracking-tight">Trade entries and exits</h2>
+          </div>
+          <div ref={chartContainerRef} className="h-[420px] border border-[#1a1a1a] overflow-hidden" />
+        </motion.div>
+
+        {/* Equity */}
+        <motion.div variants={itemVariants} className="border border-[#262626] bg-[#0a0a0a] p-6">
+          <div className="mb-4">
+            <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-1">Equity Curve</p>
+            <h2 className="text-[20px] font-semibold tracking-tight">Balance progression</h2>
+          </div>
+          <div ref={equityChartRef} className="h-[160px] border border-[#1a1a1a] overflow-hidden" />
+        </motion.div>
+
+        {/* Results */}
+        {stats && (
+            <motion.div variants={itemVariants} className="border border-[#262626] bg-[#0a0a0a] p-6">
+              <div className="mb-6">
+                <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-1">Results</p>
+                <h2 className="text-[20px] font-semibold tracking-tight">Backtest Summary</h2>
+                <p className="text-[12px] text-[#737373] font-mono mt-2">CSV: {selectedDataset}</p>
+              </div>
+
+              <div className="mb-6 border border-[#1a1a1a] bg-black/30 p-4">
+                <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-3">Last 5 Runs</p>
+                {recentResults.length === 0 ? (
+                  <p className="text-[12px] text-[#737373] font-mono">No previous runs saved yet.</p>
+                ) : (
+                  <div className="space-y-2">
+                    {recentResults.map((run) => (
+                      <div key={run.id} className="grid grid-cols-2 md:grid-cols-6 gap-2 text-[12px] font-mono border border-[#1a1a1a] bg-black/40 px-3 py-2">
+                        <span className="text-[#a3a3a3]">{new Date(run.runAt).toLocaleString()}</span>
+                        <span className="text-[#fafafa]">{run.dataset}</span>
+                        <span className="text-[#a3a3a3]">{run.timeframe}m</span>
+                        <span className={run.totalPnl >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}>${formatMoney(run.totalPnl)}</span>
+                        <span className="text-[#60a5fa]">{run.winRate.toFixed(1)}%</span>
+                        <span className="text-[#fafafa]">{run.totalTrades} trades</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <div className="border-t border-[#1a1a1a] my-6" />
+              <div className="space-y-4 mb-6">
+                <div className="flex items-center justify-between gap-4 flex-wrap">
+                  <div>
+                    <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-1">Monte Carlo</p>
+                    <h3 className="text-[16px] font-semibold tracking-tight">Stress test the current trade set</h3>
+                  </div>
+                  <button
+                      onClick={runMonteCarlo}
+                      disabled={mcLoading || !results?.trades?.length}
+                      className="px-4 py-2 text-[13px] font-semibold font-mono bg-[#6366f1] text-white hover:bg-[#4f46e5] transition-colors disabled:opacity-40"
+                  >
+                    {mcLoading ? 'Running Monte Carlo...' : 'Run Monte Carlo'}
+                  </button>
+                </div>
+
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+                  <NumberInput label="Runs" value={mcRuns} onChange={setMcRuns} min={1} step={1} />
+                  <NumberInput label="PnL Var %" value={mcVariationPct} onChange={setMcVariationPct} min={0} step={1} />
+                  <NumberInput label="Price Noise %" value={mcPriceNoisePct} onChange={setMcPriceNoisePct} min={0} step={1} />
+                  <NumberInput label="Slippage" value={mcSlippage} onChange={setMcSlippage} min={0} step={0.01} />
+                  <NumberInput label="Spread" value={mcSpread} onChange={setMcSpread} min={0} step={0.01} />
+                  <NumberInput label="Ruin DD %" value={mcRuinDrawdownPct} onChange={setMcRuinDrawdownPct} min={0} step={1} />
+                </div>
+
+                <label className="inline-flex items-center gap-2 text-[12px] font-mono text-[#a3a3a3]">
+                  <input
+                      type="checkbox"
+                      checked={mcShuffleTrades}
+                      onChange={(e) => setMcShuffleTrades(e.target.checked)}
+                      className="h-4 w-4"
+                  />
+                  Shuffle trade order each simulation run
+                </label>
+
+                {mcErrorMessage && (
+                    <div className="border border-[#7f1d1d] bg-[#1b0a0a] text-[#fca5a5] px-4 py-3 text-[12px] font-mono">
+                      {mcErrorMessage}
+                    </div>
+                )}
+
+                {mcResult && (
+                    <div className="space-y-4">
+                      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+                        <div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Avg PnL</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.avg_pnl ?? 0).toFixed(2)}</p></div>
+                        <div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Profitable %</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.profitable_run_pct ?? 0).toFixed(2)}%</p></div>
+                        <div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Worst DD %</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.worst_max_drawdown_pct ?? 0).toFixed(2)}%</p></div>
+                        <div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Avg WR</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.avg_win_rate ?? 0).toFixed(2)}%</p></div>
+                        <div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Avg PF</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.avg_profit_factor ?? 0).toFixed(2)}</p></div>
+                        <div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Ruin %</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.probability_of_ruin ?? 0).toFixed(2)}%</p></div>
+                      </div>
+
+                      <div className="border border-[#1a1a1a] bg-black/40 overflow-auto">
+                        <div className="grid grid-cols-[60px_100px_120px_100px_100px_80px] gap-3 px-4 py-3 text-[10px] font-mono uppercase tracking-widest text-[#737373] border-b border-[#1a1a1a]">
+                          <span>Run</span>
+                          <span>Net PnL</span>
+                          <span>Max DD %</span>
+                          <span>Win Rate</span>
+                          <span>PF</span>
+                          <span>Ruin</span>
+                        </div>
+                        {mcRunsData.map((run) => (
+                            <div key={run.run} className="grid grid-cols-[60px_100px_120px_100px_100px_80px] gap-3 px-4 py-2 text-[12px] font-mono border-b border-[#111111]">
+                              <span>{run.run}</span>
+                              <span className={run.net_pnl >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}>{Number(run.net_pnl).toFixed(2)}</span>
+                              <span>{Number(run.max_drawdown_pct).toFixed(2)}</span>
+                              <span>{Number(run.win_rate).toFixed(2)}%</span>
+                              <span>{Number(run.profit_factor).toFixed(2)}</span>
+                              <span className={run.ruin ? 'text-[#ef4444]' : 'text-[#737373]'}>{run.ruin ? 'Yes' : 'No'}</span>
+                            </div>
+                        ))}
+                      </div>
+                    </div>
+                )}
+              </div>
+
+              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-10 gap-4">
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Net P/L</p>
+                  <p className={`text-[24px] font-semibold ${totalPnl >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}`}>${formatMoney(totalPnl)}</p>
+                </div>
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Win Rate</p>
+                  <p className={`text-[24px] font-semibold ${winRate > 50 ? 'text-[#10b981]' : 'text-[#ef4444]'}`}>{winRate.toFixed(1)}%</p>
+                </div>
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Total Trades</p>
+                  <p className="text-[24px] font-semibold text-[#fafafa]">{totalTrades}</p>
+                </div>
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Winners</p>
+                  <p className="text-[24px] font-semibold text-[#10b981]">{stats.winners}</p>
+                </div>
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Losers</p>
+                  <p className="text-[24px] font-semibold text-[#ef4444]">{stats.losers}</p>
+                </div>
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Avg Win</p>
+                  <p className="text-[24px] font-semibold text-[#10b981]">${formatMoney(stats.avg_win)}</p>
+                </div>
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Avg Loss</p>
+                  <p className="text-[24px] font-semibold text-[#ef4444]">${formatMoney(Math.abs(stats.avg_loss))}</p>
+                </div>
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Partials</p>
+                  <p className="text-[24px] font-semibold text-[#fafafa]">{partialTpTrades}</p>
+                </div>
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Partial Rate</p>
+                  <p className="text-[24px] font-semibold text-[#60a5fa]">{partialTpRate.toFixed(1)}%</p>
+                </div>
+                <div className="p-4 border border-[#1a1a1a] bg-black/40">
+                  <p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Partial P/L</p>
+                  <p className={`text-[24px] font-semibold ${partialTpRealized >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}`}>${formatMoney(partialTpRealized)}</p>
+                </div>
+              </div>
+            </motion.div>
+        )}
+      </div>
+  );
+}