import { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Play, RotateCcw, Zap, Shield, AlertTriangle, ChevronRight, Cpu, Gauge } from 'lucide-react'; import clsx from 'clsx'; const TASKS = [ { id: 'auto', label: 'Auto', name: 'Adaptive Curriculum', difficulty: 'info', icon: Gauge, desc: 'Scales difficulty based on agent performance.' }, { id: 'easy', label: 'Easy', name: 'Fix average_list()', difficulty: 'easy', icon: Zap, desc: 'Syntax errors — missing colon, wrong built-in.' }, { id: 'medium', label: 'Medium', name: 'Fix binary_search()', difficulty: 'medium', icon: Cpu, desc: 'Logic bugs — off-by-one, infinite loop.' }, { id: 'hard', label: 'Hard', name: 'Optimize subarray', difficulty: 'hard', icon: AlertTriangle, desc: 'Replace O(N³) with Kadane\'s O(N).' }, { id: 'sandbox', label: 'Sandbox', name: 'Custom Code & Debug', difficulty: 'sandbox', icon: Play, desc: 'Write custom code, debug it, and measure time complexity.' }, ]; const diffColors = { info: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', text: 'text-blue-400', dot: 'bg-blue-400' }, easy: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', text: 'text-emerald-400', dot: 'bg-emerald-400' }, medium: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', text: 'text-amber-400', dot: 'bg-amber-400' }, hard: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400', dot: 'bg-red-400' }, sandbox: { bg: 'bg-purple-500/10', border: 'border-purple-500/30', text: 'text-purple-400', dot: 'bg-purple-400' }, }; export default function Sidebar({ selectedTask, onSelectTask, onStartEpisode, onReset, isRunning, episodeHistory, serverStatus, }) { const [historyOpen, setHistoryOpen] = useState(false); return ( ); }