From 443a06cec688d2fcadd5bbc25f956935cef511cc Mon Sep 17 00:00:00 2001
From: ochenstarik-ui <ochenstarik.ui@gmail.com>
Date: Mon, 20 Jul 2026 22:42:55 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20AgentCard=20=D1=87=D0=B8=D1=81=D1=82?=
 =?UTF-8?q?=D0=B0=D1=8F=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8F,=20h-full,?=
 =?UTF-8?q?=20max-w-screen-2xl?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                         |  2 +-
 frontend/src/components/agents/AgentCard.tsx | 61 +++++++++-----------
 2 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 16c704d..1bd2b96 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -25,7 +25,7 @@ export default function App() {
           </div>
         </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 />
         </main>
       </div>
diff --git a/frontend/src/components/agents/AgentCard.tsx b/frontend/src/components/agents/AgentCard.tsx
index 1a94861..7fdb297 100644
--- a/frontend/src/components/agents/AgentCard.tsx
+++ b/frontend/src/components/agents/AgentCard.tsx
@@ -1,57 +1,50 @@
-import { Cpu, Activity } from 'lucide-react'
+import { motion } from 'framer-motion'
 
 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 budgetPercent = Math.round((agent.budget_used / agent.budget_limit) * 100)
 
   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 */}
       <div className="flex justify-between items-start mb-8">
         <div>
           <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>
-          <div className="text-muted-foreground mt-1 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 className="mt-1 text-muted-foreground text-sm">{agent.runtime} · {agent.model}</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>
 
       {/* Metrics */}
-      <div className="grid grid-cols-2 gap-10 mb-10">
+      <div className="grid grid-cols-2 gap-12 mb-10">
         <div>
-          <div className="flex items-center gap-2 mb-1">
-            <Cpu className="w-4 h-4 text-muted-foreground" />
-            <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 className="text-6xl font-mono font-bold tabular-nums">{agent.cpu}</div>
+          <div className="text-xs uppercase tracking-widest text-muted-foreground">CPU %</div>
         </div>
         <div>
-          <div className="flex items-center gap-2 mb-1">
-            <Activity className="w-4 h-4 text-muted-foreground" />
-            <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 className="text-6xl font-mono font-bold tabular-nums">{agent.activeRuns}</div>
+          <div className="text-xs uppercase tracking-widest text-muted-foreground">RUNS</div>
         </div>
       </div>
 
-      {/* Limits */}
-      <div className="space-y-6">
+      {/* Usage */}
+      <div className="mt-auto space-y-8">
         <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="font-mono">{agent.tokens_used?.toLocaleString()} / {agent.tokens_limit?.toLocaleString()}</span>
           </div>
@@ -61,7 +54,7 @@ export function AgentCard({ agent }: { agent: any }) {
         </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="font-mono">${agent.budget_used} / ${agent.budget_limit}</span>
           </div>
@@ -73,10 +66,10 @@ export function AgentCard({ agent }: { agent: any }) {
 
       <button
         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
       </button>
-    </div>
+    </motion.div>
   )
 }