Feat: Live-Charts auf Diagnose + Token-Durchsatz-Performance-Karte (Recharts)

Gemeinsame LiveAreaChart-Komponente + useSystemHistory-Hook (EINE Quelle der Wahrheit
fuer den Live-Verlauf), genutzt von Zentrale & Diagnose.

- Diagnose: die 4 statischen Balken (CPU/RAM/GPU/Disk) sind jetzt farbcodierte
  Einzel-Live-Charts (Spline, Gradient, Hover-Tooltip, dyn. Y-Achse).
- Neue TokenPerformanceCard (Zentrale): Live-Durchsatz tok/s, aus den kumulativen
  Token-Zaehlern als Rate abgeleitet (Prompt/Prefill vs. Antwort/Generierung), KPI-
  Headline (tok/s, Gesamt-Tokens, gespart EUR), dunkler Performance-Stil.
- SystemStatusCard auf die geteilte Komponente/Hook umgestellt (schlanker).

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

frontend/src/lib/useSystemHistory.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react"
+import { useSystemStatus } from "@/lib/queries"
+
+export type SysSample = { t: number; cpu: number; ram: number; gpu: number | null; disk: number | null }
+
+const MAX_POINTS = 40   // bei 3s-Poll ~2 Min Live-Verlauf
+
+/** Rollende Live-Historie der System-Metriken (CPU/RAM/GPU/Disk). Hängt bei jedem Poll
+ * (dataUpdatedAt) einen Messpunkt an und hält die letzten 40. Geteilt von Zentrale +
+ * Diagnose, damit beide denselben Verlauf aufbauen. */
+export function useSystemHistory() {
+  const { data: sys, dataUpdatedAt, error } = useSystemStatus(3_000)
+  const [hist, setHist] = useState<SysSample[]>([])
+
+  useEffect(() => {
+    if (!sys) return
+    setHist((h) => [
+      ...h,
+      {
+        t: Date.now(),
+        cpu: sys.cpu?.percent ?? 0,
+        ram: sys.ram?.percent ?? 0,
+        gpu: sys.gpu?.busy_percent ?? null,
+        disk: sys.disk?.percent ?? null,
+      },
+    ].slice(-MAX_POINTS))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataUpdatedAt])
+
+  return { sys, hist, error }
+}