refactor(web): replace custom telemetry API with direct Prometheus queries

Rewrite the telemetry page logic to bypass the custom proxy API in
favor of direct Prometheus queries.

- Implement `queryRange` and `queryInstant` helpers for Prometheus API
- Replace `TelemetryAPI` client with direct fetch calls to Prometheus
- Update data fetching logic to use standard Prometheus query parameters
- Simplify state management and data transformation for charts

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

@@ -1,141 +1,64 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
-  BarChart3,
+  BarChart3, Activity, Cpu, HardDrive, Database,
-  Activity,
+  RefreshCw, Server,
-  Cpu,
-  HardDrive,
-  Database,
-  Layers,
-  RefreshCw,
-  AlertTriangle,
 } from "lucide-react";
 import {
-  AreaChart,
+  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
   ResponsiveContainer,
-  BarChart,
-  Bar,
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-// ─── Types ──────────────────────────────────────────────────────────
+// ─── Prometheus API ─────────────────────────────────────────────────
-const API_BASE = "https://telemetry.imrnes.team/proxy/dashboard";
+const PROM = "https://telemetry.imrnes.team/prometheus/api/v1";
+const INSTANCE = '100.96.248.86:9100';
 
-interface DashboardStats {
+interface PromValue {
-  cpu_usage: number;
+  time: 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 {
-  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 ──────────────────────────────────────────────────────
+function shortMetric(name: string): string {
-class TelemetryAPI {
+  return name.replace(/^zeavis_api_/, "").replace(/^zeavis_ml_/, "");
-  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;
-  }
 }
 
-const api = new TelemetryAPI(API_BASE);
+// ─── StatCard ────────────────────────────────────────────────────────
-
+function StatCard({ icon: Icon, label, value, sub, color }: {
-// ─── Stat Card ───────────────────────────────────────────────────────
+  icon: typeof BarChart3; label: string; value: string; sub?: string; color: string;
-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">
+        <CardTitle className="text-sm font-medium text-slate-500">{label}</CardTitle>
-          {label}
-        </CardTitle>
         <Icon className={`h-4 w-4 ${color}`} />
       </CardHeader>
       <CardContent className="px-4 pb-4">
@@ -146,33 +69,10 @@ function StatCard({
   );
 }
 
-// ─── Metric Card ─────────────────────────────────────────────────────
+// ─── Chart ──────────────────────────────────────────────────────────
-function MetricChart({
+function ChartCard({ title, data, color }: {
-  title,
+  title: string; data: PromValue[]; color: string;
-  data,
-  loading,
-  color,
-}: {
-  title: string;
-  data: ChartPoint[];
-  loading: boolean;
-  color: 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">
@@ -180,50 +80,38 @@ function MetricChart({
           <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">
+          <div className="flex items-center justify-center h-36 text-slate-400 text-sm">No data</div>
-            No data available
-          </div>
         </CardContent>
       </Card>
     );
   }
-
   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">
-        <ResponsiveContainer width="100%" height={160}>
+        <ResponsiveContainer width="100%" height={140}>
           <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
+            <XAxis dataKey="time" tick={{ fontSize: 10 }}
-              dataKey="time"
+              tickFormatter={(v) => new Date(v).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
-              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 }} />
+            <YAxis domain={[0, 100]} tick={{ fontSize: 10 }} unit="%" />
             <Tooltip
               labelFormatter={(v) => new Date(v).toLocaleTimeString()}
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              formatter={(val: unknown) => [
-              formatter={(val: any) => [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(#grad-${title})`}
-              strokeWidth={2}
             />
+            <Area type="monotone" dataKey="value" stroke={color}
+              fill={`url(#g-${title.replace(/\s/g, "")})`} strokeWidth={2} />
           </AreaChart>
         </ResponsiveContainer>
       </CardContent>
@@ -233,74 +121,54 @@ function MetricChart({
 
 // ─── Main Page ───────────────────────────────────────────────────────
 export function TelemetryPage() {
-  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [cpuData, setCpuData] = useState<PromValue[]>([]);
-  const [metrics, setMetrics] = useState<DiscoveredMetric[]>([]);
+  const [memData, setMemData] = useState<PromValue[]>([]);
-  const [chartMap, setChartMap] = useState<Map<string, ChartPoint[]>>(new Map());
+  const [diskData, setDiskData] = useState<PromValue[]>([]);
-  const [memChartData, setMemChartData] = useState<ChartPoint[] | null>(null);
+  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 [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);
+      if (isRefresh) setRefreshing(true); else setLoading(true);
-      else setLoading(true);
       setError(null);
 
-      const [statsData, discoverData] = await Promise.all([
+      // Run all queries in parallel
-        api.stats(),
+      const [cpu, mem, disk, cpuNowVal, memNowVal, diskNowVal, upData] = await Promise.all([
-        api.discover(),
+        queryRange(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INSTANCE}"}[5m])) * 100)`, 60),
+        queryRange(`(1 - node_memory_MemAvailable_bytes{instance="${INSTANCE}"} / node_memory_MemTotal_bytes{instance="${INSTANCE}"}) * 100`, 60),
+        queryRange(`(1 - node_filesystem_avail_bytes{instance="${INSTANCE}",mountpoint="/"} / node_filesystem_size_bytes{instance="${INSTANCE}",mountpoint="/"}) * 100`, 60),
+        queryInstant(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INSTANCE}"}[5m])) * 100)`),
+        queryInstant(`(1 - node_memory_MemAvailable_bytes{instance="${INSTANCE}"} / node_memory_MemTotal_bytes{instance="${INSTANCE}"}) * 100`),
+        queryInstant(`(1 - node_filesystem_avail_bytes{instance="${INSTANCE}",mountpoint="/"} / node_filesystem_size_bytes{instance="${INSTANCE}",mountpoint="/"}) * 100`),
+        // ZeaVis app metrics
+        (async () => {
+          const names = [
+            "zeavis_api_http_requests_total",
+            "zeavis_api_http_requests_active",
+            "zeavis_ml_zeavis_ml_model_load_status",
+          ];
+          const results: { name: string; value: string }[] = [];
+          for (const n of names) {
+            const val = await queryInstant(n);
+            if (val !== null) results.push({ name: n, value: val.toFixed(2) });
+          }
+          return results;
+        })(),
       ]);
 
-      setStats(statsData);
+      setCpuData(cpu);
-      setMetrics(discoverData);
+      setMemData(mem);
-
+      setDiskData(disk);
-      // Fetch charts for top metrics (excluding prometheus noise)
+      setCpuNow(cpuNowVal);
-      const topMetrics = discoverData
+      setMemNow(memNowVal);
-        .filter((m) => !m.metric_name.startsWith("prometheus_") && m.service !== "prometheus")
+      setDiskNow(diskNowVal);
-        .slice(0, 4);
+      setZeavisMetrics(upData);
-
-      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);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Unknown error");
     } finally {
@@ -310,56 +178,18 @@ export function TelemetryPage() {
   }, []);
 
   useEffect(() => {
-    fetchData();
+    fetchAll();
-    intervalRef.current = window.setInterval(() => fetchData(true), 30_000);
+    intRef.current = window.setInterval(() => fetchAll(true), 30_000);
-    return () => {
+    return () => clearInterval(intRef.current);
-      if (intervalRef.current) clearInterval(intervalRef.current);
+  }, [fetchAll]);
-    };
-  }, [fetchData]);
 
-  const serviceCounts = useMemo(() => {
+  if (loading && cpuData.length === 0 && memData.length === 0) {
-    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) {
     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">
+            <p className="text-sm text-muted-foreground">Loading telemetry data...</p>
-              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>
       </div>
@@ -376,195 +206,64 @@ export function TelemetryPage() {
             Telemetry Dashboard
           </h1>
           <p className="text-sm text-muted-foreground mt-1">
-            System metrics from Prometheus pipeline via ClickHouse.
+            Metrics from Prometheus — orange VPS ({INSTANCE})
-            {error && (
+            {error && <span className="text-amber-600 ml-2">({error})</span>}
-              <span className="text-amber-600 ml-2">
-                (partial data — {error})
-              </span>
-            )}
           </p>
         </div>
-        <button
+        <button onClick={() => fetchAll(true)} disabled={refreshing}
-          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
+          <RefreshCw className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`} /> Refresh
-            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">
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <StatCard icon={Cpu} label="CPU Usage" value={cpuNow !== null ? fmtPct(cpuNow) : "N/A"} color="text-blue-600" />
-          <StatCard
+        <StatCard icon={Database} label="Memory Usage" value={memNow !== null ? fmtPct(memNow) : "N/A"} color="text-violet-600" />
-            icon={Cpu}
+        <StatCard icon={HardDrive} label="Disk Usage" value={diskNow !== null ? fmtPct(diskNow) : "N/A"} color="text-amber-600" />
-            label="CPU Usage"
+        <StatCard icon={Activity} label="Status" value={error ? "Degraded" : "Healthy"} sub="via Prometheus API" color={error ? "text-red-600" : "text-green-600"} />
-            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"
-        />
       </div>
 
-      {/* Application Metrics */}
+      {/* System Charts */}
-      {(chartMap.has("zeavis_api_http_requests_total") || chartMap.has("zeavis_api_http_requests_active")) && (
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <ChartCard title="CPU Usage (last hour)" data={cpuData} color="#2563eb" />
+        <ChartCard title="Memory Usage (last hour)" data={memData} color="#8b5cf6" />
+        <ChartCard title="Disk Usage (last hour)" data={diskData} color="#f59e0b" />
+      </div>
+
+      {/* ZeaVis Application Metrics */}
+      {zeavisMetrics.length > 0 && (
         <section className="space-y-4">
-          <h3 className="text-lg font-semibold text-[#214B11]">Application Metrics</h3>
+          <h3 className="text-lg font-semibold text-[#214B11] flex items-center gap-2">
-          <div className="grid gap-4 md:grid-cols-1 lg:grid-cols-2">
+            <Server className="h-5 w-5 text-[#48A111]" /> ZeaVis Application Metrics
-            {chartMap.has("zeavis_api_http_requests_total") && (
+          </h3>
-              <MetricChart
+          <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
-                title="HTTP Requests Total (API)"
+            {zeavisMetrics.map((m) => (
-                data={chartMap.get("zeavis_api_http_requests_total") ?? []}
+              <Card key={m.name} className="border-slate-200 shadow-sm">
-                loading={loading}
+                <CardHeader className="pb-2 px-4 pt-3">
-                color="#ec4899"
+                  <CardTitle className="text-xs font-medium text-slate-500 uppercase tracking-wider">
-              />
+                    {shortMetric(m.name)}
-            )}
+                  </CardTitle>
-            {chartMap.has("zeavis_api_http_requests_active") && (
+                </CardHeader>
-              <MetricChart
+                <CardContent className="px-4 pb-3">
-                title="Active HTTP Requests (API)"
+                  <div className="text-2xl font-bold text-[#306D29]">{m.value}</div>
-                data={chartMap.get("zeavis_api_http_requests_active") ?? []}
+                  <p className="text-[10px] text-slate-400 mt-0.5 font-mono">{m.name}</p>
-                loading={loading}
+                </CardContent>
-                color="#14b8a6"
+              </Card>
-              />
+            ))}
-            )}
           </div>
         </section>
       )}
 
-      {/* Top Metrics */}
+      {/* Raw metric names in Prometheus */}
-      <Card className="border-slate-200 shadow-sm">
+      {zeavisMetrics.length === 0 && (
-        <CardHeader className="pb-2 px-4 pt-4">
+        <Card className="border-slate-200 shadow-sm bg-slate-50">
-          <CardTitle className="text-lg font-semibold text-[#214B11] flex items-center gap-2">
+          <CardContent className="px-4 py-6 text-center text-sm text-slate-400">
-            <Layers className="h-5 w-5 text-[#48A111]" />
+            No application metrics available. Prometheus results shown above.
-            Top Metrics
+          </CardContent>
-          </CardTitle>
+        </Card>
-        </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>
-
-      {/* 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>
     </div>
   );
 }