complete paper trading: auto-close on stop/target + My Trades realized record

resolve_open_trades walks the daily bars after each open trade and closes it at
the target (target hit) or stop (stop/ambiguous), leaving undecided trades open.
Runs nightly inside the outcome evaluator (so it's coordinated with fresh OHLCV)
and on its manual trigger. New "My Trades" section at the top of Signals → Track
Record shows realized hit-rate, expectancy (avg R), total R, total P&L, and a
closed-trades table — your actual results, separate from the theoretical signal
record below it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/signals/MyTradesPanel.tsx

@@ -0,0 +1,110 @@
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { usePaperTrades } from '../../hooks/usePaperTrades';
+import { tradePnl } from '../../lib/paperTrade';
+import { formatPrice } from '../../lib/format';
+import { Section } from '../ui/Section';
+import { Callout } from '../ui/Callout';
+
+function money(v: number): string {
+  return `${v >= 0 ? '+' : '−'}$${Math.abs(v).toFixed(2)}`;
+}
+function fmtR(v: number | null): string {
+  return v === null ? '—' : `${v > 0 ? '+' : ''}${v.toFixed(2)}R`;
+}
+function color(v: number | null): string {
+  if (v === null) return 'text-gray-400';
+  if (v > 0) return 'text-emerald-400';
+  if (v < 0) return 'text-red-400';
+  return 'text-gray-300';
+}
+
+function Stat({ label, value, valueClass = 'text-gray-100', sub }: {
+  label: string; value: string; valueClass?: string; sub?: string;
+}) {
+  return (
+    <div className="glass p-4">
+      <p className="section-index">{label}</p>
+      <p className={`num mt-1.5 text-2xl font-semibold ${valueClass}`}>{value}</p>
+      {sub && <p className="mt-1 text-xs text-gray-500">{sub}</p>}
+    </div>
+  );
+}
+
+export function MyTradesPanel() {
+  const { data: closed, isLoading } = usePaperTrades('closed');
+
+  const stats = useMemo(() => {
+    const rows = (closed ?? []).map((t) => ({ t, p: tradePnl(t) }));
+    const rs = rows.map((r) => r.p?.r).filter((r): r is number => r != null);
+    const pnls = rows.map((r) => r.p?.pnl ?? 0);
+    const wins = pnls.filter((p) => p > 0).length;
+    const losses = pnls.filter((p) => p < 0).length;
+    const decided = wins + losses;
+    return {
+      total: rows.length,
+      wins,
+      losses,
+      hitRate: decided ? (wins / decided) * 100 : null,
+      avgR: rs.length ? rs.reduce((a, b) => a + b, 0) / rs.length : null,
+      totalR: rs.length ? rs.reduce((a, b) => a + b, 0) : null,
+      totalPnl: pnls.reduce((a, b) => a + b, 0),
+      rows,
+    };
+  }, [closed]);
+
+  if (isLoading) return null;
+
+  return (
+    <Section title="My Trades" hint="your realized paper-trading results">
+      {stats.total === 0 ? (
+        <Callout variant="empty">
+          No closed trades yet. Take setups as paper trades and they’ll resolve here when price hits
+          the stop or target (or when you sell).
+        </Callout>
+      ) : (
+        <div className="space-y-4">
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            <Stat label="Hit Rate" value={stats.hitRate != null ? `${stats.hitRate.toFixed(1)}%` : '—'} sub={`${stats.wins}W / ${stats.losses}L`} />
+            <Stat label="Expectancy" value={fmtR(stats.avgR)} valueClass={color(stats.avgR)} sub="avg R per closed trade" />
+            <Stat label="Total R" value={fmtR(stats.totalR)} valueClass={color(stats.totalR)} sub={`${stats.total} closed`} />
+            <Stat label="Total P&L" value={money(stats.totalPnl)} valueClass={color(stats.totalPnl)} sub="realized, all closed" />
+          </div>
+
+          <div className="glass overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <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">Ticker</th>
+                  <th className="px-4 py-2.5">Dir</th>
+                  <th className="px-4 py-2.5 text-right">Entry</th>
+                  <th className="px-4 py-2.5 text-right">Exit</th>
+                  <th className="px-4 py-2.5 text-right">P&L</th>
+                  <th className="px-4 py-2.5 text-right">R</th>
+                  <th className="px-4 py-2.5 text-right">Closed</th>
+                </tr>
+              </thead>
+              <tbody>
+                {stats.rows.map(({ t, p }) => (
+                  <tr key={t.id} className="border-b border-white/[0.04] hover:bg-white/[0.03]">
+                    <td className="px-4 py-2.5">
+                      <Link to={`/ticker/${t.symbol}`} className="font-medium text-blue-300 hover:text-blue-200">{t.symbol}</Link>
+                    </td>
+                    <td className="px-4 py-2.5">
+                      <span className={`num text-[10px] font-semibold uppercase ${t.direction === 'long' ? 'text-emerald-400' : 'text-red-400'}`}>{t.direction}</span>
+                    </td>
+                    <td className="num px-4 py-2.5 text-right text-gray-300">{formatPrice(t.entry_price)}</td>
+                    <td className="num px-4 py-2.5 text-right text-gray-300">{t.close_price != null ? formatPrice(t.close_price) : '—'}</td>
+                    <td className={`num px-4 py-2.5 text-right font-semibold ${p ? color(p.pnl) : 'text-gray-500'}`}>{p ? money(p.pnl) : '—'}</td>
+                    <td className={`num px-4 py-2.5 text-right ${p?.r != null ? color(p.r) : 'text-gray-500'}`}>{p?.r != null ? fmtR(p.r) : '—'}</td>
+                    <td className="num px-4 py-2.5 text-right text-gray-500">{t.closed_at ? new Date(t.closed_at).toLocaleDateString() : '—'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+}

frontend/src/components/signals/TrackRecordPanel.tsx

@@ -12,6 +12,7 @@ import { SkeletonCard } from '../ui/Skeleton';
 import { useToast } from '../ui/Toast';
 import { RECOMMENDATION_ACTION_LABELS } from '../../lib/recommendation';
 import { BacktestPanel } from './BacktestPanel';
+import { MyTradesPanel } from './MyTradesPanel';
 import type { OutcomeBucketStats } from '../../lib/types';
 
 function fmtR(value: number | null): string {
@@ -138,6 +139,10 @@ export function TrackRecordPanel() {
 
   return (
     <div className="space-y-6">
+      {/* Your real, realized results come first; the signal/theoretical record follows. */}
+      <MyTradesPanel />
+      <div className="border-t border-white/[0.06]" />
+
       <div className="glass-sm flex flex-wrap items-center justify-between gap-3 px-4 py-3">
         <label className="flex cursor-pointer items-center gap-2.5 text-sm text-gray-300">
           <input