feat(260924-i8v): Serverliste mit Kennzahl, Auswahlfilter, Links und Minutentakt der Proxmox-Kachel

- Zeilen nach down, warn, ok, idle, orphan mit genau einer Kennzahl, unbekannt statt 0
- config.serverIds filtert Liste und Balken, nur geloeschte Kennungen: eigener Satz
- Ansichtsmodus Links auf /modules/proxmox, Bearbeitungsmodus ohne Links
- Groessenstufen per Container-Query, Nachladen alle 60 s, pausiert bei verborgenem Tab
- formatPercent/formatCount einmal in components/proxmox, ServerCard nutzt sie

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

apps/web/src/components/dashboard/widgets/proxmox-widget-model.ts

@@ -1,10 +1,21 @@
-import { HEALTH_ORDER, type ServerHealth } from '@/components/proxmox/proxmox-status';
+import {
+  HEALTH_ORDER,
+  isBackupStale,
+  type MeterLevel,
+  meterLevel,
+  ratio,
+  type ServerHealth,
+  serverHealth,
+} from '@/components/proxmox/proxmox-status';
+import type { ProxmoxServer } from '@/lib/proxmox-api';
 
 /**
  * Reine Funktionen der Proxmox-Kachel (quick-260924-i8v) — ohne React,
  * damit jede Verzweigung einzeln pruefbar ist (Muster `picture-frame-config.ts`).
  * Die Statuslogik selbst (Zustand je Server, Schwellen, Sortierung) kommt
  * aus `components/proxmox/proxmox-status.ts` und wird hier nicht kopiert.
+ *
+ * Grundregel wie dort: ein unbekannter Wert ist nie 0.
  */
 
 export interface HealthSummary {
@@ -30,3 +41,117 @@ export function healthSummary(counts: Record<ServerHealth, number>): HealthSumma
   const worst = HEALTH_ORDER.find((h) => counts[h] > 0) ?? null;
   return { allOk: total > 0 && entries.length === 0, entries, worst };
 }
