Fix streaming: MSE-first with go2rtc init protocol

- Switch from WebRTC-first to MSE-first streaming (more reliable
  across all camera types including high-res IP cameras)
- Send required {"type":"mse"} init message to go2rtc WebSocket
- Fix infinite re-render loop in configStore (pre-compute enabled
  cameras instead of deriving in selector)
- Fix mqtt_bridge global variable scope in broadcast()
- Add React ErrorBoundary for visible crash reporting
- Remove unused go2rtcUrl dependency from useStream hook

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface State {
+  error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<React.PropsWithChildren, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: 40, color: '#ef4444', background: '#0f0f0f', height: '100vh', fontFamily: 'monospace' }}>
+          <h1 style={{ fontSize: 24, marginBottom: 16 }}>App Error</h1>
+          <pre style={{ whiteSpace: 'pre-wrap', color: '#f59e0b' }}>{this.state.error.message}</pre>
+          <pre style={{ whiteSpace: 'pre-wrap', color: '#9ca3af', marginTop: 8, fontSize: 12 }}>{this.state.error.stack}</pre>
+          <button
+            onClick={() => window.location.reload()}
+            style={{ marginTop: 20, padding: '8px 16px', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer' }}
+          >
+            Reload
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

frontend/src/components/alerts/AlertPopup.tsx

@@ -6,7 +6,7 @@ import { CameraPlayer } from '@/components/player/CameraPlayer';
 export function AlertPopup() {
   const { activeAlert, dismissAlert } = useAlertStore();
   const config = useConfigStore((s) => s.config);
-  const cameras = useConfigStore((s) => s.enabledCameras());
+  const cameras = useConfigStore((s) => s.cameras);
   const [countdown, setCountdown] = useState(30);
 
   const autoDismiss = config?.alerts.auto_dismiss_seconds ?? 30;

frontend/src/components/grid/CameraGrid.tsx

@@ -4,7 +4,7 @@ import { CameraGridCell } from './CameraGridCell';
 const STAGGER_MS = 200;
 
 export function CameraGrid() {
-  const cameras = useConfigStore((s) => s.enabledCameras());
+  const cameras = useConfigStore((s) => s.cameras);
   const gridConfig = useConfigStore((s) => s.config?.grid);
 
   const count = cameras.length;

frontend/src/components/grid/CameraGridCell.tsx

@@ -1,5 +1,4 @@
 import { useStream } from '@/hooks/useStream';
-import { useConfigStore } from '@/stores/configStore';
 import { useUIStore } from '@/stores/uiStore';
 import type { CameraConfig } from '@/types/config';
 
@@ -9,12 +8,10 @@ interface CameraGridCellProps {
 }
 
 export function CameraGridCell({ camera, delayMs }: CameraGridCellProps) {
-  const go2rtcUrl = useConfigStore((s) => s.config?.go2rtc.url ?? '');
   const setFullscreen = useUIStore((s) => s.setFullscreenCamera);
 
   const { videoRef, isConnecting, error, retry } = useStream({
     streamName: camera.name,
-    go2rtcUrl,
     delayMs,
   });
 
@@ -36,7 +33,7 @@ export function CameraGridCell({ camera, delayMs }: CameraGridCellProps) {
         <div className="absolute inset-0 flex items-center justify-center bg-dark-primary/80">
           <div className="flex flex-col items-center gap-2">
             <div className="w-6 h-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
-            <span className="text-xs text-gray-500">Connecting...</span>
+            <span className="text-xs text-gray-400">{camera.display_name}</span>
           </div>
         </div>
       )}
@@ -48,7 +45,8 @@ export function CameraGridCell({ camera, delayMs }: CameraGridCellProps) {
             <svg className="w-6 h-6 text-status-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
             </svg>
-            <span className="text-xs text-gray-500">Offline</span>
+            <span className="text-xs text-gray-400">{camera.display_name}</span>
+            <span className="text-xs text-status-error">{error}</span>
             <button onClick={(e) => { e.stopPropagation(); retry(); }} className="text-xs text-accent hover:underline">
               Retry
             </button>
@@ -57,11 +55,13 @@ export function CameraGridCell({ camera, delayMs }: CameraGridCellProps) {
       )}
 
       {/* Label */}
-      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent px-2 py-1.5">
-        <span className="text-xs font-medium text-white/90 truncate block">
-          {camera.display_name}
-        </span>
-      </div>
+      {!isConnecting && !error && (
+        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent px-2 py-1.5">
+          <span className="text-xs font-medium text-white/90 truncate block">
+            {camera.display_name}
+          </span>
+        </div>
+      )}
     </div>
   );
 }

frontend/src/components/player/CameraPlayer.tsx

@@ -1,5 +1,4 @@
 import { useStream } from '@/hooks/useStream';
-import { useConfigStore } from '@/stores/configStore';
 import type { CameraConfig } from '@/types/config';
 
 interface CameraPlayerProps {
@@ -9,11 +8,8 @@ interface CameraPlayerProps {
 }
 
 export function CameraPlayer({ camera, className = '', showLabel = true }: CameraPlayerProps) {
-  const go2rtcUrl = useConfigStore((s) => s.config?.go2rtc.url ?? '');
-
   const { videoRef, isConnecting, error, retry } = useStream({
     streamName: camera.name,
-    go2rtcUrl,
   });
 
   return (

frontend/src/components/player/FullscreenView.tsx

@@ -5,7 +5,7 @@ import { CameraPlayer } from './CameraPlayer';
 
 export function FullscreenView() {
   const { fullscreenCamera, setFullscreenCamera } = useUIStore();
-  const cameras = useConfigStore((s) => s.enabledCameras());
+  const cameras = useConfigStore((s) => s.cameras);
 
   const currentIdx = cameras.findIndex((c) => c.name === fullscreenCamera);
   const camera = currentIdx >= 0 ? cameras[currentIdx] : null;