feat: Complete Real-Time Sync implementation 🔄

BACKEND:
- Fix JWT authentication in FamiliesGateway
  * Configure JwtModule with ConfigService in FamiliesModule
  * Load JWT_SECRET from environment variables
  * Enable proper token verification for WebSocket connections
- Fix circular dependency in TrackingModule
  * Use forwardRef pattern for FamiliesGateway injection
  * Make FamiliesGateway optional in TrackingService
  * Emit WebSocket events when activities are created/updated/deleted

FRONTEND:
- Create WebSocket service (336 lines)
  * Socket.IO client with auto-reconnection (exponential backoff 1s → 30s)
  * Family room join/leave management
  * Presence tracking (online users per family)
  * Event handlers for activities, children, members
  * Connection recovery with auto-rejoin
- Create useWebSocket hook (187 lines)
  * Auto-connect on user authentication
  * Auto-join user's family room
  * Connection status tracking
  * Presence indicators
  * Hooks: useRealTimeActivities, useRealTimeChildren, useRealTimeFamilyMembers
- Expose access token in AuthContext
  * Add token property to AuthContextType interface
  * Load token from tokenStorage on initialization
  * Update token state on login/register/logout
  * Enable WebSocket authentication
- Integrate real-time sync across app
  * AppShell: Connection status indicator + online count badge
  * Activities page: Auto-refresh on family activity events
  * Home page: Auto-refresh daily summary on activity changes
  * Family page: Real-time member updates
- Fix accessibility issues
  * Remove deprecated legacyBehavior from Link components (Next.js 15)
  * Fix color contrast in EmailVerificationBanner (WCAG AA)
  * Add missing aria-labels to IconButtons
  * Fix React key warnings in family member list

DOCUMENTATION:
- Update implementation-gaps.md
  * Mark Real-Time Sync as COMPLETED ✅
  * Document WebSocket room management implementation
  * Document connection recovery and presence indicators
  * Update summary statistics (49 features completed)

FILES CREATED:
- maternal-web/hooks/useWebSocket.ts (187 lines)
- maternal-web/lib/websocket.ts (336 lines)

FILES MODIFIED (14):
Backend (4):
- families.gateway.ts (JWT verification fix)
- families.module.ts (JWT config with ConfigService)
- tracking.module.ts (forwardRef for FamiliesModule)
- tracking.service.ts (emit WebSocket events)

Frontend (9):
- lib/auth/AuthContext.tsx (expose access token)
- components/layouts/AppShell/AppShell.tsx (connection status + presence)
- app/activities/page.tsx (real-time activity updates)
- app/page.tsx (real-time daily summary refresh)
- app/family/page.tsx (accessibility fixes)
- app/(auth)/login/page.tsx (remove legacyBehavior)
- components/common/EmailVerificationBanner.tsx (color contrast fix)

Documentation (1):
- docs/implementation-gaps.md (updated status)

IMPACT:
✅ Real-time family collaboration achieved
✅ Activities sync instantly across all family members' devices
✅ Presence tracking shows who's online
✅ Connection recovery handles poor network conditions
✅ Accessibility improvements (WCAG AA compliance)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/components/layouts/AppShell/AppShell.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import { Box, Container } from '@mui/material';
+import { Box, Container, Chip, Tooltip } from '@mui/material';
 import { MobileNav } from '../MobileNav/MobileNav';
 import { TabBar } from '../TabBar/TabBar';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { ReactNode } from 'react';
+import { useWebSocket } from '@/hooks/useWebSocket';
+import { Wifi, WifiOff, People } from '@mui/icons-material';
 
 interface AppShellProps {
   children: ReactNode;
@@ -13,6 +15,7 @@ interface AppShellProps {
 export const AppShell = ({ children }: AppShellProps) => {
   const isMobile = useMediaQuery('(max-width: 768px)');
   const isTablet = useMediaQuery('(max-width: 1024px)');
+  const { isConnected, presence } = useWebSocket();
 
   return (
     <Box sx={{
@@ -24,6 +27,46 @@ export const AppShell = ({ children }: AppShellProps) => {
     }}>
       {!isMobile && <MobileNav />}
 
+      {/* Connection Status & Presence Indicator */}
+      <Box
+        sx={{
+          position: 'fixed',
+          top: isMobile ? 8 : 16,
+          right: isMobile ? 8 : 16,
+          zIndex: 1200,
+          display: 'flex',
+          gap: 1,
+        }}
+      >
+        <Tooltip title={isConnected ? 'Real-time sync active' : 'Real-time sync disconnected'}>
+          <Chip
+            icon={isConnected ? <Wifi /> : <WifiOff />}
+            label={isConnected ? 'Live' : 'Offline'}
+            size="small"
+            color={isConnected ? 'success' : 'default'}
+            sx={{
+              fontWeight: 600,
+              boxShadow: 1,
+            }}
+          />
+        </Tooltip>
+
+        {isConnected && presence.count > 1 && (
+          <Tooltip title={`${presence.count} family members online`}>
+            <Chip
+              icon={<People />}
+              label={presence.count}
+              size="small"
+              color="primary"
+              sx={{
+                fontWeight: 600,
+                boxShadow: 1,
+              }}
+            />
+          </Tooltip>
+        )}
+      </Box>
+
       <Container
         maxWidth={isTablet ? 'md' : 'lg'}
         sx={{