oberflaeche v4: Uebersicht als Startseite, KI-Box und Homelab mit Monitoring, Homelab-Updates je Geraet mit Alle aktualisieren, Protokoll, Einstellungsseite, neues Tab-Symbol

- Startseite "Alles auf einen Blick": Gesamtlage, je Bereich Messwerte mit Verlauf, wer welche Updates hat
  (Kurzform, Klick fuehrt in den Bereich), Hinweise, als Naechstes und zuletzt eingespielt
- Menue: Uebersicht, KI-Box (Cockpit, Updates, Modelle, Monitoring), Homelab (Cockpit, Updates, Monitoring,
  Protokoll), Einstellungen; Bereichsfarben Indigo und Violett; alte Adressen /updates und /modelle leiten weiter
- Homelab-Updates je Geraet: App-Version laeuft -> neu (mit Grund, wenn sie wartet), Pakete, Rueckweg, Knoepfe;
  Alle aktualisieren mit Plan in der Rueckfrage und Fortschritt; Cockpit zeigt die Gesundheit der Geraete
- Einstellungen als Seite: KI-Box, Homelab (Arcane-Schluessel, Docker echt/Probelauf, Ausfuehrer), Meldungen,
  Software-Stand
- Diagramme: Verlauf mit Fadenkreuz, Legende und Tabellenansicht, Kennzahlen mit Linie; Farben geprueft
- Tab-Symbol: favicon.ico/.svg, apple-touch-icon, Manifest-Icons

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

frontend/src/components/diagramme/Kennzahl.tsx

@@ -0,0 +1,42 @@
+import { cn } from "cn"
+import { type Einheit, wertText } from "@/lib/messung"
+import type { Messpunkt } from "@/lib/typen"
+import { Sparkline } from "./Sparkline"
+
+const ZUSTAND = {
+  ruhig: { wert: "text-foreground", marke: null },
+  gelb: { wert: "text-bernstein", marke: "hoch" },
+  rot: { wert: "text-rot-text", marke: "kritisch" },
+} as const
+
+/**
+ * Eine Kennzahl mit Verlauf: Beschriftung, der aktuelle Wert groß, darunter die Linie des Zeitraums.
+ * Überschreitet der Wert eine Grenze, färbt er sich und sagt es auch in Worten („hoch“, „kritisch“).
+ */
+export function Kennzahl({ label, wert, einheit, punkte, max, zustand = "ruhig", farbe, zeitraumText }: {
+  label: string
+  wert: number | null | undefined
+  einheit: Einheit
+  punkte?: Messpunkt[]
+  max: number
+  zustand?: keyof typeof ZUSTAND
+  farbe?: string
+  /** z. B. „letzte Stunde“ — für die Beschreibung der Linie. */
+  zeitraumText: string
+}) {
+  const z = ZUSTAND[zustand]
+  return (
+    <div className="flex min-w-0 flex-col gap-1.5 rounded-xl border border-linie bg-erhaben/50 px-3.5 pt-3 pb-2">
+      <span className="schild text-xs tracking-[0.18em] text-text-3">{label}</span>
+      <span className="flex items-baseline gap-2">
+        <span className={cn("font-anzeige text-[28px] leading-none font-bold", z.wert)}>{wertText(wert, einheit)}</span>
+        {z.marke && <span className={cn("schild text-[11px]", z.wert)}>{z.marke}</span>}
+      </span>
+      {punkte && punkte.length > 1 && (
+        <Sparkline punkte={punkte} max={max} farbe={farbe} beschriftung={`${label}, ${zeitraumText}`} />
+      )}
+      {/* Kommt der Verlauf noch (erster Abruf), bleibt die Höhe gleich — kein Springen der Kacheln. */}
+      {punkte && punkte.length <= 1 && <span className="h-9" aria-hidden />}
+    </div>
+  )
+}