+
+export interface ProxmoxWidgetConfig {
+  /** Leer = keine Kopfzeile. */
+  title: string;
+  /** Leer = alle Server. */
+  serverIds: string[];
+}
+
+/**
+ * Konfiguration abwehrend lesen (T-I8V-03): die API prueft Kachel-
+ * Konfigurationen nicht inhaltlich, `config` kann also alles enthalten.
+ * Nicht-Strings und leere Kennungen fallen weg, doppelte zaehlen einmal.
+ */
+export function resolveProxmoxWidgetConfig(config: Record<string, unknown>): ProxmoxWidgetConfig {
+  const title = typeof config.title === 'string' ? config.title : '';
+  const rawIds = Array.isArray(config.serverIds) ? config.serverIds : [];
+  const serverIds: string[] = [];
+  for (const id of rawIds) {
+    if (typeof id === 'string' && id !== '' && !serverIds.includes(id)) serverIds.push(id);
+  }
+  return { title, serverIds };
+}
+
+/**
+ * Serverauswahl anwenden. Keine Auswahl = alle Server. Sind nur noch
+ * Kennungen geloeschter Server ausgewaehlt, ist `selectionGone` gesetzt —
+ * die Kachel sagt das dann, statt still „alle“ oder gar nichts zu zeigen.
+ * Die Reihenfolge der gelieferten Liste bleibt erhalten.
+ */
+export function selectServers(
+  servers: readonly ProxmoxServer[],
+  serverIds: readonly string[],
+): { servers: ProxmoxServer[]; selectionGone: boolean } {
+  if (serverIds.length === 0) return { servers: [...servers], selectionGone: false };
+  const selected = servers.filter((s) => serverIds.includes(s.id));
+  return { servers: selected, selectionGone: selected.length === 0 };
+}
+
+/** Die eine Kennzahl rechts in einer Serverzeile. */
+export type KeyFigure =
+  | { kind: 'status'; health: 'down' | 'idle' | 'orphan' }
+  | { kind: 'guests'; running: number; total: number }
+  | { kind: 'noGuests' }
+  | { kind: 'load'; fraction: number; level: MeterLevel }
+  | { kind: 'backup'; at: number; stale: boolean }
+  | { kind: 'noBackup' }
+  | { kind: 'mailIn'; count: number }
+  | { kind: 'unknown' };
+
+function isKnownNumber(value: unknown): value is number {
+  return typeof value === 'number' && !Number.isNaN(value);
+}
+
+function maxKnown(values: Array<number | null>): number | null {
+  let max: number | null = null;
+  for (const value of values) {
+    if (isKnownNumber(value) && (max === null || value > max)) max = value;
+  }
+  return max;
+}
+
+/**
+ * Kennzahl je Server. Zuerst der Zustand: nicht erreichbar, noch nicht
+ * abgefragt und verwaist zeigen immer nur den Zustand (ein verwaister
+ * Server zeigt keine alten Messwerte, wie auf der Modulseite).
+ *
+ * - PVE: bei Warnung der hoechste bekannte Anteil aus Knoten-CPU,
+ *   Knoten-RAM und Speicher (das ist der Grund der Warnung), sonst die
+ *   laufenden Gaeste.
+ * - PBS: die AELTESTE bekannte letzte Sicherung ueber alle Datenspeicher —
+ *   sie ist der Grund fuer „Sicherung zu alt“.
+ * - PMG: eingehende Mails.
+ */
+export function widgetKeyFigure(server: ProxmoxServer, now: number = Date.now()): KeyFigure {
+  const health = serverHealth(server, now);
+  if (health === 'down' || health === 'idle' || health === 'orphan') {
+    return { kind: 'status', health };
+  }
+
+  const metrics = server.status?.metrics ?? null;
+  if (metrics === null) return { kind: 'unknown' };
+
+  if (metrics.productType === 'pve') {
+    if (health === 'warn') {
+      const fraction = maxKnown([
+        ...metrics.nodes.map((n) => (isKnownNumber(n.cpu) ? n.cpu : null)),
+        ...metrics.nodes.map((n) => ratio(n.mem, n.maxmem)),
+        ...metrics.storages.map((s) => ratio(s.disk, s.maxdisk)),
+      ]);
+      if (fraction !== null) return { kind: 'load', fraction, level: meterLevel(fraction) };
+    }
+    if (!isKnownNumber(metrics.guestsRunning) || !isKnownNumber(metrics.guestsStopped)) {
+      return { kind: 'unknown' };
+    }
+    const total = metrics.guestsRunning + metrics.guestsStopped;
+    if (total === 0) return { kind: 'noGuests' };
+    return { kind: 'guests', running: metrics.guestsRunning, total };
+  }
+
+  if (metrics.productType === 'pbs') {
+    if (metrics.datastores.length === 0) return { kind: 'unknown' };
+    let oldest: number | null = null;
+    for (const ds of metrics.datastores) {
+      if (isKnownNumber(ds.lastBackupAt) && (oldest === null || ds.lastBackupAt < oldest)) {
+        oldest = ds.lastBackupAt;
+      }
+    }
+    if (oldest === null) return { kind: 'noBackup' };
+    return { kind: 'backup', at: oldest, stale: isBackupStale(oldest, now) };
+  }
+
+  if (!isKnownNumber(metrics.countIn)) return { kind: 'unknown' };
+  return { kind: 'mailIn', count: metrics.countIn };
+}

apps/web/src/components/dashboard/widgets/proxmox-widget.tsx

@@ -1,33 +1,69 @@
 'use client';
 
 import Link from 'next/link';
-import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import type { WidgetProps } from '@/components/dashboard/widget-registry';
 import { HealthBar } from '@/components/proxmox/HealthBar';
-import { summarizeHealth } from '@/components/proxmox/proxmox-status';
-import { HEALTH_STYLE } from '@/components/proxmox/status-styles';
+import {
+  formatAge,
+  formatCount,
+  formatPercent,
+  type ServerHealth,
+  serverHealth,
+  sortServersByHealth,
+  summarizeHealth,
+} from '@/components/proxmox/proxmox-status';
+import { HEALTH_STYLE, METER_TEXT } from '@/components/proxmox/status-styles';
 // T-I8V-02: aus dem Proxmox-Klienten NUR die Leseabfrage des Zwischenlagers.
 // Die manuelle Abfrage (POST .../poll) gehoert der Modulseite und darf hier
 // nie auftauchen — sonst loeste jede Kachel je Benutzer Live-Abfragen aus.
 import { listServers, type ProxmoxServer } from '@/lib/proxmox-api';
 import { useAuthStore } from '@/lib/stores/auth-store';
