@greatapps/greatagents-ui 0.3.23 → 0.3.25

package/dist/index.js

@@ -852,95 +852,97 @@ function AgentFormDialog({
       toast2.error(isEditing ? "Erro ao atualizar agente" : "Erro ao criar agente");
     }
   }
-  return /* @__PURE__ */ jsx2(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(SheetContent, { className: "sm:max-w-lg overflow-y-auto", children: [
+  return /* @__PURE__ */ jsx2(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(SheetContent, { className: "sm:max-w-md", children: [
     /* @__PURE__ */ jsx2(SheetHeader, { children: /* @__PURE__ */ jsx2(SheetTitle, { children: isEditing ? "Editar Agente" : "Novo Agente" }) }),
-    /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-      /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx2(
-        ImageCropUpload,
-        {
-          value: form.photo || null,
-          onChange: (url) => updateField("photo", url),
-          onRemove: () => updateField("photo", ""),
-          entityType: "agents",
-          entityId: agent?.id,
-          idAccount: typeof idAccount === "string" ? Number(idAccount) : idAccount ?? Number(config.accountId) ?? 0,
-          name: form.title || null,
-          disabled: isPending
-        }
-      ) }),
-      /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx2(Label, { htmlFor: "agent-title", children: "Nome do Agente *" }),
-        /* @__PURE__ */ jsx2(
-          Input2,
-          {
-            id: "agent-title",
-            name: "title",
-            value: form.title,
-            onChange: (e) => {
-              setForm((prev) => ({
-                ...prev,
-                title: e.target.value,
-                titleError: e.target.value.trim() ? false : prev.titleError
-              }));
-            },
-            placeholder: "Ex: Assistente de Agendamento",
-            required: true,
-            disabled: isPending
-          }
-        ),
-        form.titleError && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: "Nome \xE9 obrigat\xF3rio" })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx2(
-          Switch,
+    /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-y-auto px-4 space-y-4", children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx2(
+          ImageCropUpload,
           {
-            id: "agent-active",
-            checked: form.active,
-            onCheckedChange: (checked) => updateField("active", checked),
+            value: form.photo || null,
+            onChange: (url) => updateField("photo", url),
+            onRemove: () => updateField("photo", ""),
+            entityType: "agents",
+            entityId: agent?.id,
+            idAccount: typeof idAccount === "string" ? Number(idAccount) : idAccount ?? Number(config.accountId) ?? 0,
+            name: form.title || null,
             disabled: isPending
           }
-        ),
-        /* @__PURE__ */ jsx2(Label, { htmlFor: "agent-active", className: "cursor-pointer", children: form.active ? "Ativo" : "Inativo" })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 gap-4", children: [
+        ) }),
         /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx2(Label, { htmlFor: "agent-delay", children: "Delay de Digita\xE7\xE3o (s)" }),
+          /* @__PURE__ */ jsx2(Label, { htmlFor: "agent-title", children: "Nome do Agente *" }),
           /* @__PURE__ */ jsx2(
             Input2,
             {
-              id: "agent-delay",
-              name: "delay",
-              type: "number",
-              value: form.delayTyping,
-              onChange: (e) => updateField("delayTyping", e.target.value),
-              placeholder: "0",
-              min: "0",
-              step: "0.5",
+              id: "agent-title",
+              name: "title",
+              value: form.title,
+              onChange: (e) => {
+                setForm((prev) => ({
+                  ...prev,
+                  title: e.target.value,
+                  titleError: e.target.value.trim() ? false : prev.titleError
+                }));
+              },
+              placeholder: "Ex: Assistente de Agendamento",
+              required: true,
               disabled: isPending
             }
           ),
-          /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "Tempo de simula\xE7\xE3o de digita\xE7\xE3o" })
+          form.titleError && /* @__PURE__ */ jsx2("p", { className: "text-sm text-destructive", children: "Nome \xE9 obrigat\xF3rio" })
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx2(Label, { htmlFor: "agent-waiting", children: "Tempo de Espera (s)" }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx2(
-            Input2,
+            Switch,
             {
-              id: "agent-waiting",
-              name: "waiting",
-              type: "number",
-              value: form.waitingTime,
-              onChange: (e) => updateField("waitingTime", e.target.value),
-              placeholder: "0",
-              min: "0",
-              step: "0.5",
+              id: "agent-active",
+              checked: form.active,
+              onCheckedChange: (checked) => updateField("active", checked),
               disabled: isPending
             }
           ),
-          /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "Espera por mensagens agrupadas" })
+          /* @__PURE__ */ jsx2(Label, { htmlFor: "agent-active", className: "cursor-pointer", children: form.active ? "Ativo" : "Inativo" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx2(Label, { htmlFor: "agent-delay", children: "Delay de Digita\xE7\xE3o (s)" }),
+            /* @__PURE__ */ jsx2(
+              Input2,
+              {
+                id: "agent-delay",
+                name: "delay",
+                type: "number",
+                value: form.delayTyping,
+                onChange: (e) => updateField("delayTyping", e.target.value),
+                placeholder: "0",
+                min: "0",
+                step: "0.5",
+                disabled: isPending
+              }
+            ),
+            /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "Tempo de simula\xE7\xE3o de digita\xE7\xE3o" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx2(Label, { htmlFor: "agent-waiting", children: "Tempo de Espera (s)" }),
+            /* @__PURE__ */ jsx2(
+              Input2,
+              {
+                id: "agent-waiting",
+                name: "waiting",
+                type: "number",
+                value: form.waitingTime,
+                onChange: (e) => updateField("waitingTime", e.target.value),
+                placeholder: "0",
+                min: "0",
+                step: "0.5",
+                disabled: isPending
+              }
+            ),
+            /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "Espera por mensagens agrupadas" })
+          ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs2(SheetFooter, { children: [
+      /* @__PURE__ */ jsxs2(SheetFooter, { className: "flex-row justify-end border-t", children: [
         /* @__PURE__ */ jsx2(
           Button2,
           {
@@ -976,7 +978,7 @@ import {
 import { Loader2 as Loader22 } from "lucide-react";
 import { toast as toast3 } from "sonner";
 import { ImageCropUpload as ImageCropUpload2 } from "@greatapps/greatauth-ui";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function msToSeconds2(ms) {
   if (ms == null || ms === 0) return "";
   return String(Math.round(ms / 1e3));
@@ -1031,7 +1033,7 @@ function AgentEditForm({ config, agent, idAccount, open, onOpenChange }) {
       toast3.error("Erro ao atualizar agente");
     }
   }
-  const formContent = /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+  const formFields = /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsx3("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx3(
       ImageCropUpload2,
       {
@@ -1115,8 +1117,35 @@ function AgentEditForm({ config, agent, idAccount, open, onOpenChange }) {
         ),
         /* @__PURE__ */ jsx3("p", { className: "text-xs text-muted-foreground", children: "Espera por mensagens agrupadas" })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs3(SheetFooter2, { children: [
+    ] })
+  ] });
+  if (open !== void 0 && onOpenChange) {
+    return /* @__PURE__ */ jsx3(Sheet2, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(SheetContent2, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsx3(SheetHeader2, { children: /* @__PURE__ */ jsx3(SheetTitle2, { children: "Editar Agente" }) }),
+      /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "flex flex-1 flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsx3("div", { className: "flex-1 overflow-y-auto px-4 space-y-4", children: formFields }),
+        /* @__PURE__ */ jsxs3(SheetFooter2, { className: "flex-row justify-end border-t", children: [
+          /* @__PURE__ */ jsx3(
+            Button3,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => onOpenChange?.(false),
+              disabled: updateAgent.isPending,
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ jsxs3(Button3, { type: "submit", disabled: updateAgent.isPending, children: [
+            updateAgent.isPending && /* @__PURE__ */ jsx3(Loader22, { "aria-hidden": "true", className: "mr-2 h-4 w-4 animate-spin" }),
+            "Salvar"
+          ] })
+        ] })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx3("div", { className: "max-w-lg pt-4", children: /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    formFields,
+    /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2 pt-4 border-t", children: [
       /* @__PURE__ */ jsx3(
         Button3,
         {
@@ -1132,24 +1161,17 @@ function AgentEditForm({ config, agent, idAccount, open, onOpenChange }) {
         "Salvar"
       ] })
     ] })
-  ] });
-  if (open !== void 0 && onOpenChange) {
-    return /* @__PURE__ */ jsx3(Sheet2, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(SheetContent2, { className: "sm:max-w-md overflow-y-auto", children: [
-      /* @__PURE__ */ jsx3(SheetHeader2, { children: /* @__PURE__ */ jsx3(SheetTitle2, { children: "Editar Agente" }) }),
-      formContent
-    ] }) });
-  }
-  return /* @__PURE__ */ jsx3("div", { className: "max-w-lg pt-4", children: formContent });
+  ] }) });
 }
 
 // src/components/agents/agent-objectives-list.tsx
 import { useState as useState6 } from "react";
 import {
-  Input as Input5,
+  Input as Input4,
   Button as Button5,
   Switch as Switch3,
   Skeleton,
-  Textarea,
+  Textarea as Textarea2,
   Label as Label3,
   Badge as Badge2,
   Sheet as Sheet3,
@@ -1632,7 +1654,7 @@ function SortableOverlay(props) {
 
 // src/components/agents/conversation-flow-editor.tsx
 import { useCallback as useCallback3, useRef, useState as useState5 } from "react";
-import { Button as Button4, Input as Input4 } from "@greatapps/greatauth-ui/ui";
+import { Button as Button4, Textarea } from "@greatapps/greatauth-ui/ui";
 import { GripVertical, Plus, Trash2 as Trash22 } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function renumber(steps) {
@@ -1698,46 +1720,50 @@ function ConversationFlowEditor({
             SortableItem,
             {
               value: step._key,
-              className: "flex items-center gap-2 rounded-lg border bg-card p-2",
+              className: "flex flex-col gap-2 rounded-lg border bg-card p-3",
               children: [
-                /* @__PURE__ */ jsx5(SortableItemHandle, { className: "shrink-0 cursor-grab text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx5(GripVertical, { "aria-hidden": "true", className: "h-4 w-4" }) }),
-                /* @__PURE__ */ jsxs4("span", { className: "shrink-0 text-xs font-medium text-muted-foreground tabular-nums w-6 text-right", children: [
-                  step.order,
-                  "."
+                /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx5(SortableItemHandle, { className: "shrink-0 cursor-grab text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx5(GripVertical, { "aria-hidden": "true", className: "h-4 w-4" }) }),
+                  /* @__PURE__ */ jsxs4("span", { className: "shrink-0 text-xs font-medium text-muted-foreground tabular-nums", children: [
+                    step.order,
+                    "."
+                  ] }),
+                  /* @__PURE__ */ jsx5("span", { className: "flex-1 text-sm font-medium truncate", children: step.instruction || "Nova etapa" }),
+                  /* @__PURE__ */ jsx5(
+                    Button4,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      "aria-label": "Remover etapa",
+                      className: "shrink-0 text-muted-foreground hover:text-destructive",
+                      onClick: () => handleRemove(step._key),
+                      children: /* @__PURE__ */ jsx5(Trash22, { className: "h-4 w-4" })
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ jsx5(
-                  Input4,
-                  {
-                    value: step.instruction,
-                    onChange: (e) => handleFieldChange(step._key, "instruction", e.target.value),
-                    placeholder: "Instru\xE7\xE3o (obrigat\xF3rio)",
-                    className: "flex-1 min-w-0",
-                    required: true
-                  }
-                ),
-                /* @__PURE__ */ jsx5(
-                  Input4,
-                  {
-                    value: step.example ?? "",
-                    onChange: (e) => handleFieldChange(step._key, "example", e.target.value),
-                    placeholder: "Exemplo (opcional)",
-                    className: "flex-1 min-w-0"
-                  }
-                ),
-                /* @__PURE__ */ jsx5(
-                  Button4,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "icon",
-                    "aria-label": "Remover etapa",
-                    className: cn(
-                      "shrink-0 text-muted-foreground hover:text-destructive"
-                    ),
-                    onClick: () => handleRemove(step._key),
-                    children: /* @__PURE__ */ jsx5(Trash22, { className: "h-4 w-4" })
-                  }
-                )
+                /* @__PURE__ */ jsxs4("div", { className: "space-y-2 pl-8", children: [
+                  /* @__PURE__ */ jsx5(
+                    Textarea,
+                    {
+                      value: step.instruction,
+                      onChange: (e) => handleFieldChange(step._key, "instruction", e.target.value),
+                      placeholder: "Descreva o que o agente deve fazer nesta etapa...",
+                      className: "min-h-[2.5rem] resize-none",
+                      rows: 2
+                    }
+                  ),
+                  /* @__PURE__ */ jsx5(
+                    Textarea,
+                    {
+                      value: step.example ?? "",
+                      onChange: (e) => handleFieldChange(step._key, "example", e.target.value),
+                      placeholder: "Exemplo de resposta do agente (opcional)",
+                      className: "min-h-[2.5rem] resize-none text-muted-foreground",
+                      rows: 1
+                    }
+                  )
+                ] })
               ]
             },
             step._key
@@ -1989,13 +2015,13 @@ function AgentObjectivesList({ agent, config }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx6(Sheet3, { open: formOpen, onOpenChange: setFormOpen, children: /* @__PURE__ */ jsxs5(SheetContent3, { className: "sm:max-w-lg overflow-y-auto", children: [
+    /* @__PURE__ */ jsx6(Sheet3, { open: formOpen, onOpenChange: setFormOpen, children: /* @__PURE__ */ jsxs5(SheetContent3, { className: "sm:max-w-lg", children: [
       /* @__PURE__ */ jsx6(SheetHeader3, { children: /* @__PURE__ */ jsx6(SheetTitle3, { children: editTarget ? "Editar Objetivo" : "Novo Objetivo" }) }),
-      /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex-1 overflow-y-auto px-4 space-y-4", children: [
         /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx6(Label3, { htmlFor: "objective-title", children: "T\xEDtulo *" }),
           /* @__PURE__ */ jsx6(
-            Input5,
+            Input4,
             {
               id: "objective-title",
               name: "title",
@@ -2015,7 +2041,7 @@ function AgentObjectivesList({ agent, config }) {
         /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx6(Label3, { htmlFor: "objective-slug", children: "Slug (identificador) *" }),
           /* @__PURE__ */ jsx6(
-            Input5,
+            Input4,
             {
               id: "objective-slug",
               name: "slug",
@@ -2033,7 +2059,7 @@ function AgentObjectivesList({ agent, config }) {
         /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx6(Label3, { htmlFor: "objective-instruction", children: "Quando ativar (instru\xE7\xE3o curta) *" }),
           /* @__PURE__ */ jsx6(
-            Input5,
+            Input4,
             {
               id: "objective-instruction",
               name: "instruction",
@@ -2047,7 +2073,7 @@ function AgentObjectivesList({ agent, config }) {
         /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx6(Label3, { htmlFor: "objective-description", children: "Descri\xE7\xE3o" }),
           /* @__PURE__ */ jsx6(
-            Textarea,
+            Textarea2,
             {
               id: "objective-description",
               name: "description",
@@ -2073,7 +2099,7 @@ function AgentObjectivesList({ agent, config }) {
         /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx6(Label3, { htmlFor: "objective-rules", children: "Regras" }),
           /* @__PURE__ */ jsx6(
-            Textarea,
+            Textarea2,
             {
               id: "objective-rules",
               name: "rules",
@@ -2086,7 +2112,7 @@ function AgentObjectivesList({ agent, config }) {
           /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground", children: "Restri\xE7\xF5es e limites espec\xEDficos quando este objectivo est\xE1 activo." })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs5(SheetFooter3, { children: [
+      /* @__PURE__ */ jsxs5(SheetFooter3, { className: "flex-row justify-end border-t", children: [
         /* @__PURE__ */ jsx6(
           Button5,
           {
@@ -2386,7 +2412,7 @@ import {
 } from "@greatapps/greatauth-ui/ui";
 import { FileText, RotateCcw, X, AlertTriangle } from "lucide-react";
 import { toast as toast6 } from "sonner";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var STRUCTURED_MARKERS = ["[IDENTIDADE]", "[MISS\xC3O]", "[TOM, ESTILO & FORMATO]"];
 function formatDate(dateStr) {
   const date = new Date(dateStr);
@@ -2648,7 +2674,7 @@ function AgentRevisionTab({ agent, config }) {
                 (legacyModalVersion?.prompt_content ?? "").length.toLocaleString("pt-BR"),
                 " caracteres"
               ] }),
-              legacyModalVersion?.change_notes && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+              legacyModalVersion?.change_notes && /* @__PURE__ */ jsxs7(Fragment3, { children: [
                 /* @__PURE__ */ jsx8("span", { children: "\xB7" }),
                 /* @__PURE__ */ jsx8("span", { className: "italic", children: legacyModalVersion.change_notes })
               ] })
@@ -3767,13 +3793,13 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-  Input as Input6,
-  Textarea as Textarea2,
-  Dialog as Dialog2,
-  DialogContent as DialogContent2,
-  DialogHeader as DialogHeader2,
-  DialogTitle as DialogTitle2,
-  DialogFooter,
+  Input as Input5,
+  Textarea as Textarea3,
+  Sheet as Sheet4,
+  SheetContent as SheetContent4,
+  SheetHeader as SheetHeader4,
+  SheetTitle as SheetTitle4,
+  SheetFooter as SheetFooter4,
   Label as Label5,
   Select,
   SelectContent,
@@ -3906,7 +3932,7 @@ function AgentToolsList({ agent, config }) {
         ] }) }),
         /* @__PURE__ */ jsxs13(PopoverContent, { className: "w-72 p-0", align: "end", children: [
           /* @__PURE__ */ jsx15("div", { className: "p-2", children: /* @__PURE__ */ jsx15(
-            Input6,
+            Input5,
             {
               placeholder: "Buscar ferramenta\\u2026",
               "aria-label": "Buscar ferramenta",
@@ -3989,13 +4015,13 @@ function AgentToolsList({ agent, config }) {
       );
     }) }),
     /* @__PURE__ */ jsx15(
-      Dialog2,
+      Sheet4,
       {
         open: !!configTarget,
         onOpenChange: (open) => !open && setConfigTarget(null),
-        children: /* @__PURE__ */ jsxs13(DialogContent2, { className: "sm:max-w-lg", children: [
-          /* @__PURE__ */ jsx15(DialogHeader2, { children: /* @__PURE__ */ jsx15(DialogTitle2, { children: "Instru\xE7\xF5es da Ferramenta" }) }),
-          /* @__PURE__ */ jsxs13("div", { className: "space-y-4", children: [
+        children: /* @__PURE__ */ jsxs13(SheetContent4, { className: "sm:max-w-lg", children: [
+          /* @__PURE__ */ jsx15(SheetHeader4, { children: /* @__PURE__ */ jsx15(SheetTitle4, { children: "Instru\xE7\xF5es da Ferramenta" }) }),
+          /* @__PURE__ */ jsxs13("div", { className: "flex-1 overflow-y-auto px-4 space-y-4", children: [
             configTarget && getToolInfo(configTarget.id_tool)?.type !== "none" && /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsx15(Label5, { htmlFor: "tool-credential", children: "Credencial" }),
               /* @__PURE__ */ jsxs13(
@@ -4017,7 +4043,7 @@ function AgentToolsList({ agent, config }) {
             /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsx15(Label5, { htmlFor: "tool-instructions", children: "Instru\xE7\xF5es Personalizadas" }),
               /* @__PURE__ */ jsx15(
-                Textarea2,
+                Textarea3,
                 {
                   id: "tool-instructions",
                   name: "instructions",
@@ -4030,7 +4056,7 @@ function AgentToolsList({ agent, config }) {
               /* @__PURE__ */ jsx15("p", { className: "text-xs text-muted-foreground", children: "Este texto \xE9 adicionado ao prompt do agente para orientar o uso da ferramenta." })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs13(DialogFooter, { children: [
+          /* @__PURE__ */ jsxs13(SheetFooter4, { className: "flex-row justify-end border-t", children: [
             /* @__PURE__ */ jsx15(
               Button11,
               {
@@ -4082,7 +4108,7 @@ function AgentToolsList({ agent, config }) {
 import { useMemo as useMemo9, useState as useState13 } from "react";
 import { DataTable as DataTable2 } from "@greatapps/greatauth-ui";
 import {
-  Input as Input7,
+  Input as Input6,
   Badge as Badge7,
   Tooltip as Tooltip3,
   TooltipTrigger as TooltipTrigger3,
@@ -4101,7 +4127,7 @@ import { Pencil as Pencil5, Trash2 as Trash25, Search as Search2 } from "lucide-
 import { format as format2 } from "date-fns";
 import { ptBR as ptBR2 } from "date-fns/locale";
 import { toast as toast10 } from "sonner";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function useColumns2(onEdit, onDelete) {
   return [
     {
@@ -4210,11 +4236,11 @@ function ToolsTable({ onEdit, config }) {
     setSearch(value);
     setPage(1);
   }
-  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
     /* @__PURE__ */ jsx16("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs14("div", { className: "relative flex-1 max-w-md", children: [
       /* @__PURE__ */ jsx16(Search2, { "aria-hidden": "true", className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
       /* @__PURE__ */ jsx16(
-        Input7,
+        Input6,
         {
           placeholder: "Buscar ferramentas\\u2026",
           "aria-label": "Buscar ferramentas",
@@ -4271,14 +4297,14 @@ function ToolsTable({ onEdit, config }) {
 // src/components/tools/tool-form-dialog.tsx
 import { useState as useState14 } from "react";
 import {
-  Dialog as Dialog3,
-  DialogContent as DialogContent3,
-  DialogHeader as DialogHeader3,
-  DialogTitle as DialogTitle3,
-  DialogFooter as DialogFooter2,
+  Sheet as Sheet5,
+  SheetContent as SheetContent5,
+  SheetHeader as SheetHeader5,
+  SheetTitle as SheetTitle5,
+  SheetFooter as SheetFooter5,
   Button as Button13,
-  Input as Input8,
-  Textarea as Textarea3,
+  Input as Input7,
+  Textarea as Textarea4,
   Label as Label6,
   Select as Select2,
   SelectContent as SelectContent2,
@@ -4398,109 +4424,110 @@ function ToolFormDialog({
       );
     }
   }
-  return /* @__PURE__ */ jsx17(Dialog3, { open, onOpenChange, children: /* @__PURE__ */ jsxs15(DialogContent3, { className: "sm:max-w-lg", children: [
-    /* @__PURE__ */ jsx17(DialogHeader3, { children: /* @__PURE__ */ jsx17(DialogTitle3, { children: isEditing ? "Editar Ferramenta" : "Nova Ferramenta" }) }),
-    /* @__PURE__ */ jsxs15("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-name", children: "Nome *" }),
-        /* @__PURE__ */ jsx17(
-          Input8,
-          {
-            id: "tool-name",
-            name: "name",
-            value: form.name,
-            onChange: (e) => {
-              const name = e.target.value;
-              setForm((prev) => ({
-                ...prev,
-                name,
-                nameError: name.trim() ? false : prev.nameError,
-                ...!slugManuallyEdited && !isEditing ? { slug: slugify2(name), slugError: false } : {}
-              }));
-            },
-            placeholder: "Ex: Google Calendar",
-            disabled: isPending
-          }
-        ),
-        form.nameError && /* @__PURE__ */ jsx17("p", { className: "text-sm text-destructive", children: "Nome \xE9 obrigat\xF3rio" })
-      ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-slug", children: "Slug (identificador \xFAnico) *" }),
-        /* @__PURE__ */ jsx17(
-          Input8,
-          {
-            id: "tool-slug",
-            name: "slug",
-            value: form.slug,
-            onChange: (e) => {
-              setSlugManuallyEdited(true);
-              setForm((prev) => ({
-                ...prev,
-                slug: e.target.value,
-                slugError: e.target.value.trim() ? false : prev.slugError
-              }));
-            },
-            placeholder: "Ex: google-calendar",
-            disabled: isPending
-          }
-        ),
-        /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: "Gerado automaticamente a partir do nome. Usado internamente para identificar a ferramenta." }),
-        form.slugError && /* @__PURE__ */ jsx17("p", { className: "text-sm text-destructive", children: "Slug \xE9 obrigat\xF3rio" })
-      ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-type", children: "Tipo de Autentica\xE7\xE3o *" }),
-        /* @__PURE__ */ jsxs15(
-          Select2,
-          {
-            value: form.type,
-            onValueChange: (value) => {
-              setForm((prev) => ({
-                ...prev,
-                type: value,
-                typeError: false
-              }));
-            },
-            disabled: isPending,
-            children: [
-              /* @__PURE__ */ jsx17(SelectTrigger2, { id: "tool-type", children: /* @__PURE__ */ jsx17(SelectValue2, { placeholder: "Selecione o tipo" }) }),
-              /* @__PURE__ */ jsx17(SelectContent2, { children: TOOL_AUTH_TYPES.map((t) => /* @__PURE__ */ jsx17(SelectItem2, { value: t.value, children: t.label }, t.value)) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: "Define se a ferramenta requer credenciais para funcionar." }),
-        form.typeError && /* @__PURE__ */ jsx17("p", { className: "text-sm text-destructive", children: "Tipo \xE9 obrigat\xF3rio" })
-      ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-description", children: "Descri\xE7\xE3o" }),
-        /* @__PURE__ */ jsx17(
-          Textarea3,
-          {
-            id: "tool-description",
-            name: "description",
-            value: form.description,
-            onChange: (e) => setForm((prev) => ({ ...prev, description: e.target.value })),
-            placeholder: "Descri\\u00e7\\u00e3o da ferramenta\\u2026",
-            rows: 3,
-            disabled: isPending
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-function-defs", children: "Defini\xE7\xF5es de Fun\xE7\xE3o (JSON)" }),
-        /* @__PURE__ */ jsx17(
-          Textarea3,
-          {
-            id: "tool-function-defs",
-            name: "functionDefs",
-            value: form.functionDefinitions,
-            onChange: (e) => {
-              setForm((prev) => ({
-                ...prev,
-                functionDefinitions: e.target.value,
-                jsonError: false
-              }));
-            },
-            placeholder: `[
+  return /* @__PURE__ */ jsx17(Sheet5, { open, onOpenChange, children: /* @__PURE__ */ jsxs15(SheetContent5, { className: "sm:max-w-lg", children: [
+    /* @__PURE__ */ jsx17(SheetHeader5, { children: /* @__PURE__ */ jsx17(SheetTitle5, { children: isEditing ? "Editar Ferramenta" : "Nova Ferramenta" }) }),
+    /* @__PURE__ */ jsxs15("form", { onSubmit: handleSubmit, className: "flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex-1 overflow-y-auto px-4 space-y-4", children: [
+        /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-name", children: "Nome *" }),
+          /* @__PURE__ */ jsx17(
+            Input7,
+            {
+              id: "tool-name",
+              name: "name",
+              value: form.name,
+              onChange: (e) => {
+                const name = e.target.value;
+                setForm((prev) => ({
+                  ...prev,
+                  name,
+                  nameError: name.trim() ? false : prev.nameError,
+                  ...!slugManuallyEdited && !isEditing ? { slug: slugify2(name), slugError: false } : {}
+                }));
+              },
+              placeholder: "Ex: Google Calendar",
+              disabled: isPending
+            }
+          ),
+          form.nameError && /* @__PURE__ */ jsx17("p", { className: "text-sm text-destructive", children: "Nome \xE9 obrigat\xF3rio" })
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-slug", children: "Slug (identificador \xFAnico) *" }),
+          /* @__PURE__ */ jsx17(
+            Input7,
+            {
+              id: "tool-slug",
+              name: "slug",
+              value: form.slug,
+              onChange: (e) => {
+                setSlugManuallyEdited(true);
+                setForm((prev) => ({
+                  ...prev,
+                  slug: e.target.value,
+                  slugError: e.target.value.trim() ? false : prev.slugError
+                }));
+              },
+              placeholder: "Ex: google-calendar",
+              disabled: isPending
+            }
+          ),
+          /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: "Gerado automaticamente a partir do nome. Usado internamente para identificar a ferramenta." }),
+          form.slugError && /* @__PURE__ */ jsx17("p", { className: "text-sm text-destructive", children: "Slug \xE9 obrigat\xF3rio" })
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-type", children: "Tipo de Autentica\xE7\xE3o *" }),
+          /* @__PURE__ */ jsxs15(
+            Select2,
+            {
+              value: form.type,
+              onValueChange: (value) => {
+                setForm((prev) => ({
+                  ...prev,
+                  type: value,
+                  typeError: false
+                }));
+              },
+              disabled: isPending,
+              children: [
+                /* @__PURE__ */ jsx17(SelectTrigger2, { id: "tool-type", children: /* @__PURE__ */ jsx17(SelectValue2, { placeholder: "Selecione o tipo" }) }),
+                /* @__PURE__ */ jsx17(SelectContent2, { children: TOOL_AUTH_TYPES.map((t) => /* @__PURE__ */ jsx17(SelectItem2, { value: t.value, children: t.label }, t.value)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: "Define se a ferramenta requer credenciais para funcionar." }),
+          form.typeError && /* @__PURE__ */ jsx17("p", { className: "text-sm text-destructive", children: "Tipo \xE9 obrigat\xF3rio" })
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-description", children: "Descri\xE7\xE3o" }),
+          /* @__PURE__ */ jsx17(
+            Textarea4,
+            {
+              id: "tool-description",
+              name: "description",
+              value: form.description,
+              onChange: (e) => setForm((prev) => ({ ...prev, description: e.target.value })),
+              placeholder: "Descri\\u00e7\\u00e3o da ferramenta\\u2026",
+              rows: 3,
+              disabled: isPending
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx17(Label6, { htmlFor: "tool-function-defs", children: "Defini\xE7\xF5es de Fun\xE7\xE3o (JSON)" }),
+          /* @__PURE__ */ jsx17(
+            Textarea4,
+            {
+              id: "tool-function-defs",
+              name: "functionDefs",
+              value: form.functionDefinitions,
+              onChange: (e) => {
+                setForm((prev) => ({
+                  ...prev,
+                  functionDefinitions: e.target.value,
+                  jsonError: false
+                }));
+              },
+              placeholder: `[
   {
     "type": "function",
     "function": {
@@ -4514,15 +4541,16 @@ function ToolFormDialog({
     }
   }
 ]`,
-            rows: 10,
-            className: "font-mono text-sm",
-            disabled: isPending
-          }
-        ),
-        /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: "Array de defini\xE7\xF5es no formato OpenAI Function Calling." }),
-        form.jsonError && /* @__PURE__ */ jsx17("p", { className: "text-sm text-destructive", children: "JSON inv\xE1lido" })
+              rows: 10,
+              className: "font-mono text-sm",
+              disabled: isPending
+            }
+          ),
+          /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: "Array de defini\xE7\xF5es no formato OpenAI Function Calling." }),
+          form.jsonError && /* @__PURE__ */ jsx17("p", { className: "text-sm text-destructive", children: "JSON inv\xE1lido" })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs15(DialogFooter2, { children: [
+      /* @__PURE__ */ jsxs15(SheetFooter5, { className: "flex-row justify-end border-t", children: [
         /* @__PURE__ */ jsx17(
           Button13,
           {
@@ -4546,7 +4574,7 @@ function ToolFormDialog({
 import { useMemo as useMemo10, useState as useState15 } from "react";
 import { DataTable as DataTable3 } from "@greatapps/greatauth-ui";
 import {
-  Input as Input9,
+  Input as Input8,
   Button as Button14,
   Badge as Badge8,
   Tooltip as Tooltip4,
@@ -4681,7 +4709,7 @@ function ToolCredentialsForm({
     /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs16("div", { className: "relative flex-1 max-w-md", children: [
       /* @__PURE__ */ jsx18(Search3, { "aria-hidden": "true", className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
       /* @__PURE__ */ jsx18(
-        Input9,
+        Input8,
         {
           placeholder: "Buscar credenciais\\u2026",
           "aria-label": "Buscar credenciais",
@@ -4757,7 +4785,7 @@ import {
   Unplug,
   Trash2 as Trash27
 } from "lucide-react";
-import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var ICON_MAP2 = {
   CalendarSync: CalendarSync2,
   Plug: Plug3,
@@ -4863,7 +4891,7 @@ function IntegrationCard({
     );
   }
   const badge = STATE_BADGES[state];
-  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
     /* @__PURE__ */ jsxs17(
       "div",
       {
@@ -5005,11 +5033,11 @@ function AdvancedTab({ config, agentId, gagentsApiUrl }) {
 // src/components/capabilities/integration-wizard.tsx
 import { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef3, useState as useState18 } from "react";
 import {
-  Dialog as Dialog4,
-  DialogContent as DialogContent4,
-  DialogFooter as DialogFooter3,
-  DialogHeader as DialogHeader4,
-  DialogTitle as DialogTitle4,
+  Dialog as Dialog2,
+  DialogContent as DialogContent2,
+  DialogFooter,
+  DialogHeader as DialogHeader2,
+  DialogTitle as DialogTitle2,
   Button as Button17
 } from "@greatapps/greatauth-ui/ui";
 import { Loader2 as Loader29, ChevronLeft, ChevronRight, Check as Check2 } from "lucide-react";
@@ -5072,7 +5100,7 @@ function InfoStep({ integration, meta }) {
 
 // src/components/capabilities/wizard-steps/credentials-step.tsx
 import { CheckCircle2, Loader2 as Loader27, AlertCircle, Shield } from "lucide-react";
-import { Button as Button16, Input as Input10, Label as Label7 } from "@greatapps/greatauth-ui/ui";
+import { Button as Button16, Input as Input9, Label as Label7 } from "@greatapps/greatauth-ui/ui";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function CredentialsStep({
   integration,
@@ -5195,7 +5223,7 @@ function ApiKeyCredentials({
     /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx22(Label7, { htmlFor: "integration-api-key", children: "Chave de API" }),
       /* @__PURE__ */ jsx22(
-        Input10,
+        Input9,
         {
           id: "integration-api-key",
           type: "password",
@@ -5597,8 +5625,8 @@ function IntegrationWizard({
   const selectedConfigOption = configOptions.find((o) => o.id === selectedConfigValue) || null;
   const isLastStep = currentStep === "confirm";
   const effectiveSteps = meta.hasConfigStep ? STEPS : STEPS.filter((s) => s !== "config");
-  return /* @__PURE__ */ jsx25(Dialog4, { open, onOpenChange, children: /* @__PURE__ */ jsxs23(DialogContent4, { className: "sm:max-w-lg", children: [
-    /* @__PURE__ */ jsx25(DialogHeader4, { children: /* @__PURE__ */ jsx25(DialogTitle4, { children: integration.name }) }),
+  return /* @__PURE__ */ jsx25(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs23(DialogContent2, { className: "sm:max-w-lg", children: [
+    /* @__PURE__ */ jsx25(DialogHeader2, { children: /* @__PURE__ */ jsx25(DialogTitle2, { children: integration.name }) }),
     /* @__PURE__ */ jsx25(StepIndicator, { steps: effectiveSteps, currentStep }),
     /* @__PURE__ */ jsxs23("div", { className: "min-h-[280px] py-2", children: [
       currentStep === "info" && /* @__PURE__ */ jsx25(
@@ -5642,7 +5670,7 @@ function IntegrationWizard({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs23(DialogFooter3, { className: "flex-row justify-between sm:justify-between", children: [
+    /* @__PURE__ */ jsxs23(DialogFooter, { className: "flex-row justify-between sm:justify-between", children: [
       /* @__PURE__ */ jsx25("div", { children: currentStep === "info" ? /* @__PURE__ */ jsx25(
         Button17,
         {