1536 lines
47 KiB
JavaScript
1536 lines
47 KiB
JavaScript
// ============ THEME ============
|
|
const THEME_STORAGE_KEY = 'agentdash-theme';
|
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
|
const systemThemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
function getSystemTheme() {
|
|
return systemThemeMedia.matches ? 'dark' : 'light';
|
|
}
|
|
|
|
function getSavedTheme() {
|
|
try {
|
|
const saved = localStorage.getItem(THEME_STORAGE_KEY);
|
|
return saved === 'light' || saved === 'dark' ? saved : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function setSavedTheme(theme) {
|
|
try {
|
|
localStorage.setItem(THEME_STORAGE_KEY, theme);
|
|
} catch {
|
|
// Ignore localStorage errors (privacy mode, quota, etc.).
|
|
}
|
|
}
|
|
|
|
function updateThemeToggleLabel() {
|
|
if (!themeToggleBtn) return;
|
|
const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
const nextTheme = isDarkTheme ? 'light' : 'dark';
|
|
themeToggleBtn.textContent = isDarkTheme ? 'Light Mode' : 'Dark Mode';
|
|
themeToggleBtn.setAttribute('aria-label', `Switch to ${nextTheme} mode`);
|
|
}
|
|
|
|
function applyTheme(theme, { persist = false } = {}) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
if (persist) setSavedTheme(theme);
|
|
updateThemeToggleLabel();
|
|
if (usageStats) renderUsageCharts();
|
|
}
|
|
|
|
function initTheme() {
|
|
const savedTheme = getSavedTheme();
|
|
applyTheme(savedTheme || getSystemTheme());
|
|
|
|
if (themeToggleBtn) {
|
|
themeToggleBtn.addEventListener('click', () => {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme') || getSystemTheme();
|
|
const nextTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
applyTheme(nextTheme, { persist: true });
|
|
});
|
|
}
|
|
|
|
systemThemeMedia.addEventListener('change', (event) => {
|
|
if (!getSavedTheme()) {
|
|
applyTheme(event.matches ? 'dark' : 'light');
|
|
}
|
|
});
|
|
}
|
|
|
|
// ============ STATE ============
|
|
const COLUMNS = {
|
|
Backlog: { title: '📋 Backlog', tasks: [] },
|
|
Todo: { title: '📝 Todo', tasks: [] },
|
|
'In Progress': { title: '🔄 In Progress', tasks: [] },
|
|
Review: { title: '👀 Review', tasks: [] },
|
|
Done: { title: '✅ Done', tasks: [] },
|
|
};
|
|
|
|
let wikiPages = [];
|
|
let allTasks = [];
|
|
let taskFilters = { search: '', status: '', assignee: '', priority: '' };
|
|
|
|
async function loadTasks() {
|
|
const res = await fetch('/api/tasks');
|
|
allTasks = await res.json();
|
|
|
|
// Populate assignee filter dropdown
|
|
const assigneeFilter = document.getElementById('filter-assignee');
|
|
if (assigneeFilter) {
|
|
const assignees = [...new Set(allTasks.map(t => t.assignee).filter(Boolean))];
|
|
assigneeFilter.innerHTML = '<option value="">All Assignees</option>' +
|
|
assignees.map(a => `<option value="${a}">${a}</option>`).join('');
|
|
}
|
|
|
|
applyTaskFilters();
|
|
}
|
|
|
|
function applyTaskFilters() {
|
|
let filtered = [...allTasks];
|
|
|
|
// Search filter
|
|
if (taskFilters.search) {
|
|
const search = taskFilters.search.toLowerCase();
|
|
filtered = filtered.filter(t =>
|
|
t.title.toLowerCase().includes(search) ||
|
|
(t.description && t.description.toLowerCase().includes(search))
|
|
);
|
|
}
|
|
|
|
// Status filter
|
|
if (taskFilters.status) {
|
|
filtered = filtered.filter(t => t.status === taskFilters.status);
|
|
}
|
|
|
|
// Assignee filter
|
|
if (taskFilters.assignee) {
|
|
filtered = filtered.filter(t => t.assignee === taskFilters.assignee);
|
|
}
|
|
|
|
// Priority filter
|
|
if (taskFilters.priority) {
|
|
filtered = filtered.filter(t => t.priority === taskFilters.priority);
|
|
}
|
|
|
|
// Reset columns
|
|
Object.keys(COLUMNS).forEach((status) => {
|
|
COLUMNS[status].tasks = [];
|
|
});
|
|
|
|
// Distribute filtered tasks to columns
|
|
filtered.forEach((task) => {
|
|
if (COLUMNS[task.status]) {
|
|
COLUMNS[task.status].tasks.push(task);
|
|
}
|
|
});
|
|
|
|
renderBoard();
|
|
}
|
|
|
|
function initTaskFilters() {
|
|
const searchInput = document.getElementById('task-search');
|
|
const statusFilter = document.getElementById('filter-status');
|
|
const assigneeFilter = document.getElementById('filter-assignee');
|
|
const priorityFilter = document.getElementById('filter-priority');
|
|
const clearBtn = document.getElementById('clear-filters');
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', (e) => {
|
|
taskFilters.search = e.target.value;
|
|
applyTaskFilters();
|
|
});
|
|
}
|
|
|
|
if (statusFilter) {
|
|
statusFilter.addEventListener('change', (e) => {
|
|
taskFilters.status = e.target.value;
|
|
applyTaskFilters();
|
|
});
|
|
}
|
|
|
|
if (assigneeFilter) {
|
|
assigneeFilter.addEventListener('change', (e) => {
|
|
taskFilters.assignee = e.target.value;
|
|
applyTaskFilters();
|
|
});
|
|
}
|
|
|
|
if (priorityFilter) {
|
|
priorityFilter.addEventListener('change', (e) => {
|
|
taskFilters.priority = e.target.value;
|
|
applyTaskFilters();
|
|
});
|
|
}
|
|
|
|
if (clearBtn) {
|
|
clearBtn.addEventListener('click', () => {
|
|
taskFilters = { search: '', status: '', assignee: '', priority: '' };
|
|
if (searchInput) searchInput.value = '';
|
|
if (statusFilter) statusFilter.value = '';
|
|
if (assigneeFilter) assigneeFilter.value = '';
|
|
if (priorityFilter) priorityFilter.value = '';
|
|
applyTaskFilters();
|
|
});
|
|
}
|
|
}
|
|
let currentWikiPage = null;
|
|
let allAgents = [];
|
|
let usageStats = null;
|
|
let providerChart = null;
|
|
let agentChart = null;
|
|
|
|
// ============ TASK DASHBOARD ============
|
|
async function loadTasks() {
|
|
const res = await fetch('/api/tasks');
|
|
const tasks = await res.json();
|
|
|
|
Object.keys(COLUMNS).forEach((status) => {
|
|
COLUMNS[status].tasks = [];
|
|
});
|
|
|
|
tasks.forEach((task) => {
|
|
if (COLUMNS[task.status]) {
|
|
COLUMNS[task.status].tasks.push(task);
|
|
}
|
|
});
|
|
|
|
renderBoard();
|
|
}
|
|
|
|
function renderBoard() {
|
|
const board = document.getElementById('board');
|
|
if (!board) return;
|
|
|
|
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="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>
|
|
<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
|
|
</label>
|
|
`;
|
|
|
|
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' }),
|
|
});
|
|
initDragAndDrop();
|
|
loadTasks();
|
|
});
|
|
|
|
cardsEl.appendChild(cardEl);
|
|
});
|
|
|
|
board.appendChild(columnEl);
|
|
});
|
|
}
|
|
|
|
async function populateAgentDropdown() {
|
|
try {
|
|
const res = await fetch('/api/agents');
|
|
const agents = await res.json();
|
|
|
|
const select = document.getElementById('assignee');
|
|
if (!select) return;
|
|
|
|
const firstOption = select.options[0];
|
|
select.innerHTML = '';
|
|
select.appendChild(firstOption);
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
function initTasksPage() {
|
|
const taskForm = document.getElementById('task-form');
|
|
if (!taskForm) return;
|
|
|
|
taskForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(e.target);
|
|
const tagsValue = formData.get('tags');
|
|
const task = {
|
|
title: formData.get('title'),
|
|
description: formData.get('description'),
|
|
assignee: formData.get('assignee'),
|
|
priority: formData.get('priority'),
|
|
status: formData.get('status') || 'Backlog',
|
|
tags: (tagsValue || '').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();
|
|
initDragAndDrop();
|
|
loadTasks();
|
|
});
|
|
|
|
initTaskFilters();
|
|
populateAgentDropdown();
|
|
initDragAndDrop();
|
|
loadTasks();
|
|
}
|
|
|
|
// ============ WIKI ============
|
|
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');
|
|
if (!wikiList) return;
|
|
|
|
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);
|
|
});
|
|
}
|
|
|
|
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();
|
|
|
|
const titleEl = document.getElementById('wiki-page-title');
|
|
const actionsEl = document.getElementById('wiki-page-actions');
|
|
const contentEl = document.getElementById('wiki-content');
|
|
const editorEl = document.getElementById('wiki-editor');
|
|
const searchEl = document.getElementById('wiki-search');
|
|
|
|
if (!titleEl || !actionsEl || !contentEl || !editorEl || !searchEl) return;
|
|
|
|
titleEl.textContent = currentWikiPage.metadata.title || filename;
|
|
actionsEl.style.display = 'flex';
|
|
|
|
contentEl.style.display = 'block';
|
|
editorEl.style.display = 'none';
|
|
|
|
if (typeof marked !== 'undefined') {
|
|
contentEl.innerHTML = marked.parse(currentWikiPage.content);
|
|
} else {
|
|
contentEl.innerHTML = `<pre>${escapeHtml(currentWikiPage.content)}</pre>`;
|
|
}
|
|
|
|
renderWikiList(searchEl.value);
|
|
} catch (err) {
|
|
console.error('Failed to load wiki page:', err);
|
|
}
|
|
}
|
|
|
|
function initWikiPage() {
|
|
const searchInput = document.getElementById('wiki-search');
|
|
const newBtn = document.getElementById('wiki-new-btn');
|
|
const editBtn = document.getElementById('wiki-edit-btn');
|
|
const saveBtn = document.getElementById('wiki-save-btn');
|
|
const cancelBtn = document.getElementById('wiki-cancel-btn');
|
|
const deleteBtn = document.getElementById('wiki-delete-btn');
|
|
|
|
if (!searchInput || !newBtn || !editBtn || !saveBtn || !cancelBtn || !deleteBtn) return;
|
|
|
|
searchInput.addEventListener('input', (e) => {
|
|
renderWikiList(e.target.value);
|
|
});
|
|
|
|
newBtn.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);
|
|
}
|
|
});
|
|
|
|
editBtn.addEventListener('click', () => {
|
|
if (!currentWikiPage) return;
|
|
|
|
const contentEl = document.getElementById('wiki-content');
|
|
const editorEl = document.getElementById('wiki-editor');
|
|
const titleEl = document.getElementById('wiki-edit-title');
|
|
const editContentEl = document.getElementById('wiki-edit-content');
|
|
if (!contentEl || !editorEl || !titleEl || !editContentEl) return;
|
|
|
|
contentEl.style.display = 'none';
|
|
editorEl.style.display = 'block';
|
|
titleEl.value = currentWikiPage.metadata.title || '';
|
|
editContentEl.value = currentWikiPage.content;
|
|
});
|
|
|
|
saveBtn.addEventListener('click', async () => {
|
|
if (!currentWikiPage) return;
|
|
|
|
const editContentEl = document.getElementById('wiki-edit-content');
|
|
if (!editContentEl) return;
|
|
|
|
try {
|
|
const res = await fetch(`/api/wiki/${currentWikiPage.filename}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ content: editContentEl.value }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
await selectWikiPage(currentWikiPage.filename);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to save wiki page:', err);
|
|
}
|
|
});
|
|
|
|
cancelBtn.addEventListener('click', () => {
|
|
const editorEl = document.getElementById('wiki-editor');
|
|
const contentEl = document.getElementById('wiki-content');
|
|
if (!editorEl || !contentEl) return;
|
|
|
|
editorEl.style.display = 'none';
|
|
contentEl.style.display = 'block';
|
|
});
|
|
|
|
deleteBtn.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;
|
|
|
|
const pageTitle = document.getElementById('wiki-page-title');
|
|
const pageActions = document.getElementById('wiki-page-actions');
|
|
const wikiContent = document.getElementById('wiki-content');
|
|
|
|
if (pageTitle) pageTitle.textContent = 'Select a page';
|
|
if (pageActions) pageActions.style.display = 'none';
|
|
if (wikiContent) {
|
|
wikiContent.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);
|
|
}
|
|
});
|
|
|
|
loadWiki();
|
|
}
|
|
|
|
// ============ AGENTS ============
|
|
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');
|
|
if (!grid) return;
|
|
|
|
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">${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>
|
|
<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="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>
|
|
`;
|
|
|
|
cardEl.querySelector('.agent-details-btn').addEventListener('click', () => showAgentDetails(agent));
|
|
cardEl.querySelector('.agent-assign-btn').addEventListener('click', () => showAssignModal(agent.name));
|
|
|
|
grid.appendChild(cardEl);
|
|
});
|
|
}
|
|
|
|
function showAgentDetails(agent) {
|
|
const modal = document.getElementById('agent-modal');
|
|
const body = document.getElementById('modal-agent-body');
|
|
const title = document.getElementById('modal-agent-name');
|
|
if (!modal || !body || !title) return;
|
|
|
|
title.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');
|
|
}
|
|
|
|
async function showAssignModal(agentName) {
|
|
const modal = document.getElementById('assign-modal');
|
|
const agentNameEl = document.getElementById('assign-agent-name');
|
|
const select = document.getElementById('assign-task-select');
|
|
if (!modal || !agentNameEl || !select) return;
|
|
|
|
agentNameEl.textContent = agentName;
|
|
|
|
try {
|
|
const res = await fetch('/api/tasks');
|
|
const tasks = await res.json();
|
|
const unassignedTasks = tasks.filter((t) => t.status !== 'Done' && (!t.assignee || t.assignee === ''));
|
|
|
|
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);
|
|
});
|
|
|
|
select.dataset.agent = agentName;
|
|
modal.classList.add('active');
|
|
} catch (err) {
|
|
console.error('Failed to load tasks for assignment:', err);
|
|
}
|
|
}
|
|
|
|
function initAgentsPage() {
|
|
const searchInput = document.getElementById('agent-search');
|
|
const statusFilter = document.getElementById('agent-status-filter');
|
|
const closeBtn = document.getElementById('modal-close');
|
|
const assignCloseBtn = document.getElementById('assign-modal-close');
|
|
const confirmAssignBtn = document.getElementById('confirm-assign-btn');
|
|
|
|
if (!searchInput || !statusFilter || !closeBtn || !assignCloseBtn || !confirmAssignBtn) return;
|
|
|
|
searchInput.addEventListener('input', (e) => {
|
|
renderAgents(e.target.value, statusFilter.value);
|
|
});
|
|
|
|
statusFilter.addEventListener('change', (e) => {
|
|
renderAgents(searchInput.value, e.target.value);
|
|
});
|
|
|
|
closeBtn.addEventListener('click', () => {
|
|
const modal = document.getElementById('agent-modal');
|
|
if (modal) modal.classList.remove('active');
|
|
});
|
|
|
|
assignCloseBtn.addEventListener('click', () => {
|
|
const modal = document.getElementById('assign-modal');
|
|
if (modal) modal.classList.remove('active');
|
|
});
|
|
|
|
confirmAssignBtn.addEventListener('click', async () => {
|
|
const select = document.getElementById('assign-task-select');
|
|
if (!select) return;
|
|
|
|
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: Number.parseInt(taskId, 10) }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
const modal = document.getElementById('assign-modal');
|
|
if (modal) modal.classList.remove('active');
|
|
await loadAgents();
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to assign task:', err);
|
|
}
|
|
});
|
|
|
|
loadAgents();
|
|
}
|
|
|
|
// ============ USAGE ============
|
|
async function loadUsage() {
|
|
// Try real usage first, fallback to tracked usage
|
|
try {
|
|
const from = document.getElementById("usage-from")?.value;
|
|
const to = document.getElementById("usage-to")?.value;
|
|
let url = "/api/usage/real";
|
|
const params = [];
|
|
if (from) params.push(`from=${from}`);
|
|
if (to) params.push(`to=${to}`);
|
|
if (params.length) url += `?${params.join("&")}`;
|
|
const realRes = await fetch(url);
|
|
if (realRes.ok) {
|
|
const realData = await realRes.json();
|
|
usageStats = {
|
|
totalRequests: Object.values(realData.models || {}).reduce((sum, m) => sum + (m.requests || 0), 0),
|
|
totalTokens: realData.totals?.total || 0,
|
|
totalCost: realData.totals?.cost || 0,
|
|
agents: realData.agents,
|
|
models: realData.models
|
|
};
|
|
renderUsageStats();
|
|
if (typeof renderRealUsageCharts === 'function') {
|
|
renderRealUsageCharts(realData);
|
|
}
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
console.warn("Real usage not available, falling back");
|
|
}
|
|
|
|
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 {
|
|
const statsRes = await fetch(statsUrl);
|
|
usageStats = await statsRes.json();
|
|
|
|
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 renderRealUsageCharts(data) {
|
|
if (typeof Chart === 'undefined') return;
|
|
|
|
// Agent chart
|
|
const agentCanvas = document.getElementById('chart-agent');
|
|
if (agentCanvas && data.agents) {
|
|
const agents = Object.entries(data.agents)
|
|
.filter(([_, v]) => v.total > 0)
|
|
.sort((a, b) => b[1].total - a[1].total)
|
|
.slice(0, 10);
|
|
|
|
new Chart(agentCanvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: agents.map(([k]) => k),
|
|
datasets: [{
|
|
label: 'Tokens',
|
|
data: agents.map(([_, v]) => v.total),
|
|
backgroundColor: 'rgba(54, 162, 235, 0.6)'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
indexAxis: 'y'
|
|
}
|
|
});
|
|
}
|
|
|
|
// Provider grid
|
|
const grid = document.getElementById('provider-grid');
|
|
if (grid && data.models) {
|
|
grid.innerHTML = Object.entries(data.models)
|
|
.map(([model, stats]) => `
|
|
<div class="provider-card">
|
|
<h4>${model}</h4>
|
|
<p>Requests: ${stats.requests || 0}</p>
|
|
<p>Tokens: ${(stats.input || 0) + (stats.output || 0)}</p>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
}
|
|
const requestsEl = document.getElementById('stat-requests');
|
|
const tokensEl = document.getElementById('stat-tokens');
|
|
const costEl = document.getElementById('stat-cost');
|
|
|
|
if (!requestsEl || !tokensEl || !costEl || !usageStats) return;
|
|
|
|
requestsEl.textContent = usageStats.totalRequests.toLocaleString();
|
|
tokensEl.textContent = usageStats.totalTokens.toLocaleString();
|
|
costEl.textContent = `$${usageStats.totalCost.toFixed(2)}`;
|
|
}
|
|
|
|
function renderUsageCharts() {
|
|
if (!usageStats || typeof Chart === 'undefined') return;
|
|
|
|
const providerCanvas = document.getElementById('chart-provider');
|
|
const agentCanvas = document.getElementById('chart-agent');
|
|
if (!providerCanvas || !agentCanvas) return;
|
|
|
|
const providerCtx = providerCanvas.getContext('2d');
|
|
const agentCtx = agentCanvas.getContext('2d');
|
|
|
|
if (!providerCtx || !agentCtx) return;
|
|
|
|
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' },
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
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');
|
|
if (!grid || !usageData || !usageStats) return;
|
|
|
|
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);
|
|
});
|
|
}
|
|
|
|
function initUsagePage() {
|
|
const fromInput = document.getElementById('usage-from');
|
|
const toInput = document.getElementById('usage-to');
|
|
const applyBtn = document.getElementById('usage-apply-filter');
|
|
const exportJsonBtn = document.getElementById('export-json');
|
|
const exportCsvBtn = document.getElementById('export-csv');
|
|
|
|
if (!fromInput || !toInput || !applyBtn || !exportJsonBtn || !exportCsvBtn) return;
|
|
|
|
const to = new Date();
|
|
const from = new Date();
|
|
from.setDate(from.getDate() - 30);
|
|
|
|
fromInput.value = from.toISOString().split('T')[0];
|
|
toInput.value = to.toISOString().split('T')[0];
|
|
|
|
applyBtn.addEventListener('click', loadUsage);
|
|
|
|
exportJsonBtn.addEventListener('click', () => {
|
|
const fromValue = fromInput.value;
|
|
const toValue = toInput.value;
|
|
let url = '/api/usage/export/real?format=json';
|
|
if (fromValue) url += `&from=${fromValue}`;
|
|
if (toValue) url += `&to=${toValue}`;
|
|
window.open(url, '_blank');
|
|
});
|
|
|
|
exportCsvBtn.addEventListener('click', () => {
|
|
const fromValue = fromInput.value;
|
|
const toValue = toInput.value;
|
|
let url = '/api/usage/export/real?format=csv';
|
|
if (fromValue) url += `&from=${fromValue}`;
|
|
if (toValue) url += `&to=${toValue}`;
|
|
window.open(url, '_blank');
|
|
});
|
|
|
|
loadUsage();
|
|
}
|
|
|
|
// ============ HELPERS ============
|
|
function escapeHtml(text) {
|
|
if (typeof text !== 'string') return '';
|
|
const map = {
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
'"': '"',
|
|
"'": ''',
|
|
};
|
|
return text.replace(/[&<>"']/g, (m) => map[m]);
|
|
}
|
|
|
|
function setupModalBackdropClose() {
|
|
document.querySelectorAll('.modal').forEach((modal) => {
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) {
|
|
modal.classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// ============ INITIALIZATION ============
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const CURRENT_PAGE = document.body?.dataset?.page || "tasks";
|
|
initTheme();
|
|
setupModalBackdropClose();
|
|
|
|
if (CURRENT_PAGE === 'tasks') initTasksPage();
|
|
if (CURRENT_PAGE === 'wiki') initWikiPage();
|
|
if (CURRENT_PAGE === 'agents') initAgentsPage();
|
|
if (CURRENT_PAGE === 'usage') initUsagePage();
|
|
if (CURRENT_PAGE === 'gitea') initGiteaPage();
|
|
});
|
|
|
|
// ============ GITEA DASHBOARD ============
|
|
let giteaData = {
|
|
repos: [],
|
|
reviews: [],
|
|
activity: []
|
|
};
|
|
|
|
// Tab switching
|
|
document.querySelectorAll('.gitea-tabs .tab-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
// Update active tab button
|
|
document.querySelectorAll('.gitea-tabs .tab-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
|
|
// Show corresponding content
|
|
const tabName = btn.dataset.tab;
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
document.getElementById(`${tabName}-tab`).classList.add('active');
|
|
|
|
// Load data for tab
|
|
if (tabName === 'swarm') loadGiteaSwarm();
|
|
else if (tabName === 'reviews') loadGiteaReviews();
|
|
else if (tabName === 'activity') loadGiteaActivity();
|
|
});
|
|
});
|
|
|
|
async function loadGiteaSwarm() {
|
|
try {
|
|
const response = await fetch('/api/gitea/swarm');
|
|
const repos = await response.json();
|
|
giteaData.repos = repos;
|
|
|
|
// Update stats
|
|
const totalRepos = repos.length;
|
|
const totalPRs = repos.reduce((sum, r) => sum + r.open_prs, 0);
|
|
const totalIssues = repos.reduce((sum, r) => sum + r.open_issues, 0);
|
|
const totalBranches = repos.reduce((sum, r) => sum + r.branches, 0);
|
|
|
|
document.getElementById('total-repos').textContent = totalRepos;
|
|
document.getElementById('total-prs').textContent = totalPRs;
|
|
document.getElementById('total-issues').textContent = totalIssues;
|
|
document.getElementById('total-branches').textContent = totalBranches;
|
|
|
|
// Render repo list
|
|
const repoList = document.getElementById('repo-list');
|
|
if (repos.length === 0) {
|
|
repoList.innerHTML = '<p class="empty">No repositories found</p>';
|
|
return;
|
|
}
|
|
|
|
repoList.innerHTML = repos.map(repo => `
|
|
<div class="repo-card">
|
|
<div class="repo-header">
|
|
<h3><a href="${repo.html_url}" target="_blank">${repo.name}</a></h3>
|
|
<span class="repo-stats">
|
|
⭐ ${repo.stars} 🍴 ${repo.forks}
|
|
</span>
|
|
</div>
|
|
<div class="repo-metrics">
|
|
<span class="metric ${repo.open_prs > 0 ? 'has-items' : ''}">
|
|
🔀 ${repo.open_prs} PRs
|
|
</span>
|
|
<span class="metric ${repo.open_issues > 0 ? 'has-items' : ''}">
|
|
🐛 ${repo.open_issues} Issues
|
|
</span>
|
|
<span class="metric">
|
|
🌿 ${repo.branches} Branches
|
|
</span>
|
|
</div>
|
|
<div class="repo-footer">
|
|
<span class="updated">Updated: ${new Date(repo.updated_at).toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
} catch (error) {
|
|
console.error('Error loading Gitea swarm:', error);
|
|
document.getElementById('repo-list').innerHTML =
|
|
`<p class="error">Failed to load repositories: ${error.message}</p>`;
|
|
}
|
|
}
|
|
|
|
async function loadGiteaReviews() {
|
|
try {
|
|
const response = await fetch('/api/gitea/reviews');
|
|
const reviews = await response.json();
|
|
giteaData.reviews = reviews;
|
|
|
|
const reviewsList = document.getElementById('reviews-list');
|
|
if (reviews.length === 0) {
|
|
reviewsList.innerHTML = '<p class="empty">No pending reviews</p>';
|
|
return;
|
|
}
|
|
|
|
reviewsList.innerHTML = reviews.map(pr => `
|
|
<div class="pr-card ${pr.draft ? 'draft' : ''} ${!pr.mergeable ? 'conflict' : ''}">
|
|
<div class="pr-header">
|
|
<span class="pr-repo">${pr.repo}</span>
|
|
<span class="pr-number">#${pr.pr_number}</span>
|
|
</div>
|
|
<h3 class="pr-title">
|
|
<a href="${pr.pr_url}" target="_blank">${pr.pr_title}</a>
|
|
</h3>
|
|
<div class="pr-meta">
|
|
<span class="pr-author">by ${pr.author}</span>
|
|
<span class="pr-date">${new Date(pr.created_at).toLocaleDateString()}</span>
|
|
</div>
|
|
<div class="pr-labels">
|
|
${pr.labels.map(label =>
|
|
`<span class="label" style="background-color: #${label.color}">${label.name}</span>`
|
|
).join('')}
|
|
</div>
|
|
${pr.draft ? '<span class="badge draft-badge">Draft</span>' : ''}
|
|
${!pr.mergeable ? '<span class="badge conflict-badge">Merge Conflict</span>' : ''}
|
|
</div>
|
|
`).join('');
|
|
|
|
} catch (error) {
|
|
console.error('Error loading Gitea reviews:', error);
|
|
document.getElementById('reviews-list').innerHTML =
|
|
`<p class="error">Failed to load reviews: ${error.message}</p>`;
|
|
}
|
|
}
|
|
|
|
async function loadGiteaActivity() {
|
|
try {
|
|
const response = await fetch('/api/gitea/activity');
|
|
const activities = await response.json();
|
|
giteaData.activity = activities;
|
|
|
|
const activityFeed = document.getElementById('activity-feed');
|
|
if (activities.length === 0) {
|
|
activityFeed.innerHTML = '<p class="empty">No recent activity</p>';
|
|
return;
|
|
}
|
|
|
|
activityFeed.innerHTML = activities.map(act => `
|
|
<div class="activity-item">
|
|
<div class="activity-icon">${getActivityIcon(act.op_type)}</div>
|
|
<div class="activity-content">
|
|
<div class="activity-header">
|
|
<a href="${act.repo_url}" class="activity-repo">${act.repo}</a>
|
|
<span class="activity-time">${timeAgo(act.created_at)}</span>
|
|
</div>
|
|
<div class="activity-desc">
|
|
${act.content || act.op_type}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
} catch (error) {
|
|
console.error('Error loading Gitea activity:', error);
|
|
document.getElementById('activity-feed').innerHTML =
|
|
`<p class="error">Failed to load activity: ${error.message}</p>`;
|
|
}
|
|
}
|
|
|
|
function getActivityIcon(type) {
|
|
const icons = {
|
|
'create': '✨',
|
|
'push': '📤',
|
|
'merge': '🔀',
|
|
'close': '✅',
|
|
'reopen': '🔄',
|
|
'comment': '💬',
|
|
'label': '🏷️',
|
|
'milestone': '🎯',
|
|
'assign': '👤',
|
|
'review': '👀',
|
|
'release': '🚀'
|
|
};
|
|
return icons[type] || '📝';
|
|
}
|
|
|
|
function timeAgo(dateString) {
|
|
const now = new Date();
|
|
const date = new Date(dateString);
|
|
const seconds = Math.floor((now - date) / 1000);
|
|
|
|
if (seconds < 60) return 'just now';
|
|
if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
|
|
if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
|
|
if (seconds < 604800) return `${Math.floor(seconds / 86400)}d ago`;
|
|
return date.toLocaleDateString();
|
|
}
|
|
|
|
// Auto-load Gitea data on page load
|
|
if (document.querySelector('.gitea-dashboard')) {
|
|
loadGiteaSwarm();
|
|
|
|
// Refresh every 30 seconds
|
|
setInterval(() => {
|
|
const activeTab = document.querySelector('.gitea-tabs .tab-btn.active');
|
|
if (activeTab) {
|
|
const tabName = activeTab.dataset.tab;
|
|
if (tabName === 'swarm') loadGiteaSwarm();
|
|
else if (tabName === 'reviews') loadGiteaReviews();
|
|
else if (tabName === 'activity') loadGiteaActivity();
|
|
}
|
|
}, 30000);
|
|
}
|
|
|
|
// ============ GITEA PAGE ============
|
|
let giteaData = { repos: [], prs: [], activity: [] };
|
|
|
|
function initGiteaPage() {
|
|
loadGiteaData();
|
|
|
|
document.getElementById('refresh-gitea')?.addEventListener('click', loadGiteaData);
|
|
|
|
// Tab switching
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const tab = e.target.dataset.tab;
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
e.target.classList.add('active');
|
|
document.getElementById(`tab-${tab}`)?.classList.add('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
async function loadGiteaData() {
|
|
try {
|
|
const [swarmRes, reviewsRes, activityRes] = await Promise.all([
|
|
fetch('/api/gitea/swarm'),
|
|
fetch('/api/gitea/reviews'),
|
|
fetch('/api/gitea/activity')
|
|
]);
|
|
|
|
giteaData.repos = await swarmRes.json();
|
|
giteaData.prs = await reviewsRes.json();
|
|
giteaData.activity = await activityRes.json();
|
|
|
|
renderGiteaStats();
|
|
renderGiteaRepos();
|
|
renderGiteaPRs();
|
|
renderGiteaActivity();
|
|
} catch (err) {
|
|
console.error('Failed to load Gitea data:', err);
|
|
}
|
|
}
|
|
|
|
function renderGiteaStats() {
|
|
document.getElementById('stat-repos').textContent = giteaData.repos.length;
|
|
|
|
const totalPRs = giteaData.repos.reduce((sum, r) => sum + (r.open_prs || 0), 0);
|
|
document.getElementById('stat-prs').textContent = totalPRs;
|
|
|
|
const pendingReviews = giteaData.prs.filter(p => p.review_required).length;
|
|
document.getElementById('stat-reviews').textContent = pendingReviews;
|
|
}
|
|
|
|
function renderGiteaRepos() {
|
|
const grid = document.getElementById('repos-grid');
|
|
if (!grid) return;
|
|
|
|
if (!giteaData.repos.length) {
|
|
grid.innerHTML = '<p class="no-data">No repositories found</p>';
|
|
return;
|
|
}
|
|
|
|
grid.innerHTML = giteaData.repos.map(repo => `
|
|
<div class="repo-card">
|
|
<h4>${escapeHtml(repo.name)}</h4>
|
|
<p class="repo-fullname">${escapeHtml(repo.full_name || '')}</p>
|
|
<div class="repo-meta">
|
|
<span>⭐ ${repo.stars || 0}</span>
|
|
<span>🔀 ${repo.open_prs || 0}</span>
|
|
<span>🐛 ${repo.open_issues || 0}</span>
|
|
</div>
|
|
<div class="repo-updated">Updated: ${repo.updated_at ? new Date(repo.updated_at).toLocaleDateString() : 'N/A'}</div>
|
|
<a href="${repo.html_url}" target="_blank" class="btn-secondary">View →</a>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function renderGiteaPRs() {
|
|
const list = document.getElementById('prs-list');
|
|
if (!list) return;
|
|
|
|
// Collect all PRs from all repos
|
|
const allPRs = [];
|
|
giteaData.repos.forEach(repo => {
|
|
if (repo.prs) {
|
|
repo.prs.forEach(pr => {
|
|
allPRs.push({ ...pr, repo: repo.name });
|
|
});
|
|
}
|
|
});
|
|
|
|
if (!allPRs.length) {
|
|
list.innerHTML = '<p class="no-data">No open pull requests</p>';
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = allPRs.map(pr => `
|
|
<div class="pr-item">
|
|
<div class="pr-header">
|
|
<span class="pr-number">#${pr.number}</span>
|
|
<span class="pr-title">${escapeHtml(pr.title)}</span>
|
|
<span class="pr-status ${pr.state}">${pr.state}</span>
|
|
</div>
|
|
<div class="pr-meta">
|
|
<span>📦 ${pr.repo}</span>
|
|
<span>👤 ${pr.user?.login || 'Unknown'}</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function renderGiteaActivity() {
|
|
const list = document.getElementById('activity-list');
|
|
if (!list) return;
|
|
|
|
if (!giteaData.activity || !giteaData.activity.length) {
|
|
list.innerHTML = '<p class="no-data">No recent activity</p>';
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = giteaData.activity.slice(0, 20).map(activity => `
|
|
<div class="activity-item">
|
|
<span class="activity-type">${activity.type || '📝'}</span>
|
|
<span class="activity-desc">${escapeHtml(activity.message || activity.repo?.name || 'Activity')}</span>
|
|
<span class="activity-time">${activity.created_at ? new Date(activity.created_at).toLocaleString() : ''}</span>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// ============ DRAG AND DROP ============
|
|
let draggedTask = null;
|
|
|
|
function initDragAndDrop() {
|
|
const board = document.getElementById('board');
|
|
if (!board) return;
|
|
|
|
// Add drag listeners to columns
|
|
document.querySelectorAll('.column').forEach(column => {
|
|
column.addEventListener('dragover', handleDragOver);
|
|
column.addEventListener('drop', handleDrop);
|
|
column.addEventListener('dragleave', handleDragLeave);
|
|
});
|
|
}
|
|
|
|
function handleDragOver(e) {
|
|
e.preventDefault();
|
|
e.currentTarget.classList.add('drag-over');
|
|
}
|
|
|
|
function handleDragLeave(e) {
|
|
e.currentTarget.classList.remove('drag-over');
|
|
}
|
|
|
|
async function handleDrop(e) {
|
|
e.preventDefault();
|
|
const column = e.currentTarget;
|
|
column.classList.remove('drag-over');
|
|
|
|
if (!draggedTask) return;
|
|
|
|
const newStatus = column.dataset.status;
|
|
if (newStatus === draggedTask.status) return;
|
|
|
|
// Update task status via API
|
|
try {
|
|
await fetch(`/api/tasks/${draggedTask.id}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ status: newStatus })
|
|
});
|
|
|
|
// Reload tasks
|
|
await initDragAndDrop();
|
|
loadTasks();
|
|
} catch (err) {
|
|
console.error('Failed to update task:', err);
|
|
}
|
|
|
|
draggedTask = null;
|
|
}
|
|
|
|
function makeTaskCardDraggable(cardEl, task) {
|
|
cardEl.draggable = true;
|
|
|
|
cardEl.addEventListener('dragstart', (e) => {
|
|
draggedTask = task;
|
|
cardEl.classList.add('dragging');
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
});
|
|
|
|
cardEl.addEventListener('dragend', () => {
|
|
cardEl.classList.remove('dragging');
|
|
});
|
|
}
|
|
|
|
// ============ WEBSOCKET REAL-TIME UPDATES ============
|
|
let ws = null;
|
|
let reconnectAttempts = 0;
|
|
const MAX_RECONNECT = 5;
|
|
|
|
function initWebSocket() {
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = `${protocol}//${window.location.host}`;
|
|
|
|
ws = new WebSocket(wsUrl);
|
|
|
|
ws.onopen = () => {
|
|
console.log('WebSocket connected');
|
|
reconnectAttempts = 0;
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const { type, payload } = JSON.parse(event.data);
|
|
handleWebSocketMessage(type, payload);
|
|
} catch (err) {
|
|
console.error('WebSocket message error:', err);
|
|
}
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log('WebSocket disconnected');
|
|
if (reconnectAttempts < MAX_RECONNECT) {
|
|
reconnectAttempts++;
|
|
setTimeout(initWebSocket, 2000 * reconnectAttempts);
|
|
}
|
|
};
|
|
|
|
ws.onerror = (err) => {
|
|
console.error('WebSocket error:', err);
|
|
};
|
|
}
|
|
|
|
function handleWebSocketMessage(type, payload) {
|
|
switch (type) {
|
|
case 'task_created':
|
|
if (typeof loadTasks === 'function' && CURRENT_PAGE === 'tasks') {
|
|
loadTasks();
|
|
showNotification(`New task: ${payload.title}`);
|
|
}
|
|
break;
|
|
|
|
case 'task_updated':
|
|
if (typeof loadTasks === 'function' && CURRENT_PAGE === 'tasks') {
|
|
loadTasks();
|
|
}
|
|
break;
|
|
|
|
case 'task_deleted':
|
|
if (typeof loadTasks === 'function' && CURRENT_PAGE === 'tasks') {
|
|
loadTasks();
|
|
showNotification('Task deleted');
|
|
}
|
|
break;
|
|
|
|
case 'usage_updated':
|
|
if (typeof loadUsage === 'function' && CURRENT_PAGE === 'usage') {
|
|
loadUsage();
|
|
}
|
|
break;
|
|
|
|
default:
|
|
console.log('Unknown WebSocket message:', type);
|
|
}
|
|
}
|
|
|
|
function showNotification(message) {
|
|
// Create a simple toast notification
|
|
const toast = document.createElement('div');
|
|
toast.className = 'toast-notification';
|
|
toast.textContent = message;
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.classList.add('fade-out');
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// Initialize WebSocket on page load
|
|
if (typeof CURRENT_PAGE !== 'undefined') {
|
|
initWebSocket();
|
|
}
|