Promote production portfolio strategy

frontend/src/components/signals/BacktestPanel.tsx

@@ -1,3 +1,4 @@
+import { useMemo, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useBacktestReport } from '../../hooks/useMarketRegime';
 import { triggerJob } from '../../api/admin';
@@ -6,7 +7,13 @@ import { Callout } from '../ui/Callout';
 import { Disclosure } from '../ui/Disclosure';
 import { Section } from '../ui/Section';
 import { useToast } from '../ui/Toast';
-import type { BacktestBucket, BacktestPortfolioPolicy, BacktestStrategyVariant } from '../../lib/types';
+import type {
+  BacktestBucket,
+  BacktestCurvePoint,
+  BacktestPortfolioMonitorRun,
+  BacktestPortfolioPolicy,
+  BacktestStrategyVariant,
+} from '../../lib/types';
 
 function fmtR(v: number | null | undefined): string {
   if (v === null || v === undefined) return '—';
@@ -23,6 +30,9 @@ function fmtSignedPct(v: number | null | undefined): string {
   if (v === null || v === undefined) return '—';
   return `${v > 0 ? '+' : ''}${v.toFixed(1)}%`;
 }
+function fmtDrawdown(v: number | null | undefined): string {
+  return v === null || v === undefined ? '—' : `-${Math.abs(v).toFixed(1)}%`;
+}
 function fmtDays(v: number | null | undefined): string {
   return v === null || v === undefined ? '—' : `${v.toFixed(1)}d`;
 }
@@ -120,16 +130,109 @@ function BucketRow({ label, b }: { label: string; b: BacktestBucket }) {
   );
 }
 
