import { type CSSProperties, useEffect, useMemo, useState } from 'react'; import { apiFetch } from '../utils/api'; import { avgPriceDiffColorRule, computePollingIntervalMs, computeSharedDomain, preparePnlSeries, seriesToSvgPath, } from '../utils/backtestValidation'; import { buildRefreshSessionPlan, buildLiveSummaryModel, formatLiveTableCell, getLiveChartVisibility, inferLiveTableColumns, normalizeLiveChartPayload, normalizeLiveTableRows, shouldShowNoLiveSessions, selectLiveSessionState, applyLiveAutoRefreshToggle, } from '../utils/liveSessionUi'; type FileEntry = { name: string; path: string; size: number; modified_at: string; symbol_guess?: string | null }; type Point = { ts: string; value: number }; type ChartSeries = { name: string; color: string; data: Point[] }; type LiveSessionStatus = 'running' | 'stopped' | 'error' | 'unknown'; type LiveSessionEntry = { name: string; display_name?: string | null; path: string; root_label?: string | null; stale_duplicate?: boolean; exchange?: string | null; timeframe?: string | null; status?: LiveSessionStatus; updated_at?: string | null; }; type LiveSessionInspect = { path: string; name?: string; exchange?: string | null; timeframe?: string | null; status?: string | null; started_at?: string | null; updated_at?: string | null; open_legs?: number; filled_orders?: number; last_debug_event?: { level?: string; event_type?: string; ts?: string } | null; last_equity_ts?: string | null; }; type LiveChartPayload = { live?: Point[]; backtest?: Point[]; distance?: Point[]; sources?: Record; warnings?: string[]; approximate?: boolean }; type LiveTableKind = 'open_positions' | 'orders' | 'debug_events' | 'stdio'; type TableStateMap = Record; type TableLoadingMap = Record; type TableErrorMap = Record; const colors = { bg: '#070B16', sidebar: 'rgba(10, 16, 30, 0.92)', card: '#111827', card2: '#151C2E', border: '#263246', accent: '#22D3EE', accentHover: '#06B6D4', text: '#F8FAFC', muted: '#94A3B8', danger: '#EF4444', success: '#10B981', warning: '#FDBA74', }; const shellStyle: CSSProperties = { minHeight: '100vh', width: '100%', maxWidth: '100%', background: colors.bg, color: colors.text, fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', overflowX: 'hidden', }; const sidebarStyle: CSSProperties = { position: 'fixed', left: 0, top: 0, bottom: 0, width: 64, background: colors.sidebar, borderRight: `1px solid ${colors.border}`, display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '18px 0', zIndex: 20, backdropFilter: 'blur(12px)', }; const logoStyle: CSSProperties = { width: 34, height: 34, borderRadius: 8, background: `linear-gradient(135deg, ${colors.accent}, #0EA5E9 54%, #8B5CF6)`, color: '#03131A', display: 'grid', placeItems: 'center', fontWeight: 1000, letterSpacing: 0, boxShadow: '0 0 28px rgba(34, 211, 238, 0.28)', }; const navIconStyle: CSSProperties = { width: 34, height: 34, borderRadius: 8, display: 'grid', placeItems: 'center', color: colors.muted, fontSize: 12, fontWeight: 900, }; const activeIconStyle: CSSProperties = { ...navIconStyle, color: colors.accent, background: 'rgba(34, 211, 238, 0.12)', boxShadow: '0 0 22px rgba(34, 211, 238, 0.18)', }; const topbarStyle: CSSProperties = { height: 60, borderBottom: `1px solid ${colors.border}`, background: 'rgba(10, 16, 30, 0.84)', display: 'flex', alignItems: 'center', padding: '0 28px 0 92px', gap: 24, backdropFilter: 'blur(16px)', }; const navLinkStyle: CSSProperties = { color: colors.muted, fontSize: 13, fontWeight: 700, textDecoration: 'none', }; const activeNavLinkStyle: CSSProperties = { ...navLinkStyle, color: colors.accent, borderBottom: `2px solid ${colors.accent}`, padding: '22px 0 18px', }; const mainStyle: CSSProperties = { width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'hidden', }; const labelStyle: CSSProperties = { display: 'block', color: '#CBD5E1', fontSize: 12, fontWeight: 800, marginBottom: 8, }; const sectionTitleStyle: CSSProperties = { margin: 0, color: colors.text, fontSize: 16, fontWeight: 950, }; const fieldHintStyle: CSSProperties = { marginTop: 8, color: colors.muted, fontSize: 12, lineHeight: 1.45, }; const cardStyle: CSSProperties = { background: 'linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(13, 20, 34, 0.98))', border: `1px solid ${colors.border}`, borderRadius: 8, boxShadow: '0 22px 60px rgba(0, 0, 0, 0.32)', width: '100%', maxWidth: '100%', minWidth: 0, overflow: 'hidden', }; const inputStyle: CSSProperties = { width: '100%', height: 40, borderRadius: 6, border: `1px solid ${colors.border}`, background: '#0B1220', color: colors.text, padding: '0 12px', outline: 'none', boxSizing: 'border-box', }; const buttonStyle: CSSProperties = { height: 40, borderRadius: 6, border: `1px solid ${colors.border}`, background: colors.card2, color: colors.text, padding: '0 16px', fontWeight: 800, cursor: 'pointer', }; const primaryButtonStyle: CSSProperties = { ...buttonStyle, border: `1px solid ${colors.accent}`, background: `linear-gradient(180deg, ${colors.accent}, ${colors.accentHover})`, color: '#041018', boxShadow: '0 0 28px rgba(34, 211, 238, 0.22)', }; const preStyle: CSSProperties = { color: '#CBD5E1', background: '#0B1220', border: `1px solid ${colors.border}`, padding: 12, borderRadius: 6, overflow: 'auto', }; function LineChart({ title, series }: { title: string; series: ChartSeries[] }) { const [hiddenLayers, setHiddenLayers] = useState>({}); const width = 920; const height = 320; const padding = 46; const visibleSeries = series.filter(s => !hiddenLayers[s.name]); const visibleDataSeries = visibleSeries.filter(s => s.data.length > 0); const domain = computeSharedDomain(visibleSeries); const toggleLayer = (name: string) => setHiddenLayers(prev => ({ ...prev, [name]: !prev[name] })); const showAllLayers = () => setHiddenLayers({}); if (!domain.pointCount) return
{title}: No data
; const { xMin, xMax, yMin, yMax } = domain; const hasTimeX = xMax > 10_000_000_000; const fmtTime = (ms: number) => { if (!Number.isFinite(ms)) return ''; return new Date(ms).toISOString().slice(5, 16).replace('T', ' '); }; const yTickVals = [yMin, (yMin + yMax) / 2, yMax]; const xTickVals = [xMin, (xMin + xMax) / 2, xMax]; return (

{title}

{series.map(s => { const active = !hiddenLayers[s.name]; const disabled = active && s.data.length > 0 && visibleDataSeries.length <= 1; return ( ); })} {visibleSeries.length < series.length && ( )}
{yTickVals.map((v, i) => { const y = height - padding - ((v - yMin) / (Math.max(1e-9, yMax - yMin))) * (height - padding * 2); return ( {v.toFixed(2)} ); })} {xTickVals.map((v, i) => { const x = padding + ((v - xMin) / (Math.max(1e-9, xMax - xMin))) * (width - padding * 2); return ( {hasTimeX ? fmtTime(v) : v.toFixed(0)} ); })} {visibleSeries.map(s => { const pts = s.data.map((d, i) => { const tsMs = Date.parse(String(d.ts || '')); return { x: Number.isFinite(tsMs) ? tsMs : i, y: Number(d.value) || 0, ts: d.ts }; }); const path = seriesToSvgPath(pts, width, height, padding, domain); return ; })} Y: value X: {hasTimeX ? 'timestamp' : 'index'}
{visibleSeries.map(s => ( {s.name} ))}
); } const LIVE_TABLE_DEFS: { kind: LiveTableKind; title: string; emptyLabel: string }[] = [ { kind: 'open_positions', title: 'Latest open positions', emptyLabel: 'No open positions' }, { kind: 'orders', title: 'Latest orders', emptyLabel: 'No orders' }, { kind: 'debug_events', title: 'Latest debug events', emptyLabel: 'No debug events' }, { kind: 'stdio', title: 'Latest stdio log lines', emptyLabel: 'No stdio lines' }, ]; const STATUS_COLOR_MAP: Record = { running: '#16a34a', stopped: '#64748b', error: '#dc2626', unknown: '#94a3b8', }; const DEBUG_LEVEL_COLOR_MAP: Record = { error: '#dc2626', warn: '#d97706', warning: '#d97706', info: '#0284c7', debug: '#7c3aed', }; const PAGE_VERSION = 'v2026.04.20-3'; function fmtTs(ts?: string | null) { if (!ts) return '—'; const dt = new Date(ts); if (!Number.isFinite(dt.getTime())) return String(ts); return dt.toISOString().replace('T', ' ').slice(0, 19); } function normalizeStatus(value: any): LiveSessionStatus { const s = String(value || '').toLowerCase(); if (s === 'running' || s === 'stopped' || s === 'error') return s; return 'unknown'; } function normalizeLiveSessionEntry(raw: any): LiveSessionEntry { return { name: String(raw?.name || raw?.path || 'unknown_session'), display_name: raw?.display_name != null ? String(raw.display_name) : null, path: String(raw?.path || ''), root_label: raw?.root_label != null ? String(raw.root_label) : null, stale_duplicate: !!raw?.stale_duplicate, exchange: raw?.exchange != null ? String(raw.exchange) : null, timeframe: raw?.timeframe != null ? String(raw.timeframe) : null, status: normalizeStatus(raw?.status), updated_at: raw?.updated_at != null ? String(raw.updated_at) : null, }; } function normalizeLiveSessionInspect(raw: any): LiveSessionInspect { const debug = raw?.last_debug_event && typeof raw.last_debug_event === 'object' ? raw.last_debug_event : null; return { path: String(raw?.path || ''), name: raw?.name != null ? String(raw.name) : undefined, exchange: raw?.exchange != null ? String(raw.exchange) : null, timeframe: raw?.timeframe != null ? String(raw.timeframe) : null, status: normalizeStatus(raw?.status), started_at: raw?.started_at != null ? String(raw.started_at) : null, updated_at: raw?.updated_at != null ? String(raw.updated_at) : null, open_legs: Number.isFinite(Number(raw?.open_legs)) ? Number(raw.open_legs) : 0, filled_orders: Number.isFinite(Number(raw?.filled_orders)) ? Number(raw.filled_orders) : 0, last_debug_event: debug ? { level: debug.level != null ? String(debug.level) : undefined, event_type: debug.event_type != null ? String(debug.event_type) : undefined, ts: debug.ts != null ? String(debug.ts) : undefined, } : null, last_equity_ts: raw?.last_equity_ts != null ? String(raw.last_equity_ts) : null, }; } function normalizeLiveSessionStatus(raw: any): LiveSessionInspect { return normalizeLiveSessionInspect(raw || {}); } function emptyLiveTables(): TableStateMap { return { open_positions: [], orders: [], debug_events: [], stdio: [] }; } function emptyLiveTableLoading(): TableLoadingMap { return { open_positions: false, orders: false, debug_events: false, stdio: false }; } function emptyLiveTableErrors(): TableErrorMap { return { open_positions: null, orders: null, debug_events: null, stdio: null }; } export default function BacktestLiveValidationPage() { const [files, setFiles] = useState([]); const [selectedPath, setSelectedPath] = useState(''); const [inspect, setInspect] = useState(null); const [runData, setRunData] = useState(null); const [runId, setRunId] = useState(''); const [autoRefresh, setAutoRefresh] = useState(true); const [debugMode, setDebugMode] = useState(true); const [debugOpen, setDebugOpen] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [lastPayload, setLastPayload] = useState(null); const [lastRefreshTs, setLastRefreshTs] = useState(''); const [normalizePnl, setNormalizePnl] = useState(false); const [liveSessions, setLiveSessions] = useState([]); const [selectedLivePath, setSelectedLivePath] = useState(''); const [liveInspect, setLiveInspect] = useState(null); const [liveStatus, setLiveStatus] = useState(null); const [liveCharts, setLiveCharts] = useState(null); const [liveTables, setLiveTables] = useState(emptyLiveTables()); const [liveAutoRefresh, setLiveAutoRefresh] = useState(false); const [liveLastRefreshTs, setLiveLastRefreshTs] = useState(''); const [liveListLoading, setLiveListLoading] = useState(false); const [liveListError, setLiveListError] = useState(null); const [liveInspectLoading, setLiveInspectLoading] = useState(false); const [liveInspectError, setLiveInspectError] = useState(null); const [liveStatusLoading, setLiveStatusLoading] = useState(false); const [liveStatusError, setLiveStatusError] = useState(null); const [liveChartLoading, setLiveChartLoading] = useState(false); const [liveChartError, setLiveChartError] = useState(null); const [liveTableLoading, setLiveTableLoading] = useState(emptyLiveTableLoading()); const [liveTableErrors, setLiveTableErrors] = useState(emptyLiveTableErrors()); const pollingIntervalMs = useMemo(() => computePollingIntervalMs(inspect?.bar_interval_seconds || runData?.inspect?.bar_interval_seconds || 60), [inspect?.bar_interval_seconds, runData?.inspect?.bar_interval_seconds]); const livePollingIntervalMs = useMemo(() => computePollingIntervalMs(liveStatus?.open_legs ? 15 : 20), [liveStatus?.open_legs]); const selectedLiveEntry = useMemo(() => liveSessions.find(s => s.path === selectedLivePath) || null, [liveSessions, selectedLivePath]); const liveSeries = useMemo(() => { const norm = normalizeLiveChartPayload(liveCharts || {}); return { live: norm.live || [], backtest: norm.backtest || [], distance: norm.distance || [] }; }, [liveCharts]); const liveChartMeta = useMemo(() => normalizeLiveChartPayload(liveCharts || {}), [liveCharts]); async function refreshLiveSessions(keepPath = true) { setLiveListLoading(true); setLiveListError(null); try { const r = await apiFetch('/api/backtest_live_validation/live_sessions'); if (!r.ok) throw new Error('live sessions load failed'); const d = await r.json().catch(() => ({})); const sessions = (Array.isArray(d?.sessions) ? d.sessions : []).map(normalizeLiveSessionEntry).filter((s: LiveSessionEntry) => !!s.path); setLiveSessions(sessions); if (keepPath && selectedLivePath && !sessions.some((s: LiveSessionEntry) => s.path === selectedLivePath)) { setSelectedLivePath(''); } } catch (e: any) { setLiveListError(e?.message || 'live sessions load failed'); setLiveSessions([]); } finally { setLiveListLoading(false); } } useEffect(() => { apiFetch('/api/backtest_live_validation/files') .then(r => r.json()) .then(d => setFiles(Array.isArray(d?.files) ? d.files : [])) .catch(() => setFiles([])); refreshLiveSessions(false); }, []); useEffect(() => { if (!runId || !autoRefresh) return; const timer = setInterval(() => { apiFetch(`/api/backtest_live_validation/run/${runId}/poll`) .then(r => r.json()) .then(d => { setRunData((prev: any) => ({ ...prev, ...d, pnl_chart: { ...(prev?.pnl_chart || {}), ...(d?.pnl_chart || {}) }, margin_chart: { ...(prev?.margin_chart || {}), ...(d?.margin_chart || {}) }, stats: { ...(prev?.stats || {}), ...(d?.stats || {}) }, })); setLastPayload(d); setLastRefreshTs(new Date().toISOString()); }) .catch(() => undefined); }, pollingIntervalMs); return () => clearInterval(timer); }, [runId, autoRefresh, pollingIntervalMs]); useEffect(() => { if (!selectedLivePath || !liveAutoRefresh) return; const timer = setInterval(() => { loadLiveStatus(selectedLivePath, { silent: true }); }, livePollingIntervalMs); return () => clearInterval(timer); }, [selectedLivePath, liveAutoRefresh, livePollingIntervalMs]); async function inspectPath(path: string) { setSelectedPath(path); setRunId(''); setRunData(null); if (!path) return; setLoading(true); setError(null); const payload = { path }; setLastPayload(payload); try { const r = await apiFetch('/api/backtest_live_validation/inspect', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); if (!r.ok) throw new Error('Inspect failed'); setInspect(await r.json()); } catch (e: any) { setError(e?.message || 'inspect failed'); setInspect(null); } finally { setLoading(false); } } async function inspectLiveSession(path: string) { const state = selectLiveSessionState({ liveInspect, liveStatus, liveCharts, liveTables, selectedLivePath }, path); setSelectedLivePath(state.selectedLivePath); setLiveInspect(state.liveInspect); setLiveStatus(state.liveStatus); setLiveCharts(state.liveCharts); setLiveTables(state.liveTables); setLiveTableErrors(emptyLiveTableErrors()); if (!path) return; setLiveInspectLoading(true); setLiveInspectError(null); try { const r = await apiFetch('/api/backtest_live_validation/live_session/inspect', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path }), }); if (!r.ok) throw new Error('Live inspect failed'); const data = normalizeLiveSessionInspect(await r.json()); setLiveInspect(data); setLiveLastRefreshTs(new Date().toISOString()); } catch (e: any) { setLiveInspectError(e?.message || 'live inspect failed'); } finally { setLiveInspectLoading(false); } } async function loadLiveStatus(path = selectedLivePath, opts: { silent?: boolean } = {}) { if (!path) return; if (!opts.silent) { setLiveStatusLoading(true); setLiveStatusError(null); } try { const r = await apiFetch(`/api/backtest_live_validation/live_session/status?path=${encodeURIComponent(path)}`); if (!r.ok) throw new Error('Live status failed'); const d = normalizeLiveSessionStatus(await r.json()); setLiveStatus(d); setLiveLastRefreshTs(new Date().toISOString()); } catch (e: any) { if (!opts.silent) setLiveStatusError(e?.message || 'live status failed'); } finally { if (!opts.silent) setLiveStatusLoading(false); } } async function loadLiveChart(path = selectedLivePath) { if (!path) return; setLiveChartLoading(true); setLiveChartError(null); try { const r = await apiFetch(`/api/backtest_live_validation/live_session/chart?path=${encodeURIComponent(path)}`); if (!r.ok) throw new Error('Live chart failed'); setLiveCharts(normalizeLiveChartPayload(await r.json())); setLiveLastRefreshTs(new Date().toISOString()); } catch (e: any) { setLiveChartError(e?.message || 'live chart failed'); setLiveCharts(normalizeLiveChartPayload({})); } finally { setLiveChartLoading(false); } } async function loadLiveTable(kind: LiveTableKind, path = selectedLivePath) { if (!path) return; setLiveTableLoading(prev => ({ ...prev, [kind]: true })); setLiveTableErrors(prev => ({ ...prev, [kind]: null })); try { const r = await apiFetch(`/api/backtest_live_validation/live_session/table?path=${encodeURIComponent(path)}&kind=${kind}`); if (!r.ok) throw new Error(`Live ${kind} failed`); const d = await r.json(); setLiveTables(prev => ({ ...prev, [kind]: normalizeLiveTableRows(d?.rows) })); setLiveLastRefreshTs(new Date().toISOString()); } catch (e: any) { setLiveTables(prev => ({ ...prev, [kind]: [] })); setLiveTableErrors(prev => ({ ...prev, [kind]: e?.message || `live ${kind} failed` })); } finally { setLiveTableLoading(prev => ({ ...prev, [kind]: false })); } } async function refreshSelectedLiveSession() { const plan = buildRefreshSessionPlan(selectedLivePath); if (!plan.length) return; await inspectLiveSession(selectedLivePath); await loadLiveStatus(selectedLivePath); } async function onUpload(file: File) { setError(null); setLoading(true); try { const fd = new FormData(); fd.append('file', file); const r = await apiFetch('/api/backtest_live_validation/upload', { method: 'POST', body: fd }); if (!r.ok) { const txt = await r.text().catch(() => ''); throw new Error(txt || `upload failed (HTTP ${r.status})`); } const d = await r.json(); setSelectedPath(d.path); setInspect(d.inspect); setRunId(''); setRunData(null); setLastPayload({ upload: file.name, upload_response: d }); } catch (e: any) { setError(e?.message || 'upload failed'); } finally { setLoading(false); } } async function runComparison() { if (!selectedPath) return; setLoading(true); setError(null); const payload = { path: selectedPath, auto_fetch_live: !selectedLivePath, live_path: selectedLivePath || undefined, run_match: true, debug: debugMode, }; setLastPayload(payload); try { const r = await apiFetch('/api/backtest_live_validation/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), }); if (!r.ok) { let detail = ''; try { const body = await r.json(); const d = body?.detail ?? body; detail = typeof d === 'string' ? d : JSON.stringify(d); } catch { detail = await r.text().catch(() => ''); } throw new Error(detail || `run failed (HTTP ${r.status})`); } const d = await r.json(); setRunId(d.run_id); const details = await apiFetch(`/api/backtest_live_validation/run/${d.run_id}`).then(x => x.json()); setRunData(details); setLastRefreshTs(new Date().toISOString()); } catch (e: any) { setError(e?.message || 'run failed'); } finally { setLoading(false); } } function statusBadge(status?: string | null) { const key = normalizeStatus(status); const bg = STATUS_COLOR_MAP[key] || STATUS_COLOR_MAP.unknown; return {key}; } function renderLiveTable(kind: LiveTableKind, title: string, emptyLabel: string) { const rows = liveTables[kind] || []; const loading = liveTableLoading[kind]; const err = liveTableErrors[kind]; const columns = inferLiveTableColumns(rows); return (
{title}
{err &&
{err}
} {!rows.length ? (
{emptyLabel}
) : (
{columns.map(col => ( ))} {rows.map((row: any, rowIdx: number) => ( {columns.map(col => ( ))} ))}
{col}
{formatLiveTableCell(col, row?.[col])}
)}
); } const avgDiffColor = runData?.stats?.comparison?.avg_price_diff_color || avgPriceDiffColorRule(runData?.stats?.live?.current_average_price, runData?.stats?.backtest?.current_average_price); const alignedPnl = preparePnlSeries(runData?.pnl_chart?.backtest || [], runData?.pnl_chart?.live || [], normalizePnl); const pnlDomain = computeSharedDomain([{ data: alignedPnl.backtest }, { data: alignedPnl.live }]); const liveChartVisibility = getLiveChartVisibility(liveCharts); const liveChartSourceLabel = liveChartMeta.sources?.live ? `Source: ${liveChartMeta.sources.live}` : null; const summaryModel = buildLiveSummaryModel(selectedLivePath, selectedLiveEntry, liveInspect, liveStatus); const debugLevelColor = DEBUG_LEVEL_COLOR_MAP[String(summaryModel.debugLevel).toLowerCase()] || '#64748b'; return (
S Step
Run Backtest Backtest vs Live Circulators Product
Globe Alerts U
Backtests

Backtest vs Live Validation

Порівняння результатів історичного backtest із live runner session: графіки PNL, margin usage, slippage, статуси і raw debug для перевірки розбіжностей.

Page version: {PAGE_VERSION}

Source selection

Оберіть TradingView CSV, з якого будується порівняння з live сесією.
e.target.files?.[0] && onUpload(e.target.files[0])} />
{inspect && 
{JSON.stringify(inspect, null, 2)}
}

Live runner sessions

Показує тільки локальні runner sessions із `_reports/_live`; статус та час оновлення допомагають вибрати актуальну сесію.
{liveListError &&
{liveListError}
} {shouldShowNoLiveSessions(liveSessions, liveListLoading) &&
No live sessions
}
{!!selectedLivePath && ( <>

Live session summary

{liveInspectError &&

{liveInspectError}

} {liveStatusError &&

{liveStatusError}

} {liveChartError &&

{liveChartError}

}
Session path: {summaryModel.sessionPath}
Status: {statusBadge(summaryModel.status)}
Started: {fmtTs(summaryModel.startedAt)}
Last updated: {fmtTs(summaryModel.updatedAt)}
Exchange: {summaryModel.exchange}
Timeframe: {summaryModel.timeframe}
Current open legs: {summaryModel.openLegs}
Total filled orders: {summaryModel.filledOrders}
Last debug event:{' '} {String(summaryModel.debugLevel)} / {summaryModel.debugType}
Last equity timestamp: {fmtTs(summaryModel.lastEquityTs)}
{liveLastRefreshTs &&
Last live refresh: {liveLastRefreshTs}
}

Live charts

{(liveChartMeta.approximate || liveChartMeta.warnings?.length || liveChartSourceLabel) && (
{liveChartMeta.approximate ? 'Orders-only fallback: approximate notional chart, not real PnL.' : liveChartSourceLabel} {liveChartMeta.warnings?.length ? ` ${liveChartMeta.warnings.join(' ')}` : ''}
)} {liveChartVisibility.live ? :
No chart data
} {liveChartVisibility.overlay ? ( ) : (
Overlay unavailable (requires both live and backtest series)
)} {liveChartVisibility.distance && }

Session details tables

{LIVE_TABLE_DEFS.map(def => renderLiveTable(def.kind, def.title, def.emptyLabel))}
)}
Polling interval: {pollingIntervalMs} ms {lastRefreshTs && Last refresh: {lastRefreshTs}}
{error &&

{error}

} {runData && ( <> {runData?.fallback_canvas_url && (
Python matcher canvas (reference)
)}
PNL debug — bt points: {alignedPnl.backtest.length}, live points: {alignedPnl.live.length}, xMin: {new Date(pnlDomain.xMin).toISOString()}, xMax: {new Date(pnlDomain.xMax).toISOString()}, yMin: {pnlDomain.yMin.toFixed(6)}, yMax: {pnlDomain.yMax.toFixed(6)}, normalized: {String(normalizePnl)} 
Backtest\n{JSON.stringify(runData?.stats?.backtest || {}, null, 2)}
Live\n{JSON.stringify(runData?.stats?.live || {}, null, 2)}
Comparison 
{JSON.stringify(runData?.stats?.comparison || {}, null, 2)}
Avg price diff: {Number(runData?.stats?.comparison?.avg_price_diff || 0).toFixed(6)} ({avgDiffColor})
)}
{debugOpen && ( 
            {JSON.stringify({
              selected_backtest_file_path: selectedPath,
              selected_live_path: selectedLivePath,
              inspect,
              liveInspect,
              liveStatus,
              liveCharts,
              liveTables,
              api_request_payload: lastPayload,
              last_refresh_time: lastRefreshTs,
              live_last_refresh_time: liveLastRefreshTs,
              current_polling_interval: pollingIntervalMs,
              live_polling_interval: livePollingIntervalMs,
              backend_debug: runData?.debug,
              loading,
              liveListLoading,
              liveInspectLoading,
              liveStatusLoading,
              liveChartLoading,
              liveTableLoading,
            }, null, 2)}
)}
); }