Initial commit: OpenClaw Agent Fleet Dashboard
- Kanban board with 5 columns (Backlog, Todo, In Progress, Review, Done) - Agent assignment for all OpenClaw agents - Priority levels and tags - Wiki auto-generation on task completion - REST API for agent heartbeat integration - Real-time updates via WebSocket - SQLite database for task storage - Docker deployment configuration - Traefik ingress configuration
This commit is contained in:
141
public/app.js
Normal file
141
public/app.js
Normal file
@@ -0,0 +1,141 @@
|
||||
const STATUSES = ['Backlog', 'Todo', 'In Progress', 'Review', 'Done'];
|
||||
|
||||
const board = document.getElementById('board');
|
||||
const template = document.getElementById('task-template');
|
||||
const form = document.getElementById('task-form');
|
||||
|
||||
let tasks = [];
|
||||
|
||||
function renderBoard() {
|
||||
board.innerHTML = '';
|
||||
|
||||
for (const status of STATUSES) {
|
||||
const column = document.createElement('section');
|
||||
column.className = 'column';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
async function loadTasks() {
|
||||
const res = await fetch('/api/tasks');
|
||||
tasks = await res.json();
|
||||
renderBoard();
|
||||
}
|
||||
|
||||
async function createTask(payload) {
|
||||
const res = await fetch('/api/tasks', {
|
||||
method: 'POST',
|
||||
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_create_task');
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async function updateTask(id, payload) {
|
||||
const res = await fetch(`/api/tasks/${id}`, {
|
||||
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 = {
|
||||
title: form.title.value,
|
||||
description: form.description.value,
|
||||
assignee: form.assignee.value,
|
||||
priority: form.priority.value,
|
||||
status: form.status.value,
|
||||
tags: form.tags.value
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean),
|
||||
};
|
||||
|
||||
try {
|
||||
await createTask(payload);
|
||||
form.reset();
|
||||
form.priority.value = 'Medium';
|
||||
form.status.value = 'Backlog';
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
});
|
||||
|
||||
function upsertTask(task) {
|
||||
const idx = tasks.findIndex((t) => t.id === task.id);
|
||||
if (idx === -1) {
|
||||
tasks.unshift(task);
|
||||
} else {
|
||||
tasks[idx] = task;
|
||||
}
|
||||
renderBoard();
|
||||
}
|
||||
|
||||
function connectWebSocket() {
|
||||
const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const ws = new WebSocket(`${proto}//${location.host}`);
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const msg = JSON.parse(event.data);
|
||||
if (msg.type === 'task_created' || msg.type === 'task_updated') {
|
||||
upsertTask(msg.payload);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
setTimeout(connectWebSocket, 1200);
|
||||
};
|
||||
}
|
||||
|
||||
loadTasks();
|
||||
connectWebSocket();
|
||||
65
public/index.html
Normal file
65
public/index.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>OpenClaw Fleet Taskboard</title>
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<h1>OpenClaw Agent Fleet Dashboard</h1>
|
||||
<p>Real-time task coordination board</p>
|
||||
</header>
|
||||
|
||||
<section class="composer">
|
||||
<h2>Create Task</h2>
|
||||
<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>
|
||||
|
||||
<template id="task-template">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h3 class="card-title"></h3>
|
||||
<span class="badge priority"></span>
|
||||
</div>
|
||||
<p class="card-desc"></p>
|
||||
<p class="meta assignee"></p>
|
||||
<p class="meta tags"></p>
|
||||
<label>
|
||||
Status
|
||||
<select class="status-select">
|
||||
<option>Backlog</option>
|
||||
<option>Todo</option>
|
||||
<option>In Progress</option>
|
||||
<option>Review</option>
|
||||
<option>Done</option>
|
||||
</select>
|
||||
</label>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
182
public/styles.css
Normal file
182
public/styles.css
Normal file
@@ -0,0 +1,182 @@
|
||||
:root {
|
||||
--bg: #0e1117;
|
||||
--panel: #161b22;
|
||||
--muted: #98a6b3;
|
||||
--text: #e6edf3;
|
||||
--border: #2d333b;
|
||||
--accent: #2f81f7;
|
||||
--critical: #f85149;
|
||||
--high: #db6d28;
|
||||
--medium: #d29922;
|
||||
--low: #238636;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: radial-gradient(circle at top, #1c2431, var(--bg) 55%);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
padding: 1.2rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(22, 27, 34, 0.9);
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.topbar p {
|
||||
margin: 0.25rem 0 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.composer {
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
textarea {
|
||||
grid-column: 1 / -1;
|
||||
min-height: 70px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button {
|
||||
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));
|
||||
gap: 1rem;
|
||||
padding: 0 1.2rem 1.2rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.column {
|
||||
background: rgba(22, 27, 34, 0.9);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
min-height: 220px;
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.column h2 {
|
||||
font-size: 0.95rem;
|
||||
margin: 0 0 0.6rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #202632;
|
||||
border: 1px solid #334055;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.4rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 0.85rem;
|
||||
color: #c7d3df;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin: 0.2rem 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
padding: 0.18rem 0.45rem;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.priority.low {
|
||||
color: var(--low);
|
||||
border-color: var(--low);
|
||||
}
|
||||
|
||||
.priority.medium {
|
||||
color: var(--medium);
|
||||
border-color: var(--medium);
|
||||
}
|
||||
|
||||
.priority.high {
|
||||
color: var(--high);
|
||||
border-color: var(--high);
|
||||
}
|
||||
|
||||
.priority.critical {
|
||||
color: var(--critical);
|
||||
border-color: var(--critical);
|
||||
}
|
||||
|
||||
.status-select {
|
||||
width: 100%;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.board {
|
||||
grid-template-columns: repeat(2, minmax(240px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.board {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user