303ecc2a3a
- instruments.ts: 90 IB-options-tradable instruments in 12 categories
(US Indices, Europe, Asia, EM, Sectors, Forex, Bonds, Metals, Energy,
Agriculture, Crypto, Volatility) — EUR/CHF, Cotton, etc. all included
- PatternExplorer: replace text input in Instrument Lens with categorised
grid picker (category pill filters + search + custom ticker fallback)
- PatternLab: add Instrument Scan tab alongside Event Presets
- Pick any instrument from the shared categorised picker
- Set period (start/end date) + horizon per pattern
- AI scans the full period: identifies 4-6 key pattern instances each with
their own entry date, expected move, strategy
- 'Evaluate outcomes' fetches actual price at T+horizon per pattern
- 'Save pattern' promotes any instance to the Pattern Library
- backend/services/pattern_lab.py: run_instrument_scan() + evaluate_instrument_outcomes()
(per-pattern analysis_date vs shared date in event mode)
- backend/routers/pattern_lab.py: POST /instrument-scan + POST /evaluate-instrument/{id}
- useApi.ts: useInstrumentScan + useEvaluateInstrumentScan hooks
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
869 lines
58 KiB
TypeScript
869 lines
58 KiB
TypeScript
import { useState, useMemo } from 'react'
|
|
import {
|
|
useRunPatternLab, useEvaluatePatternLab, useSaveLabPattern,
|
|
usePatternLabRuns, useDeleteLabRun,
|
|
useInstrumentScan, useEvaluateInstrumentScan,
|
|
} from '../hooks/useApi'
|
|
import {
|
|
FlaskConical, Play, CheckCircle2, XCircle,
|
|
Trash2, Save, RefreshCw, Search, CalendarDays,
|
|
TrendingUp, TrendingDown, Zap, BarChart2, ScanLine,
|
|
} from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
import { INSTRUMENTS, INSTRUMENT_CATEGORIES } from '../constants/instruments'
|
|
|
|
// ── Preset catalogue (2015-2025, 34 events) ────────────────────────────────────
|
|
|
|
interface Preset {
|
|
id: string; year: number; label: string; date: string
|
|
category: string; horizon_days: number; assets: string[]; hint: string
|
|
}
|
|
|
|
const PRESETS: Preset[] = [
|
|
{ id: 'china-deval-2015', year: 2015, label: 'China CNY Devaluation', date: '2015-08-11', category: 'fx_macro', horizon_days: 60, assets: ['SPY','FXI','GLD','UUP','EEM'], hint: 'China surprises markets with a yuan devaluation shock. Global risk-off, EM currencies crash, commodities sell. Shanghai composite already down 30% from peak.' },
|
|
{ id: 'oil-crash-2016', year: 2016, label: 'Oil Crash to $26', date: '2016-01-20', category: 'commodities', horizon_days: 90, assets: ['USO','XLE','HYG','SPY','GLD'], hint: 'WTI crude at 12-year lows near $26. Energy sector destruction, high-yield credit stress from E&P distress. Fed on hold as global deflation spreads.' },
|
|
{ id: 'brexit-2016', year: 2016, label: 'Brexit Vote Shock', date: '2016-06-24', category: 'geopolitical', horizon_days: 60, assets: ['GBPUSD=X','EWU','SPY','GLD','TLT'], hint: 'UK votes Leave 52-48. GBP flash crash -10% overnight. European bank stocks collapse. Flight to safety — gilts, gold, USD. BoE emergency measures expected.' },
|
|
{ id: 'trump-elect-2016', year: 2016, label: 'Trump Election 2016', date: '2016-11-09', category: 'macro', horizon_days: 90, assets: ['SPY','TLT','GLD','UUP','XLF'], hint: 'Trump wins US presidential election. Reflation trade ignites: banks surge, bonds sell, USD rallies sharply, gold dumps, infrastructure/defense stocks soar.' },
|
|
{ id: 'volmageddon-2018', year: 2018, label: 'Volmageddon — XIV Collapse', date: '2018-02-05', category: 'volatility', horizon_days: 30, assets: ['SPY','TLT','GLD','QQQ'], hint: 'VIX spikes 115% intraday. Inverse-vol ETPs (XIV, SVXY) collapse -90%. Market liquidity evaporates. Fed hiking into froth. Flash crash with rapid recovery.' },
|
|
{ id: 'trade-war-2018', year: 2018, label: 'US-China Trade War Start', date: '2018-03-22', category: 'geopolitical', horizon_days: 90, assets: ['SPY','FXI','QQQ','UUP','EEM'], hint: 'Trump announces $60B tariffs on China under Section 301. Trade war declared. Tech and industrials sell. China threatens retaliation on US agriculture and autos.' },
|
|
{ id: 'turkey-em-2018', year: 2018, label: 'Turkey / EM Currency Crisis', date: '2018-08-10', category: 'fx_macro', horizon_days: 60, assets: ['TUR','EEM','UUP','GLD','EWZ'], hint: 'TRY crashes 20% in a day. Turkey in full currency crisis — Erdogan conflict with Fed. EM contagion to South Africa, Argentina, Brazil. USD wrecking ball.' },
|
|
{ id: 'q4-selloff-2018', year: 2018, label: 'Q4 2018 Fed Overtightening', date: '2018-10-10', category: 'macro', horizon_days: 90, assets: ['SPY','QQQ','HYG','TLT','GLD'], hint: "Powell 'long way from neutral' comment. Growth scare, credit spread widening. SPX enters 20% drawdown into Christmas. Fed eventually pivots Jan 2019." },
|
|
{ id: 'fed-pivot-2019', year: 2019, label: 'Fed Dovish Pivot', date: '2019-01-04', category: 'macro', horizon_days: 90, assets: ['SPY','TLT','GLD','EEM','UUP'], hint: 'Powell signals patience — hiking cycle pause. Risk assets explode higher. USD weakens. EM and gold rally. Goldilocks scenario emerges after Q4 2018 crash.' },
|
|
{ id: 'yield-inversion-2019', year: 2019, label: 'Yield Curve Inversion', date: '2019-03-22', category: 'macro', horizon_days: 120, assets: ['TLT','XLF','SPY','GLD','IEF'], hint: '3M-10Y US Treasury yield curve inverts for first time since 2007. Recession indicator flashing. Banks sell. Gold and long bonds rally as growth fears build.' },
|
|
{ id: 'aramco-attack-2019', year: 2019, label: 'Saudi Aramco Facility Attack', date: '2019-09-16', category: 'geopolitical', horizon_days: 30, assets: ['USO','GLD','SPY','XLE','UUP'], hint: 'Drone attacks on Abqaiq and Khurais take out 5% of global oil supply. WTI gaps +15% at open. Geopolitical risk premium spikes. Then fades fast.' },
|
|
{ id: 'repo-stress-2019', year: 2019, label: 'Repo Market Liquidity Stress', date: '2019-09-17', category: 'credit', horizon_days: 30, assets: ['TLT','SPY','GLD','UUP'], hint: 'Overnight repo rates spike to 10%, overwhelming the Fed funds target. Fed emergency repo operations. Banking system dollar liquidity stress. Precursor to QE4.' },
|
|
{ id: 'covid-crash-2020', year: 2020, label: 'COVID Pandemic Crash', date: '2020-02-24', category: 'macro', horizon_days: 90, assets: ['SPY','QQQ','GLD','TLT','USO'], hint: 'COVID spreads globally. Italy in lockdown. Markets price pandemic. SPX enters fastest bear market in history — 35% in 33 days. VIX touches 85. Fed emergency cut.' },
|
|
{ id: 'oil-negative-2020', year: 2020, label: 'Oil Goes Negative (-$37)', date: '2020-04-20', category: 'commodities', horizon_days: 60, assets: ['USO','XLE','SPY','UUP','HYG'], hint: 'WTI May futures settle at -$37.63. Physical storage full. Zero demand from lockdowns. Energy sector existential risk. OPEC+ emergency cut already announced.' },
|
|
{ id: 'covid-recovery-2020', year: 2020, label: 'COVID Recovery / QE Infinity', date: '2020-04-09', category: 'macro', horizon_days: 90, assets: ['SPY','QQQ','GLD','TLT','EEM'], hint: 'Fed announces unlimited QE + corporate bond buying. $2.2T CARES Act. Markets stage massive recovery. Tech leads. Gold rallies to ATH. Mega-cap dominance begins.' },
|
|
{ id: 'us-election-2020', year: 2020, label: 'Biden Election / Vaccine Rally', date: '2020-11-04', category: 'macro', horizon_days: 90, assets: ['SPY','QQQ','XLE','GLD','IWM'], hint: 'Biden wins, split Congress. Pfizer vaccine +90% efficacy announced same week. Massive rotation: value vs growth, energy vs tech. Small caps surge. Gold drops.' },
|
|
{ id: 'gme-squeeze-2021', year: 2021, label: 'GME Short Squeeze / WSB', date: '2021-01-27', category: 'credit', horizon_days: 30, assets: ['SPY','QQQ','IWM','HYG','TLT'], hint: 'WallStreetBets coordinates GME squeeze to $480. Robinhood halts buying. Hedge fund forced deleveraging. Systemic risk fear. Silver squeeze attempt follows.' },
|
|
{ id: 'reflation-2021', year: 2021, label: 'Reflation Trade / Bond Crash', date: '2021-02-25', category: 'macro', horizon_days: 60, assets: ['TLT','QQQ','XLE','XLF','GLD'], hint: '10Y yields spike to 1.6%. Bond massacre. Tech rotation as rates hurt valuations. Value/cyclicals surge. Energy, banks, materials outperform. Inflation trade.' },
|
|
{ id: 'taper-2021', year: 2021, label: 'Fed Tapering Announcement', date: '2021-11-03', category: 'macro', horizon_days: 90, assets: ['TLT','GLD','EEM','UUP','SPY'], hint: 'Fed officially announces QE tapering. Hawkish pivot accelerates. EM selloff. USD strengthens. Gold initially weak. Growth stocks start multi-month decline.' },
|
|
{ id: 'russia-ukraine-2022', year: 2022, label: 'Russia Invades Ukraine', date: '2022-02-24', category: 'geopolitical', horizon_days: 90, assets: ['USO','GLD','WEAT','SPY','EWG'], hint: 'Full-scale Russian invasion. Energy price shock — European gas 10x. Wheat/corn spike +30%. European recession fear. Germany energy vulnerability. NATO unity.' },
|
|
{ id: 'fed-rate-shock-2022', year: 2022, label: 'Fed Rate Shock — CPI 9.1%', date: '2022-06-13', category: 'macro', horizon_days: 90, assets: ['TLT','SPY','QQQ','GLD','UUP'], hint: 'CPI prints 9.1%. Fed goes 75bps (first time since 1994). Rate shock across all assets. Everything sold — bonds, stocks, gold, crypto. DXY to 114. Bear market.' },
|
|
{ id: 'energy-crisis-eu-2022', year: 2022, label: 'European Energy Crisis', date: '2022-08-26', category: 'commodities', horizon_days: 90, assets: ['EURUSD=X','EWG','SPY','GLD','TLT'], hint: 'EU nat gas prices at 10x historical average. EUR/USD breaks parity. Germany industry threatens shutdown. ECB caught between inflation and recession.' },
|
|
{ id: 'gilt-crisis-2022', year: 2022, label: 'UK Gilt Crisis / LDI Implosion', date: '2022-09-23', category: 'credit', horizon_days: 30, assets: ['GBPUSD=X','EWU','TLT','GLD','SPY'], hint: 'Truss mini-budget — unfunded £45B tax cuts. GBP crashes to 1.035. 30Y gilt yields +100bps in hours. LDI pension funds margin calls. BoE emergency QE.' },
|
|
{ id: 'ftx-2022', year: 2022, label: 'FTX Crypto Exchange Collapse', date: '2022-11-08', category: 'credit', horizon_days: 60, assets: ['BTC-USD','ETH-USD','SPY','GLD','QQQ'], hint: 'FTX halts withdrawals. $8B hole. Alameda Research insolvent. Crypto contagion: Genesis, BlockFi. Bitcoin -75% ytd. Regulatory crackdown imminent. Crypto winter.' },
|
|
{ id: 'china-zero-covid-2022', year: 2022, label: 'China Zero-COVID Exit', date: '2022-12-07', category: 'macro', horizon_days: 90, assets: ['FXI','EEM','USO','GLD','EWJ'], hint: 'China abruptly abandons zero-COVID after Urumqi protests. Reopening trade ignites. Commodities demand surge expected. But wave of infections causes volatility.' },
|
|
{ id: 'boj-yyc-2023', year: 2023, label: 'BoJ YCC Band Widening', date: '2023-01-18', category: 'fx_macro', horizon_days: 90, assets: ['USDJPY=X','EWJ','TLT','GLD','SPY'], hint: 'BoJ widens YCC band to ±50bps surprise. JPY surges 3%. JGB yields spike. Global carry trade unwind risk. BoJ forced into bond buying. Yields globally affected.' },
|
|
{ id: 'svb-2023', year: 2023, label: 'SVB Banking Crisis', date: '2023-03-10', category: 'credit', horizon_days: 30, assets: ['XLF','TLT','GLD','SPY','UUP'], hint: 'Silicon Valley Bank fails — largest US bank failure since 2008. Signature Bank closes. Contagion to Credit Suisse. Fed BTFP emergency facility. Deposit flight fear.' },
|
|
{ id: 'opec-cut-2023', year: 2023, label: 'OPEC+ Surprise Production Cut', date: '2023-04-02', category: 'commodities', horizon_days: 60, assets: ['USO','XLE','SPY','GLD','UUP'], hint: 'OPEC+ shocks with 1.66Mb/d voluntary cuts beyond existing deal. WTI +6% in a day. Energy stocks surge. Inflation re-acceleration fear. Saudi strategy shift.' },
|
|
{ id: 'debt-ceiling-2023', year: 2023, label: 'US Debt Ceiling X-Date', date: '2023-05-24', category: 'macro', horizon_days: 30, assets: ['TLT','SPY','GLD','UUP','BIL'], hint: 'Treasury X-date imminent. T-bill rates spike on short-end. Dollar stress. CDS on US sovereign widen. Last-minute Bipartisan deal expected but tail risk real.' },
|
|
{ id: 'ai-mania-2023', year: 2023, label: 'AI Mania — Nvidia Surge', date: '2023-05-25', category: 'tech', horizon_days: 90, assets: ['QQQ','SPY','SMH','TLT','GLD'], hint: 'Nvidia Q1 blowout — revenue guidance +50%. AI bubble narrative goes mainstream. Mag7 concentration soars. Breadth collapses. Tech leads while rest of market flat.' },
|
|
{ id: 'iran-israel-2024', year: 2024, label: 'Iran Direct Attack on Israel', date: '2024-04-14', category: 'geopolitical', horizon_days: 30, assets: ['GLD','USO','SPY','TLT','UUP'], hint: 'Iran launches 300+ drones/missiles at Israel in first-ever direct attack. Israel intercepts ~99%. Gold spikes to ATH. Oil +3%. Then rapid de-escalation. Premium collapses.' },
|
|
{ id: 'carry-unwind-2024', year: 2024, label: 'JPY Carry Trade Unwind', date: '2024-08-05', category: 'fx_macro', horizon_days: 30, assets: ['USDJPY=X','EWJ','SPY','GLD','TLT'], hint: 'BoJ surprise rate hike triggers unwinding of $4T yen carry trade. Nikkei -12% in one session. VIX spikes to 65. Global deleveraging. Rapid recovery within 2 weeks.' },
|
|
{ id: 'china-stimulus-2024', year: 2024, label: 'China Stimulus Bazooka', date: '2024-09-24', category: 'macro', horizon_days: 60, assets: ['FXI','EEM','KWEB','USO','GLD'], hint: 'PBOC surprises with rate cuts + reserve ratio cut + property support. Chinese equities +25% in 2 weeks. Commodity demand surge expected. Copper, iron ore, oil up.' },
|
|
{ id: 'trump-elect-2024', year: 2024, label: 'Trump Election 2024 / Red Sweep', date: '2024-11-06', category: 'macro', horizon_days: 90, assets: ['SPY','QQQ','TLT','UUP','BTC-USD'], hint: 'Trump wins presidency + Republican Congress. Reflation 2.0: tax cuts, deregulation, tariffs. USD surges. Crypto explodes. Europe and EM underperform. Bonds sell.' },
|
|
{ id: 'trump-tariff-2025', year: 2025, label: 'Trump Tariff Liberation Day', date: '2025-04-02', category: 'geopolitical', horizon_days: 90, assets: ['SPY','QQQ','GLD','UUP','EEM'], hint: 'Trump announces 145% tariffs on China + 10% universal tariff. Largest trade war since 1930. Recession fear. SPX -15% in 3 days. Gold ATH $3200. Treasury yields volatile.' },
|
|
]
|
|
|
|
const CATEGORIES: Record<string, { label: string; color: string }> = {
|
|
macro: { label: 'Macro', color: 'bg-blue-600' },
|
|
geopolitical:{ label: 'Geopolitical',color: 'bg-red-700' },
|
|
commodities: { label: 'Commodities', color: 'bg-amber-600' },
|
|
fx_macro: { label: 'FX/Macro', color: 'bg-violet-600' },
|
|
credit: { label: 'Credit', color: 'bg-orange-600' },
|
|
volatility: { label: 'Volatility', color: 'bg-cyan-600' },
|
|
tech: { label: 'Tech', color: 'bg-emerald-600' },
|
|
}
|
|
|
|
const YEARS = [...new Set(PRESETS.map(p => p.year))].sort()
|
|
|
|
// ── Small components ───────────────────────────────────────────────────────────
|
|
|
|
function CategoryBadge({ cat }: { cat: string }) {
|
|
const c = CATEGORIES[cat] ?? { label: cat, color: 'bg-slate-600' }
|
|
return <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded ${c.color} text-white`}>{c.label}</span>
|
|
}
|
|
|
|
function MoveBadge({ move, dir }: { move: number; dir: string }) {
|
|
const ok = dir === 'up' ? move > 0 : dir === 'down' ? move < 0 : Math.abs(move) >= 3
|
|
return (
|
|
<span className={clsx('text-xs font-mono font-semibold', ok ? 'text-emerald-400' : 'text-red-400')}>
|
|
{move > 0 ? '+' : ''}{move.toFixed(1)}%
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// ── Main page ──────────────────────────────────────────────────────────────────
|
|
|
|
// ── Shared instrument picker ───────────────────────────────────────────────────
|
|
|
|
function InstrumentPicker({ onSelect }: { onSelect: (ticker: string, name: string) => void }) {
|
|
const [search, setSearch] = useState('')
|
|
const [cat, setCat] = useState<string | null>(null)
|
|
const [custom, setCustom] = useState('')
|
|
|
|
const seen = new Set<string>()
|
|
const unique = INSTRUMENTS.filter(i => { if (seen.has(i.ticker)) return false; seen.add(i.ticker); return true })
|
|
|
|
const filtered = unique.filter(i => {
|
|
if (cat && i.category !== cat) return false
|
|
if (search) {
|
|
const q = search.toLowerCase()
|
|
return i.ticker.toLowerCase().includes(q) || i.name.toLowerCase().includes(q)
|
|
}
|
|
return true
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{/* Category pills */}
|
|
<div className="flex flex-wrap gap-1">
|
|
<button onClick={() => setCat(null)}
|
|
className={clsx('text-[10px] px-2 py-0.5 rounded-full border transition-colors',
|
|
cat === null ? 'bg-violet-600 border-violet-500 text-white' : 'border-slate-700 text-slate-500 hover:text-slate-300')}>
|
|
All
|
|
</button>
|
|
{INSTRUMENT_CATEGORIES.map(c => (
|
|
<button key={c} onClick={() => setCat(cat === c ? null : c)}
|
|
className={clsx('text-[10px] px-2 py-0.5 rounded-full border transition-colors',
|
|
cat === c ? 'bg-violet-600 border-violet-500 text-white' : 'border-slate-700 text-slate-500 hover:text-slate-300')}>
|
|
{c}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{/* Search + custom */}
|
|
<div className="flex gap-2">
|
|
<div className="relative flex-1">
|
|
<Search className="w-3 h-3 absolute left-2 top-1/2 -translate-y-1/2 text-slate-500" />
|
|
<input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search…"
|
|
className="w-full pl-6 pr-2 py-1.5 text-xs bg-dark-700 border border-slate-700/50 rounded text-slate-200 placeholder-slate-600 focus:outline-none focus:border-violet-500" />
|
|
</div>
|
|
<input value={custom} onChange={e => setCustom(e.target.value)}
|
|
onKeyDown={e => e.key === 'Enter' && custom.trim() && onSelect(custom.trim(), custom.trim())}
|
|
placeholder="Custom ticker"
|
|
className="w-28 px-2 py-1.5 text-xs bg-dark-700 border border-slate-700/50 rounded font-mono text-slate-200 placeholder-slate-600 focus:outline-none focus:border-violet-500" />
|
|
</div>
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-3 gap-1 max-h-60 overflow-y-auto pr-1">
|
|
{filtered.map(inst => (
|
|
<button key={inst.ticker} onClick={() => onSelect(inst.ticker, inst.name)}
|
|
className="text-left px-2 py-1.5 rounded border border-slate-700/40 bg-dark-700/30 hover:border-violet-600/60 hover:bg-violet-900/20 transition-colors">
|
|
<div className="text-[10px] font-mono text-violet-400">{inst.ticker}</div>
|
|
<div className="text-[9px] text-slate-500 truncate">{inst.name}</div>
|
|
</button>
|
|
))}
|
|
{filtered.length === 0 && (
|
|
<div className="col-span-3 text-center py-4 text-[10px] text-slate-600">No match</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Main page ──────────────────────────────────────────────────────────────────
|
|
|
|
export default function PatternLab() {
|
|
const { data: runsData } = usePatternLabRuns()
|
|
const { mutateAsync: runBacktest, isPending: running } = useRunPatternLab()
|
|
const { mutateAsync: evaluateRun, isPending: evaluating } = useEvaluatePatternLab()
|
|
const { mutateAsync: savePattern } = useSaveLabPattern()
|
|
const { mutate: deleteRun } = useDeleteLabRun()
|
|
const { mutateAsync: runInstScan, isPending: scanning } = useInstrumentScan()
|
|
const { mutateAsync: evaluateInst, isPending: evalInst } = useEvaluateInstrumentScan()
|
|
|
|
const runs: any[] = runsData ?? []
|
|
|
|
// ── Mode tabs
|
|
const [mode, setMode] = useState<'events' | 'instrument'>('events')
|
|
|
|
// ── Event preset filters
|
|
const [search, setSearch] = useState('')
|
|
const [yearFilter, setYearFilter] = useState<number | null>(null)
|
|
const [catFilter, setCatFilter] = useState<string | null>(null)
|
|
|
|
// ── Active experiment (events mode)
|
|
const [selected, setSelected] = useState<Preset | null>(null)
|
|
const [editDate, setEditDate] = useState('')
|
|
const [editHorizon, setEditHorizon] = useState(90)
|
|
const [editAssets, setEditAssets] = useState('')
|
|
const [editHint, setEditHint] = useState('')
|
|
|
|
// ── Instrument scan mode
|
|
const [instTicker, setInstTicker] = useState('')
|
|
const [instName, setInstName] = useState('')
|
|
const [instStart, setInstStart] = useState('2020-01-01')
|
|
const [instEnd, setInstEnd] = useState('2023-12-31')
|
|
const [instHorizon, setInstHorizon] = useState(90)
|
|
const [instRun, setInstRun] = useState<any | null>(null)
|
|
const [instSavedIdx, setInstSavedIdx] = useState<Set<number>>(new Set())
|
|
|
|
// ── Current run state (events mode)
|
|
const [activeRun, setActiveRun] = useState<any | null>(null)
|
|
const [savedIdx, setSavedIdx] = useState<Set<number>>(new Set())
|
|
const [toast, setToast] = useState<string | null>(null)
|
|
|
|
const filteredPresets = useMemo(() => PRESETS.filter(p => {
|
|
if (yearFilter && p.year !== yearFilter) return false
|
|
if (catFilter && p.category !== catFilter) return false
|
|
if (search && !p.label.toLowerCase().includes(search.toLowerCase())) return false
|
|
return true
|
|
}), [search, yearFilter, catFilter])
|
|
|
|
const showToast = (msg: string) => {
|
|
setToast(msg)
|
|
setTimeout(() => setToast(null), 3000)
|
|
}
|
|
|
|
const handleSelectPreset = (p: Preset) => {
|
|
setSelected(p)
|
|
setEditDate(p.date)
|
|
setEditHorizon(p.horizon_days)
|
|
setEditAssets(p.assets.join(', '))
|
|
setEditHint(p.hint)
|
|
setActiveRun(null)
|
|
setSavedIdx(new Set())
|
|
}
|
|
|
|
const handleRun = async () => {
|
|
if (!selected && !editDate) return
|
|
const assets = editAssets.split(',').map(s => s.trim()).filter(Boolean)
|
|
try {
|
|
const result = await runBacktest({
|
|
preset_id: selected?.id,
|
|
theme: selected?.label ?? 'Custom',
|
|
analysis_date: editDate,
|
|
horizon_days: editHorizon,
|
|
assets,
|
|
theme_hint: editHint,
|
|
})
|
|
setActiveRun(result)
|
|
setSavedIdx(new Set())
|
|
} catch (e: any) {
|
|
showToast(`Error: ${e?.response?.data?.detail ?? e?.message ?? 'unknown'}`)
|
|
}
|
|
}
|
|
|
|
const handleEvaluate = async () => {
|
|
if (!activeRun?.run_id) return
|
|
try {
|
|
const result = await evaluateRun(activeRun.run_id)
|
|
setActiveRun((prev: any) => ({ ...prev, outcome: result.outcomes }))
|
|
} catch (e: any) {
|
|
showToast(`Error: ${e?.response?.data?.detail ?? e?.message ?? 'unknown'}`)
|
|
}
|
|
}
|
|
|
|
const handleSave = async (idx: number) => {
|
|
if (!activeRun?.run_id) return
|
|
const pat = activeRun.ai_result?.patterns?.[idx]
|
|
if (!pat) return
|
|
try {
|
|
await savePattern({
|
|
run_id: activeRun.run_id,
|
|
pattern_index: idx,
|
|
name: pat.name,
|
|
category: pat.category,
|
|
signal_direction: pat.signal_direction,
|
|
})
|
|
setSavedIdx(prev => new Set([...prev, idx]))
|
|
showToast(`"${pat.name}" saved to Pattern Library`)
|
|
} catch (e: any) {
|
|
showToast(`Save failed: ${e?.response?.data?.detail ?? e?.message}`)
|
|
}
|
|
}
|
|
|
|
// ── Instrument scan handlers
|
|
const handleInstScan = async () => {
|
|
if (!instTicker) return
|
|
try {
|
|
const result = await runInstScan({
|
|
ticker: instTicker, instrument_name: instName || instTicker,
|
|
start_date: instStart, end_date: instEnd, horizon_days: instHorizon,
|
|
})
|
|
setInstRun(result)
|
|
setInstSavedIdx(new Set())
|
|
} catch (e: any) {
|
|
showToast(`Error: ${e?.response?.data?.detail ?? e?.message ?? 'unknown'}`)
|
|
}
|
|
}
|
|
|
|
const handleInstEvaluate = async () => {
|
|
if (!instRun?.run_id) return
|
|
try {
|
|
const result = await evaluateInst(instRun.run_id)
|
|
setInstRun((prev: any) => ({ ...prev, outcome: result.outcomes }))
|
|
} catch (e: any) {
|
|
showToast(`Error: ${e?.response?.data?.detail ?? e?.message ?? 'unknown'}`)
|
|
}
|
|
}
|
|
|
|
const handleInstSave = async (idx: number) => {
|
|
if (!instRun?.run_id) return
|
|
const pat = instRun.ai_result?.patterns?.[idx]
|
|
if (!pat) return
|
|
try {
|
|
await savePattern({ run_id: instRun.run_id, pattern_index: idx, name: pat.name, category: pat.category, signal_direction: pat.signal_direction })
|
|
setInstSavedIdx(prev => new Set([...prev, idx]))
|
|
showToast(`"${pat.name}" saved to Pattern Library`)
|
|
} catch (e: any) {
|
|
showToast(`Save failed: ${e?.response?.data?.detail ?? e?.message}`)
|
|
}
|
|
}
|
|
|
|
// ── Event mode helpers
|
|
const aiPatterns: any[] = activeRun?.ai_result?.patterns ?? []
|
|
const outcomes: any[] = activeRun?.outcome ?? []
|
|
const hasOutcomes = outcomes.length > 0
|
|
|
|
const outcomeForPattern = (name: string) =>
|
|
outcomes.find((o: any) => o.pattern_name === name)
|
|
|
|
const hitRate = hasOutcomes
|
|
? outcomes.filter((o: any) => o.hit === true).length / outcomes.filter((o: any) => 'hit' in o).length
|
|
: null
|
|
|
|
// ── Instrument mode helpers
|
|
const instPatterns: any[] = instRun?.ai_result?.patterns ?? []
|
|
const instOutcomes: any[] = instRun?.outcome ?? []
|
|
const instHasOut = instOutcomes.length > 0
|
|
const instOutcomeFor = (name: string) => instOutcomes.find((o: any) => o.pattern_name === name)
|
|
const instHitRate = instHasOut
|
|
? instOutcomes.filter((o: any) => o.hit === true).length / instOutcomes.filter((o: any) => 'hit' in o).length
|
|
: null
|
|
|
|
return (
|
|
<div className="flex h-screen bg-dark-900 text-slate-200 overflow-hidden">
|
|
{/* ── Left sidebar ────────────────────────────────────────────────────── */}
|
|
<div className="w-72 flex-shrink-0 border-r border-slate-700/40 flex flex-col overflow-hidden">
|
|
<div className="p-3 border-b border-slate-700/40">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<FlaskConical className="w-4 h-4 text-violet-400" />
|
|
<span className="font-semibold text-sm text-slate-100">Pattern Lab</span>
|
|
<span className="ml-auto text-[10px] bg-slate-700 rounded px-1.5 py-0.5 text-slate-400">{PRESETS.length} events</span>
|
|
</div>
|
|
{/* Mode tabs */}
|
|
<div className="flex gap-1 mb-2 bg-dark-700 rounded p-0.5">
|
|
<button onClick={() => setMode('events')}
|
|
className={clsx('flex-1 text-xs py-1 rounded transition-colors flex items-center justify-center gap-1', {
|
|
'bg-violet-700 text-white': mode === 'events',
|
|
'text-slate-500 hover:text-slate-300': mode !== 'events',
|
|
})}>
|
|
<CalendarDays className="w-3 h-3" /> Events
|
|
</button>
|
|
<button onClick={() => setMode('instrument')}
|
|
className={clsx('flex-1 text-xs py-1 rounded transition-colors flex items-center justify-center gap-1', {
|
|
'bg-teal-700 text-white': mode === 'instrument',
|
|
'text-slate-500 hover:text-slate-300': mode !== 'instrument',
|
|
})}>
|
|
<ScanLine className="w-3 h-3" /> Instrument
|
|
</button>
|
|
</div>
|
|
{/* Search */}
|
|
<div className="relative">
|
|
<Search className="w-3.5 h-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-slate-500" />
|
|
<input
|
|
value={search} onChange={e => setSearch(e.target.value)}
|
|
placeholder="Search events..."
|
|
className="w-full pl-7 pr-2 py-1.5 text-xs bg-dark-700 border border-slate-700/40 rounded text-slate-200 placeholder-slate-500 focus:outline-none focus:border-violet-600"
|
|
/>
|
|
</div>
|
|
{/* Year pills */}
|
|
<div className="flex flex-wrap gap-1 mt-2">
|
|
{YEARS.map(y => (
|
|
<button key={y} onClick={() => setYearFilter(yearFilter === y ? null : y)}
|
|
className={clsx('text-[10px] px-1.5 py-0.5 rounded border transition-colors', {
|
|
'bg-violet-700 border-violet-600 text-white': yearFilter === y,
|
|
'border-slate-700 text-slate-500 hover:text-slate-300': yearFilter !== y,
|
|
})}>{y}</button>
|
|
))}
|
|
</div>
|
|
{/* Category pills */}
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
|
{Object.entries(CATEGORIES).map(([key, { label }]) => (
|
|
<button key={key} onClick={() => setCatFilter(catFilter === key ? null : key)}
|
|
className={clsx('text-[10px] px-1.5 py-0.5 rounded transition-colors', {
|
|
'bg-slate-600 text-white': catFilter === key,
|
|
'text-slate-500 hover:text-slate-300': catFilter !== key,
|
|
})}>{label}</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Preset list */}
|
|
<div className="flex-1 overflow-y-auto py-1">
|
|
{filteredPresets.map(p => (
|
|
<button key={p.id} onClick={() => handleSelectPreset(p)}
|
|
className={clsx('w-full text-left px-3 py-2 border-b border-slate-700/20 hover:bg-dark-700/60 transition-colors', {
|
|
'bg-violet-900/30 border-l-2 border-l-violet-500': selected?.id === p.id,
|
|
})}>
|
|
<div className="flex items-center gap-1.5 mb-0.5">
|
|
<span className="text-[10px] text-slate-500 font-mono">{p.year}</span>
|
|
<CategoryBadge cat={p.category} />
|
|
<span className="text-[10px] text-slate-600 ml-auto">{p.horizon_days}d</span>
|
|
</div>
|
|
<div className="text-xs text-slate-200 leading-tight">{p.label}</div>
|
|
<div className="text-[10px] text-slate-500 mt-0.5">{p.date}</div>
|
|
</button>
|
|
))}
|
|
{filteredPresets.length === 0 && (
|
|
<div className="p-4 text-center text-xs text-slate-600">No events match filters</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Run history count */}
|
|
<div className="p-2 border-t border-slate-700/40 text-[10px] text-slate-600">
|
|
{runs.length} past run{runs.length !== 1 ? 's' : ''} in history
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Main content ────────────────────────────────────────────────────── */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
|
|
{/* ══ INSTRUMENT SCAN MODE ══════════════════════════════════════════ */}
|
|
{mode === 'instrument' && (
|
|
<div className="p-5 space-y-5">
|
|
<div className="flex items-center gap-2">
|
|
<ScanLine className="w-4 h-4 text-teal-400" />
|
|
<h1 className="text-lg font-bold text-slate-100">Instrument Historical Scan</h1>
|
|
</div>
|
|
<p className="text-xs text-slate-400">
|
|
Pick an instrument — the AI scans a historical period, identifies the key patterns/events that drove it, and validates them against actual price data.
|
|
</p>
|
|
|
|
{/* Instrument picker */}
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
|
<div className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-3">
|
|
{instTicker
|
|
? <span className="flex items-center gap-2">Selected: <span className="font-mono text-teal-300">{instTicker}</span> — {instName} <button onClick={() => { setInstTicker(''); setInstName(''); setInstRun(null) }} className="text-slate-500 hover:text-slate-300 text-[10px] ml-1">change</button></span>
|
|
: 'Select Instrument'}
|
|
</div>
|
|
{!instTicker && (
|
|
<InstrumentPicker onSelect={(t, n) => { setInstTicker(t); setInstName(n) }} />
|
|
)}
|
|
</div>
|
|
|
|
{/* Period + horizon */}
|
|
{instTicker && (
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
|
<div className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-3">Scan Parameters</div>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div>
|
|
<label className="text-[10px] text-slate-500 mb-1 block">Period Start</label>
|
|
<input type="date" value={instStart} onChange={e => setInstStart(e.target.value)}
|
|
className="w-full px-2 py-1.5 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-teal-500" />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-slate-500 mb-1 block">Period End</label>
|
|
<input type="date" value={instEnd} onChange={e => setInstEnd(e.target.value)}
|
|
className="w-full px-2 py-1.5 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-teal-500" />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-slate-500 mb-1 block">Horizon per pattern</label>
|
|
<div className="flex items-center gap-2">
|
|
<input type="range" min={14} max={365} value={instHorizon}
|
|
onChange={e => setInstHorizon(Number(e.target.value))}
|
|
className="flex-1 accent-teal-600" />
|
|
<span className="text-xs font-mono text-teal-300 w-8 text-right">{instHorizon}d</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3">
|
|
<button onClick={handleInstScan} disabled={scanning}
|
|
className="flex items-center gap-2 bg-teal-700 hover:bg-teal-600 disabled:opacity-50 text-white px-4 py-2 rounded text-xs font-semibold transition-colors">
|
|
{scanning
|
|
? <><RefreshCw className="w-3.5 h-3.5 animate-spin" /> Fetching data + AI analysis…</>
|
|
: <><ScanLine className="w-3.5 h-3.5" /> Scan History</>}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Instrument scan results */}
|
|
{instPatterns.length > 0 && (
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="text-xs font-semibold text-slate-400 uppercase tracking-wide">
|
|
{instPatterns.length} Pattern Instances — <span className="text-teal-300 font-mono">{instTicker}</span>
|
|
<span className="text-slate-600 ml-2">{instStart} → {instEnd}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{instHasOut && instHitRate !== null && (
|
|
<span className={clsx('text-sm font-bold', instHitRate >= 0.6 ? 'text-emerald-400' : instHitRate >= 0.4 ? 'text-yellow-400' : 'text-red-400')}>
|
|
{Math.round(instHitRate * 100)}% hit rate
|
|
</span>
|
|
)}
|
|
{!instHasOut && (
|
|
<button onClick={handleInstEvaluate} disabled={evalInst}
|
|
className="flex items-center gap-1.5 bg-teal-700 hover:bg-teal-600 disabled:opacity-50 text-white px-3 py-1.5 rounded text-xs font-semibold transition-colors">
|
|
{evalInst
|
|
? <><RefreshCw className="w-3 h-3 animate-spin" /> Evaluating…</>
|
|
: <><BarChart2 className="w-3 h-3" /> Evaluate outcomes</>}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{instPatterns.map((pat: any, idx: number) => {
|
|
const out = instOutcomeFor(pat.name)
|
|
const isSaved = instSavedIdx.has(idx)
|
|
const DirIcon = pat.signal_direction === 'bullish' ? TrendingUp : pat.signal_direction === 'bearish' ? TrendingDown : Zap
|
|
const dirCol = pat.signal_direction === 'bullish' ? 'text-emerald-400' : pat.signal_direction === 'bearish' ? 'text-red-400' : 'text-violet-400'
|
|
return (
|
|
<div key={idx} className={clsx('border rounded-lg p-3',
|
|
out?.hit === true ? 'border-emerald-700/60 bg-emerald-900/10' :
|
|
out?.hit === false ? 'border-red-700/40 bg-red-900/10' :
|
|
'border-slate-700/40 bg-dark-700/30')}>
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-0.5">
|
|
<DirIcon className={`w-3.5 h-3.5 ${dirCol}`} />
|
|
<span className="text-xs font-semibold text-slate-100">{pat.name}</span>
|
|
<span className="text-[10px] bg-teal-900/40 border border-teal-700/30 text-teal-300 rounded px-1.5 font-mono">{pat.analysis_date}</span>
|
|
{pat.category && <span className="text-[10px] text-slate-500">{pat.category}</span>}
|
|
</div>
|
|
<p className="text-xs text-slate-400 mb-1.5">{pat.description}</p>
|
|
<div className="flex items-center gap-4 text-[10px] text-slate-500">
|
|
<span>Strategy: <span className="text-slate-300">{pat.strategy}</span></span>
|
|
<span>Expected: <span className={clsx('font-semibold', dirCol)}>
|
|
{pat.expected_direction === 'up' ? '+' : pat.expected_direction === 'down' ? '-' : '±'}{pat.expected_move_pct}%
|
|
</span></span>
|
|
<span>Horizon: <span className="text-slate-300">{pat.horizon_days}d</span></span>
|
|
<span>Confidence: <span className={clsx('font-semibold', pat.confidence >= 70 ? 'text-emerald-400' : pat.confidence >= 50 ? 'text-yellow-400' : 'text-slate-400')}>{pat.confidence}</span></span>
|
|
</div>
|
|
{pat.rationale && <p className="text-[10px] text-slate-500 mt-1 italic">{pat.rationale}</p>}
|
|
{out && (
|
|
<div className={clsx('mt-2 pt-2 border-t flex items-center gap-3 text-[10px]',
|
|
out.hit ? 'border-emerald-700/30 text-emerald-300' : 'border-red-700/30 text-red-300')}>
|
|
{out.hit ? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" /> : <XCircle className="w-3.5 h-3.5 text-red-400" />}
|
|
<span className="font-semibold">{out.hit ? 'HIT' : 'MISS'}</span>
|
|
<span className="text-slate-400">Actual:</span>
|
|
<span className={clsx('font-mono font-semibold', out.actual_move_pct > 0 ? 'text-emerald-400' : 'text-red-400')}>
|
|
{out.actual_move_pct > 0 ? '+' : ''}{out.actual_move_pct?.toFixed(1)}%
|
|
</span>
|
|
<span className="text-slate-500">{out.entry_date} → {out.exit_date}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
{isSaved
|
|
? <span className="flex items-center gap-1 text-emerald-400 text-xs"><CheckCircle2 className="w-3.5 h-3.5" /> Saved</span>
|
|
: <button onClick={() => handleInstSave(idx)}
|
|
className="flex items-center gap-1.5 border border-slate-600 hover:border-teal-500 hover:text-teal-300 text-slate-400 px-2.5 py-1.5 rounded text-xs transition-colors">
|
|
<Save className="w-3 h-3" /> Save
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ══ EVENT PRESET MODE ════════════════════════════════════════════ */}
|
|
{mode === 'events' && !selected && (
|
|
<div className="flex items-center justify-center h-full text-center">
|
|
<div>
|
|
<FlaskConical className="w-12 h-12 text-slate-700 mx-auto mb-3" />
|
|
<p className="text-slate-500 text-sm">Select a historical event on the left</p>
|
|
<p className="text-slate-600 text-xs mt-1">The AI will analyse what it would have done at that date using real market data</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{mode === 'events' && selected && (
|
|
<div className="p-5 space-y-5">
|
|
{/* ── Header ── */}
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<CalendarDays className="w-4 h-4 text-violet-400" />
|
|
<h1 className="text-lg font-bold text-slate-100">{selected.label}</h1>
|
|
<CategoryBadge cat={selected.category} />
|
|
</div>
|
|
<p className="text-xs text-slate-400 leading-relaxed max-w-2xl">{selected.hint}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Setup card ── */}
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
|
<div className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-3">Experiment Setup</div>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div>
|
|
<label className="text-[10px] text-slate-500 mb-1 block">Analysis Date</label>
|
|
<input type="date" value={editDate} onChange={e => setEditDate(e.target.value)}
|
|
className="w-full px-2 py-1.5 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-violet-500" />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-slate-500 mb-1 block">Horizon (days)</label>
|
|
<div className="flex items-center gap-2">
|
|
<input type="range" min={14} max={365} value={editHorizon}
|
|
onChange={e => setEditHorizon(Number(e.target.value))}
|
|
className="flex-1 accent-violet-600" />
|
|
<span className="text-xs font-mono text-violet-300 w-8 text-right">{editHorizon}d</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] text-slate-500 mb-1 block">Assets (comma-separated)</label>
|
|
<input value={editAssets} onChange={e => setEditAssets(e.target.value)}
|
|
className="w-full px-2 py-1.5 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-200 focus:outline-none focus:border-violet-500 font-mono" />
|
|
</div>
|
|
</div>
|
|
<div className="mt-3">
|
|
<label className="text-[10px] text-slate-500 mb-1 block">Context hint for AI</label>
|
|
<textarea value={editHint} onChange={e => setEditHint(e.target.value)} rows={2}
|
|
className="w-full px-2 py-1.5 text-xs bg-dark-700 border border-slate-600/50 rounded text-slate-300 focus:outline-none focus:border-violet-500 resize-none" />
|
|
</div>
|
|
<div className="mt-3 flex items-center gap-3">
|
|
<button onClick={handleRun} disabled={running || !editDate}
|
|
className="flex items-center gap-2 bg-violet-700 hover:bg-violet-600 disabled:opacity-50 text-white px-4 py-2 rounded text-xs font-semibold transition-colors">
|
|
{running
|
|
? <><RefreshCw className="w-3.5 h-3.5 animate-spin" /> Building context + running AI…</>
|
|
: <><Play className="w-3.5 h-3.5" /> Run Backtest</>}
|
|
</button>
|
|
{running && <span className="text-xs text-slate-500">Fetching {editDate} market data + GPT-4o analysis…</span>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Context snapshot ── */}
|
|
{activeRun?.context?.assets && (
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
|
<div className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-3">
|
|
Market Data — {activeRun.context.analysis_date}
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="text-[10px] text-slate-600 uppercase tracking-wide border-b border-slate-700/40">
|
|
<th className="text-left py-1 pr-3">Ticker</th>
|
|
<th className="text-right pr-3">Price</th>
|
|
<th className="text-right pr-3">1W</th>
|
|
<th className="text-right pr-3">1M</th>
|
|
<th className="text-right pr-3">3M</th>
|
|
<th className="text-right pr-3">RSI</th>
|
|
<th className="text-right">vs MA200</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{Object.entries(activeRun.context.assets).map(([ticker, d]: [string, any]) => (
|
|
<tr key={ticker} className="border-b border-slate-700/20">
|
|
<td className="py-1 pr-3 font-mono text-slate-200">{ticker}</td>
|
|
<td className="text-right pr-3 font-mono">{d.price ?? '—'}</td>
|
|
<td className="text-right pr-3">
|
|
{d.ret_1w != null ? (
|
|
<span className={d.ret_1w >= 0 ? 'text-emerald-400' : 'text-red-400'}>
|
|
{d.ret_1w > 0 ? '+' : ''}{d.ret_1w.toFixed(1)}%
|
|
</span>
|
|
) : '—'}
|
|
</td>
|
|
<td className="text-right pr-3">
|
|
{d.ret_1m != null ? (
|
|
<span className={d.ret_1m >= 0 ? 'text-emerald-400' : 'text-red-400'}>
|
|
{d.ret_1m > 0 ? '+' : ''}{d.ret_1m.toFixed(1)}%
|
|
</span>
|
|
) : '—'}
|
|
</td>
|
|
<td className="text-right pr-3">
|
|
{d.ret_3m != null ? (
|
|
<span className={d.ret_3m >= 0 ? 'text-emerald-400' : 'text-red-400'}>
|
|
{d.ret_3m > 0 ? '+' : ''}{d.ret_3m.toFixed(1)}%
|
|
</span>
|
|
) : '—'}
|
|
</td>
|
|
<td className="text-right pr-3">
|
|
{d.rsi_14 != null ? (
|
|
<span className={clsx({
|
|
'text-red-400': d.rsi_14 > 70,
|
|
'text-emerald-400': d.rsi_14 < 30,
|
|
'text-slate-300': d.rsi_14 >= 30 && d.rsi_14 <= 70,
|
|
})}>{d.rsi_14.toFixed(0)}</span>
|
|
) : '—'}
|
|
</td>
|
|
<td className="text-right">
|
|
{d.pct_from_ma200 != null ? (
|
|
<span className={d.pct_from_ma200 >= 0 ? 'text-emerald-400' : 'text-red-400'}>
|
|
{d.pct_from_ma200 > 0 ? '+' : ''}{d.pct_from_ma200.toFixed(1)}%
|
|
</span>
|
|
) : '—'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── AI pattern results ── */}
|
|
{aiPatterns.length > 0 && (
|
|
<div className="bg-dark-800 border border-slate-700/40 rounded-lg p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="text-xs font-semibold text-slate-400 uppercase tracking-wide">
|
|
AI Pattern Analysis — {aiPatterns.length} pattern{aiPatterns.length !== 1 ? 's' : ''}
|
|
</div>
|
|
{!hasOutcomes && (
|
|
<button onClick={handleEvaluate} disabled={evaluating}
|
|
className="flex items-center gap-1.5 bg-teal-700 hover:bg-teal-600 disabled:opacity-50 text-white px-3 py-1.5 rounded text-xs font-semibold transition-colors">
|
|
{evaluating
|
|
? <><RefreshCw className="w-3 h-3 animate-spin" /> Fetching outcomes…</>
|
|
: <><BarChart2 className="w-3 h-3" /> Evaluate at T+{editHorizon}d</>}
|
|
</button>
|
|
)}
|
|
{hasOutcomes && hitRate !== null && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-slate-500">Hit rate:</span>
|
|
<span className={clsx('text-sm font-bold', hitRate >= 0.6 ? 'text-emerald-400' : hitRate >= 0.4 ? 'text-yellow-400' : 'text-red-400')}>
|
|
{Math.round(hitRate * 100)}%
|
|
</span>
|
|
<span className="text-xs text-slate-600">({outcomes.filter((o: any) => o.hit).length}/{outcomes.filter((o: any) => 'hit' in o).length})</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{aiPatterns.map((pat: any, idx: number) => {
|
|
const out = outcomeForPattern(pat.name)
|
|
const isSaved = savedIdx.has(idx)
|
|
const dirIcon = pat.signal_direction === 'bullish' ? TrendingUp
|
|
: pat.signal_direction === 'bearish' ? TrendingDown
|
|
: Zap
|
|
const DirIcon = dirIcon
|
|
const dirColor = pat.signal_direction === 'bullish' ? 'text-emerald-400'
|
|
: pat.signal_direction === 'bearish' ? 'text-red-400' : 'text-violet-400'
|
|
|
|
return (
|
|
<div key={idx} className={clsx(
|
|
'border rounded-lg p-3 transition-colors',
|
|
out?.hit === true ? 'border-emerald-700/60 bg-emerald-900/10' :
|
|
out?.hit === false ? 'border-red-700/40 bg-red-900/10' :
|
|
'border-slate-700/40 bg-dark-700/30'
|
|
)}>
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<DirIcon className={`w-3.5 h-3.5 ${dirColor}`} />
|
|
<span className="text-sm font-semibold text-slate-100">{pat.name}</span>
|
|
<span className="text-[10px] bg-slate-700 rounded px-1.5 text-slate-400 font-mono">{pat.underlying}</span>
|
|
{pat.category && <CategoryBadge cat={pat.category} />}
|
|
</div>
|
|
<p className="text-xs text-slate-400 mb-2">{pat.description}</p>
|
|
<div className="flex items-center gap-4 text-[10px] text-slate-500">
|
|
<span>Strategy: <span className="text-slate-300">{pat.strategy}</span></span>
|
|
<span>Expected: <span className={clsx('font-semibold', dirColor)}>
|
|
{pat.expected_direction === 'up' ? '+' : pat.expected_direction === 'down' ? '-' : '±'}{pat.expected_move_pct}%
|
|
</span></span>
|
|
<span>Horizon: <span className="text-slate-300">{pat.horizon_days}d</span></span>
|
|
<span>Confidence: <span className={clsx('font-semibold', pat.confidence >= 70 ? 'text-emerald-400' : pat.confidence >= 50 ? 'text-yellow-400' : 'text-slate-400')}>{pat.confidence}</span></span>
|
|
</div>
|
|
{pat.rationale && (
|
|
<p className="text-[10px] text-slate-500 mt-1.5 italic">{pat.rationale}</p>
|
|
)}
|
|
{/* Outcome row */}
|
|
{out && (
|
|
<div className={clsx(
|
|
'mt-2 pt-2 border-t flex items-center gap-4 text-[10px]',
|
|
out.hit ? 'border-emerald-700/30 text-emerald-300' : 'border-red-700/30 text-red-300'
|
|
)}>
|
|
{out.hit
|
|
? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
|
|
: <XCircle className="w-3.5 h-3.5 text-red-400" />}
|
|
<span className="font-semibold">{out.hit ? 'HIT' : 'MISS'}</span>
|
|
<span className="text-slate-400">Actual move:</span>
|
|
<MoveBadge move={out.actual_move_pct} dir={out.expected_direction} />
|
|
<span className="text-slate-500">{out.entry_date} → {out.exit_date}</span>
|
|
{out.entry_price && (
|
|
<span className="text-slate-500">
|
|
{out.entry_price} → {out.exit_price}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Save button */}
|
|
<div className="flex-shrink-0">
|
|
{isSaved ? (
|
|
<span className="flex items-center gap-1 text-emerald-400 text-xs">
|
|
<CheckCircle2 className="w-3.5 h-3.5" /> Saved
|
|
</span>
|
|
) : (
|
|
<button onClick={() => handleSave(idx)}
|
|
className="flex items-center gap-1.5 border border-slate-600 hover:border-violet-500 hover:text-violet-300 text-slate-400 px-2.5 py-1.5 rounded text-xs transition-colors">
|
|
<Save className="w-3 h-3" /> Save pattern
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── History panel ───────────────────────────────────────────────────── */}
|
|
{runs.length > 0 && (
|
|
<div className="w-64 flex-shrink-0 border-l border-slate-700/40 overflow-y-auto">
|
|
<div className="p-3 border-b border-slate-700/40 text-xs font-semibold text-slate-400 uppercase tracking-wide">
|
|
Run History
|
|
</div>
|
|
{runs.map((run: any) => (
|
|
<div key={run.id}
|
|
className="px-3 py-2 border-b border-slate-700/20 hover:bg-dark-700/40 cursor-pointer group"
|
|
onClick={() => {
|
|
// Rehydrate run into active state
|
|
const preset = PRESETS.find(p => p.id === run.preset_id)
|
|
if (preset) setSelected(preset)
|
|
setEditDate(run.analysis_date)
|
|
setEditHorizon(run.horizon_days)
|
|
setEditAssets((run.assets ?? []).join(', '))
|
|
setEditHint(run.theme_hint ?? '')
|
|
setActiveRun({
|
|
run_id: run.id,
|
|
context: run.context_snapshot,
|
|
ai_result: run.ai_result,
|
|
outcome: run.outcome,
|
|
})
|
|
setSavedIdx(new Set())
|
|
}}>
|
|
<div className="flex items-center gap-1.5 mb-0.5">
|
|
<span className={clsx('w-1.5 h-1.5 rounded-full flex-shrink-0', {
|
|
'bg-emerald-500': run.status === 'evaluated',
|
|
'bg-teal-500': run.status === 'done',
|
|
'bg-yellow-500': run.status === 'running',
|
|
'bg-red-500': run.status === 'error',
|
|
'bg-slate-500': run.status === 'pending',
|
|
})} />
|
|
<span className="text-[10px] text-slate-400 font-mono">{run.analysis_date}</span>
|
|
<button
|
|
onClick={e => { e.stopPropagation(); deleteRun(run.id) }}
|
|
className="ml-auto opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all">
|
|
<Trash2 className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
<div className="text-xs text-slate-300 leading-tight truncate">{run.theme}</div>
|
|
<div className="flex items-center gap-2 mt-0.5">
|
|
<span className="text-[10px] text-slate-600">{run.horizon_days}d</span>
|
|
{run.status === 'evaluated' && run.outcome && (() => {
|
|
const outs: any[] = Array.isArray(run.outcome) ? run.outcome : []
|
|
const hits = outs.filter(o => o.hit === true).length
|
|
const total = outs.filter(o => 'hit' in o).length
|
|
return total > 0 ? (
|
|
<span className={clsx('text-[10px] font-semibold', hits / total >= 0.6 ? 'text-emerald-400' : 'text-red-400')}>
|
|
{Math.round(hits / total * 100)}% hit
|
|
</span>
|
|
) : null
|
|
})()}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Toast ── */}
|
|
{toast && (
|
|
<div className="fixed bottom-5 left-1/2 -translate-x-1/2 bg-slate-800 border border-slate-600 rounded-lg px-4 py-2 text-sm text-slate-200 shadow-xl z-50">
|
|
{toast}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|