@logboard/cli 1.0.0

package/views/api-keys.ejs

@@ -0,0 +1,150 @@
+<%- include('partials/head', { title: 'API Keys' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">API Keys</div>
+      <div class="header-actions">
+        <button class="btn btn-primary btn-sm" onclick="openCreateModal()">
+          <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 Key
+        </button>
+      </div>
+    </header>
+    <div class="page-content">
+      <div class="card" style="margin-bottom:12px;padding:12px 16px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);">
+        <div style="display:flex;gap:10px;align-items:flex-start;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--yellow)" stroke-width="2" style="flex-shrink:0;margin-top:1px;"><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 style="font-size:12px;color:var(--text2);line-height:1.7;">API keys use a <code style="font-family:'JetBrains Mono',monospace;background:var(--surface3);padding:1px 5px;border-radius:3px;">blq_</code> prefix and are stored as SHA-256 hashes. The raw key is shown <strong>once</strong> on creation — copy it immediately. Use via <code style="font-family:'JetBrains Mono',monospace;background:var(--surface3);padding:1px 5px;border-radius:3px;">X-Api-Key: blq_...</code> header.</div>
+        </div>
+      </div>
+      <div class="card">
+        <% if(!keys||!keys.length){ %>
+        <div class="empty-state" style="padding:40px 0;">
+          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
+          <p style="margin-top:12px;">No API keys yet. Create one to start ingesting logs.</p>
+        </div>
+        <% }else{ %>
+        <div class="table-wrap">
+          <table>
+            <thead><tr><th>Name</th><th>Key Prefix</th><th>Scopes</th><th>Expires</th><th>Last Used</th><th>Status</th><th>Actions</th></tr></thead>
+            <tbody id="keys-tbody">
+              <% keys.forEach(function(k){ %>
+              <tr id="key-row-<%=k.id%>" style="<%=!k.active?'opacity:.5;':''%>">
+                <td style="font-weight:600;color:var(--text);"><%=k.name%></td>
+                <td><code style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent-l);"><%=k.keyPrefix%></code></td>
+                <td><div style="display:flex;gap:4px;flex-wrap:wrap;"><%-  (k.scopes||[]).map(s=>'<span class="badge badge-info" style="font-size:9px;">'+s+'</span>').join('')  %></div></td>
+                <td style="font-size:12px;color:var(--text3);"><%=k.expiresAt?new Date(k.expiresAt).toLocaleDateString():'Never'%></td>
+                <td style="font-size:11px;color:var(--text3);"><%=k.lastUsedAt?new Date(k.lastUsedAt).toLocaleString():'Never'%></td>
+                <td><span class="badge <%=k.active?'badge-green':'badge-debug'%>"><%=k.active?'active':'revoked'%></span></td>
+                <td>
+                  <div style="display:flex;gap:6px;">
+                    <% if(k.active){ %><button class="btn btn-danger btn-xs" onclick="revokeKey('<%=k.id%>')">Revoke</button><% } %>
+                    <button class="btn btn-secondary btn-xs" onclick="deleteKey('<%=k.id%>')">Delete</button>
+                  </div>
+                </td>
+              </tr>
+              <% }) %>
+            </tbody>
+          </table>
+        </div>
+        <% } %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Create Key Modal -->
+<div class="modal-overlay" id="create-modal">
+  <div class="modal-box">
+    <div class="modal-title">Create API Key</div>
+    <div class="modal-sub">Keys are shown only once. Store the raw key securely.</div>
+    <div class="form-group"><label class="form-label">Key Name</label><input type="text" id="key-name" class="form-input" placeholder="e.g. production-server"/></div>
+    <div class="form-group">
+      <label class="form-label">Scopes <span style="font-weight:400;color:var(--text3);">— select all that apply</span></label>
+      <div class="scope-grid" id="scope-grid">
+        <% SCOPES.forEach(function(s){ %>
+        <div class="scope-pill <%=s==='logs:write'?'checked':''%>" onclick="toggleScope(this)" data-scope="<%=s%>" style="cursor:pointer;user-select:none;">
+          <input type="checkbox" value="<%=s%>" <%=s==='logs:write'?'checked':''%> style="display:none;"/><%=s%>
+        </div>
+        <% }) %>
+      </div>
+    </div>
+    <div style="font-size:11px;color:var(--text3);margin-top:6px;margin-bottom:2px;line-height:1.7;">
+      <span style="color:var(--text2);font-weight:500;">logs:write</span> — send logs in (SDK / your app)&nbsp;&nbsp;
+      <span style="color:var(--text2);font-weight:500;">logs:read</span> — search &amp; read logs via API&nbsp;&nbsp;
+      <span style="color:var(--text2);font-weight:500;">analytics:read</span> — charts &amp; stats&nbsp;&nbsp;
+      <span style="color:var(--text2);font-weight:500;">health:read</span> — server health status&nbsp;&nbsp;
+      <span style="color:var(--text2);font-weight:500;">stream:read</span> — live SSE stream
+    </div>
+    <div class="form-group"><label class="form-label">Expires At <span style="color:var(--text3);font-weight:400">(optional)</span></label><input type="date" id="key-expires" class="form-input"/></div>
+    <div id="create-err" style="display:none;color:var(--red);font-size:12px;margin-bottom:12px;"></div>
+    <div style="display:flex;gap:8px;">
+      <button class="btn btn-primary" style="flex:1;" onclick="createKey()">Create Key</button>
+      <button class="btn btn-secondary" onclick="closeModal('create-modal')">Cancel</button>
+    </div>
+  </div>
+</div>
+
+<!-- Key reveal Modal -->
+<div class="modal-overlay" id="reveal-modal">
+  <div class="modal-box">
+    <div class="modal-title">✅ Key Created — Copy Now</div>
+    <div class="modal-sub" style="color:var(--red);font-weight:500;">This key will NOT be shown again.</div>
+    <div style="margin:16px 0;background:var(--surface3);border-radius:8px;padding:14px;border:1px solid var(--border);">
+      <div style="font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent-l);word-break:break-all;margin-bottom:10px;" id="raw-key-display"></div>
+      <button class="btn btn-secondary btn-sm" onclick="copyRawKey()">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+        Copy Key
+      </button>
+    </div>
+    <button class="btn btn-primary w-full" style="width:100%;justify-content:center;" onclick="closeModal('reveal-modal');location.reload()">Done — I've copied it</button>
+  </div>
+</div>
+
+<script>
+let _rawKey='';
+function toggleScope(label){label.classList.toggle('checked');label.querySelector('input').checked=label.classList.contains('checked');}
+function openCreateModal(){document.getElementById('key-name').value='';document.getElementById('key-expires').value='';document.getElementById('create-err').style.display='none';document.getElementById('create-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');}));
+document.addEventListener('keydown',e=>{if(e.key==='Escape')document.querySelectorAll('.modal-overlay.open').forEach(m=>m.classList.remove('open'));});
+
+async function createKey(){
+  const name=document.getElementById('key-name').value.trim();
+  const scopes=[...document.querySelectorAll('#scope-grid input:checked')].map(i=>i.value);
+  const exp=document.getElementById('key-expires').value||null;
+  const errEl=document.getElementById('create-err');errEl.style.display='none';
+  if(!name){errEl.textContent='Key name required';errEl.style.display='';return;}
+  if(!scopes.length){errEl.textContent='Select at least one scope';errEl.style.display='';return;}
+  try{
+    const r=await fetch('/api/api-keys',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name,scopes,expiresAt:exp})});
+    const d=await r.json();
+    if(!r.ok){errEl.textContent=d.error;errEl.style.display='';return;}
+    _rawKey=d.key;
+    document.getElementById('raw-key-display').textContent=d.key;
+    closeModal('create-modal');
+    document.getElementById('reveal-modal').classList.add('open');
+  }catch(e){errEl.textContent='Network error';errEl.style.display='';}
+}
+
+function copyRawKey(){navigator.clipboard.writeText(_rawKey).then(()=>toast('Key copied!','success'));}
+
+async function revokeKey(id){
+  if(!confirm('Revoke this key? It will stop working immediately.'))return;
+  const r=await fetch('/api/api-keys/'+id+'/revoke',{method:'POST'});
+  const d=await r.json();
+  if(!r.ok){toast(d.error,'error');return;}
+  toast('Key revoked','success');location.reload();
+}
+
+async function deleteKey(id){
+  if(!confirm('Permanently delete this key?'))return;
+  const r=await fetch('/api/api-keys/'+id,{method:'DELETE'});
+  const d=await r.json();
+  if(!r.ok){toast(d.error,'error');return;}
+  toast('Key deleted','success');
+  const row=document.getElementById('key-row-'+id);if(row)row.remove();
+}
+</script>
+</body></html>

