From 7e69ad8685f9bc4b96487c61ee04f12b23c7421b Mon Sep 17 00:00:00 2001 From: nogueiraguh Date: Tue, 3 Mar 2026 10:19:37 -0300 Subject: [PATCH] refactor: redesign MCP Servers menu for clearer layout Replace confusing table+upload card layout with individual server cards, radio button type selector with dynamic fields, and inline actions per server. --- frontend/index.html | 85 ++++++++++++++++++++++++++++----------------- 1 file changed, 53 insertions(+), 32 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 4233d9f..749e6b1 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -400,46 +400,67 @@ async function tGenai(id){try{const d=await $api('/genai/test/'+id,{method:'POST async function dGenai(id){if(!confirm('Excluir modelo?'))return;await $api('/genai/configs/'+id,{method:'DELETE'});S.genaiCfg=await $api('/genai/configs');R()} /* ── MCP Servers ── */ -function rMCP(){const adbOpts=S.adbCfg.map(a=>``).join(''); +function mcpTypeFields(){const t=document.getElementById('mt')?.value; + document.querySelectorAll('.mcp-f').forEach(el=>{el.style.display='none'}); + if(t==='stdio'){document.getElementById('mf-cmd').style.display='';document.getElementById('mf-args').style.display=''} + if(t==='sse')document.getElementById('mf-url').style.display=''; + if(t==='module'){document.getElementById('mf-cmd').style.display='';document.getElementById('mf-args').style.display=''}} +function rMCP(){const adbOpts=S.adbCfg.map(a=>``).join(''); return`
🔌 Servidores Registrados
- -${S.mcpSvr.map(m=>{const adb=m.linked_adb_id?S.adbCfg.find(a=>a.id===m.linked_adb_id):null; - return` - - - - -`}).join('')}
NomeTipoCmd / URLADB LinkStatusAções
${m.name}
${m.description||''}		${m.server_type}${m.command||m.url||m.module_path||'—'}${adb?`${adb.config_name}`:'—'}${m.is_active?'Ativo':'Inativo'} -
-${!S.mcpSvr.length?'

Nenhum MCP server registrado.

':''}
-
➕ Registrar MCP Server
-
Registre servidores MCP para execução de tarefas e integração com ferramentas.
+
MCP servers disponíveis para integração com ferramentas e execução de tarefas.
+${S.mcpSvr.length?S.mcpSvr.map(m=>{const adb=m.linked_adb_id?S.adbCfg.find(a=>a.id===m.linked_adb_id):null; + return`
+
+
${m.name} ${m.server_type} +${m.is_active?'Ativo':'Inativo'}
+
+
+${m.description?`
${m.description}
`:''} +
+${m.command?`
Comando: ${m.command}
`:''} +${m.url?`
URL: ${m.url}
`:''} +${m.module_path?`
Módulo: ${m.module_path}
`:''} +
ADB: ${adb?`${adb.config_name}`:'Nenhum'}
+
+ + + +
`}).join('') +:'

Nenhum MCP server registrado.

'}
+
➕ Registrar Novo Server
+
Configure um novo servidor MCP. Os campos se ajustam ao tipo selecionado.
-
-
-
-
MCP server usará este banco como ferramenta
-
-
-
📤 Upload & Vínculo
-
-
-
-
-
`} -async function sMcp(){try{let args=null;const a=document.getElementById('margs').value;if(a)try{args=JSON.parse(a)}catch(e){} +
+
+ + +
+
Comando para iniciar o servidor
+
+ +
Array de argumentos passados ao comando
+
+
Opcional — o MCP server poderá usar este banco como ferramenta.
+
+`} +async function sMcp(){try{let args=null;const a=document.getElementById('margs')?.value;if(a)try{args=JSON.parse(a)}catch(e){} + const mt=document.querySelector('input[name="mt"]:checked')?.value||'stdio'; await $api('/mcp/servers',{method:'POST',body:{name:document.getElementById('mn').value,description:document.getElementById('md').value, - server_type:document.getElementById('mt').value,command:document.getElementById('mcmd').value||null,url:document.getElementById('murl').value||null,args, + server_type:mt,command:document.getElementById('mcmd')?.value||null,url:document.getElementById('murl')?.value||null,args, linked_adb_id:document.getElementById('madb').value||null}}); S.mcpSvr=await $api('/mcp/servers');sm('mcm','✅ Registrado!','s');R()}catch(e){sm('mcm',e.message,'e')}} async function tgMcp(id){await $api('/mcp/servers/'+id+'/toggle',{method:'PUT'});S.mcpSvr=await $api('/mcp/servers');R()} async function dMcp(id){if(!confirm('Excluir server?'))return;await $api('/mcp/servers/'+id,{method:'DELETE'});S.mcpSvr=await $api('/mcp/servers');R()} -async function uMcp(){const fd=new FormData();const f=document.getElementById('muf').files[0];if(!f)return alert('Selecione um arquivo'); - fd.append('file',f);const id=document.getElementById('mup').value;if(!id)return alert('Selecione um server'); - try{await $api('/mcp/servers/'+id+'/upload',{method:'POST',body:fd,headers:{}});alert('Upload realizado!')}catch(e){alert(e.message)}} -async function lnkMcp(){const mid=document.getElementById('mup').value;const aid=document.getElementById('mlnk').value;if(!mid)return alert('Selecione MCP'); - try{await $api('/mcp/servers/'+mid+'/link-adb?adb_id='+(aid||''),{method:'PUT'});S.mcpSvr=await $api('/mcp/servers');alert('Vinculado!');R()}catch(e){alert(e.message)}} +async function uMcp(id){const fd=new FormData();const f=document.getElementById('muf_'+id)?.files[0];if(!f)return alert('Selecione um arquivo .py'); + fd.append('file',f);try{await $api('/mcp/servers/'+id+'/upload',{method:'POST',body:fd,headers:{}});alert('Upload realizado!')}catch(e){alert(e.message)}} +async function lnkMcp(id){const aid=document.getElementById('mlnk_'+id)?.value||''; + try{await $api('/mcp/servers/'+id+'/link-adb?adb_id='+aid,{method:'PUT'});S.mcpSvr=await $api('/mcp/servers');alert('Vinculado!');R()}catch(e){alert(e.message)}} /* ── ADB Vector ── */ function rADB(){return`
🗄️ Conexões Registradas