код написан

frontend/src/lib/components/health/HealthMatrix.svelte

@@ -0,0 +1,79 @@
+<!-- [DEF:HealthMatrix:Component] -->
+<!-- 
+  @TIER: STANDARD
+  @PURPOSE: Visual grid/matrix representing the health status of dashboards.
+  @LAYER: UI/Component
+  @UX_STATE: Idle -> Displays the health matrix grid.
+  @UX_STATE: Loading -> Displays a skeleton or spinner.
+  @UX_STATE: Error -> Displays an error message with a retry option.
+  @UX_REATIVITY: State: $state, Derived: $derived.
+-->
+<script>
+  /** @type {{ 
+   *    pass_count: number, 
+   *    warn_count: number, 
+   *    fail_count: number, 
+   *    unknown_count: number,
+   *    loading: boolean, 
+   *    error: string | null 
+   *  }} */
+  let { 
+    pass_count = 0, 
+    warn_count = 0, 
+    fail_count = 0, 
+    unknown_count = 0,
+    loading = false, 
+    error = null 
+  } = $props();
+
+  // [REASON] We use derived state for total count to ensure consistency.
+  let total = $derived(pass_count + warn_count + fail_count + unknown_count);
+</script>
+
+<div class="health-matrix-summary mb-6">
+  {#if loading}
+    <div class="flex gap-4 animate-pulse">
+      <div class="h-24 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+      <div class="h-24 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+      <div class="h-24 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+    </div>
+  {:else if error}
+    <div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400">
+      <p class="font-medium">Failed to load health summary</p>
+      <p class="text-sm">{error}</p>
+    </div>
+  {:else}
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <div class="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg text-center">
+        <div class="text-2xl font-bold text-green-700 dark:text-green-400">🟢 {pass_count}</div>
+        <div class="text-xs text-green-600 dark:text-green-500 uppercase tracking-wider font-semibold">Pass</div>
+      </div>
+      
+      <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg text-center">
+        <div class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">🟡 {warn_count}</div>
+        <div class="text-xs text-yellow-600 dark:text-yellow-500 uppercase tracking-wider font-semibold">Warn</div>
+      </div>
+      
+      <div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-center">
+        <div class="text-2xl font-bold text-red-700 dark:text-red-400">🔴 {fail_count}</div>
+        <div class="text-xs text-red-600 dark:text-red-500 uppercase tracking-wider font-semibold">Fail</div>
+      </div>
+
+      <div class="p-4 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-center">
+        <div class="text-2xl font-bold text-gray-700 dark:text-gray-300">⚪ {unknown_count}</div>
+        <div class="text-xs text-gray-600 dark:text-gray-500 uppercase tracking-wider font-semibold">Unknown</div>
+      </div>
+    </div>
+    
+    {#if total === 0}
+      <div class="mt-4 p-8 text-center border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-xl text-gray-500 dark:text-gray-400">
+        No validation records found for this environment.
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  /* Tailwind handles most styling, custom tweaks here if needed */
+</style>
+<!-- [/DEF:HealthMatrix:Component] -->