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

Compare commits

base: TopherMayor:feat/dark-mode
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/separate-routes
Branches Tags
TopherMayor:main TopherMayor:feat/separate-routes-v2 TopherMayor:feat/dark-mode-v2 TopherMayor:feat/dark-mode TopherMayor:feat/separate-routes

1 Commits
feat/dark- ... feat/separ

Author SHA1 Message Date
Christopher Mayor
20f67e0177 feat: separate-routes 2026-03-03 19:25:42 -08:00
10 changed files with 2598 additions and 109 deletions
Expand all files Collapse all files

38
TASK.md Normal file
View File

@@ -0,0 +1,38 @@
# Task: Separate Routes for Each Section
## Current State
- Single page app with client-side navigation
- Navigation links: Tasks, Wiki, Agents, Usage
- All content in one index.html
## Required Changes
1. Add Express routes in server.js:
- GET /tasks - Renders tasks page with kanban board
- GET /wiki - Renders wiki page with documentation list
- GET /agents - Renders agents page with agent cards
- GET /usage - Renders usage page with provider info
- GET / - Redirect to /tasks or render tasks page
2. Create separate HTML templates or use template rendering:
- Each page should have its own route
- Navigation should use standard anchor links (href=/tasks, etc.)
- Remove client-side navigation JavaScript
3. Keep API endpoints unchanged:
- /api/tasks, /api/wiki, /api/agents, /api/usage remain as JSON APIs
- Pages can fetch data client-side from these APIs after loading
4. Remove SPA logic from app.js:
- Remove nav-link click handlers
- Remove page switching logic
- Keep only data loading for each page
## Files to Modify
- server.js - Add route handlers for each page
- public/index.html - Either split or make it a template
- public/app.js - Remove SPA navigation, keep data loading
## After Completion
git add -A
git commit -m "feat: separate routes for each section"
git push origin feat/separate-routes

2322
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
public/agents.html Normal file
View File

@@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Agents - OpenClaw Agent Fleet Dashboard</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<h1>🦞 OpenClaw Fleet Dashboard</h1>
</div>
<div class="nav-links">
<a href="/tasks" class="nav-link">📋 Tasks</a>
<a href="/wiki" class="nav-link">📚 Wiki</a>
<a href="/agents" class="nav-link active">🤖 Agents</a>
<a href="/usage" class="nav-link">📊 Usage</a>
</div>
</nav>
<div class="page active">
<header class="topbar">
<h2>🤖 Agents</h2>
<p>Fleet agent workspace and configuration</p>
</header>
<div class="agents-grid" id="agents-grid"></div>
</div>
<script src="/app.js"></script>
</body>
</html>

81
public/app.js
View File

@@ -1,64 +1,3 @@
function getPreferredTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
return savedTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
function setTheme(theme) {
if (theme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
document.getElementById('theme-toggle').textContent = '☀️';
} else {
document.documentElement.removeAttribute('data-theme');
document.getElementById('theme-toggle').textContent = '🌙';
}
localStorage.setItem('theme', theme);
}
setTheme(getPreferredTheme());
document.getElementById('theme-toggle').addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
setTheme(e.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 // Task Dashboard
const COLUMNS = { const COLUMNS = {
'Backlog': { title: '📋 Backlog', tasks: [] }, 'Backlog': { title: '📋 Backlog', tasks: [] },
@@ -292,8 +231,21 @@ function escapeHtml(text) {
return div.innerHTML; return div.innerHTML;
} }
// Initialize // Initialize based on current page
const path = window.location.pathname;
if (path === '/tasks' || path === '/') {
loadTasks(); loadTasks();
} else if (path === '/wiki') {
loadWiki();
} else if (path === '/agents') {
loadAgents();
} else if (path === '/usage') {
loadUsage();
}
// Populate agent dropdown
populateAgentDropdown();
// WebSocket for real-time updates // WebSocket for real-time updates
const ws = new WebSocket(`ws://${window.location.host}`); const ws = new WebSocket(`ws://${window.location.host}`);
@@ -327,8 +279,3 @@ async function populateAgentDropdown() {
console.error('Failed to load agents for dropdown:', err); console.error('Failed to load agents for dropdown:', err);
} }
} }
// Populate dropdown on page load
document.addEventListener('DOMContentLoaded', () => {
populateAgentDropdown();
});

