Welle 1 · Live-Zahlen je Dienst auf den Kacheln, AdGuard-Zugang in den Einstellungen

Jede Gerätekachel (Homelab-Cockpit und Übersicht) zeigt eine Live-Zahl, wo es eine gibt: Proxmox-Host „8 von 8
Gästen an“, PBS „letzte Sicherung vor 13 h“, NPMplus „10 Zertifikate gültig“ (aus der Zertifikats-Wache), Arcane
„11 von 12 Containern an“ (Arcane-API mit dem vorhandenen Schlüssel) und AdGuard „12 % geblockt“. Für AdGuard gibt es
unter Einstellungen → Homelab einen Zugang, der vor dem Speichern gegen AdGuard geprüft wird und nur im Homelab-Teil
liegt (0600, das Passwort steht in keiner Antwort). Arcane und AdGuard werden höchstens alle zwei Minuten gefragt.

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

frontend/src/components/cockpit/Lagekopf.tsx

@@ -65,11 +65,13 @@ const ZUSTAND_TEXT: Record<LampenZustand, string> = {
 }
 
 /** Eine Kachel im Lagekopf: Bild mit Zustandspunkt, Name, darunter der Wert in der Farbe des Zustands. */
-export function Lagekachel({ bild, name, wert, zustand, onClick }: {
+export function Lagekachel({ bild, name, wert, zustand, zahl, onClick }: {
   bild: Geraetebild
   name: string
   wert: string
   zustand: LampenZustand
+  /** Eine Live-Zahl darunter (seit 25.09.2026), etwa „12 % geblockt“; stufe färbt sie. */
+  zahl?: { text: string; stufe?: "gelb" | "rot" } | null
   onClick?: () => void
 }) {
   const inhalt = (
@@ -78,6 +80,12 @@ export function Lagekachel({ bild, name, wert, zustand, onClick }: {
       <span className="flex min-w-0 flex-col gap-0.5">
         <span className="truncate text-[14.5px] leading-snug font-medium">{name}</span>
         <span className={cn("truncate text-[12.5px] leading-snug", WERT[zustand])}>{wert}</span>
+        {zahl && (
+          <span className={cn("truncate text-[12px] leading-snug",
+            zahl.stufe === "rot" ? "text-rot-text" : zahl.stufe === "gelb" ? "text-bernstein" : "text-text-3")}>
+            {zahl.text}
+          </span>
+        )}
         <span className="sr-only">{ZUSTAND_TEXT[zustand]}</span>
       </span>
     </>

frontend/src/components/homelab/Lagebild.tsx

@@ -1,6 +1,6 @@
 import { Lagekachel, Lagekopf } from "@/components/cockpit/Lagekopf"
 import { geraetebild } from "@/lib/geraetebild"
-import { type Lage, kurzname, lampeFuer } from "@/lib/homelab"
+import { kennzahlText, type Lage, kurzname, lampeFuer } from "@/lib/homelab"
 import type { ZielStand } from "@/lib/typen"
 
 /**
@@ -20,8 +20,10 @@ export function Lagebild({ lage, ziele, imUpdate, onAnsehen, onGeraet }: {
       onAnsehen={onAnsehen} label="Lage im Homelab">
       {ziele.map((z) => {
         const l = lampeFuer(z, imUpdate.has(z.id))
+        const zahl = kennzahlText(z.kennzahl)
         return (
           <Lagekachel key={z.id} bild={geraetebild(z)} name={kurzname(z)} wert={l.wert} zustand={l.zustand}
+            zahl={zahl ? { text: zahl, stufe: z.kennzahl?.stufe } : null}
             onClick={() => onGeraet(z, l.zustand === "info")} />
         )
       })}