Hitonabi/mission-control-v2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Hitonabi
2026-06-27 16:44:17 +02:00
parent ea256fca0d
commit 35189fde0e
11 changed files with 718 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DashboardView.tsx
+4
View File
@@ -5,6 +5,7 @@ import { AgentStatusCard } from "@/components/dashboard/AgentStatusCard"
import { RolesCard } from "@/components/dashboard/RolesCard"
import { MemoryInputCard } from "@/components/dashboard/MemoryInputCard"
import { TokenStatsCard } from "@/components/dashboard/TokenStatsCard"
import { TokenPerformanceCard } from "@/components/dashboard/TokenPerformanceCard"
export function DashboardView() {
return (
@@ -26,6 +27,9 @@ export function DashboardView() {
<UpdatesCard />
</div>
{/* Live-Durchsatz (Performance) */}
<TokenPerformanceCard />
{/* Bottom Grid: Agent, Roles, Memory & Token Stats */}
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
<AgentStatusCard />
frontend/src/views/SystemView.tsx
+27 -32
View File
@@ -1,43 +1,35 @@
import { useState } from "react"
import { ExternalLink, RefreshCw, Save, Cpu, HardDrive, Cpu as GpuIcon, Activity } from "lucide-react"
import { api } from "@/lib/api"
import { useSystemStatus, useServices } from "@/lib/queries"
import { useServices } from "@/lib/queries"
import { useSystemHistory, type SysSample } from "@/lib/useSystemHistory"
import { useDialog } from "@/lib/useDialog"
import { cn, resolveExternalUrl } from "@/lib/utils"
import { gb } from "@/lib/format"
import { LiveAreaChart } from "@/components/dashboard/LiveAreaChart"
function DiagnosticBar({ label, percent, detail, icon: Icon }: { label: string; percent: number; detail?: string; icon: any }) {
const barColor = percent > 90
? "bg-red-500 shadow-md shadow-red-500/20"
: percent > 75
? "bg-amber-500 shadow-md shadow-amber-500/20"
: "bg-primary shadow-md shadow-primary/20"
function MetricChartCard({ label, percent, detail, icon: Icon, color, seriesKey, data }: {
label: string; percent: number; detail?: string; icon: any
color: string; seriesKey: keyof SysSample; data: SysSample[]
}) {
return (
<div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 shadow-lg shadow-black/10 flex flex-col justify-between gap-3 hover:border-primary/30 transition-all duration-300">
<div className="flex items-center justify-between">
<div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-4 shadow-lg shadow-black/10 hover:border-primary/30 transition-all duration-300">
<div className="mb-1 flex items-center justify-between">
<div className="flex items-center gap-2">
<Icon className="h-4.5 w-4.5 text-primary" />
<Icon className="h-4.5 w-4.5" style={{ color }} />
<span className="text-xs font-semibold uppercase tracking-wider text-foreground">{label}</span>
</div>
<span className="text-xs font-mono font-bold text-foreground">{Math.round(percent)}%</span>
<span className="font-mono text-sm font-bold tabular-nums text-foreground">{Math.round(percent)}%</span>
</div>
<div className="w-full h-2 bg-background/40 rounded-full overflow-hidden border border-border/20">
<div
className={cn("h-full transition-all duration-700 ease-out", barColor)}
style={{ width: `${Math.min(percent, 100)}%` }}
/>
</div>
{detail && <div className="text-[10px] font-mono text-muted-foreground/80">{detail}</div>}
{detail && <div className="mb-1 font-mono text-[10px] text-muted-foreground/70">{detail}</div>}
<LiveAreaChart data={data} series={[{ key: seriesKey as string, label, color }]} unit="%" yMode="percent" height={88} />
</div>
)
}
export function SystemView() {
const { data: s, error: sErr } = useSystemStatus(3_000)
const { sys: s, hist, error: sErr } = useSystemHistory()
const { data: svc } = useServices(3_000)
const { showAlert, dialogElement } = useDialog()
const error = sErr ? String(sErr) : ""
@@ -95,26 +87,29 @@ export function SystemView() {
{s && (
<div className="space-y-4">
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<DiagnosticBar label="CPU" percent={s.cpu.percent} detail={s.cpu.cores ? `${s.cpu.cores} Cores` : undefined} icon={Cpu} />
<DiagnosticBar label="RAM" percent={s.ram.percent} detail={`${gb(s.ram.used)} / ${gb(s.ram.total)} GB`} icon={Activity} />
<MetricChartCard label="CPU" color="#2dd4bf" seriesKey="cpu" data={hist}
percent={s.cpu.percent} detail={s.cpu.cores ? `${s.cpu.cores} Cores` : undefined} icon={Cpu} />
<MetricChartCard label="RAM" color="#38bdf8" seriesKey="ram" data={hist}
percent={s.ram.percent} detail={`${gb(s.ram.used)} / ${gb(s.ram.total)} GB`} icon={Activity} />
{s.gpu && s.gpu.busy_percent != null && (
<DiagnosticBar
label="GPU"
percent={s.gpu.busy_percent}
<MetricChartCard
label="GPU" color="#a78bfa" seriesKey="gpu" data={hist}
percent={s.gpu.busy_percent}
detail={
s.gpu.gtt_used != null && s.gpu.gtt_total
? `${gb(s.gpu.gtt_used)} / ${gb(s.gpu.gtt_total)} GB (GTT/unified)`
: s.gpu.vram_used != null && s.gpu.vram_total
? `${gb(s.gpu.vram_used)} / ${gb(s.gpu.vram_total)} GB VRAM`
: undefined
}
icon={GpuIcon}
}
icon={GpuIcon}
/>
)}
{s.disk && (
<DiagnosticBar label="Disk" percent={s.disk.percent} detail={`${gb(s.disk.used)} / ${gb(s.disk.total)} GB`} icon={HardDrive} />
<MetricChartCard label="Disk" color="#fbbf24" seriesKey="disk" data={hist}
percent={s.disk.percent} detail={`${gb(s.disk.used)} / ${gb(s.disk.total)} GB`} icon={HardDrive} />
)}
</div>