54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
|
import { motion } from 'framer-motion'
|
||
|
|
import type { Agent, AgentAnim } from '../types'
|
||
|
|
import { AgentCard } from './AgentCard'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
agents: Agent[]
|
||
|
|
animations: Record<string, AgentAnim>
|
||
|
|
selectedId: string | null
|
||
|
|
onSelect: (id: string) => void
|
||
|
|
onDelegate: (agent: Agent) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AgentRoster({ agents, animations, selectedId, onSelect, onDelegate }: Props) {
|
||
|
|
return (
|
||
|
|
<section className="panel rounded-2xl p-5 relative overflow-hidden">
|
||
|
|
<div className="absolute inset-0 agent-roster-glow pointer-events-none" />
|
||
|
|
<div className="relative flex flex-wrap items-end justify-between gap-3 mb-4">
|
||
|
|
<div>
|
||
|
|
<p className="section-eyebrow">Autonomous workforce</p>
|
||
|
|
<h2 className="text-xl font-bold tracking-tight" style={{ color: 'var(--accent)' }}>
|
||
|
|
Agent Roster
|
||
|
|
</h2>
|
||
|
|
<p className="text-xs text-[var(--text-muted)] mt-1 max-w-md">
|
||
|
|
Selecteer een agent om te delegeren. Elk teamlid bewaakt een zone op de ops floor.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2 text-xs font-mono text-[var(--text-faint)]">
|
||
|
|
<span className="w-2 h-2 rounded-full bg-[var(--status-ok)] animate-pulse" />
|
||
|
|
{agents.length} agents online
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-3">
|
||
|
|
{agents.map((agent, i) => (
|
||
|
|
<motion.div
|
||
|
|
key={agent.id}
|
||
|
|
initial={{ opacity: 0, y: 12 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: i * 0.06 }}
|
||
|
|
>
|
||
|
|
<AgentCard
|
||
|
|
agent={agent}
|
||
|
|
anim={animations[agent.id] || { agentId: agent.id, state: 'idle' }}
|
||
|
|
selected={selectedId === agent.id}
|
||
|
|
onSelect={() => onSelect(agent.id)}
|
||
|
|
onDelegate={() => onDelegate(agent)}
|
||
|
|
/>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|