feat(telemetry): add comprehensive Prometheus metrics and expand dashboard with system, API, ML, and Node.js runtime sections

apps/api/src/lib/telemetry.ts

@@ -44,6 +44,14 @@ export const diagnosisCounter = new Counter({
   registers: [registry],
 });
 
+export const diagnosisUploadSize = new Histogram({
+  name: 'zeavis_api_diagnosis_upload_bytes',
+  help: 'Distribution of uploaded diagnosis image sizes in bytes',
+  labelNames: ['status'] as const,
+  buckets: [1024, 51200, 102400, 204800, 512000, 1048576, 2097152, 5242880],
+  registers: [registry],
+});
+
 export const authCounter = new Counter({
   name: 'zeavis_api_auth_operations_total',
   help: 'Total authentication operations (login, register, refresh)',
@@ -51,6 +59,43 @@ export const authCounter = new Counter({
   registers: [registry],
 });
 
+export const diseaseCatalogRequests = new Counter({
+  name: 'zeavis_api_disease_catalog_requests_total',
+  help: 'Total disease catalog page views',
+  labelNames: ['type'] as const,  // 'list' | 'detail'
+  registers: [registry],
+});
+
+export const expertReviewCounter = new Counter({
+  name: 'zeavis_api_expert_reviews_total',
+  help: 'Total expert reviews submitted',
+  labelNames: ['verdict'] as const,  // 'verified' | 'corrected'
+  registers: [registry],
+});
+
+export const dbQueryDuration = new Histogram({
+  name: 'zeavis_api_db_query_duration_seconds',
+  help: 'Histogram of database query durations',
+  labelNames: ['operation'] as const,
+  buckets: [0.001, 0.005, 0.01, 0.05, 0.1, 0.25, 0.5, 1],
+  registers: [registry],
+});
+
+export const imageModelInferenceDuration = new Histogram({
+  name: 'zeavis_api_ml_inference_duration_seconds',
+  help: 'Histogram of ML model inference durations (via API->ML service)',
+  labelNames: ['result'] as const,  // 'success' | 'failure'
+  buckets: [0.05, 0.1, 0.25, 0.5, 0.75, 1, 2, 5, 10],
+  registers: [registry],
+});
+
+export const mlServiceRequests = new Counter({
+  name: 'zeavis_api_ml_service_requests_total',
+  help: 'Total requests forwarded to ML service',
+  labelNames: ['status'] as const,  // 'success' | 'error'
+  registers: [registry],
+});
+
 // ── Export ──────────────────────────────────────────────
 
 export function getMetricsContentType(): string {

apps/web/src/pages/telemetry-page.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
   BarChart3, Activity, Cpu, HardDrive, Database,
-  RefreshCw, Server,
+  RefreshCw, Server, Wifi, Layers,
 } from "lucide-react";
 import {
   AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip,
@@ -11,10 +11,10 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 // ─── Prometheus API ─────────────────────────────────────────────────
 const PROM = "https://telemetry.imrnes.team/prometheus/api/v1";
-const INSTANCE = '100.96.248.86:9100';
+const INST = "100.96.248.86"; // orange VPS
 
 interface PromValue {
-  time: number;
+  time: string;
   value: number;
 }
 
@@ -47,71 +47,69 @@ function fmtPct(v: number): string {
   return v.toFixed(1) + "%";
 }
 
-function shortMetric(name: string): string {
+function fmtBytes(v: number): string {
-  return name.replace(/^zeavis_api_/, "").replace(/^zeavis_ml_/, "");
+  if (v >= 1 << 30) return (v / (1 << 30)).toFixed(1) + " GiB";
+  if (v >= 1 << 20) return (v / (1 << 20)).toFixed(1) + " MiB";
+  if (v >= 1 << 10) return (v / (1 << 10)).toFixed(1) + " KiB";
+  return v.toFixed(0) + " B";
 }
 
-// ─── StatCard ────────────────────────────────────────────────────────
+// ─── UI Components ──────────────────────────────────────────────────
 function StatCard({ icon: Icon, label, value, sub, color }: {
   icon: typeof BarChart3; label: string; value: string; sub?: string; color: string;
 }) {
   return (
     <Card className="border-slate-200 shadow-sm">
-      <CardHeader className="flex flex-row items-center justify-between pb-2 pt-4 px-4">
+      <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3 px-4">
         <CardTitle className="text-sm font-medium text-slate-500">{label}</CardTitle>
         <Icon className={`h-4 w-4 ${color}`} />
       </CardHeader>
-      <CardContent className="px-4 pb-4">
+      <CardContent className="px-4 pb-3">
         <div className="text-2xl font-bold">{value}</div>
-        {sub && <p className="text-xs text-slate-400 mt-1">{sub}</p>}
+        {sub && <p className="text-xs text-slate-400 mt-0.5">{sub}</p>}
       </CardContent>
     </Card>
   );
 }
 
-// ─── Chart ──────────────────────────────────────────────────────────
+function ChartCard({ title, data, color, unit = "", domain }: {
-function ChartCard({ title, data, color }: {
+  title: string; data: PromValue[]; color: string; unit?: string; domain?: [number, number];
-  title: string; data: PromValue[]; color: string;
 }) {
   if (!data || data.length === 0) {
     return (
       <Card className="border-slate-200 shadow-sm">
-        <CardHeader className="pb-2 px-4 pt-4">
+        <CardHeader className="pb-2 px-4 pt-3">
           <CardTitle className="text-sm font-medium">{title}</CardTitle>
         </CardHeader>
-        <CardContent className="px-4 pb-4">
+        <CardContent className="px-4 pb-3">
-          <div className="flex items-center justify-center h-36 text-slate-400 text-sm">No data</div>
+          <div className="flex items-center justify-center h-28 text-slate-400 text-xs">No data</div>
         </CardContent>
       </Card>
     );
   }
   return (
     <Card className="border-slate-200 shadow-sm">
-      <CardHeader className="pb-2 px-4 pt-4">
+      <CardHeader className="pb-2 px-4 pt-3">
         <CardTitle className="text-sm font-medium">{title}</CardTitle>
       </CardHeader>
-      <CardContent className="px-4 pb-4">
+      <CardContent className="px-4 pb-3">
-        <ResponsiveContainer width="100%" height={140}>
+        <ResponsiveContainer width="100%" height={120}>
           <AreaChart data={data}>
             <defs>
-              <linearGradient id={`g-${title.replace(/\s/g, "")}`} x1="0" y1="0" x2="0" y2="1">
+              <linearGradient id={`g-${title.replace(/\s+/g, "")}`} x1="0" y1="0" x2="0" y2="1">
                 <stop offset="5%" stopColor={color} stopOpacity={0.2} />
                 <stop offset="95%" stopColor={color} stopOpacity={0} />
               </linearGradient>
             </defs>
             <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
-            <XAxis dataKey="time" tick={{ fontSize: 10 }}
+            <XAxis dataKey="time" tick={{ fontSize: 9 }} hide />
-              tickFormatter={(v) => new Date(v).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+            <YAxis domain={domain ?? ["auto", "auto"]} tick={{ fontSize: 9 }} unit={unit} />
-            />
-            <YAxis domain={[0, 100]} tick={{ fontSize: 10 }} unit="%" />
             <Tooltip
               labelFormatter={(v) => new Date(v).toLocaleTimeString()}
-              formatter={(val: unknown) => [
+              formatter={(val: unknown) => [typeof val === "number" ? val.toFixed(2) : String(val ?? ""), title]}
-                typeof val === "number" ? val.toFixed(1) + "%" : String(val ?? ""), title
-              ]}
             />
             <Area type="monotone" dataKey="value" stroke={color}
-              fill={`url(#g-${title.replace(/\s/g, "")})`} strokeWidth={2} />
+              fill={`url(#g-${title.replace(/\s+/g, "")})`} strokeWidth={2} />
           </AreaChart>
         </ResponsiveContainer>
       </CardContent>
@@ -119,15 +117,76 @@ function ChartCard({ title, data, color }: {
   );
 }
 
+function GaugeCard({ label, value, max, unit, color }: {
+  label: string; value: number; max: number; unit: string; color: string;
+}) {
+  const pct = max > 0 ? Math.min((value / max) * 100, 100) : 0;
+  return (
+    <Card className="border-slate-200 shadow-sm">
+      <CardHeader className="pb-1 px-4 pt-3">
+        <CardTitle className="text-xs font-medium text-slate-500">{label}</CardTitle>
+      </CardHeader>
+      <CardContent className="px-4 pb-3">
+        <div className="flex items-baseline gap-1.5">
+          <span className="text-xl font-bold">{typeof value === "number" ? value.toFixed(1) : "?"}</span>
+          <span className="text-xs text-slate-400">{unit}</span>
+        </div>
+        <div className="mt-1.5 h-1.5 w-full rounded-full bg-slate-100">
+          <div className="h-1.5 rounded-full transition-all duration-500" style={{ width: `${pct}%`, backgroundColor: color }} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Section Header ─────────────────────────────────────────────────
+function SectionTitle({ icon: Icon, title, color }: { icon: typeof Layers; title: string; color?: string }) {
+  return (
+    <h3 className="text-base font-semibold text-[#214B11] flex items-center gap-2 border-b border-slate-100 pb-2">
+      <Icon className={`h-4 w-4 ${color ?? "text-[#48A111]"}`} /> {title}
+    </h3>
+  );
+}
+
 // ─── Main Page ───────────────────────────────────────────────────────
 export function TelemetryPage() {
+  // System
   const [cpuData, setCpuData] = useState<PromValue[]>([]);
   const [memData, setMemData] = useState<PromValue[]>([]);
   const [diskData, setDiskData] = useState<PromValue[]>([]);
   const [cpuNow, setCpuNow] = useState<number | null>(null);
   const [memNow, setMemNow] = useState<number | null>(null);
   const [diskNow, setDiskNow] = useState<number | null>(null);
-  const [zeavisMetrics, setZeavisMetrics] = useState<{ name: string; value: string }[]>([]);
+  const [loadNow, setLoadNow] = useState<number | null>(null);
+  const [netRx, setNetRx] = useState<number | null>(null);
+  const [netTx, setNetTx] = useState<number | null>(null);
+  const [netRxData, setNetRxData] = useState<PromValue[]>([]);
+  const [netTxData, setNetTxData] = useState<PromValue[]>([]);
+
+  // ZeaVis API
+  const [apiReqsTotal, setApiReqsTotal] = useState<number | null>(null);
+  const [apiReqsActive, setApiReqsActive] = useState<number | null>(null);
+  const [apiLatency, setApiLatency] = useState<number | null>(null);
+  const [apiReqsData, setApiReqsData] = useState<PromValue[]>([]);
+  const [apiLatencyData, setApiLatencyData] = useState<PromValue[]>([]);
+
+  // ML
+  const [mlModelLoaded, setMlModelLoaded] = useState<number | null>(null);
+
+  // NodeJS
+  const [heapUsed, setHeapUsed] = useState<number | null>(null);
+  const [heapTotal, setHeapTotal] = useState<number | null>(null);
+  const [eventLoopLag, setEventLoopLag] = useState<number | null>(null);
+  const [activeHandles, setActiveHandles] = useState<number | null>(null);
+  const [activeRequests, setActiveRequests] = useState<number | null>(null);
+  const [heapData, setHeapData] = useState<PromValue[]>([]);
+  const [elLagData, setElLagData] = useState<PromValue[]>([]);
+
+  // Process
+  const [procCpu, setProcCpu] = useState<number | null>(null);
+  const [procMem, setProcMem] = useState<number | null>(null);
+  const [procFds, setProcFds] = useState<number | null>(null);
+
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
@@ -138,37 +197,61 @@ export function TelemetryPage() {
       if (isRefresh) setRefreshing(true); else setLoading(true);
       setError(null);
 
-      // Run all queries in parallel
+      const [
-      const [cpu, mem, disk, cpuNowVal, memNowVal, diskNowVal, upData] = await Promise.all([
+        cpuR, memR, diskR,
-        queryRange(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INSTANCE}"}[5m])) * 100)`, 60),
+        cpuN, memN, diskN, loadN,
-        queryRange(`(1 - node_memory_MemAvailable_bytes{instance="${INSTANCE}"} / node_memory_MemTotal_bytes{instance="${INSTANCE}"}) * 100`, 60),
+        netRxR, netTxR, netRxN, netTxN,
-        queryRange(`(1 - node_filesystem_avail_bytes{instance="${INSTANCE}",mountpoint="/"} / node_filesystem_size_bytes{instance="${INSTANCE}",mountpoint="/"}) * 100`, 60),
+        apiReqsN, apiActiveN, apiLatN, apiReqsR, apiLatR,
-        queryInstant(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INSTANCE}"}[5m])) * 100)`),
+        mlN,
-        queryInstant(`(1 - node_memory_MemAvailable_bytes{instance="${INSTANCE}"} / node_memory_MemTotal_bytes{instance="${INSTANCE}"}) * 100`),
+        heapN, heapTN, elN, ahN, arN, heapR, elR,
-        queryInstant(`(1 - node_filesystem_avail_bytes{instance="${INSTANCE}",mountpoint="/"} / node_filesystem_size_bytes{instance="${INSTANCE}",mountpoint="/"}) * 100`),
+        procCpuN, procMemN, procFdsN,
-        // ZeaVis app metrics
+      ] = await Promise.all([
-        (async () => {
+        // Range queries
-          const names = [
+        queryRange(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INST}:9100"}[5m])) * 100)`, 60),
-            "zeavis_api_http_requests_total",
+        queryRange(`(1 - node_memory_MemAvailable_bytes{instance="${INST}:9100"} / node_memory_MemTotal_bytes{instance="${INST}:9100"}) * 100`, 60),
-            "zeavis_api_http_requests_active",
+        queryRange(`(1 - node_filesystem_avail_bytes{instance="${INST}:9100",mountpoint="/"} / node_filesystem_size_bytes{instance="${INST}:9100",mountpoint="/"}) * 100`, 60),
-            "zeavis_ml_zeavis_ml_model_load_status",
+        // Instant queries - system
-          ];
+        queryInstant(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INST}:9100"}[5m])) * 100)`),
-          const results: { name: string; value: string }[] = [];
+        queryInstant(`(1 - node_memory_MemAvailable_bytes{instance="${INST}:9100"} / node_memory_MemTotal_bytes{instance="${INST}:9100"}) * 100`),
-          for (const n of names) {
+        queryInstant(`(1 - node_filesystem_avail_bytes{instance="${INST}:9100",mountpoint="/"} / node_filesystem_size_bytes{instance="${INST}:9100",mountpoint="/"}) * 100`),
-            const val = await queryInstant(n);
+        queryInstant(`node_load15{instance="${INST}:9100"}`),
-            if (val !== null) results.push({ name: n, value: val.toFixed(2) });
+        // Network
-          }
+        queryRange(`rate(node_network_receive_bytes_total{instance="${INST}:9100",device="eth0"}[5m])`, 60),
-          return results;
+        queryRange(`rate(node_network_transmit_bytes_total{instance="${INST}:9100",device="eth0"}[5m])`, 60),
-        })(),
+        queryInstant(`rate(node_network_receive_bytes_total{instance="${INST}:9100",device="eth0"}[5m])`),
+        queryInstant(`rate(node_network_transmit_bytes_total{instance="${INST}:9100",device="eth0"}[5m])`),
+        // API
+        queryInstant(`zeavis_api_http_requests_total{instance="${INST}:3000"}`),
+        queryInstant(`zeavis_api_http_requests_active{instance="${INST}:3000"}`),
+        queryInstant(`zeavis_api_http_request_duration_seconds_sum{instance="${INST}:3000"} / zeavis_api_http_request_duration_seconds_count{instance="${INST}:3000"}`),
+        queryRange(`zeavis_api_http_requests_total{instance="${INST}:3000"}`, 60),
+        queryRange(`zeavis_api_http_request_duration_seconds_sum{instance="${INST}:3000"} / zeavis_api_http_request_duration_seconds_count{instance="${INST}:3000"}`, 60),
+        // ML
+        queryInstant(`zeavis_ml_zeavis_ml_model_load_status{instance="${INST}:8000"}`),
+        // NodeJS
+        queryInstant(`nodejs_heap_size_used_bytes{instance="${INST}:3000"}`),
+        queryInstant(`nodejs_heap_size_total_bytes{instance="${INST}:3000"}`),
+        queryInstant(`nodejs_eventloop_lag_seconds{instance="${INST}:3000"}`),
+        queryInstant(`nodejs_active_handles_total{instance="${INST}:3000"}`),
+        queryInstant(`nodejs_active_requests_total{instance="${INST}:3000"}`),
+        queryRange(`nodejs_heap_size_used_bytes{instance="${INST}:3000"}`, 60),
+        queryRange(`nodejs_eventloop_lag_seconds{instance="${INST}:3000"}`, 60),
+        // Process
+        queryInstant(`rate(process_cpu_seconds_total{instance="${INST}:3000"}[5m])`),
+        queryInstant(`process_resident_memory_bytes{instance="${INST}:3000"}`),
+        queryInstant(`process_open_fds{instance="${INST}:3000"}`),
       ]);
 
-      setCpuData(cpu);
+      setCpuData(cpuR); setMemData(memR); setDiskData(diskR);
-      setMemData(mem);
+      setCpuNow(cpuN); setMemNow(memN); setDiskNow(diskN); setLoadNow(loadN);
-      setDiskData(disk);
+      setNetRx(netRxN); setNetTx(netTxN); setNetRxData(netRxR); setNetTxData(netTxR);
-      setCpuNow(cpuNowVal);
+      setApiReqsTotal(apiReqsN); setApiReqsActive(apiActiveN); setApiLatency(apiLatN);
-      setMemNow(memNowVal);
+      setApiReqsData(apiReqsR); setApiLatencyData(apiLatR);
-      setDiskNow(diskNowVal);
+      setMlModelLoaded(mlN);
-      setZeavisMetrics(upData);
+      setHeapUsed(heapN); setHeapTotal(heapTN); setEventLoopLag(elN);
+      setActiveHandles(ahN); setActiveRequests(arN);
+      setHeapData(heapR); setElLagData(elR);
+      setProcCpu(procCpuN); setProcMem(procMemN); setProcFds(procFdsN);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Unknown error");
     } finally {
@@ -183,14 +266,12 @@ export function TelemetryPage() {
     return () => clearInterval(intRef.current);
   }, [fetchAll]);
 
-  if (loading && cpuData.length === 0 && memData.length === 0) {
+  if (loading && cpuNow === null) {
     return (
-      <div className="space-y-6">
+      <div className="flex items-center justify-center h-64">
-        <div className="flex items-center justify-center h-64">
+        <div className="text-center space-y-3">
-          <div className="text-center space-y-3">
+          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-[#48A111] border-r-transparent" />
-            <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-[#48A111] border-r-transparent" />
+          <p className="text-sm text-muted-foreground">Loading telemetry data...</p>
-            <p className="text-sm text-muted-foreground">Loading telemetry data...</p>
-          </div>
         </div>
       </div>
     );
@@ -202,68 +283,80 @@ export function TelemetryPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl md:text-[28px] font-extrabold text-[#214B11] flex items-center gap-3">
-            <BarChart3 className="h-7 w-7 text-[#48A111]" />
+            <Activity className="h-7 w-7 text-[#48A111]" />
             Telemetry Dashboard
           </h1>
-          <p className="text-sm text-muted-foreground mt-1">
+          <p className="text-sm text-muted-foreground mt-0.5">
-            Metrics from Prometheus — orange VPS ({INSTANCE})
+            Real-time metrics from Prometheus
-            {error && <span className="text-amber-600 ml-2">({error})</span>}
+            {error && <span className="text-amber-600 ml-2">(partial — {error})</span>}
           </p>
         </div>
         <button onClick={() => fetchAll(true)} disabled={refreshing}
-          className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 transition-colors disabled:opacity-50"
+          className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 disabled:opacity-50"
-        >
+        ><RefreshCw className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`} /> Refresh
-          <RefreshCw className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`} /> Refresh
         </button>
       </div>
 
-      {/* Stat Cards */}
+      {/* ===== SYSTEM ===== */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <SectionTitle icon={Server} title="System" />
-        <StatCard icon={Cpu} label="CPU Usage" value={cpuNow !== null ? fmtPct(cpuNow) : "N/A"} color="text-blue-600" />
+      <div className="grid gap-3 md:grid-cols-4 lg:grid-cols-6">
-        <StatCard icon={Database} label="Memory Usage" value={memNow !== null ? fmtPct(memNow) : "N/A"} color="text-violet-600" />
+        <StatCard icon={Cpu} label="CPU" value={cpuNow !== null ? fmtPct(cpuNow) : "N/A"} color="text-blue-600" />
-        <StatCard icon={HardDrive} label="Disk Usage" value={diskNow !== null ? fmtPct(diskNow) : "N/A"} color="text-amber-600" />
+        <StatCard icon={Database} label="Memory" value={memNow !== null ? fmtPct(memNow) : "N/A"} color="text-violet-600" />
-        <StatCard icon={Activity} label="Status" value={error ? "Degraded" : "Healthy"} sub="via Prometheus API" color={error ? "text-red-600" : "text-green-600"} />
+        <StatCard icon={HardDrive} label="Disk" value={diskNow !== null ? fmtPct(diskNow) : "N/A"} color="text-amber-600" />
+        <StatCard icon={Activity} label="Load (15m)" value={loadNow !== null ? loadNow.toFixed(2) : "N/A"} color="text-rose-600" />
+        <StatCard icon={Wifi} label="Net Rx" value={netRx !== null ? fmtBytes(netRx) + "/s" : "N/A"} color="text-cyan-600" />
+        <StatCard icon={Wifi} label="Net Tx" value={netTx !== null ? fmtBytes(netTx) + "/s" : "N/A"} color="text-teal-600" />
+      </div>
+      <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
+        <ChartCard title="CPU %" data={cpuData} color="#2563eb" unit="%" domain={[0, 100]} />
+        <ChartCard title="Memory %" data={memData} color="#8b5cf6" unit="%" domain={[0, 100]} />
+        <ChartCard title="Disk %" data={diskData} color="#f59e0b" unit="%" domain={[0, 100]} />
+        <ChartCard title="Net Rx" data={netRxData} color="#06b6d4" />
+      </div>
+      <div className="grid gap-3 md:grid-cols-2">
+        <ChartCard title="Net Tx" data={netTxData} color="#14b8a6" />
+        <ChartCard title="Disk %" data={diskData} color="#f59e0b" unit="%" domain={[0, 100]} />
       </div>
 
-      {/* System Charts */}
+      {/* ===== APPLICATION ===== */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <SectionTitle icon={Server} title="ZeaVis API" />
-        <ChartCard title="CPU Usage (last hour)" data={cpuData} color="#2563eb" />
+      <div className="grid gap-3 md:grid-cols-4 lg:grid-cols-5">
-        <ChartCard title="Memory Usage (last hour)" data={memData} color="#8b5cf6" />
+        <StatCard icon={Activity} label="Requests Total" value={apiReqsTotal !== null ? apiReqsTotal.toFixed(0) : "N/A"} color="text-emerald-600" />
-        <ChartCard title="Disk Usage (last hour)" data={diskData} color="#f59e0b" />
+        <StatCard icon={Activity} label="Active Reqs" value={apiReqsActive !== null ? apiReqsActive.toFixed(0) : "N/A"} color="text-sky-600" />
+        <StatCard icon={Activity} label="Avg Latency" value={apiLatency !== null ? (apiLatency * 1000).toFixed(1) + "ms" : "N/A"} color="text-orange-600" />
+        <GaugeCard label="Heap Used" value={heapUsed !== null ? heapUsed / 1024 / 1024 : 0} max={heapTotal !== null ? heapTotal / 1024 / 1024 : 100} unit="MiB" color="#8b5cf6" />
+        <GaugeCard label="Event Loop Lag" value={eventLoopLag !== null ? eventLoopLag * 1000 : 0} max={50} unit="ms" color="#f59e0b" />
+      </div>
+      <div className="grid gap-3 md:grid-cols-3">
+        <ChartCard title="Requests" data={apiReqsData} color="#10b981" />
+        <ChartCard title="Latency (avg)" data={apiLatencyData} color="#f97316" />
+        <ChartCard title="Event Loop Lag" data={elLagData} color="#eab308" />
       </div>
 
-      {/* ZeaVis Application Metrics */}
+      {/* ===== ML SERVICE ===== */}
-      {zeavisMetrics.length > 0 && (
+      <SectionTitle icon={Server} title="ML Service" />
-        <section className="space-y-4">
+      <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
-          <h3 className="text-lg font-semibold text-[#214B11] flex items-center gap-2">
+        <StatCard icon={Database} label="Model Status" value={mlModelLoaded !== null ? (mlModelLoaded === 1 ? "Loaded" : "Not Loaded") : "N/A"}
-            <Server className="h-5 w-5 text-[#48A111]" /> ZeaVis Application Metrics
+          color={mlModelLoaded === 1 ? "text-green-600" : "text-red-600"} />
-          </h3>
+        <GaugeCard label="Process CPU" value={procCpu !== null ? procCpu * 100 : 0} max={100} unit="%" color="#2563eb" />
-          <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+        <GaugeCard label="Process Memory" value={procMem !== null ? procMem / 1024 / 1024 : 0} max={500} unit="MiB" color="#8b5cf6" />
-            {zeavisMetrics.map((m) => (
+        <StatCard icon={Activity} label="Open FDs" value={procFds !== null ? procFds.toFixed(0) : "N/A"} color="text-amber-600" />
-              <Card key={m.name} className="border-slate-200 shadow-sm">
+      </div>
-                <CardHeader className="pb-2 px-4 pt-3">
-                  <CardTitle className="text-xs font-medium text-slate-500 uppercase tracking-wider">
-                    {shortMetric(m.name)}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="px-4 pb-3">
-                  <div className="text-2xl font-bold text-[#306D29]">{m.value}</div>
-                  <p className="text-[10px] text-slate-400 mt-0.5 font-mono">{m.name}</p>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </section>
-      )}
 
-      {/* Raw metric names in Prometheus */}
+      {/* ===== NODEJS DETAIL ===== */}
-      {zeavisMetrics.length === 0 && (
+      <SectionTitle icon={Layers} title="Node.js Runtime" />
-        <Card className="border-slate-200 shadow-sm bg-slate-50">
+      <div className="grid gap-3 md:grid-cols-4 lg:grid-cols-6">
-          <CardContent className="px-4 py-6 text-center text-sm text-slate-400">
+        <GaugeCard label="Heap Used" value={heapUsed !== null ? heapUsed / 1024 / 1024 : 0} max={heapTotal !== null ? heapTotal / 1024 / 1024 : 200} unit="MiB" color="#8b5cf6" />
-            No application metrics available. Prometheus results shown above.
+        <StatCard icon={Database} label="Heap Total" value={heapTotal !== null ? fmtBytes(heapTotal) : "N/A"} color="text-violet-600" />
-          </CardContent>
+        <StatCard icon={Activity} label="Active Handles" value={activeHandles !== null ? activeHandles.toFixed(0) : "N/A"} color="text-sky-600" />
-        </Card>
+        <StatCard icon={Activity} label="Active Req (Node)" value={activeRequests !== null ? activeRequests.toFixed(0) : "N/A"} color="text-teal-600" />
-      )}
+        <StatCard icon={Activity} label="Process CPU (api)" value={procCpu !== null ? fmtPct(procCpu * 100) : "N/A"} color="text-blue-600" />
+        <StatCard icon={Activity} label="Process Mem (api)" value={procMem !== null ? fmtBytes(procMem) : "N/A"} color="text-indigo-600" />
+      </div>
+      <div className="grid gap-3 md:grid-cols-2">
+        <ChartCard title="Heap Used" data={heapData} color="#8b5cf6" />
+        <ChartCard title="Event Loop Lag" data={elLagData} color="#eab308" />
+      </div>
     </div>
   );
 }