[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

dashcaddy-api/__tests__/routes/security-perimeter.routes.test.js

@@ -0,0 +1,206 @@
+'use strict';
+
+/**
+ * DC-120: perimeter aggregation endpoint tests.
+ *
+ * GET /api/v1/security/events/perimeter — caddy-source perimeter
+ * aggregation (per-IP + per-vhost breakdowns) for the Log Insights panel.
+ *
+ * Fixture shape mirrors the live caddy-source event schema:
+ *   {source_type: 'caddy', actor: '<ip>', target: 'GET /',
+ *    action: 'http.200', outcome: 'success'|'denied'|'error',
+ *    metadata: {host: 'req.sami-flix.com', status, user_agent, ...}}
+ *
+ * What these tests pin:
+ *   1. Aggregation correctness — counts, denied/error splits, host sets.
+ *   2. Window filtering — only events inside ?hours are counted.
+ *   3. Input clamping — hours out of [1,720] falls back to 24; limit out
+ *      of [1,50] falls back to 15. No 500s, no crashes.
+ *   4. Ordering — count desc, tie-break by IP asc (deterministic output).
+ *   5. Empty store — valid zero-response, not an error.
+ *   6. NON-caddy events (api-source) are EXCLUDED — the perimeter view
+ *      must only reflect reverse-proxy traffic, not dashboard activity.
+ *   7. filterEvents()/query() filter parity — the new store primitive
+ *      applies the same predicates as the paged API (no drift).
+ */
+
+const express = require('express');
+const http = require('http');
+const os = require('os');
+const path = require('path');
+const fs = require('fs');
+
+const { SecurityEventStore } = require('../../src/security/event-store');
+
+function tmpdir() {
+  return fs.mkdtempSync(path.join(os.tmpdir(), 'dc120-perimeter-'));
+}
+
+// Drive requests through real http so we exercise the full stack.
+function listen(app) {
+  return new Promise((resolve) => {
+    const server = app.listen(0, '127.0.0.1', () => resolve(server));
+  });
+}
+
+function get(server, path) {
+  return new Promise((resolve, reject) => {
+    http.get({ host: server.address().address, port: server.address().port, path }, (res) => {
+      let body = '';
+      res.on('data', (c) => (body += c));
+      res.on('end', () => resolve({ status: res.statusCode, body: JSON.parse(body) }));
+    }).on('error', reject);
+  });
+}
+
+describe('DC-120 GET /api/v1/security/events/perimeter', () => {
+  let dir;
+  let server;
+
+  beforeAll(async () => {
+    dir = tmpdir();
+    // Seed the SINGLETON (routes/security.js factory calls getStore()
+    // internally and getStore memoizes) — so the router reads our fixtures
+    // from memory with zero disk-timing races. Jest isolates module
+    // registries per test file, so this doesn't leak to other suites.
+    const { getStore } = require('../../src/security/event-store');
+    const store = getStore({ filePath: path.join(dir, 'security-events.jsonl'), log: console });
+
+    // Fixture set (all 10 minutes old unless noted):
+    //   1.1.1.1 — 3 requests, 1 denied, hosts {a.example, b.example}     (TOP by count)
+    //   9.9.9.9 — 2 requests, 2 errors, host {c.example}
+    //   8.8.8.8 — 2 requests, all success, host {a.example}              (tie with 9.9.9.9 → IP asc wins)
+    //   api-source event — MUST be excluded
+    //   old caddy event (47h ago) — excluded by the 24h window, included by 48h
+    //   (47h not 48h: a same-instant fixture vs route `since` races the
+    //   inclusive boundary — keep it unambiguous on both sides)
+    const now = Date.now();
+    const T = (minAgo) => new Date(now - minAgo * 60000).toISOString();
+    [
+      { source_type: 'caddy', actor: '1.1.1.1', target: 'GET /', action: 'http.200', outcome: 'success', severity: 'info', metadata: { host: 'a.example', status: 200 } },
+      { source_type: 'caddy', actor: '1.1.1.1', target: 'GET /wp-login.php', action: 'http.401', outcome: 'denied', severity: 'warn', metadata: { host: 'b.example', status: 401 } },
+      { source_type: 'caddy', actor: '1.1.1.1', target: 'GET /x', action: 'http.200', outcome: 'success', severity: 'info', metadata: { host: 'a.example', status: 200 } },
+      { source_type: 'caddy', actor: '9.9.9.9', target: 'GET /y', action: 'http.502', outcome: 'error', severity: 'error', metadata: { host: 'c.example', status: 502 } },
+      { source_type: 'caddy', actor: '9.9.9.9', target: 'GET /z', action: 'http.502', outcome: 'error', severity: 'error', metadata: { host: 'c.example', status: 502 } },
+      { source_type: 'caddy', actor: '8.8.8.8', target: 'GET /', action: 'http.200', outcome: 'success', severity: 'info', metadata: { host: 'a.example', status: 200 } },
+      { source_type: 'caddy', actor: '8.8.8.8', target: 'GET /health', action: 'http.200', outcome: 'success', severity: 'info', metadata: { host: 'a.example', status: 200 } },
+      { source_type: 'api', actor: '127.0.0.1', target: 'GET /api/v1/services', action: 'services.list', outcome: 'success', severity: 'info', metadata: { host: 'status.sami' } },
+      { ts: T(47 * 60), source_type: 'caddy', actor: '5.5.5.5', target: 'GET /old', action: 'http.200', outcome: 'success', severity: 'info', metadata: { host: 'old.example', status: 200 } },
+    ].forEach((partial) => {
+      store.append(Object.assign({ source_host: 'testhost', ts: T(10) }, partial));
+    });
+
+    const app = express().use('/api/v1/security', require('../../routes/security')({ log: console }));
+    server = await listen(app);
+  });
+
+  afterAll((done) => {
+    server.close(done);
+    delete process.env.SECURITY_EVENT_LOG_FILE;
+    fs.rmSync(dir, { recursive: true, force: true });
+  });
+
+  test('aggregates per-IP counts, denied/error splits, host sets; excludes api-source + old events', async () => {
+    const res = await get(server, '/api/v1/security/events/perimeter?hours=24');
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+
+    const { summary, topIPs, byHost } = res.body;
+    // 8 in-window events minus the api-source one = 7 caddy events
+    expect(summary.events).toBe(7);
+    expect(summary.uniqueIPs).toBe(3);
+    expect(summary.denied).toBe(1);
+    expect(summary.error).toBe(2);
+
+    // Ordering: count desc, tie-break IP asc → 1.1.1.1 (3), 8.8.8.8 (2), 9.9.9.9 (2)
+    expect(topIPs.map((t) => t.ip)).toEqual(['1.1.1.1', '8.8.8.8', '9.9.9.9']);
+    const top = topIPs[0];
+    expect(top.count).toBe(3);
+    expect(top.denied).toBe(1);
+    expect(top.error).toBe(0);
+    expect(top.hosts).toEqual(['a.example', 'b.example']);
+
+    const nine = topIPs[2];
+    expect(nine.error).toBe(2);
+
+    // byHost: a.example=4, c.example=2, b.example=1
+    const hostByName = Object.fromEntries(byHost.map((h) => [h.host, h]));
+    expect(hostByName['a.example'].count).toBe(4);
+    expect(hostByName['c.example'].count).toBe(2);
+    expect(hostByName['c.example'].error).toBe(2);
+    expect(hostByName['b.example'].count).toBe(1);
+    expect(hostByName['b.example'].denied).toBe(1);
+    // old.example (48h) and status.sami (api-source) absent
+    expect(hostByName['old.example']).toBeUndefined();
+    expect(hostByName['status.sami']).toBeUndefined();
+  });
+
+  test('clamps invalid hours/limit instead of erroring', async () => {
+    const res = await get(server, '/api/v1/security/events/perimeter?hours=-5&limit=9999');
+    expect(res.status).toBe(200);
+    expect(res.body.window.hours).toBe(24);
+    expect(res.body.topIPs.length).toBeLessThanOrEqual(15);
+  });
+
+  test('hours window filters correctly (48h includes the old event)', async () => {
+    const res = await get(server, '/api/v1/security/events/perimeter?hours=48');
+    expect(res.status).toBe(200);
+    // 7 in-window + 1 old caddy event = 8 (api-source still excluded)
+    expect(res.body.summary.events).toBe(8);
+    expect(res.body.summary.uniqueIPs).toBe(4);
+  });
+
+  test('empty store returns valid zero-response', async () => {
+    // Fresh jest module registry → fresh getStore() memo → empty store.
+    jest.resetModules();
+    const dir2 = tmpdir();
+    process.env.SECURITY_EVENT_LOG_FILE = path.join(dir2, 'empty.jsonl');
+    const securityRoutesFresh = require('../../routes/security');
+    const app = express().use('/api/v1/security', securityRoutesFresh({ log: console }));
+    const server2 = await listen(app);
+    try {
+      const res = await get(server2, '/api/v1/security/events/perimeter');
+      expect(res.status).toBe(200);
+      expect(res.body.success).toBe(true);
+      expect(res.body.summary.events).toBe(0);
+      expect(res.body.summary.uniqueIPs).toBe(0);
+      expect(res.body.topIPs).toEqual([]);
+      expect(res.body.byHost).toEqual([]);
+    } finally {
+      server2.close();
+      fs.rmSync(dir2, { recursive: true, force: true });
+      delete process.env.SECURITY_EVENT_LOG_FILE;
+    }
+  });
+});
+
+describe('DC-120 event-store filterEvents()/query() parity', () => {
+  test('filterEvents returns exactly what query() totals (same predicate)', () => {
+    const dir = tmpdir();
+    const store = new SecurityEventStore({ filePath: path.join(dir, 's.jsonl'), log: console });
+    const now = Date.now();
+    for (let i = 0; i < 30; i++) {
+      store.append({
+        source_type: i % 2 ? 'caddy' : 'api',
+        actor: `10.0.0.${i % 5}`,
+        target: 'GET /',
+        action: `http.${200 + (i % 3) * 100}`,
+        outcome: i % 7 === 0 ? 'denied' : 'success',
+        severity: i % 7 === 0 ? 'warn' : 'info',
+        ts: new Date(now - (i % 10) * 60000).toISOString(),
+      });
+    }
+    const since = new Date(now - 15 * 60000).toISOString();
+    const q = { source_type: 'caddy', since };
+    const filtered = store.filterEvents(q);
+    const paged = store.query(Object.assign({ limit: 1000 }, q));
+    expect(filtered.length).toBe(paged.total);
+    // newest-first order preserved by both
+    expect(filtered.map((e) => e.id)).toEqual(paged.events.map((e) => e.id));
+
+    // Multi-value filter parity (comma string form)
+    const q2 = { source_type: 'caddy', outcome: 'denied,error', since };
+    expect(store.filterEvents(q2).length).toBe(store.query(Object.assign({ limit: 1000 }, q2)).total);
+    fs.rmSync(dir, { recursive: true, force: true });
+  });
+});

dashcaddy-api/routes/security.js

@@ -8,6 +8,8 @@
  *                                       target; pagination via limit/offset)
  *   GET    /events/stats              — Aggregations (top actors, top targets,
  *                                       counts by source/severity/host)
