app/ui/frontend/src/pages/TrainingMonitor.tsx

import { useEffect, useState } from "react";
import TrainingCharts from "../components/TrainingCharts";
import { fetchTrainingMetrics } from "../lib/api";

export default function TrainingMonitor() {
  const [metrics, setMetrics] = useState<Record<string, unknown>>({});

  useEffect(() => {
    fetchTrainingMetrics().then(setMetrics).catch(() => setMetrics({ status: "no training yet" }));
  }, []);

  return (
    <section className="page">
      <h1>Training Monitor</h1>
      <TrainingCharts metrics={metrics} />
    </section>
  );
}