[glm-grade=A] fix(security): DC-120 surface caddy-source perimeter events in Log Insights dashboard — new GET /api/v1/security/events/perimeter endpoint with per-IP/per-vhost aggregations, event-store compileFilter/filterEvents primitives, and Perimeter section in Log Insights modal with XSS-safe rendering and stale-request guards

status/js/log-insights.js

@@ -30,6 +30,12 @@
         <div id="li-ips-table" class="scroll-container" style="max-height: 300px;"></div>
       </div>
 
+      <!-- DC-120: Perimeter (caddy-source) — public traffic reaching the reverse proxy -->
+      <div id="li-perimeter-section">
+        <h4 style="margin: 12px 0 8px; font-size: 0.95rem;">🌐 Perimeter <span style="font-size: 0.75rem; color: var(--muted); font-weight: 400;">(public traffic at the reverse proxy)</span></h4>
+        <div id="li-perimeter" class="scroll-container" style="max-height: 320px;"></div>
+      </div>
+
       <!-- Storage Info -->
       <div id="li-storage" style="margin-top: 16px; padding: 12px; background: var(--card-base); border-radius: 8px; border: 1px solid var(--border);"></div>
 
@@ -48,6 +54,7 @@
   const insightsDiv = document.getElementById('li-insights');
   const summaryDiv = document.getElementById('li-summary');
   const ipsDiv = document.getElementById('li-ips-table');
