Infrastructure and Logging

import { SimpleChart, SankeyChart, ScatterChart, Notification } from '@cleen/cleen-components';
import { useObservability } from '@/hooks/useObservability';

export function ObservabilityDashboard() {
  const { errorRate, throughput, slowest, recent } = useObservability({ window: '24h' });

  return (
    <div className="obs-grid">
      <section>
        <h2>Error rate</h2>
        <SimpleChart data={errorRate} threshold={0.02} />
      </section>
      <section>
        <h2>Endpoint throughput</h2>
        <SankeyChart data={throughput} />
      </section>
      <section>
        <h2>Slowest endpoints (p95)</h2>
        <ScatterChart points={slowest} xKey="calls" yKey="p95Ms" />
      </section>
      <Notification tone="info">{recent.length} alerts in the last hour.</Notification>
    </div>
  );
}