Add dashboard shell with sidebar nav and version header.

Replace the health-check stub UI with a left menu and content panel so section navigation and frontend/backend versions are visible in the shell.

webui/src/App.css

@@ -1,47 +1,124 @@
-.app {
+.app-shell {
-  max-width: 40rem;
+  display: flex;
-  margin: 4rem auto;
+  min-height: 100vh;
-  padding: 0 1.5rem;
-  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
   color: #12263a;
+  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
 }
 
-.app h1 {
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  flex-shrink: 0;
+  background: #f7fafc;
+  border-right: 1px solid #c5d4e0;
+}
+
+.sidebar-header {
+  padding: 1.25rem 1.25rem 1rem;
+  border-bottom: 1px solid #c5d4e0;
+}
+
+.brand {
+  margin: 0 0 0.65rem;
+  font-size: 1.35rem;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.version-line {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: #3a5166;
+}
+
+.version-line + .version-line {
+  margin-top: 0.15rem;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.25rem;
+  padding: 0.75rem 0.75rem;
+  overflow-y: auto;
+}
+
+.sidebar-footer {
+  padding: 0.75rem;
+  border-top: 1px solid #c5d4e0;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  appearance: none;
+  border: none;
+  border-radius: 0.35rem;
+  background: transparent;
+  color: inherit;
+  padding: 0.6rem 0.75rem;
+  font: inherit;
+  font-size: 0.95rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.nav-item:hover {
+  background: #e4eef5;
+}
+
+.nav-item-active {
+  background: #d7e7f2;
+  font-weight: 600;
+}
+
+.config-item {
+  font-weight: 500;
+}
+
+.cog-icon {
+  flex-shrink: 0;
+}
+
+.content {
+  flex: 1;
+  padding: 2rem 2.5rem;
+  min-width: 0;
+}
+
+.content h2 {
   margin: 0 0 0.5rem;
-  font-size: 2.5rem;
+  font-size: 1.75rem;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.02em;
 }
 
-.app p {
+.content p {
-  margin: 0 0 1.5rem;
+  margin: 0;
   line-height: 1.5;
   color: #3a5166;
 }
 
-.app button {
+@media (max-width: 640px) {
-  appearance: none;
+  .app-shell {
-  border: 1px solid #1f4b6e;
+    flex-direction: column;
-  background: #1f4b6e;
-  color: #f7fafc;
-  padding: 0.65rem 1rem;
-  font: inherit;
-  cursor: pointer;
   }
 
-.app button:disabled {
+  .sidebar {
-  opacity: 0.7;
+    width: 100%;
-  cursor: wait;
+    min-height: auto;
   }
 
-.app button:not(:disabled):hover {
+  .sidebar-nav {
-  background: #16384f;
+    flex: 0 0 auto;
   }
 
-.app [role='status'],
+  .content {
-.app [role='alert'] {
+    padding: 1.5rem;
-  margin-top: 1.25rem;
   }
-
-.app [role='alert'] {
-  color: #8a1c1c;
 }

webui/src/App.test.tsx

@@ -1,16 +1,88 @@
 import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import App from './App'
 
 describe('App', () => {
-  it('renders the ClusterCanvas shell', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+  })
+
+  it('renders the dashboard shell with brand and nav', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          service: 'clustercanvas',
+          version: '0.1.0',
+        }),
+      }),
+    )
+
     render(<App />)
 
     expect(
       screen.getByRole('heading', { name: 'Cluster Canvas' }),
     ).toBeInTheDocument()
+    expect(screen.getByText(`Frontend Version ${__FRONTEND_VERSION__}`)).toBeInTheDocument()
+    expect(await screen.findByText('Backend Version 0.1.0')).toBeInTheDocument()
+
+    expect(screen.getByRole('button', { name: 'Overview' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'VMs' })).toBeInTheDocument()
     expect(
-      screen.getByRole('button', { name: 'Check service health' }),
+      screen.getByRole('button', { name: 'Containers' }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Configuration' }),
+    ).toBeInTheDocument()
+
+    expect(
+      screen.getByRole('heading', { name: 'Overview', level: 2 }),
+    ).toBeInTheDocument()
+    expect(screen.getByText('Coming soon')).toBeInTheDocument()
+  })
+
+  it('switches the content panel when a nav item is selected', async () => {
+    const user = userEvent.setup()
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          service: 'clustercanvas',
+          version: '0.1.0',
+        }),
+      }),
+    )
+
+    render(<App />)
+
+    await user.click(screen.getByRole('button', { name: 'VMs' }))
+    expect(
+      screen.getByRole('heading', { name: 'VMs', level: 2 }),
+    ).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Configuration' }))
+    expect(
+      screen.getByRole('heading', { name: 'Configuration', level: 2 }),
+    ).toBeInTheDocument()
+  })
+
+  it('shows unavailable when backend status fetch fails', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue({
+        ok: false,
+        status: 503,
+      }),
+    )
+
+    render(<App />)
+
+    expect(
+      await screen.findByText('Backend Version unavailable'),
     ).toBeInTheDocument()
   })
 })

