// Market Hub — desktop layout explorations. Three landing concepts behind a switcher.
// A: Full dashboard grid · B: Two-pane workspace · C: Glance → deep-dive page.
const { useState: useStateA, useEffect: useEffectA } = React;
function useIsMobile() {
const [m, setM] = useStateA(window.innerWidth < 768);
useEffectA(() => {
const h = () => setM(window.innerWidth < 768);
window.addEventListener('resize', h);
return () => window.removeEventListener('resize', h);
}, []);
return m;
}
// Live data hook: paints the bundled mock instantly, then swaps in /api/scores
// data if the adapter can reach it (production). In the preview it stays on mock.
function useGlance() {
const [D, setD] = useStateA(window.GLANCE);
useEffectA(() => {
let alive = true;
if (window.MarketHubData) {
window.MarketHubData.loadGlance().then((live) => { if (alive && live) setD(live); }).catch(() => {});
}
return () => { alive = false; };
}, []);
return D;
}
// Fetches today's daily brief from the API.
function useDailyBrief() {
const [brief, setBrief] = useStateA(null);
useEffectA(() => {
let alive = true;
if (window.MarketHubData) {
window.MarketHubData.loadDailyBrief()
.then((data) => { if (alive && data && !data.error) setBrief(data); })
.catch(() => {});
}
return () => { alive = false; };
}, []);
return brief;
}
function sentimentColor(s) {
if (s >= 2) return '#22c55e';
if (s <= -2) return '#ef4444';
return '#f59e0b';
}
function sentimentLabel(s) {
if (s >= 3) return 'Bullish';
if (s >= 1) return 'Slightly Bullish';
if (s === 0) return 'Neutral';
if (s >= -2) return 'Slightly Bearish';
return 'Bearish';
}
// ── Daily Brief card — full-width news feed tile (Dashboard view) ──
function DailyBriefCard({ brief }) {
if (!brief) return null;
// ── Weekly layout (Sat / Sun) ──────────────────────────────────────────────
if (brief.isWeekly) {
const sc = sentimentColor(Math.round(brief.avgSentiment));
const sl = sentimentLabel(Math.round(brief.avgSentiment));
return (
Weekly Brief
{brief.weekLabel}
{brief.dominantSector}
{sl} avg {brief.avgSentiment > 0 ? '+' : ''}{brief.avgSentiment}
{brief.briefs.map(b => {
const dc = sentimentColor(b.sentiment);
const dl = new Date(b.date + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
return (
{dl}
{b.sentiment > 0 ? '+' : ''}{b.sentiment}
{b.sector}
{b.bullets.slice(0, 2).map((bullet, i) => (
{bullet}
))}
);
})}
);
}
// ── Daily layout (weekday) ─────────────────────────────────────────────────
const sc = sentimentColor(brief.sentiment);
const sl = sentimentLabel(brief.sentiment);
const dateLabel = new Date(brief.date + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
return (
Briefing.com Close Update
{dateLabel}
{brief.sector}
{sl} {brief.sentiment > 0 ? '+' : ''}{brief.sentiment}
{brief.bullets.map((b, i) => (
{b}
))}
);
}
// ── Daily Brief glance row — compact list tile (Glance view) ──
function DailyBriefGlanceRow({ brief, onOpen }) {
const mob = useIsMobile();
const pad = mob ? '11px 12px' : '15px 18px';
const titleW = mob ? 82 : 150;
const chevron =
Daily Brief
—
No brief available yet
{chevron}
);
}
// ── Weekly glance row ──────────────────────────────────────────────────────
if (brief.isWeekly) {
const sc = sentimentColor(Math.round(brief.avgSentiment));
const topBullets = brief.briefs[0]?.bullets.slice(0, mob ? 2 : 3) ?? [];
const totalBullets = brief.briefs.reduce((n, b) => n + b.bullets.length, 0);
return (
Weekly Brief
{brief.weekLabel}
{topBullets.map((b, i) => (
{b}
))}
{totalBullets > (mob ? 2 : 3) &&
+{totalBullets - (mob ? 2 : 3)} more }
avg {brief.avgSentiment > 0 ? '+' : ''}{brief.avgSentiment}
{brief.dominantSector}
{chevron}
)}
{mob && chevron}
);
}
// ── Daily glance row ───────────────────────────────────────────────────────
const sc = sentimentColor(brief.sentiment);
const dateLabel = new Date(brief.date + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
return (
Daily Brief
{dateLabel}
{brief.bullets.slice(0, mob ? 2 : 4).map((b, i) => (
{b}
))}
{brief.bullets.length > (mob ? 2 : 4) &&
+{brief.bullets.length - (mob ? 2 : 4)} more }
{brief.sentiment > 0 ? '+' : ''}{brief.sentiment}
{brief.sector}
{chevron}
)}
{mob && chevron}
);
}
// Fetches today's Claude-synthesized macro narrative from /api/macro-brief.
function useMacroBrief() {
const [state, setState] = useStateA({ status: 'loading', narrative: null, date: null, isWeekly: false, weekLabel: null });
useEffectA(() => {
let alive = true;
fetch('/api/macro-brief')
.then(r => r.json())
.then(data => {
if (!alive) return;
if (data.error) setState({ status: 'unavailable', narrative: null, date: null, isWeekly: false, weekLabel: null });
else setState({ status: 'ready', narrative: data.narrative, date: data.date, isWeekly: data.isWeekly ?? false, weekLabel: data.weekLabel ?? null });
})
.catch(() => { if (alive) setState({ status: 'unavailable', narrative: null, date: null, isWeekly: false, weekLabel: null }); });
return () => { alive = false; };
}, []);
return state;
}
// ── Macro Brief card — Claude-synthesized narrative (Dashboard / Glance views) ──
function MacroBriefCard({ brief: dailyBrief }) {
const { status, narrative, date, isWeekly, weekLabel } = useMacroBrief();
const dateLabel = date ? new Date(date + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) : null;
const titleText = isWeekly ? 'Weekly Macro Brief' : 'Macro Brief';
const footerDate = isWeekly ? weekLabel : dateLabel;
return (
{titleText}
{(isWeekly ? weekLabel : dateLabel) && {isWeekly ? weekLabel : dateLabel} }
✦ CLAUDE
{status === 'loading' && (
Synthesizing structural signals with today's market action…
)}
{status === 'unavailable' && (
{'Synthesis unavailable — scorecard or brief data not yet loaded.'}
)}
{status === 'ready' && narrative && (
<>
{narrative}
Synthesized by Claude Haiku · {footerDate}
)}
);
}
// ── Macro Brief glance row — compact list tile (Glance view) ──
function MacroBriefGlanceRow({ onOpen }) {
const mob = useIsMobile();
const { status, narrative, date } = useMacroBrief();
const dateLabel = date ? new Date(date + 'T12:00:00').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) : '—';
const maxChars = mob ? 80 : 160;
const preview = narrative ? narrative.slice(0, maxChars) + (narrative.length > maxChars ? '…' : '') : null;
const clickable = status === 'ready' && !!onOpen;
return (
Macro Brief
{dateLabel}
{status === 'loading' && Synthesizing… }
{status === 'unavailable' && Unavailable — scorecard or brief data not yet loaded }
{status === 'ready' && preview && {preview} }
✦
{clickable &&
}
);
}
// ── Macro Brief deep dive — full narrative page ──
function MacroBriefDeepDive({ onBack }) {
const { status, narrative, date, isWeekly, weekLabel } = useMacroBrief();
const dateLabel = date ? new Date(date + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }) : null;
const titleText = isWeekly ? 'Weekly Macro Brief' : 'Macro Brief';
const footerDate = isWeekly ? weekLabel : dateLabel;
return (
All signals
{titleText}
{footerDate && {footerDate} }
✦ CLAUDE
{status === 'loading' &&
Synthesizing structural signals with today's market action… }
{status === 'unavailable' &&
Synthesis unavailable — scorecard or brief data not yet loaded. }
{status === 'ready' && narrative && (
{narrative}
)}
);
}
// ── Macro Brief compact panel for Workspace left rail ──
function MacroBriefWorkspacePanel() {
const { status, narrative, date } = useMacroBrief();
const dateLabel = date ? new Date(date + 'T12:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : null;
const preview = narrative ? narrative.slice(0, 200) + (narrative.length > 200 ? '…' : '') : null;
return (
Macro Brief
{status === 'ready' && ✦ }
{dateLabel && {dateLabel} }
{status === 'loading' &&
Synthesizing… }
{status === 'unavailable' &&
Requires today's Close Update }
{status === 'ready' && preview &&
{preview} }
);
}
// ── Hook: last 30 days of brief history (for deep-dive trend chart) ──
function useBriefHistory() {
const [history, setHistory] = useStateA(null);
useEffectA(() => {
let alive = true;
fetch('/api/daily-brief?range=30')
.then(r => r.json())
.then(data => { if (alive && data.results) setHistory(data.results); })
.catch(() => {});
return () => { alive = false; };
}, []);
return history;
}
// ── 30-day sentiment bar chart (SVG) ──
function SentimentBarChart({ history }) {
const W = 720, H = 148, padBot = 28, padTop = 14, padL = 34, padR = 8;
const plotW = W - padL - padR;
const plotH = H - padTop - padBot;
const days = [...history].reverse();
const n = days.length;
if (n < 2) return null;
const spacing = plotW / n;
const barW = Math.max(Math.min(spacing - 3, 28), 3);
const unitH = (plotH / 2) / 5;
const zeroY = padTop + plotH / 2;
return (
+5
+2
0
-2
-5
{days.map((b, i) => {
const s = b.sentiment;
const bx = padL + i * spacing + (spacing - barW) / 2;
const barH = Math.abs(s) * unitH;
const by = s >= 0 ? zeroY - barH : zeroY;
const color = s >= 2 ? '#22c55e' : s <= -2 ? '#ef4444' : '#f59e0b';
const dl = new Date(b.date + 'T12:00:00Z');
const label = dl.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
const showLabel = i === 0 || i === n - 1 || i % Math.ceil(n / 6) === 0;
return (
{label} }
);
})}
);
}
// ── Sector abbreviation map ──
function abbrevSector(s) {
if (!s) return '—';
const MAP = { 'Technology': 'Tech', 'Consumer Discretionary': 'Disc', 'Healthcare': 'Hlth', 'Financials': 'Fin', 'Energy': 'Enrg', 'Industrials': 'Ind', 'Materials': 'Mat', 'Utilities': 'Util', 'Real Estate': 'RE', 'Communication Services': 'Comm', 'Consumer Staples': 'Stpl', 'Broad Market': 'Mkt' };
return MAP[s] || s.slice(0, 4);
}
// ── Brief day popover — shown on tile hover ──
function BriefDayPopover({ brief, rect }) {
const sc = brief.sentiment >= 2 ? '#22c55e' : brief.sentiment <= -2 ? '#ef4444' : '#f59e0b';
const dateLabel = new Date(brief.date + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
const W = 290;
const left = Math.min(Math.max(rect.left + rect.width / 2 - W / 2, 8), (window.innerWidth || 1200) - W - 8);
const top = rect.top - 10;
return (
{brief.sentiment > 0 ? '+' : ''}{brief.sentiment}
{dateLabel}
{brief.sector}
{(brief.bullets || []).map((bullet, i) => (
●
{bullet}
))}
);
}
// ── Sector rotation strip (30-day day cells) ──
function SectorStrip({ history }) {
const [hovered, setHovered] = useStateA(null);
const days = [...history].reverse();
return (
{days.map(b => {
const sc = b.sentiment >= 2 ? '#22c55e' : b.sentiment <= -2 ? '#ef4444' : '#f59e0b';
const dayNum = new Date(b.date + 'T12:00:00Z').getUTCDate();
const isHov = hovered?.brief.date === b.date;
return (
setHovered({ brief: b, rect: e.currentTarget.getBoundingClientRect() })}
onMouseLeave={() => setHovered(null)}
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
background: isHov ? sc + '25' : sc + '12',
border: `1px solid ${isHov ? sc + '60' : sc + '28'}`,
borderRadius: 7, padding: '6px 7px', minWidth: 38, cursor: 'default',
transition: 'background 0.12s, border-color 0.12s' }}>
{b.sentiment > 0 ? '+' : ''}{b.sentiment}
{abbrevSector(b.sector)}
{dayNum}
);
})}
{hovered &&
}
{bullets.map((b, i) => (
{b}
))}
{/* Back */}
All signals
{/* Header */}
Daily Brief
Briefing.com · Close Update
{/* ── Section 1: Today's / Weekly close update ── */}
{brief && (
{brief.isWeekly
? brief.weekLabel
: new Date(brief.date + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
{!brief.isWeekly &&
}
{brief.isWeekly && (
{brief.briefs.map(d => {
const dc = sentimentColor(d.sentiment);
const dl = new Date(d.date + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
return (
{dl}
{d.sentiment > 0 ? '+' : ''}{d.sentiment}
{d.sector}
);
})}
)}
)}
{/* ── Divergence flag ── */}
{divergence && (
⚡ Scorecard / Tactical Divergence
{divergence}
)}
{/* ── Section 2: 30-day sentiment trend ── */}
Sentiment History · 30 Days
{!history &&
Loading… }
{history && history.length < 2 &&
Not enough history yet — data accumulates after 2+ briefs. }
{history && history.length >= 2 && (
<>
{[['#22c55e', 'Bullish (+2 to +5)'], ['#f59e0b', 'Mixed (−1 to +1)'], ['#ef4444', 'Bearish (−2 to −5)']].map(([c, l]) => (
{l}
))}
)}
{/* ── Section 3: Sector rotation strip ── */}
{history && history.length >= 2 && (
Sector Rotation · 30 Days
Each cell shows the sentiment score, leading sector, and calendar day. Hover for full date.
)}
{/* ── Section 4: Full-text search ── */}
Search Close Updates
{searching ? 'Searching…' : 'Search'}
{searchResults !== null && (
{(() => {
const q = searchQuery.trim().toLowerCase();
// Flatten to individual matching bullets, each tagged with its date row
const matches = [];
searchResults.forEach(r => {
const dl = new Date(r.date + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' });
const sc = sentimentColor(r.sentiment);
r.bullets.forEach(b => {
if (b.toLowerCase().includes(q)) matches.push({ date: r.date, dl, sc, b });
});
});
if (matches.length === 0) return
No matching bullets found. ;
return matches.map((m, i) => {
// Highlight the matching term
const idx = m.b.toLowerCase().indexOf(q);
const before = m.b.slice(0, idx);
const hit = m.b.slice(idx, idx + q.length);
const after = m.b.slice(idx + q.length);
return (
{m.dl}
{before}{hit} {after}
);
});
})()}
)}
{/* Row 1: circle + label */}
{total > 0 ? Math.round((exec.bull + exec.neutral * 0.5) / total * 100) : 0}
%
{exec.scoreDirection === 'up' &&
▲ }
{exec.scoreDirection === 'down' &&
▼ }
{exec.label}
{exec.posture}
{/* Row 2: by section (left) | by factor (right) */}
{/* Left: by section / card group */}
By Section
{(groups || []).filter((g) => !g.ids.includes('crowdsignals')).map((g) => {
const statuses = g.ids.map((id) => cards && cards[id] ? cards[id].status : 'neutral');
const bull = statuses.filter((s) => s === 'bullish').length;
return (
{g.label}
{statuses.map((s, i) =>
{bull}/{statuses.length}
);
})}
{/* Divider */}
{/* Right: by factor / scoring category */}
By Factor
{(cats || []).map((c) => {
const bull = c.cards.filter((s) => s === 'bullish').length;
return (
{c.label}
{c.cards.map((s, i) =>
{bull}/{c.cards.length}
);
})}
{exec.regimeBearish && (
REGIME WARNING
SPY is below its 200-day SMA — the primary trend is bearish. Other signals may lead a recovery, but size positions accordingly.
)}
{exec.divergence && (
DIVERGENCE
{exec.divergence.high}
{' is positive while '}
{exec.divergence.low}
{' is restrictive — '}
{exec.divergence.message}
)}
);
}
// ── Commodities list sparkline — live 20D USCI (cyan) + 200d SMA (purple), falls back to SparkD ──
function CommoditiesMiniSpark({ seed, trend, color, w = 56, h = 20 }) {
const [data, setData] = useStateA(null);
useEffectA(() => {
let alive = true;
if (window.MarketHubData) {
window.MarketHubData.loadHistory('commodities', '20D').then((r) => {
if (!alive || !r || !r.values || r.values.length < 2) return;
const sma200 = (r.overlays || []).find(o => o.label === '200d SMA');
setData({ usci: r.values, sma200: sma200 ? sma200.values : [] });
});
}
return () => { alive = false; };
}, []);
if (!data) return
);
}
// ── Leadership list sparkline — live 20D SPY + RSP rebased to 0%, falls back to SparkD ──
function LeadershipMiniSpark({ seed, trend, color, w = 56, h = 20 }) {
const [data, setData] = useStateA(null);
useEffectA(() => {
let alive = true;
fetch('/api/leadership?range=1mo')
.then(r => r.json())
.then(j => {
if (!alive || !j.prices || !j.dates?.length) return;
const rebase = (arr) => {
const first = (arr || []).find(v => v != null && v > 0);
if (!first) return arr || [];
return (arr || []).map(v => v == null ? null : ((v - first) / first) * 100);
};
setData({ spy: rebase(j.prices.SPY || []), rsp: rebase(j.prices.RSP || []) });
})
.catch(() => {});
return () => { alive = false; };
}, []);
if (!data) return
);
}
// ── Breadth list sparkline — live 20D MMTH (purple) + MMFI (cyan), falls back to SparkD ──
function BreadthMiniSpark({ seed, trend, color, w = 56, h = 20 }) {
const [data, setData] = useStateA(null);
useEffectA(() => {
let alive = true;
const cb = new Date().toISOString().slice(0, 10);
fetch(`/api/breadth-history?range=20d&_cb=${cb}`)
.then(r => r.json())
.then(j => {
if (!alive || !Array.isArray(j.mmth) || !j.mmth.length) return;
setData({ mmth: j.mmth, mmfi: j.mmfi || [] });
})
.catch(() => {});
return () => { alive = false; };
}, []);
if (!data) return
);
}
// ── Equities list sparkline — live 20D IWM (indigo) / FCX (cyan) / GDX (amber) rebased to 0% ──
function EquitiesMiniSpark({ seed, trend, color, w = 56, h = 20 }) {
const [data, setData] = useStateA(null);
useEffectA(() => {
let alive = true;
fetch('/api/equities-history?range=3mo')
.then(r => r.json())
.then(j => {
if (!alive || !j.dates?.length || !j.equities?.length) return;
const rebase = (sym) => {
const eq = j.equities.find(e => e.sym === sym);
const sliced = (eq?.prices || []).slice(-20);
const first = sliced.find(v => v != null && v > 0);
if (!first) return sliced;
return sliced.map(v => v == null ? null : ((v / first - 1) * 100));
};
setData({ iwm: rebase('IWM'), fcx: rebase('FCX'), gdx: rebase('GDX') });
})
.catch(() => {});
return () => { alive = false; };
}, []);
if (!data) return
);
}
// ── Credit list sparkline — live 20D HYG (green) / LQD (purple) / EMB (amber) normalised return, falls back to SparkD ──
function CreditMiniSpark({ seed, trend, color, w = 56, h = 20 }) {
const [data, setData] = useStateA(null);
useEffectA(() => {
let alive = true;
Promise.all([
fetch('/api/history?symbol=HYG&range=20d').then(r => r.json()),
fetch('/api/history?symbol=LQD&range=20d').then(r => r.json()),
fetch('/api/history?symbol=EMB&range=20d').then(r => r.json()),
]).then(([hyg, lqd, emb]) => {
if (!alive) return;
const rebase = (closes) => {
const arr = (closes || []).slice(-20).map(v => v == null ? null : Number(v));
const first = arr.find(v => v != null && v > 0);
if (!first) return arr;
return arr.map(v => v == null ? null : ((v - first) / first) * 100);
};
const h20 = rebase(hyg.closes), l20 = rebase(lqd.closes), e20 = rebase(emb.closes);
if (!h20.length) return;
setData({ hyg: h20, lqd: l20, emb: e20 });
}).catch(() => {});
return () => { alive = false; };
}, []);
if (!data) return
);
}
// ── Global Flows list sparkline — live 20D ACWI (green) + EEM (cyan) normalised return, falls back to SparkD ──
function GlobalFlowsMiniSpark({ seed, trend, color, w = 56, h = 20 }) {
const [data, setData] = useStateA(null);
useEffectA(() => {
let alive = true;
Promise.all([
fetch('/api/history?symbol=ACWI&range=20d').then(r => r.json()),
fetch('/api/history?symbol=EEM&range=20d').then(r => r.json()),
]).then(([acwi, eem]) => {
if (!alive) return;
const rebase = (closes) => {
const arr = (closes || []).slice(-20).map(v => v == null ? null : Number(v));
const first = arr.find(v => v != null && v > 0);
if (!first) return arr;
return arr.map(v => v == null ? null : ((v - first) / first) * 100);
};
const a20 = rebase(acwi.closes), e20 = rebase(eem.closes);
if (!a20.length) return;
setData({ acwi: a20, eem: e20 });
}).catch(() => {});
return () => { alive = false; };
}, []);
if (!data) return
);
}
// ── Yield sparkline — live 20D 30Y (purple) / 10Y (cyan) / 2Y (green), falls back to SparkD ──
function YieldMiniSpark({ seed, trend, color, w = 56, h = 20 }) {
const [data, setData] = useStateA(null);
useEffectA(() => {
let alive = true;
const safe = (p) => p.then(r => r.json()).catch(() => ({}));
Promise.all([
safe(fetch('/api/history?symbol=%5ETYX&range=20d')),
safe(fetch('/api/history?symbol=%5ETNX&range=20d')),
safe(fetch('/api/treasury-2y?range=20d')),
]).then(([tyx, tnx, two]) => {
if (!alive) return;
const toArr = (arr) => (arr || []).slice(-20).map(v => v == null ? null : Number(v));
const d = { tyx: toArr(tyx.closes), tnx: toArr(tnx.closes), two: toArr(two.closes) };
if (d.tyx.length || d.tnx.length) setData(d);
});
return () => { alive = false; };
}, []);
if (!data) return
);
}
// ── Yield glance KPIs — 30Y / 10Y from rows, 2Y from live treasury-2y ──
function YieldGlanceKpis({ card, compact = true, onStatus }) {
const [twoY, setTwoY] = useStateA(null);
useEffectA(() => {
let alive = true;
fetch('/api/treasury-2y?range=20d').then(r => r.json()).then(data => {
if (!alive) return;
const c = (data.closes || []).map(v => v == null ? null : Number(v)).filter(v => v != null && !isNaN(v));
if (c.length) {
const val = c[c.length - 1];
setTwoY(val);
if (onStatus) {
const rows = card.rows || [];
const r0Tone = rows[0]?.[3] || 'neutral';
const r1Tone = rows[1]?.[3] || 'neutral';
const t2Tone = val >= 4.5 ? 'bearish' : val >= 3.5 ? 'neutral' : 'bullish';
const tones = [r0Tone, r1Tone, t2Tone];
const bulls = tones.filter(t => t === 'bullish').length;
const bears = tones.filter(t => t === 'bearish').length;
onStatus(bulls >= 2 ? 'bullish' : bears >= 2 ? 'bearish' : 'neutral');
}
}
}).catch(() => {});
return () => { alive = false; };
}, []);
const rows = card.rows || [];
const r0 = rows[0], r1 = rows[1];
const twoYTone = twoY != null ? (twoY >= 4.5 ? 'bearish' : twoY >= 3.5 ? 'neutral' : 'bullish') : 'neutral';
const kpis = [
r0 ? { label: r0[0], val: r0[1].split('\n')[0], tone: r0[3] } : { label: '30Y Yield', val: '—', tone: 'neutral' },
r1 ? { label: r1[0], val: r1[1].split('\n')[0], tone: r1[3] } : { label: '10Y Yield', val: '—', tone: 'neutral' },
{ label: '2Y Yield', val: twoY != null ? twoY.toFixed(2) + '%' : '—', tone: twoYTone },
];
if (compact) {
return (
{kpis.map(({ label, val, tone }, i) => {
const rs = DSIG[tone] || DSIG.neutral;
return (
);
})}
{kpis.map(({ label, val, tone }, i) => {
const rs = DSIG[tone] || DSIG.neutral;
return (
);
})}
{kpis.map(({ label, val, tone }, i) => {
const rs = DSIG[tone] || DSIG.neutral;
return (
);
})}
{kpis.map(({ label, val, tone }, i) => {
const rs = DSIG[tone] || DSIG.neutral;
return (
);
})}
{compactItems.map(({ label, val, tone }, i) => {
const rs = DSIG[tone] || DSIG.neutral;
return (
);
})}
{items.map(({ label, val, tone }, i) => {
const rs = DSIG[tone] || DSIG.neutral;
return (
);
})}
);
}
function CurrencyMiniSpark({ seed, trend, color, w = 56, h = 20 }) {
const [data, setData] = useStateA(null);
useEffectA(() => {
let alive = true;
Promise.all([
fetch('/api/history?symbol=UUP&range=20d').then(r => r.json()),
fetch('/api/history?symbol=FXE&range=20d').then(r => r.json()),
fetch('/api/history?symbol=FXY&range=20d').then(r => r.json()),
]).then(([uup, fxe, fxy]) => {
if (!alive) return;
const toArr = (arr) => (arr || []).slice(-20).map(v => v == null ? null : Number(v));
setData({ uup: toArr(uup.closes), fxe: toArr(fxe.closes), fxy: toArr(fxy.closes) });
}).catch(() => {});
return () => { alive = false; };
}, []);
if (!data) return
);
}
function CrowdSignalsMiniSpark({ seed, trend, color, w = 56, h = 20 }) {
const [sigs, setSigs] = useStateA(null);
useEffectA(() => {
let alive = true;
fetch('/api/polymarket')
.then(r => r.json())
.then(d => {
if (!alive) return;
const signals = (d.signals || []).slice(0, 5);
if (signals.length) setSigs(signals);
})
.catch(() => {});
return () => { alive = false; };
}, []);
if (!sigs) return
{sigs.map((s, i) => {
const barColor = s.sentiment === 'bullish' ? '#22c55e'
: s.sentiment === 'bearish' ? '#ef4444'
: '#f59e0b';
const bh = Math.max(2, (s.probability / maxProb) * (h - pad * 2));
const x = i * (bw + gap);
const y = h - pad - bh;
return (
);
})}
);
}
// ── Scorecard tile (grid) ──
function ScoreTile({ card, onOpen, active }) {
const [hover, setHover] = useStateA(false);
const [crowdStatus, setCrowdStatus] = useStateA(null);
const [currencyStatus, setCurrencyStatus] = useStateA(null);
const [yieldStatus, setYieldStatus] = useStateA(null);
const [positioningStatus, setPositioningStatus] = useStateA(null);
const effStatus = card.id === 'crowdsignals' && crowdStatus ? crowdStatus
: card.id === 'currency' && currencyStatus ? currencyStatus
: card.id === 'yield' && yieldStatus ? yieldStatus
: card.id === 'positioning' && positioningStatus ? positioningStatus
: card.status;
const sg = DSIG[effStatus];
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{ all: 'unset', cursor: 'pointer', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 12, padding: '16px 18px',
background: '#111827', border: `1px solid ${active ? sg.line : hover ? '#28384a' : '#1e2d3d'}`, borderLeft: `3px solid ${sg.c}`, borderRadius: 14,
boxShadow: hover ? '0 6px 20px rgba(0,0,0,.35)' : '0 1px 2px rgba(0,0,0,.3)', transform: hover ? 'translateY(-2px)' : 'none', transition: 'transform .15s ease, box-shadow .15s ease, border-color .15s ease' }}>
{card.title}
{card.id === 'leadership'
?
: card.id === 'equities'
?
: card.id === 'sectors'
?
: card.id === 'credit'
?
: card.id === 'commodities'
?
: card.id === 'globalflows'
?
: card.id === 'yield'
?
: card.id === 'currency'
?
: card.id === 'crowdsignals'
?
: card.id === 'positioning'
?
:
}
{card.id === 'yield'
?
{card.rows.slice(0, 3).map((r, i) => {
const rs = DSIG[r[3]];
return (
{r[1].split('\n')[0]}
{r[0]}
);
})}
);
}
// ════ OPTION A — Full dashboard grid (click a tile → deep-dive overlay) ════
function OptionDashboard({ D }) {
const [open, setOpen] = useStateA(null);
const brief = useDailyBrief();
const card = open ? D.cards[open] : null;
return (
{D.horizons ?
:
}
{D.groups.map((g) => (
{g.ids.map((id) => setOpen(id)} />)}
))}
{card && (
setOpen(null)} style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(4,7,12,.72)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '52px 24px', overflowY: 'auto' }}>
e.stopPropagation()} style={{ width: '100%', maxWidth: 880, background: '#080c14', border: '1px solid #1e2d3d', borderRadius: 20, padding: '24px 28px 30px', boxShadow: '0 30px 80px rgba(0,0,0,.6)' }}>
{card.title}
setOpen(null)} style={{ all: 'unset', cursor: 'pointer', marginLeft: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, borderRadius: 9, background: '#0d1520', border: '1px solid #1e2d3d' }}>
)}
{/* left rail */}
{/* Row 1: three-horizon strip (falls back to composite donut when horizons absent) */}
{D.horizons &&
}
{!D.horizons && (() => {
const wsTotal = D.exec.bull + D.exec.neutral + D.exec.bear;
const wsPct = wsTotal > 0 ? Math.round((D.exec.bull + D.exec.neutral * 0.5) / wsTotal * 100) : 0;
const wsColor = postureColorD(D.exec.label);
const R2 = 24, C2 = 2 * Math.PI * R2, gap2 = 4;
const segs2 = [['bullish', D.exec.bull], ['neutral', D.exec.neutral], ['bearish', D.exec.bear]].filter((x) => x[1] > 0);
let acc2 = 0;
const arcs2 = segs2.map(([k, n]) => { const len = (n / wsTotal) * C2; const off = acc2; acc2 += len; return { k, len, off, c: DSIG[k].c }; });
return (
{D.exec.label}
{D.exec.posture}
);
})()}
{/* Old aggregate By-Section / By-Factor breakdowns removed — the
three-horizon rail above is the scoring system now. */}
{D.groups.map((g) => (
{g.label}
{g.ids.map((id) => {
const c = D.cards[id], sg = DSIG[c.status], on = id === sel;
return (
setSel(id)} style={{ all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 11, padding: '11px 12px', borderRadius: 10,
background: on ? '#141f2e' : 'transparent', border: `1px solid ${on ? '#24364a' : 'transparent'}`, borderLeft: `3px solid ${on ? sg.c : 'transparent'}` }}>
{c.title}
{id === 'regime'
?
);
})}
))}
setSel('daily-brief')} style={{ all: 'unset', cursor: 'pointer', display: 'block', width: '100%', boxSizing: 'border-box', marginTop: 8, padding: '12px 14px', borderRadius: 10,
background: sel === 'daily-brief' ? '#141f2e' : '#111827',
border: `1px solid ${sel === 'daily-brief' ? '#24364a' : '#1e2d3d'}`,
borderLeft: `3px solid ${brief ? sentimentColor(brief.isWeekly ? Math.round(brief.avgSentiment) : brief.sentiment) : '#1e2d3d'}` }}>
{brief?.isWeekly ? 'Weekly Brief' : 'Daily Brief'}
{brief && !brief.isWeekly && <>
{brief.sentiment > 0 ? '+' : ''}{brief.sentiment}
{brief.sector}
}
{brief?.isWeekly && avg {brief.avgSentiment > 0 ? '+' : ''}{brief.avgSentiment} }
{!brief && Loading… }
{brief && !brief.isWeekly && (
<>
{brief.bullets.slice(0, 3).map((b, i) => (
{b}
))}
{brief.bullets.length > 3 && +{brief.bullets.length - 3} more }
)}
{brief?.isWeekly && (
{brief.weekLabel} · {brief.briefs?.length ?? 0} days · {brief.dominantSector}
)}
{/* right deep-dive */}
{sel === 'daily-brief' ? (
setSel(allIds[0])} />
) : (
{card.title}
As of {D.asOf}
)}
{c.title}
);
}
// ── Currency glance row — standalone component so hooks can track live status ──
function CurrencyGlanceRow({ c, onOpen }) {
const mob = useIsMobile();
const [liveStatus, setLiveStatus] = useStateA(null);
const eff = liveStatus || c.status;
const sg = DSIG[eff];
return (
{c.title}
);
}
// ── Positioning (COT) glance components ──
function PositioningGlanceKpis({ compact = true, onStatus }) {
const [contracts, setContracts] = useStateA(null);
useEffectA(() => {
let alive = true;
fetch('/api/cot').then(r => r.json())
.then(d => {
if (!alive || !d.contracts) return;
setContracts(d.contracts);
if (onStatus) {
const es = d.contracts.find(c => c.key === 'ES');
const status = !es ? 'neutral'
: es.crowding === 'crowded_short' ? 'bullish'
: es.crowding === 'crowded_long' ? 'bearish'
: 'neutral';
onStatus(status);
}
})
.catch(() => {});
return () => { alive = false; };
}, []);
const fallback = [
{ label: 'S&P 500 (ES)', val: '—', tone: 'neutral' },
{ label: 'Gold (GC)', val: '—', tone: 'neutral' },
{ label: 'WTI (CL)', val: '—', tone: 'neutral' },
];
const items = contracts ? contracts.map(c => ({
label: c.key === 'ES' ? 'S&P 500 (ES)' : c.key === 'GC' ? 'Gold (GC)' : 'WTI (CL)',
val: c.empty ? '—' : `${c.pctile}th`,
tone: c.crowding === 'crowded_short' ? 'bullish'
: c.crowding === 'crowded_long' ? 'bearish'
: 'neutral',
})) : fallback;
if (compact) {
return (
{items.map(({ label, val, tone }, i) => {
const rs = DSIG[tone] || DSIG.neutral;
return (
);
})}
{items.map(({ label, val, tone }, i) => {
const rs = DSIG[tone] || DSIG.neutral;
return (
);
})}
);
}
function PositioningGlanceRow({ c, onOpen }) {
const mob = useIsMobile();
const [liveStatus, setLiveStatus] = useStateA(null);
const eff = liveStatus || c.status;
const sg = DSIG[eff];
return (
{c.title}
);
}
// ── Crowd Signals glance row — standalone component so hooks can track live status ──
function CrowdSignalsGlanceRow({ c, onOpen }) {
const mob = useIsMobile();
const [liveStatus, setLiveStatus] = useStateA(null);
const eff = liveStatus || c.status;
const sg = DSIG[eff];
return (
{c.title}
);
}
// ════ OPTION C — Glance → dedicated deep-dive page ════
function OptionGlancePage({ D, open: openProp, onSetOpen }) {
const mob = useIsMobile();
const [openState, setOpenState] = useStateA(null);
const open = openProp !== undefined ? openProp : openState;
const setOpen = onSetOpen || setOpenState;
const brief = useDailyBrief();
if (open) {
if (open === 'daily-brief') {
return setOpen(null)} />;
}
if (open === 'macro-brief') {
return setOpen(null)} />;
}
const card = D.cards[open];
return (
setOpen(null)} style={{ all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 9, padding: '9px 15px', borderRadius: 10, background: '#0d1520', border: '1px solid #1e2d3d', marginBottom: 22 }}>
All signals
{card.title}
);
}
return (
{D.horizons ?
:
}
{D.groups.map((g) => (
{g.label}
{g.ids.map((id) => {
const c = D.cards[id], sg = DSIG[c.status];
if (id === 'yield') return
setOpen(id)} />;
if (id === 'currency') return setOpen(id)} />;
if (id === 'crowdsignals') return setOpen(id)} />;
if (id === 'positioning') return setOpen(id)} />;
return (
setOpen(id)} style={{ all: 'unset', cursor: 'pointer', boxSizing: 'border-box', display: 'flex', alignItems: 'center', gap: mob ? 10 : 16, padding: mob ? '11px 12px' : '15px 18px', width: '100%',
background: '#111827', border: '1px solid #1e2d3d', borderLeft: `3px solid ${sg.c}`, borderRadius: 13 }}>
{c.title}
{id === 'yield'
?
{c.rows.slice(0, mob ? 2 : 3).map((r, i) => {
const rs = DSIG[r[3]];
return (
{r[1].split('\n')[0]}
{r[0]}
);
})}
);
})}
))}
Daily Context
setOpen('daily-brief')} />
setOpen('macro-brief')} />
{/* top bar */}
Market Hub
Macro Framework
{/* prototype switcher */}
{OPTIONS.map((o) => (
pick(o.id)} title={o.sub} style={{ all: 'unset', cursor: 'pointer', display: 'flex', flexDirection: 'column', padding: '6px 14px', borderRadius: 8,
background: o.id === opt ? '#1b2736' : 'transparent', border: `1px solid ${o.id === opt ? '#28384a' : 'transparent'}` }}>
{o.label}
{o.sub}
))}
As of {D.asOf}
{/* prototype label banner */}
Prototype
{current.label.replace(/^.·\s/, '')} — {current.sub}
{current.render(D)}
Market Hub
Macro Framework
{o.label}
{o.sub}
As of {D.asOf}
{o.render(D)}
);
}
window.SoloShell = SoloShell;
// ── Toggle shell — flip between just B (workspace) and C (glance) ──
function DisclaimerFooter() {
return (
Disclaimer: Market Hub is for informational and educational purposes only. Nothing on this site constitutes investment advice, a solicitation, or a recommendation to buy or sell any security, commodity, or financial instrument. Market Hub is not a registered investment adviser, broker-dealer, or commodity trading adviser. Data may be delayed, incomplete, or inaccurate — verify independently before acting. Past performance does not guarantee future results. Prediction market probabilities reflect crowd sentiment and are not guaranteed outcomes. Always consult a qualified financial professional before making investment decisions.
);
}
function ToggleShell() {
const D = useGlance();
const [mode, setMode] = useStateA(() => { try { return localStorage.getItem('mh-bc') || 'workspace'; } catch (e) { return 'workspace'; } });
const [glanceOpen, setGlanceOpen] = useStateA(null);
const pick = (m) => { setMode(m); try { localStorage.setItem('mh-bc', m); } catch (e) {} };
const goHome = () => { if (mode === 'glance') setGlanceOpen(null); };
const TABS = [
{ id: 'workspace', label: 'Workspace', sub: 'List + live deep-dive' },
{ id: 'glance', label: 'Glance', sub: 'Scan, then drill in' },
];
return (
Market Hub
Macro Framework
{/* the toggle — right-aligned, replaces date */}
{TABS.map((t) => (
pick(t.id)} style={{ all: 'unset', cursor: 'pointer', padding: '4px 12px', borderRadius: 6,
background: t.id === mode ? '#1b2736' : 'transparent', border: `1px solid ${t.id === mode ? '#28384a' : 'transparent'}`, transition: 'background .18s ease' }}>
{t.label}
))}
{mode === 'workspace' ?
:
}
);
}
window.ToggleShell = ToggleShell;