@greatapps/greatagents-ui 0.3.9 → 0.3.11

package/package.json

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

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

@@ -2,9 +2,7 @@
 
 import { useState } from "react";
 import type { GagentsHookConfig } from "../../hooks/types";
-import { useToolCredentials } from "../../hooks";
 import { ToolsTable } from "../tools/tools-table";
-import { ToolCredentialsForm } from "../tools/tool-credentials-form";
 import { ToolFormDialog } from "../tools/tool-form-dialog";
 import type { Tool } from "../../types";
 import { Info } from "lucide-react";
@@ -24,10 +22,6 @@ export interface AdvancedTabProps {
 // ---------------------------------------------------------------------------
 
 export function AdvancedTab({ config, agentId, gagentsApiUrl }: AdvancedTabProps) {
-  const { data: credentialsData, isLoading: isLoadingCredentials } =
-    useToolCredentials(config);
-  const credentials = credentialsData?.data ?? [];
-
   const [editingTool, setEditingTool] = useState<Tool | null>(null);
   const [showToolForm, setShowToolForm] = useState(false);
 
@@ -49,7 +43,7 @@ export function AdvancedTab({ config, agentId, gagentsApiUrl }: AdvancedTabProps
         <p className="text-sm text-blue-800 dark:text-blue-300">
           Use as abas <strong>Capacidades</strong> e <strong>Integrações</strong> para
           configuração simplificada. Esta aba oferece controlo manual avançado sobre
-          ferramentas e credenciais.
+          ferramentas. As credenciais são geridas dentro de cada ferramenta.
         </p>
       </div>
 
@@ -59,17 +53,6 @@ export function AdvancedTab({ config, agentId, gagentsApiUrl }: AdvancedTabProps
         <ToolsTable onEdit={handleEditTool} config={config} />
       </section>
 
-      {/* Credenciais section */}
-      <section className="space-y-3">
-        <h3 className="text-sm font-medium">Credenciais</h3>
-        <ToolCredentialsForm
-          credentials={credentials}
-          isLoading={isLoadingCredentials}
-          config={config}
-          gagentsApiUrl={gagentsApiUrl}
-        />
-      </section>
-
       {/* Tool edit dialog */}
       <ToolFormDialog
         open={showToolForm}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { useState, useCallback, useEffect, useMemo } from "react";
 import type { GagentsHookConfig } from "../../hooks/types";
 import {
   useCapabilities,
@@ -31,6 +31,7 @@ import {
   HeartHandshake,
   Package,
   ChevronDown,
+  Loader2,
 } from "lucide-react";
 import { toast } from "sonner";
 
@@ -129,7 +130,6 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
   const [localState, setLocalState] = useState<CapabilityState>(new Map());
   const [serverState, setServerState] = useState<CapabilityState>(new Map());
   const [initialized, setInitialized] = useState(false);
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Sync server data into local state on first load / refetch
   useEffect(() => {
@@ -151,41 +151,12 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
     [localState, serverState, initialized],
   );
 
-  // ------ Debounced save ------
-  const scheduleSave = useCallback(
-    (nextState: CapabilityState) => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => {
-        const payload = stateToPayload(nextState);
-        updateMutation.mutate(
-          { agentId, payload },
-          {
-            onSuccess: () => {
-              setServerState(cloneState(nextState));
-              toast.success("Capacidades salvas");
-            },
-            onError: () => {
-              // Rollback to server state
-              setLocalState(cloneState(serverState));
-              toast.error("Erro ao salvar capacidades");
-            },
-          },
-        );
-      }, 500);
-    },
-    [agentId, updateMutation, serverState],
-  );
-
   // ------ State mutation helpers ------
   const updateState = useCallback(
     (updater: (prev: CapabilityState) => CapabilityState) => {
-      setLocalState((prev) => {
-        const next = updater(prev);
-        scheduleSave(next);
-        return next;
-      });
+      setLocalState((prev) => updater(prev));
     },
-    [scheduleSave],
+    [],
   );
 
   const toggleModule = useCallback(
@@ -242,12 +213,10 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
   }, [updateState]);
 
   const discard = useCallback(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
     setLocalState(cloneState(serverState));
   }, [serverState]);
 
   const saveNow = useCallback(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
     const payload = stateToPayload(localState);
     updateMutation.mutate(
       { agentId, payload },
@@ -368,20 +337,15 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
 
       {/* Save bar */}
       {hasChanges && (
-        <div className="sticky bottom-0 bg-background border-t py-3 px-4 -mx-4 flex items-center justify-between">
-          <span className="text-sm text-muted-foreground">
-            Você tem alterações não salvas.
-          </span>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={discard}>
+        <div className="sticky bottom-0 z-10 flex items-center justify-between gap-2 rounded-lg border bg-background p-3 shadow-sm">
+          <p className="text-sm text-muted-foreground">Você tem alterações não salvas.</p>
+          <div className="flex gap-2">
+            <Button variant="ghost" size="sm" onClick={discard} disabled={updateMutation.isPending}>
               Descartar
             </Button>
-            <Button
-              size="sm"
-              onClick={saveNow}
-              disabled={updateMutation.isPending}
-            >
-              {updateMutation.isPending ? "Salvando..." : "Salvar"}
+            <Button size="sm" onClick={saveNow} disabled={updateMutation.isPending}>
+              {updateMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Salvar
             </Button>
           </div>
         </div>

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

@@ -9,6 +9,7 @@ import {
   RefreshCw,
   Users,
   Clock,
+  Plus,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../../lib";
@@ -24,6 +25,7 @@ const ICON_MAP: Record<string, LucideIcon> = {
   RefreshCw,
   Users,
   Clock,
+  Plus,
 };
 
 function resolveIcon(name: string): LucideIcon {
@@ -58,8 +60,9 @@ const STATE_BADGES: Record<IntegrationCardState, BadgeVariant> = {
   },
 };
 
-function getActionLabel(state: IntegrationCardState): string {
-  switch (state) {
+function getActionLabel(card: IntegrationCardData): string {
+  if (card.isAddNew) return "Conectar";
+  switch (card.state) {
     case "available":
       return "Conectar";
     case "connected":
@@ -81,11 +84,71 @@ export interface IntegrationCardProps {
 }
 
 export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
-  const { definition, state, sharedByAgentsCount } = card;
+  const { definition, state, sharedByAgentsCount, isAddNew, accountLabel } = card;
   const Icon = resolveIcon(definition.icon);
-  const badge = STATE_BADGES[state];
-  const actionLabel = getActionLabel(state);
   const isComingSoon = state === "coming_soon";
+  const actionLabel = getActionLabel(card);
+
+  // "Add new" card uses a muted/outlined style
+  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",
+        )}
+        role="button"
+        tabIndex={0}
+        aria-label={`Adicionar conta ${definition.name}`}
+        onClick={() => onConnect(card)}
+        onKeyDown={(e) => {
+          if (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/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>
+
+        {/* Footer */}
+        <div className="mt-auto flex items-center justify-end pt-1">
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              onConnect(card);
+            }}
+          >
+            {actionLabel}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Connected / expired / available card
+  const badge = STATE_BADGES[state];
 
   return (
     <div
@@ -97,7 +160,7 @@ export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
       )}
       role="button"
       tabIndex={isComingSoon ? -1 : 0}
-      aria-label={`${definition.name} — ${badge.label}`}
+      aria-label={`${definition.name}${accountLabel ? ` — ${accountLabel}` : ""} — ${badge.label}`}
       aria-disabled={isComingSoon}
       onClick={() => !isComingSoon && onConnect(card)}
       onKeyDown={(e) => {
@@ -117,12 +180,18 @@ export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
         </Badge>
       </div>
 
-      {/* Name + description */}
+      {/* Name + account label */}
       <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>
+        {accountLabel ? (
+          <p className="text-xs text-muted-foreground leading-relaxed truncate" title={accountLabel}>
+            {accountLabel}
+          </p>
+        ) : (
+          <p className="text-xs text-muted-foreground leading-relaxed">
+            {definition.description}
+          </p>
+        )}
       </div>
 
       {/* Footer */}

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

@@ -225,10 +225,15 @@ export function IntegrationWizard({
 
     try {
       // 1. Get auth URL from backend
-      const response = await fetch(
-        `${gagentsApiUrl}/v1/${language}/${idWl}/accounts/${accountId}/oauth/authorize/${integration.slug}`,
-        { headers: { Authorization: `Bearer ${token}` } },
-      );
+      // If reconnecting an existing credential, pass credential_id so the
+      // backend updates that specific credential instead of creating a new one.
+      let authorizeUrl = `${gagentsApiUrl}/v1/${language}/${idWl}/accounts/${accountId}/oauth/authorize/${integration.slug}`;
+      if (existingCredentialId) {
+        authorizeUrl += `?credential_id=${existingCredentialId}`;
+      }
+      const response = await fetch(authorizeUrl, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
       const result = await response.json();
 
       if (result.status !== 1 || !result.data?.auth_url) {

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

@@ -17,6 +17,20 @@ export interface IntegrationsTabProps {
   onConnect: (card: IntegrationCardData) => void;
 }
 
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+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;
+}
+
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -47,15 +61,53 @@ export function IntegrationsTab({
     );
   }
 
+  // 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="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {cards.map((card) => (
-        <IntegrationCard
-          key={card.definition.slug}
-          card={card}
-          onConnect={onConnect}
-        />
-      ))}
+    <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>
+        </div>
+      )}
     </div>
   );
 }

package/src/hooks/use-integrations.ts

@@ -32,6 +32,12 @@ export interface IntegrationCardData {
   sharedByAgentsCount: number;
   /** Whether this agent has a linked agent_tool for this integration */
   linkedToAgent: boolean;
+  /** Credential ID — set for connected/expired cards, undefined for "add new" */
+  credentialId?: number;
+  /** Account label (email or label from credential) */
+  accountLabel?: string;
+  /** Whether this is the "add new account" card */
+  isAddNew?: boolean;
 }
 
 // ---------------------------------------------------------------------------
@@ -42,6 +48,11 @@ export interface IntegrationCardData {
  * Cross-references the static integrations registry with live data
  * (tools, tool_credentials, agent_tools) to produce card state for each
  * integration entry.
+ *
+ * Returns:
+ * - One card per existing credential (connected/expired)
+ * - One "add new" card per integration type
+ * - Coming soon cards as before
  */
 export function useIntegrationState(
   config: GagentsHookConfig,
@@ -62,52 +73,88 @@ export function useIntegrationState(
     const tools: Tool[] = toolsData?.data ?? [];
     const agentTools: AgentTool[] = agentToolsData?.data ?? [];
 
-    return INTEGRATIONS_REGISTRY.map((def) => {
+    const result: IntegrationCardData[] = [];
+
+    for (const def of INTEGRATIONS_REGISTRY) {
       // coming_soon short-circuit
       if (def.status === "coming_soon") {
-        return {
+        result.push({
           definition: def,
           state: "coming_soon" as const,
           credential: null,
           tool: null,
           sharedByAgentsCount: 0,
           linkedToAgent: false,
-        };
+        });
+        continue;
       }
 
       // Find tool record matching registry slug
       const matchedTool = tools.find((t) => t.slug === def.slug) ?? null;
 
-      // Find credential for that tool
-      const matchedCredential = matchedTool
-        ? credentials.find((c) => c.id_tool === matchedTool.id) ?? null
-        : null;
+      // Find ALL credentials for this integration
+      // Credentials can be linked via id_tool OR id_platform_integration
+      // We match by tool slug through the tool record
+      const matchedCredentials = matchedTool
+        ? credentials.filter((c) => c.id_tool === matchedTool.id)
+        : [];
+
+      // Also check credentials linked via platform_integration slug
+      // (platform_integrations use the same slug convention)
+      const piCredentials = credentials.filter(
+        (c) =>
+          c.id_platform_integration != null &&
+          !c.id_tool &&
+          // We can't directly match slug here since we don't have
+          // platform_integrations data, but credentials with
+          // id_platform_integration are for calendar integrations
+          // which match by the registry slug
+          matchedTool == null,
+      );
+
+      // Combine — prefer tool-based credentials, fallback to PI-based
+      const allCredentials =
+        matchedCredentials.length > 0 ? matchedCredentials : piCredentials;
 
       // Check if this agent has a linked agent_tool for this tool
       const linkedToAgent = matchedTool
         ? agentTools.some((at) => at.id_tool === matchedTool.id)
         : false;
 
-      // Sharing indicator: credential exists at account level (available to all agents)
-      // When a credential is account-scoped, any agent can use it — show as "shared"
-      const sharedByAgentsCount = matchedCredential ? 1 : 0;
+      // Create one card per existing credential
+      for (const cred of allCredentials) {
+        const state: IntegrationCardState =
+          cred.status === "expired" ? "expired" : "connected";
 
-      // Determine state
-      let state: IntegrationCardState = "available";
-      if (matchedCredential) {
-        state =
-          matchedCredential.status === "expired" ? "expired" : "connected";
+        // Derive account label from external_reference or label
+        const accountLabel =
+          cred.external_reference || cred.label || undefined;
+
+        result.push({
+          definition: def,
+          state,
+          credential: cred,
+          tool: matchedTool,
+          sharedByAgentsCount: 1,
+          linkedToAgent,
+          credentialId: cred.id,
+          accountLabel,
+        });
       }
 
-      return {
+      // Always add an "add new account" card for this integration type
+      result.push({
         definition: def,
-        state,
-        credential: matchedCredential,
+        state: "available" as const,
+        credential: null,
         tool: matchedTool,
-        sharedByAgentsCount,
-        linkedToAgent,
-      };
-    });
+        sharedByAgentsCount: 0,
+        linkedToAgent: false,
+        isAddNew: true,
+      });
+    }
+
+    return result;
   }, [credentialsData, toolsData, agentToolsData]);
 
   return { cards, isLoading };

package/src/types/index.ts

@@ -100,6 +100,8 @@ export interface ToolCredential {
   id: number;
   id_account: number;
   id_tool: number;
+  id_platform_integration: number | null;
+  external_reference: string | null;
   label: string;
   credentials_encrypted: string;
   expires_at: string | null;