@greatapps/greatagents-ui 0.3.13 → 0.3.14

package/package.json

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

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

@@ -4,7 +4,6 @@ import { useCallback } from "react";
 import type { GagentsHookConfig } from "../../hooks/types";
 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";
@@ -41,13 +40,11 @@ export function IntegrationsTab({
   config,
   agentId,
 }: IntegrationsTabProps) {
-  const { cards, isLoading } = useIntegrationState(config, null);
-  const { data: toolsData } = useTools(config);
+  const { cards, isLoading } = useIntegrationState(config, agentId);
   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)
@@ -56,26 +53,22 @@ export function IntegrationsTab({
   );
 
   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;
-
+    (toolId: number, checked: boolean) => {
       if (checked) {
         // Add agent_tool linking this agent to this tool
         addAgentTool.mutate({
           idAgent: agentId,
-          body: { id_tool: tool.id, enabled: true },
+          body: { id_tool: toolId, enabled: true },
         });
       } else {
         // Find the agent_tool to remove
-        const agentTool = agentTools.find((at) => at.id_tool === tool.id);
+        const agentTool = agentTools.find((at) => at.id_tool === toolId);
         if (agentTool) {
           removeAgentTool.mutate({ idAgent: agentId, id: agentTool.id });
         }
       }
     },
-    [tools, agentTools, agentId, addAgentTool, removeAgentTool],
+    [agentTools, agentId, addAgentTool, removeAgentTool],
   );
 
   // Loading state
