✨ feat: improve Kubernetes resource monitoring

apps/web/components/k8s/k8s-phase-badge.tsx

@@ -0,0 +1,17 @@
+import { StatusBadge, type StatusTone } from "@/components/status-badge";
+
+const phaseTones: Record<string, StatusTone> = {
+  Running: "success",
+  Succeeded: "success",
+  Failed: "error",
+  Pending: "warning",
+  Unknown: "neutral",
+};
+
+export function K8sPhaseBadge({ phase }: { phase?: string }) {
+  if (!phase) {
+    return <StatusBadge>Unknown</StatusBadge>;
+  }
+
+  return <StatusBadge tone={phaseTones[phase] ?? "neutral"}>{phase}</StatusBadge>;
+}

apps/web/components/k8s/k8s-resource-table-card.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { DataTable, type DataTableColumn } from "@/components/data-table";
+import { SectionCard } from "@/components/section-card";
+
+export type K8sResourceColumn<T> = {
+  header: string;
+  render: (resource: T) => ReactNode;
+  className?: string;
+};
+
+type K8sResourceTableCardProps<T extends { name?: string }> = {
+  title: string;
+  description: string;
+  emptyMessage: string;
+  resources: readonly T[];
+  columns: readonly K8sResourceColumn<T>[];
+};
+
+export function K8sResourceTableCard<T extends { name?: string }>({
+  title,
+  description,
+  emptyMessage,
+  resources,
+  columns,
+}: K8sResourceTableCardProps<T>) {
+  const tableColumns: readonly DataTableColumn<T>[] = columns.map((column) => ({
+    id: column.header,
+    header: column.header,
+    cell: column.render,
+    className: column.className,
+  }));
+
+  return (
+    <SectionCard title={title} description={description}>
+      {resources.length === 0 ? (
+        <div className="border border-dashed bg-muted/25 px-4 py-12 text-center text-sm text-muted-foreground">
+          {emptyMessage}
+        </div>
+      ) : (
+        <DataTable
+          data={resources}
+          columns={tableColumns}
+          getRowKey={(resource, index) => resource.name ?? index}
+        />
+      )}
+    </SectionCard>
+  );
+}