admin/OpenFin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: strategy builder

Browse Source
This commit is contained in:
OpenSquared
2026-07-30 14:48:20 +02:00
parent d85c0348d8
commit efe29cef53
5 changed files with 412 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/hooks/useApi.ts
View File

@@ -1757,6 +1757,7 @@ export type StrategyScenario = {
contract_size?: number
dte_min?: number | null
dte_max?: number | null
as_of?: string | null
}
export type StrategyLeg = {
@@ -1875,12 +1876,33 @@ export const useOptimizeStrategy = () =>
api.post<OptimizeResponse>('/strategy-builder/optimize', body).then(r => r.data),
})
// "Dériver d'un historique" mode: turns a real Du→Au window into scenario inputs computed
// from what actually happened (real spot move, real ATM IV move) — not a guess.
export type RealizedScenario = {
symbol: string; saxo_symbol: string; start_date: string; end_date: string
spot_a: number; spot_b: number; spot_shock_pct: number
iv_a: number | null; iv_b: number | null; iv_level_shift: number | null
horizon_days: number
}
export const useRealizedScenario = () =>
useMutation<RealizedScenario, Error, { symbol: string; start_date: string; end_date: string }>({
mutationFn: ({ symbol, start_date, end_date }) =>
api.get('/strategy-builder/realized-scenario', { params: { symbol, start_date, end_date } }).then(r => r.data),
})
// Day-by-day mark-to-market of a fixed set of legs against REAL accumulated Saxo history
// between two dates — not a scenario, a replay of what actually happened.
export type ReplayPoint = { date: string; spot: number | null; position_value: number; pnl: number }
export type ReplayLegSnapshot = {
option_type: 'call' | 'put' | 'stock'; position: 'long' | 'short'; quantity: number
strike: number; expiry_date: string
mid: number; bid: number | null; ask: number | null; iv: number | null
greeks: { delta: number; gamma: number; theta: number; vega: number } | null
}
export type ReplayResult = {
symbol: string; saxo_symbol: string; start_date: string; end_date: string
entry_date: string; entry_value: number; final_pnl: number
entry_legs: ReplayLegSnapshot[]; exit_legs: ReplayLegSnapshot[]
points: ReplayPoint[]; missing_dates: string[]
}
export const useReplayStrategy = () =>

301
frontend/src/pages/StrategyBuilder.tsx
View File

