docs: Benachrichtigungen dokumentieren, Version 0.7.0

FEATURES beschreibt die drei Anlaesse, die Entprellung samt ihrer beiden
Feinheiten, die drei Zustellwege und die Absicherung. README bekommt die
neuen Endpunkte und Umgebungsvariablen, .env.example die SMTP-Vorlage.

ROADMAP: Benachrichtigungen erledigt. Neu an erster Stelle steht das Melden
stillstehender Projekte - das ist der einzige Anlass, der kein Ereignis hat,
an dem er haengt, und braucht deshalb einen eigenen Durchlauf. Ein doppelter
Eintrag zu Webhooks statt Polling ist dabei aufgefallen und entfernt.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

.env.example

@@ -56,6 +56,21 @@ APP_SECRET="bitte-aendern-mindestens-32-zeichen-langer-zufallswert"
 # Lebensdauer einer Anmeldung in Tagen.
 SESSION_TTL_DAYS="30"
 
+# ── Benachrichtigungen ───────────────────────────────────────
+# ntfy und Webhook brauchen nichts weiter – die Ziele werden in der
+# Anwendung unter "Mein Konto" eingerichtet.
+#
+# E-Mail steht erst zur Verfuegung, wenn SMTP_HOST gesetzt ist:
+# SMTP_HOST="smtp.example.com"
+# SMTP_PORT="587"
+# SMTP_SECURE="false"          # true bei Port 465, sonst STARTTLS
+# SMTP_USER="nebula@example.com"
+# SMTP_PASSWORD="geheim"
+# SMTP_FROM="Nebula <nebula@example.com>"
+
+# Timeout fuer das Zustellen in Millisekunden
+NOTIFY_TIMEOUT_MS="10000"
+
 # ── Ausgehende Git-Zugriffe ──────────────────────────────────
 # Timeout fuer Git-API-Aufrufe in Millisekunden
 GIT_API_TIMEOUT_MS="15000"

FEATURES.md

@@ -322,6 +322,56 @@ Dateneinsicht. Ein Administrator sieht dadurch weiterhin keine fremden Projekte.
 
 ---
 
+## 4b. Benachrichtigungen
+
+Einzurichten unter *Mein Konto → Benachrichtigungen*, pro Konto und beliebig viele Ziele.
+
+### Anlässe
+
+| Anlass | Wann |
+| --- | --- |
+| ⚠️ **Abgleich fehlgeschlagen** | Das Git-System war nicht erreichbar oder hat abgelehnt |
+| 🔴 **CI rot** | Der letzte Lauf auf dem Default-Branch ist fehlgeschlagen |
+| 🏷️ **Neues Release** | Ein neuer Tag oder ein neues Release ist aufgetaucht |
+
+### Nur bei Änderung
+
+Der entscheidende Punkt: Gemeldet wird **ausschließlich, wenn sich etwas ändert**
+gegenüber dem, worüber zuletzt benachrichtigt wurde. Ein Repository mit abgelaufenem
+Token meldet sich also **einmal**, nicht bei jedem stündlichen Durchlauf. Wird der Fehler
+ein anderer, kommt eine neue Meldung; ist er behoben und tritt später erneut auf, ebenso.
+
+Zwei Feinheiten:
+
+- **Beim allerersten Abgleich** eines Repositories wird kein Release gemeldet — sonst
+  wäre jede bereits vorhandene Version eine „Neuigkeit".
+- Der Merkstand wird auch dann fortgeschrieben, wenn **kein** Ziel eingerichtet ist. Sonst
+  käme beim ersten eingerichteten Ziel die ganze Vergangenheit hinterher.
+
+### Zustellwege
+
+| Weg | Details |
+| --- | --- |
+| **ntfy** | Vollständige Themen-URL. Titel, Priorität und Symbol als Kopfzeilen; optionales Bearer-Token für geschützte Themen. Läuft auch gegen ein selbst gehostetes ntfy im eigenen Netz. |
+| **Webhook** | JSON per POST mit Anlass, Titel, Text, Projektbezug und Tieflink. Mit hinterlegtem Geheimnis wird der Rumpf per HMAC-SHA256 signiert (`X-Nebula-Signature`), damit der Empfänger die Herkunft prüfen kann. |
+| **E-Mail** | Über SMTP. Steht erst zur Verfügung, wenn `SMTP_HOST` in der `.env` gesetzt ist — sonst ist die Auswahl in der Oberfläche gesperrt und erklärt, warum. |
+
+Jedes Ziel lässt sich einzeln **testen** und **pausieren**; Ergebnis und Zeitpunkt der
+letzten Zustellung stehen an der Karte.
+
+### Absicherung
+
+- Zieladressen sind Benutzereingaben, die der Server abruft — sie laufen deshalb durch
+  denselben **SSRF-Schutz** wie die Git-Verbindungen. Ein ntfy im eigenen Netz bleibt
+  erlaubt, Loopback und Cloud-Metadaten nicht.
+- Redirects werden **nicht verfolgt**: ein Umleitungsziel wäre nicht geprüft.
+- Geheimnisse liegen AES-256-GCM-verschlüsselt und verlassen den Server nie; die
+  Oberfläche zeigt nur einen Hinweis wie `test…mnis`.
+- Eine fehlgeschlagene Zustellung lässt den Abgleich nicht scheitern — der Fehler landet
+  am Ziel, nicht im Sync.
+
+---
+
 ## 5. Oberfläche
 
 - **Dark Glassmorphism**: milchige Glasflächen, driftende Nebel im Hintergrund, feines