-import { healthSummary } from './proxmox-widget-model';
+import {
+  healthSummary,
+  type KeyFigure,
+  resolveProxmoxWidgetConfig,
+  selectServers,
+  widgetKeyFigure,
+} from './proxmox-widget-model';
+
+/** Minutentakt: so oft liest die Kachel das Zwischenlager neu. */
+const REFRESH_MS = 60_000;
+
+const ROW_CLASS = 'flex items-center gap-2 rounded-md px-1.5 py-1 text-sm';
 
 /**
  * ProxmoxWidget (quick-260924-i8v) — die erste Modul-Kachel. Zeigt den
  * Zustand der Proxmox-Server in der Statussprache der Modulseite: kompakter
- * Gesundheitsbalken und darunter die Zusammenfassung in Worten.
+ * Gesundheitsbalken, Zusammenfassung in Worten, darunter die Server nach
+ * Dringlichkeit (down, warn, ok, idle, orphan) mit je einer Kennzahl.
  *
- * Liest ausschliesslich das Zwischenlager (`GET /modules/proxmox/servers`),
- * das `@UseModule('proxmox')` serverseitig schuetzt.
+ * - Liest ausschliesslich das Zwischenlager (`GET /modules/proxmox/servers`,
+ *   serverseitig hinter `@UseModule('proxmox')`), alle 60 s neu; bei
+ *   verborgenem Browser-Tab pausiert der Takt, beim Zurueckkehren laedt
+ *   die Kachel sofort.
+ * - Groessenstufen per Container-Query am Kachelrumpf des Wrappers (der ist
+ *   bereits `@container-size`; hier bewusst KEIN weiterer Container, der
+ *   die Abfragen umlenken wuerde): schmal (< 15rem) nur Punkte und Namen,
+ *   sehr klein (< 7.5rem hoch oder < 8rem breit) nur Balken und Satz.
+ * - Ansichtsmodus: jede Zeile fuehrt zur Modulseite. Bearbeitungsmodus:
+ *   Zeilen ohne Ziel und ohne Tabstopp — bewusst KEIN Anker mit
+ *   verhindertem Klick wie bei den Favoriten, denn Links stehen im
+ *   Abbruch-Selektor von `dashboard-grid.tsx`; Anker-Zeilen wuerden das
+ *   Ziehen ueber fast die ganze Kachel blockieren.
+ * - T-I8V-05: bei „nicht erreichbar“ nur das Zustandswort, keine
+ *   Fehlerdetails und keine Adresse — die bleiben auf der Modulseite.
  */
