phase 3 initial completion

frontend/src/App.tsx

@@ -2,7 +2,8 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { AppShell } from './components/layout/AppShell'
 import { RepoListSkeleton } from './ui/Skeleton'
-import { Suspense, lazy } from 'react'
+import { Suspense, lazy, useEffect } from 'react'
+import { bootstrapCSRF } from './api/client'
 import './index.css'
 
 const queryClient = new QueryClient({
@@ -15,36 +16,50 @@ const queryClient = new QueryClient({
   },
 })
 
-const DashboardPage = lazy(() => import('./pages/DashboardPage'))
-const ReposPage     = lazy(() => import('./pages/ReposPage'))
-const PRsPage       = lazy(() => import('./pages/PRsPage'))
-const PipelinesPage = lazy(() => import('./pages/PipelinesPage'))
-const ProfilePage   = lazy(() => import('./pages/ProfilePage'))
-const ExplorePage   = lazy(() => import('./pages/ExplorePage'))
-const SettingsPage  = lazy(() => import('./pages/SettingsPage'))
+// Pages — code-split per route
+const DashboardPage  = lazy(() => import('./pages/DashboardPage'))
+const ReposPage      = lazy(() => import('./pages/ReposPage'))
+const RepoPage       = lazy(() => import('./pages/RepoPage'))
+const RepoPRsPage    = lazy(() => import('./pages/RepoPRsPage'))
+const PRDetailPage   = lazy(() => import('./pages/PRDetailPage'))
+const PRsPage        = lazy(() => import('./pages/PRsPage'))
+const PipelinesPage  = lazy(() => import('./pages/PipelinesPage'))
+const ProfilePage    = lazy(() => import('./pages/ProfilePage'))
+const ExplorePage    = lazy(() => import('./pages/ExplorePage'))
+const SettingsPage   = lazy(() => import('./pages/SettingsPage'))
 
 function PageLoader() {
-  return (
-    <div className="p-6">
-      <RepoListSkeleton />
-    </div>
-  )
+  return <div className="p-6"><RepoListSkeleton /></div>
+}
+
+function S({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={<PageLoader />}>{children}</Suspense>
+}
+
+// Primes the CSRF cookie once when the SPA mounts
+function CSRFBootstrap() {
+  useEffect(() => { bootstrapCSRF() }, [])
+  return null
 }
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
+        <CSRFBootstrap />
         <Routes>
           <Route element={<AppShell />}>
-            <Route index element={<Suspense fallback={<PageLoader />}><DashboardPage /></Suspense>} />
-            <Route path="repos" element={<Suspense fallback={<PageLoader />}><ReposPage /></Suspense>} />
-            <Route path="pulls" element={<Suspense fallback={<PageLoader />}><PRsPage /></Suspense>} />
-            <Route path="pipelines" element={<Suspense fallback={<PageLoader />}><PipelinesPage /></Suspense>} />
-            <Route path="explore" element={<Suspense fallback={<PageLoader />}><ExplorePage /></Suspense>} />
-            <Route path="profile" element={<Suspense fallback={<PageLoader />}><ProfilePage /></Suspense>} />
-            <Route path="settings" element={<Suspense fallback={<PageLoader />}><SettingsPage /></Suspense>} />
-            <Route path="*" element={<Navigate to="/" replace />} />
+            <Route index                               element={<S><DashboardPage /></S>} />
+            <Route path="repos"                        element={<S><ReposPage /></S>} />
+            <Route path="repos/:owner/:repo"           element={<S><RepoPage /></S>} />
+            <Route path="repos/:owner/:repo/pulls"     element={<S><RepoPRsPage /></S>} />
+            <Route path="repos/:owner/:repo/pulls/:prId" element={<S><PRDetailPage /></S>} />
+            <Route path="pulls"                        element={<S><PRsPage /></S>} />
+            <Route path="pipelines"                    element={<S><PipelinesPage /></S>} />
+            <Route path="explore"                      element={<S><ExplorePage /></S>} />
+            <Route path="profile"                      element={<S><ProfilePage /></S>} />
+            <Route path="settings"                     element={<S><SettingsPage /></S>} />
+            <Route path="*"                            element={<Navigate to="/" replace />} />
           </Route>
         </Routes>
       </BrowserRouter>