♻️ 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/HealthDashboardView.stories.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import HealthDashboardView from './HealthDashboardView.vue'
+
+interface ViewArgs {
+  data: {
+    status: string
+    version: string
+    uptime_seconds: number
+    timestamp: string
+  } | null
+  pending: boolean
+  error: { message: string } | null
+}
+
+const meta = {
+  title: 'Components/HealthDashboardView',
+  component: HealthDashboardView,
+  tags: ['autodocs'],
+  argTypes: {
+    pending: { control: 'boolean' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Pure presentational component for the health dashboard. ' +
+          'Accepts `data`, `pending`, `error` as props so all 3 states can be ' +
+          'previewed in Storybook and asserted in unit tests. The data fetching ' +
+          'wrapper is `HealthDashboard.vue`.',
+      },
+    },
+  },
+} satisfies Meta<ViewArgs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Healthy: Story = {
+  args: {
+    data: {
+      status: 'healthy',
+      version: '1.4.0',
+      uptime_seconds: 3600,
+      timestamp: '2026-05-03T17:30:00.000Z',
+    },
+    pending: false,
+    error: null,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    data: null,
+    pending: true,
+    error: null,
+  },
+}
+
+export const ErrorState: Story = {
+  args: {
+    data: null,
+    pending: false,
+    error: { message: '[GET] "/api/healthz": 502 Bad Gateway (simulated)' },
+  },
+}
+
+export const HealthyHighUptime: Story = {
+  args: {
+    data: {
+      status: 'healthy',
+      version: '1.5.0-rc1',
+      uptime_seconds: 86400 * 7,
+      timestamp: new Date().toISOString(),
+    },
+    pending: false,
+    error: null,
+  },
+}