723a08d2e1
Painel administrativo web para orquestração de agentes Claude Code com suporte a execução de tarefas, agendamento cron, pipelines sequenciais e terminal com streaming em tempo real via WebSocket.
310 lines
9.6 KiB
JavaScript
310 lines
9.6 KiB
JavaScript
const AgentsUI = {
|
||
agents: [],
|
||
|
||
avatarColors: [
|
||
'#6366f1',
|
||
'#8b5cf6',
|
||
'#ec4899',
|
||
'#f59e0b',
|
||
'#10b981',
|
||
'#3b82f6',
|
||
'#ef4444',
|
||
'#14b8a6',
|
||
],
|
||
|
||
async load() {
|
||
try {
|
||
AgentsUI.agents = await API.agents.list();
|
||
AgentsUI.render();
|
||
} catch (err) {
|
||
Toast.error(`Erro ao carregar agentes: ${err.message}`);
|
||
}
|
||
},
|
||
|
||
render() {
|
||
const grid = document.getElementById('agents-grid');
|
||
const empty = document.getElementById('agents-empty-state');
|
||
|
||
if (!grid) return;
|
||
|
||
if (AgentsUI.agents.length === 0) {
|
||
if (empty) empty.style.display = 'flex';
|
||
return;
|
||
}
|
||
|
||
if (empty) empty.style.display = 'none';
|
||
|
||
const existingCards = grid.querySelectorAll('.agent-card');
|
||
existingCards.forEach((c) => c.remove());
|
||
|
||
const fragment = document.createDocumentFragment();
|
||
AgentsUI.agents.forEach((agent) => {
|
||
const wrapper = document.createElement('div');
|
||
wrapper.innerHTML = AgentsUI.renderCard(agent);
|
||
fragment.appendChild(wrapper.firstElementChild);
|
||
});
|
||
|
||
grid.appendChild(fragment);
|
||
|
||
if (window.lucide) lucide.createIcons({ nodes: [grid] });
|
||
},
|
||
|
||
renderCard(agent) {
|
||
const name = agent.agent_name || agent.name || 'Sem nome';
|
||
const color = AgentsUI.getAvatarColor(name);
|
||
const initials = AgentsUI.getInitials(name);
|
||
const statusLabel = agent.status === 'active' ? 'Ativo' : 'Inativo';
|
||
const statusClass = agent.status === 'active' ? 'badge-active' : 'badge-inactive';
|
||
const model = (agent.config && agent.config.model) || agent.model || 'claude-sonnet-4-6';
|
||
const updatedAt = AgentsUI.formatDate(agent.updated_at || agent.updatedAt || agent.created_at || agent.createdAt);
|
||
|
||
return `
|
||
<div class="agent-card" data-agent-id="${agent.id}">
|
||
<div class="agent-card-body">
|
||
<div class="agent-card-top">
|
||
<div class="agent-avatar" style="background-color: ${color}" aria-hidden="true">
|
||
<span>${initials}</span>
|
||
</div>
|
||
<div class="agent-info">
|
||
<h3 class="agent-name">${name}</h3>
|
||
<span class="badge ${statusClass}">${statusLabel}</span>
|
||
</div>
|
||
</div>
|
||
|
||
${agent.description ? `<p class="agent-description">${agent.description}</p>` : ''}
|
||
|
||
<div class="agent-meta">
|
||
<span class="agent-meta-item">
|
||
<i data-lucide="cpu"></i>
|
||
${model}
|
||
</span>
|
||
<span class="agent-meta-item">
|
||
<i data-lucide="clock"></i>
|
||
${updatedAt}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agent-actions">
|
||
<button class="btn btn-primary btn-sm" data-action="execute" data-id="${agent.id}">
|
||
<i data-lucide="play"></i>
|
||
Executar
|
||
</button>
|
||
<button class="btn btn-ghost btn-sm" data-action="edit" data-id="${agent.id}">
|
||
<i data-lucide="pencil"></i>
|
||
Editar
|
||
</button>
|
||
<button class="btn btn-ghost btn-icon btn-sm" data-action="export" data-id="${agent.id}" title="Exportar agente">
|
||
<i data-lucide="download"></i>
|
||
</button>
|
||
<button class="btn btn-ghost btn-icon btn-sm btn-danger" data-action="delete" data-id="${agent.id}" title="Excluir agente">
|
||
<i data-lucide="trash-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
},
|
||
|
||
openCreateModal() {
|
||
const form = document.getElementById('agent-form');
|
||
if (form) form.reset();
|
||
|
||
const idField = document.getElementById('agent-form-id');
|
||
if (idField) idField.value = '';
|
||
|
||
const titleEl = document.getElementById('agent-modal-title');
|
||
if (titleEl) titleEl.textContent = 'Novo Agente';
|
||
|
||
const toggle = document.getElementById('agent-status-toggle');
|
||
if (toggle) toggle.checked = true;
|
||
|
||
const tagsHidden = document.getElementById('agent-tags');
|
||
if (tagsHidden) tagsHidden.value = '[]';
|
||
|
||
const tagsChips = document.getElementById('agent-tags-chips');
|
||
if (tagsChips) tagsChips.innerHTML = '';
|
||
|
||
Modal.open('agent-modal-overlay');
|
||
},
|
||
|
||
async openEditModal(agentId) {
|
||
try {
|
||
const agent = await API.agents.get(agentId);
|
||
|
||
const titleEl = document.getElementById('agent-modal-title');
|
||
if (titleEl) titleEl.textContent = 'Editar Agente';
|
||
|
||
const fields = {
|
||
'agent-form-id': agent.id,
|
||
'agent-name': agent.agent_name || agent.name || '',
|
||
'agent-description': agent.description || '',
|
||
'agent-system-prompt': (agent.config && agent.config.systemPrompt) || '',
|
||
'agent-model': (agent.config && agent.config.model) || 'claude-sonnet-4-6',
|
||
'agent-workdir': (agent.config && agent.config.workingDirectory) || '',
|
||
};
|
||
|
||
for (const [fieldId, value] of Object.entries(fields)) {
|
||
const el = document.getElementById(fieldId);
|
||
if (el) el.value = value;
|
||
}
|
||
|
||
const toggle = document.getElementById('agent-status-toggle');
|
||
if (toggle) toggle.checked = agent.status === 'active';
|
||
|
||
const tags = Array.isArray(agent.tags) ? agent.tags : [];
|
||
const tagsHidden = document.getElementById('agent-tags');
|
||
if (tagsHidden) tagsHidden.value = JSON.stringify(tags);
|
||
|
||
const tagsChips = document.getElementById('agent-tags-chips');
|
||
if (tagsChips) {
|
||
tagsChips.innerHTML = tags.map((t) =>
|
||
`<span class="tag-chip">${t}<button type="button" data-tag="${t}" class="tag-remove" aria-label="Remover tag ${t}">×</button></span>`
|
||
).join('');
|
||
}
|
||
|
||
Modal.open('agent-modal-overlay');
|
||
} catch (err) {
|
||
Toast.error(`Erro ao carregar agente: ${err.message}`);
|
||
}
|
||
},
|
||
|
||
async save() {
|
||
const idEl = document.getElementById('agent-form-id');
|
||
const id = idEl ? idEl.value.trim() : '';
|
||
|
||
const nameEl = document.getElementById('agent-name');
|
||
if (!nameEl || !nameEl.value.trim()) {
|
||
Toast.warning('Nome do agente é obrigatório');
|
||
return;
|
||
}
|
||
|
||
const tagsHidden = document.getElementById('agent-tags');
|
||
let tags = [];
|
||
try {
|
||
tags = JSON.parse(tagsHidden?.value || '[]');
|
||
} catch {
|
||
tags = [];
|
||
}
|
||
|
||
const toggle = document.getElementById('agent-status-toggle');
|
||
|
||
const data = {
|
||
agent_name: nameEl.value.trim(),
|
||
description: document.getElementById('agent-description')?.value.trim() || '',
|
||
status: toggle && toggle.checked ? 'active' : 'inactive',
|
||
config: {
|
||
systemPrompt: document.getElementById('agent-system-prompt')?.value.trim() || '',
|
||
model: document.getElementById('agent-model')?.value || 'claude-sonnet-4-6',
|
||
workingDirectory: document.getElementById('agent-workdir')?.value.trim() || '',
|
||
},
|
||
};
|
||
|
||
try {
|
||
if (id) {
|
||
await API.agents.update(id, data);
|
||
Toast.success('Agente atualizado com sucesso');
|
||
} else {
|
||
await API.agents.create(data);
|
||
Toast.success('Agente criado com sucesso');
|
||
}
|
||
|
||
Modal.close('agent-modal-overlay');
|
||
await AgentsUI.load();
|
||
} catch (err) {
|
||
Toast.error(`Erro ao salvar agente: ${err.message}`);
|
||
}
|
||
},
|
||
|
||
async delete(agentId) {
|
||
const confirmed = await Modal.confirm(
|
||
'Excluir agente',
|
||
'Tem certeza que deseja excluir este agente? Esta ação não pode ser desfeita.'
|
||
);
|
||
|
||
if (!confirmed) return;
|
||
|
||
try {
|
||
await API.agents.delete(agentId);
|
||
Toast.success('Agente excluído com sucesso');
|
||
await AgentsUI.load();
|
||
} catch (err) {
|
||
Toast.error(`Erro ao excluir agente: ${err.message}`);
|
||
}
|
||
},
|
||
|
||
async execute(agentId) {
|
||
const agent = AgentsUI.agents.find((a) => a.id === agentId);
|
||
|
||
try {
|
||
const allAgents = AgentsUI.agents.length > 0 ? AgentsUI.agents : await API.agents.list();
|
||
const selectEl = document.getElementById('execute-agent-select');
|
||
|
||
if (selectEl) {
|
||
selectEl.innerHTML = '<option value="">Selecionar agente...</option>' +
|
||
allAgents
|
||
.filter((a) => a.status === 'active')
|
||
.map((a) => `<option value="${a.id}">${a.agent_name || a.name}</option>`)
|
||
.join('');
|
||
|
||
selectEl.value = agentId;
|
||
}
|
||
|
||
const hiddenId = document.getElementById('execute-agent-id');
|
||
if (hiddenId) hiddenId.value = agentId;
|
||
|
||
const taskEl = document.getElementById('execute-task-desc');
|
||
if (taskEl) taskEl.value = '';
|
||
|
||
const instructionsEl = document.getElementById('execute-instructions');
|
||
if (instructionsEl) instructionsEl.value = '';
|
||
|
||
Modal.open('execute-modal-overlay');
|
||
} catch (err) {
|
||
Toast.error(`Erro ao abrir modal de execução: ${err.message}`);
|
||
}
|
||
},
|
||
|
||
async export(agentId) {
|
||
try {
|
||
const data = await API.agents.export(agentId);
|
||
const jsonEl = document.getElementById('export-code-content');
|
||
if (jsonEl) jsonEl.textContent = JSON.stringify(data, null, 2);
|
||
Modal.open('export-modal-overlay');
|
||
} catch (err) {
|
||
Toast.error(`Erro ao exportar agente: ${err.message}`);
|
||
}
|
||
},
|
||
|
||
getAvatarColor(name) {
|
||
let hash = 0;
|
||
for (let i = 0; i < name.length; i++) {
|
||
hash = name.charCodeAt(i) + ((hash << 5) - hash);
|
||
}
|
||
const index = Math.abs(hash) % AgentsUI.avatarColors.length;
|
||
return AgentsUI.avatarColors[index];
|
||
},
|
||
|
||
getInitials(name) {
|
||
return name
|
||
.split(' ')
|
||
.slice(0, 2)
|
||
.map((w) => w[0])
|
||
.join('')
|
||
.toUpperCase();
|
||
},
|
||
|
||
formatDate(isoString) {
|
||
if (!isoString) return '—';
|
||
const date = new Date(isoString);
|
||
return date.toLocaleDateString('pt-BR', {
|
||
day: '2-digit',
|
||
month: '2-digit',
|
||
year: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
},
|
||
};
|
||
|
||
window.AgentsUI = AgentsUI;
|