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