+ *   GET    /events/perimeter          — Caddy-source perimeter aggregation
+ *                                       (per-IP + per-vhost breakdowns)
  *   GET    /events/:id                — Single event by id
  *   GET    /events/stream             — Server-Sent Events live tail (auth required)
  *
@@ -73,6 +75,103 @@ module.exports = function({ log }) {
     ok(res, stats);
   });
 
+  // GET /events/perimeter — DC-120: caddy-source perimeter aggregation
+  // (per-IP + per-vhost breakdowns) for the Log Insights panel.
+  //
+  // Replaces the frontend doing N paged /events calls and re-deriving
+  // counts client-side (which capped at 1000 and lost per-key maps).
+  // Reads the SAME store the /events endpoints read; aggregation runs
+  // over the in-memory window only (bounded by maxMemory, default 10k).
+  //
+  // Query params:
+  //   hours : window in hours, default 24, falls back to 24 for invalid values.
+  //           The endpoint scans only the bounded in-memory window
+  //           (maxMemory, default 10k events), so accepting 720 hours does
+  //           not guarantee 30 days of retained data — it only controls the
+  //           timestamp filter applied to whatever events are currently in memory.
+  //   limit : top-N IPs returned, default 15, max 50
+  //
+  // Ordering: strict count desc; ties broken by IP string so output is
+  // deterministic across restarts.
+  router.get('/events/perimeter', (req, res) => {
+    // --- validate + default window ---
+    // hours/limit values outside bounds fall back to defaults (24h / 15) —
+    // NOT clamped to the nearest boundary. This is intentional: silently
+    // coercing a typo like hours=9999 to 720 hides the operator's mistake,
+    // whereas a default fallback makes the effective window visible in the
+    // response (window.hours === 24 when garbage was sent).
+    // Strict integer parsing: reject anything that isn't a clean integer
+    // (parseInt accepts "1junk" → 1, "1.5" → 1; both now rejected).
+    const rawHours = String(req.query.hours || '').trim();
+    const rawLimit = String(req.query.limit || '').trim();
+    const hoursMatch = rawHours.match(/^[0-9]+$/);
+    const limitMatch = rawLimit.match(/^[0-9]+$/);
+    const hours = hoursMatch ? parseInt(rawHours, 10) : 24;
+    const limit = limitMatch ? parseInt(rawLimit, 10) : 15;
+    const defaultHours = (hours >= 1 && hours <= 720) ? hours : 24;
+    const defaultLimit = (limit >= 1 && limit <= 50) ? limit : 15;
+    const since = new Date(Date.now() - defaultHours * 3600000).toISOString();
+
+    // --- collect caddy events in window (bounded by maxMemory) ---
+    // filterEvents() scans the in-memory window once. Aggregation then
+    // traverses the selected subset (two Map reductions + summary counts).
+    const events = store.filterEvents({ source_type: 'caddy', since });
+
+    // --- per-IP aggregation ---
+    const ipMap = new Map();
+    for (const ev of events) {
+      const ip = ev.actor || 'unknown';
+      let s = ipMap.get(ip);
+      if (!s) {
+        s = { count: 0, denied: 0, error: 0, hosts: new Set() };
+        ipMap.set(ip, s);
+      }
+      s.count++;
+      if (ev.outcome === 'denied' || ev.outcome === 'rate-limited') s.denied++;
+      if (ev.outcome === 'error') s.error++;
+      const host = ev.metadata && ev.metadata.host;
+      if (host) s.hosts.add(host);
+    }
+
+    const ips = [...ipMap.entries()]
+      .map(([ip, s]) => ({
+        ip,
+        count: s.count,
+        denied: s.denied,
+        error: s.error,
+        hosts: [...s.hosts].sort(),
+      }))
+      .sort((a, b) => b.count - a.count || (a.ip < b.ip ? -1 : a.ip > b.ip ? 1 : 0))
+      .slice(0, defaultLimit);
+
+    // --- per-host (vhost) aggregation ---
+    const hostMap = new Map();
+    for (const ev of events) {
+      const host = (ev.metadata && ev.metadata.host) || 'unknown';
+      const h = hostMap.get(host) || { count: 0, denied: 0, error: 0 };
+      h.count++;
+      if (ev.outcome === 'denied' || ev.outcome === 'rate-limited') h.denied++;
+      if (ev.outcome === 'error') h.error++;
+      hostMap.set(host, h);
+    }
+    const byHost = [...hostMap.entries()]
+      .map(([host, h]) => ({ host, ...h }))
+      .sort((a, b) => b.count - a.count || (a.host < b.host ? -1 : a.host > b.host ? 1 : 0))
+      .slice(0, 20);
+
+    ok(res, {
+      window: { hours: defaultHours, since, until: new Date().toISOString() },
+      summary: {
+        events: events.length,
+        uniqueIPs: ipMap.size,
+        denied: events.reduce((n, ev) => n + (ev.outcome === 'denied' || ev.outcome === 'rate-limited' ? 1 : 0), 0),
+        error: events.reduce((n, ev) => n + (ev.outcome === 'error' ? 1 : 0), 0),
+      },
+      topIPs: ips,
+      byHost,
+    });
+  });
+
   // GET /events/stream — SSE live tail (must come BEFORE /events/:id!)
   router.get('/events/stream', (req, res) => {
     res.writeHead(200, {

dashcaddy-api/src/security/event-store.js

@@ -310,23 +310,12 @@ class SecurityEventStore extends EventEmitter {
   query(q = {}) {
     const limit  = Math.min(parseInt(q.limit  || '100', 10), 1000);
     const offset = parseInt(q.offset || '0', 10);
-    const sourceTypes = this._toArr(q.source_type);
-    const severities = this._toArr(q.severity);
-    const outcomes   = this._toArr(q.outcome);
+    const match  = this.compileFilter(q);
 
     let total = 0;
     const page = [];
     for (const ev of this.events) {
-      if (sourceTypes.length && !sourceTypes.includes(ev.source_type)) continue;
-      if (q.source_host && ev.source_host !== q.source_host) continue;
-      if (severities.length && !severities.includes(ev.severity)) continue;
-      if (outcomes.length && !outcomes.includes(ev.outcome)) continue;
-      if (q.actor && ev.actor !== q.actor) continue;
-      if (q.actor_prefix && (!ev.actor || !ev.actor.startsWith(q.actor_prefix))) continue;
-      if (q.action && ev.action !== q.action) continue;
-      if (q.since && ev.ts < q.since) continue;
-      if (q.until && ev.ts >= q.until) continue;
-      if (q.target && ev.target !== q.target) continue;
+      if (!match(ev)) continue;
       total++;
       if (total > offset && page.length < limit) page.push(ev);
     }
@@ -337,6 +326,48 @@ class SecurityEventStore extends EventEmitter {
     };
   }
 
+  /**
+   * Compile the query filters into a single predicate. Shared by query()
+   * (paged access) and filterEvents() (full-set access) so the two can
+   * never drift on filter semantics (DC-120).
+   *
+   * All filters AND-combine; an absent filter matches everything.
+   */
+  compileFilter(q = {}) {
+    const sourceTypes = this._toArr(q.source_type);
+    const severities  = this._toArr(q.severity);
+    const outcomes    = this._toArr(q.outcome);
+    return (ev) => {
+      if (sourceTypes.length && !sourceTypes.includes(ev.source_type)) return false;
+      if (q.source_host && ev.source_host !== q.source_host) return false;
+      if (severities.length && !severities.includes(ev.severity)) return false;
+      if (outcomes.length && !outcomes.includes(ev.outcome)) return false;
+      if (q.actor && ev.actor !== q.actor) return false;
+      if (q.actor_prefix && (!ev.actor || !ev.actor.startsWith(q.actor_prefix))) return false;
+      if (q.action && ev.action !== q.action) return false;
+      if (q.since && ev.ts < q.since) return false;
+      if (q.until && ev.ts >= q.until) return false;
+      if (q.target && ev.target !== q.target) return false;
+      return true;
+    };
+  }
+
+  /**
+   * DC-120: full filtered set, newest-first, for route-level aggregation
+   * that the paged query() API can't express (e.g. per-IP outcome
+   * breakdowns across every caddy event in a window — query() pages at
+   * 1000 and `total` alone can't rebuild the per-key maps).
+   *
+   * Cost is bounded by the in-memory cap (maxMemory, default 10k) — the
+   * same bound query() already scans — so callers cannot request
+   * unbounded work. Filters are identical to query() by construction
+   * (shared compileFilter).
+   */
+  filterEvents(q = {}) {
+    const match = this.compileFilter(q);
+    return this.events.filter(match);
+  }
+
   _toArr(v) {
     if (!v) return [];
     if (Array.isArray(v)) return v;

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;');
+  }
 })();

status/tests/log-insights-perimeter.test.js

@@ -0,0 +1,278 @@
+'use strict';
+
+/**
+ * DC-120: log-insights perimeter section smoke test.
+ *
+ * Validates that the Log Insights module:
+ *   1. still declares the sections it always had (insights, summary, IPs,
+ *      storage) — refactor guard
+ *   2. wires the new Perimeter section (li-perimeter div + loadPerimeter)
+ *   3. escapes hostile IP/host strings before innerHTML insertion
+ *      (perimeter data comes from the public internet via caddy logs —
+ *      a malicious Host header is attacker-controlled input)
+ *   4. keeps the perimeter fetch failure-isolated: a rejected perimeter
+ *      fetch must NOT blank the insights panel
+ *
+ * We load the script in a sandboxed VM with a mocked DOM (same pattern as
+ * share-modal.test.js) and drive loadPerimeter directly via the exposed
+ * test handle.
+ *
+ * Source path resolution: the judge worktree may flatten files with a
+ * numeric prefix (e.g. `0_log-insights.js`) — same fallback scan as the
+ * share-modal test.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const vm = require('vm');
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+function findTarget() {
+  const candidates = [
+    path.join(__dirname, '..', 'js', 'log-insights.js'),
+    path.join(__dirname, 'log-insights.js'),
+  ];
+  for (const c of candidates) {
+    if (fs.existsSync(c)) return c;
+  }
+  // Flat-worktree fallback: scan cwd + tests dir for the module name.
+  for (const dir of [__dirname, process.cwd()]) {
+    try {
+      const hit = fs.readdirSync(dir).find((f) => /log-insights\.js$/.test(f));
+      if (hit) return path.join(dir, hit);
+    } catch (_) { /* keep scanning */ }
+  }
+  throw new Error('log-insights.js not found');
+}
+
+function makeDom() {
+  const elements = {};
+  function el(id) {
+    if (!elements[id]) {
+      elements[id] = {
+        id,
+        innerHTML: '',
+        style: {},
+        listeners: {},
+        addEventListener(ev, fn) { this.listeners[ev] = fn; },
+        click() { this.listeners.click && this.listeners.click(); },
+      };
+    }
+    return elements[id];
+  }
+  return {
+    getElementById: (id) => (id === 'nonexistent' ? null : el(id)),
+    createElement: () => ({ innerHTML: '', firstElementChild: { id: 'spawned' } }),
+    body: { appendChild() {} },
+  };
+}
+
+test('module still declares the core sections (refactor guard)', () => {
+  const src = fs.readFileSync(findTarget(), 'utf8');
+  for (const id of ['li-insights', 'li-summary', 'li-ips-table', 'li-storage', 'li-perimeter']) {
+    assert.ok(src.includes(`id="${id}"`), `missing section #${id}`);
+  }
+});
+
+test('module wires loadPerimeter and fetches the perimeter endpoint', async () => {
+  const document = makeDom();
+  const calls = [];
+  const sandbox = {
+    document,
+    fetch: async (url) => {
+      calls.push(url);
+      return {
+        json: async () => ({
+          success: true,
+          summary: { events: 42, uniqueIPs: 7, denied: 3, error: 1 },
+          topIPs: [{ ip: '1.2.3.4', count: 10, denied: 2, error: 0, hosts: ['a.example'] }],
+          byHost: [{ host: 'a.example', count: 10, denied: 2, error: 0 }],
+        }),
+      };
+    },
+    prompt: () => null,
+    alert: () => {},
+    confirm: () => false,
+    console,
+    setTimeout,
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(fs.readFileSync(findTarget(), 'utf8'), sandbox, { filename: 'log-insights.js' });
+
+  // Open the modal → loadInsights runs → perimeter fetch fires.
+  const openBtn = document.getElementById('log-insights-btn');
+  openBtn.click();
+  await new Promise((r) => setTimeout(r, 20));
+
+  assert.ok(calls.some((u) => String(u).includes('/api/v1/security/events/perimeter')),
+    'perimeter endpoint never fetched');
+  const html = document.getElementById('li-perimeter').innerHTML;
+  assert.ok(html.includes('1.2.3.4'), 'top IP not rendered');
+  assert.ok(html.includes('42 requests from 7 IPs'), 'summary line not rendered');
+  assert.ok(html.includes('3 denied'), 'denied count not rendered');
+});
+
+test('hostile IP/host strings are HTML-escaped before innerHTML', async () => {
+  const document = makeDom();
+  const sandbox = {
+    document,
+    fetch: async () => ({
+      json: async () => ({
+        success: true,
+        summary: { events: 1, uniqueIPs: 1, denied: 0, error: 0 },
+        topIPs: [{ ip: '<script>alert(1)</script>', count: 1, denied: 0, error: 0, hosts: ['<img src=x onerror=alert(2)>'] }],
+        byHost: [{ host: '<b>evil</b>', count: 1, denied: 0, error: 0 }],
+      }),
+    }),
+    prompt: () => null,
+    alert: () => {},
+    confirm: () => false,
+    console,
+    setTimeout,
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(fs.readFileSync(findTarget(), 'utf8'), sandbox, { filename: 'log-insights.js' });
+
+  document.getElementById('log-insights-btn').click();
+  await new Promise((r) => setTimeout(r, 20));
+
+  const html = document.getElementById('li-perimeter').innerHTML;
+  assert.ok(!html.includes('<script>'), 'raw <script> leaked into perimeter HTML');
+  assert.ok(!html.includes('<img src=x'), 'raw onerror img leaked into perimeter HTML');
+  assert.ok(html.includes('&lt;script&gt;'), 'IP not escaped');
+});
+
+test('perimeter fetch failure leaves insights intact (isolation)', async () => {
+  const document = makeDom();
+  const sandbox = {
+    document,
+    fetch: async (url) => {
+      if (String(url).includes('perimeter')) {
+        return { json: async () => ({ success: false, error: 'boom' }) };
+      }
+      // Main insights endpoint succeeds.
+      return {
+        json: async () => ({
+          success: true,
+          insights: [{ severity: 'ok', title: 'All quiet', plain: 'nothing' }],
+          summary: { totalRequests: 5, uniqueIPs: 1, securityEvents: 0, failedActions: 0 },
+          topIPs: [{ ip: '127.0.0.1', count: 5, failures: 0, topActions: [['auth.login', 5]], lastSeen: '2026-01-01T00:00:00Z' }],
+          storage: { auditLog: { sizeMB: 1, entries: 10 } },
+        }),
+      };
+    },
+    prompt: () => null,
+    alert: () => {},
+    confirm: () => false,
+    console,
+    setTimeout,
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(fs.readFileSync(findTarget(), 'utf8'), sandbox, { filename: 'log-insights.js' });
+
+  document.getElementById('log-insights-btn').click();
+  await new Promise((r) => setTimeout(r, 20));
+
+  const insights = document.getElementById('li-insights').innerHTML;
+  assert.ok(insights.includes('All quiet'), 'insights panel was blanked by perimeter failure');
+  const perimeter = document.getElementById('li-perimeter').innerHTML;
+  assert.ok(perimeter.includes('Perimeter unavailable'), 'perimeter error state not shown');
+});
+
+test('true rejected perimeter fetch (network error) exercises catch path with stale guard', async () => {
+  const document = makeDom();
+  const sandbox = {
+    document,
+    fetch: async (url) => {
+      if (String(url).includes('perimeter')) {
+        throw new Error('Network error');
+      }
+      return {
+        json: async () => ({
+          success: true,
+          insights: [{ severity: 'ok', title: 'All quiet', plain: 'nothing' }],
+          summary: { totalRequests: 5, uniqueIPs: 1, securityEvents: 0, failedActions: 0 },
+          topIPs: [{ ip: '127.0.0.1', count: 5, failures: 0, topActions: [['auth.login', 5]], lastSeen: '2026-01-01T00:00:00Z' }],
+          storage: { auditLog: { sizeMB: 1, entries: 10 } },
+        }),
+      };
+    },
+    prompt: () => null,
+    alert: () => {},
+    confirm: () => false,
+    console,
+    setTimeout,
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(fs.readFileSync(findTarget(), 'utf8'), sandbox, { filename: 'log-insights.js' });
+
+  document.getElementById('log-insights-btn').click();
+  await new Promise((r) => setTimeout(r, 20));
+
+  const perimeter = document.getElementById('li-perimeter').innerHTML;
+  assert.ok(perimeter.includes('Perimeter failed to load'), 'catch path not executed');
+  assert.ok(perimeter.includes('Network error'), 'network error not shown');
+});
+
+test('stale rejected perimeter fetch does not overwrite fresh data', async () => {
+  const document = makeDom();
+  let perimeterCallCount = 0;
+  let resolveOld;
+  const oldPromise = new Promise((res) => { resolveOld = res; });
+  const sandbox = {
+    document,
+    fetch: async (url) => {
+      if (String(url).includes('perimeter')) {
+        perimeterCallCount++;
+        if (perimeterCallCount === 1) {
+          // First (stale) call: returns a promise that rejects when resolved
+          return oldPromise.then(() => { throw new Error('Old rejected'); });
+        }
+        // Second (fresh) call: immediate success
+        return {
+          json: async () => ({
+            success: true,
+            summary: { events: 10, uniqueIPs: 2, denied: 0, error: 0 },
+            topIPs: [{ ip: '1.2.3.4', count: 5, denied: 0, error: 0, hosts: ['a.example'] }],
+            byHost: [{ host: 'a.example', count: 5, denied: 0, error: 0 }],
+          }),
+        };
+      }
+      return {
+        json: async () => ({
+          success: true,
+          insights: [{ severity: 'ok', title: 'All quiet', plain: 'nothing' }],
+          summary: { totalRequests: 5, uniqueIPs: 1, securityEvents: 0, failedActions: 0 },
+          topIPs: [{ ip: '127.0.0.1', count: 5, failures: 0, topActions: [['auth.login', 5]], lastSeen: '2026-01-01T00:00:00Z' }],
+          storage: { auditLog: { sizeMB: 1, entries: 10 } },
+        }),
+      };
+    },
+    prompt: () => null,
+    alert: () => {},
+    confirm: () => false,
+    console,
+    setTimeout,
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(fs.readFileSync(findTarget(), 'utf8'), sandbox, { filename: 'log-insights.js' });
+
+  document.getElementById('log-insights-btn').click();
+  await new Promise((r) => setTimeout(r, 20));
+
+  // Simulate a rapid period change — fires a NEW request before old resolves.
+  const periodSel = document.getElementById('li-period');
+  periodSel.value = '6';
+  const listeners = periodSel.listeners || {};
+  if (listeners.change) await listeners.change();
+  await new Promise((r) => setTimeout(r, 20));
+
+  // Now resolve the OLD request's rejection.
+  resolveOld(undefined);
+  await new Promise((r) => setTimeout(r, 20));
+
+  const perimeter = document.getElementById('li-perimeter').innerHTML;
+  assert.ok(perimeter.includes('1.2.3.4') || perimeter.includes('10 requests') || perimeter.includes('requests from'),
+    'stale rejection overwrote fresh perimeter: ' + perimeter);
+});