/* global React, useApi, useMeta, useInfiniteList, LiveMarketCard, LiveMarketGrid, LivePill, Loading, LoadingBar, ApiError, Tag, NextResolutionWidget, SearchInput, ConditionsBuilder, serializeConditions, formatMoney */
// =========================================================================
// HOME — Active markets, live data only, category-filterable.
// =========================================================================
function HomePage({ navigate }) {
const { categories, models } = useMeta();
const [catFilter, setCatFilter] = React.useState('all');
// resolved filter: 'open' (default), 'true' (resolved only), 'all'
const [resolvedFilter, setResolvedFilter] = React.useState('open');
// Disagreement: when true, only markets where models split YES vs NO.
const [disagreementOnly, setDisagreementOnly] = React.useState(false);
// Multi-model conditions: { [modelId]: 'YES'|'NO'|'right'|'wrong' }
const [conditions, setConditions] = React.useState({});
// Search — `searchInput` is what's in the box, `q` is debounced for the API.
const [searchInput, setSearchInput] = React.useState('');
const [q, setQ] = React.useState('');
// Pull more top picks than we need so randomisation has variety to draw from.
const topPicks = useApi(() => window.CloudLayerAPI.listTopPicks(24), []);
// Tab counts mirror every active filter — search, disagreement, conditions.
const conditionsStrForCats = serializeConditions(conditions);
const cats = useApi(
() => window.CloudLayerAPI.listCategories({
q,
disagreement: disagreementOnly ? 'true' : '',
conditions: conditionsStrForCats,
}),
[q, disagreementOnly, conditionsStrForCats],
);
// Infinite-scroll the market grid. Pages of 24, append on bottom-sentinel.
// Resets whenever category, resolved filter, or search query changes.
const PAGE_SIZE = 24;
const conditionsStr = serializeConditions(conditions);
const markets = useInfiniteList(
(offset, limit) =>
window.CloudLayerAPI.listMarkets({
category: catFilter === 'all' ? '' : catFilter,
resolved: resolvedFilter,
disagreement: disagreementOnly ? 'true' : '',
conditions: conditionsStr,
q,
limit,
offset,
}),
[catFilter, resolvedFilter, disagreementOnly, conditionsStr, q],
PAGE_SIZE,
);
// Quietly refresh the first page every 60s so prices / verdicts stay live.
// We don't refresh later pages — that would jump the user back to the top.
React.useEffect(() => {
const t = setInterval(markets.refresh, 60_000);
return () => clearInterval(t);
}, [markets.refresh]);
// Headline pick — pick a random one from the top 12 by volume on every
// page mount. Seed via a useMemo so it stays stable while the user is on
// the page (avoids the headline flicker-changing during their visit), but
// a manual refresh picks a fresh one.
const headlinePick = React.useMemo(() => {
const items = topPicks.data?.items || [];
if (!items.length) return null;
const pool = items.slice(0, 12);
return pool[Math.floor(Math.random() * pool.length)];
}, [topPicks.data]);
// For the headline we want the strongest model voice on this market — pick
// the per-model prediction whose edge magnitude is largest. Fall back to
// the consensus (and label it accordingly) if no per-model data is on file.
const headlineModel = React.useMemo(() => {
if (!headlinePick) return null;
const per = headlinePick.perModel || [];
if (!per.length) return null;
const sorted = per.slice().sort((a, b) => {
const ae = Math.abs((a.yesProbability ?? 0.5) - (headlinePick.yesPrice ?? 0.5));
const be = Math.abs((b.yesProbability ?? 0.5) - (headlinePick.yesPrice ?? 0.5));
return be - ae;
});
return sorted[0];
}, [headlinePick]);
// Count per category depends on the active resolved filter.
function countFor(c) {
if (resolvedFilter === 'true') return c.resolvedMarkets || 0;
if (resolvedFilter === 'all') return (c.markets || 0) + (c.resolvedMarkets || 0);
return c.markets || 0;
}
const totalMarkets = (cats.data?.items || []).reduce((s, c) => s + countFor(c), 0);
const totalVolume = (cats.data?.items || []).reduce((s, c) => s + (c.volume || 0), 0);
return (
{/* HERO — live headline */}
Live · polled from Polymarket every 2 min · {totalMarkets} markets tracked
{resolvedFilter === 'true'
? 'Settled markets, newest first. Each card shows the outcome and how each model called it.'
: 'Each card shows the market price, our 6-model consensus, and each model\'s verdict.'}
{q
? <>No markets match "{q}"{catFilter !== 'all' ? ` in ${catFilter}` : ''}.
: disagreementOnly
? 'No model disagreements right now — every market with predictions has the models lining up on the same side.'
: 'No markets in this category yet.'}
) : (
<>
{/* Soft loading bar shown ONLY when we're refetching with existing
items on screen — keeps the grid visible instead of blanking. */}
{markets.loading && }
{markets.items.map((m) => (
))}
{/* Sentinel — invisible. Triggers next page load when it scrolls
into view. Stays silent while more is coming; shows a small
end-of-list line only when we've genuinely run out. */}
{!markets.hasMore && markets.items.length > 0 && (
end of list · {markets.items.length} markets
)}