feat(hosts): Schluessel auf dem Host anzeigen und ausrollen (#016)

Die Hostseite listet, welche Public und Private Keys sshkv dort
verwaltet - direkt oder ueber eine Hostgruppe - mit Zustand als Punkt
und Text. Ein Dry-Run je Host zeigt das Diff aller Benutzer dieses
Hosts und rollt nach Bestaetigung aus.

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

src/components/ausrollen/AusrollenPanel.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState, useTransition } from "react";
 import { Button } from "@/components/ui/Button";
 import { DiffBox } from "@/components/ui/DiffBox";
 import { laeuftNoch, useVorgang } from "@/components/vorgang/useVorgang";
-import { ausrollenAktion, trockenlaufAktion } from "@/server/actions/verwendungen";
+import { ausrollenAktion, trockenlaufAktion, type AusrollAuswahl } from "@/server/actions/verwendungen";
 import type { DiffZeile } from "@/lib/ssh/zeilen-diff";
 
 /**
@@ -24,7 +24,7 @@ type PlanZiel = {
   fehler?: string;
 };
 
-export function AusrollenPanel({ schluesselId, offen }: { schluesselId: string; offen: number }) {
+export function AusrollenPanel({ auswahl, offen }: { auswahl: AusrollAuswahl; offen: number }) {
   const router = useRouter();
   const [trockenlaufId, setTrockenlaufId] = useState<string>();
   const [ausrollenId, setAusrollenId] = useState<string>();
@@ -52,7 +52,7 @@ export function AusrollenPanel({ schluesselId, offen }: { schluesselId: string;
             starten(async () => {
               setFehler(undefined);
               setAusrollenId(undefined);
-              const antwort = await trockenlaufAktion(schluesselId);
+              const antwort = await trockenlaufAktion(auswahl);
               if (antwort.fehler) setFehler(antwort.fehler);
               else setTrockenlaufId(antwort.vorgangId);
             })

src/components/ausrollen/VerwendungsZustand.tsx

@@ -0,0 +1,28 @@
+import type { VerwendungsZustand as Zustand } from "@/generated/prisma/enums";
+import { clsx } from "clsx";
+
+/** Zustand einer Verwendung – immer Punkt und Text, nie nur Farbe (#016). */
+const ANZEIGE: Record<Zustand, { text: string; klasse: string; punkt: string }> = {
+  GEPLANT: { text: "noch nicht ausgerollt", klasse: "text-accent", punkt: "○" },
+  AUSGEROLLT: { text: "synchron", klasse: "text-ok", punkt: "●" },
+  ABWEICHUNG: { text: "Drift", klasse: "text-danger", punkt: "●" },
+  ENTFERNEN: { text: "wird entfernt", klasse: "text-accent", punkt: "○" },
+  ENTFERNT: { text: "entfernt", klasse: "text-muted", punkt: "○" },
+  FEHLGESCHLAGEN: { text: "fehlgeschlagen", klasse: "text-danger", punkt: "●" },
+};
+
+export function VerwendungsZustand({ zustand, className }: { zustand: Zustand; className?: string }) {
+  const anzeige = ANZEIGE[zustand];
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center gap-1.5 text-[13px] whitespace-nowrap",
+        anzeige.klasse,
+        className,
+      )}
+    >
+      <span aria-hidden>{anzeige.punkt}</span>
+      {anzeige.text}
+    </span>
+  );
+}