feat: Add navigation bar and multi-page dashboard

- Add navigation bar with 4 main sections: Tasks, Wiki, Agents, Usage
- Implement Wiki page with task documentation viewer
- Implement Agents page showing workspace, tools, and current tasks
- Implement Usage page displaying providers, models, and quotas
- Add API endpoints: /api/agents, /api/usage, /api/wiki
- Add agent heartbeat endpoint for task assignment
- Update Docker compose with volume mounts for agent and config data
- Add comprehensive CSS for all pages and responsive design
- Add JavaScript navigation and dynamic content loading

🚀 Features:
- 📋 Kanban task board (existing)
- 📚 Wiki documentation viewer
- 🤖 Agent fleet management dashboard
- 📊 Provider usage and quota monitoring
- 🔗 Real-time WebSocket updates
- 📱 Responsive mobile design

docker-compose.yml

@@ -8,13 +8,11 @@ services:
     environment:
       - PORT=8395
       - DB_PATH=/app/data/tasks.db
-      - WIKI_DIR=/home/bear/.openclaw/workspace/wiki
+      - WIKI_DIR=/app/wiki
+      - AGENTS_DIR=/app/agents
+      - OPENCLAW_CONFIG=/app/config/openclaw.json
     volumes:
       - ./data:/app/data
-      - /home/bear/.openclaw/workspace/wiki:/home/bear/.openclaw/workspace/wiki
+      - /home/bear/.openclaw/workspace/wiki:/app/wiki
-    networks:
+      - /home/bear/.openclaw/agents:/app/agents:ro
-      - proxy-net
+      - /home/bear/.openclaw/openclaw.json:/app/config/openclaw.json:ro
-
-networks:
-  proxy-net:
-    external: true

public/app.js

@@ -1,141 +1,272 @@
-const STATUSES = ['Backlog', 'Todo', 'In Progress', 'Review', 'Done'];
+// Navigation
+const navLinks = document.querySelectorAll('.nav-link');
+const pages = document.querySelectorAll('.page');
 