1
public/index.html → public/index.html.old
View File

@@ -16,7 +16,6 @@
<a href="#" class="nav-link" data-page="wiki">📚 Wiki</a> <a href="#" class="nav-link" data-page="wiki">📚 Wiki</a>
<a href="#" class="nav-link" data-page="agents">🤖 Agents</a> <a href="#" class="nav-link" data-page="agents">🤖 Agents</a>
<a href="#" class="nav-link" data-page="usage">📊 Usage</a> <a href="#" class="nav-link" data-page="usage">📊 Usage</a>
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>
</div> </div>
</nav> </nav>

40
public/styles.css
View File

@@ -5,20 +5,6 @@
} }
:root { :root {
--bg-primary: #ffffff;
--bg-secondary: #f6f8fa;
--bg-card: #ffffff;
--text-primary: #24292f;
--text-secondary: #57606a;
--accent: #f78166;
--border: #d0d7de;
--priority-high: #f85149;
--priority-medium: #d29922;
--priority-low: #3fb950;
--priority-critical: #ff6b6b;
}
[data-theme="dark"] {
--bg-primary: #0f1419; --bg-primary: #0f1419;
--bg-secondary: #1a1f2e; --bg-secondary: #1a1f2e;
--bg-card: #242b3d; --bg-card: #242b3d;
@@ -37,7 +23,6 @@ body {
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
min-height: 100vh; min-height: 100vh;
transition: background-color 0.3s ease, color 0.3s ease;
} }
/* Navigation */ /* Navigation */
@@ -51,7 +36,6 @@ body {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
transition: background-color 0.3s ease, border-color 0.3s ease;
} }
.nav-brand h1 { .nav-brand h1 {
@@ -82,22 +66,6 @@ body {
color: white; color: white;
} }
.theme-toggle {
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.2s;
}
.theme-toggle:hover {
background: var(--accent);
color: white;
}
/* Pages */ /* Pages */
.page { .page {
display: none; display: none;
@@ -112,7 +80,6 @@ body {
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
background: var(--bg-secondary); background: var(--bg-secondary);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
transition: background-color 0.3s ease, border-color 0.3s ease;
} }
.topbar h2 { .topbar h2 {
@@ -130,7 +97,6 @@ body {
margin: 1rem; margin: 1rem;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--border); border: 1px solid var(--border);
transition: background-color 0.3s ease, border-color 0.3s ease;
} }
.composer h3 { .composer h3 {
@@ -188,7 +154,6 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: calc(100vh - 250px); max-height: calc(100vh - 250px);
transition: background-color 0.3s ease;
} }
.column-header { .column-header {
@@ -224,7 +189,6 @@ body {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
transition: background-color 0.3s ease, border-color 0.3s ease;
} }
.card:hover { .card:hover {
@@ -323,7 +287,6 @@ body {
padding: 1rem; padding: 1rem;
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - 220px); max-height: calc(100vh - 220px);
transition: background-color 0.3s ease;
} }
.wiki-item { .wiki-item {
@@ -358,7 +321,6 @@ body {
padding: 2rem; padding: 2rem;
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - 220px); max-height: calc(100vh - 220px);
transition: background-color 0.3s ease;
} }
.wiki-content h1 { .wiki-content h1 {
@@ -402,7 +364,6 @@ body {
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--border); border: 1px solid var(--border);
overflow: hidden; overflow: hidden;
transition: background-color 0.3s ease, border-color 0.3s ease;
} }
.agent-header { .agent-header {
@@ -474,7 +435,6 @@ body {
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 1.5rem; padding: 1.5rem;
transition: background-color 0.3s ease, border-color 0.3s ease;
} }
.provider-name { .provider-name {

59
public/tasks.html Normal file
View File

@@ -0,0 +1,59 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tasks - OpenClaw Agent Fleet Dashboard</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<h1>🦞 OpenClaw Fleet Dashboard</h1>
</div>
<div class="nav-links">
<a href="/tasks" class="nav-link active">📋 Tasks</a>
<a href="/wiki" class="nav-link">📚 Wiki</a>
<a href="/agents" class="nav-link">🤖 Agents</a>
<a href="/usage" class="nav-link">📊 Usage</a>
</div>
</nav>
<div class="page active">
<header class="topbar">
<h2>Task Dashboard</h2>
<p>Real-time task coordination board</p>
</header>
<section class="composer">
<h3>Create Task</h3>
<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>
<select id="status" name="status">
<option selected>Backlog</option>
<option>Todo</option>
<option>In Progress</option>
<option>Review</option>
<option>Done</option>
</select>
<input id="tags" name="tags" placeholder="tags, comma, separated" />
<textarea id="description" name="description" placeholder="Description"></textarea>
<button type="submit">Add Task</button>
</form>
</section>
<main id="board" class="board"></main>
</div>
<script src="/app.js"></script>
</body>
</html>

32
public/usage.html Normal file
View File

@@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Usage - OpenClaw Agent Fleet Dashboard</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<h1>🦞 OpenClaw Fleet Dashboard</h1>
</div>
<div class="nav-links">
<a href="/tasks" class="nav-link">📋 Tasks</a>
<a href="/wiki" class="nav-link">📚 Wiki</a>
<a href="/agents" class="nav-link">🤖 Agents</a>
<a href="/usage" class="nav-link active">📊 Usage</a>
</div>
</nav>
<div class="page active">
<header class="topbar">
<h2>📊 Usage & Quotas</h2>
<p>Provider models, quotas, and limits</p>
</header>
<div class="usage-container" id="usage-container"></div>
</div>
<script src="/app.js"></script>
</body>
</html>

37
public/wiki.html Normal file
View File

@@ -0,0 +1,37 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wiki - OpenClaw Agent Fleet Dashboard</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-brand">
<h1>🦞 OpenClaw Fleet Dashboard</h1>
</div>
<div class="nav-links">
<a href="/tasks" class="nav-link">📋 Tasks</a>
<a href="/wiki" class="nav-link active">📚 Wiki</a>
<a href="/agents" class="nav-link">🤖 Agents</a>
<a href="/usage" class="nav-link">📊 Usage</a>
</div>
</nav>
<div class="page active">
<header class="topbar">
<h2>📚 Wiki</h2>
<p>Task documentation and implementation details</p>
</header>
<div class="wiki-container">
<div class="wiki-list" id="wiki-list"></div>
<div class="wiki-content" id="wiki-content">
<p>Select a wiki page to view documentation</p>
</div>
</div>
</div>
<script src="/app.js"></script>
</body>
</html>

63
server.js
View File

@@ -43,6 +43,26 @@ const wss = new WebSocketServer({ server });
app.use(express.json()); app.use(express.json());
app.use(express.static(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public')));
app.get('/tasks', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'tasks.html'));
});
app.get('/wiki', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'wiki.html'));
});
app.get('/agents', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'agents.html'));
});
app.get('/usage', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'usage.html'));
});
app.get('/', (req, res) => {
res.redirect('/tasks');
});
function normalizeTask(row) { function normalizeTask(row) {
return { return {
...row, ...row,
@@ -122,6 +142,49 @@ app.get('/api/tasks', (req, res) => {
}); });
}); });
app.get('/api/wiki', (req, res) => {
try {
const files = [];
if (fs.existsSync(WIKI_DIR)) {
const wikiFiles = fs.readdirSync(WIKI_DIR).filter(f => f.endsWith('.md'));
wikiFiles.forEach(filename => {
const filePath = path.join(WIKI_DIR, filename);
const stats = fs.statSync(filePath);
files.push({
filename,
created: stats.mtime.toISOString()
});
});
files.sort((a, b) => new Date(b.created) - new Date(a.created));
}
res.json(files);
} catch (err) {
console.error('Error reading wiki:', err);
res.status(500).json({ error: 'failed_to_fetch_wiki' });
}
});
app.get('/api/wiki/:filename', (req, res) => {
try {
const filename = req.params.filename;
const filePath = path.join(WIKI_DIR, filename);
if (!fs.existsSync(filePath)) {
return res.status(404).json({ error: 'wiki_page_not_found' });
}
const content = fs.readFileSync(filePath, 'utf8');
res.json({ content });
} catch (err) {
console.error('Error reading wiki page:', err);
res.status(500).json({ error: 'failed_to_fetch_wiki_page' });
}
});
app.post('/api/tasks', (req, res) => { app.post('/api/tasks', (req, res) => {
const errors = validatePayload(req.body, false); const errors = validatePayload(req.body, false);
if (errors.length) { if (errors.length) {