-export function ProxmoxWidget({ isEditMode }: WidgetProps) {
+export function ProxmoxWidget({ config, isEditMode }: WidgetProps) {
   const t = useTranslations('widgets');
   const tp = useTranslations('proxmox');
+  const locale = useLocale();
   const user = useAuthStore((s) => s.user);
   const isAdmin = user?.role === 'ADMIN' || user?.role === 'SUPER_ADMIN';
 
+  const { title, serverIds } = useMemo(() => resolveProxmoxWidgetConfig(config), [config]);
+
   const [servers, setServers] = useState<ProxmoxServer[] | null>(null);
   // Fehler als Flag, nicht als Text: `t` gehoert nicht in die Effekt-
   // Abhaengigkeiten (Befund 14 aus favorites-widget).
@@ -36,60 +72,99 @@ export function ProxmoxWidget({ isEditMode }: WidgetProps) {
 
   useEffect(() => {
     let cancelled = false;
-    listServers()
-      .then((list) => {
-        if (cancelled) return;
-        setServers(list);
-        setLoadFailed(false);
-        setNow(Date.now());
-      })
-      .catch(() => {
-        if (!cancelled) setLoadFailed(true);
-      });
+
+    function load() {
+      listServers()
+        .then((list) => {
+          if (cancelled) return;
+          setServers(list);
+          setLoadFailed(false);
+          setNow(Date.now());
+        })
+        .catch(() => {
+          // Eine schon geladene Liste bleibt stehen; der Fehlersatz
+          // erscheint nur, solange es noch nie eine Liste gab.
+          if (!cancelled) setLoadFailed(true);
+        });
+    }
+
+    function handleVisibilityChange() {
+      if (document.visibilityState === 'visible') load();
+    }
+
+    load();
+    const intervalId = setInterval(() => {
+      if (document.visibilityState !== 'hidden') load();
+    }, REFRESH_MS);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
     return () => {
       cancelled = true;
+      clearInterval(intervalId);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
   }, []);
 
-  const counts = useMemo(() => summarizeHealth(servers ?? [], now), [servers, now]);
+  const selection = useMemo(() => selectServers(servers ?? [], serverIds), [servers, serverIds]);
+  const counts = useMemo(() => summarizeHealth(selection.servers, now), [selection, now]);
   const summary = useMemo(() => healthSummary(counts), [counts]);
+  const sorted = useMemo(() => sortServersByHealth(selection.servers, now), [selection, now]);
 
-  if (servers === null && loadFailed) {
+  const trimmedTitle = title.trim();
+  const header = trimmedTitle !== '' && (
+    <div className="shrink-0 border-b border-border px-2.5 py-1.5">
+      <h2 className="truncate text-sm font-semibold text-foreground">{trimmedTitle}</h2>
+    </div>
+  );
+
+  function frame(body: ReactNode, bodyClassName = 'gap-2') {
     return (
-      <div className="flex h-full items-center justify-center p-2.5">
-        <p className="text-center text-sm text-muted-foreground">{tp('loadError')}</p>
+      <div className="flex h-full flex-col overflow-hidden">
+        {header}
+        <div className={`flex min-h-0 flex-1 flex-col p-2.5 ${bodyClassName}`}>{body}</div>
       </div>
     );
   }
 
+  function centered(text: string, extra?: ReactNode) {
+    return frame(
+      <>
+        <p className="text-sm text-muted-foreground">{text}</p>
+        {extra}
+      </>,
+      'items-center justify-center gap-1.5 text-center',
+    );
+  }
+
+  if (servers === null && loadFailed) return centered(tp('loadError'));
+
   if (servers === null) {
-    return (
-      <div className="flex h-full flex-col overflow-hidden p-2.5" aria-busy="true">
-        <div className="h-1.5 w-full shrink-0 animate-pulse rounded-full bg-muted motion-reduce:animate-none" />
+    return frame(
+      <div aria-busy="true">
+        <div className="h-1.5 w-full animate-pulse rounded-full bg-muted motion-reduce:animate-none" />
         <span className="sr-only">{tp('loading')}</span>
-      </div>
+      </div>,
     );
   }
 
   if (servers.length === 0) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center gap-1.5 p-2.5 text-center">
-        <p className="text-sm text-muted-foreground">{t('proxmox.empty')}</p>
-        {isAdmin &&
-          (isEditMode ? (
-            <span className="text-sm font-medium text-foreground">{tp('card.settingsLink')}</span>
-          ) : (
-            <Link
-              href="/modules/proxmox/settings"
-              className="rounded-sm text-sm font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              {tp('card.settingsLink')}
-            </Link>
-          ))}
-      </div>
-    );
+    const settingsHint =
+      isAdmin &&
+      (isEditMode ? (
+        <span className="text-sm font-medium text-foreground">{tp('card.settingsLink')}</span>
+      ) : (
+        <Link
+          href="/modules/proxmox/settings"
+          className="rounded-sm text-sm font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {tp('card.settingsLink')}
+        </Link>
+      ));
+    return centered(t('proxmox.empty'), settingsHint);
   }
 
+  if (selection.selectionGone) return centered(t('proxmox.selectionGone'));
+
   const summaryText = summary.allOk
     ? t('proxmox.allOk')
     : summary.entries
@@ -101,16 +176,94 @@ export function ProxmoxWidget({ isEditMode }: WidgetProps) {
       ? HEALTH_STYLE[summary.worst].text
       : 'text-muted-foreground';
 
-  return (
-    <div className="flex h-full flex-col gap-2 overflow-hidden p-2.5">
+  function keyFigureText(figure: KeyFigure): string {
+    switch (figure.kind) {
+      case 'status':
+        return tp(`legend.${figure.health}`, { count: 1 });
+      case 'guests':
+        return t('proxmox.guests', { running: figure.running, total: figure.total });
+      case 'noGuests':
+        return t('proxmox.noGuests');
+      case 'load':
+        return t('proxmox.load', { percent: formatPercent(figure.fraction, locale) });
+      case 'backup': {
+        const age = formatAge(figure.at, now, locale);
+        return age === null ? tp('card.unknownValue') : t('proxmox.backupAgo', { age });
+      }
+      case 'noBackup':
+        return tp('card.pbs.noBackupYet');
+      case 'mailIn':
+        return t('proxmox.mailIn', { count: formatCount(figure.count, locale) });
+      case 'unknown':
+        return tp('card.unknownValue');
+    }
+  }
+
+  function keyFigureColor(figure: KeyFigure): string {
+    if (figure.kind === 'status') return HEALTH_STYLE[figure.health].text;
+    if (figure.kind === 'load') return METER_TEXT[figure.level];
+    if (figure.kind === 'backup' && figure.stale) return HEALTH_STYLE.warn.text;
+    return 'text-muted-foreground';
+  }
+
+  function rowContent(server: ProxmoxServer, health: ServerHealth) {
+    const figure = widgetKeyFigure(server, now);
+    return (
+      <>
+        <span
+          aria-hidden="true"
+          className={`h-2 w-2 shrink-0 rounded-full ${HEALTH_STYLE[health].fill}`}
+        />
+        <span className={`min-w-0 flex-1 truncate${health === 'orphan' ? ' opacity-70' : ''}`}>
+          {server.name}
+        </span>
+        {/* Der Zustand haengt nie nur an der Farbe. */}
+        <span className="sr-only">{tp(`health.${health}`)}</span>
+        <span
+          data-testid="proxmox-key-figure"
+          // Wiederholt die Kennzahl nur das Zustandswort, liest der Vorleser
+          // sie nicht ein zweites Mal.
+          aria-hidden={figure.kind === 'status' ? true : undefined}
+          className={`shrink-0 text-right text-xs tabular-nums @max-[15rem]:hidden ${keyFigureColor(figure)}`}
+        >
+          {keyFigureText(figure)}
+        </span>
+      </>
+    );
+  }
+
+  return frame(
+    <>
       <HealthBar variant="compact" counts={counts} />
       <p
-        className={`truncate text-sm font-medium ${summaryColor}`}
+        className={`shrink-0 truncate text-sm font-medium ${summaryColor}`}
         title={summaryText}
         data-testid="proxmox-summary"
       >
         {summaryText}
       </p>
-    </div>
+      <ul
+        data-testid="proxmox-list"
+        className="-mx-1 min-h-0 flex-1 overflow-y-auto [@container(max-height:7.5rem)]:hidden @max-[8rem]:hidden"
+      >
+        {sorted.map((server) => {
+          const health = serverHealth(server, now);
+          return (
+            <li key={server.id} data-testid="proxmox-row" data-server-name={server.name}>
+              {isEditMode ? (
+                <div className={ROW_CLASS}>{rowContent(server, health)}</div>
+              ) : (
+                <Link
+                  href="/modules/proxmox"
+                  className={`${ROW_CLASS} transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
+                >
+                  {rowContent(server, health)}
+                </Link>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </>,
   );
 }

apps/web/src/components/proxmox/proxmox-status.ts

@@ -159,3 +159,19 @@ export function formatAge(
   if (hours < 24) return rtf.format(-hours, 'hour');
   return rtf.format(-Math.floor(hours / 24), 'day');
 }
+
+/**
+ * „87 %“ — Anteil (0..1) als ganze Prozentzahl nach Sprache (deutsch mit
+ * geschuetztem Leerzeichen). Seit quick-260924-i8v hier statt in ServerCard,
+ * damit Modulseite und Dashboard-Kachel dasselbe Zahlformat nutzen.
+ */
+export function formatPercent(fraction: number, locale: string): string {
+  return new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 }).format(
+    fraction,
+  );
+}
+
+/** „12.904“ — ganze Zahl mit Tausendertrennzeichen nach Sprache. */
+export function formatCount(value: number, locale: string): string {
+  return new Intl.NumberFormat(locale).format(value);
+}