@greatapps/greatagents-ui 0.3.11 → 0.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.3.11",
+  "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,45 +1,29 @@
 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 { AgentCapabilitiesPage } from "../../pages/agent-capabilities-page";
+import { CapabilitiesTab } from "../capabilities/capabilities-tab";
+import { IntegrationsTab } from "../capabilities/integrations-tab";
 import {
   Tabs,
   TabsList,
   TabsTrigger,
   TabsContent,
 } from "@greatapps/greatauth-ui/ui";
-import { Target, FileText, MessageCircle, Blocks } from "lucide-react";
+import { Target, FileText, MessageCircle, Blocks, Plug } from "lucide-react";
 
 interface AgentTabsProps {
   agent: Agent;
   config: GagentsHookConfig;
   renderChatLink?: (inboxId: number) => React.ReactNode;
-  /** Required for the Capacidades tab — gagents API URL for OAuth flows and advanced features. Falls back to config.baseUrl. */
-  gagentsApiUrl?: string;
-  /** Resolve wizard metadata for a given integration card. */
-  resolveWizardMeta?: (card: IntegrationCardData) => WizardIntegrationMeta;
-  /** Callback to load config options after OAuth completes. */
-  loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
-  /** Called after wizard completes successfully. */
-  onWizardComplete?: () => void;
 }
 
 export function AgentTabs({
   agent,
   config,
   renderChatLink,
-  gagentsApiUrl,
-  resolveWizardMeta,
-  loadConfigOptions,
-  onWizardComplete,
 }: AgentTabsProps) {
-  const apiUrl = gagentsApiUrl || config.baseUrl;
-
   return (
     <Tabs defaultValue="prompt">
       <TabsList>
@@ -55,6 +39,10 @@ export function AgentTabs({
           <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
@@ -70,14 +58,11 @@ export function AgentTabs({
       </TabsContent>
 
       <TabsContent value="capacidades" className="mt-4">
-        <AgentCapabilitiesPage
-          config={config}
-          agentId={agent.id}
-          gagentsApiUrl={apiUrl}
-          resolveWizardMeta={resolveWizardMeta}
-          loadConfigOptions={loadConfigOptions}
-          onWizardComplete={onWizardComplete}
-        />
+        <CapabilitiesTab config={config} agentId={agent.id} />
+      </TabsContent>
+
+      <TabsContent value="integracoes" className="mt-4">
+        <IntegrationsTab config={config} agentId={agent.id} />
       </TabsContent>
 
       <TabsContent value="conversas" className="mt-4">

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>
   );
 }

package/src/pages/integrations-management-page.tsx

@@ -1,9 +1,13 @@
 'use client';
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useCallback } from "react";
 import { useToolCredentials, useAgents, useTools } from "../hooks";
 import { ToolCredentialsForm } from "../components/tools/tool-credentials-form";
-import { IntegrationsTab } from "../components/capabilities/integrations-tab";
+import { IntegrationCard } from "../components/capabilities/integration-card";
+import { IntegrationWizard } from "../components/capabilities/integration-wizard";
+import { useIntegrationState, type IntegrationCardData } from "../hooks/use-integrations";
+import type { WizardIntegrationMeta } from "../components/capabilities/types";
+import type { ConfigOption } from "../components/capabilities/wizard-steps/config-step";
 import {
   Badge,
   Button,
@@ -12,28 +16,25 @@ import {
   TabsList,
   TabsTrigger,
 } from "@greatapps/greatauth-ui/ui";
-import { Plus, Plug, KeyRound, Info } from "lucide-react";
+import { Plus, Plug, KeyRound, Info, Loader2 } from "lucide-react";
 import type { GagentsHookConfig } from "../hooks/types";
-import type { IntegrationCardData } from "../hooks/use-integrations";
 import type { Agent, Tool, ToolCredential } from "../types";
 
 export interface IntegrationsManagementPageProps {
   config: GagentsHookConfig;
   gagentsApiUrl: string;
-  /** Called when user clicks connect/reconnect on an integration card. */
-  onConnect?: (card: IntegrationCardData) => void;
+  /** Resolve wizard metadata for a given integration card. */
+  resolveWizardMeta?: (card: IntegrationCardData) => WizardIntegrationMeta;
+  /** Load config options after OAuth completes (e.g. list of calendars). */
+  loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
+  /** Called after wizard completes successfully. */
+  onWizardComplete?: () => void;
   title?: string;
   subtitle?: string;
 }
 
 /**
- * Build a map of credential id → list of agent names that use it.
- * Cross-references tools (which link credential via id) with agents
- * that have agent_tools referencing those tools.
- *
- * Since we don't have an account-level agent_tools endpoint, we
- * approximate by checking which tools are linked to credentials and
- * showing credential-level stats.
+ * Build a map of credential id -> list of agent names that use it.
  */
 function useCredentialAgentSummary(
   credentials: ToolCredential[],
@@ -41,12 +42,10 @@ function useCredentialAgentSummary(
   agents: Agent[],
 ) {
   return useMemo(() => {
-    // Build a set of tool IDs that have credentials
     const toolIdsWithCredentials = new Set(
       credentials.map((c) => c.id_tool).filter(Boolean),
     );
 
-    // Count how many credentials are linked to tools that agents could use
     const linkedCount = credentials.filter(
       (c) => c.id_tool && toolIdsWithCredentials.has(c.id_tool),
     ).length;
@@ -63,7 +62,9 @@ function useCredentialAgentSummary(
 export function IntegrationsManagementPage({
   config,
   gagentsApiUrl,
-  onConnect,
+  resolveWizardMeta,
+  loadConfigOptions,
+  onWizardComplete,
   title = "Integrações e Credenciais",
   subtitle = "Gerencie todas as integrações e credenciais da conta.",
 }: IntegrationsManagementPageProps) {
@@ -73,12 +74,54 @@ export function IntegrationsManagementPage({
   const { data: toolsData } = useTools(config);
   const [createOpen, setCreateOpen] = useState(false);
 
+  // Integration cards state (account-level, agentId=null)
+  const { cards, isLoading: cardsLoading } = useIntegrationState(config, null);
+
+  // Wizard state
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [activeCard, setActiveCard] = useState<IntegrationCardData | null>(null);
+
   const credentials = credentialsData?.data || [];
   const agents: Agent[] = agentsData?.data || [];
   const tools: Tool[] = toolsData?.data || [];
 
   const summary = useCredentialAgentSummary(credentials, tools, agents);
 
+  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;
+
+  // Split integration 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="flex flex-col gap-4 p-4 md:p-6">
       <div className="flex items-center justify-between">
@@ -101,11 +144,61 @@ export function IntegrationsManagementPage({
         </TabsList>
 
         <TabsContent value="integrations" className="mt-4">
-          <IntegrationsTab
-            config={config}
-            agentId={null}
-            onConnect={onConnect ?? (() => {})}
-          />
+          {cardsLoading ? (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : cards.length === 0 ? (
+            <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>
+            </div>
+          ) : (
+            <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={`${card.definition.slug}-cred-${card.credentialId}`}
+                        card={card}
+                        onConnect={handleConnect}
+                      />
+                    ))}
+                  </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) => {
+                      const key = card.isAddNew
+                        ? `${card.definition.slug}-add-new`
+                        : card.definition.slug;
+                      return (
+                        <IntegrationCard
+                          key={key}
+                          card={card}
+                          onConnect={handleConnect}
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
         </TabsContent>
 
         <TabsContent value="credentials" className="mt-4">
@@ -161,6 +254,22 @@ export function IntegrationsManagementPage({
           />
         </TabsContent>
       </Tabs>
+
+      {/* Integration Wizard */}
+      {activeCard && wizardMeta && (
+        <IntegrationWizard
+          open={wizardOpen}
+          onOpenChange={handleWizardClose}
+          integration={activeCard.definition}
+          meta={wizardMeta}
+          agentId={0}
+          config={config}
+          gagentsApiUrl={gagentsApiUrl}
+          existingCredentialId={activeCard.credentialId}
+          onComplete={handleWizardComplete}
+          loadConfigOptions={loadConfigOptions}
+        />
+      )}
     </div>
   );
 }