/* Main app shell — sidebar + section routing + API data fetching */ const { useState, useEffect, useCallback, useRef } = React; const SECTIONS = [ { id: 'overview', label: 'Overview', icon: 'grid', kbd: '1', group: 'Home' }, { id: 'guide', label: 'Guide', icon: 'compass', kbd: '', group: 'Home' }, { id: 'ta', label: 'Technical analysis', icon: 'chart', kbd: '2', group: 'Research' }, { id: 'lca', label: 'Liquidity & flow', icon: 'layers', kbd: '3', group: 'Research' }, { id: 'onchain', label: 'On-chain', icon: 'link', kbd: '4', group: 'Research' }, { id: 'macro', label: 'Macro', icon: 'globe', kbd: '5', group: 'Research' }, { id: 'sentiment', label: 'Sentiment', icon: 'eye', kbd: '6', group: 'Research' }, { id: 'cycles', label: 'Cycles · halving', icon: 'cycle', kbd: '7', group: 'Research' }, { id: '__traders' }, { id: 'reports', label: 'Reports', icon: 'report', kbd: '', group: 'Reports', roles: ['admin'] }, { id: 'scan', label: 'AI Scan', icon: 'scan', kbd: '9', group: 'AI' }, { id: 'telegram', label: 'Telegram feed', icon: 'send', kbd: '', group: 'Feeds', roles: ['admin', 'arena'] }, { id: 'users', label: 'Users & accounts', icon: 'users', kbd: '', group: 'Admin', roles: ['admin'] }, { id: 'account', label: 'My account', icon: 'user', kbd: '', group: 'Account' }, { id: 'compare', label: 'Compare strategies', icon: 'chart', kbd: '', group: 'Account', roles: ['user', 'admin'] }, ]; // Strategy (investor): #/trader/ — Operator (admin): #/trader//ops. // The old #/ai still redirects to the first strategy. const TRADER_PREFIX = 'trader/'; const TRADER_HASH_RE = /^trader\/([a-z0-9-]+)(\/ops)?$/; function parseTraderHash(id) { const m = (id || '').match(TRADER_HASH_RE); if (!m) return null; return { slug: m[1], ops: !!m[2], baseId: TRADER_PREFIX + m[1] }; } // Reports: #/reports (first page) or #/reports/ — one sidebar row, the // pages are a sub-nav inside it (see widgets-reports.jsx's REPORT_PAGES). const REPORTS_HASH_RE = /^reports(?:\/([a-z0-9-]+))?$/; function parseReportsHash(id) { const m = (id || '').match(REPORTS_HASH_RE); return m ? { page: m[1] || null } : null; } // The URL slug for a trader page. Deliberately NOT strategies.slug (the real // trader's name, e.g. "trader-gauls" — that's an internal identifier tied to // config.yaml's chat mapping and stays out of any URL). Derived from public_name // instead, which every viewer already sees ("Strategy A" -> "strategy-a") — same // for admin and user, so one link works regardless of who opens it. function publicSlug(name) { return String(name || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'strategy'; } function traderSections(strategies, role) { // Admin sidebar id is Operator (#/trader//ops); user id stays Strategy. // baseId always trader/ for active matching + Strategy toggle. slug here // is publicSlug(public_name), not strategies.slug — see publicSlug's own doc // comment: the real trader name never belongs in a URL, for any viewer. // Labels keep public_name so the nav entry matches the investor surface. // Traders first, then SignalShade's own bots (kind 'house') under their own heading. const list = strategies || []; const kindOf = (st) => (st.kind === 'house' ? 'house' : 'trader'); const ordered = ['trader', 'house'].flatMap(k => list.filter(st => kindOf(st) === k)); return ordered.map((st, i) => { const baseId = TRADER_PREFIX + publicSlug(st.public_name); const kind = kindOf(st); return { id: role === 'admin' ? baseId + '/ops' : baseId, baseId, label: st.public_name || st.name, icon: kind === 'house' ? 'bot' : 'zap', kbd: i === 0 ? '8' : '', group: kind === 'house' ? 'SignalShade strategies' : 'Strategies', roles: ['admin', 'user'], strategy: st, }; }); } // Sections without `roles` are public (market data, and My account, which hosts // sign-in). The server enforces the same rules — this only hides what would 403. function sectionsFor(user, strategies) { const out = []; SECTIONS.forEach(s => { if (s.id === '__traders') out.push(...traderSections(strategies, user && user.role)); else out.push(s); }); // An arena member is a user with extra read access, so every user section is theirs too. return out.filter(s => !s.roles || (user && (s.roles.includes(user.role) || (user.role === 'arena' && s.roles.includes('user'))))); } const ROLE_LABEL = { admin: 'Admin', user: 'Free tier', arena: 'Arena member', pending: 'Pending approval' }; // One-line blurb per Research tab — shared by SectionIntro's page subtitle and // the Overview landing page's research cards, so the copy can't drift apart. const SECTION_BLURBS = { ta: 'EMAs, RSI, MACD and market structure on the daily', lca: 'Funding, open interest and long/short positioning', onchain: 'MVRV, dominance, stablecoins and holder behaviour', macro: 'DXY, rates, inflation and the Fed calendar', sentiment: 'Fear & Greed, positioning and cohort flows', cycles: 'Halving cycle, seasonality and long-term structure', }; const DEFAULT_STRIP = [ { sym: 'BTC', px: '—', chg: '+0.00%', up: true }, { sym: 'ETH', px: '—', chg: '+0.00%', up: true }, { sym: 'SOL', px: '—', chg: '+0.00%', up: true }, { sym: 'DXY', px: '—', chg: '-0.00%', up: false }, { sym: 'GOLD', px: '—', chg: '+0.00%', up: true }, { sym: 'SPX', px: '—', chg: '+0.00%', up: true }, { sym: 'VIX', px: '—', chg: '-0.00%', up: false }, { sym: 'US10Y', px: '—', chg: '—', up: false }, { sym: 'BTC.D', px: '—', chg: '+0.00%', up: true }, ]; // === Icons ================================================================ function Icon({ name, size = 14 }) { const s = size; const common = { width: s, height: s, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (name) { case 'grid': return ; case 'chart': return ; case 'layers': return ; case 'link': return ; case 'globe': return ; case 'eye': return ; case 'cycle': return ; case 'search': return ; case 'bell': return ; case 'star': return ; case 'gear': return ; case 'plus': return ; case 'refresh':return ; case 'zap': return ; case 'bot': return ; case 'send': return ; case 'scan': return ; case 'user': return ; case 'users': return ; case 'compass': return ; case 'report': return ; } return null; } // True on phone/small-tablet widths — keep in step with the 820px breakpoint in index.html. function useIsMobile() { const q = '(max-width: 820px)'; const [m, setM] = useState(() => window.matchMedia(q).matches); useEffect(() => { const mq = window.matchMedia(q); const on = () => setM(mq.matches); mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }, []); return m; } // === Sidebar ============================================================== function Sidebar({ active, onChange, user, sections, onCloseNav }) { const [collapsedPref, setCollapsed] = useState(false); const isMobile = useIsMobile(); const collapsed = collapsedPref && !isMobile; // the phone drawer is always the full sidebar const [menuOpen, setMenuOpen] = useState(false); const [livePnl, setLivePnl] = useState({}); const gearRef = useRef(null); const menuRef = useRef(null); // `user` is our own role lookup (/api/auth/me) and comes back null both when // Clerk has no session AND when Clerk has a valid session but the local users // row has no role ("row deleted out from under an active session" — see // server.js). That second case left someone with an active Clerk session and // no way to reach it: the menu only ever showed "Sign in" when `user` was // null, so there was no path to Clerk.signOut() short of the browser console. // Tracked independently so "Log out" shows whenever Clerk itself thinks // there's a session, regardless of whether our own role lookup succeeded. const [clerkHasSession, setClerkHasSession] = useState(!!(window.Clerk && window.Clerk.session)); useEffect(() => { if (!window.Clerk) return undefined; let unsubscribe; let cancelled = false; window.Clerk.load().then(() => { if (cancelled) return; setClerkHasSession(!!window.Clerk.session); unsubscribe = window.Clerk.addListener(({ session }) => setClerkHasSession(!!session)); }).catch(() => {}); return () => { cancelled = true; if (unsubscribe) unsubscribe(); }; }, []); // Sidebar's own live % chip next to each strategy — polls independently of // whichever page is open, since the nav is always mounted. Same 5s Bybit // cache as every other marks consumer (src/marks.js), so this adds no real // load; paused off-tab like every other poller in the app. const canSeeStrategies = !!(user && (user.role === 'admin' || user.role === 'user' || user.role === 'arena')); useEffect(() => { if (!canSeeStrategies) { setLivePnl({}); return undefined; } let alive = true; const fetchNow = () => { fetch('/api/strategies/live-pnl', { credentials: 'include' }).then(r => r.json()) .then(j => { if (!alive || !j.ok) return; const map = {}; j.data.forEach(d => { map[d.strategy_id] = d; }); setLivePnl(map); }).catch(() => {}); }; fetchNow(); const id = setInterval(() => { if (!document.hidden) fetchNow(); }, 15000); return () => { alive = false; clearInterval(id); }; }, [canSeeStrategies]); // Unread badge on each strategy link, for THIS user. Having a strategy's page open counts as // reading it: the marker is moved when it opens and on every poll while it stays open, so // what arrives under your eyes never piles up as unread, and the badge is gone the moment // you open the page. Other strategies keep counting from where you last left them. const [unread, setUnread] = useState({}); const openStrategy = (sections.find(s => s.id === active) || {}).strategy; const openStrategyId = openStrategy ? openStrategy.id : null; useEffect(() => { if (!canSeeStrategies) { setUnread({}); return undefined; } let alive = true; const tick = async () => { try { if (openStrategyId != null) { setUnread(u => ({ ...u, [openStrategyId]: 0 })); await fetch(`/api/strategies/${openStrategyId}/read`, { method: 'POST', credentials: 'include' }); } const j = await fetch('/api/strategies/unread', { credentials: 'include' }).then(r => r.json()); if (!alive || !j.ok) return; const map = {}; j.data.forEach(d => { map[d.strategy_id] = d.strategy_id === openStrategyId ? 0 : d.unread; }); setUnread(map); } catch (_) {} }; tick(); const id = setInterval(() => { if (!document.hidden) tick(); }, 15000); return () => { alive = false; clearInterval(id); }; }, [canSeeStrategies, openStrategyId]); // Close the account menu on outside click / Escape useEffect(() => { if (!menuOpen) return undefined; function onDocClick(e) { if (gearRef.current && gearRef.current.contains(e.target)) return; if (menuRef.current && menuRef.current.contains(e.target)) return; setMenuOpen(false); } function onKey(e) { if (e.key === 'Escape') setMenuOpen(false); } document.addEventListener('mousedown', onDocClick); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDocClick); document.removeEventListener('keydown', onKey); }; }, [menuOpen]); // Clerk owns the session cookie entirely — signing out is a client-side // Clerk call, not a server round-trip (there's no /api/auth/logout any more). // Clerk.load() must be awaited first: calling signOut() before clerk-js has // finished initializing silently no-ops (confirmed live — the session cookie // survives and the next reload comes back signed in). load() resolves // immediately if already loaded, so this is never redundant work once // widgets-auth.jsx's own useClerkReady got there first. const handleLogout = useCallback(async () => { try { if (window.Clerk) { await window.Clerk.load(); await window.Clerk.signOut(); } } catch (_) {} window.location.reload(); }, []); const displayName = (user && (user.name || user.email)) || 'Guest'; return ( ); } // === Top bar ============================================================== function TopBar({ sectionMeta, strip, onRefresh, refreshing, viewMode, isTrader, onOpenNav, user }) { return (
SignalShade
{sectionMeta.label}
{isTrader ? (
{viewMode === 'admin' ? 'Operator' : 'Strategy'}
) : (
Markets
)}
{strip.map((t, i) => ( 0 ? 22 : 0 }}> {t.sym} {t.px} {t.chg} ))}
); } function Clock() { const [t, setT] = useState(new Date()); useEffect(() => { const id = setInterval(() => setT(new Date()), 1000); return () => clearInterval(id); }, []); const pad = n => String(n).padStart(2, '0'); return <>{pad(t.getHours())}:{pad(t.getMinutes())}:{pad(t.getSeconds())} · UTC{-(t.getTimezoneOffset() / 60)}; } // === Section heading ====================================================== const _last = (arr) => (Array.isArray(arr) && arr.length ? arr[arr.length - 1] : null); // Derive the four market biases from live snapshot data (no hardcoded calls). // Simple, transparent heuristics — each pill also shows the metric driving it. function computeBiases(m) { if (!m) return []; // TA — EMA stack + MACD histogram const px = m.last && m.last.c, e50 = _last(m.EMA50), e200 = _last(m.EMA200); const hist = _last(m.MACD && m.MACD.hist); let ta = 'neutral', taNote = 'awaiting data'; if (px && e50 && e200) { if (px > e50 && e50 > e200) { ta = 'bull'; taNote = 'price > EMA50 > EMA200'; } else if (px < e50 && e50 < e200) { ta = 'bear'; taNote = 'price < EMA50 < EMA200'; } else { ta = 'neutral'; taNote = 'price vs EMAs mixed'; } if (hist != null) taNote += ' · MACD ' + (hist >= 0 ? '+' : '−'); } // Liquidity — funding rate + long/short crowding const fund = _last(m.FUNDING); const ls = m.LONG_SHORT || {}, longs = ls.longs, shorts = ls.shorts; let liqScore = 0; if (fund != null) liqScore += fund > 0.01 ? -1 : fund < -0.005 ? 1 : 0; if (longs != null) liqScore += longs > 55 ? -1 : longs < 45 ? 1 : 0; const liq = liqScore > 0 ? 'bull' : liqScore < 0 ? 'bear' : 'neutral'; const liqNote = 'funding ' + (fund != null ? fund.toFixed(3) + '%' : '—') + (longs != null ? ` · L/S ${longs.toFixed(0)}/${shorts.toFixed(0)}` : ''); // On-chain — MVRV zone const mvrv = m.ONCHAIN && m.ONCHAIN.mvrv; let oc = 'neutral', ocNote = 'MVRV —'; if (mvrv != null) { oc = mvrv > 3.5 ? 'bear' : mvrv < 1.5 ? 'bull' : 'neutral'; ocNote = 'MVRV ' + mvrv.toFixed(2) + (m.ONCHAIN.mvrvZone ? ' · ' + m.ONCHAIN.mvrvZone : ''); } // Macro — DXY 30d trend (inverse to BTC) const dxy = m.DXY_CHG_30D; let mScore = 0; if (dxy != null) mScore += dxy > 0.5 ? -1 : dxy < -0.5 ? 1 : 0; const macro = mScore > 0 ? 'bull' : mScore < 0 ? 'bear' : 'neutral'; const macroNote = 'DXY ' + (dxy != null ? window.fmtSigned(dxy, 2) + '% (30d)' : '—'); return [ { label: 'TA', bias: ta, note: taNote }, { label: 'Liquidity', bias: liq, note: liqNote }, { label: 'On-chain', bias: oc, note: ocNote }, { label: 'Macro', bias: macro, note: macroNote }, ]; } function SectionIntro({ section, meta, user, viewMode, onNavigate }) { const st = meta && meta.strategy; const isOperator = viewMode === 'admin'; const isAdminUser = !!(user && user.role === 'admin'); // Strategy (investor) copy uses public_name. Operator copy uses the internal // trader name + pipeline ribbon. A regular user's strategy object comes from // /api/strategies/list, which deliberately carries only {id, slug, public_name, // active} — no real trader name / follower count — so the Strategy branch must // never require st.name or st.followers. Followers card lives on Operator. const data = st ? (isOperator ? { title: st.name, sub: st.kind === 'house' ? 'SignalShade bot, paper only. ' + (st.description || '') : 'Operator — pipeline trust, feed, ledger record edits' + (st.followers != null ? ` · ${st.followers} following account${st.followers === 1 ? '' : 's'}` : '') + (st.public_name ? ` · shown to investors as "${st.public_name}"` : ''), } : { title: st.public_name || st.name, sub: st.kind === 'house' ? 'A SignalShade strategy: a BTC paper-trading bot run by this site, not a trader. ' + (st.description || '') : 'Strategy — your account P&L, open trades and history for this strategy', }) : { overview: { title: "Welcome", sub: "Bitcoin right now: market pressure, the expected move over the next 24 hours and a plain-English market read, with the research sections below" }, ta: { title: "Technical analysis", sub: SECTION_BLURBS.ta }, lca: { title: "Liquidity & flow", sub: SECTION_BLURBS.lca }, onchain: { title: "On-chain analysis", sub: SECTION_BLURBS.onchain }, macro: { title: "Macro environment", sub: SECTION_BLURBS.macro }, sentiment: { title: "Sentiment & positioning", sub: SECTION_BLURBS.sentiment }, cycles: { title: "Cycles & seasonality", sub: SECTION_BLURBS.cycles }, telegram: { title: "Telegram feed", sub: "Live messages read from the configured group" }, scan: { title: "AI Scan", sub: "Ad-hoc chart analysis for any ticker — pick a symbol, choose a timeframe, run" }, users: { title: "Users & accounts", sub: "Approve new sign-ins, see every exchange account, rename strategies" }, account: { title: "My account", sub: "Your exchange accounts, settings and trade history" }, compare: { title: "Compare strategies", sub: "Win rate and R-multiple performance, side by side" }, reports: { title: "Reports", sub: "Cross-strategy analysis of how each setup reached us, and what that cost" }, }[section]; if (!data) return null; const modeToggle = st && isAdminUser ? (
{isOperator ? 'Pipeline & controls' : 'Investor view'}
) : null; const notifyToggle = st ? : null; return (

{data.title}

{st && ( {isOperator ? 'Operator' : 'Strategy'} )}
{data.sub}
{(modeToggle || notifyToggle) ? (
{modeToggle} {notifyToggle}
) : (!st && !['telegram', 'scan', 'users', 'account', 'compare', 'reports'].includes(section) && (
{computeBiases(window.MOCK).map(p => ( ))}
))}
); } // Per-strategy push notification preference — self-contained (fetches and posts // its own state), so it drops into any strategy page's header with just an id. // Default (no row in notification_strategy_prefs yet) is "on" for a strategy the // viewer's account(s) follow, "off" otherwise — computed server-side, see // GET /api/push/prefs. The checkbox always reflects and sets the EFFECTIVE value, // never a tri-state "unset". function NotifyToggle({ strategyId }) { const [state, setState] = useState(null); // null = loading const [busy, setBusy] = useState(false); useEffect(() => { let alive = true; Promise.all([ fetch('/api/push/prefs', { credentials: 'include' }).then(r => r.json()).catch(() => ({ ok: false })), window.profitPush ? window.profitPush.status().catch(() => null) : Promise.resolve(null), ]).then(([prefsRes, pushStatus]) => { if (!alive) return; const row = prefsRes.ok && (prefsRes.data || []).find(r => r.strategy_id === strategyId); setState({ enabled: row ? row.enabled : true, pushOn: !!(pushStatus && pushStatus.subscribed) }); }); return () => { alive = false; }; }, [strategyId]); if (!state) return null; async function toggle() { const next = !state.enabled; setBusy(true); setState(s => ({ ...s, enabled: next })); // optimistic; reverted below on failure try { const r = await fetch('/api/push/prefs', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ strategy_id: strategyId, enabled: next }), }).then(res => res.json()); if (!r.ok) throw new Error(r.error || 'failed to save'); } catch (_) { setState(s => ({ ...s, enabled: !next })); } finally { setBusy(false); } } return ( ); } function BiasPill({ label, bias, note }) { const color = bias === 'bull' ? 'var(--bull)' : bias === 'bear' ? 'var(--bear)' : 'var(--text-3)'; const bg = bias === 'bull' ? 'var(--bull-bg)' : bias === 'bear' ? 'var(--bear-bg)' : 'var(--bg-card)'; return (
{label} {bias.toUpperCase()}
{note}
); } // === Overview landing ====================================================== // A clickable jump-off point, not another data widget: every card here points // at a page that already owns this content (a strategy's own page, or one of // the Research tabs) rather than re-rendering it — see the Overview section's // git history for why (it used to just union all six Research tabs' widgets // onto one page with no curation). function NavCard({ icon, label, blurb, onClick }) { return (
{label}
{blurb}
→
); } function CardRow({ title, children }) { return (
{title}
{children}
); } function W_OverviewLanding({ sections, onNavigate }) { const strategies = (sections || []).filter(s => s.strategy); const research = SECTIONS.filter(s => s.group === 'Research'); return (
{/* Nobody following anything yet (new, pending or signed out): point them at the guide. */} {strategies.length === 0 && ( onNavigate('guide')} /> )} {strategies.length > 0 && ( {strategies.map(s => ( onNavigate(s.baseId || s.id)} /> ))} )} {research.map(s => ( onNavigate(s.id)} /> ))}
); } // === Sections ============================================================= function Section({ id, route, user, meta, viewMode, sections, onNavigate }) { const grid = { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 14 }; if (meta && meta.strategy) { const page = ; // SignalShade bots: the luck scoreboard sits above the usual strategy page return meta.strategy.kind === 'house' ? <>{page} : page; } if (id === 'overview') return <>
; if (id === 'ta') return
; if (id === 'lca') return
; if (id === 'onchain') return
; if (id === 'macro') return
; if (id === 'sentiment') return
; if (id === 'cycles') return
; if (id === 'telegram') return ; if (id === 'scan') return ; if (id === 'users') return ; if (id === 'account') return ; if (id === 'compare') return ; if (id === 'guide') return ; if (id === 'reports') return ; return null; } // === Loading screen ======================================================= function LoadingScreen({ error, onRetry }) { return (
SignalShade {error ? ( <>
Failed to load data
{error}
) : ( <>
SignalShade
fetching live data…
{[0, 1, 2].map(i => ( ))}
)}
); } // === App ================================================================== const LIVE_PRICE_INTERVAL = 10 * 1000; // 10 s — Binance /ticker/price, 1 weight, safe at any interval const SECTION_IDS = SECTIONS.map(s => s.id); // Derive the active section from the URL hash so every page is shareable/bookmarkable. // Accepts "#/ta" or "#ta", Strategy "#/trader/", Operator "#/trader//ops", // a report page "#/reports/" (plus the old "#/ai"); falls back to overview for // empty/unknown hashes. Non-admin /ops is redirected to Strategy in App once auth has answered. function sectionFromHash() { const id = (window.location.hash || '').replace(/^#\/?/, ''); if (id === 'ai' || parseTraderHash(id) || parseReportsHash(id)) return id; return SECTION_IDS.includes(id) ? id : 'overview'; } function App() { const [section, setSection] = useState(sectionFromHash); const [user, setUser] = useState(null); const [userLoaded, setUserLoaded] = useState(false); const [strategies, setStrategies] = useState(null); const [loaded, setLoaded] = useState(false); const [error, setError] = useState(null); const [refreshing, setRefreshing] = useState(false); const [strip, setStrip] = useState(DEFAULT_STRIP); const [livePrice, setLivePrice] = useState(null); // Navigate by changing the hash — the hashchange listener below is the single // source of truth that pushes it back into `section` state. const [navOpen, setNavOpen] = useState(false); const navigate = useCallback((id) => { window.location.hash = '/' + id; setNavOpen(false); }, []); // Keep `section` in sync with the URL hash (direct links, back/forward, manual edits). useEffect(() => { const onHash = () => setSection(sectionFromHash()); window.addEventListener('hashchange', onHash); // Give a bare load a real, shareable URL without adding a history entry. if (!window.location.hash) window.location.replace('#/' + section); return () => window.removeEventListener('hashchange', onHash); }, []); // Signed-in user (with role). Re-fetched when a sign-in completes anywhere on the page. useEffect(() => { const fetchUser = () => fetch('/api/auth/me', { credentials: 'include' }).then(r => r.json()) .then(j => setUser(j.ok ? j.user : null)) .catch(() => setUser(null)) .finally(() => setUserLoaded(true)); fetchUser(); window.addEventListener('auth-changed', fetchUser); return () => window.removeEventListener('auth-changed', fetchUser); }, []); const isAdmin = !!(user && user.role === 'admin'); const isUser = !!(user && (user.role === 'user' || user.role === 'arena')); useEffect(() => { if (!isAdmin && !isUser) { setStrategies([]); return; } const url = isAdmin ? '/api/admin/strategies' : '/api/strategies/list'; fetch(url, { credentials: 'include' }).then(r => r.json()) .then(j => setStrategies(j.ok ? j.data.filter(s => s.active) : [])) .catch(() => setStrategies([])); }, [isAdmin, isUser]); // Non-admin (or signed-out) hitting #/trader//ops → Strategy route. useEffect(() => { if (!userLoaded) return; const t = parseTraderHash(section); if (t && t.ops && !(user && user.role === 'admin')) { window.location.replace('#/' + t.baseId); } }, [section, user, userLoaded]); const visible = React.useMemo(() => sectionsFor(user, strategies), [user, strategies]); // Keyboard shortcuts useEffect(() => { const onKey = e => { if (e.target && /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName)) return; const s = visible.find(s => s.kbd === e.key); if (s && !e.metaKey && !e.ctrlKey) navigate(s.id); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [navigate, visible]); // Full snapshot fetch — populates window.MOCK const fetchSnapshot = useCallback(async () => { setRefreshing(true); try { const res = await fetch('/api/snapshot'); const json = await res.json(); if (!json.ok) throw new Error(json.error || 'Server error'); window.MOCK = json.data; setLoaded(true); setError(null); } catch (err) { setError(err.message); } finally { setRefreshing(false); } }, []); // Tickers fetch — updates strip and watchlist const fetchTickers = useCallback(async () => { try { const res = await fetch('/api/tickers'); const json = await res.json(); if (!json.ok) return; setStrip(json.data.strip); } catch (_) {} }, []); // Live price — patches the last candle close so chart feels alive const fetchLivePrice = useCallback(async () => { try { const res = await fetch('/api/price'); const json = await res.json(); if (!json.ok || !window.MOCK) return; const price = json.price; window.MOCK.last.c = price; window.MOCK.dayChange = price - window.MOCK.prev.c; window.MOCK.dayChangePct = (window.MOCK.dayChange / window.MOCK.prev.c) * 100; // Also update the last candle in the array so the chart bar reflects it const c = window.MOCK.CANDLES; if (c && c.length) { c[c.length - 1].c = price; c[c.length - 1].h = Math.max(c[c.length - 1].h, price); c[c.length - 1].l = Math.min(c[c.length - 1].l, price); } setLivePrice(price); // triggers re-render so widgets pick up new window.MOCK values } catch (_) {} }, []); // Initial load useEffect(() => { fetchSnapshot(); }, []); // Refresh snapshot every 15 min useEffect(() => { const id = setInterval(fetchSnapshot, 15 * 60 * 1000); return () => clearInterval(id); }, [fetchSnapshot]); // Refresh tickers every 60 sec useEffect(() => { fetchTickers(); const id = setInterval(fetchTickers, 60 * 1000); return () => clearInterval(id); }, [fetchTickers]); // Live price every 10 sec (only after initial snapshot is loaded) useEffect(() => { if (!loaded) return; fetchLivePrice(); const id = setInterval(fetchLivePrice, LIVE_PRICE_INTERVAL); return () => clearInterval(id); }, [loaded, fetchLivePrice]); if (!loaded || !userLoaded || strategies === null) return ; // A hash pointing at a section this user can't see (bookmark, signed out, role // changed) falls back to Overview without rewriting the URL. Match traders by // baseId so Strategy (#/trader/) and Operator (.../ops) highlight the same // sidebar row even when admin sidebar id is the /ops default. const trader = parseTraderHash(section); const firstTrader = visible.find(s => s.strategy); const wanted = section === 'ai' ? (firstTrader && (firstTrader.baseId || firstTrader.id)) : trader ? trader.baseId : parseReportsHash(section) ? 'reports' : section; const meta = visible.find(s => (s.baseId || s.id) === wanted || s.id === wanted) || visible[0]; // current = Strategy base for Section routing / screenLabel math; sidebar uses // meta.id (admin default /ops) so the same row stays active on both surfaces. const current = meta.baseId || meta.id; // Strategy surface is always viewMode=user (including admin-as-investor). // Operator chrome only on #/trader//ops for admins. const viewMode = (isAdmin && trader && trader.ops && meta.strategy) ? 'admin' : 'user'; const screenLabel = (trader && trader.ops && meta.strategy) ? (current + '/ops') : current; return (
setNavOpen(false)} />
setNavOpen(false)} />
setNavOpen(true)} user={user} />
); } ReactDOM.createRoot(document.getElementById('root')).render();