1  import { usePipelineMetrics } from '@/hooks/useDashboard'
 2  import { MetricCard } from './MetricCard'
 3  
 4  export function PipelineMetricsCard() {
 5    const { data } = usePipelineMetrics()
 6  
 7    const load = data?.load?.toFixed(1) ?? '--'
 8    const memGb = data?.mem_mb != null ? `${(data.mem_mb / 1024).toFixed(1)} GB` : '--'
 9    const active = data?.active_tasks ?? '--'
10    const completed = data?.completed ?? '--'
11  
12    return (
13      <div className="grid grid-cols-4 gap-4 mb-6" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
14        <MetricCard label="System Load" value={load} />
15        <MetricCard label="Memory Used" value={memGb} />
16        <MetricCard label="Active Tasks" value={active} valueClass="text-[#58a6ff]" />
17        <MetricCard label="Completed" value={completed} valueClass="text-[#3fb950]" />
18      </div>
19    )
20  }