@@ -349,6 +399,7 @@ Dateneinsicht. Ein Administrator sieht dadurch weiterhin keine fremden Projekte.
 | `AppSettings` | Betriebsart und Registrierung (eine Zeile) |
 | `Project` | Projektstammdaten, Status, Fortschritt, Repo-Verknüpfung, Besitzer |
 | `Task` | Aufgaben mit Spalte, Position, Fälligkeit und Labels |
+| `NotificationTarget` | Zustellwege je Konto, mit verschlüsseltem Geheimnis |
 | `Note` | Notizen (n:1 zu Projekt, Cascade-Delete) |
 | `GitConnection` | Git-Systeme inkl. verschlüsseltem Token, Besitzer |
 | `RepoSnapshot` | Zwischengespeicherter Repo-Stand (1:1 zu Projekt) |
@@ -414,6 +465,7 @@ Datenbank):
 | `security/ssrf` | Sperrlisten für Loopback, Link-Local, Metadaten-Endpunkt, CGNAT und Multicast; Formprüfung; die drei Umgebungsschalter |
 | `auth/password` | scrypt-Rundlauf, unterschiedliches Salz, Ablageformat, Verhalten bei kaputten Hashes, Passwortregeln |
 | `tasks` | Berechnung des abgeleiteten Fortschritts, Spaltenreihenfolge |
+| `notify/pending` | Wann eine Benachrichtigung fällig ist: neuer Fehler ja, gleicher Fehler nein; CI-Wechsel nach rot; Release erst ab dem zweiten Abgleich |
 
 **`npm run test:e2e` — Ende-zu-Ende** (Playwright, 13 Stück, rund 20 Sekunden). Läuft
 gegen die gebaute Anwendung mit eigener Datenbank auf Port 3111 — also durch Middleware,

README.md

@@ -127,6 +127,8 @@ Alle Variablen sind in [`.env.example`](.env.example) dokumentiert.
 | `GIT_ALLOW_LOOPBACK` | Git-Instanz auf demselben Rechner erlauben | `false` |
 | `GIT_BLOCK_PRIVATE` | Zugriff ins private LAN sperren | `false` |
 | `GIT_ALLOWED_HOSTS` | Strengster Modus: nur diese Hosts erlauben | leer |
+| `NOTIFY_TIMEOUT_MS` | Timeout beim Zustellen von Benachrichtigungen | `10000` |
+| `SMTP_HOST` … `SMTP_FROM` | SMTP-Zugang; ohne `SMTP_HOST` steht der Weg „E-Mail" nicht zur Verfügung | leer |
 
 `APP_NAME`, `APP_TAGLINE` und `APP_URL` werden **zur Laufzeit** gelesen. Dasselbe
 Docker-Image lässt sich also ohne Neubau umbenennen oder unter einer anderen Adresse
@@ -338,6 +340,9 @@ ausschließlich Daten des angemeldeten Kontos.
 | `POST` | `/api/projects/import` | Import, mit `dryRun` für die Vorschau |
 | `GET` | `/api/admin/backup` | Vollständige Sicherung als JSON (Admin) |
 | `GET` | `/api/search?q=` | Volltextsuche über die eigenen Notizen |
+| `GET` `POST` | `/api/notifications` | Benachrichtigungsziele |
+| `PATCH` `DELETE` | `/api/notifications/:id` | Ziel ändern / entfernen |
+| `POST` | `/api/notifications/:id/test` | Testnachricht senden |
 | `GET` `PATCH` `DELETE` | `/api/projects/:id` | Projekt lesen / ändern / löschen |
 | `POST` | `/api/projects/:id/sync` | Repo-Daten vom Git-System holen |
 | `GET` `POST` | `/api/projects/:id/tasks` | Aufgaben des Projekts |

