From d57335e499439f05b8b461597689c9ceef02b216 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 7 Nov 2025 19:30:47 +0000
Subject: [PATCH] Add agent status badge and style button

Add a status badge next to the agent name to indicate if the agent is active or inactive. Active agents will display a green badge with a filled circle, while inactive agents will show a gray badge with an outlined circle. The "Activate" button is now styled with a green background, and the "Deactivate" button retains its red styling.
---
 src/pages/AgentDetails.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/AgentDetails.tsx b/src/pages/AgentDetails.tsx
index 537fe8c..7a4d743 100644
--- a/src/pages/AgentDetails.tsx
+++ b/src/pages/AgentDetails.tsx
@@ -101,7 +101,19 @@ export default function AgentDetails() {
         </Button>
 
         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-          <h1 className="text-2xl md:text-3xl font-bold text-foreground">{agent.name}</h1>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl md:text-3xl font-bold text-foreground">{agent.name}</h1>
+            <Badge 
+              variant={agent.status === "active" ? "default" : "secondary"}
+              className={
+                agent.status === "active" 
+                  ? "bg-green-600 hover:bg-green-700 text-white" 
+                  : "bg-muted text-muted-foreground"
+              }
+            >
+              {agent.status === "active" ? "● Ativo" : "○ Inativo"}
+            </Badge>
+          </div>
           
           <div className="flex flex-col sm:flex-row gap-2">
             <Button 
@@ -115,7 +127,7 @@ export default function AgentDetails() {
             </Button>
             <Button 
               variant={agent.status === "active" ? "destructive" : "default"}
-              className="gap-2" 
+              className={agent.status === "active" ? "gap-2" : "gap-2 bg-green-600 hover:bg-green-700 text-white"}
               onClick={handleToggleStatus}
             >
               <Power className="h-4 w-4" />