TopherMayor/openclaw-taskboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: TopherMayor:03ee61aab3c5ad6803116872788190789a6b97ab
Branches Tags
TopherMayor:main TopherMayor:feat/separate-routes-v2 TopherMayor:feat/dark-mode-v2 TopherMayor:feat/dark-mode TopherMayor:feat/separate-routes
..
compare: TopherMayor:feat/dark-mode-v2
Branches Tags
TopherMayor:main TopherMayor:feat/separate-routes-v2 TopherMayor:feat/dark-mode-v2 TopherMayor:feat/dark-mode TopherMayor:feat/separate-routes

1 Commits
03ee61aab3 ... feat/dark-

Author SHA1 Message Date
Christopher Mayor
969a690732 feat: add dark mode support v2 2026-03-04 11:31:40 -08:00
9 changed files with 795 additions and 990 deletions
Expand all files Collapse all files

609
public/app.js
View File

@@ -1,31 +1,111 @@
// ============ STATE ============
const CURRENT_PAGE = document.body?.dataset?.page || 'tasks';
// ============ THEME ============
const THEME_STORAGE_KEY = 'agentdash-theme';
const themeToggleBtn = document.getElementById('theme-toggle');
const systemThemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
const COLUMNS = {
Backlog: { title: '📋 Backlog', tasks: [] },
Todo: { title: '📝 Todo', tasks: [] },
'In Progress': { title: '🔄 In Progress', tasks: [] },
Review: { title: '👀 Review', tasks: [] },
Done: { title: '✅ Done', tasks: [] },
};
function getSystemTheme() {
return systemThemeMedia.matches ? 'dark' : 'light';
}
let wikiPages = [];
let currentWikiPage = null;
let allAgents = [];
let usageStats = null;
let providerChart = null;
let agentChart = null;
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');
}
});
}
// ============ 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();
Object.keys(COLUMNS).forEach((status) => {
// Reset columns
Object.keys(COLUMNS).forEach(status => {
COLUMNS[status].tasks = [];
});
tasks.forEach((task) => {
// Group tasks by status
tasks.forEach(task => {
if (COLUMNS[task.status]) {
COLUMNS[task.status].tasks.push(task);
}
@@ -36,8 +116,6 @@ async function loadTasks() {
function renderBoard() {
const board = document.getElementById('board');
if (!board) return;
board.innerHTML = '';
Object.entries(COLUMNS).forEach(([status, column]) => {
@@ -54,7 +132,7 @@ function renderBoard() {
const cardsEl = columnEl.querySelector('.cards');
column.tasks.forEach((task) => {
column.tasks.forEach(task => {
const cardEl = document.createElement('div');
cardEl.className = 'card';
cardEl.innerHTML = `
@@ -64,19 +142,20 @@ function renderBoard() {
</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>
<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' }),
body: JSON.stringify({ status: 'Done' })
});
loadTasks();
});
@@ -88,6 +167,31 @@ function renderBoard() {
});
}
// 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');
@@ -96,11 +200,13 @@ async function populateAgentDropdown() {
const select = document.getElementById('assignee');
if (!select) return;
// Keep the first option ("Select agent...")
const firstOption = select.options[0];
select.innerHTML = '';
select.appendChild(firstOption);
agents.forEach((agent) => {
// Add agent options
agents.forEach(agent => {
const option = document.createElement('option');
option.value = agent.name;
option.textContent = agent.name;
@@ -111,39 +217,11 @@ async function populateAgentDropdown() {
}
}
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();
loadTasks();
});
populateAgentDropdown();
loadTasks();
}
// ============ WIKI ============
let wikiPages = [];
let currentWikiPage = null;
let isEditingWiki = false;
async function loadWiki() {
try {
const res = await fetch('/api/wiki');
@@ -156,17 +234,15 @@ async function loadWiki() {
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.filter(p => p.title.toLowerCase().includes(filter.toLowerCase()) || p.filename.toLowerCase().includes(filter.toLowerCase()))
: wikiPages;
filtered.forEach((page) => {
filtered.forEach(page => {
const itemEl = document.createElement('div');
itemEl.className = `wiki-item${currentWikiPage && currentWikiPage.filename === page.filename ? ' active' : ''}`;
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>
@@ -177,54 +253,13 @@ function renderWikiList(filter = '') {
});
}
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) => {
// Wiki search
document.getElementById('wiki-search').addEventListener('input', (e) => {
renderWikiList(e.target.value);
});
newBtn.addEventListener('click', async () => {
// New wiki page
document.getElementById('wiki-new-btn').addEventListener('click', async () => {
const title = prompt('Enter page title:');
if (!title) return;
@@ -232,7 +267,7 @@ function initWikiPage() {
const res = await fetch('/api/wiki', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title }),
body: JSON.stringify({ title })
});
if (res.ok) {
@@ -245,35 +280,61 @@ function initWikiPage() {
}
});
editBtn.addEventListener('click', () => {
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;
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;
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;
});
saveBtn.addEventListener('click', async () => {
// Save wiki page
document.getElementById('wiki-save-btn').addEventListener('click', async () => {
if (!currentWikiPage) return;
const editContentEl = document.getElementById('wiki-edit-content');
if (!editContentEl) 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: editContentEl.value }),
body: JSON.stringify({ content })
});
if (res.ok) {
isEditingWiki = false;
await selectWikiPage(currentWikiPage.filename);
}
} catch (err) {
@@ -281,38 +342,29 @@ function initWikiPage() {
}
});
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';
// 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';
});
deleteBtn.addEventListener('click', async () => {
// 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',
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>';
}
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) {
@@ -320,10 +372,9 @@ function initWikiPage() {
}
});
loadWiki();
}
// ============ AGENTS ============
let allAgents = [];
async function loadAgents() {
try {
const res = await fetch('/api/agents');
@@ -336,24 +387,22 @@ async function loadAgents() {
function renderAgents(filter = '', statusFilter = '') {
const grid = document.getElementById('agents-grid');
if (!grid) return;
grid.innerHTML = '';
let filtered = allAgents;
if (filter) {
filtered = filtered.filter((a) =>
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 = filtered.filter(a => a.status === statusFilter);
}
filtered.forEach((agent) => {
filtered.forEach(agent => {
const cardEl = document.createElement('div');
cardEl.className = 'agent-card';
@@ -375,14 +424,14 @@ 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>'}
${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>
@@ -392,20 +441,34 @@ function renderAgents(filter = '', statusFilter = '') {
</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');
const title = document.getElementById('modal-agent-name');
if (!modal || !body || !title) return;
title.textContent = agent.name;
document.getElementById('modal-agent-name').textContent = agent.name;
body.innerHTML = `
<div class="detail-section">
@@ -424,7 +487,7 @@ function showAgentDetails(agent) {
<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('')
? 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>
@@ -432,83 +495,66 @@ function showAgentDetails(agent) {
<h4>Recently Completed</h4>
<ul class="task-list">
${agent.completedTasks.length
? agent.completedTasks.map((t) => `<li>${escapeHtml(t.title)}</li>`).join('')
? 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 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 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');
const agentNameEl = document.getElementById('assign-agent-name');
const select = document.getElementById('assign-task-select');
if (!modal || !agentNameEl || !select) return;
agentNameEl.textContent = agentName;
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 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) => {
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);
}
}
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);
// Close assign modal
document.getElementById('assign-modal-close').addEventListener('click', () => {
document.getElementById('assign-modal').classList.remove('active');
});
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 () => {
// Confirm assignment
document.getElementById('confirm-assign-btn').addEventListener('click', async () => {
const select = document.getElementById('assign-task-select');
if (!select) return;
const taskId = select.value;
const agentName = select.dataset.agent;
@@ -521,37 +567,40 @@ function initAgentsPage() {
const res = await fetch(`/api/agents/${agentName}/assign`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ taskId: Number.parseInt(taskId, 10) }),
body: JSON.stringify({ taskId: parseInt(taskId) })
});
if (res.ok) {
const modal = document.getElementById('assign-modal');
if (modal) modal.classList.remove('active');
document.getElementById('assign-modal').classList.remove('active');
await loadAgents();
await loadTasks();
}
} catch (err) {
console.error('Failed to assign task:', err);
}
});
loadAgents();
}
// ============ 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;
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('&')}`;
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();
@@ -564,33 +613,24 @@ async function loadUsage() {
}
function renderUsageStats() {
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)}`;
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() {
if (!usageStats || typeof Chart === 'undefined') return;
const rootStyles = getComputedStyle(document.documentElement);
const themeForeground = rootStyles.getPropertyValue('--fg').trim() || '#e0e0e0';
const themeBorder = rootStyles.getPropertyValue('--border').trim() || '#444';
const themePrimary = rootStyles.getPropertyValue('--primary').trim() || '#3498db';
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;
// 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);
const providerData = providerLabels.map(p => usageStats.byProvider[p].requests);
providerChart = new Chart(providerCtx, {
type: 'doughnut',
@@ -598,24 +638,29 @@ function renderUsageCharts() {
labels: providerLabels,
datasets: [{
data: providerData,
backgroundColor: ['#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9c27b0', '#00bcd4'],
}],
backgroundColor: [
'#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9c27b0', '#00bcd4'
]
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
labels: { color: '#e0e0e0' },
},
},
},
labels: { color: themeForeground }
}
}
}
});
// 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);
const agentData = agentLabels.map(a => usageStats.byAgent[a].requests);
agentChart = new Chart(agentCtx, {
type: 'bar',
@@ -624,34 +669,36 @@ function renderUsageCharts() {
datasets: [{
label: 'Requests',
data: agentData,
backgroundColor: '#3498db',
}],
backgroundColor: themePrimary
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
ticks: { color: '#e0e0e0' },
grid: { color: '#444' },
ticks: { color: themeForeground },
grid: { color: themeBorder }
},
x: {
ticks: { color: '#e0e0e0' },
grid: { color: '#444' },
},
},
},
ticks: { color: themeForeground },
grid: { color: themeBorder }
}
}
}
});
}
function renderProviderDetails(usageData) {
const grid = document.getElementById('provider-grid');
if (!grid || !usageData || !usageStats) return;
grid.innerHTML = '';
usageData.providers.forEach((provider) => {
usageData.providers.forEach(provider => {
const providerEl = document.createElement('div');
providerEl.className = 'provider-card';
@@ -675,7 +722,7 @@ function renderProviderDetails(usageData) {
</div>
<div class="model-list">
<h5>Models</h5>
${provider.models.map((model) => `
${provider.models.map(model => `
<div class="model-item">
<span class="model-name">${escapeHtml(model.name)}</span>
<span class="model-type">${escapeHtml(model.type)}</span>
@@ -688,45 +735,29 @@ function renderProviderDetails(usageData) {
});
}
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');
// Apply date filter
document.getElementById('usage-apply-filter').addEventListener('click', loadUsage);
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;
// 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 (fromValue) url += `&from=${fromValue}`;
if (toValue) url += `&to=${toValue}`;
if (from) url += `&from=${from}`;
if (to) url += `&to=${to}`;
window.open(url, '_blank');
});
exportCsvBtn.addEventListener('click', () => {
const fromValue = fromInput.value;
const toValue = toInput.value;
// 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 (fromValue) url += `&from=${fromValue}`;
if (toValue) url += `&to=${toValue}`;
if (from) url += `&from=${from}`;
if (to) url += `&to=${to}`;
window.open(url, '_blank');
});
loadUsage();
}
// ============ HELPERS ============
function escapeHtml(text) {
if (typeof text !== 'string') return '';
@@ -735,27 +766,31 @@ function escapeHtml(text) {
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#039;',
"'": '&#039;'
};
return text.replace(/[&<>"']/g, (m) => map[m]);
return text.replace(/[&<>"']/g, m => map[m]);
}
function setupModalBackdropClose() {
document.querySelectorAll('.modal').forEach((modal) => {
// ============ INITIALIZATION ============
document.addEventListener('DOMContentLoaded', () => {
initTheme();
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');
}
});
});
}
// ============ INITIALIZATION ============
document.addEventListener('DOMContentLoaded', () => {
setupModalBackdropClose();
if (CURRENT_PAGE === 'tasks') initTasksPage();
if (CURRENT_PAGE === 'wiki') initWikiPage();
if (CURRENT_PAGE === 'agents') initAgentsPage();
if (CURRENT_PAGE === 'usage') initUsagePage();
});

1
public/index.html
View File

@@ -19,6 +19,7 @@
<a href="#wiki" class="nav-link" data-page="wiki">Wiki</a>
<a href="#agents" class="nav-link" data-page="agents">Agents</a>
<a href="#usage" class="nav-link" data-page="usage">Usage</a>
<button id="theme-toggle" class="btn-secondary" type="button" aria-label="Toggle theme">Dark Mode</button>
</nav>
</header>

40
public/styles.css
View File

@@ -1,11 +1,22 @@
:root {
--bg: #1a1a1a;
--fg: #e0e0e0;
--border: #444;
--bg: #f5f7fb;
--fg: #1f2937;
--border: #c8d1df;
--primary: #3498db;
--secondary: #2ecc71;
--danger: #e74c3c;
--warning: #f39c12;
--dark: #1f2937;
--light: #f8fafc;
--card-bg: #ffffff;
--card-fg: #111827;
--modal-bg: rgba(0, 0, 0, 0.45);
}
:root[data-theme='dark'] {
--bg: #1a1a1a;
--fg: #e0e0e0;
--border: #444;
--dark: #121212;
--light: #f0f0f0;
--card-bg: #2a2a2a;
@@ -13,6 +24,19 @@
--modal-bg: rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--bg: #1a1a1a;
--fg: #e0e0e0;
--border: #444;
--dark: #121212;
--light: #f0f0f0;
--card-bg: #2a2a2a;
--card-fg: #e0e0e0;
--modal-bg: rgba(0, 0, 0, 0.7);
}
}
* {
margin: 0;
padding: 0;
@@ -24,6 +48,11 @@ body {
background-color: var(--bg);
color: var(--fg);
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
}
body * {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.container {
@@ -48,6 +77,7 @@ header h1 {
nav {
display: flex;
gap: 15px;
align-items: center;
}
.nav-link {
@@ -67,6 +97,10 @@ nav {
color: white;
}
#theme-toggle {
margin-left: auto;
}
/* Buttons */
.btn-primary {
background-color: var(--primary);

55
server.js
View File

@@ -53,62 +53,9 @@ db.serialize(() => {
const app = express();
const server = http.createServer(app);
const wss = new WebSocketServer({ server });
const VIEWS_DIR = path.join(__dirname, 'views');
app.use(express.json());
app.use(express.static(path.join(__dirname, 'public'), { index: false }));
function renderTemplate(template, vars = {}) {
return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
const value = vars[key];
return value === undefined || value === null ? '' : String(value);
});
}
function renderPage(viewName, activeTab, pageTitle) {
const layoutPath = path.join(VIEWS_DIR, 'layout.html');
const viewPath = path.join(VIEWS_DIR, `${viewName}.html`);
const layout = fs.readFileSync(layoutPath, 'utf8');
const content = fs.readFileSync(viewPath, 'utf8');
return renderTemplate(layout, {
pageTitle,
pageName: viewName,
content,
tasksActive: activeTab === 'tasks' ? 'active' : '',
wikiActive: activeTab === 'wiki' ? 'active' : '',
agentsActive: activeTab === 'agents' ? 'active' : '',
usageActive: activeTab === 'usage' ? 'active' : '',
markedScript: viewName === 'wiki'
? '<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>'
: '',
chartScript: viewName === 'usage'
? '<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>'
: '',
});
}
// ============ SERVER-RENDERED PAGES ============
app.get('/', (req, res) => {
res.redirect('/tasks');
});
app.get('/tasks', (req, res) => {
res.send(renderPage('tasks', 'tasks', 'OpenClaw Agent Fleet Dashboard - Tasks'));
});
app.get('/wiki', (req, res) => {
res.send(renderPage('wiki', 'wiki', 'OpenClaw Agent Fleet Dashboard - Wiki'));
});
app.get('/agents', (req, res) => {
res.send(renderPage('agents', 'agents', 'OpenClaw Agent Fleet Dashboard - Agents'));
});
app.get('/usage', (req, res) => {
res.send(renderPage('usage', 'usage', 'OpenClaw Agent Fleet Dashboard - Usage'));
});
app.use(express.static(path.join(__dirname, 'public')));
function normalizeTask(row) {
return {

40
views/agents.html
View File

@@ -1,40 +0,0 @@
<section id="page-agents" class="page active">
<div class="agents-header">
<h2>Agent Fleet</h2>
<div class="agents-controls">
<input type="text" id="agent-search" placeholder="Search agents..." />
<select id="agent-status-filter">
<option value="">All Statuses</option>
<option value="active">Active</option>
<option value="busy">Busy</option>
<option value="idle">Idle</option>
</select>
</div>
</div>
<div id="agents-grid" class="agents-grid"></div>
<div id="agent-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modal-agent-name">Agent Details</h3>
<button class="modal-close" id="modal-close">&times;</button>
</div>
<div class="modal-body" id="modal-agent-body"></div>
</div>
</div>
<div id="assign-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Assign Task to <span id="assign-agent-name"></span></h3>
<button class="modal-close" id="assign-modal-close">&times;</button>
</div>
<div class="modal-body">
<select id="assign-task-select">
<option value="">Select a task...</option>
</select>
<button id="confirm-assign-btn" class="btn-primary">Assign Task</button>
</div>
</div>
</div>
</section>

30
views/layout.html
View File

@@ -1,30 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{pageTitle}}</title>
<link rel="stylesheet" href="/styles.css" />
{{markedScript}}
{{chartScript}}
</head>
<body data-page="{{pageName}}">
<div class="container">
<header>
<h1>🦞 OpenClaw Agent Fleet Dashboard</h1>
<nav>
<a href="/tasks" class="nav-link {{tasksActive}}">Tasks</a>
<a href="/wiki" class="nav-link {{wikiActive}}">Wiki</a>
<a href="/agents" class="nav-link {{agentsActive}}">Agents</a>
<a href="/usage" class="nav-link {{usageActive}}">Usage</a>
</nav>
</header>
<main>
{{content}}
</main>
</div>
<script src="/app.js"></script>
</body>
</html>

58
views/tasks.html
View File

@@ -1,58 +0,0 @@
<section id="page-tasks" class="page active">
<div class="composer">
<h2>Create Task</h2>
<form id="task-form">
<input id="title" name="title" placeholder="Task title" required />
<select id="assignee" name="assignee">
<option value="">Select agent...</option>
</select>
<select id="priority" name="priority">
<option>Low</option>
<option selected>Medium</option>
<option>High</option>
<option>Critical</option>
</select>
<textarea id="description" name="description" placeholder="Task description" rows="3"></textarea>
<input id="tags" name="tags" placeholder="Tags (comma-separated)" />
<button type="submit">Create Task</button>
</form>
</div>
<div id="board">
<div class="column" data-status="Backlog">
<div class="column-header">
<h3>📋 Backlog</h3>
<span class="column-count">0</span>
</div>
<div class="cards"></div>
</div>
<div class="column" data-status="Todo">
<div class="column-header">
<h3>📝 Todo</h3>
<span class="column-count">0</span>
</div>
<div class="cards"></div>
</div>
<div class="column" data-status="In Progress">
<div class="column-header">
<h3>🔄 In Progress</h3>
<span class="column-count">0</span>
</div>
<div class="cards"></div>
</div>
<div class="column" data-status="Review">
<div class="column-header">
<h3>👀 Review</h3>
<span class="column-count">0</span>
</div>
<div class="cards"></div>
</div>
<div class="column" data-status="Done">
<div class="column-header">
<h3>✅ Done</h3>
<span class="column-count">0</span>
</div>
<div class="cards"></div>
</div>
</div>
</section>

49
views/usage.html
View File

@@ -1,49 +0,0 @@
<section id="page-usage" class="page active">
<div class="usage-header">
<h2>API Usage & Statistics</h2>
<div class="usage-controls">
<div class="date-range">
<label>From:</label>
<input type="date" id="usage-from" />
<label>To:</label>
<input type="date" id="usage-to" />
<button id="usage-apply-filter" class="btn-secondary">Apply</button>
</div>
<div class="export-actions">
<button id="export-json" class="btn-secondary">Export JSON</button>
<button id="export-csv" class="btn-secondary">Export CSV</button>
</div>
</div>
</div>
<div class="usage-stats">
<div class="stat-card">
<h4>Total Requests</h4>
<div class="stat-value" id="stat-requests">0</div>
</div>
<div class="stat-card">
<h4>Total Tokens</h4>
<div class="stat-value" id="stat-tokens">0</div>
</div>
<div class="stat-card">
<h4>Estimated Cost</h4>
<div class="stat-value" id="stat-cost">$0.00</div>
</div>
</div>
<div class="usage-charts">
<div class="chart-container">
<h4>Usage by Provider</h4>
<canvas id="chart-provider"></canvas>
</div>
<div class="chart-container">
<h4>Usage by Agent</h4>
<canvas id="chart-agent"></canvas>
</div>
</div>
<div id="usage-data" class="usage-details">
<h3>Provider Details</h3>
<div class="usage-grid" id="provider-grid"></div>
</div>
</section>

35
views/wiki.html
View File

@@ -1,35 +0,0 @@
<section id="page-wiki" class="page active">
<div class="wiki-container">
<div class="wiki-sidebar">
<div class="wiki-actions">
<button id="wiki-new-btn" class="btn-primary">+ New Page</button>
</div>
<div class="wiki-search">
<input type="text" id="wiki-search" placeholder="Search wiki..." />
</div>
<div id="wiki-list" class="wiki-list"></div>
</div>
<div class="wiki-main">
<div class="wiki-toolbar">
<div class="wiki-page-title" id="wiki-page-title">Select a page</div>
<div class="wiki-page-actions" id="wiki-page-actions" style="display: none;">
<button id="wiki-edit-btn" class="btn-secondary">Edit</button>
<button id="wiki-delete-btn" class="btn-danger">Delete</button>
</div>
</div>
<div id="wiki-content" class="wiki-content">
<div class="wiki-placeholder">
<p>📚 Select a wiki page from the sidebar or create a new one.</p>
</div>
</div>
<div id="wiki-editor" class="wiki-editor" style="display: none;">
<input type="text" id="wiki-edit-title" placeholder="Page title" />
<textarea id="wiki-edit-content" placeholder="Markdown content..."></textarea>
<div class="editor-actions">
<button id="wiki-save-btn" class="btn-primary">Save</button>
<button id="wiki-cancel-btn" class="btn-secondary">Cancel</button>
</div>
</div>
</div>
</div>
</section>