@logboard/cli 1.0.0

package/views/bookmarks.ejs

@@ -0,0 +1,54 @@
+<%- include('partials/head', { title: 'Bookmarks' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Bookmarks</div>
+    </header>
+    <div class="page-content">
+      <div class="card">
+        <% if (!bookmarks || !bookmarks.length) { %>
+          <div class="empty-state" style="padding:50px 0;">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+            <p>No bookmarks yet</p>
+            <p style="font-size:11px;margin-top:4px;color:var(--text3)">Click the bookmark icon on any log line to save it here</p>
+          </div>
+        <% } else { %>
+        <% bookmarks.forEach(function(b){ %>
+        <div class="card" style="margin-bottom:10px;border-left:3px solid var(--accent);" id="bm-<%=b.id%>">
+          <div style="display:flex;align-items:flex-start;gap:10px;">
+            <div style="flex:1;min-width:0;">
+              <div style="font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><%=b.line%></div>
+              <div style="font-size:11px;color:var(--text3);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;">
+                <span><strong><%=b.service%></strong></span>
+                <span><%=b.date%></span>
+                <span>Line <%=b.lineIndex%></span>
+                <span><%=new Date(b.createdAt).toLocaleString()%></span>
+              </div>
+              <div style="display:flex;align-items:center;gap:8px;">
+                <input type="text" class="form-input" style="flex:1;padding:5px 10px;font-size:12px;" placeholder="Add investigation note…" value="<%=b.note||''%>" id="note-<%=b.id%>" onblur="saveNote('<%=b.id%>',this.value)"/>
+              </div>
+            </div>
+            <div style="display:flex;gap:6px;flex-shrink:0;">
+              <a href="/logs?service=<%=encodeURIComponent(b.service)%>&date=<%=b.date%>" class="btn btn-secondary btn-xs">View</a>
+              <button class="btn btn-danger btn-xs" onclick="delBm('<%=b.id%>')">Delete</button>
+            </div>
+          </div>
+        </div>
+        <% }) %>
+        <% } %>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+async function saveNote(id, note) {
+  const r=await fetch('/api/bookmarks/'+id+'/note',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({note})});
+  if(r.ok) toast('Note saved','success');
+}
+async function delBm(id) {
+  const r=await fetch('/api/bookmarks/'+id,{method:'DELETE'});
+  if(r.ok){const el=document.getElementById('bm-'+id);if(el){el.style.opacity='0';el.style.transition='opacity .2s';setTimeout(()=>el.remove(),200);}toast('Deleted','success');}
+}
+</script>
+</body></html>

package/views/custom-dashboard.ejs

@@ -0,0 +1,162 @@
+<%- include('partials/head', { title: 'My Dashboard' }) %>
+<style>
+  .dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;min-height:200px;}
+  .dash-widget{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:14px;position:relative;cursor:grab;}
+  .dash-widget:active{cursor:grabbing;}
+  .dash-widget.drag-over{border-color:var(--accent);background:var(--accent-dim);}
+  .w-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
+  .w-remove{opacity:0;background:none;border:none;color:var(--text3);cursor:pointer;padding:2px 4px;border-radius:3px;font-size:13px;transition:opacity .15s;}
+  .dash-widget:hover .w-remove{opacity:1;}
+  .dash-empty{border:1.5px dashed var(--border2);border-radius:var(--radius-lg);padding:30px;text-align:center;color:var(--text3);font-size:12px;cursor:pointer;transition:all .15s;}
+  .dash-empty:hover{border-color:var(--accent);color:var(--accent-l);}
+</style>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">My Dashboard</div>
+      <div class="header-actions">
+        <button class="btn btn-secondary btn-sm" onclick="openAddWidget()">
+          <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>
+          Add Widget
+        </button>
+        <button class="btn btn-primary btn-sm" id="save-btn" onclick="saveLayout()" style="display:none;">Save Layout</button>
+      </div>
+    </header>
+    <div class="page-content">
+      <div class="dash-grid" id="dash-grid">
+        <% if (!layout || !layout.length) { %>
+        <div class="dash-empty" onclick="openAddWidget()">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin:0 auto 8px;display:block;"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
+          <div style="font-weight:600;margin-bottom:4px;">Your dashboard is empty</div>
+          <div>Click to add your first widget</div>
+        </div>
+        <% } %>
+        <% if (layout) { layout.forEach(function(w){ %>
+        <div class="dash-widget" data-id="<%= w.id %>" draggable="true" ondragstart="dragStart(event,this)" ondragover="dragOver(event,this)" ondrop="drop(event,this)">
+          <div class="w-title">
+            <%= w.title %>
+            <button class="w-remove" onclick="removeWidget('<%= w.id %>')">✕</button>
+          </div>
+          <div id="w-content-<%= w.id %>">
+            <div style="text-align:center;color:var(--text3);font-size:11px;padding:16px 0;">Loading…</div>
+          </div>
+        </div>
+        <% }) } %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Add widget modal -->
+<div class="modal-overlay" id="add-modal">
+  <div class="modal-box">
+    <div class="modal-title">Add Widget</div>
+    <div class="modal-sub">Choose a widget to add to your dashboard</div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;">
+      <% [['logs-today','Logs Today','Bar chart of today\'s log volume'],['errors-today','Errors Today','Error count for today'],['error-rate','Error Rate','% of logs that are errors'],['top-services','Top Services','Most active services'],['recent-errors','Recent Errors','Latest error log lines'],['hourly-chart','Hourly Volume','24-hour activity chart']].forEach(function(w){ %>
+      <div onclick="addWidget('<%=w[0]%>','<%=w[1]%>')" style="padding:12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;" onmouseover="this.style.borderColor='var(--accent)'" onmouseout="this.style.borderColor='var(--border)'">
+        <div style="font-size:12px;font-weight:600;margin-bottom:3px;"><%=w[1]%></div>
+        <div style="font-size:11px;color:var(--text3);"><%=w[2]%></div>
+      </div>
+      <% }) %>
+    </div>
+    <button class="btn btn-secondary" onclick="closeModal('add-modal')">Cancel</button>
+  </div>
+</div>
+
+<script>
+let layout = <%- JSON.stringify(layout||[]) %>;
+let dirty   = false;
+
+function openAddWidget() { document.getElementById('add-modal').classList.add('open'); }
+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'); }));
+
+function addWidget(type, title) {
+  const id = type + '_' + Date.now();
+  layout.push({ id, type, title });
+  dirty = true;
+  document.getElementById('save-btn').style.display = '';
+  closeModal('add-modal');
+  renderWidgets();
+}
+
+function removeWidget(id) {
+  layout = layout.filter(w => w.id !== id);
+  dirty = true;
+  document.getElementById('save-btn').style.display = '';
+  renderWidgets();
+}
+
+function renderWidgets() {
+  const grid = document.getElementById('dash-grid');
+  grid.innerHTML = '';
+  if (!layout.length) {
+    grid.innerHTML = '<div class="dash-empty" onclick="openAddWidget()"><div style="font-weight:600;margin-bottom:4px;">Add your first widget</div><div>Click here</div></div>';
+    return;
+  }
+  layout.forEach(function(w) {
+    const el = document.createElement('div');
+    el.className = 'dash-widget';
+    el.dataset.id = w.id;
+    el.draggable = true;
+    el.setAttribute('ondragstart', 'dragStart(event,this)');
+    el.setAttribute('ondragover', 'dragOver(event,this)');
+    el.setAttribute('ondrop', 'drop(event,this)');
+    el.innerHTML = `<div class="w-title">${w.title}<button class="w-remove" onclick="removeWidget('${w.id}')">✕</button></div><div id="w-content-${w.id}"><div style="text-align:center;color:var(--text3);font-size:11px;padding:16px 0;">Loading…</div></div>`;
+    grid.appendChild(el);
+    loadWidgetData(w);
+  });
+}
+
+async function loadWidgetData(w) {
+  const el = document.getElementById('w-content-' + w.id);
+  if (!el) return;
+  try {
+    if (w.type === 'logs-today' || w.type === 'errors-today' || w.type === 'error-rate') {
+      const r = await fetch('/api/analytics/overview'); const d = await r.json();
+      if (w.type === 'logs-today')  el.innerHTML = '<div style="font-size:36px;font-weight:700;text-align:center;padding:12px 0;">' + d.logsToday.toLocaleString() + '</div><div style="text-align:center;font-size:11px;color:var(--text3)">logs today</div>';
+      if (w.type === 'errors-today') el.innerHTML = '<div style="font-size:36px;font-weight:700;text-align:center;padding:12px 0;color:var(--red)">' + d.errorsToday.toLocaleString() + '</div><div style="text-align:center;font-size:11px;color:var(--text3)">errors today</div>';
+      if (w.type === 'error-rate')   el.innerHTML = '<div style="font-size:36px;font-weight:700;text-align:center;padding:12px 0">' + d.errorRate + '%</div><div style="text-align:center;font-size:11px;color:var(--text3)">error rate</div>';
+    }
+    if (w.type === 'top-services') {
+      const r = await fetch('/api/analytics/top-services'); const d = await r.json();
+      el.innerHTML = (d.slice?.(0,5)||[]).map(s=>'<div style="display:flex;justify-content:space-between;padding:4px 0;font-size:12px;border-bottom:1px solid var(--border)"><span>'+s.appName+'</span><span style="color:var(--text3)">'+s.count+'</span></div>').join('') || '<div style="color:var(--text3);font-size:11px;text-align:center">No data</div>';
+    }
+    if (w.type === 'recent-errors') {
+      const r = await fetch('/api/analytics/recent-errors'); const d = await r.json();
+      el.innerHTML = (d.slice?.(0,4)||[]).map(e=>'<div style="padding:5px 0;border-bottom:1px solid var(--border);font-size:11px;font-family:JetBrains Mono,monospace;color:var(--red);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">'+(e.message||'').slice(0,80)+'</div>').join('') || '<div style="color:var(--text3);font-size:11px;text-align:center">No errors today</div>';
+    }
+  } catch { el.innerHTML = '<div style="color:var(--text3);font-size:11px;text-align:center;padding:12px">Failed to load</div>'; }
+}
+
+// Drag and drop
+let draggingId = null;
+function dragStart(e, el) { draggingId = el.dataset.id; e.dataTransfer.effectAllowed='move'; }
+function dragOver(e, el)  { e.preventDefault(); el.classList.add('drag-over'); }
+function drop(e, el)      {
+  e.preventDefault(); el.classList.remove('drag-over');
+  if (!draggingId || draggingId === el.dataset.id) return;
+  const fromIdx = layout.findIndex(w=>w.id===draggingId);
+  const toIdx   = layout.findIndex(w=>w.id===el.dataset.id);
+  if (fromIdx < 0 || toIdx < 0) return;
+  const [item] = layout.splice(fromIdx, 1);
+  layout.splice(toIdx, 0, item);
+  dirty = true;
+  document.getElementById('save-btn').style.display = '';
+  renderWidgets();
+}
+document.querySelectorAll('.dash-widget').forEach(el => el.addEventListener('dragleave', ()=>el.classList.remove('drag-over')));
+
+async function saveLayout() {
+  try {
+    const r = await fetch('/api/dashboard/layout', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({layout}) });
+    if (r.ok) { toast('Layout saved','success'); dirty=false; document.getElementById('save-btn').style.display='none'; }
+  } catch { toast('Save failed','error'); }
+}
+
+// Initial load
+layout.forEach(loadWidgetData);
+</script>
+</body></html>

