88 lines
4.4 KiB
TypeScript
88 lines
4.4 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Activity, BrainCircuit, Zap, Server, ShieldCheck } from "lucide-react"
|
|
|
|
export default function AgentsPage() {
|
|
const agents = [
|
|
{ name: "DPP Generator Node", status: "Healthy", latency: "140ms", tokens: "4.2M", successRate: "99.9%" },
|
|
{ name: "Tutor Agent (Physics)", status: "Healthy", latency: "320ms", tokens: "8.1M", successRate: "98.5%" },
|
|
{ name: "Tutor Agent (Chem/Bio)", status: "Healthy", latency: "290ms", tokens: "6.5M", successRate: "99.1%" },
|
|
{ name: "Evaluator Node", status: "Under Load", latency: "850ms", tokens: "12.4M", successRate: "97.2%" },
|
|
]
|
|
|
|
return (
|
|
<div className="p-8 space-y-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">AI Agents Monitor</h1>
|
|
<p className="text-muted-foreground mt-1">Real-time telemetry for internal LLM orchestration nodes.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<Card className="border-border bg-secondary/10">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Global API Status</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-bold flex items-center gap-3">
|
|
<div className="size-3 rounded-full bg-[var(--cyan-ai)] animate-pulse"></div> Operational
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border bg-secondary/10">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Total Tokens Used (24h)</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-bold text-primary">31.2M</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border bg-secondary/10">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">Avg Generation Latency</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-3xl font-bold">400ms</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<h2 className="text-xl font-bold pt-4 border-b border-border pb-2">Active Microservices</h2>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{agents.map((agent, i) => (
|
|
<Card key={i} className={`border ${agent.status === 'Healthy' ? 'border-border' : 'border-yellow-500/50 shadow-[0_0_15px_-5px_rgba(234,179,8,0.3)]'} bg-background`}>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
|
<BrainCircuit className="text-[var(--cyan-ai)]" size={20} /> {agent.name}
|
|
</CardTitle>
|
|
<div className={`px-2.5 py-0.5 rounded-full text-xs font-bold ${agent.status === 'Healthy' ? 'bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)]' : 'bg-yellow-500/10 text-yellow-500 animate-pulse'}`}>
|
|
{agent.status}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-3 gap-4 mt-4">
|
|
<div className="space-y-1">
|
|
<div className="text-xs text-muted-foreground flex items-center gap-1"><Zap size={12}/> Latency</div>
|
|
<div className="font-mono text-lg">{agent.latency}</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="text-xs text-muted-foreground flex items-center gap-1"><Server size={12}/> Tokens</div>
|
|
<div className="font-mono text-lg">{agent.tokens}</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="text-xs text-muted-foreground flex items-center gap-1"><ShieldCheck size={12}/> Success</div>
|
|
<div className="font-mono text-lg">{agent.successRate}</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full bg-secondary h-1.5 rounded-full mt-6 overflow-hidden">
|
|
<div
|
|
className={`h-full ${agent.status === 'Healthy' ? 'bg-[var(--cyan-ai)]' : 'bg-yellow-500'}`}
|
|
style={{ width: agent.successRate }}
|
|
></div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|