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

Phase 6.3: brutal style — sharp corners, bold mono

Browse source
This commit is contained in:
ochenstarik-ui 2026-07-20 22:33:16 +07:00
parent e3f94d124e
commit 458b5a19eb
2 changed files with 40 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,4 @@
import { motion } from 'framer-motion' import { Cpu, Activity } from 'lucide-react'
import { Cpu, Activity, Zap, Wallet } from 'lucide-react'
import { Progress } from '@/components/ui/progress'
export function AgentCard({ agent }: { agent: any }) { export function AgentCard({ agent }: { agent: any }) {
const statusColor = { const statusColor = {
@ -13,84 +11,72 @@ export function AgentCard({ agent }: { agent: any }) {
const budgetPercent = Math.round((agent.budget_used / agent.budget_limit) * 100) const budgetPercent = Math.round((agent.budget_used / agent.budget_limit) * 100)
return ( return (
<motion.div <div className="bg-card border border-border hover:border-primary/50 p-8 transition-colors group">
whileHover={{ scale: 1.02, y: -4 }}
className="group bg-card/80 border border-border hover:border-primary/50 rounded-3xl p-6 transition-all duration-300 backdrop-blur-xl"
>
{/* Header */} {/* Header */}
<div className="flex items-start justify-between mb-6"> <div className="flex justify-between items-start mb-8">
<div> <div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-3">
<div className={`w-5 h-5 rounded-2xl ${statusColor} flex-shrink-0 ring-4 ring-background`} /> <div className={`w-4 h-4 ${statusColor} flex-shrink-0`} />
<div> <div className="text-2xl font-mono font-bold tracking-tighter">{agent.name}</div>
<div className="font-semibold text-xl tracking-tight">{agent.name}</div>
<div className="text-muted-foreground text-sm">{agent.runtime} · {agent.model}</div>
</div>
</div> </div>
<div className="text-muted-foreground mt-1 text-sm">{agent.runtime} · {agent.model}</div>
{agent.provider && ( {agent.provider && (
<div className="mt-3 flex items-center gap-2 text-xs"> <div className="mt-2 flex items-center gap-2 text-xs">
<div className="px-2.5 py-0.5 bg-secondary rounded-full text-muted-foreground"> <span className="bg-secondary px-3 py-1">{agent.provider}</span>
{agent.provider} <span className="font-mono text-muted-foreground">{agent.account}</span>
</div>
<div className="text-muted-foreground font-mono">{agent.account}</div>
</div> </div>
)} )}
</div> </div>
<div className="text-xs uppercase tracking-widest text-emerald-500 font-medium">{agent.status}</div> <div className="text-emerald-500 text-xs uppercase tracking-[2px] font-medium">{agent.status}</div>
</div> </div>
{/* Main metrics */} {/* Metrics */}
<div className="grid grid-cols-2 gap-6 mb-6"> <div className="grid grid-cols-2 gap-10 mb-10">
<div className="flex items-center gap-3">
<Cpu className="w-6 h-6 text-muted-foreground" />
<div> <div>
<div className="text-3xl font-mono font-semibold tabular-nums">{agent.cpu}</div> <div className="flex items-center gap-2 mb-1">
<div className="text-[10px] uppercase tracking-widest text-muted-foreground -mt-1">CPU %</div> <Cpu className="w-4 h-4 text-muted-foreground" />
<span className="text-xs text-muted-foreground uppercase tracking-widest">CPU %</span>
</div> </div>
<div className="text-5xl font-mono font-bold tabular-nums">{agent.cpu}</div>
</div> </div>
<div className="flex items-center gap-3">
<Activity className="w-6 h-6 text-muted-foreground" />
<div> <div>
<div className="text-3xl font-mono font-semibold tabular-nums">{agent.active_runs || agent.activeRuns}</div> <div className="flex items-center gap-2 mb-1">
<div className="text-[10px] uppercase tracking-widest text-muted-foreground -mt-1">RUNS</div> <Activity className="w-4 h-4 text-muted-foreground" />
<span className="text-xs text-muted-foreground uppercase tracking-widest">RUNS</span>
</div> </div>
<div className="text-5xl font-mono font-bold tabular-nums">{agent.active_runs || agent.activeRuns}</div>
</div> </div>
</div> </div>
{/* Per-agent Usage Limits */} {/* Limits */}
<div className="space-y-4 text-sm border-t border-border pt-5"> <div className="space-y-6">
<div> <div>
<div className="flex justify-between mb-1.5"> <div className="flex justify-between text-xs mb-2 text-muted-foreground">
<span className="flex items-center gap-1.5 text-muted-foreground"> <span className="uppercase tracking-wider">Tokens</span>
<Zap className="w-4 h-4" /> Tokens <span className="font-mono">{agent.tokens_used?.toLocaleString()} / {agent.tokens_limit?.toLocaleString()}</span>
</span> </div>
<span className="font-mono text-muted-foreground text-xs"> <div className="h-1 bg-secondary">
{agent.tokens_used?.toLocaleString()} / {agent.tokens_limit?.toLocaleString()} <div className="h-1 bg-foreground transition-all duration-500" style={{ width: `${tokenPercent}%` }} />
</span>
</div> </div>
<Progress value={tokenPercent} />
</div> </div>
<div> <div>
<div className="flex justify-between mb-1.5"> <div className="flex justify-between text-xs mb-2 text-muted-foreground">
<span className="flex items-center gap-1.5 text-muted-foreground"> <span className="uppercase tracking-wider">Budget</span>
<Wallet className="w-4 h-4" /> Budget <span className="font-mono">${agent.budget_used} / ${agent.budget_limit}</span>
</span> </div>
<span className="font-mono text-muted-foreground text-xs"> <div className="h-1 bg-secondary">
${agent.budget_used} / ${agent.budget_limit} <div className="h-1 bg-foreground transition-all duration-500" style={{ width: `${budgetPercent}%` }} />
</span>
</div> </div>
<Progress value={budgetPercent} />
</div> </div>
</div> </div>
<button <button
onClick={() => alert('Handoff started for ' + agent.name)} onClick={() => alert('Handoff started for ' + agent.name)}
className="mt-6 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-2xl text-sm font-medium transition-colors flex items-center justify-center gap-2" className="mt-10 w-full border border-border hover:bg-secondary py-4 text-sm font-medium tracking-widest uppercase transition-colors"
> >
<Zap className="w-4 h-4" />
Quick Handoff Quick Handoff
</button> </button>
</motion.div> </div>
) )
} }

5
frontend/src/index.css
View file

@ -27,10 +27,7 @@ body {
font-feature-settings: "tnum"; font-feature-settings: "tnum";
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.card { .card, [class*="rounded-"] { border-radius: 4px !important; }
background: rgba(24, 24, 27, 0.8);
backdrop-filter: blur(20px);
}
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(240 3.7% 25%); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: hsl(240 3.7% 25%); border-radius: 3px; }