Presence: frontend heartbeat + green dot indicator in Manage users list

client/src/components/Layout.tsx

@@ -26,58 +26,60 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const user: User | null = userData ? JSON.parse(userData) : null;
   const [unreadCount, setUnreadCount] = useState<number>(0);
 
-    // Handle page transitions
+  // Lightweight online presence: send heartbeat periodically
   useEffect(() => {
-    // Only trigger transition if path actually changed
-    if (location.pathname !== previousPathRef.current) {
-      setIsTransitioning(true);
-      previousPathRef.current = location.pathname;
-      
-      // Reset week selection to Week 1 when navigating between pages
-      const previousPath = previousPathRef.current;
-      if (location.pathname === '/tutorial-tasks' && 
-          previousPath && 
-          !previousPath.includes('/tutorial-tasks')) {
-        // Use URL parameter to force Week 1
-        window.history.replaceState(null, '', '/tutorial-tasks?week=1');
-        localStorage.setItem('selectedTutorialWeek', '1');
-      } else if (location.pathname === '/weekly-practice' && 
-                 previousPath && 
-                 !previousPath.includes('/weekly-practice')) {
-        // Use URL parameter to force Week 1
-        window.history.replaceState(null, '', '/weekly-practice?week=1');
-        localStorage.setItem('selectedWeeklyPracticeWeek', '1');
-      }
-      
-      // Determine transition duration based on destination page
-      let transitionDuration = 800; // Default duration
-      
-      // Longer duration for heavy pages
-      if (location.pathname === '/tutorial-tasks' || location.pathname === '/weekly-practice') {
-        transitionDuration = 1200; // Longer for content-heavy pages
-      }
-      
-      // Special case: Weekly Practice → Tutorial Tasks (add 500ms delay)
-      if (location.pathname === '/tutorial-tasks' && 
-          previousPath && 
-          previousPath.includes('/weekly-practice')) {
-        // Check if navigating to Week 2 (use localStorage since URL might not be updated yet)
-        const tutorialWeek = localStorage.getItem('selectedTutorialWeek');
-        if (tutorialWeek === '2') {
-          transitionDuration = 2500; // Extended duration for Week 2 (2000 + 500)
-        } else {
-          transitionDuration = 1700; // Standard duration for Week 1 (1200 + 500)
+    let timer: any;
+    const sendHeartbeat = async () => {
+      try {
+        if (!user?.email) return;
+        const token = localStorage.getItem('token') || '';
+        const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+        await fetch(`${base}/api/auth/online/heartbeat`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json',
+            'user-role': user.role || 'visitor',
+            'user-info': userData || ''
+          },
+          body: JSON.stringify({ email: user.email })
+        });
+      } catch {}
+    };
+    sendHeartbeat();
+    timer = setInterval(sendHeartbeat, 60000);
+    return () => { if (timer) clearInterval(timer); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.email]);
+
+  // Admin unread message badge (non-invasive)
+  useEffect(() => {
+    let timer: any;
+    const run = async () => {
+      try {
+        if (user?.role !== 'admin') return;
+        const token = localStorage.getItem('token') || '';
+        const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+        const resp = await fetch(`${base}/api/messages/unread-count`, {
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'user-role': 'admin',
+            'user-info': userData || ''
+          }
+        });
+        if (resp.ok) {
+          const data = await resp.json();
+          if (typeof data?.count === 'number') setUnreadCount(data.count);
         }
-      }
-      
-      // End transition after content is loaded (wait for DOM updates)
-      const timer = setTimeout(() => {
-        setIsTransitioning(false);
-      }, transitionDuration);
-      
-      return () => clearTimeout(timer);
+      } catch {}
+    };
+    run();
+    if (user?.role === 'admin') {
+      timer = setInterval(run, 60000);
     }
-  }, [location.pathname]);
+    return () => { if (timer) clearInterval(timer); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.role]);
 
   // Admin unread message badge (non-invasive)
   useEffect(() => {

client/src/pages/Profile.tsx

@@ -16,6 +16,7 @@ interface User {
   email: string;
   role?: string;
   displayName?: string;
+  online?: boolean;
 }
 
 interface SystemStats {
@@ -537,7 +538,12 @@ const Manage: React.FC = () => {
                   <div key={user.email} className="bg-gray-50 p-3 rounded-md">
                     <div className="flex justify-between items-center">
                       <div className="flex-1">
-                        <p className="text-sm font-medium text-gray-900">{user.name}</p>
+                        <p className="text-sm font-medium text-gray-900 flex items-center">
+                          {user.online && (
+                            <span className="inline-block w-2 h-2 bg-green-500 rounded-full mr-2" aria-label="online" />
+                          )}
+                          {user.name}
+                        </p>
                         <p className="text-xs text-gray-600">{user.email}</p>
                       </div>
                       <div className="flex items-center space-x-2">