Adicionar paginação em listagem de agentes

Implementa controle de paginação na tela de Agents:
- adiciona estado itemsPerPage com valor default 9
- integra seletor de itens por página
- utiliza componente de paginação existente para Navegação Previous/Next/ellipses
- mantém busca existente funcionando com paginação

Observação: usa componente Select para escolher a quantidade por página e ajusta paginação ao mudar valor.

src/pages/Agents.tsx

@@ -15,13 +15,20 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 import { Plus, Search, Bot, ChevronRight } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 export default function Agents() {
   const navigate = useNavigate();
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 9;
+  const [itemsPerPage, setItemsPerPage] = useState(9);
 
   const [agents] = useState([
     {
@@ -91,10 +98,32 @@ export default function Agents() {
             className="pl-10"
           />
         </div>
-        <div className="flex items-center justify-between mt-2">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mt-2">
           <p className="text-sm text-muted-foreground">
             {filteredAgents.length} {filteredAgents.length === 1 ? 'agente encontrado' : 'agentes encontrados'}
           </p>
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground whitespace-nowrap">Itens por página:</span>
+              <Select 
+                value={itemsPerPage.toString()} 
+                onValueChange={(value) => {
+                  setItemsPerPage(Number(value));
+                  setCurrentPage(1);
+                }}
+              >
+                <SelectTrigger className="w-[70px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="6">6</SelectItem>
+                  <SelectItem value="9">9</SelectItem>
+                  <SelectItem value="12">12</SelectItem>
+                  <SelectItem value="18">18</SelectItem>
+                  <SelectItem value="24">24</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
             {totalPages > 1 && (
               <p className="text-sm text-muted-foreground">
                 Página {currentPage} de {totalPages}
@@ -102,6 +131,7 @@ export default function Agents() {
             )}
           </div>
         </div>
+      </div>
 
       {filteredAgents.length === 0 ? (
         <div className="text-center py-12">