feat: implement side-by-side synchronized map comparison tool and infrastructure scripts for connectivity and data updates

apps/web/src/main.tsx

@@ -1,10 +1,53 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+import CompareView from './pages/CompareView'
+import IntelligenceDashboard from './pages/IntelligenceDashboard'
 import './index.css'
 
+// Lightweight hash router (no dependency). '#compare' and '#review' are additive
+// views; anything else falls back to the existing map app, untouched.
+const NAV = [
+  { hash: '#map', label: 'Map' },
+  { hash: '#review', label: 'Review' },
+  { hash: '#compare', label: 'Compare' },
+]
+
+function ViewNav({ hash }: { hash: string }) {
+  const isMap = hash !== '#compare' && hash !== '#review'
+  return (
+    <div style={{ position: 'fixed', top: 8, left: '50%', transform: 'translateX(-50%)', zIndex: 9999, display: 'flex', gap: 4, background: 'rgba(15,23,42,0.9)', border: '1px solid #334155', borderRadius: 999, padding: 3, fontFamily: 'Inter, system-ui, sans-serif' }}>
+      {NAV.map(n => {
+        const active = n.hash === '#map' ? isMap : hash === n.hash
+        return (
+          <a key={n.hash} href={n.hash}
+            style={{ textDecoration: 'none', fontSize: 12, fontWeight: 600, color: active ? '#fff' : '#94a3b8', background: active ? '#6366f1' : 'transparent', padding: '5px 12px', borderRadius: 999 }}>
+            {n.label}
+          </a>
+        )
+      })}
+    </div>
+  )
+}
+
+function Root() {
+  const [hash, setHash] = useState(window.location.hash)
+  useEffect(() => {
+    const on = () => setHash(window.location.hash)
+    window.addEventListener('hashchange', on)
+    return () => window.removeEventListener('hashchange', on)
+  }, [])
+  const view = hash === '#compare' ? <CompareView /> : hash === '#review' ? <IntelligenceDashboard /> : <App />
+  return (
+    <>
+      <ViewNav hash={hash} />
+      {view}
+    </>
+  )
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <Root />
   </React.StrictMode>,
 )