Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend

apps/web/src/app.tsx

@@ -37,7 +37,7 @@ function LogoutProses() {
 
   return <Navigate to="/login" replace />;
 }
-import { trackPageView } from "./lib/telemetry";
+import { trackPageView, trackError } from "./lib/telemetry";
 
 const queryClient = new QueryClient();
 
@@ -149,11 +149,23 @@ function PageViewTracker() {
   return null;
 }
 
+function GlobalErrorTracker() {
+  useEffect(() => {
+    const handler = (event: ErrorEvent) => {
+      trackError(event.filename || "global");
+    };
+    window.addEventListener("error", handler);
+    return () => window.removeEventListener("error", handler);
+  }, []);
+  return null;
+}
+
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <AuthInitializer />
       <PageViewTracker />
+      <GlobalErrorTracker />
       <RouterProvider router={router} />
     </QueryClientProvider>
   );

apps/web/src/lib/api-client.ts

@@ -12,6 +12,7 @@ import type {
   ReviewDiagnosisRequest,
   DashboardSummary,
 } from '@zeavis/shared';
+import { recordApiCall } from './telemetry';
 
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? '';
 
@@ -21,6 +22,7 @@ export interface ApiError extends Error {
 }
 
 async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T> {
+  const start = performance.now();
   const url = `${apiBaseUrl}${endpoint}`;
   const response = await fetch(url, {
     credentials: 'include',
@@ -28,6 +30,10 @@ async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T>
     headers: options?.headers,
   });
 
+  const duration = performance.now() - start;
+  const method = options?.method ?? 'GET';
+  recordApiCall(method, endpoint, duration, response.status);
+
   if (!response.ok) {
     let errorMessage = `HTTP ${response.status}`;
     let source: 'uploader' | 'model-service' | 'unknown' | undefined;

apps/web/src/lib/telemetry.ts

@@ -2,8 +2,10 @@
  * Client‑side telemetry for the ZeaVis Edu web app.
  *
  * In development, metrics are collected in‑memory and exposed at /metrics
- * via a Vite plugin.  In production they are sent as HTTP beacons to the
- * Telemetry pipeline (see METRICS.md).
+ * via a Vite plugin.  In production they are served through the same plugin
+ * (or proxied by nginx in production mode).
+ *
+ * Metric name prefix: zeavis_web_
  */
 
 // ── Web Vitals ──────────────────────────────────────────
@@ -18,35 +20,99 @@ const vitalsBuffer: MetricEntry[] = [];
 
 export function reportWebVitals(metric: MetricEntry): void {
   vitalsBuffer.push(metric);
-  // Keep last 20 entries in memory for the /metrics endpoint
-  if (vitalsBuffer.length > 20) vitalsBuffer.shift();
-  console.debug(`[telemetry] ${metric.name}: ${metric.value} (${metric.rating ?? 'n/a'})`);
+  if (vitalsBuffer.length > 30) vitalsBuffer.splice(0, vitalsBuffer.length - 30);
 }
 
 // ── Page‑view counter ───────────────────────────────────
 
 let pageViewCount = 0;
+const routeViews: Record<string, number> = {};
 
 export function trackPageView(path: string): void {
   pageViewCount++;
-  console.debug(`[telemetry] pageview: ${path} (total: ${pageViewCount})`);
+  routeViews[path] = (routeViews[path] || 0) + 1;
 }
 
-// ── Metrics serialisation (consumed by vite‑plugin) ────
+// ── API call timing ─────────────────────────────────────
+// Track how long API calls take from the browser side
+
+const apiLatencies: number[] = [];
+const MAX_API_SAMPLES = 100;
+
+export function recordApiCall(method: string, path: string, durationMs: number, status: number): void {
+  apiLatencies.push(durationMs);
+  if (apiLatencies.length > MAX_API_SAMPLES) apiLatencies.shift();
+  console.debug(`[telemetry] api ${method} ${path} → ${status} (${durationMs.toFixed(0)}ms)`);
+}
+
+// ── Error tracking (client-side JS errors) ──────────────
+
+let errorCount = 0;
+
+export function trackError(source: string): void {
+  errorCount++;
+  console.debug(`[telemetry] error from ${source} (total: ${errorCount})`);
+}
+
+// ── Diagnosis actions ───────────────────────────────────
+
+let scanCount = 0;
+let diagnosisSuccess = 0;
+let diagnosisFailure = 0;
+
+export function trackScan(): void {
+  scanCount++;
+}
+
+export function trackDiagnosisResult(success: boolean): void {
+  if (success) diagnosisSuccess++;
+  else diagnosisFailure++;
+}
+
+// ── Metrics serialisation (consumed by vite-plugin) ────
 
 export function collectMetrics(): string {
   const lines: string[] = [];
 
-  // ── Default process‑like metrics ──────────────────────
   lines.push('# HELP zeavis_web_page_views_total Total page views');
   lines.push('# TYPE zeavis_web_page_views_total counter');
   lines.push(`zeavis_web_page_views_total ${pageViewCount}`);
 
-  lines.push('# HELP zeavis_web_vital_bucket Web Vitals observed this session');
-  lines.push('# TYPE zeavis_web_vital_bucket gauge');
-  for (const v of vitalsBuffer) {
-    lines.push(`zeavis_web_vital_bucket{name="${v.name}",rating="${v.rating ?? 'unknown'}"} ${v.value}`);
+  lines.push('# HELP zeavis_web_route_views_total Page views per route');
+  lines.push('# TYPE zeavis_web_route_views_total counter');
+  for (const [route, count] of Object.entries(routeViews)) {
+    lines.push(`zeavis_web_route_views_total{route="${route}"} ${count}`);
   }
 
+  lines.push('# HELP zeavis_web_vital Web Vitals observed this session');
+  lines.push('# TYPE zeavis_web_vital gauge');
+  for (const v of vitalsBuffer) {
+    lines.push(`zeavis_web_vital{name="${v.name}",rating="${v.rating ?? 'unknown'}"} ${v.value}`);
+  }
+
+  if (apiLatencies.length > 0) {
+    const avg = apiLatencies.reduce((a, b) => a + b, 0) / apiLatencies.length;
+    lines.push('# HELP zeavis_web_api_call_duration_ms Average API call duration from browser');
+    lines.push('# TYPE zeavis_web_api_call_duration_ms gauge');
+    lines.push(`zeavis_web_api_call_duration_ms ${avg.toFixed(2)}`);
+  }
+
+  lines.push('# HELP zeavis_web_client_errors_total Client-side JS errors');
+  lines.push('# TYPE zeavis_web_client_errors_total counter');
+  lines.push(`zeavis_web_client_errors_total ${errorCount}`);
+
+  lines.push('# HELP zeavis_web_scans_total Scan button clicks');
+  lines.push('# TYPE zeavis_web_scans_total counter');
+  lines.push(`zeavis_web_scans_total ${scanCount}`);
+
+  lines.push('# HELP zeavis_web_diagnoses_total Diagnosis results from browser');
+  lines.push('# TYPE zeavis_web_diagnoses_total counter');
+  lines.push(`zeavis_web_diagnoses_total{result="success"} ${diagnosisSuccess}`);
+  lines.push(`zeavis_web_diagnoses_total{result="failure"} ${diagnosisFailure}`);
+
+  lines.push('# HELP zeavis_web_active_users User activity (1 = active this session)');
+  lines.push('# TYPE zeavis_web_active_users gauge');
+  lines.push(`zeavis_web_active_users 1`);
+
   return lines.join('\n') + '\n';
 }

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

@@ -18,6 +18,7 @@ import { Modal } from "@/components/ui/modal";
 import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
 import type { DiagnosisRecord } from "@zeavis/shared";
 import { apiClient } from "@/lib/api-client";
+import { trackScan, trackDiagnosisResult } from "@/lib/telemetry";
 
 export function ScanPage() {
   const [fileName, setFileName] = useState<string | null>(null);
@@ -31,6 +32,7 @@ export function ScanPage() {
   const mutation = useMutation({
     mutationFn: (file: File) => apiClient.createDiagnosis(file),
     onSuccess: (diagnosis) => {
+      trackDiagnosisResult(diagnosis.status !== "failed");
       queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
       setDiagnosisPreview(diagnosis);
       setPreviewOpen(true);
@@ -38,6 +40,9 @@ export function ScanPage() {
       setPreviewUrl(null);
       if (inputRef.current) inputRef.current.value = "";
     },
+    onError: () => {
+      trackDiagnosisResult(false);
+    },
   });
 
   const handleFile = (f?: File) => {
@@ -61,6 +66,7 @@ export function ScanPage() {
   const handleUpload = () => {
     const file = inputRef.current?.files?.[0];
     if (!file) return;
+    trackScan();
     mutation.mutate(file);
   };
 

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

@@ -1,229 +1,119 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
-  BarChart3,
-  Activity,
-  Cpu,
-  HardDrive,
-  Database,
-  Layers,
-  RefreshCw,
-  AlertTriangle,
+  BarChart3, Activity, Cpu, HardDrive, Database,
+  RefreshCw, Server, Wifi, Layers,
 } from "lucide-react";
 import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
+  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip,
   ResponsiveContainer,
-  BarChart,
-  Bar,
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-// ─── Types ──────────────────────────────────────────────────────────
-const API_BASE = "https://telemetry.imrnes.team/proxy/dashboard";
+// ─── Prometheus API ─────────────────────────────────────────────────
+const PROM = "https://telemetry.imrnes.team/prometheus/api/v1";
+const INST = "100.96.248.86"; // orange VPS
 
-interface DashboardStats {
-  cpu_usage: number;
-  disk_usage: number;
-  total_metrics: number;
-  active_services: number;
-  uptime_seconds: number;
-  health: { disk_readonly: boolean; errors: number };
-}
-
-interface DiscoveredMetric {
-  metric_name: string;
-  service: string;
-  sample_count: number;
-  latest_value: number;
-}
-
-interface ChartPoint {
+interface PromValue {
   time: string;
   value: number;
 }
 
+async function queryRange(query: string, steps = 60): Promise<PromValue[]> {
+  const now = Math.floor(Date.now() / 1000);
+  const start = now - 3600;
+  const q = `query=${encodeURIComponent(query)}&start=${start}&end=${now}&step=${steps}`;
+  const res = await fetch(`${PROM}/query_range?${q}`);
+  if (!res.ok) throw new Error(`Prometheus: ${res.status}`);
+  const data = await res.json();
+  const results = data?.data?.result ?? [];
+  if (results.length === 0) return [];
+  return results[0].values.map((v: [number, string]) => ({
+    time: new Date(v[0] * 1000).toISOString(),
+    value: parseFloat(v[1]),
+  }));
+}
+
+async function queryInstant(query: string): Promise<number | null> {
+  const res = await fetch(`${PROM}/query?query=${encodeURIComponent(query)}`);
+  if (!res.ok) return null;
+  const data = await res.json();
+  const results = data?.data?.result ?? [];
+  if (results.length === 0) return null;
+  return parseFloat(results[0].value[1]);
+}
+
 // ─── Helpers ─────────────────────────────────────────────────────────
-function fmt(n: number): string {
-  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
-  if (n >= 1_000) return (n / 1_000).toFixed(1) + "K";
-  return n.toFixed(1);
-}
-
-function fmtDuration(s: number): string {
-  const d = Math.floor(s / 86400);
-  const h = Math.floor((s % 86400) / 3600);
-  if (d > 0) return `${d}d ${h}h`;
-  const m = Math.floor((s % 3600) / 60);
-  if (h > 0) return `${h}h ${m}m`;
-  return `${m}m`;
-}
-
 function fmtPct(v: number): string {
-  return (v * 100).toFixed(1) + "%";
+  return v.toFixed(1) + "%";
 }
 
-// ─── API Client ──────────────────────────────────────────────────────
-class TelemetryAPI {
-  private base: string;
-  constructor(base: string) {
-    this.base = base;
-  }
-
-  async stats(): Promise<DashboardStats> {
-    const res = await fetch(`${this.base}/stats`);
-    if (!res.ok) throw new Error(`Stats API: ${res.status}`);
-    return res.json();
-  }
-
-  async discover(): Promise<DiscoveredMetric[]> {
-    const res = await fetch(`${this.base}/discover`);
-    if (!res.ok) throw new Error(`Discover API: ${res.status}`);
-    const data = await res.json();
-    return data.metrics ?? [];
-  }
-
-  async charts(
-    panels: { key: string; metric: string; aggregation?: string }[],
-  ): Promise<Map<string, ChartPoint[]>> {
-    const now = Math.floor(Date.now() / 1000);
-    const oneHourAgo = now - 3600;
-    const res = await fetch(`${this.base}/charts`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        panels: panels.map((p) => ({
-          key: p.key,
-          metric: p.metric,
-          start: oneHourAgo,
-          end: now,
-          aggregation: p.aggregation ?? "avg",
-        })),
-      }),
-    });
-    if (!res.ok) throw new Error(`Charts API: ${res.status}`);
-    const data = await res.json();
-    const map = new Map<string, ChartPoint[]>();
-    for (const r of data.results ?? []) {
-      map.set(r.key, r.data ?? []);
-    }
-    return map;
-  }
+function fmtBytes(v: number): string {
+  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";
 }
 
-const api = new TelemetryAPI(API_BASE);
-
-// ─── Stat Card ───────────────────────────────────────────────────────
-function StatCard({
-  icon: Icon,
-  label,
-  value,
-  sub,
-  color,
-}: {
-  icon: typeof BarChart3;
-  label: string;
-  value: string;
-  sub?: string;
-  color: string;
+// ─── 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">
-        <CardTitle className="text-sm font-medium text-slate-500">
-          {label}
-        </CardTitle>
+      <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>
   );
 }
 
-// ─── Metric Card ─────────────────────────────────────────────────────
-function MetricChart({
-  title,
-  data,
-  loading,
-  color,
-}: {
-  title: string;
-  data: ChartPoint[];
-  loading: boolean;
-  color: string;
+function ChartCard({ title, data, color, unit = "", domain, valueFormatter }: {
+  title: string; data: PromValue[]; color: string; unit?: string; domain?: [number, number];
+  valueFormatter?: (v: number) => string;
 }) {
-  if (loading) {
-    return (
-      <Card className="border-slate-200 shadow-sm">
-        <CardHeader className="pb-2 px-4 pt-4">
-          <CardTitle className="text-sm font-medium">{title}</CardTitle>
-        </CardHeader>
-        <CardContent className="px-4 pb-4">
-          <div className="flex items-center justify-center h-40 text-slate-400 text-sm">
-            Loading...
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
   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">
-          <div className="flex items-center justify-center h-40 text-slate-400 text-sm">
-            No data available
-          </div>
+        <CardContent className="px-4 pb-3">
+          <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">
-        <ResponsiveContainer width="100%" height={160}>
+      <CardContent className="px-4 pb-3">
+        <ResponsiveContainer width="100%" height={120}>
           <AreaChart data={data}>
             <defs>
-              <linearGradient id={`grad-${title}`} 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 }}
-              tickFormatter={(v) => {
-                const d = new Date(v);
-                return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
-              }}
-            />
-            <YAxis tick={{ fontSize: 10 }} />
+            <XAxis dataKey="time" tick={{ fontSize: 9 }} hide />
+            <YAxis domain={domain ?? ["auto", "auto"]} tick={{ fontSize: 9 }} unit={unit} />
             <Tooltip
               labelFormatter={(v) => new Date(v).toLocaleTimeString()}
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              formatter={(val: any) => [typeof val === "number" ? val.toFixed(2) : String(val ?? ""), title]}
-            />
-            <Area
-              type="monotone"
-              dataKey="value"
-              stroke={color}
-              fill={`url(#grad-${title})`}
-              strokeWidth={2}
+              formatter={(val: unknown) => {
+                const v = typeof val === "number" ? val : 0;
+                return [valueFormatter ? valueFormatter(v) : v.toFixed(2), title];
+              }}
             />
+            <Area type="monotone" dataKey="value" stroke={color}
+              fill={`url(#g-${title.replace(/\s+/g, "")})`} strokeWidth={2} />
           </AreaChart>
         </ResponsiveContainer>
       </CardContent>
@@ -231,76 +121,141 @@ function MetricChart({
   );
 }
 
+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() {
-  const [stats, setStats] = useState<DashboardStats | null>(null);
-  const [metrics, setMetrics] = useState<DiscoveredMetric[]>([]);
-  const [chartMap, setChartMap] = useState<Map<string, ChartPoint[]>>(new Map());
-  const [memChartData, setMemChartData] = useState<ChartPoint[] | null>(null);
+  // 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 [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);
-  const intervalRef = useRef<number | undefined>(undefined);
+  const intRef = useRef<number>(0);
 
-  const fetchData = useCallback(async (isRefresh = false) => {
+  const fetchAll = useCallback(async (isRefresh = false) => {
     try {
-      if (isRefresh) setRefreshing(true);
-      else setLoading(true);
+      if (isRefresh) setRefreshing(true); else setLoading(true);
       setError(null);
 
-      const [statsData, discoverData] = await Promise.all([
-        api.stats(),
-        api.discover(),
+      const [
+        cpuR, memR, diskR,
+        cpuN, memN, diskN, loadN,
+        netRxR, netTxR, netRxN, netTxN,
+        apiReqsN, apiActiveN, apiLatN, apiReqsR, apiLatR,
+        mlN,
+        heapN, heapTN, elN, ahN, arN, heapR, elR,
+        procCpuN, procMemN, procFdsN,
+      ] = await Promise.all([
+        // Range queries
+        queryRange(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INST}:9100"}[5m])) * 100)`, 60),
+        queryRange(`(1 - node_memory_MemAvailable_bytes{instance="${INST}:9100"} / node_memory_MemTotal_bytes{instance="${INST}:9100"}) * 100`, 60),
+        queryRange(`(1 - node_filesystem_avail_bytes{instance="${INST}:9100",mountpoint="/"} / node_filesystem_size_bytes{instance="${INST}:9100",mountpoint="/"}) * 100`, 60),
+        // Instant queries - system
+        queryInstant(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INST}:9100"}[5m])) * 100)`),
+        queryInstant(`(1 - node_memory_MemAvailable_bytes{instance="${INST}:9100"} / node_memory_MemTotal_bytes{instance="${INST}:9100"}) * 100`),
+        queryInstant(`(1 - node_filesystem_avail_bytes{instance="${INST}:9100",mountpoint="/"} / node_filesystem_size_bytes{instance="${INST}:9100",mountpoint="/"}) * 100`),
+        queryInstant(`node_load15{instance="${INST}:9100"}`),
+        // Network
+        queryRange(`rate(node_network_receive_bytes_total{instance="${INST}:9100",device="eth0"}[5m])`, 60),
+        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"}`),
       ]);
 
-      setStats(statsData);
-      setMetrics(discoverData);
-
-      // Fetch charts for top metrics (excluding prometheus noise)
-      const topMetrics = discoverData
-        .filter((m) => !m.metric_name.startsWith("prometheus_") && m.service !== "prometheus")
-        .slice(0, 4);
-
-      const chartPanels = topMetrics.map((m) => ({
-        key: m.metric_name,
-        metric: m.metric_name,
-      }));
-
-      // Built-in computations + app metrics
-      chartPanels.unshift({ key: "_cpu_usage_pct", metric: "_cpu_usage_pct" });
-      chartPanels.unshift({ key: "_disk_usage_pct", metric: "_disk_usage_pct" });
-
-      // Memory charts (raw values, % computed client-side)
-      chartPanels.push({ key: "node_memory_MemTotal_bytes", metric: "node_memory_MemTotal_bytes" });
-      chartPanels.push({ key: "node_memory_MemAvailable_bytes", metric: "node_memory_MemAvailable_bytes" });
-
-      // App-specific metrics
-      for (const appMetric of ["zeavis_api_http_requests_total", "zeavis_api_http_requests_active"]) {
-        if (discoverData.find((m) => m.metric_name === appMetric)) {
-          chartPanels.push({ key: appMetric, metric: appMetric });
-        }
-      }
-
-      const charts = await api.charts(chartPanels);
-      setChartMap(charts);
-
-      // Compute memory usage % = (total - available) / total
-      const memTotalData = charts.get("node_memory_MemTotal_bytes");
-      const memAvailData = charts.get("node_memory_MemAvailable_bytes");
-      if (memTotalData && memAvailData && memTotalData.length > 0 && memAvailData.length > 0) {
-        const merged: ChartPoint[] = [];
-        for (let i = 0; i < Math.min(memTotalData.length, memAvailData.length); i++) {
-          const total = memTotalData[i].value;
-          const avail = memAvailData[i].value;
-          if (total > 0) {
-            merged.push({ time: memTotalData[i].time, value: 1 - avail / total });
-          }
-        }
-        setMemChartData(merged);
-      } else {
-        setMemChartData([]);
-      }
-      setChartMap(charts);
+      setCpuData(cpuR); setMemData(memR); setDiskData(diskR);
+      setCpuNow(cpuN); setMemNow(memN); setDiskNow(diskN); setLoadNow(loadN);
+      setNetRx(netRxN); setNetTx(netTxN); setNetRxData(netRxR); setNetTxData(netTxR);
+      setApiReqsTotal(apiReqsN); setApiReqsActive(apiActiveN); setApiLatency(apiLatN);
+      setApiReqsData(apiReqsR); setApiLatencyData(apiLatR);
+      setMlModelLoaded(mlN);
+      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 {
@@ -310,57 +265,17 @@ export function TelemetryPage() {
   }, []);
 
   useEffect(() => {
-    fetchData();
-    intervalRef.current = window.setInterval(() => fetchData(true), 30_000);
-    return () => {
-      if (intervalRef.current) clearInterval(intervalRef.current);
-    };
-  }, [fetchData]);
+    fetchAll();
+    intRef.current = window.setInterval(() => fetchAll(true), 30_000);
+    return () => clearInterval(intRef.current);
+  }, [fetchAll]);
 
-  const serviceCounts = useMemo(() => {
-    const counts = new Map<string, number>();
-    for (const m of metrics) {
-      counts.set(m.service, (counts.get(m.service) ?? 0) + 1);
-    }
-    return Array.from(counts.entries()).sort((a, b) => b[1] - a[1]);
-  }, [metrics]);
-
-  const topMetrics = useMemo(() => {
-    return metrics.slice(0, 10);
-  }, [metrics]);
-
-  if (loading && !stats) {
+  if (loading && cpuNow === null) {
     return (
-      <div className="space-y-6">
-        <div className="flex items-center justify-center h-64">
-          <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" />
-            <p className="text-sm text-muted-foreground">
-              Loading telemetry data...
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error && !stats) {
-    return (
-      <div className="space-y-6">
-        <div className="flex items-center justify-center h-64">
-          <div className="text-center space-y-3 max-w-md">
-            <AlertTriangle className="h-10 w-10 text-red-500 mx-auto" />
-            <p className="text-sm font-semibold text-red-600">
-              Failed to load telemetry data
-            </p>
-            <p className="text-xs text-slate-500">{error}</p>
-            <button
-              onClick={() => fetchData()}
-              className="inline-flex items-center gap-1 rounded-full bg-[#48A111] px-4 py-2 text-sm font-semibold text-white hover:bg-[#306D29]"
-            >
-              Retry
-            </button>
-          </div>
+      <div className="flex items-center justify-center h-64">
+        <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" />
+          <p className="text-sm text-muted-foreground">Loading telemetry data...</p>
         </div>
       </div>
     );
@@ -372,199 +287,82 @@ 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">
-            System metrics from Prometheus pipeline via ClickHouse.
-            {error && (
-              <span className="text-amber-600 ml-2">
-                (partial data — {error})
-              </span>
-            )}
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Real-time metrics from Prometheus
+            {error && <span className="text-amber-600 ml-2">(partial — {error})</span>}
           </p>
         </div>
-        <button
-          onClick={() => fetchData(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"
-        >
-          <RefreshCw
-            className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`}
-          />
-          Refresh
+        <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 disabled:opacity-50"
+        ><RefreshCw className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`} /> Refresh
         </button>
       </div>
 
-      {/* Stat Cards */}
-      {stats && (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-          <StatCard
-            icon={Cpu}
-            label="CPU Usage"
-            value={fmtPct(stats.cpu_usage)}
-            color="text-blue-600"
-          />
-          <StatCard
-            icon={HardDrive}
-            label="Disk Usage"
-            value={fmtPct(stats.disk_usage)}
-            color="text-amber-600"
-          />
-          <StatCard
-            icon={Database}
-            label="Total Metrics"
-            value={fmt(stats.total_metrics)}
-            sub={`${stats.active_services} active services`}
-            color="text-green-600"
-          />
-          <StatCard
-            icon={Activity}
-            label="Uptime"
-            value={fmtDuration(stats.uptime_seconds)}
-            sub={
-              stats.health.errors > 0
-                ? `${stats.health.errors} errors`
-                : "All healthy"
-            }
-            color={stats.health.errors > 0 ? "text-red-600" : "text-green-600"}
-          />
-        </div>
-      )}
-
-      {/* CPU, Memory, Disk charts */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        <MetricChart
-          title="CPU Usage (last hour)"
-          data={chartMap.get("_cpu_usage_pct") ?? []}
-          loading={loading}
-          color="#2563eb"
-        />
-        <MetricChart
-          title="Memory Usage (last hour)"
-          data={memChartData ?? []}
-          loading={loading}
-          color="#8b5cf6"
-        />
-        <MetricChart
-          title="Disk Usage (last hour)"
-          data={chartMap.get("_disk_usage_pct") ?? []}
-          loading={loading}
-          color="#f59e0b"
-        />
+      {/* ===== SYSTEM ===== */}
+      <SectionTitle icon={Server} title="System" />
+      <div className="grid gap-3 md:grid-cols-4 lg:grid-cols-6">
+        <StatCard icon={Cpu} label="CPU" value={cpuNow !== null ? fmtPct(cpuNow) : "N/A"} color="text-blue-600" />
+        <StatCard icon={Database} label="Memory" value={memNow !== null ? fmtPct(memNow) : "N/A"} color="text-violet-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>
 
-      {/* Application Metrics */}
-      {(chartMap.has("zeavis_api_http_requests_total") || chartMap.has("zeavis_api_http_requests_active")) && (
-        <section className="space-y-4">
-          <h3 className="text-lg font-semibold text-[#214B11]">Application Metrics</h3>
-          <div className="grid gap-4 md:grid-cols-1 lg:grid-cols-2">
-            {chartMap.has("zeavis_api_http_requests_total") && (
-              <MetricChart
-                title="HTTP Requests Total (API)"
-                data={chartMap.get("zeavis_api_http_requests_total") ?? []}
-                loading={loading}
-                color="#ec4899"
-              />
-            )}
-            {chartMap.has("zeavis_api_http_requests_active") && (
-              <MetricChart
-                title="Active HTTP Requests (API)"
-                data={chartMap.get("zeavis_api_http_requests_active") ?? []}
-                loading={loading}
-                color="#14b8a6"
-              />
-            )}
-          </div>
-        </section>
-      )}
+      {/* ===== APPLICATION ===== */}
+      <SectionTitle icon={Server} title="ZeaVis API" />
+      <div className="grid gap-3 md:grid-cols-4 lg:grid-cols-5">
+        <StatCard icon={Activity} label="Requests Total" value={apiReqsTotal !== null ? apiReqsTotal.toFixed(0) : "N/A"} color="text-emerald-600" />
+        <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>
 
-      {/* Top Metrics */}
-      <Card className="border-slate-200 shadow-sm">
-        <CardHeader className="pb-2 px-4 pt-4">
-          <CardTitle className="text-lg font-semibold text-[#214B11] flex items-center gap-2">
-            <Layers className="h-5 w-5 text-[#48A111]" />
-            Top Metrics
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="px-4 pb-4">
-          {topMetrics.length === 0 ? (
-            <div className="text-center py-8 text-slate-400 text-sm">
-              No metrics discovered yet
-            </div>
-          ) : (
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b border-slate-200">
-                    <th className="text-left py-2 px-2 font-medium text-slate-500">
-                      Metric
-                    </th>
-                    <th className="text-left py-2 px-2 font-medium text-slate-500">
-                      Service
-                    </th>
-                    <th className="text-right py-2 px-2 font-medium text-slate-500">
-                      Samples
-                    </th>
-                    <th className="text-right py-2 px-2 font-medium text-slate-500">
-                      Latest Value
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {topMetrics.map((m) => (
-                    <tr key={m.metric_name} className="border-b border-slate-100 hover:bg-slate-50">
-                      <td className="py-2 px-2 font-mono text-xs text-slate-700 max-w-[300px] truncate">
-                        {m.metric_name}
-                      </td>
-                      <td className="py-2 px-2">
-                        <span className="inline-flex items-center rounded-full bg-[#EFF6E8] px-2 py-0.5 text-xs font-medium text-[#48A111]">
-                          {m.service}
-                        </span>
-                      </td>
-                      <td className="py-2 px-2 text-right text-slate-600">
-                        {fmt(m.sample_count)}
-                      </td>
-                      <td className="py-2 px-2 text-right font-mono text-xs text-slate-600">
-                        {typeof m.latest_value === "number"
-                          ? m.latest_value.toFixed(4)
-                          : String(m.latest_value)}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </CardContent>
-      </Card>
+      {/* ===== ML SERVICE ===== */}
+      <SectionTitle icon={Server} title="ML Service" />
+      <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
+        <StatCard icon={Database} label="Model Status" value={mlModelLoaded !== null ? (mlModelLoaded === 1 ? "Loaded" : "Not Loaded") : "N/A"}
+          color={mlModelLoaded === 1 ? "text-green-600" : "text-red-600"} />
+        <GaugeCard label="Process CPU" value={procCpu !== null ? procCpu * 100 : 0} max={100} unit="%" color="#2563eb" />
+        <GaugeCard label="Process Memory" value={procMem !== null ? procMem / 1024 / 1024 : 0} max={500} unit="MiB" color="#8b5cf6" />
+        <StatCard icon={Activity} label="Open FDs" value={procFds !== null ? procFds.toFixed(0) : "N/A"} color="text-amber-600" />
+      </div>
 
-      {/* Service Distribution */}
-      <Card className="border-slate-200 shadow-sm">
-        <CardHeader className="pb-2 px-4 pt-4">
-          <CardTitle className="text-lg font-semibold text-[#214B11] flex items-center gap-2">
-            <Layers className="h-5 w-5 text-[#48A111]" />
-            Services
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="px-4 pb-4">
-          {serviceCounts.length === 0 ? (
-            <div className="text-center py-8 text-slate-400 text-sm">
-              No services discovered
-            </div>
-          ) : (
-            <ResponsiveContainer width="100%" height={200}>
-              <BarChart data={serviceCounts.map(([name, count]) => ({ name, count }))}>
-                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
-                <XAxis dataKey="name" tick={{ fontSize: 12 }} />
-                <YAxis tick={{ fontSize: 12 }} />
-                <Tooltip />
-                <Bar dataKey="count" fill="#48A111" radius={[4, 4, 0, 0]} />
-              </BarChart>
-            </ResponsiveContainer>
-          )}
-        </CardContent>
-      </Card>
+      {/* ===== NODEJS DETAIL ===== */}
+      <SectionTitle icon={Layers} title="Node.js Runtime" />
+      <div className="grid gap-3 md:grid-cols-4 lg:grid-cols-6">
+        <GaugeCard label="Heap Used" value={heapUsed !== null ? heapUsed / 1024 / 1024 : 0} max={heapTotal !== null ? heapTotal / 1024 / 1024 : 200} unit="MiB" color="#8b5cf6" />
+        <StatCard icon={Database} label="Heap Total" value={heapTotal !== null ? fmtBytes(heapTotal) : "N/A"} color="text-violet-600" />
+        <StatCard icon={Activity} label="Active Handles" value={activeHandles !== null ? activeHandles.toFixed(0) : "N/A"} color="text-sky-600" />
+        <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"
+          valueFormatter={(v) => (v / 1024 / 1024).toFixed(1) + " MiB"} />
+        <ChartCard title="Event Loop Lag" data={elLagData} color="#eab308"
+          valueFormatter={(v) => (v * 1000).toFixed(2) + " ms"} />
+      </div>
     </div>
   );
 }