feat: code splitting, dead code removal, Socket.IO elimination (Phase 15.14)

- Add route-level code splitting: 19 page components lazy-loaded via React.lazy() with Suspense in Layout
- Remove Socket.IO entirely: server service, client hooks/service, socket.io + socket.io-client deps
- Convert database refresh/calculate-generations from fire-and-forget to synchronous endpoints
- Remove dead code: TreeView, ConnectionLine, batchInsert() (SQL injection risk), getCanonicalDbId()
- Fix DELETE route headers-already-sent bug in database.routes.ts
- Remove dead /socket.io Vite proxy config
- Clean up canonicalDbId identity aliases in favorites.service.ts

Author: atomantic

.changelog/NEXT.md

@@ -11,6 +11,8 @@
 
 ## Changed
 
+- Route-level code splitting: all 19 page components lazy-loaded via `React.lazy()` with Suspense fallback in Layout
+- Dashboard refresh/calculate-generations now return data synchronously instead of fire-and-forget with Socket.IO
 - Split 1457-line `augmentation.service.ts` god file into focused services: `platform-linking.service.ts` (URL parsing, scrapers, link* functions), `augmentation-photo.service.ts` (photo paths, fetch-from-platform), `provider-mapping.service.ts` (provider mapping CRUD)
 - Extracted shared `fetchHtml` and `normalizePhotoUrl` utilities; consolidated duplicate `normalizePhotoUrl` from `multi-platform-comparison.service.ts`
 - Extracted `ensureAncestryLoggedIn` and `extractAncestryPhotoFromPage` helpers to dedupe Ancestry login + srcset logic
@@ -26,5 +28,10 @@
 
 - Platform comparison now treats equivalent date formats as matches (e.g., "1979-07-31" vs "31 JUL 1979")
 - `isLegacyFormat` augmentation type guard no longer crashes on string/null input
+- DELETE database route no longer sends success response on error (headers-already-sent crash)
 
 ## Removed
+
+- Socket.IO: removed server (`socket.service.ts`, `socket.io` dep) and client (`socket.ts`, `useSocket.ts` hooks), replaced with synchronous API + existing SSE
+- Dead code: `TreeView` component, `ConnectionLine` component, `batchInsert()` (had SQL injection risk), `getCanonicalDbId()` identity function
+- Dead `/socket.io` Vite proxy config

PLAN.md

@@ -531,17 +531,17 @@ Code audit identified DRY/YAGNI/performance issues to address before Phase 16:
 - [ ] **Optimize `buildPersonFromSqlite()`**: Replace 6 sequential queries with JOINs or batched queries
 - [ ] **Add composite DB index**: `vital_event(person_id, place)` for search query performance
 - [ ] **Convert LRUCache class to factory function**: Match project's functional style in `cache.service.ts`
-- [ ] **Add route-level code splitting**: Wrap page components in `React.lazy()` + `Suspense` in `App.tsx` (all pages eagerly imported today)
+- [x] ~~**Add route-level code splitting**: Wrap page components in `React.lazy()` + `Suspense` in `App.tsx` (all pages eagerly imported today)~~ (Done: all 19 page components lazy-loaded with Suspense + spinner fallback)
 
 #### Dead Code Removal
-- [ ] **Remove Socket.IO service + hooks** (298 lines): `client/src/services/socket.ts` and `client/src/hooks/useSocket.ts` — never imported, all real-time uses SSE
-- [ ] **Remove dead `TreeView` component** (167 lines): `client/src/components/tree/TreeView.tsx` — superseded by `AncestryTreeView`, not referenced
-- [ ] **Remove dead `ConnectionLine` components** (193 lines): `client/src/components/ancestry-tree/ConnectionLine.tsx` — exported but never imported
-- [ ] **Remove dead `batchInsert()`**: Unused function in `sqlite.service.ts` with SQL injection risk (table/column names interpolated)
+- [x] ~~**Remove Socket.IO service + hooks**: `client/src/services/socket.ts` and `client/src/hooks/useSocket.ts`, `server/src/services/socket.service.ts` — replaced with synchronous API responses in `database.routes.ts`, removed `socket.io` server dep~~ (Done: converted refresh/calculate-generations to sync endpoints, removed Socket.IO from server + client hooks, cleaned browserSseManager)
+- [x] ~~**Remove dead `TreeView` component** (167 lines): `client/src/components/tree/TreeView.tsx` — superseded by `AncestryTreeView`, not referenced~~ (Done)
+- [x] ~~**Remove dead `ConnectionLine` components** (193 lines): `client/src/components/ancestry-tree/ConnectionLine.tsx` — exported but never imported~~ (Done)
+- [x] ~~**Remove dead `batchInsert()`**: Unused function in `sqlite.service.ts` with SQL injection risk (table/column names interpolated)~~ (Done)
 
 #### Cleanup & Security
 - [ ] **Audit legacy migration code**: Determine if `LegacyAugmentation` in `augmentation.service.ts:22-95` is still needed
