@logboard/cli 1.0.0

package/views/health.ejs

@@ -0,0 +1,269 @@
+<%- include('partials/head', {title:'Health'}) %>
+<style>
+.svc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
+.svc-tab{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text2);transition:all .15s;}
+.svc-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}
+.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px;}
+.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
+.metric-val{font-size:24px;font-weight:500;line-height:1.1;margin-bottom:2px;}
+.metric-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}
+.metric-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
+.metric-bar-fill{height:100%;border-radius:2px;transition:width .3s;}
+.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
+.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;}
+.chart-title{font-size:12px;font-weight:500;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
+.chart-wrap{position:relative;height:140px;}
+.range-btns{display:flex;gap:4px;margin-left:auto;}
+.range-btn{padding:2px 8px;font-size:11px;border-radius:4px;border:1px solid var(--border);background:none;color:var(--text3);cursor:pointer;}
+.range-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-l);}
+.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;}
+.status-ok{background:#22c55e;} .status-warn{background:#f59e0b;} .status-err{background:#ef4444;}
+.no-metrics{text-align:center;padding:60px 20px;color:var(--text3);}
+</style>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px;vertical-align:-2px"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg>
+        Service Health
+      </div>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <div class="range-btns" id="range-btns">
+          <button class="range-btn active" data-range="60">1h</button>
+          <button class="range-btn" data-range="360">6h</button>
+          <button class="range-btn active-def" data-range="1440">24h</button>
+          <button class="range-btn" data-range="10080">7d</button>
+        </div>
+        <button class="btn btn-secondary btn-sm" onclick="refresh()">Refresh</button>
+      </div>
+    </header>
+    <div class="page-content">
+
+      <!-- Service tabs -->
+      <div class="svc-tabs" id="svc-tabs">
+        <div style="font-size:12px;color:var(--text3);">Loading services…</div>
+      </div>
+
+      <!-- Metric status cards -->
+      <div class="metric-grid" id="metric-cards">
+        <% for(let i=0;i<6;i++){ %>
+        <div class="metric-card" style="opacity:.3;animation:pulse 1s infinite alternate;">
+          <div class="metric-label">—</div><div class="metric-val">—</div>
+        </div>
+        <% } %>
+      </div>
+
+      <!-- Charts -->
+      <div class="chart-grid" id="charts-area">
+        <div class="chart-card"><div class="chart-title">Loading charts…</div></div>
+      </div>
+
+      <!-- Per-service log stats (always available) -->
+      <div class="card" id="log-stats-card">
+        <div class="card-title" style="margin-bottom:12px;">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>
+          Log stats for <span id="log-stats-title" style="color:var(--accent-l);">—</span>
+        </div>
+        <div id="log-stats-body" style="font-size:12px;color:var(--text2);">Select a service above</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 tc = getComputedStyle(document.documentElement).getPropertyValue('--text2').trim() || '#888';
+const gc = getComputedStyle(document.documentElement).getPropertyValue('--border').trim() || '#333';
+const CHART_OPT = {responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{mode:'index',intersect:false}},scales:{x:{ticks:{color:tc,font:{size:9},maxTicksLimit:8},grid:{color:gc}},y:{ticks:{color:tc,font:{size:9}},grid:{color:gc}}}};
+
+let curService = null, curRange = 60, allSvcs = [], charts = {}, serviceHealth = <%- JSON.stringify(typeof serviceHealth!=='undefined'?serviceHealth:[]) %>;
+
+// ── Init ─────────────────────────────────────────────────────────────────
+async function init() {
+  // Get services from metrics + log analytics
+  const r = await fetch('/api/metrics/services', {credentials:'include'});
+  const d = await r.json().catch(()=>({services:[]}));
+  const metricSvcs = d.services || [];
+  const logSvcs = serviceHealth.map(s=>s.appName);
+  allSvcs = [...new Set([...metricSvcs, ...logSvcs])];
+
+  renderTabs();
+  if (allSvcs.length) selectService(allSvcs[0]);
+}
+
+function renderTabs() {
+  const el = document.getElementById('svc-tabs');
+  if (!allSvcs.length) { el.innerHTML = '<div class="no-metrics">No services found yet. Start ingesting logs or enable metrics in your SDK.</div>'; return; }
+  el.innerHTML = allSvcs.map(s => `<div class="svc-tab${s===curService?' active':''}" onclick="selectService('${s}')">${s}</div>`).join('');
+}
+
+async function selectService(name) {
+  curService = name;
+  renderTabs();
+  document.getElementById('log-stats-title').textContent = name;
+  await Promise.all([loadMetrics(name), loadLogStats(name)]);
+}
+
+// ── Metrics charts ────────────────────────────────────────────────────────
+async function loadMetrics(name) {
+  const r = await fetch(`/api/metrics/${encodeURIComponent(name)}?range=${curRange}`, {credentials:'include'});
+  const d = await r.json().catch(()=>({rows:[]}));
+  const rows = d.rows || [];
+
+  if (!rows.length) {
+    // Fallback: try to extract metrics from log entries (old SDK sends as system_metrics type)
+    await loadMetricsFromLogs(name);
+    return;
+  }
+
+  // Latest snapshot for stat cards
+  const latest = rows[rows.length - 1];
+  renderStatCards(latest);
+  renderCharts(rows);
+}
+
+function renderStatCards(s) {
+  const cards = [
+    { label:'CPU', val: s.cpuPct != null ? Math.round(s.cpuPct)+'%' : '—', pct: s.cpuPct, warn:70, crit:90 },
+    { label:'RAM', val: s.ramPct != null ? Math.round(s.ramPct)+'%' : '—', pct: s.ramPct, warn:75, crit:90, sub: s.ramUsedMB ? Math.round(s.ramUsedMB)+'MB / '+Math.round(s.ramTotalMB)+'MB' : '' },
+    { label:'Heap', val: s.heapPct != null ? Math.round(s.heapPct)+'%' : '—', pct: s.heapPct, warn:70, crit:85, sub: s.heapUsedMB ? Math.round(s.heapUsedMB)+'MB / '+Math.round(s.heapTotalMB)+'MB' : '' },
+    { label:'RSS', val: s.rssMB != null ? Math.round(s.rssMB)+'MB' : '—', pct: null },
+    { label:'Uptime', val: s.uptimeSec != null ? fmtUptime(s.uptimeSec) : '—', pct: null },
+    { label:'Event Loop', val: s.eventLoopMs != null ? Math.round(s.eventLoopMs)+'ms' : '—', pct: s.eventLoopMs ? Math.min(100, s.eventLoopMs/10) : null, warn:50, crit:100 },
+  ];
+  document.getElementById('metric-cards').innerHTML = cards.map(c => {
+    const color = c.pct != null ? (c.pct > (c.crit||90) ? 'var(--red)' : c.pct > (c.warn||70) ? 'var(--yellow)' : 'var(--green)') : 'var(--text)';
+    return `<div class="metric-card">
+      <div class="metric-label">${c.label}</div>
+      <div class="metric-val" style="color:${color}">${c.val}</div>
+      ${c.sub ? `<div style="font-size:10px;color:var(--text3);margin-bottom:4px;">${c.sub}</div>` : ''}
+      ${c.pct != null ? `<div class="metric-bar"><div class="metric-bar-fill" style="width:${Math.min(100,Math.round(c.pct))}%;background:${color};"></div></div>` : ''}
+    </div>`;
+  }).join('');
+}
+
+function renderCharts(rows) {
+  const labels = rows.map(r => {
+    const d = new Date(r.ts);
+    return curRange <= 360 ? d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}) : d.toLocaleDateString([],{month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'});
+  });
+
+  const defs = [
+    { id:'cpu-chart',   title:'CPU usage %',       key:'cpuPct',       color:'rgba(59,130,246,.8)',  yMax:100 },
+    { id:'ram-chart',   title:'RAM + Heap %',       key:'ramPct',       color:'rgba(16,185,129,.8)', extra:{key:'heapPct',color:'rgba(139,92,246,.6)'}, yMax:100 },
+    { id:'heap-chart',  title:'Heap used (MB)',     key:'heapUsedMB',   color:'rgba(139,92,246,.8)' },
+    { id:'event-chart', title:'Event loop lag (ms)',key:'eventLoopMs',  color:'rgba(245,158,11,.8)' },
+    { id:'rss-chart',   title:'RSS memory (MB)',    key:'rssMB',        color:'rgba(107,114,128,.6)' },
+    { id:'disk-chart',  title:'Disk used %',        key:'diskPct',      color:'rgba(239,68,68,.7)',   yMax:100 },
+  ];
+
+  document.getElementById('charts-area').innerHTML = defs.map(d =>
+    `<div class="chart-card"><div class="chart-title">${d.title}</div><div class="chart-wrap"><canvas id="${d.id}"></canvas></div></div>`
+  ).join('');
+
+  defs.forEach(def => {
+    const ctx = document.getElementById(def.id);
+    if (!ctx) return;
+    if (charts[def.id]) { charts[def.id].destroy(); }
+    const datasets = [{ label: def.title, data: rows.map(r=>r[def.key]!=null?Math.round(r[def.key]*10)/10:null), borderColor: def.color, backgroundColor: def.color.replace('.8',',.15').replace('.7',',.15').replace('.6',',.12'), fill:true, tension:.3, pointRadius:0, spanGaps:true }];
+    if (def.extra) datasets.push({ label: def.extra.key, data: rows.map(r=>r[def.extra.key]!=null?Math.round(r[def.extra.key]*10)/10:null), borderColor: def.extra.color, backgroundColor: 'transparent', tension:.3, pointRadius:0, spanGaps:true });
+    const opts = JSON.parse(JSON.stringify(CHART_OPT));
+    if (def.yMax) { opts.scales.y.min=0; opts.scales.y.max=def.yMax; }
+    charts[def.id] = new Chart(ctx, { type:'line', data:{ labels, datasets }, options:opts });
+  });
+}
+
+// ── Log stats (always available even without SDK metrics) ─────────────────
+async function loadLogStats(name) {
+  const svcData = serviceHealth.find(s=>s.appName===name);
+  if (!svcData) { document.getElementById('log-stats-body').innerHTML = '<span style="color:var(--text3);">No log data found for this service today.</span>'; return; }
+  const er = svcData.errorRate || 0;
+  const status = er > 10 ? 'status-err' : er > 3 ? 'status-warn' : 'status-ok';
+  document.getElementById('log-stats-body').innerHTML = `
+    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;">
+      <div><div style="font-size:10px;color:var(--text3);margin-bottom:3px;">LOGS TODAY</div><div style="font-size:20px;font-weight:500;">${(svcData.today||0).toLocaleString()}</div></div>
+      <div><div style="font-size:10px;color:var(--text3);margin-bottom:3px;">ERRORS</div><div style="font-size:20px;font-weight:500;color:var(--red)">${(svcData.errors||0).toLocaleString()}</div></div>
+      <div><div style="font-size:10px;color:var(--text3);margin-bottom:3px;">ERROR RATE</div><div style="font-size:20px;font-weight:500;"><span class="status-dot ${status}"></span>${er}%</div></div>
+      <div><div style="font-size:10px;color:var(--text3);margin-bottom:3px;">TOTAL LOGS</div><div style="font-size:20px;font-weight:500;">${(svcData.total||0).toLocaleString()}</div></div>
+    </div>
+    <div style="margin-top:10px;"><a href="/logs?service=${encodeURIComponent(name)}" class="btn btn-secondary btn-xs">View logs →</a> <a href="/logs?service=${encodeURIComponent(name)}&level=error" class="btn btn-secondary btn-xs" style="margin-left:6px;">View errors →</a></div>`;
+}
+
+async function loadMetricsFromLogs(name) {
+  try {
+    // Fetch recent logs for this service and extract system_metrics entries
+    const r = await fetch(`/api/logs/search?service=${encodeURIComponent(name)}&limit=200&q=system_metrics`, {credentials:'include'});
+    if (!r.ok) throw new Error('search failed');
+    const d = await r.json();
+    const metricLogs = (d.results||d.lines||[]).filter(l => l.type==='system_metrics' || (l.message&&l.message.includes('System metrics')));
+    
+    if (metricLogs.length > 0) {
+      // Convert log entries to metrics rows
+      const rows = metricLogs.map(l => ({
+        ts:          l.ts,
+        cpuPct:      l.cpu?.usedPct,
+        ramPct:      l.ram?.usedPct,
+        ramUsedMB:   l.ram?.usedMB,
+        ramTotalMB:  l.ram?.totalMB,
+        diskPct:     l.disk?.usedPct,
+        heapUsedMB:  l.process?.heapUsedMB,
+        heapTotalMB: l.process?.heapTotalMB,
+        heapPct:     l.process?.heapUsedMB && l.process?.heapTotalMB ? Math.round(l.process.heapUsedMB/l.process.heapTotalMB*100) : null,
+        rssMB:       l.process?.rssMB,
+        uptimeSec:   l.process?.uptime,
+        nodeVersion: l.process?.version,
+        platform:    l.process?.platform,
+        hostname:    l.hostname,
+        eventLoopMs: null,
+      })).filter(r=>r.cpuPct!=null);
+      
+      if (rows.length > 0) {
+        renderStatCards(rows[rows.length-1]);
+        renderCharts(rows);
+        return;
+      }
+    }
+  } catch(e) {}
+  // No metrics at all - show setup hint
+  document.getElementById('metric-cards').innerHTML = `<div style="grid-column:1/-1;padding:24px;text-align:center;color:var(--text3);font-size:13px;">No metrics yet for <strong>${name}</strong>. Add <code>metrics: true</code> to your Logger config.</div>`;
+  document.getElementById('charts-area').innerHTML = '';
+  renderSdkHint(name);
+}
+
+function renderSdkHint(name) {
+  document.getElementById('charts-area').innerHTML = `
+    <div class="chart-card" style="grid-column:1/-1;">
+      <div style="padding:16px 0;font-size:12px;line-height:1.8;">
+        <div style="font-weight:500;margin-bottom:10px;">Enable system metrics in your service</div>
+        <div style="background:var(--surface2);border-radius:6px;padding:12px 14px;font-family:monospace;font-size:11.5px;color:var(--text2);">
+          <div style="color:var(--text3);">// In your ${name} app:</div>
+          const logger = new Logger({<br>
+          &nbsp;&nbsp;apiKey: 'your-api-key',<br>
+          &nbsp;&nbsp;appName: '${name}',<br>
+          &nbsp;&nbsp;<span style="color:var(--green);">metrics: true,</span><br>
+          &nbsp;&nbsp;<span style="color:var(--green);">metricsInterval: 30000,</span> <span style="color:var(--text3);">// 30s</span><br>
+          });
+        </div>
+        <div style="margin-top:10px;color:var(--text3);font-size:11px;">Collects: CPU %, RAM %, Heap %, RSS, Disk %, Event loop lag — all automatic.</div>
+      </div>
+    </div>`;
+}
+
+// ── Range selector ────────────────────────────────────────────────────────
+document.querySelectorAll('.range-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.range-btn').forEach(b=>b.classList.remove('active'));
+    btn.classList.add('active');
+    curRange = parseInt(btn.dataset.range);
+    if (curService) loadMetrics(curService);
+  });
+});
+
+function refresh() { if (curService) { loadMetrics(curService); loadLogStats(curService); } }
+function fmtUptime(s) { const h=Math.floor(s/3600),m=Math.floor((s%3600)/60); return h>24?Math.floor(h/24)+'d '+h%24+'h':h+'h '+m+'m'; }
+
+init();
+</script>
+</body></html>