@@ -110,10 +103,7 @@ export function IntegrationsTab({
       <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 isLinked = card.linkedToAgent;
           const isMutating = addAgentTool.isPending || removeAgentTool.isPending;
 
           return (
@@ -152,10 +142,9 @@ export function IntegrationsTab({
               {/* Toggle */}
               <Switch
                 checked={isLinked}
-                disabled={isMutating}
+                disabled={isMutating || !card.tool}
                 onCheckedChange={(checked) =>
-                  card.credentialId &&
-                  handleToggle(card.credentialId, card.definition.slug, checked)
+                  card.tool && handleToggle(card.tool.id, checked)
                 }
                 aria-label={`${isLinked ? "Desativar" : "Ativar"} ${card.definition.name} para este agente`}
               />

package/src/components/tools/tool-credentials-form.tsx

@@ -3,8 +3,6 @@ import type { ColumnDef } from "@tanstack/react-table";
 import type { Tool, ToolCredential } from "../../types";
 import type { GagentsHookConfig } from "../../hooks/types";
 import {
-  useCreateToolCredential,
-  useUpdateToolCredential,
   useDeleteToolCredential,
 } from "../../hooks";
 import { useTools } from "../../hooks";
@@ -16,11 +14,6 @@ import {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -29,13 +22,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
 } from "@greatapps/greatauth-ui/ui";
-import { Trash2, Pencil, Link, Search } from "lucide-react";
+import { Trash2, Search } from "lucide-react";
 import { format } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { toast } from "sonner";
@@ -45,8 +33,6 @@ interface ToolCredentialsFormProps {
   isLoading: boolean;
   config: GagentsHookConfig;
   gagentsApiUrl: string;
-  createOpen?: boolean;
-  onCreateOpenChange?: (open: boolean) => void;
 }
 
 function formatDate(dateStr: string | null): string {
@@ -56,8 +42,6 @@ function formatDate(dateStr: string | null): string {
 
 function useColumns(
   tools: Tool[],
-  onEdit: (cred: ToolCredential) => void,
-  onConnect: (cred: ToolCredential) => void,
   onRemove: (cred: ToolCredential) => void,
 ): ColumnDef<ToolCredential>[] {
   function getToolName(idTool: number | null): string {
@@ -66,12 +50,6 @@ function useColumns(
     return tool?.name || `Ferramenta #${idTool}`;
   }
 
-  function getToolType(idTool: number | null): string | null {
-    if (!idTool) return null;
-    const tool = tools.find((t) => t.id === idTool);
-    return tool?.type || null;
-  }
-
   return [
     {
       accessorKey: "label",
@@ -123,36 +101,6 @@ function useColumns(
       enableSorting: false,
       cell: ({ row }) => (
         <div className="flex items-center gap-1">
-          {getToolType(row.original.id_tool) === "oauth2" && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8"
-                  aria-label="Vincular"
-                  disabled
-                >
-                  <Link className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Em breve</TooltipContent>
-            </Tooltip>
-          )}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                aria-label="Editar"
-                onClick={() => onEdit(row.original)}
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Editar</TooltipContent>
-          </Tooltip>
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
@@ -178,35 +126,12 @@ export function ToolCredentialsForm({
   isLoading,
   config,
   gagentsApiUrl,
-  createOpen: externalCreateOpen,
-  onCreateOpenChange,
 }: ToolCredentialsFormProps) {
-  const createMutation = useCreateToolCredential(config);
-  const updateMutation = useUpdateToolCredential(config);
   const deleteMutation = useDeleteToolCredential(config);
   const { data: toolsData } = useTools(config);
   const tools: Tool[] = (toolsData?.data || []).filter((t: Tool) => !t.slug?.startsWith("gclinic_"));
 
   const [search, setSearch] = useState("");
-  const [internalCreateOpen, setInternalCreateOpen] = useState(false);
-  const showCreateDialog = externalCreateOpen ?? internalCreateOpen;
-  const setShowCreateDialog = onCreateOpenChange ?? setInternalCreateOpen;
-  const [createForm, setCreateForm] = useState({
-    id_tool: "",
-    label: "",
-    credentials_encrypted: "",
-    expires_at: "",
-  });
-
-  const [editTarget, setEditTarget] = useState<ToolCredential | null>(null);
-  const [editForm, setEditForm] = useState({
-    id_tool: "",
-    label: "",
-    credentials_encrypted: "",
-    expires_at: "",
-    status: "" as "active" | "expired" | "",
-  });
-
   const [removeTarget, setRemoveTarget] = useState<ToolCredential | null>(null);
 
   // Build a set of internal tool IDs to exclude from credentials display
@@ -237,86 +162,9 @@ export function ToolCredentialsForm({
 
   const columns = useColumns(
     tools,
-    (cred) => startEdit(cred),
-    (cred) => handleConnect(cred),
     (cred) => setRemoveTarget(cred),
   );
 
-  async function handleCreate() {
-    const idTool = parseInt(createForm.id_tool, 10);
-    if (!idTool || !createForm.label.trim() || !createForm.credentials_encrypted.trim()) return;
-
-    try {
-      const result = await createMutation.mutateAsync({
-        id_tool: idTool,
-        label: createForm.label.trim(),
-        credentials_encrypted: createForm.credentials_encrypted.trim(),
-        ...(createForm.expires_at ? { expires_at: createForm.expires_at } : {}),
-      });
-      if (result.status === 1) {
-        toast.success("Credencial criada");
-        setShowCreateDialog(false);
-        setCreateForm({ id_tool: "", label: "", credentials_encrypted: "", expires_at: "" });
-      } else {
-        toast.error(result.message || "Erro ao criar credencial");
-      }
-    } catch {
-      toast.error("Erro ao criar credencial");
-    }
-  }
-
-  function startEdit(cred: ToolCredential) {
-    setEditTarget(cred);
-    setEditForm({
-      id_tool: cred.id_tool ? String(cred.id_tool) : "",
-      label: cred.label || "",
-      credentials_encrypted: "",
-      expires_at: cred.expires_at || "",
-      status: cred.status,
-    });
-  }
-
-  async function handleSaveEdit() {
-    if (!editTarget) return;
-    const body: Record<string, unknown> = {};
-    const newIdTool = editForm.id_tool ? parseInt(editForm.id_tool, 10) : null;
-    if (newIdTool && newIdTool !== editTarget.id_tool) {
-      body.id_tool = newIdTool;
-    }
-    if (editForm.label.trim() && editForm.label.trim() !== (editTarget.label || "")) {
-      body.label = editForm.label.trim();
-    }
-    if (editForm.credentials_encrypted.trim()) {
-      body.credentials_encrypted = editForm.credentials_encrypted.trim();
-    }
-    if (editForm.expires_at !== (editTarget.expires_at || "")) {
-      body.expires_at = editForm.expires_at || null;
-    }
-    if (editForm.status && editForm.status !== editTarget.status) {
-      body.status = editForm.status;
-    }
-
-    if (Object.keys(body).length === 0) {
-      setEditTarget(null);
-      return;
-    }
-
-    try {
-      const result = await updateMutation.mutateAsync({
-        id: editTarget.id,
-        body: body as Parameters<typeof updateMutation.mutateAsync>[0]["body"],
-      });
-      if (result.status === 1) {
-        toast.success("Credencial atualizada");
-        setEditTarget(null);
-      } else {
-        toast.error(result.message || "Erro ao atualizar credencial");
-      }
-    } catch {
-      toast.error("Erro ao atualizar credencial");
-    }
-  }
-
   async function handleRemove() {
     if (!removeTarget) return;
     try {
@@ -333,14 +181,6 @@ export function ToolCredentialsForm({
     }
   }
 
-  function handleConnect(cred: ToolCredential) {
-    if (!config.accountId || !config.token) return;
-    const language = config.language ?? "pt-br";
-    const idWl = config.idWl ?? 1;
-    const url = `${gagentsApiUrl}/v1/${language}/${idWl}/accounts/${config.accountId}/oauth/connect?id_tool=${cred.id_tool}`;
-    window.open(url, "_blank");
-  }
-
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
@@ -365,219 +205,6 @@ export function ToolCredentialsForm({
         emptyMessage="Nenhuma credencial encontrada"
       />
 
-      {/* Create Dialog */}
-      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Nova Credencial</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div>
-              <label htmlFor="cred-tool" className="mb-1 block text-sm font-medium">
-                Ferramenta *
-              </label>
-              <Select
-                value={createForm.id_tool}
-                onValueChange={(val) =>
-                  setCreateForm((f) => ({ ...f, id_tool: val }))
-                }
-              >
-                <SelectTrigger id="cred-tool">
-                  <SelectValue placeholder="Selecione a ferramenta" />
-                </SelectTrigger>
-                <SelectContent>
-                  {tools.map((tool) => (
-                    <SelectItem key={tool.id} value={String(tool.id)}>
-                      {tool.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div>
-              <label htmlFor="cred-label" className="mb-1 block text-sm font-medium">
-                Label *
-              </label>
-              <Input
-                id="cred-label"
-                name="label"
-                value={createForm.label}
-                onChange={(e) =>
-                  setCreateForm((f) => ({ ...f, label: e.target.value }))
-                }
-                placeholder="Ex: Google Calendar - Clínica São Paulo"
-              />
-            </div>
-            <div>
-              <label htmlFor="cred-credential" className="mb-1 block text-sm font-medium">
-                Credencial *
-              </label>
-              <Input
-                id="cred-credential"
-                name="credential"
-                autoComplete="off"
-                type="password"
-                value={createForm.credentials_encrypted}
-                onChange={(e) =>
-                  setCreateForm((f) => ({
-                    ...f,
-                    credentials_encrypted: e.target.value,
-                  }))
-                }
-                placeholder="Credencial encriptada"
-              />
-            </div>
-            <div>
-              <label htmlFor="cred-expires" className="mb-1 block text-sm font-medium">
-                Data de Expiração (opcional)
-              </label>
-              <Input
-                id="cred-expires"
-                name="expires"
-                type="date"
-                value={createForm.expires_at}
-                onChange={(e) =>
-                  setCreateForm((f) => ({ ...f, expires_at: e.target.value }))
-                }
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowCreateDialog(false)}
-            >
-              Cancelar
-            </Button>
-            <Button
-              onClick={handleCreate}
-              disabled={
-                !createForm.id_tool ||
-                !createForm.label.trim() ||
-                !createForm.credentials_encrypted.trim() ||
-                createMutation.isPending
-              }
-            >
-              Criar
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Edit Dialog */}
-      <Dialog
-        open={!!editTarget}
-        onOpenChange={(open) => !open && setEditTarget(null)}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Editar Credencial</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div>
-              <label htmlFor="edit-cred-tool" className="mb-1 block text-sm font-medium">
-                Ferramenta *
-              </label>
-              <Select
-                value={editForm.id_tool}
-                onValueChange={(val) =>
-                  setEditForm((f) => ({ ...f, id_tool: val }))
-                }
-              >
-                <SelectTrigger id="edit-cred-tool">
-                  <SelectValue placeholder="Selecione a ferramenta" />
-                </SelectTrigger>
-                <SelectContent>
-                  {tools.map((tool) => (
-                    <SelectItem key={tool.id} value={String(tool.id)}>
-                      {tool.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div>
-              <label htmlFor="edit-cred-label" className="mb-1 block text-sm font-medium">
-                Label
-              </label>
-              <Input
-                id="edit-cred-label"
-                name="label"
-                value={editForm.label}
-                onChange={(e) =>
-                  setEditForm((f) => ({ ...f, label: e.target.value }))
-                }
-                placeholder="Label da credencial"
-              />
-            </div>
-            <div>
-              <label htmlFor="edit-cred-credential" className="mb-1 block text-sm font-medium">
-                Nova Credencial (vazio = manter atual)
-              </label>
-              <Input
-                id="edit-cred-credential"
-                name="credential"
-                autoComplete="off"
-                type="password"
-                value={editForm.credentials_encrypted}
-                onChange={(e) =>
-                  setEditForm((f) => ({
-                    ...f,
-                    credentials_encrypted: e.target.value,
-                  }))
-                }
-                placeholder="Nova credencial"
-              />
-            </div>
-            <div>
-              <label htmlFor="edit-cred-expires" className="mb-1 block text-sm font-medium">
-                Data de Expiração
-              </label>
-              <Input
-                id="edit-cred-expires"
-                name="expires"
-                type="date"
-                value={editForm.expires_at}
-                onChange={(e) =>
-                  setEditForm((f) => ({ ...f, expires_at: e.target.value }))
-                }
-              />
-            </div>
-            <div>
-              <label htmlFor="edit-cred-status" className="mb-1 block text-sm font-medium">Status</label>
-              <Select
-                value={editForm.status || undefined}
-                onValueChange={(val) =>
-                  setEditForm((f) => ({
-                    ...f,
-                    status: val as "active" | "expired",
-                  }))
-                }
-              >
-                <SelectTrigger id="edit-cred-status">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="active">Ativo</SelectItem>
-                  <SelectItem value="expired">Expirado</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setEditTarget(null)}>
-              Cancelar
-            </Button>
-            <Button
-              onClick={handleSaveEdit}
-              disabled={updateMutation.isPending}
-            >
-              Salvar
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
       {/* Delete confirmation */}
       <AlertDialog
         open={!!removeTarget}

package/src/pages/credentials-page.tsx

@@ -1,8 +1,5 @@
-import { useState } from "react";
 import { useToolCredentials } from "../hooks";
 import { ToolCredentialsForm } from "../components/tools/tool-credentials-form";
-import { Button } from "@greatapps/greatauth-ui/ui";
-import { Plus } from "lucide-react";
 import type { GagentsHookConfig } from "../hooks/types";
 
 export interface CredentialsPageProps {
@@ -20,7 +17,6 @@ export function CredentialsPage({
 }: CredentialsPageProps) {
   const { data: credentialsData, isLoading: credentialsLoading } =
     useToolCredentials(config);
-  const [createOpen, setCreateOpen] = useState(false);
 
   const credentials = credentialsData?.data || [];
 
@@ -31,10 +27,6 @@ export function CredentialsPage({
           <h1 className="text-xl font-semibold">{title}</h1>
           <p className="text-sm text-muted-foreground">{subtitle}</p>
         </div>
-        <Button onClick={() => setCreateOpen(true)} size="sm">
-          <Plus className="mr-2 h-4 w-4" />
-          Nova Credencial
-        </Button>
       </div>
 
       <ToolCredentialsForm
@@ -42,8 +34,6 @@ export function CredentialsPage({
         gagentsApiUrl={gagentsApiUrl}
         credentials={credentials}
         isLoading={credentialsLoading}
-        createOpen={createOpen}
-        onCreateOpenChange={setCreateOpen}
       />
     </div>
   );