CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to Pulse (frontend and product) are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and Pulse uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html) with a **0.x.y** version scheme while in initial development. The leading `0` indicates that the public API and behaviour may change until we release **1.0.0**.
 
+## [Unreleased]
+
+## [0.6.0-alpha] - 2026-02-13
+
+### Added
+
+- **In-app notification center.** Bell icon in the header with dropdown of recent notifications. Uptime monitor status changes (down, degraded, recovered) create in-app notifications with links to the uptime page.
+
 ## [0.5.1-alpha] - 2026-02-12
 
 ### Changed
@@ -51,7 +59,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ---
 
-[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.5.1-alpha...HEAD
+[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.6.0-alpha...HEAD
+[0.6.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.1-alpha...v0.6.0-alpha
 [0.5.1-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.0-alpha...v0.5.1-alpha
 [0.5.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.4.0-alpha...v0.5.0-alpha
 [0.4.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.3.0-alpha...v0.4.0-alpha

app/layout-content.tsx

@@ -2,7 +2,8 @@
 
 import { OfflineBanner } from '@/components/OfflineBanner'
 import { Footer } from '@/components/Footer'
-import { Header, GridIcon } from '@ciphera-net/ui'
+import { Header } from '@ciphera-net/ui'
+import NotificationCenter from '@/components/notifications/NotificationCenter'
 import { useAuth } from '@/lib/auth/context'
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus'
 import Link from 'next/link'
@@ -63,6 +64,7 @@ export default function LayoutContent({ children }: { children: React.ReactNode
         showSecurity={false}
         showPricing={true}
         topOffset={showOfflineBar ? `${barHeightRem}rem` : undefined}
+        rightSideActions={auth.user ? <NotificationCenter /> : null}
         customNavItems={
           <>
             {!auth.user && (

components/notifications/NotificationCenter.tsx

@@ -0,0 +1,230 @@
+'use client'
+
+/**
+ * @file Notification center: bell icon with dropdown of recent notifications.
+ */
+
+import { useEffect, useState, useRef } from 'react'
+import Link from 'next/link'
+import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications'
+import { getAuthErrorMessage } from '@/lib/utils/authErrors'
+import { AlertTriangleIcon, CheckCircleIcon } from '@ciphera-net/ui'
+
+// * Bell icon (simple SVG, no extra deps)
+function BellIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+    </svg>
+  )
+}
+
+function formatTimeAgo(dateStr: string): string {
+  const d = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - d.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+  if (diffMins < 1) return 'Just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+  return d.toLocaleDateString()
+}
+
+function getTypeIcon(type: string) {
+  if (type.includes('down') || type.includes('degraded')) {
+    return <AlertTriangleIcon className="w-4 h-4 shrink-0 text-amber-500" />
+  }
+  return <CheckCircleIcon className="w-4 h-4 shrink-0 text-emerald-500" />
+}
+
+export default function NotificationCenter() {
+  const [open, setOpen] = useState(false)
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const [unreadCount, setUnreadCount] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const fetchNotifications = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await listNotifications()
+      setNotifications(res.notifications)
+      setUnreadCount(res.unread_count)
+    } catch (err) {
+      setError(getAuthErrorMessage(err as Error) || 'Failed to load notifications')
+      setNotifications([])
+      setUnreadCount(0)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      fetchNotifications()
+    }
+  }, [open])
+
+  // * Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [open])
+
+  const handleMarkRead = async (id: string) => {
+    try {
+      await markNotificationRead(id)
+      setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)))
+      setUnreadCount((c) => Math.max(0, c - 1))
+    } catch {
+      // Ignore; user can retry
+    }
+  }
+
+  const handleMarkAllRead = async () => {
+    try {
+      await markAllNotificationsRead()
+      setNotifications((prev) => prev.map((n) => ({ ...n, read: true })))
+      setUnreadCount(0)
+    } catch {
+      // Ignore
+    }
+  }
+
+  const handleNotificationClick = (n: Notification) => {
+    if (!n.read) {
+      handleMarkRead(n.id)
+    }
+    setOpen(false)
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="relative p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-colors"
+        aria-label={unreadCount > 0 ? `${unreadCount} unread notifications` : 'Notifications'}
+      >
+        <BellIcon />
+        {unreadCount > 0 && (
+          <span className="absolute top-1 right-1 w-2 h-2 bg-brand-orange rounded-full" />
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-2 w-80 sm:w-96 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100]">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
+            <h3 className="font-semibold text-neutral-900 dark:text-white">Notifications</h3>
+            {unreadCount > 0 && (
+              <button
+                type="button"
+                onClick={handleMarkAllRead}
+                className="text-sm text-brand-orange hover:underline"
+              >
+                Mark all read
+              </button>
+            )}
+          </div>
+
+          <div className="max-h-80 overflow-y-auto">
+            {loading && (
+              <div className="p-6 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                Loading…
+              </div>
+            )}
+            {error && (
+              <div className="p-6 text-center text-red-500 text-sm">{error}</div>
+            )}
+            {!loading && !error && notifications.length === 0 && (
+              <div className="p-6 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                No notifications yet
+              </div>
+            )}
+            {!loading && !error && notifications.length > 0 && (
+              <ul className="divide-y divide-neutral-200 dark:divide-neutral-700">
+                {notifications.map((n) => (
+                  <li key={n.id}>
+                    {n.link_url ? (
+                      <Link
+                        href={n.link_url}
+                        onClick={() => handleNotificationClick(n)}
+                        className={`block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
+                      >
+                        <div className="flex gap-3">
+                          {getTypeIcon(n.type)}
+                          <div className="min-w-0 flex-1">
+                            <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
+                              {n.title}
+                            </p>
+                            {n.body && (
+                              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
+                                {n.body}
+                              </p>
+                            )}
+                            <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+                              {formatTimeAgo(n.created_at)}
+                            </p>
+                          </div>
+                        </div>
+                      </Link>
+                    ) : (
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => handleNotificationClick(n)}
+                        onKeyDown={(e) => e.key === 'Enter' && handleNotificationClick(n)}
+                        className={`block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 cursor-pointer ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
+                      >
+                        <div className="flex gap-3">
+                          {getTypeIcon(n.type)}
+                          <div className="min-w-0 flex-1">
+                            <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
+                              {n.title}
+                            </p>
+                            {n.body && (
+                              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
+                                {n.body}
+                              </p>
+                            )}
+                            <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+                              {formatTimeAgo(n.created_at)}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

lib/api/notifications.ts

@@ -0,0 +1,39 @@
+/**
+ * @file Notifications API client
+ */
+
+import apiRequest from './client'
+
+export interface Notification {
+  id: string
+  organization_id: string
+  type: string
+  title: string
+  body?: string
+  read: boolean
+  link_url?: string
+  link_label?: string
+  metadata?: Record<string, unknown>
+  created_at: string
+}
+
+export interface ListNotificationsResponse {
+  notifications: Notification[]
+  unread_count: number
+}
+
+export async function listNotifications(): Promise<ListNotificationsResponse> {
+  return apiRequest<ListNotificationsResponse>('/notifications')
+}
+
+export async function markNotificationRead(id: string): Promise<void> {
+  return apiRequest<void>(`/notifications/${id}/read`, {
+    method: 'PATCH',
+  })
+}
+
+export async function markAllNotificationsRead(): Promise<void> {
+  return apiRequest<void>('/notifications/mark-all-read', {
+    method: 'POST',
+  })
+}

package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "pulse-frontend",
-  "version": "0.4.0-alpha",
+  "version": "0.6.0-alpha",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-frontend",
-      "version": "0.4.0-alpha",
+      "version": "0.6.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.49",
+        "@ciphera-net/ui": "^0.0.50",
         "@ducanh2912/next-pwa": "^10.2.9",
+        "@radix-ui/react-icons": "^1.3.0",
         "axios": "^1.13.2",
         "country-flag-icons": "^1.6.4",
         "d3-scale": "^4.0.2",
@@ -44,6 +45,30 @@
         "typescript": "^5.5.4"
       }
     },
+    "../../ciphera-ui": {
+      "name": "@ciphera-net/ui",
+      "version": "0.0.50",
+      "dependencies": {
+        "@radix-ui/react-icons": "^1.3.0",
+        "clsx": "^2.1.0",
+        "framer-motion": "^12.0.0",
+        "sonner": "^2.0.7",
+        "tailwind-merge": "^2.2.0"
+      },
+      "devDependencies": {
+        "@svgr/cli": "^8.1.0",
+        "@types/node": "^25.0.10",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "tailwindcss": "^3.4.0",
+        "tsup": "^8.0.0",
+        "typescript": "^5.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "dev": true,
@@ -1469,20 +1494,8 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.49",
+      "resolved": "../../ciphera-ui",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.49/ef6f7f06a134bc3d3b4cb1086f689ddb34f1652a",
+      "link": true
-      "integrity": "sha512-ga2n0kO7JeOFzVVRX+FU5iQxodv2yE/hUnlEUHEomorKzWCADM9wAOLGcxi8mcVz49jy/4IQlHRdpF9LH64uQg==",
-      "dependencies": {
-        "@radix-ui/react-icons": "^1.3.0",
-        "clsx": "^2.1.0",
-        "framer-motion": "^12.0.0",
-        "sonner": "^2.0.7",
-        "tailwind-merge": "^2.2.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
     },
     "node_modules/@ducanh2912/next-pwa": {
       "version": "10.2.9",
@@ -2436,6 +2449,8 @@
     },
     "node_modules/@radix-ui/react-icons": {
       "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
@@ -9411,14 +9426,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/tailwind-merge": {
-      "version": "2.6.0",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "dev": true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-frontend",
-  "version": "0.5.0-alpha",
+  "version": "0.6.0-alpha",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,7 +10,8 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.49",
+    "@ciphera-net/ui": "^0.0.50",
+    "@radix-ui/react-icons": "^1.3.0",
     "@ducanh2912/next-pwa": "^10.2.9",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",