/* global React, store, Panel, TickingPrice, Sparkline, severityPill */
// Pages: Scanner (multi-symbol indicators), Symbols, Options, Backtest, Bots, Settings
const { useState, useEffect, useMemo, useRef } = React;
// ================================================================
// SCANNER — compute many indicators across many symbols at once
// ================================================================
function ScannerPage({ app, quotes, onFocusSymbol }) {
// User's saved watchlist from /api/watchlist (SQLite-persisted). Replaces
// the legacy hardcoded store.WATCH array. Add/remove via the input + × icon.
const { items: watchlist, add: addToWatch, remove: removeFromWatch } = store.useWatchlist();
const allSymbols = useMemo(() => watchlist.map(w => w.symbol), [watchlist]);
const segByName = useMemo(() => {
const m = {};
for (const w of watchlist) m[w.symbol] = w.exchange_segment;
return m;
}, [watchlist]);
const [selected, setSelected] = useState(new Set());
// When the watchlist arrives or grows, default-select everything in it.
// Removing a symbol from the watchlist also removes it from the selection.
useEffect(() => {
setSelected(prev => {
const next = new Set(prev);
for (const s of allSymbols) if (!next.has(s)) next.add(s);
for (const s of Array.from(next)) if (!allSymbols.includes(s)) next.delete(s);
return next;
});
}, [allSymbols.join(",")]);
const [timeframe, setTimeframe] = useState("daily");
const [view, setView] = useState("table"); // table | heatmap | cards
const [sortKey, setSortKey] = useState(null);
const [sortDir, setSortDir] = useState("desc");
const [query, setQuery] = useState("");
const [addText, setAddText] = useState("");
const [addSeg, setAddSeg] = useState("ANY");
const [addError, setAddError] = useState(null);
const [searchResults, setSearchResults] = useState([]);
const [searchLoading, setSearchLoading] = useState(false);
const [searchError, setSearchError] = useState(null);
const searchReqIdRef = useRef(0);
// Filter the rendered list by the same text the user types into the
// "add symbol" input — same field doubles as a search. Empty text → show
// everything; partial text → substring match (case-insensitive).
const visibleSymbols = useMemo(() => {
if (!addText) return allSymbols;
const q = addText.toLowerCase();
return allSymbols.filter(s => s.toLowerCase().includes(q));
}, [allSymbols, addText]);
// Debounced master search. Hits /api/symbols/search (substring on the
// 260k-row scrip master) so suggestions are real, addable instruments —
// not the typed text. Stale responses are dropped via a request-id ref.
useEffect(() => {
const q = addText.trim();
if (q.length < 2) {
setSearchResults([]);
setSearchLoading(false);
setSearchError(null);
return;
}
const reqId = ++searchReqIdRef.current;
setSearchLoading(true);
setSearchError(null);
const t = setTimeout(async () => {
try {
const params = new URLSearchParams({ q, limit: "30" });
if (addSeg && addSeg !== "ANY") params.set("exchange_segment", addSeg);
const res = await fetch(`/api/symbols/search?${params.toString()}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const j = await res.json();
if (reqId !== searchReqIdRef.current) return;
setSearchResults(j.results || []);
setSearchLoading(false);
} catch (err) {
if (reqId !== searchReqIdRef.current) return;
setSearchError(err.message || String(err));
setSearchResults([]);
setSearchLoading(false);
}
}, 150);
return () => clearTimeout(t);
}, [addText, addSeg]);
const addFromResult = async (r) => {
try {
await addToWatch(r.symbol, r.exchange_segment);
setAddText("");
setAddError(null);
} catch (err) {
setAddError(err.message || String(err));
}
};
// Real indicators from /api/scan?fields=full — same engine as the per-symbol
// /analyse endpoint. Cache-backed (sub-ms per symbol when warm), 60s poll.
const selectedArr = useMemo(() => Array.from(selected), [selected]);
const { rows: scanRows, loading: scanLoading, meta: scanMeta } = useScanFull(selectedArr, timeframe, segByName);
// Overlay live LTP from quotes (5s cadence) on top of analyse rows (30s) so
// the price + 1D% column tick in real time while indicators stay coherent.
const rows = useMemo(() => {
return scanRows.map(r => {
const q = quotes[r.symbol];
if (!q || q.last == null) return r;
const prev = r.prev || q.price || q.last;
const chg_pct = prev ? ((q.last - prev) / prev) * 100 : (r.chg_pct ?? 0);
return { ...r, last: q.last, chg_pct, sparkline: q.sparkline };
});
}, [scanRows, quotes]);
const sorted = useMemo(() => {
const filtered = rows.filter(r => !query || r.symbol.toLowerCase().includes(query.toLowerCase()));
if (!sortKey) return filtered;
const copy = [...filtered];
copy.sort((a, b) => {
const av = a[sortKey];
const bv = b[sortKey];
if (av == null) return 1;
if (bv == null) return -1;
if (typeof av === "string") {
return sortDir === "asc" ? av.localeCompare(bv) : bv.localeCompare(av);
}
return sortDir === "asc" ? av - bv : bv - av;
});
return copy;
}, [rows, sortKey, sortDir, query]);
const sumStats = useMemo(() => {
const n = rows.length;
if (n === 0) return null;
return {
bull: rows.filter(r => r.bias === "BULLISH").length,
bear: rows.filter(r => r.bias === "BEARISH").length,
neut: rows.filter(r => r.bias === "NEUTRAL").length,
overbought: rows.filter(r => r.rsi14 > 70).length,
oversold: rows.filter(r => r.rsi14 < 30).length,
above50: rows.filter(r => r.above_ema50).length,
avg_rsi: rows.reduce((s, r) => s + r.rsi14, 0) / n,
avg_adx: rows.reduce((s, r) => s + r.adx, 0) / n,
};
}, [rows]);
const toggle = (sym) => {
setSelected(prev => {
const s = new Set(prev);
if (s.has(sym)) s.delete(sym); else s.add(sym);
return s;
});
};
const setAll = (on) => setSelected(new Set(on ? allSymbols : []));
const sortBy = (k) => {
if (sortKey === k) setSortDir(d => d === "asc" ? "desc" : "asc");
else { setSortKey(k); setSortDir("desc"); }
};
const sortIcon = (k) => sortKey === k ? (sortDir === "desc" ? " ▼" : " ▲") : "";
return (
{/* LEFT: symbol picker + summary. Grid with auto rows so each panel
collapses to its own content height — no panel stretches. Symbols
panel is naturally bounded by its inner list's maxHeight: 340.
Any leftover space sits at the bottom of the column (fine). */}
setAll(true)}>ALL
setAll(false)}>NONE
}
>
{ setAddText(e.target.value); setAddError(null); }}
/>
setAddSeg(e.target.value)}
title="filter search results by exchange segment"
>
any segment
NSE_EQ
NSE_FNO
BSE_EQ
MCX_COMM
IDX_I
{addError ?
{addError}
: null}
{addText.trim().length >= 2 ? (
{searchLoading ? (
searching master…
) : searchError ? (
search failed: {searchError}
) : searchResults.length === 0 ? (
no instruments found in master matching “{addText}”
) : (
searchResults.map(r => (
addFromResult(r)}
style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 6, padding: "4px 8px", borderBottom: "1px solid var(--grid)", cursor: "pointer" }}
title={`add ${r.symbol} (${r.exchange_segment})`}
>
{r.exchange_segment}
))
)}
) : null}
{visibleSymbols.map(sym => {
const q = quotes[sym];
const on = selected.has(sym);
const chg = q ? ((q.last - q.price) / q.price) * 100 : 0;
return (
toggle(sym)}>{sym}
= 0 ? "up" : "down"}`} style={{ fontSize: 9, textAlign: "right" }}>
{chg >= 0 ? "+" : ""}{chg.toFixed(2)}%
removeFromWatch(sym, segByName[sym] || "NSE_EQ")}
>×
);
})}
Timeframe
setTimeframe(e.target.value)} style={{ width: "auto", maxWidth: "100%" }}>
daily (200 bars)
intraday 60m
intraday 15m
intraday 5m
Computes: SMA20/50, EMA20/50/200, RSI14, MACD(12,26,9), BB(20,2), ATR14, ADX14, Stoch(14,3), OBV, VWAP, bias score.
{sumStats ? (
Bullish {sumStats.bull}/{rows.length}
Bearish {sumStats.bear}/{rows.length}
Neutral {sumStats.neut}/{rows.length}
Overbought {sumStats.overbought}/{rows.length}
Oversold {sumStats.oversold}/{rows.length}
> EMA50 {sumStats.above50}/{rows.length}
Avg RSI {sumStats.avg_rsi.toFixed(1)}
Avg ADX {sumStats.avg_adx.toFixed(1)}
) : null}
{scanMeta && scanMeta.n ? (
{scanMeta.loaded}/{scanMeta.n} loaded
{scanMeta.cache_hits ? <> · {scanMeta.cache_hits} cached : null}
{scanMeta.total_ms ? ` · ${scanMeta.total_ms}ms` : ""}
) : null}
{[["table", "TABLE"], ["heatmap", "HEATMAP"], ["cards", "CARDS"]].map(([k, l]) => (
setView(k)} style={{ fontSize: 9 }}>{l}
))}
EXPORT CSV
}
>
{view === "table" ? (
// overflow:auto on the wrapper + minWidth:max-content on the table forces
// the table to size to its content (≈4000px for 60 columns) and lets the
// wrapper scroll horizontally. Without this, .tbl's `width: 100%` plus
// the global `.tbl td { overflow: hidden; text-overflow: ellipsis }` rule
// squeezes every cell to ~23px and ellipsis-truncates the content.
{SCAN_COLS.map(c => (
sortBy(c.k)}
style={{ cursor: c.sortable === false ? "default" : "pointer", whiteSpace: "nowrap" }}>
{c.label}{c.sortable === false ? "" : sortIcon(c.k)}
))}
{sorted.map(r => onFocusSymbol(r.symbol)} />)}
) : view === "heatmap" ? (
onFocusSymbol(s)} />
) : (
onFocusSymbol(s)} />
)}
);
}
// ---------------------------------------------------------------------------
// SCAN_COLS — single source of truth for the Scanner table. Both the header
// (SCAN_COLS.map(c => )) and ScanRow (SCAN_COLS.map(c => {c.render})>)
// derive from this array. Adding an indicator column = one entry.
//
// Cell-level rules:
// render(r) → React content (string or JSX) for the cell body
// tone(r) → optional class added to : "up"|"down"|"amber"|"dim"|""
// num → right-align (className "num")
// sortable → header is clickable + shows sort arrow (default true)
// hint → tooltip shown on header
// ---------------------------------------------------------------------------
const _num = (v, d = 2) => (v == null || Number.isNaN(v)) ? "—" : Number(v).toFixed(d);
const _sgn = (v, d = 2) => (v == null || Number.isNaN(v)) ? "—" : (v >= 0 ? "+" : "") + Number(v).toFixed(d);
const _zone = (v, hi, lo) => v == null ? "" : v > hi ? "down" : v < lo ? "up" : "";
function AgoCell({ ts }) {
const [, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 1000);
return () => clearInterval(id);
}, []);
if (!ts) return — ;
const age = Math.max(0, (Date.now() - new Date(ts).getTime()) / 1000);
if (age < 60) return `${age.toFixed(0)}s`;
if (age < 3600) return `${Math.floor(age / 60)}m${Math.floor(age % 60)}s`;
return `${Math.floor(age / 3600)}h${Math.floor((age % 3600) / 60)}m`;
}
const SCAN_COLS = [
// identity
{ k: "symbol", label: "SYM",
render: r =>
{r.symbol}
{r._loading ? · : null}
{r._failed ? ✕ : null}
},
{ k: "last", label: "LAST", num: true,
render: r => r.last == null ? "—" :
},
{ k: "chg_pct", label: "1D%", num: true,
render: r => _sgn(r.chg_pct), tone: r => (r.chg_pct ?? 0) >= 0 ? "up" : "down"
},
// bias
{ k: "bias", label: "BIAS",
render: r => {(r.bias || "—").slice(0,4)}
},
// freshness — wall-clock age of the indicator computation for this row.
// Sort key is the raw timestamp so asc=oldest-first, desc=newest-first.
{ k: "_computed_at", label: "AGO", sortable: true,
hint: "How long ago indicators were computed for this row",
render: r =>
},
{ k: "bias_score", label: "SCORE", num: true,
render: r => _sgn(r.bias_score),
tone: r => (r.bias_score ?? 0) > 0 ? "up" : (r.bias_score ?? 0) < 0 ? "down" : "dim"
},
// trend (long EMAs, distance, supertrend, ichimoku, heikin)
{ k: "ema9", label: "EMA9", num: true, render: r => _num(r.ema9) },
{ k: "ema20", label: "EMA20", num: true, render: r => _num(r.ema20) },
{ k: "ema50", label: "EMA50", num: true, render: r => _num(r.ema50) },
{ k: "ema100", label: "EMA100", num: true, render: r => _num(r.ema100) },
{ k: "ema200", label: "EMA200", num: true, render: r => _num(r.ema200) },
{ k: "sma20", label: "SMA20", num: true, render: r => _num(r.sma20) },
{ k: "ema20_dist", label: "E20Δ%", num: true, hint: "Price vs EMA20 (%)",
render: r => _sgn(r.ema20_dist), tone: r => (r.ema20_dist ?? 0) >= 0 ? "up" : "down"
},
{ k: "ema50_dist", label: "E50Δ%", num: true, hint: "Price vs EMA50 (%)",
render: r => _sgn(r.ema50_dist), tone: r => (r.ema50_dist ?? 0) >= 0 ? "up" : "down"
},
{ k: "above_50_200", label: "50>200", sortable: false, hint: "EMA50 above EMA200",
render: r => {
if (r.ema50 == null || r.ema200 == null) return — ;
return r.ema200 ? "up" : "down"}>{r.ema50 > r.ema200 ? "Y" : "N"} ;
}
},
{ k: "supertrend_dir", label: "ST", hint: "Supertrend direction (+ATR band trend flip)",
render: r => r.supertrend_dir == null ? "—" : r.supertrend_dir > 0 ? "UP" : r.supertrend_dir < 0 ? "DN" : "—",
tone: r => r.supertrend_dir > 0 ? "up" : r.supertrend_dir < 0 ? "down" : "dim"
},
{ k: "ichi", label: "ICHI", sortable: false, hint: "Ichimoku tenkan vs kijun (9 vs 26)",
render: r => {
if (r.ichi_tenkan == null || r.ichi_kijun == null) return — ;
const bull = r.ichi_tenkan > r.ichi_kijun;
return {bull ? "BULL" : "BEAR"} ;
}
},
{ k: "ha_dir", label: "HA", hint: "Heikin-Ashi smoothed candle direction",
render: r => r.ha_dir == null ? "—" : r.ha_dir > 0 ? "BULL" : r.ha_dir < 0 ? "BEAR" : "DOJI",
tone: r => r.ha_dir > 0 ? "up" : r.ha_dir < 0 ? "down" : "dim"
},
// trend strength
{ k: "adx", label: "ADX", num: true, hint: ">25 = trending",
render: r => _num(r.adx, 1), tone: r => (r.adx ?? 0) > 25 ? "amber" : ""
},
{ k: "di", label: "+DI/-DI", sortable: false, hint: "Directional Indicator + / -",
render: r => {
if (r.plus_di == null || r.minus_di == null) return — ;
return r.minus_di ? "up" : "down"}>{r.plus_di.toFixed(0)}/{r.minus_di.toFixed(0)} ;
}
},
{ k: "vortex", label: "VI+/VI-", sortable: false, hint: "Vortex +VI / -VI · cross = trend change",
render: r => {
if (r.vortex_plus == null || r.vortex_minus == null) return — ;
return r.vortex_minus ? "up" : "down"}>{r.vortex_plus.toFixed(2)}/{r.vortex_minus.toFixed(2)} ;
}
},
{ k: "aroon_ud", label: "AR U/D", sortable: false, hint: "Aroon Up / Down",
render: r => {
if (r.aroon_up == null || r.aroon_down == null) return — ;
return r.aroon_down ? "up" : "down"}>{r.aroon_up.toFixed(0)}/{r.aroon_down.toFixed(0)} ;
}
},
{ k: "aroon_osc", label: "AROON", num: true, hint: "Aroon Osc · Up − Down · ±100 strong trend",
render: r => _num(r.aroon_osc, 0),
tone: r => r.aroon_osc == null ? "" : r.aroon_osc > 50 ? "up" : r.aroon_osc < -50 ? "down" : ""
},
// momentum
{ k: "rsi14", label: "RSI14", num: true, hint: "<30 oversold · >70 overbought",
render: r => _num(r.rsi14, 1), tone: r => _zone(r.rsi14, 70, 30)
},
{ k: "weekly_rsi14", label: "RSIw", num: true, hint: "Weekly RSI14 (D→W resample)",
render: r => _num(r.weekly_rsi14, 1), tone: r => _zone(r.weekly_rsi14, 70, 30)
},
{ k: "macd_line", label: "MACD", num: true, render: r => _num(r.macd_line) },
{ k: "macd_signal", label: "MACDsig", num: true, render: r => _num(r.macd_signal) },
{ k: "macd_hist", label: "MACDh", num: true,
render: r => _num(r.macd_hist),
tone: r => (r.macd_hist ?? 0) > 0 ? "up" : (r.macd_hist ?? 0) < 0 ? "down" : ""
},
{ k: "stoch_k", label: "STOCH%K", num: true,
render: r => _num(r.stoch_k, 1), tone: r => _zone(r.stoch_k, 80, 20)
},
{ k: "stoch_d", label: "STOCH%D", num: true,
render: r => _num(r.stoch_d, 1), tone: r => _zone(r.stoch_d, 80, 20)
},
{ k: "cci20", label: "CCI20", num: true, hint: "±100 momentum threshold",
render: r => _num(r.cci20, 0),
tone: r => r.cci20 == null ? "" : r.cci20 > 100 ? "up" : r.cci20 < -100 ? "down" : ""
},
{ k: "williams_r", label: "W%R", num: true, hint: ">-20 overbought · <-80 oversold",
render: r => _num(r.williams_r, 0),
tone: r => r.williams_r == null ? "" : r.williams_r > -20 ? "down" : r.williams_r < -80 ? "up" : ""
},
{ k: "mfi14", label: "MFI14", num: true, hint: "Money Flow Index — vol-weighted RSI",
render: r => _num(r.mfi14, 0), tone: r => _zone(r.mfi14, 80, 20)
},
{ k: "roc10", label: "ROC10", num: true,
render: r => r.roc10 == null ? "—" : _sgn(r.roc10, 1) + "%",
tone: r => (r.roc10 ?? 0) > 0 ? "up" : (r.roc10 ?? 0) < 0 ? "down" : ""
},
{ k: "tsi", label: "TSI", num: true, hint: "True Strength Index",
render: r => _num(r.tsi, 1), tone: r => (r.tsi ?? 0) > 0 ? "up" : (r.tsi ?? 0) < 0 ? "down" : ""
},
{ k: "dpo20", label: "DPO20", num: true, hint: "Detrended Price Oscillator · cycle/peak signal",
render: r => _sgn(r.dpo20, 2),
tone: r => (r.dpo20 ?? 0) > 0 ? "up" : (r.dpo20 ?? 0) < 0 ? "down" : ""
},
// volatility
{ k: "atr14", label: "ATR14", num: true, render: r => _num(r.atr14) },
{ k: "atr_pct", label: "ATR%", num: true, hint: "ATR as % of price · cross-symbol comparable",
render: r => _num(r.atr_pct), tone: r => (r.atr_pct ?? 0) > 3 ? "amber" : ""
},
{ k: "bb_upper", label: "BBup", num: true, render: r => _num(r.bb_upper) },
{ k: "bb_mid", label: "BBmid", num: true, render: r => _num(r.bb_mid) },
{ k: "bb_lower", label: "BBlo", num: true, render: r => _num(r.bb_lower) },
{ k: "bb_width", label: "BBW%", num: true, render: r => _num(r.bb_width) },
{ k: "bb_pctb", label: "%B", num: true, hint: "0=lower band · 100=upper band",
render: r => r.bb_pctb == null ? "—" : (r.bb_pctb * 100).toFixed(0),
tone: r => r.bb_pctb == null ? "" : r.bb_pctb > 1 ? "down" : r.bb_pctb < 0 ? "up" : ""
},
{ k: "kelt_upper", label: "Kup", num: true, hint: "EMA20 + 2·ATR", render: r => _num(r.kelt_upper) },
{ k: "kelt_lower", label: "Klo", num: true, hint: "EMA20 − 2·ATR", render: r => _num(r.kelt_lower) },
{ k: "squeeze", label: "SQZ", hint: "BB inside Keltner = volatility compression before move",
render: r => r.squeeze == null ? "—" : r.squeeze ? "ON" : "off",
tone: r => r.squeeze ? "amber" : "dim"
},
{ k: "chop14", label: "CHOP", num: true, hint: ">61.8 ranging · <38.2 trending",
render: r => _num(r.chop14, 1),
tone: r => r.chop14 == null ? "" : r.chop14 > 61.8 ? "amber" : r.chop14 < 38.2 ? "up" : ""
},
// volume / flow
{ k: "rvol20", label: "RVOL", num: true, hint: "Volume / 20-bar avg · ≥1.5 unusual",
render: r => r.rvol20 == null ? "—" : r.rvol20.toFixed(2) + "×",
tone: r => (r.rvol20 ?? 0) >= 1.5 ? "amber"
: ((r.rvol20 ?? 0) > 0 && r.rvol20 < 0.7) ? "down" : ""
},
{ k: "obv_slope", label: "OBVs", num: true, hint: "Linear-reg slope of last 30 OBV bars",
render: r => r.obv_slope == null ? "—" : (r.obv_slope > 0 ? "↑" : "↓") + Math.abs(r.obv_slope).toFixed(1),
tone: r => (r.obv_slope ?? 0) > 0 ? "up" : (r.obv_slope ?? 0) < 0 ? "down" : ""
},
{ k: "cmf20", label: "CMF20", num: true, hint: "Chaikin Money Flow · accumulation vs distribution",
render: r => _sgn(r.cmf20, 2),
tone: r => (r.cmf20 ?? 0) > 0 ? "up" : (r.cmf20 ?? 0) < 0 ? "down" : ""
},
{ k: "vs_vwap_pct", label: "vVWAP%", num: true, hint: "Price vs VWAP (%)",
render: r => _sgn(r.vs_vwap_pct),
tone: r => (r.vs_vwap_pct ?? 0) > 0 ? "up" : (r.vs_vwap_pct ?? 0) < 0 ? "down" : ""
},
{ k: "vwap", label: "VWAP", num: true, render: r => _num(r.vwap) },
// structure / position
{ k: "pos_52w", label: "52w%", num: true, hint: "Position in 252-bar range",
render: r => r.pos_52w == null ? "—" : r.pos_52w.toFixed(0) + "%",
tone: r => r.pos_52w == null ? "" : r.pos_52w > 80 ? "up" : r.pos_52w < 20 ? "down" : ""
},
{ k: "hi_52w", label: "52wHi", num: true, render: r => _num(r.hi_52w) },
{ k: "lo_52w", label: "52wLo", num: true, render: r => _num(r.lo_52w) },
{ k: "zscore20", label: "Z20", num: true, hint: "Std-deviations from 20-bar mean",
render: r => r.zscore20 == null ? "—" : _sgn(r.zscore20, 2) + "σ",
tone: r => Math.abs(r.zscore20 ?? 0) > 2 ? "amber" : ""
},
{ k: "donch_upper", label: "Dup", num: true, render: r => _num(r.donch_upper) },
{ k: "donch_lower", label: "Dlo", num: true, render: r => _num(r.donch_lower) },
{ k: "donch_pos", label: "D%", num: true, hint: "Position in 20-bar Donchian channel",
render: r => r.donch_pos == null ? "—" : r.donch_pos.toFixed(0) + "%"
},
// pivots
{ k: "piv_pp", label: "PP", num: true, hint: "Pivot Point — daily fair value", render: r => _num(r.piv_pp) },
{ k: "piv_r1", label: "R1", num: true, render: r => _num(r.piv_r1) },
{ k: "piv_r2", label: "R2", num: true, render: r => _num(r.piv_r2) },
{ k: "piv_r3", label: "R3", num: true, render: r => _num(r.piv_r3) },
{ k: "piv_s1", label: "S1", num: true, render: r => _num(r.piv_s1) },
{ k: "piv_s2", label: "S2", num: true, render: r => _num(r.piv_s2) },
{ k: "piv_s3", label: "S3", num: true, render: r => _num(r.piv_s3) },
// signals (right edge, non-sortable composite cells)
{ k: "cross", label: "X", sortable: false, hint: "Golden / Death cross",
render: r => r.golden_cross ? "GLDN" : r.death_cross ? "DEATH" : "—",
tone: r => r.golden_cross ? "up" : r.death_cross ? "down" : "dim"
},
{ k: "sig", label: "SIG", sortable: false, hint: "EMA50 · MACD+ · RSI>50 · ADX>25 · near upper BB",
render: r =>
},
];
function ScanRow({ r, onClick }) {
const dim = r._loading || r._failed;
return (
{SCAN_COLS.map(c => {
const tone = c.tone ? c.tone(r) : "";
const cls = [c.num ? "num" : "", tone].filter(Boolean).join(" ");
return {c.render(r)} ;
})}
);
}
function SignalDots({ r }) {
const dots = [
{ on: r.above_ema50, color: "var(--up)", title: "> EMA50" },
{ on: r.macd_hist > 0, color: "var(--phosphor)", title: "MACD hist +" },
{ on: r.rsi14 > 50, color: "var(--amber)", title: "RSI > 50" },
{ on: r.adx > 25, color: "var(--cyan)", title: "ADX trending" },
{ on: r.bb_pctb > 0.8, color: "var(--down)", title: "near upper BB" },
];
return (
{dots.map((d, i) => (
);
}
function Heatmap({ rows, onClick }) {
const metrics = [
{ key: "chg_pct", label: "1D %", scale: "signed", range: [-3, 3] },
{ key: "bias_score", label: "Bias", scale: "signed", range: [-1, 1] },
{ key: "rsi14", label: "RSI14", scale: "zone", range: [30, 70] },
{ key: "weekly_rsi14", label: "RSIw", scale: "zone", range: [30, 70] },
{ key: "macd_hist", label: "MACD h", scale: "signed", range: [-5, 5] },
{ key: "adx", label: "ADX", scale: "amber", range: [0, 50] },
{ key: "aroon_osc", label: "Aroon", scale: "signed", range: [-100, 100] },
{ key: "stoch_k", label: "Stoch %K", scale: "zone", range: [20, 80] },
{ key: "bb_pctb", label: "BB %B", scale: "zone", range: [0, 1] },
{ key: "atr_pct", label: "ATR%", scale: "amber", range: [0, 5] },
{ key: "rvol20", label: "RVOL", scale: "amber", range: [0, 3] },
{ key: "vs_vwap_pct", label: "vs VWAP", scale: "signed", range: [-1.5, 1.5] },
{ key: "ema20_dist", label: "EMA20 Δ%", scale: "signed", range: [-3, 3] },
{ key: "ema50_dist", label: "EMA50 Δ%", scale: "signed", range: [-5, 5] },
];
return (
{/* header */}
SYMBOL
{metrics.map(m => (
{m.label}
))}
{rows.map(r => (
onClick(r.symbol)} style={{ padding: "6px 8px", background: "var(--bg-1)", cursor: "pointer" }}>
{r.symbol}
= 0 ? "up" : "down"}`} style={{ fontSize: 9 }}>
{r.last.toFixed(2)} · {r.chg_pct >= 0 ? "+" : ""}{r.chg_pct.toFixed(2)}%
{val == null ? "—" : (
m.key === "bb_pctb" ? (val * 100).toFixed(0)
: m.key === "chg_pct" || m.key === "vs_vwap_pct" || m.key.endsWith("_dist") ? (val >= 0 ? "+" : "") + val.toFixed(2)
: val.toFixed(m.key === "bias_score" ? 2 : 1)
)}
);
})}
))}
LEGEND
· zone: ■ buy zone · ■ sell zone · ■ trending
);
}
function Legend({ label, from, to }) {
return (
{label}
);
}
function heatColor(val, m) {
if (val == null) return { bg: "var(--bg-0)", color: "var(--fg-faint)" };
const [lo, hi] = m.range;
if (m.scale === "signed") {
const norm = Math.max(-1, Math.min(1, val / Math.max(Math.abs(lo), Math.abs(hi))));
const alpha = Math.abs(norm) * 0.55;
const c = norm >= 0 ? `rgba(34,214,111,${alpha})` : `rgba(255,77,77,${alpha})`;
return { bg: c, color: Math.abs(norm) > 0.45 ? "var(--fg-bright)" : "var(--fg)" };
}
if (m.scale === "zone") {
// below lo = green (oversold, buy), above hi = red (overbought), middle neutral
if (val < lo) {
const t = Math.max(0, Math.min(1, (lo - val) / (lo - (m.range[0] - (hi - lo)))));
return { bg: `rgba(34,214,111,${0.15 + t * 0.5})`, color: "var(--fg-bright)" };
}
if (val > hi) {
const t = Math.max(0, Math.min(1, (val - hi) / ((hi + (hi - lo)) - hi)));
return { bg: `rgba(255,77,77,${0.15 + t * 0.5})`, color: "var(--fg-bright)" };
}
return { bg: "var(--bg-1)", color: "var(--fg)" };
}
if (m.scale === "amber") {
const t = Math.max(0, Math.min(1, (val - lo) / (hi - lo)));
return { bg: `rgba(255,176,32,${t * 0.55})`, color: t > 0.45 ? "var(--fg-bright)" : "var(--fg)" };
}
return { bg: "var(--bg-1)", color: "var(--fg)" };
}
function CardGrid({ rows, onClick }) {
return (
{rows.map(r => (
onClick(r.symbol)} style={{
border: "1px solid var(--border)",
borderLeft: `3px solid ${r.bias === "BULLISH" ? "var(--up)" : r.bias === "BEARISH" ? "var(--down)" : "var(--fg-faint)"}`,
background: "var(--bg-1)", padding: 10, cursor: "pointer",
}}>
{r.symbol}
= 0 ? "up" : "down"}`} style={{ fontSize: 11 }}>
{r.chg_pct >= 0 ? "+" : ""}{r.chg_pct.toFixed(2)}%
{r.bias}
{r.last.toFixed(2)}
70 ? "down" : r.rsi14 < 30 ? "up" : null}/>
0 ? "up" : "down"}/>
25 ? "amber" : null}/>
80 ? "down" : r.stoch_k < 20 ? "up" : null}/>
= 0 ? "+" : "") + r.vs_vwap_pct.toFixed(2)} tone={r.vs_vwap_pct >= 0 ? "up" : "down"}/>
0 ? "+" : "") + r.bias_score.toFixed(2)} tone={r.bias_score > 0 ? "up" : r.bias_score < 0 ? "down" : null}/>
{r.above_ema50 ? "↑ EMA50" : "↓ EMA50"} · {r.above_ema200 ? "↑ EMA200" : "↓ EMA200"}
{r.golden_cross ? "GOLDEN" : r.death_cross ? "DEATH" : ""}
))}
{tiles.map(t => )}
);
}
// Deterministic per-symbol indicators, seeded by symbol name — stable across renders
function computeIndicators(sym, quote) {
if (!quote) return null;
const seed = hash(sym);
const r = seedRand(seed);
const last = quote.last;
const prev = quote.price;
const chg_pct = ((last - prev) / prev) * 100;
// generate fake but plausible indicators using seeded randomness
const ema20 = last * (1 + (r() - 0.5) * 0.03);
const ema50 = last * (1 + (r() - 0.5) * 0.06);
const ema200 = last * (1 + (r() - 0.5) * 0.12);
const rsi14 = 30 + r() * 55; // 30–85
const macd_hist = (r() - 0.5) * 10;
const atr14 = last * (0.008 + r() * 0.02);
const adx = 10 + r() * 40;
const stoch_k = r() * 100;
const bb_width = 2 + r() * 6; // %
const bb_pctb = r() * 1.2 - 0.1;
const obv_slope = (r() - 0.45) * 20;
const vs_vwap_pct = (r() - 0.5) * 3;
const above_ema50 = last > ema50;
const above_ema200 = last > ema200;
const golden_cross = ema50 > ema200 && ema50 / ema200 < 1.02 && r() > 0.7;
const death_cross = ema50 < ema200 && ema200 / ema50 < 1.02 && r() > 0.7;
const ema20_dist = ((last - ema20) / ema20) * 100;
const ema50_dist = ((last - ema50) / ema50) * 100;
// bias score — weighted combo
let score = 0;
score += above_ema50 ? 0.2 : -0.2;
score += above_ema200 ? 0.15 : -0.15;
score += macd_hist > 0 ? 0.15 : -0.15;
score += rsi14 > 55 ? 0.1 : rsi14 < 45 ? -0.1 : 0;
score += chg_pct > 0 ? 0.1 : -0.1;
score += vs_vwap_pct > 0 ? 0.1 : -0.1;
score = Math.max(-1, Math.min(1, score + (r() - 0.5) * 0.15));
const bias = score > 0.2 ? "BULLISH" : score < -0.2 ? "BEARISH" : "NEUTRAL";
return {
symbol: sym,
last, prev, chg_pct,
ema20, ema50, ema200, ema20_dist, ema50_dist,
rsi14, macd_hist, atr14, adx, stoch_k,
bb_width, bb_pctb, obv_slope, vs_vwap_pct,
above_ema50, above_ema200, golden_cross, death_cross,
bias, bias_score: score,
sparkline: quote.sparkline,
};
}
function hash(s) { let h = 0; for (let i = 0; i < s.length; i++) h = ((h << 5) - h) + s.charCodeAt(i) | 0; return Math.abs(h); }
function seedRand(seed) { let s = seed; return () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; }
function fmt(v, n) { return (v == null || Number.isNaN(v)) ? "—" : Number(v).toFixed(n); }
// ----------------------------------------------------------------
// useRealAnalyse — fetches /api/symbols/{sym}/analyse and shapes it
// to match the keys the VALUES grid + Focus header expect. Returns
// null while loading, then a fully-populated object once data lands.
// Re-fetches every 30s so the panel reflects the live close.
// ----------------------------------------------------------------
function useRealAnalyse(symbol) {
const [data, setData] = useState(null);
useEffect(() => {
if (!symbol) return;
let stopped = false;
setData(null);
const seg = (store.WATCH.find(w => w.sym === symbol) || {}).exch || "NSE_EQ";
const load = async () => {
try {
const res = await fetch(`/api/symbols/${encodeURIComponent(symbol)}/analyse?days=240&exchange_segment=${encodeURIComponent(seg)}`);
if (!res.ok) throw new Error("HTTP " + res.status);
const j = await res.json();
if (!j.ok || stopped) return;
const ind = j.indicators || {};
const snap = j.snapshot || {};
const bias = j.bias || {};
const last = snap.last_close;
const ema20 = ind.ema20, ema50 = ind.ema50, ema200 = ind.ema200;
const macdObj = ind.macd || {};
const bbObj = ind.bollinger || {};
const adxObj = ind.adx || {};
const stoch = ind.stochastic || {};
const ichi = ind.ichimoku || {};
const donch = ind.donchian || {};
const kelt = ind.keltner || {};
const aroonObj= ind.aroon || {};
const emaMap = ind.ema || {};
const piv = ind.pivots || {};
const vtx = ind.vortex || {};
const ha = ind.heikin_ashi || {};
const bb_mid = bbObj.mid;
const bb_pctb = (bbObj.upper != null && bbObj.lower != null && last != null && bbObj.upper !== bbObj.lower)
? (last - bbObj.lower) / (bbObj.upper - bbObj.lower) : null;
const bb_width = (bb_mid && bb_mid !== 0 && bbObj.upper != null && bbObj.lower != null)
? ((bbObj.upper - bbObj.lower) / bb_mid) * 100 : null;
const vwap = ind.vwap;
const vs_vwap_pct = (vwap != null && last != null) ? ((last - vwap) / vwap) * 100 : null;
const ema20_dist = (ema20 && last != null) ? ((last - ema20) / ema20) * 100 : null;
const ema50_dist = (ema50 && last != null) ? ((last - ema50) / ema50) * 100 : null;
const golden_cross = !!bias.golden_cross_50_200;
const death_cross = !!bias.death_cross_50_200;
// Prefer the polars-computed obv_slope_30 (linear-regression slope on
// last 30 OBV bars). Falls back to bias channel for compatibility.
const obv_slope = ind.obv_slope_30 != null ? ind.obv_slope_30
: (bias.obv_slope_30 != null ? bias.obv_slope_30 : null);
// Donchian position 0..100 — where price sits inside the 20-bar range
const donch_pos = (donch.upper != null && donch.lower != null && last != null && donch.upper !== donch.lower)
? ((last - donch.lower) / (donch.upper - donch.lower)) * 100 : null;
// Keltner squeeze — BB inside Keltner = volatility compression
const squeeze = (bbObj.upper != null && bbObj.lower != null && kelt.upper != null && kelt.lower != null)
? (bbObj.upper < kelt.upper && bbObj.lower > kelt.lower) : null;
const chg_pct = (last != null && bias.prev_close)
? ((last - bias.prev_close) / bias.prev_close) * 100
: (bias.chg_pct != null ? bias.chg_pct : 0);
const score = bias.score != null ? bias.score : 0;
const label = bias.label || (score > 0.2 ? "BULLISH" : score < -0.2 ? "BEARISH" : "NEUTRAL");
if (stopped) return;
const next = {
symbol: symbol,
last, prev: bias.prev_close || last,
chg_pct,
sma20: ind.sma20, ema20, ema50, ema200,
ema9: emaMap["9"], ema100: emaMap["100"],
ema20_dist, ema50_dist,
rsi14: ind.rsi14,
weekly_rsi14: ind.weekly_rsi14,
macd_hist: macdObj.hist,
macd_line: macdObj.macd, macd_signal: macdObj.signal,
atr14: ind.atr14, atr_pct: ind.atr_pct,
adx: adxObj.adx, plus_di: adxObj.plus_di, minus_di: adxObj.minus_di,
stoch_k: stoch.k, stoch_d: stoch.d,
bb_upper: bbObj.upper, bb_lower: bbObj.lower, bb_mid,
bb_width, bb_pctb,
vwap, vs_vwap_pct,
obv: ind.obv, obv_slope,
cci20: ind.cci20, mfi14: ind.mfi14, williams_r: ind.williams_r,
roc10: ind.roc10, tsi: ind.tsi, cmf20: ind.cmf20,
supertrend_dir: ind.supertrend_dir,
ichi_tenkan: ichi.tenkan, ichi_kijun: ichi.kijun,
donch_upper: donch.upper, donch_lower: donch.lower, donch_pos,
rvol20: ind.rvol20,
zscore20: ind.zscore20,
pos_52w: ind.pos_52w, hi_52w: ind.hi_52w, lo_52w: ind.lo_52w,
kelt_upper: kelt.upper, kelt_lower: kelt.lower, squeeze,
chop14: ind.chop14,
aroon_up: aroonObj.up, aroon_down: aroonObj.down, aroon_osc: aroonObj.osc,
dpo20: ind.dpo20,
vortex_plus: vtx.plus, vortex_minus: vtx.minus,
ha_dir: ha.dir, ha_close: ha.close, ha_open: ha.open,
piv_pp: piv.pivot, piv_r1: piv.r1, piv_r2: piv.r2, piv_r3: piv.r3,
piv_s1: piv.s1, piv_s2: piv.s2, piv_s3: piv.s3,
above_ema50: (ema50 != null && last != null) ? last > ema50 : false,
above_ema200: (ema200 != null && last != null) ? last > ema200 : false,
golden_cross, death_cross,
bias: label, bias_score: score,
_candles: snap.candles,
_as_of: snap.as_of,
_cache: j.cache, // "hit" | "miss"
_computed_at: j.computed_at, // ISO timestamp from batch refresh
_compute_ms: j.compute_ms, // total batch wall-time
_sym_compute_ms: j.symbol_compute_ms, // this symbol's slice
};
// Sticky merge — if the new fetch returns null/undefined for a field
// the previous fetch had a real value for, keep the prior value.
// Stops the panel from oscillating between data and "—" while the
// backend warms up or returns partial responses. New non-null values
// always win; symbol changes start fresh (handled above by setData(null)).
setData(prev => {
if (!prev || prev.symbol !== next.symbol) return next;
const merged = { ...next };
for (const k of Object.keys(next)) {
if (next[k] == null && prev[k] != null) merged[k] = prev[k];
}
return merged;
});
} catch (_e) { /* keep last known data */ }
};
load();
const t = setInterval(load, 30000);
return () => { stopped = true; clearInterval(t); };
}, [symbol]);
return data;
}
// ----------------------------------------------------------------
// flattenAnalysed — turn the /api/symbols/{sym}/analyse (or one row of
// /api/scan?fields=full) JSON into the flat shape the Scanner table /
// heatmap / cards consume. Pure data mapping — same logic as the
// inline block in useRealAnalyse, factored out so both single-symbol
// and batch paths produce identical row shapes.
// ----------------------------------------------------------------
function flattenAnalysed(j, symbol) {
const ind = j.indicators || {};
const snap = j.snapshot || {};
const bias = j.bias || {};
const last = snap.last_close;
const ema20 = ind.ema20, ema50 = ind.ema50, ema200 = ind.ema200;
const macdObj = ind.macd || {};
const bbObj = ind.bollinger || {};
const adxObj = ind.adx || {};
const stoch = ind.stochastic || {};
const ichi = ind.ichimoku || {};
const donch = ind.donchian || {};
const kelt = ind.keltner || {};
const aroonObj= ind.aroon || {};
const emaMap = ind.ema || {};
const piv = ind.pivots || {};
const vtx = ind.vortex || {};
const ha = ind.heikin_ashi || {};
const bb_mid = bbObj.mid;
const bb_pctb = (bbObj.upper != null && bbObj.lower != null && last != null && bbObj.upper !== bbObj.lower)
? (last - bbObj.lower) / (bbObj.upper - bbObj.lower) : null;
const bb_width = (bb_mid && bb_mid !== 0 && bbObj.upper != null && bbObj.lower != null)
? ((bbObj.upper - bbObj.lower) / bb_mid) * 100 : null;
const vwap = ind.vwap;
const vs_vwap_pct = (vwap != null && last != null) ? ((last - vwap) / vwap) * 100 : null;
const ema20_dist = (ema20 && last != null) ? ((last - ema20) / ema20) * 100 : null;
const ema50_dist = (ema50 && last != null) ? ((last - ema50) / ema50) * 100 : null;
const golden_cross = !!bias.golden_cross_50_200;
const death_cross = !!bias.death_cross_50_200;
const obv_slope = ind.obv_slope_30 != null ? ind.obv_slope_30
: (bias.obv_slope_30 != null ? bias.obv_slope_30 : null);
const donch_pos = (donch.upper != null && donch.lower != null && last != null && donch.upper !== donch.lower)
? ((last - donch.lower) / (donch.upper - donch.lower)) * 100 : null;
const squeeze = (bbObj.upper != null && bbObj.lower != null && kelt.upper != null && kelt.lower != null)
? (bbObj.upper < kelt.upper && bbObj.lower > kelt.lower) : null;
const chg_pct = (last != null && bias.prev_close)
? ((last - bias.prev_close) / bias.prev_close) * 100
: (bias.chg_pct != null ? bias.chg_pct : 0);
const score = bias.score != null ? bias.score : 0;
const label = bias.label || (score > 0.2 ? "BULLISH" : score < -0.2 ? "BEARISH" : "NEUTRAL");
return {
symbol,
last, prev: bias.prev_close || last,
chg_pct,
sma20: ind.sma20, ema20, ema50, ema200,
ema9: emaMap["9"], ema100: emaMap["100"],
ema20_dist, ema50_dist,
rsi14: ind.rsi14,
weekly_rsi14: ind.weekly_rsi14,
macd_hist: macdObj.hist, macd_line: macdObj.macd, macd_signal: macdObj.signal,
atr14: ind.atr14, atr_pct: ind.atr_pct,
adx: adxObj.adx, plus_di: adxObj.plus_di, minus_di: adxObj.minus_di,
stoch_k: stoch.k, stoch_d: stoch.d,
bb_upper: bbObj.upper, bb_lower: bbObj.lower, bb_mid, bb_width, bb_pctb,
vwap, vs_vwap_pct,
obv: ind.obv, obv_slope,
cci20: ind.cci20, mfi14: ind.mfi14, williams_r: ind.williams_r,
roc10: ind.roc10, tsi: ind.tsi, cmf20: ind.cmf20,
supertrend_dir: ind.supertrend_dir,
ichi_tenkan: ichi.tenkan, ichi_kijun: ichi.kijun,
donch_upper: donch.upper, donch_lower: donch.lower, donch_pos,
rvol20: ind.rvol20,
zscore20: ind.zscore20,
pos_52w: ind.pos_52w, hi_52w: ind.hi_52w, lo_52w: ind.lo_52w,
kelt_upper: kelt.upper, kelt_lower: kelt.lower, squeeze,
chop14: ind.chop14,
aroon_up: aroonObj.up, aroon_down: aroonObj.down, aroon_osc: aroonObj.osc,
dpo20: ind.dpo20,
vortex_plus: vtx.plus, vortex_minus: vtx.minus,
ha_dir: ha.dir, ha_close: ha.close, ha_open: ha.open,
piv_pp: piv.pivot, piv_r1: piv.r1, piv_r2: piv.r2, piv_r3: piv.r3,
piv_s1: piv.s1, piv_s2: piv.s2, piv_s3: piv.s3,
above_ema50: (ema50 != null && last != null) ? last > ema50 : false,
above_ema200: (ema200 != null && last != null) ? last > ema200 : false,
golden_cross, death_cross,
bias: label, bias_score: score,
_candles: snap.candles,
_as_of: snap.as_of,
_cache: j.cache,
_computed_at: j.computed_at,
};
}
// ----------------------------------------------------------------
// useScanFull — drives the Scanner table off `POST /api/scanner/stream`
// (SSE). Backend emits one `symbol_scanned` event per completed symbol,
// so we patch the table row-by-row as results arrive instead of chunking
// and waiting for the slowest member of each chunk.
//
// Re-runs every 30s to match the backend cache cadence (cached symbols
// return sub-ms; only stale ones do work).
// ----------------------------------------------------------------
function useScanFull(symbols, timeframe = "daily", segByName = {}) {
const [rowsBySym, setRowsBySym] = useState({});
const [meta, setMeta] = useState({ loaded: 0, n: 0, cache_hits: 0, total_ms: 0 });
// Stable dep — array identity changes every parent render even if contents match.
const key = useMemo(() => [...symbols].slice().sort().join(","), [symbols]);
// Same trick for segments — re-fetch when a symbol's segment changes
// (e.g. user adds NIFTY as IDX_I after previously having only NSE_EQ rows).
const segKey = useMemo(
() => Object.entries(segByName).sort().map(([k, v]) => `${k}=${v}`).join("|"),
[segByName]
);
useEffect(() => {
if (!symbols.length) {
setRowsBySym({});
setMeta({ loaded: 0, n: 0, cache_hits: 0, total_ms: 0 });
return;
}
let stopped = false;
let abortCtrl = null;
let intervalTimer = null;
// Skeleton rows for newly-added symbols; preserve existing data for symbols
// still in the selection (no flicker on toggle/refresh). Drop symbols
// that are no longer selected.
setRowsBySym(prev => {
const next = {};
for (const s of symbols) next[s] = prev[s] || { symbol: s, _loading: true };
return next;
});
const runOnce = async () => {
if (stopped) return;
const started = Date.now();
const segments = {};
for (const s of symbols) if (segByName[s]) segments[s] = segByName[s];
abortCtrl = new AbortController();
try {
const res = await fetch("/api/scanner/stream", {
method: "POST",
headers: { "Content-Type": "application/json", "Accept": "text/event-stream" },
body: JSON.stringify({ symbols, timeframe, fields: "full", segments }),
signal: abortCtrl.signal,
});
if (!res.ok || !res.body) throw new Error("HTTP " + res.status);
const reader = res.body.getReader();
const decoder = new TextDecoder();
let buffer = "";
let totalHits = 0, totalLoaded = 0;
while (!stopped) {
const { value, done } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
let idx;
while ((idx = buffer.indexOf("\n\n")) >= 0) {
const frame = buffer.slice(0, idx);
buffer = buffer.slice(idx + 2);
if (!frame) continue;
let evType = "message", evData = "";
for (const line of frame.split("\n")) {
if (line.startsWith("event:")) evType = line.slice(6).trim();
else if (line.startsWith("data:")) evData += line.slice(5).trim();
}
if (!evData) continue;
let payload;
try { payload = JSON.parse(evData); } catch (_) { continue; }
if (evType === "symbol_scanned") {
const r = payload.row || {};
const sym = r.symbol;
if (!sym) continue;
if (r.cache === "hit") totalHits += 1;
if (r.ok !== false) totalLoaded += 1;
if (r.ok === false) {
setRowsBySym(prev => ({ ...prev, [sym]: { symbol: sym, _failed: true, error: r.error } }));
} else {
const flat = flattenAnalysed(r, sym);
setRowsBySym(prev => ({ ...prev, [sym]: flat }));
}
setMeta(m => ({
...m,
loaded: totalLoaded, n: payload.total || symbols.length,
cache_hits: totalHits,
total_ms: Date.now() - started,
}));
} else if (evType === "scan_done") {
setMeta(m => ({
...m, loaded: totalLoaded, n: payload.total || symbols.length,
cache_hits: payload.cache_hits ?? totalHits,
total_ms: payload.elapsed_ms ?? (Date.now() - started),
}));
} else if (evType === "error") {
// Mark every still-loading row as failed; keep last-good rows otherwise.
setRowsBySym(prev => {
const next = { ...prev };
for (const s of symbols) {
if (next[s]?._loading) next[s] = { symbol: s, _failed: true, error: payload.error };
}
return next;
});
}
}
}
} catch (err) {
if (stopped || (err && err.name === "AbortError")) return;
// Network failure mid-stream — leave last-good rows visible, mark
// any unresolved skeletons as failed so the user sees something.
setRowsBySym(prev => {
const next = { ...prev };
for (const s of symbols) {
if (next[s]?._loading) next[s] = { symbol: s, _failed: true, error: String(err) };
}
return next;
});
}
};
runOnce();
intervalTimer = setInterval(runOnce, 30000);
return () => {
stopped = true;
if (abortCtrl) try { abortCtrl.abort(); } catch (_) {}
if (intervalTimer) clearInterval(intervalTimer);
};
}, [key, timeframe, segKey]);
// Preserve insertion order from `symbols` for deterministic display.
const rows = useMemo(() => symbols.map(s => rowsBySym[s]).filter(Boolean), [rowsBySym, key]);
const loading = useMemo(() => Object.values(rowsBySym).some(r => r._loading), [rowsBySym]);
return { rows, loading, meta };
}
// One row in the scrip-master sidebar. Reads authoritative lot_size from
// the backend meta (scrip master) and falls back to the WATCH default while
// the request is in flight.
function ScripRow({ w, active, onClick }) {
const meta = store.useSymbolMeta(w.sym, w.exch);
const lot = meta?.lot_size ?? w.lot;
const name = meta?.name || w.name;
const seg = meta?.exchange_segment || w.exch;
return (
{w.sym}
{seg}
{name}
lot {lot} · {w.sector}
);
}
// ================================================================
// SYMBOLS — drill into one symbol, analyse + quote
// ================================================================
function SymbolsPage({ app, quotes, focusSymbol, onFocusSymbol }) {
const [query, setQuery] = useState("");
const [symbol, setSymbol] = useState(focusSymbol || "RELIANCE");
const [indTab, setIndTab] = useState("VALUES"); // VALUES | CHART | GRAPH
useEffect(() => { if (focusSymbol) setSymbol(focusSymbol); }, [focusSymbol]);
// Shared user watchlist — same source of truth as ScannerPage.
const { items: watchlist } = store.useWatchlist();
// Prefetch authoritative meta (lot/tick/sec_id) for every watchlist symbol.
useEffect(() => { store.prefetchMetas(watchlist.map(w => w.symbol)); }, [watchlist.length]);
const q = quotes[symbol];
const realInd = useRealAnalyse(symbol);
const wlMatch = watchlist.find(w => w.symbol === symbol);
const fbMatch = store.WATCH.find(w => w.sym === symbol) || {};
const segForFocus = wlMatch?.exchange_segment || fbMatch.exch || "NSE_EQ";
const meta = store.useSymbolMeta(symbol, segForFocus);
// Prefer real backend analysis; fall back to seeded compute only while loading.
const ind = realInd || (q ? computeIndicators(symbol, q) : null);
// Sidebar shows the user's watchlist (mapped to ScripRow's expected shape).
const results = watchlist
.filter(w => !query || w.symbol.toLowerCase().includes(query.toLowerCase()) || (w.name || "").toLowerCase().includes(query.toLowerCase()))
.map(w => ({ sym: w.symbol, name: w.name || w.symbol, exch: w.exchange_segment, sector: w.sector || "-", lot: w.lot || 0 }));
return (
{results.map(w => (
{ setSymbol(w.sym); onFocusSymbol(w.sym); }}/>
))}
auto-refresh 5s}>
{q && ind ? (
LAST
= 0 ? "up" : "down"}`} style={{ fontSize: 12 }}>
{ind.chg_pct >= 0 ? "+" : ""}{(q.last - q.price).toFixed(2)} ({ind.chg_pct >= 0 ? "+" : ""}{ind.chg_pct.toFixed(2)}%)
BIAS
{ind.bias}
score {ind.bias_score.toFixed(2)}
Open {(q.price * 1.001).toFixed(2)}
High {(Math.max(q.last, q.price) * 1.006).toFixed(2)}
Low {(Math.min(q.last, q.price) * 0.995).toFixed(2)}
Prev close {q.price.toFixed(2)}
Lot size {meta?.lot_size ?? q.lot}{meta ? "" : " (cached)"}
Exchange {meta?.exchange_segment || q.exch}
Sector {q.sector}
Sec ID {meta?.security_id ?? "—"}
) : Select a symbol
}
{/* Right column row 1: Market depth */}
3s · 5 levels}>
{/* Indicators panel spans both columns at row 2 */}
{realInd ? (
live · {realInd._candles}c
{realInd._computed_at ? (
{(() => {
const t = new Date(realInd._computed_at);
const hh = String(t.getHours()).padStart(2, "0");
const mm = String(t.getMinutes()).padStart(2, "0");
const ss = String(t.getSeconds()).padStart(2, "0");
const ms = realInd._compute_ms != null ? `· ${realInd._compute_ms.toFixed(0)}ms` : "";
return `${realInd._cache === "hit" ? "✓" : "·"} ${hh}:${mm}:${ss} ${ms}`;
})()}
) : null}
) : (
loading…
)}
setIndTab("VALUES")}>VALUES
setIndTab("GRAPH")}>GRAPH
setIndTab("CHART")}>CHART
}>
{indTab === "VALUES" && ind ? (
) : null}
{indTab === "CHART" ? : null}
{indTab === "GRAPH" ? : null}
);
}
// ============================================================================
// MarketDepth — 5-level book + price-impact panel. Pulls /api/symbols/{sym}/depth
// every 3 seconds (matches typical broker polling cadence). Shows bid/ask
// ladders with cumulative qty, total counts, spread in bps, and the slippage
// you'd take walking the book for the input quantity.
// ============================================================================
function MarketDepth({ symbol }) {
const [data, setData] = useState(null);
const [size, setSize] = useState(100);
const segGuess = (store.WATCH.find(w => w.sym === symbol) || {}).exch || "";
useEffect(() => {
if (!symbol) return;
let stopped = false;
setData(null);
const load = async () => {
try {
const qs = new URLSearchParams({ size: String(size) });
if (segGuess) qs.set("exchange_segment", segGuess);
const res = await fetch(`/api/symbols/${encodeURIComponent(symbol)}/depth?${qs.toString()}`, { cache: "no-store" });
if (!res.ok) throw new Error("HTTP " + res.status);
const j = await res.json();
if (stopped) return;
// Sticky: only replace previous depth when the new response actually
// has bids/asks. Empty/no-depth responses keep the last good ladder
// visible so the panel doesn't oscillate between data and "no depth".
if (j && j.ok && (j.bids?.length || j.asks?.length)) {
setData(j);
} else {
setData(prev => prev && prev.ok ? prev : j);
}
} catch (e) {
// Network blip — keep last known data, do not blank the panel
if (!stopped) setData(prev => prev && prev.ok ? prev : { error: String(e) });
}
};
load();
const t = setInterval(load, 3000);
return () => { stopped = true; clearInterval(t); };
}, [symbol, size, segGuess]);
// Reserve vertical space whether data is present or not — prevents the
// outer grid row from collapsing/expanding on every refresh tick.
if (!data) return loading depth…
;
if (data.error) return {data.error}
;
if (!data.ok) return {data.error || "no depth"}
;
const { bids = [], asks = [], spread, spread_bps, ltp, total_bid_qty, total_ask_qty, impact = {} } = data;
// Cumulative qty for visual fill bars
let cumB = 0, cumA = 0;
const maxBid = bids.length ? Math.max(...bids.map(b => b.qty)) : 1;
const maxAsk = asks.length ? Math.max(...asks.map(a => a.qty)) : 1;
const maxLevel = Math.max(maxBid, maxAsk, 1);
return (
{/* Spread + LTP header */}
SPREAD
{spread != null ? spread.toFixed(2) : "—"}
{spread_bps != null ? spread_bps + " bps" : "—"}
LTP
{ltp ? ltp.toFixed(2) : "—"}
QTY @ each side
{total_bid_qty.toLocaleString()} / {total_ask_qty.toLocaleString()}
{/* Ladder — bids on the left, asks on the right. We render rows
from best price outwards (best bid at top of bid column, best ask
at top of ask column) so they read like a real depth widget. */}
BIDS
{bids.map((b, i) => {
cumB += b.qty;
const w = (b.qty / maxLevel) * 100;
return (
{b.price.toFixed(2)}
{b.qty.toLocaleString()}
×{b.orders}
);
})}
{!bids.length ?
no bids
: null}
ASKS
{asks.map((a, i) => {
cumA += a.qty;
const w = (a.qty / maxLevel) * 100;
return (
{a.price.toFixed(2)}
{a.qty.toLocaleString()}
×{a.orders}
);
})}
{!asks.length ?
no asks
: null}
{/* Price-impact estimator */}
PRICE IMPACT (walk book)
{[100, 500, 1000, 5000].map(n => (
setSize(n)}>{n}
))}
{side} {/* size */}
no data
);
const partial = data.filled_qty != null && data.filled_qty < (data.size || data.filled_qty);
return (
{side}
{data.avg_price != null ? (
<>
avg {data.avg_price.toFixed(2)}
slip {data.slippage >= 0 ? "+" : ""}{data.slippage?.toFixed(2)}
({data.slippage_pct?.toFixed(3)}%)
{data.levels_used} level{data.levels_used !== 1 ? "s" : ""}
) : (
<>
book too thin
{data.note ?
{data.note}
: null}
)}
);
}
// ================================================================
// SECTORS — merged page: NIFTY sector rotation (TABLE or RRG view)
// at the top, then expandable per-sector cards showing member
// symbols' real indicators. All data comes from real backend
// endpoints (no placeholders).
// ================================================================
function SectorsPage() {
const [data, setData] = useState(null);
const [open, setOpen] = useState(new Set());
const [lookback, setLb] = useState(30);
const [topView, setTopView] = useState("RRG"); // RRG | TABLE
useEffect(() => {
let stopped = false;
setData(null);
const load = async () => {
try {
const res = await fetch(`/api/sectors/groups?lookback_days=${lookback}`, { cache: "no-store" });
if (!res.ok) throw new Error("HTTP " + res.status);
const j = await res.json();
if (!stopped) setData(j);
} catch (e) { if (!stopped) setData({ error: String(e) }); }
};
load();
const t = setInterval(load, 60000);
return () => { stopped = true; clearInterval(t); };
}, [lookback]);
const toggle = (s) => setOpen(p => { const n = new Set(p); n.has(s) ? n.delete(s) : n.add(s); return n; });
const expandAll = () => data && setOpen(new Set((data.groups || []).map(g => g.sector)));
const collapseAll = () => setOpen(new Set());
return (
{/* Top: NIFTY sector index rotation — toggle between RRG quadrant and TABLE */}
setTopView("RRG")}>RRG
setTopView("TABLE")}>TABLE
{[10, 30, 90].map(d => (
setLb(d)}>{d}d
))}
expand all
collapse
}
bodyFlush>
{!data ? (
Loading sector groups…
) : data.error ? (
{data.error}
) : !data.groups || data.groups.length === 0 ? (
No sector groups available.
) : (
{data.groups.map(g => toggle(g.sector)}/>)}
)}
);
}
// One sector card: header strip with aggregate, expandable members table.
function SectorGroupCard({ g, expanded, onToggle }) {
const a = g.aggregate || {};
const idx = g.index;
const tone = (a.avg_bias_score || 0) > 0.1 ? "up" : (a.avg_bias_score || 0) < -0.1 ? "down" : "dim";
const idxTone = idx && idx.pct_1d != null ? (idx.pct_1d >= 0 ? "up" : "down") : "dim";
return (
{expanded ? "▼" : "▶"}
{g.sector.toUpperCase()}
bias {a.avg_bias_score != null ? (a.avg_bias_score >= 0 ? "+" : "") + a.avg_bias_score.toFixed(2) : "—"}
RSI {a.avg_rsi != null ? a.avg_rsi.toFixed(1) : "—"}ADX {a.avg_adx != null ? a.avg_adx.toFixed(1) : "—"}
{a.bullish || 0} / {a.neutral || 0} / {a.bearish || 0}
{a.gainers || 0}↑ {a.losers || 0}↓
= 0 ? "up" : "down"}`}>
{a.avg_chg_pct != null ? (a.avg_chg_pct >= 0 ? "+" : "") + a.avg_chg_pct.toFixed(2) + "%" : "—"}
{idx ? <>{idx.label} {idx.last != null ? idx.last.toFixed(0) : "—"} : no idx }
{idx && idx.pct_1d != null ? (idx.pct_1d >= 0 ? "+" : "") + idx.pct_1d.toFixed(2) + "%" : "—"}
{expanded ? (
Sym
Last
1D %
RSI 14
MACD h
ADX 14
EMA20
EMA50
EMA200
vs EMA
Bias
Score
{g.members.map(m => (
{m.sym}
{m.ok === false ? (
{m.error || "no data"}
) : (
<>
{m.last != null ? m.last.toFixed(2) : "—"}
= 0 ? "up" : "down"}`}>
{m.chg_pct != null ? (m.chg_pct >= 0 ? "+" : "") + m.chg_pct.toFixed(2) : "—"}
70 ? "down" : m.rsi14 < 30 ? "up" : ""}`}>
{m.rsi14 != null ? m.rsi14.toFixed(1) : "—"}
= 0 ? "up" : "down"}`}>
{m.macd_hist != null ? (m.macd_hist >= 0 ? "+" : "") + m.macd_hist.toFixed(2) : "—"}
25 ? "amber" : ""}`}>
{m.adx != null ? m.adx.toFixed(1) : "—"}
{m.ema20 != null ? m.ema20.toFixed(0) : "—"}
{m.ema50 != null ? m.ema50.toFixed(0) : "—"}
{m.ema200 != null ? m.ema200.toFixed(0) : "—"}
{m.above_ema50 ? "↑50" : "↓50"}
·
{m.above_ema200 ? "↑200" : "↓200"}
{m.bias || "—"}
0 ? "up" : (m.bias_score || 0) < 0 ? "down" : ""}`}>
{m.bias_score != null ? (m.bias_score > 0 ? "+" : "") + m.bias_score.toFixed(2) : "—"}
)}
))}
) : null}
);
}
// ================================================================
// OPTIONS
// ================================================================
// useExpiryList — fetches /api/options/expiry_list for the selected
// underlying. The backend infers the correct segment from the symbol
// (IDX_I / MCX_COMM / NSE_EQ); we don't forward the underlyings-list
// segment because it's the OPTIONS segment (NSE_FNO) and option_chain
// expects the UNDERLYING's segment (NSE_EQ for stocks). Decorates
// each ISO date with a display label, DTE, and a WEEKLY|MONTHLY
// classifier (last expiry per calendar month = MONTHLY).
function useExpiryList(underlying) {
const [state, setState] = useState({ list: [], loading: true, error: null });
useEffect(() => {
if (!underlying) return;
let stopped = false;
setState({ list: [], loading: true, error: null });
(async () => {
try {
const qs = new URLSearchParams({ underlying });
const res = await fetch(`/api/options/expiry_list?${qs.toString()}`);
if (!res.ok) throw new Error("HTTP " + res.status);
const j = await res.json();
if (!j.ok) throw new Error("bad response");
// Walk the Dhan v2 response — expiries live at .data, .data.data,
// or .data.expiry depending on SDK version.
let exp = [];
let node = j.raw;
for (let i = 0; i < 4 && node && typeof node === "object"; i++) {
if (Array.isArray(node)) { exp = node; break; }
if (Array.isArray(node.data)) { exp = node.data; break; }
if (Array.isArray(node.expiry)) { exp = node.expiry; break; }
node = node.data;
}
exp = exp.filter(d => typeof d === "string").sort();
const today = new Date(); today.setHours(0, 0, 0, 0);
const decorated = exp.map(iso => {
const d = new Date(iso + "T00:00:00");
const dte = Math.round((d - today) / 86400000);
const display = d.toLocaleDateString("en-GB",
{ day: "2-digit", month: "short", year: "numeric" }).toUpperCase();
return { date: iso, display, dte };
});
const lastByMonth = {};
decorated.forEach(e => {
const k = e.date.slice(0, 7);
if (!lastByMonth[k] || lastByMonth[k] < e.date) lastByMonth[k] = e.date;
});
const final = decorated.map(e => ({
...e,
kind: lastByMonth[e.date.slice(0, 7)] === e.date ? "MONTHLY" : "WEEKLY",
}));
if (!stopped) setState({ list: final, loading: false, error: null });
} catch (e) {
if (!stopped) setState({ list: [], loading: false, error: String(e) });
}
})();
return () => { stopped = true; };
}, [underlying]);
return state;
}
function ExpiryTabs({ list, expiry, setExpiry, loading, error }) {
const PAGE = 6;
const activeIdx = list.findIndex(e => e.date === expiry);
const [start, setStart] = useState(0);
useEffect(() => {
if (!list.length) { setStart(0); return; }
const idx = activeIdx < 0 ? 0 : activeIdx;
setStart(Math.max(0, Math.min(idx, Math.max(0, list.length - PAGE))));
}, [list, activeIdx]);
if (!list.length) {
return (
{loading ? "loading expiries…" : (error ? `expiries: ${error}` : "no expiries")}
);
}
const end = Math.min(start + PAGE, list.length);
const visible = list.slice(start, end);
const canPrev = start > 0;
const canNext = end < list.length;
return (
setStart(s => Math.max(0, s - PAGE))} disabled={!canPrev} title="previous expiries">‹
{visible.map(e => {
const active = e.date === expiry;
return (
setExpiry(e.date)}
>
{e.display}
{e.kind}
{e.dte}d
);
})}
setStart(s => Math.min(list.length - PAGE, s + PAGE))} disabled={!canNext} title="next expiries">›
{end}/{list.length}
);
}
// ----------------------------------------------------------------
// useFnoUnderlyings — pulls /api/options/underlyings (cached 6h on
// the backend) and returns { list, loading, error }. Empty list
// while loading or on error — page is greyed out until real data
// arrives. No mock fallbacks. Cache once on window so all
// OptionsPage mounts share it.
// ----------------------------------------------------------------
function useFnoUnderlyings() {
const [state, setState] = useState(() => {
const cached = window.__fnoUnderlyings;
return cached ? cached : { list: [], loading: true, error: null };
});
useEffect(() => {
if (window.__fnoUnderlyings && !window.__fnoUnderlyings.loading) return;
let stopped = false;
(async () => {
try {
const res = await fetch("/api/options/underlyings?limit=80");
if (!res.ok) throw new Error("HTTP " + res.status);
const j = await res.json();
if (!j.ok || !Array.isArray(j.underlyings)) throw new Error("bad response");
const final = { list: j.underlyings, loading: false, error: null };
window.__fnoUnderlyings = final;
if (!stopped) setState(final);
} catch (e) {
const err = { list: [], loading: false, error: String(e) };
window.__fnoUnderlyings = err;
if (!stopped) setState(err);
}
})();
return () => { stopped = true; };
}, []);
return state;
}
// ----------------------------------------------------------------
// useOptionChain — fetches /api/options/chain_table. Auto-refreshes
// every 30s. Returns null while loading; { error } on failure.
// ----------------------------------------------------------------
function useOptionChain(underlying, expiryISO) {
const [data, setData] = useState(null);
useEffect(() => {
// Wait for BOTH underlying and a concrete expiry before firing. The
// no-expiry path on the backend makes two Dhan API calls (expiry_list
// + option_chain) which doubles rate-limit pressure and intermittently
// returns empty chains. Once an expiry is selected we always send it.
if (!underlying || !expiryISO) { setData(null); return; }
let stopped = false;
setData(null);
const load = async () => {
try {
const qs = new URLSearchParams({ underlying, expiry: expiryISO });
const res = await fetch(`/api/options/chain_table?${qs.toString()}`, { cache: "no-store" });
if (!res.ok) throw new Error("HTTP " + res.status);
const j = await res.json();
if (!j.ok) throw new Error(j.note || "bad response");
if (!stopped) setData(j);
} catch (e) {
if (!stopped) setData({ error: String(e) });
}
};
load();
const t = setInterval(load, 30000);
return () => { stopped = true; clearInterval(t); };
}, [underlying, expiryISO]);
return data;
}
function OptionsPage({ app, quotes }) {
// Underlying + expiry in one state so they update atomically — switching
// underlying always clears expiry in the SAME render, never producing a
// (newUnderlying, oldExpiry) tuple that would fire a chain_table request
// for a date that doesn't exist on the new symbol.
const [sel, setSel] = useState({ underlying: "NIFTY", expiry: "" });
const { underlying, expiry } = sel;
const setUnderlying = (u) => setSel({ underlying: u, expiry: "" });
const setExpiry = (e) => setSel(s => ({ ...s, expiry: e }));
const underlyings = useFnoUnderlyings();
const expiries = useExpiryList(underlying);
// Once the expiry list arrives, settle on the nearest expiry if none is
// selected (or the previous selection isn't on this list).
useEffect(() => {
if (!expiries.list.length) return;
if (!expiries.list.find(e => e.date === expiry)) {
setExpiry(expiries.list[0].date);
}
}, [expiries.list, expiry]);
// Real-chain fetch — replaces the previous seedRand synthetic generator.
// Returns { spot, expiry, rows: [{strike, ce:{...}, pe:{...}}], pcr, max_pain, atm_iv }
const chain = useOptionChain(underlying, expiry || null);
const spot = chain?.spot || quotes[underlying]?.last || 0;
// Translate the API's per-strike `ce`/`pe` rows into the table-shape rest
// of this component already uses (ceOi, peOi, ceLtp, ...).
const rows = useMemo(() => {
if (!chain?.rows) return [];
const atm = chain.rows.length ? chain.rows.reduce((b, r) => Math.abs(r.strike - spot) < Math.abs(b.strike - spot) ? r : b).strike : 0;
return chain.rows.map(r => ({
strike: r.strike,
ceOi: Math.round(r.ce.oi || 0),
ceVol: Math.round(r.ce.vol || 0),
ceIv: r.ce.iv || 0,
ceLtp: r.ce.ltp || 0,
ceDelta: r.ce.delta || 0,
ceGamma: r.ce.gamma || 0,
ceTheta: r.ce.theta || 0,
peOi: Math.round(r.pe.oi || 0),
peVol: Math.round(r.pe.vol || 0),
peIv: r.pe.iv || 0,
peLtp: r.pe.ltp || 0,
peDelta: r.pe.delta || 0,
peGamma: r.pe.gamma || 0,
peTheta: r.pe.theta || 0,
atm: Math.abs(r.strike - atm) < 1e-6,
}));
}, [chain, spot]);
// Aggregates — backend already computed PCR + max pain over the FULL chain
// (not just the trimmed window), so prefer those values.
const pcr = (chain?.pcr != null ? chain.pcr : 0).toFixed(2);
const maxPainRow = chain?.max_pain != null ? { strike: chain.max_pain, pain: 0 } : null;
return (
{/* Underlying selector + expiry tabs row */}
UNDERLYING
{underlyings.list.length ? `${underlyings.list.length} from scrip master` : (underlyings.error ? `error: ${underlyings.error}` : "loading…")}
{underlyings.list.map(u => {
const inactive = underlying !== u.symbol;
const accent = u.kind === "INDEX" ? "var(--cyan)"
: u.kind === "COMMODITY" ? "var(--amber)"
: null;
return (
setUnderlying(u.symbol)}
title={`${u.kind} · ${u.segment} · ${u.contracts} contracts listed`}
style={{ fontSize: 10, padding: "2px 8px", whiteSpace: "nowrap",
borderColor: inactive && accent ? accent : undefined,
color: inactive && accent ? accent : undefined }}>
{u.label}
);
})}
{/* KPI strip for the selected expiry */}
e.date === (chain?.expiry || expiry))?.display || chain?.expiry || expiry || "—"}`}>
e.date === expiry)?.dte ?? "—") + (expiry ? "d" : "")} />
1.2 ? "down" : pcr < 0.8 ? "up" : "dim"}>{pcr > 1.2 ? "BEARISH" : pcr < 0.8 ? "BULLISH" : "NEUTRAL"}} />
r.atm)?.peIv || 0) - (rows.find(r => r.atm)?.ceIv || 0)).toFixed(1) : "—"} />
{chain.error}
: !chain ? loading…
: live · 30s }
bodyFlush>
━━ CALLS ━━
STRIKE
━━ PUTS ━━
OI Vol IV Δ Γ Θ LTP
K
LTP Θ Γ Δ IV Vol OI
{rows.map(r => {
const itmCE = r.strike < spot;
const itmPE = r.strike > spot;
return (
{r.ceOi.toLocaleString()}
{r.ceVol.toLocaleString()}
{r.ceIv.toFixed(1)}
{r.ceDelta.toFixed(2)}
{r.ceGamma.toFixed(4)}
{r.ceTheta.toFixed(2)}
{r.ceLtp.toFixed(2)}
{r.strike}
{r.peLtp.toFixed(2)}
{r.peTheta.toFixed(2)}
{r.peGamma.toFixed(4)}
{r.peDelta.toFixed(2)}
{r.peIv.toFixed(1)}
{r.peVol.toLocaleString()}
{r.peOi.toLocaleString()}
);
})}
{[0.25, 0.5, 0.75].map(p => (
);
}
// ================================================================
// BOTS
// ================================================================
function BotsPage({ app }) {
const [editing, setEditing] = useState(null);
const runBot = app.runBotNow;
// Live bots subscription — push-immediate on enable/disable/run_now/CRUD,
// vs the 3s lag if we only read app.bots from the dashboard tick.
const botsStream = useStream("/api/bots/stream", { bufferSize: 20 });
const [streamedBots, setStreamedBots] = useState([]);
useEffect(() => {
if (botsStream.snapshot && Array.isArray(botsStream.snapshot.bots)) {
setStreamedBots(botsStream.snapshot.bots);
}
}, [botsStream.snapshot]);
useEffect(() => {
const ev = botsStream.lastEvent;
if (!ev) return;
if (ev.type === "bots_changed" && ev.data && Array.isArray(ev.data.bots)) {
setStreamedBots(ev.data.bots);
}
}, [botsStream.lastEvent]);
const bots = streamedBots.length ? streamedBots : app.bots;
return (
STRATEGY BOTS
Scheduled scanners that generate proposals — proposals still require your confirm.
setEditing(NEW_BOT_TEMPLATE())}>+ NEW BOT
b.enabled).length}>
Name Symbols Strategy TF Interval Size ₹ Pause ≥
Props Fills P&L Last run Status
{bots.map(b => (
{b.name}
{b.bot_id}
{b.symbols.join(", ")}
{b.strategy}{Object.entries(b.strategy_params || {}).map(([k,v]) => `${k}=${v}`).join(" ")}
{b.timeframe}
{b.interval_seconds < 3600 ? `${Math.round(b.interval_seconds/60)}m` : b.interval_seconds < 86400 ? `${Math.round(b.interval_seconds/3600)}h` : `${Math.round(b.interval_seconds/86400)}d`}
{b.position_size_inr.toLocaleString("en-IN")}
{b.pause_on_volatility}
{b.proposals_today}
{b.fills_today}
= 0 ? "up" : "down"}`}>{b.pnl_today >= 0 ? "+" : ""}{b.pnl_today.toFixed(0)}
{b.last_run ? store.relTime(b.last_run) : "—"}
{b.enabled ? STOPPED }
app.toggleBot(b.bot_id)}>{b.enabled ? "‖" : "▸"}
runBot(b.bot_id)}>⚡
setEditing(b)}>edit
confirm(`Delete ${b.name}?`) && app.deleteBot(b.bot_id)}>✕
))}
{editing &&
setEditing(null)} onSave={(b) => { if (b.bot_id) app.updateBot(b.bot_id, b); else app.addBot(b); setEditing(null); }} />}
);
}
function NEW_BOT_TEMPLATE() {
return {
name: "New Bot",
symbols: ["RELIANCE", "TCS"],
strategy: "ema_crossover",
strategy_params: { fast: 9, slow: 21 },
timeframe: "intraday_15",
exchange_segment: "NSE_EQ",
product_type: "INTRADAY",
interval_seconds: 900,
min_bias_score: 0.2,
max_bias_score: 1.0,
position_size_inr: 10000,
stop_loss_pct: 1.5,
take_profit_pct: 3,
pause_on_volatility: "ELEVATED",
enabled: false,
};
}
function BotEditor({ bot, onCancel, onSave }) {
const [b, setB] = useState(bot);
const set = (k, v) => setB({ ...b, [k]: v });
return (
e.stopPropagation()}>
{bot.bot_id ? "EDIT BOT" : "NEW BOT"}
✕
Strategy
set("strategy", e.target.value)}>
ema_crossover rsi_reversion bollinger_breakout macd_crossover buy_and_hold
Timeframe
set("timeframe", e.target.value)}>
daily intraday_60 intraday_15 intraday_5
Product
set("product_type", e.target.value)}>INTRADAY CNC MARGIN Pause on volatility ≥
set("pause_on_volatility", e.target.value)}>NONE WATCH ELEVATED EXTREME
CANCEL
onSave(b)}>SAVE
);
}
// ================================================================
// SETTINGS
// ================================================================
function SettingsPage({ app }) {
const [showSecrets, setShowSecrets] = useState(false);
const [confirmLive, setConfirmLive] = useState(false);
const [settings, setSettings] = useState([]);
const [loadError, setLoadError] = useState(null);
const [savingKey, setSavingKey] = useState(null);
const reload = async (revealSecrets = showSecrets) => {
try {
const r = await fetch(`/api/settings?include_secrets=${revealSecrets ? "true" : "false"}`);
if (!r.ok) throw new Error(`GET /api/settings → HTTP ${r.status}`);
const j = await r.json();
setSettings(j.settings || []);
setLoadError(null);
} catch (e) {
setLoadError(String(e));
}
};
useEffect(() => { reload(); /* on mount */ }, []);
useEffect(() => { reload(showSecrets); }, [showSecrets]);
const saveSetting = async (key, value) => {
setSavingKey(key);
try {
const r = await fetch(`/api/settings/${key}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ value }),
});
if (!r.ok) {
const t = await r.text().catch(() => "");
throw new Error(`PUT /api/settings/${key} → HTTP ${r.status} ${t}`);
}
await reload();
} catch (e) {
alert(`Save failed: ${e}`);
} finally {
setSavingKey(null);
}
};
const goLive = async () => {
if (!confirmLive) return;
await saveSetting("LIVE_TRADING_ENABLED", "true");
app.setMode("live");
setConfirmLive(false);
};
const goPaper = async () => {
await saveSetting("LIVE_TRADING_ENABLED", "false");
app.setMode("paper");
};
const get = (key) => settings.find(s => s.key === key);
return (
{app.mode === "live" ? "LIVE TRADING" : "PAPER TRADING"}
{app.mode === "live"
? "Real orders, real money. All proposals execute against Dhan broker on confirm."
: "Simulated orders. Proposals pass risk checks and log to audit, but no broker call."}
{app.mode === "paper" ? (
) : (
↩ REVERT TO PAPER
)}
Per-order max {get("MAX_ORDER_VALUE_INR")?.effective ? `₹${Number(get("MAX_ORDER_VALUE_INR").effective).toLocaleString("en-IN")}` : "—"}
Total exposure {get("MAX_TOTAL_EXPOSURE_INR")?.effective ? `₹${Number(get("MAX_TOTAL_EXPOSURE_INR").effective).toLocaleString("en-IN")}` : "—"}
Daily loss {get("MAX_DAILY_LOSS_INR")?.effective ? `₹${Number(get("MAX_DAILY_LOSS_INR").effective).toLocaleString("en-IN")}` : "—"}
Orders/day {get("MAX_ORDERS_PER_DAY")?.effective || "—"}
Allowed exchanges {get("ALLOWED_EXCHANGES")?.effective || "—"}
Allowed products {get("ALLOWED_PRODUCT_TYPES")?.effective || "—"}
load failed: {loadError}
) : null}
KEY VALUE SOURCE
{settings.map(s => (
saveSetting(s.key, v)} />
))}
);
}
function SettingRow({ s, reveal, saving, onSave }) {
const initial = s.value ?? "";
const [val, setVal] = useState(initial);
useEffect(() => setVal(initial), [initial]);
const masked = s.is_secret && !reveal;
// Map backend source labels → short pill text + colour
const srcMap = {
secret_manager: { txt: "SM", cls: "pill-up" },
env: { txt: "ENV", cls: "pill-cyan" },
db: { txt: "DB", cls: "pill-up" },
"env/default": { txt: "DEFAULT", cls: "pill-dim" },
missing: { txt: "MISSING", cls: "pill-amber" },
};
const src = srcMap[s.source] || { txt: s.source || "?", cls: "pill-dim" };
return (
{s.key}
{s.description || ""}
{src.txt} onSave(val)}>{saving ? "…" : "SAVE"}
);
}
// ============================================================================
// IndicatorChart — multi-panel SVG chart fed from /api/symbols/{sym}/indicators_timeseries
// ============================================================================
function IndicatorChart({ symbol }) {
const [data, setData] = useState(null);
const [active, setActive] = useState(new Set(["ema20", "ema50", "ema200", "bb_upper", "bb_lower"]));
const [osc, setOsc] = useState("rsi14"); // which oscillator to show below price
useEffect(() => {
let stopped = false;
const seg = (store.WATCH.find(w => w.sym === symbol) || {}).exch || "NSE_EQ";
(async () => {
try {
const res = await fetch(`/api/symbols/${encodeURIComponent(symbol)}/indicators_timeseries?days=120&exchange_segment=${encodeURIComponent(seg)}`);
if (!res.ok) throw new Error("HTTP " + res.status);
const d = await res.json();
if (!stopped) setData(d);
} catch (e) { if (!stopped) setData({ error: String(e) }); }
})();
return () => { stopped = true; };
}, [symbol]);
if (!data) return Loading indicator series…
;
if (data.error) return {data.error}
;
const overlays = [
{ k: "ema20", color: "var(--amber)" },
{ k: "ema50", color: "var(--cyan)" },
{ k: "ema200", color: "var(--violet)"},
{ k: "bb_upper", color: "var(--fg-faint)", dash: true },
{ k: "bb_lower", color: "var(--fg-faint)", dash: true },
{ k: "vwap", color: "#8cff8c" },
];
const oscs = ["rsi14", "macd", "adx14", "cci20", "mfi14", "williams_r", "stoch_k", "roc10"];
const close = data.ohlc.close;
if (!close || close.length < 2) return no data
;
const W = 880, Hp = 180, Ho = 90, pad = 24;
const xStep = (W - pad * 2) / (close.length - 1);
const xAt = (i) => pad + i * xStep;
// Price panel scale
const priceMin = Math.min(...close.filter(v => v != null));
const priceMax = Math.max(...close.filter(v => v != null));
const yPrice = (v) => pad + (Hp - pad * 2) * (1 - (v - priceMin) / (priceMax - priceMin || 1));
// Oscillator panel scale
const oscSeries = data.series[osc] || [];
const valid = oscSeries.filter(v => v != null);
const oscMin = valid.length ? Math.min(...valid) : 0;
const oscMax = valid.length ? Math.max(...valid) : 1;
const yOsc = (v) => (Hp + 12) + pad + (Ho - pad * 2) * (1 - (v - oscMin) / (oscMax - oscMin || 1));
// Path helper — skips null gaps
const linePath = (arr, yFn) => {
let d = "", started = false;
arr.forEach((v, i) => {
if (v == null) { started = false; return; }
d += (started ? " L " : "M ") + `${xAt(i).toFixed(1)},${yFn(v).toFixed(1)}`;
started = true;
});
return d;
};
const toggle = (k) => {
setActive(prev => { const s = new Set(prev); s.has(k) ? s.delete(k) : s.add(k); return s; });
};
return (
{overlays.map(o => (
toggle(o.k)}
className={`chip ${active.has(o.k) ? "active" : ""}`}
style={active.has(o.k) ? {} : { color: o.color, borderColor: o.color }}>
{o.k}
))}
OSC
{oscs.map(o => (
setOsc(o)} className={`chip ${osc === o ? "active" : ""}`}>{o}
))}
{/* Price panel bg */}
{priceMax.toFixed(2)}
{priceMin.toFixed(2)}
{/* Divider */}
{osc} {oscMax.toFixed(1)}
{oscMin.toFixed(1)}
{data.candles} daily bars · computed fresh from OHLCV (no separate time-series storage needed)
);
}
// ============================================================================
// SymbolGraphAll — symbol price chart stacked with every available indicator,
// fed by /api/symbols/{sym}/indicators_timeseries. All values are real (no
// placeholders) — the backend recomputes every series per bar from OHLCV.
// ============================================================================
function SymbolGraphAll({ symbol }) {
const [data, setData] = useState(null);
const [overlays, setOverlays] = useState(new Set([
"ema20", "ema50", "ema200", "bb_upper", "bb_lower", "vwap",
]));
const [oscs, setOscs] = useState(new Set([
"rsi14", "macd", "adx14",
]));
const [hover, setHover] = useState(null);
useEffect(() => {
let stopped = false;
setData(null);
const seg = (store.WATCH.find(w => w.sym === symbol) || {}).exch || "NSE_EQ";
(async () => {
try {
const res = await fetch(`/api/symbols/${encodeURIComponent(symbol)}/indicators_timeseries?days=180&exchange_segment=${encodeURIComponent(seg)}`);
if (!res.ok) throw new Error("HTTP " + res.status);
const j = await res.json();
if (!stopped) setData(j);
} catch (e) { if (!stopped) setData({ error: String(e) }); }
})();
return () => { stopped = true; };
}, [symbol]);
if (!data) return Loading {symbol} indicator series…
;
if (data.error) return {data.error}
;
const close = data.ohlc.close;
if (!close || close.length < 2) return no data
;
const OVERLAY_DEFS = [
{ k: "ema9", color: "#a3d977", dash: false },
{ k: "ema20", color: "#ffb020", dash: false },
{ k: "ema50", color: "#4ec9f0", dash: false },
{ k: "ema100", color: "#80deea", dash: false },
{ k: "ema200", color: "#b18cff", dash: false },
{ k: "bb_upper", color: "#8a909b", dash: true },
{ k: "bb_mid", color: "#8a909b", dash: true },
{ k: "bb_lower", color: "#8a909b", dash: true },
{ k: "vwap", color: "#22d66f", dash: false },
{ k: "kelt_upper", color: "#5ec5b8", dash: true },
{ k: "kelt_lower", color: "#5ec5b8", dash: true },
{ k: "donch_upper", color: "#f48fb1", dash: true },
{ k: "donch_lower", color: "#f48fb1", dash: true },
{ k: "ichi_tenkan", color: "#ffd966", dash: false },
{ k: "ichi_kijun", color: "#ff8a65", dash: false },
{ k: "hi_52w", color: "#ff6b6b", dash: true },
{ k: "lo_52w", color: "#aed581", dash: true },
{ k: "ha_close", color: "#9fa8da", dash: false },
];
const OSC_DEFS = [
{ k: "rsi14", label: "RSI 14", color: "#b18cff", guides: [30, 70], range: [0, 100] },
{ k: "macd", label: "MACD", color: "#22d66f", signalKey: "macd_signal", zero: true },
{ k: "adx14", label: "ADX 14", color: "#ffb020", guides: [25], range: [0, 60] },
{ k: "plus_di", label: "+DI / -DI", color: "#22d66f", signalKey: "minus_di", range: [0, 60],
signalColor: "#ff4d4d" },
{ k: "stoch_k", label: "Stoch %K", color: "#4ec9f0", guides: [20, 80], range: [0, 100] },
{ k: "cci20", label: "CCI 20", color: "#ff7ad9", guides: [-100, 100], zero: true },
{ k: "mfi14", label: "MFI 14", color: "#5ec5b8", guides: [20, 80], range: [0, 100] },
{ k: "williams_r", label: "Williams %R",color: "#ffc850", guides: [-80, -20], range: [-100, 0] },
{ k: "roc10", label: "ROC 10", color: "#ff8a4d", zero: true },
{ k: "tsi", label: "TSI", color: "#9fa8da", zero: true },
{ k: "dpo20", label: "DPO 20", color: "#a3d977", zero: true },
{ k: "obv", label: "OBV", color: "#7fa7ff" },
{ k: "cmf20", label: "CMF 20", color: "#ce93d8", zero: true },
{ k: "vortex_plus",label: "Vortex", color: "#22d66f", signalKey: "vortex_minus",
signalColor: "#ff4d4d" },
{ k: "aroon_up", label: "Aroon", color: "#22d66f", signalKey: "aroon_down", range: [0, 100],
signalColor: "#ff4d4d", guides: [50] },
{ k: "rvol20", label: "RVOL 20", color: "#ffb020", guides: [1, 1.5], zero: false },
{ k: "atr_pct", label: "ATR%", color: "#ff8a65", guides: [3] },
{ k: "zscore20", label: "Z 20", color: "#ff7ad9", guides: [-2, 2], zero: true },
{ k: "pos_52w", label: "52w pos %", color: "#aed581", guides: [20, 80], range: [0, 100] },
{ k: "chop14", label: "Chop 14", color: "#ffd966", guides: [38.2, 61.8], range: [0, 100] },
{ k: "supertrend_dir", label: "Super dir", color: "#80deea", guides: [0], range: [-1.2, 1.2] },
{ k: "ha_dir", label: "HA dir", color: "#f48fb1", guides: [0], range: [-1.2, 1.2] },
];
// Geometry
const W = 920, padL = 28, padR = 56;
const H_PRICE = 240, H_OSC = 70, GAP = 6;
const activeOscs = OSC_DEFS.filter(o => oscs.has(o.k));
const totalH = H_PRICE + activeOscs.length * (H_OSC + GAP);
const xStep = (W - padL - padR) / Math.max(1, close.length - 1);
const xAt = (i) => padL + i * xStep;
// Price scale — include any active overlay extents
const priceVals = [...close];
OVERLAY_DEFS.forEach(o => {
if (overlays.has(o.k) && data.series[o.k]) {
data.series[o.k].forEach(v => { if (v != null) priceVals.push(v); });
}
});
const valid = priceVals.filter(v => v != null && Number.isFinite(v));
const pMin = Math.min(...valid);
const pMax = Math.max(...valid);
const yPrice = (v) => 8 + (H_PRICE - 16) * (1 - (v - pMin) / (pMax - pMin || 1));
// Path helper — gap-aware
const linePath = (arr, yFn) => {
let d = "", started = false;
arr.forEach((v, i) => {
if (v == null || !Number.isFinite(v)) { started = false; return; }
d += (started ? " L " : "M ") + `${xAt(i).toFixed(1)},${yFn(v).toFixed(1)}`;
started = true;
});
return d;
};
// Volume bars at bottom of price panel
const vol = data.ohlc.volume || [];
const volMax = vol.length ? Math.max(...vol.filter(v => v != null && Number.isFinite(v))) : 0;
const volBarH = 36;
const yVol = (v) => H_PRICE - (volBarH * (v / (volMax || 1)));
// Per-oscillator panel positions
const oscRows = activeOscs.map((o, idx) => {
const yTop = H_PRICE + GAP + idx * (H_OSC + GAP);
const series = data.series[o.k] || [];
const sigSeries = o.signalKey ? (data.series[o.signalKey] || []) : null;
const validS = series.filter(v => v != null && Number.isFinite(v));
let lo = o.range ? o.range[0] : (validS.length ? Math.min(...validS) : 0);
let hi = o.range ? o.range[1] : (validS.length ? Math.max(...validS) : 1);
if (sigSeries) {
sigSeries.forEach(v => { if (v != null && Number.isFinite(v)) { lo = Math.min(lo, v); hi = Math.max(hi, v); } });
}
if (lo === hi) hi = lo + 1;
const yFn = (v) => yTop + 4 + (H_OSC - 8) * (1 - (v - lo) / (hi - lo));
return { def: o, yTop, series, sigSeries, lo, hi, yFn };
});
const lastClose = close[close.length - 1];
const firstClose = close.find(v => v != null) || lastClose;
const periodChg = lastClose != null && firstClose ? ((lastClose - firstClose) / firstClose) * 100 : 0;
const toggleOverlay = (k) => setOverlays(p => { const s = new Set(p); s.has(k) ? s.delete(k) : s.add(k); return s; });
const toggleOsc = (k) => setOscs(p => { const s = new Set(p); s.has(k) ? s.delete(k) : s.add(k); return s; });
// Hover crosshair
const onMove = (e) => {
const svg = e.currentTarget;
const rect = svg.getBoundingClientRect();
const px = (e.clientX - rect.left) * (W / rect.width);
const idx = Math.max(0, Math.min(close.length - 1, Math.round((px - padL) / xStep)));
setHover(idx);
};
const T = data.time || [];
return (
{/* Header strip — what we're looking at */}
{data.symbol}
{data.candles} daily bars
= 0 ? "up" : "down"}`} style={{ fontSize: 11, marginLeft: 12 }}>
{periodChg >= 0 ? "+" : ""}{periodChg.toFixed(2)}% over period
{data.computed_at ? (() => {
const t = new Date(data.computed_at);
const hh = String(t.getHours()).padStart(2, "0");
const mm = String(t.getMinutes()).padStart(2, "0");
const ss = String(t.getSeconds()).padStart(2, "0");
return (
{data.cache === "hit" ? "✓" : "·"} computed {hh}:{mm}:{ss}
{data.compute_ms != null ? ` · ${data.compute_ms.toFixed(0)}ms` : ""}
);
})() : null}
{hover != null && T[hover] ? (
{T[hover]} · O {fmt(data.ohlc.open[hover], 2)} H {fmt(data.ohlc.high[hover], 2)} L {fmt(data.ohlc.low[hover], 2)} C {fmt(close[hover], 2)}
) : null}
{/* Overlay toggles */}
OVERLAYS
{OVERLAY_DEFS.map(o => (
toggleOverlay(o.k)}
className={`chip ${overlays.has(o.k) ? "active" : ""}`}
style={overlays.has(o.k) ? {} : { color: o.color, borderColor: o.color }}>
{o.k}
))}
{/* Oscillator toggles */}
PANELS
{OSC_DEFS.map(o => (
toggleOsc(o.k)}
className={`chip ${oscs.has(o.k) ? "active" : ""}`}
style={oscs.has(o.k) ? {} : { color: o.color, borderColor: o.color }}>
{o.label}
))}
setHover(null)}>
{/* Price panel background + frame */}
{pMax.toFixed(2)}
{pMin.toFixed(2)}
{lastClose != null ? lastClose.toFixed(2) : ""}
= 0 ? "var(--up)" : "var(--down)"} opacity="0.5"/>;
}) : null}
{/* Signal line — uses signalColor when set (Vortex/Aroon/DI), else amber */}
{sigSeries ? (
{def.label}
{Number(hi).toFixed(2)}
{Number(lo).toFixed(2)}
{/* Last value */}
{(() => {
const lastV = [...series].reverse().find(v => v != null && Number.isFinite(v));
if (lastV == null) return null;
return {Number(lastV).toFixed(2)} ;
})()}
))}
{/* Crosshair */}
{hover != null ? (
live · all series recomputed per bar from real OHLCV via /api/symbols/{symbol}/indicators_timeseries · click chips to toggle
Loading RRG…
;
if (data.error) return {data.error}
;
const allSectors = data.sectors || [];
const sectors = allSectors.filter(s => !hidden.has(s.label));
if (!allSectors.length) return no data — backend may need more history
;
if (!sectors.length) return all items hidden — pick at least one in the filter
;
// SVG geometry — wide rectangular viewBox. RS-Ratio (X) usually has a
// wider data range than RS-Momentum (Y) over short windows, so the
// wider X axis gives more room for sector labels to spread out.
const W = 960, H = 540, padL = 44, padR = 20, padT = 24, padB = 32;
const center = data.axis_center || 100;
// Auto-scale. X and Y are scaled INDEPENDENTLY around 100 so a wide
// momentum range doesn't squash relative-strength resolution (and vice
// versa). Heads of all sectors fit comfortably; tail outliers clip to
// the chart edge. Each axis gets a symmetric range around 100 with a
// sensible minimum so an all-clustered universe still spans visibly.
const heads = sectors.map(s => s.head);
const tails = sectors.flatMap(s => s.tail); // include some tail influence
// Use the 90th percentile of |head - center| + a touch of recent tail to
// pick the span, ignoring the 10% most extreme tail outliers.
const headXs = heads.map(p => p.x), headYs = heads.map(p => p.y);
// Recent tail = last 4 points per sector — keeps trail visible.
const recentTails = sectors.flatMap(s => s.tail.slice(-4));
const considerXs = [...headXs, ...recentTails.map(p => p.x)];
const considerYs = [...headYs, ...recentTails.map(p => p.y)];
const xSpan = Math.max(4, Math.max(...considerXs.map(v => Math.abs(v - center)))) + 1.5;
const ySpan = Math.max(4, Math.max(...considerYs.map(v => Math.abs(v - center)))) + 1.5;
const xMin = center - xSpan, xMax = center + xSpan;
const yMin = center - ySpan, yMax = center + ySpan;
const xRange = xMax - xMin, yRange = yMax - yMin;
// Clamp helper for tail points that fall outside the view.
const clampX = (v) => Math.max(xMin, Math.min(xMax, v));
const clampY = (v) => Math.max(yMin, Math.min(yMax, v));
const xAt = (v) => padL + ((v - xMin) / xRange) * (W - padL - padR);
const yAt = (v) => padT + (1 - (v - yMin) / yRange) * (H - padT - padB);
const colorOf = (i) => COLORS_PALETTE[i % COLORS_PALETTE.length];
// Compute label y-offsets so overlapping labels stagger. Sort by head y,
// walk top-down, push each label down if it's within minGap of the prior.
const labelOffsets = (() => {
const minGap = 12; // viewBox units
const items = sectors.map((s, i) => ({ i, sy: yAt(s.head.y) }))
.sort((a, b) => a.sy - b.sy);
const out = {};
let last = -Infinity;
items.forEach(it => {
const ny = Math.max(last + minGap, it.sy);
out[it.i] = ny - it.sy;
last = ny;
});
return out;
})();
const QUAD_LABELS = [
{ x: xMax, y: yMax, txt: "LEADING", tone: "var(--up)", align: "end", baseline: "hanging" },
{ x: xMax, y: yMin, txt: "WEAKENING", tone: "var(--amber)", align: "end", baseline: "baseline" },
{ x: xMin, y: yMin, txt: "LAGGING", tone: "var(--down)", align: "start", baseline: "baseline" },
{ x: xMin, y: yMax, txt: "IMPROVING", tone: "var(--cyan)", align: "start", baseline: "hanging" },
];
const visibleCount = sectors.length;
const totalCount = allSectors.length;
const noun = mode === "stocks" ? "stocks" : "sectors";
return (
{/* Mode toggle */}
MODE
setMode("sectors")} style={{ fontSize: 9, padding: "2px 8px" }}>SECTORS
setMode("stocks")} style={{ fontSize: 9, padding: "2px 8px" }}>STOCKS
{data.benchmark} · weekly · tail
{[6, 10, 14].map(n => (
setTail(n)}
style={{ fontSize: 9, padding: "1px 6px" }}>{n}w
))}
setFilterOpen(o => !o)}
style={{ fontSize: 9, padding: "2px 8px" }}
title="show / hide individual items">
FILTER · {visibleCount}/{totalCount}
{visibleCount} {noun} · {data.weeks_used} weekly bars
{/* Filter dropdown — checkboxes per item */}
{filterOpen ? (
setHidden(new Set())}>show all
setHidden(new Set(allSectors.map(s => s.label)))}>hide all
setFilterOpen(false)}>close
{allSectors.map((s, idx) => {
const checked = !hidden.has(s.label);
return (
{s.label}
{s.quadrant}
);
})}
) : null}
{/* Quadrant backgrounds — subtle tints */}
{q.txt}
))}
{/* Reference grid — lines every 'step' units around 100 */}
{(() => {
const step = xSpan > 20 ? 10 : xSpan > 10 ? 5 : 2;
const ticks = [];
for (let v = Math.ceil(xMin / step) * step; v <= xMax; v += step) ticks.push(v);
return ticks.map(v => v === center ? null : (
{v.toFixed(0)}
));
})()}
{(() => {
const step = ySpan > 20 ? 10 : ySpan > 10 ? 5 : 2;
const ticks = [];
for (let v = Math.ceil(yMin / step) * step; v <= yMax; v += step) ticks.push(v);
return ticks.map(v => v === center ? null : (
{v.toFixed(0)}
));
})()}
{/* Center cross */}
RS-Ratio (relative strength) →
↑ RS-Momentum
{center}
{center}
{/* Tails + heads per sector */}
{sectors.map((s, i) => {
const c = colorOf(i);
const isHover = hover === s.label;
const opacity = hover && !isHover ? 0.25 : 1.0;
const path = s.tail.map((p, j) => `${j === 0 ? "M" : "L"} ${xAt(p.x).toFixed(1)},${yAt(p.y).toFixed(1)}`).join(" ");
const head = s.head;
return (
setHover(s.label)} onMouseLeave={() => setHover(null)}
style={{ cursor: "pointer" }}>
{/* Tail line — clamped so far-history outliers don't blow up the view */}
{(() => {
const clamped = s.tail.map(p => `${xAt(clampX(p.x)).toFixed(1)},${yAt(clampY(p.y)).toFixed(1)}`);
const d = clamped.length ? "M " + clamped.join(" L ") : "";
return {s.label}
);
})()}
);
})}
{/* Legend / quadrant counts */}
{["LEADING", "IMPROVING", "WEAKENING", "LAGGING"].map(q => {
const list = sectors.filter(s => s.quadrant === q);
const tone = q === "LEADING" ? "up" : q === "WEAKENING" ? "amber" : q === "LAGGING" ? "down" : "cyan";
return (
{q}
{list.length}
{list.map(s => s.label).join(" · ") || "—"}
);
})}
Rotation goes clockwise: Improving → Leading → Weakening → Lagging → Improving.
);
}
// ============================================================================
// SectorRotationPanel — pulls /api/sectors/rotation
// Pass `embedded` to render without the outer Panel (caller wraps it).
// ============================================================================
function SectorRotationPanel({ embedded = false } = {}) {
const [data, setData] = useState(null);
const [window, setWindow] = useState(30);
useEffect(() => {
let stopped = false;
const load = async () => {
try {
const res = await fetch(`/api/sectors/rotation?lookback_days=${window}`);
if (!res.ok) throw new Error("HTTP " + res.status);
const d = await res.json();
if (!stopped) setData(d);
} catch (e) { if (!stopped) setData({ error: String(e) }); }
};
load();
const t = setInterval(load, 60000);
return () => { stopped = true; clearInterval(t); };
}, [window]);
const lookbackChips = (
{[5, 10, 30, 90].map(w => (
setWindow(w)}>{w}d
))}
);
const body = (
!data ? Loading sectors…
: data.error ? {data.error}
: data.sectors.length === 0 ? No sector indices resolved.
: (
Sector Last
1D % {window}D %
Trend
{data.sectors.map(s => {
const d1 = s.pct_1d;
const dn = s.pct_n;
const spk = s.sparkline || [];
const max = spk.length ? Math.max(...spk) : 1;
const min = spk.length ? Math.min(...spk) : 0;
const rng = max - min || 1;
const w = 100, h = 16;
const path = spk.length >= 2
? "M " + spk.map((v, i) => `${(i / (spk.length - 1)) * w},${h - ((v - min) / rng) * h}`).join(" L ")
: "";
const up = spk.length ? spk[spk.length - 1] >= spk[0] : true;
return (
{s.label}
{s.last != null ? s.last.toFixed(2) : "—"}
= 0 ? "up" : "down"}`}>
{d1 != null ? (d1 >= 0 ? "+" : "") + d1.toFixed(2) + "%" : "—"}
= 0 ? "up" : "down"}`}>
{dn != null ? (dn >= 0 ? "+" : "") + dn.toFixed(2) + "%" : "—"}
{path ? (
) : null}
);
})}
)
);
// When `embedded`, skip the outer Panel — caller already wraps us. Show
// the lookback chips inline at the top of the body instead.
if (embedded) {
return (
);
}
return (
{body}
);
}
// ============================================================================
// GlobalPage — international markets via TradingView free embeddable widgets.
//
// Why this exists:
// For pre-market positioning we need overnight global moves (US, EU, Asia,
// FX, commodities) that Dhan doesn't expose. TradingView ships free public
// widgets — no API key, no signup — with real-time data on most major
// indices, futures, forex, and commodities (Indian indices delayed 15min
// on free tier). We just inject TV's widget script and let it render.
//
// Widgets used:
// Market Overview — multi-tab indices/futures/forex/crypto card
// Ticker Tape — strip running across the top
// Heatmap — sector treemap fallback
// Economic Cal — TV's built-in econ calendar (releases + consensus + actual)
// ============================================================================
// Generic TradingView widget injector — takes the embed script URL and a JSON
// config object. Mounts a fresh container each time props change so widgets
// reload cleanly when the user toggles tabs.
function TVWidget({ src, config, height = 400 }) {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) return;
ref.current.innerHTML = "";
const container = document.createElement("div");
container.className = "tradingview-widget-container__widget";
ref.current.appendChild(container);
const script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
script.async = true;
script.innerHTML = JSON.stringify(config);
ref.current.appendChild(script);
}, [src, JSON.stringify(config)]);
return (
);
}
function GlobalPage() {
const [tab, setTab] = useState("OVERVIEW");
// Shared TV theming
const TV_THEME = "dark";
const TV_LOCALE = "en";
const TV_BG = "rgba(5, 7, 10, 1)";
return (
{/* Tab strip */}
{["OVERVIEW", "INDICES", "FUTURES", "FOREX", "CRYPTO", "HEATMAP", "CALENDAR"].map(k => (
setTab(k)}>{k}
))}
No API key needed · no signup · TV branding watermark visible · Indian symbols 15-min delayed on free tier (real-time on TV Pro+)
{tab === "OVERVIEW" ? (
) : null}
{tab === "INDICES" ? (
) : null}
{tab === "FUTURES" ? (
) : null}
{tab === "FOREX" ? (
) : null}
{tab === "CRYPTO" ? (
) : null}
{tab === "HEATMAP" ? (
) : null}
{tab === "CALENDAR" ? (
) : null}
);
}
// ============================================================================
// CalendarsPage — FII/DII flow + economic events + earnings calendar.
// All three feeds powered by free public sources (NSE, TradingView events
// JSON, NSE corporate filings). See calendars.py. No API key required.
// ============================================================================
function CalendarsPage() {
const [tab, setTab] = useState("FII_DII"); // FII_DII | ECONOMIC | EARNINGS
return (
setTab("FII_DII")}>FII/DII
setTab("ECONOMIC")}>ECONOMIC
setTab("EARNINGS")}>EARNINGS
{
try { await fetch("/api/calendars/refresh_all", { method: "POST" }); window.location.reload(); }
catch (e) {}
}} title="Force a refresh from NSE / TradingView">REFRESH
}>
Free public data · NSE participant turnover · TradingView calendar JSON · NSE corporate filings · auto-refresh on backend
{tab === "FII_DII" ?
setSub("cash")}>CASH
setSub("fno_oi")}>F&O OI
setSub("fno_vol")}>F&O VOL
}>
{sub === "cash"
? "Cash-segment buy/sell/net values from NSE participant turnover (₹ Cr)."
: sub === "fno_oi"
? "End-of-day open-interest snapshot in equity derivatives, by participant (number of contracts). Source: NSE archives."
: "Today's traded volume in equity derivatives, by participant (number of contracts). Source: NSE archives."}
{sub === "cash" ? loading…
{data.error}
{[5, 10, 30, 60, 90].map(n => (
setDays(n)}>{n}d
))}
}>
{/* 5-day summary tiles */}
= 0 ? "+" : "") + sum.fii_net.toLocaleString("en-IN") : "—")} tone={sum.fii_net > 0 ? "up" : sum.fii_net < 0 ? "down" : null}/>
= 0 ? "+" : "") + sum.dii_net.toLocaleString("en-IN") : "—")} tone={sum.dii_net > 0 ? "up" : sum.dii_net < 0 ? "down" : null}/>
{/* Mini divergence chart (FII green/red bars + DII cyan line) */}
{recent.length >= 2 ? (
= 0 ? "rgba(34, 214, 111, 0.6)" : "rgba(255, 77, 77, 0.6)"}/>
);
})}
`${i === 0 ? "M" : "L"} ${(pad + i * xStep).toFixed(1)},${yScale(r.dii_net).toFixed(1)}`).join(" ")}
stroke="var(--cyan)" strokeWidth="1.5" fill="none"/>
DII (line)
FII (bars · red=selling)
) : null}
{/* Daily table */}
Day
FII Buy FII Sell FII Net
DII Buy DII Sell DII Net
Total Net
{rows.map(r => (
{r.day}
{r.fii_buy.toLocaleString("en-IN", { maximumFractionDigits: 2 })}
{r.fii_sell.toLocaleString("en-IN", { maximumFractionDigits: 2 })}
= 0 ? "up" : "down"}`}>{(r.fii_net >= 0 ? "+" : "") + r.fii_net.toLocaleString("en-IN", { maximumFractionDigits: 2 })}
{r.dii_buy.toLocaleString("en-IN", { maximumFractionDigits: 2 })}
{r.dii_sell.toLocaleString("en-IN", { maximumFractionDigits: 2 })}
= 0 ? "up" : "down"}`}>{(r.dii_net >= 0 ? "+" : "") + r.dii_net.toLocaleString("en-IN", { maximumFractionDigits: 2 })}
= 0 ? "up" : "down"}`}>{((r.fii_net + r.dii_net) >= 0 ? "+" : "") + (r.fii_net + r.dii_net).toLocaleString("en-IN", { maximumFractionDigits: 2 })}
))}
);
}
// ----------------------------------------------------------------------------
// F&O participant breakdown panel.
// `metric` ∈ "oi" (open interest snapshot) | "vol" (traded volume).
// API returns one record per day with `by_client` keyed by client_type.
// ----------------------------------------------------------------------------
function FiiFnoPanel({ metric }) {
const [data, setData] = useState(null);
const [days, setDays] = useState(30);
const [client, setClient] = useState("FII"); // FII | DII | Pro | Client
useEffect(() => {
let stop = false;
setData(null);
fetch(`/api/calendars/fii_fno?metric=${metric}&days=${days}`)
.then(r => r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)))
.then(j => !stop && setData(j))
.catch(e => !stop && setData({ error: String(e) }));
return () => { stop = true; };
}, [metric, days]);
const title = metric === "oi" ? "F&O participant · Open Interest (contracts)"
: "F&O participant · Traded Volume (contracts)";
if (!data) return loading…
{data.error}
No data yet — backend backfill is still running, or NSE hasn't published today's archive.
);
}
// Build per-day row of the selected client_type
const rows = allDays
.map(d => ({ day: d.day, ...(d.by_client?.[client] || {}) }))
.filter(r => r.total_long != null);
// Latest-day summary tiles
const latest = rows[0] || {};
const fmt = (n) => n == null ? "—"
: (n >= 0 ? "+" : "") + Math.round(n).toLocaleString("en-IN");
const tone = (n) => n == null ? null : n > 0 ? "up" : n < 0 ? "down" : null;
// Tiny chart: selected client's Idx-Fut Net over time
const recent = rows.slice(0, 30).reverse();
const W = 700, H = 160, pad = 24;
const series = recent.map(r => r.fut_idx_net || 0);
const maxAbs = Math.max(1, ...series.map(Math.abs));
const xStep = recent.length > 1 ? (W - pad * 2) / (recent.length - 1) : 0;
const yMid = H / 2;
const yScale = (v) => yMid - (v / maxAbs) * (H / 2 - pad / 2);
return (
CLIENT
{["FII", "DII", "Pro", "Client"].map(c => (
setClient(c)}>{c.toUpperCase()}
))}
DAYS
{[5, 10, 30, 60, 90].map(n => (
setDays(n)}>{n}d
))}
}>
{/* Latest-day summary tiles for the selected client */}
{/* Idx Futures net over time — green/red bars around zero */}
{recent.length >= 2 ? (
= 0 ? "rgba(34, 214, 111, 0.6)" : "rgba(255, 77, 77, 0.6)"}/>
);
})}
{client} Index Futures Net (long − short, contracts)
) : null}
{/* Daily breakdown table — one row per day */}
Day
IdxFut L
IdxFut S
IdxFut Net
StkFut Net
IdxCE Net
IdxPE Net
StkCE Net
StkPE Net
Total Net
{rows.map(r => (
{r.day}
{Math.round(r.fut_idx_long).toLocaleString("en-IN")}
{Math.round(r.fut_idx_short).toLocaleString("en-IN")}
= 0 ? "up" : "down"}`}>{fmt(r.fut_idx_net)}
= 0 ? "up" : "down"}`}>{fmt(r.fut_stk_net)}
= 0 ? "up" : "down"}`}>{fmt(r.opt_idx_call_net)}
= 0 ? "up" : "down"}`}>{fmt(r.opt_idx_put_net)}
= 0 ? "up" : "down"}`}>{fmt(r.opt_stk_call_net)}
= 0 ? "up" : "down"}`}>{fmt(r.opt_stk_put_net)}
= 0 ? "up" : "down"}`}>{fmt(r.total_net)}
))}
);
}
function EconomicPanel() {
const [data, setData] = useState(null);
const [imp, setImp] = useState(2);
const [forward, setFwd] = useState(14);
useEffect(() => {
let stop = false;
setData(null);
fetch(`/api/calendars/economic?days_forward=${forward}&importance_min=${imp}`)
.then(r => r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)))
.then(j => !stop && setData(j))
.catch(e => !stop && setData({ error: String(e) }));
return () => { stop = true; };
}, [imp, forward]);
if (!data) return loading…
{data.error}
IMP
{[1, 2, 3].map(n => (
setImp(n)}>{"●".repeat(n)}
))}
DAYS
{[3, 7, 14, 30].map(n => (
setFwd(n)}>{n}
))}
}>
{data.rows.length === 0 ? (
No events in window — backend may still be fetching
) : (
Time (IST) Country Imp Event
Previous Consensus
Actual Surprise
{data.rows.map(e => {
const tone = e.surprise_score == null ? null
: e.surprise_score > 0 ? "up" : e.surprise_score < 0 ? "down" : null;
const t = e.event_time ? new Date(e.event_time) : null;
const tStr = t ? t.toLocaleString("en-IN", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" }) : "—";
const dots = "●".repeat(e.importance) + "○".repeat(3 - e.importance);
return (
{tStr}
{e.country}
= 3 ? "down" : e.importance === 2 ? "amber" : "faint"} style={{ fontSize: 9 }}>{dots}
{e.event_name}
{e.previous != null ? e.previous : "—"}
{e.consensus != null ? e.consensus : "—"}
{e.actual != null ? e.actual : "—"}
{e.surprise_score != null ? (e.surprise_score >= 0 ? "+" : "") + (e.surprise_score * 100).toFixed(1) + "%" : "—"}
);
})}
)}
);
}
function EarningsPanel() {
const [data, setData] = useState(null);
const [forward, setFwd] = useState(14);
const [type, setType] = useState("RESULTS");
useEffect(() => {
let stop = false;
setData(null);
const qs = new URLSearchParams({ days_forward: String(forward) });
if (type !== "ALL") qs.set("event_types", type);
fetch(`/api/calendars/earnings?${qs.toString()}`)
.then(r => r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)))
.then(j => !stop && setData(j))
.catch(e => !stop && setData({ error: String(e) }));
return () => { stop = true; };
}, [forward, type]);
if (!data) return loading…
{data.error}
{["RESULTS", "BOARD_MEETING", "DIVIDEND", "ALL"].map(t => (
setType(t)}>{t}
))}
setFwd(n)}>{n}d
))}
}>
{data.rows.length === 0 ? (
No events in window — backend may still be fetching from NSE
) : (
Date Symbol Company Type Period Purpose
{data.rows.map(e => (
{e.event_date}
{e.symbol}
{e.company_name}
{e.event_type}
{e.period || "—"}
{e.purpose}
))}
)}
);
}
// =============================================================================
// TickPage — read-only observability for the dedicated tick VM.
// Backend proxies /api/tick/* to the tick VM's HTTP server (services/tick/main.py).
// All data is GET-only; the service is fully automatic, no controls in this UI.
// =============================================================================
function TickPage({ app }) {
const [health, setHealth] = useState(null);
const [healthErr, setHealthErr] = useState(null);
const [symbols, setSymbols] = useState([]);
const [symbolsErr, setSymbolsErr] = useState(null);
const [seedLogs, setSeedLogs] = useState([]);
const [streamLogs, setStreamLogs] = useState([]);
const [grep, setGrep] = useState("");
const [autoScroll, setAutoScroll] = useState(true);
const [paused, setPaused] = useState(false);
const [sortKey, setSortKey] = useState("idle_s");
const [sortDir, setSortDir] = useState("asc");
const [filter, setFilter] = useState("");
const [expanded, setExpanded] = useState(null);
const [expandedData, setExpandedData] = useState(null);
const [retryNonce, setRetryNonce] = useState(0);
// ─── /api/tick/health (2s poll) ────────────────────────────────────────────
useEffect(() => {
let cancelled = false;
const fetchHealth = async () => {
try {
const r = await fetch("/api/tick/health");
if (!r.ok) {
let body = null;
try { body = await r.json(); } catch (_) {}
if (!cancelled) {
setHealthErr({
status: r.status,
error: (body && body.detail) || (body && body.error) || `HTTP ${r.status}`,
});
setHealth(null);
}
} else {
const data = await r.json();
if (!cancelled) { setHealth(data); setHealthErr(null); }
}
} catch (e) {
if (!cancelled) {
setHealthErr({ status: 0, error: String(e && e.message || e) });
setHealth(null);
}
}
};
fetchHealth();
const t = setInterval(fetchHealth, 2000);
return () => { cancelled = true; clearInterval(t); };
}, [retryNonce]);
// ─── /api/tick/symbols (3s poll, paused on health error) ───────────────────
useEffect(() => {
if (healthErr) return;
let cancelled = false;
const fetchSymbols = async () => {
try {
const r = await fetch("/api/tick/symbols");
if (!r.ok) {
if (!cancelled) setSymbolsErr(`HTTP ${r.status}`);
return;
}
const data = await r.json();
if (!cancelled) { setSymbols(data.symbols || []); setSymbolsErr(null); }
} catch (e) {
if (!cancelled) setSymbolsErr(String(e && e.message || e));
}
};
fetchSymbols();
const t = setInterval(fetchSymbols, 3000);
return () => { cancelled = true; clearInterval(t); };
}, [!!healthErr, retryNonce]);
// ─── Seed logs panel with last 500 lines once on mount/retry ───────────────
useEffect(() => {
if (healthErr) return;
let cancelled = false;
fetch("/api/tick/logs?lines=500")
.then(r => r.ok ? r.json() : null)
.then(data => {
if (cancelled || !data) return;
setSeedLogs(data.lines || []);
setStreamLogs([]);
})
.catch(() => {});
return () => { cancelled = true; };
}, [!!healthErr, retryNonce]);
// ─── Live tail via SSE ─────────────────────────────────────────────────────
const streamUrl = (!healthErr && !paused) ? "/api/tick/logs/stream" : null;
const stream = useStream(streamUrl, {
bufferSize: 1500,
onEvent: (ev) => {
if (ev.type === "log") {
setStreamLogs(prev => {
const next = prev.length >= 1500 ? prev.slice(prev.length - 1499).concat(ev) : prev.concat(ev);
return next;
});
}
// upstream_closed / error events surface via stream.status — no action.
},
});
// ─── Symbol drill-down ─────────────────────────────────────────────────────
useEffect(() => {
if (!expanded) { setExpandedData(null); return; }
let cancelled = false;
fetch(`/api/tick/symbols/${encodeURIComponent(expanded)}?limit=20`)
.then(r => r.ok ? r.json() : null)
.then(data => { if (!cancelled) setExpandedData(data); })
.catch(() => { if (!cancelled) setExpandedData({ recent: [], error: "fetch failed" }); });
return () => { cancelled = true; };
}, [expanded]);
// ─── Derived: filtered + sorted symbol rows ────────────────────────────────
const rows = useMemo(() => {
const needle = filter.trim().toUpperCase();
let filtered = needle ? symbols.filter(s => s.symbol.includes(needle)) : symbols;
const dir = sortDir === "asc" ? 1 : -1;
return [...filtered].sort((a, b) => {
const av = a[sortKey], bv = b[sortKey];
if (av == null && bv == null) return 0;
if (av == null) return 1;
if (bv == null) return -1;
if (typeof av === "number") return (av - bv) * dir;
return String(av).localeCompare(String(bv)) * dir;
});
}, [symbols, filter, sortKey, sortDir]);
const setSort = (k) => {
if (sortKey === k) setSortDir(d => d === "asc" ? "desc" : "asc");
else { setSortKey(k); setSortDir(k === "symbol" ? "asc" : "desc"); }
};
const sortArrow = (k) => sortKey === k ? (sortDir === "asc" ? " ▲" : " ▼") : "";
// ─── Logs view: seed + stream, then optional grep filter ───────────────────
const allLogs = useMemo(() => seedLogs.concat(streamLogs), [seedLogs, streamLogs]);
const visibleLogs = useMemo(() => {
const needle = grep.trim().toLowerCase();
if (!needle) return allLogs;
return allLogs.filter(l =>
l.message.toLowerCase().includes(needle) ||
l.logger.toLowerCase().includes(needle) ||
l.level.toLowerCase().includes(needle)
);
}, [allLogs, grep]);
// Auto-scroll the logs panel to bottom on new lines.
const logBodyRef = useRef(null);
useEffect(() => {
if (autoScroll && logBodyRef.current) {
logBodyRef.current.scrollTop = logBodyRef.current.scrollHeight;
}
}, [visibleLogs.length, autoScroll]);
// ─── Render ────────────────────────────────────────────────────────────────
if (healthErr) {
return (
● TICK VM UNREACHABLE
Backend returned {healthErr.status || "no response"}.
{healthErr.error}
The frontend reads from /api/tick/* .
In distributed mode the backend proxies to TICK_SERVICE_URL ;
in single-VM mode it serves from the in-process tick_service
(requires TICK_SERVICE_BOOT=1 , the default).
Restart the backend after changing either env var.
setRetryNonce(n => n + 1)}>RETRY
);
}
const modeTone = (() => {
if (!health) return "pill-dim";
if (health.degraded_reason) return "pill-down";
if (health.mode === "websocket") return "pill-up";
if (health.mode === "polling") return "pill-amber";
return "pill-dim";
})();
const ageTone = (sec) => {
if (sec == null) return "down";
if (sec < 5) return "up";
if (sec < 30) return "amber";
return "down";
};
return (
{/* ── Status header ─────────────────────────────────────────────────── */}
MODE
{health ? (health.mode || "—").toUpperCase() : "…"}
{health && health.intended_mode && health.intended_mode !== health.mode ? (
intended: {health.intended_mode}
) : null}
{health && health.degraded_reason ? (
DEGRADED REASON
{health.degraded_reason}
) : null}
{health && Array.isArray(health.pinned_sample) && health.pinned_sample.length ? (
SYMBOLS
{health.pinned_sample.map(s => (
{s}
))}
{health.pinned_count > health.pinned_sample.length ? (
+{health.pinned_count - health.pinned_sample.length} more
) : null}
) : null}
{/* ── Body: symbol table (left) + logs (right) ──────────────────────── */}
{/* SYMBOL TABLE */}
setFilter(e.target.value)}
style={{ width: 160, fontSize: 10 }}
/>
}
bodyFlush
>
{symbolsErr ? (
{symbolsErr}
) : null}
setSort("symbol")}>SYMBOL{sortArrow("symbol")}
setSort("last_price")}>LTP{sortArrow("last_price")}
setSort("last_ts")}>LAST TICK{sortArrow("last_ts")}
setSort("idle_s")}>IDLE (s){sortArrow("idle_s")}
setSort("ticks_seen")}>TICKS{sortArrow("ticks_seen")}
{rows.length === 0 && !symbolsErr ? (
no symbols (waiting on first tick service health response)
setExpanded(isExp ? null : r.symbol)}>
{r.symbol}
{r.source === "parquet" ? (
DISK
) : null}
{r.last_price != null ? Number(r.last_price).toFixed(2) : "—"}
{formatHMS(r.last_ts)}
{r.idle_s != null ? r.idle_s.toFixed(1) : "—"}
{r.ticks_seen}
{isExp ? (
{expandedData == null ? (
loading recent ticks…
) : expandedData.error ? (
{expandedData.error}
) : (expandedData.recent || []).length === 0 ? (
0 recent ticks (buffer empty)
) : (
<>
{expandedData.source === "parquet" ? (
◉ FROM DISK · ring buffer empty since restart, showing today's parquet tail
) : null}
TIME PRICE VOL SOURCE
{expandedData.recent.slice().reverse().map((t, i) => (
{formatHMS(t.ts)}
{t.last_price != null ? Number(t.last_price).toFixed(2) : "—"}
{t.volume != null ? Number(t.volume).toFixed(0) : "—"}
{t.source || "—"}
))}
)}
) : null}
);
})}
{/* LOGS PANEL */}
setPaused(p => !p)}>
{paused ? "RESUME" : "PAUSE"}
}
bodyFlush
>
{visibleLogs.length === 0 ? (
{allLogs.length === 0 ? "waiting for first log line…" : "no lines match grep"}
) : (
visibleLogs.map((l, i) => {
const lvlColor = l.level === "ERROR" || l.level === "CRITICAL" ? "var(--down)" :
l.level === "WARNING" ? "var(--amber)" :
"var(--fg)";
return (
{l.ts}
{l.level}
{l.logger}
{l.message}
);
})
)}
● UNREACHABLE
{err}
Likely causes: not signed in as an admin email, or the backend hasn't rebuilt with /api/admin/* yet.
);
}
const services = snapshot ? snapshot.services || {} : {};
const order = ["backend", "tick", "arbitrage", "auto_executor", "scheduler", "redis"];
const rows = order.filter(k => services[k]).map(k => ({ key: k, ...services[k] }));
const liveCount = rows.filter(r => r.state === "live").length;
return (
{/* Header strip */}
ADMIN
{currentUser ? currentUser.email : "—"}
{/* Service grid */}
{rows.length === 0 ? (
waiting for first telemetry frame…
) : rows.map(r =>
)}
{svc.key}
{svc.role || "—"}
● {(svc.state || "—").toUpperCase()}
{svc.latency_ms != null ? (
{svc.latency_ms.toFixed(0)}ms
) : null}
{svc.url ? (
{svc.url}
) : null}
{svc.detail ? (
{svc.detail}
) : null}
{svc.error ? (
{svc.error}
) : null}
{svc.body && typeof svc.body === "object" ? : null}
{svc.running != null ? running={String(svc.running)} : null}
{svc.tripped ? tripped : null}
{svc.daily_count != null ? day:{svc.daily_count} : null}
{svc.version ? v{svc.version} : null}
{svc.tick_boot != null ? tick_boot={svc.tick_boot} : null}
);
}
function ServiceBodyDetail({ body }) {
const fields = [];
if (body.subscribed_count != null) fields.push(`subs:${body.subscribed_count}`);
if (body.pinned_count != null) fields.push(`pin:${body.pinned_count}`);
if (body.latest_tick_age_s != null) fields.push(`age:${body.latest_tick_age_s.toFixed(1)}s`);
if (body.uptime_s != null) fields.push(`up:${Math.floor(body.uptime_s)}s`);
if (body.mode) fields.push(`mode:${body.mode}`);
if (body.degraded_reason) fields.push(`deg:${body.degraded_reason}`);
if (!fields.length) return null;
return {fields.join(" ")} ;
}
function formatHMS(ts) {
if (ts == null) return "—";
// ts is unix seconds (int). Convert to HH:MM:SS local time.
const ms = (typeof ts === "number" && ts < 1e12) ? ts * 1000 : ts;
const d = new Date(ms);
if (isNaN(d.getTime())) return "—";
return d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
}
function formatUptime(sec) {
if (sec == null) return "—";
const s = Math.floor(sec);
const d = Math.floor(s / 86400);
const h = Math.floor((s % 86400) / 3600);
const m = Math.floor((s % 3600) / 60);
if (d) return `${d}d ${h}h`;
if (h) return `${h}h ${m}m`;
return `${m}m ${s % 60}s`;
}
Object.assign(window, { ScannerPage, SymbolsPage, SectorsPage, SectorGroupCard, SectorRRG, OptionsPage, BacktestPage, BotsPage, SettingsPage, IndicatorChart, SymbolGraphAll, SectorRotationPanel, GlobalPage, TVWidget, MarketDepth, CalendarsPage, FiiDiiPanel, FiiDiiCashPanel, FiiFnoPanel, EconomicPanel, EarningsPanel, TickPage, SystemPage });