Refactor: Make system responsive

src/components/agents/CreateAgentDialog.tsx

@@ -41,7 +41,7 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Criar Novo Agente</DialogTitle>
           <DialogDescription>

src/components/layout/AppLayout.tsx

@@ -1,11 +1,13 @@
 import { AppSidebar } from "./AppSidebar";
+import { MobileNav } from "./MobileNav";
 import { Outlet } from "react-router-dom";
 
 export function AppLayout() {
   return (
     <div className="flex h-screen w-full bg-background overflow-hidden">
+      <MobileNav />
       <AppSidebar />
-      <main className="flex-1 p-6 lg:p-8 overflow-y-auto">
+      <main className="flex-1 p-4 md:p-6 lg:p-8 overflow-y-auto pt-16 md:pt-6">
         <Outlet />
       </main>
     </div>

src/components/layout/MobileNav.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+import { Bot, FileText, TestTube, Menu, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "./ThemeToggle";
+
+const menuItems = [
+  { title: "Agentes", url: "/agents", icon: Bot },
+  { title: "Prompts", url: "/", icon: FileText },
+  { title: "Testar Prompt", url: "/test", icon: TestTube },
+];
+
+export function MobileNav() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {/* Mobile Header */}
+      <header className="md:hidden fixed top-0 left-0 right-0 z-50 bg-background border-b border-border px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
+            <span className="text-xs font-bold text-white">HX</span>
+          </div>
+          <h1 className="text-lg font-bold gradient-text">HGTX PromptLab</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <ThemeToggle />
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </Button>
+        </div>
+      </header>
+
+      {/* Mobile Menu Overlay */}
+      {isOpen && (
+        <>
+          <div
+            className="md:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-40"
+            onClick={() => setIsOpen(false)}
+          />
+          <nav className="md:hidden fixed top-[57px] left-0 right-0 bg-background border-b border-border z-40 animate-fade-in">
+            <div className="px-4 py-2 space-y-1">
+              {menuItems.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <NavLink
+                    key={item.title}
+                    to={item.url}
+                    end
+                    onClick={() => setIsOpen(false)}
+                    className={({ isActive }) =>
+                      `flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
+                        isActive
+                          ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                          : "text-foreground hover:bg-accent"
+                      }`
+                    }
+                  >
+                    <Icon className="w-5 h-5" />
+                    <span className="font-medium">{item.title}</span>
+                  </NavLink>
+                );
+              })}
+            </div>
+          </nav>
+        </>
+      )}
+    </>
+  );
+}

src/components/prompts/CreatePromptDialog.tsx

@@ -80,7 +80,7 @@ Siga estas diretrizes em todas as suas interações.`;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto w-[95vw] sm:w-full">
         <DialogHeader>
           <DialogTitle>Criar Novo Prompt</DialogTitle>
           <DialogDescription>

src/components/prompts/EditPromptDialog.tsx

@@ -83,7 +83,7 @@ export function EditPromptDialog({ open, onOpenChange, prompt }: EditPromptDialo
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto w-[95vw] sm:w-full">
         <DialogHeader>
           <DialogTitle>Editar Prompt</DialogTitle>
           <DialogDescription>

src/components/prompts/PromptHistoryDialog.tsx

@@ -120,7 +120,7 @@ export function PromptHistoryDialog({ open, onOpenChange, prompt }: PromptHistor
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl max-h-[90vh]">
+      <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" />

src/pages/Agents.tsx

@@ -56,14 +56,14 @@ export default function Agents() {
 
   return (
     <div className="animate-fade-in">
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
         <div>
-          <h1 className="text-3xl font-bold text-foreground mb-2">Gestão de Agentes</h1>
+          <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-2">Gestão de Agentes</h1>
-          <p className="text-muted-foreground">
+          <p className="text-sm md:text-base text-muted-foreground">
             Crie e gerencie agentes de IA com prompts e modelos específicos
           </p>
         </div>
-        <Button className="gap-2" onClick={() => setIsCreateDialogOpen(true)}>
+        <Button className="gap-2 w-full md:w-auto" onClick={() => setIsCreateDialogOpen(true)}>
           <Plus className="h-4 w-4" />
           Criar Agente
         </Button>
@@ -89,7 +89,61 @@ export default function Agents() {
           <p className="text-muted-foreground">Nenhum agente encontrado.</p>
         </div>
       ) : (
-        <div className="rounded-md border">
+        <>
+          {/* Mobile Cards */}
+          <div className="md:hidden space-y-4">
+            {filteredAgents.map((agent) => (
+              <div key={agent.id} className="bg-card border rounded-lg p-4 space-y-3">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <h3 className="font-medium text-lg">{agent.name}</h3>
+                    <p className="text-sm text-muted-foreground">{agent.createdAt}</p>
+                  </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => console.log("Edit", agent.id)}>
+                        <Edit className="h-4 w-4 mr-2" />
+                        Editar
+                      </DropdownMenuItem>
+                      <DropdownMenuItem 
+                        onClick={() => console.log("Delete", agent.id)}
+                        className="text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4 mr-2" />
+                        Excluir
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+                <div className="space-y-2">
+                  <div>
+                    <span className="text-xs text-muted-foreground">Prompt:</span>
+                    <p className="text-sm">{agent.prompt}</p>
+                  </div>
+                  <div>
+                    <span className="text-xs text-muted-foreground">Modelo:</span>
+                    <p className="text-sm">
+                      <code className="text-xs bg-muted px-2 py-1 rounded">{agent.model}</code>
+                    </p>
+                  </div>
+                </div>
+                <Badge 
+                  variant={agent.status === "active" ? "default" : "secondary"}
+                  className={agent.status === "active" ? "bg-green-600 hover:bg-green-700" : "bg-muted text-muted-foreground hover:bg-muted"}
+                >
+                  {agent.status === "active" ? "Ativo" : "Inativo"}
+                </Badge>
+              </div>
+            ))}
+          </div>
+
+          {/* Desktop Table */}
+          <div className="hidden md:block rounded-md border">
             <Table>
               <TableHeader>
                 <TableRow>
@@ -147,6 +201,7 @@ export default function Agents() {
               </TableBody>
             </Table>
           </div>
+        </>
       )}
 
       <CreateAgentDialog

src/pages/Prompts.tsx

@@ -144,14 +144,14 @@ export default function Prompts() {
 
   return (
     <div className="animate-fade-in">
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
         <div>
-          <h1 className="text-3xl font-bold text-foreground mb-2">Gestão de Prompts</h1>
+          <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-2">Gestão de Prompts</h1>
-          <p className="text-muted-foreground">
+          <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" onClick={() => setIsCreateDialogOpen(true)}>
+        <Button className="gap-2 w-full md:w-auto" onClick={() => setIsCreateDialogOpen(true)}>
           <Plus className="h-4 w-4" />
           Criar Prompt
         </Button>
@@ -178,7 +178,50 @@ export default function Prompts() {
         </div>
       ) : (
         <>
-          <div className="rounded-md border">
+          {/* 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>

src/pages/TestPrompt.tsx

@@ -67,9 +67,9 @@ export default function TestPrompt() {
 
   return (
     <div className="animate-fade-in h-full flex flex-col max-w-5xl mx-auto">
-      <div className="mb-6">
+      <div className="mb-4 md:mb-6">
-        <h1 className="text-3xl font-bold text-foreground mb-2">Teste de Prompt</h1>
+        <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-2">Teste de Prompt</h1>
-        <p className="text-muted-foreground">
+        <p className="text-sm md:text-base text-muted-foreground">
           Converse com a IA para testar como o prompt se comporta
         </p>
       </div>