ROADMAP.md

@@ -11,31 +11,30 @@ Was bereits steht, listet [FEATURES.md](FEATURES.md).
 
 ## 1 · Als Nächstes empfohlen
 
-### 1.1 Benachrichtigungen `M`
+### 1.1 Stillstehende Projekte melden `S`
 
-Bei Sync-Fehlern, roter CI, neuen Releases oder Projekten, die lange
+Die Benachrichtigungen decken Fehler und Releases ab. Was fehlt, ist der
-stillstehen. Kanäle: E-Mail (SMTP), ntfy, generischer Webhook. Zusammen mit
+sanfte Stups: „Seit 60 Tagen kein Commit". Braucht einen eigenen Durchlauf,
-dem automatischen Abgleich und dem CI-Status ergibt das ein brauchbares
+weil es kein Ereignis gibt, an dem es hängt — der Zeitgeber ist da.
-Frühwarnsystem — die Daten liegen bereits vor.
 
----
+### 1.2 Webhooks statt Polling `M`
-
-## 2 · Danach
-
-### 2.1 Webhooks statt Polling `M`
 
 Ein Push aktualisiert den Snapshot sofort, statt bis zum nächsten Durchlauf
 zu warten. Braucht einen öffentlich erreichbaren Endpunkt mit
 Signaturprüfung je Provider — sinnvoll erst, wenn die Instanz von außen
 erreichbar ist. Der Zeitplan bleibt als Rückfalllösung.
 
-### 2.2 Commit-Aktivität als Heatmap `S`
+---
+
+## 2 · Danach
+
+### 2.1 Commit-Aktivität als Heatmap `S`
 
 Die Sparkline gibt es auf Karte und Projektseite. Eine Heatmap über ein Jahr
 wäre die nächste Ausbaustufe — dafür braucht es allerdings mehr als eine
 Seite Commits, also Paginierung oder die Statistik-Endpunkte.
 
-### 2.3 Kanban mit freier Reihenfolge `M`
+### 2.2 Kanban mit freier Reihenfolge `M`
 
 Heute folgt die Reihenfolge innerhalb einer Spalte der gewählten Sortierung.
 Frei sortieren hieße, eine Position je Projekt zu speichern.
@@ -117,6 +116,7 @@ Damit klar ist, was **nicht** kommt und warum:
 | **v0.4.0** Kanban mit Drag & Drop, CI-Status je Branch, Commit-Aktivität | ✓ |
 | **v0.5.0** Aufgabenbrett je Projekt mit sortierbaren Spalten, Fortschritt aus Aufgaben | ✓ |
 | **v0.6.0** Ende-zu-Ende-Tests mit Playwright, CI-Pipeline für Gitea Actions | ✓ |
+| **v0.7.0** Benachrichtigungen über ntfy, Webhook und E-Mail | ✓ |
 
 Zur Entscheidung beim Export: Git-Tokens gehen **nicht** mit. Die Verbindung wird nur
 beschrieben, das Token ist nach dem Import neu zu hinterlegen. Snapshots bleiben

docker-compose.yml