+  const perimeterDiv = document.getElementById('li-perimeter');
   const storageDiv = document.getElementById('li-storage');
 
   if (openBtn) {
@@ -58,13 +65,31 @@
   periodSel.addEventListener('change', loadInsights);
   disposeBtn.addEventListener('click', showDisposePreview);
 
+  // DC-120: perimeter fetch runs in parallel with the main insights
+  // request so a slow perimeter response never blanks the panel the
+  // user opened the modal for. A monotonically increasing request ID
+  // guards against stale responses: if the user changes period/refreshes,
+  // the new request's ID will be greater, and the old callback will
+  // no-op instead of overwriting fresh data. The ID is incremented
+  // at the START of loadInsights so ALL in-flight callbacks check the
+  // same monotonically increasing value.
+  var perimeterReqId = 0;
+
   async function loadInsights() {
+    // Increment first — ANY perimeter callback with the old ID must
+    // self-discard, even the ones already in flight from a prior click.
+    var thisReq = ++perimeterReqId;
     const hours = periodSel.value;
     insightsDiv.innerHTML = '<div class="panel-empty"><span class="brand-spinner"></span> Analyzing logs...</div>';
     summaryDiv.innerHTML = '';
     ipsDiv.innerHTML = '';
+    if (perimeterDiv) perimeterDiv.innerHTML = '<div class="panel-empty"><span class="brand-spinner"></span> Loading perimeter...</div>';
     storageDiv.innerHTML = '';
 
+    // DC-120: fire perimeter IN PARALLEL — don't await main insights.
+    // If main fails, perimeter still runs and renders its own terminal state.
+    loadPerimeter(hours, thisReq);
+
     try {
       const res = await fetch('/api/v1/log-insights?hours=' + hours);
       const data = await res.json();
@@ -125,6 +150,73 @@
     }
   }
 
+  // DC-120: render the caddy-source perimeter (public traffic at the
+  // reverse proxy). Separate fetch so a failure here leaves the rest of
+  // the modal intact. A request ID guards against stale responses.
+  async function loadPerimeter(hours, reqId) {
+    if (!perimeterDiv) return;
+    try {
+      const res = await fetch('/api/v1/security/events/perimeter?hours=' + hours + '&limit=15');
+      // Stale-response guard: if a newer request has superseded this one,
+      // discard this response silently (the new callback will render fresh data).
+      if (reqId !== perimeterReqId) return;
+      const data = await res.json();
+      // Stale-parse guard: a newer request can begin while JSON parsing
+      // is pending; check again before touching the DOM.
+      if (reqId !== perimeterReqId) return;
+      if (!data.success) {
+        perimeterDiv.innerHTML = '<div class="panel-empty">Perimeter unavailable: ' + escapeHtml(data.error || 'unknown error') + '</div>';
+        return;
+      }
+
+      const sum = data.summary || {};
+      let html = '<div style="font-size: 0.8rem; color: var(--muted); margin-bottom: 8px;">' +
+        sum.events + ' requests from ' + sum.uniqueIPs + ' IPs' +
+        (sum.denied ? ' · <span style="color: var(--warn-fg, #f0c674);">' + sum.denied + ' denied</span>' : '') +
+        (sum.error ? ' · <span style="color: var(--bad-fg, #ff6b6b);">' + sum.error + ' errors</span>' : '') +
+        '</div>';
+
+      const ips = data.topIPs || [];
+      if (ips.length === 0) {
+        html += '<div class="panel-empty">No perimeter traffic in this period.</div>';
+      } else {
+        html += '<table style="width: 100%; font-size: 0.85rem; border-collapse: collapse;">' +
+          '<tr style="border-bottom: 1px solid var(--border);"><th style="text-align:left; padding: 6px;">Source IP</th>' +
+          '<th style="text-align:right; padding: 6px;">Requests</th>' +
+          '<th style="text-align:right; padding: 6px;">Denied</th>' +
+          '<th style="text-align:right; padding: 6px;">Errors</th>' +
+          '<th style="text-align:left; padding: 6px;">Hosts Hit</th></tr>';
+        ips.forEach(function(p) {
+          var deniedStyle = p.denied > 0 ? 'color: var(--warn-fg, #f0c674); font-weight: 600;' : '';
+          var errStyle = p.error > 0 ? 'color: var(--bad-fg, #ff6b6b); font-weight: 600;' : '';
+          html += '<tr style="border-bottom: 1px solid var(--border);">' +
+            '<td style="padding: 6px; font-family: monospace;">' + escapeHtml(p.ip) + '</td>' +
+            '<td style="padding: 6px; text-align: right;">' + p.count + '</td>' +
+            '<td style="padding: 6px; text-align: right; ' + deniedStyle + '">' + p.denied + '</td>' +
+            '<td style="padding: 6px; text-align: right; ' + errStyle + '">' + p.error + '</td>' +
+            '<td style="padding: 6px; color: var(--muted);">' + (p.hosts && p.hosts.length ? escapeHtml(p.hosts.join(', ')) : '—') + '</td>' +
+            '</tr>';
+        });
+        html += '</table>';
+      }
+
+      const hosts = data.byHost || [];
+      if (hosts.length > 0) {
+        html += '<div style="font-size: 0.75rem; color: var(--muted); margin-top: 10px;">By host: ' +
+          hosts.map(function(h) {
+            return escapeHtml(h.host) + ' (' + h.count + (h.denied ? ', ' + h.denied + ' denied' : '') + (h.error ? ', ' + h.error + ' err' : '') + ')';
+          }).join(' · ') + '</div>';
+      }
+
+      perimeterDiv.innerHTML = html;
+    } catch (e) {
+      // Stale-rejection guard: if a newer request has superseded this
+      // one, discard this error instead of overwriting fresh data.
+      if (reqId !== perimeterReqId) return;
+      perimeterDiv.innerHTML = '<div class="panel-empty">Perimeter failed to load: ' + escapeHtml(e.message) + '</div>';
+    }
+  }
+
   function statCard(label, value) {
     return '<div style="text-align: center; padding: 12px; background: var(--card-base); border-radius: 8px; border: 1px solid var(--border);">' +
       '<div style="font-size: 1.5rem; font-weight: 700;">' + value + '</div>' +
@@ -181,4 +273,12 @@
     div.innerHTML = html;
     document.body.appendChild(div.firstElementChild);
   }
+
+  // DC-120: local escapeHtml — this file loads standalone (line-order in
+  // index.html) BEFORE dist/core.js, and the bundled globals.js copy never
+  // leaks to window (esbuild IIFE-wraps it), so a bare global reference
+  // would throw at render time. Same escaping contract as globals.js.
+  function escapeHtml(text) {
+    return String(text ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  }
 })();