package/views/dashboard.ejs

@@ -0,0 +1,186 @@
+<%- include('partials/head', { title: 'Dashboard' }) %>
+<meta id="dash-order-meta" content="<%= (typeof dashOrder !== 'undefined' && dashOrder) ? JSON.stringify(dashOrder) : 'null' %>"/>
+<style>
+  .drag-section{position:relative;margin-bottom:12px;}
+  .drag-section.dragging{opacity:.45;}
+  .drag-section.drag-over::before{content:'';display:block;height:3px;background:var(--accent);border-radius:2px;margin-bottom:10px;}
+  .drag-handle{position:absolute;top:14px;right:14px;z-index:2;cursor:grab;color:var(--text3);padding:3px 4px;border-radius:4px;transition:color .15s,background .15s;line-height:0;}
+  .drag-handle:hover{color:var(--text2);background:var(--surface2);}
+  .drag-handle:active{cursor:grabbing;}
+  .drag-tip{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:5px;margin-bottom:10px;}
+</style>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Dashboard</div>
+      <div class="header-actions">
+        <span style="font-size:12px;color:var(--text3);">Today: <strong style="color:var(--text)"><%= today %></strong></span>
+        <button class="btn btn-secondary btn-sm" id="reset-btn" onclick="resetOrder()" style="display:none;" title="Reset layout">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1,4 1,10 7,10"/><path d="M3.51 15a9 9 0 1 0 .49-3.5"/></svg>
+        </button>
+        <button class="btn btn-secondary btn-sm" onclick="location.reload()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23,4 23,10 17,10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+          Refresh
+        </button>
+      </div>
+    </header>
+    <div class="page-content">
+      <% if(typeof renderError!=='undefined'&&renderError){%><div style="background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:12px 16px;color:#ff6b6b;margin-bottom:16px;">⚠ <%=renderError%></div><%}%>
+      <% if(new URLSearchParams(''+((typeof location!=='undefined'?location.search:''))).get&&false){} %>
+      <div id="denied-banner" style="display:none;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);border-radius:8px;padding:10px 14px;color:var(--yellow);font-size:12px;margin-bottom:14px;">You don't have access to that page.</div>
+      <% if(overview){ %>
+      <div class="drag-tip" id="drag-tip"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/></svg>Drag sections to rearrange</div>
+      <div id="drag-board">
+        <!-- STATS -->
+        <div class="drag-section" data-section="stats">
+          <div class="drag-handle" title="Drag"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="5" r="1.3" fill="currentColor"/><circle cx="9" cy="12" r="1.3" fill="currentColor"/><circle cx="9" cy="19" r="1.3" fill="currentColor"/><circle cx="15" cy="5" r="1.3" fill="currentColor"/><circle cx="15" cy="12" r="1.3" fill="currentColor"/><circle cx="15" cy="19" r="1.3" fill="currentColor"/></svg></div>
+          <div class="stats-grid">
+            <% if(hasCard('stat-logs')){ %>
+            <div class="stat-card"><div class="stat-icon blue"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div><div><div class="stat-value"><%=overview.logsToday.toLocaleString()%></div><div class="stat-label">Logs Today</div><canvas id="spark-logs" height="28" style="width:100%;margin-top:4px;opacity:.8;"></canvas></div></div>
+            <% } %>
+            <% if(hasCard('stat-errors')){ %>
+            <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" stroke-linecap="round" stroke-linejoin="round"><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"><%=overview.errorsToday.toLocaleString()%></div><div class="stat-label">Errors Today</div><canvas id="spark-errors" height="28" style="width:100%;margin-top:4px;opacity:.8;"></canvas></div></div>
+            <% } %>
+            <% if(hasCard('stat-services')){ %>
+            <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" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div><div><div class="stat-value"><%=overview.services%></div><div class="stat-label">Services</div><div class="stat-sub"><%=overview.totalStorage%></div></div></div>
+            <% } %>
+            <% if(hasCard('stat-errorrate')){ %>
+            <div class="stat-card"><div class="stat-icon purple"><svg width="20" height="20" 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></div><div><div class="stat-value"><%=overview.errorRate%>%</div><div class="stat-label">Error Rate</div><div class="stat-sub">Last 24h</div></div></div>
+            <% } %>
+          </div>
+        </div>
+        <!-- CHARTS -->
+        <% if(hasCard('chart-hourly')||hasCard('chart-services')){ %>
+        <div class="drag-section" data-section="charts">
+          <div class="drag-handle" title="Drag"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="5" r="1.3" fill="currentColor"/><circle cx="9" cy="12" r="1.3" fill="currentColor"/><circle cx="9" cy="19" r="1.3" fill="currentColor"/><circle cx="15" cy="5" r="1.3" fill="currentColor"/><circle cx="15" cy="12" r="1.3" fill="currentColor"/><circle cx="15" cy="19" r="1.3" fill="currentColor"/></svg></div>
+          <div class="grid-2">
+            <% if(hasCard('chart-hourly')){ %>
+            <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"><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>Hourly Volume</div><div class="chart-wrap"><canvas id="hourlyChart"></canvas></div></div>
+            <% } %>
+            <% if(hasCard('chart-services')){ %>
+            <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</div>
+              <% if(overview.serviceList&&overview.serviceList.length){ %>
+              <div style="display:flex;flex-direction:column;gap:8px;">
+                <% overview.serviceList.slice(0,6).forEach(function(svc){ %>
+                <div><div style="display:flex;justify-content:space-between;margin-bottom:3px;"><span style="font-size:12px;font-weight:500;color:var(--text);font-family:'JetBrains Mono',monospace"><%=svc.appName%></span><span style="font-size:12px;color:var(--text2)"><%=svc.today%></span></div><div class="progress-bar"><div class="progress-fill <%=svc.error>svc.today*.1?'red':''%>" style="width:<%=overview.logsToday?Math.round(svc.today/overview.logsToday*100):0%>%"></div></div></div>
+                <% }) %>
+              </div>
+              <% }else{ %><div class="empty-state" style="padding:24px 0;"><p>No logs today</p></div><% } %>
+            </div>
+            <% } %>
+          </div>
+        </div>
+        <% } %>
+        <!-- ERRORS -->
+        <% if(hasCard('recent-errors')){ %>
+        <div class="drag-section" data-section="errors">
+          <div class="drag-handle" title="Drag"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="5" r="1.3" fill="currentColor"/><circle cx="9" cy="12" r="1.3" fill="currentColor"/><circle cx="9" cy="19" r="1.3" fill="currentColor"/><circle cx="15" cy="5" r="1.3" fill="currentColor"/><circle cx="15" cy="12" r="1.3" fill="currentColor"/><circle cx="15" cy="19" r="1.3" fill="currentColor"/></svg></div>
+          <div class="card">
+            <div class="card-title" style="justify-content:space-between;"><span style="display:flex;align-items:center;gap:8px;"><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"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>Recent Errors</span><a href="/logs?level=error&date=<%=today%>" class="btn btn-secondary btn-xs">View All</a></div>
+            <% if(errors&&errors.length){ %>
+            <div class="log-list">
+              <% errors.forEach(function(e){ %>
+              <div class="log-line level-error" onclick="this.classList.toggle('expanded');this.nextElementSibling.style.display=this.classList.contains('expanded')?'':'none'">
+                <span class="log-ts"><%=e.ts?e.ts.replace('T',' ').slice(0,19):''%></span>
+                <span class="badge badge-error" style="margin-top:1px;">error</span>
+                <span class="log-body truncate" style="color:var(--text)"><%=e.message||e._raw||JSON.stringify(e)%></span>
+                <span style="font-size:11px;color:var(--text3);white-space:nowrap"><%=e._appName||e.appName||''%></span>
+              </div>
+              <div class="log-expanded" style="display:none"><pre class="log-json"><%=JSON.stringify(e,null,2)%></pre></div>
+              <% }) %>
+            </div>
+            <% }else{ %><div class="empty-state" style="padding:24px 0;"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></svg><p>No errors today 🎉</p></div><% } %>
+          </div>
+        </div>
+        <% } %>
+      </div>
+      <% }else{ %>
+      <div class="card"><div class="empty-state"><svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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><p style="margin-top:12px;">No logs yet. Start ingesting via the API.</p><div style="margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--surface2);padding:10px 14px;border-radius:6px;text-align:left;display:inline-block;color:var(--text2)">curl -X POST http://localhost:9900/api/logs \<br>&nbsp;&nbsp;-H "X-Api-Key: blq_your_key" \<br>&nbsp;&nbsp;-H "Content-Type: application/json" \<br>&nbsp;&nbsp;-d '{"logs":["..."]}'</div></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 hourlyData=<%- JSON.stringify(hourly?hourly.hours:[]) %>;
+if(hourlyData.length&&document.getElementById('hourlyChart')){
+  const isDark=document.documentElement.dataset.theme!=='light';
+  const gc=isDark?'rgba(255,255,255,.05)':'rgba(0,0,0,.06)';
+  const tc=isDark?'#5a5a78':'#9494b8';
+  new Chart(document.getElementById('hourlyChart'),{type:'bar',data:{labels:hourlyData.map(h=>h.hour+':00'),datasets:[{label:'info',data:hourlyData.map(h=>h.info),backgroundColor:'rgba(59,130,246,.5)',stack:'s'},{label:'warn',data:hourlyData.map(h=>h.warn),backgroundColor:'rgba(245,158,11,.5)',stack:'s'},{label:'error',data:hourlyData.map(h=>h.error),backgroundColor:'rgba(239,68,68,.7)',stack:'s'},{label:'debug',data:hourlyData.map(h=>h.debug),backgroundColor:'rgba(107,114,128,.4)',stack:'s'}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{x:{stacked:true,ticks:{color:tc,font:{size:10},maxTicksLimit:12},grid:{color:gc}},y:{stacked:true,ticks:{color:tc,font:{size:10}},grid:{color:gc}}}}});
+}
+if(new URLSearchParams(location.search).get('denied')){document.getElementById('denied-banner').style.display='block';history.replaceState(null,'','/dashboard');}
+const board=document.getElementById('drag-board');
+function getSecs(){return board?[...board.querySelectorAll('.drag-section')]:[]; }
+
+// Server-side order persistence (works across browsers/devices)
+async function saveOrder(){
+  const order = getSecs().map(s=>s.dataset.section);
+  try {
+    await fetch('/api/settings/dashboard/layout',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({order})});
+    document.getElementById('reset-btn').style.display='';
+  } catch {}
+}
+async function resetOrder(){
+  try {
+    await fetch('/api/settings/dashboard/layout',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({order:[]})});
+    location.reload();
+  } catch { location.reload(); }
+}
+
+// Load saved order from server on page load
+const saved = (function(){
+  try {
+    const meta = document.getElementById('dash-order-meta');
+    if (meta && meta.content) return JSON.parse(meta.content);
+  } catch {}
+  return null;
+})();
+if(saved&&board){saved.forEach(id=>{const el=board.querySelector('[data-section="'+id+'"]');if(el)board.appendChild(el);});document.getElementById('reset-btn').style.display='';}
+if(localStorage.getItem('logboard_dragged')){const t=document.getElementById('drag-tip');if(t)t.style.display='none';}
+let dragEl=null;
+getSecs().forEach(sec=>{
+  const h=sec.querySelector('.drag-handle');
+  if(h){h.addEventListener('mousedown',()=>sec.draggable=true);h.addEventListener('mouseup',()=>sec.draggable=false);}
+  sec.addEventListener('dragstart',e=>{dragEl=sec;sec.classList.add('dragging');e.dataTransfer.effectAllowed='move';localStorage.setItem('logboard_dragged','1');const t=document.getElementById('drag-tip');if(t)t.style.display='none';});
+  sec.addEventListener('dragend',()=>{sec.classList.remove('dragging');getSecs().forEach(s=>s.classList.remove('drag-over'));sec.draggable=false;saveOrder();dragEl=null;});
+  sec.addEventListener('dragover',e=>{e.preventDefault();if(!dragEl||dragEl===sec)return;getSecs().forEach(s=>s.classList.remove('drag-over'));sec.classList.add('drag-over');const rect=sec.getBoundingClientRect();if(e.clientY<rect.top+rect.height/2)board.insertBefore(dragEl,sec);else board.insertBefore(dragEl,sec.nextSibling);});
+  sec.addEventListener('dragleave',()=>sec.classList.remove('drag-over'));
+  sec.addEventListener('drop',e=>{e.preventDefault();sec.classList.remove('drag-over');});
+});
+
+// ── Sparklines ────────────────────────────────────────────────────────────
+const sparkTrend = <%- JSON.stringify(trend||[]) %>;
+function drawSparkline(canvasId, data, color) {
+  const canvas = document.getElementById(canvasId);
+  if (!canvas || !data.length) return;
+  const ctx = canvas.getContext('2d');
+  canvas.width = canvas.offsetWidth || 200;
+  canvas.height = 28;
+  const w = canvas.width, h = canvas.height;
+  const max = Math.max(...data, 1);
+  const min = Math.min(...data);
+  ctx.clearRect(0, 0, w, h);
+  const pts = data.map((v, i) => ({ x: (i / (data.length - 1)) * w, y: h - ((v - min) / (max - min + 0.01)) * (h - 4) - 2 }));
+  // Fill
+  ctx.beginPath();
+  ctx.moveTo(pts[0].x, h);
+  pts.forEach(p => ctx.lineTo(p.x, p.y));
+  ctx.lineTo(pts[pts.length-1].x, h);
+  ctx.closePath();
+  ctx.fillStyle = color.replace('1)', '.15)');
+  ctx.fill();
+  // Line
+  ctx.beginPath();
+  pts.forEach((p, i) => i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y));
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.stroke();
+}
+if (sparkTrend.length) {
+  drawSparkline('spark-logs',   sparkTrend.map(d=>d.total||0), 'rgba(59,130,246,1)');
+  drawSparkline('spark-errors', sparkTrend.map(d=>d.error||0), 'rgba(239,68,68,1)');
+}
+</script>
+</body></html>