@@ -59,6 +59,13 @@ services:
       APP_URL: ${APP_URL:-http://localhost:3000}
       SESSION_TTL_DAYS: ${SESSION_TTL_DAYS:-30}
       GIT_API_TIMEOUT_MS: ${GIT_API_TIMEOUT_MS:-15000}
+      NOTIFY_TIMEOUT_MS: ${NOTIFY_TIMEOUT_MS:-10000}
+      SMTP_HOST: ${SMTP_HOST:-}
+      SMTP_PORT: ${SMTP_PORT:-587}
+      SMTP_SECURE: ${SMTP_SECURE:-}
+      SMTP_USER: ${SMTP_USER:-}
+      SMTP_PASSWORD: ${SMTP_PASSWORD:-}
+      SMTP_FROM: ${SMTP_FROM:-}
       GIT_ALLOW_LOOPBACK: ${GIT_ALLOW_LOOPBACK:-false}
       GIT_BLOCK_PRIVATE: ${GIT_BLOCK_PRIVATE:-false}
       GIT_ALLOWED_HOSTS: ${GIT_ALLOWED_HOSTS:-}

src/app/account/page.tsx

@@ -1,5 +1,10 @@
 import type { Metadata } from "next";
 import { AccountManager, type AccountData } from "@/components/account/AccountManager";
+import {
+  NotificationSection,
+  type NotificationTargetEntry,
+} from "@/components/account/NotificationSection";
+import { emailAvailable } from "@/lib/notify";
 import { requireUserPage } from "@/lib/auth/guard";
 import { WEBAUTHN_AVAILABLE } from "@/lib/config";
 import { prisma } from "@/lib/db";
@@ -13,7 +18,7 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function AccountPage() {
   const user = await requireUserPage();
 
-  const [passkeys, sessions] = await Promise.all([
+  const [passkeys, sessions, targets] = await Promise.all([
     prisma.credential.findMany({
       where: { userId: user.id },
       select: {
@@ -37,6 +42,22 @@ export default async function AccountPage() {
       },
       orderBy: { lastSeenAt: "desc" },
     }),
+    prisma.notificationTarget.findMany({
+      where: { userId: user.id },
+      select: {
+        id: true,
+        name: true,
+        channel: true,
+        target: true,
+        secretHint: true,
+        events: true,
+        isActive: true,
+        lastSentAt: true,
+        lastOk: true,
+        lastMessage: true,
+      },
+      orderBy: { name: "asc" },
+    }),
   ]);
 
   const data: AccountData = {
@@ -60,6 +81,11 @@ export default async function AccountPage() {
       </header>
 
       <AccountManager data={data} />
+
+      <NotificationSection
+        targets={targets as unknown as NotificationTargetEntry[]}
+        emailAvailable={emailAvailable()}
+      />
     </div>
   );
 }

src/app/api/notifications/[id]/route.ts

@@ -0,0 +1,93 @@
+import { NextResponse } from "next/server";
+import { requireUserApi } from "@/lib/auth/guard";
+import { encryptSecret, tokenHint } from "@/lib/crypto";
+import { prisma } from "@/lib/db";
+import { jsonError, readJsonBody } from "@/lib/security/request";
+import { BlockedHostError, assertAllowedUrl } from "@/lib/security/ssrf";
+import { targetSafeSelect } from "@/lib/notify/types";
+import { formatZodError, notificationTargetUpdateSchema } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function PATCH(request: Request, { params }: Params) {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  const { id } = await params;
+  const existing = await prisma.notificationTarget.findFirst({
+    where: { id, userId: auth.user.id },
+  });
+  if (!existing) return jsonError("Ziel nicht gefunden", 404);
+
+  const body = await readJsonBody(request);
+  if (!body.ok) return body.response;
+
+  const parsed = notificationTargetUpdateSchema.safeParse(body.data);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  const data = parsed.data;
+  const update: Record<string, unknown> = {};
+
+  if (data.name !== undefined) update.name = data.name;
+  if (data.events !== undefined) update.events = data.events;
+  if (data.isActive !== undefined) update.isActive = data.isActive;
+
+  if (data.target !== undefined) {
+    if (existing.channel !== "EMAIL") {
+      try {
+        await assertAllowedUrl(data.target);
+      } catch (error) {
+        if (error instanceof BlockedHostError) {
+          return NextResponse.json(
+            { error: error.message, fields: { target: error.message } },
+            { status: 422 },
+          );
+        }
+        throw error;
+      }
+    }
+    update.target = data.target;
+  }
+
+  // Leeres Feld heisst "unveraendert", null heisst "entfernen".
+  if (data.secret !== undefined) {
+    if (data.secret) {
+      update.secretCipher = encryptSecret(data.secret);
+      update.secretHint = tokenHint(data.secret);
+    } else {
+      update.secretCipher = null;
+      update.secretHint = null;
+    }
+  }
+
+  try {
+    const target = await prisma.notificationTarget.update({
+      where: { id },
+      data: update,
+      select: targetSafeSelect,
+    });
+    return NextResponse.json({ target });
+  } catch {
+    return jsonError("Name bereits vergeben.", 409);
+  }
+}
+
+export async function DELETE(_request: Request, { params }: Params) {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  const { id } = await params;
+  const result = await prisma.notificationTarget.deleteMany({
+    where: { id, userId: auth.user.id },
+  });
+  if (result.count === 0) return jsonError("Ziel nicht gefunden", 404);
+
+  return NextResponse.json({ ok: true });
+}

src/app/api/notifications/[id]/test/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from "next/server";
+import { requireUserApi } from "@/lib/auth/guard";
+import { prisma } from "@/lib/db";
+import { deliver } from "@/lib/notify/channels";
+import { testMessage } from "@/lib/notify";
+import { LIMITS, rateLimit } from "@/lib/security/rateLimit";
+import { clientIp, jsonError, tooManyRequests } from "@/lib/security/request";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ id: string }> };
+
+/** Schickt eine Testnachricht an genau dieses Ziel. */
+export async function POST(request: Request, { params }: Params) {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  // Loest einen ausgehenden Aufruf aus – entsprechend begrenzt.
+  const limited = rateLimit(
+    `notify-test:${auth.user.id}:${clientIp(request)}`,
+    LIMITS.outbound.limit,
+    LIMITS.outbound.windowMs,
+  );
+  if (!limited.ok) return tooManyRequests(limited.retryAfter);
+
+  const { id } = await params;
+  const target = await prisma.notificationTarget.findFirst({
+    where: { id, userId: auth.user.id },
+  });
+  if (!target) return jsonError("Ziel nicht gefunden", 404);
+
+  const result = await deliver(target, testMessage());
+
+  await prisma.notificationTarget.update({
+    where: { id },
+    data: { lastSentAt: new Date(), lastOk: result.ok, lastMessage: result.message },
+  });
+
+  return NextResponse.json(result, { status: result.ok ? 200 : 502 });
+}

src/app/api/notifications/route.ts

@@ -0,0 +1,83 @@
+import { NextResponse } from "next/server";
+import { requireUserApi } from "@/lib/auth/guard";
+import { encryptSecret, tokenHint } from "@/lib/crypto";
+import { prisma } from "@/lib/db";
+import { readJsonBody } from "@/lib/security/request";
+import { targetSafeSelect } from "@/lib/notify/types";
+import { BlockedHostError, assertAllowedUrl } from "@/lib/security/ssrf";
+import { formatZodError, notificationTargetCreateSchema } from "@/lib/validation";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  const targets = await prisma.notificationTarget.findMany({
+    where: { userId: auth.user.id },
+    select: targetSafeSelect,
+    orderBy: { name: "asc" },
+  });
+  return NextResponse.json({ targets });
+}
+
+export async function POST(request: Request) {
+  const auth = await requireUserApi();
+  if (!auth.ok) return auth.response;
+
+  const body = await readJsonBody(request);
+  if (!body.ok) return body.response;
+
+  const parsed = notificationTargetCreateSchema.safeParse(body.data);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Validierung fehlgeschlagen", fields: formatZodError(parsed.error) },
+      { status: 422 },
+    );
+  }
+
+  const { name, channel, target, secret, events, isActive } = parsed.data;
+
+  // Webhook und ntfy ruft der Server spaeter selbst auf – gleiche Pruefung
+  // wie bei den Git-Verbindungen.
+  if (channel !== "EMAIL") {
+    try {
+      await assertAllowedUrl(target);
+    } catch (error) {
+      if (error instanceof BlockedHostError) {
+        return NextResponse.json(
+          { error: error.message, fields: { target: error.message } },
+          { status: 422 },
+        );
+      }
+      throw error;
+    }
+  }
+
+  const duplicate = await prisma.notificationTarget.findFirst({
+    where: { userId: auth.user.id, name },
+    select: { id: true },
+  });
+  if (duplicate) {
+    return NextResponse.json(
+      { error: "Name bereits vergeben.", fields: { name: "Name bereits vergeben" } },
+      { status: 409 },
+    );
+  }
+
+  const created = await prisma.notificationTarget.create({
+    data: {
+      userId: auth.user.id,
+      name,
+      channel,
+      target,
+      secretCipher: secret ? encryptSecret(secret) : null,
+      secretHint: secret ? tokenHint(secret) : null,
+      events,
+      isActive,
+    },
+    select: targetSafeSelect,
+  });
+
+  return NextResponse.json({ target: created }, { status: 201 });
+}