webui/src/App.tsx

@@ -1,43 +1,118 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
-import { fetchHealth } from './api/client'
+import { fetchStatus } from './api/client'
 import './App.css'
 
+type SectionId = 'overview' | 'vms' | 'containers' | 'configuration'
+
+const NAV_ITEMS: ReadonlyArray<{ id: SectionId; label: string }> = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'vms', label: 'VMs' },
+  { id: 'containers', label: 'Containers' },
+]
+
+const SECTION_TITLES: Record<SectionId, string> = {
+  overview: 'Overview',
+  vms: 'VMs',
+  containers: 'Containers',
+  configuration: 'Configuration',
+}
+
+function CogIcon() {
+  return (
+    <svg
+      className="cog-icon"
+      viewBox="0 0 24 24"
+      width="18"
+      height="18"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path
+        fill="currentColor"
+        d="M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7.2 7.2 0 0 0-1.62-.94l-.36-2.54A.48.48 0 0 0 13.9 2h-3.8a.48.48 0 0 0-.48.42l-.36 2.54c-.59.24-1.13.55-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.48a.49.49 0 0 0 .12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94L2.86 14.52a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.3.59.22l2.39-.96c.49.39 1.03.7 1.62.94l.36 2.54c.05.24.24.42.48.42h3.8c.24 0 .43-.18.48-.42l.36-2.54c.59-.24 1.13-.55 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61l-2.03-1.58ZM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7Z"
+      />
+    </svg>
+  )
+}
+
 function App() {
-  const [healthStatus, setHealthStatus] = useState<string | null>(null)
+  const [activeSection, setActiveSection] = useState<SectionId>('overview')
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [backendVersion, setBackendVersion] = useState('…')
-  const [isLoading, setIsLoading] = useState(false)
 
-  async function handleCheckHealth() {
+  useEffect(() => {
-    setIsLoading(true)
+    let isCancelled = false
-    setErrorMessage(null)
-    setHealthStatus(null)
 
+    async function loadBackendVersion() {
       try {
-      const health = await fetchHealth()
+        const status = await fetchStatus()
-      setHealthStatus(health.status)
+        if (!isCancelled) {
-    } catch (error) {
+          setBackendVersion(status.version)
-      const message =
+        }
-        error instanceof Error ? error.message : 'unknown health check error'
+      } catch {
-      setErrorMessage(message)
+        if (!isCancelled) {
-    } finally {
+          setBackendVersion('unavailable')
-      setIsLoading(false)
         }
       }
+    }
+
+    void loadBackendVersion()
+
+    return () => {
+      isCancelled = true
+    }
+  }, [])
 
   return (
-    <main className="app">
+    <div className="app-shell">
-      <h1>ClusterCanvas</h1>
+      <aside className="sidebar" aria-label="Main menu">
-      <p>Dashboard for Proxmox VMs and LXC containers.</p>
+        <div className="sidebar-header">
-      <button type="button" onClick={handleCheckHealth} disabled={isLoading}>
+          <h1 className="brand">Cluster Canvas</h1>
-        {isLoading ? 'Checking…' : 'Check service health'}
+          <p className="version-line">Frontend Version {__FRONTEND_VERSION__}</p>
+          <p className="version-line">Backend Version {backendVersion}</p>
+        </div>
+
+        <nav className="sidebar-nav" aria-label="Sections">
+          {NAV_ITEMS.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              className={
+                activeSection === item.id
+                  ? 'nav-item nav-item-active'
+                  : 'nav-item'
+              }
+              aria-current={activeSection === item.id ? 'page' : undefined}
+              onClick={() => setActiveSection(item.id)}
+            >
+              {item.label}
             </button>
-      {healthStatus ? (
+          ))}
-        <p role="status">Service health: {healthStatus}</p>
+        </nav>
-      ) : null}
+
-      {errorMessage ? (
+        <div className="sidebar-footer">
-        <p role="alert">Health check failed: {errorMessage}</p>
+          <button
-      ) : null}
+            type="button"
+            className={
+              activeSection === 'configuration'
+                ? 'nav-item nav-item-active config-item'
+                : 'nav-item config-item'
+            }
+            aria-current={
+              activeSection === 'configuration' ? 'page' : undefined
+            }
+            onClick={() => setActiveSection('configuration')}
+          >
+            <CogIcon />
+            Configuration
+          </button>
+        </div>
+      </aside>
+
+      <main className="content" aria-label={SECTION_TITLES[activeSection]}>
+        <h2>{SECTION_TITLES[activeSection]}</h2>
+        <p>Coming soon</p>
       </main>
+    </div>
   )
 }
 

