Grade mode fans out to one Score per card, all in a single request. Those scores are comparable across items and across requests, so page two ranks against page one — load it and the lists interleave. A per-page Choice could not do that, and the breakage would be invisible. Grade mode can also drop weak matches, which compete mode cannot: there, something always wins.
instructions · backticked paths scope what it readspick prop// app/providers.tsx — the state every question on this page receives
<JevProvider
resolve={askJev}
scope={{ app: { product: "Northwind Analytics", user: "ana", role: "analyst", familiarity: "returning" } }}
initialAmbient={{ recent_actions: [], time_spent: "short" }}
>'use client';import { Rank, useJev, type DecisionCost } from 'jev-ui';import { useState } from 'react';// … demo scaffolding — answer panel, mock pages, and the grading levelsexport function FeedDemo() { const { setState, state } = useJev(); const [interest, setInterest] = useState(INTERESTS[0]!); const [pages, setPages] = useState(1); const [filter, setFilter] = useState(false); const [cost, setCost] = useState<DecisionCost | undefined>(); const { pick, ask } = usePick(); const items = PAGES.slice(0, pages).flat(); return ( <> <section className="card" data-testid="demo-live" style={{ display: 'grid', gap: 14 }}> // … the controls that drive the demo <div style={{ fontSize: 13, color: 'var(--muted)' }} data-testid="feed-recent"> recent: {(state.recent_actions ?? []).join(' → ') || '(nothing yet)'} · {items.length} cards fetched </div> <Rank id="feed" items={items} idOf={(card) => card.id} labelOf={(card) => `[${card.kind}] ${card.title}`} mode="grade" levels={LEVELS} minScore={filter ? 0.5 : undefined} pick={undefined} // every channel — the default ← set by the controls above onResolved={setCost} ask="How well does the feed card in `data.item` match what the person has been doing, as shown in `recent_actions`?" ← set by the controls above > {(ranked, meta) => ( <ul data-testid="feed" data-status={meta.status} style={{ margin: 0, padding: 0, listStyle: 'none' }}> {ranked.map((entry) => ( <li key={entry.id} data-testid={`card-${entry.id}`} style={{ padding: '8px 10px', marginBottom: 6, border: '1px solid var(--line)', borderRadius: 8, // Grade scores are comparable, so they can drive presentation directly. opacity: 0.55 + entry.score * 0.45, }} > <span style={{ fontSize: 11, textTransform: 'uppercase', color: 'var(--muted)' }}> {entry.item.kind} </span> <div>{entry.item.title}</div> <span style={{ fontSize: 11, color: 'var(--muted)' }} data-testid={`score-${entry.id}`}> {entry.score.toFixed(3)} </span> </li> ))} </ul> )} </Rank> </section> // … omitted </> );}