feat: add agent emoji, model, and last activity to agents page

This commit is contained in:
2026-03-04 15:38:53 -08:00
parent 65b1b42a79
commit 0e56f33539
2 changed files with 91 additions and 16 deletions

View File

@@ -116,13 +116,41 @@ function renderBoard() {
const cardEl = document.createElement('div');
cardEl.className = 'card';
cardEl.innerHTML = `
<div class="card-head">
<h3 class="card-title">${escapeHtml(task.title)}</h3>
<span class="badge priority-${task.priority}">${task.priority}</span>
<div class="agent-header">
<h3 class="agent-name">${agent.emoji || '🤖'} ${escapeHtml(agent.name)}</h3>
<span class="agent-status ${statusClass}">${agent.status}</span>
</div>
<div class="agent-meta">
<span class="agent-model">🧠 ${agent.model || 'unknown'}</span>
<span class="agent-activity">⏰ ${agent.lastActivity ? new Date(agent.lastActivity).toLocaleString() : 'Never'}</span>
</div>
<div class="agent-workload">
<span class="workload-badge">📋 ${agent.workload} active task${agent.workload !== 1 ? 's' : ''}</span>
</div>
<div class="agent-body">
<div class="agent-section">
<h4>📋 Current Task</h4>
<p class="agent-task">${agent.currentTask || 'No active task'}</p>
</div>
<p class="card-desc">${escapeHtml(task.description || '')}</p>
<p class="meta assignee">${task.assignee || 'Unassigned'}</p>
<p class="meta tags">${task.tags.map((t) => `<span class="tag">${escapeHtml(t)}</span>`).join(' ')}</p>
<div class="agent-section">
<h4>🛠️ Tools</h4>
<div class="agent-tools">
${agent.tools.length ? agent.tools.slice(0, 5).map((tool) => \`<span class="tool-tag">\${escapeHtml(tool)}</span>\`).join('') : '<span class="no-data">No tools</span>'}
${agent.tools.length > 5 ? \`<span class="more-tag">+\${agent.tools.length - 5} more</span>\` : ''}
</div>
</div>
<div class="agent-section">
<h4>📄 Recent Files</h4>
<div class="agent-files">
${agent.files.length ? agent.files.slice(0, 5).map((file) => \`<span class="file-tag">\${escapeHtml(file)}</span>\`).join('') : '<span class="no-data">No files</span>'}
</div>
</div>
</div>
<div class="agent-actions">
<button class="btn-secondary agent-details-btn" data-agent="\${escapeHtml(agent.name)}">Details</button>
<button class="btn-primary agent-assign-btn" data-agent="\${escapeHtml(agent.name)}">Assign Task</button>
</div>
`<span class="tag">${escapeHtml(t)}</span>`).join(' ')}</p>
<label>
<input type="checkbox" class="card-check" ${task.status === 'Done' ? 'checked' : ''} />
Mark Complete
@@ -419,9 +447,13 @@ function renderAgents(filter = '', statusFilter = '') {
cardEl.innerHTML = `
<div class="agent-header">
<h3 class="agent-name">${escapeHtml(agent.name)}</h3>
<h3 class="agent-name">${agent.emoji || '🤖'} ${escapeHtml(agent.name)}</h3>
<span class="agent-status ${statusClass}">${agent.status}</span>
</div>
<div class="agent-meta">
<span class="agent-model">🧠 ${agent.model || 'unknown'}</span>
<span class="agent-activity">⏰ ${agent.lastActivity ? new Date(agent.lastActivity).toLocaleString() : 'Never'}</span>
</div>
<div class="agent-workload">
<span class="workload-badge">📋 ${agent.workload} active task${agent.workload !== 1 ? 's' : ''}</span>
</div>
@@ -433,7 +465,22 @@ function renderAgents(filter = '', statusFilter = '') {
<div class="agent-section">
<h4>🛠️ Tools</h4>
<div class="agent-tools">
${agent.tools.length ? agent.tools.slice(0, 5).map((tool) => `<span class="tool-tag">${escapeHtml(tool)}</span>`).join('') : '<span class="no-data">No tools</span>'}
${agent.tools.length ? agent.tools.slice(0, 5).map((tool) => \`<span class="tool-tag">\${escapeHtml(tool)}</span>\`).join('') : '<span class="no-data">No tools</span>'}
${agent.tools.length > 5 ? \`<span class="more-tag">+\${agent.tools.length - 5} more</span>\` : ''}
</div>
</div>
<div class="agent-section">
<h4>📄 Recent Files</h4>
<div class="agent-files">
${agent.files.length ? agent.files.slice(0, 5).map((file) => \`<span class="file-tag">\${escapeHtml(file)}</span>\`).join('') : '<span class="no-data">No files</span>'}
</div>
</div>
</div>
<div class="agent-actions">
<button class="btn-secondary agent-details-btn" data-agent="\${escapeHtml(agent.name)}">Details</button>
<button class="btn-primary agent-assign-btn" data-agent="\${escapeHtml(agent.name)}">Assign Task</button>
</div>
`<span class="tool-tag">${escapeHtml(tool)}</span>`).join('') : '<span class="no-data">No tools</span>'}
${agent.tools.length > 5 ? `<span class="more-tag">+${agent.tools.length - 5} more</span>` : ''}
</div>
</div>