WP-00: project skeleton with three-level test harness

Cargo workspace (domain, application, infrastructure, api), axum health endpoint
with SPA fallback, Vue 3 + Tailwind frontend, Vitest, Playwright, Makefile,
Gitea Actions CI and README.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/App.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <RouterView />
+</template>

frontend/src/components/StatusBadge.test.ts

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils'
+import StatusBadge from './StatusBadge.vue'
+
+describe('StatusBadge', () => {
+  it('renders the label and an ok style', () => {
+    const w = mount(StatusBadge, { props: { status: 'ok', label: 'Backend' } })
+    expect(w.text()).toContain('Backend')
+    expect(w.classes().join(' ')).toContain('green')
+  })
+  it('renders an error style', () => {
+    const w = mount(StatusBadge, { props: { status: 'error', label: 'Backend' } })
+    expect(w.classes().join(' ')).toContain('red')
+  })
+})

frontend/src/components/StatusBadge.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{ status: 'ok' | 'error' | 'unknown'; label: string }>()
+const styles = {
+  ok: 'bg-green-100 text-green-800',
+  error: 'bg-red-100 text-red-800',
+  unknown: 'bg-gray-100 text-gray-700',
+}
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
+    :class="styles[status]"
+  >
+    {{ label }}
+  </span>
+</template>

frontend/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import { router } from './router'
+import './style.css'
+
+createApp(App).use(createPinia()).use(router).mount('#app')

frontend/src/pages/HealthPage.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import StatusBadge from '../components/StatusBadge.vue'
+
+const status = ref<'ok' | 'error' | 'unknown'>('unknown')
+onMounted(async () => {
+  try {
+    const res = await fetch('/healthz')
+    status.value = res.ok ? 'ok' : 'error'
+  } catch {
+    status.value = 'error'
+  }
+})
+</script>
+
+<template>
+  <main class="mx-auto max-w-2xl p-8">
+    <h1 class="text-2xl font-semibold">SoftVisor Monitoring</h1>
+    <p class="mt-4 text-gray-600">
+      Backend:
+      <span data-testid="backend-status"><StatusBadge :status="status" :label="status" /></span>
+    </p>
+  </main>
+</template>

frontend/src/router.ts

@@ -0,0 +1,7 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HealthPage from './pages/HealthPage.vue'
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', component: HealthPage }],
+})

frontend/src/style.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />