♻️ refactor(frontend): split HealthDashboard into smart wrapper + dumb View for state-based stories (#33)

SRP split: HealthDashboardView (presentational, props-based) + HealthDashboard (smart wrapper, useFetch). Enables 4 Storybook stories per state + unit testability per branch. Existing testids preserved, Playwright tests still pass.

Co-authored-by: Gabriel Radureau <arcodange@gmail.com>
Co-committed-by: Gabriel Radureau <arcodange@gmail.com>

frontend/components/HealthDashboard.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
-interface HealthInfo {
-  status: string
-  version: string
-  uptime_seconds: number
-  timestamp: string
-}
+import HealthDashboardView, { type HealthInfo } from './HealthDashboardView.vue'
+
+// Wrapper: handles data fetching, delegates rendering to HealthDashboardView.
+// Separation of concerns (SRP):
+//   - HealthDashboard (this) = data layer (useFetch lifecycle)
+//   - HealthDashboardView    = presentation layer (testable in Storybook + e2e)
 const { data, pending, error } = await useFetch<HealthInfo>('/api/healthz')
 </script>
+
 <template>
-  <section data-testid="health-dashboard">
-    <h2>Server Health</h2>
-    <p v-if="pending">Loading...</p>
-    <p v-else-if="error">Error loading health: {{ error.message }}</p>
-    <ul v-else-if="data" data-testid="health-info">
-      <li><strong>Status:</strong> <span data-testid="health-status">{{ data.status }}</span></li>
-      <li><strong>Version:</strong> {{ data.version }}</li>
-      <li><strong>Uptime:</strong> {{ data.uptime_seconds }} seconds</li>
-      <li><strong>Last check:</strong> {{ data.timestamp }}</li>
-    </ul>
-  </section>
+  <HealthDashboardView :data="data" :pending="pending" :error="error" />
 </template>