update

frontend/src/contexts/AuthContext.tsx

@@ -139,9 +139,12 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       const user = await authService.getCurrentUser();
       setUser(user);
       setState((prev) => ({ ...prev, user }));
-    } catch (error) {
+    } catch (error: any) {
       console.error('Failed to refresh user data:', error);
-      logout();
+      // Only logout on explicit 401 — network errors / 5xx should not destroy the session
+      if (error?.response?.status === 401) {
+        logout();
+      }
     }
   }, [logout]);
 

frontend/src/contexts/ChatContext.tsx

@@ -56,19 +56,43 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
   const connected = data?.connected ?? false;
   const loginName = data?.loginName ?? null;
 
+  const prevUnreadRef = useRef<Map<string, number>>(new Map());
+  const isInitializedRef = useRef(false);
+
+  // Reset initialization flag when disconnected
+  useEffect(() => {
+    if (!isConnected) {
+      isInitializedRef.current = false;
+    }
+  }, [isConnected]);
+
   // Detect new unread messages while panel is closed and show toast
   useEffect(() => {
     if (!rooms.length) return;
     const prev = prevUnreadRef.current;
-    const isFirstLoad = prev.size === 0;
+
+    if (!isInitializedRef.current) {
+      // First load (or after reconnect) — initialize without toasting
+      for (const room of rooms) {
+        prev.set(room.token, room.unreadMessages);
+      }
+      isInitializedRef.current = true;
+      return;
+    }
 
     for (const room of rooms) {
       const prevCount = prev.get(room.token) ?? 0;
-      if (!isFirstLoad && !chatPanelOpen && room.unreadMessages > prevCount) {
+      if (!chatPanelOpen && room.unreadMessages > prevCount) {
         showNotificationToast(room.displayName, 'info');
       }
       prev.set(room.token, room.unreadMessages);
     }
+
+    // Prune entries for rooms no longer in the list
+    const currentTokens = new Set(rooms.map((r) => r.token));
+    for (const key of prev.keys()) {
+      if (!currentTokens.has(key)) prev.delete(key);
+    }
   }, [rooms, chatPanelOpen, showNotificationToast]);
 
   const selectRoom = useCallback((token: string | null) => {

frontend/src/contexts/NotificationContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, ReactNode, useCallback } from 'react';
+import React, { createContext, useContext, useState, useRef, ReactNode, useCallback } from 'react';
 import { Snackbar, Alert, AlertColor } from '@mui/material';
 
 interface Notification {
@@ -22,8 +22,8 @@ interface NotificationProviderProps {
 }
 
 export const NotificationProvider: React.FC<NotificationProviderProps> = ({ children }) => {
-  const [_notifications, setNotifications] = useState<Notification[]>([]);
   const [currentNotification, setCurrentNotification] = useState<Notification | null>(null);
+  const queueRef = useRef<Notification[]>([]);
 
   // Left-side toast queue for new backend notifications
   const [toastQueue, setToastQueue] = useState<Notification[]>([]);
@@ -32,13 +32,15 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
     const id = Date.now();
     const notification: Notification = { id, message, severity };
 
-    setNotifications((prev) => [...prev, notification]);
-
-    // If no notification is currently displayed, show this one immediately
-    if (!currentNotification) {
-      setCurrentNotification(notification);
-    }
-  }, [currentNotification]);
+    // Use functional update to avoid stale closure over currentNotification
+    setCurrentNotification((prev) => {
+      if (prev) {
+        queueRef.current.push(notification);
+        return prev;
+      }
+      return notification;
+    });
+  }, []);
 
   const showSuccess = useCallback((message: string) => {
     addNotification(message, 'success');
@@ -68,15 +70,12 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
 
     setCurrentNotification(null);
 
-    // Show next notification after a short delay
+    // Show next queued notification after a short delay
     setTimeout(() => {
-      setNotifications((prev) => {
-        const remaining = prev.filter((n) => n.id !== currentNotification?.id);
-        if (remaining.length > 0) {
-          setCurrentNotification(remaining[0]);
-        }
-        return remaining;
-      });
+      const next = queueRef.current.shift();
+      if (next) {
+        setCurrentNotification(next);
+      }
     }, 200);
   };
 

frontend/src/contexts/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, useMemo } from 'react';
+import React, { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
 import { lightTheme, darkTheme } from '../theme/theme';
@@ -50,10 +50,10 @@ export const ThemeModeProvider: React.FC<{ children: React.ReactNode }> = ({ chi
     return () => mq.removeEventListener('change', handler);
   }, []);
 
-  const setThemeMode = (mode: ThemeMode) => {
+  const setThemeMode = useCallback((mode: ThemeMode) => {
     setThemeModeState(mode);
     localStorage.setItem(STORAGE_KEY, mode);
-  };
+  }, []);
 
   const resolvedMode: 'light' | 'dark' =
     themeMode === 'system' ? systemPreference : themeMode;