feat(ui): notification center with leveled toasts and error capture

- Replace the toast store with a notification store: levels (info/success/
  warning/error/fatal), requiresInteraction, and a persisted history.
- Move toasts to the top-right, styled per level, with manual dismiss.
- Add a bell in the header opening a Notification Center (history, unread badge,
  'needs attention' vs info, clear all).
- Capture network failures and 5xx responses (api layer) and render crashes
  (ErrorBoundary) as notifications.
- Sound + server-sourced events + per-account settings remain for 6b.

frontend/src/components/NotificationCenter.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from "react";
+import { useSyncExternalStore } from "react";
+import { Bell, Trash2 } from "lucide-react";
+import {
+  clearAll,
+  dismiss,
+  getNotifications,
+  getUnreadCount,
+  markAllRead,
+  subscribe,
+} from "../lib/notifications";
+import { LEVEL_STYLE } from "./Toaster";
+
+function relTime(ts: number): string {
+  const s = Math.round((Date.now() - ts) / 1000);
+  if (s < 60) return "just now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.round(h / 24);
+  return `${d}d ago`;
+}
+
+export default function NotificationCenter() {
+  const notifications = useSyncExternalStore(subscribe, getNotifications, getNotifications);
+  const unread = useSyncExternalStore(subscribe, getUnreadCount, getUnreadCount);
+  const [open, setOpen] = useState(false);
+  const wrap = useRef<HTMLDivElement>(null);
+
+  // Opening the center marks everything read.
+  useEffect(() => {
+    if (open) markAllRead();
+  }, [open, notifications.length]);
+
+  return (
+    <div className="relative" ref={wrap}>
+      <button
+        onClick={() => setOpen((o) => !o)}
+        title="Notifications"
+        className="relative p-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
+      >
+        <Bell className="w-5 h-5" />
+        {unread > 0 && (
+          <span className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full bg-accent text-accent-fg text-[10px] font-bold grid place-items-center">
+            {unread > 9 ? "9+" : unread}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-20" onClick={() => setOpen(false)} />
+          <div className="absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-surface shadow-2xl z-30 flex flex-col max-h-[70vh]">
+            <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+              <div className="text-sm font-semibold">Notifications</div>
+              {notifications.length > 0 && (
+                <button
+                  onClick={clearAll}
+                  className="flex items-center gap-1 text-xs text-muted hover:text-accent transition"
+                  title="Clear all"
+                >
+                  <Trash2 className="w-3.5 h-3.5" />
+                  Clear
+                </button>
+              )}
+            </div>
+
+            <div className="overflow-y-auto">
+              {notifications.length === 0 ? (
+                <div className="px-3 py-8 text-center text-sm text-muted">
+                  No notifications yet.
+                </div>
+              ) : (
+                notifications.map((n) => {
+                  const { icon: Icon, color } = LEVEL_STYLE[n.level];
+                  const needsAction = n.requiresInteraction && !n.dismissed;
+                  return (
+                    <div
+                      key={n.id}
+                      className={`flex items-start gap-2.5 px-3 py-2.5 border-b border-border/60 ${
+                        needsAction ? "bg-accent/5" : ""
+                      }`}
+                    >
+                      <Icon className={`w-4 h-4 shrink-0 mt-0.5 ${color}`} />
+                      <div className="min-w-0 flex-1">
+                        {n.title && <div className="text-sm font-semibold">{n.title}</div>}
+                        <div className="text-sm break-words">{n.message}</div>
+                        <div className="flex items-center gap-2 mt-0.5">
+                          <span className="text-[11px] text-muted">{relTime(n.ts)}</span>
+                          {needsAction && (
+                            <span className="text-[10px] uppercase tracking-wide font-semibold text-accent">
+                              Action needed
+                            </span>
+                          )}
+                        </div>
+                        {n.action && !n.dismissed && (
+                          <button
+                            onClick={() => {
+                              n.action!.onClick();
+                              dismiss(n.id);
+                            }}
+                            className="mt-1 text-accent text-sm font-semibold hover:underline"
+                          >
+                            {n.action.label}
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}