Hitonabi
707b812f8b
Bisher lag der Verlauf in component-lokalem State (useSystemHistory / TokenPerformanceCard). Beim Tab-Wechsel wurde die Zentrale unmountet -> Historie weg -> Graphen starteten leer und mussten sich neu aufbauen. Neu: lib/metricsStore.ts haelt den Verlauf modul-global (useSyncExternalStore) und wird von useMetricsFeeder() gefuettert, das in App (immer gemountet) haengt. So sammelt der Verlauf kontinuierlich weiter - unabhaengig vom aktiven Tab - und die Graphen zeigen beim Zurueckwechseln sofort die volle Historie. Zentrale + Diagnose teilen denselben Store. Verifiziert: Store waechst auch auf Modell-Manager weiter; Rueckkehr zeigt lueckenlosen Verlauf statt Reset. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
73 lines
3.3 KiB
TypeScript
73 lines
3.3 KiB
TypeScript
import { Activity } from "lucide-react"
|
|
import { useTokenStats } from "@/lib/queries"
|
|
import { useTokHistory } from "@/lib/metricsStore"
|
|
import { LiveAreaChart, type ChartSeries } from "./LiveAreaChart"
|
|
|
|
const SERIES: ChartSeries[] = [
|
|
{ key: "prompt", label: "Prompt", color: "#f59e0b" },
|
|
{ key: "completion", label: "Antwort", color: "#2dd4bf" },
|
|
]
|
|
|
|
export function TokenPerformanceCard() {
|
|
const { data: ts } = useTokenStats(3_000)
|
|
const hist = useTokHistory() // Durchsatz-Verlauf aus dem modul-globalen Store
|
|
|
|
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-card/45 backdrop-blur-md p-5 shadow-lg shadow-black/15">
|
|
<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 space-y-0.5 font-mono text-[11px] text-muted-foreground/70">
|
|
<div>
|
|
{ts.total_tokens.toLocaleString("de-DE")} Tokens gesamt · <span className="text-emerald-400/90">{ts.saved_eur.toLocaleString("de-DE", { minimumFractionDigits: 2 })} € gespart</span>
|
|
</div>
|
|
<div className="text-muted-foreground/55">
|
|
Input {ts.prompt_tokens.toLocaleString("de-DE")} · Output {ts.completion_tokens.toLocaleString("de-DE")}
|
|
</div>
|
|
</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>
|
|
)
|
|
}
|