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