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>
2026-06-27 16:44:17 +02:00
parent ea256fca0d
commit 35189fde0e
11 changed files with 718 additions and 592 deletions
@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from "react"
+import { Activity } from "lucide-react"
+import { useTokenStats } from "@/lib/queries"
+import { LiveAreaChart, type ChartSeries } from "./LiveAreaChart"
+
+const MAX_POINTS = 40
+
+type RateSample = { t: number; prompt: number; completion: number }
+
+const SERIES: ChartSeries[] = [
+  { key: "prompt", label: "Prompt", color: "#f59e0b" },
+  { key: "completion", label: "Antwort", color: "#2dd4bf" },
+]
+
+export function TokenPerformanceCard() {
+  const { data: ts, dataUpdatedAt } = useTokenStats(3_000)
+  const [hist, setHist] = useState<RateSample[]>([])
+  const prev = useRef<{ p: number; c: number; t: number } | null>(null)
+
+  // Durchsatz (tok/s) aus den kumulativen Zählern ableiten: Delta / Zeitspanne pro Poll.
+  useEffect(() => {
+    if (!ts) return
+    const now = Date.now()
+    const p = ts.prompt_tokens, c = ts.completion_tokens
+    if (prev.current) {
+      const dt = Math.max((now - prev.current.t) / 1000, 0.001)
+      const prompt = Math.max(0, (p - prev.current.p) / dt)
+      const completion = Math.max(0, (c - prev.current.c) / dt)
+      setHist((h) => [...h, { t: now, prompt, completion }].slice(-MAX_POINTS))
+    }
+    prev.current = { p, c, t: now }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataUpdatedAt])
+
+  const last = hist[hist.length - 1]
+  const curRate = last ? Math.round(last.prompt + last.completion) : 0
+
+  return (
+    <div className="rounded-2xl border border-border/60 bg-gradient-to-b from-card/55 to-background/30 backdrop-blur-md p-5 shadow-lg shadow-black/20">
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <div>
+          <div className="flex items-center gap-2">
+            <Activity className="h-4.5 w-4.5 text-primary" />
+            <h2 className="text-sm font-semibold uppercase tracking-wide text-foreground">Token-Durchsatz</h2>
+            <span className="ml-1 inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground/70">
+              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" /> live
+            </span>
+          </div>
+          {ts && (
+            <div className="mt-2 flex items-baseline gap-2">
+              <span className="font-space text-3xl font-bold tracking-tight text-foreground tabular-nums">
+                {curRate.toLocaleString("de-DE")}
+              </span>
+              <span className="text-xs text-muted-foreground">tok/s aktuell</span>
+            </div>
+          )}
+          {ts && (
+            <div className="mt-0.5 font-mono text-[11px] text-muted-foreground/70">
+              {ts.total_tokens.toLocaleString("de-DE")} Tokens gesamt · {ts.saved_eur.toLocaleString("de-DE", { minimumFractionDigits: 2 })} € gespart
+            </div>
+          )}
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-1.5 pt-1">
+          {SERIES.map((s) => (
+            <div key={s.key} className="flex items-center gap-1.5">
+              <span className="h-2 w-2 rounded-full" style={{ background: s.color }} />
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{s.label}</span>
+              <span className="font-mono text-xs font-bold tabular-nums text-foreground">
+                {Math.round((last?.[s.key as "prompt" | "completion"]) ?? 0)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {ts ? (
+        <LiveAreaChart data={hist} series={SERIES} unit=" tok/s" yMode="auto" height={150} />
+      ) : (
+        <div className="flex h-[150px] items-center justify-center text-xs text-muted-foreground">Lade Durchsatz…</div>
+      )}
+
+      <div className="mt-2 border-t border-border/30 pt-2 text-[10px] text-muted-foreground/70">
+        Durchsatz aus dem Gateway abgeleitet (Prefill vs. Generierung). Flach bei Leerlauf.
+      </div>
+    </div>
+  )
+}