feat: separate-routes

2026-03-03 19:25:42 -08:00
10 changed files with 2598 additions and 109 deletions
--- a/TASK.md
+++ b/TASK.md
@@ -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
--- a/package-lock.json
+++ b/package-lock.json
--- a/public/agents.html
+++ b/public/agents.html
@@ -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>
--- a/public/app.js
+++ b/public/app.js
@@ -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
 const COLUMNS = {
  'Backlog': { title: '📋 Backlog', tasks: [] },
@@ -292,8 +231,21 @@ function escapeHtml(text) {
  return div.innerHTML;
 }

-// Initialize
+// Initialize based on current page
+const path = window.location.pathname;
+
+if (path === '/tasks' || path === '/') {
  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
 const ws = new WebSocket(`ws://${window.location.host}`);
@@ -327,8 +279,3 @@ async function populateAgentDropdown() {
    console.error('Failed to load agents for dropdown:', err);
  }
 }
-
-// Populate dropdown on page load
-document.addEventListener('DOMContentLoaded', () => {
-  populateAgentDropdown();
-});
--- a/public/index.html.old
+++ b/public/index.html.old
@@ -16,7 +16,6 @@
        <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="usage">📊 Usage</a>
-        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">🌙</button>
      </div>
    </nav>

--- a/public/styles.css
+++ b/public/styles.css
@@ -5,20 +5,6 @@
 }

 :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-secondary: #1a1f2e;
  --bg-card: #242b3d;
@@ -37,7 +23,6 @@ body {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
-  transition: background-color 0.3s ease, color 0.3s ease;
 }

 /* Navigation */
@@ -51,7 +36,6 @@ body {
  position: sticky;
  top: 0;
  z-index: 1000;
-  transition: background-color 0.3s ease, border-color 0.3s ease;
 }

 .nav-brand h1 {
@@ -82,22 +66,6 @@ body {
  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 */
 .page {
  display: none;
@@ -112,7 +80,6 @@ body {
  padding: 1.5rem 2rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
-  transition: background-color 0.3s ease, border-color 0.3s ease;
 }

 .topbar h2 {
@@ -130,7 +97,6 @@ body {
  margin: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
-  transition: background-color 0.3s ease, border-color 0.3s ease;
 }

 .composer h3 {
@@ -188,7 +154,6 @@ body {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 250px);
-  transition: background-color 0.3s ease;
 }

 .column-header {
@@ -224,7 +189,6 @@ body {
  margin-bottom: 0.5rem;
  cursor: pointer;
  border: 1px solid transparent;
-  transition: background-color 0.3s ease, border-color 0.3s ease;
 }

 .card:hover {
@@ -323,7 +287,6 @@ body {
  padding: 1rem;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
-  transition: background-color 0.3s ease;
 }

 .wiki-item {
@@ -358,7 +321,6 @@ body {
  padding: 2rem;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
-  transition: background-color 0.3s ease;
 }

 .wiki-content h1 {
@@ -402,7 +364,6 @@ body {
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
-  transition: background-color 0.3s ease, border-color 0.3s ease;
 }

 .agent-header {
@@ -474,7 +435,6 @@ body {
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 1.5rem;
-  transition: background-color 0.3s ease, border-color 0.3s ease;
 }

 .provider-name {
--- a/public/tasks.html
+++ b/public/tasks.html
@@ -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>
--- a/public/usage.html
+++ b/public/usage.html
@@ -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>
--- a/public/wiki.html
+++ b/public/wiki.html
@@ -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>
--- a/server.js
+++ b/server.js
@@ -43,6 +43,26 @@ const wss = new WebSocketServer({ server });
 app.use(express.json());
 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) {
  return {
    ...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) => {
  const errors = validatePayload(req.body, false);
  if (errors.length) {