@logboard/cli 1.0.0

package/setup.js

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+'use strict';
+/**
+ * LogBoard — First-run setup
+ * Creates data/ directory with default users.json, settings.json, and .env
+ * Run once: npm run setup
+ */
+const bcrypt = require('bcryptjs');
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+
+const DATA_DIR = path.join(__dirname, 'data');
+const USERS_FILE = path.join(DATA_DIR, 'users.json');
+const SETTINGS_FILE= path.join(DATA_DIR, 'settings.json');
+const ROLES_FILE = path.join(DATA_DIR, 'role-config.json');
+const API_KEYS_FILE= path.join(DATA_DIR, 'api-keys.json');
+const AUDIT_FILE = path.join(DATA_DIR, 'audit.ndjson');
+const ALERTS_FILE = path.join(DATA_DIR, 'alerts.json');
+const ENV_FILE = path.join(__dirname, '.env');
+
+async function main () {
+	console.log('\n  ╔══════════════════════════════════╗');
+	console.log('  ║   LogBoard — First-Run Setup        ║');
+	console.log('  ╚══════════════════════════════════╝\n');
+
+	// Ensure data directory exists
+	if (!fs.existsSync(DATA_DIR)) {
+		fs.mkdirSync(DATA_DIR, { recursive: true });
+		console.log('✅  Created data/');
+	}
+
+	// users.json
+	if (fs.existsSync(USERS_FILE)) {
+		console.log('⚠️   data/users.json already exists — skipping.');
+	} else {
+		const [adminHash, viewerHash] = await Promise.all([
+			bcrypt.hash('admin123', 12),
+			bcrypt.hash('viewer123', 12),
+		]);
+		fs.writeFileSync(USERS_FILE, JSON.stringify({
+			admin: { password: adminHash, role: 'admin', createdAt: new Date().toISOString() },
+			viewer: { password: viewerHash, role: 'viewer', createdAt: new Date().toISOString() },
+		}, null, 2));
+		console.log('✅  data/users.json created');
+		console.log('    admin  / admin123  (role: admin)');
+		console.log('    viewer / viewer123 (role: viewer)');
+		console.log('    ⚠️   Change these passwords on first login!\n');
+	}
+
+	// settings.json
+	if (!fs.existsSync(SETTINGS_FILE)) {
+		fs.writeFileSync(SETTINGS_FILE, JSON.stringify({
+			retentionDays: 7,
+			webhookUrl: '',
+			enableStream: true,
+			ipWhitelist: [],
+		}, null, 2));
+		console.log('✅  data/settings.json created');
+	}
+
+	// role-config.json (empty — built-in roles are in-memory)
+	if (!fs.existsSync(ROLES_FILE)) {
+		fs.writeFileSync(ROLES_FILE, JSON.stringify({}, null, 2));
+		console.log('✅  data/role-config.json created');
+	}
+
+	// api-keys.json
+	if (!fs.existsSync(API_KEYS_FILE)) {
+		fs.writeFileSync(API_KEYS_FILE, JSON.stringify([], null, 2));
+		console.log('✅  data/api-keys.json created');
+	}
+	// audit.ndjson
+	if (!fs.existsSync(AUDIT_FILE)) {
+		fs.writeFileSync(AUDIT_FILE, '', 'utf8');
+		console.log('✅  data/audit.ndjson created');
+	}
+	// alerts.json
+	if (!fs.existsSync(ALERTS_FILE)) {
+		fs.writeFileSync(ALERTS_FILE, JSON.stringify({ rules: [], history: [] }, null, 2));
+		console.log('✅  data/alerts.json created');
+	}
+
+	// .env
+	if (fs.existsSync(ENV_FILE)) {
+		console.log('⚠️   .env already exists — skipping.');
+	} else {
+		const jwtSecret = crypto.randomBytes(32).toString('hex');
+		const apiKey = `blq_${ crypto.randomBytes(32).toString('hex')}`;
+		fs.writeFileSync(ENV_FILE, `${[
+			'# LogBoard Configuration',
+			'# Generated by: npm run setup',
+			'',
+			'NODE_ENV=development',
+			'PORT=9900',
+			'',
+			'# Security — keep these secret!',
+			`JWT_SECRET=${ jwtSecret}`,
+			`API_KEY=${ apiKey }   # Legacy single key — use API key management UI instead`,
+			'',
+			'# Storage',
+			'DATA_DIR=./data',
+			'LOG_BASE_DIR=./logs',
+			'RETENTION_DAYS=7',
+			'',
+			'# Features',
+			'ENABLE_STREAM=true',
+			'JWT_EXPIRES_IN=24h',
+			'',
+			'# CORS (comma-separated)',
+			'CORS_ORIGINS=http://localhost:9900',
+			'',
+			'# Optional webhook for error alerts',
+			'WEBHOOK_URL=',
+		].join('\n') }\n`);
+		console.log('✅  .env created with generated secrets');
+		console.log(`    API_KEY=${ apiKey.slice(0, 20) }…\n`);
+	}
+
+	// logs directory
+	if (!fs.existsSync(path.join(__dirname, 'logs'))) {
+		fs.mkdirSync(path.join(__dirname, 'logs'), { recursive: true });
+		console.log('✅  logs/ directory created');
+	}
+
+	console.log('\n  🚀  Setup complete! Start LogBoard:');
+	console.log('      npm start\n');
+	console.log('      Open: http://localhost:9900\n');
+}
+
+main().catch((err) => { console.error('Setup error:', err.message); process.exit(1); });

package/views/404.ejs

@@ -0,0 +1,8 @@
+<%- include('partials/head', { title: '404' }) %>
+<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;padding:20px;">
+  <div style="font-size:80px;line-height:1;">🔍</div>
+  <div style="font-size:28px;font-weight:700;color:var(--text);">404 — Page Not Found</div>
+  <div style="color:var(--text2);max-width:340px;">The page you're looking for doesn't exist or has been moved.</div>
+  <a href="/dashboard" class="btn btn-primary" style="margin-top:8px;">Go to Dashboard</a>
+</div>
+</body></html>

package/views/alerts.ejs

@@ -0,0 +1,190 @@
+<%- include('partials/head', { title: 'Alert Rules' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Alert Rules</div>
+      <div class="header-actions">
+        <button class="btn btn-primary btn-sm" onclick="openRuleModal()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          New Rule
+        </button>
+      </div>
+    </header>
+    <div class="page-content">
+      <div style="display:grid;grid-template-columns:1.3fr 1fr;gap:12px;">
+        <!-- Rules list -->
+        <div>
+          <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:8px;">Rules (<%= rules.length %>)</div>
+          <% if(!rules.length){ %>
+          <div class="card"><div class="empty-state" style="padding:36px 0;">
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+            <p style="margin-top:10px;">No alert rules yet</p>
+          </div></div>
+          <% } %>
+          <% rules.forEach(function(rule){ %>
+          <div class="card" style="margin-bottom:10px;border-left:3px solid <%=rule.enabled?'var(--accent)':'var(--border2)'%>;">
+            <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:10px;">
+              <div style="flex:1;min-width:0;">
+                <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
+                  <span style="font-weight:600;font-size:13px;color:var(--text);"><%=rule.name%></span>
+                  <span class="badge <%=rule.enabled?'badge-green':'badge-debug'%>"><%=rule.enabled?'active':'disabled'%></span>
+                  <span class="badge badge-info" style="font-size:9px;"><%=rule.type%></span>
+                </div>
+                <div style="font-size:11px;color:var(--text2);line-height:1.7;">
+                  <%if(rule.service){%><span style="font-family:'JetBrains Mono',monospace;color:var(--accent-l);"><%=rule.service%></span> · <%}%>
+                  Threshold: <strong><%=rule.threshold%></strong> · Window: <%=rule.windowMinutes%>min · Cooldown: <%=rule.cooldownMinutes%>min
+                  <%if(rule.keyword){%> · Keyword: "<strong><%=rule.keyword%></strong>"<%}%>
+                </div>
+                <%if(rule.lastFiredAt){%>
+                <div style="font-size:10px;color:var(--text3);margin-top:3px;">Last fired: <%=new Date(rule.lastFiredAt).toLocaleString()%></div>
+                <%}%>
+              </div>
+              <div style="display:flex;gap:6px;flex-shrink:0;">
+                <button class="btn btn-secondary btn-xs" onclick="editRule(<%- JSON.stringify(rule) %>)">Edit</button>
+                <button class="btn btn-danger btn-xs" onclick="deleteRule('<%=rule.id%>','<%=rule.name%>')">Delete</button>
+              </div>
+            </div>
+          </div>
+          <% }) %>
+        </div>
+
+        <!-- Trigger history -->
+        <div>
+          <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:8px;">Trigger History</div>
+          <div class="card" style="max-height:600px;overflow-y:auto;">
+            <% if(!history.length){ %>
+            <div style="text-align:center;padding:30px;color:var(--text3);font-size:12px;">No alerts fired yet</div>
+            <% } %>
+            <% history.forEach(function(h){ %>
+            <div style="padding:8px 0;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:8px;">
+              <div class="dot dot-red" style="margin-top:5px;flex-shrink:0;"></div>
+              <div>
+                <div style="font-size:12px;font-weight:500;color:var(--text);"><%=h.ruleName%></div>
+                <div style="font-size:11px;color:var(--text2);margin:2px 0;"><%=h.message%></div>
+                <div style="font-size:10px;color:var(--text3);"><%=new Date(h.ts).toLocaleString()%></div>
+              </div>
+            </div>
+            <% }) %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Rule modal -->
+<div class="modal-overlay" id="rule-modal">
+  <div class="modal-box" style="max-width:560px;">
+    <div class="modal-title" id="modal-title">New Alert Rule</div>
+    <div class="modal-sub">Alert fires when the condition is met and sends to Slack webhook.</div>
+    <input type="hidden" id="rule-id"/>
+
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
+      <div class="form-group" style="grid-column:span 2"><label class="form-label">Rule Name</label><input type="text" id="rule-name" class="form-input" placeholder="e.g. High error rate on API"/></div>
+      <div class="form-group"><label class="form-label">Type</label>
+        <select id="rule-type" class="form-select" onchange="updateTypeHints()">
+          <option value="error_rate">Error Rate (%)</option>
+          <option value="error_count">Error Count</option>
+          <option value="log_volume">Log Volume</option>
+          <option value="keyword_match">Keyword Match</option>
+        </select>
+      </div>
+      <div class="form-group"><label class="form-label">Service (optional)</label>
+        <select id="rule-service" class="form-select">
+          <option value="">All services</option>
+          <% logServices.forEach(function(s){ %><option value="<%=s.appName%>"><%=s.appName%></option><% }) %>
+        </select>
+      </div>
+      <div class="form-group"><label class="form-label" id="thresh-label">Threshold (%)</label><input type="number" id="rule-threshold" class="form-input" value="5" min="1"/></div>
+      <div class="form-group"><label class="form-label">Window (min)</label><input type="number" id="rule-window" class="form-input" value="10" min="1"/></div>
+      <div class="form-group"><label class="form-label">Cooldown (min)</label><input type="number" id="rule-cooldown" class="form-input" value="30" min="1"/></div>
+      <div class="form-group" id="kw-group" style="display:none"><label class="form-label">Keyword</label><input type="text" id="rule-keyword" class="form-input" placeholder="e.g. OutOfMemory"/></div>
+      <div class="form-group" style="grid-column:span 2"><label class="form-label">Slack Webhook URL <span style="color:var(--text3);font-weight:400">(blank = use global)</span></label><input type="text" id="rule-slack" class="form-input" placeholder="https://hooks.slack.com/services/…"/></div>
+      <div class="form-group"><label class="form-label">Discord Webhook <span style="color:var(--text3);font-weight:400">(optional)</span></label><input type="text" id="rule-discord" class="form-input" placeholder="https://discord.com/api/webhooks/…"/></div>
+      <div class="form-group"><label class="form-label">Email To <span style="color:var(--text3);font-weight:400">(optional)</span></label><input type="email" id="rule-email" class="form-input" placeholder="oncall@company.com"/></div>
+      <div class="form-group" style="display:flex;align-items:center;gap:8px;">
+        <label class="toggle"><input type="checkbox" id="rule-enabled" checked/><span class="toggle-slider"></span></label>
+        <span style="font-size:12px;color:var(--text2)">Enabled</span>
+      </div>
+    </div>
+
+    <div id="rule-err" style="display:none;color:var(--red);font-size:12px;margin-bottom:10px;"></div>
+    <div style="display:flex;gap:8px;margin-top:4px;">
+      <button class="btn btn-primary" style="flex:1;" onclick="saveRule()">Save Rule</button>
+      <button class="btn btn-secondary" onclick="closeModal('rule-modal')">Cancel</button>
+    </div>
+  </div>
+</div>
+
+<script>
+function openRuleModal(rule) {
+  const m = document.getElementById('rule-modal');
+  document.getElementById('modal-title').textContent = rule ? 'Edit Rule' : 'New Alert Rule';
+  document.getElementById('rule-id').value        = rule?.id || '';
+  document.getElementById('rule-name').value      = rule?.name || '';
+  document.getElementById('rule-type').value      = rule?.type || 'error_rate';
+  document.getElementById('rule-service').value   = rule?.service || '';
+  document.getElementById('rule-threshold').value = rule?.threshold ?? 5;
+  document.getElementById('rule-window').value    = rule?.windowMinutes ?? 10;
+  document.getElementById('rule-cooldown').value  = rule?.cooldownMinutes ?? 30;
+  document.getElementById('rule-keyword').value   = rule?.keyword || '';
+  document.getElementById('rule-slack').value     = rule?.slackUrl    || '';
+  if(document.getElementById('rule-discord')) document.getElementById('rule-discord').value = rule?.discordUrl || '';
+  if(document.getElementById('rule-email'))   document.getElementById('rule-email').value   = rule?.emailTo   || '';
+  document.getElementById('rule-enabled').checked = rule?.enabled !== false;
+  document.getElementById('rule-err').style.display = 'none';
+  updateTypeHints();
+  m.classList.add('open');
+}
+function editRule(rule) { openRuleModal(rule); }
+function closeModal(id) { document.getElementById(id).classList.remove('open'); }
+document.querySelectorAll('.modal-overlay').forEach(m => m.addEventListener('click', e => { if (e.target === m) m.classList.remove('open'); }));
+document.addEventListener('keydown', e => { if (e.key === 'Escape') document.querySelectorAll('.modal-overlay.open').forEach(m => m.classList.remove('open')); });
+
+function updateTypeHints() {
+  const t = document.getElementById('rule-type').value;
+  document.getElementById('thresh-label').textContent = t === 'error_rate' ? 'Threshold (%)' : t === 'keyword_match' ? 'Min matches' : 'Threshold (count)';
+  document.getElementById('kw-group').style.display = t === 'keyword_match' ? '' : 'none';
+}
+
+async function saveRule() {
+  const id = document.getElementById('rule-id').value;
+  const body = {
+    name:            document.getElementById('rule-name').value.trim(),
+    type:            document.getElementById('rule-type').value,
+    service:         document.getElementById('rule-service').value,
+    threshold:       Number(document.getElementById('rule-threshold').value),
+    windowMinutes:   Number(document.getElementById('rule-window').value),
+    cooldownMinutes: Number(document.getElementById('rule-cooldown').value),
+    keyword:         document.getElementById('rule-keyword').value.trim(),
+    slackUrl:        document.getElementById('rule-slack').value.trim(),
+        discordUrl:      document.getElementById('rule-discord')?.value?.trim()||'',
+        emailTo:         document.getElementById('rule-email')?.value?.trim()||'',
+    enabled:         document.getElementById('rule-enabled').checked,
+    id:              id || undefined,
+  };
+  const errEl = document.getElementById('rule-err');
+  errEl.style.display = 'none';
+  if (!body.name) { errEl.textContent = 'Name is required'; errEl.style.display = ''; return; }
+  try {
+    const url = id ? '/api/alerts/rules/' + id : '/api/alerts/rules';
+    const r   = await fetch(url, { method: id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+    const d   = await r.json();
+    if (!r.ok) { errEl.textContent = d.error; errEl.style.display = ''; return; }
+    toast('Rule saved', 'success');
+    closeModal('rule-modal');
+    location.reload();
+  } catch(e) { errEl.textContent = 'Network error'; errEl.style.display = ''; }
+}
+
+async function deleteRule(id, name) {
+  if (!confirm('Delete rule "' + name + '"?')) return;
+  const r = await fetch('/api/alerts/rules/' + id, { method: 'DELETE' });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error, 'error'); return; }
+  toast('Rule deleted', 'success');
+  location.reload();
+}
+</script>
+</body></html>

package/views/analytics.ejs

@@ -0,0 +1,209 @@
+<%- include('partials/head', { title: 'Analytics' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Analytics</div>
+    </header>
+
+    <div class="page-content">
+      <!-- Filters -->
+      <div class="card" style="margin-bottom:12px;">
+        <form method="GET" action="/analytics">
+          <div class="form-row">
+            <div class="form-group" style="min-width:180px;flex:1.5">
+              <label class="form-label">Service</label>
+              <select name="service" class="form-select" onchange="this.form.submit()">
+                <option value="">All Services</option>
+                <% services.forEach(function(s) { %>
+                <option value="<%= s.appName %>" <%= selected.service===s.appName?'selected':'' %>><%= s.appName %></option>
+                <% }) %>
+              </select>
+            </div>
+            <div class="form-group" style="min-width:150px;">
+              <label class="form-label">Date</label>
+              <input type="date" name="date" class="form-input" value="<%= selected.date %>" max="<%= today %>" onchange="this.form.submit()"/>
+            </div>
+            <div class="form-group" style="display:flex;align-items:flex-end;">
+              <button type="submit" class="btn btn-primary">Apply</button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      <!-- Level breakdown summary -->
+      <% if (breakdown) { %>
+      <div class="stats-grid" style="margin-bottom:12px;">
+        <div class="stat-card">
+          <div class="stat-icon blue"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
+          <div><div class="stat-value"><%= breakdown.total.toLocaleString() %></div><div class="stat-label">Total Logs</div><div class="stat-sub"><%= selected.date %></div></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon red"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
+          <div><div class="stat-value"><%= breakdown.error.toLocaleString() %></div><div class="stat-label">Errors</div><div class="stat-sub"><%= breakdown.total ? ((breakdown.error/breakdown.total*100).toFixed(1))+'%' : '0%' %> of total</div></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon yellow"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
+          <div><div class="stat-value"><%= breakdown.warn.toLocaleString() %></div><div class="stat-label">Warnings</div><div class="stat-sub"><%= breakdown.total ? ((breakdown.warn/breakdown.total*100).toFixed(1))+'%' : '0%' %> of total</div></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon green"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg></div>
+          <div><div class="stat-value"><%= breakdown.info.toLocaleString() %></div><div class="stat-label">Info</div><div class="stat-sub"><%= breakdown.debug %> debug</div></div>
+        </div>
+      </div>
+      <% } %>
+
+      <div class="grid-2" style="margin-bottom:12px;">
+        <!-- Hourly chart -->
+        <div class="card span-2">
+          <div class="card-title">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
+            Log Volume by Hour
+            <span style="margin-left:auto;font-size:11px;color:var(--text3);font-weight:400"><%= selected.date %> · <%= selected.service || 'all services' %></span>
+          </div>
+          <div class="chart-wrap-lg">
+            <canvas id="hourlyChart"></canvas>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid-2" style="margin-bottom:12px;">
+        <!-- Level donut -->
+        <div class="card">
+          <div class="card-title">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/></svg>
+            Level Distribution
+          </div>
+          <div class="chart-wrap">
+            <canvas id="levelChart"></canvas>
+          </div>
+        </div>
+
+        <!-- 7-day trend -->
+        <div class="card">
+          <div class="card-title">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg>
+            7-Day Trend
+          </div>
+          <div class="chart-wrap">
+            <canvas id="trendChart"></canvas>
+          </div>
+        </div>
+      </div>
+
+      <!-- Top services -->
+      <% if (topSvcs && topSvcs.length) { %>
+      <div class="card">
+        <div class="card-title">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
+          Top Services — <span style="font-weight:400;color:var(--text2)"><%= selected.date %></span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr><th>Service</th><th>Total</th><th>Errors</th><th>Warnings</th><th>Info</th><th>Error Rate</th><th>Volume</th></tr>
+            </thead>
+            <tbody>
+              <% var maxTotal = topSvcs[0] ? topSvcs[0].total : 1; %>
+              <% topSvcs.forEach(function(svc) { %>
+              <tr>
+                <td><a href="/logs?service=<%= svc.appName %>&date=<%= selected.date %>" style="font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500"><%= svc.appName %></a></td>
+                <td><strong><%= svc.total.toLocaleString() %></strong></td>
+                <td><span class="badge badge-error"><%= svc.error %></span></td>
+                <td><span class="badge badge-warn"><%= svc.warn %></span></td>
+                <td><span class="badge badge-info"><%= svc.info %></span></td>
+                <td style="color:<%= svc.total && svc.error/svc.total > 0.1 ? 'var(--red)' : 'var(--text2)' %>">
+                  <%= svc.total ? (svc.error/svc.total*100).toFixed(1) : '0.0' %>%
+                </td>
+                <td style="min-width:120px;">
+                  <div class="progress-bar" style="margin-top:4px;">
+                    <div class="progress-fill <%= svc.error/svc.total > 0.1 ? 'red' : '' %>" style="width:<%= Math.round(svc.total/maxTotal*100) %>%"></div>
+                  </div>
+                </td>
+              </tr>
+              <% }) %>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <% } %>
+    </div>
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+const isDark    = document.documentElement.dataset.theme !== 'light';
+const grid      = isDark ? 'rgba(255,255,255,.05)' : 'rgba(0,0,0,.06)';
+const tickColor = isDark ? '#5a5a78' : '#9494b8';
+
+const hourlyRaw  = <%- JSON.stringify(hourly  ? hourly.hours  : []) %>;
+const breakdownR = <%- JSON.stringify(breakdown || {error:0,warn:0,info:0,debug:0}) %>;
+const trendRaw   = <%- JSON.stringify(trend   || []) %>;
+
+// ── Hourly stacked bar ─────────────────────────────────────────────────────
+if (hourlyRaw.length) {
+  new Chart(document.getElementById('hourlyChart'), {
+    type: 'bar',
+    data: {
+      labels: hourlyRaw.map(h => h.hour + ':00'),
+      datasets: [
+        { label: 'Error', data: hourlyRaw.map(h => h.error), backgroundColor: 'rgba(239,68,68,.75)',  stack: 's' },
+        { label: 'Warn',  data: hourlyRaw.map(h => h.warn),  backgroundColor: 'rgba(245,158,11,.65)', stack: 's' },
+        { label: 'Info',  data: hourlyRaw.map(h => h.info),  backgroundColor: 'rgba(59,130,246,.6)',  stack: 's' },
+        { label: 'Debug', data: hourlyRaw.map(h => h.debug), backgroundColor: 'rgba(107,114,128,.4)', stack: 's' },
+      ]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { position: 'top', labels: { color: tickColor, font: { size: 11 }, boxWidth: 12 } } },
+      scales: {
+        x: { stacked: true, ticks: { color: tickColor, font: { size: 10 } }, grid: { color: grid } },
+        y: { stacked: true, ticks: { color: tickColor, font: { size: 10 } }, grid: { color: grid } }
+      }
+    }
+  });
+}
+
+// ── Level donut ────────────────────────────────────────────────────────────
+new Chart(document.getElementById('levelChart'), {
+  type: 'doughnut',
+  data: {
+    labels: ['Error', 'Warn', 'Info', 'Debug'],
+    datasets: [{
+      data: [breakdownR.error, breakdownR.warn, breakdownR.info, breakdownR.debug],
+      backgroundColor: ['rgba(239,68,68,.85)','rgba(245,158,11,.85)','rgba(59,130,246,.85)','rgba(107,114,128,.75)'],
+      borderWidth: 2,
+      borderColor: isDark ? '#13131e' : '#fff',
+    }]
+  },
+  options: {
+    responsive: true, maintainAspectRatio: false,
+    plugins: { legend: { position: 'right', labels: { color: tickColor, font: { size: 11 }, boxWidth: 12 } } },
+    cutout: '65%'
+  }
+});
+
+// ── 7-day trend line ───────────────────────────────────────────────────────
+if (trendRaw.length) {
+  new Chart(document.getElementById('trendChart'), {
+    type: 'line',
+    data: {
+      labels: trendRaw.map(d => d.date.slice(5)),
+      datasets: [
+        { label: 'Total', data: trendRaw.map(d => d.total), borderColor: 'rgba(99,102,241,.9)', backgroundColor: 'rgba(99,102,241,.1)', tension: .3, fill: true, pointRadius: 3 },
+        { label: 'Error', data: trendRaw.map(d => d.error), borderColor: 'rgba(239,68,68,.8)',  backgroundColor: 'transparent', tension: .3, pointRadius: 3 },
+      ]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { labels: { color: tickColor, font: { size: 11 }, boxWidth: 12 } } },
+      scales: {
+        x: { ticks: { color: tickColor, font: { size: 10 } }, grid: { color: grid } },
+        y: { ticks: { color: tickColor, font: { size: 10 } }, grid: { color: grid }, beginAtZero: true }
+      }
+    }
+  });
+}
+</script>
+</body></html>