@greatapps/greatagents-ui 0.3.9 → 0.3.10

package/dist/index.d.ts

@@ -128,6 +128,8 @@ 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;
@@ -472,11 +474,22 @@ 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;
 }
 /**
  * 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
  */
 declare function useIntegrationState(config: GagentsHookConfig, agentId: number | null): {
     cards: IntegrationCardData[];

package/dist/index.js

@@ -518,34 +518,55 @@ function useIntegrationState(config, agentId) {
     const credentials = credentialsData?.data ?? [];
     const tools = toolsData?.data ?? [];
     const agentTools = agentToolsData?.data ?? [];
-    return INTEGRATIONS_REGISTRY.map((def) => {
+    const result = [];
+    for (const def of INTEGRATIONS_REGISTRY) {
       if (def.status === "coming_soon") {
-        return {
+        result.push({
           definition: def,
           state: "coming_soon",
           credential: null,
           tool: null,
           sharedByAgentsCount: 0,
           linkedToAgent: false
-        };
+        });
+        continue;
       }
       const matchedTool = tools.find((t) => t.slug === def.slug) ?? null;
-      const matchedCredential = matchedTool ? credentials.find((c) => c.id_tool === matchedTool.id) ?? null : null;
+      const matchedCredentials = matchedTool ? credentials.filter((c) => c.id_tool === matchedTool.id) : [];
+      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
+      );
+      const allCredentials = matchedCredentials.length > 0 ? matchedCredentials : piCredentials;
       const linkedToAgent = matchedTool ? agentTools.some((at) => at.id_tool === matchedTool.id) : false;
-      const sharedByAgentsCount = matchedCredential ? 1 : 0;
-      let state = "available";
-      if (matchedCredential) {
-        state = matchedCredential.status === "expired" ? "expired" : "connected";
+      for (const cred of allCredentials) {
+        const state = cred.status === "expired" ? "expired" : "connected";
+        const accountLabel = cred.external_reference || cred.label || void 0;
+        result.push({
+          definition: def,
+          state,
+          credential: cred,
+          tool: matchedTool,
+          sharedByAgentsCount: 1,
+          linkedToAgent,
+          credentialId: cred.id,
+          accountLabel
+        });
       }
-      return {
+      result.push({
         definition: def,
-        state,
-        credential: matchedCredential,
+        state: "available",
+        credential: null,
         tool: matchedTool,
-        sharedByAgentsCount,
-        linkedToAgent
-      };
-    });
+        sharedByAgentsCount: 0,
+        linkedToAgent: false,
+        isAddNew: true
+      });
+    }
+    return result;
   }, [credentialsData, toolsData, agentToolsData]);
   return { cards, isLoading };
 }
