feat: ship host metrics as a first-party in-process plugin

plugins/host-metrics/frontend/cards/ProcessesCard.tsx

@@ -0,0 +1,54 @@
+import { Cpu } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { ServerMetrics } from "@/main-axios";
+import { StatRow } from "@/components/charts";
+import { MetricCard } from "@/components/metric-card";
+
+export function ProcessesCard({ metrics }: { metrics: ServerMetrics | null }) {
+  const { t } = useTranslation();
+  const procs = metrics?.processes;
+  const top = procs?.top ?? [];
+
+  return (
+    <MetricCard
+      title={t("hostMetrics.processes")}
+      icon={<Cpu className="size-3.5" />}
+      scroll
+    >
+      <div className="mb-2 flex items-center gap-4 text-xs">
+        {procs?.total != null && (
+          <span>
+            <span className="font-bold text-foreground">{procs.total}</span>{" "}
+            <span className="text-muted-foreground">
+              {t("hostMetrics.processesTotal")}
+            </span>
+          </span>
+        )}
+        {procs?.running != null && (
+          <span>
+            <span className="font-bold text-accent-brand">{procs.running}</span>{" "}
+            <span className="text-muted-foreground">
+              {t("hostMetrics.processesRunning")}
+            </span>
+          </span>
+        )}
+      </div>
+      {top.length === 0 ? (
+        <span className="text-xs text-muted-foreground">
+          {t("hostMetrics.noProcessesFound")}
+        </span>
+      ) : (
+        <div className="flex flex-col divide-y divide-border">
+          {top.slice(0, 10).map((p) => (
+            <StatRow
+              key={p.pid}
+              label={p.command}
+              value={`${p.cpu}% cpu · ${p.mem}% mem`}
+              mono
+            />
+          ))}
+        </div>
+      )}
+    </MetricCard>
+  );
+}