From 9d5434db98e6e10acd0c005e9356082fa6e930b2 Mon Sep 17 00:00:00 2001
From: xtep103 <302179003+xtep103@users.noreply.github.com>
Date: Mon, 31 Aug 2026 16:48:00 +0100
Subject: [PATCH] feat(notifications): implement real-time notification system
 with websocket and toast integration (#476)

---
 frontend/src/App.tsx                          | 126 ++++++++--------
 .../components/agents/AgentDetailModal.tsx    |   1 +
 .../agents/AgentReputationRadar.test.tsx      |   2 +-
 frontend/src/components/agents/AgentTable.tsx |  19 +--
 .../components/agents/TaskSubmissionForm.tsx  |  40 ++---
 frontend/src/components/common/DataTable.tsx  |  34 ++++-
 .../src/components/common/FormField.test.tsx  |   2 +-
 frontend/src/components/common/Toast.css      |   8 -
 frontend/src/components/landing/Hero.tsx      |  11 +-
 frontend/src/components/layout/TopNav.tsx     |  35 +----
 .../notifications/NotificationBell.test.tsx   | 106 +++++++++++++
 .../notifications/NotificationBell.tsx        |  45 ++++++
 .../notifications/NotificationCenter.css      |  59 +++++++-
 .../notifications/NotificationCenter.test.tsx |  67 ++++++++-
 .../notifications/NotificationCenter.tsx      | 121 +--------------
 .../notifications/NotificationItem.tsx        |  13 +-
 .../notifications/NotificationPanel.tsx       | 139 ++++++++++++++++++
 .../src/components/notifications/index.ts     |   2 +
 .../src/components/wallet/SendXLMForm.tsx     |  99 ++++++++-----
 .../components/wallet/TransactionTable.tsx    |  22 ---
 frontend/src/context/NotificationContext.tsx  | 104 ++++++++++---
 frontend/src/context/ToastContext.tsx         |  74 ++++------
 frontend/src/hooks/useNotifications.ts        |   3 +-
 frontend/src/pages/dashboard.tsx              |   1 -
 frontend/src/styles/global.css                |   6 +-
 frontend/src/types/notification.ts            |  31 +++-
 26 files changed, 754 insertions(+), 416 deletions(-)
 create mode 100644 frontend/src/components/notifications/NotificationBell.test.tsx
 create mode 100644 frontend/src/components/notifications/NotificationBell.tsx
 create mode 100644 frontend/src/components/notifications/NotificationPanel.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6bed989f..f6d89983 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,37 +17,11 @@ import RendererDemoPage from './pages/RendererDemoPage'
 import WalletPage from './pages/WalletPage'
 import DashboardPage from './pages/dashboard'
 import ErrorBoundary from './components/common/ErrorBoundary'
-import { ProtectedRoute } from './components/common/ProtectedRoute'
+import { ProtectedRoute } from './components/auth/ProtectedRoute'
 import { CommandPalette } from './components/common/CommandPalette'
 import { useCommandPalette } from './hooks/useCommandPalette'
-import { ProtectedRoute } from './components/auth/ProtectedRoute'
 import './components/common/Toast.css'
 
-/**
- * Everything that needs router context lives here, so `<Router>` (mounted by
- * `App` below) is already in place before `useCommandPalette` calls
- * `useNavigate`.
- */
-const AppContent: React.FC = () => {
-  return (
-    <Router>
-      <AppShell>
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
-          <Route path="/wallet" element={<WalletPage />} />
-          <Route path="/agents" element={<AgentsPage />} />
-          <Route path="/tasks/new" element={<ProtectedRoute><NewTaskPage /></ProtectedRoute>} />
-          <Route path="/tasks/:id" element={<ProtectedRoute><TaskDetailPage /></ProtectedRoute>} />
-          <Route path="/renderer-demo" element={<RendererDemoPage />} />
-        </Routes>
-      </AppShell>
-    <NotificationProvider>
-      <RoutedContent />
-    </NotificationProvider>
-  )
-}
-
 // Lives INSIDE <Router>: useCommandPalette() calls useNavigate(), which
 // throws the "may be used only in the context of a <Router>" invariant when
 // rendered above it.
@@ -58,34 +32,67 @@ const RoutedContent: React.FC = () => {
     <>
       <Routes>
         <Route path="/" element={<LandingPage />} />
-        <Route path="/*" element={
-          <AppShell>
-            <Routes>
-              <Route path="/dashboard" element={
-                <ProtectedRoute><DashboardPage /></ProtectedRoute>
-              } />
-              <Route path="/wallet" element={
-                <ProtectedRoute><WalletPage /></ProtectedRoute>
-              } />
-              <Route path="/agents" element={
-                <ProtectedRoute><AgentsPage /></ProtectedRoute>
-              } />
-              <Route path="/tasks/new" element={
-                <ProtectedRoute><NewTaskPage /></ProtectedRoute>
-              } />
-              <Route path="/tasks/history" element={
-                <ProtectedRoute><TaskHistoryPage /></ProtectedRoute>
-              } />
-              <Route path="/tasks/:id" element={
-                <ProtectedRoute><TaskDetailPage /></ProtectedRoute>
-              } />
-              {import.meta.env.DEV && (
-                <Route path="/renderer-demo" element={<RendererDemoPage />} />
-              )}
-              <Route path="*" element={<NotFoundPage />} />
-            </Routes>
-          </AppShell>
-        } />
+        <Route
+          path="/*"
+          element={
+            <AppShell>
+              <Routes>
+                <Route
+                  path="/dashboard"
+                  element={
+                    <ProtectedRoute>
+                      <DashboardPage />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/wallet"
+                  element={
+                    <ProtectedRoute>
+                      <WalletPage />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/agents"
+                  element={
+                    <ProtectedRoute>
+                      <AgentsPage />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/tasks/new"
+                  element={
+                    <ProtectedRoute>
+                      <NewTaskPage />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/tasks/history"
+                  element={
+                    <ProtectedRoute>
+                      <TaskHistoryPage />
+                    </ProtectedRoute>
+                  }
+                />
+                <Route
+                  path="/tasks/:id"
+                  element={
+                    <ProtectedRoute>
+                      <TaskDetailPage />
+                    </ProtectedRoute>
+                  }
+                />
+                {import.meta.env.DEV && (
+                  <Route path="/renderer-demo" element={<RendererDemoPage />} />
+                )}
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </AppShell>
+          }
+        />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
       <CommandPalette
@@ -94,7 +101,6 @@ const RoutedContent: React.FC = () => {
         onSearch={search}
         recentSearches={recentSearches}
         onRecentSearchClick={(query) => {
-          // Trigger search with the recent query
           search(query)
         }}
       />
@@ -109,9 +115,11 @@ const App: React.FC = () => {
         <ThemeProvider>
           <WalletProvider>
             <ToastProvider>
-              <Router>
-                <AppContent />
-              </Router>
+              <NotificationProvider>
+                <Router>
+                  <RoutedContent />
+                </Router>
+              </NotificationProvider>
             </ToastProvider>
           </WalletProvider>
         </ThemeProvider>
diff --git a/frontend/src/components/agents/AgentDetailModal.tsx b/frontend/src/components/agents/AgentDetailModal.tsx
index 952679c6..5c0b87e4 100644
--- a/frontend/src/components/agents/AgentDetailModal.tsx
+++ b/frontend/src/components/agents/AgentDetailModal.tsx
@@ -17,6 +17,7 @@ interface AgentDetailModalProps {
 
 export function AgentDetailModal({ agent, onClose }: AgentDetailModalProps) {
   const { t } = useTranslation()
+  const { data: reputationData, loading: reputationLoading } = useAgentReputation(agent?.id || '')
 
   useEffect(() => {
     if (!agent) return
diff --git a/frontend/src/components/agents/AgentReputationRadar.test.tsx b/frontend/src/components/agents/AgentReputationRadar.test.tsx
index f2696827..7a94a3d1 100644
--- a/frontend/src/components/agents/AgentReputationRadar.test.tsx
+++ b/frontend/src/components/agents/AgentReputationRadar.test.tsx
@@ -8,7 +8,7 @@ vi.mock('recharts', async () => {
   return {
     ...OriginalRecharts,
     ResponsiveContainer: ({ children }: any) => (
-      <div style={{ width: '100%', height: 250 }}>{children}</div>
+      <div className="recharts-wrapper" style={{ width: '100%', height: 250 }}>{children}</div>
     ),
   };
 });
diff --git a/frontend/src/components/agents/AgentTable.tsx b/frontend/src/components/agents/AgentTable.tsx
index eeaa1f22..8a207380 100644
--- a/frontend/src/components/agents/AgentTable.tsx
+++ b/frontend/src/components/agents/AgentTable.tsx
@@ -9,10 +9,10 @@ import styles from './AgentTable.module.css'
 interface AgentTableProps {
   agents: AgentRecord[]
   loading: boolean
-  sortKey: SortKey | null
-  sortDir: SortDir
+  sortKey?: SortKey | null
+  sortDir?: SortDir
   /** Toggle/apply sort on the given column. Reputation only sorts desc. */
-  onSort: (key: SortKey) => void
+  onSort?: (key: SortKey) => void
   onRowClick: (agent: AgentRecord) => void
 }
 
@@ -23,15 +23,6 @@ function truncateId(id: string): string {
   return `${id.slice(0, 6)}…${id.slice(-4)}`
 }
 
-function SortIcon({ active, dir }: { active: boolean; dir: SortDir }) {
-  if (!active) return <ArrowUpDown size={12} aria-hidden="true" />
-  return dir === 'asc' ? (
-    <ArrowUp size={12} aria-hidden="true" />
-  ) : (
-    <ArrowDown size={12} aria-hidden="true" />
-  )
-}
-
 export function AgentTable({
   agents,
   loading,
@@ -88,6 +79,10 @@ export function AgentTable({
           columns={columns}
           rows={agents}
           getRowKey={(agent) => agent.id}
+          getRowTestId={(agent) => `agent-row-${agent.id}`}
+          sortKey={sortKey}
+          sortDirection={sortDir}
+          onSort={(key) => onSort?.(key as SortKey)}
           maxHeight={540}
           stickyHeader
           onRowClick={onRowClick}
diff --git a/frontend/src/components/agents/TaskSubmissionForm.tsx b/frontend/src/components/agents/TaskSubmissionForm.tsx
index bb9b52d5..f3872379 100644
--- a/frontend/src/components/agents/TaskSubmissionForm.tsx
+++ b/frontend/src/components/agents/TaskSubmissionForm.tsx
@@ -1,15 +1,13 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
 import { DAGPreview } from './DAGPreview';
 import { useTaskSubmit } from '../../hooks/useTaskSubmit';
-import { useToast } from '../../hooks/useToast';
 import { useToast } from '../../context/ToastContext';
-import { FormField } from '../common/FormField';
-import { taskSchema, type TaskFormValues } from '../../schemas/task';
 import type { AgentPreference, TaskSubmitResponse } from '../../services/taskService';
 
 // Only the label is translated: `value` is the wire format the API and the zod
@@ -41,9 +39,6 @@ type TaskFormValues = z.infer<ReturnType<typeof makeTaskSchema>>;
 export function TaskSubmissionForm() {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
-  const { showToast } = useToast();
-  const [preview, setPreview] = useState<TaskSubmitResponse['dagPreview'] | null>(null);
-  const { submitTask, status, data } = useTaskSubmit();
   const [preview, setPreview] = useState<TaskSubmitResponse['dagPreview'] | null>(null);
   const { submitTask, status, error, data } = useTaskSubmit();
   const { showToast } = useToast();
@@ -54,7 +49,7 @@ export function TaskSubmissionForm() {
         value,
         label: t(`task.submit.pref.${value}`),
       })),
-    [t],
+    [t]
   );
 
   const taskSchema = useMemo(() => makeTaskSchema(t), [t]);
@@ -66,7 +61,6 @@ export function TaskSubmissionForm() {
     trigger,
     formState: { errors, isSubmitting, isSubmitted },
   } = useForm<TaskFormValues>({
-    mode: 'onBlur',
     resolver: zodResolver(taskSchema),
     defaultValues: {
       prompt: '',
@@ -94,7 +88,6 @@ export function TaskSubmissionForm() {
     try {
       const result = await submitTask(values);
       setPreview(result.dagPreview);
-      showToast('Task submitted successfully!', 'success');
 
       window.setTimeout(() => {
         navigate(`/tasks/${result.taskId}`);
@@ -134,7 +127,7 @@ export function TaskSubmissionForm() {
             aria-invalid={Boolean(errors.prompt)}
             aria-describedby="prompt-error"
           />
-          <p id="prompt-error" style={{ color: 'var(--danger)', marginTop: 8 }}>
+          <p id="prompt-error" style={{ color: '#b91c1c', marginTop: 8 }}>
             {errors.prompt?.message}
           </p>
         </div>
@@ -153,7 +146,7 @@ export function TaskSubmissionForm() {
             aria-invalid={Boolean(errors.maxBudgetXLM)}
             aria-describedby="budget-error"
           />
-          <p id="budget-error" style={{ color: 'var(--danger)', marginTop: 8 }}>
+          <p id="budget-error" style={{ color: '#b91c1c', marginTop: 8 }}>
             {budgetHelperText}
           </p>
         </div>
@@ -208,35 +201,29 @@ export function TaskSubmissionForm() {
               </div>
             )}
           />
-          <div aria-live="polite" id="agentPreferences-error">
-            {errors.agentPreferences && (
-              <p style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#b91c1c', marginTop: 8, fontSize: '0.875rem' }}>
-                <AlertCircle size={16} />
-                {errors.agentPreferences.message}
-              </p>
-            )}
-          </div>
+          <p id="agentPreferences-error" style={{ color: '#b91c1c', marginTop: 8 }}>
+            {errors.agentPreferences?.message}
+          </p>
         </div>
 
         <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 32 }}>
           <button
             type="submit"
             id="btn-submit-task"
-            disabled={isLoading || !isValid}
+            disabled={isLoading}
             style={{
               padding: '12px 20px',
               borderRadius: 10,
               border: 'none',
-              background: (!isValid || isLoading) ? '#9ca3af' : '#2563eb',
+              background: '#2563eb',
               color: '#ffffff',
-              cursor: (!isValid || isLoading) ? 'not-allowed' : 'pointer',
-              transition: 'background 0.2s',
+              cursor: isLoading ? 'not-allowed' : 'pointer',
             }}
           >
             {isLoading ? t('task.submit.submitting') : t('task.submit.submit')}
           </button>
           {status === 'success' && (
-            <span style={{ color: 'var(--success)' }}>{t('task.submit.success')}</span>
+            <span style={{ color: '#16a34a' }}>{t('task.submit.success')}</span>
           )}
         </div>
       </form>
@@ -260,9 +247,8 @@ export function TaskSubmissionForm() {
             marginTop: 24,
             padding: 16,
             borderRadius: 12,
-            background: 'var(--bg-secondary)',
-            color: 'var(--danger)',
-            border: '1px solid var(--danger)',
+            background: '#f8d7da',
+            color: '#842029',
           }}
         >
           {error}
diff --git a/frontend/src/components/common/DataTable.tsx b/frontend/src/components/common/DataTable.tsx
index a36e0027..c4b42b9b 100644
--- a/frontend/src/components/common/DataTable.tsx
+++ b/frontend/src/components/common/DataTable.tsx
@@ -28,6 +28,10 @@ export interface DataTableProps<T> {
   onRowSelect?: (row: T) => void;
   onRowClick?: (row: T) => void;
   rowClassName?: (row: T) => string;
+  getRowTestId?: (row: T) => string;
+  sortKey?: string | null;
+  sortDirection?: SortDirection;
+  onSort?: (key: string) => void;
 }
 
 function getCellValue<T>(row: T, key: string): string | number | boolean | null {
@@ -69,17 +73,28 @@ export function DataTable<T>({
   stickyHeader = true,
   virtualization = false,
   rowHeight = 48,
-  selectedRowKeys = [],
+  selectedRowKeys: selectedRowKeysProp = [],
   onRowSelect,
   onRowClick,
   rowClassName,
+  getRowTestId,
+  sortKey: externalSortKey,
+  sortDirection: externalSortDirection,
+  onSort: externalOnSort,
 }: DataTableProps<T>) {
-  const [sortKey, setSortKey] = useState<string | null>(null);
-  const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
+  const [internalSortKey, setInternalSortKey] = useState<string | null>(null);
+  const [internalSortDirection, setInternalSortDirection] = useState<SortDirection>('asc');
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string | number>>(selectedRowKeysProp);
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const [scrollTop, setScrollTop] = useState(0);
 
-  const sortedRows = useMemo(() => sortRows(rows, sortKey, sortDirection), [rows, sortKey, sortDirection]);
+  const sortKey = externalSortKey !== undefined ? externalSortKey : internalSortKey;
+  const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;
+
+  const sortedRows = useMemo(() => {
+    if (externalOnSort) return rows;
+    return sortRows(rows, sortKey, sortDirection);
+  }, [rows, sortKey, sortDirection, externalOnSort]);
 
   const itemCount = sortedRows.length;
   const overscan = 6;
@@ -89,12 +104,16 @@ export function DataTable<T>({
     : itemCount;
   const visibleRows = virtualization ? sortedRows.slice(startIndex, endIndex) : sortedRows;
 
-  const handleSelect = (key: string | number, row: T) => {
+  const handleSelect = (_key: string | number, row: T) => {
     if (onRowSelect) onRowSelect(row);
   };
 
   const handleSort = (column: DataTableColumn<T>) => {
     if (!column.sortable) return;
+    if (externalOnSort) {
+      externalOnSort(column.key);
+      return;
+    }
     const nextKey = column.key;
     let nextDirection: SortDirection = 'asc';
 
@@ -102,8 +121,8 @@ export function DataTable<T>({
       nextDirection = sortDirection === 'asc' ? 'desc' : 'asc';
     }
 
-    setSortKey(nextKey);
-    setSortDirection(nextDirection);
+    setInternalSortKey(nextKey);
+    setInternalSortDirection(nextDirection);
   };
 
   if (rows.length === 0) {
@@ -159,6 +178,7 @@ export function DataTable<T>({
               return (
                 <tr
                   key={rowKey}
+                  data-testid={getRowTestId ? getRowTestId(row) : undefined}
                   className={classes.join(' ')}
                   onClick={() => onRowClick?.(row)}
                   tabIndex={onRowClick ? 0 : undefined}
diff --git a/frontend/src/components/common/FormField.test.tsx b/frontend/src/components/common/FormField.test.tsx
index 6e7cd185..6e4abd16 100644
--- a/frontend/src/components/common/FormField.test.tsx
+++ b/frontend/src/components/common/FormField.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import { FormField } from './FormField';
 
diff --git a/frontend/src/components/common/Toast.css b/frontend/src/components/common/Toast.css
index e45876cc..87430f67 100644
--- a/frontend/src/components/common/Toast.css
+++ b/frontend/src/components/common/Toast.css
@@ -145,14 +145,6 @@
     transform: translateY(0) scale(1);
   }
 }
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
 
 @media (max-width: 480px) {
   .toast-container {
diff --git a/frontend/src/components/landing/Hero.tsx b/frontend/src/components/landing/Hero.tsx
index a1b9e2e3..e29a1b15 100644
--- a/frontend/src/components/landing/Hero.tsx
+++ b/frontend/src/components/landing/Hero.tsx
@@ -13,11 +13,8 @@ const Hero: React.FC = () => {
   const { canvasRef, prefersReducedMotion } = useParticles()
 
   return (
-    <motion.section
+    <section
       className={`flex flex-col items-center text-center pt-24 pb-20 px-4 max-w-4xl mx-auto ${styles.heroContainer}`}
-      variants={containerVariants}
-      initial="hidden"
-      animate="visible"
     >
       {!prefersReducedMotion ? (
         <canvas ref={canvasRef} className={styles.particleCanvas} />
@@ -48,7 +45,7 @@ const Hero: React.FC = () => {
       >
         <div className="w-1.5 h-1.5 rounded-full bg-accent-green shadow-[0_0_8px_rgba(52,211,153,0.6)] animate-pulse" />
         <span className="text-xs font-semibold text-accent-green tracking-wide">{t('landing.hero.badge')}</span>
-      </motion.div>
+      </div>
 
       {/* Headline */}
       <h1
@@ -62,7 +59,7 @@ const Hero: React.FC = () => {
             <span key="accent" className="bg-clip-text text-transparent bg-gradient-primary" />,
           ]}
         />
-      </motion.h1>
+      </h1>
 
       {/* Subtext */}
       <p
@@ -70,7 +67,7 @@ const Hero: React.FC = () => {
         style={{ animationDelay: '400ms' }}
       >
         {t('landing.hero.subtitle')}
-      </motion.p>
+      </p>
 
       {/* CTAs */}
       <div
diff --git a/frontend/src/components/layout/TopNav.tsx b/frontend/src/components/layout/TopNav.tsx
index 0b0fda9f..d5066fb9 100644
--- a/frontend/src/components/layout/TopNav.tsx
+++ b/frontend/src/components/layout/TopNav.tsx
@@ -1,10 +1,8 @@
-import React, { useState, useRef } from 'react'
+import React from 'react'
 import { useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Bell } from 'lucide-react'
 import { useWallet } from '../../context/WalletContext'
-import { useNotifications } from '../../hooks/useNotifications'
-import { NotificationCenter } from '../notifications/NotificationCenter'
+import { NotificationBell } from '../notifications/NotificationBell'
 import { SUPPORTED_LANGUAGES } from '../../i18n/options'
 import type { SupportedLanguage } from '../../i18n/options'
 import './TopNav.css'
@@ -42,9 +40,6 @@ const TopNav: React.FC<TopNavProps> = ({
   isDrawerOpen = false,
 }) => {
   const { publicKey, connected, ready, connectionMethod, disconnect } = useWallet()
-  const { unreadCount } = useNotifications()
-  const [isNotificationOpen, setIsNotificationOpen] = useState(false)
-  const bellButtonRef = useRef<HTMLButtonElement>(null)
   const { t, i18n } = useTranslation()
   const location = useLocation()
   const { mode, setMode } = useTheme()
@@ -107,31 +102,7 @@ const TopNav: React.FC<TopNavProps> = ({
       </div>
 
       <div className="nav-right">
-        <div className="notification-wrapper">
-          <button
-            ref={bellButtonRef}
-            type="button"
-            className={`notification-bell-btn ${isNotificationOpen ? 'active' : ''}`}
-            onClick={() => setIsNotificationOpen(prev => !prev)}
-            aria-label="Notifications"
-            aria-expanded={isNotificationOpen}
-            id="btn-notifications"
-            data-testid="notification-bell-btn"
-          >
-            <Bell size={20} />
-            {unreadCount > 0 && (
-              <span className="notification-badge" data-testid="notification-badge">
-                {unreadCount > 99 ? '99+' : unreadCount}
-              </span>
-            )}
-          </button>
-
-          <NotificationCenter
-            isOpen={isNotificationOpen}
-            onClose={() => setIsNotificationOpen(false)}
-            anchorRef={bellButtonRef}
-          />
-        </div>
+        <NotificationBell />
 
         {/* Theme toggle: cycles light -> dark -> system */}
         <button
diff --git a/frontend/src/components/notifications/NotificationBell.test.tsx b/frontend/src/components/notifications/NotificationBell.test.tsx
new file mode 100644
index 00000000..ba821feb
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationBell.test.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import { NotificationProvider, NOTIFICATIONS_STORAGE_KEY } from '../../context/NotificationContext';
+import NotificationBell from './NotificationBell';
+import type { AppNotification } from '../../types/notification';
+
+vi.mock('framer-motion', async () => {
+  const actual = await vi.importActual<typeof import('framer-motion')>('framer-motion');
+  return {
+    ...actual,
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    motion: {
+      div: React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+        ({ children, ...props }, ref) => <div ref={ref} {...props}>{children}</div>
+      ),
+      li: React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+        ({ children, ...props }, ref) => <li ref={ref} {...props}>{children}</li>
+      ),
+    },
+  };
+});
+
+const sampleNotifications: AppNotification[] = [
+  {
+    id: 'bell-notif-1',
+    type: 'task_completed',
+    title: 'Task Done',
+    message: 'Finished task 1',
+    timestamp: new Date().toISOString(),
+    read: false,
+  },
+  {
+    id: 'bell-notif-2',
+    type: 'payment_received',
+    title: 'Funds Received',
+    message: 'Received 10 XLM',
+    timestamp: new Date().toISOString(),
+    read: false,
+  },
+  {
+    id: 'bell-notif-3',
+    type: 'agent_registered',
+    title: 'Agent Added',
+    message: 'New agent ready',
+    timestamp: new Date().toISOString(),
+    read: true,
+  },
+];
+
+const renderBellWithProvider = (initial?: AppNotification[]) => {
+  if (initial) {
+    localStorage.setItem(NOTIFICATIONS_STORAGE_KEY, JSON.stringify(initial));
+  } else {
+    localStorage.removeItem(NOTIFICATIONS_STORAGE_KEY);
+  }
+
+  return render(
+    <MemoryRouter>
+      <NotificationProvider>
+        <NotificationBell />
+      </NotificationProvider>
+    </MemoryRouter>
+  );
+};
+
+describe('NotificationBell Component', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  test('renders bell button and badge with unread count', () => {
+    renderBellWithProvider(sampleNotifications);
+
+    const bellBtn = screen.getByTestId('notification-bell-btn');
+    expect(bellBtn).toBeInTheDocument();
+
+    const badge = screen.getByTestId('notification-badge');
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveTextContent('2');
+  });
+
+  test('toggles dropdown panel on button click', async () => {
+    renderBellWithProvider(sampleNotifications);
+
+    const bellBtn = screen.getByTestId('notification-bell-btn');
+    expect(screen.queryByTestId('notification-panel')).not.toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(bellBtn);
+    });
+
+    expect(screen.getByTestId('notification-panel')).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(bellBtn);
+    });
+
+    expect(screen.queryByTestId('notification-panel')).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/notifications/NotificationBell.tsx b/frontend/src/components/notifications/NotificationBell.tsx
new file mode 100644
index 00000000..0781fba7
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationBell.tsx
@@ -0,0 +1,45 @@
+import React, { useState, useRef } from 'react';
+import { Bell } from 'lucide-react';
+import { useNotifications } from '../../hooks/useNotifications';
+import NotificationPanel from './NotificationPanel';
+import './NotificationCenter.css';
+
+interface NotificationBellProps {
+  className?: string;
+}
+
+export const NotificationBell: React.FC<NotificationBellProps> = ({ className = '' }) => {
+  const { unreadCount } = useNotifications();
+  const [isOpen, setIsOpen] = useState(false);
+  const bellButtonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div className={`notification-wrapper ${className}`}>
+      <button
+        ref={bellButtonRef}
+        type="button"
+        className={`notification-bell-btn ${isOpen ? 'active' : ''}`}
+        onClick={() => setIsOpen(prev => !prev)}
+        aria-label="Notifications"
+        aria-expanded={isOpen}
+        id="btn-notifications"
+        data-testid="notification-bell-btn"
+      >
+        <Bell size={20} />
+        {unreadCount > 0 && (
+          <span className="notification-badge" data-testid="notification-badge">
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        )}
+      </button>
+
+      <NotificationPanel
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        anchorRef={bellButtonRef}
+      />
+    </div>
+  );
+};
+
+export default NotificationBell;
diff --git a/frontend/src/components/notifications/NotificationCenter.css b/frontend/src/components/notifications/NotificationCenter.css
index e082eb98..1561aedd 100644
--- a/frontend/src/components/notifications/NotificationCenter.css
+++ b/frontend/src/components/notifications/NotificationCenter.css
@@ -53,6 +53,12 @@
   letter-spacing: 0.04em;
 }
 
+.notification-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .mark-all-read-btn {
   display: inline-flex;
   align-items: center;
@@ -73,6 +79,24 @@
   background: rgba(56, 189, 248, 0.08);
 }
 
+.clear-all-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary, #8a93a3);
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.clear-all-btn:hover {
+  color: var(--error-red, #ef4444);
+  background: rgba(239, 68, 68, 0.1);
+}
+
 /* Body / List */
 .notification-panel-body {
   max-height: 420px;
@@ -156,19 +180,28 @@
   transition: all 0.2s ease;
 }
 
-.notification-icon-wrapper.task {
+.notification-icon-wrapper.task,
+.notification-icon-wrapper.task_completed {
   background: rgba(52, 211, 153, 0.12);
   border-color: rgba(52, 211, 153, 0.3);
   color: #34d399;
 }
 
-.notification-icon-wrapper.payment {
+.notification-icon-wrapper.task_failed {
+  background: rgba(239, 68, 68, 0.12);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+}
+
+.notification-icon-wrapper.payment,
+.notification-icon-wrapper.payment_received {
   background: rgba(251, 191, 36, 0.12);
   border-color: rgba(251, 191, 36, 0.3);
   color: #fbbf24;
 }
 
-.notification-icon-wrapper.agent {
+.notification-icon-wrapper.agent,
+.notification-icon-wrapper.agent_registered {
   background: rgba(139, 92, 246, 0.12);
   border-color: rgba(139, 92, 246, 0.3);
   color: #a78bfa;
@@ -180,6 +213,26 @@
   color: #38bdf8;
 }
 
+.notification-icon-task {
+  color: #34d399;
+}
+
+.notification-icon-error {
+  color: #ef4444;
+}
+
+.notification-icon-payment {
+  color: #fbbf24;
+}
+
+.notification-icon-agent {
+  color: #a78bfa;
+}
+
+.notification-icon-system {
+  color: #38bdf8;
+}
+
 .notification-content {
   flex: 1;
   min-width: 0;
diff --git a/frontend/src/components/notifications/NotificationCenter.test.tsx b/frontend/src/components/notifications/NotificationCenter.test.tsx
index 33ba0ec5..ccea0ad6 100644
--- a/frontend/src/components/notifications/NotificationCenter.test.tsx
+++ b/frontend/src/components/notifications/NotificationCenter.test.tsx
@@ -36,8 +36,9 @@ vi.mock('react-router-dom', async () => {
 const sampleNotifications: AppNotification[] = [
   {
     id: 'notif-1',
-    type: 'task',
+    type: 'task_completed',
     title: 'Task Completed',
+    message: 'Task #101 execution has completed.',
     description: 'Task #101 execution has completed.',
     timestamp: new Date(Date.now() - 60000).toISOString(), // 1 min ago
     read: false,
@@ -45,8 +46,9 @@ const sampleNotifications: AppNotification[] = [
   },
   {
     id: 'notif-2',
-    type: 'payment',
+    type: 'payment_received',
     title: 'Payment Released',
+    message: 'Payment of 5 XLM released.',
     description: 'Payment of 5 XLM released.',
     timestamp: new Date(Date.now() - 3600000).toISOString(), // 1 hour ago
     read: false,
@@ -54,8 +56,9 @@ const sampleNotifications: AppNotification[] = [
   },
   {
     id: 'notif-3',
-    type: 'agent',
+    type: 'agent_registered',
     title: 'Agent Status Changed',
+    message: 'Research agent is now online.',
     description: 'Research agent is now online.',
     timestamp: new Date(Date.now() - 86400000).toISOString(), // 1 day ago
     read: true,
@@ -209,6 +212,28 @@ describe('NotificationCenter Component', () => {
     expect(stored.every((n: AppNotification) => n.read)).toBe(true);
   });
 
+  test('"Clear all" button clears all notifications from list and localStorage', async () => {
+    renderTopNavWithProvider(sampleNotifications);
+
+    const bellBtn = screen.getByTestId('notification-bell-btn');
+    await act(async () => {
+      fireEvent.click(bellBtn);
+    });
+
+    const clearAllBtn = screen.getByTestId('clear-all-btn');
+    expect(clearAllBtn).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(clearAllBtn);
+    });
+
+    expect(screen.getByTestId('notification-empty-state')).toBeInTheDocument();
+    expect(screen.queryByTestId('notification-badge')).not.toBeInTheDocument();
+
+    const stored = JSON.parse(localStorage.getItem(NOTIFICATIONS_STORAGE_KEY) || '[]');
+    expect(stored).toEqual([]);
+  });
+
   test('closes panel when pressing Escape key', async () => {
     renderTopNavWithProvider(sampleNotifications);
 
@@ -258,10 +283,13 @@ describe('NotificationCenter Component', () => {
     expect(found2.read).toBe(true);
   });
 
-  test('real-time events add new notifications to the top of the list', async () => {
+  test('real-time events add new notifications to the top of the list and trigger toast events', async () => {
+    const toastSpy = vi.fn();
+    window.addEventListener('app-toast', toastSpy);
+
     renderTopNavWithProvider([]);
 
-    // Trigger a simulated real-time event via window custom event
+    // Trigger a simulated real-time task_completed event via window custom event
     await act(async () => {
       window.dispatchEvent(
         new CustomEvent('ai-net-notification', {
@@ -279,6 +307,9 @@ describe('NotificationCenter Component', () => {
     const badge = screen.getByTestId('notification-badge');
     expect(badge).toHaveTextContent('1');
 
+    // Toast event should have been dispatched
+    expect(toastSpy).toHaveBeenCalled();
+
     // Open panel
     const bellBtn = screen.getByTestId('notification-bell-btn');
     await act(async () => {
@@ -287,5 +318,31 @@ describe('NotificationCenter Component', () => {
 
     expect(screen.getByText('Task Completed')).toBeInTheDocument();
     expect(screen.getByText('Task task-live-999 completed successfully.')).toBeInTheDocument();
+
+    window.removeEventListener('app-toast', toastSpy);
+  });
+
+  test('real-time payment_received events trigger toast notifications', async () => {
+    const toastSpy = vi.fn();
+    window.addEventListener('app-toast', toastSpy);
+
+    renderTopNavWithProvider([]);
+
+    await act(async () => {
+      window.dispatchEvent(
+        new CustomEvent('ai-net-notification', {
+          detail: {
+            type: 'payment_received',
+            taskId: 'task-pay-123',
+            payload: { amount: '10.5', txHash: 'abc12345678' },
+            timestamp: new Date().toISOString(),
+          },
+        })
+      );
+    });
+
+    expect(toastSpy).toHaveBeenCalled();
+
+    window.removeEventListener('app-toast', toastSpy);
   });
 });
diff --git a/frontend/src/components/notifications/NotificationCenter.tsx b/frontend/src/components/notifications/NotificationCenter.tsx
index 8a84a5a2..b7ebef52 100644
--- a/frontend/src/components/notifications/NotificationCenter.tsx
+++ b/frontend/src/components/notifications/NotificationCenter.tsx
@@ -1,121 +1,10 @@
-import React, { useEffect, useRef } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { CheckCheck, Inbox } from 'lucide-react';
-import { useNotifications } from '../../hooks/useNotifications';
-import NotificationItem from './NotificationItem';
-import './NotificationCenter.css';
+import React from 'react';
+import { NotificationPanel, type NotificationPanelProps } from './NotificationPanel';
 
-interface NotificationCenterProps {
-  isOpen: boolean;
-  onClose: () => void;
-  anchorRef?: React.RefObject<HTMLElement>;
-}
+export type NotificationCenterProps = NotificationPanelProps;
 
-export const NotificationCenter: React.FC<NotificationCenterProps> = ({
-  isOpen,
-  onClose,
-  anchorRef,
-}) => {
-  const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications();
-  const panelRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    const handleClickOutside = (e: MouseEvent) => {
-      const target = e.target as Node;
-      if (panelRef.current && !panelRef.current.contains(target)) {
-        // If anchorRef (e.g. bell button) is passed and was clicked, ignore outside click
-        if (anchorRef?.current && anchorRef.current.contains(target)) {
-          return;
-        }
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen, onClose, anchorRef]);
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <motion.div
-          ref={panelRef}
-          className="notification-panel"
-          initial={{ opacity: 0, y: 10, scale: 0.98 }}
-          animate={{ opacity: 1, y: 0, scale: 1 }}
-          exit={{ opacity: 0, y: 8, scale: 0.98 }}
-          transition={{ duration: 0.15 }}
-          role="dialog"
-          aria-label="Notification Center"
-          data-testid="notification-panel"
-        >
-          {/* Header */}
-          <div className="notification-panel-header">
-            <div className="notification-panel-title-group">
-              <span className="notification-panel-title">Notifications</span>
-              {unreadCount > 0 && (
-                <span className="notification-unread-count-pill" data-testid="panel-unread-badge">
-                  {unreadCount} new
-                </span>
-              )}
-            </div>
-
-            {unreadCount > 0 && (
-              <button
-                type="button"
-                className="mark-all-read-btn"
-                onClick={markAllAsRead}
-                aria-label="Mark all as read"
-                data-testid="mark-all-read-btn"
-              >
-                <CheckCheck size={14} />
-                <span>Mark all as read</span>
-              </button>
-            )}
-          </div>
-
-          {/* Body */}
-          <div className="notification-panel-body">
-            {notifications.length === 0 ? (
-              <div className="notification-empty-state" data-testid="notification-empty-state">
-                <div className="empty-state-icon-wrapper">
-                  <Inbox size={28} className="empty-state-icon" />
-                </div>
-                <p className="empty-state-title">No notifications yet</p>
-                <p className="empty-state-subtitle">We'll alert you when tasks update or payments settle.</p>
-              </div>
-            ) : (
-              <div className="notification-list" role="feed" aria-label="Notifications list">
-                <AnimatePresence initial={false}>
-                  {notifications.map(notification => (
-                    <NotificationItem
-                      key={notification.id}
-                      notification={notification}
-                      onMarkAsRead={markAsRead}
-                      onClose={onClose}
-                    />
-                  ))}
-                </AnimatePresence>
-              </div>
-            )}
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
+export const NotificationCenter: React.FC<NotificationCenterProps> = (props) => {
+  return <NotificationPanel {...props} />;
 };
 
 export default NotificationCenter;
diff --git a/frontend/src/components/notifications/NotificationItem.tsx b/frontend/src/components/notifications/NotificationItem.tsx
index 9b9af8ca..cfc442ef 100644
--- a/frontend/src/components/notifications/NotificationItem.tsx
+++ b/frontend/src/components/notifications/NotificationItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { CheckCircle2, Coins, Bot, Bell, ChevronRight } from 'lucide-react';
+import { CheckCircle2, AlertCircle, Coins, Bot, Bell, ChevronRight } from 'lucide-react';
 import type { AppNotification, NotificationType } from '../../types/notification';
 import { formatRelativeTime } from '../../utils/time';
 
@@ -13,10 +13,15 @@ interface NotificationItemProps {
 
 const getNotificationIcon = (type: NotificationType) => {
   switch (type) {
+    case 'task_completed':
     case 'task':
       return <CheckCircle2 className="notification-icon-task" size={18} />;
+    case 'task_failed':
+      return <AlertCircle className="notification-icon-error" size={18} />;
+    case 'payment_received':
     case 'payment':
       return <Coins className="notification-icon-payment" size={18} />;
+    case 'agent_registered':
     case 'agent':
       return <Bot className="notification-icon-agent" size={18} />;
     case 'system':
@@ -49,6 +54,8 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
     }
   };
 
+  const messageText = notification.message || notification.description || '';
+
   return (
     <motion.div
       layout
@@ -61,7 +68,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
       onKeyDown={handleKeyDown}
       tabIndex={0}
       role="button"
-      aria-label={`${notification.title}: ${notification.description}`}
+      aria-label={`${notification.title}: ${messageText}`}
       data-testid={`notification-item-${notification.id}`}
     >
       <div className={`notification-icon-wrapper ${notification.type}`}>
@@ -76,7 +83,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
           </span>
         </div>
 
-        <p className="notification-description">{notification.description}</p>
+        {messageText && <p className="notification-description">{messageText}</p>}
 
         {notification.link && (
           <div className="notification-link-hint">
diff --git a/frontend/src/components/notifications/NotificationPanel.tsx b/frontend/src/components/notifications/NotificationPanel.tsx
new file mode 100644
index 00000000..20f64fef
--- /dev/null
+++ b/frontend/src/components/notifications/NotificationPanel.tsx
@@ -0,0 +1,139 @@
+import React, { useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { CheckCheck, Inbox, Trash2 } from 'lucide-react';
+import { useNotifications } from '../../hooks/useNotifications';
+import NotificationItem from './NotificationItem';
+import './NotificationCenter.css';
+
+export interface NotificationPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  anchorRef?: React.RefObject<HTMLElement>;
+}
+
+export const NotificationPanel: React.FC<NotificationPanelProps> = ({
+  isOpen,
+  onClose,
+  anchorRef,
+}) => {
+  const { notifications, unreadCount, markAsRead, markAllAsRead, clearAll } = useNotifications();
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (panelRef.current && !panelRef.current.contains(target)) {
+        if (anchorRef?.current && anchorRef.current.contains(target)) {
+          return;
+        }
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose, anchorRef]);
+
+  // Sort notifications newest first
+  const sortedNotifications = [...notifications].sort((a, b) => {
+    return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
+  });
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          ref={panelRef}
+          className="notification-panel"
+          initial={{ opacity: 0, y: 10, scale: 0.98 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 8, scale: 0.98 }}
+          transition={{ duration: 0.15 }}
+          role="dialog"
+          aria-label="Notification Center"
+          data-testid="notification-panel"
+        >
+          {/* Header */}
+          <div className="notification-panel-header">
+            <div className="notification-panel-title-group">
+              <span className="notification-panel-title">Notifications</span>
+              {unreadCount > 0 && (
+                <span className="notification-unread-count-pill" data-testid="panel-unread-badge">
+                  {unreadCount} new
+                </span>
+              )}
+            </div>
+
+            <div className="notification-panel-actions">
+              {unreadCount > 0 && (
+                <button
+                  type="button"
+                  className="mark-all-read-btn"
+                  onClick={markAllAsRead}
+                  aria-label="Mark all as read"
+                  data-testid="mark-all-read-btn"
+                >
+                  <CheckCheck size={14} />
+                  <span>Mark all as read</span>
+                </button>
+              )}
+              {notifications.length > 0 && (
+                <button
+                  type="button"
+                  className="clear-all-btn"
+                  onClick={clearAll}
+                  aria-label="Clear all notifications"
+                  title="Clear all"
+                  data-testid="clear-all-btn"
+                >
+                  <Trash2 size={13} />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Body */}
+          <div className="notification-panel-body">
+            {sortedNotifications.length === 0 ? (
+              <div className="notification-empty-state" data-testid="notification-empty-state">
+                <div className="empty-state-icon-wrapper">
+                  <Inbox size={28} className="empty-state-icon" />
+                </div>
+                <p className="empty-state-title">No notifications yet</p>
+                <p className="empty-state-subtitle">We'll alert you when tasks update or payments settle.</p>
+              </div>
+            ) : (
+              <div className="notification-list" role="feed" aria-label="Notifications list">
+                <AnimatePresence initial={false}>
+                  {sortedNotifications.map(notification => (
+                    <NotificationItem
+                      key={notification.id}
+                      notification={notification}
+                      onMarkAsRead={markAsRead}
+                      onClose={onClose}
+                    />
+                  ))}
+                </AnimatePresence>
+              </div>
+            )}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default NotificationPanel;
diff --git a/frontend/src/components/notifications/index.ts b/frontend/src/components/notifications/index.ts
index df90c7e8..2f9e83ed 100644
--- a/frontend/src/components/notifications/index.ts
+++ b/frontend/src/components/notifications/index.ts
@@ -1,3 +1,5 @@
+export { default as NotificationBell, NotificationBell as Bell } from './NotificationBell';
+export { default as NotificationPanel, NotificationPanel as Panel } from './NotificationPanel';
 export { default as NotificationCenter } from './NotificationCenter';
 export { default as NotificationItem } from './NotificationItem';
 export * from '../../types/notification';
diff --git a/frontend/src/components/wallet/SendXLMForm.tsx b/frontend/src/components/wallet/SendXLMForm.tsx
index 7f9ee57a..a20355a0 100644
--- a/frontend/src/components/wallet/SendXLMForm.tsx
+++ b/frontend/src/components/wallet/SendXLMForm.tsx
@@ -4,21 +4,38 @@ import { Keypair, TransactionBuilder, Operation, Asset, BASE_FEE, Networks, Memo
 import { useWallet } from '../../context/WalletContext'
 import { useWalletBalance } from '../../hooks/useWalletBalance'
 import { signTransactionWithFreighter } from '../../services/freighter'
-import { walletTransferSchema, type WalletTransferValues } from '../../schemas/wallet'
-import { FormField } from '../common/FormField'
 import styles from './SendXLMForm.module.css'
 
 const HORIZON_URL = 'https://horizon-testnet.stellar.org'
 
+function isValidStellarAddress(address: string): boolean {
+  try {
+    Keypair.fromPublicKey(address)
+    return true
+  } catch {
+    return false
+  }
+}
+
+interface ConfirmationData {
+  destination: string
+  amount: string
+  memo: string
+}
+
 export function SendXLMForm() {
   const { t } = useTranslation()
   const { publicKey, keypair, connected, connectionMethod } = useWallet()
   const { balance } = useWalletBalance(publicKey)
 
-  const [confirmation, setConfirmation] = useState<WalletTransferValues | null>(null)
+  const [destination, setDestination] = useState('')
+  const [amount, setAmount] = useState('')
+  const [memo, setMemo] = useState('')
+  const [errors, setErrors] = useState<{ destination?: string; amount?: string }>({})
+  const [confirmation, setConfirmation] = useState<ConfirmationData | null>(null)
+  const [submitting, setSubmitting] = useState(false)
   const [successTx, setSuccessTx] = useState<string | null>(null)
   const [submitError, setSubmitError] = useState<string | null>(null)
-  const [submitting, setSubmitting] = useState(false)
 
   const validateField = useCallback(
     (field: 'destination' | 'amount'): string | undefined => {
@@ -38,8 +55,6 @@ export function SendXLMForm() {
       }
       return undefined
     },
-    // `t` belongs here: these messages are re-validated and re-rendered, so a
-    // stale closure would keep showing them in the previous language.
     [destination, amount, balance, t]
   )
 
@@ -59,12 +74,9 @@ export function SendXLMForm() {
     const newErrors = { destination: destErr, amount: amtErr }
     setErrors(newErrors)
 
-  const handleSendClick = (data: WalletTransferValues) => {
-    setConfirmation({
-      destination: data.destination.trim(),
-      amount: data.amount,
-      memo: data.memo?.trim() || '',
-    })
+    if (!destErr && !amtErr) {
+      setConfirmation({ destination: destination.trim(), amount: amount.trim(), memo: memo.trim() })
+    }
   }
 
   const buildTransaction = async (): Promise<Transaction> => {
@@ -74,13 +86,14 @@ export function SendXLMForm() {
     let txBuilder = new TransactionBuilder(account, {
       fee: BASE_FEE,
       networkPassphrase: Networks.TESTNET,
-    }).addOperation(
-      Operation.payment({
-        destination: confirmation!.destination,
-        asset: Asset.native(),
-        amount: confirmation!.amount.toString(),
-      })
-    )
+    })
+      .addOperation(
+        Operation.payment({
+          destination: confirmation!.destination,
+          asset: Asset.native(),
+          amount: confirmation!.amount,
+        })
+      )
 
     if (confirmation!.memo) {
       const memoText = confirmation!.memo
@@ -103,8 +116,8 @@ export function SendXLMForm() {
       if (!keypair) return
     }
 
-    setSubmitError(null)
     setSubmitting(true)
+    setSubmitError(null)
 
     try {
       const transaction = await buildTransaction()
@@ -135,8 +148,11 @@ export function SendXLMForm() {
 
       const txHash = submitData.hash
       setSuccessTx(txHash)
-      reset()
+      setDestination('')
+      setAmount('')
+      setMemo('')
       setConfirmation(null)
+      setErrors({})
     } catch (err) {
       const message = err instanceof Error ? err.message : t('wallet.send.failedToSend')
       setSubmitError(message)
@@ -167,13 +183,22 @@ export function SendXLMForm() {
         </label>
         <input
           id="send-destination"
+          className={`${styles.input} ${errors.destination ? styles.inputError : ''}`}
+          type="text"
           placeholder="GABCD...1234"
-          error={errors.destination?.message}
-          isTouched={touchedFields.destination}
-          disabled={Boolean(successTx) || submitting}
-          className={styles.field}
-          {...register('destination')}
+          value={destination}
+          onChange={(e) => setDestination(e.target.value)}
+          onBlur={handleDestinationBlur}
+          aria-invalid={Boolean(errors.destination)}
+          aria-describedby="dest-error"
+          disabled={Boolean(successTx)}
         />
+        {errors.destination && (
+          <p id="dest-error" className={styles.error} role="alert">
+            {errors.destination}
+          </p>
+        )}
+      </div>
 
       <div className={styles.field}>
         <label className={styles.label} htmlFor="send-amount">
@@ -183,16 +208,15 @@ export function SendXLMForm() {
           id="send-amount"
           className={`${styles.input} ${errors.amount ? styles.inputError : ''}`}
           type="number"
-          id="send-amount"
           step="0.0000001"
           min="0"
           placeholder="0.0"
-          error={errors.amount?.message}
-          isTouched={touchedFields.amount}
-          helperText={`Available balance: ${parseFloat(balance).toFixed(7)} XLM`}
-          disabled={Boolean(successTx) || submitting}
-          className={styles.field}
-          {...register('amount')}
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          onBlur={handleAmountBlur}
+          aria-invalid={Boolean(errors.amount)}
+          aria-describedby="amount-error"
+          disabled={Boolean(successTx)}
         />
         <p className={styles.helper}>
           {t('wallet.send.availableBalance', { balance: parseFloat(balance).toFixed(7) })}
@@ -214,12 +238,11 @@ export function SendXLMForm() {
           type="text"
           placeholder={t('wallet.send.memoPlaceholder')}
           maxLength={28}
-          error={errors.memo?.message}
-          isTouched={touchedFields.memo}
-          disabled={Boolean(successTx) || submitting}
-          className={styles.field}
-          {...register('memo')}
+          value={memo}
+          onChange={(e) => setMemo(e.target.value)}
+          disabled={Boolean(successTx)}
         />
+      </div>
 
       <button
         id="btn-send-xlm"
diff --git a/frontend/src/components/wallet/TransactionTable.tsx b/frontend/src/components/wallet/TransactionTable.tsx
index 1ae5dbbb..6e05a292 100644
--- a/frontend/src/components/wallet/TransactionTable.tsx
+++ b/frontend/src/components/wallet/TransactionTable.tsx
@@ -232,28 +232,6 @@ export function TransactionTable({ transactions, loading, publicKey }: Transacti
         />
       )}
 
-      <div className={styles.pagination}>
-        <button type="button" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={currentPage === 1}>
-          Previous
-        </button>
-        <span>
-          Page {currentPage} of {totalPages}
-        </span>
-        <button type="button" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages}>
-          Next
-        </button>
-      </div>
-      <div className={styles.runningTotal}>
-        {t('wallet.tx.total')} {runningTotal > 0 ? '+' : ''}{runningTotal.toFixed(7)} XLM
-      </div>
-    </div>
-  )
-}            </span>
-          </div>
-        ))}
-      </div>
-      )}
-
       {filtered.length > 0 && (
         <div className={styles.footer}>
           <div className={styles.pagination}>
diff --git a/frontend/src/context/NotificationContext.tsx b/frontend/src/context/NotificationContext.tsx
index d2f05cec..90c69ae8 100644
--- a/frontend/src/context/NotificationContext.tsx
+++ b/frontend/src/context/NotificationContext.tsx
@@ -12,7 +12,11 @@ function loadInitialNotifications(): AppNotification[] {
     if (!raw) return [];
     const parsed = JSON.parse(raw);
     if (Array.isArray(parsed)) {
-      return parsed;
+      return parsed.map((item: any) => ({
+        ...item,
+        message: item.message || item.description || '',
+        description: item.description || item.message || '',
+      }));
     }
   } catch (err) {
     console.error('Failed to parse notifications from localStorage:', err);
@@ -20,6 +24,17 @@ function loadInitialNotifications(): AppNotification[] {
   return [];
 }
 
+/** Helper to dispatch an application toast event */
+export function triggerToastNotification(message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') {
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(
+      new CustomEvent('app-toast', {
+        detail: { message, type },
+      })
+    );
+  }
+}
+
 export function NotificationProvider({ children }: { children: ReactNode }) {
   const [notifications, setNotifications] = useState<AppNotification[]>(loadInitialNotifications);
   const [isConnected, setIsConnected] = useState<boolean>(false);
@@ -54,12 +69,16 @@ export function NotificationProvider({ children }: { children: ReactNode }) {
     const id = input.id || `notif_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
     const timestamp = input.timestamp || new Date().toISOString();
     const read = input.read ?? false;
+    const msg = input.message || input.description || '';
+    const desc = input.description || input.message || '';
 
     const newNotification: AppNotification = {
       ...input,
       id,
       timestamp,
       read,
+      message: msg,
+      description: desc,
     };
 
     setNotifications(prev => {
@@ -72,11 +91,11 @@ export function NotificationProvider({ children }: { children: ReactNode }) {
     setNotifications(prev => prev.filter(n => n.id !== id));
   }, []);
 
-  const clearNotifications = useCallback(() => {
+  const clearAll = useCallback(() => {
     setNotifications([]);
   }, []);
 
-  // Helper to map incoming WebSocket / event data to AppNotification
+  // Helper to map incoming WebSocket / event data to AppNotification and trigger toasts
   const handleIncomingEvent = useCallback((eventData: any) => {
     if (!eventData || typeof eventData !== 'object') return;
 
@@ -87,101 +106,131 @@ export function NotificationProvider({ children }: { children: ReactNode }) {
     const timestamp = eventData.timestamp || new Date().toISOString();
 
     let notification: NewNotificationInput | null = null;
+    let toastMessage: string | null = null;
+    let toastType: 'success' | 'error' | 'warning' | 'info' = 'info';
 
     switch (eventType) {
       case 'task_completed':
         notification = {
-          type: 'task',
+          type: 'task_completed',
           title: 'Task Completed',
+          message: `Task ${taskId || ''} completed successfully.`,
           description: `Task ${taskId || ''} completed successfully.`,
           link: taskId ? `/tasks/${taskId}` : '/dashboard',
           timestamp,
+          metadata: payload,
         };
+        toastMessage = `Task ${taskId || ''} completed successfully.`;
+        toastType = 'success';
         break;
 
       case 'task_failed':
         notification = {
-          type: 'task',
+          type: 'task_failed',
           title: 'Task Failed',
+          message: `Task ${taskId || ''} failed.${payload?.error ? ` Error: ${payload.error}` : ''}`,
           description: `Task ${taskId || ''} failed.${payload?.error ? ` Error: ${payload.error}` : ''}`,
           link: taskId ? `/tasks/${taskId}` : '/dashboard',
           timestamp,
+          metadata: payload,
         };
+        toastMessage = `Task ${taskId || ''} failed.`;
+        toastType = 'error';
         break;
 
       case 'node_completed':
         notification = {
-          type: 'task',
+          type: 'task_completed',
           title: 'DAG Node Completed',
+          message: `Node ${nodeId || 'task'} finished in task ${taskId || ''}.`,
           description: `Node ${nodeId || 'task'} finished in task ${taskId || ''}.`,
           link: taskId ? `/tasks/${taskId}` : '/dashboard',
           timestamp,
+          metadata: payload,
         };
         break;
 
       case 'node_failed':
         notification = {
-          type: 'task',
+          type: 'task_failed',
           title: 'DAG Node Failed',
+          message: `Node ${nodeId || 'task'} failed in task ${taskId || ''}.${payload?.error ? ` (${payload.error})` : ''}`,
           description: `Node ${nodeId || 'task'} failed in task ${taskId || ''}.${payload?.error ? ` (${payload.error})` : ''}`,
           link: taskId ? `/tasks/${taskId}` : '/dashboard',
           timestamp,
+          metadata: payload,
         };
         break;
 
+      case 'payment_received':
       case 'payment_released':
         notification = {
-          type: 'payment',
-          title: 'Payment Confirmed',
-          description: `Payment released for task ${taskId || ''}.${payload?.txHash ? ` Tx: ${payload.txHash.slice(0, 8)}...` : ''}`,
+          type: 'payment_received',
+          title: 'Payment Received',
+          message: `Payment received for task ${taskId || ''}.${payload?.amount ? ` (${payload.amount} XLM)` : ''}${payload?.txHash ? ` Tx: ${payload.txHash.slice(0, 8)}...` : ''}`,
+          description: `Payment received for task ${taskId || ''}.${payload?.amount ? ` (${payload.amount} XLM)` : ''}${payload?.txHash ? ` Tx: ${payload.txHash.slice(0, 8)}...` : ''}`,
           link: '/wallet',
           timestamp,
+          metadata: payload,
         };
+        toastMessage = `Payment of ${payload?.amount ? `${payload.amount} XLM` : 'funds'} received.`;
+        toastType = 'success';
         break;
 
       case 'payment_locked':
         notification = {
-          type: 'payment',
+          type: 'payment_received',
           title: 'Payment Escrow Locked',
+          message: `Payment locked in escrow for task ${taskId || ''}.`,
           description: `Payment locked in escrow for task ${taskId || ''}.`,
           link: '/wallet',
           timestamp,
+          metadata: payload,
         };
         break;
 
       case 'agent_status':
       case 'agent_registered':
         notification = {
-          type: 'agent',
-          title: 'Agent Status Changed',
-          description: payload?.message || `Agent ${payload?.agentId || 'status'} updated.`,
+          type: 'agent_registered',
+          title: 'Agent Registered',
+          message: payload?.message || `Agent ${payload?.agentId || payload?.name || 'status'} updated.`,
+          description: payload?.message || `Agent ${payload?.agentId || payload?.name || 'status'} updated.`,
           link: '/agents',
           timestamp,
+          metadata: payload,
         };
         break;
 
       case 'notification':
       case 'custom_notification':
-        if (payload?.title && payload?.description) {
+        if (payload?.title && (payload?.message || payload?.description)) {
           notification = {
             type: payload.type || 'system',
             title: payload.title,
-            description: payload.description,
+            message: payload.message || payload.description,
+            description: payload.description || payload.message,
             link: payload.link,
             timestamp,
+            metadata: payload,
           };
+          if (payload.toast) {
+            toastMessage = payload.message || payload.description;
+            toastType = payload.toastType || 'info';
+          }
         }
         break;
 
       default:
-        // If direct notification shape was sent
-        if (eventData.title && eventData.description) {
+        if (eventData.title && (eventData.message || eventData.description)) {
           notification = {
             type: eventData.type || 'system',
             title: eventData.title,
-            description: eventData.description,
+            message: eventData.message || eventData.description,
+            description: eventData.description || eventData.message,
             link: eventData.link,
             timestamp,
+            metadata: eventData.metadata || payload,
           };
         }
         break;
@@ -190,6 +239,10 @@ export function NotificationProvider({ children }: { children: ReactNode }) {
     if (notification) {
       addNotification(notification);
     }
+
+    if (toastMessage) {
+      triggerToastNotification(toastMessage, toastType);
+    }
   }, [addNotification]);
 
   // WebSocket connection management
@@ -241,12 +294,18 @@ export function NotificationProvider({ children }: { children: ReactNode }) {
 
     connect();
 
-    // Also listen for local custom events
+    // Also listen for local custom events (allows testing & client-side triggers)
     const handleCustomEvent = (e: Event) => {
       const customEvent = e as CustomEvent;
       if (customEvent.detail) {
-        if (customEvent.detail.title) {
+        if (customEvent.detail.title && (customEvent.detail.message || customEvent.detail.description)) {
           addNotification(customEvent.detail);
+          if (customEvent.detail.type === 'task_completed' || customEvent.detail.type === 'payment_received') {
+            triggerToastNotification(
+              customEvent.detail.message || customEvent.detail.description || customEvent.detail.title,
+              'success'
+            );
+          }
         } else {
           handleIncomingEvent(customEvent.detail);
         }
@@ -274,9 +333,10 @@ export function NotificationProvider({ children }: { children: ReactNode }) {
         unreadCount,
         markAsRead,
         markAllAsRead,
+        clearAll,
+        clearNotifications: clearAll,
         addNotification,
         removeNotification,
-        clearNotifications,
         isConnected,
       }}
     >
diff --git a/frontend/src/context/ToastContext.tsx b/frontend/src/context/ToastContext.tsx
index 3e0dc597..c70dfc94 100644
--- a/frontend/src/context/ToastContext.tsx
+++ b/frontend/src/context/ToastContext.tsx
@@ -1,7 +1,4 @@
-import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
-import type { ReactNode } from 'react';
-import { ToastContainer } from '../components/common/Toast';
-import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { createContext, useContext, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export type ToastType = 'success' | 'error' | 'warning' | 'info';
@@ -10,11 +7,10 @@ export interface Toast {
   id: string;
   message: string;
   type: ToastType;
-  duration: number;
   duration?: number;
 }
 
-interface ToastContextValue {
+export interface ToastContextValue {
   toasts: Toast[];
   showToast: (message: string, type?: ToastType, duration?: number) => void;
   dismissToast: (id: string) => void;
@@ -27,8 +23,25 @@ const defaultDurations: Record<ToastType, number> = {
   error: 10000,
 };
 
-export const ToastContext = createContext<ToastContextValue | undefined>(undefined);
-const ToastContext = createContext<ToastContextValue | null>(null);
+export const ToastContext = createContext<ToastContextValue | null>(null);
+
+function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
+  const { t } = useTranslation();
+
+  if (toasts.length === 0) return null;
+  return (
+    <div className="toast-container" role="alert" aria-live="polite">
+      {toasts.map((toast) => (
+        <div key={toast.id} className={`toast toast-${toast.type}`}>
+          <span>{toast.message}</span>
+          <button onClick={() => onDismiss(toast.id)} aria-label={t('a11y.dismiss')}>
+            &times;
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
 
 export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<Toast[]>([]);
@@ -47,7 +60,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
         window.setTimeout(() => dismissToast(id), duration);
       }
     },
-    [dismissToast],
+    [dismissToast]
   );
 
   useEffect(() => {
@@ -56,55 +69,32 @@ export function ToastProvider({ children }: { children: ReactNode }) {
       const message = customEvent.detail?.message;
       if (!message) return;
 
-      showToast(message, customEvent.detail?.type ?? 'info', customEvent.detail?.duration ?? defaultDurations[customEvent.detail?.type ?? 'info']);
+      showToast(
+        message,
+        customEvent.detail?.type ?? 'info',
+        customEvent.detail?.duration ?? defaultDurations[customEvent.detail?.type ?? 'info']
+      );
     };
 
     window.addEventListener('app-toast', handleExternalToast as EventListener);
     return () => window.removeEventListener('app-toast', handleExternalToast as EventListener);
   }, [showToast]);
 
-  const value = useMemo<ToastContextValue>(() => ({ toasts, showToast, dismissToast }), [toasts, showToast, dismissToast]);
+  const value = useMemo<ToastContextValue>(
+    () => ({ toasts, showToast, dismissToast }),
+    [toasts, showToast, dismissToast]
+  );
 
   return (
     <ToastContext.Provider value={value}>
-    setToasts(prev => prev.filter(t => t.id !== id));
-  }, []);
-
-  const showToast = useCallback((message: string, type: ToastType = 'info', duration = 5000) => {
-    const id = Math.random().toString(36).slice(2);
-    setToasts(prev => [...prev, { id, message, type, duration }]);
-
-    if (duration > 0) {
-      setTimeout(() => dismissToast(id), duration);
-    }
-  }, [dismissToast]);
-
-  return (
-    <ToastContext.Provider value={{ toasts, showToast, dismissToast }}>
       {children}
       <ToastContainer toasts={toasts} onDismiss={dismissToast} />
     </ToastContext.Provider>
   );
 }
 
-export function useToast() {
+export function useToast(): ToastContextValue {
   const context = useContext(ToastContext);
   if (!context) throw new Error('useToast must be used within ToastProvider');
   return context;
 }
-
-function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
-  const { t } = useTranslation();
-
-  if (toasts.length === 0) return null;
-  return (
-    <div className="toast-container" role="alert" aria-live="polite">
-      {toasts.map(toast => (
-        <div key={toast.id} className={`toast toast-${toast.type}`}>
-          <span>{toast.message}</span>
-          <button onClick={() => onDismiss(toast.id)} aria-label={t('a11y.dismiss')}>&times;</button>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/frontend/src/hooks/useNotifications.ts b/frontend/src/hooks/useNotifications.ts
index 4b58a1c9..7fd88c91 100644
--- a/frontend/src/hooks/useNotifications.ts
+++ b/frontend/src/hooks/useNotifications.ts
@@ -7,9 +7,10 @@ const fallbackValue: NotificationContextValue = {
   unreadCount: 0,
   markAsRead: () => {},
   markAllAsRead: () => {},
+  clearAll: () => {},
+  clearNotifications: () => {},
   addNotification: () => {},
   removeNotification: () => {},
-  clearNotifications: () => {},
   isConnected: false,
 };
 
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
index 0642046c..d7b3a914 100644
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 import { useWallet } from '../hooks/useWallet';
 import { useNetworkStats } from '../hooks/useNetworkStats';
-import { useToast } from '../context/ToastContext';
 import { DashboardLayout } from '../components/dashboard/DashboardLayout';
 import { KpiCard } from '../components/dashboard/KpiCard';
 import { NetworkHealthBadge } from '../components/dashboard/NetworkHealthBadge';
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 3192edcf..ab8d737e 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,10 +1,10 @@
+@import './animations.css';
+@import './micro-interactions.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import './animations.css';
-@import './micro-interactions.css';
-
 :root {
   --font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   --bg-primary: #0A0E14;
diff --git a/frontend/src/types/notification.ts b/frontend/src/types/notification.ts
index 05afb906..e974ffff 100644
--- a/frontend/src/types/notification.ts
+++ b/frontend/src/types/notification.ts
@@ -1,26 +1,45 @@
-export type NotificationType = 'task' | 'payment' | 'agent' | 'system';
+export type NotificationType =
+  | 'task_completed'
+  | 'task_failed'
+  | 'payment_received'
+  | 'agent_registered'
+  | 'task'
+  | 'payment'
+  | 'agent'
+  | 'system';
 
 export interface AppNotification {
   id: string;
   type: NotificationType;
   title: string;
-  description: string;
-  timestamp: string; // ISO-8601 string or epoch string
+  message: string;
+  description?: string; // backward compatibility
+  timestamp: string; // ISO-8601 string
   read: boolean;
   link?: string;
   metadata?: Record<string, unknown>;
 }
 
-export type NewNotificationInput = Omit<AppNotification, 'id' | 'timestamp' | 'read'> & 
-  Partial<Pick<AppNotification, 'id' | 'timestamp' | 'read'>>;
+export type NewNotificationInput = {
+  id?: string;
+  type: NotificationType;
+  title: string;
+  message?: string;
+  description?: string;
+  timestamp?: string;
+  read?: boolean;
+  link?: string;
+  metadata?: Record<string, unknown>;
+};
 
 export interface NotificationContextValue {
   notifications: AppNotification[];
   unreadCount: number;
   markAsRead: (id: string) => void;
   markAllAsRead: () => void;
+  clearAll: () => void;
+  clearNotifications: () => void; // alias for backward compatibility
   addNotification: (notification: NewNotificationInput) => void;
   removeNotification: (id: string) => void;
-  clearNotifications: () => void;
   isConnected: boolean;
 }