app/ui/frontend/src/components/TrainingCharts.tsx

export default function TrainingCharts({ metrics }: { metrics: Record<string, unknown> }) {
  const rewardCols = (metrics.reward_columns ?? {}) as Record<string, unknown>;
  return (
    <section className="panel">
      <h3>Training Metrics</h3>
      <div className="grid-mini">
        <div>
          <strong>Avg Reward</strong>
          <p>{String(metrics.avg_reward ?? "-")}</p>
        </div>
        <div>
          <strong>Legality Rate</strong>
          <p>{String(metrics.legality_rate ?? "-")}</p>
        </div>
        <div>
          <strong>Success Rate</strong>
          <p>{String(metrics.success_rate ?? "-")}</p>
        </div>
        <div>
          <strong>Exploit Count</strong>
          <p>{String(metrics.exploit_detection_count ?? "-")}</p>
        </div>
      </div>
      <h3>Reward Columns</h3>
      <pre>{JSON.stringify(rewardCols, null, 2)}</pre>
    </section>
  );
}