@greatapps/greatagents-ui 0.3.12 → 0.3.14

package/package.json

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

package/src/components/agents/agent-tabs.tsx

@@ -1,15 +1,10 @@
-import { useState, useCallback } from "react";
 import type { Agent } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
-import type { IntegrationCardData } from "../../hooks/use-integrations";
-import type { WizardIntegrationMeta } from "../capabilities/types";
-import type { ConfigOption } from "../capabilities/wizard-steps/config-step";
 import { AgentObjectivesList } from "./agent-objectives-list";
 import { AgentPromptEditor } from "./agent-prompt-editor";
 import { AgentConversationsPanel } from "../conversations/agent-conversations-panel";
 import { CapabilitiesTab } from "../capabilities/capabilities-tab";
 import { IntegrationsTab } from "../capabilities/integrations-tab";
-import { IntegrationWizard } from "../capabilities/integration-wizard";
 import {
   Tabs,
   TabsList,
@@ -22,119 +17,61 @@ interface AgentTabsProps {
   agent: Agent;
   config: GagentsHookConfig;
   renderChatLink?: (inboxId: number) => React.ReactNode;
-  gagentsApiUrl?: string;
-  resolveWizardMeta?: (card: IntegrationCardData) => WizardIntegrationMeta;
-  loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
-  onWizardComplete?: () => void;
 }
 
 export function AgentTabs({
   agent,
   config,
   renderChatLink,
-  gagentsApiUrl,
-  resolveWizardMeta,
-  loadConfigOptions,
-  onWizardComplete,
 }: AgentTabsProps) {
-  const apiUrl = gagentsApiUrl || config.baseUrl;
-
-  // Wizard state for Integrações tab
-  const [wizardOpen, setWizardOpen] = useState(false);
-  const [activeCard, setActiveCard] = useState<IntegrationCardData | null>(null);
-
-  const handleConnect = useCallback((card: IntegrationCardData) => {
-    setActiveCard(card);
-    setWizardOpen(true);
-  }, []);
-
-  const handleWizardClose = useCallback((open: boolean) => {
-    if (!open) {
-      setActiveCard(null);
-    }
-    setWizardOpen(open);
-  }, []);
-
-  const handleWizardComplete = useCallback(() => {
-    setWizardOpen(false);
-    setActiveCard(null);
-    onWizardComplete?.();
-  }, [onWizardComplete]);
-
-  // Resolve wizard meta with sensible defaults
-  const wizardMeta: WizardIntegrationMeta | null = activeCard
-    ? (resolveWizardMeta?.(activeCard) ?? {
-        capabilities: [],
-        requirements: [],
-        hasConfigStep: false,
-      })
-    : null;
-
   return (
-    <>
-      <Tabs defaultValue="prompt">
-        <TabsList>
-          <TabsTrigger value="prompt" className="flex items-center gap-1.5">
-            <FileText aria-hidden="true" className="h-3.5 w-3.5" />
-            Prompt
-          </TabsTrigger>
-          <TabsTrigger value="objetivos" className="flex items-center gap-1.5">
-            <Target aria-hidden="true" className="h-3.5 w-3.5" />
-            Objetivos
-          </TabsTrigger>
-          <TabsTrigger value="capacidades" className="flex items-center gap-1.5">
-            <Blocks aria-hidden="true" className="h-3.5 w-3.5" />
-            Capacidades
-          </TabsTrigger>
-          <TabsTrigger value="integracoes" className="flex items-center gap-1.5">
-            <Plug aria-hidden="true" className="h-3.5 w-3.5" />
-            Integrações
-          </TabsTrigger>
-          <TabsTrigger value="conversas" className="flex items-center gap-1.5">
-            <MessageCircle aria-hidden="true" className="h-3.5 w-3.5" />
-            Conversas
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="prompt" className="mt-4">
-          <AgentPromptEditor agent={agent} config={config} />
-        </TabsContent>
+    <Tabs defaultValue="prompt">
+      <TabsList>
+        <TabsTrigger value="prompt" className="flex items-center gap-1.5">
+          <FileText aria-hidden="true" className="h-3.5 w-3.5" />
+          Prompt
+        </TabsTrigger>
+        <TabsTrigger value="objetivos" className="flex items-center gap-1.5">
+          <Target aria-hidden="true" className="h-3.5 w-3.5" />
+          Objetivos
+        </TabsTrigger>
+        <TabsTrigger value="capacidades" className="flex items-center gap-1.5">
+          <Blocks aria-hidden="true" className="h-3.5 w-3.5" />
+          Capacidades
+        </TabsTrigger>
+        <TabsTrigger value="integracoes" className="flex items-center gap-1.5">
+          <Plug aria-hidden="true" className="h-3.5 w-3.5" />
+          Integrações
+        </TabsTrigger>
+        <TabsTrigger value="conversas" className="flex items-center gap-1.5">
+          <MessageCircle aria-hidden="true" className="h-3.5 w-3.5" />
+          Conversas
+        </TabsTrigger>
+      </TabsList>
 
-        <TabsContent value="objetivos" className="mt-4">
-          <AgentObjectivesList agent={agent} config={config} />
-        </TabsContent>
+      <TabsContent value="prompt" className="mt-4">
+        <AgentPromptEditor agent={agent} config={config} />
+      </TabsContent>
 
-        <TabsContent value="capacidades" className="mt-4">
-          <CapabilitiesTab config={config} agentId={agent.id} />
-        </TabsContent>
+      <TabsContent value="objetivos" className="mt-4">
+        <AgentObjectivesList agent={agent} config={config} />
+      </TabsContent>
 
-        <TabsContent value="integracoes" className="mt-4">
-          <IntegrationsTab config={config} agentId={agent.id} onConnect={handleConnect} />
-        </TabsContent>
+      <TabsContent value="capacidades" className="mt-4">
+        <CapabilitiesTab config={config} agentId={agent.id} />
+      </TabsContent>
 
-        <TabsContent value="conversas" className="mt-4">
-          <AgentConversationsPanel
-            agent={agent}
-            config={config}
-            renderChatLink={renderChatLink}
-          />
-        </TabsContent>
-      </Tabs>
+      <TabsContent value="integracoes" className="mt-4">
+        <IntegrationsTab config={config} agentId={agent.id} />
+      </TabsContent>
 
-      {activeCard && wizardMeta && (
-        <IntegrationWizard
-          open={wizardOpen}
-          onOpenChange={handleWizardClose}
-          integration={activeCard.definition}
-          meta={wizardMeta}
-          agentId={agent.id}
+      <TabsContent value="conversas" className="mt-4">
+        <AgentConversationsPanel
+          agent={agent}
           config={config}
-          gagentsApiUrl={apiUrl}
-          existingCredentialId={activeCard.credentialId}
-          onComplete={handleWizardComplete}
-          loadConfigOptions={loadConfigOptions}
+          renderChatLink={renderChatLink}
         />
-      )}
-    </>
+      </TabsContent>
+    </Tabs>
   );
 }

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,13 +1,12 @@
 'use client';
 
 import type { IntegrationCardData, IntegrationCardState } from "../../hooks/use-integrations";
-import { Badge, Button, Tooltip, TooltipContent, TooltipTrigger } from "@greatapps/greatauth-ui/ui";
+import { Badge, Button } from "@greatapps/greatauth-ui/ui";
 import {
   CalendarSync,
   Plug,
   Settings,
   RefreshCw,
-  Users,
   Clock,
   Plus,
 } from "lucide-react";
@@ -23,7 +22,6 @@ const ICON_MAP: Record<string, LucideIcon> = {
   Plug,
   Settings,
   RefreshCw,
-  Users,
   Clock,
   Plus,
 };
@@ -84,7 +82,7 @@ export interface IntegrationCardProps {
 }
 
 export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
-  const { definition, state, sharedByAgentsCount, isAddNew, accountLabel } = card;
+  const { definition, state, isAddNew, accountLabel } = card;
   const Icon = resolveIcon(definition.icon);
   const isComingSoon = state === "coming_soon";
   const actionLabel = getActionLabel(card);
@@ -195,23 +193,7 @@ export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
       </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 />
-        )}
-
+      <div className="mt-auto flex items-center justify-end gap-2 pt-1">
         {!isComingSoon && (
           <Button
             variant={state === "expired" ? "destructive" : "outline"}

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

@@ -1,34 +1,35 @@
 'use client';
 
+import { useCallback } from "react";
 import type { GagentsHookConfig } from "../../hooks/types";
-import { useIntegrationState, type IntegrationCardData } from "../../hooks/use-integrations";
-import { IntegrationCard } from "./integration-card";
+import { useIntegrationState } from "../../hooks/use-integrations";
+import { useAgentTools, useAddAgentTool, useRemoveAgentTool } from "../../hooks/use-agent-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";
 
 // ---------------------------------------------------------------------------
-// Props
+// Icon mapping
 // ---------------------------------------------------------------------------
 
-export interface IntegrationsTabProps {
-  config: GagentsHookConfig;
-  agentId: number | null;
-  /** Called when user clicks a card action (connect / configure / reconnect).
-   *  The consuming app wires this to the wizard (Story 18.9). */
-  onConnect: (card: IntegrationCardData) => void;
+const ICON_MAP: Record<string, LucideIcon> = {
+  CalendarSync,
+  Plug,
+};
+
+function resolveIcon(name: string): LucideIcon {
+  return ICON_MAP[name] ?? Plug;
 }
 
 // ---------------------------------------------------------------------------
-// Helpers
+// Props
 // ---------------------------------------------------------------------------
 
-function getCardKey(card: IntegrationCardData): string {
-  if (card.credentialId) {
-    return `${card.definition.slug}-cred-${card.credentialId}`;
-  }
-  if (card.isAddNew) {
-    return `${card.definition.slug}-add-new`;
-  }
-  return card.definition.slug;
+export interface IntegrationsTabProps {
+  config: GagentsHookConfig;
+  agentId: number;
 }
 
 // ---------------------------------------------------------------------------
@@ -38,12 +39,40 @@ function getCardKey(card: IntegrationCardData): string {
 export function IntegrationsTab({
   config,
   agentId,
-  onConnect,
 }: IntegrationsTabProps) {
   const { cards, isLoading } = useIntegrationState(config, agentId);
+  const { data: agentToolsData, isLoading: agentToolsLoading } = useAgentTools(config, agentId);
+  const addAgentTool = useAddAgentTool(config);
+  const removeAgentTool = useRemoveAgentTool(config);
+
+  const agentTools = agentToolsData?.data ?? [];
+
+  // Only show connected credentials (account-level)
+  const connectedCards = cards.filter(
+    (c) => !c.isAddNew && (c.state === "connected" || c.state === "expired"),
+  );
+
+  const handleToggle = useCallback(
+    (toolId: number, checked: boolean) => {
+      if (checked) {
+        // Add agent_tool linking this agent to this tool
+        addAgentTool.mutate({
+          idAgent: agentId,
+          body: { id_tool: toolId, enabled: true },
+        });
+      } else {
+        // Find the agent_tool to remove
+        const agentTool = agentTools.find((at) => at.id_tool === toolId);
+        if (agentTool) {
+          removeAgentTool.mutate({ idAgent: agentId, id: agentTool.id });
+        }
+      }
+    },
+    [agentTools, agentId, addAgentTool, removeAgentTool],
+  );
 
   // Loading state
-  if (isLoading) {
+  if (isLoading || agentToolsLoading) {
     return (
       <div className="flex items-center justify-center py-16">
         <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
@@ -51,63 +80,78 @@ export function IntegrationsTab({
     );
   }
 
-  // Empty state
-  if (cards.length === 0) {
+  // Empty state — no integrations connected at account level
+  if (connectedCards.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground">
         <Plug className="h-10 w-10" />
-        <p className="text-sm">Nenhuma integração disponível</p>
+        <p className="text-sm font-medium">Nenhuma integração conectada</p>
+        <p className="text-xs text-center max-w-sm">
+          Conecte integrações na página de Integrações da conta para que possam
+          ser ativadas neste agente.
+        </p>
       </div>
     );
   }
 
-  // Split into connected/expired cards and add-new/coming-soon cards
-  const connectedCards = cards.filter(
-    (c) => !c.isAddNew && (c.state === "connected" || c.state === "expired"),
-  );
-  const otherCards = cards.filter(
-    (c) => c.isAddNew || c.state === "coming_soon",
-  );
-
   return (
-    <div className="space-y-6">
-      {/* Connected accounts */}
-      {connectedCards.length > 0 && (
-        <div>
-          <h3 className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            Contas conectadas
-          </h3>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {connectedCards.map((card) => (
-              <IntegrationCard
-                key={getCardKey(card)}
-                card={card}
-                onConnect={onConnect}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Add new / coming soon */}
-      {otherCards.length > 0 && (
-        <div>
-          {connectedCards.length > 0 && (
-            <h3 className="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Adicionar integração
-            </h3>
-          )}
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {otherCards.map((card) => (
-              <IntegrationCard
-                key={getCardKey(card)}
-                card={card}
-                onConnect={onConnect}
+    <div className="space-y-4">
+      <p className="text-xs text-muted-foreground">
+        Ative ou desative as integrações conectadas na conta para este agente.
+      </p>
+
+      <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 isLinked = card.linkedToAgent;
+          const isMutating = addAgentTool.isPending || removeAgentTool.isPending;
+
+          return (
+            <div
+              key={`${card.definition.slug}-cred-${card.credentialId}`}
+              className={cn(
+                "flex items-center gap-3 rounded-xl border bg-card p-4 transition-shadow",
+                isLinked ? "border-primary/30 shadow-sm" : "opacity-75",
+              )}
+            >
+              {/* Icon */}
+              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                <Icon className="h-4.5 w-4.5" />
+              </div>
+
+              {/* Info */}
+              <div className="flex-1 min-w-0">
+                <h4 className="text-sm font-medium leading-tight truncate">
+                  {card.definition.name}
+                </h4>
+                {card.accountLabel && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <p className="text-xs text-muted-foreground truncate" title={card.accountLabel}>
+                        {card.accountLabel}
+                      </p>
+                    </TooltipTrigger>
+                    <TooltipContent>{card.accountLabel}</TooltipContent>
+                  </Tooltip>
+                )}
+                {card.state === "expired" && (
+                  <p className="text-xs text-amber-600 dark:text-amber-400">Expirado</p>
+                )}
+              </div>
+
+              {/* Toggle */}
+              <Switch
+                checked={isLinked}
+                disabled={isMutating || !card.tool}
+                onCheckedChange={(checked) =>
+                  card.tool && handleToggle(card.tool.id, checked)
+                }
+                aria-label={`${isLinked ? "Desativar" : "Ativar"} ${card.definition.name} para este agente`}
               />
-            ))}
-          </div>
-        </div>
-      )}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }