@greatapps/greatagents-ui 0.3.14 → 0.3.15

package/dist/index.js

@@ -1975,29 +1975,55 @@ function computeDiff(oldText, newText) {
 function buildPreview(promptText, objectives, agentTools, allTools) {
   let preview = promptText;
   const activeObjectives = objectives.filter((o) => o.active);
-  if (activeObjectives.length > 0) {
-    preview += "\n\n[SKILLS DISPON\xCDVEIS]\n";
-    for (const obj of activeObjectives) {
-      preview += `- ${obj.title}`;
-      if (obj.prompt) preview += `: ${obj.prompt}`;
-      preview += "\n";
+  const enabledAgentTools = agentTools.filter((at) => at.enabled);
+  const toolMap = new Map(allTools.map((t) => [t.id, t]));
+  const capabilityTools = [];
+  const integrationTools = [];
+  for (const at of enabledAgentTools) {
+    const tool = toolMap.get(at.id_tool);
+    if (!tool) continue;
+    if (tool.type === "integration") {
+      integrationTools.push({ at, tool });
+    } else {
+      capabilityTools.push({ at, tool });
     }
   }
-  const enabledAgentTools = agentTools.filter((at) => at.enabled);
-  if (enabledAgentTools.length > 0) {
-    const toolMap = new Map(allTools.map((t) => [t.id, t]));
-    preview += "\n[TOOLS DISPON\xCDVEIS]\n";
-    for (const at of enabledAgentTools) {
-      const tool = toolMap.get(at.id_tool);
-      const name = tool?.name || `Tool #${at.id_tool}`;
-      const desc = tool?.description ? `: ${tool.description}` : "";
-      preview += `- ${name}${desc}`;
-      if (at.custom_instructions) {
+  const hasContent = activeObjectives.length > 0 || capabilityTools.length > 0 || integrationTools.length > 0;
+  if (hasContent) {
+    preview += "\n\n[CAPACIDADES E INTEGRA\xC7\xD5ES]";
+    if (activeObjectives.length > 0 || capabilityTools.length > 0) {
+      preview += "\n\n## Capacidades Internas (GClinic)";
+      for (const obj of activeObjectives) {
         preview += `
-  Instru\xE7\xF5es: ${at.custom_instructions}`;
+
+### ${obj.title} (${obj.slug})`;
+        if (obj.prompt) preview += `
+${obj.prompt}`;
+      }
+      for (const { at, tool } of capabilityTools) {
+        preview += `
+
+### ${tool.name} (${tool.slug})`;
+        if (tool.description) preview += `
+${tool.description}`;
+        if (at.custom_instructions) preview += `
+${at.custom_instructions}`;
       }
-      preview += "\n";
     }
+    if (integrationTools.length > 0) {
+      preview += "\n\n## Integra\xE7\xF5es Externas";
+      for (const { at, tool } of integrationTools) {
+        preview += `
+
+### ${tool.name} (${tool.slug})`;
+        if (at.custom_instructions) preview += `
+${at.custom_instructions}`;
+      }
+    }
+    preview += "\n\n## Regras";
+    preview += "\n- Sempre confirme com o usu\xE1rio antes de criar ou alterar registros.";
+    preview += "\n- Nunca invente dados \u2014 sempre consulte primeiro.";
+    preview += "\n- Use EXATAMENTE os nomes de fun\xE7\xE3o listados acima.";
   }
   return preview;
 }
@@ -2160,11 +2186,14 @@ function AgentPromptEditor({ config, agent }) {
           }
         ),
         showPreview && /* @__PURE__ */ jsx6("div", { className: "border-t px-4 py-3", children: /* @__PURE__ */ jsx6("pre", { className: "max-h-96 overflow-auto whitespace-pre-wrap font-mono text-sm leading-relaxed", children: previewText.split("\n").map((line, i) => {
-          const isSection = line.startsWith("[SKILLS DISPON\xCDVEIS]") || line.startsWith("[TOOLS DISPON\xCDVEIS]");
+          const isTopSection = line.startsWith("[CAPACIDADES E INTEGRA\xC7\xD5ES]");
+          const isH2 = line.startsWith("## ");
+          const isH3 = line.startsWith("### ");
+          const cls = isTopSection ? "font-bold text-foreground" : isH2 ? "font-semibold text-muted-foreground" : isH3 ? "font-medium text-muted-foreground" : "";
           return /* @__PURE__ */ jsxs5(
             "span",
             {
-              className: isSection ? "font-semibold text-muted-foreground" : "",
+              className: cls,
               children: [
                 line,
                 "\n"
@@ -2829,33 +2858,81 @@ var ICON_MAP = {
 function resolveIcon(name) {
   return ICON_MAP[name] ?? Plug;
 }
+var INTEGRATION_INSTRUCTIONS = {
+  "google-calendar": `Voc\xEA tem acesso ao Google Calendar atrav\xE9s da integra\xE7\xE3o google-calendar.
+Fun\xE7\xF5es dispon\xEDveis:
+- google_calendar_setup_oauth: Configurar conex\xE3o OAuth
+- google_calendar_check_status: Verificar status da conex\xE3o
+- google_calendar_list_events: Listar eventos do calend\xE1rio
+- google_calendar_create_event: Criar novo evento
+- google_calendar_update_event: Atualizar evento existente
+- google_calendar_delete_event: Cancelar/remover evento
+
+Use EXATAMENTE os nomes de fun\xE7\xE3o listados acima.`
+};
 function IntegrationsTab({
   config,
   agentId
 }) {
   const { cards, isLoading } = useIntegrationState(config, agentId);
   const { data: agentToolsData, isLoading: agentToolsLoading } = useAgentTools(config, agentId);
+  const { data: toolsData } = useTools(config);
   const addAgentTool = useAddAgentTool(config);
   const removeAgentTool = useRemoveAgentTool(config);
+  const createTool = useCreateTool(config);
   const agentTools = agentToolsData?.data ?? [];
+  const allTools = toolsData?.data ?? [];
   const connectedCards = cards.filter(
     (c) => !c.isAddNew && (c.state === "connected" || c.state === "expired")
   );
   const handleToggle = useCallback5(
-    (toolId, checked) => {
+    async (card, checked) => {
       if (checked) {
+        let toolId = card.tool?.id;
+        if (!toolId) {
+          const existingTool = allTools.find((t) => t.slug === card.definition.slug);
+          if (existingTool) {
+            toolId = existingTool.id;
+          } else {
+            try {
+              const result = await createTool.mutateAsync({
+                name: card.definition.name,
+                slug: card.definition.slug,
+                type: "integration",
+                description: card.definition.description
+              });
+              const d = result?.data;
+              toolId = (Array.isArray(d) ? d[0]?.id : d?.id) ?? void 0;
+              if (!toolId) {
+                console.error("[IntegrationsTab] Failed to create tool \u2014 no ID returned");
+                return;
+              }
+            } catch (err) {
+              console.error("[IntegrationsTab] Error creating tool:", err);
+              return;
+            }
+          }
+        }
+        const customInstructions = INTEGRATION_INSTRUCTIONS[card.definition.slug];
         addAgentTool.mutate({
           idAgent: agentId,
-          body: { id_tool: toolId, enabled: true }
+          body: {
+            id_tool: toolId,
+            enabled: true,
+            ...customInstructions ? { custom_instructions: customInstructions } : {}
+          }
         });
       } else {
-        const agentTool = agentTools.find((at) => at.id_tool === toolId);
-        if (agentTool) {
-          removeAgentTool.mutate({ idAgent: agentId, id: agentTool.id });
+        const toolId = card.tool?.id;
+        if (toolId) {
+          const agentTool = agentTools.find((at) => at.id_tool === toolId);
+          if (agentTool) {
+            removeAgentTool.mutate({ idAgent: agentId, id: agentTool.id });
+          }
         }
       }
     },
-    [agentTools, agentId, addAgentTool, removeAgentTool]
+    [agentTools, allTools, agentId, addAgentTool, removeAgentTool, createTool]
   );
   if (isLoading || agentToolsLoading) {
     return /* @__PURE__ */ jsx11("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsx11(Loader25, { className: "h-6 w-6 animate-spin text-muted-foreground" }) });
@@ -2872,7 +2949,7 @@ function IntegrationsTab({
     /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: connectedCards.map((card) => {
       const Icon = resolveIcon(card.definition.icon);
       const isLinked = card.linkedToAgent;
-      const isMutating = addAgentTool.isPending || removeAgentTool.isPending;
+      const isMutating = addAgentTool.isPending || removeAgentTool.isPending || createTool.isPending;
       return /* @__PURE__ */ jsxs9(
         "div",
         {
@@ -2894,8 +2971,8 @@ function IntegrationsTab({
               Switch5,
               {
                 checked: isLinked,
-                disabled: isMutating || !card.tool,
-                onCheckedChange: (checked) => card.tool && handleToggle(card.tool.id, checked),
+                disabled: isMutating,
+                onCheckedChange: (checked) => handleToggle(card, checked),
                 "aria-label": `${isLinked ? "Desativar" : "Ativar"} ${card.definition.name} para este agente`
               }
             )
@@ -3940,16 +4017,34 @@ function ToolCredentialsForm({
 }
 
 // src/components/capabilities/integration-card.tsx
-import { Badge as Badge9, Button as Button12 } from "@greatapps/greatauth-ui/ui";
+import { useState as useState13 } from "react";
+import {
+  Badge as Badge9,
+  Button as Button12,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  AlertDialog as AlertDialog6,
+  AlertDialogAction as AlertDialogAction6,
+  AlertDialogCancel as AlertDialogCancel6,
+  AlertDialogContent as AlertDialogContent6,
+  AlertDialogDescription as AlertDialogDescription6,
+  AlertDialogFooter as AlertDialogFooter6,
+  AlertDialogHeader as AlertDialogHeader6,
+  AlertDialogTitle as AlertDialogTitle6
+} from "@greatapps/greatauth-ui/ui";
 import {
   CalendarSync as CalendarSync2,
   Plug as Plug3,
   Settings as Settings3,
   RefreshCw,
   Clock,
-  Plus as Plus3
+  Plus as Plus3,
+  Unplug,
+  Trash2 as Trash26
 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var ICON_MAP2 = {
   CalendarSync: CalendarSync2,
   Plug: Plug3,
@@ -3979,35 +4074,29 @@ var STATE_BADGES = {
     className: "bg-muted text-muted-foreground"
   }
 };
-function getActionLabel(card) {
-  if (card.isAddNew) return "Conectar";
-  switch (card.state) {
-    case "available":
-      return "Conectar";
-    case "connected":
-      return "Configurar";
-    case "expired":
-      return "Reconectar";
-    default:
-      return "";
-  }
-}
-function IntegrationCard({ card, onConnect }) {
+function IntegrationCard({
+  card,
+  onConnect,
+  onReconnect,
+  onDisconnect,
+  onDelete
+}) {
   const { definition, state, isAddNew, accountLabel } = card;
   const Icon = resolveIcon2(definition.icon);
   const isComingSoon = state === "coming_soon";
-  const actionLabel = getActionLabel(card);
+  const isConnected = state === "connected" || state === "expired";
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState13(false);
   if (isAddNew) {
     return /* @__PURE__ */ jsxs15(
       "div",
       {
         className: cn(
-          "group relative flex flex-col gap-3 rounded-xl border border-dashed bg-card/50 p-5 transition-shadow",
-          "hover:shadow-md hover:border-solid hover:bg-card cursor-pointer"
+          "group relative flex flex-col gap-3 rounded-xl border bg-card/50 p-5 transition-all",
+          "hover:shadow-md hover:bg-card cursor-pointer"
         ),
         role: "button",
         tabIndex: 0,
-        "aria-label": `Adicionar conta ${definition.name}`,
+        "aria-label": `Conectar ${definition.name}`,
         onClick: () => onConnect(card),
         onKeyDown: (e) => {
           if (e.key === "Enter" || e.key === " ") {
@@ -4016,15 +4105,11 @@ function IntegrationCard({ card, onConnect }) {
           }
         },
         children: [
-          /* @__PURE__ */ jsxs15("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-3", children: [
             /* @__PURE__ */ jsx17("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/5 text-primary/60", children: /* @__PURE__ */ jsx17(Icon, { className: "h-5 w-5" }) }),
-            /* @__PURE__ */ jsx17(Badge9, { variant: "outline", className: "text-xs bg-muted text-muted-foreground", children: "Adicionar" })
-          ] }),
-          /* @__PURE__ */ jsxs15("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx17("h3", { className: "text-sm font-semibold leading-tight text-muted-foreground", children: definition.name }),
-            /* @__PURE__ */ jsxs15("p", { className: "text-xs text-muted-foreground/70 leading-relaxed flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx17(Plus3, { className: "h-3 w-3" }),
-              "Adicionar conta"
+            /* @__PURE__ */ jsxs15("div", { className: "flex-1 min-w-0 space-y-0.5", children: [
+              /* @__PURE__ */ jsx17("h3", { className: "text-sm font-semibold leading-tight text-foreground", children: definition.name }),
+              /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground leading-relaxed", children: "Conectar nova conta" })
             ] })
           ] }),
           /* @__PURE__ */ jsx17("div", { className: "mt-auto flex items-center justify-end pt-1", children: /* @__PURE__ */ jsx17(
@@ -4037,66 +4122,138 @@ function IntegrationCard({ card, onConnect }) {
                 e.stopPropagation();
                 onConnect(card);
               },
-              children: actionLabel
+              children: "Conectar"
             }
           ) })
         ]
       }
     );
   }
+  if (isComingSoon) {
+    const badge2 = STATE_BADGES[state];
+    return /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        className: "group relative flex flex-col gap-3 rounded-xl border bg-card p-5 opacity-60 cursor-default",
+        "aria-disabled": true,
+        children: [
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsx17("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx17(Icon, { className: "h-5 w-5" }) }),
+            /* @__PURE__ */ jsx17(Badge9, { variant: "outline", className: cn("text-xs", badge2.className), children: badge2.label })
+          ] }),
+          /* @__PURE__ */ jsxs15("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx17("h3", { className: "text-sm font-semibold leading-tight", children: definition.name }),
+            /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground leading-relaxed", children: definition.description })
+          ] })
+        ]
+      }
+    );
+  }
   const badge = STATE_BADGES[state];
-  return /* @__PURE__ */ jsxs15(
-    "div",
-    {
-      className: cn(
-        "group relative flex flex-col gap-3 rounded-xl border bg-card p-5 transition-shadow",
-        isComingSoon ? "opacity-60 cursor-default" : "hover:shadow-md cursor-pointer"
-      ),
-      role: "button",
-      tabIndex: isComingSoon ? -1 : 0,
-      "aria-label": `${definition.name}${accountLabel ? ` \u2014 ${accountLabel}` : ""} \u2014 ${badge.label}`,
-      "aria-disabled": isComingSoon,
-      onClick: () => !isComingSoon && onConnect(card),
-      onKeyDown: (e) => {
-        if (!isComingSoon && (e.key === "Enter" || e.key === " ")) {
-          e.preventDefault();
-          onConnect(card);
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs15("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ jsx17("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx17(Icon, { className: "h-5 w-5" }) }),
-          /* @__PURE__ */ jsx17(Badge9, { variant: "outline", className: cn("text-xs", badge.className), children: badge.label })
-        ] }),
-        /* @__PURE__ */ jsxs15("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx17("h3", { className: "text-sm font-semibold leading-tight", children: definition.name }),
-          accountLabel ? /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground leading-relaxed truncate", title: accountLabel, children: accountLabel }) : /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground leading-relaxed", children: definition.description })
-        ] }),
-        /* @__PURE__ */ jsx17("div", { className: "mt-auto flex items-center justify-end gap-2 pt-1", children: !isComingSoon && /* @__PURE__ */ jsx17(
-          Button12,
+  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
+    /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        className: "group relative flex flex-col gap-3 rounded-xl border bg-card p-5 transition-shadow hover:shadow-md",
+        children: [
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-3 min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx17("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx17(Icon, { className: "h-5 w-5" }) }),
+              /* @__PURE__ */ jsxs15("div", { className: "flex-1 min-w-0 space-y-0.5", children: [
+                /* @__PURE__ */ jsx17("h3", { className: "text-sm font-semibold leading-tight", children: definition.name }),
+                accountLabel && /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground leading-relaxed truncate", title: accountLabel, children: accountLabel })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx17(Badge9, { variant: "outline", className: cn("text-xs shrink-0", badge.className), children: badge.label })
+          ] }),
+          /* @__PURE__ */ jsx17("div", { className: "mt-auto flex items-center justify-end gap-2 pt-1", children: /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
+              Button12,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "text-xs gap-1.5",
+                children: [
+                  /* @__PURE__ */ jsx17(Settings3, { className: "h-3.5 w-3.5" }),
+                  "Configurar"
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs15(DropdownMenuContent, { align: "end", children: [
+              /* @__PURE__ */ jsxs15(
+                DropdownMenuItem,
+                {
+                  onClick: () => onReconnect?.(card),
+                  className: "gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx17(RefreshCw, { className: "h-4 w-4" }),
+                    "Reconectar"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs15(
+                DropdownMenuItem,
+                {
+                  onClick: () => onDisconnect?.(card),
+                  className: "gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx17(Unplug, { className: "h-4 w-4" }),
+                    "Desconectar"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs15(
+                DropdownMenuItem,
+                {
+                  onClick: () => setDeleteDialogOpen(true),
+                  className: "gap-2 text-destructive focus:text-destructive",
+                  children: [
+                    /* @__PURE__ */ jsx17(Trash26, { className: "h-4 w-4" }),
+                    "Remover"
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx17(AlertDialog6, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxs15(AlertDialogContent6, { children: [
+      /* @__PURE__ */ jsxs15(AlertDialogHeader6, { children: [
+        /* @__PURE__ */ jsx17(AlertDialogTitle6, { children: "Remover integra\xE7\xE3o?" }),
+        /* @__PURE__ */ jsxs15(AlertDialogDescription6, { children: [
+          "Esta a\xE7\xE3o vai remover a credencial",
+          accountLabel ? ` (${accountLabel})` : "",
+          " de ",
+          definition.name,
+          ". Esta a\xE7\xE3o n\xE3o pode ser desfeita."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs15(AlertDialogFooter6, { children: [
+        /* @__PURE__ */ jsx17(AlertDialogCancel6, { children: "Cancelar" }),
+        /* @__PURE__ */ jsx17(
+          AlertDialogAction6,
           {
-            variant: state === "expired" ? "destructive" : "outline",
-            size: "sm",
-            className: "text-xs",
-            onClick: (e) => {
-              e.stopPropagation();
-              onConnect(card);
+            onClick: () => {
+              onDelete?.(card);
+              setDeleteDialogOpen(false);
             },
-            children: actionLabel
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: "Remover"
           }
-        ) })
-      ]
-    }
-  );
+        )
+      ] })
+    ] }) })
+  ] });
 }
 
 // src/components/capabilities/advanced-tab.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { Info } from "lucide-react";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function AdvancedTab({ config, agentId, gagentsApiUrl }) {
-  const [editingTool, setEditingTool] = useState13(null);
-  const [showToolForm, setShowToolForm] = useState13(false);
+  const [editingTool, setEditingTool] = useState14(null);
+  const [showToolForm, setShowToolForm] = useState14(false);
   function handleEditTool(tool) {
     setEditingTool(tool);
     setShowToolForm(true);
@@ -4133,7 +4290,7 @@ function AdvancedTab({ config, agentId, gagentsApiUrl }) {
 }
 
 // src/components/capabilities/integration-wizard.tsx
-import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef2, useState as useState14 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef2, useState as useState15 } from "react";
 import {
   Dialog as Dialog6,
   DialogContent as DialogContent6,
@@ -4535,18 +4692,18 @@ function IntegrationWizard({
   existingConfigValue
 }) {
   const isReconnect = !!existingCredentialId;
-  const [currentStep, setCurrentStep] = useState14("info");
+  const [currentStep, setCurrentStep] = useState15("info");
   const currentIndex = STEPS.indexOf(currentStep);
-  const [oauthStatus, setOauthStatus] = useState14("idle");
-  const [oauthResult, setOauthResult] = useState14(null);
+  const [oauthStatus, setOauthStatus] = useState15("idle");
+  const [oauthResult, setOauthResult] = useState15(null);
   const popupRef = useRef2(null);
   const popupPollRef = useRef2(null);
-  const [apiKey, setApiKey] = useState14("");
-  const [configOptions, setConfigOptions] = useState14([]);
-  const [configLoading, setConfigLoading] = useState14(false);
-  const [selectedConfigValue, setSelectedConfigValue] = useState14("");
-  const [enableOnComplete, setEnableOnComplete] = useState14(true);
-  const [isSubmitting, setIsSubmitting] = useState14(false);
+  const [apiKey, setApiKey] = useState15("");
+  const [configOptions, setConfigOptions] = useState15([]);
+  const [configLoading, setConfigLoading] = useState15(false);
+  const [selectedConfigValue, setSelectedConfigValue] = useState15("");
+  const [enableOnComplete, setEnableOnComplete] = useState15(true);
+  const [isSubmitting, setIsSubmitting] = useState15(false);
   useEffect5(() => {
     return () => {
       if (popupPollRef.current) {
@@ -4715,7 +4872,6 @@ function IntegrationWizard({
     setIsSubmitting(true);
     try {
       onComplete();
-      onOpenChange(false);
       toast11.success(
         `${integration.name} ${isReconnect ? "reconectado" : "configurado"} com sucesso!`
       );
@@ -4883,7 +5039,7 @@ function StepIndicator({
 }
 
 // src/pages/agents-page.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import { Button as Button15 } from "@greatapps/greatauth-ui/ui";
 import { Plus as Plus4 } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -4893,7 +5049,7 @@ function AgentsPage({
   title = "Agentes AI",
   subtitle = "Gerencie seus agentes de atendimento inteligente"
 }) {
-  const [createOpen, setCreateOpen] = useState15(false);
+  const [createOpen, setCreateOpen] = useState16(false);
   return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-4 p-4 md:p-6", children: [
     /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs22("div", { children: [
@@ -4918,7 +5074,7 @@ function AgentsPage({
 }
 
 // src/pages/agent-detail-page.tsx
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 import { Badge as Badge10, Button as Button16, Skeleton as Skeleton7 } from "@greatapps/greatauth-ui/ui";
 import { EntityAvatar as EntityAvatar2 } from "@greatapps/greatauth-ui";
 import { ArrowLeft, Pencil as Pencil4 } from "lucide-react";
@@ -4930,7 +5086,7 @@ function AgentDetailPage({
   renderChatLink
 }) {
   const { data: agent, isLoading } = useAgent(config, agentId);
-  const [editOpen, setEditOpen] = useState16(false);
+  const [editOpen, setEditOpen] = useState17(false);
   if (isLoading) {
     return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-4 p-4", children: [
       /* @__PURE__ */ jsx25(Skeleton7, { className: "h-4 w-32" }),
@@ -5059,7 +5215,7 @@ function AgentCapabilitiesPage({
 }
 
 // src/pages/tools-page.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 import { Button as Button17 } from "@greatapps/greatauth-ui/ui";
 import { Plus as Plus5 } from "lucide-react";
 import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -5068,8 +5224,8 @@ function ToolsPage({
   title = "Ferramentas",
   subtitle = "Gerencie as ferramentas dispon\xEDveis para seus agentes"
 }) {
-  const [createOpen, setCreateOpen] = useState17(false);
-  const [editTool, setEditTool] = useState17(void 0);
+  const [createOpen, setCreateOpen] = useState18(false);
+  const [editTool, setEditTool] = useState18(void 0);
   return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-4 p-4 md:p-6", children: [
     /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs25("div", { children: [
@@ -5130,55 +5286,44 @@ function CredentialsPage({
 }
 
 // src/pages/integrations-management-page.tsx
-import { useMemo as useMemo8, useCallback as useCallback7, useState as useState18 } from "react";
-import {
-  Badge as Badge11,
-  Tabs as Tabs3,
-  TabsContent as TabsContent3,
-  TabsList as TabsList3,
-  TabsTrigger as TabsTrigger3
-} from "@greatapps/greatauth-ui/ui";
-import { Plug as Plug5, KeyRound, Info as Info3, Loader2 as Loader210 } from "lucide-react";
+import { useCallback as useCallback7, useState as useState19 } from "react";
+import { useQueryClient as useQueryClient7 } from "@tanstack/react-query";
+import { Plug as Plug5, Loader2 as Loader210 } from "lucide-react";
 import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
-function useCredentialAgentSummary(credentials, tools, agents) {
-  return useMemo8(() => {
-    const toolIdsWithCredentials = new Set(
-      credentials.map((c) => c.id_tool).filter(Boolean)
-    );
-    const linkedCount = credentials.filter(
-      (c) => c.id_tool && toolIdsWithCredentials.has(c.id_tool)
-    ).length;
-    return {
-      totalCredentials: credentials.length,
-      linkedToTools: linkedCount,
-      totalAgents: agents.length,
-      totalTools: tools.length
-    };
-  }, [credentials, tools, agents]);
-}
 function IntegrationsManagementPage({
   config,
   gagentsApiUrl,
   resolveWizardMeta,
   loadConfigOptions,
   onWizardComplete,
-  title = "Integra\xE7\xF5es e Credenciais",
-  subtitle = "Gerencie todas as integra\xE7\xF5es e credenciais da conta."
+  title = "Integra\xE7\xF5es",
+  subtitle = "Gerencie as integra\xE7\xF5es da conta."
 }) {
-  const { data: credentialsData, isLoading: credentialsLoading } = useToolCredentials(config);
-  const { data: agentsData } = useAgents(config);
-  const { data: toolsData } = useTools(config);
+  const queryClient = useQueryClient7();
   const { cards, isLoading: cardsLoading } = useIntegrationState(config, null);
-  const [wizardOpen, setWizardOpen] = useState18(false);
-  const [activeCard, setActiveCard] = useState18(null);
-  const credentials = credentialsData?.data || [];
-  const agents = agentsData?.data || [];
-  const tools = toolsData?.data || [];
-  const summary = useCredentialAgentSummary(credentials, tools, agents);
+  const [wizardOpen, setWizardOpen] = useState19(false);
+  const [activeCard, setActiveCard] = useState19(null);
+  const deleteCredential = useDeleteToolCredential(config);
+  const updateCredential = useUpdateToolCredential(config);
   const handleConnect = useCallback7((card) => {
     setActiveCard(card);
     setWizardOpen(true);
   }, []);
+  const handleReconnect = useCallback7((card) => {
+    setActiveCard(card);
+    setWizardOpen(true);
+  }, []);
+  const handleDisconnect = useCallback7((card) => {
+    if (!card.credentialId) return;
+    updateCredential.mutate({
+      id: card.credentialId,
+      body: { status: "inactive" }
+    });
+  }, [updateCredential]);
+  const handleDelete = useCallback7((card) => {
+    if (!card.credentialId) return;
+    deleteCredential.mutate(card.credentialId);
+  }, [deleteCredential]);
   const handleWizardClose = useCallback7((open) => {
     if (!open) {
       setActiveCard(null);
@@ -5186,10 +5331,13 @@ function IntegrationsManagementPage({
     setWizardOpen(open);
   }, []);
   const handleWizardComplete = useCallback7(() => {
+    queryClient.invalidateQueries({ queryKey: ["greatagents", "tool-credentials"] });
+    queryClient.invalidateQueries({ queryKey: ["greatagents", "tools"] });
+    queryClient.invalidateQueries({ queryKey: ["greatagents", "agent-tools"] });
     setWizardOpen(false);
     setActiveCard(null);
     onWizardComplete?.();
-  }, [onWizardComplete]);
+  }, [onWizardComplete, queryClient]);
   const wizardMeta = activeCard ? resolveWizardMeta?.(activeCard) ?? {
     capabilities: [],
     requirements: [],
@@ -5206,76 +5354,37 @@ function IntegrationsManagementPage({
       /* @__PURE__ */ jsx29("h1", { className: "text-xl font-semibold", children: title }),
       /* @__PURE__ */ jsx29("p", { className: "text-sm text-muted-foreground", children: subtitle })
     ] }) }),
-    /* @__PURE__ */ jsxs27(Tabs3, { defaultValue: "integrations", className: "w-full", children: [
-      /* @__PURE__ */ jsxs27(TabsList3, { children: [
-        /* @__PURE__ */ jsxs27(TabsTrigger3, { value: "integrations", className: "gap-2", children: [
-          /* @__PURE__ */ jsx29(Plug5, { className: "h-4 w-4" }),
-          "Integra\xE7\xF5es"
-        ] }),
-        /* @__PURE__ */ jsxs27(TabsTrigger3, { value: "credentials", className: "gap-2", children: [
-          /* @__PURE__ */ jsx29(KeyRound, { className: "h-4 w-4" }),
-          "Credenciais"
-        ] })
+    cardsLoading ? /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsx29(Loader210, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : cards.length === 0 ? /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx29(Plug5, { className: "h-10 w-10" }),
+      /* @__PURE__ */ jsx29("p", { className: "text-sm", children: "Nenhuma integra\xE7\xE3o dispon\xEDvel" })
+    ] }) : /* @__PURE__ */ jsxs27("div", { className: "space-y-6", children: [
+      connectedCards.length > 0 && /* @__PURE__ */ jsxs27("div", { children: [
+        /* @__PURE__ */ jsx29("h3", { className: "mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Contas conectadas" }),
+        /* @__PURE__ */ jsx29("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: connectedCards.map((card) => /* @__PURE__ */ jsx29(
+          IntegrationCard,
+          {
+            card,
+            onConnect: handleConnect,
+            onReconnect: handleReconnect,
+            onDisconnect: handleDisconnect,
+            onDelete: handleDelete
+          },
+          `${card.definition.slug}-cred-${card.credentialId}`
+        )) })
       ] }),
-      /* @__PURE__ */ jsx29(TabsContent3, { value: "integrations", className: "mt-4", children: cardsLoading ? /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsx29(Loader210, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) : cards.length === 0 ? /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx29(Plug5, { className: "h-10 w-10" }),
-        /* @__PURE__ */ jsx29("p", { className: "text-sm", children: "Nenhuma integra\xE7\xE3o dispon\xEDvel" })
-      ] }) : /* @__PURE__ */ jsxs27("div", { className: "space-y-6", children: [
-        connectedCards.length > 0 && /* @__PURE__ */ jsxs27("div", { children: [
-          /* @__PURE__ */ jsx29("h3", { className: "mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Contas conectadas" }),
-          /* @__PURE__ */ jsx29("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: connectedCards.map((card) => /* @__PURE__ */ jsx29(
+      otherCards.length > 0 && /* @__PURE__ */ jsxs27("div", { children: [
+        connectedCards.length > 0 && /* @__PURE__ */ jsx29("h3", { className: "mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Adicionar integra\xE7\xE3o" }),
+        /* @__PURE__ */ jsx29("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: otherCards.map((card) => {
+          const key = card.isAddNew ? `${card.definition.slug}-add-new` : card.definition.slug;
+          return /* @__PURE__ */ jsx29(
             IntegrationCard,
             {
               card,
               onConnect: handleConnect
             },
-            `${card.definition.slug}-cred-${card.credentialId}`
-          )) })
-        ] }),
-        otherCards.length > 0 && /* @__PURE__ */ jsxs27("div", { children: [
-          connectedCards.length > 0 && /* @__PURE__ */ jsx29("h3", { className: "mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Adicionar integra\xE7\xE3o" }),
-          /* @__PURE__ */ jsx29("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: otherCards.map((card) => {
-            const key = card.isAddNew ? `${card.definition.slug}-add-new` : card.definition.slug;
-            return /* @__PURE__ */ jsx29(
-              IntegrationCard,
-              {
-                card,
-                onConnect: handleConnect
-              },
-              key
-            );
-          }) })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs27(TabsContent3, { value: "credentials", className: "mt-4", children: [
-        !credentialsLoading && /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-4 rounded-lg border bg-muted/50 px-4 py-3 mb-4", children: [
-          /* @__PURE__ */ jsx29(Info3, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-          /* @__PURE__ */ jsxs27("div", { className: "flex flex-wrap items-center gap-3 text-sm", children: [
-            /* @__PURE__ */ jsxs27("span", { children: [
-              /* @__PURE__ */ jsx29(Badge11, { variant: "secondary", className: "mr-1", children: summary.totalCredentials }),
-              summary.totalCredentials === 1 ? "credencial configurada" : "credenciais configuradas"
-            ] }),
-            /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: "|" }),
-            /* @__PURE__ */ jsxs27("span", { children: [
-              /* @__PURE__ */ jsx29(Badge11, { variant: "secondary", className: "mr-1", children: summary.linkedToTools }),
-              summary.linkedToTools === 1 ? "vinculada a ferramentas" : "vinculadas a ferramentas"
-            ] }),
-            /* @__PURE__ */ jsx29("span", { className: "text-muted-foreground", children: "|" }),
-            /* @__PURE__ */ jsxs27("span", { children: [
-              /* @__PURE__ */ jsx29(Badge11, { variant: "secondary", className: "mr-1", children: summary.totalAgents }),
-              summary.totalAgents === 1 ? "agente na conta" : "agentes na conta"
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx29(
-          ToolCredentialsForm,
-          {
-            config,
-            gagentsApiUrl,
-            credentials,
-            isLoading: credentialsLoading
-          }
-        )
+            key
+          );
+        }) })
       ] })
     ] }),
     activeCard && wizardMeta && /* @__PURE__ */ jsx29(