@greatapps/greatagents-ui 0.3.2 → 0.3.4

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

@@ -130,6 +130,7 @@ function useColumns(
                   variant="ghost"
                   size="icon"
                   className="h-8 w-8"
+                  aria-label="Vincular"
                   disabled
                 >
                   <Link className="h-4 w-4" />
@@ -144,6 +145,7 @@ function useColumns(
                 variant="ghost"
                 size="icon"
                 className="h-8 w-8"
+                aria-label="Editar"
                 onClick={() => onEdit(row.original)}
               >
                 <Pencil className="h-4 w-4" />
@@ -157,6 +159,7 @@ function useColumns(
                 variant="ghost"
                 size="icon"
                 className="h-8 w-8 text-destructive hover:text-destructive"
+                aria-label="Excluir"
                 onClick={() => onRemove(row.original)}
               >
                 <Trash2 className="h-4 w-4" />
@@ -328,9 +331,12 @@ export function ToolCredentialsForm({
     <div className="space-y-4">
       <div className="flex items-center gap-3">
         <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Search aria-hidden="true" className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <Input
-            placeholder="Buscar credenciais..."
+            placeholder="Buscar credenciais\u2026"
+            aria-label="Buscar credenciais"
+            name="search"
+            autoComplete="off"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             className="pl-9"
@@ -353,7 +359,7 @@ export function ToolCredentialsForm({
           </DialogHeader>
           <div className="space-y-4">
             <div>
-              <label className="mb-1 block text-sm font-medium">
+              <label htmlFor="cred-tool" className="mb-1 block text-sm font-medium">
                 Ferramenta *
               </label>
               <Select
@@ -362,7 +368,7 @@ export function ToolCredentialsForm({
                   setCreateForm((f) => ({ ...f, id_tool: val }))
                 }
               >
-                <SelectTrigger>
+                <SelectTrigger id="cred-tool">
                   <SelectValue placeholder="Selecione a ferramenta" />
                 </SelectTrigger>
                 <SelectContent>
@@ -375,10 +381,12 @@ export function ToolCredentialsForm({
               </Select>
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium">
+              <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 }))
@@ -387,10 +395,13 @@ export function ToolCredentialsForm({
               />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium">
+              <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) =>
@@ -403,10 +414,12 @@ export function ToolCredentialsForm({
               />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium">
+              <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) =>
@@ -448,7 +461,7 @@ export function ToolCredentialsForm({
           </DialogHeader>
           <div className="space-y-4">
             <div>
-              <label className="mb-1 block text-sm font-medium">
+              <label htmlFor="edit-cred-tool" className="mb-1 block text-sm font-medium">
                 Ferramenta *
               </label>
               <Select
@@ -457,7 +470,7 @@ export function ToolCredentialsForm({
                   setEditForm((f) => ({ ...f, id_tool: val }))
                 }
               >
-                <SelectTrigger>
+                <SelectTrigger id="edit-cred-tool">
                   <SelectValue placeholder="Selecione a ferramenta" />
                 </SelectTrigger>
                 <SelectContent>
@@ -470,10 +483,12 @@ export function ToolCredentialsForm({
               </Select>
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium">
+              <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 }))
@@ -482,10 +497,13 @@ export function ToolCredentialsForm({
               />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium">
+              <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) =>
@@ -498,10 +516,12 @@ export function ToolCredentialsForm({
               />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium">
+              <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) =>
@@ -510,7 +530,7 @@ export function ToolCredentialsForm({
               />
             </div>
             <div>
-              <label className="mb-1 block text-sm font-medium">Status</label>
+              <label htmlFor="edit-cred-status" className="mb-1 block text-sm font-medium">Status</label>
               <Select
                 value={editForm.status || undefined}
                 onValueChange={(val) =>
@@ -520,7 +540,7 @@ export function ToolCredentialsForm({
                   }))
                 }
               >
-                <SelectTrigger>
+                <SelectTrigger id="edit-cred-status">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>

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

@@ -189,6 +189,7 @@ export function ToolFormDialog({
             <Label htmlFor="tool-name">Nome *</Label>
             <Input
               id="tool-name"
+              name="name"
               value={form.name}
               onChange={(e) => {
                 const name = e.target.value;
@@ -213,6 +214,7 @@ export function ToolFormDialog({
             <Label htmlFor="tool-slug">Slug (identificador único) *</Label>
             <Input
               id="tool-slug"
+              name="slug"
               value={form.slug}
               onChange={(e) => {
                 setSlugManuallyEdited(true);
@@ -269,11 +271,12 @@ export function ToolFormDialog({
             <Label htmlFor="tool-description">Descrição</Label>
             <Textarea
               id="tool-description"
+              name="description"
               value={form.description}
               onChange={(e) =>
                 setForm((prev) => ({ ...prev, description: e.target.value }))
               }
-              placeholder="Descrição da ferramenta..."
+              placeholder="Descri\u00e7\u00e3o da ferramenta\u2026"
               rows={3}
               disabled={isPending}
             />
@@ -285,6 +288,7 @@ export function ToolFormDialog({
             </Label>
             <Textarea
               id="tool-function-defs"
+              name="functionDefs"
               value={form.functionDefinitions}
               onChange={(e) => {
                 setForm((prev) => ({
@@ -298,11 +302,11 @@ export function ToolFormDialog({
     "type": "function",
     "function": {
       "name": "nome_da_funcao",
-      "description": "O que a função faz",
+      "description": "O que a fun\u00e7\u00e3o faz",
       "parameters": {
         "type": "object",
-        "properties": { ... },
-        "required": [...]
+        "properties": { \u2026 },
+        "required": [\u2026]
       }
     }
   }
@@ -330,7 +334,7 @@ export function ToolFormDialog({
             </Button>
             <Button type="submit" disabled={isPending}>
               {isPending ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2 aria-hidden="true" className="mr-2 h-4 w-4 animate-spin" />
               ) : null}
               {isEditing ? "Salvar" : "Criar"}
             </Button>

package/src/components/tools/tools-table.tsx

@@ -70,7 +70,7 @@ function useColumns(
         if (!desc) return <span className="text-muted-foreground text-sm">{"\u2014"}</span>;
         return (
           <span className="text-muted-foreground text-sm">
-            {desc.length > 50 ? `${desc.slice(0, 50)}...` : desc}
+            {desc.length > 50 ? `${desc.slice(0, 50)}\u2026` : desc}
           </span>
         );
       },
@@ -98,6 +98,7 @@ function useColumns(
                 variant="ghost"
                 size="icon"
                 className="h-8 w-8"
+                aria-label="Editar"
                 onClick={() => onEdit(row.original)}
               >
                 <Pencil className="h-4 w-4" />
@@ -111,6 +112,7 @@ function useColumns(
                 variant="ghost"
                 size="icon"
                 className="h-8 w-8 text-destructive hover:text-destructive"
+                aria-label="Excluir"
                 onClick={() => onDelete(row.original.id)}
               >
                 <Trash2 className="h-4 w-4" />
@@ -171,9 +173,12 @@ export function ToolsTable({ onEdit, config }: ToolsTableProps) {
     <>
       <div className="flex items-center gap-3">
         <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Search aria-hidden="true" className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <Input
-            placeholder="Buscar ferramentas..."
+            placeholder="Buscar ferramentas\u2026"
+            aria-label="Buscar ferramentas"
+            name="search"
+            autoComplete="off"
             value={search}
             onChange={(e) => handleSearchChange(e.target.value)}
             className="pl-9"

package/src/data/integrations-registry.ts

@@ -0,0 +1,23 @@
+export type IntegrationAuthType = "oauth2" | "api_key" | "none";
+export type IntegrationStatus = "available" | "coming_soon";
+
+export interface IntegrationDefinition {
+  slug: string;
+  name: string;
+  description: string;
+  icon: string; // Lucide icon name
+  authType: IntegrationAuthType;
+  status: IntegrationStatus;
+}
+
+export const INTEGRATIONS_REGISTRY: IntegrationDefinition[] = [
+  {
+    slug: "google_calendar",
+    name: "Google Agenda",
+    description: "Sincronize agendamentos com o Google Calendar",
+    icon: "CalendarSync",
+    authType: "oauth2",
+    status: "available",
+  },
+  // Future integrations — add entries here without code changes
+];

package/src/hooks/index.ts

@@ -28,3 +28,13 @@ export {
 
 // Contacts
 export { useGagentsContacts } from "./use-contacts";
+
+// Capabilities
+export { useCapabilities, useAgentCapabilities, useUpdateAgentCapabilities } from "./use-capabilities";
+
+// Integrations
+export {
+  useIntegrationState,
+  type IntegrationCardState,
+  type IntegrationCardData,
+} from "./use-integrations";

package/src/hooks/use-capabilities.ts

@@ -0,0 +1,50 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { GagentsHookConfig } from "./types";
+import { useGagentsClient } from "./types";
+import type { CapabilitiesResponse, AgentCapability, AgentCapabilitiesPayload } from "../types/capabilities";
+
+export function useCapabilities(config: GagentsHookConfig) {
+  const client = useGagentsClient(config);
+
+  return useQuery({
+    queryKey: ["greatagents", "capabilities", config.accountId],
+    queryFn: async (): Promise<CapabilitiesResponse> => {
+      const res = await client.getCapabilities(config.accountId);
+      return (res.data as unknown as CapabilitiesResponse) ?? { product: null, categories: [] };
+    },
+    enabled: !!config.token && !!config.accountId,
+  });
+}
+
+export function useAgentCapabilities(config: GagentsHookConfig, agentId: number | null) {
+  const client = useGagentsClient(config);
+
+  return useQuery({
+    queryKey: ["greatagents", "agent-capabilities", config.accountId, agentId],
+    queryFn: async (): Promise<AgentCapability[]> => {
+      const res = await client.getAgentCapabilities(config.accountId, agentId!);
+      const d = res.data;
+      return (Array.isArray(d) ? d : []) as AgentCapability[];
+    },
+    enabled: !!config.token && !!config.accountId && !!agentId,
+  });
+}
+
+export function useUpdateAgentCapabilities(config: GagentsHookConfig) {
+  const client = useGagentsClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ agentId, payload }: { agentId: number; payload: AgentCapabilitiesPayload }) =>
+      client.updateAgentCapabilities(config.accountId, agentId, payload),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatagents", "agent-capabilities", config.accountId, variables.agentId],
+      });
+      // Also invalidate agent-tools since capabilities map to tools
+      queryClient.invalidateQueries({
+        queryKey: ["greatagents", "agent-tools"],
+      });
+    },
+  });
+}

package/src/hooks/use-integrations.ts

@@ -0,0 +1,114 @@
+import { useMemo } from "react";
+import type { GagentsHookConfig } from "./types";
+import { useToolCredentials } from "./use-settings";
+import { useAgentTools } from "./use-agent-tools";
+import { useTools } from "./use-tools";
+import {
+  INTEGRATIONS_REGISTRY,
+  type IntegrationDefinition,
+} from "../data/integrations-registry";
+import type { AgentTool, Tool, ToolCredential } from "../types";
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+export type IntegrationCardState =
+  | "available"
+  | "connected"
+  | "expired"
+  | "coming_soon";
+
+export interface IntegrationCardData {
+  /** Static definition from registry */
+  definition: IntegrationDefinition;
+  /** Resolved visual state */
+  state: IntegrationCardState;
+  /** Matching credential if one exists */
+  credential: ToolCredential | null;
+  /** Matching tool record if one exists */
+  tool: Tool | null;
+  /** How many agents share this credential */
+  sharedByAgentsCount: number;
+  /** Whether this agent has a linked agent_tool for this integration */
+  linkedToAgent: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+/**
+ * Cross-references the static integrations registry with live data
+ * (tools, tool_credentials, agent_tools) to produce card state for each
+ * integration entry.
+ */
+export function useIntegrationState(
+  config: GagentsHookConfig,
+  agentId: number | null,
+) {
+  const { data: credentialsData, isLoading: loadingCredentials } =
+    useToolCredentials(config);
+  const { data: toolsData, isLoading: loadingTools } = useTools(config);
+  const { data: agentToolsData, isLoading: loadingAgentTools } = useAgentTools(
+    config,
+    agentId ?? 0,
+  );
+
+  const isLoading = loadingCredentials || loadingTools || loadingAgentTools;
+
+  const cards: IntegrationCardData[] = useMemo(() => {
+    const credentials: ToolCredential[] = credentialsData?.data ?? [];
+    const tools: Tool[] = toolsData?.data ?? [];
+    const agentTools: AgentTool[] = agentToolsData?.data ?? [];
+
+    return INTEGRATIONS_REGISTRY.map((def) => {
+      // coming_soon short-circuit
+      if (def.status === "coming_soon") {
+        return {
+          definition: def,
+          state: "coming_soon" as const,
+          credential: null,
+          tool: null,
+          sharedByAgentsCount: 0,
+          linkedToAgent: false,
+        };
+      }
+
+      // 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;
+
+      // 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;
+
+      // Determine state
+      let state: IntegrationCardState = "available";
+      if (matchedCredential) {
+        state =
+          matchedCredential.status === "expired" ? "expired" : "connected";
+      }
+
+      return {
+        definition: def,
+        state,
+        credential: matchedCredential,
+        tool: matchedTool,
+        sharedByAgentsCount,
+        linkedToAgent,
+      };
+    });
+  }, [credentialsData, toolsData, agentToolsData]);
+
+  return { cards, isLoading };
+}

package/src/index.ts

@@ -13,6 +13,12 @@ export type {
   PromptVersion,
   Tool,
   ToolCredential,
+  CapabilityOperation,
+  CapabilityModule,
+  CapabilityCategory,
+  CapabilitiesResponse,
+  AgentCapability,
+  AgentCapabilitiesPayload,
 } from "./types";
 
 // Client
@@ -41,5 +47,33 @@ export { AgentConversationsPanel } from "./components/conversations/agent-conver
 export { AgentConversationsTable } from "./components/conversations/agent-conversations-table";
 export { ConversationView } from "./components/conversations/conversation-view";
 
+// Capabilities
+export { IntegrationCard } from "./components/capabilities/integration-card";
+export type { IntegrationCardProps } from "./components/capabilities/integration-card";
+export { IntegrationsTab } from "./components/capabilities/integrations-tab";
+export type { IntegrationsTabProps } from "./components/capabilities/integrations-tab";
+export { CapabilitiesTab } from "./components/capabilities/capabilities-tab";
+export type { CapabilitiesTabProps } from "./components/capabilities/capabilities-tab";
+export { AdvancedTab } from "./components/capabilities/advanced-tab";
+export type { AdvancedTabProps } from "./components/capabilities/advanced-tab";
+export { IntegrationWizard } from "./components/capabilities/integration-wizard";
+export type { IntegrationWizardProps } from "./components/capabilities/integration-wizard";
+export type {
+  WizardIntegrationMeta,
+  IntegrationCapability,
+  WizardStep,
+  OAuthStatus,
+  OAuthResult,
+} from "./components/capabilities/types";
+export type { ConfigOption } from "./components/capabilities/wizard-steps/config-step";
+
+// Data
+export { INTEGRATIONS_REGISTRY } from "./data/integrations-registry";
+export type {
+  IntegrationDefinition,
+  IntegrationAuthType,
+  IntegrationStatus,
+} from "./data/integrations-registry";
+
 // Page Compositions
 export * from "./pages";

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

@@ -0,0 +1,159 @@
+'use client';
+
+import { useState, useCallback } from "react";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@greatapps/greatauth-ui/ui";
+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
+// ---------------------------------------------------------------------------
+
+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,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+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.
+        </p>
+      </div>
+
+      <Tabs defaultValue="capacidades">
+        <TabsList>
+          <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="avancado" className="flex items-center gap-1.5">
+            <Settings aria-hidden="true" className="h-3.5 w-3.5" />
+            Avançado
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="capacidades" className="mt-4">
+          <CapabilitiesTab config={config} agentId={agentId} />
+        </TabsContent>
+
+        <TabsContent value="integracoes" className="mt-4">
+          <IntegrationsTab
+            config={config}
+            agentId={agentId}
+            onConnect={handleConnect}
+          />
+        </TabsContent>
+
+        <TabsContent value="avancado" className="mt-4">
+          <AdvancedTab
+            config={config}
+            agentId={agentId}
+            gagentsApiUrl={gagentsApiUrl}
+          />
+        </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>
+  );
+}