package/views/diff.ejs

@@ -0,0 +1,98 @@
+<%- include('partials/head', { title: 'Log Diff' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Log Diff</div>
+    </header>
+    <div class="page-content">
+      <div class="card" style="margin-bottom:12px;">
+        <form method="GET" action="/diff" style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;">
+          <div class="form-group" style="margin:0;min-width:160px;flex:1.2">
+            <label class="form-label">Service</label>
+            <select name="service" class="form-select">
+              <option value="">Select service…</option>
+              <% services.forEach(function(s){ %><option value="<%= s.appName %>" <%= service===s.appName?'selected':'' %>><%= s.appName %></option><% }) %>
+            </select>
+          </div>
+          <div class="form-group" style="margin:0">
+            <label class="form-label">Date A (Before)</label>
+            <input type="date" name="dateA" class="form-input" value="<%= dateA %>" max="<%= today %>"/>
+          </div>
+          <div class="form-group" style="margin:0">
+            <label class="form-label">Date B (After)</label>
+            <input type="date" name="dateB" class="form-input" value="<%= dateB %>" max="<%= today %>"/>
+          </div>
+          <button type="submit" class="btn btn-primary">Compare</button>
+        </form>
+      </div>
+
+      <% if (!diffData) { %>
+        <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"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          <p>Select a service and two dates to compare error patterns</p>
+        </div></div>
+      <% } else { %>
+        <!-- Summary -->
+        <div class="stats-grid" style="margin-bottom:14px;">
+          <div class="stat-card">
+            <div><div style="font-size:11px;color:var(--text3);margin-bottom:4px;">Date A — <%= diffData.dateA %></div>
+              <div class="stat-value"><%= diffData.totalA.toLocaleString() %></div><div class="stat-label">Total Logs</div>
+              <div class="stat-sub" style="color:var(--red)"><%= diffData.errorsA %> errors</div>
+            </div>
+          </div>
+          <div class="stat-card">
+            <div><div style="font-size:11px;color:var(--text3);margin-bottom:4px;">Date B — <%= diffData.dateB %></div>
+              <div class="stat-value"><%= diffData.totalB.toLocaleString() %></div><div class="stat-label">Total Logs</div>
+              <div class="stat-sub" style="color:var(--red)"><%= diffData.errorsB %> errors</div>
+            </div>
+          </div>
+          <div class="stat-card">
+            <% var delta = diffData.errorsB - diffData.errorsA; %>
+            <div class="stat-icon <%=delta>0?'red':delta<0?'green':'blue'%>">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="<%=delta>0?'23,18 13.5,8.5 8.5,13.5 1,6':'23,6 13.5,15.5 8.5,10.5 1,18'%>"/></svg>
+            </div>
+            <div>
+              <div class="stat-value" style="color:<%=delta>0?'var(--red)':delta<0?'var(--green)':'var(--text)'%>">
+                <%=delta>0?'+':'%><%= delta %>
+              </div>
+              <div class="stat-label">Error Delta</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Diff table -->
+        <div class="card">
+          <div style="font-weight:600;font-size:13px;margin-bottom:12px;">Error Pattern Comparison</div>
+          <% if (!diffData.rows || !diffData.rows.length) { %>
+            <div style="text-align:center;padding:30px;color:var(--text3);font-size:12px;">No error patterns found in either date</div>
+          <% } else { %>
+          <div class="table-wrap">
+            <table>
+              <thead><tr><th style="width:40%">Error Pattern</th><th>A (<%= diffData.dateA %>)</th><th>B (<%= diffData.dateB %>)</th><th>Δ Change</th><th>%</th></tr></thead>
+              <tbody>
+                <% diffData.rows.forEach(function(row){ %>
+                <tr>
+                  <td style="font-family:'JetBrains Mono',monospace;font-size:11px;max-width:300px;"><%= row.msg.slice(0,120) %></td>
+                  <td style="text-align:center;font-size:12px;"><%= row.countA %></td>
+                  <td style="text-align:center;font-size:12px;"><%= row.countB %></td>
+                  <td style="text-align:center;">
+                    <span style="font-weight:600;font-size:12px;color:<%=row.delta>0?'var(--red)':row.delta<0?'var(--green)':'var(--text3)'%>">
+                      <%=row.delta>0?'+':'%><%= row.delta %>
+                    </span>
+                  </td>
+                  <td style="text-align:center;font-size:11px;color:var(--text3);">
+                    <%=row.pct===null?'new':row.pct>0?'+'+row.pct+'%':row.pct+'%'%>
+                  </td>
+                </tr>
+                <% }) %>
+              </tbody>
+            </table>
+          </div>
+          <% } %>
+        </div>
+      <% } %>
+    </div>
+  </div>
+</div>
+</body></html>