Christopher Mayor
e05dfef5ab
- Added comprehensive wiki backend with CRUD operations (GET, POST, PUT, DELETE) - Enhanced agents backend with workload tracking, task history, and capabilities - Implemented usage tracking with SQLite database and statistics endpoints - Added wiki frontend with markdown editor, page management, and search - Enhanced agents frontend with search, filtering, task assignment, and detailed modals - Enhanced usage frontend with charts (Chart.js), date filtering, and export functionality - Updated styles for all new components with responsive design - Added new API endpoints: /api/wiki/*, /api/usage/stats, /api/usage/agents, /api/usage/export - Enhanced /api/agents with workload and task history data - Maintained backwards compatibility with existing task management features The refactoring includes: - Wiki: Full CRUD operations with markdown support - Agents: Search, workload tracking, task assignment modals - Usage: Charts, statistics, date range filtering, CSV/JSON export - Styles: Responsive design with dark theme support
731 lines
25 KiB
JavaScript
731 lines
25 KiB
JavaScript
// ============ NAVIGATION ============
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const pages = document.querySelectorAll('.page');
|
|
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const targetPage = link.dataset.page;
|
|
|
|
// Update active nav link
|
|
navLinks.forEach(l => l.classList.remove('active'));
|
|
link.classList.add('active');
|
|
|
|
// Show target page
|
|
pages.forEach(page => {
|
|
page.classList.remove('active');
|
|
if (page.id === `page-${targetPage}`) {
|
|
page.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// Load page data
|
|
if (targetPage === 'wiki') loadWiki();
|
|
if (targetPage === 'agents') loadAgents();
|
|
if (targetPage === 'usage') loadUsage();
|
|
});
|
|
});
|
|
|
|
// ============ TASK DASHBOARD ============
|
|
const COLUMNS = {
|
|
'Backlog': { title: '📋 Backlog', tasks: [] },
|
|
'Todo': { title: '📝 Todo', tasks: [] },
|
|
'In Progress': { title: '🔄 In Progress', tasks: [] },
|
|
'Review': { title: '👀 Review', tasks: [] },
|
|
'Done': { title: '✅ Done', tasks: [] }
|
|
};
|
|
|
|
async function loadTasks() {
|
|
const res = await fetch('/api/tasks');
|
|
const tasks = await res.json();
|
|
|
|
// Reset columns
|
|
Object.keys(COLUMNS).forEach(status => {
|
|
COLUMNS[status].tasks = [];
|
|
});
|
|
|
|
// Group tasks by status
|
|
tasks.forEach(task => {
|
|
if (COLUMNS[task.status]) {
|
|
COLUMNS[task.status].tasks.push(task);
|
|
}
|
|
});
|
|
|
|
renderBoard();
|
|
}
|
|
|
|
function renderBoard() {
|
|
const board = document.getElementById('board');
|
|
board.innerHTML = '';
|
|
|
|
Object.entries(COLUMNS).forEach(([status, column]) => {
|
|
const columnEl = document.createElement('div');
|
|
columnEl.className = 'column';
|
|
|
|
columnEl.innerHTML = `
|
|
<div class="column-header">
|
|
<h3>${column.title}</h3>
|
|
<span class="column-count">${column.tasks.length}</span>
|
|
</div>
|
|
<div class="cards"></div>
|
|
`;
|
|
|
|
const cardsEl = columnEl.querySelector('.cards');
|
|
|
|
column.tasks.forEach(task => {
|
|
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>
|
|
<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>
|
|
<label>
|
|
<input type="checkbox" class="card-check" ${task.status === 'Done' ? 'checked' : ''} />
|
|
Mark Complete
|
|
</label>
|
|
`;
|
|
|
|
// Checkbox handler
|
|
const checkbox = cardEl.querySelector('.card-check');
|
|
checkbox.addEventListener('change', async () => {
|
|
await fetch(`/api/tasks/${task.id}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ status: 'Done' })
|
|
});
|
|
loadTasks();
|
|
});
|
|
|
|
cardsEl.appendChild(cardEl);
|
|
});
|
|
|
|
board.appendChild(columnEl);
|
|
});
|
|
}
|
|
|
|
// Task form
|
|
document.getElementById('task-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(e.target);
|
|
const task = {
|
|
title: formData.get('title'),
|
|
description: formData.get('description'),
|
|
assignee: formData.get('assignee'),
|
|
priority: formData.get('priority'),
|
|
status: formData.get('status') || 'Backlog',
|
|
tags: formData.get('tags').split(',').map(t => t.trim()).filter(t => t)
|
|
};
|
|
|
|
await fetch('/api/tasks', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(task)
|
|
});
|
|
|
|
e.target.reset();
|
|
loadTasks();
|
|
});
|
|
|
|
// Populate agent dropdown
|
|
async function populateAgentDropdown() {
|
|
try {
|
|
const res = await fetch('/api/agents');
|
|
const agents = await res.json();
|
|
|
|
const select = document.getElementById('assignee');
|
|
if (!select) return;
|
|
|
|
// Keep the first option ("Select agent...")
|
|
const firstOption = select.options[0];
|
|
select.innerHTML = '';
|
|
select.appendChild(firstOption);
|
|
|
|
// Add agent options
|
|
agents.forEach(agent => {
|
|
const option = document.createElement('option');
|
|
option.value = agent.name;
|
|
option.textContent = agent.name;
|
|
select.appendChild(option);
|
|
});
|
|
} catch (err) {
|
|
console.error('Failed to load agents for dropdown:', err);
|
|
}
|
|
}
|
|
|
|
// ============ WIKI ============
|
|
let wikiPages = [];
|
|
let currentWikiPage = null;
|
|
let isEditingWiki = false;
|
|
|
|
async function loadWiki() {
|
|
try {
|
|
const res = await fetch('/api/wiki');
|
|
wikiPages = await res.json();
|
|
renderWikiList();
|
|
} catch (err) {
|
|
console.error('Failed to load wiki:', err);
|
|
}
|
|
}
|
|
|
|
function renderWikiList(filter = '') {
|
|
const wikiList = document.getElementById('wiki-list');
|
|
wikiList.innerHTML = '';
|
|
|
|
const filtered = filter
|
|
? wikiPages.filter(p => p.title.toLowerCase().includes(filter.toLowerCase()) || p.filename.toLowerCase().includes(filter.toLowerCase()))
|
|
: wikiPages;
|
|
|
|
filtered.forEach(page => {
|
|
const itemEl = document.createElement('div');
|
|
itemEl.className = 'wiki-item' + (currentWikiPage && currentWikiPage.filename === page.filename ? ' active' : '');
|
|
itemEl.innerHTML = `
|
|
<h4 class="wiki-title">${escapeHtml(page.title)}</h4>
|
|
<p class="wiki-date">${new Date(page.modified).toLocaleDateString()}</p>
|
|
`;
|
|
|
|
itemEl.addEventListener('click', () => selectWikiPage(page.filename));
|
|
wikiList.appendChild(itemEl);
|
|
});
|
|
}
|
|
|
|
// Wiki search
|
|
document.getElementById('wiki-search').addEventListener('input', (e) => {
|
|
renderWikiList(e.target.value);
|
|
});
|
|
|
|
// New wiki page
|
|
document.getElementById('wiki-new-btn').addEventListener('click', async () => {
|
|
const title = prompt('Enter page title:');
|
|
if (!title) return;
|
|
|
|
try {
|
|
const res = await fetch('/api/wiki', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ title })
|
|
});
|
|
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
await loadWiki();
|
|
selectWikiPage(data.filename);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to create wiki page:', err);
|
|
}
|
|
});
|
|
|
|
async function selectWikiPage(filename) {
|
|
try {
|
|
const res = await fetch(`/api/wiki/${filename}`);
|
|
if (!res.ok) throw new Error('Page not found');
|
|
|
|
currentWikiPage = await res.json();
|
|
|
|
// Update UI
|
|
document.getElementById('wiki-page-title').textContent = currentWikiPage.metadata.title || filename;
|
|
document.getElementById('wiki-page-actions').style.display = 'flex';
|
|
|
|
// Render markdown
|
|
const contentEl = document.getElementById('wiki-content');
|
|
contentEl.style.display = 'block';
|
|
document.getElementById('wiki-editor').style.display = 'none';
|
|
|
|
if (typeof marked !== 'undefined') {
|
|
contentEl.innerHTML = marked.parse(currentWikiPage.content);
|
|
} else {
|
|
contentEl.innerHTML = `<pre>${escapeHtml(currentWikiPage.content)}</pre>`;
|
|
}
|
|
|
|
// Update list selection
|
|
renderWikiList(document.getElementById('wiki-search').value);
|
|
} catch (err) {
|
|
console.error('Failed to load wiki page:', err);
|
|
}
|
|
}
|
|
|
|
// Edit wiki page
|
|
document.getElementById('wiki-edit-btn').addEventListener('click', () => {
|
|
if (!currentWikiPage) return;
|
|
|
|
isEditingWiki = true;
|
|
document.getElementById('wiki-content').style.display = 'none';
|
|
document.getElementById('wiki-editor').style.display = 'block';
|
|
document.getElementById('wiki-edit-title').value = currentWikiPage.metadata.title || '';
|
|
document.getElementById('wiki-edit-content').value = currentWikiPage.content;
|
|
});
|
|
|
|
// Save wiki page
|
|
document.getElementById('wiki-save-btn').addEventListener('click', async () => {
|
|
if (!currentWikiPage) return;
|
|
|
|
const content = document.getElementById('wiki-edit-content').value;
|
|
|
|
try {
|
|
const res = await fetch(`/api/wiki/${currentWikiPage.filename}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ content })
|
|
});
|
|
|
|
if (res.ok) {
|
|
isEditingWiki = false;
|
|
await selectWikiPage(currentWikiPage.filename);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to save wiki page:', err);
|
|
}
|
|
});
|
|
|
|
// Cancel edit
|
|
document.getElementById('wiki-cancel-btn').addEventListener('click', () => {
|
|
isEditingWiki = false;
|
|
document.getElementById('wiki-editor').style.display = 'none';
|
|
document.getElementById('wiki-content').style.display = 'block';
|
|
});
|
|
|
|
// Delete wiki page
|
|
document.getElementById('wiki-delete-btn').addEventListener('click', async () => {
|
|
if (!currentWikiPage) return;
|
|
|
|
if (!confirm(`Delete "${currentWikiPage.metadata.title || currentWikiPage.filename}"?`)) return;
|
|
|
|
try {
|
|
const res = await fetch(`/api/wiki/${currentWikiPage.filename}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (res.ok) {
|
|
currentWikiPage = null;
|
|
document.getElementById('wiki-page-title').textContent = 'Select a page';
|
|
document.getElementById('wiki-page-actions').style.display = 'none';
|
|
document.getElementById('wiki-content').innerHTML = '<div class="wiki-placeholder"><p>📚 Select a wiki page from the sidebar or create a new one.</p></div>';
|
|
await loadWiki();
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to delete wiki page:', err);
|
|
}
|
|
});
|
|
|
|
// ============ AGENTS ============
|
|
let allAgents = [];
|
|
|
|
async function loadAgents() {
|
|
try {
|
|
const res = await fetch('/api/agents');
|
|
allAgents = await res.json();
|
|
renderAgents();
|
|
} catch (err) {
|
|
console.error('Failed to load agents:', err);
|
|
}
|
|
}
|
|
|
|
function renderAgents(filter = '', statusFilter = '') {
|
|
const grid = document.getElementById('agents-grid');
|
|
grid.innerHTML = '';
|
|
|
|
let filtered = allAgents;
|
|
|
|
if (filter) {
|
|
filtered = filtered.filter(a =>
|
|
a.name.toLowerCase().includes(filter.toLowerCase()) ||
|
|
(a.currentTask && a.currentTask.toLowerCase().includes(filter.toLowerCase()))
|
|
);
|
|
}
|
|
|
|
if (statusFilter) {
|
|
filtered = filtered.filter(a => a.status === statusFilter);
|
|
}
|
|
|
|
filtered.forEach(agent => {
|
|
const cardEl = document.createElement('div');
|
|
cardEl.className = 'agent-card';
|
|
|
|
const statusClass = `status-${agent.status}`;
|
|
|
|
cardEl.innerHTML = `
|
|
<div class="agent-header">
|
|
<h3 class="agent-name">${escapeHtml(agent.name)}</h3>
|
|
<span class="agent-status ${statusClass}">${agent.status}</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>
|
|
<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>
|
|
`;
|
|
|
|
// Details button
|
|
cardEl.querySelector('.agent-details-btn').addEventListener('click', () => showAgentDetails(agent));
|
|
|
|
// Assign button
|
|
cardEl.querySelector('.agent-assign-btn').addEventListener('click', () => showAssignModal(agent.name));
|
|
|
|
grid.appendChild(cardEl);
|
|
});
|
|
}
|
|
|
|
// Agent search
|
|
document.getElementById('agent-search').addEventListener('input', (e) => {
|
|
const statusFilter = document.getElementById('agent-status-filter').value;
|
|
renderAgents(e.target.value, statusFilter);
|
|
});
|
|
|
|
// Agent status filter
|
|
document.getElementById('agent-status-filter').addEventListener('change', (e) => {
|
|
const searchFilter = document.getElementById('agent-search').value;
|
|
renderAgents(searchFilter, e.target.value);
|
|
});
|
|
|
|
// Agent details modal
|
|
function showAgentDetails(agent) {
|
|
const modal = document.getElementById('agent-modal');
|
|
const body = document.getElementById('modal-agent-body');
|
|
|
|
document.getElementById('modal-agent-name').textContent = agent.name;
|
|
|
|
body.innerHTML = `
|
|
<div class="detail-section">
|
|
<h4>Status</h4>
|
|
<p><span class="agent-status status-${agent.status}">${agent.status}</span></p>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>Workload</h4>
|
|
<p>${agent.workload} active task${agent.workload !== 1 ? 's' : ''}</p>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>Current Task</h4>
|
|
<p>${agent.currentTask || 'No active task'}</p>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>Active Tasks</h4>
|
|
<ul class="task-list">
|
|
${agent.activeTasks.length
|
|
? agent.activeTasks.map(t => `<li><strong>${escapeHtml(t.title)}</strong> <span class="badge priority-${t.priority}">${t.priority}</span></li>`).join('')
|
|
: '<li class="no-data">No active tasks</li>'}
|
|
</ul>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>Recently Completed</h4>
|
|
<ul class="task-list">
|
|
${agent.completedTasks.length
|
|
? agent.completedTasks.map(t => `<li>${escapeHtml(t.title)}</li>`).join('')
|
|
: '<li class="no-data">No completed tasks</li>'}
|
|
</ul>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>Tools</h4>
|
|
<div class="tag-list">${agent.tools.length ? agent.tools.map(t => `<span class="tool-tag">${escapeHtml(t)}</span>`).join('') : '<span class="no-data">No tools</span>'}</div>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4>Capabilities</h4>
|
|
<div class="tag-list">${agent.capabilities.length ? agent.capabilities.map(c => `<span class="capability-tag">${escapeHtml(c)}</span>`).join('') : '<span class="no-data">No capabilities defined</span>'}</div>
|
|
</div>
|
|
`;
|
|
|
|
modal.classList.add('active');
|
|
}
|
|
|
|
// Close agent modal
|
|
document.getElementById('modal-close').addEventListener('click', () => {
|
|
document.getElementById('agent-modal').classList.remove('active');
|
|
});
|
|
|
|
// Assign task modal
|
|
async function showAssignModal(agentName) {
|
|
const modal = document.getElementById('assign-modal');
|
|
document.getElementById('assign-agent-name').textContent = agentName;
|
|
|
|
// Load unassigned tasks
|
|
try {
|
|
const res = await fetch('/api/tasks');
|
|
const tasks = await res.json();
|
|
const unassignedTasks = tasks.filter(t => t.status !== 'Done' && (!t.assignee || t.assignee === ''));
|
|
|
|
const select = document.getElementById('assign-task-select');
|
|
select.innerHTML = '<option value="">Select a task...</option>';
|
|
|
|
unassignedTasks.forEach(task => {
|
|
const option = document.createElement('option');
|
|
option.value = task.id;
|
|
option.textContent = `${task.title} (${task.priority})`;
|
|
select.appendChild(option);
|
|
});
|
|
|
|
// Store agent name for assignment
|
|
select.dataset.agent = agentName;
|
|
|
|
modal.classList.add('active');
|
|
} catch (err) {
|
|
console.error('Failed to load tasks for assignment:', err);
|
|
}
|
|
}
|
|
|
|
// Close assign modal
|
|
document.getElementById('assign-modal-close').addEventListener('click', () => {
|
|
document.getElementById('assign-modal').classList.remove('active');
|
|
});
|
|
|
|
// Confirm assignment
|
|
document.getElementById('confirm-assign-btn').addEventListener('click', async () => {
|
|
const select = document.getElementById('assign-task-select');
|
|
const taskId = select.value;
|
|
const agentName = select.dataset.agent;
|
|
|
|
if (!taskId) {
|
|
alert('Please select a task');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(`/api/agents/${agentName}/assign`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ taskId: parseInt(taskId) })
|
|
});
|
|
|
|
if (res.ok) {
|
|
document.getElementById('assign-modal').classList.remove('active');
|
|
await loadAgents();
|
|
await loadTasks();
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to assign task:', err);
|
|
}
|
|
});
|
|
|
|
// ============ USAGE ============
|
|
let usageStats = null;
|
|
let providerChart = null;
|
|
let agentChart = null;
|
|
|
|
async function loadUsage() {
|
|
const from = document.getElementById('usage-from').value;
|
|
const to = document.getElementById('usage-to').value;
|
|
|
|
let statsUrl = '/api/usage/stats';
|
|
const params = [];
|
|
if (from) params.push(`from=${from}`);
|
|
if (to) params.push(`to=${to}`);
|
|
if (params.length) statsUrl += '?' + params.join('&');
|
|
|
|
try {
|
|
// Load stats
|
|
const statsRes = await fetch(statsUrl);
|
|
usageStats = await statsRes.json();
|
|
|
|
// Load basic usage info
|
|
const usageRes = await fetch('/api/usage');
|
|
const usageData = await usageRes.json();
|
|
|
|
renderUsageStats();
|
|
renderUsageCharts();
|
|
renderProviderDetails(usageData);
|
|
} catch (err) {
|
|
console.error('Failed to load usage:', err);
|
|
}
|
|
}
|
|
|
|
function renderUsageStats() {
|
|
document.getElementById('stat-requests').textContent = usageStats.totalRequests.toLocaleString();
|
|
document.getElementById('stat-tokens').textContent = usageStats.totalTokens.toLocaleString();
|
|
document.getElementById('stat-cost').textContent = '$' + usageStats.totalCost.toFixed(2);
|
|
}
|
|
|
|
function renderUsageCharts() {
|
|
// Provider chart
|
|
const providerCtx = document.getElementById('chart-provider').getContext('2d');
|
|
|
|
if (providerChart) providerChart.destroy();
|
|
|
|
const providerLabels = Object.keys(usageStats.byProvider);
|
|
const providerData = providerLabels.map(p => usageStats.byProvider[p].requests);
|
|
|
|
providerChart = new Chart(providerCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: providerLabels,
|
|
datasets: [{
|
|
data: providerData,
|
|
backgroundColor: [
|
|
'#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9c27b0', '#00bcd4'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: { color: '#e0e0e0' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Agent chart
|
|
const agentCtx = document.getElementById('chart-agent').getContext('2d');
|
|
|
|
if (agentChart) agentChart.destroy();
|
|
|
|
const agentLabels = Object.keys(usageStats.byAgent);
|
|
const agentData = agentLabels.map(a => usageStats.byAgent[a].requests);
|
|
|
|
agentChart = new Chart(agentCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: agentLabels,
|
|
datasets: [{
|
|
label: 'Requests',
|
|
data: agentData,
|
|
backgroundColor: '#3498db'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { color: '#e0e0e0' },
|
|
grid: { color: '#444' }
|
|
},
|
|
x: {
|
|
ticks: { color: '#e0e0e0' },
|
|
grid: { color: '#444' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderProviderDetails(usageData) {
|
|
const grid = document.getElementById('provider-grid');
|
|
grid.innerHTML = '';
|
|
|
|
usageData.providers.forEach(provider => {
|
|
const providerEl = document.createElement('div');
|
|
providerEl.className = 'provider-card';
|
|
|
|
const providerUsage = usageStats.byProvider[provider.name] || { requests: 0, tokens: 0, cost: 0 };
|
|
|
|
providerEl.innerHTML = `
|
|
<h4>${escapeHtml(provider.name)}</h4>
|
|
<div class="provider-stats">
|
|
<div class="provider-stat">
|
|
<span class="stat-label">Requests</span>
|
|
<span class="stat-value">${providerUsage.requests.toLocaleString()}</span>
|
|
</div>
|
|
<div class="provider-stat">
|
|
<span class="stat-label">Tokens</span>
|
|
<span class="stat-value">${providerUsage.tokens.toLocaleString()}</span>
|
|
</div>
|
|
<div class="provider-stat">
|
|
<span class="stat-label">Cost</span>
|
|
<span class="stat-value">$${providerUsage.cost.toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
<div class="model-list">
|
|
<h5>Models</h5>
|
|
${provider.models.map(model => `
|
|
<div class="model-item">
|
|
<span class="model-name">${escapeHtml(model.name)}</span>
|
|
<span class="model-type">${escapeHtml(model.type)}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
|
|
grid.appendChild(providerEl);
|
|
});
|
|
}
|
|
|
|
// Apply date filter
|
|
document.getElementById('usage-apply-filter').addEventListener('click', loadUsage);
|
|
|
|
// Export JSON
|
|
document.getElementById('export-json').addEventListener('click', () => {
|
|
const from = document.getElementById('usage-from').value;
|
|
const to = document.getElementById('usage-to').value;
|
|
let url = '/api/usage/export?format=json';
|
|
if (from) url += `&from=${from}`;
|
|
if (to) url += `&to=${to}`;
|
|
window.open(url, '_blank');
|
|
});
|
|
|
|
// Export CSV
|
|
document.getElementById('export-csv').addEventListener('click', () => {
|
|
const from = document.getElementById('usage-from').value;
|
|
const to = document.getElementById('usage-to').value;
|
|
let url = '/api/usage/export?format=csv';
|
|
if (from) url += `&from=${from}`;
|
|
if (to) url += `&to=${to}`;
|
|
window.open(url, '_blank');
|
|
});
|
|
|
|
// ============ HELPERS ============
|
|
function escapeHtml(text) {
|
|
if (typeof text !== 'string') return '';
|
|
const map = {
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
'"': '"',
|
|
"'": '''
|
|
};
|
|
return text.replace(/[&<>"']/g, m => map[m]);
|
|
}
|
|
|
|
// ============ INITIALIZATION ============
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
populateAgentDropdown();
|
|
loadTasks();
|
|
|
|
// Set default date range (last 30 days)
|
|
const to = new Date();
|
|
const from = new Date();
|
|
from.setDate(from.getDate() - 30);
|
|
|
|
document.getElementById('usage-from').value = from.toISOString().split('T')[0];
|
|
document.getElementById('usage-to').value = to.toISOString().split('T')[0];
|
|
});
|
|
|
|
// Close modals on outside click
|
|
document.querySelectorAll('.modal').forEach(modal => {
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) {
|
|
modal.classList.remove('active');
|
|
}
|
|
});
|
|
});
|