feat: separate routes v2

server.js

@@ -53,9 +53,62 @@ 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')));
+app.use(express.static(path.join(__dirname, 'public'), { index: false }));
+
+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 {