Hitonabi
7a11fd2846
DashboardView 849 -> ~40 Zeilen Orchestrator. Sechs eigenständige Karten unter components/dashboard/, jede mit eigenem Daten-Hook (react-query, geteilte Keys): - RadialGauge, SystemStatusCard (useSystemStatus) - UpdatesCard (useUpdates+useJobs; OS/Engine-Update, Reboot, Modell-Upgrade, Sudo-Modal, invalidiert nach Aktionen) - AgentStatusCard (useAgentStatus+useModels; Gehirn-Wechsel-Modal) - RolesCard (useModels), MemoryInputCard (useMemory), TokenStatsCard (useTokenStats) Kein manuelles useEffect+setInterval mehr; useDialog statt lokalem Dialog-State. Verifiziert: tsc grün, Build grün, alle 6 Karten rendern, Live-Daten + Pricing- Footer korrekt, keine Konsolenfehler. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
28 lines
1.3 KiB
TypeScript
28 lines
1.3 KiB
TypeScript
import { cn } from "@/lib/utils"
|
|
|
|
export function RadialGauge({ value, label, detail }: { value: number; label: string; detail?: string }) {
|
|
const radius = 24
|
|
const circ = 2 * Math.PI * radius
|
|
const offset = circ - (Math.min(value, 100) / 100) * circ
|
|
|
|
const strokeColor = value > 90
|
|
? "stroke-red-500"
|
|
: value > 75
|
|
? "stroke-amber-500"
|
|
: "stroke-primary"
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-1.5 p-2 bg-background/20 rounded-xl border border-border/40">
|
|
<div className="relative flex h-16 w-16 items-center justify-center">
|
|
<svg className="absolute inset-0 h-full w-full -rotate-90">
|
|
<circle cx="32" cy="32" r={radius} className="stroke-muted fill-none" strokeWidth="4.5" />
|
|
<circle cx="32" cy="32" r={radius} className={cn("fill-none transition-all duration-700 ease-out", strokeColor)} strokeWidth="4.5" strokeDasharray={circ} strokeDashoffset={offset} strokeLinecap="round" />
|
|
</svg>
|
|
<span className="text-xs font-mono font-bold tracking-tight text-foreground">{Math.round(value)}%</span>
|
|
</div>
|
|
<span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">{label}</span>
|
|
{detail && <span className="text-[10px] font-mono text-muted-foreground/80">{detail}</span>}
|
|
</div>
|
|
)
|
|
}
|