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/ErrorBoundary.tsx

@@ -0,0 +1,48 @@
+import { Component, type ReactNode } from "react";
+import { notify } from "../lib/notifications";
+
+interface Props {
+  children: ReactNode;
+}
+interface State {
+  crashed: boolean;
+}
+
+// Catches render-time crashes anywhere in the tree, logs a fatal notification (kept
+// in the center across the reload) and offers a recovery action.
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = { crashed: false };
+
+  static getDerivedStateFromError(): State {
+    return { crashed: true };
+  }
+
+  componentDidCatch(error: Error) {
+    notify({
+      level: "fatal",
+      title: "Something broke",
+      message: error.message || "Unexpected error",
+      requiresInteraction: true,
+    });
+  }
+
+  render() {
+    if (this.state.crashed) {
+      return (
+        <div className="min-h-screen grid place-items-center text-muted p-6 text-center">
+          <div>
+            <div className="text-lg font-semibold text-fg mb-1">Something went wrong.</div>
+            <div className="text-sm mb-3">The app hit an unexpected error.</div>
+            <button
+              onClick={() => location.reload()}
+              className="text-accent hover:underline text-sm font-semibold"
+            >
+              Reload
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

frontend/src/components/Feed.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-query";
 import { api, type FeedFilters, type Video } from "../lib/api";
-import { toast } from "../lib/toast";
+import { toast } from "../lib/notifications";
 import VideoCard from "./VideoCard";
 
 const PAGE = 60;

frontend/src/components/Header.tsx

@@ -12,6 +12,7 @@ import {
 import { SCHEMES, type Scheme, type ThemePrefs } from "../lib/theme";
 import type { FeedFilters, Me } from "../lib/api";
 import SyncStatus from "./SyncStatus";
+import NotificationCenter from "./NotificationCenter";
 
 function IconBtn(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   const { className = "", ...rest } = props;
@@ -130,6 +131,8 @@ export default function Header({
           )}
         </div>
 
+        <NotificationCenter />
+
         <div className="pl-1">
           <AccountMenu me={me} logout={logout} />
         </div>

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>
+  );
+}

frontend/src/components/Toaster.tsx

@@ -1,29 +1,68 @@
 import { useSyncExternalStore } from "react";
-import { dismiss, getToasts, subscribe } from "../lib/toast";
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  Info,
+  X,
+  XCircle,
+} from "lucide-react";
+import {
+  dismiss,
+  getActiveToasts,
+  subscribe,
+  type NotifLevel,
+} from "../lib/notifications";
+
+export const LEVEL_STYLE: Record<
+  NotifLevel,
+  { icon: typeof Info; color: string }
+> = {
+  info: { icon: Info, color: "text-accent" },
+  success: { icon: CheckCircle2, color: "text-emerald-400" },
+  warning: { icon: AlertTriangle, color: "text-amber-400" },
+  error: { icon: AlertCircle, color: "text-red-400" },
+  fatal: { icon: XCircle, color: "text-red-500" },
+};
 
 export default function Toaster() {
-  const toasts = useSyncExternalStore(subscribe, getToasts, getToasts);
+  const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
+
   return (
-    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
-      {toasts.map((t) => (
-        <div
-          key={t.id}
-          className="bg-surface border border-border rounded-xl shadow-2xl px-4 py-3 flex items-center gap-4 animate-[fadeIn_0.15s_ease]"
-        >
-          <span className="text-sm">{t.message}</span>
-          {t.action && (
+    <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
+      {toasts.map((t) => {
+        const { icon: Icon, color } = LEVEL_STYLE[t.level];
+        return (
+          <div
+            key={t.id}
+            className="bg-surface border border-border rounded-xl shadow-2xl px-3 py-3 flex items-start gap-3 animate-[fadeIn_0.15s_ease]"
+          >
+            <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
+            <div className="min-w-0 flex-1">
+              {t.title && <div className="text-sm font-semibold">{t.title}</div>}
+              <div className="text-sm break-words">{t.message}</div>
+              {t.action && (
+                <button
+                  onClick={() => {
+                    t.action!.onClick();
+                    dismiss(t.id);
+                  }}
+                  className="mt-1 text-accent text-sm font-semibold hover:underline"
+                >
+                  {t.action.label}
+                </button>
+              )}
+            </div>
             <button
-              onClick={() => {
-                t.action!.onClick();
-                dismiss(t.id);
-              }}
-              className="text-accent text-sm font-semibold hover:underline"
+              onClick={() => dismiss(t.id)}
+              className="shrink-0 text-muted hover:text-fg"
+              title="Dismiss"
             >
-              {t.action.label}
+              <X className="w-4 h-4" />
             </button>
-          )}
-        </div>
-      ))}
+          </div>
+        );
+      })}
     </div>
   );
 }