package/views/archive.ejs

@@ -0,0 +1,123 @@
+<%- include('partials/head', { title: 'Log Archive' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Log Archive</div>
+      <div class="header-actions">
+        <button class="btn btn-primary btn-sm" onclick="openCreateModal()">
+          <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="21,8 21,21 3,21 3,8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
+          Create Archive
+        </button>
+      </div>
+    </header>
+    <div class="page-content">
+      <div class="card" style="margin-bottom:12px;padding:12px 16px;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.2);">
+        <div style="font-size:12px;color:var(--text2);line-height:1.7;">
+          Archives are stored in <code style="font-family:'JetBrains Mono',monospace;background:var(--surface3);padding:1px 5px;border-radius:3px;">logs/_archive/</code>.
+          Creating an archive compresses selected logs into a <code style="font-family:'JetBrains Mono',monospace;background:var(--surface3);padding:1px 5px;border-radius:3px;">.tar.gz</code> file for download or long-term storage.
+          Archiving does <strong>not</strong> delete the originals — use Settings retention to control deletion.
+        </div>
+      </div>
+
+      <div class="card">
+        <% if(!archives||!archives.length){ %>
+        <div class="empty-state" style="padding:40px 0;">
+          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="21,8 21,21 3,21 3,8"/><rect x="1" y="3" width="22" height="5"/></svg>
+          <p>No archives yet. Create one to compress and store old logs.</p>
+        </div>
+        <% } else { %>
+        <div class="table-wrap">
+          <table>
+            <thead><tr><th>Filename</th><th>Size</th><th>Created</th><th>Actions</th></tr></thead>
+            <tbody>
+              <% archives.forEach(function(a){ %>
+              <tr>
+                <td><code style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent-l);"><%=a.name%></code></td>
+                <td style="font-size:12px;color:var(--text2);"><%=(a.size/1024/1024).toFixed(2)%> MB</td>
+                <td style="font-size:11px;color:var(--text3);"><%=new Date(a.created).toLocaleString()%></td>
+                <td>
+                  <div style="display:flex;gap:6px;">
+                    <a href="/api/archive/download/<%=encodeURIComponent(a.name)%>" class="btn btn-secondary btn-xs">
+                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                      Download
+                    </a>
+                    <button class="btn btn-danger btn-xs" onclick="deleteArchive('<%=a.name%>')">Delete</button>
+                  </div>
+                </td>
+              </tr>
+              <% }) %>
+            </tbody>
+          </table>
+        </div>
+        <% } %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Create archive modal -->
+<div class="modal-overlay" id="create-modal">
+  <div class="modal-box">
+    <div class="modal-title">Create Archive</div>
+    <div class="modal-sub">Compress log files in a date range into a .tar.gz file.</div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
+      <div class="form-group"><label class="form-label">Start Date</label><input type="date" id="arc-start" class="form-input"/></div>
+      <div class="form-group"><label class="form-label">End Date</label><input type="date" id="arc-end" class="form-input" value="<%= new Date().toISOString().slice(0,10) %>"/></div>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Services <span style="color:var(--text3);font-weight:400">(leave blank for all)</span></label>
+      <select id="arc-services" class="form-select" multiple style="height:120px;">
+        <% logServices.forEach(function(s){ %><option value="<%=s.appName%>"><%=s.appName%></option><% }) %>
+      </select>
+    </div>
+    <div id="arc-status" style="display:none;font-size:12px;color:var(--accent-l);margin-bottom:8px;">Creating archive…</div>
+    <div id="arc-err" style="display:none;color:var(--red);font-size:12px;margin-bottom:8px;"></div>
+    <div style="display:flex;gap:8px;">
+      <button class="btn btn-primary" style="flex:1;" id="arc-btn" onclick="createArchive()">Create Archive</button>
+      <button class="btn btn-secondary" onclick="closeModal('create-modal')">Cancel</button>
+    </div>
+  </div>
+</div>
+
+<script>
+function openCreateModal() {
+  const s = new Date(); s.setDate(s.getDate() - 7);
+  document.getElementById('arc-start').value = s.toISOString().slice(0,10);
+  document.getElementById('arc-err').style.display = 'none';
+  document.getElementById('arc-status').style.display = 'none';
+  document.getElementById('create-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'); }));
+
+async function createArchive() {
+  const start    = document.getElementById('arc-start').value;
+  const end      = document.getElementById('arc-end').value;
+  const services = [...document.getElementById('arc-services').selectedOptions].map(o => o.value);
+  const errEl    = document.getElementById('arc-err');
+  const statEl   = document.getElementById('arc-status');
+  const btn      = document.getElementById('arc-btn');
+  errEl.style.display = 'none';
+  if (!start || !end) { errEl.textContent = 'Start and end date required'; errEl.style.display = ''; return; }
+  btn.disabled = true; statEl.style.display = '';
+  try {
+    const r = await fetch('/api/archive/create', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ startDate: start, endDate: end, services }) });
+    const d = await r.json();
+    if (!r.ok) { errEl.textContent = d.error; errEl.style.display = ''; statEl.style.display = 'none'; btn.disabled = false; return; }
+    toast('Archive created: ' + d.filename + ' (' + (d.size/1024/1024).toFixed(2) + ' MB)', 'success');
+    closeModal('create-modal');
+    location.reload();
+  } catch(e) { errEl.textContent = 'Network error'; errEl.style.display = ''; statEl.style.display = 'none'; btn.disabled = false; }
+}
+
+async function deleteArchive(name) {
+  if (!confirm('Delete archive "' + name + '"?')) return;
+  const r = await fetch('/api/archive/' + encodeURIComponent(name), { method: 'DELETE' });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error, 'error'); return; }
+  toast('Archive deleted', 'success');
+  location.reload();
+}
+</script>
+</body></html>

