feat(ui): Prototyp Uebersicht und Schluesseldetail (#002)

Klickbarer Prototyp mit Beispieldaten aus src/beispiel/, sichtbar als
Beispiel gekennzeichnet. Er zeigt das verbindliche Design an echten
Bildschirmen, bevor die Lesemodelle (#012, #021, #026) existieren; die
Seiten tauschen spaeter nur die Datenquelle. Die bisherige Startseite
entfaellt zugunsten der Route-Gruppe (app).

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

src/app/(app)/page.tsx

@@ -0,0 +1,187 @@
+import { ArrowRight, Plus, RefreshCw, Route } from "lucide-react";
+import type { Metadata } from "next";
+import Link from "next/link";
+import {
+  abweichungen,
+  BEISPIEL_JETZT,
+  baldAblaufend,
+  kennzahlen,
+  letzteAktionen,
+  letzterAbgleich,
+  type AktionsArt,
+} from "@/beispiel/uebersicht";
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { Karte } from "@/components/ui/Karte";
+import { Kennzahl } from "@/components/ui/Kennzahl";
+import { Seitenkopf } from "@/components/ui/Seitenkopf";
+import { Statuspunkt } from "@/components/ui/Statuspunkt";
+import { Tabelle, TabellenZeile, TabellenZelle } from "@/components/ui/Tabelle";
+import { datum, datumZeit, relativ, tageBis, uhrzeit } from "@/lib/format";
+
+export const metadata: Metadata = { title: "Übersicht" };
+
+const AKTION: Record<AktionsArt, { text: string; farbe: string }> = {
+  ausgerollt: { text: "Ausgerollt", farbe: "text-ok" },
+  widerrufen: { text: "Widerrufen", farbe: "text-danger" },
+  erstellt: { text: "Erstellt", farbe: "text-text" },
+  abgleich: { text: "Abgleich", farbe: "text-info" },
+  rotiert: { text: "Rotiert", farbe: "text-accent" },
+};
+
+/**
+ * Prototyp der Übersicht mit Beispieldaten (#002). Die echte Übersicht mit Lesemodellen
+ * folgt in #026; Aufbau und Komponenten bleiben.
+ */
+export default function Uebersicht() {
+  return (
+    <div className="flex flex-col gap-6 sm:gap-7">
+      <Seitenkopf
+        titel="Übersicht"
+        badges={<Badge variante="messing">Prototyp · Beispieldaten</Badge>}
+        untertitel={
+          <>
+            Letzter Abgleich {relativ(letzterAbgleich, BEISPIEL_JETZT)} ·{" "}
+            <time dateTime={letzterAbgleich} className="font-mono text-[13px]">
+              {datumZeit(letzterAbgleich)}
+            </time>
+          </>
+        }
+        aktionen={
+          <>
+            <Button icon={<RefreshCw className="size-4" />}>Jetzt abgleichen</Button>
+            <Button href="/zuweisungen" icon={<Route className="size-4" />}>
+              Host-zu-Host-Assistent
+            </Button>
+            <Button
+              href="/schluessel"
+              variante="primaer"
+              icon={<Plus className="size-4" strokeWidth={2.4} />}
+            >
+              Neuer Schlüssel
+            </Button>
+          </>
+        }
+      />
+
+      <div className="grid grid-cols-2 gap-3 sm:gap-5 xl:grid-cols-4">
+        <Kennzahl
+          titel="Hosts"
+          wert={kennzahlen.hosts.wert}
+          hinweis={kennzahlen.hosts.hinweis}
+          href="/hosts"
+        />
+        <Kennzahl
+          titel="Schlüssel"
+          wert={kennzahlen.schluessel.wert}
+          hinweis={kennzahlen.schluessel.hinweis}
+          href="/schluessel"
+        />
+        <Kennzahl
+          titel="Abweichungen"
+          variante="gefahr"
+          wert={kennzahlen.abweichungen.wert}
+          hinweis={kennzahlen.abweichungen.hinweis}
+          href="/hosts"
+        />
+        <Kennzahl
+          titel="Läuft in 30 Tagen ab"
+          variante="messing"
+          wert={kennzahlen.ablaufend.wert}
+          hinweis={kennzahlen.ablaufend.hinweis}
+          href="/schluessel"
+        />
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.55fr)_minmax(0,1fr)]">
+        <Karte titel="Hosts mit Abweichung" untertitel="Ergebnis des letzten Abgleichs">
+          <Tabelle
+            beschriftung="Hosts mit Abweichung"
+            spalten={[
+              { titel: "Host" },
+              { titel: "Benutzer" },
+              { titel: "Befund" },
+              { titel: "Aktion", rechts: true, versteckt: true },
+            ]}
+          >
+            {abweichungen.map((a) => (
+              <TabellenZeile key={`${a.host}-${a.benutzer}`}>
+                <TabellenZelle mono className="whitespace-nowrap">
+                  {a.host}
+                </TabellenZelle>
+                <TabellenZelle mono>{a.benutzer}</TabellenZelle>
+                <TabellenZelle className="whitespace-nowrap">
+                  <Statuspunkt status={a.status} text={a.befund} />
+                </TabellenZelle>
+                <TabellenZelle rechts>
+                  <Link
+                    href="/hosts"
+                    className="text-accent -my-2 inline-flex min-h-11 items-center px-1 font-medium hover:underline"
+                  >
+                    Prüfen<span className="sr-only"> – {a.host}</span>
+                  </Link>
+                </TabellenZelle>
+              </TabellenZeile>
+            ))}
+          </Tabelle>
+        </Karte>
+
+        <Karte titel="Bald ablaufend" untertitel="Schlüssel mit Ablaufdatum in den nächsten 30 Tagen">
+          <ul className="flex flex-col">
+            {baldAblaufend.map((s) => {
+              const tage = tageBis(s.ablauf, BEISPIEL_JETZT);
+              return (
+                <li key={s.zweck} className="border-border border-b last:border-b-0">
+                  <Link
+                    href="/schluessel/beispiel"
+                    className="hover:bg-raised/50 rounded-box -mx-2 flex min-h-11 items-center justify-between gap-3 px-2 py-2.5 transition-colors"
+                  >
+                    <span className="min-w-0">
+                      <span className="text-text block truncate text-[14.5px] font-medium">{s.zweck}</span>
+                      <span className="text-muted block truncate text-[13px]">
+                        {s.person} · <span className="font-mono">{s.typ}</span>
+                      </span>
+                    </span>
+                    <Badge variante="messing" className="shrink-0">
+                      <time dateTime={s.ablauf}>{tage === 1 ? "morgen" : `in ${tage} Tagen`}</time>
+                    </Badge>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </Karte>
+      </div>
+
+      <Karte
+        titel="Letzte Aktionen"
+        aktionen={
+          <Link
+            href="/protokoll"
+            className="text-accent inline-flex min-h-11 items-center gap-1.5 text-[14px] font-medium hover:underline"
+          >
+            Zum Audit-Log <ArrowRight className="size-4" aria-hidden />
+          </Link>
+        }
+      >
+        <ol className="flex flex-col">
+          {letzteAktionen.map((a) => (
+            <li
+              key={a.zeit}
+              className="border-border grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 border-b py-3 text-[14px] last:border-b-0 md:grid-cols-[8.5rem_6.5rem_1fr_auto] md:items-baseline"
+            >
+              <time dateTime={a.zeit} className="text-muted font-mono text-[12.5px] whitespace-nowrap">
+                {datum(a.zeit)} {uhrzeit(a.zeit)}
+              </time>
+              <span className={`${AKTION[a.art].farbe} font-medium md:order-none`}>{AKTION[a.art].text}</span>
+              <span className="text-text col-span-2 min-w-0 md:col-span-1">{a.beschreibung}</span>
+              <span className="text-muted col-span-2 text-[13px] md:col-span-1 md:text-right">
+                {a.benutzer}
+              </span>
+            </li>
+          ))}
+        </ol>
+      </Karte>
+    </div>
+  );
+}

src/app/(app)/schluessel/beispiel/page.tsx

@@ -0,0 +1,181 @@
+import { Ban, Check, Lock, PlugZap, Plus, RotateCw } from "lucide-react";
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import {
+  beispielSchluessel as s,
+  dryRunDatei,
+  dryRunDiff,
+  privatAusgerollt,
+  publicAusgerollt,
+  zusatzaktionen,
+  type Ausrollung,
+} from "@/beispiel/schluessel";
+import { BEISPIEL_JETZT } from "@/beispiel/uebersicht";
+import { Badge } from "@/components/ui/Badge";
+import { Breadcrumb } from "@/components/ui/Breadcrumb";
+import { Button } from "@/components/ui/Button";
+import { DiffBox } from "@/components/ui/DiffBox";
+import { InnereBox, Karte } from "@/components/ui/Karte";
+import { MonoKopieren } from "@/components/ui/MonoKopieren";
+import { Seitenkopf } from "@/components/ui/Seitenkopf";
+import { Statuspunkt } from "@/components/ui/Statuspunkt";
+import { datum, datumZeit, tageBis } from "@/lib/format";
+
+export const metadata: Metadata = { title: `${s.zweck} (Beispiel)` };
+
+/** Prototyp des Schlüsseldetails mit Beispieldaten (#002); echte Daten ab #012/#016/#017. */
+export default function SchluesselBeispiel() {
+  const tage = tageBis(s.ablauf, BEISPIEL_JETZT);
+  return (
+    <div className="flex flex-col gap-6 sm:gap-7">
+      <Seitenkopf
+        oben={<Breadcrumb pfad={[{ titel: "Schlüssel", href: "/schluessel" }, { titel: s.zweck }]} />}
+        titel={s.zweck}
+        badges={
+          <>
+            <Badge mono>{s.typ}</Badge>
+            <Badge>{s.kategorie}</Badge>
+            <Badge>Vorlage: {s.vorlage}</Badge>
+            <Badge variante="messing">
+              <span>
+                läuft ab am <time dateTime={s.ablauf}>{datum(s.ablauf)}</time> · in {tage} Tagen
+              </span>
+            </Badge>
+            <Badge variante="neutral" className="text-muted">
+              Beispieldaten
+            </Badge>
+          </>
+        }
+        aktionen={
+          <>
+            <Button icon={<PlugZap className="size-4" />}>Verbindung testen</Button>
+            <Button icon={<RotateCw className="size-4" />}>Rotieren</Button>
+            <Button variante="gefahr" icon={<Ban className="size-4" />}>
+              Widerrufen
+            </Button>
+          </>
+        }
+      />
+
+      <Karte as="div" innen="ohne">
+        <dl className="divide-border grid divide-y md:grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,1.1fr)] md:divide-x md:divide-y-0">
+          <InfoFeld titel="Fingerprint">
+            <MonoKopieren wert={s.fingerprint} beschriftung="Fingerprint" umbrechen className="-my-[11px]" />
+          </InfoFeld>
+          <InfoFeld titel="Erstellt">
+            <time dateTime={s.erstellt} className="font-mono text-[13px]">
+              {datumZeit(s.erstellt)}
+            </time>
+            <span className="text-muted block text-[13px]">von {s.erstelltVon}</span>
+          </InfoFeld>
+          <InfoFeld titel="Private Key">
+            <span className="inline-flex flex-wrap items-center gap-x-1.5 text-[14px]">
+              <Lock className="text-ok size-3.5" aria-hidden />
+              verschlüsselt gespeichert ·
+              <button
+                type="button"
+                className="text-accent -my-3 inline-flex min-h-11 items-center font-medium hover:underline"
+              >
+                anzeigen (Re-Auth)
+              </button>
+            </span>
+          </InfoFeld>
+        </dl>
+      </Karte>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <AusrollKarte
+          titel="Private Key ausgerollt auf"
+          untertitel="Hosts, die sich mit diesem Schlüssel anmelden"
+          eintraege={privatAusgerollt}
+        />
+        <AusrollKarte
+          titel="Public Key ausgerollt auf"
+          untertitel="Konten, die diesen Schlüssel annehmen"
+          eintraege={publicAusgerollt}
+        />
+      </div>
+
+      <Karte
+        titel="Dry-Run-Vorschau"
+        untertitel={
+          <>
+            Abgleich für <span className="font-mono">backup@srv-pve02</span> – noch nichts geschrieben
+          </>
+        }
+      >
+        <DiffBox datei={dryRunDatei} zeilen={dryRunDiff} />
+        <fieldset className="mt-5">
+          <legend className="text-muted mb-1 text-[13px] font-medium">Zusätzlich ausführen</legend>
+          <ul className="flex flex-col">
+            {zusatzaktionen.map((z) => (
+              <li key={z.id}>
+                <label className="flex min-h-11 cursor-pointer items-center gap-3 text-[14.5px]">
+                  <input
+                    type="checkbox"
+                    name={z.id}
+                    defaultChecked={z.an}
+                    className="accent-accent size-[18px] shrink-0"
+                  />
+                  <span>{z.text}</span>
+                </label>
+              </li>
+            ))}
+          </ul>
+        </fieldset>
+        <div className="border-border mt-5 flex flex-wrap gap-2.5 border-t pt-5">
+          <Button variante="primaer" icon={<Check className="size-4" strokeWidth={2.4} />}>
+            Änderung anwenden
+          </Button>
+          <Button>Verwerfen</Button>
+        </div>
+      </Karte>
+    </div>
+  );
+}
+
+function InfoFeld({ titel, children }: { titel: string; children: ReactNode }) {
+  return (
+    <div className="min-w-0 px-5 py-4 sm:px-6">
+      <dt className="text-muted mb-1.5 text-[13px] font-medium">{titel}</dt>
+      <dd className="min-w-0">{children}</dd>
+    </div>
+  );
+}
+
+function AusrollKarte({
+  titel,
+  untertitel,
+  eintraege,
+}: {
+  titel: string;
+  untertitel: string;
+  eintraege: Ausrollung[];
+}) {
+  return (
+    <Karte
+      titel={titel}
+      untertitel={untertitel}
+      aktionen={
+        <Button klein icon={<Plus className="size-4" strokeWidth={2.4} />}>
+          Ausrollen
+        </Button>
+      }
+    >
+      <ul className="flex flex-col gap-3">
+        {eintraege.map((e) => (
+          <li key={`${e.ziel}${e.pfad}`}>
+            <InnereBox className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+              <div className="min-w-0">
+                <p className="text-text font-mono text-[13.5px] font-medium break-all">{e.ziel}</p>
+                <p className="text-muted mt-1 font-mono text-[12.5px] break-all">{e.pfad}</p>
+                {e.zusatz && <p className="text-muted font-mono text-[12.5px] break-all">{e.zusatz}</p>}
+              </div>
+              <Statuspunkt status={e.status} text={e.statusText} className="shrink-0 sm:pt-0.5" />
+            </InnereBox>
+          </li>
+        ))}
+      </ul>
+    </Karte>
+  );
+}

src/app/page.tsx

@@ -1,3 +0,0 @@
-export default function Startseite() {
-  return <main>SSHKeyVault</main>;
-}

src/beispiel/schluessel.ts

@@ -0,0 +1,75 @@
+/**
+ * BEISPIELDATEN für den Prototyp des Schlüsseldetails (#002) – kein echter Schlüssel.
+ * Ersetzt durch das Lesemodell aus #012/#016/#017.
+ */
+import type { HostStatus } from "@/components/ui/Statuspunkt";
+import type { DiffZeile } from "@/components/ui/DiffBox";
+
+export const beispielSchluessel = {
+  zweck: "Backup srv-backup01 → srv-pve01",
+  typ: "ed25519",
+  kategorie: "Dienst",
+  vorlage: "Backup-Zugang",
+  ablauf: "2026-10-30T10:00:00Z",
+  fingerprint: "SHA256:q3vN8xP0b4Tz7KfL2mWcR9yHdE1sJ6uAoGi5VnBQe0k",
+  erstellt: "2026-04-30T08:12:00Z",
+  erstelltVon: "Florian Wilde",
+};
+
+export type Ausrollung = {
+  ziel: string;
+  pfad: string;
+  zusatz?: string;
+  status: HostStatus;
+  statusText?: string;
+};
+
+export const privatAusgerollt: Ausrollung[] = [
+  {
+    ziel: "backup@srv-backup01",
+    pfad: "~/.ssh/id_ed25519_pve01",
+    zusatz: "config: Host srv-pve01",
+    status: "synchron",
+  },
+];
+
+export const publicAusgerollt: Ausrollung[] = [
+  {
+    ziel: "backup@srv-pve01",
+    pfad: "~/.ssh/authorized_keys",
+    zusatz: 'from="10.20.0.15",no-pty,no-agent-forwarding',
+    status: "synchron",
+  },
+  {
+    ziel: "backup@srv-pve02",
+    pfad: "~/.ssh/authorized_keys",
+    zusatz: 'from="10.20.0.15",no-pty',
+    status: "drift",
+    statusText: "Optionen geändert",
+  },
+];
+
+export const dryRunDatei = "backup@srv-pve02:~/.ssh/authorized_keys";
+
+export const dryRunDiff: DiffZeile[] = [
+  { art: "kontext", text: "# --- sshkv verwaltet: Anfang ---" },
+  {
+    art: "kontext",
+    text: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIMvq2Lr7… monitoring@zabbix",
+  },
+  {
+    art: "entfernt",
+    text: 'from="10.20.0.15",no-pty ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIFt0b8c1… backup@srv-backup01',
+  },
+  {
+    art: "hinzu",
+    text: 'from="10.20.0.15",no-pty,no-agent-forwarding ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIFt0b8c1… backup@srv-backup01',
+  },
+  { art: "kontext", text: "# --- sshkv verwaltet: Ende ---" },
+];
+
+export const zusatzaktionen = [
+  { id: "backup", text: "Backup der Datei anlegen (authorized_keys.sshkv-bak)", an: true },
+  { id: "config", text: "~/.ssh/config-Eintrag auf srv-backup01 anlegen", an: true },
+  { id: "knownhosts", text: "known_hosts auf srv-backup01 aktualisieren", an: false },
+];

src/beispiel/uebersicht.ts

@@ -0,0 +1,89 @@
+/**
+ * BEISPIELDATEN für den klickbaren Prototyp (#002) – keine echten Hosts oder Schlüssel.
+ * Die echten Lesemodelle kommen in #021 (Abgleich) und #026 (Übersicht); dann entfällt
+ * diese Datei. Alle Zeiten beziehen sich auf BEISPIEL_JETZT, damit der statisch gebaute
+ * Prototyp nicht mit jedem Build andere Relativangaben zeigt.
+ */
+import type { HostStatus } from "@/components/ui/Statuspunkt";
+
+export const BEISPIEL_JETZT = "2026-10-12T07:00:00Z"; // 09:00 Berliner Zeit
+
+export const letzterAbgleich = "2026-10-12T06:42:00Z";
+
+export const kennzahlen = {
+  hosts: { wert: 42, hinweis: "38 synchron · 1 nicht erreichbar" },
+  schluessel: { wert: 117, hinweis: "davon 9 mit Private Key" },
+  abweichungen: { wert: 3, hinweis: "auf 3 Hosts" },
+  ablaufend: { wert: 5, hinweis: "in den nächsten 30 Tagen" },
+};
+
+export type Abweichung = {
+  host: string;
+  benutzer: string;
+  status: HostStatus;
+  befund: string;
+};
+
+export const abweichungen: Abweichung[] = [
+  { host: "srv-web03.intern", benutzer: "root", status: "drift", befund: "1 fremder Schlüssel" },
+  { host: "srv-db01.intern", benutzer: "deploy", status: "drift", befund: "Schlüssel fehlt" },
+  { host: "fw-edge01.intern", benutzer: "sshkv", status: "drift", befund: "Optionen geändert" },
+  { host: "srv-legacy02.intern", benutzer: "root", status: "unerreichbar", befund: "nicht erreichbar" },
+];
+
+export type AblaufEintrag = { zweck: string; person: string; typ: string; ablauf: string };
+
+export const baldAblaufend: AblaufEintrag[] = [
+  { zweck: "Laptop Florian", person: "Florian Wilde", typ: "ed25519", ablauf: "2026-10-16T10:00:00Z" },
+  { zweck: "CI-Deployment Shop", person: "Dienst", typ: "ed25519", ablauf: "2026-10-21T10:00:00Z" },
+  {
+    zweck: "Backup srv-backup01 → srv-pve01",
+    person: "Dienst",
+    typ: "ed25519",
+    ablauf: "2026-10-30T10:00:00Z",
+  },
+  { zweck: "Notebook Sandra", person: "Sandra Keller", typ: "rsa-4096", ablauf: "2026-11-04T10:00:00Z" },
+  { zweck: "Monitoring Zabbix", person: "Dienst", typ: "ed25519", ablauf: "2026-11-09T10:00:00Z" },
+];
+
+export type AktionsArt = "ausgerollt" | "widerrufen" | "erstellt" | "abgleich" | "rotiert";
+
+export type LetzteAktion = {
+  zeit: string;
+  art: AktionsArt;
+  beschreibung: string;
+  benutzer: string;
+};
+
+export const letzteAktionen: LetzteAktion[] = [
+  {
+    zeit: "2026-10-12T06:42:00Z",
+    art: "abgleich",
+    beschreibung: "Abgleich aller Hosts: 3 Abweichungen",
+    benutzer: "System",
+  },
+  {
+    zeit: "2026-10-12T06:15:00Z",
+    art: "ausgerollt",
+    beschreibung: "Public Key „Backup srv-backup01 → srv-pve01“ auf backup@srv-pve01",
+    benutzer: "Florian Wilde",
+  },
+  {
+    zeit: "2026-10-11T15:30:00Z",
+    art: "widerrufen",
+    beschreibung: "Schlüssel „Laptop alt Thomas“ von 6 Hosts entfernt",
+    benutzer: "Florian Wilde",
+  },
+  {
+    zeit: "2026-10-11T12:04:00Z",
+    art: "rotiert",
+    beschreibung: "CI-Deployment Shop durch neuen ed25519-Schlüssel ersetzt",
+    benutzer: "Sandra Keller",
+  },
+  {
+    zeit: "2026-10-11T09:20:00Z",
+    art: "erstellt",
+    beschreibung: "Schlüssel „Monitoring Zabbix“ aus Vorlage Deployment-Zugang",
+    benutzer: "Sandra Keller",
+  },
+];