` for the chart instance to survive re-renders
```typescript theme={null}
const chart = createChart(containerRef.current, {
layout: { background: { color: '#020617' }, textColor: '#94a3b8' },
grid: { vertLines: { color: '#1e293b' }, horzLines: { color: '#1e293b' } },
rightPriceScale: { borderColor: '#334155' },
timeScale: { borderColor: '#334155', timeVisible: true },
width: containerRef.current.clientWidth,
height: 420,
});
```
* [ ] On mount: fetch last 200 M15 bars from `GET /api/bars?symbol=BTCUSD&tf=M15&limit=200` (add this Next.js API route that proxies to the MT5 HTTP API)
* [ ] On each `SignalEvent`: append `signal.ohlcv` to `candleSeries.update()` — Lightweight Charts handles the scrolling automatically
* [ ] BUY/SELL markers: accumulate `markers` array from `signalStore.history`; call `candleSeries.setMarkers(markers)` on each update — Lightweight Charts re-renders only changed markers
* [ ] SL/TP lines: use `chart.addLineSeries({ lineStyle: LineStyle.Dashed })` for SL (rose) and TP (emerald); update `price` on position change; `series.setData([])` when no position open
* [ ] Confidence histogram panel: add `chart.addHistogramSeries({ priceScaleId: 'confidence', height: 80 })` — maps `signal.confidence` to bar height; color by direction
* [ ] ResizeObserver: watch container width changes → `chart.applyOptions({ width: newWidth })` for responsiveness
***
### 23.9 Neural attention heatmap
**ECharts heatmap config:**
```typescript theme={null}
const option = {
tooltip: { formatter: ({ data }) => `Bar ${data[0]}: ${data[1]} = ${data[2].toFixed(3)}` },
xAxis: { type: 'category', data: barLabels, // e.g., ["-48", "-47", ..., "0"]
axisLabel: { interval: 7 } },
yAxis: { type: 'category', data: featureNames.slice(0, 10) },
visualMap: { min: 0, max: 1, calculable: true,
inRange: { color: ['#1e3a5f', '#2563eb', '#ef4444'] } }, // blue→red
series: [{ type: 'heatmap', data: flatData,
itemStyle: { borderRadius: 2, borderWidth: 0.5, borderColor: '#0f172a' } }],
};
```
**Stagger animation:**
```typescript theme={null}
// On new signal, reset and re-animate each column with increasing delay
flatData.forEach((cell, i) => {
const col = cell[0];
setTimeout(() => {
updateCell(col, cell[1], cell[2]);
}, col * 8); // 8 ms per column × 48 columns = 384 ms total stagger
});
```
**Tasks:**
* [ ] `AttentionHeatmap.tsx`: use `echarts-for-react` wrapper; pass `option` as prop; `style={{ height: 280 }}`; update `option` via `useState` triggered by `signal.attention_weights`
* [ ] Transform `attention_weights: number[48]` into `flatData`: for each of the top 10 features (by SHAP), duplicate the bar-level attention weight — weight is the same per bar regardless of feature (TFT VSN gives per-feature weights separately; show VSN weights on Y axis if available)
* [ ] Show placeholder `Attention available after Phase 22.4
` if `signal.attention_weights` is null
***
### 23.10 Equity curve + live P\&L panel
**Live P\&L tick calculation:**
```typescript theme={null}
const TICK_MS = 100;
const lotSize = openPosition?.lot ?? 0;
const direction = openPosition?.direction === 'BUY' ? 1 : -1;
useEffect(() => {
if (!openPosition) return;
const interval = setInterval(() => {
// Estimate tick P&L from last known close price in latest signal
const currentPrice = latestSignal?.ohlcv?.close ?? openPosition.entry;
const priceDiff = (currentPrice - openPosition.entry) * direction;
const pnl = priceDiff * lotSize * 100; // 100 USC per lot per point (BTCUSD CFD)
setLivePnl(pnl);
}, TICK_MS);
return () => clearInterval(interval);
}, [openPosition, latestSignal]);
```
**Tasks:**
* [ ] `EquityPanel.tsx`: `` from Recharts with gradient fill (`` — emerald above baseline, transparent below); data from `useEquityHistory` hook (Supabase query `SELECT equity, created_at FROM account_snapshots ORDER BY created_at DESC LIMIT 2000`)
* [ ] `useEquityHistory.ts`: initial query on mount + Supabase realtime subscription `supabase.channel('account_snapshots').on('postgres_changes', { event: 'INSERT' }, handler)`
* [ ] Live P\&L counter: `= 0 ? '#10b981' : '#f43f5e' }}>` with `transition={{ duration: 0.15 }}`; value formatted as `+$123.45` / `-$12.30` (raw USC with \$ prefix per CLAUDE.md)
* [ ] Today's stats row: derive from `signalStore.history` — `trades_today = history.filter(s => sameDay(s.ts))`, `wr_today = wins/trades_today`, `gross_pnl_today = sum of closed trade pnl from Supabase`
* [ ] Last 5 trades table: columns `Dir · Conf · P&L · Close Type`; `ML_EXIT` shown in emerald, `SL_HIT` in rose, `TP_HIT` in teal; sorted by close time descending
***
### 23.11 (Stretch) 3D equity surface — Three.js / R3F
**Surface data construction:**
Run `python scripts/surface_sweep.py` (new script) that iterates `confidence_threshold ∈ [0.55, 0.60, …, 0.85]` × rolling 90-day windows and records `cumulative_return` at each point. Output: `models/surface_data.json` with shape `(n_thresholds, n_days)`.
**Geometry construction:**
```typescript theme={null}
// surface[i][j] = equity at threshold i, day j
// Normalize: x = j / n_days, z = i / n_thresholds, y = equity / max_equity
const geometry = new THREE.PlaneGeometry(10, 10, n_days - 1, n_thresholds - 1);
surface.flat().forEach((equity, idx) => {
geometry.attributes.position.setY(idx, (equity / maxEquity) * 3); // Y = height
});
geometry.computeVertexNormals(); // for lighting
// Vertex colors (jet colormap)
const colors = surface.flat().map(e => jetColor(e / maxEquity));
geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colors.flat()), 3));
```
**Tasks:**
* [ ] `scripts/surface_sweep.py`: runs `backtest.py --oos-only` in a subprocess for each confidence threshold (7 values × 1 sweep = \~15 min total); outputs `models/surface_data.json`
* [ ] `components/dashboard/EquitySurface3D.tsx` using `@react-three/fiber`:
* `