Phase 6

web/src/App.tsx

@@ -0,0 +1,47 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import { wsClient } from './lib/ws';
+import ViewMode from './ViewMode';
+import EditMode from './EditMode';
+import type { Interface } from './lib/types';
+
+type AppMode = 'view' | 'edit';
+
+export default function App() {
+  const [mode, setMode] = useState<AppMode>('view');
+  const [wsStatus, setWsStatus] = useState('connecting');
+  const [editTarget, setEditTarget] = useState<Interface | null>(null);
+
+  useEffect(() => {
+    const unsub = wsClient.status.subscribe(setWsStatus);
+    return unsub;
+  }, []);
+
+  useEffect(() => {
+    const dpr = window.devicePixelRatio ?? 1;
+    document.documentElement.style.setProperty('--dpr', String(dpr));
+    wsClient.connect('/ws');
+  }, []);
+
+  function enterEdit(iface?: Interface) {
+    setEditTarget(iface ?? null);
+    setMode('edit');
+  }
+
+  function exitEdit() {
+    setMode('view');
+    setEditTarget(null);
+  }
+
+  return (
+    <div>
+      {wsStatus === 'disconnected' && (
+        <div class="connection-banner">WebSocket disconnected — reconnecting…</div>
+      )}
+      {mode === 'view'
+        ? <ViewMode onEdit={enterEdit} />
+        : <EditMode initial={editTarget} onDone={exitEdit} />
+      }
+    </div>
+  );
+}