let healthChart = null;
async function renderDashboard() {
const content = document.getElementById('pageContent');
let status;
try {
status = await api.getStatus();
} catch {
content.innerHTML = '⚠
Cannot connect to server
Make sure server.py is running
`;
// Fill stat cards
const agents = status.agents || [];
document.getElementById('agentsOnline').textContent = `${agents.filter(a => a.status === 'online').length}/${agents.length}`;
document.getElementById('skillsCount').textContent = status.skills_count || 0;
document.getElementById('systemUptime').textContent = status.uptime ? Math.floor((Date.now()/1000 - status.uptime) / 60) + ' min' : '-';
document.getElementById('healthStatus').textContent = status.status === 'healthy' ? 'Healthy' : 'Degraded';
document.getElementById('healthStatus').style.color = status.status === 'healthy' ? 'var(--green)' : 'var(--red)';
// Agent list
const agentList = document.getElementById('agentList');
agents.forEach(a => {
agentList.innerHTML += `
`;
});
// Skill select
try {
const skills = await api.getSkills();
const select = document.getElementById('quickSkillSelect');
skills.forEach(s => {
const opt = document.createElement('option');
opt.value = s.name;
opt.textContent = s.name;
select.appendChild(opt);
});
} catch {}
// Recent activity
try {
const audit = await api.getAudit(10);
const activity = document.getElementById('recentActivity');
if (audit.entries && audit.entries.length > 0) {
activity.innerHTML = audit.entries.reverse().map(e => `
${formatDate(e.timestamp)}
${e.action}
${e.skill || e.file || ''}
`).join('');
} else {
activity.innerHTML = 'No activity yet
';
}
} catch {}
}
async function quickRunSkill() {
const select = document.getElementById('quickSkillSelect');
const input = document.getElementById('quickSkillInput');
const result = document.getElementById('quickRunResult');
if (!select.value) { showToast('Select a skill first', 'error'); return; }
result.innerHTML = 'Running...';
try {
const r = await api.runSkill(select.value, input.value);
result.innerHTML = `✓ ${r.message}`;
showToast(`Skill '${select.value}' dispatched to ${r.agent}`, 'success');
} catch (err) {
result.innerHTML = `✗ ${err.message}`;
}
}
async function refreshDashboard() {
showToast('Refreshing dashboard...', 'info');
renderDashboard();
}