Components
Loading preview...
A system monitor component, can be used for resources, AI agents, GPU, CPU, network, etc.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/system-monitor"use client"
import { useState, useEffect } from "react"
import SystemMonitor from "@/components/ui/system-monitor"
import type { ResourceData, Agent, DataPoint } from "@/components/system-monitor"
const generateDataPoint = (baseValue: number, variance: number, spikeChance = 0.05): DataPoint => {
const isSpike = Math.random() < spikeChance
const multiplier = isSpike ? 1.5 + Math.random() * 0.5 : 1
const value = Math.max(0, Math.min(100, baseValue + (Math.random() - 0.5) * variance * multiplier))
return {
value,
timestamp: Date.now(),
isSpike: isSpike && value > 70,
}
}
export default function Page() {
const [resourceData, setResourceData] = useState<ResourceData>({
cpu: [],
gpu: [],
vram: [],
network: [],
memory: [],
})
const [agents] = useState<Agent[]>([
{ id: "1", name: "Web Agent", memory: [], color: "hsl(var(--chart-1))" },
{ id: "2", name: "AI Assistant", memory: [], color: "hsl(var(--chart-2))" },
{ id: "3", name: "Background Sync", memory: [], color: "hsl(var(--chart-3))" },
{ id: "4", name: "Media Processor", memory: [], color: "hsl(var(--chart-4))" },
])
useEffect(() => {
const interval = setInterval(() => {
setResourceData((prev) => {
const maxPoints = 20
return {
cpu: [...prev.cpu, generateDataPoint(45, 30, 0.08)].slice(-maxPoints),
gpu: [...prev.gpu, generateDataPoint(35, 25, 0.06)].slice(-maxPoints),
vram: [...prev.vram, generateDataPoint(60, 20, 0.05)].slice(-maxPoints),
network: [...prev.network, generateDataPoint(25, 40, 0.1)].slice(-maxPoints),
memory: [...prev.memory, generateDataPoint(70, 15, 0.04)].slice(-maxPoints),
}
})
// Update agent memory
agents.forEach((agent) => {
const baseMemory = agent.id === "1" ? 150 : agent.id === "2" ? 200 : agent.id === "3" ? 80 : 120
const newPoint = generateDataPoint(baseMemory, 50, 0.06)
agent.memory = [...agent.memory, newPoint].slice(-15)
})
}, 1000)
return () => clearInterval(interval)
}, [agents])
return (
<div className="min-h-screen bg-background">
<div className="container mx-auto p-8">
<SystemMonitor resourceData={resourceData} agents={agents} />
</div>
</div>
)
}