fix(web): add shared DemSource singleton, add ErrorBoundary, and conditional view rendering to prevent WebGL crash

apps/web/src/main.tsx

@@ -73,14 +73,70 @@ function ViewNav({ hash }: { hash: string }) {
   )
 }
 
+class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean; error: any }> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    console.error('App UI Error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          background: '#0f172a',
+          color: '#fff',
+          fontFamily: 'system-ui, sans-serif',
+          direction: 'rtl',
+          padding: 24,
+          textAlign: 'center'
+        }}>
+          <div style={{ fontSize: '3rem', marginBottom: 16 }}>⚠️</div>
+          <h2 style={{ fontSize: '1.4rem', fontWeight: 700, marginBottom: 8 }}>حدث خطأ أثناء تحميل الواجهة</h2>
+          <p style={{ color: '#94a3b8', fontSize: '0.9rem', maxWidth: 450, marginBottom: 20 }}>
+            {this.state.error?.message || 'تعذر تحميل أحد مكونات الخريطة'}
+          </p>
+          <button
+            onClick={() => { window.location.hash = '#map'; window.location.reload(); }}
+            style={{
+              padding: '10px 24px',
+              background: '#6366f1',
+              color: '#fff',
+              border: 'none',
+              borderRadius: 8,
+              fontWeight: 700,
+              cursor: 'pointer',
+              fontSize: '0.95rem'
+            }}
+          >
+            إعادة تحميل الخريطة الأساسية
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 function Root() {
-  const [hash, setHash] = useState(window.location.hash || '#tactical')
+  const [hash, setHash] = useState(window.location.hash || '#tactical');
 
   useEffect(() => {
     const on = () => {
       const h = window.location.hash || '#tactical';
       setHash(h);
-      // Trigger a resize event to ensure MapLibre maps adapt to visibility changes instantly
       setTimeout(() => {
         window.dispatchEvent(new Event('resize'));
       }, 50);
@@ -96,35 +152,40 @@ function Root() {
   const isMap = !isTactical && !isExecutive && !isCompare && !isReview;
 
   return (
-    <>
+    <ErrorBoundary>
       <ViewNav hash={hash} />
 
-      {/* Keep-Alive Persistent Views: Preserves Map Instances and GPU Tile Caches across Tab switches */}
-      <div style={{ display: isTactical ? 'block' : 'none', width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
-        <TacticalDefenseView />
-      </div>
+      {isTactical && (
+        <div style={{ width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
+          <TacticalDefenseView />
+        </div>
+      )}
 
-      <div style={{ display: isExecutive ? 'block' : 'none', width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
-        <ExecutiveShowcase />
-      </div>
+      {isExecutive && (
+        <div style={{ width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
+          <ExecutiveShowcase />
+        </div>
+      )}
 
-      <div style={{ display: isCompare ? 'block' : 'none', width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
-        <CompareView />
-      </div>
+      {isCompare && (
+        <div style={{ width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
+          <CompareView />
+        </div>
+      )}
 
-      <div style={{ display: isReview ? 'block' : 'none', width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
-        <IntelligenceDashboard />
-      </div>
+      {isReview && (
+        <div style={{ width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
+          <IntelligenceDashboard />
+        </div>
+      )}
 
-      <div style={{ display: isMap ? 'block' : 'none', width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
-        <App />
-      </div>
-    </>
+      {isMap && (
+        <div style={{ width: '100vw', height: '100vh', position: 'absolute', top: 0, left: 0 }}>
+          <App />
+        </div>
+      )}
+    </ErrorBoundary>
   );
 }
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <Root />
-  </React.StrictMode>,
-)
+ReactDOM.createRoot(document.getElementById('root')!).render(<Root />);