+function curvePath(
+  points: BacktestCurvePoint[],
+  min: number,
+  max: number,
+  w: number,
+  h: number,
+  pad: number,
+  startMs: number,
+  endMs: number,
+): string {
+  if (points.length < 2) return '';
+  const span = Math.max(max - min, 1);
+  const timeSpan = Math.max(endMs - startMs, 1);
+  return points
+    .map((p, i) => {
+      const t = new Date(p.date).getTime();
+      const x = pad + ((t - startMs) / timeSpan) * (w - pad * 2);
+      const value = p.return_pct ?? 0;
+      const y = pad + (1 - (value - min) / span) * (h - pad * 2);
+      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(' ');
+}
+
+function EquityCurveChart({ run }: { run: BacktestPortfolioMonitorRun }) {
+  const portfolio = run.equity_curve ?? [];
+  const benchmark = run.benchmark_curve ?? [];
+  const values = [...portfolio, ...benchmark]
+    .map((p) => p.return_pct)
+    .filter((v): v is number => v !== null && v !== undefined);
+  if (portfolio.length < 2 || values.length === 0) {
+    return <Callout variant="empty">No equity curve points for this selection.</Callout>;
+  }
+
+  const min = Math.min(0, ...values);
+  const max = Math.max(0, ...values);
+  const times = [...portfolio, ...benchmark]
+    .map((p) => new Date(p.date).getTime())
+    .filter((v) => Number.isFinite(v));
+  if (times.length === 0) {
+    return <Callout variant="empty">No dated equity curve points for this selection.</Callout>;
+  }
+  const startMs = Math.min(...times);
+  const endMs = Math.max(...times);
+  const w = 720;
+  const h = 240;
+  const pad = 28;
+  const portfolioPath = curvePath(portfolio, min, max, w, h, pad, startMs, endMs);
+  const benchmarkPath = curvePath(benchmark, min, max, w, h, pad, startMs, endMs);
+  const lastPortfolio = portfolio[portfolio.length - 1]?.return_pct ?? null;
+  const lastBenchmark = benchmark[benchmark.length - 1]?.return_pct ?? run.spy_return_pct;
+
+  return (
+    <div className="glass overflow-hidden">
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.05] px-4 py-3">
+        <div>
+          <p className="text-sm font-semibold text-gray-100">{run.label}</p>
+          <p className="text-[11px] text-gray-500">{run.start_date} - {run.end_date}</p>
+        </div>
+        <div className="flex gap-4 text-xs">
+          <span className="text-blue-300">Portfolio {fmtSignedPct(lastPortfolio)}</span>
+          <span className="text-gray-400">S&P 500 {fmtSignedPct(lastBenchmark)}</span>
+        </div>
+      </div>
+      <svg viewBox={`0 0 ${w} ${h}`} className="h-64 w-full" role="img" aria-label="Portfolio return compared with S&P 500">
+        <line x1={pad} y1={h - pad} x2={w - pad} y2={h - pad} stroke="rgba(255,255,255,0.12)" />
+        <line x1={pad} y1={pad} x2={pad} y2={h - pad} stroke="rgba(255,255,255,0.12)" />
+        {benchmarkPath && (
+          <path d={benchmarkPath} fill="none" stroke="rgba(156,163,175,0.9)" strokeWidth="2" strokeDasharray="5 5" />
+        )}
+        <path d={portfolioPath} fill="none" stroke="rgb(96,165,250)" strokeWidth="3" />
+        <text x={pad} y={pad - 8} className="fill-gray-500 text-[10px]">{fmtSignedPct(max)}</text>
+        <text x={pad} y={h - 8} className="fill-gray-500 text-[10px]">{fmtSignedPct(min)}</text>
+      </svg>
+    </div>
+  );
+}
+
 export function BacktestPanel() {
   const { data: report, isLoading } = useBacktestReport();
   const queryClient = useQueryClient();
   const toast = useToast();
+  const [selectedStrategy, setSelectedStrategy] = useState('');
+  const [selectedLookback, setSelectedLookback] = useState('');
 
   const bestTimeAvgR =
     report?.time_exit_sweep && report.time_exit_sweep.length > 0
       ? Math.max(...report.time_exit_sweep.map((r) => netOrGross(r) ?? -Infinity))
       : null;
   const sim = report?.portfolio_sim ?? null;
+  const monitor = report?.portfolio_monitor ?? null;
+  const activeStrategy =
+    selectedStrategy || monitor?.production_strategy || monitor?.strategies[0]?.strategy || '';
+  const activeLookback =
+    selectedLookback || (monitor?.lookbacks.some((l) => l.lookback === '3y') ? '3y' : monitor?.lookbacks[0]?.lookback) || '';
+  const monitorRun = useMemo(
+    () =>
+      monitor?.runs.find((row) => row.strategy === activeStrategy && row.lookback === activeLookback) ??
+      monitor?.runs.find((row) => row.strategy === activeStrategy) ??
+      monitor?.runs[0] ??
+      null,
+    [monitor, activeStrategy, activeLookback],
+  );
 
   const run = useMutation({
     mutationFn: () => triggerJob('backtest'),
@@ -182,6 +285,58 @@ export function BacktestPanel() {
               )}
             </p>
 
+            {monitor && monitorRun && (
+              <div className="space-y-3">
+                <div className="flex flex-wrap items-end justify-between gap-3">
+                  <div>
+                    <p className="section-index">Portfolio monitor</p>
+                    <p className="mt-1 text-xs text-gray-500">
+                      Cached portfolio simulation for supported strategies, compared with S&P 500.
+                    </p>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    <label className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
+                      Strategy
+                      <select
+                        value={activeStrategy}
+                        onChange={(e) => setSelectedStrategy(e.target.value)}
+                        className="rounded border border-white/10 bg-slate-950 px-3 py-2 text-xs normal-case tracking-normal text-gray-200"
+                      >
+                        {monitor.strategies.map((s) => (
+                          <option key={s.strategy} value={s.strategy}>
+                            {s.is_production ? 'Production: ' : ''}{s.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <label className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
+                      Lookback
+                      <select
+                        value={activeLookback}
+                        onChange={(e) => setSelectedLookback(e.target.value)}
+                        className="rounded border border-white/10 bg-slate-950 px-3 py-2 text-xs normal-case tracking-normal text-gray-200"
+                      >
+                        {monitor.lookbacks.map((l) => (
+                          <option key={l.lookback} value={l.lookback}>{l.label}</option>
+                        ))}
+                      </select>
+                    </label>
+                  </div>
+                </div>
+
+                <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
+                  <Stat label="CAGR" value={fmtSignedPct(monitorRun.cagr_pct)} valueClass={rColor(monitorRun.cagr_pct)} />
+                  <Stat label="Sharpe" value={monitorRun.sharpe == null ? '—' : monitorRun.sharpe.toFixed(2)} />
+                  <Stat label="Max Drawdown" value={fmtDrawdown(monitorRun.max_drawdown_pct)} valueClass="text-amber-400" />
+                  <Stat label="Total Return" value={fmtSignedPct(monitorRun.total_return_pct)} valueClass={rColor(monitorRun.total_return_pct)} />
+                  <Stat label="Trades" value={String(monitorRun.trades)} sub={`${fmtPct(monitorRun.win_rate)} win rate`} />
+                </div>
+
+                <EquityCurveChart run={monitorRun} />
+                {monitor.note && <p className="text-[11px] text-gray-600">{monitor.note}</p>}
+              </div>
+            )}
+
             {report.recommendation && report.recommendation.items.length > 0 && (
               <div className="glass border border-blue-400/20 p-4">
                 <p className="section-index">What this backtest recommends</p>
@@ -487,8 +642,8 @@ export function BacktestPanel() {
                       <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
                         <th className="px-4 py-2.5">Metric</th>
                         {sim.policies.map((p) => (
-                          <th key={p.policy} className="px-4 py-2.5 text-right">
-                            {POLICY_LABELS[p.policy] ?? p.policy}
+                          <th key={p.policy ?? 'policy'} className="px-4 py-2.5 text-right">
+                            {POLICY_LABELS[p.policy ?? ''] ?? p.policy ?? 'Policy'}
                           </th>
                         ))}
                       </tr>
@@ -523,7 +678,7 @@ export function BacktestPanel() {
                         <tr key={label} className="border-b border-white/[0.04]">
                           <td className="px-4 py-2.5 font-medium text-gray-200">{label}</td>
                           {sim.policies.map((p) => (
-                            <td key={p.policy} className={`num px-4 py-2.5 text-right ${color(p)}`}>
+                            <td key={p.policy ?? label} className={`num px-4 py-2.5 text-right ${color(p)}`}>
                               {fmt(p)}
                             </td>
                           ))}