@greatapps/greatagents-ui 0.3.12 → 0.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "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/integrations-tab.tsx

@@ -1,34 +1,36 @@
 '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 { 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";
 
 // ---------------------------------------------------------------------------
-// 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 +40,46 @@ function getCardKey(card: IntegrationCardData): string {
 export function IntegrationsTab({
   config,
   agentId,
-  onConnect,
 }: IntegrationsTabProps) {
-  const { cards, isLoading } = useIntegrationState(config, agentId);
+  const { cards, isLoading } = useIntegrationState(config, null);
+  const { data: toolsData } = useTools(config);
+  const { data: agentToolsData, isLoading: agentToolsLoading } = useAgentTools(config, agentId);
+  const addAgentTool = useAddAgentTool(config);
+  const removeAgentTool = useRemoveAgentTool(config);
+
+  const tools = toolsData?.data ?? [];
+  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(
+    (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;
+
+      if (checked) {
+        // Add agent_tool linking this agent to this tool
+        addAgentTool.mutate({
+          idAgent: agentId,
+          body: { id_tool: tool.id, enabled: true },
+        });
+      } 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 });
+        }
+      }
+    },
+    [tools, 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 +87,82 @@ 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 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;
+
+          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}
+                onCheckedChange={(checked) =>
+                  card.credentialId &&
+                  handleToggle(card.credentialId, card.definition.slug, checked)
+                }
+                aria-label={`${isLinked ? "Desativar" : "Ativar"} ${card.definition.name} para este agente`}
               />
-            ))}
-          </div>
-        </div>
-      )}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }

package/src/pages/agent-capabilities-page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useState, useCallback } from "react";
 import {
   Tabs,
   TabsList,
@@ -10,13 +9,9 @@ import {
 import { Blocks, Plug, Settings } from "lucide-react";
 
 import type { GagentsHookConfig } from "../hooks/types";
-import type { IntegrationCardData } from "../hooks/use-integrations";
-import type { WizardIntegrationMeta } from "../components/capabilities/types";
 import { CapabilitiesTab } from "../components/capabilities/capabilities-tab";
 import { IntegrationsTab } from "../components/capabilities/integrations-tab";
-import { IntegrationWizard } from "../components/capabilities/integration-wizard";
 import { AdvancedTab } from "../components/capabilities/advanced-tab";
-import type { ConfigOption } from "../components/capabilities/wizard-steps/config-step";
 
 // ---------------------------------------------------------------------------
 // Props
@@ -26,33 +21,6 @@ export interface AgentCapabilitiesPageProps {
   config: GagentsHookConfig;
   agentId: number;
   gagentsApiUrl: string;
-  /**
-   * Resolve wizard metadata for a given integration card.
-   * The consuming app provides this so the wizard gets correct
-   * capabilities, requirements, and config step flag.
-   */
-  resolveWizardMeta?: (card: IntegrationCardData) => WizardIntegrationMeta;
-  /**
-   * Callback to load config options after OAuth completes
-   * (e.g. load Google Calendar list). Forwarded to IntegrationWizard.
-   */
-  loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
-  /** Called after wizard completes successfully. */
-  onWizardComplete?: () => void;
-}
-
-// ---------------------------------------------------------------------------
-// Default wizard meta resolver
-// ---------------------------------------------------------------------------
-
-function defaultResolveWizardMeta(card: IntegrationCardData): WizardIntegrationMeta {
-  return {
-    capabilities: [
-      { label: card.definition.name, description: card.definition.description },
-    ],
-    requirements: [],
-    hasConfigStep: false,
-  };
 }
 
 // ---------------------------------------------------------------------------
@@ -63,42 +31,13 @@ export function AgentCapabilitiesPage({
   config,
   agentId,
   gagentsApiUrl,
-  resolveWizardMeta = defaultResolveWizardMeta,
-  loadConfigOptions,
-  onWizardComplete,
 }: AgentCapabilitiesPageProps) {
-  // Wizard dialog state
-  const [wizardOpen, setWizardOpen] = useState(false);
-  const [activeCard, setActiveCard] = useState<IntegrationCardData | null>(null);
-
-  const handleConnect = useCallback(
-    (card: IntegrationCardData) => {
-      setActiveCard(card);
-      setWizardOpen(true);
-    },
-    [],
-  );
-
-  const handleWizardComplete = useCallback(() => {
-    setWizardOpen(false);
-    setActiveCard(null);
-    onWizardComplete?.();
-  }, [onWizardComplete]);
-
-  const handleWizardOpenChange = useCallback((open: boolean) => {
-    setWizardOpen(open);
-    if (!open) setActiveCard(null);
-  }, []);
-
-  // Derive wizard meta from active card
-  const wizardMeta = activeCard ? resolveWizardMeta(activeCard) : null;
-
   return (
     <div className="space-y-4">
       <div>
         <h2 className="text-lg font-semibold">Capacidades e Integrações</h2>
         <p className="text-sm text-muted-foreground">
-          Configure o que este agente pode fazer e quais serviços externos ele utiliza.
+          Configure o que este agente pode fazer e quais integrações ele utiliza.
         </p>
       </div>
 
@@ -123,11 +62,7 @@ export function AgentCapabilitiesPage({
         </TabsContent>
 
         <TabsContent value="integracoes" className="mt-4">
-          <IntegrationsTab
-            config={config}
-            agentId={agentId}
-            onConnect={handleConnect}
-          />
+          <IntegrationsTab config={config} agentId={agentId} />
         </TabsContent>
 
         <TabsContent value="avancado" className="mt-4">
@@ -138,22 +73,6 @@ export function AgentCapabilitiesPage({
           />
         </TabsContent>
       </Tabs>
-
-      {/* Integration Wizard Dialog */}
-      {activeCard && wizardMeta && (
-        <IntegrationWizard
-          open={wizardOpen}
-          onOpenChange={handleWizardOpenChange}
-          integration={activeCard.definition}
-          meta={wizardMeta}
-          agentId={agentId}
-          config={config}
-          onComplete={handleWizardComplete}
-          gagentsApiUrl={gagentsApiUrl}
-          existingCredentialId={activeCard.credential?.id}
-          loadConfigOptions={loadConfigOptions}
-        />
-      )}
     </div>
   );
 }