feat: add dark mode support v2

public/index.html

@@ -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>
 

public/styles.css

@@ -1,11 +1,22 @@
 :root {
-    --bg: #1a1a1a;
+    --bg: #f5f7fb;
-    --fg: #e0e0e0;
+    --fg: #1f2937;
-    --border: #444;
+    --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);

server.js

@@ -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 }));
+app.use(express.static(path.join(__dirname, 'public')));
-
-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'));
-});
 
 function normalizeTask(row) {
   return {

views/agents.html

@@ -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>

views/layout.html

@@ -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>

views/tasks.html

@@ -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>

views/usage.html

@@ -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>

views/wiki.html

@@ -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>