Scaffolding baseline

webui/src/App.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { fetchHealth } from './api/client'
+import './App.css'
+
+function App() {
+  const [healthStatus, setHealthStatus] = useState<string | null>(null)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  async function handleCheckHealth() {
+    setIsLoading(true)
+    setErrorMessage(null)
+    setHealthStatus(null)
+
+    try {
+      const health = await fetchHealth()
+      setHealthStatus(health.status)
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'unknown health check error'
+      setErrorMessage(message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <main className="app">
+      <h1>ClusterCanvas</h1>
+      <p>Dashboard for Proxmox VMs and LXC containers.</p>
+      <button type="button" onClick={handleCheckHealth} disabled={isLoading}>
+        {isLoading ? 'Checking…' : 'Check service health'}
+      </button>
+      {healthStatus ? (
+        <p role="status">Service health: {healthStatus}</p>
+      ) : null}
+      {errorMessage ? (
+        <p role="alert">Health check failed: {errorMessage}</p>
+      ) : null}
+    </main>
+  )
+}
+
+export default App