feat(protokoll): Audit-Log mit Filtern, Kettenpruefung und CSV (#027)

Das Protokoll war bisher nur in der Datenbank lesbar. Die Ansicht zeigt es
jeder Rolle mit lesbaren Aktionstexten, aufklappbarem Diff, Details und
Hashes; ein Test haelt fest, dass jede Aktion im Code einen Text hat.

Geblaettert wird ueber die ID statt OFFSET, weil das Protokoll waehrend
des Lesens waechst. Die Kettenpruefung liest jede Zeile und laeuft deshalb
nur auf Knopfdruck, mit 5 Minuten Zwischenspeicher; ein Bruch wird selbst
protokolliert. Der CSV-Export streamt in Stapeln, entschaerft Formeln und
steht selbst im Protokoll. protokollieren() reicht jeden Eintrag nach dem
Schreiben an Syslog weiter, ohne Details und Diff.

Kein Weg aendert oder loescht Eintraege; ein struktureller Test sichert
das ab, zusaetzlich zum Trigger.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/protokoll/KettenPruefung.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ShieldAlert, ShieldCheck, ShieldQuestion } from "lucide-react";
+import { useState, useTransition } from "react";
+import { Button } from "@/components/ui/Button";
+import { uhrzeit } from "@/lib/format";
+import { kettePruefenAktion, type KettenAntwort } from "@/server/actions/protokoll";
+
+/**
+ * Integritaet der Hash-Kette (#027). Geprueft wird nur auf Knopfdruck – die Pruefung liest
+ * jede Zeile; ein Ergebnis der letzten 5 Minuten bringt die Seite schon mit.
+ */
+export function KettenPruefung({ anfang }: { anfang: KettenAntwort | null }) {
+  const [ergebnis, setErgebnis] = useState<KettenAntwort | null>(anfang);
+  const [laeuft, starten] = useTransition();
+
+  const pruefen = () =>
+    starten(async () => {
+      setErgebnis(await kettePruefenAktion());
+    });
+
+  return (
+    <div
+      className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+      aria-live="polite"
+    >
+      <Status ergebnis={ergebnis} />
+      <Button onClick={pruefen} disabled={laeuft} klein className="self-start sm:self-auto">
+        {laeuft ? "Prüft …" : "Kette prüfen"}
+      </Button>
+    </div>
+  );
+}
+
+function Status({ ergebnis }: { ergebnis: KettenAntwort | null }) {
+  if (!ergebnis) {
+    return (
+      <p className="text-muted flex items-center gap-2 text-[14px]">
+        <ShieldQuestion aria-hidden className="size-4 shrink-0" />
+        Hash-Kette noch nicht geprüft
+      </p>
+    );
+  }
+  if (ergebnis.fehler) {
+    return <p className="text-danger text-[14px]">{ergebnis.fehler}</p>;
+  }
+  const wann = ergebnis.geprueftAm ? ` um ${uhrzeit(ergebnis.geprueftAm)} Uhr` : "";
+  if (!ergebnis.fehlerhafteId) {
+    return (
+      <p className="text-ok flex items-center gap-2 text-[14px] font-medium">
+        <ShieldCheck aria-hidden className="size-4 shrink-0" />
+        <span>
+          Hash-Kette unversehrt
+          <span className="text-muted font-normal">
+            {" "}
+            · {ergebnis.eintraege?.toLocaleString("de-DE")} Einträge geprüft{wann}
+          </span>
+        </span>
+      </p>
+    );
+  }
+  const id = ergebnis.fehlerhafteId;
+  // Die Seite beginnt beim fehlerhaften Eintrag, der Anker hebt ihn hervor.
+  const ziel = `/protokoll?vor=${(BigInt(id) + 1n).toString()}#eintrag-${id}`;
+  return (
+    <div
+      role="alert"
+      className="border-danger-border bg-danger-soft text-danger rounded-box flex min-w-0 items-start gap-2.5 border px-3 py-2.5 text-[14px]"
+    >
+      <ShieldAlert aria-hidden className="mt-0.5 size-4 shrink-0" />
+      <p className="min-w-0">
+        <strong className="font-semibold">Hash-Kette beschädigt.</strong> Der Eintrag{" "}
+        <a href={ziel} className="font-mono underline underline-offset-2">
+          #{id}
+        </a>{" "}
+        stimmt nicht mit seinem Hash oder Vorgänger überein – ab hier ist das Protokoll nicht mehr belegbar.
+        Vergleichen Sie mit der Syslog-Kopie und sichern Sie die Datenbank.{wann && ` Geprüft${wann}.`}
+      </p>
+    </div>
+  );
+}