webui/src/api/client.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { fetchHealth, getApiBaseUrl } from './client'
+import { fetchHealth, fetchStatus, getApiBaseUrl } from './client'
 
 describe('getApiBaseUrl', () => {
   it('defaults to localhost:8080 when unset', () => {
@@ -36,3 +36,35 @@ describe('fetchHealth', () => {
     )
   })
 })
+
+describe('fetchStatus', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('returns parsed status payload', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ service: 'clustercanvas', version: '0.1.0' }),
+    })
+
+    const status = await fetchStatus(fetchMock)
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      'http://localhost:8080/api/v1/status',
+    )
+    expect(status).toEqual({ service: 'clustercanvas', version: '0.1.0' })
+  })
+
+  it('throws when the response is not ok', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 503,
+      json: async () => ({}),
+    })
+
+    await expect(fetchStatus(fetchMock)).rejects.toThrow(
+      'status check failed: 503',
+    )
+  })
+})

webui/src/api/client.ts

@@ -2,6 +2,11 @@ export type HealthResponse = {
   status: string
 }
 
+export type StatusResponse = {
+  service: string
+  version: string
+}
+
 export function getApiBaseUrl(): string {
   return import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8080'
 }
@@ -15,3 +20,13 @@ export async function fetchHealth(
   }
   return (await response.json()) as HealthResponse
 }
+
+export async function fetchStatus(
+  fetchImpl: typeof fetch = fetch,
+): Promise<StatusResponse> {
+  const response = await fetchImpl(`${getApiBaseUrl()}/api/v1/status`)
+  if (!response.ok) {
+    throw new Error(`status check failed: ${response.status}`)
+  }
+  return (await response.json()) as StatusResponse
+}

webui/src/vite-env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="vite/client" />
 
+declare const __FRONTEND_VERSION__: string
+
 interface ImportMetaEnv {
   readonly VITE_API_BASE_URL?: string
 }

webui/vite.config.ts

@@ -1,8 +1,16 @@
+import { readFileSync } from 'node:fs'
 import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
+const packageJson = JSON.parse(
+  readFileSync(new URL('./package.json', import.meta.url), 'utf-8'),
+) as { version: string }
+
 export default defineConfig({
   plugins: [react()],
+  define: {
+    __FRONTEND_VERSION__: JSON.stringify(packageJson.version),
+  },
   server: {
     proxy: {
       '/health': 'http://localhost:8080',