File size: 4,202 Bytes
8892a6c | 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import { useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useSimulationState } from '../../store/simulationStore';
const AGENT_COLORS = {
MANAGER: 'text-violet-400',
SRE: 'text-sky-400',
SRE_AGENT:'text-sky-400',
CODER: 'text-amber-400',
ENGINEER: 'text-amber-400',
DETECTIVE:'text-orange-400',
};
function agentColor(agent) {
const key = String(agent || '').toUpperCase().split('_')[0];
return AGENT_COLORS[agent?.toUpperCase()] || AGENT_COLORS[key] || 'text-zinc-300';
}
export default function RewardMathFeed() {
const { rewardFeed, totalReward, scenarioComplete } = useSimulationState();
const scrollRef = useRef(null);
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [rewardFeed]);
return (
<div className="panel-card p-3 flex flex-col h-full min-h-0">
<div className="flex items-center justify-between mb-3 pb-2 border-b border-zinc-800/50">
<span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest flex items-center gap-1.5">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
Real-Time Reward Feed
</span>
<span className={`text-xs font-mono font-bold ${totalReward >= 0 ? 'text-emerald-400' : 'text-red-400'} px-2 py-0.5 rounded bg-zinc-950 border border-zinc-800`}>
Σ {(totalReward >= 0 ? '+' : '') + totalReward.toFixed(2)}
</span>
</div>
<div
ref={scrollRef}
className="flex-1 min-h-0 overflow-y-auto space-y-1.5 pr-1 scrollbar-thin scrollbar-thumb-zinc-700 scrollbar-track-transparent"
>
{rewardFeed.length > 0 ? (
<AnimatePresence initial={false}>
{rewardFeed.map((entry) => (
<motion.div
key={entry.id}
initial={{ opacity: 0, x: -8 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.15 }}
className="flex items-start gap-2 py-1.5 border-b border-zinc-900/40 last:border-0 min-w-0"
>
<span className="text-zinc-700 shrink-0 select-none mt-0.5">↳</span>
<div className="flex-1 min-w-0 flex flex-col gap-0.5">
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2">
<span className="min-w-0 text-[11px] font-mono uppercase tracking-wide leading-snug">
<span className={`font-semibold ${agentColor(entry.agent)}`}>{entry.agent}</span>
<span className="text-zinc-600 font-normal"> ▸ </span>
<span className="text-zinc-400 font-normal break-words">{entry.target}</span>
</span>
<span className={`text-[12px] font-mono font-bold shrink-0 ${entry.value >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{(entry.value >= 0 ? '+' : '') + entry.value.toFixed(2)}
</span>
</div>
<span className="text-zinc-600 text-[9px] font-mono">{entry.timestamp}</span>
</div>
</motion.div>
))}
{scenarioComplete && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="mt-4 pt-3 border-t border-zinc-800 bg-emerald-950/5 p-2 rounded"
>
<span className="text-emerald-500 font-bold text-xs">
[SUCCESS] Incident Closed. Total Σ {(totalReward >= 0 ? '+' : '') + totalReward.toFixed(2)}
</span>
</motion.div>
)}
</AnimatePresence>
) : (
<div className="h-full w-full flex items-center justify-center">
<div className="text-center opacity-40">
<div className="text-zinc-500 text-xs mb-1 font-mono">{'>'} Σ +0.00</div>
<p className="text-zinc-600 text-[10px] font-mono">Awaiting real reward events...</p>
</div>
</div>
)}
</div>
</div>
);
}
|