);
}
// LoadingBar — a thin animated strip that sits above a section being
// refetched. Used when items are already on screen and we don't want to
// blank the page out (filter change, infinite-list reset).
function LoadingBar() {
return (
);
}
function ApiError({ error, hint }) {
if (!error) return null;
return (
{error.message || String(error)}
{hint &&
{hint}
}
);
}
// ===========================================================================
// LiveMarketCard — accepts the /api/markets shape (predictions: [{modelId,…}]).
// Renders the same visual treatment as the static MarketCard.
// ===========================================================================
function LiveMarketCard({ market, navigate }) {
const { models } = useMeta();
const yesPct = Math.round((market.yesPrice ?? 0.5) * 100);
const preds = market.predictions || [];
const predByModel = useMemo(() => Object.fromEntries(preds.map((p) => [p.modelId, p])), [preds]);
// Resolved state — render a different layout that emphasises the outcome
// and shows which model actually called it right.
const isResolved = !!(market.resolved && market.outcome);
const consensus = market.consensus?.yesProbability ?? null;
const consensusPct = consensus == null ? null : Math.round(consensus * 100);
const consensusVerdict = consensus == null ? null : consensus >= 0.5 ? 'YES' : 'NO';
const history = (market.priceHistory || []).slice(-30).map((p) => p.yes);
const sparkData = history.length > 1 ? history : [market.yesPrice ?? 0.5, market.yesPrice ?? 0.5];
const probs = preds.map((p) => p.yesProbability).filter((v) => Number.isFinite(v));
const spread = probs.length ? Math.round((Math.max(...probs) - Math.min(...probs)) * 100) : 0;
// Best-model on a resolved market = the prediction that called the right
// side AND was most confident (furthest from 50% in the correct direction).
let bestModel = null;
let calledRight = 0;
if (isResolved) {
for (const p of preds) {
const right = p.verdict === market.outcome;
if (right) calledRight++;
if (right) {
const confidence = Math.abs(p.yesProbability - 0.5);
if (!bestModel || confidence > bestModel.confidence) {
bestModel = { ...p, confidence };
}
}
}
}
const days = market.endDate
? Math.max(0, Math.round((new Date(market.endDate).getTime() - Date.now()) / 86_400_000))
: null;
return (
);
}
// ===========================================================================
// useInfiniteList(loadPage, deps, pageSize)
// loadPage(offset, limit) → Promise<{ items: [], hasMore: boolean }>
// deps — when these change, the list resets (use to wire category filter)
// Returns { items, loading, loadingMore, error, hasMore, sentinelRef, refresh }
// sentinelRef is for an IntersectionObserver target rendered at the bottom of
// the list. When that element scrolls into view, the next page is fetched and
// appended in place.
// ===========================================================================
function useInfiniteList(loadPage, deps, pageSize = 24) {
const [items, setItems] = useState([]);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
const [loadingMore, setLoadingMore] = useState(false);
const [hasMore, setHasMore] = useState(true);
// `total` is the full server-side match count for the current filter.
// Used by the UI to say "24 of 137 markets" rather than just "24".
const [total, setTotal] = useState(null);
// Callback ref — when the sentinel mounts or unmounts, we get the node
// here and (re)attach the IntersectionObserver in the effect below. This
// is the only correct way to react to "an element appeared in the DOM";
// a plain useRef won't trigger any effect.
const [sentinelEl, setSentinelEl] = useState(null);
const sentinelRef = React.useCallback((node) => setSentinelEl(node), []);
const offsetRef = useRef(0);
const epochRef = useRef(0);
const inflightRef = useRef(false);
const fnRef = useRef(loadPage);
fnRef.current = loadPage;
// Reset whenever deps change. We DON'T clear items here — that would make
// the grid blink to empty between every filter click. Instead we keep the
// current items rendered and flip `loading` true so the UI can show a soft
// overlay. Items get replaced atomically once the new page arrives.
useEffect(() => {
const myEpoch = ++epochRef.current;
offsetRef.current = 0;
inflightRef.current = true;
setError(null);
setLoading(true);
setHasMore(true);
Promise.resolve()
.then(() => fnRef.current(0, pageSize))
.then((r) => {
if (epochRef.current !== myEpoch) return;
setItems(r.items || []);
setHasMore(!!r.hasMore);
setTotal(typeof r.total === 'number' ? r.total : null);
offsetRef.current = (r.items || []).length;
setLoading(false);
inflightRef.current = false;
})
.catch((e) => {
if (epochRef.current !== myEpoch) return;
setError(e);
setItems([]); // wipe on error so the empty state shows
setTotal(0);
setLoading(false);
inflightRef.current = false;
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
const loadMore = React.useCallback(() => {
if (inflightRef.current || !hasMore) return;
const myEpoch = epochRef.current;
inflightRef.current = true;
setLoadingMore(true);
fnRef.current(offsetRef.current, pageSize)
.then((r) => {
if (epochRef.current !== myEpoch) return;
setItems((prev) => {
// De-dupe by polymarketId in case the same row gets paginated twice
// (rank shuffles between requests).
const seen = new Set(prev.map((p) => p.polymarketId));
const next = (r.items || []).filter((p) => !seen.has(p.polymarketId));
return prev.concat(next);
});
setHasMore(!!r.hasMore);
if (typeof r.total === 'number') setTotal(r.total);
offsetRef.current += (r.items || []).length;
setLoadingMore(false);
inflightRef.current = false;
})
.catch((e) => {
if (epochRef.current !== myEpoch) return;
setError(e);
setLoadingMore(false);
inflightRef.current = false;
});
}, [hasMore, pageSize]);
// Observe the sentinel. The effect re-runs when EITHER the DOM node
// changes (sentinel mounted/unmounted via callback ref) OR loadMore changes
// (its identity depends on hasMore). rootMargin pre-fetches before the
// user actually hits the bottom so the new cards arrive before they see a gap.
useEffect(() => {
if (!sentinelEl) return;
if (!('IntersectionObserver' in window)) {
// Fallback: poll scroll position.
const onScroll = () => {
const rect = sentinelEl.getBoundingClientRect();
if (rect.top - window.innerHeight < 600) loadMore();
};
window.addEventListener('scroll', onScroll, { passive: true });
// Also fire once in case the sentinel is already near the viewport.
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}
const io = new IntersectionObserver(
(entries) => { if (entries.some((e) => e.isIntersecting)) loadMore(); },
{ rootMargin: '800px 0px' },
);
io.observe(sentinelEl);
return () => io.disconnect();
}, [sentinelEl, loadMore]);
const refresh = React.useCallback(() => {
epochRef.current++; // invalidate any in-flight epoch
offsetRef.current = 0;
inflightRef.current = false;
setItems([]);
setHasMore(true);
setLoading(true);
const myEpoch = epochRef.current;
fnRef.current(0, pageSize).then((r) => {
if (epochRef.current !== myEpoch) return;
setItems(r.items || []);
setHasMore(!!r.hasMore);
offsetRef.current = (r.items || []).length;
setLoading(false);
}).catch((e) => {
if (epochRef.current !== myEpoch) return;
setError(e);
setLoading(false);
});
}, [pageSize]);
return { items, loading, loadingMore, error, hasMore, total, sentinelRef, refresh, loadMore };
}
// ===========================================================================
// ModelAccuracyChart — per-model accuracy over time with vertical lines at
// version-change moments. Lets you eyeball "did the new version help?".
// Expects byModel = { modelId: [{ day, accuracy, predictions }, …] }
// and versionsByModel = { modelId: [{ modelVersion, startedAt, endedAt }, …] }
// ===========================================================================
function ModelAccuracyChart({ byModel, versionsByModel, days = 30, height = 280 }) {
const { models, modelById } = useMeta();
const W = 1100, padL = 56, padR = 24, padT = 24, padB = 32;
const H = height;
const innerW = W - padL - padR;
const innerH = H - padT - padB;
// Hover state — { dayMs, points: [{ modelId, modelLabel, color, accuracy }] }
const [hover, setHover] = React.useState(null);
const wrapRef = React.useRef(null);
// Auto-fit the time window. If every data point is bunched up in the last
// 2 days, plotting them against a 30-day axis makes the chart look empty
// with everything mashed against the right edge. Zoom out only as wide as
// we actually have data for (with a 12h pad on the left).
const endMs = Date.now();
const requestedSpan = days * 86_400_000;
const earliestPoint = Object.values(byModel || {})
.flat()
.map((p) => new Date(p.day).getTime())
.filter((n) => Number.isFinite(n))
.reduce((min, n) => (min == null ? n : Math.min(min, n)), null);
let startMs = endMs - requestedSpan;
if (earliestPoint != null) {
const dataSpan = endMs - earliestPoint + 12 * 3600 * 1000; // 12h left pad
if (dataSpan < requestedSpan) {
startMs = endMs - Math.max(dataSpan, 2 * 86_400_000); // never narrower than 2 days
}
}
const activeDays = Math.max(1, Math.round((endMs - startMs) / 86_400_000));
const xOf = (ms) => padL + ((ms - startMs) / (endMs - startMs)) * innerW;
// Y axis: clip to 30–95%. Wide enough to fit any plausible accuracy.
const yMin = 0.30, yMax = 0.95;
const yOf = (v) => padT + (1 - (Math.max(yMin, Math.min(yMax, v)) - yMin) / (yMax - yMin)) * innerH;
const yTicks = [0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
// Deduped + sorted day marks. For small windows (e.g. 2 days) we used to
// emit [2, 1, 0, 0] which rendered "today" twice on the X axis.
const dayMarks = Array.from(new Set([
activeDays,
Math.floor(activeDays * 2 / 3),
Math.floor(activeDays / 3),
0,
])).sort((a, b) => b - a);
// Day-buckets with too few scored predictions are sample-size artefacts —
// 1 right out of 1 is "100%" but isn't a real signal. Hiding them keeps
// the chart honest. The leaderboard table still counts every prediction.
const MIN_SAMPLE_PER_DAY = 3;
function meaningful(p) {
// total = scored count when accuracy is real ground-truth; agreement uses
// total predictions, where small samples matter less. We gate on total.
return (p.total || 0) >= MIN_SAMPLE_PER_DAY;
}
function linePath(series) {
if (!series || !series.length) return '';
return series
.filter((p) => new Date(p.day).getTime() >= startMs && meaningful(p))
.map((p, i) => {
const x = xOf(new Date(p.day).getTime()).toFixed(1);
const y = yOf(p.accuracy).toFixed(1);
return `${i === 0 ? 'M' : 'L'}${x},${y}`;
})
.join(' ');
}
// Version-change markers: only REAL switches (a model's second-or-later
// version), never the initial registration on first boot. We sort each
// model's versions oldest-first and drop index 0.
const rawMarkers = [];
for (const [modelId, versionsRaw] of Object.entries(versionsByModel || {})) {
const m = modelById(modelId);
if (!m) continue;
const versions = (versionsRaw || [])
.slice()
.sort((a, b) => new Date(a.startedAt) - new Date(b.startedAt));
// Skip versions[0] — that's the initial registration, not a switch.
for (let i = 1; i < versions.length; i++) {
const v = versions[i];
const ms = new Date(v.startedAt).getTime();
if (ms <= startMs || ms > endMs) continue;
rawMarkers.push({ ms, modelId, color: m.color, short: m.short, version: v.modelVersion });
}
}
// De-stack markers that fall within ~5px of each other on the X axis.
// Same model's rapid-fire switches get collapsed into "OPUS → v1 → v2".
// Different models at the same instant share a vertical line but list
// their labels stacked.
rawMarkers.sort((a, b) => a.ms - b.ms);
const markers = [];
for (const m of rawMarkers) {
const last = markers[markers.length - 1];
if (last && Math.abs(xOf(m.ms) - xOf(last.ms)) < 6) {
// Bucket together: same X cluster.
last.entries.push(m);
} else {
markers.push({ ms: m.ms, entries: [m] });
}
}
// Per-model legend value. Was "last day's accuracy" — but that swings wildly
// on small daily samples and disagreed with the cumulative number shown in
// the table below. Now: cumulative accuracy across the visible window
// (sum-of-correct / sum-of-total), so legend % matches the table.
const lasts = models
.map((m) => {
const series = byModel?.[m.id] || [];
if (!series.length) return null;
let correct = 0, total = 0;
for (const p of series) { correct += (p.correct || 0); total += (p.total || 0); }
const cumulative = total ? correct / total : (series[series.length - 1]?.accuracy ?? 0);
return { model: m, last: { accuracy: cumulative, correct, total } };
})
.filter(Boolean);
// All unique day timestamps in the window, sorted asc. Used to snap the
// hover cursor to a real day-bucket rather than letting it float.
const allDays = React.useMemo(() => {
const set = new Set();
for (const s of Object.values(byModel || {})) {
for (const p of s) {
const ms = new Date(p.day).getTime();
if (ms >= startMs && ms <= endMs) set.add(ms);
}
}
return [...set].sort((a, b) => a - b);
}, [byModel, startMs, endMs]);
function onMove(e) {
if (!wrapRef.current || !allDays.length) return;
const rect = wrapRef.current.getBoundingClientRect();
// Convert pixel cursor → viewBox X (chart stretches via preserveAspectRatio="none")
const cursorVbX = ((e.clientX - rect.left) / rect.width) * W;
if (cursorVbX < padL || cursorVbX > W - padR) { setHover(null); return; }
// Snap to nearest day
let nearest = allDays[0];
let bestDist = Infinity;
for (const ms of allDays) {
const d = Math.abs(xOf(ms) - cursorVbX);
if (d < bestDist) { bestDist = d; nearest = ms; }
}
const points = [];
for (const m of models) {
const p = (byModel?.[m.id] || []).find((pt) => new Date(pt.day).getTime() === nearest);
if (p) points.push({ modelId: m.id, modelLabel: m.label, short: m.short, color: m.color, accuracy: p.accuracy, predictions: p.predictions, total: p.total, correct: p.correct });
}
setHover({ dayMs: nearest, points });
}
function onLeave() { setHover(null); }
// Build the tooltip position in pixels (over the wrapping div).
const tooltip = (() => {
if (!hover || !wrapRef.current) return null;
const rect = wrapRef.current.getBoundingClientRect();
const xVb = xOf(hover.dayMs);
const left = (xVb / W) * rect.width;
// Show on whichever side has room
const flipRight = left > rect.width - 180;
return { left, flipRight };
})();
return (
{/* Tooltip overlay — absolute-positioned HTML so we get real fonts
and easy formatting. Shows the actual date + each model's accuracy. */}
{hover && tooltip && (
);
}
// ===========================================================================
// ConditionsBuilder — popover with one row per model × four states:
// YES / NO / ✓ right / ✗ wrong / (clear)
// The state shape is { [modelId]: 'YES' | 'NO' | 'right' | 'wrong' | null }.
// Picking 'right' or 'wrong' implicitly switches the view to resolved markets
// (the backend enforces this), so the UI shows a hint when that happens.
// Returned to the parent as a single string ("grok:YES,gpt:NO") via onCommit.
// ===========================================================================
function ConditionsBuilder({ value, onChange, modelsList }) {
// value: same shape as state above. Parent owns the source of truth.
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', onClick);
return () => document.removeEventListener('mousedown', onClick);
}, [open]);
const set = (modelId, cond) => {
const next = { ...value };
if (next[modelId] === cond) delete next[modelId];
else next[modelId] = cond;
onChange(next);
};
const clear = () => onChange({});
const activeCount = Object.values(value).filter(Boolean).length;
const needsResolved = Object.values(value).some((v) => v === 'right' || v === 'wrong');
return (
{needsResolved
? <>Picking right/wrong implies resolved markets — the grid will switch.
: <>Picking YES/NO matches each model's latest verdict, in any state.}
Conditions combine with AND. A market must satisfy every row to make the list.
)}
);
}
// Serialize the conditions object → query-string format the backend expects.
function serializeConditions(value) {
return Object.entries(value || {})
.filter(([, v]) => v)
.map(([k, v]) => `${k}:${v}`)
.join(',');
}
// Small money formatter shared across pages.
function formatMoney(n) {
if (!Number.isFinite(n)) return '$0';
if (n >= 1e9) return `$${(n / 1e9).toFixed(1)}B`;
if (n >= 1e6) return `$${(n / 1e6).toFixed(1)}M`;
if (n >= 1e3) return `$${(n / 1e3).toFixed(0)}K`;
return `$${Math.round(n)}`;
}
// ===========================================================================
// AccuracyLineChart — generic per-series line chart. Powers per-prompt detail
// (one series) and the Community leaderboard chart (top-N prompts). Mirrors
// the visual language of ModelAccuracyChart but doesn't depend on the
// `models` registry, so anything with a color + points works.
// Expects series = [{ id, label, color, points: [{ day, accuracy, predictions, total, correct }] }]
// ===========================================================================
function AccuracyLineChart({ series, days = 30, height = 240, showLegend = true }) {
const W = 1100, padL = 56, padR = 24, padT = 20, padB = 30;
const H = height;
const innerW = W - padL - padR;
const innerH = H - padT - padB;
const [hover, setHover] = React.useState(null);
const wrapRef = React.useRef(null);
// Same auto-fit logic as ModelAccuracyChart — zoom out only as wide as the
// data actually spans.
const endMs = Date.now();
const requestedSpan = days * 86_400_000;
const all = (series || []).flatMap((s) => s.points || []);
const earliestPoint = all
.map((p) => new Date(p.day).getTime())
.filter(Number.isFinite)
.reduce((min, n) => (min == null ? n : Math.min(min, n)), null);
let startMs = endMs - requestedSpan;
if (earliestPoint != null) {
const dataSpan = endMs - earliestPoint + 12 * 3600 * 1000;
if (dataSpan < requestedSpan) {
startMs = endMs - Math.max(dataSpan, 2 * 86_400_000);
}
}
const xOf = (ms) => padL + ((ms - startMs) / (endMs - startMs)) * innerW;
const yMin = 0.30, yMax = 0.95;
const yOf = (a) => padT + (1 - (Math.max(yMin, Math.min(yMax, a)) - yMin) / (yMax - yMin)) * innerH;
function pathFor(points) {
const inRange = (points || [])
.filter((p) => {
const t = new Date(p.day).getTime();
return Number.isFinite(t) && t >= startMs && t <= endMs;
})
.sort((a, b) => new Date(a.day) - new Date(b.day));
if (inRange.length === 0) return { d: '', last: null };
const cmds = inRange.map((p, i) => {
const x = xOf(new Date(p.day).getTime());
const y = yOf(p.accuracy);
return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
});
const last = inRange[inRange.length - 1];
return { d: cmds.join(' '), last: { x: xOf(new Date(last.day).getTime()), y: yOf(last.accuracy) } };
}
function onMove(e) {
if (!wrapRef.current || all.length === 0) return;
const rect = wrapRef.current.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * W;
if (x < padL || x > W - padR) { setHover(null); return; }
const t = startMs + ((x - padL) / innerW) * (endMs - startMs);
// Nearest day across all series
const candidates = all.map((p) => new Date(p.day).getTime()).filter(Number.isFinite);
const nearest = candidates.reduce((best, n) => Math.abs(n - t) < Math.abs(best - t) ? n : best, candidates[0]);
const points = (series || []).map((s) => {
const p = (s.points || []).find((pt) => new Date(pt.day).getTime() === nearest);
return p ? { id: s.id, label: s.label, color: s.color, ...p } : null;
}).filter(Boolean);
if (!points.length) { setHover(null); return; }
setHover({ dayMs: nearest, points });
}
if (!series || series.length === 0 || all.length === 0) {
return (
No accuracy data yet — predictions need to resolve first.