@@ -5,7 +5,7 @@ import {
import { Layers, Plus, Trash2, RefreshCw, AlertTriangle, Search, Save, FolderOpen, X, History } from 'lucide-react'
import clsx from 'clsx'
import {
useOptionChainSlice, usePriceStrategy, useOptimizeStrategy, useSuggestedProfile, useReplayStrategy, usePresets,
useOptionChainSlice, usePriceStrategy, useOptimizeStrategy, useSuggestedProfile, useReplayStrategy, usePresets, useRealizedScenario,
useScenarios, useSaveScenario, useDeleteScenario,
useSavedStrategies, useSaveStrategyRecord, useDeleteSavedStrategy,
useSaxoSymbols, useIvForTrade,
@@ -101,7 +101,9 @@ function GreeksTile({ label, now, scenario, precision = 4, hint }: { label: stri
// ── Scenario panel ────────────────────────────────────────────────────────────
function ScenarioPanel({
// Shared across all 3 modes (Construire/Dériver/Tester) — which symbol, which chain
// window (horizon for ranking + DTE bounds for filtering) legs get drawn from.
function SymbolPanel({
symbol, setSymbol, onCommitSymbol, horizonDays, setHorizonDays, scenario, setScenario, watchlistTickers,
}: {
symbol: string; setSymbol: (v: string) => void; onCommitSymbol: (v?: string) => void
@@ -109,25 +111,8 @@ function ScenarioPanel({
scenario: StrategyScenario; setScenario: (v: StrategyScenario) => void
watchlistTickers: string[]
}) {
const slider = (
key: 'spot_shock_pct' | 'iv_level_shift' | 'skew_tilt' | 'term_slope_shift' | 'rate_shock_bps',
label: string, min: number, max: number, step: number, fmt: (v: number) => string,
) => (
<div>
<div className="flex items-center justify-between text-xs text-slate-400 mb-1">
<span>{label}</span>
<span className="text-white font-semibold">{fmt(scenario[key] ?? 0)}</span>
</div>
<input
type="range" min={min} max={max} step={step} value={scenario[key] ?? 0}
onChange={(e) => setScenario({ ...scenario, [key]: parseFloat(e.target.value) })}
className="w-full accent-blue-500"
/>
</div>
)
return (
<div className="card space-y-4">
<div className="card">
<div className="flex items-center gap-3">
<div className="flex-1">
<label className="stat-label block mb-1">Symbole</label>
@@ -179,7 +164,33 @@ function ScenarioPanel({
/>
</div>
</div>
</div>
)
}
// Construire-only: the manual "what if" sliders. Kept separate from SymbolPanel so
// Dériver/Tester (which don't use a hand-dialed scenario) don't render them at all.
function ScenarioSlidersPanel({ scenario, setScenario }: { scenario: StrategyScenario; setScenario: (v: StrategyScenario) => void }) {
const slider = (
key: 'spot_shock_pct' | 'iv_level_shift' | 'skew_tilt' | 'term_slope_shift' | 'rate_shock_bps',
label: string, min: number, max: number, step: number, fmt: (v: number) => string,
) => (
<div>
<div className="flex items-center justify-between text-xs text-slate-400 mb-1">
<span>{label}</span>
<span className="text-white font-semibold">{fmt(scenario[key] ?? 0)}</span>
</div>
<input
type="range" min={min} max={max} step={step} value={scenario[key] ?? 0}
onChange={(e) => setScenario({ ...scenario, [key]: parseFloat(e.target.value) })}
className="w-full accent-blue-500"
/>
</div>
)
return (
<div className="card space-y-4">
<div className="stat-label">Scénario manuel — "et si..."</div>
<div className="grid grid-cols-2 gap-4">
{slider('spot_shock_pct', 'Choc spot', -20, 20, 0.5, (v) => `${v >= 0 ? '+' : ''}${v.toFixed(1)}%`)}
{slider('iv_level_shift', 'Choc niveau IV', -0.15, 0.15, 0.005, (v) => `${v >= 0 ? '+' : ''}${(v * 100).toFixed(1)}pts`)}
@@ -649,14 +660,64 @@ function ReplayCard({
{result && (
<>
<div className="text-xs text-slate-500">
Entrée le <span className="text-white font-semibold">{result.entry_date}</span>
{' '}(valeur {fmtMoney(result.entry_value)}) · P&L final{' '}
<span className={clsx('font-bold', pnlColor(result.final_pnl))}>{fmtMoney(result.final_pnl)}</span>
{result.missing_dates.length > 0 && (
<span className="text-slate-600"> · {result.missing_dates.length} jour(s) sans cotation exploitable, exclu(s)</span>
)}
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<div className="card-sm">
<div className="stat-label">Valeur d'entrée ({result.entry_date})</div>
<div className="text-lg font-bold text-white">{fmtMoney(result.entry_value)}</div>
</div>
<div className="card-sm">
<div className="stat-label">P&amp;L final</div>
<div className={clsx('text-lg font-bold', pnlColor(result.final_pnl))}>{fmtMoney(result.final_pnl)}</div>
</div>
<div className="card-sm">
<div className="stat-label">Jours exploités</div>
<div className="text-lg font-bold text-white">{result.points.length}</div>
</div>
<div className="card-sm">
<div className="stat-label">Jours exclus (sans cotation réelle)</div>
<div className="text-lg font-bold text-slate-400">{result.missing_dates.length}</div>
</div>
</div>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<thead>
<tr className="text-slate-500">
<th className="text-left pb-1 pr-3">Jambe</th>
<th className="text-right pb-1 pr-3">Strike</th>
<th className="text-left pb-1 pr-3">Échéance</th>
<th className="text-right pb-1 pr-3">Mid entrée</th>
<th className="text-right pb-1 pr-3">Bid/Ask entrée</th>
<th className="text-right pb-1 pr-3">IV entrée</th>
<th className="text-right pb-1 pr-3">Δ entrée</th>
<th className="text-right pb-1">Mid sortie</th>
</tr>
</thead>
<tbody>
{result.entry_legs.map((leg, i) => {
const exitLeg = result.exit_legs[i]
return (
<tr key={i} className="border-t border-slate-700/20">
<td className="py-1 pr-3 whitespace-nowrap">
<span className={leg.position === 'long' ? 'text-emerald-400' : 'text-red-400'}>{leg.position === 'long' ? 'Achat' : 'Vente'}</span>
{' '}{leg.quantity > 1 ? `${leg.quantity}x ` : ''}{leg.option_type === 'stock' ? 'Sous-jacent' : (leg.option_type === 'call' ? 'Call' : 'Put')}
</td>
<td className="py-1 pr-3 text-right font-mono">{leg.option_type === 'stock' ? '—' : fmtPrice(leg.strike)}</td>
<td className="py-1 pr-3 text-slate-400 whitespace-nowrap">{leg.option_type === 'stock' ? '—' : leg.expiry_date}</td>
<td className="py-1 pr-3 text-right font-mono">{fmtPrice(leg.mid)}</td>
<td className="py-1 pr-3 text-right font-mono text-slate-400">
{leg.bid != null && leg.ask != null ? `${fmtPrice(leg.bid)} / ${fmtPrice(leg.ask)}` : '—'}
</td>
<td className="py-1 pr-3 text-right font-mono text-slate-400">{leg.iv != null ? `${(leg.iv * 100).toFixed(1)}%` : '—'}</td>
<td className="py-1 pr-3 text-right font-mono text-slate-400">{leg.greeks ? leg.greeks.delta.toFixed(3) : (leg.option_type === 'stock' ? '1.000' : '—')}</td>
<td className="py-1 text-right font-mono">{exitLeg ? fmtPrice(exitLeg.mid) : '—'}</td>
</tr>
)
})}
</tbody>
</table>
</div>
<ResponsiveContainer width="100%" height={200}>
<AreaChart data={result.points}>
<defs>
@@ -884,6 +945,13 @@ export default function StrategyBuilder() {
// TODAY's chain may not have existed yet, or may have had a very different strike
// ladder, on a date a past Replay window actually starts from.
const [chainAsOf, setChainAsOf] = useState<string>('')
// Three distinct jobs this page does, kept visually separate per user feedback (a single
// long vertical page mixed "build a hypothetical position," "derive one from what
// actually happened," and "test a fixed position against real history" together):
// Construire = manual scenario + optimizer against a hypothetical. Dériver = auto-scenario
// from a REAL historical window, then optimize under it. Tester = replay fixed legs
// against real quotes day by day. All three share symbol/legs/chainAsOf.
const [mode, setMode] = useState<'build' | 'derive' | 'replay'>('build')
const [constraints, setConstraints] = useState<OptimizeConstraints>({
max_legs: 4, delta_threshold: 0.15, max_loss_cap: null, objective: 'net_pnl', top_n: 20,
})
@@ -929,11 +997,14 @@ export default function StrategyBuilder() {
useEffect(() => {
if (!chain || legs.length === 0) return
const t = setTimeout(() => {
priceMutation.mutate({ scenario, legs })
// Keep pricing consistent with whatever chain the Jambes editor is actually showing
// (chainAsOf) — otherwise a leg picked from a pinned historical chain would silently
// get priced against today's live one instead.
priceMutation.mutate({ scenario: { ...scenario, as_of: chainAsOf || undefined }, legs })
}, 400)
return () => clearTimeout(t)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(scenario), JSON.stringify(legs), chain])
}, [JSON.stringify(scenario), JSON.stringify(legs), chain, chainAsOf])
const priced = priceMutation.data
@@ -953,7 +1024,7 @@ export default function StrategyBuilder() {
const handleOptimize = () => {
setActiveTemplate(null)
optimizeMutation.mutate({ scenario, constraints, greek_profile: greekProfile })
optimizeMutation.mutate({ scenario: { ...scenario, as_of: chainAsOf || undefined }, constraints, greek_profile: greekProfile })
}
const handleSelectCandidate = (c: StrategyCandidate) => {
@@ -961,6 +1032,37 @@ export default function StrategyBuilder() {
setLegs(c.legs)
}
// ── Dériver d'un historique ────────────────────────────────────────────────
const deriveBounds = saxoSymbols?.find(s => s.symbol.toUpperCase() === debouncedSymbol.toUpperCase())
const [deriveStart, setDeriveStart] = useState('')
const [deriveEnd, setDeriveEnd] = useState('')
const { mutate: computeRealized, data: realized, isPending: realizedPending, error: realizedError, reset: resetRealized } = useRealizedScenario()
useEffect(() => {
if (deriveBounds && !deriveStart && !deriveEnd) {
setDeriveEnd(deriveBounds.last_date.slice(0, 10))
const end = new Date(deriveBounds.last_date.slice(0, 10))
const start = new Date(Math.max(end.getTime() - 7 * 86400000, new Date(deriveBounds.first_date.slice(0, 10)).getTime()))
setDeriveStart(start.toISOString().slice(0, 10))
}
}, [deriveBounds]) // eslint-disable-line react-hooks/exhaustive-deps
const runDeriveOptimize = () => {
if (!realized) return
const derived: StrategyScenario = {
...scenario,
spot_shock_pct: realized.spot_shock_pct,
iv_level_shift: realized.iv_level_shift ?? scenario.iv_level_shift,
horizon_days: realized.horizon_days,
as_of: deriveStart,
}
setScenario(derived)
setHorizonDays(realized.horizon_days)
setChainAsOf(deriveStart)
setActiveTemplate(null)
optimizeMutation.mutate({ scenario: derived, constraints, greek_profile: greekProfile })
}
const handleLoadScenario = (s: SavedScenario) => {
setSymbol(s.symbol)
setHorizonDays(s.horizon_days)
@@ -1009,16 +1111,133 @@ export default function StrategyBuilder() {
</div>
)}
<ScenarioPanel symbol={symbol} setSymbol={setSymbol} onCommitSymbol={commitSymbol} horizonDays={horizonDays} setHorizonDays={setHorizonDays}
<SymbolPanel symbol={symbol} setSymbol={setSymbol} onCommitSymbol={commitSymbol} horizonDays={horizonDays} setHorizonDays={setHorizonDays}
scenario={scenario} setScenario={setScenario} watchlistTickers={watchlistTickers} />
<div className="flex gap-1 border-b border-slate-700/40">
{([
['build', 'Construire', 'Scénario manuel + jambes + optimiseur — fabriquer une stratégie dans l\'absolu'],
['derive', 'Dériver d\'un historique', 'Scénario calculé depuis un vrai mouvement passé, puis optimiseur dessus'],
['replay', 'Tester (Replay)', 'Marque au marché des jambes fixes contre l\'historique Saxo réel'],
] as const).map(([key, label, title]) => (
<button
key={key}
onClick={() => setMode(key)}
title={title}
className={clsx('px-4 py-2 text-sm font-semibold border-b-2 -mb-px transition-colors', {
'border-blue-500 text-white': mode === key,
'border-transparent text-slate-500 hover:text-slate-300': mode !== key,
})}
>
{label}
</button>
))}
</div>
{mode === 'build' && (
<>
<ScenarioSlidersPanel scenario={scenario} setScenario={setScenario} />
<ScenarioLibrary symbol={debouncedSymbol} scenario={scenario} onLoad={handleLoadScenario} />
<SavedStrategiesLibrary symbol={debouncedSymbol} onLoad={(legs, templateName) => { setActiveTemplate(templateName); setLegs(legs) }} />
</>
)}
{chainLoading && <div className="card-sm text-xs text-slate-500">Chargement de la chaîne réelle ({debouncedSymbol})…</div>}
{chain && <ScenarioGrid chain={chain} spot={chain.spot} scenario={scenario} setScenario={setScenario} />}
{chain && <VolSurfaceHeatmap chain={chain} spot={chain.spot} />}
{mode === 'build' && chain && <ScenarioGrid chain={chain} spot={chain.spot} scenario={scenario} setScenario={setScenario} />}
{mode === 'build' && chain && <VolSurfaceHeatmap chain={chain} spot={chain.spot} />}
{mode === 'derive' && (
<div className="card space-y-3">
<div className="stat-label">Scénario dérivé d'un historique réel</div>
<p className="text-[11px] text-slate-500">
Calcule le mouvement de spot et d'IV ATM réellement survenu entre deux dates (vraies cotations Saxo captées, pas une hypothèse), puis l'utilise comme scénario pour l'optimiseur — "qu'aurait-il fallu faire pour ce mouvement-là ?"
Tilt skew et pente du terme ne sont pas dérivés (comparer deux smiles réels de façon fiable est un exercice à part) — ils restent à 0, ajustables ensuite dans l'onglet Construire.
</p>
{!deriveBounds && <div className="text-xs text-slate-600">Aucun historique Saxo pour ce symbole.</div>}
{deriveBounds && (
<>
<div className="flex items-end gap-3 flex-wrap">
<div>
<label className="text-xs text-slate-400 block mb-1">Du</label>
<input
type="date" value={deriveStart} min={deriveBounds.first_date.slice(0, 10)} max={deriveBounds.last_date.slice(0, 10)}
onChange={(e) => { setDeriveStart(e.target.value); resetRealized() }}
className="bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-sm text-white"
/>
</div>
<div>
<label className="text-xs text-slate-400 block mb-1">Au</label>
<input
type="date" value={deriveEnd} min={deriveBounds.first_date.slice(0, 10)} max={deriveBounds.last_date.slice(0, 10)}
onChange={(e) => { setDeriveEnd(e.target.value); resetRealized() }}
className="bg-dark-700 border border-slate-700/50 rounded px-2 py-1.5 text-sm text-white"
/>
</div>
<button
onClick={() => deriveStart && deriveEnd && computeRealized({ symbol: debouncedSymbol, start_date: deriveStart, end_date: deriveEnd })}
disabled={realizedPending || !deriveStart || !deriveEnd}
className="flex items-center gap-1.5 text-xs bg-blue-600 hover:bg-blue-500 disabled:opacity-50 text-white px-3 py-1.5 rounded font-semibold"
>
<RefreshCw className={clsx('w-3.5 h-3.5', realizedPending && 'animate-spin')} />
{realizedPending ? 'Calcul…' : 'Calculer le mouvement réalisé'}
</button>
</div>
{realizedError && (
<div className="text-xs text-red-300">{(realizedError as any)?.response?.data?.detail ?? 'Erreur de calcul.'}</div>
)}
{realized && (
<div className="space-y-3">
<div className="flex flex-wrap gap-4 text-xs bg-dark-700/40 border border-slate-700/40 rounded px-3 py-2">
<span className="text-slate-400">
Spot : <span className="text-white font-semibold">{fmtPrice(realized.spot_a)} → {fmtPrice(realized.spot_b)}</span>
{' '}(<span className={realized.spot_shock_pct >= 0 ? 'text-emerald-400' : 'text-red-400'}>{realized.spot_shock_pct >= 0 ? '+' : ''}{realized.spot_shock_pct.toFixed(2)}%</span>)
</span>
{realized.iv_a != null && realized.iv_b != null ? (
<span className="text-slate-400">
IV ATM : <span className="text-white font-semibold">{(realized.iv_a * 100).toFixed(1)}% → {(realized.iv_b * 100).toFixed(1)}%</span>
{' '}(<span className={((realized.iv_level_shift ?? 0) >= 0) ? 'text-orange-400' : 'text-blue-400'}>{(realized.iv_level_shift ?? 0) >= 0 ? '+' : ''}{((realized.iv_level_shift ?? 0) * 100).toFixed(1)}pts</span>)
</span>
) : (
<span className="text-slate-600">IV ATM indisponible à l'une des deux dates</span>
)}
<span className="text-slate-400">Sur <span className="text-white font-semibold">{realized.horizon_days}j</span></span>
</div>
<OptimizerPanel constraints={constraints} setConstraints={setConstraints} onRun={runDeriveOptimize} isRunning={optimizeMutation.isPending} />
</div>
)}
</>
)}
{optimizeMutation.isError && (
<div className="px-4 py-3 rounded border border-red-700/40 bg-red-900/10 text-xs text-red-300">
{(optimizeMutation.error as any)?.response?.data?.detail ?? "Erreur lors de l'optimisation."}
</div>
)}
{optimizeMutation.data && optimizeMutation.data.warnings.length > 0 && (
<div className="space-y-1.5">
{optimizeMutation.data.warnings.map((w, i) => (
<div key={i} className="flex items-start gap-2 px-3 py-2 rounded border border-amber-700/40 bg-amber-900/10 text-xs text-amber-300">
<AlertTriangle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
<span>{w}</span>
</div>
))}
</div>
)}
{optimizeMutation.data && (
<>
<ResultsTable results={optimizeMutation.data.candidates} onSelect={handleSelectCandidate} />
<p className="text-[11px] text-slate-500">
Une jambe sélectionnée ci-dessus alimente l'éditeur de jambes plus bas — passe ensuite à l'onglet <strong>Tester (Replay)</strong> pour voir comment cette structure se serait réellement comportée sur cette même fenêtre.
</p>
</>
)}
</div>
)}
{chain && (
<div className="card space-y-3">
@@ -1128,14 +1347,14 @@ export default function StrategyBuilder() {
</div>
)}
{chain && legs.length > 0 && (
{mode === 'replay' && chain && legs.length > 0 && (
<ReplayCard
symbol={debouncedSymbol} legs={legs} contractSize={scenario.contract_size ?? 100_000}
chainAsOf={chainAsOf} onUseAsChainAsOf={setChainAsOf}
/>
)}
{chain && (
{mode === 'build' && chain && (
<>
<SuggestedProfileCard
scenario={scenario} enabled={!!chain}
@@ -1152,12 +1371,12 @@ export default function StrategyBuilder() {
</>
)}
{optimizeMutation.isError && (
{mode === 'build' && optimizeMutation.isError && (
<div className="px-4 py-3 rounded border border-red-700/40 bg-red-900/10 text-xs text-red-300">
{(optimizeMutation.error as any)?.response?.data?.detail ?? "Erreur lors de l'optimisation."}
</div>
)}
{optimizeMutation.data && optimizeMutation.data.warnings.length > 0 && (
{mode === 'build' && optimizeMutation.data && optimizeMutation.data.warnings.length > 0 && (
<div className="space-y-1.5">
{optimizeMutation.data.warnings.map((w, i) => (
<div key={i} className="flex items-start gap-2 px-3 py-2 rounded border border-amber-700/40 bg-amber-900/10 text-xs text-amber-300">
@@ -1167,18 +1386,18 @@ export default function StrategyBuilder() {
))}
</div>
)}
{optimizeMutation.data && (
{mode === 'build' && optimizeMutation.data && (
<ResultsTable results={optimizeMutation.data.candidates} onSelect={handleSelectCandidate} />
)}
{priceMutation.isPending && <div className="card-sm text-xs text-slate-500">Calcul en cours…</div>}
{priceMutation.isError && (
{mode === 'build' && priceMutation.isPending && <div className="card-sm text-xs text-slate-500">Calcul en cours…</div>}
{mode === 'build' && priceMutation.isError && (
<div className="px-4 py-3 rounded border border-red-700/40 bg-red-900/10 text-xs text-red-300">
Erreur de pricing — vérifiez les jambes sélectionnées.
</div>
)}
{priced && (
{mode === 'build' && priced && (
<>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<div className="card-sm">