/* Fincr 2.0 — shell: blue glass sidebar (light blue fading to navy), slim top row, ⌘K palette, provenance status bar. IA: Charts live inside Overview, Import inside Settings ▸ Data. Keyboard: ⌘K palette, 1–4 switch views. */ const NAV2 = [ { id: 'overview', label: 'Overview', d: 'M3 9.5L10 4l7 5.5V17a1 1 0 01-1 1h-3v-5H7v5H4a1 1 0 01-1-1z' }, { id: 'positions', label: 'Positions', d: 'M4 5h12v4H4zM4 11h12v4H4z' }, { id: 'agent', label: 'Agent', d: 'M10 3a4 4 0 014 4v1a4 4 0 01-8 0V7a4 4 0 014-4zM4 17a6 6 0 0112 0' }, { id: 'import', label: 'Add assets', d: 'M10 3v9M6 8l4 4 4-4M4 16h12' }]; // Short relative-time strings for the provenance bar: "JUST NOW", "2M AGO", // "1H AGO", "3D AGO". function f2FormatRelativeTime(ms) { const diff = Date.now() - ms; const sec = Math.floor(diff / 1000); if (sec < 30) return 'JUST NOW'; if (sec < 60) return sec + 'S AGO'; const min = Math.floor(sec / 60); if (min < 60) return min + 'M AGO'; const hr = Math.floor(min / 60); if (hr < 24) return hr + 'H AGO'; const days = Math.floor(hr / 24); return days + 'D AGO'; } function Shell2() { const [mode, setMode] = React.useState(() => localStorage.getItem('fincr2-mode') || 'ink'); const [density, setDensity] = React.useState(() => localStorage.getItem('fincr2-density') || 'comfortable'); const [tab, setTab] = React.useState(() => localStorage.getItem('fincr2-tab') || 'overview'); const [discrete, setDiscrete] = React.useState(() => localStorage.getItem('fincr2-discrete') === '1'); const [railOpen, setRailOpen] = React.useState(() => localStorage.getItem('fincr2-rail') !== '0'); const [palette, setPalette] = React.useState(false); const [highlight, setHighlight] = React.useState(null); const [toast, setToast] = React.useState(null); // C2-S3 transient non-blocking notice const t = window.makeTheme2(mode, density); // Owner identity - single source, mirrors backend ACCOUNT_DEFAULT shape ({name, avatar}). // Fallback keeps the chip rendering even if appdata did not load. [C2-D55] const F = window.FINCR || {}; const account = (F && F.account) || { name: "User", avatar: "" }; const acctName = account.name || "User"; const acctAvatar = account.avatar || (acctName ? acctName[0].toUpperCase() : "•"); // Real time-of-day greeting (was hardcoded "Good evening"). Client clock. const hr = new Date().getHours(); const partOfDay = hr < 12 ? "morning" : hr < 18 ? "afternoon" : "evening"; React.useEffect(() => {localStorage.setItem('fincr2-mode', mode);}, [mode]); React.useEffect(() => {localStorage.setItem('fincr2-density', density);}, [density]); React.useEffect(() => {localStorage.setItem('fincr2-tab', tab);}, [tab]); React.useEffect(() => {localStorage.setItem('fincr2-discrete', discrete ? '1' : '0');}, [discrete]); React.useEffect(() => {localStorage.setItem('fincr2-rail', railOpen ? '1' : '0');}, [railOpen]); // Provenance-bar live state lives on window.FINCR (sync status, FX rate), not in // React state. This counter forces a re-render when those change, or when the // relative-time label needs refreshing ([C2-D43]). const [, forceRerender] = React.useState(0); React.useEffect(() => { const handler = () => forceRerender((n) => n + 1); window.addEventListener('fincr:sync-status-change', handler); window.addEventListener('fincr:fx-update', handler); window.addEventListener('fincr:thesis-update', handler); // C2-S2: repaint on thesis load // Tick every 30s so "SYNC 5M AGO" stays fresh between syncs. const tick = setInterval(() => forceRerender((n) => n + 1), 30000); return () => { window.removeEventListener('fincr:sync-status-change', handler); window.removeEventListener('fincr:fx-update', handler); window.removeEventListener('fincr:thesis-update', handler); clearInterval(tick); }; }, []); // C2-S3 — transient toast for non-blocking notices (e.g. a post-close thesis // update that failed). Fired via window CustomEvent('fincr:toast', {detail:{message}}). React.useEffect(() => { const onToast = (e) => setToast((e.detail && e.detail.message) || ''); window.addEventListener('fincr:toast', onToast); return () => window.removeEventListener('fincr:toast', onToast); }, []); React.useEffect(() => { if (!toast) return; const id = setTimeout(() => setToast(null), 6000); // auto-dismiss return () => clearTimeout(id); }, [toast]); const actions = React.useMemo(() => ({ go: setTab, toggleDiscrete: () => setDiscrete((d) => !d), toggleTheme: () => setMode((m) => m === 'ink' ? 'paper' : 'ink'), toggleRail: () => setRailOpen((r) => !r), addPosition: () => window.__fincrStore && window.__fincrStore.actions.openAdd(), openTicker: (tk) => window.__fincrStore && window.__fincrStore.actions.openDrawer(tk), focusTicker: (tk) => {setTab('positions');setHighlight(tk);setTimeout(() => setHighlight(null), 2600);} }), []); React.useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {e.preventDefault();setPalette((p) => !p);return;} const tag = (e.target.tagName || '').toLowerCase(); if (tag === 'input' || tag === 'textarea' || e.metaKey || e.ctrlKey || e.altKey) return; if (e.key === '1') setTab('overview');else if (e.key === '2') setTab('positions');else if (e.key === '3') setTab('agent');else if (e.key === '4') setTab('import');else if (e.key === '5') setTab('settings'); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); let content; if (tab === 'overview') content = ;else if (tab === 'positions') content = ;else if (tab === 'agent') content = ;else if (tab === 'import') content = ;else content = ; const IconBtn2 = ({ onClick, title, active, children }) => ; const railItem = (id, label, d, anchor) => { const on = tab === id; return ( ); }; // ── Provenance-bar indicators ── // SYNC: reflects the most recent POST /holdings result ([C2-D41]); reads // window.FINCR (set by store2.jsx). SaaS-survivable — window is per-browser. function renderSyncIndicator() { const F = window.FINCR || {}; const hasKey = !!localStorage.getItem('fincr-api-key'); if (!hasKey) return SYNC OFF; if (F.lastSyncStatus === 'failed') return SYNC FAILED; if (!F.lastSyncMs) return SYNC PENDING; return SYNC {f2FormatRelativeTime(F.lastSyncMs)}; } // FX: live rate from /fx-rate via store2.jsx ([C2-D44]). Pair is parameterized // server-side; the single-user default is EUR/USD. function renderFxIndicator() { const F = window.FINCR || {}; if (!F.fxRate || !F.fxPair) return FX —; const display = F.fxPair.slice(0, 3) + '/' + F.fxPair.slice(3); return FX {display} {F.fxRate.toFixed(4)}; } return (
{/* ── Blue glass rail ── */} {/* ── Main column ── */}
Good {partOfDay}, {acctName}
setDiscrete((d) => !d)} title="Discrete mode" active={discrete}> {discrete ? : } {t.dark ? : }
{content}
{/* ── Provenance status bar ── */}
FINNHUB · COINGECKO {renderFxIndicator()} {renderSyncIndicator()} {/* NYSE indicator removed — deferred to P3 ([C2-D45]) */} ⌘K COMMANDS 1–5 VIEWS
{toast && (
setToast(null)} style={{ position: 'fixed', bottom: 48, left: '50%', transform: 'translateX(-50%)', zIndex: 96, background: t.raise, border: `1px solid ${t.hairStrong}`, borderRadius: 10, padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', maxWidth: 'calc(100vw - 32px)', boxShadow: t.dark ? '0 12px 32px -12px rgba(0,0,0,0.8)' : '0 12px 32px -16px rgba(23,25,30,0.4)' }}> {toast} ✕
)} setPalette(false)} actions={actions} />
); } window.Shell2 = Shell2;