@greatapps/greatagents-ui 0.3.13 → 0.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "description": "Shared agents UI components for Great platform",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/agents/agent-prompt-editor.tsx

@@ -63,29 +63,59 @@ function buildPreview(
   let preview = promptText;
 
   const activeObjectives = objectives.filter((o) => o.active);
-  if (activeObjectives.length > 0) {
-    preview += "\n\n[SKILLS DISPONÍVEIS]\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]));
+
+  // Separate capabilities vs integrations
+  const capabilityTools: { at: AgentTool; tool: Tool }[] = [];
+  const integrationTools: { at: AgentTool; tool: Tool }[] = [];
+  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ÍVEIS]\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) {
-        preview += `\n  Instruções: ${at.custom_instructions}`;
+  const hasContent = activeObjectives.length > 0 || capabilityTools.length > 0 || integrationTools.length > 0;
+
+  if (hasContent) {
+    preview += "\n\n[CAPACIDADES E INTEGRAÇÕES]";
+
+    // Internal capabilities
+    if (activeObjectives.length > 0 || capabilityTools.length > 0) {
+      preview += "\n\n## Capacidades Internas (GClinic)";
+
+      for (const obj of activeObjectives) {
+        preview += `\n\n### ${obj.title} (${obj.slug})`;
+        if (obj.prompt) preview += `\n${obj.prompt}`;
+      }
+
+      for (const { at, tool } of capabilityTools) {
+        preview += `\n\n### ${tool.name} (${tool.slug})`;
+        if (tool.description) preview += `\n${tool.description}`;
+        if (at.custom_instructions) preview += `\n${at.custom_instructions}`;
       }
-      preview += "\n";
     }
+
+    // External integrations
+    if (integrationTools.length > 0) {
+      preview += "\n\n## Integrações Externas";
+
+      for (const { at, tool } of integrationTools) {
+        preview += `\n\n### ${tool.name} (${tool.slug})`;
+        if (at.custom_instructions) preview += `\n${at.custom_instructions}`;
+      }
+    }
+
+    // Rules
+    preview += "\n\n## Regras";
+    preview += "\n- Sempre confirme com o usuário antes de criar ou alterar registros.";
+    preview += "\n- Nunca invente dados — sempre consulte primeiro.";
+    preview += "\n- Use EXATAMENTE os nomes de função listados acima.";
   }
 
   return preview;
@@ -277,13 +307,20 @@ export function AgentPromptEditor({ config, agent }: AgentPromptEditorProps) {
             <div className="border-t px-4 py-3">
               <pre className="max-h-96 overflow-auto whitespace-pre-wrap font-mono text-sm leading-relaxed">
                 {previewText.split("\n").map((line, i) => {
-                  const isSection =
-                    line.startsWith("[SKILLS DISPONÍVEIS]") ||
-                    line.startsWith("[TOOLS DISPONÍVEIS]");
+                  const isTopSection = line.startsWith("[CAPACIDADES E INTEGRAÇÕES]");
+                  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 (
                     <span
                       key={i}
-                      className={isSection ? "font-semibold text-muted-foreground" : ""}
+                      className={cls}
                     >
                       {line}
                       {"\n"}

package/src/components/capabilities/capabilities-tab.tsx

@@ -25,7 +25,7 @@ import {
   Skeleton,
 } from "@greatapps/greatauth-ui/ui";
 import {
-  Calendar,
+  CalendarCheck,
   Users,
   Settings,
   HeartHandshake,
@@ -55,7 +55,7 @@ function getOperationLabel(slug: string): string {
 // ---------------------------------------------------------------------------
 
 const CATEGORY_ICONS: Record<string, React.ElementType> = {
-  agenda: Calendar,
+  agenda: CalendarCheck,
   cadastros: Users,
   infraestrutura: Settings,
   relacionamentos: HeartHandshake,

package/src/components/capabilities/integration-card.tsx

@@ -1,15 +1,33 @@
 'use client';
 
+import { useState } from "react";
 import type { IntegrationCardData, IntegrationCardState } from "../../hooks/use-integrations";
-import { Badge, Button, Tooltip, TooltipContent, TooltipTrigger } from "@greatapps/greatauth-ui/ui";
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@greatapps/greatauth-ui/ui";
 import {
   CalendarSync,
   Plug,
   Settings,
   RefreshCw,
-  Users,
   Clock,
   Plus,
+  MoreVertical,
+  Unplug,
+  Trash2,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../../lib";
@@ -23,7 +41,6 @@ const ICON_MAP: Record<string, LucideIcon> = {
   Plug,
   Settings,
   RefreshCw,
-  Users,
   Clock,
   Plus,
 };
@@ -60,20 +77,6 @@ const STATE_BADGES: Record<IntegrationCardState, BadgeVariant> = {
   },
 };
 
-function getActionLabel(card: IntegrationCardData): string {
-  if (card.isAddNew) return "Conectar";
-  switch (card.state) {
-    case "available":
-      return "Conectar";
-    case "connected":
-      return "Configurar";
-    case "expired":
-      return "Reconectar";
-    default:
-      return "";
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -81,25 +84,36 @@ function getActionLabel(card: IntegrationCardData): string {
 export interface IntegrationCardProps {
   card: IntegrationCardData;
   onConnect: (card: IntegrationCardData) => void;
+  onReconnect?: (card: IntegrationCardData) => void;
+  onDisconnect?: (card: IntegrationCardData) => void;
+  onDelete?: (card: IntegrationCardData) => void;
 }
 
-export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
-  const { definition, state, sharedByAgentsCount, isAddNew, accountLabel } = card;
+export function IntegrationCard({
+  card,
+  onConnect,
+  onReconnect,
+  onDisconnect,
+  onDelete,
+}: IntegrationCardProps) {
+  const { definition, state, isAddNew, accountLabel } = card;
   const Icon = resolveIcon(definition.icon);
   const isComingSoon = state === "coming_soon";
-  const actionLabel = getActionLabel(card);
+  const isConnected = state === "connected" || state === "expired";
 
-  // "Add new" card uses a muted/outlined style
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  // "Add new" card — clean outline style with single "Conectar" button
   if (isAddNew) {
     return (
       <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 === " ") {
@@ -109,24 +123,18 @@ export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
         }}
       >
         {/* Header row */}
-        <div className="flex items-start justify-between gap-2">
+        <div className="flex items-start gap-3">
           <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/5 text-primary/60">
             <Icon className="h-5 w-5" />
           </div>
-          <Badge variant="outline" className="text-xs bg-muted text-muted-foreground">
-            Adicionar
-          </Badge>
-        </div>
-
-        {/* Name + description */}
-        <div className="space-y-1">
-          <h3 className="text-sm font-semibold leading-tight text-muted-foreground">
-            {definition.name}
-          </h3>
-          <p className="text-xs text-muted-foreground/70 leading-relaxed flex items-center gap-1">
-            <Plus className="h-3 w-3" />
-            Adicionar conta
-          </p>
+          <div className="flex-1 min-w-0 space-y-0.5">
+            <h3 className="text-sm font-semibold leading-tight text-foreground">
+              {definition.name}
+            </h3>
+            <p className="text-xs text-muted-foreground leading-relaxed">
+              Conectar nova conta
+            </p>
+          </div>
         </div>
 
         {/* Footer */}
@@ -140,92 +148,132 @@ export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
               onConnect(card);
             }}
           >
-            {actionLabel}
+            Conectar
           </Button>
         </div>
       </div>
     );
   }
 
-  // Connected / expired / available card
-  const badge = STATE_BADGES[state];
-
-  return (
-    <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 ? ` — ${accountLabel}` : ""} — ${badge.label}`}
-      aria-disabled={isComingSoon}
-      onClick={() => !isComingSoon && onConnect(card)}
-      onKeyDown={(e) => {
-        if (!isComingSoon && (e.key === "Enter" || e.key === " ")) {
-          e.preventDefault();
-          onConnect(card);
-        }
-      }}
-    >
-      {/* Header row */}
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
-          <Icon className="h-5 w-5" />
+  // Coming soon card
+  if (isComingSoon) {
+    const badge = STATE_BADGES[state];
+    return (
+      <div
+        className="group relative flex flex-col gap-3 rounded-xl border bg-card p-5 opacity-60 cursor-default"
+        aria-disabled
+      >
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <Icon className="h-5 w-5" />
+          </div>
+          <Badge variant="outline" className={cn("text-xs", badge.className)}>
+            {badge.label}
+          </Badge>
         </div>
-        <Badge variant="outline" className={cn("text-xs", badge.className)}>
-          {badge.label}
-        </Badge>
-      </div>
-
-      {/* Name + account label */}
-      <div className="space-y-1">
-        <h3 className="text-sm font-semibold leading-tight">{definition.name}</h3>
-        {accountLabel ? (
-          <p className="text-xs text-muted-foreground leading-relaxed truncate" title={accountLabel}>
-            {accountLabel}
-          </p>
-        ) : (
+        <div className="space-y-1">
+          <h3 className="text-sm font-semibold leading-tight">{definition.name}</h3>
           <p className="text-xs text-muted-foreground leading-relaxed">
             {definition.description}
           </p>
-        )}
+        </div>
       </div>
+    );
+  }
 
-      {/* Footer */}
-      <div className="mt-auto flex items-center justify-between gap-2 pt-1">
-        {sharedByAgentsCount > 0 ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="inline-flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400">
-                <Users className="h-3.5 w-3.5" />
-                Compartilhada
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>
-              Esta credencial está disponível para todos os agentes da conta
-            </TooltipContent>
-          </Tooltip>
-        ) : (
-          <span />
-        )}
+  // Connected / expired card
+  const badge = STATE_BADGES[state];
 
-        {!isComingSoon && (
-          <Button
-            variant={state === "expired" ? "destructive" : "outline"}
-            size="sm"
-            className="text-xs"
-            onClick={(e) => {
-              e.stopPropagation();
-              onConnect(card);
-            }}
-          >
-            {actionLabel}
-          </Button>
-        )}
+  return (
+    <>
+      <div
+        className="group relative flex flex-col gap-3 rounded-xl border bg-card p-5 transition-shadow hover:shadow-md"
+      >
+        {/* Header row */}
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-start gap-3 min-w-0 flex-1">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              <Icon className="h-5 w-5" />
+            </div>
+            <div className="flex-1 min-w-0 space-y-0.5">
+              <h3 className="text-sm font-semibold leading-tight">{definition.name}</h3>
+              {accountLabel && (
+                <p className="text-xs text-muted-foreground leading-relaxed truncate" title={accountLabel}>
+                  {accountLabel}
+                </p>
+              )}
+            </div>
+          </div>
+          <Badge variant="outline" className={cn("text-xs shrink-0", badge.className)}>
+            {badge.label}
+          </Badge>
+        </div>
+
+        {/* Footer with "Configurar" dropdown */}
+        <div className="mt-auto flex items-center justify-end gap-2 pt-1">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="text-xs gap-1.5"
+              >
+                <Settings className="h-3.5 w-3.5" />
+                Configurar
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onClick={() => onReconnect?.(card)}
+                className="gap-2"
+              >
+                <RefreshCw className="h-4 w-4" />
+                Reconectar
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => onDisconnect?.(card)}
+                className="gap-2"
+              >
+                <Unplug className="h-4 w-4" />
+                Desconectar
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setDeleteDialogOpen(true)}
+                className="gap-2 text-destructive focus:text-destructive"
+              >
+                <Trash2 className="h-4 w-4" />
+                Remover
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </div>
-    </div>
+
+      {/* Delete confirmation dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remover integração?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Esta ação vai remover a credencial
+              {accountLabel ? ` (${accountLabel})` : ""} de {definition.name}.
+              Esta ação não pode ser desfeita.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                onDelete?.(card);
+                setDeleteDialogOpen(false);
+              }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Remover
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }

package/src/components/capabilities/integration-wizard.tsx

@@ -347,10 +347,13 @@ export function IntegrationWizard({
       //
       // For OAuth, the credential was already created by the backend callback.
       // The parent component handles any additional linking (agent_tool creation)
-      // via the onComplete callback.
+      // and query invalidation via the onComplete callback.
+      //
+      // Call onComplete BEFORE closing the dialog so query invalidation
+      // triggers while the dialog is still mounted (avoids stale UI).
 
       onComplete();
-      onOpenChange(false);
+
       toast.success(
         `${integration.name} ${isReconnect ? "reconectado" : "configurado"} com sucesso!`,
       );

package/src/components/capabilities/integrations-tab.tsx

@@ -4,12 +4,14 @@ import { useCallback } from "react";
 import type { GagentsHookConfig } from "../../hooks/types";
 import { useIntegrationState } from "../../hooks/use-integrations";
 import { useAgentTools, useAddAgentTool, useRemoveAgentTool } from "../../hooks/use-agent-tools";
-import { useTools } from "../../hooks/use-tools";
+import { useCreateTool, useTools } from "../../hooks/use-tools";
 import { Switch, Tooltip, TooltipContent, TooltipTrigger } from "@greatapps/greatauth-ui/ui";
 import { Plug, Loader2 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { CalendarSync } from "lucide-react";
 import { cn } from "../../lib";
+import type { IntegrationCardData } from "../../hooks/use-integrations";
+import type { Tool } from "../../types";
 
 // ---------------------------------------------------------------------------
 // Icon mapping
@@ -24,6 +26,14 @@ function resolveIcon(name: string): LucideIcon {
   return ICON_MAP[name] ?? Plug;
 }
 
+// ---------------------------------------------------------------------------
+// Integration custom_instructions per slug
+// ---------------------------------------------------------------------------
+
+const INTEGRATION_INSTRUCTIONS: Record<string, string> = {
+  "google-calendar": `Você tem acesso ao Google Calendar através da integração google-calendar.\nFunções disponíveis:\n- google_calendar_setup_oauth: Configurar conexão OAuth\n- google_calendar_check_status: Verificar status da conexão\n- google_calendar_list_events: Listar eventos do calendário\n- google_calendar_create_event: Criar novo evento\n- google_calendar_update_event: Atualizar evento existente\n- google_calendar_delete_event: Cancelar/remover evento\n\nUse EXATAMENTE os nomes de função listados acima.`,
+};
+
 // ---------------------------------------------------------------------------
 // Props
 // ---------------------------------------------------------------------------
@@ -41,14 +51,15 @@ export function IntegrationsTab({
   config,
   agentId,
 }: IntegrationsTabProps) {
-  const { cards, isLoading } = useIntegrationState(config, null);
-  const { data: toolsData } = useTools(config);
+  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 tools = toolsData?.data ?? [];
   const agentTools = agentToolsData?.data ?? [];
+  const allTools = toolsData?.data ?? [];
 
   // Only show connected credentials (account-level)
   const connectedCards = cards.filter(
@@ -56,26 +67,58 @@ export function IntegrationsTab({
   );
 
   const handleToggle = useCallback(
-    (credentialId: number, toolSlug: string, checked: boolean) => {
-      // Find the tool record matching this integration slug
-      const tool = tools.find((t) => t.slug === toolSlug);
-      if (!tool) return;
-
+    async (card: IntegrationCardData, checked: boolean) => {
       if (checked) {
-        // Add agent_tool linking this agent to this tool
+        let toolId = card.tool?.id;
+
+        // If no tool record exists for this integration, create one on-the-fly
+        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 as Tool | undefined)?.id) ?? undefined;
+              if (!toolId) {
+                console.error("[IntegrationsTab] Failed to create tool — no ID returned");
+                return;
+              }
+            } catch (err) {
+              console.error("[IntegrationsTab] Error creating tool:", err);
+              return;
+            }
+          }
+        }
+
+        // Create agent_tool with custom_instructions for the integration
+        const customInstructions = INTEGRATION_INSTRUCTIONS[card.definition.slug];
         addAgentTool.mutate({
           idAgent: agentId,
-          body: { id_tool: tool.id, enabled: true },
+          body: {
+            id_tool: toolId,
+            enabled: true,
+            ...(customInstructions ? { custom_instructions: customInstructions } : {}),
+          },
         });
       } else {
         // Find the agent_tool to remove
-        const agentTool = agentTools.find((at) => at.id_tool === tool.id);
-        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 });
+          }
         }
       }
     },
-    [tools, agentTools, agentId, addAgentTool, removeAgentTool],
+    [agentTools, allTools, agentId, addAgentTool, removeAgentTool, createTool],
   );
 
   // Loading state
@@ -110,11 +153,8 @@ export function IntegrationsTab({
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
         {connectedCards.map((card) => {
           const Icon = resolveIcon(card.definition.icon);
-          const tool = tools.find((t) => t.slug === card.definition.slug);
-          const isLinked = tool
-            ? agentTools.some((at) => at.id_tool === tool.id)
-            : false;
-          const isMutating = addAgentTool.isPending || removeAgentTool.isPending;
+          const isLinked = card.linkedToAgent;
+          const isMutating = addAgentTool.isPending || removeAgentTool.isPending || createTool.isPending;
 
           return (
             <div
@@ -149,14 +189,11 @@ export function IntegrationsTab({
                 )}
               </div>
 
-              {/* Toggle */}
+              {/* Toggle — no longer blocked by missing tool record */}
               <Switch
                 checked={isLinked}
                 disabled={isMutating}
-                onCheckedChange={(checked) =>
-                  card.credentialId &&
-                  handleToggle(card.credentialId, card.definition.slug, checked)
-                }
+                onCheckedChange={(checked) => handleToggle(card, checked)}
                 aria-label={`${isLinked ? "Desativar" : "Ativar"} ${card.definition.name} para este agente`}
               />
             </div>