@@ -2846,7 +2867,8 @@ import {
   Settings as Settings2,
   RefreshCw,
   Users as Users2,
-  Clock
+  Clock,
+  Plus as Plus2
 } from "lucide-react";
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var ICON_MAP = {
@@ -2855,7 +2877,8 @@ var ICON_MAP = {
   Settings: Settings2,
   RefreshCw,
   Users: Users2,
-  Clock
+  Clock,
+  Plus: Plus2
 };
 function resolveIcon(name) {
   return ICON_MAP[name] ?? Plug;
@@ -2878,8 +2901,9 @@ var STATE_BADGES = {
     className: "bg-muted text-muted-foreground"
   }
 };
-function getActionLabel(state) {
-  switch (state) {
+function getActionLabel(card) {
+  if (card.isAddNew) return "Conectar";
+  switch (card.state) {
     case "available":
       return "Conectar";
     case "connected":
@@ -2891,11 +2915,58 @@ function getActionLabel(state) {
   }
 }
 function IntegrationCard({ card, onConnect }) {
-  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);
+  if (isAddNew) {
+    return /* @__PURE__ */ jsxs9(
+      "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);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsx11("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/5 text-primary/60", children: /* @__PURE__ */ jsx11(Icon, { className: "h-5 w-5" }) }),
+            /* @__PURE__ */ jsx11(Badge6, { variant: "outline", className: "text-xs bg-muted text-muted-foreground", children: "Adicionar" })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold leading-tight text-muted-foreground", children: definition.name }),
+            /* @__PURE__ */ jsxs9("p", { className: "text-xs text-muted-foreground/70 leading-relaxed flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx11(Plus2, { className: "h-3 w-3" }),
+              "Adicionar conta"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx11("div", { className: "mt-auto flex items-center justify-end pt-1", children: /* @__PURE__ */ jsx11(
+            Button8,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "text-xs",
+              onClick: (e) => {
+                e.stopPropagation();
+                onConnect(card);
+              },
+              children: actionLabel
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  const badge = STATE_BADGES[state];
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -2905,7 +2976,7 @@ function IntegrationCard({ card, onConnect }) {
       ),
       role: "button",
       tabIndex: isComingSoon ? -1 : 0,
-      "aria-label": `${definition.name} \u2014 ${badge.label}`,
+      "aria-label": `${definition.name}${accountLabel ? ` \u2014 ${accountLabel}` : ""} \u2014 ${badge.label}`,
       "aria-disabled": isComingSoon,
       onClick: () => !isComingSoon && onConnect(card),
       onKeyDown: (e) => {
@@ -2921,7 +2992,7 @@ function IntegrationCard({ card, onConnect }) {
         ] }),
         /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold leading-tight", children: definition.name }),
-          /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground leading-relaxed", children: definition.description })
+          accountLabel ? /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground leading-relaxed truncate", title: accountLabel, children: accountLabel }) : /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground leading-relaxed", children: definition.description })
         ] }),
         /* @__PURE__ */ jsxs9("div", { className: "mt-auto flex items-center justify-between gap-2 pt-1", children: [
           sharedByAgentsCount > 0 ? /* @__PURE__ */ jsxs9(Tooltip2, { children: [
@@ -2953,6 +3024,15 @@ function IntegrationCard({ card, onConnect }) {
 // src/components/capabilities/integrations-tab.tsx
 import { Plug as Plug2, Loader2 as Loader24 } from "lucide-react";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function getCardKey(card) {
+  if (card.credentialId) {
+    return `${card.definition.slug}-cred-${card.credentialId}`;
+  }
+  if (card.isAddNew) {
+    return `${card.definition.slug}-add-new`;
+  }
+  return card.definition.slug;
+}
 function IntegrationsTab({
   config,
   agentId,
@@ -2968,14 +3048,36 @@ function IntegrationsTab({
       /* @__PURE__ */ jsx12("p", { className: "text-sm", children: "Nenhuma integra\xE7\xE3o dispon\xEDvel" })
     ] });
   }
-  return /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: cards.map((card) => /* @__PURE__ */ jsx12(
-    IntegrationCard,
-    {
-      card,
-      onConnect
-    },
-    card.definition.slug
-  )) });
+  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 /* @__PURE__ */ jsxs10("div", { className: "space-y-6", children: [
+    connectedCards.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx12("h3", { className: "mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Contas conectadas" }),
+      /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: connectedCards.map((card) => /* @__PURE__ */ jsx12(
+        IntegrationCard,
+        {
+          card,
+          onConnect
+        },
+        getCardKey(card)
+      )) })
+    ] }),
+    otherCards.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
+      connectedCards.length > 0 && /* @__PURE__ */ jsx12("h3", { className: "mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Adicionar integra\xE7\xE3o" }),
+      /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: otherCards.map((card) => /* @__PURE__ */ jsx12(
+        IntegrationCard,
+        {
+          card,
+          onConnect
+        },
+        getCardKey(card)
+      )) })
+    ] })
+  ] });
 }
 
 // src/components/capabilities/integration-wizard.tsx