-const board = document.getElementById('board');
+navLinks.forEach(link => {
-const template = document.getElementById('task-template');
+  link.addEventListener('click', (e) => {
-const form = document.getElementById('task-form');
+    e.preventDefault();
+    const targetPage = link.dataset.page;
     
-let tasks = [];
+    // Update active nav link
+    navLinks.forEach(l => l.classList.remove('active'));
+    link.classList.add('active');
     
-function renderBoard() {
+    // Show target page
-  board.innerHTML = '';
+    pages.forEach(page => {
+      page.classList.remove('active');
+      if (page.id === `page-${targetPage}`) {
+        page.classList.add('active');
+      }
+    });
     
-  for (const status of STATUSES) {
+    // Load page data
-    const column = document.createElement('section');
+    if (targetPage === 'wiki') loadWiki();
-    column.className = 'column';
+    if (targetPage === 'agents') loadAgents();
-
+    if (targetPage === 'usage') loadUsage();
-    const heading = document.createElement('h2');
-    heading.textContent = `${status} (${tasks.filter((t) => t.status === status).length})`;
-
-    const cards = document.createElement('div');
-    cards.className = 'cards';
-
-    tasks
-      .filter((task) => task.status === status)
-      .forEach((task) => cards.appendChild(renderCard(task)));
-
-    column.appendChild(heading);
-    column.appendChild(cards);
-    board.appendChild(column);
-  }
-}
-
-function renderCard(task) {
-  const node = template.content.firstElementChild.cloneNode(true);
-
-  node.querySelector('.card-title').textContent = task.title;
-  node.querySelector('.card-desc').textContent = task.description || 'No description';
-  node.querySelector('.assignee').textContent = `Assignee: ${task.assignee || 'Unassigned'}`;
-  node.querySelector('.tags').textContent = `Tags: ${(task.tags || []).join(', ') || 'None'}`;
-
-  const badge = node.querySelector('.priority');
-  badge.textContent = task.priority;
-  badge.classList.add((task.priority || '').toLowerCase());
-
-  const statusSelect = node.querySelector('.status-select');
-  statusSelect.value = task.status;
-  statusSelect.addEventListener('change', async () => {
-    await updateTask(task.id, { status: statusSelect.value });
   });
+});
 
-  return node;
+// 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');
-  tasks = await res.json();
+  const tasks = await res.json();
+  
+  // Reset columns
+  Object.keys(COLUMNS).forEach(status => {
+    COLUMNS[status].tasks = [];
+  });
+  
+  // Group tasks by status
+  tasks.forEach(task => {
+    if (COLUMNS[task.status]) {
+      COLUMNS[task.status].tasks.push(task);
+    }
+  });
+  
   renderBoard();
 }
 
-async function createTask(payload) {
+function renderBoard() {
-  const res = await fetch('/api/tasks', {
+  const board = document.getElementById('board');
-    method: 'POST',
+  board.innerHTML = '';
-    headers: { 'Content-Type': 'application/json' },
+  
-    body: JSON.stringify(payload),
+  Object.entries(COLUMNS).forEach(([status, column]) => {
+    const columnEl = document.createElement('div');
+    columnEl.className = 'column';
+    
+    columnEl.innerHTML = `
+      <div class="column-header">
+        <h3>${column.title}</h3>
+        <span class="column-count">${column.tasks.length}</span>
+      </div>
+      <div class="cards"></div>
+    `;
+    
+    const cardsEl = columnEl.querySelector('.cards');
+    
+    column.tasks.forEach(task => {
+      const cardEl = document.createElement('div');
+      cardEl.className = 'card';
+      cardEl.innerHTML = `
+        <div class="card-head">
+          <h3 class="card-title">${escapeHtml(task.title)}</h3>
+          <span class="badge priority-${task.priority}">${task.priority}</span>
+        </div>
+        <p class="card-desc">${escapeHtml(task.description || '')}</p>
+        <p class="meta assignee">${task.assignee || 'Unassigned'}</p>
+        <p class="meta tags">${task.tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join(' ')}</p>
+        <label>
+          <input type="checkbox" class="card-check" ${task.status === 'Done' ? 'checked' : ''} />
+          Mark Complete
+        </label>
+      `;
+      
+      // Checkbox handler
+      const checkbox = cardEl.querySelector('.card-check');
+      checkbox.addEventListener('change', async () => {
+        await fetch(`/api/tasks/${task.id}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ status: 'Done' })
+        });
+        loadTasks();
+      });
+      
+      cardsEl.appendChild(cardEl);
+    });
+    
+    board.appendChild(columnEl);
   });
-
-  if (!res.ok) {
-    const data = await res.json().catch(() => ({}));
-    throw new Error(data.error || 'failed_to_create_task');
-  }
-
-  return res.json();
 }
 
-async function updateTask(id, payload) {
+// Task form
-  const res = await fetch(`/api/tasks/${id}`, {
+document.getElementById('task-form').addEventListener('submit', async (e) => {
-    method: 'PATCH',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(payload),
-  });
-
-  if (!res.ok) {
-    const data = await res.json().catch(() => ({}));
-    throw new Error(data.error || 'failed_to_update_task');
-  }
-
-  return res.json();
-}
-
-form.addEventListener('submit', async (e) => {
   e.preventDefault();
   
-  const payload = {
+  const formData = new FormData(e.target);
-    title: form.title.value,
+  const task = {
-    description: form.description.value,
+    title: formData.get('title'),
-    assignee: form.assignee.value,
+    description: formData.get('description'),
-    priority: form.priority.value,
+    assignee: formData.get('assignee'),
-    status: form.status.value,
+    priority: formData.get('priority'),
-    tags: form.tags.value
+    status: formData.get('status'),
-      .split(',')
+    tags: formData.get('tags').split(',').map(t => t.trim()).filter(t => t)
-      .map((s) => s.trim())
-      .filter(Boolean),
   };
   
-  try {
+  await fetch('/api/tasks', {
-    await createTask(payload);
+    method: 'POST',
-    form.reset();
+    headers: { 'Content-Type': 'application/json' },
-    form.priority.value = 'Medium';
+    body: JSON.stringify(task)
-    form.status.value = 'Backlog';
+  });
-  } catch (err) {
+  
-    alert(err.message);
+  e.target.reset();
-  }
+  loadTasks();
 });
 
-function upsertTask(task) {
+// Wiki
-  const idx = tasks.findIndex((t) => t.id === task.id);
+async function loadWiki() {
-  if (idx === -1) {
+  const res = await fetch('/api/wiki');
-    tasks.unshift(task);
+  const pages = await res.json();
-  } else {
+  
-    tasks[idx] = task;
+  const wikiList = document.getElementById('wiki-list');
+  wikiList.innerHTML = '';
+  
+  pages.forEach(page => {
+    const itemEl = document.createElement('div');
+    itemEl.className = 'wiki-item';
+    itemEl.innerHTML = `
+      <h4 class="wiki-title">${escapeHtml(page.filename.replace('.md', ''))}</h4>
+      <p class="wiki-date">${new Date(page.created).toLocaleDateString()}</p>
+    `;
+    
+    itemEl.addEventListener('click', async () => {
+      // Mark active
+      wikiList.querySelectorAll('.wiki-item').forEach(i => i.classList.remove('active'));
+      itemEl.classList.add('active');
+      
+      // Load content
+      const contentRes = await fetch(`/api/wiki/${page.filename}`);
+      const contentData = await contentRes.json();
+      
+      const wikiContent = document.getElementById('wiki-content');
+      wikiContent.innerHTML = `<pre>${escapeHtml(contentData.content)}</pre>`;
+    });
+    
+    wikiList.appendChild(itemEl);
+  });
+}
+
+// Agents
+async function loadAgents() {
+  const res = await fetch('/api/agents');
+  const agents = await res.json();
+  
+  const grid = document.getElementById('agents-grid');
+  grid.innerHTML = '';
+  
+  agents.forEach(agent => {
+    const cardEl = document.createElement('div');
+    cardEl.className = 'agent-card';
+    
+    cardEl.innerHTML = `
+      <div class="agent-header">
+        <h3 class="agent-name">${escapeHtml(agent.name)}</h3>
+        <span class="agent-status">${agent.status}</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.map(tool => `<span class="tool-tag">${escapeHtml(tool)}</span>`).join('')}
+          </div>
+        </div>
+        <div class="agent-section">
+          <h4>📄 Workspace Files</h4>
+          <div class="agent-files">
+            ${agent.files.map(file => `<span class="file-tag">${escapeHtml(file)}</span>`).join('')}
+          </div>
+        </div>
+      </div>
+    `;
+    
+    grid.appendChild(cardEl);
+  });
+}
+
+// Usage
+async function loadUsage() {
+  const res = await fetch('/api/usage');
+  const usage = await res.json();
+  
+  const container = document.getElementById('usage-container');
+  container.innerHTML = '';
+  
+  if (usage.providers.length === 0) {
+    container.innerHTML = '<p style="padding: 2rem; color: var(--text-secondary);">No provider data available</p>';
+    return;
   }
-  renderBoard();
+  
+  usage.providers.forEach(provider => {
+    const cardEl = document.createElement('div');
+    cardEl.className = 'usage-card';
+    
+    cardEl.innerHTML = `
+      <h3 class="provider-name">${escapeHtml(provider.name)}</h3>
+      <div class="provider-models">
+        ${provider.models.map(model => `
+          <div class="model-item">
+            <div class="model-name">${escapeHtml(model.name)}</div>
+            <div class="model-meta">Type: ${model.type} | Context: ${model.contextWindow}</div>
+          </div>
+        `).join('')}
+      </div>
+      <div class="provider-quota">
+        <div class="quota-title">Quota & Limits</div>
+        <div class="quota-item">
+          <span class="quota-label">Requests</span>
+          <span class="quota-value">${provider.quota.requests} / ${provider.quota.limit}</span>
+        </div>
+        <div class="quota-item">
+          <span class="quota-label">Tokens</span>
+          <span class="quota-value">${provider.quota.tokens}</span>
+        </div>
+        <div class="quota-bar">
+          <div class="quota-fill" style="width: 0%"></div>
+        </div>
+      </div>
+    `;
+    
+    container.appendChild(cardEl);
+  });
 }
 
-function connectWebSocket() {
+// Utility functions
-  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+function escapeHtml(text) {
-  const ws = new WebSocket(`${proto}//${location.host}`);
+  const div = document.createElement('div');
-
+  div.textContent = text;
-  ws.onmessage = (event) => {
+  return div.innerHTML;
-    const msg = JSON.parse(event.data);
-    if (msg.type === 'task_created' || msg.type === 'task_updated') {
-      upsertTask(msg.payload);
-    }
-  };
-
-  ws.onclose = () => {
-    setTimeout(connectWebSocket, 1200);
-  };
 }
 
+// Initialize
 loadTasks();
-connectWebSocket();
+
+// WebSocket for real-time updates
+const ws = new WebSocket(`ws://${window.location.host}`);
+ws.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  if (data.type === 'task_created' || data.type === 'task_updated') {
+    loadTasks();
+  }
+};

public/index.html

@@ -3,40 +3,87 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OpenClaw Fleet Taskboard</title>
+    <title>OpenClaw Agent Fleet Dashboard</title>
     <link rel="stylesheet" href="/styles.css" />
   </head>
   <body>
-    <header class="topbar">
+    <nav class="navbar">
-      <h1>OpenClaw Agent Fleet Dashboard</h1>
+      <div class="nav-brand">
-      <p>Real-time task coordination board</p>
+        <h1>🦞 OpenClaw Fleet Dashboard</h1>
-    </header>
+      </div>
+      <div class="nav-links">
+        <a href="#" class="nav-link active" data-page="dashboard">📋 Tasks</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="usage">📊 Usage</a>
+      </div>
+    </nav>
 
-    <section class="composer">
+    <!-- Dashboard Page -->
-      <h2>Create Task</h2>
+    <div id="page-dashboard" class="page active">
-      <form id="task-form">
+      <header class="topbar">
-        <input id="title" name="title" placeholder="Task title" required />
+        <h2>Task Dashboard</h2>
-        <input id="assignee" name="assignee" placeholder="Assignee agent" />
+        <p>Real-time task coordination board</p>
-        <select id="priority" name="priority">
+      </header>
-          <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>
+      <section class="composer">
+        <h3>Create Task</h3>
+        <form id="task-form">
+          <input id="title" name="title" placeholder="Task title" required />
+          <input id="assignee" name="assignee" placeholder="Assignee agent" />
+          <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>
+
+    <!-- Wiki Page -->
+    <div id="page-wiki" class="page">
+      <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>
+
+    <!-- Agents Page -->
+    <div id="page-agents" class="page">
+      <header class="topbar">
+        <h2>🤖 Agents</h2>
+        <p>Fleet agent workspace and configuration</p>
+      </header>
+      <div class="agents-grid" id="agents-grid"></div>
+    </div>
+
+    <!-- Usage Page -->
+    <div id="page-usage" class="page">
+      <header class="topbar">
+        <h2>📊 Usage & Quotas</h2>
+        <p>Provider models, quotas, and limits</p>
+      </header>
+      <div class="usage-container" id="usage-container"></div>
+    </div>
 
     <template id="task-template">
       <article class="card">
@@ -48,18 +95,50 @@
         <p class="meta assignee"></p>
         <p class="meta tags"></p>
         <label>
-          Status
+          <input type="checkbox" class="card-check" />
-          <select class="status-select">
+          Mark Complete
-            <option>Backlog</option>
-            <option>Todo</option>
-            <option>In Progress</option>
-            <option>Review</option>
-            <option>Done</option>
-          </select>
         </label>
       </article>
     </template>
 
+    <template id="wiki-item-template">
+      <div class="wiki-item">
+        <h4 class="wiki-title"></h4>
+        <p class="wiki-date"></p>
+      </div>
+    </template>
+
+    <template id="agent-card-template">
+      <div class="agent-card">
+        <div class="agent-header">
+          <h3 class="agent-name"></h3>
+          <span class="agent-status"></span>
+        </div>
+        <div class="agent-body">
+          <div class="agent-section">
+            <h4>📋 Current Task</h4>
+            <p class="agent-task"></p>
+          </div>
+          <div class="agent-section">
+            <h4>🛠️ Tools</h4>
+            <div class="agent-tools"></div>
+          </div>
+          <div class="agent-section">
+            <h4>📄 Workspace Files</h4>
+            <div class="agent-files"></div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template id="usage-card-template">
+      <div class="usage-card">
+        <h3 class="provider-name"></h3>
+        <div class="provider-models"></div>
+        <div class="provider-quota"></div>
+      </div>
+    </template>
+
     <script src="/app.js"></script>
   </body>
 </html>

public/styles.css

@@ -1,182 +1,531 @@
-:root {
-  --bg: #0e1117;
-  --panel: #161b22;
-  --muted: #98a6b3;
-  --text: #e6edf3;
-  --border: #2d333b;
-  --accent: #2f81f7;
-  --critical: #f85149;
-  --high: #db6d28;
-  --medium: #d29922;
-  --low: #238636;
-}
-
 * {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
 }
 
+:root {
+  --bg-primary: #0f1419;
+  --bg-secondary: #1a1f2e;
+  --bg-card: #242b3d;
+  --text-primary: #e6edf3;
+  --text-secondary: #8b949e;
+  --accent: #f78166;
+  --border: #30363d;
+  --priority-high: #f85149;
+  --priority-medium: #d29922;
+  --priority-low: #3fb950;
+  --priority-critical: #ff6b6b;
+}
+
 body {
-  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  background: var(--bg-primary);
-  background: radial-gradient(circle at top, #1c2431, var(--bg) 55%);
+  color: var(--text-primary);
-  color: var(--text);
+  min-height: 100vh;
 }
 
-.topbar {
+/* Navigation */
-  padding: 1.2rem;
+.navbar {
+  background: var(--bg-secondary);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   border-bottom: 1px solid var(--border);
-  background: rgba(22, 27, 34, 0.9);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
 }
 
-.topbar h1 {
+.nav-brand h1 {
-  margin: 0;
+  font-size: 1.5rem;
-  font-size: 1.4rem;
+  color: var(--text-primary);
+}
+
+.nav-links {
+  display: flex;
+  gap: 1rem;
+}
+
+.nav-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.nav-link:hover {
+  background: var(--bg-card);
+  color: var(--text-primary);
+}
+
+.nav-link.active {
+  background: var(--accent);
+  color: white;
+}
+
+/* Pages */
+.page {
+  display: none;
+}
+
+.page.active {
+  display: block;
+}
+
+/* Dashboard */
+.topbar {
+  padding: 1.5rem 2rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar h2 {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .topbar p {
-  margin: 0.25rem 0 0;
+  color: var(--text-secondary);
-  color: var(--muted);
 }
 
 .composer {
-  padding: 1rem 1.2rem;
+  padding: 1.5rem 2rem;
-}
+  background: var(--bg-secondary);
-
+  margin: 1rem;
-.composer h2 {
-  margin: 0 0 0.7rem;
-  font-size: 1rem;
-}
-
-#task-form {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 0.6rem;
-}
-
-input,
-select,
-textarea,
-button {
-  border: 1px solid var(--border);
-  background: var(--panel);
-  color: var(--text);
   border-radius: 8px;
-  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--border);
 }
 
-textarea {
+.composer h3 {
-  grid-column: 1 / -1;
+  margin-bottom: 1rem;
-  min-height: 70px;
-  resize: vertical;
 }
 
-button {
+.composer form {
-  cursor: pointer;
-  background: linear-gradient(90deg, #1f6feb, var(--accent));
-  border: none;
-  font-weight: 600;
-}
-
-.board {
   display: grid;
-  grid-template-columns: repeat(5, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
-  padding: 0 1.2rem 1.2rem;
+}
+
+.composer input,
+.composer select,
+.composer textarea {
+  padding: 0.5rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  border-radius: 4px;
+}
+
+.composer textarea {
+  grid-column: 1 / -1;
+  min-height: 80px;
+}
+
+.composer button {
+  padding: 0.5rem 1.5rem;
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.composer button:hover {
+  opacity: 0.9;
+}
+
+/* Board */
+.board {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
   overflow-x: auto;
+  min-height: calc(100vh - 400px);
 }
 
 .column {
-  background: rgba(22, 27, 34, 0.9);
+  flex: 0 0 280px;
-  border: 1px solid var(--border);
+  background: var(--bg-secondary);
-  border-radius: 10px;
+  border-radius: 8px;
-  min-height: 220px;
+  display: flex;
-  padding: 0.7rem;
+  flex-direction: column;
+  max-height: calc(100vh - 250px);
 }
 
-.column h2 {
+.column-header {
-  font-size: 0.95rem;
+  padding: 1rem;
-  margin: 0 0 0.6rem;
+  border-bottom: 1px solid var(--border);
-  color: var(--muted);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.column-header h3 {
+  font-size: 0.9rem;
+  text-transform: uppercase;
+}
+
+.column-count {
+  background: var(--bg-card);
+  padding: 0.25rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.8rem;
 }
 
 .cards {
-  display: flex;
+  flex: 1;
-  flex-direction: column;
+  overflow-y: auto;
-  gap: 0.6rem;
+  padding: 0.5rem;
 }
 
 .card {
-  background: #202632;
+  background: var(--bg-card);
-  border: 1px solid #334055;
+  border-radius: 6px;
-  border-radius: 8px;
+  padding: 0.75rem;
-  padding: 0.6rem;
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.card:hover {
+  border-color: var(--accent);
 }
 
 .card-head {
   display: flex;
   justify-content: space-between;
-  gap: 0.4rem;
+  align-items: center;
-  align-items: flex-start;
+  margin-bottom: 0.5rem;
 }
 
 .card-title {
-  margin: 0;
+  font-weight: 500;
   font-size: 0.95rem;
 }
 
+.badge {
+  padding: 0.15rem 0.5rem;
+  border-radius: 10px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.priority-High {
+  background: var(--priority-high);
+  color: white;
+}
+
+.priority-Medium {
+  background: var(--priority-medium);
+  color: white;
+}
+
+.priority-Low {
+  background: var(--priority-low);
+  color: white;
+}
+
+.priority-Critical {
+  background: var(--priority-critical);
+  color: white;
+}
+
 .card-desc {
-  margin: 0.5rem 0;
+  color: var(--text-secondary);
   font-size: 0.85rem;
-  color: #c7d3df;
+  margin-bottom: 0.5rem;
 }
 
 .meta {
-  margin: 0.2rem 0;
+  font-size: 0.75rem;
-  color: var(--muted);
+  color: var(--text-secondary);
-  font-size: 0.78rem;
+  margin-bottom: 0.25rem;
 }
 
-.badge {
+.assignee {
-  border-radius: 999px;
+  color: var(--accent);
-  font-size: 0.72rem;
-  padding: 0.18rem 0.45rem;
-  border: 1px solid transparent;
-  white-space: nowrap;
 }
 
-.priority.low {
+.tags {
-  color: var(--low);
+  display: flex;
-  border-color: var(--low);
+  gap: 0.25rem;
+  flex-wrap: wrap;
 }
 
-.priority.medium {
+.tag {
-  color: var(--medium);
+  background: var(--bg-primary);
-  border-color: var(--medium);
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.7rem;
 }
 
-.priority.high {
+.card label {
-  color: var(--high);
+  display: flex;
-  border-color: var(--high);
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-top: 0.5rem;
 }
 
-.priority.critical {
+/* Wiki */
-  color: var(--critical);
+.wiki-container {
-  border-color: var(--critical);
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 1rem;
+  padding: 1rem;
+  min-height: calc(100vh - 200px);
 }
 
-.status-select {
+.wiki-list {
-  width: 100%;
+  background: var(--bg-secondary);
-  margin-top: 0.2rem;
+  border-radius: 8px;
+  padding: 1rem;
+  overflow-y: auto;
+  max-height: calc(100vh - 220px);
 }
 
-@media (max-width: 980px) {
+.wiki-item {
-  .board {
+  padding: 0.75rem;
-    grid-template-columns: repeat(2, minmax(240px, 1fr));
+  border-radius: 6px;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+  background: var(--bg-card);
+}
+
+.wiki-item:hover {
+  background: var(--accent);
+}
+
+.wiki-item.active {
+  background: var(--accent);
+}
+
+.wiki-title {
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+}
+
+.wiki-date {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.wiki-content {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 2rem;
+  overflow-y: auto;
+  max-height: calc(100vh - 220px);
+}
+
+.wiki-content h1 {
+  margin-bottom: 1rem;
+}
+
+.wiki-content h2 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.wiki-content p {
+  margin-bottom: 1rem;
+}
+
+.wiki-content code {
+  background: var(--bg-card);
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+  font-family: monospace;
+}
+
+.wiki-content pre {
+  background: var(--bg-card);
+  padding: 1rem;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+}
+
+/* Agents */
+.agents-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.agent-card {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.agent-header {
+  background: var(--bg-card);
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+}
+
+.agent-name {
+  font-size: 1.1rem;
+}
+
+.agent-status {
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  background: var(--priority-low);
+  color: white;
+}
+
+.agent-body {
+  padding: 1rem;
+}
+
+.agent-section {
+  margin-bottom: 1rem;
+}
+
+.agent-section h4 {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.agent-task {
+  color: var(--text-primary);
+  font-size: 0.9rem;
+}
+
+.agent-tools,
+.agent-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.tool-tag,
+.file-tag {
+  background: var(--bg-card);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+/* Usage */
+.usage-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.usage-card {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  padding: 1.5rem;
+}
+
+.provider-name {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+  color: var(--accent);
+}
+
+.provider-models {
+  margin-bottom: 1rem;
+}
+
+.model-item {
+  padding: 0.5rem;
+  background: var(--bg-card);
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+}
+
+.model-name {
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.model-meta {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.provider-quota {
+  padding: 1rem;
+  background: var(--bg-card);
+  border-radius: 6px;
+}
+
+.quota-title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.quota-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.quota-label {
+  color: var(--text-secondary);
+}
+
+.quota-value {
+  font-weight: 500;
+}
+
+.quota-bar {
+  height: 8px;
+  background: var(--bg-primary);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.quota-fill {
+  height: 100%;
+  background: var(--accent);
+  transition: width 0.3s;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .navbar {
+    flex-direction: column;
+    gap: 1rem;
   }
-}
   
-@media (max-width: 620px) {
+  .nav-links {
-  .board {
+    width: 100%;
+    justify-content: space-around;
+  }
+  
+  .wiki-container {
     grid-template-columns: 1fr;
   }
+  
+  .board {
+    flex-direction: column;
+  }
+  
+  .column {
+    flex: 0 0 auto;
+    max-height: none;
+  }
 }

push-to-gitea.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+# Script to push OpenClaw Agent Fleet Dashboard to Gitea
+
+echo "Creating Gitea repository..."
+echo ""
+echo "Please follow these steps:"
+echo "1. Open https://gitea.tophermayor.com in your browser"
+echo "2. Log in to your account"
+echo "3. Click the '+' button in the top right corner"
+echo "4. Select 'New Repository'"
+echo "5. Enter repository details:"
+echo "   - Owner: topher (or your username)"
+echo "   - Repository Name: openclaw-taskboard"
+echo "   - Description: OpenClaw Agent Fleet Dashboard - Task coordination board"
+echo "   - Visibility: Public or Private (your choice)"
+echo "   - Do NOT initialize with README, .gitignore, or license"
+echo "6. Click 'Create Repository'"
+echo ""
+echo "After creating the repository, run:"
+echo ""
+echo "cd /tmp/taskboard-gitea"
+echo "git remote add origin https://gitea.tophermayor.com/topher/openclaw-taskboard.git"
+echo "git branch -M main"
+echo "git push -u origin main"
+echo ""
+echo "Or if you prefer SSH:"
+echo "git remote add origin git@gitea.tophermayor.com:topher/openclaw-taskboard.git"
+echo "git branch -M main"
+echo "git push -u origin main"

server.js

@@ -9,6 +9,8 @@ const PORT = process.env.PORT || 8395;
 const DB_PATH = process.env.DB_PATH || path.join(__dirname, 'data', 'tasks.db');
 const WIKI_DIR = process.env.WIKI_DIR || '/home/bear/.openclaw/workspace/wiki';
 
+const AGENTS_DIR = process.env.AGENTS_DIR || '/home/bear/.openclaw/agents';
+const OPENCLAW_CONFIG = process.env.OPENCLAW_CONFIG || '/home/bear/.openclaw/openclaw.json';
 const VALID_STATUSES = ['Backlog', 'Todo', 'In Progress', 'Review', 'Done'];
 const VALID_PRIORITIES = ['Low', 'Medium', 'High', 'Critical'];
 
@@ -227,6 +229,140 @@ app.patch('/api/tasks/:id', (req, res) => {
             } catch (wikiErr) {
               console.error('wiki_creation_error', wikiErr);
             }
+
+// Agents endpoint
+app.get('/api/agents', (req, res) => {
+  try {
+    const agents = [];
+    
+    if (fs.existsSync(AGENTS_DIR)) {
+      const agentDirs = fs.readdirSync(AGENTS_DIR).filter(d => {
+        return fs.statSync(path.join(AGENTS_DIR, d)).isDirectory();
+      });
+
+      agentDirs.forEach(agentName => {
+        const agentPath = path.join(AGENTS_DIR, agentName);
+        const workspacePath = path.join(agentPath, 'workspace');
+        
+        const agent = {
+          name: agentName,
+          status: 'active',
+          currentTask: null,
+          tools: [],
+          files: [],
+          permissions: []
+        };
+
+        // Read workspace files
+        if (fs.existsSync(workspacePath)) {
+          const files = fs.readdirSync(workspacePath);
+          agent.files = files.filter(f => f.endsWith('.md'));
+          
+          // Read MEMORY.md for tools
+          const memoryPath = path.join(workspacePath, 'MEMORY.md');
+          if (fs.existsSync(memoryPath)) {
+            const memory = fs.readFileSync(memoryPath, 'utf8');
+            // Extract tools from memory
+            const toolMatches = memory.match(/##\s+Tools([\s\S]*?)(?=##|$)/i);
+            if (toolMatches) {
+              agent.tools = toolMatches[1].split('\n')
+                .filter(line => line.trim().startsWith('-'))
+                .map(line => line.replace(/^-\s*/, '').trim());
+            }
+          }
+
+          // Read HEARTBEAT.md for current task
+          const heartbeatPath = path.join(workspacePath, 'HEARTBEAT.md');
+          if (fs.existsSync(heartbeatPath)) {
+            const heartbeat = fs.readFileSync(heartbeatPath, 'utf8');
+            const taskMatch = heartbeat.match(/Current Task:\s*(.+)/i);
+            if (taskMatch) {
+              agent.currentTask = taskMatch[1].trim();
+            }
+          }
+        }
+
+        agents.push(agent);
+      });
+    }
+
+    res.json(agents);
+  } catch (err) {
+    console.error('Error reading agents:', err);
+    res.status(500).json({ error: 'failed_to_fetch_agents' });
+  }
+});
+
+// Usage endpoint
+app.get('/api/usage', (req, res) => {
+  try {
+    const usage = {
+      providers: [],
+      lastUpdated: new Date().toISOString()
+    };
+
+    // Read OpenClaw config
+    if (fs.existsSync(OPENCLAW_CONFIG)) {
+      const config = JSON.parse(fs.readFileSync(OPENCLAW_CONFIG, 'utf8'));
+      
+      // Extract provider information
+      if (config.models) {
+        const providerMap = {};
+        
+        Object.entries(config.models).forEach(([modelName, modelConfig]) => {
+          const provider = modelConfig.provider || 'unknown';
+          
+          if (!providerMap[provider]) {
+            providerMap[provider] = {
+              name: provider,
+              models: [],
+              quota: {
+                requests: 0,
+                tokens: 0,
+                limit: 'unlimited'
+              }
+            };
+          }
+
+          providerMap[provider].models.push({
+            name: modelName,
+            type: modelConfig.type || 'chat',
+            contextWindow: modelConfig.context_window || 'unknown'
+          });
+        });
+
+        usage.providers = Object.values(providerMap);
+      }
+    }
+
+    res.json(usage);
+  } catch (err) {
+    console.error('Error reading usage:', err);
+    res.status(500).json({ error: 'failed_to_fetch_usage' });
+  }
+});
+
+// Heartbeat endpoint for agents
+app.get('/api/heartbeat/:agent', (req, res) => {
+  const agent = req.params.agent;
+  
+  db.all(
+    'SELECT * FROM tasks WHERE assignee = ? AND status IN (?, ?, ?) ORDER BY priority DESC, created_at ASC',
+    [agent, 'Todo', 'In Progress', 'Review'],
+    (err, rows) => {
+      if (err) {
+        return res.status(500).json({ error: 'failed_to_fetch_tasks' });
+      }
+
+      const tasks = rows.map(normalizeTask);
+      res.json({
+        agent,
+        pending_tasks: tasks.length,
+        tasks
+      });
+    }
+  );
+});
           }
 
           broadcast('task_updated', task);
@@ -237,6 +373,135 @@ app.patch('/api/tasks/:id', (req, res) => {
   });
 });
 
+
+// Agents endpoint
+app.get('/api/agents', (req, res) => {
+  try {
+    const agents = [];
+    
+    if (fs.existsSync(AGENTS_DIR)) {
+      const agentDirs = fs.readdirSync(AGENTS_DIR).filter(d => {
+        return fs.statSync(path.join(AGENTS_DIR, d)).isDirectory();
+      });
+
+      agentDirs.forEach(agentName => {
+        const agentPath = path.join(AGENTS_DIR, agentName);
+        const workspacePath = path.join(agentPath, 'workspace');
+        
+        const agent = {
+          name: agentName,
+          status: 'active',
+          currentTask: null,
+          tools: [],
+          files: [],
+          permissions: []
+        };
+
+        if (fs.existsSync(workspacePath)) {
+          const files = fs.readdirSync(workspacePath);
+          agent.files = files.filter(f => f.endsWith('.md'));
+          
+          const memoryPath = path.join(workspacePath, 'MEMORY.md');
+          if (fs.existsSync(memoryPath)) {
+            const memory = fs.readFileSync(memoryPath, 'utf8');
+            const toolMatches = memory.match(/##\\s+Tools([\\s\\S]*?)(?=##|$)/i);
+            if (toolMatches) {
+              agent.tools = toolMatches[1].split('\\n')
+                .filter(line => line.trim().startsWith('-'))
+                .map(line => line.replace(/^-\\s*/, '').trim());
+            }
+          }
+
+          const heartbeatPath = path.join(workspacePath, 'HEARTBEAT.md');
+          if (fs.existsSync(heartbeatPath)) {
+            const heartbeat = fs.readFileSync(heartbeatPath, 'utf8');
+            const taskMatch = heartbeat.match(/Current Task:\\s*(.+)/i);
+            if (taskMatch) {
+              agent.currentTask = taskMatch[1].trim();
+            }
+          }
+        }
+
+        agents.push(agent);
+      });
+    }
+
+    res.json(agents);
+  } catch (err) {
+    console.error('Error reading agents:', err);
+    res.status(500).json({ error: 'failed_to_fetch_agents' });
+  }
+});
+
+// Usage endpoint
+app.get('/api/usage', (req, res) => {
+  try {
+    const usage = {
+      providers: [],
+      lastUpdated: new Date().toISOString()
+    };
+
+    if (fs.existsSync(OPENCLAW_CONFIG)) {
+      const config = JSON.parse(fs.readFileSync(OPENCLAW_CONFIG, 'utf8'));
+      
+      if (config.models) {
+        const providerMap = {};
+        
+        Object.entries(config.models).forEach(([modelName, modelConfig]) => {
+          const provider = modelConfig.provider || 'unknown';
+          
+          if (!providerMap[provider]) {
+            providerMap[provider] = {
+              name: provider,
+              models: [],
+              quota: {
+                requests: 0,
+                tokens: 0,
+                limit: 'unlimited'
+              }
+            };
+          }
+
+          providerMap[provider].models.push({
+            name: modelName,
+            type: modelConfig.type || 'chat',
+            contextWindow: modelConfig.context_window || 'unknown'
+          });
+        });
+
+        usage.providers = Object.values(providerMap);
+      }
+    }
+
+    res.json(usage);
+  } catch (err) {
+    console.error('Error reading usage:', err);
+    res.status(500).json({ error: 'failed_to_fetch_usage' });
+  }
+});
+
+// Heartbeat endpoint for agents
+app.get('/api/heartbeat/:agent', (req, res) => {
+  const agent = req.params.agent;
+  
+  db.all(
+    'SELECT * FROM tasks WHERE assignee = ? AND status IN (?, ?, ?) ORDER BY priority DESC, created_at ASC',
+    [agent, 'Todo', 'In Progress', 'Review'],
+    (err, rows) => {
+      if (err) {
+        return res.status(500).json({ error: 'failed_to_fetch_tasks' });
+      }
+
+      const tasks = rows.map(normalizeTask);
+      res.json({
+        agent,
+        pending_tasks: tasks.length,
+        tasks
+      });
+    }
+  );
+});
+
 wss.on('connection', (socket) => {
   socket.send(JSON.stringify({ type: 'connected', payload: { ok: true } }));
 });