AetherForge/server/web/src/App.tsx

import { lazy, Suspense } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import SessionGate from './components/SessionGate';
import Layout from './components/Layout/Layout';
import { WebSocketProvider } from './context/WebSocketProvider';
import { PresenceProvider } from './context/PresenceContext';
import { SoundProvider } from './context/SoundContext';
import { AmbientMusicProvider } from './context/AmbientMusicContext';
import { VisualEffectsProvider } from './context/VisualEffectsContext';
import { ForgeProvider } from './context/ForgeContext';
import { MatrixRainProvider } from './context/MatrixRainContext';
import SoundBridge from './components/Sound/SoundBridge';
import GlobalMusicPlayer from './components/GlobalMusicPlayer';
import AgentsPage from './pages/AgentsPage';
import CruciblePage from './pages/CruciblePage';

const DashboardPage = lazy(() => import('./pages/DashboardPage'));
const BuilderPage = lazy(() => import('./pages/BuilderPage'));
const MissionDeckPage = lazy(() => import('./pages/MissionDeckPage'));
const BuildManagerPage = lazy(() => import('./pages/BuildManagerPage'));
const SettingsPage = lazy(() => import('./pages/SettingsPage'));
const PathTracerPage = lazy(() => import('./pages/PathTracerPage'));
const EmberwakePage = lazy(() => import('./pages/EmberwakePage'));
const LotlTimelinePage = lazy(() => import('./pages/LotlTimelinePage'));
const ROIPage = lazy(() => import('./pages/ROIPage'));
const ActivityFeedPage = lazy(() => import('./pages/ActivityFeedPage'));
const SeerPage = lazy(() => import('./pages/SeerPage'));

export function PageFallback() {
  return (
    <div className="session-gate" style={{ minHeight: '40vh' }}>
      <p className="font-tech">Loading…</p>
    </div>
  );
}

function App() {
  return (
    // WebSocketProvider mounts a single WS connection shared by all routes.
    // No page or component should call new WebSocket() directly — use useWebSocket().
    <WebSocketProvider>
      <PresenceProvider>
      <SoundProvider>
      <AmbientMusicProvider>
      <VisualEffectsProvider>
      <SoundBridge />
      <GlobalMusicPlayer />
      <ForgeProvider>
      <MatrixRainProvider>
      <SessionGate>
      <Layout>
        <Suspense fallback={<PageFallback />}>
          <Routes>
            <Route path="/" element={<Navigate to="/dashboard" replace />} />
            <Route path="/dashboard" element={<DashboardPage />} />
            <Route path="/agents" element={<AgentsPage />} />
            <Route path="/forge" element={<BuilderPage />} />
            <Route path="/builder" element={<Navigate to="/forge" replace />} />
            <Route path="/mission-deck" element={<MissionDeckPage />} />
            <Route path="/crucible" element={<CruciblePage />} />
            <Route path="/builds" element={<BuildManagerPage />} />
            <Route path="/emberwake" element={<EmberwakePage />} />
            <Route path="/spread" element={<Navigate to="/emberwake" replace />} />
            <Route path="/settings" element={<SettingsPage />} />
            <Route path="/pathtracer" element={<PathTracerPage />} />
            <Route path="/lotl-timeline" element={<LotlTimelinePage />} />
            <Route path="/onion" element={<Navigate to="/lotl-timeline" replace />} />
            <Route path="/roi" element={<ROIPage />} />
            <Route path="/activity" element={<ActivityFeedPage />} />
            <Route path="/seer" element={<SeerPage />} />
          </Routes>
        </Suspense>
      </Layout>
      </SessionGate>
      </MatrixRainProvider>
      </ForgeProvider>
      </VisualEffectsProvider>
      </AmbientMusicProvider>
      </SoundProvider>
      </PresenceProvider>
    </WebSocketProvider>
  );
}

export default App;