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

import { useMemo, useState } from "react";

export default function EpisodeTrace({ trace }: { trace: Array<Record<string, unknown>> }) {
  const [idx, setIdx] = useState(0);
  const safeIdx = Math.max(0, Math.min(idx, Math.max(0, trace.length - 1)));
  const selected = useMemo(() => trace[safeIdx] ?? {}, [trace, safeIdx]);

  return (
    <section className="panel">
      <h3>Episode Trace</h3>
      <input
        type="range"
        min={0}
        max={Math.max(0, trace.length - 1)}
        value={safeIdx}
        onChange={(e) => setIdx(Number(e.target.value))}
      />
      <p className="muted">
        Step {safeIdx + 1} / {Math.max(1, trace.length)}
      </p>
      <pre>{JSON.stringify(selected, null, 2)}</pre>
    </section>
  );
}