feat: visualize components as boxes

package.json

@@ -73,6 +73,7 @@
     "@eslint/js": "9.37.0",
     "@graphql-codegen/cli": "6.0.0",
     "@graphql-codegen/client-preset": "5.1.0",
+    "@testing-library/react": "16.3.0",
     "@types/dagre": "0.7.53",
     "@types/js-yaml": "4.0.9",
     "@types/node": "22.18.8",
@@ -93,6 +94,7 @@
     "eslint-plugin-react-hooks": "5.2.0",
     "fastify-tsconfig": "3.0.0",
     "globals": "16.4.0",
+    "jsdom": "27.0.0",
     "prettier": "3.6.2",
     "tsx": "4.20.6",
     "typescript": "5.9.3",

public/locales/en.json

@@ -16,6 +16,33 @@
     "tableComponentHeader": "Name",
     "tableVersionHeader": "Version"
   },
+  "ComponentCard": {
+    "notInstalledLabel": "not installed",
+    "installButton": "Install {{component}}"
+  },
+  "componentCardCrossplane": {
+    "description": "Compose cloud infrastructure",
+    "progress": "Healthy",
+    "progressCount": "Healthy: {{count}} of {{total}} resources"
+  },
+  "componentCardFlux": {
+    "description": "GitOps for Kubernetes automating continuous sync and delivery",
+    "progress": "Managed",
+    "progressCount": "Managed: {{count}} of {{total}} resources"
+  },
+  "componentCardLandscaper": {
+    "description": "Automate cross‑dependent Kubernetes deployments"
+  },
+  "componentCardKyverno": {
+    "description": "Kubernetes-native policy as code for secure and compliant infrastructure"
+  },
+  "componentCardEso": {
+    "description": "Manage and sync credentials from your secret store"
+  },
+  "Kpi": {
+    "installed": "Installed",
+    "error": "There was a problem loading this data. Please try again later."
+  },
   "FluxList": {
     "tableNameHeader": "Name",
     "tableStatusHeader": "Status",
@@ -424,7 +451,7 @@
       "hoverContent": {
         "totalResources": "Total Resources",
         "healthy": "Healthy",
-        "creating": "Creating", 
+        "creating": "Creating",
         "failing": "Failing"
       }
     },