File size: 2,811 Bytes
0e23a69 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | export default function HistoryTimeline({ history }) {
return (
<div className="card">
<div className="section-label">Decision History</div>
{!history?.length ? (
<div className="history-empty">// no rounds completed yet.</div>
) : (
<div className="history-list">
{history.map((entry) => {
const aiWon = entry.agent_won_vote
const reward = entry.reward ?? ((entry.score_after ?? 0) - 0)
const rewardNum = typeof reward === 'number' ? reward : 0
return (
<div key={entry.round} className="history-item">
<span className="h-round">R{String(entry.round).padStart(2,'0')}</span>
<div className="h-info">
<div className="h-event">
{(entry.event_title ?? '').split('—').slice(-1)[0]?.trim() ?? entry.event_title}
</div>
<div className="h-picks">
<span className="h-ai-pick">
>{(entry.agent_decision ?? '').replace(/_/g, '_')}
</span>
{!aiWon && (
<>
<span style={{ color: 'var(--muted)' }}>→</span>
<span className="h-win-pick">
{(entry.winning_decision ?? '').replace(/_/g, '_')}
</span>
<span className="h-mismatch">[X]</span>
</>
)}
{aiWon && (
<span style={{ color: 'var(--primary)', fontSize: '0.55rem', textShadow: 'var(--glow-sm)' }}>
[OK]
</span>
)}
</div>
</div>
<span className={`h-reward ${rewardNum >= 0 ? 'pos' : 'neg'}`}>
{rewardNum >= 0 ? '+' : ''}{rewardNum.toFixed(2)}
</span>
</div>
)
})}
</div>
)}
</div>
)
}
|