Slim Track Record page to validation + how-to-trade
Strategy research now runs locally against DB snapshots (see README), so the deployed Track Record page no longer needs the strategy-tuning output. Keep only what answers "did my trades work / is the strategy working / what do I trade": - Reshape BacktestPanel into an "Is the strategy working?" block: portfolio monitor (unchanged), a deliberate metric set (CAGR, Sharpe, Max DD, Total Return vs SPY, per-year returns), plus the folded-in live-vs-backtest verdict and the backtest recommendation. - Fold the standalone portfolio-sim table's unique rows (per-year returns, avg hold, best/worst, avg P&L) into the monitor; drop the duplicate table. - Slim TrackRecordPanel to My Trades -> Is it working? -> maintenance disclosure (Evaluate/Reset demoted). - Cut the local-research tables: percentile sweep, gate ablation, time-exit sweep, strategy variants, signal-edge rank-IC, research candidates, by-action/by-confidence breakdowns, and the bucket comparison. Frontend-only; the weekly server backtest still computes the cut tables (they feed the local report). tsc -b && vite build pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -1,126 +1,12 @@
|
||||
import { useState } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useActivation } from '../../hooks/useActivation';
|
||||
import { activationSummary } from '../../lib/qualification';
|
||||
import { usePerformance } from '../../hooks/usePerformance';
|
||||
import { useBacktestReport } from '../../hooks/useMarketRegime';
|
||||
import { triggerJob, resetTrackRecord } from '../../api/admin';
|
||||
import { Button } from '../ui/Button';
|
||||
import { Callout } from '../ui/Callout';
|
||||
import { Disclosure } from '../ui/Disclosure';
|
||||
import { Section } from '../ui/Section';
|
||||
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';
|
||||
|
||||
// Need at least this many matured setups before a live-vs-backtest verdict means
|
||||
// anything; below it the live sample is too noisy to compare.
|
||||
const MIN_MATURED = 20;
|
||||
// Live expectancy this far (in R) below the backtest counts as drift, not noise.
|
||||
const DRIFT_TOLERANCE_R = 0.2;
|
||||
|
||||
type TrackingStatus = 'building' | 'tracking' | 'drift' | 'no-backtest';
|
||||
|
||||
function fmtR(value: number | null): string {
|
||||
if (value === null) return '—';
|
||||
return `${value > 0 ? '+' : ''}${value.toFixed(2)}R`;
|
||||
}
|
||||
|
||||
function fmtPct(value: number | null): string {
|
||||
return value === null ? '—' : `${value.toFixed(1)}%`;
|
||||
}
|
||||
|
||||
function rColor(value: number | null): string {
|
||||
if (value === null) return 'text-gray-400';
|
||||
if (value > 0) return 'text-emerald-400';
|
||||
if (value < 0) return 'text-red-400';
|
||||
return 'text-gray-300';
|
||||
}
|
||||
|
||||
function VerdictChip({ status }: { status: TrackingStatus }) {
|
||||
const styles: Record<TrackingStatus, { cls: string; label: string }> = {
|
||||
tracking: { cls: 'border-emerald-500/30 bg-emerald-500/15 text-emerald-300', label: '✓ tracking' },
|
||||
drift: { cls: 'border-amber-500/30 bg-amber-500/15 text-amber-300', label: '⚠ drift' },
|
||||
building: { cls: 'border-white/10 bg-white/[0.05] text-gray-400', label: 'building' },
|
||||
'no-backtest': { cls: 'border-white/10 bg-white/[0.05] text-gray-400', label: 'no backtest' },
|
||||
};
|
||||
const s = styles[status];
|
||||
return <span className={`shrink-0 rounded-full border px-2.5 py-1 text-xs font-medium ${s.cls}`}>{s.label}</span>;
|
||||
}
|
||||
|
||||
function StatCard({ label, value, valueClass = 'text-gray-100', sub }: {
|
||||
label: string;
|
||||
value: string;
|
||||
valueClass?: string;
|
||||
sub?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="glass p-5">
|
||||
<p className="section-index">{label}</p>
|
||||
<p className={`num mt-2 text-2xl font-semibold ${valueClass}`}>{value}</p>
|
||||
{sub && <p className="mt-1 text-xs text-gray-500">{sub}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function actionLabel(key: string): string {
|
||||
return RECOMMENDATION_ACTION_LABELS[key as keyof typeof RECOMMENDATION_ACTION_LABELS] ?? key;
|
||||
}
|
||||
|
||||
function BreakdownTable({ rows, labelHeader, mapLabel }: {
|
||||
rows: Record<string, OutcomeBucketStats>;
|
||||
labelHeader: string;
|
||||
mapLabel?: (key: string) => string;
|
||||
}) {
|
||||
const entries = Object.entries(rows);
|
||||
if (entries.length === 0) {
|
||||
return <Callout variant="empty">No matured setups in this breakdown yet.</Callout>;
|
||||
}
|
||||
return (
|
||||
<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-3">{labelHeader}</th>
|
||||
<th className="px-4 py-3 text-right">Setups</th>
|
||||
<th className="px-4 py-3 text-right">Wins</th>
|
||||
<th className="px-4 py-3 text-right">Losses</th>
|
||||
<th className="px-4 py-3 text-right">Expired</th>
|
||||
<th className="px-4 py-3 text-right">Hit Rate</th>
|
||||
<th className="px-4 py-3 text-right">Avg R</th>
|
||||
<th className="px-4 py-3 text-right">Total R</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries.map(([key, stats]) => (
|
||||
<tr key={key} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
|
||||
<td className="px-4 py-3 font-medium text-gray-200">{mapLabel ? mapLabel(key) : key}</td>
|
||||
<td className="num px-4 py-3 text-right text-gray-300">{stats.total}</td>
|
||||
<td className="num px-4 py-3 text-right text-emerald-400">{stats.wins}</td>
|
||||
<td className="num px-4 py-3 text-right text-red-400">{stats.losses}</td>
|
||||
<td className="num px-4 py-3 text-right text-gray-400">{stats.expired}</td>
|
||||
<td className="num px-4 py-3 text-right text-gray-200">{fmtPct(stats.hit_rate)}</td>
|
||||
<td className={`num px-4 py-3 text-right ${rColor(stats.avg_r)}`}>{fmtR(stats.avg_r)}</td>
|
||||
<td className={`num px-4 py-3 text-right ${rColor(stats.total_r)}`}>{fmtR(stats.total_r)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TrackRecordPanel() {
|
||||
const [qualifiedOnly, setQualifiedOnly] = useState(true);
|
||||
const activation = useActivation();
|
||||
|
||||
const { data, isLoading, isError, error } = usePerformance(
|
||||
qualifiedOnly ? { qualified_only: true } : undefined,
|
||||
);
|
||||
const backtest = useBacktestReport();
|
||||
const queryClient = useQueryClient();
|
||||
const toast = useToast();
|
||||
|
||||
@@ -158,148 +44,34 @@ export function TrackRecordPanel() {
|
||||
}
|
||||
};
|
||||
|
||||
// Live (matured cohort) vs the backtest, like-for-like with the qualified toggle.
|
||||
const live = data?.overall ?? null;
|
||||
const btBucket = qualifiedOnly ? backtest.data?.overall_qualified : backtest.data?.overall_all;
|
||||
const liveAvgR = live?.avg_r ?? null;
|
||||
const liveN = live?.total ?? 0;
|
||||
const btAvgR = btBucket?.avg_r ?? null;
|
||||
|
||||
let status: TrackingStatus = 'building';
|
||||
if (liveAvgR != null && liveN >= MIN_MATURED) {
|
||||
status = btAvgR == null ? 'no-backtest' : liveAvgR >= btAvgR - DRIFT_TOLERANCE_R ? 'tracking' : 'drift';
|
||||
}
|
||||
|
||||
const verdictNote: Record<TrackingStatus, string> = {
|
||||
building: `Not enough matured setups yet (need ~${MIN_MATURED}). Only setups whose full ~30-day window has elapsed are counted — the rest are still maturing. Until then, the backtest is your edge estimate; this becomes a live check as setups age past ~6 weeks.`,
|
||||
'no-backtest': 'Run the backtest below to get a baseline to compare the live record against.',
|
||||
tracking: 'Live setups are resolving in line with the backtest — the running system is faithfully implementing it (no look-ahead, config or data drift).',
|
||||
drift: 'Live expectancy is running materially below the backtest. Could be small-sample noise, a regime shift, or a config/data/look-ahead gap between live and the backtest — worth a look.',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Your real, realized results come first; the live-vs-backtest check follows. */}
|
||||
{/* Your real, realized results come first; the strategy validation follows. */}
|
||||
<MyTradesPanel />
|
||||
<div className="border-t border-white/[0.06]" />
|
||||
<BacktestPanel />
|
||||
|
||||
<Section title="Live vs Backtest" hint="is the live system tracking the backtest?">
|
||||
{isError ? (
|
||||
<Callout variant="error">
|
||||
{error instanceof Error ? error.message : 'Failed to load performance stats'}
|
||||
</Callout>
|
||||
) : (
|
||||
<div className="glass-sm space-y-2.5 p-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
|
||||
<div className="flex flex-wrap items-baseline gap-x-5 gap-y-1">
|
||||
<span className="text-sm text-gray-400">
|
||||
Live <span className={`num font-semibold ${rColor(liveAvgR)}`}>{fmtR(liveAvgR)}</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-400">
|
||||
Backtest <span className={`num font-semibold ${rColor(btAvgR)}`}>{fmtR(btAvgR)}</span>
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{liveN} matured{data ? ` · ${data.maturing} maturing` : ''} · {qualifiedOnly ? 'qualified' : 'all setups'}
|
||||
</span>
|
||||
</div>
|
||||
<VerdictChip status={status} />
|
||||
</div>
|
||||
<p className="text-[11px] leading-relaxed text-gray-500">{verdictNote[status]}</p>
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
<Disclosure summary="Outcome details (matured cohort)">
|
||||
<div className="space-y-4 pt-1">
|
||||
<label className="flex w-fit cursor-pointer items-center gap-2.5 text-sm text-gray-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={qualifiedOnly}
|
||||
onChange={(e) => setQualifiedOnly(e.target.checked)}
|
||||
className="h-4 w-4 cursor-pointer accent-blue-400"
|
||||
/>
|
||||
<span>
|
||||
Qualified signals only
|
||||
{activation.data && (
|
||||
<span className="num ml-2 text-xs text-gray-500">{activationSummary(activation.data)}</span>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{isLoading && (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<SkeletonCard /><SkeletonCard /><SkeletonCard /><SkeletonCard />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data && data.overall.total === 0 && (
|
||||
<Callout variant="empty">
|
||||
{data.maturing > 0
|
||||
? `No setups have completed their ~30-day window yet — ${data.maturing} still maturing. ` +
|
||||
'Counting them earlier would skew toward quick stop-outs.'
|
||||
: 'No matured setups yet. Outcomes appear once setups complete their evaluation window — the evaluator runs nightly, or click Evaluate Now.'}
|
||||
</Callout>
|
||||
)}
|
||||
|
||||
{data && data.overall.total > 0 && (
|
||||
<>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
label="Hit Rate"
|
||||
value={fmtPct(data.overall.hit_rate)}
|
||||
sub={`${data.overall.wins} wins / ${data.overall.losses} losses`}
|
||||
/>
|
||||
<StatCard
|
||||
label="Expectancy"
|
||||
value={fmtR(data.overall.avg_r)}
|
||||
valueClass={rColor(data.overall.avg_r)}
|
||||
sub="average R per trade"
|
||||
/>
|
||||
<StatCard
|
||||
label="Total R"
|
||||
value={fmtR(data.overall.total_r)}
|
||||
valueClass={rColor(data.overall.total_r)}
|
||||
sub="cumulative risk-adjusted result"
|
||||
/>
|
||||
<StatCard
|
||||
label="Matured"
|
||||
value={String(data.overall.total)}
|
||||
sub={`${data.maturing} maturing · ${data.overall.expired} expired`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Section title="By Recommended Action">
|
||||
<BreakdownTable rows={data.by_action} labelHeader="Action" mapLabel={actionLabel} />
|
||||
</Section>
|
||||
|
||||
<Section title="By Confidence" hint="at detection time · all setups">
|
||||
<BreakdownTable rows={data.by_confidence} labelHeader="Confidence" />
|
||||
</Section>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-t border-white/[0.06] pt-3">
|
||||
<p className="max-w-2xl text-xs text-gray-500">
|
||||
Each setup is replayed against the daily bars after detection: target before stop = win,
|
||||
stop first = loss (both in one bar counts conservatively as a loss), neither within 30
|
||||
trading days = expired at 0R. Only setups whose full window has elapsed are counted; younger
|
||||
ones are still <span className="text-gray-300">maturing</span> (near stops resolve fast, far
|
||||
targets need time, so early numbers would skew negative). The evaluator runs nightly.
|
||||
</p>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<Button onClick={() => evaluateMutation.mutate()} loading={evaluateMutation.isPending}>
|
||||
{evaluateMutation.isPending ? 'Evaluating…' : 'Evaluate Now'}
|
||||
</Button>
|
||||
<Button variant="danger" onClick={onReset} loading={resetMutation.isPending}>
|
||||
{resetMutation.isPending ? 'Resetting…' : 'Reset'}
|
||||
</Button>
|
||||
</div>
|
||||
<Disclosure summary="Track-record maintenance">
|
||||
<div className="space-y-3 pt-1">
|
||||
<p className="max-w-2xl text-xs text-gray-500">
|
||||
The live check replays every setup against the daily bars after detection: target before stop =
|
||||
win, stop first = loss (both in one bar counts conservatively as a loss), neither within 30
|
||||
trading days = expired at 0R. Only setups whose full window has elapsed count; younger ones are
|
||||
still maturing (near stops resolve fast, far targets need time, so early numbers skew negative).
|
||||
The evaluator scores <span className="text-gray-300">all</span> setups — qualified or not, so
|
||||
unqualified ones stay a control group — and runs nightly. Reset permanently clears all setups and
|
||||
their outcomes; live setups regenerate on the next scan.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button onClick={() => evaluateMutation.mutate()} loading={evaluateMutation.isPending}>
|
||||
{evaluateMutation.isPending ? 'Evaluating…' : 'Evaluate Now'}
|
||||
</Button>
|
||||
<Button variant="danger" onClick={onReset} loading={resetMutation.isPending}>
|
||||
{resetMutation.isPending ? 'Resetting…' : 'Reset'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure>
|
||||
|
||||
<div className="border-t border-white/[0.06] pt-2" />
|
||||
<BacktestPanel />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user