@greatapps/greatagents-ui 0.3.2 → 0.3.4

package/package.json

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

package/src/client/index.ts

@@ -12,6 +12,7 @@ import type {
   Tool,
   ToolCredential,
 } from "../types";
+import type { AgentCapability, AgentCapabilitiesPayload, CapabilitiesResponse } from "../types/capabilities";
 
 export interface GagentsClientConfig {
   baseUrl: string;
@@ -248,6 +249,19 @@ export function createGagentsClient(config: GagentsClientConfig) {
         undefined,
         { provider },
       ),
+
+    // --- Capabilities ---
+    getCapabilities: (idAccount: number) =>
+      request<CapabilitiesResponse>("GET", idAccount, "capabilities"),
+
+    getAgentCapabilities: (idAccount: number, idAgent: number) =>
+      request<AgentCapability[]>("GET", idAccount, `agents/${idAgent}/capabilities`),
+
+    updateAgentCapabilities: (
+      idAccount: number,
+      idAgent: number,
+      body: AgentCapabilitiesPayload,
+    ) => request<AgentCapability[]>("PUT", idAccount, `agents/${idAgent}/capabilities`, body),
   };
 }
 

package/src/components/agents/agent-edit-form.tsx

@@ -119,6 +119,7 @@ export function AgentEditForm({ config, agent, idAccount, open, onOpenChange }:
         <Label htmlFor="edit-title">Nome do Agente *</Label>
         <Input
           id="edit-title"
+          name="title"
           value={form.title}
           onChange={(e) => {
             setForm((prev) => ({
@@ -152,6 +153,7 @@ export function AgentEditForm({ config, agent, idAccount, open, onOpenChange }:
           <Label htmlFor="edit-delay">Delay de Digitação (s)</Label>
           <Input
             id="edit-delay"
+            name="delay"
             type="number"
             value={form.delayTyping}
             onChange={(e) => updateField("delayTyping", e.target.value)}
@@ -168,6 +170,7 @@ export function AgentEditForm({ config, agent, idAccount, open, onOpenChange }:
           <Label htmlFor="edit-waiting">Tempo de Espera (s)</Label>
           <Input
             id="edit-waiting"
+            name="waiting"
             type="number"
             value={form.waitingTime}
             onChange={(e) => updateField("waitingTime", e.target.value)}
@@ -193,7 +196,7 @@ export function AgentEditForm({ config, agent, idAccount, open, onOpenChange }:
         </Button>
         <Button type="submit" disabled={updateAgent.isPending}>
           {updateAgent.isPending && (
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Loader2 aria-hidden="true" className="mr-2 h-4 w-4 animate-spin" />
           )}
           Salvar
         </Button>

package/src/components/agents/agent-form-dialog.tsx

@@ -96,6 +96,7 @@ export function AgentFormDialog({
             <Label htmlFor="agent-photo">Foto (URL)</Label>
             <Input
               id="agent-photo"
+              name="photo"
               value={photo}
               onChange={(e) => setPhoto(e.target.value)}
               placeholder="https://exemplo.com/foto.jpg"
@@ -106,6 +107,7 @@ export function AgentFormDialog({
             <Label htmlFor="agent-title">Nome do Agente *</Label>
             <Input
               id="agent-title"
+              name="title"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="Ex: Assistente de Agendamento"
@@ -118,6 +120,7 @@ export function AgentFormDialog({
               <Label htmlFor="agent-delay">Delay de Digitação (ms)</Label>
               <Input
                 id="agent-delay"
+                name="delay"
                 type="number"
                 value={delayTyping}
                 onChange={(e) => setDelayTyping(e.target.value)}
@@ -130,6 +133,7 @@ export function AgentFormDialog({
               <Label htmlFor="agent-waiting">Tempo de Espera (ms)</Label>
               <Input
                 id="agent-waiting"
+                name="waiting"
                 type="number"
                 value={waitingTime}
                 onChange={(e) => setWaitingTime(e.target.value)}
@@ -150,7 +154,7 @@ export function AgentFormDialog({
             </Button>
             <Button type="submit" disabled={isPending || !title.trim()}>
               {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/agents/agent-objectives-list.tsx

@@ -238,7 +238,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                 className="flex items-center gap-3 rounded-lg border bg-card p-3"
               >
                 <SortableItemHandle className="shrink-0 text-muted-foreground hover:text-foreground">
-                  <GripVertical className="h-5 w-5" />
+                  <GripVertical aria-hidden="true" className="h-5 w-5" />
                 </SortableItemHandle>
 
                 <div className="flex flex-1 flex-col gap-1 min-w-0">
@@ -260,6 +260,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                 </div>
 
                 <Switch
+                  aria-label="Ativar/Desativar"
                   checked={objective.active}
                   onCheckedChange={(checked) =>
                     handleToggleActive(objective, checked)
@@ -270,6 +271,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                 <Button
                   variant="ghost"
                   size="icon"
+                  aria-label="Editar"
                   className="shrink-0 text-muted-foreground hover:text-foreground"
                   onClick={() => openEdit(objective)}
                 >
@@ -279,6 +281,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
                 <Button
                   variant="ghost"
                   size="icon"
+                  aria-label="Excluir"
                   className="shrink-0 text-muted-foreground hover:text-destructive"
                   onClick={() => setRemoveTarget(objective)}
                 >
@@ -292,7 +295,7 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
               const obj = sortedObjectives.find((o) => o.id === value);
               return (
                 <div className="flex items-center gap-3 rounded-lg border bg-card p-3 shadow-lg">
-                  <GripVertical className="h-5 w-5 text-muted-foreground" />
+                  <GripVertical aria-hidden="true" className="h-5 w-5 text-muted-foreground" />
                   <span className="font-medium">{obj?.title}</span>
                 </div>
               );
@@ -311,8 +314,10 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label>Título *</Label>
+              <Label htmlFor="objective-title">Título *</Label>
               <Input
+                id="objective-title"
+                name="title"
                 value={form.title}
                 onChange={(e) => {
                   const title = e.target.value;
@@ -327,8 +332,10 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
             </div>
 
             <div className="space-y-2">
-              <Label>Slug (identificador) *</Label>
+              <Label htmlFor="objective-slug">Slug (identificador) *</Label>
               <Input
+                id="objective-slug"
+                name="slug"
                 value={form.slug}
                 onChange={(e) => {
                   setSlugManual(true);
@@ -343,13 +350,15 @@ export function AgentObjectivesList({ agent, config }: AgentObjectivesListProps)
             </div>
 
             <div className="space-y-2">
-              <Label>Instruções do Objetivo</Label>
+              <Label htmlFor="objective-prompt">Instruções do Objetivo</Label>
               <Textarea
+                id="objective-prompt"
+                name="prompt"
                 value={form.prompt}
                 onChange={(e) =>
                   setForm((f) => ({ ...f, prompt: e.target.value }))
                 }
-                placeholder="Instruções detalhadas que o agente seguirá quando este objetivo for ativado. Ex: passos para agendar consulta, perguntas a fazer, validações necessárias..."
+                placeholder="Instru\u00e7\u00f5es detalhadas que o agente seguir\u00e1 quando este objetivo for ativado\u2026"
                 rows={8}
               />
               <p className="text-xs text-muted-foreground">

package/src/components/agents/agent-prompt-editor.tsx

@@ -214,24 +214,28 @@ export function AgentPromptEditor({ config, agent }: AgentPromptEditorProps) {
         <div className="space-y-2">
           <textarea
             ref={textareaRef}
+            aria-label="Prompt do sistema"
+            name="prompt"
             value={promptText}
             onChange={(e) => setPromptText(e.target.value)}
             onKeyDown={handleKeyDown}
-            placeholder="Escreva o prompt do sistema aqui..."
+            placeholder="Escreva o prompt do sistema aqui\u2026"
             disabled={updateAgent.isPending}
             className="w-full resize-none rounded-lg border bg-background p-3 font-mono text-sm leading-relaxed focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
             style={{ minHeight: "300px" }}
           />
           <div className="flex items-center gap-3 text-xs text-muted-foreground">
-            <span>{charCount.toLocaleString("pt-BR")} caracteres</span>
+            <span className="tabular-nums">{charCount.toLocaleString("pt-BR")} caracteres</span>
             <span>·</span>
-            <span>~{tokenEstimate.toLocaleString("pt-BR")} tokens</span>
+            <span className="tabular-nums">~{tokenEstimate.toLocaleString("pt-BR")} tokens</span>
           </div>
         </div>
 
         {/* Save row */}
         <div className="flex items-center gap-3">
           <Input
+            aria-label="Notas da alteração"
+            name="changeNotes"
             value={changeNotes}
             onChange={(e) => setChangeNotes(e.target.value)}
             placeholder="O que mudou? (opcional)"
@@ -390,7 +394,7 @@ export function AgentPromptEditor({ config, agent }: AgentPromptEditorProps) {
                         onClick={() => setCompareVersionId(isComparing ? null : version.id)}
                         className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
                       >
-                        <FileText className="h-3 w-3" />
+                        <FileText aria-hidden="true" className="h-3 w-3" />
                         {isComparing ? "Ocultar diff" : "Comparar"}
                       </button>
                       <button
@@ -398,7 +402,7 @@ export function AgentPromptEditor({ config, agent }: AgentPromptEditorProps) {
                         onClick={() => handleRestore(version)}
                         className="flex items-center gap-1 text-xs text-primary hover:underline"
                       >
-                        <RotateCcw className="h-3 w-3" />
+                        <RotateCcw aria-hidden="true" className="h-3 w-3" />
                         Restaurar
                       </button>
                     </div>

package/src/components/agents/agent-tabs.tsx

@@ -23,19 +23,19 @@ export function AgentTabs({ agent, config, renderChatLink }: AgentTabsProps) {
     <Tabs defaultValue="prompt">
       <TabsList>
         <TabsTrigger value="prompt" className="flex items-center gap-1.5">
-          <FileText className="h-3.5 w-3.5" />
+          <FileText aria-hidden="true" className="h-3.5 w-3.5" />
           Prompt
         </TabsTrigger>
         <TabsTrigger value="objetivos" className="flex items-center gap-1.5">
-          <Target className="h-3.5 w-3.5" />
+          <Target aria-hidden="true" className="h-3.5 w-3.5" />
           Objetivos
         </TabsTrigger>
         <TabsTrigger value="ferramentas" className="flex items-center gap-1.5">
-          <Wrench className="h-3.5 w-3.5" />
+          <Wrench aria-hidden="true" className="h-3.5 w-3.5" />
           Ferramentas
         </TabsTrigger>
         <TabsTrigger value="conversas" className="flex items-center gap-1.5">
-          <MessageCircle className="h-3.5 w-3.5" />
+          <MessageCircle aria-hidden="true" className="h-3.5 w-3.5" />
           Conversas
         </TabsTrigger>
       </TabsList>

package/src/components/agents/agent-tools-list.tsx

@@ -182,7 +182,9 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
           <PopoverContent className="w-72 p-0" align="end">
             <div className="p-2">
               <Input
-                placeholder="Buscar ferramenta..."
+                placeholder="Buscar ferramenta\u2026"
+                aria-label="Buscar ferramenta"
+                name="search"
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 className="h-8"
@@ -250,6 +252,7 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
                 </div>
 
                 <Switch
+                  aria-label="Ativar/Desativar"
                   checked={agentTool.enabled}
                   onCheckedChange={(checked) =>
                     handleToggleEnabled(agentTool, checked)
@@ -260,6 +263,7 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
                 <Button
                   variant="ghost"
                   size="icon"
+                  aria-label="Configurar"
                   className="shrink-0 text-muted-foreground hover:text-foreground"
                   onClick={() => openConfig(agentTool)}
                   title="Configurar instruções"
@@ -270,6 +274,7 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
                 <Button
                   variant="ghost"
                   size="icon"
+                  aria-label="Remover"
                   className="shrink-0 text-muted-foreground hover:text-destructive"
                   onClick={() => setRemoveTarget(agentTool)}
                 >
@@ -295,12 +300,12 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
           <div className="space-y-4">
             {configTarget && getToolInfo(configTarget.id_tool)?.type !== "none" && (
               <div className="space-y-2">
-                <Label>Credencial</Label>
+                <Label htmlFor="tool-credential">Credencial</Label>
                 <Select
                   value={configCredentialId || undefined}
                   onValueChange={(val) => setConfigCredentialId(val === "__none__" ? "" : val)}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger id="tool-credential">
                     <SelectValue placeholder="Selecione uma credencial (opcional)" />
                   </SelectTrigger>
                   <SelectContent>
@@ -320,11 +325,13 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
               </div>
             )}
             <div className="space-y-2">
-              <Label>Instruções Personalizadas</Label>
+              <Label htmlFor="tool-instructions">Instruções Personalizadas</Label>
               <Textarea
+                id="tool-instructions"
+                name="instructions"
                 value={configInstructions}
                 onChange={(e) => setConfigInstructions(e.target.value)}
-                placeholder="Instruções sobre como e quando o agente deve usar esta ferramenta..."
+                placeholder="Instru\u00e7\u00f5es sobre como e quando o agente deve usar esta ferramenta\u2026"
                 rows={6}
               />
               <p className="text-xs text-muted-foreground">

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

@@ -78,6 +78,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" />
@@ -91,6 +92,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" />
@@ -151,9 +153,12 @@ export function AgentsTable({ config, onNavigateToAgent }: { config: GagentsHook
     <>
       <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 agentes..."
+            placeholder="Buscar agentes\u2026"
+            aria-label="Buscar agentes"
+            name="search"
+            autoComplete="off"
             value={search}
             onChange={(e) => handleSearchChange(e.target.value)}
             className="pl-9"

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

@@ -0,0 +1,82 @@
+'use client';
+
+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";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface AdvancedTabProps {
+  config: GagentsHookConfig;
+  agentId: number;
+  gagentsApiUrl: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+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);
+
+  function handleEditTool(tool: Tool) {
+    setEditingTool(tool);
+    setShowToolForm(true);
+  }
+
+  function handleToolFormOpenChange(open: boolean) {
+    setShowToolForm(open);
+    if (!open) setEditingTool(null);
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Info banner */}
+      <div className="flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-950/30">
+        <Info className="mt-0.5 h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" />
+        <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.
+        </p>
+      </div>
+
+      {/* Ferramentas section */}
+      <section className="space-y-3">
+        <h3 className="text-sm font-medium">Ferramentas</h3>
+        <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}
+        onOpenChange={handleToolFormOpenChange}
+        tool={editingTool ?? undefined}
+        config={config}
+      />
+    </div>
+  );
+}