feat: load plugin frontends at runtime and remove plugin ids from the shell

plugins/host-metrics/src/frontend/proxmox-stats/cards/StoragePoolsCard.tsx

@@ -0,0 +1,60 @@
+import { Database } from "lucide-react";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import type { ProxmoxStatsSnapshot } from "@/types/proxmox";
+import { MetricCard } from "@/components/metric-card";
+
+export function StoragePoolsCard({
+  snapshot,
+}: {
+  snapshot: ProxmoxStatsSnapshot | null;
+}) {
+  const { t } = useTranslation();
+  const pools = snapshot?.storage.pools ?? [];
+
+  return (
+    <MetricCard
+      title={t("proxmoxStats.storagePools")}
+      icon={<Database className="size-3.5" />}
+      scroll
+    >
+      {pools.length === 0 ? (
+        <span className="text-xs text-muted-foreground">N/A</span>
+      ) : (
+        <div className="flex flex-col divide-y divide-border">
+          {pools.map((pool) => (
+            <div key={pool.name} className="flex flex-col gap-1 py-2 text-xs">
+              <div className="flex items-center gap-2">
+                <span className="min-w-0 flex-1 truncate font-medium">
+                  {pool.name}
+                </span>
+                <span className="shrink-0 rounded-full border border-border px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground">
+                  {pool.type}
+                </span>
+                {!pool.active && (
+                  <span className="shrink-0 text-[10px] text-muted-foreground">
+                    {t("proxmoxStats.inactive")}
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full bg-accent-brand"
+                    style={{
+                      width: `${Math.min(100, Math.max(0, pool.percent ?? 0))}%`,
+                    }}
+                  />
+                </div>
+                <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+                  {pool.usedGiB !== null && pool.totalGiB !== null
+                    ? `${pool.usedGiB.toFixed(1)} / ${pool.totalGiB.toFixed(1)} GiB`
+                    : "N/A"}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </MetricCard>
+  );
+}