From f8966d0ae8d0425bdb15fa04ad30ea94550a6806 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:17:03 +0000
Subject: [PATCH] Refactor agent cards on home screen

Update agent cards to display title, AI model, status, and agent version. Remove the options button and replace it with a chevron icon to navigate to the agent details screen.
---
 src/pages/Agents.tsx | 90 +++++++++++---------------------------------
 1 file changed, 23 insertions(+), 67 deletions(-)

diff --git a/src/pages/Agents.tsx b/src/pages/Agents.tsx
index 3bfc37d..c5c3095 100644
--- a/src/pages/Agents.tsx
+++ b/src/pages/Agents.tsx
@@ -4,14 +4,8 @@ import { CreateAgentDialog } from "@/components/agents/CreateAgentDialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Plus, Search, MoreVertical, Edit, Trash2, Bot, Zap } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Plus, Search, Bot, ChevronRight } from "lucide-react";
 
 export default function Agents() {
   const navigate = useNavigate();
@@ -23,7 +17,7 @@ export default function Agents() {
       id: 1,
       name: "Agente de Atendimento",
       status: "active" as const,
-      prompt: "Prompt de Atendimento v2.1",
+      version: "2.1",
       model: "Google Gemini 2.5 Flash",
       createdAt: "2 dias atrás",
     },
@@ -31,7 +25,7 @@ export default function Agents() {
       id: 2,
       name: "Agente de Vendas",
       status: "active" as const,
-      prompt: "Prompt de Vendas v1.5",
+      version: "1.5",
       model: "OpenAI GPT-5",
       createdAt: "5 dias atrás",
     },
@@ -39,7 +33,7 @@ export default function Agents() {
       id: 3,
       name: "Agente de Análise",
       status: "inactive" as const,
-      prompt: "Prompt de Análise",
+      version: "1.0",
       model: "Anthropic Claude Sonnet 4.5",
       createdAt: "1 semana atrás",
     },
@@ -95,68 +89,30 @@ export default function Agents() {
               <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
               
               <CardHeader className="relative pb-3">
-                <div className="flex items-start justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
-                      <Bot className="h-6 w-6 text-primary" />
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex items-center gap-3 flex-1 min-w-0">
+                    <div className="h-14 w-14 rounded-xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors flex-shrink-0">
+                      <Bot className="h-7 w-7 text-primary" />
                     </div>
-                    <div>
-                      <CardTitle className="text-xl">{agent.name}</CardTitle>
-                      <CardDescription className="text-xs mt-1">{agent.createdAt}</CardDescription>
+                    <div className="flex-1 min-w-0">
+                      <CardTitle className="text-xl truncate">{agent.name}</CardTitle>
+                      <div className="flex items-center gap-2 mt-1">
+                        <Badge variant="outline" className="text-xs">
+                          v{agent.version}
+                        </Badge>
+                      </div>
                     </div>
                   </div>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button 
-                        variant="ghost" 
-                        size="icon" 
-                        className="h-8 w-8"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <MoreVertical className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem 
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigate(`/agents/${agent.id}`);
-                        }}
-                      >
-                        <Edit className="h-4 w-4 mr-2" />
-                        Editar
-                      </DropdownMenuItem>
-                      <DropdownMenuItem 
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          console.log("Delete", agent.id);
-                        }}
-                        className="text-destructive"
-                      >
-                        <Trash2 className="h-4 w-4 mr-2" />
-                        Excluir
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
+                  <div className="flex-shrink-0 h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 group-hover:scale-110 transition-all">
+                    <ChevronRight className="h-5 w-5 text-primary" />
+                  </div>
                 </div>
               </CardHeader>
 
-              <CardContent className="relative space-y-4">
-                <div className="space-y-3">
-                  <div className="flex items-start gap-2 p-3 rounded-lg bg-muted/50">
-                    <Zap className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
-                    <div className="flex-1 min-w-0">
-                      <p className="text-xs text-muted-foreground mb-1">Prompt</p>
-                      <p className="text-sm font-medium truncate">{agent.prompt}</p>
-                    </div>
-                  </div>
-
-                  <div className="p-3 rounded-lg bg-muted/50">
-                    <p className="text-xs text-muted-foreground mb-2">Modelo de IA</p>
-                    <code className="text-xs bg-background/80 px-3 py-1.5 rounded-md border inline-block">
-                      {agent.model}
-                    </code>
-                  </div>
+              <CardContent className="relative space-y-3">
+                <div className="p-3 rounded-lg bg-muted/50">
+                  <p className="text-xs text-muted-foreground mb-2">Modelo de IA</p>
+                  <p className="text-sm font-medium">{agent.model}</p>
                 </div>
 
                 <div className="flex items-center justify-between pt-2 border-t">