92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
|
import { useQuery } from '@tanstack/react-query'
|
||
|
|
import { listAgents } from '../services/api'
|
||
|
|
import { Activity, AlertTriangle } from 'lucide-react'
|
||
|
|
|
||
|
|
export default function HubPage() {
|
||
|
|
const { data, isLoading, error } = useQuery({
|
||
|
|
queryKey: ['agents'],
|
||
|
|
queryFn: listAgents,
|
||
|
|
})
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center h-64">
|
||
|
|
<div className="w-8 h-8 border-2 border-primary/30 border-t-primary rounded-full animate-spin" />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center h-64 text-danger">
|
||
|
|
<AlertTriangle size={24} className="mr-2" />
|
||
|
|
Failed to load agents
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const agents = data?.data ?? []
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<header>
|
||
|
|
<h1 className="text-2xl font-bold">Command Hub</h1>
|
||
|
|
<p className="text-on-surface-variant">Agent fleet overview</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||
|
|
{agents.map((agent) => (
|
||
|
|
<div
|
||
|
|
key={agent.id}
|
||
|
|
className="p-4 rounded-xl border border-surface-light bg-surface-dark"
|
||
|
|
>
|
||
|
|
<div className="flex items-start justify-between mb-3">
|
||
|
|
<div>
|
||
|
|
<h3 className="font-semibold">{agent.displayName}</h3>
|
||
|
|
<p className="text-xs text-on-surface-variant">{agent.role}</p>
|
||
|
|
</div>
|
||
|
|
<StatusDot status={agent.status} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{agent.currentTask && (
|
||
|
|
<div className="text-sm text-on-surface-variant mb-2">
|
||
|
|
{agent.currentTask}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{agent.taskProgress !== undefined && (
|
||
|
|
<div className="w-full h-2 bg-surface-light rounded-full overflow-hidden">
|
||
|
|
<div
|
||
|
|
className="h-full bg-primary rounded-full transition-all"
|
||
|
|
style={{ width: `${agent.taskProgress}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="mt-3 flex items-center gap-2 text-xs text-on-surface-muted">
|
||
|
|
<Activity size={12} />
|
||
|
|
{agent.channel} · {agent.lastActivity}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function StatusDot({ status }: { status: string }) {
|
||
|
|
const colorMap: Record<string, string> = {
|
||
|
|
active: 'bg-status-active',
|
||
|
|
idle: 'bg-status-idle',
|
||
|
|
thinking: 'bg-status-thinking',
|
||
|
|
error: 'bg-status-error',
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<div className={`w-2.5 h-2.5 rounded-full ${colorMap[status] ?? 'bg-status-offline'}`} />
|
||
|
|
<span className="text-xs capitalize text-on-surface-variant">{status}</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|