diff --git a/src/App.tsx b/src/App.tsx
index 36f32f0..830f3a5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,7 +6,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AppLayout } from "./components/layout/AppLayout";
 import Agents from "./pages/Agents";
-import Prompts from "./pages/Prompts";
+import AgentDetails from "./pages/AgentDetails";
 import TestPrompt from "./pages/TestPrompt";
 import History from "./pages/History";
 import NotFound from "./pages/NotFound";
@@ -23,7 +23,7 @@ const App = () => (
           <Routes>
             <Route element={<AppLayout />}>
               <Route path="/" element={<Agents />} />
-              <Route path="/prompts" element={<Prompts />} />
+              <Route path="/agents/:id" element={<AgentDetails />} />
               <Route path="/test" element={<TestPrompt />} />
               <Route path="/history" element={<History />} />
             </Route>
diff --git a/src/components/layout/AppSidebar.tsx b/src/components/layout/AppSidebar.tsx
index 606033c..54f2b9f 100644
--- a/src/components/layout/AppSidebar.tsx
+++ b/src/components/layout/AppSidebar.tsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 import { NavLink } from "react-router-dom";
 import {
   Bot,
-  FileText,
   TestTube,
   ArrowLeft,
   ChevronLeft,
@@ -14,7 +13,6 @@ import { ThemeToggle } from "./ThemeToggle";
 
 const menuItems = [
   { title: "Agentes", url: "/", icon: Bot },
-  { title: "Prompts", url: "/prompts", icon: FileText },
   { title: "Testar Prompt", url: "/test", icon: TestTube },
 ];
 
diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx
index f144da9..aef1aa8 100644
--- a/src/components/layout/MobileNav.tsx
+++ b/src/components/layout/MobileNav.tsx
@@ -1,12 +1,11 @@
 import { useState } from "react";
 import { NavLink } from "react-router-dom";
-import { Bot, FileText, TestTube, Menu, X } from "lucide-react";
+import { Bot, TestTube, Menu, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ThemeToggle } from "./ThemeToggle";
 
 const menuItems = [
   { title: "Agentes", url: "/", icon: Bot },
-  { title: "Prompts", url: "/prompts", icon: FileText },
   { title: "Testar Prompt", url: "/test", icon: TestTube },
 ];
 
diff --git a/src/components/prompts/CreatePromptDialog.tsx b/src/components/prompts/CreatePromptDialog.tsx
deleted file mode 100644
index ae37349..0000000
--- a/src/components/prompts/CreatePromptDialog.tsx
+++ /dev/null
@@ -1,266 +0,0 @@
-import { useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Wand2 } from "lucide-react";
-
-interface CreatePromptDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function CreatePromptDialog({ open, onOpenChange }: CreatePromptDialogProps) {
-  const [title, setTitle] = useState("");
-  const [systemPrompt, setSystemPrompt] = useState("");
-  
-  // Assistente fields
-  const [agentName, setAgentName] = useState("");
-  const [agentRole, setAgentRole] = useState("");
-  const [targetAudience, setTargetAudience] = useState("");
-  const [mainObjective, setMainObjective] = useState("");
-  const [toneOfVoice, setToneOfVoice] = useState("");
-  const [forbiddenPatterns, setForbiddenPatterns] = useState("");
-  const [refinementInstructions, setRefinementInstructions] = useState("");
-  const [isGenerated, setIsGenerated] = useState(false);
-
-  const handleGeneratePrompt = () => {
-    let generatedPrompt = `Você é ${agentName}, ${agentRole}.
-
-Público-alvo: ${targetAudience}
-
-Objetivo principal: ${mainObjective}
-
-Tom de voz: ${toneOfVoice}
-
-${forbiddenPatterns ? `Padrões proibidos:\n${forbiddenPatterns}` : ''}
-
-Siga estas diretrizes em todas as suas interações.`;
-
-    if (refinementInstructions && isGenerated) {
-      generatedPrompt += `\n\nInstruções adicionais:\n${refinementInstructions}`;
-    }
-
-    setSystemPrompt(generatedPrompt);
-    setIsGenerated(true);
-  };
-
-  const handleStartOver = () => {
-    setAgentName("");
-    setAgentRole("");
-    setTargetAudience("");
-    setMainObjective("");
-    setToneOfVoice("");
-    setForbiddenPatterns("");
-    setRefinementInstructions("");
-    setSystemPrompt("");
-    setIsGenerated(false);
-  };
-
-  const handleSave = () => {
-    console.log("Salvando prompt:", { title, systemPrompt });
-    // Aqui você implementaria a lógica de salvar no backend
-    onOpenChange(false);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto w-[95vw] sm:w-full">
-        <DialogHeader>
-          <DialogTitle>Criar Novo Prompt</DialogTitle>
-          <DialogDescription>
-            Crie um prompt manualmente ou use o assistente para gerar automaticamente.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="title">Título</Label>
-            <Input
-              id="title"
-              placeholder="Nome do prompt"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-            />
-          </div>
-
-          <Tabs defaultValue="manual" className="w-full">
-            <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="manual">Manual</TabsTrigger>
-              <TabsTrigger value="assistant">
-                <Wand2 className="w-4 h-4 mr-2" />
-                Assistente
-              </TabsTrigger>
-            </TabsList>
-
-            <TabsContent value="manual" className="space-y-4 mt-4">
-              <div className="space-y-2">
-                <Label htmlFor="systemPrompt">System Prompt</Label>
-                <Textarea
-                  id="systemPrompt"
-                  placeholder="Digite o system prompt..."
-                  value={systemPrompt}
-                  onChange={(e) => setSystemPrompt(e.target.value)}
-                  className="min-h-[400px] font-mono text-sm"
-                />
-              </div>
-            </TabsContent>
-
-            <TabsContent value="assistant" className="space-y-4 mt-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="agentName">Nome do Agente</Label>
-                  <Input
-                    id="agentName"
-                    placeholder="Ex: Clara"
-                    value={agentName}
-                    onChange={(e) => setAgentName(e.target.value)}
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="agentRole">Função / Papel do Agente</Label>
-                  <Input
-                    id="agentRole"
-                    placeholder="Ex: assistente de atendimento ao cliente"
-                    value={agentRole}
-                    onChange={(e) => setAgentRole(e.target.value)}
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="targetAudience">Público-alvo</Label>
-                <Input
-                  id="targetAudience"
-                  placeholder="Ex: Clientes da loja online de eletrônicos"
-                  value={targetAudience}
-                  onChange={(e) => setTargetAudience(e.target.value)}
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="mainObjective">Objetivo Principal</Label>
-                <Textarea
-                  id="mainObjective"
-                  placeholder="Ex: Ajudar clientes com dúvidas sobre produtos e pedidos"
-                  value={mainObjective}
-                  onChange={(e) => setMainObjective(e.target.value)}
-                  className="min-h-[80px]"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="toneOfVoice">Tom de Voz</Label>
-                <Select value={toneOfVoice} onValueChange={setToneOfVoice}>
-                  <SelectTrigger id="toneOfVoice">
-                    <SelectValue placeholder="Selecione o tom de voz" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="amigavel">Amigável</SelectItem>
-                    <SelectItem value="formal">Formal</SelectItem>
-                    <SelectItem value="tecnico">Técnico</SelectItem>
-                    <SelectItem value="educado">Educado</SelectItem>
-                    <SelectItem value="institucional">Institucional</SelectItem>
-                    <SelectItem value="neutro">Neutro</SelectItem>
-                    <SelectItem value="engracado">Engraçado</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="forbiddenPatterns">Padrões Proibidos</Label>
-                <Textarea
-                  id="forbiddenPatterns"
-                  placeholder="Ex: Não usar gírias, não dar opiniões pessoais, evitar emojis"
-                  value={forbiddenPatterns}
-                  onChange={(e) => setForbiddenPatterns(e.target.value)}
-                  className="min-h-[100px]"
-                />
-              </div>
-
-              <div className="flex gap-2">
-                <Button
-                  onClick={handleGeneratePrompt}
-                  className="flex-1"
-                  variant="secondary"
-                  disabled={!agentName || !agentRole}
-                >
-                  <Wand2 className="w-4 h-4 mr-2" />
-                  {isGenerated ? "Regenerar Prompt" : "Gerar System Prompt"}
-                </Button>
-                {isGenerated && (
-                  <Button
-                    onClick={handleStartOver}
-                    variant="outline"
-                  >
-                    Começar do Zero
-                  </Button>
-                )}
-              </div>
-
-              {systemPrompt && (
-                <div className="space-y-4 p-4 border rounded-lg bg-muted/50">
-                  <div className="space-y-2">
-                    <Label>Prompt Gerado</Label>
-                    <Textarea
-                      value={systemPrompt}
-                      onChange={(e) => setSystemPrompt(e.target.value)}
-                      className="min-h-[400px] font-mono text-sm"
-                    />
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="refinement">
-                      Instruções Adicionais (opcional)
-                    </Label>
-                    <Textarea
-                      id="refinement"
-                      placeholder="Ex: Adicione mais empatia nas respostas, seja mais direto, inclua exemplos práticos..."
-                      value={refinementInstructions}
-                      onChange={(e) => setRefinementInstructions(e.target.value)}
-                      className="min-h-[100px]"
-                    />
-                    <Button
-                      onClick={handleGeneratePrompt}
-                      size="sm"
-                      variant="secondary"
-                      disabled={!refinementInstructions}
-                    >
-                      <Wand2 className="w-4 h-4 mr-2" />
-                      Aplicar Refinamento
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </TabsContent>
-          </Tabs>
-
-          <div className="flex justify-end gap-2 pt-4 border-t">
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              Cancelar
-            </Button>
-            <Button onClick={handleSave} disabled={!title || !systemPrompt}>
-              Criar Prompt
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/components/prompts/EditPromptDialog.tsx b/src/components/prompts/EditPromptDialog.tsx
deleted file mode 100644
index ea49313..0000000
--- a/src/components/prompts/EditPromptDialog.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import { useState, useEffect } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Wand2, GitBranch } from "lucide-react";
-
-interface EditPromptDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  prompt: {
-    id: number;
-    title: string;
-    systemPrompt?: string;
-    version?: string;
-  } | null;
-}
-
-export function EditPromptDialog({ open, onOpenChange, prompt }: EditPromptDialogProps) {
-  const [title, setTitle] = useState("");
-  const [systemPrompt, setSystemPrompt] = useState("");
-  const [versionType, setVersionType] = useState<"major" | "minor" | "patch">("minor");
-  const [changeDescription, setChangeDescription] = useState("");
-  const [assistantInstructions, setAssistantInstructions] = useState("");
-
-  useEffect(() => {
-    if (prompt && open) {
-      setTitle(prompt.title);
-      setSystemPrompt(prompt.systemPrompt || "");
-      setChangeDescription("");
-      setVersionType("minor");
-      setAssistantInstructions("");
-    }
-  }, [prompt, open]);
-
-  const handleApplyAssistant = () => {
-    // Aqui você implementaria a lógica de IA para modificar o prompt
-    // Por enquanto, vamos apenas adicionar as instruções ao final do prompt
-    const updatedPrompt = `${systemPrompt}\n\n[Aplicar mudanças: ${assistantInstructions}]`;
-    setSystemPrompt(updatedPrompt);
-    setAssistantInstructions("");
-    console.log("Aplicando instruções do assistente:", assistantInstructions);
-  };
-
-  const handleSave = () => {
-    console.log("Salvando nova versão:", { 
-      promptId: prompt?.id,
-      title, 
-      systemPrompt,
-      versionType,
-      changeDescription 
-    });
-    // Aqui você implementaria a lógica de salvar nova versão no backend
-    onOpenChange(false);
-  };
-
-  const getVersionDescription = () => {
-    switch (versionType) {
-      case "major":
-        return "Mudanças significativas que alteram a funcionalidade principal";
-      case "minor":
-        return "Novas funcionalidades ou melhorias sem quebrar compatibilidade";
-      case "patch":
-        return "Correções e ajustes menores";
-    }
-  };
-
-  if (!prompt) return null;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto w-[95vw] sm:w-full">
-        <DialogHeader>
-          <DialogTitle>Editar Prompt</DialogTitle>
-          <DialogDescription>
-            Edite o prompt e descreva as mudanças. Uma nova versão será criada preservando o histórico.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div className="flex items-center gap-2 p-3 bg-muted/50 rounded-lg">
-            <GitBranch className="h-4 w-4 text-muted-foreground" />
-            <span className="text-sm text-muted-foreground">
-              Versão atual: <span className="font-medium text-foreground">{prompt.version || "1.0.0"}</span>
-            </span>
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="title">Título</Label>
-            <Input
-              id="title"
-              placeholder="Nome do prompt"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="systemPrompt">System Prompt</Label>
-            <Textarea
-              id="systemPrompt"
-              placeholder="Digite o system prompt..."
-              value={systemPrompt}
-              onChange={(e) => setSystemPrompt(e.target.value)}
-              className="min-h-[300px] font-mono text-sm"
-            />
-          </div>
-
-          <div className="space-y-3 p-4 border rounded-lg bg-muted/30">
-            <div className="flex items-center gap-2">
-              <Wand2 className="h-4 w-4 text-primary" />
-              <Label htmlFor="assistantInstructions" className="text-base font-medium">
-                Assistente de Prompt
-              </Label>
-            </div>
-            <p className="text-sm text-muted-foreground">
-              Descreva o que deseja incluir ou modificar no prompt acima
-            </p>
-            <Textarea
-              id="assistantInstructions"
-              placeholder="Ex: Adicione mais empatia nas respostas, seja mais técnico ao explicar produtos, inclua exemplos práticos..."
-              value={assistantInstructions}
-              onChange={(e) => setAssistantInstructions(e.target.value)}
-              className="min-h-[100px]"
-            />
-            <Button
-              onClick={handleApplyAssistant}
-              size="sm"
-              variant="secondary"
-              disabled={!assistantInstructions}
-              className="w-full"
-            >
-              <Wand2 className="w-4 h-4 mr-2" />
-              Aplicar Mudanças com Assistente
-            </Button>
-          </div>
-
-          <div className="space-y-4 p-4 border rounded-lg bg-muted/30">
-            <div className="space-y-2">
-              <Label htmlFor="versionType">Tipo de Versão</Label>
-              <Select value={versionType} onValueChange={(v) => setVersionType(v as "major" | "minor" | "patch")}>
-                <SelectTrigger id="versionType">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="major">
-                    <div className="flex flex-col items-start">
-                      <span className="font-medium">Major (X.0.0)</span>
-                      <span className="text-xs text-muted-foreground">Mudanças significativas</span>
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="minor">
-                    <div className="flex flex-col items-start">
-                      <span className="font-medium">Minor (0.X.0)</span>
-                      <span className="text-xs text-muted-foreground">Novas funcionalidades</span>
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="patch">
-                    <div className="flex flex-col items-start">
-                      <span className="font-medium">Patch (0.0.X)</span>
-                      <span className="text-xs text-muted-foreground">Correções menores</span>
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-              <p className="text-xs text-muted-foreground">{getVersionDescription()}</p>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="changeDescription">Descrição das Mudanças</Label>
-              <Textarea
-                id="changeDescription"
-                placeholder="Descreva o que foi alterado nesta versão..."
-                value={changeDescription}
-                onChange={(e) => setChangeDescription(e.target.value)}
-                className="min-h-[100px]"
-              />
-            </div>
-          </div>
-
-          <div className="flex justify-end gap-2 pt-4 border-t">
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              Cancelar
-            </Button>
-            <Button 
-              onClick={handleSave} 
-              disabled={!title || !systemPrompt || !changeDescription}
-            >
-              Salvar Nova Versão
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/components/prompts/PromptCard.tsx b/src/components/prompts/PromptCard.tsx
deleted file mode 100644
index 393c98b..0000000
--- a/src/components/prompts/PromptCard.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { FileText, Edit, History, Copy, TestTube } from "lucide-react";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-
-interface PromptCardProps {
-  title: string;
-  creator: string;
-  lastModified: string;
-  status: "draft" | "published";
-  onEdit: () => void;
-  onHistory: () => void;
-  onTest: () => void;
-  onDuplicate: () => void;
-}
-
-export function PromptCard({
-  title,
-  creator,
-  lastModified,
-  status,
-  onEdit,
-  onHistory,
-  onTest,
-  onDuplicate,
-}: PromptCardProps) {
-  return (
-    <Card className="p-5 hover:shadow-hover transition-all duration-200 animate-fade-in">
-      <div className="flex items-start justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center">
-            <FileText className="h-5 w-5 text-accent" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-foreground">{title}</h3>
-            <p className="text-xs text-muted-foreground mt-0.5">
-              por {creator} • {lastModified}
-            </p>
-          </div>
-        </div>
-        <Badge variant={status === "published" ? "default" : "secondary"}>
-          {status === "published" ? "Publicado" : "Rascunho"}
-        </Badge>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <Button onClick={onEdit} variant="outline" size="sm" className="flex-1">
-          <Edit className="h-4 w-4 mr-2" />
-          Editar
-        </Button>
-        <Button onClick={onHistory} variant="outline" size="sm">
-          <History className="h-4 w-4" />
-        </Button>
-        <Button onClick={onTest} variant="outline" size="sm">
-          <TestTube className="h-4 w-4" />
-        </Button>
-        <Button onClick={onDuplicate} variant="outline" size="sm">
-          <Copy className="h-4 w-4" />
-        </Button>
-      </div>
-    </Card>
-  );
-}
diff --git a/src/components/prompts/PromptHistoryDialog.tsx b/src/components/prompts/PromptHistoryDialog.tsx
deleted file mode 100644
index b7bda94..0000000
--- a/src/components/prompts/PromptHistoryDialog.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Separator } from "@/components/ui/separator";
-import { GitBranch, Clock, User, FileText, Copy, Check } from "lucide-react";
-import { useState } from "react";
-import { useToast } from "@/hooks/use-toast";
-
-interface PromptVersion {
-  version: string;
-  type: "major" | "minor" | "patch";
-  changeDescription: string;
-  systemPrompt: string;
-  createdAt: string;
-  createdBy: string;
-}
-
-interface PromptHistoryDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  prompt: {
-    id: number;
-    title: string;
-    currentVersion: string;
-  } | null;
-}
-
-export function PromptHistoryDialog({ open, onOpenChange, prompt }: PromptHistoryDialogProps) {
-  const { toast } = useToast();
-  const [copiedVersion, setCopiedVersion] = useState<string | null>(null);
-
-  const handleCopyPrompt = async (content: string, version: string) => {
-    try {
-      await navigator.clipboard.writeText(content);
-      setCopiedVersion(version);
-      toast({
-        title: "Conteúdo copiado!",
-        description: `Prompt da versão ${version} copiado para a área de transferência.`,
-      });
-      setTimeout(() => setCopiedVersion(null), 2000);
-    } catch (err) {
-      toast({
-        title: "Erro ao copiar",
-        description: "Não foi possível copiar o conteúdo.",
-        variant: "destructive",
-      });
-    }
-  };
-
-  // Mock data - substituir por dados reais do backend
-  const versions: PromptVersion[] = [
-    {
-      version: "2.1.0",
-      type: "minor",
-      changeDescription: "Adicionado mais empatia nas respostas e incluídos exemplos práticos",
-      systemPrompt: "Você é Clara, assistente de atendimento ao cliente. Seja empática...",
-      createdAt: "2 dias atrás",
-      createdBy: "João Silva",
-    },
-    {
-      version: "2.0.0",
-      type: "major",
-      changeDescription: "Reformulação completa do tom de voz e objetivos principais",
-      systemPrompt: "Você é Clara, assistente de atendimento ao cliente...",
-      createdAt: "1 semana atrás",
-      createdBy: "Maria Santos",
-    },
-    {
-      version: "1.5.0",
-      type: "minor",
-      changeDescription: "Adicionadas instruções sobre política de devolução",
-      systemPrompt: "Você é um assistente virtual de atendimento...",
-      createdAt: "2 semanas atrás",
-      createdBy: "João Silva",
-    },
-    {
-      version: "1.0.0",
-      type: "major",
-      changeDescription: "Versão inicial do prompt",
-      systemPrompt: "Você é um assistente virtual...",
-      createdAt: "1 mês atrás",
-      createdBy: "João Silva",
-    },
-  ];
-
-  const getVersionTypeColor = (type: string) => {
-    switch (type) {
-      case "major":
-        return "destructive";
-      case "minor":
-        return "default";
-      case "patch":
-        return "secondary";
-      default:
-        return "secondary";
-    }
-  };
-
-  const getVersionTypeLabel = (type: string) => {
-    switch (type) {
-      case "major":
-        return "Major";
-      case "minor":
-        return "Minor";
-      case "patch":
-        return "Patch";
-      default:
-        return type;
-    }
-  };
-
-  if (!prompt) return null;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl max-h-[90vh] w-[95vw] sm:w-full">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <GitBranch className="h-5 w-5" />
-            Histórico de Versões
-          </DialogTitle>
-          <DialogDescription>
-            Histórico completo de versões do prompt "{prompt.title}"
-          </DialogDescription>
-        </DialogHeader>
-
-        <ScrollArea className="h-[600px] pr-4">
-          <div className="space-y-4">
-            {versions.map((version, index) => (
-              <div key={version.version}>
-                <div className="flex items-start gap-4">
-                  <div className="flex flex-col items-center">
-                    <div className={`w-3 h-3 rounded-full ${
-                      version.version === prompt.currentVersion 
-                        ? "bg-primary ring-4 ring-primary/20" 
-                        : "bg-muted-foreground"
-                    }`} />
-                    {index < versions.length - 1 && (
-                      <div className="w-0.5 h-full min-h-[80px] bg-border mt-2" />
-                    )}
-                  </div>
-
-                  <div className="flex-1 space-y-3 pb-6">
-                    <div className="flex items-center gap-2">
-                      <code className="text-sm font-mono font-semibold">
-                        v{version.version}
-                      </code>
-                      {version.version === prompt.currentVersion && (
-                        <Badge variant="outline" className="bg-primary/10">
-                          Atual
-                        </Badge>
-                      )}
-                    </div>
-
-                    <div className="space-y-3">
-                      <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                        <div className="flex items-center gap-1">
-                          <Clock className="h-3 w-3" />
-                          {version.createdAt}
-                        </div>
-                        <div className="flex items-center gap-1">
-                          <User className="h-3 w-3" />
-                          {version.createdBy}
-                        </div>
-                      </div>
-
-                      <div className="flex items-start gap-2">
-                        <FileText className="h-4 w-4 mt-0.5 text-muted-foreground flex-shrink-0" />
-                        <p className="text-sm">{version.changeDescription}</p>
-                      </div>
-
-                      <div className="space-y-2">
-                        <div className="flex items-center justify-between">
-                          <p className="text-xs font-medium text-muted-foreground uppercase">
-                            Conteúdo do Prompt
-                          </p>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => handleCopyPrompt(version.systemPrompt, version.version)}
-                            className="h-7"
-                          >
-                            {copiedVersion === version.version ? (
-                              <>
-                                <Check className="h-3 w-3 mr-1" />
-                                Copiado
-                              </>
-                            ) : (
-                              <>
-                                <Copy className="h-3 w-3 mr-1" />
-                                Copiar
-                              </>
-                            )}
-                          </Button>
-                        </div>
-                        <ScrollArea className="h-[200px] w-full rounded-md border bg-muted/30">
-                          <div className="p-4">
-                            <p className="text-sm whitespace-pre-wrap leading-relaxed">
-                              {version.systemPrompt}
-                            </p>
-                          </div>
-                        </ScrollArea>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-
-        <Separator />
-
-        <div className="flex justify-end">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Fechar
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/pages/AgentDetails.tsx b/src/pages/AgentDetails.tsx
new file mode 100644
index 0000000..08052f0
--- /dev/null
+++ b/src/pages/AgentDetails.tsx
@@ -0,0 +1,256 @@
+import { useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { ArrowLeft, Bot, Save, Clock, Copy } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+
+export default function AgentDetails() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+
+  // Mock data - substituir por dados reais do backend
+  const [agent, setAgent] = useState({
+    id: id,
+    name: "Agente de Atendimento",
+    status: "active" as const,
+    model: "google/gemini-2.5-flash",
+    systemPrompt: "Você é um assistente de atendimento ao cliente. Seja educado, prestativo e objetivo nas suas respostas. Sempre mantenha um tom profissional e cordial.",
+  });
+
+  const [versions] = useState([
+    {
+      id: 1,
+      version: "2.1",
+      type: "major" as const,
+      description: "Melhorias na clareza das respostas",
+      prompt: "Você é um assistente de atendimento ao cliente. Seja educado, prestativo e objetivo nas suas respostas. Sempre mantenha um tom profissional e cordial.",
+      createdAt: "2024-01-15 14:30",
+      author: "João Silva",
+    },
+    {
+      id: 2,
+      version: "2.0",
+      type: "major" as const,
+      description: "Reformulação completa do prompt",
+      prompt: "Você é um assistente de atendimento. Seja cordial e ajude o cliente.",
+      createdAt: "2024-01-10 09:15",
+      author: "Maria Santos",
+    },
+    {
+      id: 3,
+      version: "1.5",
+      type: "minor" as const,
+      description: "Ajustes de tom",
+      prompt: "Você é um assistente. Seja educado.",
+      createdAt: "2024-01-05 16:45",
+      author: "João Silva",
+    },
+  ]);
+
+  const aiModels = [
+    { value: "google/gemini-2.5-pro", label: "Google Gemini 2.5 Pro" },
+    { value: "google/gemini-2.5-flash", label: "Google Gemini 2.5 Flash" },
+    { value: "google/gemini-2.5-flash-lite", label: "Google Gemini 2.5 Flash Lite" },
+    { value: "openai/gpt-5", label: "OpenAI GPT-5" },
+    { value: "openai/gpt-5-mini", label: "OpenAI GPT-5 Mini" },
+    { value: "openai/gpt-5-nano", label: "OpenAI GPT-5 Nano" },
+  ];
+
+  const handleSave = () => {
+    // TODO: Implementar salvamento no backend
+    console.log("Saving agent:", agent);
+    toast({
+      title: "Agente atualizado",
+      description: "As alterações foram salvas com sucesso.",
+    });
+  };
+
+  const handleCopyPrompt = async (prompt: string) => {
+    try {
+      await navigator.clipboard.writeText(prompt);
+      toast({
+        title: "Copiado!",
+        description: "Prompt copiado para a área de transferência.",
+      });
+    } catch (error) {
+      toast({
+        title: "Erro",
+        description: "Não foi possível copiar o prompt.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const getVersionTypeColor = (type: string) => {
+    switch (type) {
+      case "major":
+        return "bg-primary text-primary-foreground";
+      case "minor":
+        return "bg-secondary text-secondary-foreground";
+      case "patch":
+        return "bg-muted text-muted-foreground";
+      default:
+        return "bg-muted text-muted-foreground";
+    }
+  };
+
+  return (
+    <div className="animate-fade-in pb-8">
+      {/* Header */}
+      <div className="mb-6">
+        <Button
+          variant="ghost"
+          className="mb-4 gap-2"
+          onClick={() => navigate("/")}
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Voltar para Agentes
+        </Button>
+
+        <div className="flex flex-col md:flex-row md:items-start justify-between gap-4">
+          <div className="flex items-start gap-4">
+            <div className="h-16 w-16 rounded-xl bg-primary/10 flex items-center justify-center">
+              <Bot className="h-8 w-8 text-primary" />
+            </div>
+            <div>
+              <h1 className="text-2xl md:text-3xl font-bold text-foreground">{agent.name}</h1>
+              <div className="flex items-center gap-2 mt-2">
+                <Badge 
+                  variant={agent.status === "active" ? "default" : "secondary"}
+                  className={
+                    agent.status === "active" 
+                      ? "bg-green-600 hover:bg-green-700" 
+                      : "bg-muted text-muted-foreground"
+                  }
+                >
+                  {agent.status === "active" ? "● Ativo" : "○ Inativo"}
+                </Badge>
+              </div>
+            </div>
+          </div>
+          <Button className="gap-2 w-full md:w-auto" onClick={handleSave}>
+            <Save className="h-4 w-4" />
+            Salvar Alterações
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left Column - Prompt & Model */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* System Prompt */}
+          <Card>
+            <CardHeader>
+              <CardTitle>System Prompt</CardTitle>
+              <CardDescription>
+                Define o comportamento e personalidade do agente
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Textarea
+                value={agent.systemPrompt}
+                onChange={(e) => setAgent({ ...agent, systemPrompt: e.target.value })}
+                className="min-h-[200px] font-mono text-sm"
+                placeholder="Digite o prompt do sistema..."
+              />
+            </CardContent>
+          </Card>
+
+          {/* AI Model */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Modelo de IA</CardTitle>
+              <CardDescription>
+                Selecione o modelo de inteligência artificial
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Select
+                value={agent.model}
+                onValueChange={(value) => setAgent({ ...agent, model: value })}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {aiModels.map((model) => (
+                    <SelectItem key={model.value} value={model.value}>
+                      {model.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Right Column - Version History */}
+        <div className="lg:col-span-1">
+          <Card className="h-full">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Clock className="h-5 w-5" />
+                Histórico de Versões
+              </CardTitle>
+              <CardDescription>
+                Todas as alterações salvas do prompt
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ScrollArea className="h-[600px] pr-4">
+                <div className="space-y-4">
+                  {versions.map((version) => (
+                    <div
+                      key={version.id}
+                      className="p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
+                    >
+                      <div className="flex items-start justify-between mb-2">
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <span className="font-semibold">v{version.version}</span>
+                            <Badge className={getVersionTypeColor(version.type)}>
+                              {version.type}
+                            </Badge>
+                          </div>
+                          <p className="text-sm text-muted-foreground mt-1">
+                            {version.description}
+                          </p>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                          onClick={() => handleCopyPrompt(version.prompt)}
+                        >
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      
+                      <div className="mt-3 p-3 rounded bg-muted/50">
+                        <p className="text-xs font-mono text-muted-foreground line-clamp-3">
+                          {version.prompt}
+                        </p>
+                      </div>
+
+                      <div className="mt-3 text-xs text-muted-foreground">
+                        <p>{version.author} • {version.createdAt}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Agents.tsx b/src/pages/Agents.tsx
index 5b71cc5..3bfc37d 100644
--- a/src/pages/Agents.tsx
+++ b/src/pages/Agents.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { CreateAgentDialog } from "@/components/agents/CreateAgentDialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -13,6 +14,7 @@ import {
 import { Plus, Search, MoreVertical, Edit, Trash2, Bot, Zap } from "lucide-react";
 
 export default function Agents() {
+  const navigate = useNavigate();
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -86,7 +88,8 @@ export default function Agents() {
           {filteredAgents.map((agent) => (
             <Card 
               key={agent.id} 
-              className="group relative overflow-hidden border-2 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] bg-gradient-to-br from-card to-card/50"
+              className="group relative overflow-hidden border-2 transition-all duration-300 hover:shadow-lg hover:scale-[1.02] bg-gradient-to-br from-card to-card/50 cursor-pointer"
+              onClick={() => navigate(`/agents/${agent.id}`)}
             >
               {/* Glow effect on hover */}
               <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" />
@@ -104,17 +107,30 @@ export default function Agents() {
                   </div>
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="icon" className="h-8 w-8">
+                      <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={() => console.log("Edit", agent.id)}>
+                      <DropdownMenuItem 
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigate(`/agents/${agent.id}`);
+                        }}
+                      >
                         <Edit className="h-4 w-4 mr-2" />
                         Editar
                       </DropdownMenuItem>
                       <DropdownMenuItem 
-                        onClick={() => console.log("Delete", agent.id)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          console.log("Delete", agent.id);
+                        }}
                         className="text-destructive"
                       >
                         <Trash2 className="h-4 w-4 mr-2" />
diff --git a/src/pages/Prompts.tsx b/src/pages/Prompts.tsx
deleted file mode 100644
index daf403e..0000000
--- a/src/pages/Prompts.tsx
+++ /dev/null
@@ -1,353 +0,0 @@
-import { useState, useMemo } from "react";
-import { CreatePromptDialog } from "@/components/prompts/CreatePromptDialog";
-import { EditPromptDialog } from "@/components/prompts/EditPromptDialog";
-import { PromptHistoryDialog } from "@/components/prompts/PromptHistoryDialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
-import { Plus, Search, MoreVertical, Edit, History } from "lucide-react";
-
-const ITEMS_PER_PAGE = 10;
-
-export default function Prompts() {
-  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-  const [isHistoryDialogOpen, setIsHistoryDialogOpen] = useState(false);
-  const [selectedPrompt, setSelectedPrompt] = useState<any>(null);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [currentPage, setCurrentPage] = useState(1);
-  
-  const [prompts] = useState([
-    {
-      id: 1,
-      title: "Prompt de Atendimento v2.1",
-      creator: "João Silva",
-      lastModified: "2 dias atrás",
-      status: "published" as const,
-      version: "2.1.0",
-      systemPrompt: "Você é Clara, assistente de atendimento ao cliente...",
-    },
-    {
-      id: 2,
-      title: "Prompt de Vendas v1.5",
-      creator: "Maria Santos",
-      lastModified: "5 dias atrás",
-      status: "published" as const,
-      version: "1.5.0",
-      systemPrompt: "Você é um assistente de vendas...",
-    },
-    {
-      id: 3,
-      title: "Prompt de Análise",
-      creator: "Pedro Costa",
-      lastModified: "1 semana atrás",
-      status: "draft" as const,
-      version: "1.0.0",
-      systemPrompt: "Você é um analista especializado...",
-    },
-    {
-      id: 4,
-      title: "Prompt de Marketing",
-      creator: "Ana Lima",
-      lastModified: "3 dias atrás",
-      status: "published" as const,
-      version: "1.2.1",
-      systemPrompt: "Você é um especialista em marketing...",
-    },
-    {
-      id: 5,
-      title: "Prompt de Suporte Técnico",
-      creator: "Carlos Mendes",
-      lastModified: "4 dias atrás",
-      status: "published" as const,
-      version: "2.0.0",
-      systemPrompt: "Você é um técnico de suporte...",
-    },
-    {
-      id: 6,
-      title: "Prompt de Onboarding",
-      creator: "Fernanda Silva",
-      lastModified: "6 dias atrás",
-      status: "draft" as const,
-      version: "1.0.0",
-      systemPrompt: "Você é um guia de onboarding...",
-    },
-    {
-      id: 7,
-      title: "Prompt de Follow-up",
-      creator: "Rafael Santos",
-      lastModified: "1 dia atrás",
-      status: "published" as const,
-      version: "1.1.0",
-      systemPrompt: "Você é responsável por follow-ups...",
-    },
-  ]);
-
-  // Filtra prompts baseado na pesquisa
-  const filteredPrompts = useMemo(() => {
-    if (!searchQuery.trim()) return prompts;
-    
-    const query = searchQuery.toLowerCase();
-    return prompts.filter(prompt => 
-      prompt.title.toLowerCase().includes(query) ||
-      prompt.creator.toLowerCase().includes(query)
-    );
-  }, [prompts, searchQuery]);
-
-  // Calcula paginação
-  const totalPages = Math.ceil(filteredPrompts.length / ITEMS_PER_PAGE);
-  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-  const paginatedPrompts = filteredPrompts.slice(startIndex, startIndex + ITEMS_PER_PAGE);
-
-  // Reset para primeira página quando busca muda
-  const handleSearchChange = (value: string) => {
-    setSearchQuery(value);
-    setCurrentPage(1);
-  };
-
-  const handleEditPrompt = (prompt: any) => {
-    setSelectedPrompt(prompt);
-    setIsEditDialogOpen(true);
-  };
-
-  const handleViewHistory = (prompt: any) => {
-    setSelectedPrompt({
-      id: prompt.id,
-      title: prompt.title,
-      currentVersion: prompt.version,
-    });
-    setIsHistoryDialogOpen(true);
-  };
-
-  return (
-    <div className="animate-fade-in">
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
-        <div>
-          <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-2">Gestão de Prompts</h1>
-          <p className="text-sm md:text-base text-muted-foreground">
-            Crie, edite e gerencie os prompts dos seus agentes de IA
-          </p>
-        </div>
-        <Button className="gap-2 w-full md:w-auto" onClick={() => setIsCreateDialogOpen(true)}>
-          <Plus className="h-4 w-4" />
-          Criar Prompt
-        </Button>
-      </div>
-
-      <div className="mb-6">
-        <div className="relative max-w-md">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-          <Input
-            placeholder="Pesquisar prompts por título ou criador..."
-            value={searchQuery}
-            onChange={(e) => handleSearchChange(e.target.value)}
-            className="pl-10"
-          />
-        </div>
-        <p className="text-sm text-muted-foreground mt-2">
-          {filteredPrompts.length} {filteredPrompts.length === 1 ? 'prompt encontrado' : 'prompts encontrados'}
-        </p>
-      </div>
-
-      {paginatedPrompts.length === 0 ? (
-        <div className="text-center py-12">
-          <p className="text-muted-foreground">Nenhum prompt encontrado com os critérios de busca.</p>
-        </div>
-      ) : (
-        <>
-          {/* Mobile Cards */}
-          <div className="md:hidden space-y-4 mb-6">
-            {paginatedPrompts.map((prompt) => (
-              <div key={prompt.id} className="bg-card border rounded-lg p-4 space-y-3">
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <h3 className="font-medium text-lg">{prompt.title}</h3>
-                    <p className="text-sm text-muted-foreground mt-1">
-                      por {prompt.creator} • {prompt.lastModified}
-                    </p>
-                  </div>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="icon">
-                        <MoreVertical className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem onClick={() => handleEditPrompt(prompt)}>
-                        <Edit className="h-4 w-4 mr-2" />
-                        Editar
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => handleViewHistory(prompt)}>
-                        <History className="h-4 w-4 mr-2" />
-                        Histórico
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-                <div className="flex items-center justify-between">
-                  <code className="text-xs bg-muted px-2 py-1 rounded">{prompt.version}</code>
-                  <Badge 
-                    variant={prompt.status === "published" ? "default" : "secondary"}
-                    className={prompt.status === "published" ? "bg-green-600 hover:bg-green-700" : "bg-muted text-muted-foreground hover:bg-muted"}
-                  >
-                    {prompt.status === "published" ? "Publicado" : "Rascunho"}
-                  </Badge>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Desktop Table */}
-          <div className="hidden md:block rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Título</TableHead>
-                  <TableHead>Versão</TableHead>
-                  <TableHead>Criador</TableHead>
-                  <TableHead>Última Modificação</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead className="text-right">Ações</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {paginatedPrompts.map((prompt) => (
-                  <TableRow key={prompt.id}>
-                    <TableCell className="font-medium">{prompt.title}</TableCell>
-                    <TableCell>
-                      <code className="text-xs bg-muted px-2 py-1 rounded">
-                        {prompt.version}
-                      </code>
-                    </TableCell>
-                    <TableCell>{prompt.creator}</TableCell>
-                    <TableCell>{prompt.lastModified}</TableCell>
-                    <TableCell>
-                      <Badge 
-                        variant={prompt.status === "published" ? "default" : "secondary"}
-                        className={prompt.status === "published" ? "bg-green-600 hover:bg-green-700" : "bg-muted text-muted-foreground hover:bg-muted"}
-                      >
-                        {prompt.status === "published" ? "Publicado" : "Rascunho"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="icon">
-                            <MoreVertical className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleEditPrompt(prompt)}>
-                            <Edit className="h-4 w-4 mr-2" />
-                            Editar
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleViewHistory(prompt)}>
-                            <History className="h-4 w-4 mr-2" />
-                            Histórico
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {totalPages > 1 && (
-            <div className="mt-8">
-              <Pagination>
-                <PaginationContent>
-                  <PaginationItem>
-                    <PaginationPrevious
-                      onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
-                      className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
-                    />
-                  </PaginationItem>
-                  
-                  {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {
-                    // Mostrar primeira página, última página e páginas próximas à atual
-                    if (
-                      page === 1 ||
-                      page === totalPages ||
-                      (page >= currentPage - 1 && page <= currentPage + 1)
-                    ) {
-                      return (
-                        <PaginationItem key={page}>
-                          <PaginationLink
-                            onClick={() => setCurrentPage(page)}
-                            isActive={currentPage === page}
-                            className="cursor-pointer"
-                          >
-                            {page}
-                          </PaginationLink>
-                        </PaginationItem>
-                      );
-                    } else if (
-                      page === currentPage - 2 ||
-                      page === currentPage + 2
-                    ) {
-                      return (
-                        <PaginationItem key={page}>
-                          <PaginationEllipsis />
-                        </PaginationItem>
-                      );
-                    }
-                    return null;
-                  })}
-
-                  <PaginationItem>
-                    <PaginationNext
-                      onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
-                      className={currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
-                    />
-                  </PaginationItem>
-                </PaginationContent>
-              </Pagination>
-            </div>
-          )}
-        </>
-      )}
-
-      <CreatePromptDialog
-        open={isCreateDialogOpen}
-        onOpenChange={setIsCreateDialogOpen}
-      />
-
-      <EditPromptDialog
-        open={isEditDialogOpen}
-        onOpenChange={setIsEditDialogOpen}
-        prompt={selectedPrompt}
-      />
-
-      <PromptHistoryDialog
-        open={isHistoryDialogOpen}
-        onOpenChange={setIsHistoryDialogOpen}
-        prompt={selectedPrompt}
-      />
-    </div>
-  );
-}