feat: implement real-time notification updates and toast alerts via socket events

src/components/providers/header-provider.tsx

@@ -6,6 +6,7 @@ import { agentsService } from '@/services/agents.service';
 import { usersService } from '@/services/users.service';
 import { uploadService } from '@/services/upload.service';
 import { notificationsApiService } from '@/services/notifications-api.service';
+import { socketService } from '@/services';
 
 interface HeaderData {
   profileImage: string | null;
@@ -102,7 +103,7 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
     return () => window.removeEventListener('profile-updated', handleProfileUpdate);
   }, [fetchProfileData]);
 
-  // Notification count polling
+  // Notification count polling + real-time socket updates
   useEffect(() => {
     if (status !== 'authenticated') return;
 
@@ -120,9 +121,17 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
     const handleNotification = () => fetchCount();
     window.addEventListener('notification-received', handleNotification);
 
+    // Listen to socket events for immediate notification count refresh
+    const unsubConnectionReq = socketService.onConnectionRequest(() => fetchCount());
+    const unsubConnectionRes = socketService.onConnectionResponse(() => fetchCount());
+    const unsubNewMessage = socketService.onNewMessage(() => fetchCount());
+
     return () => {
       clearInterval(interval);
       window.removeEventListener('notification-received', handleNotification);
+      unsubConnectionReq();
+      unsubConnectionRes();
+      unsubNewMessage();
     };
   }, [status]);