package/views/heatmap.ejs

@@ -0,0 +1,126 @@
+<%- include('partials/head', { title: 'Error Heatmap' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Error Heatmap</div>
+      <div class="header-actions">
+        <select class="form-select" id="svc-sel" style="width:200px;" onchange="location='?service='+this.value">
+          <option value="">— Select Service —</option>
+          <% services.forEach(function(s){ %>
+          <option value="<%= s.appName %>" <%= service===s.appName?'selected':'' %>><%= s.appName %></option>
+          <% }) %>
+        </select>
+      </div>
+    </header>
+    <div class="page-content">
+      <% if (!service) { %>
+        <div class="card"><div class="empty-state" style="padding:50px 0;">
+          <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+          <p>Select a service to view its error heatmap</p>
+        </div></div>
+      <% } else if (!heatmapData || !heatmapData.days || !heatmapData.days.length) { %>
+        <div class="card"><div class="empty-state" style="padding:50px 0;">
+          <p>No data available for <strong><%= service %></strong></p>
+        </div></div>
+      <% } else { %>
+
+        <!-- Summary cards -->
+        <div class="stats-grid" style="margin-bottom:14px;">
+          <div class="stat-card">
+            <div class="stat-icon red"><svg width="20" height="20" 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"><%= heatmapData.totalErrors.toLocaleString() %></div><div class="stat-label">Total Errors (90d)</div></div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon yellow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
+            <div><div class="stat-value"><%= heatmapData.daysWithErrors %></div><div class="stat-label">Days with Errors</div></div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon red"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17,8 12,3 7,8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></div>
+            <div><div class="stat-value"><%= heatmapData.worstDay ? heatmapData.worstDay.errors : 0 %></div><div class="stat-label">Worst Day</div><% if(heatmapData.worstDay){%><div class="stat-sub"><%= heatmapData.worstDay.date %></div><%}%></div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon green"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22,7 13.5,15.5 8.5,10.5 2,17"/><polyline points="16,7 22,7 22,13"/></svg></div>
+            <div><div class="stat-value"><%= heatmapData.avgErrorsPerDay.toFixed(1) %></div><div class="stat-label">Avg Errors/Day</div></div>
+          </div>
+        </div>
+
+        <!-- Heatmap -->
+        <div class="card">
+          <div style="font-weight:600;font-size:13px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;">
+            <span>Error Density — Last 90 Days</span>
+            <div style="display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);">
+              Less
+              <% [[0,'var(--surface2)'],[1,'rgba(239,68,68,.2)'],[2,'rgba(239,68,68,.45)'],[3,'rgba(239,68,68,.7)'],[4,'#ef4444']].forEach(function(c){%>
+              <span style="width:13px;height:13px;border-radius:2px;background:<%=c[1]%>;display:inline-block;"></span>
+              <%})%>
+              More
+            </div>
+          </div>
+
+          <!-- Day labels -->
+          <div style="display:flex;gap:2px;margin-bottom:4px;padding-left:30px;">
+            <% const months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+               var prevMonth=-1;
+               heatmapData.days.forEach(function(d,i){
+                 var m=new Date(d.date).getMonth();
+                 if(m!==prevMonth){prevMonth=m; %>
+            <span style="font-size:9px;color:var(--text3);min-width:13px;"><%=months[m]%></span>
+            <% }else{ %><span style="min-width:13px;"></span><% } }) %>
+          </div>
+
+          <div style="display:flex;gap:4px;">
+            <!-- Week day labels -->
+            <div style="display:flex;flex-direction:column;gap:2px;width:26px;flex-shrink:0;">
+              <% ['','Mon','','Wed','','Fri',''].forEach(function(d){%>
+              <span style="font-size:9px;color:var(--text3);height:13px;line-height:13px;"><%=d%></span>
+              <%})%>
+            </div>
+            <!-- Calendar grid — columns=weeks, rows=weekdays -->
+            <div style="display:flex;gap:2px;" id="heatmap-grid">
+              <script>
+                const _days = <%- JSON.stringify(heatmapData.days) %>;
+                const _max  = Math.max(..._days.map(d=>d.errors), 1);
+                // Group by week
+                const weeks = [];
+                let week = [];
+                // Pad start
+                const firstDay = new Date(_days[0].date).getDay(); // 0=Sun
+                const pad = firstDay === 0 ? 6 : firstDay - 1; // Mon-start
+                for (let i=0;i<pad;i++) week.push(null);
+                _days.forEach(function(d){
+                  week.push(d);
+                  if(week.length===7){weeks.push(week);week=[];}
+                });
+                if(week.length) weeks.push(week);
+
+                weeks.forEach(function(w){
+                  const col = document.createElement('div');
+                  col.style.cssText='display:flex;flex-direction:column;gap:2px;';
+                  for(let i=0;i<7;i++){
+                    const cell = document.createElement('div');
+                    cell.style.cssText='width:13px;height:13px;border-radius:2px;';
+                    const d=w[i];
+                    if(!d){cell.style.background='transparent';}
+                    else{
+                      const ratio=d.errors/_max;
+                      const opacity = d.errors===0 ? 0 : ratio<.25?.2:ratio<.5?.45:ratio<.75?.7:1;
+                      cell.style.background = d.errors===0 ? 'var(--surface2)' : `rgba(239,68,68,${opacity})`;
+                      cell.title=d.date+': '+d.errors+' errors'+(d.total?' / '+d.total+' logs':'');
+                      cell.style.cursor='pointer';
+                      cell.onclick=(function(date){return function(){location='/logs?service=<%=service%>&date='+date+'&level=error';};})(d.date);
+                    }
+                    col.appendChild(cell);
+                  }
+                  document.getElementById('heatmap-grid').appendChild(col);
+                });
+              </script>
+            </div>
+          </div>
+        </div>
+
+      <% } %>
+    </div>
+  </div>
+</div>
+</body></html>