package/views/audit.ejs

@@ -0,0 +1,314 @@
+<%- include('partials/head', { title: 'Audit Log' }) %>
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+    <header class="top-header">
+      <div class="page-title">Audit Log</div>
+      <div class="header-actions">
+        <div class="mode-tabs">
+          <button class="mode-tab active" id="tab-log"      onclick="switchTab('log')">Log</button>
+          <button class="mode-tab"        id="tab-analytics" onclick="switchTab('analytics')">Analytics</button>
+        </div>
+        <button class="btn btn-danger btn-sm" onclick="clearAudit()">Clear All</button>
+      </div>
+    </header>
+    <div class="page-content">
+
+      <!-- ── LOG TAB ─────────────────────────────────────────────────────── -->
+      <div id="pane-log">
+        <div class="card" style="margin-bottom:12px;">
+          <form method="GET" action="/audit" style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;">
+            <div class="form-group" style="flex:1;min-width:200px;margin:0">
+              <label class="form-label">Search</label>
+              <div class="search-wrap">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                <input type="text" name="q" class="form-input search-input" placeholder="Filter by actor, action, target…" value="<%= q||'' %>"/>
+              </div>
+            </div>
+            <div class="form-group" style="margin:0">
+              <label class="form-label">Action</label>
+              <select name="action" class="form-select" style="width:160px;">
+                <option value="">All Actions</option>
+                <% ['login','logout','page_view','log_view','settings_update','role_change',
+                    'api_key_create','api_key_delete','user_create','user_delete',
+                    'alert_rule_create','alert_rule_delete','role_apps_update'].forEach(function(a){ %>
+                <option value="<%= a %>" <%=action===a?'selected':'' %>><%= a.replace(/_/g,' ') %></option>
+                <% }) %>
+              </select>
+            </div>
+            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
+            <a href="/audit" class="btn btn-secondary btn-sm">Reset</a>
+          </form>
+        </div>
+
+        <div class="card">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
+            <div style="font-size:12px;color:var(--text2);">
+              Showing <strong style="color:var(--text)"><%= entries.length %></strong> of <strong style="color:var(--text)"><%= total %></strong> entries
+            </div>
+          </div>
+          <% if(!entries.length){ %>
+          <div class="empty-state" style="padding:40px 0;">
+            <svg width="40" height="40" 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"/></svg>
+            <p>No audit entries yet</p>
+          </div>
+          <% } else { %>
+          <div class="table-wrap">
+            <table>
+              <thead><tr><th>Time</th><th>Actor</th><th>Action</th><th>Target</th><th>IP</th></tr></thead>
+              <tbody>
+                <% entries.forEach(function(e){ %>
+                <tr>
+                  <td style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text3);white-space:nowrap;">
+                    <%= e.ts ? new Date(e.ts).toLocaleString() : '—' %>
+                  </td>
+                  <td><span style="font-weight:600;color:var(--accent-l);font-family:'JetBrains Mono',monospace;font-size:12px;"><%= e.actor||'—' %></span></td>
+                  <td>
+                    <% var ac=e.action||''; %>
+                    <span class="badge <%=
+                      ac.includes('delete')||ac.includes('fail')   ? 'badge-error'  :
+                      ac.includes('create')||ac.includes('enable')  ? 'badge-green'  :
+                      ac==='login'||ac==='logout'                   ? 'badge-info'   :
+                      ac==='page_view'||ac==='log_view'             ? 'badge-debug'  :
+                      'badge-debug'
+                    %>" style="font-size:10px;text-transform:none;"><%= ac.replace(/_/g,' ') %></span>
+                  </td>
+                  <td style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text2);max-width:200px;" class="truncate">
+                    <%= e.target||'—' %>
+                    <% if(e.durationSec&&e.durationSec>0){%><span style="font-size:10px;color:var(--text3);margin-left:6px;"><%=e.durationSec%>s</span><%}%>
+                  </td>
+                  <td style="font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;"><%= e.ip||'—' %></td>
+                </tr>
+                <% }) %>
+              </tbody>
+            </table>
+          </div>
+          <% } %>
+        </div>
+      </div>
+
+      <!-- ── ANALYTICS TAB ────────────────────────────────────────────────── -->
+      <div id="pane-analytics" style="display:none;">
+        <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
+          <span style="font-size:12px;color:var(--text2);">Period:</span>
+          <select id="period-sel" class="form-select" style="width:120px;" onchange="loadAnalytics(this.value)">
+            <option value="7">Last 7 days</option>
+            <option value="14">Last 14 days</option>
+            <option value="30">Last 30 days</option>
+            <option value="90">Last 90 days</option>
+          </select>
+          <span id="analytics-loading" style="font-size:11px;color:var(--text3);display:none;">Loading…</span>
+        </div>
+
+        <!-- Summary cards -->
+        <div class="stats-grid" style="margin-bottom:14px;" id="a-summary">
+          <div class="stat-card"><div><div class="stat-value" id="a-total">—</div><div class="stat-label">Total Events</div></div></div>
+          <div class="stat-card"><div><div class="stat-value" id="a-users">—</div><div class="stat-label">Unique Users</div></div></div>
+          <div class="stat-card"><div><div class="stat-value" id="a-settings">—</div><div class="stat-label">Settings Changes</div></div></div>
+          <div class="stat-card"><div><div class="stat-value" id="a-logins">—</div><div class="stat-label">Logins (period)</div></div></div>
+        </div>
+
+        <div style="display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin-bottom:12px;">
+          <!-- Activity chart -->
+          <div class="card">
+            <div class="card-title" style="margin-bottom:12px;">Daily Activity</div>
+            <canvas id="activity-chart" height="120"></canvas>
+          </div>
+          <!-- Top users -->
+          <div class="card">
+            <div class="card-title" style="margin-bottom:10px;">Most Active Users</div>
+            <div id="top-users-list"></div>
+          </div>
+        </div>
+
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;">
+          <!-- Top pages -->
+          <div class="card">
+            <div class="card-title" style="margin-bottom:10px;">
+              Most Visited Pages
+              <span style="font-size:10px;font-weight:400;color:var(--text3);margin-left:6px;">with avg time on page</span>
+            </div>
+            <div id="top-pages-list"></div>
+          </div>
+          <!-- Top services accessed -->
+          <div class="card">
+            <div class="card-title" style="margin-bottom:10px;">Most Viewed Services</div>
+            <div id="top-services-list"></div>
+          </div>
+        </div>
+
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+          <!-- Action breakdown -->
+          <div class="card">
+            <div class="card-title" style="margin-bottom:10px;">Action Breakdown</div>
+            <div id="top-actions-list"></div>
+          </div>
+          <!-- Security events -->
+          <div class="card">
+            <div class="card-title" style="margin-bottom:10px;">
+              Security Events
+              <span style="font-size:10px;font-weight:400;color:var(--text3);margin-left:6px;">logins, key changes, role changes</span>
+            </div>
+            <div id="security-list" style="max-height:260px;overflow-y:auto;"></div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<style>
+.mode-tabs{display:flex;gap:0;background:var(--surface2);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
+.mode-tab{padding:5px 14px;font-size:11px;font-weight:500;cursor:pointer;border:none;background:none;color:var(--text3);transition:all .15s;}
+.mode-tab.active{background:var(--accent);color:#fff;}
+.bar-wrap{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
+.bar-label{font-size:11px;color:var(--text2);width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;}
+.bar-track{flex:1;height:6px;background:var(--surface3);border-radius:3px;overflow:hidden;}
+.bar-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .4s;}
+.bar-count{font-size:11px;color:var(--text3);min-width:30px;text-align:right;}
+</style>
+
+<script>
+function switchTab(t) {
+  ['log','analytics'].forEach(n => {
+    document.getElementById('pane-'+n).style.display = n===t ? '' : 'none';
+    document.getElementById('tab-'+n).classList.toggle('active', n===t);
+  });
+  if (t==='analytics') loadAnalytics(document.getElementById('period-sel').value);
+}
+
+async function loadAnalytics(days) {
+  const loading = document.getElementById('analytics-loading');
+  loading.style.display = '';
+  try {
+    const r = await fetch('/api/audit/analytics?days='+days);
+    const d = await r.json();
+    loading.style.display = 'none';
+
+    // Summary
+    document.getElementById('a-total').textContent    = d.totalEvents.toLocaleString();
+    document.getElementById('a-users').textContent    = d.uniqueUsers;
+    document.getElementById('a-settings').textContent = d.settingsChanges;
+    document.getElementById('a-logins').textContent   = (d.loginTimeline||[]).reduce((s,l)=>s+l.logins,0);
+
+    // Activity bar chart (canvas)
+    drawBarChart('activity-chart', d.dailyActivity, 'date', 'count');
+
+    // Top users
+    renderBars('top-users-list', d.topUsers, 'actor', 'count');
+    // Top pages
+    renderPagesWithTime('top-pages-list', d.topPages);
+    // Top services
+    renderBars('top-services-list', d.topServices, 'service', 'views');
+    // Action breakdown
+    renderBars('top-actions-list', d.topActions, 'action', 'count', a=>a.replace(/_/g,' '));
+    // Security events
+    renderSecurityEvents('security-list', d.securityEvents||[]);
+  } catch(e) {
+    loading.style.display = 'none';
+    console.error('Analytics error', e);
+  }
+}
+
+function drawBarChart(canvasId, data, labelKey, valueKey) {
+  const canvas = document.getElementById(canvasId);
+  if (!canvas) return;
+  const ctx  = canvas.getContext('2d');
+  const w    = canvas.offsetWidth || 400;
+  const h    = canvas.height;
+  canvas.width = w;
+  ctx.clearRect(0,0,w,h);
+
+  if (!data || !data.length) return;
+  const max   = Math.max(...data.map(d=>d[valueKey]), 1);
+  const bw    = Math.max(4, (w - data.length*2) / data.length);
+  const pad   = 20;
+
+  // X axis line
+  ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--border') || '#2a2a45';
+  ctx.beginPath(); ctx.moveTo(0,h-pad); ctx.lineTo(w,h-pad); ctx.stroke();
+
+  // bars
+  const accentR = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--accent').match(/\d+/)?.[0]||'99');
+  const accentG = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--accent').match(/\d+/)?.[1]||'102');
+  const accentB = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--accent').match(/\d+/)?.[2]||'241');
+  ctx.fillStyle = `rgba(${accentR},${accentG},${accentB},0.7)`;
+
+  data.forEach((item, i) => {
+    const bh   = item[valueKey] / max * (h - pad - 4);
+    const x    = i * (bw + 2);
+    const y    = h - pad - bh;
+    ctx.fillRect(x, y, bw, bh);
+    // Date label every ~4 bars
+    if (data.length <= 14 || i % Math.ceil(data.length/7) === 0) {
+      ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--text3') || '#5a5a78';
+      ctx.font = '9px Inter,system-ui,sans-serif';
+      ctx.fillText(item[labelKey].slice(5), x, h-4);
+      ctx.fillStyle = `rgba(${accentR},${accentG},${accentB},0.7)`;
+    }
+  });
+}
+
+function renderBars(containerId, data, labelKey, countKey, labelFmt) {
+  const el = document.getElementById(containerId);
+  if (!el) return;
+  if (!data || !data.length) { el.innerHTML='<div style="color:var(--text3);font-size:12px;text-align:center;padding:12px">No data</div>'; return; }
+  const max = Math.max(...data.map(d=>d[countKey]),1);
+  el.innerHTML = data.slice(0,8).map(item =>
+    '<div class="bar-wrap">'
+    +'<div class="bar-label" title="'+(labelFmt?labelFmt(item[labelKey]):item[labelKey])+'">'+escHtml(labelFmt?labelFmt(item[labelKey]):item[labelKey])+'</div>'
+    +'<div class="bar-track"><div class="bar-fill" style="width:'+Math.round(item[countKey]/max*100)+'%"></div></div>'
+    +'<div class="bar-count">'+item[countKey]+'</div>'
+    +'</div>'
+  ).join('');
+}
+
+function renderPagesWithTime(containerId, data) {
+  const el = document.getElementById(containerId);
+  if (!el) return;
+  if (!data || !data.length) { el.innerHTML='<div style="color:var(--text3);font-size:12px;text-align:center;padding:12px">No data</div>'; return; }
+  const max = Math.max(...data.map(d=>d.views),1);
+  el.innerHTML = data.slice(0,8).map(item =>
+    '<div class="bar-wrap">'
+    +'<div class="bar-label" title="'+item.page+'">'+escHtml(item.page)+'</div>'
+    +'<div class="bar-track"><div class="bar-fill" style="width:'+Math.round(item.views/max*100)+'%"></div></div>'
+    +'<div class="bar-count">'+item.views+'</div>'
+    +'<div style="font-size:10px;color:var(--text3);min-width:40px;text-align:right;">'+(item.avgDurationSec>0?item.avgDurationSec+'s':'')+'</div>'
+    +'</div>'
+  ).join('');
+}
+
+function renderSecurityEvents(containerId, events) {
+  const el = document.getElementById(containerId);
+  if (!el) return;
+  if (!events.length) { el.innerHTML='<div style="color:var(--text3);font-size:12px;text-align:center;padding:12px">No security events</div>'; return; }
+  el.innerHTML = events.map(e =>
+    '<div style="padding:6px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;">'
+    +'<span class="badge badge-'+(e.action?.includes('fail')?'error':e.action?.includes('delete')?'error':'info')+'" style="font-size:9px;text-transform:none;">'+escHtml(e.action?.replace(/_/g,' ')||'')+'</span>'
+    +'<span style="font-size:12px;color:var(--accent-l);">'+escHtml(e.actor||'')+'</span>'
+    +'<span style="font-size:11px;color:var(--text2);">'+escHtml(e.target||'')+'</span>'
+    +'<span style="font-size:10px;color:var(--text3);margin-left:auto;white-space:nowrap;">'+new Date(e.ts).toLocaleString()+'</span>'
+    +'</div>'
+  ).join('');
+}
+
+async function clearAudit() {
+  if (!confirm('Clear all audit log entries? This cannot be undone.')) return;
+  const r = await fetch('/api/audit', { method:'DELETE' });
+  const d = await r.json();
+  if (!r.ok) { toast(d.error,'error'); return; }
+  toast('Audit log cleared','success');
+  location.reload();
+}
+
+function escHtml(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+
+// Redraw charts on resize
+window.addEventListener('resize', () => {
+  if (document.getElementById('pane-analytics').style.display !== 'none') {
+    loadAnalytics(document.getElementById('period-sel').value);
+  }
+});
+</script>
+</body></html>