src/components/protokoll/ProtokollListe.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { clsx } from "clsx";
+import { ChevronDown, History } from "lucide-react";
+import { useState, useTransition } from "react";
+import { Badge, type BadgeVariante } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { DiffBox } from "@/components/ui/DiffBox";
+import { Tabelle, TabellenZeile, TabellenZelle } from "@/components/ui/Tabelle";
+import { aktionText, aktionTon, type AktionsTon } from "@/lib/protokoll-aktionen";
+import { diffZeilen, ERGEBNIS_TEXT, protokollZeit } from "@/lib/protokoll-filter";
+import { fingerprintKurz } from "@/lib/schluessel";
+import type { ProtokollSeite, ProtokollZeile } from "@/server/queries/protokoll";
+import { aeltereLadenAktion } from "@/server/actions/protokoll";
+
+const TON_FARBE: Record<AktionsTon, string> = { ok: "text-ok", gefahr: "text-danger", neutral: "text-text" };
+const ERGEBNIS_BADGE: Record<ProtokollZeile["ergebnis"], BadgeVariante> = {
+  ERFOLG: "neutral",
+  FEHLER: "gefahr",
+  VERWEIGERT: "gefahr",
+};
+
+/**
+ * Protokolleintraege als Tabelle (ab md) bzw. Karten (darunter), jede Zeile aufklappbar
+ * (#027). „Ältere laden“ haengt die naechste Seite an, statt die Liste zu ersetzen – wer
+ * eine Spur verfolgt, will das Neuere dabei nicht aus dem Blick verlieren.
+ */
+export function ProtokollListe({ seite, query }: { seite: ProtokollSeite; query: string }) {
+  const [zeilen, setZeilen] = useState(seite.zeilen);
+  const [weiterVor, setWeiterVor] = useState(seite.weiterVor);
+  const [offen, setOffen] = useState<ReadonlySet<string>>(new Set());
+  const [fehler, setFehler] = useState<string>();
+  const [laedt, starten] = useTransition();
+
+  const umschalten = (id: string) =>
+    setOffen((vorher) => {
+      const neu = new Set(vorher);
+      if (neu.has(id)) neu.delete(id);
+      else neu.add(id);
+      return neu;
+    });
+
+  const aeltereLaden = () => {
+    if (!weiterVor) return;
+    starten(async () => {
+      const antwort = await aeltereLadenAktion(query, weiterVor);
+      if ("fehler" in antwort) {
+        setFehler(antwort.fehler);
+        return;
+      }
+      setFehler(undefined);
+      setZeilen((vorher) => [...vorher, ...antwort.zeilen]);
+      setWeiterVor(antwort.weiterVor);
+    });
+  };
+
+  return (
+    <div className="flex min-w-0 flex-col gap-4">
+      {/* Unter md Karten statt der Tabelle: acht Spalten passen nicht auf 390 px. */}
+      <ul className="flex flex-col md:hidden" aria-label="Protokolleinträge">
+        {zeilen.map((z) => (
+          <li key={z.id} className="border-border border-b py-3 last:border-b-0">
+            <ZeileKompakt z={z} />
+            <details className="group mt-1">
+              <summary className="text-muted hover:text-text -mx-2 flex min-h-11 cursor-pointer list-none items-center gap-1.5 rounded-box px-2 text-[13px]">
+                <ChevronDown aria-hidden className="size-4 transition-transform group-open:rotate-180" />
+                Einzelheiten
+              </summary>
+              <Einzelheiten z={z} />
+            </details>
+          </li>
+        ))}
+      </ul>
+
+      <Tabelle
+        className="hidden md:block"
+        beschriftung="Protokolleinträge"
+        spalten={[
+          { titel: "Zeitpunkt" },
+          { titel: "Aktion" },
+          { titel: "Akteur" },
+          { titel: "Host" },
+          { titel: "Zielbenutzer" },
+          { titel: "Fingerprint" },
+          { titel: "Ergebnis" },
+          { titel: "Einzelheiten", versteckt: true, className: "w-12" },
+        ]}
+      >
+        {zeilen.map((z) => {
+          const istOffen = offen.has(z.id);
+          return <ZeilenPaar key={z.id} z={z} offen={istOffen} umschalten={() => umschalten(z.id)} />;
+        })}
+      </Tabelle>
+
+      {fehler && <p className="text-danger text-[13px]">{fehler}</p>}
+      {weiterVor && (
+        <div className="flex justify-center">
+          <Button onClick={aeltereLaden} disabled={laedt} icon={<History className="size-4" />}>
+            {laedt ? "Lädt …" : "Ältere laden"}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AktionZelle({ z }: { z: ProtokollZeile }) {
+  return (
+    <span title={z.aktion} className={clsx("font-medium", TON_FARBE[aktionTon(z.aktion, z.ergebnis)])}>
+      {aktionText(z.aktion)}
+    </span>
+  );
+}
+
+function ErgebnisBadge({ ergebnis }: { ergebnis: ProtokollZeile["ergebnis"] }) {
+  return <Badge variante={ERGEBNIS_BADGE[ergebnis]}>{ERGEBNIS_TEXT[ergebnis]}</Badge>;
+}
+
+function ZeilenPaar({ z, offen, umschalten }: { z: ProtokollZeile; offen: boolean; umschalten: () => void }) {
+  const detailId = `eintrag-${z.id}-einzelheiten`;
+  return (
+    <>
+      <TabellenZeile className={clsx(offen && "border-b-0")}>
+        <TabellenZelle mono className="text-muted whitespace-nowrap">
+          {/* Anker fuer den Sprung aus der Kettenpruefung zur ersten fehlerhaften ID. */}
+          <span
+            id={`eintrag-${z.id}`}
+            className="target:text-danger target:outline-danger scroll-mt-24 target:outline target:outline-offset-4"
+          >
+            {protokollZeit(z.zeitpunkt)}
+          </span>
+        </TabellenZelle>
+        <TabellenZelle className="min-w-[12rem]">
+          <AktionZelle z={z} />
+        </TabellenZelle>
+        <TabellenZelle className="whitespace-nowrap">{z.akteurName}</TabellenZelle>
+        <TabellenZelle mono className="whitespace-nowrap">
+          {z.hostName ?? <Leer />}
+        </TabellenZelle>
+        <TabellenZelle mono className="whitespace-nowrap">
+          {z.zielbenutzer ?? <Leer />}
+        </TabellenZelle>
+        <TabellenZelle mono className="text-muted whitespace-nowrap">
+          {z.fingerprint ? <span title={z.fingerprint}>{fingerprintKurz(z.fingerprint)}</span> : <Leer />}
+        </TabellenZelle>
+        <TabellenZelle className="whitespace-nowrap">
+          <ErgebnisBadge ergebnis={z.ergebnis} />
+        </TabellenZelle>
+        <TabellenZelle rechts className="w-12">
+          <button
+            type="button"
+            onClick={umschalten}
+            aria-expanded={offen}
+            aria-controls={detailId}
+            aria-label={`Einzelheiten zu Eintrag ${z.id}`}
+            className="text-muted hover:text-text hover:bg-raised rounded-feld -my-2 inline-flex size-11 items-center justify-center transition-colors"
+          >
+            <ChevronDown aria-hidden className={clsx("size-4 transition-transform", offen && "rotate-180")} />
+          </button>
+        </TabellenZelle>
+      </TabellenZeile>
+      {offen && (
+        <tr id={detailId} className="border-border border-b last:border-b-0">
+          <td colSpan={8} className="pb-4">
+            <Einzelheiten z={z} />
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+function Leer() {
+  return <span className="text-muted">–</span>;
+}
+
+/** Kopf einer Karte in der mobilen Ansicht. */
+function ZeileKompakt({ z }: { z: ProtokollZeile }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-1.5">
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-muted font-mono text-[12.5px]">{protokollZeit(z.zeitpunkt)}</span>
+        <ErgebnisBadge ergebnis={z.ergebnis} />
+      </div>
+      <span className="text-[14.5px] leading-snug">
+        <AktionZelle z={z} />
+      </span>
+      <span className="text-muted text-[13px] break-words">{z.akteurName}</span>
+      {(z.hostName || z.zielbenutzer) && (
+        <span className="text-text font-mono text-[12.5px] break-all">
+          {z.zielbenutzer ? `${z.zielbenutzer}@` : ""}
+          {z.hostName ?? "–"}
+        </span>
+      )}
+      {z.fingerprint && (
+        <span className="text-muted font-mono text-[12.5px] break-all">{fingerprintKurz(z.fingerprint)}</span>
+      )}
+    </div>
+  );
+}
+
+function Einzelheiten({ z }: { z: ProtokollZeile }) {
+  return (
+    <div className="bg-sidebar border-border rounded-box flex min-w-0 flex-col gap-4 border p-4">
+      <dl className="grid min-w-0 gap-x-4 gap-y-2 text-[13px] sm:grid-cols-[9rem_minmax(0,1fr)]">
+        <dt className="text-muted">ID</dt>
+        <dd className="font-mono">{z.id}</dd>
+        <dt className="text-muted">Aktion (technisch)</dt>
+        <dd className="font-mono break-all">{z.aktion}</dd>
+        {z.fingerprint && (
+          <>
+            <dt className="text-muted">Fingerprint</dt>
+            <dd className="font-mono break-all">{z.fingerprint}</dd>
+          </>
+        )}
+        <dt className="text-muted">Hash</dt>
+        <dd className="font-mono break-all" data-feld="hash">
+          {z.hash}
+        </dd>
+        <dt className="text-muted">Vorgänger-Hash</dt>
+        <dd className="font-mono break-all">{z.vorgaengerHash || "– (erster Eintrag)"}</dd>
+      </dl>
+
+      {z.diff && (
+        <section className="flex min-w-0 flex-col gap-2" aria-label="Diff">
+          <h3 className="text-muted text-[13px] font-medium">Diff</h3>
+          <DiffBox zeilen={diffZeilen(z.diff)} />
+        </section>
+      )}
+
+      {z.details && (
+        <section className="flex min-w-0 flex-col gap-2" aria-label="Details">
+          <h3 className="text-muted text-[13px] font-medium">Details</h3>
+          <dl className="border-border bg-bg rounded-box grid min-w-0 gap-x-4 gap-y-1.5 border p-3 text-[12.5px] sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]">
+            {z.details.map((d) => (
+              <div key={d.name} className="contents">
+                <dt className="text-muted font-mono break-all">{d.name}</dt>
+                <dd className="text-text mb-1.5 font-mono break-all whitespace-pre-wrap sm:mb-0">{d.wert}</dd>
+              </div>
+            ))}
+          </dl>
+        </section>
+      )}
+    </div>
+  );
+}