ochenstarik/agent-control-center
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix: AgentCard чистая версия, h-full, max-w-screen-2xl

Browse source
This commit is contained in:
ochenstarik-ui 2026-07-20 22:42:55 +07:00
parent 458b5a19eb
commit 443a06cec6
2 changed files with 28 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/App.tsx
View file

@ -25,7 +25,7 @@ export default function App() {
</div> </div>
</header> </header>
<main className="flex-1 overflow-auto p-8 lg:p-10 max-w-[1600px] mx-auto w-full"> <main className="flex-1 overflow-auto p-8 lg:p-10 max-w-screen-2xl mx-auto w-full">
<Dashboard /> <Dashboard />
</main> </main>
</div> </div>

61
frontend/src/components/agents/AgentCard.tsx
View file

@ -1,57 +1,50 @@
import { Cpu, Activity } from 'lucide-react' import { motion } from 'framer-motion'
export function AgentCard({ agent }: { agent: any }) { export function AgentCard({ agent }: { agent: any }) {
const statusColor = {
online: 'bg-emerald-500',
busy: 'bg-amber-500',
offline: 'bg-zinc-500',
}[agent.status] || 'bg-emerald-500'
const tokenPercent = Math.round((agent.tokens_used / agent.tokens_limit) * 100) const tokenPercent = Math.round((agent.tokens_used / agent.tokens_limit) * 100)
const budgetPercent = Math.round((agent.budget_used / agent.budget_limit) * 100) const budgetPercent = Math.round((agent.budget_used / agent.budget_limit) * 100)
return ( return (
<div className="bg-card border border-border hover:border-primary/50 p-8 transition-colors group"> <motion.div
whileHover={{ scale: 1.01 }}
className="bg-card border border-border p-8 hover:border-primary/50 transition-colors h-full flex flex-col"
>
{/* Header */} {/* Header */}
<div className="flex justify-between items-start mb-8"> <div className="flex justify-between items-start mb-8">
<div> <div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className={`w-4 h-4 ${statusColor} flex-shrink-0`} /> <div className={`w-4 h-4 ${agent.healthy !== false ? 'bg-emerald-500' : 'bg-zinc-500'}`} />
<div className="text-2xl font-mono font-bold tracking-tighter">{agent.name}</div> <div className="text-2xl font-mono font-bold tracking-tighter">{agent.name}</div>
</div> </div>
<div className="text-muted-foreground mt-1 text-sm">{agent.runtime} · {agent.model}</div> <div className="mt-1 text-muted-foreground text-sm">{agent.runtime} · {agent.model}</div>
{agent.provider && (
<div className="mt-2 flex items-center gap-2 text-xs">
<span className="bg-secondary px-3 py-1">{agent.provider}</span>
<span className="font-mono text-muted-foreground">{agent.account}</span>
</div>
)}
</div> </div>
<div className="text-emerald-500 text-xs uppercase tracking-[2px] font-medium">{agent.status}</div> <div className="text-emerald-500 text-xs uppercase tracking-widest font-medium">
{agent.healthy !== false ? 'ONLINE' : 'OFFLINE'}
</div>
</div>
{/* Account */}
<div className="mb-8 flex items-center gap-2 text-xs">
<span className="bg-secondary px-3 py-1">{agent.provider}</span>
<span className="font-mono text-muted-foreground">{agent.account}</span>
</div> </div>
{/* Metrics */} {/* Metrics */}
<div className="grid grid-cols-2 gap-10 mb-10"> <div className="grid grid-cols-2 gap-12 mb-10">
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="text-6xl font-mono font-bold tabular-nums">{agent.cpu}</div>
<Cpu className="w-4 h-4 text-muted-foreground" /> <div className="text-xs uppercase tracking-widest text-muted-foreground">CPU %</div>
<span className="text-xs text-muted-foreground uppercase tracking-widest">CPU %</span>
</div>
<div className="text-5xl font-mono font-bold tabular-nums">{agent.cpu}</div>
</div> </div>
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="text-6xl font-mono font-bold tabular-nums">{agent.activeRuns}</div>
<Activity className="w-4 h-4 text-muted-foreground" /> <div className="text-xs uppercase tracking-widest text-muted-foreground">RUNS</div>
<span className="text-xs text-muted-foreground uppercase tracking-widest">RUNS</span>
</div>
<div className="text-5xl font-mono font-bold tabular-nums">{agent.active_runs || agent.activeRuns}</div>
</div> </div>
</div> </div>
{/* Limits */} {/* Usage */}
<div className="space-y-6"> <div className="mt-auto space-y-8">
<div> <div>
<div className="flex justify-between text-xs mb-2 text-muted-foreground"> <div className="flex justify-between text-xs text-muted-foreground mb-2">
<span className="uppercase tracking-wider">Tokens</span> <span className="uppercase tracking-wider">Tokens</span>
<span className="font-mono">{agent.tokens_used?.toLocaleString()} / {agent.tokens_limit?.toLocaleString()}</span> <span className="font-mono">{agent.tokens_used?.toLocaleString()} / {agent.tokens_limit?.toLocaleString()}</span>
</div> </div>
@ -61,7 +54,7 @@ export function AgentCard({ agent }: { agent: any }) {
</div> </div>
<div> <div>
<div className="flex justify-between text-xs mb-2 text-muted-foreground"> <div className="flex justify-between text-xs text-muted-foreground mb-2">
<span className="uppercase tracking-wider">Budget</span> <span className="uppercase tracking-wider">Budget</span>
<span className="font-mono">${agent.budget_used} / ${agent.budget_limit}</span> <span className="font-mono">${agent.budget_used} / ${agent.budget_limit}</span>
</div> </div>
@ -73,10 +66,10 @@ export function AgentCard({ agent }: { agent: any }) {
<button <button
onClick={() => alert('Handoff started for ' + agent.name)} onClick={() => alert('Handoff started for ' + agent.name)}
className="mt-10 w-full border border-border hover:bg-secondary py-4 text-sm font-medium tracking-widest uppercase transition-colors" className="mt-10 w-full border border-border hover:bg-secondary py-4 text-sm tracking-widest uppercase font-medium transition-colors"
> >
Quick Handoff Quick Handoff
</button> </button>
</div> </motion.div>
) )
} }