feat(notifications): implement real-time notification system with websocket and toast integration (#476)

[xtep103]

Overview

Implements a comprehensive real-time notification system with WebSocket event streaming, unread count badge, interactive dropdown panel, toast integration for task/payment events, and local storage offline persistence.

Related Issue

Closes #476

Changes

Notification Core & Context

• [MODIFY] frontend/src/types/notification.ts
  • Added task_completed, task_failed, payment_received, agent_registered event types, message fields, and updated NotificationContextValue.
• [MODIFY] frontend/src/context/NotificationContext.tsx
  • Implemented NotificationProvider with localStorage persistence, exponential-backoff WebSocket connection, event mapping, toast dispatch triggers, markAsRead, markAllAsRead, and clearAll.
• [MODIFY] frontend/src/hooks/useNotifications.ts
  • Updated hook to expose notifications, unreadCount, markAsRead, markAllAsRead, clearAll, and connection status with safe fallbacks.

Notification Components

• [ADD] frontend/src/components/notifications/NotificationBell.tsx
  • Dedicated bell header button component displaying unread badge and dropdown toggle.
• [ADD] frontend/src/components/notifications/NotificationPanel.tsx
  • Scrollable dropdown panel sorting notifications newest-first with "Mark all as read" and "Clear all" actions.
• [MODIFY] frontend/src/components/notifications/NotificationItem.tsx
  • Type-specific icons for task, payment, and agent events with relative timestamp and unread indicators.
• [MODIFY] frontend/src/components/notifications/NotificationCenter.tsx
  • Forwarding wrapper for backward compatibility.
• [MODIFY] frontend/src/components/notifications/NotificationCenter.css
  • Styles for notification panel, unread count pill, item badges, action buttons, and empty state.
• [MODIFY] frontend/src/components/layout/TopNav.tsx
  • Integrated NotificationBell in the header bar.

Build & Test Cleanups

• [MODIFY] frontend/src/context/ToastContext.tsx
  • Cleaned up merge conflict syntax duplicates and exported ToastContextValue and useToast.
• [MODIFY] frontend/src/App.tsx
  • Structured providers and fixed nested Router.
• [ADD] frontend/src/components/notifications/NotificationBell.test.tsx
  • Unit tests for NotificationBell rendering, badge counts, and toggle interactions.
• [MODIFY] frontend/src/components/notifications/NotificationCenter.test.tsx
  • Extended test suite covering dropdown actions, mark all as read, clear all, real-time WebSocket events, and toast dispatching.

Verification Results

✓ npm test (34 test files, 253 tests passed)
✓ npm run build (tsc --noEmit && vite build succeeded with 0 errors)

Acceptance Criteria	Status
NotificationBell shows unread count badge (e.g. "3")	✅ Implemented with notification-badge
Clicking the bell opens a dropdown with notifications sorted newest-first	✅ Dropdown panel with newest-first ordering
Marking a notification as read updates the badge count	✅ Clicking item marks as read and decreases unread count
"Mark all as read" clears the badge	✅ markAllAsRead() sets all to read and clears badge
New WebSocket events appear in the notification panel within 1s	✅ Real-time message handler adds notifications instantly
Notifications persist across page refreshes (localStorage)	✅ Synchronized to ai_net_notifications key
Toast notification appears for task_completed and payment_received events	✅ Dispatches app-toast events automatically

[drips-wave]

@xtep103 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[vercel]

@xtep103 is attempting to deploy a commit to the Jaja's projects Team on Vercel.

A member of the Team first needs to authorize it.

[devJaja]

@xtep103

Resolve the conflicts