@@ -3470,10 +3572,13 @@ function IntegrationWizard({
     const { language = "pt-br", idWl = 1, accountId, token } = config;
     setOauthStatus("waiting");
     try {
-      const response = await fetch(
-        `${gagentsApiUrl}/v1/${language}/${idWl}/accounts/${accountId}/oauth/authorize/${integration.slug}`,
-        { headers: { Authorization: `Bearer ${token}` } }
-      );
+      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) {
         setOauthStatus("error");
@@ -4950,7 +5055,7 @@ import {
 } from "@greatapps/greatauth-ui/ui";
 import {
   Trash2 as Trash25,
-  Plus as Plus2,
+  Plus as Plus3,
   Wrench,
   Settings2 as Settings22
 } from "lucide-react";
@@ -5068,7 +5173,7 @@ function AgentToolsList({ agent, config }) {
       ] }),
       /* @__PURE__ */ jsxs22(Popover, { open: addOpen, onOpenChange: setAddOpen, children: [
         /* @__PURE__ */ jsx24(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs22(Button14, { size: "sm", disabled: availableTools.length === 0, children: [
-          /* @__PURE__ */ jsx24(Plus2, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx24(Plus3, { className: "mr-2 h-4 w-4" }),
           "Adicionar Ferramenta"
         ] }) }),
         /* @__PURE__ */ jsxs22(PopoverContent, { className: "w-72 p-0", align: "end", children: [
@@ -5248,7 +5353,7 @@ function AgentToolsList({ agent, config }) {
 // src/pages/agents-page.tsx
 import { useState as useState16 } from "react";
 import { Button as Button15 } from "@greatapps/greatauth-ui/ui";
-import { Plus as Plus3 } from "lucide-react";
+import { Plus as Plus4 } from "lucide-react";
 import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 function AgentsPage({
   config,
@@ -5264,7 +5369,7 @@ function AgentsPage({
         /* @__PURE__ */ jsx25("p", { className: "text-sm text-muted-foreground", children: subtitle })
       ] }),
       /* @__PURE__ */ jsxs23(Button15, { onClick: () => setCreateOpen(true), size: "sm", children: [
-        /* @__PURE__ */ jsx25(Plus3, { className: "mr-2 h-4 w-4" }),
+        /* @__PURE__ */ jsx25(Plus4, { className: "mr-2 h-4 w-4" }),
         "Novo Agente"
       ] })
     ] }),
@@ -5376,7 +5481,7 @@ function AgentDetailPage({
 // src/pages/tools-page.tsx
 import { useState as useState18 } from "react";
 import { Button as Button17 } from "@greatapps/greatauth-ui/ui";
-import { Plus as Plus4 } from "lucide-react";
+import { Plus as Plus5 } from "lucide-react";
 import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 function ToolsPage({
   config,
@@ -5392,7 +5497,7 @@ function ToolsPage({
         /* @__PURE__ */ jsx27("p", { className: "text-sm text-muted-foreground", children: subtitle })
       ] }),
       /* @__PURE__ */ jsxs25(Button17, { onClick: () => setCreateOpen(true), size: "sm", children: [
-        /* @__PURE__ */ jsx27(Plus4, { className: "mr-2 h-4 w-4" }),
+        /* @__PURE__ */ jsx27(Plus5, { className: "mr-2 h-4 w-4" }),
         "Nova Ferramenta"
       ] })
     ] }),
@@ -5420,7 +5525,7 @@ function ToolsPage({
 // src/pages/credentials-page.tsx
 import { useState as useState19 } from "react";
 import { Button as Button18 } from "@greatapps/greatauth-ui/ui";
-import { Plus as Plus5 } from "lucide-react";
+import { Plus as Plus6 } from "lucide-react";
 import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function CredentialsPage({
   config,
@@ -5438,7 +5543,7 @@ function CredentialsPage({
         /* @__PURE__ */ jsx28("p", { className: "text-sm text-muted-foreground", children: subtitle })
       ] }),
       /* @__PURE__ */ jsxs26(Button18, { onClick: () => setCreateOpen(true), size: "sm", children: [
-        /* @__PURE__ */ jsx28(Plus5, { className: "mr-2 h-4 w-4" }),
+        /* @__PURE__ */ jsx28(Plus6, { className: "mr-2 h-4 w-4" }),
         "Nova Credencial"
       ] })
     ] }),
@@ -5466,7 +5571,7 @@ import {
   TabsList as TabsList3,
   TabsTrigger as TabsTrigger3
 } from "@greatapps/greatauth-ui/ui";
-import { Plus as Plus6, Plug as Plug4, KeyRound, Info as Info3 } from "lucide-react";
+import { Plus as Plus7, Plug as Plug4, KeyRound, Info as Info3 } from "lucide-react";
 import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
 function useCredentialAgentSummary(credentials, tools, agents) {
   return useMemo8(() => {
@@ -5545,7 +5650,7 @@ function IntegrationsManagementPage({
           ] })
         ] }),
         /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-end mb-4", children: /* @__PURE__ */ jsxs27(Button19, { onClick: () => setCreateOpen(true), size: "sm", children: [
-          /* @__PURE__ */ jsx29(Plus6, { className: "mr-2 h-4 w-4" }),
+          /* @__PURE__ */ jsx29(Plus7, { className: "mr-2 h-4 w-4" }),
           "Nova Credencial"
         ] }) }),
         /* @__PURE__ */ jsx29(