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 {
-  max-width: 40rem;
-  margin: 4rem auto;
-  padding: 0 1.5rem;
-  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
+.app-shell {
+  display: flex;
+  min-height: 100vh;
   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;
-  letter-spacing: -0.03em;
+  font-size: 1.75rem;
+  letter-spacing: -0.02em;
 }
 
-.app p {
-  margin: 0 0 1.5rem;
+.content p {
+  margin: 0;
   line-height: 1.5;
   color: #3a5166;
 }
 
-.app button {
-  appearance: none;
-  border: 1px solid #1f4b6e;
-  background: #1f4b6e;
-  color: #f7fafc;
-  padding: 0.65rem 1rem;
-  font: inherit;
-  cursor: pointer;
-}
+@media (max-width: 640px) {
+  .app-shell {
+    flex-direction: column;
+  }
 
-.app button:disabled {
-  opacity: 0.7;
-  cursor: wait;
-}
+  .sidebar {
+    width: 100%;
+    min-height: auto;
+  }
 
-.app button:not(:disabled):hover {
-  background: #16384f;
-}
+  .sidebar-nav {
+    flex: 0 0 auto;
+  }
 
-.app [role='status'],
-.app [role='alert'] {
-  margin-top: 1.25rem;
-}
-
-.app [role='alert'] {
-  color: #8a1c1c;
+  .content {
+    padding: 1.5rem;
+  }
 }