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

User feedback (PR #32 commit, T13 follow-up): HealthDashboard.stories.ts could not
demonstrate Loading or Error states because the component used useFetch internally
and didn't accept props. Same limitation made unit-testing the rendering branches
impossible without mocking the Nuxt fetch layer.

Split into 2 files (SRP / DDD modular per code-reviewer skill):

- HealthDashboardView.vue (NEW): pure presentational, accepts data/pending/error
  as props. Adds explicit data-testid="health-loading" + "health-error" so e2e and
  unit tests can target each branch.
- HealthDashboard.vue (REFACTORED): now a thin smart wrapper that calls
  useFetch('/api/healthz') and forwards data/pending/error to HealthDashboardView.

Stories:
- HealthDashboardView.stories.ts (NEW): 4 stories — Healthy, Loading, ErrorState,
  HealthyHighUptime. Reviewers can now see all branches without running the backend.
- HealthDashboard.stories.ts: still has the Default story for the wrapper (smoke).

Tooling:
- shims-vue.d.ts: Vue file module declaration with permissive any-typing for the
  DefineComponent. Required because Vue 3 strict TS + Storybook propagates prop
  types poorly through .vue imports otherwise (false-positive TS2353 errors).

Backwards compatibility:
- pages/index.vue still imports <HealthDashboard /> (unchanged).
- All existing data-testid attributes preserved (health-dashboard, health-info,
  health-status). The new health-loading and health-error testids are additive.
- The Playwright tests from PR #32 continue to pass without modification.

🤖 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.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>