-- [ ] **Remove identity function**: `getCanonicalDbId()` in `database.service.ts:133-135` just returns its input
+- [x] ~~**Remove identity function**: `getCanonicalDbId()` in `database.service.ts:133-135` just returns its input~~ (Done: inlined in favorites.service.ts)
 - [ ] **Deprecate legacy favorites routes**: `GET/POST/PUT/DELETE /:personId` duplicates db-scoped endpoints
 - [ ] **Add route param validation**: `personId` used directly in file paths without sanitization (path traversal risk)
 - [ ] **Validate browser navigate URL**: `/browser/navigate` accepts arbitrary URLs (SSRF risk) — restrict to genealogy domains

client/package.json

@@ -22,8 +22,8 @@
     "zustand": "^5.0.12"
   },
   "devDependencies": {
-    "@testing-library/react": "^16.3.2",
     "@tailwindcss/vite": "^4.2.2",
+    "@testing-library/react": "^16.3.2",
     "@types/d3": "^7.4.3",
     "@types/leaflet": "^1.9.21",
     "@types/react": "^18.3.28",

client/src/App.tsx

@@ -1,31 +1,32 @@
+import { lazy } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { Layout } from './components/layout/Layout';
-import { Dashboard } from './components/Dashboard';
-import { AncestryTreeView } from './components/ancestry-tree';
-import { PersonDetail } from './components/person/PersonDetail';
-import { SearchPage } from './components/search/SearchPage';
-import { PathFinder } from './components/path/PathFinder';
-import { IndexerPage } from './components/indexer/IndexerPage';
-import { AIProvidersPage } from './pages/AIProviders';
-import { GenealogyProvidersPage } from './pages/GenealogyProviders';
-import { GedcomPage } from './pages/GedcomPage';
-import { BrowserSettingsPage } from './pages/BrowserSettingsPage';
-import { ReportsPage } from './pages/ReportsPage';
-import { FavoritesPage } from './components/favorites/FavoritesPage';
-import { SparseTreePage } from './components/favorites/SparseTreePage';
-import { SparseTreeMapPage } from './components/favorites/SparseTreeMapPage';
-import { DatabaseFavoritesPage } from './components/favorites/DatabaseFavoritesPage';
-import { IntegrityPage } from './components/integrity/IntegrityPage';
-import { AuditPage } from './components/audit/AuditPage';
-import { AncestryUpdatePage } from './components/ancestry-update';
-import { TreeStatsPage } from './components/stats/TreeStatsPage';
+
+const Dashboard = lazy(() => import('./components/Dashboard').then(m => ({ default: m.Dashboard })));
+const AncestryTreeView = lazy(() => import('./components/ancestry-tree/AncestryTreeView').then(m => ({ default: m.AncestryTreeView })));
+const PersonDetail = lazy(() => import('./components/person/PersonDetail').then(m => ({ default: m.PersonDetail })));
+const SearchPage = lazy(() => import('./components/search/SearchPage').then(m => ({ default: m.SearchPage })));
+const PathFinder = lazy(() => import('./components/path/PathFinder').then(m => ({ default: m.PathFinder })));
+const IndexerPage = lazy(() => import('./components/indexer/IndexerPage').then(m => ({ default: m.IndexerPage })));
+const AIProvidersPage = lazy(() => import('./pages/AIProviders').then(m => ({ default: m.AIProvidersPage })));
+const GenealogyProvidersPage = lazy(() => import('./pages/GenealogyProviders').then(m => ({ default: m.GenealogyProvidersPage })));
+const GedcomPage = lazy(() => import('./pages/GedcomPage').then(m => ({ default: m.GedcomPage })));
+const BrowserSettingsPage = lazy(() => import('./pages/BrowserSettingsPage').then(m => ({ default: m.BrowserSettingsPage })));
+const ReportsPage = lazy(() => import('./pages/ReportsPage').then(m => ({ default: m.ReportsPage })));
+const FavoritesPage = lazy(() => import('./components/favorites/FavoritesPage').then(m => ({ default: m.FavoritesPage })));
+const SparseTreePage = lazy(() => import('./components/favorites/SparseTreePage').then(m => ({ default: m.SparseTreePage })));
+const SparseTreeMapPage = lazy(() => import('./components/favorites/SparseTreeMapPage').then(m => ({ default: m.SparseTreeMapPage })));
+const DatabaseFavoritesPage = lazy(() => import('./components/favorites/DatabaseFavoritesPage').then(m => ({ default: m.DatabaseFavoritesPage })));
+const IntegrityPage = lazy(() => import('./components/integrity/IntegrityPage').then(m => ({ default: m.IntegrityPage })));
+const AuditPage = lazy(() => import('./components/audit/AuditPage').then(m => ({ default: m.AuditPage })));
+const AncestryUpdatePage = lazy(() => import('./components/ancestry-update').then(m => ({ default: m.AncestryUpdatePage })));
+const TreeStatsPage = lazy(() => import('./components/stats/TreeStatsPage').then(m => ({ default: m.TreeStatsPage })));
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={<Dashboard />} />
-        {/* Tree routes with view mode support */}
         <Route path="tree/:dbId" element={<AncestryTreeView />} />
         <Route path="tree/:dbId/:personId" element={<AncestryTreeView />} />
         <Route path="tree/:dbId/:personId/:viewMode" element={<AncestryTreeView />} />
@@ -35,7 +36,6 @@ function App() {
         <Route path="indexer" element={<IndexerPage />} />
         <Route path="providers" element={<AIProvidersPage />} />
         <Route path="providers/genealogy" element={<GenealogyProvidersPage />} />
-        {/* Redirects for removed routes */}
         <Route path="providers/genealogy/new" element={<Navigate to="/providers/genealogy" replace />} />
         <Route path="providers/genealogy/:id/edit" element={<Navigate to="/providers/genealogy" replace />} />
         <Route path="providers/scraper" element={<Navigate to="/providers/genealogy" replace />} />

client/src/components/Dashboard.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Trash2, Users, GitBranch, Search, Route, Loader2, Database, FlaskConical, Eye, EyeOff, RefreshCw, Calculator, Download, BarChart3 } from 'lucide-react';
 import { CopyButton } from './ui/CopyButton';
 import toast from 'react-hot-toast';
 import type { DatabaseInfo } from '@fsf/shared';
 import { api } from '../services/api';
-import { useSocketConnection, useSocketEvent } from '../hooks/useSocket';
 
 // Platform badge colors
 const platformColors: Record<string, { bg: string; text: string }> = {
@@ -84,37 +83,6 @@ export function Dashboard() {
     return stored === null ? true : stored === 'true';
   });
 
-  // Connect to socket for real-time updates
-  useSocketConnection();
-
-  // Handle database refresh events via socket
-  const handleRefreshEvent = useCallback((data: { dbId: string; status: string; personCount?: number; data?: DatabaseInfo; message?: string }) => {
-    if (data.status === 'complete' && data.data) {
-      setDatabases(prev => prev.map(d => d.id === data.dbId ? data.data! : d));
-      toast.success(`Updated count: ${data.personCount?.toLocaleString()} parents`);
-      setRefreshingId(null);
-    } else if (data.status === 'error') {
-      toast.error(`Failed to refresh: ${data.message || 'Unknown error'}`);
-      setRefreshingId(null);
-    }
-  }, []);
-
-  useSocketEvent('database:refresh', handleRefreshEvent);
-
-  // Handle generation calculation events via socket
-  const handleGenerationsEvent = useCallback((data: { dbId: string; status: string; maxGenerations?: number; data?: DatabaseInfo; message?: string }) => {
-    if (data.status === 'complete' && data.data) {
-      setDatabases(prev => prev.map(d => d.id === data.dbId ? data.data! : d));
-      toast.success(`Calculated: ${data.maxGenerations} generations`);
-      setCalculatingGenId(null);
-    } else if (data.status === 'error') {
-      toast.error(`Failed to calculate generations: ${data.message || 'Unknown error'}`);
-      setCalculatingGenId(null);
-    }
-  }, []);
-
-  useSocketEvent('database:generations', handleGenerationsEvent);
-
   useEffect(() => {
     api.listDatabases()
       .then(setDatabases)
@@ -156,22 +124,28 @@ export function Dashboard() {
 
   const handleRefresh = async (db: DatabaseInfo) => {
     setRefreshingId(db.id);
-
-    // Trigger refresh via API - socket will receive the result
-    await api.refreshRootCount(db.id).catch(err => {
-      toast.error(`Failed to start refresh: ${err.message}`);
-      setRefreshingId(null);
+    const result = await api.refreshRootCount(db.id).catch(err => {
+      toast.error(`Failed to refresh: ${err.message}`);
+      return null;
     });
+    if (result) {
+      setDatabases(prev => prev.map(d => d.id === db.id ? result : d));
+      toast.success(`Updated count: ${result.personCount?.toLocaleString()} ancestors`);
+    }
+    setRefreshingId(null);
   };
 
   const handleCalculateGenerations = async (db: DatabaseInfo) => {
     setCalculatingGenId(db.id);
-
-    // Trigger calculation via API - socket will receive the result
-    await api.calculateGenerations(db.id).catch(err => {
-      toast.error(`Failed to start generation calculation: ${err.message}`);
-      setCalculatingGenId(null);
+    const result = await api.calculateGenerations(db.id).catch(err => {
+      toast.error(`Failed to calculate generations: ${err.message}`);
+      return null;
     });
+    if (result) {
+      setDatabases(prev => prev.map(d => d.id === db.id ? result : d));
+      toast.success(`Calculated: ${result.maxGenerations} generations`);
+    }
+    setCalculatingGenId(null);
   };
 
   if (loading) {