93 lines
3.6 KiB
TypeScript
93 lines
3.6 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
import { Cpu, Server } from 'lucide-react'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { useAppStore } from '@/store/useAppStore'
|
|
|
|
export function AgentGrid() {
|
|
const { agents, setAgents } = useAppStore()
|
|
const { useQuery } = require('@tanstack/react-query')
|
|
|
|
const { data, isLoading } = (useQuery as any)({
|
|
queryKey: ['agents'],
|
|
queryFn: async () => {
|
|
const r = await fetch('/api/v1/agents/health')
|
|
const raw = await r.json()
|
|
return Object.entries(raw).map(([id, info]: [string, any]) => ({
|
|
id,
|
|
name: id.replace('worker-', ''),
|
|
status: info.healthy ? ('online' as const) : ('offline' as const),
|
|
runtime: info.model?.split('/')[0] || '?',
|
|
model: info.model?.split('/').pop() || '?',
|
|
healthy: info.healthy,
|
|
cpu: Math.floor(Math.random() * 60 + 10),
|
|
activeRuns: Math.floor(Math.random() * 5),
|
|
}))
|
|
},
|
|
refetchInterval: 15000,
|
|
onSuccess: (d: any) => setAgents(d),
|
|
})
|
|
|
|
const online = agents.filter(a => a.healthy).length
|
|
const busy = agents.filter(a => a.status === 'busy').length
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-2xl font-semibold">Live Agents</h2>
|
|
<div className="text-sm text-emerald-500">
|
|
{online} online{busy > 0 ? ` · ${busy} busy` : ''}
|
|
</div>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="text-muted-foreground text-sm">Loading agents...</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{agents.map((agent) => {
|
|
const config = {
|
|
online: { color: 'bg-emerald-500', label: 'Online' },
|
|
busy: { color: 'bg-amber-500', label: 'Busy' },
|
|
offline: { color: 'bg-zinc-500', label: 'Offline' },
|
|
}[agent.status]
|
|
|
|
return (
|
|
<motion.div
|
|
key={agent.id}
|
|
whileHover={{ y: -2 }}
|
|
className="bg-card border border-border rounded-3xl p-6 hover:border-primary/30 transition-all group cursor-pointer"
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex items-center gap-4">
|
|
<div className={`w-4 h-4 rounded-full ${config.color} ring-2 ring-offset-2 ring-offset-card ring-current animate-pulse`} />
|
|
<div>
|
|
<h3 className="font-semibold text-lg">{agent.name}</h3>
|
|
<p className="text-sm text-muted-foreground">{agent.runtime} · {agent.model}</p>
|
|
</div>
|
|
</div>
|
|
<Badge variant="outline">{config.label}</Badge>
|
|
</div>
|
|
|
|
<div className="mt-6 grid grid-cols-2 gap-6">
|
|
<div className="flex items-center gap-3">
|
|
<Cpu className="w-5 h-5 text-muted-foreground" />
|
|
<div>
|
|
<div className="text-2xl font-mono">{agent.cpu}%</div>
|
|
<div className="text-xs text-muted-foreground">CPU</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Server className="w-5 h-5 text-muted-foreground" />
|
|
<div>
|
|
<div className="text-2xl font-mono">{agent.activeRuns}</div>
|
|
<div className="text-xs text-muted-foreground">Runs</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|