@greatapps/greatagents-ui 0.3.1 → 0.3.3

package/package.json

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

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/conversations/agent-conversations-table.tsx

@@ -89,11 +89,21 @@ export function AgentConversationsTable({
             <TableRow
               key={conversation.id}
               className="cursor-pointer"
+              role="button"
+              tabIndex={0}
               onClick={() =>
                 setSelectedId(
                   selectedId === conversation.id ? null : conversation.id,
                 )
               }
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setSelectedId(
+                    selectedId === conversation.id ? null : conversation.id,
+                  );
+                }
+              }}
               data-state={selectedId === conversation.id ? "selected" : undefined}
             >
               <TableCell className="font-mono text-xs">
@@ -111,10 +121,10 @@ export function AgentConversationsTable({
                   <span className="text-xs text-muted-foreground">—</span>
                 )}
               </TableCell>
-              <TableCell className="text-right">
+              <TableCell className="text-right tabular-nums">
                 {conversation.message_count ?? "—"}
               </TableCell>
-              <TableCell className="text-right">
+              <TableCell className="text-right tabular-nums">
                 {conversation.usage_tokens ?? "—"}
               </TableCell>
               <TableCell>
@@ -133,6 +143,7 @@ export function AgentConversationsTable({
                     <a
                       href={`/gchat/inbox/${conversation.id_external}`}
                       title="Ver no Chat"
+                      aria-label="Ver no Chat"
                       onClick={(e) => e.stopPropagation()}
                       className="inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
                     >

package/src/components/conversations/conversation-view.tsx

@@ -45,7 +45,7 @@ export function ConversationView({
           <p className="text-sm text-muted-foreground">
             Conversa não encontrada.
           </p>
-          <Button variant="ghost" size="icon" onClick={onClose}>
+          <Button variant="ghost" size="icon" aria-label="Fechar" onClick={onClose}>
             <X className="h-4 w-4" />
           </Button>
         </div>
@@ -58,7 +58,7 @@ export function ConversationView({
       <div className="flex items-center justify-between">
         <h3 className="font-semibold">Detalhes da conversa #{conversation.id}</h3>
         <div className="flex items-center gap-1">
-          <Button variant="ghost" size="icon" onClick={onClose}>
+          <Button variant="ghost" size="icon" aria-label="Fechar" onClick={onClose}>
             <X className="h-4 w-4" />
           </Button>
         </div>

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>