Phase 5: Web-Bedienoberfläche nach §17 (React+Vite, ADR-0006)

- ADR-0006: React 18/19 mit Vite im statischen SPA-Modus
- Workspace §17.2: Statusleiste 32px, einklappbare Werkzeugleiste,
  Layer-Tabelle, Inspector ~30% mit Divider-Resize, umschaltbare
  rechte Seitenleiste, Fußleiste mit Setup/Live-Lock
- Layer-Tabelle §17.3: alle 10 Pflichtspalten, Zeilen 30px,
  7 unterscheidbare Zustände (Glyph+Farbe+Text, nie nur Farbe),
  Pfeiltasten-Navigation, Opacity-Fader mit echtem parameter.set
- Inspector §17.4: 7 Tabs, Zahlenfelder mit Tippen/Ziehen/Pfeiltasten,
  Release-Befehl, Live-Lock sperrt Struktur
- Design-Tokens §17.6: alle als CSS-Variablen (Flächen, Text,
  Akzent-Blau, Zustandsfarben, 4px-Raster, 2-4px Radien,
  Monospace tabular-nums, 100-180ms)
- WebSocket: Snapshot bei Connect, Deltas danach, Reconnect
  1s/2s/4s max 30s; Browser-Neustart stoppt Output nicht (§3.2)
- REST: health/identity/cluster-nodes/parameters/diagnostics,
  Commands mit expected_revision + Revert bei 409
- Kein GO-Button, keine Standby-Anzeige, keine Cue-Carts (§17.1)
- Build: tsc strict + vite, 27 Module, 262KB JS gzip 80KB
- Python-Suite 549 grün unberührt

apps/web/vite.config.ts

@@ -0,0 +1,32 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+/**
+ * Vite-Konfiguration der HMS-MediaEngine-Weboberfläche (§17).
+ *
+ * Dev-Server-Proxy auf den Control Core (apps/control_server, Port 8000):
+ * - '/api' als HTTP-Proxy
+ * - '/ws'  als WebSocket-Proxy (Snapshot + Deltas, §17.9)
+ * Same-Origin im Dev-Betrieb; produktiv übernimmt der Launcher/Reverse-Proxy.
+ */
+const proxy = {
+  '/api': {
+    target: 'http://localhost:8000',
+  },
+  '/ws': {
+    target: 'ws://localhost:8000',
+    ws: true,
+  },
+} as const;
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy,
+  },
+  preview: {
+    port: 4173,
+    proxy,
+  },
+});