frontend/src/components/RightSidebar.tsx

import { Zap, Brain } from 'lucide-react'
import { PromptEvolution } from './PromptEvolution'
import { PerformanceGraph } from './PerformanceGraph'

export function RightSidebar() {
  return (
    <div className="flex flex-col h-full overflow-y-auto">
      {/* GEPA Section */}
      <div className="p-4 border-b border-white/[0.06] shrink-0">
        <div className="flex items-center gap-2 text-[10px] font-semibold text-gray-500 uppercase tracking-widest mb-3">
          <Brain size={10} className="text-violet-400" />
          GEPA Prompt Evolution
        </div>
        <PromptEvolution />
      </div>

      {/* RL Charts */}
      <div className="p-4 flex-1 overflow-y-auto">
        <div className="flex items-center gap-2 text-[10px] font-semibold text-gray-500 uppercase tracking-widest mb-3">
          <Zap size={10} className="text-violet-400" />
          RL Learning Progress
        </div>
        <PerformanceGraph />
      </div>
    </div>
  )
}