Promote production portfolio strategy

frontend/src/components/admin/ExitPolicySettings.tsx

@@ -6,14 +6,16 @@ import { SkeletonCard } from '../ui/Skeleton';
 export function ExitPolicySettings() {
   const { data, isLoading } = useExitPolicy();
   const update = useUpdateExitPolicy();
-  const [mode, setMode] = useState<ExitPolicy['mode']>('time');
+  const [mode, setMode] = useState<ExitPolicy['mode']>('atr_trailing');
   const [pct, setPct] = useState(12);
+  const [atrMultiplier, setAtrMultiplier] = useState(3);
   const [holdDays, setHoldDays] = useState(30);
 
   useEffect(() => {
     if (data) {
       setMode(data.mode);
       setPct(data.trailing_pct);
+      setAtrMultiplier(data.atr_multiplier ?? 3);
       setHoldDays(data.hold_days ?? 30);
     }
   }, [data]);
@@ -26,14 +28,15 @@ export function ExitPolicySettings() {
         <h3 className="text-sm font-semibold text-gray-200">Paper-Trade Exit</h3>
         <p className="mt-1 text-xs text-gray-500">
           How open paper trades auto-close (in the nightly/intraday outcome job).{' '}
-          <span className="text-gray-300">Hold</span> keeps the initial stop and exits at the Nth trading
-          day's close — the backtest-validated exit (classic momentum: hold ~a month, re-rank);{' '}
-          <span className="text-gray-300">Trailing</span> rides a trailing stop;{' '}
+          <span className="text-gray-300">ATR trail</span> is the promoted production exit: initial stop,
+          ATR trailing stop, and a max N-trading-day hold;{' '}
+          <span className="text-gray-300">Hold</span> keeps only the initial stop until the Nth trading
+          day's close; <span className="text-gray-300">Percent trail</span> is the older trailing mode;{' '}
           <span className="text-gray-300">Target / stop</span> closes at the setup's target or stop.
           The setup's initial stop is always the floor.
         </p>
       </div>
-      <div className="grid gap-4 md:grid-cols-3">
+      <div className="grid gap-4 md:grid-cols-4">
         <label className="block space-y-1">
           <span className="text-xs text-gray-400">Exit mode</span>
           <select
@@ -41,8 +44,9 @@ export function ExitPolicySettings() {
             onChange={(e) => setMode(e.target.value as ExitPolicy['mode'])}
             className="w-full input-glass px-3 py-2 text-sm"
           >
+            <option value="atr_trailing">ATR trail + max hold</option>
             <option value="time">Hold N days + stop</option>
-            <option value="trailing">Trailing stop</option>
+            <option value="trailing">Percent trailing stop</option>
             <option value="target">Target / stop</option>
           </select>
         </label>
@@ -55,10 +59,24 @@ export function ExitPolicySettings() {
             step={1}
             value={holdDays}
             onChange={(e) => setHoldDays(Number(e.target.value))}
-            disabled={mode !== 'time'}
+            disabled={mode !== 'time' && mode !== 'atr_trailing'}
             className="w-full input-glass px-3 py-2 text-sm disabled:opacity-50"
           />
-          <span className="text-[11px] text-gray-600">Backtest optimum: 30 (its evaluation horizon).</span>
+          <span className="text-[11px] text-gray-600">Production max hold: 30 trading days.</span>
+        </label>
+        <label className="block space-y-1">
+          <span className="text-xs text-gray-400">ATR multiplier</span>
+          <input
+            type="number"
+            min={0.5}
+            max={10}
+            step={0.25}
+            value={atrMultiplier}
+            onChange={(e) => setAtrMultiplier(Number(e.target.value))}
+            disabled={mode !== 'atr_trailing'}
+            className="w-full input-glass px-3 py-2 text-sm disabled:opacity-50"
+          />
+          <span className="text-[11px] text-gray-600">Promoted strategy: 3x ATR.</span>
         </label>
         <label className="block space-y-1">
           <span className="text-xs text-gray-400">Trailing width (%)</span>
@@ -72,13 +90,18 @@ export function ExitPolicySettings() {
             disabled={mode !== 'trailing'}
             className="w-full input-glass px-3 py-2 text-sm disabled:opacity-50"
           />
-          <span className="text-[11px] text-gray-600">Give-back from the peak. ≥15% ≈ the hold exit.</span>
+          <span className="text-[11px] text-gray-600">Legacy percent trail from the peak.</span>
         </label>
       </div>
       <button
         className="btn-primary px-4 py-2 text-sm disabled:opacity-50"
         disabled={update.isPending}
-        onClick={() => update.mutate({ mode, trailing_pct: pct, hold_days: holdDays })}
+        onClick={() => update.mutate({
+          mode,
+          trailing_pct: pct,
+          atr_multiplier: atrMultiplier,
+          hold_days: holdDays,
+        })}
       >
         {update.isPending ? 'Saving…' : 'Save Exit Policy'}
       </button>

frontend/src/components/dashboard/OpenTradesPanel.tsx

@@ -24,9 +24,13 @@ export function OpenTradesPanel() {
   const close = useClosePaperTrade();
 
   const exitLabel = policy
-    ? policy.mode === 'trailing'
-      ? `auto-exit: trailing ${Math.round(policy.trailing_pct)}%`
-      : 'auto-exit: target/stop'
+    ? policy.mode === 'atr_trailing'
+      ? `auto-exit: ${(policy.atr_multiplier ?? 3).toFixed(1)}x ATR trail / ${policy.hold_days}d max`
+      : policy.mode === 'trailing'
+        ? `auto-exit: trailing ${Math.round(policy.trailing_pct)}%`
+        : policy.mode === 'time'
+          ? `auto-exit: ${policy.hold_days}d hold`
+          : 'auto-exit: target/stop'
     : null;
 
   const totals = useMemo(() => {

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>
                           ))}