src/components/account/NotificationSection.tsx

@@ -0,0 +1,515 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Bell,
+  BellRing,
+  CheckCircle2,
+  KeyRound,
+  Loader2,
+  Mail,
+  Pencil,
+  Plus,
+  Trash2,
+  Webhook,
+  XCircle,
+} from "lucide-react";
+import type { NotificationChannel, NotificationEvent } from "@prisma/client";
+import { Modal } from "@/components/ui/Modal";
+import { EVENT_META, NOTIFICATION_EVENTS } from "@/lib/notify/types";
+import { cn, formatRelative } from "@/lib/utils";
+
+export interface NotificationTargetEntry {
+  id: string;
+  name: string;
+  channel: NotificationChannel;
+  target: string;
+  secretHint: string | null;
+  events: NotificationEvent[];
+  isActive: boolean;
+  lastSentAt: string | Date | null;
+  lastOk: boolean | null;
+  lastMessage: string | null;
+}
+
+const CHANNEL_META: Record<
+  NotificationChannel,
+  { label: string; icon: typeof Webhook; hint: string; placeholder: string }
+> = {
+  NTFY: {
+    label: "ntfy",
+    icon: BellRing,
+    hint: "Vollstaendige Themen-URL, z. B. https://ntfy.sh/mein-geheimes-thema",
+    placeholder: "https://ntfy.sh/mein-thema",
+  },
+  WEBHOOK: {
+    label: "Webhook",
+    icon: Webhook,
+    hint: "Bekommt JSON per POST. Mit Geheimnis wird der Rumpf signiert (X-Nebula-Signature).",
+    placeholder: "https://mein-dienst.de/haken",
+  },
+  EMAIL: {
+    label: "E-Mail",
+    icon: Mail,
+    hint: "Braucht SMTP-Zugangsdaten in der .env der Instanz.",
+    placeholder: "ich@example.com",
+  },
+};
+
+export function NotificationSection({
+  targets,
+  emailAvailable,
+}: {
+  targets: NotificationTargetEntry[];
+  emailAvailable: boolean;
+}) {
+  const router = useRouter();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editing, setEditing] = useState<NotificationTargetEntry | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [notice, setNotice] = useState<{ ok: boolean; text: string } | null>(null);
+
+  async function test(entry: NotificationTargetEntry) {
+    setBusyId(entry.id);
+    setNotice(null);
+    try {
+      const response = await fetch(`/api/notifications/${entry.id}/test`, { method: "POST" });
+      const body = await response.json().catch(() => ({}));
+      setNotice({ ok: response.ok, text: body.message ?? body.error ?? "Unbekannte Antwort." });
+      router.refresh();
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  async function remove(entry: NotificationTargetEntry) {
+    if (!window.confirm(`Ziel „${entry.name}“ entfernen?`)) return;
+    setBusyId(entry.id);
+    await fetch(`/api/notifications/${entry.id}`, { method: "DELETE" }).catch(() => undefined);
+    setBusyId(null);
+    router.refresh();
+  }
+
+  async function toggle(entry: NotificationTargetEntry) {
+    setBusyId(entry.id);
+    await fetch(`/api/notifications/${entry.id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ isActive: !entry.isActive }),
+    }).catch(() => undefined);
+    setBusyId(null);
+    router.refresh();
+  }
+
+  return (
+    <section className="glass p-5">
+      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
+        <div className="flex items-start gap-3">
+          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-violet-500/12 text-violet-300">
+            <Bell className="h-4 w-4" />
+          </span>
+          <div>
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-200">
+              Benachrichtigungen
+            </h2>
+            <p className="mt-1 max-w-xl text-sm text-slate-400">
+              Meldung bei fehlgeschlagenem Abgleich, roter CI oder neuem Release. Gemeldet
+              wird nur bei einer <strong className="text-slate-300">Aenderung</strong> –
+              nicht bei jedem Durchlauf.
+            </p>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          className="btn btn-ghost px-3 py-1.5 text-xs"
+          onClick={() => {
+            setEditing(null);
+            setDialogOpen(true);
+          }}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Ziel hinzufuegen
+        </button>
+      </div>
+
+      {targets.length === 0 ? (
+        <p className="rounded-xl border border-dashed border-white/8 px-4 py-6 text-center text-sm text-slate-500">
+          Noch kein Ziel eingerichtet.
+        </p>
+      ) : (
+        <div className="space-y-2">
+          {targets.map((entry) => {
+            const meta = CHANNEL_META[entry.channel];
+            const Icon = meta.icon;
+            return (
+              <div key={entry.id} className="glass-soft px-3 py-3">
+                <div className="flex flex-wrap items-start justify-between gap-3">
+                  <div className="min-w-0 flex-1">
+                    <p className="flex flex-wrap items-center gap-2 text-sm text-slate-100">
+                      <Icon className="h-3.5 w-3.5 shrink-0 text-violet-300" />
+                      {entry.name}
+                      <span className="rounded bg-white/6 px-1.5 py-0.5 text-[10px] uppercase tracking-wider text-slate-400">
+                        {meta.label}
+                      </span>
+                      {!entry.isActive ? (
+                        <span className="rounded bg-slate-500/15 px-1.5 py-0.5 text-[10px] text-slate-400">
+                          pausiert
+                        </span>
+                      ) : null}
+                      {entry.secretHint ? (
+                        <span className="inline-flex items-center gap-1 font-mono text-[10px] text-amber-300/70">
+                          <KeyRound className="h-2.5 w-2.5" />
+                          {entry.secretHint}
+                        </span>
+                      ) : null}
+                    </p>
+                    <p className="mt-0.5 truncate font-mono text-[11px] text-slate-500">
+                      {entry.target}
+                    </p>
+                    <p className="mt-1.5 flex flex-wrap gap-1">
+                      {entry.events.map((event) => (
+                        <span
+                          key={event}
+                          className="rounded bg-white/6 px-1.5 py-0.5 text-[10px] text-slate-400"
+                        >
+                          {EVENT_META[event].emoji} {EVENT_META[event].label}
+                        </span>
+                      ))}
+                    </p>
+                    {entry.lastSentAt ? (
+                      <p
+                        className={cn(
+                          "mt-1.5 flex items-center gap-1.5 text-[11px]",
+                          entry.lastOk ? "text-emerald-200/80" : "text-rose-200/80",
+                        )}
+                        suppressHydrationWarning
+                      >
+                        {entry.lastOk ? (
+                          <CheckCircle2 className="h-3 w-3" />
+                        ) : (
+                          <XCircle className="h-3 w-3" />
+                        )}
+                        {formatRelative(entry.lastSentAt)} · {entry.lastMessage}
+                      </p>
+                    ) : null}
+                  </div>
+
+                  <div className="flex shrink-0 items-center gap-1">
+                    {busyId === entry.id ? (
+                      <Loader2 className="h-4 w-4 animate-spin text-slate-500" />
+                    ) : (
+                      <>
+                        <button
+                          type="button"
+                          className="btn btn-ghost px-2.5 py-1.5 text-xs"
+                          onClick={() => test(entry)}
+                        >
+                          Testen
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-ghost px-2.5 py-1.5 text-xs"
+                          onClick={() => toggle(entry)}
+                          title={entry.isActive ? "Pausieren" : "Fortsetzen"}
+                        >
+                          {entry.isActive ? "Pause" : "An"}
+                        </button>
+                        <button
+                          type="button"
+                          className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-white/8 hover:text-violet-300"
+                          onClick={() => {
+                            setEditing(entry);
+                            setDialogOpen(true);
+                          }}
+                          aria-label="Bearbeiten"
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </button>
+                        <button
+                          type="button"
+                          className="rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-rose-500/12 hover:text-rose-300"
+                          onClick={() => remove(entry)}
+                          aria-label="Entfernen"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {notice ? (
+        <p
+          className={cn(
+            "mt-3 rounded-lg border px-3 py-2 text-sm",
+            notice.ok
+              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
+              : "border-rose-500/30 bg-rose-500/10 text-rose-200",
+          )}
+        >
+          {notice.text}
+        </p>
+      ) : null}
+
+      {!emailAvailable ? (
+        <p className="mt-3 text-[11px] text-slate-600">
+          E-Mail steht nicht bereit: In der <code className="text-violet-300">.env</code> der
+          Instanz fehlt <code className="text-violet-300">SMTP_HOST</code>. ntfy und Webhook
+          funktionieren ohne weitere Einrichtung.
+        </p>
+      ) : null}
+
+      <TargetDialog
+        open={dialogOpen}
+        entry={editing}
+        emailAvailable={emailAvailable}
+        onClose={() => {
+          setDialogOpen(false);
+          setEditing(null);
+        }}
+      />
+    </section>
+  );
+}
+
+function TargetDialog({
+  open,
+  entry,
+  emailAvailable,
+  onClose,
+}: {
+  open: boolean;
+  entry: NotificationTargetEntry | null;
+  emailAvailable: boolean;
+  onClose: () => void;
+}) {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [channel, setChannel] = useState<NotificationChannel>("NTFY");
+  const [target, setTarget] = useState("");
+  const [secret, setSecret] = useState("");
+  const [events, setEvents] = useState<NotificationEvent[]>(["SYNC_FAILED", "CI_FAILED"]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+
+  const isEdit = Boolean(entry);
+
+  useEffect(() => {
+    if (!open) return;
+    setName(entry?.name ?? "");
+    setChannel(entry?.channel ?? "NTFY");
+    setTarget(entry?.target ?? "");
+    setSecret("");
+    setEvents(entry?.events ?? ["SYNC_FAILED", "CI_FAILED"]);
+    setError(null);
+    setFieldErrors({});
+  }, [open, entry]);
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    setBusy(true);
+    setError(null);
+    setFieldErrors({});
+
+    const body: Record<string, unknown> = { name, target, events };
+    if (!isEdit) body.channel = channel;
+    if (!isEdit || secret.trim()) body.secret = secret;
+
+    try {
+      const response = await fetch(
+        isEdit ? `/api/notifications/${entry?.id}` : "/api/notifications",
+        {
+          method: isEdit ? "PATCH" : "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body),
+        },
+      );
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        setFieldErrors(payload.fields ?? {});
+        throw new Error(payload.error ?? "Speichern fehlgeschlagen.");
+      }
+      onClose();
+      router.refresh();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const meta = CHANNEL_META[channel];
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      width="md"
+      title={isEdit ? "Ziel bearbeiten" : "Neues Benachrichtigungsziel"}
+      description={
+        isEdit ? "Der Zustellweg selbst laesst sich nicht mehr aendern." : undefined
+      }
+    >
+      <form onSubmit={submit} className="space-y-4">
+        {!isEdit ? (
+          <div>
+            <span className="field-label">Weg</span>
+            <div className="grid grid-cols-3 gap-2">
+              {(Object.keys(CHANNEL_META) as NotificationChannel[]).map((value) => {
+                const option = CHANNEL_META[value];
+                const Icon = option.icon;
+                const disabled = value === "EMAIL" && !emailAvailable;
+                return (
+                  <button
+                    key={value}
+                    type="button"
+                    disabled={disabled}
+                    onClick={() => setChannel(value)}
+                    title={disabled ? "Kein SMTP in der .env hinterlegt" : undefined}
+                    className={cn(
+                      "rounded-xl border px-3 py-2.5 text-sm transition-all disabled:opacity-40",
+                      channel === value
+                        ? "border-violet-400/60 bg-violet-500/12 text-white"
+                        : "border-white/9 text-slate-400 hover:border-white/20",
+                    )}
+                  >
+                    <span className="flex items-center justify-center gap-1.5">
+                      <Icon className="h-3.5 w-3.5" />
+                      {option.label}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+
+        <div>
+          <label className="field-label" htmlFor="notify-name">
+            Name *
+          </label>
+          <input
+            id="notify-name"
+            className="field"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Handy"
+            required
+            maxLength={60}
+          />
+          {fieldErrors.name ? (
+            <p className="mt-1 text-xs text-rose-300">{fieldErrors.name}</p>
+          ) : null}
+        </div>
+
+        <div>
+          <label className="field-label" htmlFor="notify-target">
+            {channel === "EMAIL" ? "E-Mail-Adresse *" : "URL *"}
+          </label>
+          <input
+            id="notify-target"
+            className="field font-mono text-xs"
+            value={target}
+            onChange={(e) => setTarget(e.target.value)}
+            placeholder={meta.placeholder}
+            required
+          />
+          <p className="mt-1 text-[11px] text-slate-500">{meta.hint}</p>
+          {fieldErrors.target ? (
+            <p className="mt-1 text-xs text-rose-300">{fieldErrors.target}</p>
+          ) : null}
+        </div>
+
+        {channel !== "EMAIL" ? (
+          <div>
+            <label className="field-label" htmlFor="notify-secret">
+              Geheimnis {isEdit ? "(leer = unveraendert)" : "(optional)"}
+            </label>
+            <input
+              id="notify-secret"
+              className="field font-mono text-xs"
+              type="password"
+              value={secret}
+              onChange={(e) => setSecret(e.target.value)}
+              autoComplete="off"
+              placeholder={isEdit ? "••••••••" : ""}
+            />
+            <p className="mt-1 text-[11px] text-slate-500">
+              {channel === "NTFY"
+                ? "Wird als Bearer-Token gesendet – fuer geschuetzte Themen."
+                : "Signiert den Rumpf per HMAC-SHA256 im Kopf X-Nebula-Signature."}
+            </p>
+          </div>
+        ) : null}
+
+        <div>
+          <span className="field-label">Anlaesse *</span>
+          <div className="space-y-1.5">
+            {NOTIFICATION_EVENTS.map((event) => {
+              const option = EVENT_META[event];
+              const checked = events.includes(event);
+              return (
+                <label
+                  key={event}
+                  className="flex cursor-pointer items-start gap-2.5 rounded-lg border border-white/8 bg-black/20 px-3 py-2"
+                >
+                  <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={(e) =>
+                      setEvents((current) =>
+                        e.target.checked
+                          ? [...current, event]
+                          : current.filter((value) => value !== event),
+                      )
+                    }
+                    className="mt-0.5 h-4 w-4 accent-violet-500"
+                  />
+                  <span>
+                    <span className="block text-sm text-slate-200">
+                      {option.emoji} {option.label}
+                    </span>
+                    <span className="mt-0.5 block text-[11px] text-slate-500">
+                      {option.description}
+                    </span>
+                  </span>
+                </label>
+              );
+            })}
+          </div>
+          {fieldErrors.events ? (
+            <p className="mt-1 text-xs text-rose-300">{fieldErrors.events}</p>
+          ) : null}
+        </div>
+
+        {error ? (
+          <p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
+            {error}
+          </p>
+        ) : null}
+
+        <div className="flex justify-end gap-2 pt-1">
+          <button type="button" className="btn btn-ghost" onClick={onClose} disabled={busy}>
+            Abbrechen
+          </button>
+          <button
+            type="submit"
+            className="btn btn-primary"
+            disabled={busy || events.length === 0}
+          >
+            {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+            Speichern
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}