@ijfw/memory-server 1.4.0 → 1.4.3

package/src/dashboard-charts.js

@@ -0,0 +1,239 @@
+/**
+ * dashboard-charts.js — IJFW v1.4.3 W9-C (B19)
+ *
+ * Pure-JS canvas/DOM chart helpers for the dashboard. No external libs.
+ * Theme-aware: reads CSS custom properties `--ijfw-chart-fg`,
+ * `--ijfw-chart-bg`, `--ijfw-chart-warning` from the element's computed
+ * style. Falls back to sane defaults if the host page hasn't set them.
+ *
+ * All helpers are defensive against malformed input so a bad payload from
+ * the API can never throw inside the dashboard render loop.
+ */
+
+const DEFAULTS = {
+  fg: '#9ad2ff',
+  bg: 'rgba(154,210,255,0.18)',
+  warning: '#ff9b3a',
+  text: '#cfd6dd',
+};
+
+function _readTheme(el) {
+  // Both `canvas` and plain `div` go through `getComputedStyle`. In the test
+  // environment the element is a hand-rolled mock that doesn't reach the DOM
+  // — guard so we don't blow up if `getComputedStyle` is unavailable.
+  let cs = null;
+  try {
+    if (el && typeof globalThis.getComputedStyle === 'function') {
+      cs = globalThis.getComputedStyle(el);
+    }
+  } catch { cs = null; }
+  const read = (prop, fallback) => {
+    if (!cs || typeof cs.getPropertyValue !== 'function') return fallback;
+    const v = cs.getPropertyValue(prop);
+    return (v && v.trim()) ? v.trim() : fallback;
+  };
+  return {
+    fg:      read('--ijfw-chart-fg',      DEFAULTS.fg),
+    bg:      read('--ijfw-chart-bg',      DEFAULTS.bg),
+    warning: read('--ijfw-chart-warning', DEFAULTS.warning),
+    text:    read('--ijfw-chart-text',    DEFAULTS.text),
+  };
+}
+
+function _safeNum(v, def = 0) {
+  return (typeof v === 'number' && Number.isFinite(v)) ? v : def;
+}
+
+/**
+ * lineChart(canvas, points, opts)
+ *   points: [{ x: number, y: number }, ...] OR [number, ...]
+ *   opts:   { xMin?, xMax?, yMax?, color?, fill? }
+ *
+ * Empty data renders nothing (clears the canvas) without throwing.
+ */
+export function lineChart(canvas, points, opts = {}) {
+  if (!canvas || typeof canvas.getContext !== 'function') return;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const W = _safeNum(canvas.width, 200);
+  const H = _safeNum(canvas.height, 100);
+  const theme = _readTheme(canvas);
+  const color = opts.color || theme.fg;
+  const fill  = opts.fill === false ? null : theme.bg;
+
+  try { ctx.clearRect(0, 0, W, H); } catch {}
+
+  const pts = Array.isArray(points) ? points : [];
+  const norm = pts.map((p, i) => {
+    if (typeof p === 'number') return { x: i, y: _safeNum(p, 0) };
+    return { x: _safeNum(p && p.x, i), y: _safeNum(p && p.y, 0) };
+  }).filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
+
+  if (norm.length === 0) return;
+
+  let xMin = _safeNum(opts.xMin, norm[0].x);
+  let xMax = _safeNum(opts.xMax, norm[norm.length - 1].x);
+  if (xMax === xMin) xMax = xMin + 1;
+  const yMax = _safeNum(opts.yMax, Math.max(1, ...norm.map((p) => p.y)));
+  const yScale = yMax > 0 ? yMax : 1;
+
+  const pad = 4;
+  const innerW = Math.max(1, W - pad * 2);
+  const innerH = Math.max(1, H - pad * 2);
+
+  const px = (x) => pad + ((x - xMin) / (xMax - xMin)) * innerW;
+  const py = (y) => pad + (1 - (Math.max(0, y) / yScale)) * innerH;
+
+  // Filled area
+  if (fill) {
+    try {
+      ctx.beginPath();
+      ctx.moveTo(px(norm[0].x), H - pad);
+      for (const p of norm) ctx.lineTo(px(p.x), py(p.y));
+      ctx.lineTo(px(norm[norm.length - 1].x), H - pad);
+      ctx.closePath();
+      ctx.fillStyle = fill;
+      ctx.fill();
+    } catch {}
+  }
+
+  // Line stroke
+  try {
+    ctx.beginPath();
+    ctx.moveTo(px(norm[0].x), py(norm[0].y));
+    for (let i = 1; i < norm.length; i++) ctx.lineTo(px(norm[i].x), py(norm[i].y));
+    ctx.strokeStyle = color;
+    ctx.lineWidth   = 1.5;
+    ctx.stroke();
+  } catch {}
+}
+
+/**
+ * barChart(canvas, bars, opts)
+ *   bars: [{ label: string, value: number, color?: string }, ...]
+ *   opts: { horizontal?: boolean, color?: string, maxValue?: number }
+ *
+ * Zero-value bars render as empty rails. Negative values are clamped to 0.
+ */
+export function barChart(canvas, bars, opts = {}) {
+  if (!canvas || typeof canvas.getContext !== 'function') return;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const W = _safeNum(canvas.width, 200);
+  const H = _safeNum(canvas.height, 100);
+  const theme = _readTheme(canvas);
+  const defaultColor = opts.color || theme.fg;
+  const horizontal = Boolean(opts.horizontal);
+
+  try { ctx.clearRect(0, 0, W, H); } catch {}
+
+  const rows = Array.isArray(bars) ? bars.filter((b) => b && typeof b === 'object') : [];
+  if (rows.length === 0) return;
+
+  const values = rows.map((b) => Math.max(0, _safeNum(b.value, 0)));
+  const maxVal = _safeNum(opts.maxValue, Math.max(1, ...values));
+  const scale = maxVal > 0 ? maxVal : 1;
+
+  const pad = 4;
+  const labelGutter = horizontal ? 80 : 14;
+  const innerW = Math.max(1, W - pad * 2 - (horizontal ? labelGutter : 0));
+  const innerH = Math.max(1, H - pad * 2 - (horizontal ? 0 : labelGutter));
+  const slot = (horizontal ? innerH : innerW) / rows.length;
+  const barW = Math.max(1, slot * 0.7);
+
+  for (let i = 0; i < rows.length; i++) {
+    const b = rows[i];
+    const v = values[i];
+    const color = b.color || defaultColor;
+    if (horizontal) {
+      const y = pad + i * slot + (slot - barW) / 2;
+      const len = (v / scale) * innerW;
+      try {
+        ctx.fillStyle = theme.bg;
+        ctx.fillRect(pad + labelGutter, y, innerW, barW);
+        ctx.fillStyle = color;
+        ctx.fillRect(pad + labelGutter, y, len, barW);
+        ctx.fillStyle = theme.text;
+        ctx.fillText(String(b.label || ''), pad, y + barW * 0.75);
+      } catch {}
+    } else {
+      const x = pad + i * slot + (slot - barW) / 2;
+      const len = (v / scale) * innerH;
+      try {
+        ctx.fillStyle = theme.bg;
+        ctx.fillRect(x, pad, barW, innerH);
+        ctx.fillStyle = color;
+        ctx.fillRect(x, pad + (innerH - len), barW, len);
+        ctx.fillStyle = theme.text;
+        ctx.fillText(String(b.label || '').slice(0, 8), x, H - pad);
+      } catch {}
+    }
+  }
+}
+
+/**
+ * progressBar(div, data)
+ *   data: { current: number, limit: number | null, label?: string, warning?: boolean }
+ *
+ * Mutates `div` in place. Renders an "unlimited" placeholder when limit is
+ * null. Applies a warning class when `warning` is truthy.
+ */
+export function progressBar(div, data = {}) {
+  if (!div) return;
+  const theme = _readTheme(div);
+  const cur = Math.max(0, _safeNum(data.current, 0));
+  const lim = (data.limit === null || data.limit === undefined) ? null : _safeNum(data.limit, null);
+  const label = typeof data.label === 'string' ? data.label : '';
+  const warn = Boolean(data.warning);
+
+  // Clear children.
+  try {
+    while (div.firstChild) div.removeChild(div.firstChild);
+  } catch {
+    // Some test mocks omit firstChild/removeChild. Skip cleanup.
+  }
+
+  const setClass = (extra) => {
+    try {
+      div.className = ['ijfw-progress', extra, warn ? 'ijfw-progress--warn' : '']
+        .filter(Boolean).join(' ');
+    } catch {}
+  };
+
+  // Helper to create child elements safely.
+  function appendEl(tag, opts) {
+    try {
+      if (typeof div.ownerDocument === 'object' && div.ownerDocument && typeof div.ownerDocument.createElement === 'function') {
+        const el = div.ownerDocument.createElement(tag);
+        if (opts && opts.text) el.textContent = opts.text;
+        if (opts && opts.style) el.setAttribute('style', opts.style);
+        if (opts && opts.cls) el.className = opts.cls;
+        if (typeof div.appendChild === 'function') div.appendChild(el);
+        return el;
+      }
+    } catch {}
+    return null;
+  }
+
+  if (lim === null) {
+    setClass('ijfw-progress--unlimited');
+    appendEl('span', { cls: 'ijfw-progress-label', text: label });
+    appendEl('span', { cls: 'ijfw-progress-val',   text: cur + ' / unlimited' });
+    return;
+  }
+
+  setClass('');
+  const denom = lim > 0 ? lim : 1;
+  const pct = Math.max(0, Math.min(100, (cur / denom) * 100));
+  appendEl('span', { cls: 'ijfw-progress-label', text: label });
+  const rail = appendEl('span', { cls: 'ijfw-progress-rail', style: 'background:' + theme.bg + ';display:inline-block;height:6px;width:120px;border-radius:3px;overflow:hidden;vertical-align:middle;margin:0 6px' });
+  if (rail) {
+    try {
+      const fill = (rail.ownerDocument || div.ownerDocument).createElement('span');
+      fill.className = 'ijfw-progress-fill';
+      fill.setAttribute('style', 'display:block;height:100%;width:' + pct.toFixed(1) + '%;background:' + (warn ? theme.warning : theme.fg));
+      rail.appendChild(fill);
+    } catch {}
+  }
+  appendEl('span', { cls: 'ijfw-progress-val', text: cur + ' / ' + lim });
+}

package/src/dashboard-client.html

@@ -143,6 +143,15 @@ tr:hover td{background:var(--surface)}
 .empty{text-align:center;padding:40px 20px;color:var(--fg-dim)}
 .empty-icon{font-size:32px;margin-bottom:10px;opacity:.4}
 
+/* Extension events */
+.evt-row{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);align-items:flex-start}
+.evt-row:last-child{border-bottom:none}
+.evt-ts{color:var(--fg-dim);white-space:nowrap;font-size:11px;min-width:80px}
+.evt-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700;white-space:nowrap}
+.evt-allow{background:rgba(46,204,113,0.15);color:var(--success)}
+.evt-deny{background:rgba(239,68,68,0.15);color:var(--danger)}
+.evt-body{flex:1;color:var(--fg);font-size:11px;word-break:break-all}
+
 /* Memory tree */
 .mem-layout{display:flex;gap:0;height:calc(100vh - 180px);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
 .mem-l{width:300px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--bg-elevated)}
@@ -563,8 +572,9 @@ tr:hover td{background:var(--surface)}
       </div>
     </div>
 
-    <!-- ======== EXTENSIONS (W3/t15) ======== -->
+    <!-- ======== EXTENSIONS (W3/t15 + B9) ======== -->
     <div class="section" data-section="extensions">
+      <!-- Sub-section: Installed -->
       <div class="card">
         <div class="ctitle"><span id="ext-count">Extensions</span></div>
         <div id="extensions-content">
@@ -574,6 +584,60 @@ tr:hover td{background:var(--surface)}
           </div>
         </div>
       </div>
+
+      <!-- Sub-section: Active extension -->
+      <div class="card">
+        <div class="ctitle">Active Extension</div>
+        <div id="ext-active-content">
+          <div class="empty"><p style="font-size:13px">Loading...</p></div>
+        </div>
+      </div>
+
+      <!-- Sub-section: Charts (B19) -->
+      <div class="card">
+        <div class="ctitle">Audit Charts</div>
+        <div id="ext-charts-content">
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px">
+            <div>
+              <div style="color:var(--fg-dim);margin-bottom:4px">Events / hour (24h)</div>
+              <canvas id="ext-chart-hourly" width="320" height="80" style="width:100%;height:80px;display:block"></canvas>
+            </div>
+            <div>
+              <div style="color:var(--fg-dim);margin-bottom:4px">Deny rate by extension</div>
+              <canvas id="ext-chart-byext" width="320" height="80" style="width:100%;height:80px;display:block"></canvas>
+            </div>
+            <div>
+              <div style="color:var(--fg-dim);margin-bottom:4px">Top denied tools</div>
+              <canvas id="ext-chart-bytool" width="320" height="120" style="width:100%;height:120px;display:block"></canvas>
+            </div>
+            <div>
+              <div style="color:var(--fg-dim);margin-bottom:4px">Quota usage</div>
+              <div id="ext-chart-quotas" style="display:flex;flex-direction:column;gap:6px"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sub-section: Permission events -->
+      <div class="card">
+        <div class="ctitle" style="justify-content:space-between">
+          <span>Permission Events <span id="ext-events-live" style="display:none"><span class="pulse"></span></span></span>
+          <span style="display:flex;gap:8px;align-items:center">
+            <select id="ext-evt-filter-ext" class="btn-g" style="padding:3px 8px;font-size:11px" aria-label="Filter by extension">
+              <option value="">All extensions</option>
+            </select>
+            <select id="ext-evt-filter-denied" class="btn-g" style="padding:3px 8px;font-size:11px" aria-label="Filter by outcome">
+              <option value="">All outcomes</option>
+              <option value="true">Denied only</option>
+              <option value="false">Allowed only</option>
+            </select>
+            <button class="btn-g" id="ext-evt-clear" style="font-size:11px" aria-label="Clear events">Clear</button>
+          </span>
+        </div>
+        <div id="ext-events-content" style="max-height:320px;overflow-y:auto;font-size:12px;font-family:ui-monospace,monospace">
+          <div class="empty"><p>No permission events yet.</p></div>
+        </div>
+      </div>
     </div>
 
     <!-- ======== SUBSCRIPTIONS ======== -->
@@ -1303,6 +1367,174 @@ async function loadExtensions() {
   }
 }
 
+// ====== ACTIVE EXTENSION LOADER (B9) ======
+async function loadExtensionActive() {
+  var el = document.getElementById('ext-active-content');
+  if (!el) return;
+  try {
+    var r = await fetch('/api/extensions/active');
+    var d = await r.json();
+    while (el.firstChild) el.removeChild(el.firstChild);
+    if (!d.active) {
+      var p = document.createElement('p');
+      p.setAttribute('style', 'font-size:13px;color:var(--fg-dim);padding:4px 0');
+      p.textContent = 'None — bundled IJFW context active';
+      el.appendChild(p);
+      return;
+    }
+    var a = d.active;
+    var wrap = document.createElement('div');
+    wrap.setAttribute('style', 'font-size:13px');
+    var nameRow = document.createElement('div');
+    nameRow.setAttribute('style', 'margin-bottom:6px');
+    var strong = document.createElement('strong');
+    strong.textContent = a.name || 'unknown';
+    nameRow.appendChild(strong);
+    if (a.scope) {
+      var sc = document.createElement('span');
+      sc.setAttribute('style', 'margin-left:8px;font-size:11px;color:var(--fg-dim)');
+      sc.textContent = '(' + a.scope + ')';
+      nameRow.appendChild(sc);
+    }
+    wrap.appendChild(nameRow);
+    if (a.permissions) {
+      var permsEl = document.createElement('div');
+      permsEl.setAttribute('style', 'font-size:12px;color:var(--fg-dim)');
+      var reads = (a.permissions.reads || []).join(', ') || 'none';
+      var writes = (a.permissions.writes || []).join(', ') || 'none';
+      permsEl.innerHTML = '<b style="color:var(--fg)">reads:</b> ' + reads + ' &nbsp; <b style="color:var(--fg)">writes:</b> ' + writes;
+      wrap.appendChild(permsEl);
+    }
+    el.appendChild(wrap);
+  } catch (err) {
+    if (el) { while (el.firstChild) el.removeChild(el.firstChild); }
+    var errP = document.createElement('p');
+    errP.setAttribute('style', 'font-size:12px;color:var(--fg-dim)');
+    errP.textContent = 'Could not load active extension state.';
+    if (el) el.appendChild(errP);
+  }
+}
+
+// ====== PERMISSION EVENTS LOADER (B9) ======
+var _evtSource = null;
+var _evtRows = [];
+var _evtExtensions = new Set();
+
+function _renderEvtRows() {
+  var el = document.getElementById('ext-events-content');
+  if (!el) return;
+  var filterExt = (document.getElementById('ext-evt-filter-ext') || {}).value || '';
+  var filterDenied = (document.getElementById('ext-evt-filter-denied') || {}).value || '';
+  var visible = _evtRows.filter(function(e) {
+    if (filterExt && e.extension !== filterExt) return false;
+    if (filterDenied === 'true' && e.allowed !== false) return false;
+    if (filterDenied === 'false' && e.allowed === false) return false;
+    return true;
+  });
+  while (el.firstChild) el.removeChild(el.firstChild);
+  if (visible.length === 0) {
+    var empty = document.createElement('div');
+    empty.className = 'empty';
+    var ep = document.createElement('p');
+    ep.textContent = 'No permission events match the current filters.';
+    empty.appendChild(ep);
+    el.appendChild(empty);
+    return;
+  }
+  var frag = document.createDocumentFragment();
+  visible.slice(-200).forEach(function(e) {
+    var row = document.createElement('div');
+    row.className = 'evt-row';
+    var ts = document.createElement('span');
+    ts.className = 'evt-ts';
+    ts.textContent = e.ts ? new Date(e.ts).toLocaleTimeString() : '';
+    row.appendChild(ts);
+    var badge = document.createElement('span');
+    badge.className = 'evt-badge ' + (e.allowed === false ? 'evt-deny' : 'evt-allow');
+    badge.textContent = e.allowed === false ? 'DENY' : 'ALLOW';
+    row.appendChild(badge);
+    var body = document.createElement('span');
+    body.className = 'evt-body';
+    body.textContent = (e.extension || '') + ' → ' + (e.tool || e.action || '') + (e.target ? ':' + e.target : '');
+    row.appendChild(body);
+    frag.appendChild(row);
+  });
+  el.appendChild(frag);
+  el.scrollTop = el.scrollHeight;
+}
+
+function _addEvtRow(obj) {
+  _evtRows.push(obj);
+  if (obj.extension) {
+    _evtExtensions.add(obj.extension);
+    // Rebuild extension filter options
+    var sel = document.getElementById('ext-evt-filter-ext');
+    if (sel) {
+      var existing = new Set(Array.from(sel.options).map(function(o) { return o.value; }));
+      _evtExtensions.forEach(function(name) {
+        if (!existing.has(name)) {
+          var opt = document.createElement('option');
+          opt.value = name; opt.textContent = name;
+          sel.appendChild(opt);
+        }
+      });
+    }
+  }
+}
+
+function loadExtensionEvents() {
+  var liveEl = document.getElementById('ext-events-live');
+
+  // Close any previous SSE connection.
+  if (_evtSource) { try { _evtSource.close(); } catch {} _evtSource = null; }
+  if (liveEl) liveEl.style.display = 'none';
+
+  // Pre-load current tail via JSON (no SSE until section is active).
+  fetch('/api/extensions/events?limit=200')
+    .then(function(r) { return r.json(); })
+    .then(function(arr) {
+      if (!Array.isArray(arr)) return;
+      _evtRows = [];
+      arr.forEach(_addEvtRow);
+      _renderEvtRows();
+      // Open SSE for live updates.
+      try {
+        _evtSource = new EventSource('/api/extensions/events?limit=1');
+        _evtSource.onopen = function() { if (liveEl) liveEl.style.display = ''; };
+        _evtSource.onmessage = function(e) {
+          try {
+            var obj = JSON.parse(e.data);
+            if (obj && typeof obj === 'object' && !obj.showing) {
+              _addEvtRow(obj);
+              _renderEvtRows();
+            }
+          } catch {}
+        };
+        _evtSource.onerror = function() { if (liveEl) liveEl.style.display = 'none'; };
+      } catch {}
+    })
+    .catch(function() {
+      var el = document.getElementById('ext-events-content');
+      if (!el) return;
+      while (el.firstChild) el.removeChild(el.firstChild);
+      var p = document.createElement('p');
+      p.setAttribute('style', 'font-size:12px;color:var(--fg-dim);padding:8px 0');
+      p.textContent = 'Permission events unavailable.';
+      el.appendChild(p);
+    });
+
+  // Wire filter controls.
+  var filterExt = document.getElementById('ext-evt-filter-ext');
+  var filterDenied = document.getElementById('ext-evt-filter-denied');
+  var clearBtn = document.getElementById('ext-evt-clear');
+  if (filterExt) filterExt.onchange = _renderEvtRows;
+  if (filterDenied) filterDenied.onchange = _renderEvtRows;
+  if (clearBtn) clearBtn.onclick = function() {
+    _evtRows = [];
+    _renderEvtRows();
+  };
+}
+
 // ====== RUN ALL LOADERS ======
 document.addEventListener('DOMContentLoaded', function() {
   loadCostToday();
@@ -1317,7 +1549,185 @@ document.addEventListener('DOMContentLoaded', function() {
   loadTrendSparkline();
   loadBlockUsage();
   loadExtensions();
+  loadExtensionActive();
+  loadExtensionEvents();
+  loadExtensionCharts();
 });
+
+// ====== AUDIT CHARTS (B19) ======
+// Inlined to keep dashboard a single self-contained HTML file.
+
+function _ijfwChartTheme(el) {
+  var fg = '#9ad2ff', bg = 'rgba(154,210,255,0.18)', warn = '#ff9b3a', txt = '#cfd6dd';
+  try {
+    var cs = getComputedStyle(el);
+    fg   = (cs.getPropertyValue('--ijfw-chart-fg')      || '').trim() || fg;
+    bg   = (cs.getPropertyValue('--ijfw-chart-bg')      || '').trim() || bg;
+    warn = (cs.getPropertyValue('--ijfw-chart-warning') || '').trim() || warn;
+    txt  = (cs.getPropertyValue('--ijfw-chart-text')    || '').trim() || txt;
+  } catch (e) {}
+  return { fg: fg, bg: bg, warn: warn, text: txt };
+}
+
+function _ijfwLineChart(canvas, points) {
+  if (!canvas || !canvas.getContext) return;
+  var ctx = canvas.getContext('2d');
+  var W = canvas.width, H = canvas.height;
+  var theme = _ijfwChartTheme(canvas);
+  ctx.clearRect(0, 0, W, H);
+  if (!points || !points.length) return;
+  var xs = points.map(function(p){ return p.x; });
+  var ys = points.map(function(p){ return Math.max(0, p.y); });
+  var xMin = Math.min.apply(null, xs), xMax = Math.max.apply(null, xs);
+  if (xMax === xMin) xMax = xMin + 1;
+  var yMax = Math.max(1, Math.max.apply(null, ys));
+  var pad = 4, innerW = W - pad*2, innerH = H - pad*2;
+  function px(x){ return pad + ((x - xMin)/(xMax - xMin)) * innerW; }
+  function py(y){ return pad + (1 - (y / yMax)) * innerH; }
+  ctx.beginPath(); ctx.moveTo(px(points[0].x), H - pad);
+  for (var i = 0; i < points.length; i++) ctx.lineTo(px(points[i].x), py(points[i].y));
+  ctx.lineTo(px(points[points.length-1].x), H - pad);
+  ctx.closePath(); ctx.fillStyle = theme.bg; ctx.fill();
+  ctx.beginPath(); ctx.moveTo(px(points[0].x), py(points[0].y));
+  for (var j = 1; j < points.length; j++) ctx.lineTo(px(points[j].x), py(points[j].y));
+  ctx.strokeStyle = theme.fg; ctx.lineWidth = 1.5; ctx.stroke();
+}
+
+function _ijfwBarChart(canvas, bars, horizontal) {
+  if (!canvas || !canvas.getContext) return;
+  var ctx = canvas.getContext('2d');
+  var W = canvas.width, H = canvas.height;
+  var theme = _ijfwChartTheme(canvas);
+  ctx.clearRect(0, 0, W, H);
+  if (!bars || !bars.length) return;
+  var values = bars.map(function(b){ return Math.max(0, b.value || 0); });
+  var maxVal = Math.max(1, Math.max.apply(null, values));
+  var pad = 4;
+  var labelGutter = horizontal ? 80 : 14;
+  var innerW = W - pad*2 - (horizontal ? labelGutter : 0);
+  var innerH = H - pad*2 - (horizontal ? 0 : labelGutter);
+  var slot = (horizontal ? innerH : innerW) / bars.length;
+  var barW = Math.max(1, slot * 0.7);
+  for (var i = 0; i < bars.length; i++) {
+    var v = values[i];
+    var color = bars[i].color || theme.fg;
+    if (horizontal) {
+      var y = pad + i*slot + (slot-barW)/2;
+      var len = (v/maxVal) * innerW;
+      ctx.fillStyle = theme.bg; ctx.fillRect(pad + labelGutter, y, innerW, barW);
+      ctx.fillStyle = color;    ctx.fillRect(pad + labelGutter, y, len,    barW);
+      ctx.fillStyle = theme.text; ctx.fillText(String(bars[i].label || ''), pad, y + barW*0.75);
+    } else {
+      var x = pad + i*slot + (slot-barW)/2;
+      var len2 = (v/maxVal) * innerH;
+      ctx.fillStyle = theme.bg; ctx.fillRect(x, pad, barW, innerH);
+      ctx.fillStyle = color;    ctx.fillRect(x, pad + (innerH - len2), barW, len2);
+      ctx.fillStyle = theme.text; ctx.fillText(String(bars[i].label || '').slice(0, 8), x, H - pad);
+    }
+  }
+}
+
+function _ijfwProgressBar(parent, data) {
+  if (!parent) return;
+  var theme = _ijfwChartTheme(parent);
+  var cur = Math.max(0, data.current || 0);
+  var lim = (data.limit === null || data.limit === undefined) ? null : data.limit;
+  var label = data.label || '';
+  var warn = Boolean(data.warning);
+  var row = document.createElement('div');
+  row.className = 'ijfw-progress' + (warn ? ' ijfw-progress--warn' : '');
+  row.setAttribute('style', 'display:flex;align-items:center;gap:6px;font-size:11px');
+  var lbl = document.createElement('span'); lbl.textContent = label; lbl.setAttribute('style','min-width:88px;color:var(--fg-dim)');
+  row.appendChild(lbl);
+  if (lim === null) {
+    var val = document.createElement('span'); val.textContent = cur + ' / unlimited';
+    val.setAttribute('style','color:var(--fg-dim)');
+    row.appendChild(val);
+  } else {
+    var rail = document.createElement('span');
+    rail.setAttribute('style', 'background:' + theme.bg + ';display:inline-block;height:6px;width:120px;border-radius:3px;overflow:hidden;vertical-align:middle');
+    var fill = document.createElement('span');
+    var pct = lim > 0 ? Math.min(100, (cur/lim)*100) : 0;
+    fill.setAttribute('style', 'display:block;height:100%;width:' + pct.toFixed(1) + '%;background:' + (warn ? theme.warn : theme.fg));
+    rail.appendChild(fill);
+    row.appendChild(rail);
+    var val2 = document.createElement('span'); val2.textContent = cur + ' / ' + lim;
+    row.appendChild(val2);
+  }
+  parent.appendChild(row);
+}
+
+function loadExtensionCharts() {
+  // Hourly line chart.
+  fetch('/api/extensions/aggregates?window=24h&kind=hourly')
+    .then(function(r){ return r.json(); })
+    .then(function(o){
+      var canvas = document.getElementById('ext-chart-hourly');
+      if (!canvas) return;
+      var buckets = (o && o.buckets) || [];
+      var points = buckets.map(function(b, i){ return { x: i, y: b.count }; });
+      _ijfwLineChart(canvas, points);
+    }).catch(function(){});
+
+  // Deny rate per extension (horizontal bar).
+  fetch('/api/extensions/aggregates?window=24h&kind=by_ext')
+    .then(function(r){ return r.json(); })
+    .then(function(o){
+      var canvas = document.getElementById('ext-chart-byext');
+      if (!canvas) return;
+      var rows = (o && o.rows) || [];
+      var bars = rows.slice(0, 8).map(function(r){
+        var total = (r.allowed||0) + (r.denied||0);
+        return { label: r.ext, value: total > 0 ? (r.denied/total) * 100 : 0 };
+      });
+      _ijfwBarChart(canvas, bars, true);
+    }).catch(function(){});
+
+  // Top denied tools.
+  fetch('/api/extensions/aggregates?window=24h&kind=by_tool')
+    .then(function(r){ return r.json(); })
+    .then(function(o){
+      var canvas = document.getElementById('ext-chart-bytool');
+      if (!canvas) return;
+      var rows = (o && o.rows) || [];
+      var bars = rows.map(function(r){ return { label: r.tool, value: r.count }; });
+      _ijfwBarChart(canvas, bars, true);
+    }).catch(function(){});
+
+  // Quotas: per-extension progress bars + bash-bypass warning chip.
+  fetch('/api/extensions/aggregates?window=24h&kind=quotas')
+    .then(function(r){ return r.json(); })
+    .then(function(o){
+      var parent = document.getElementById('ext-chart-quotas');
+      if (!parent) return;
+      while (parent.firstChild) parent.removeChild(parent.firstChild);
+      var rows = (o && o.rows) || [];
+      if (rows.length === 0) {
+        var empty = document.createElement('div');
+        empty.setAttribute('style','color:var(--fg-dim);font-size:12px');
+        empty.textContent = 'No active extension.';
+        parent.appendChild(empty);
+        return;
+      }
+      rows.forEach(function(row){
+        var header = document.createElement('div');
+        header.setAttribute('style','font-weight:600;font-size:12px;margin-top:4px');
+        header.textContent = row.ext_name + ' (' + (row.scope || 'user') + ')';
+        parent.appendChild(header);
+        if (row.warn_bash_bypass) {
+          var chip = document.createElement('div');
+          chip.className = 'ijfw-warn-chip';
+          chip.setAttribute('style','background:rgba(255,155,58,0.12);color:var(--ijfw-chart-warning,#ff9b3a);font-size:11px;padding:4px 8px;border-radius:4px;margin:4px 0');
+          chip.textContent = '⚠ This extension has tool:bash and a strict files_written quota. Bash content bypasses per-file accounting.';
+          parent.appendChild(chip);
+        }
+        var dims = row.dimensions || {};
+        _ijfwProgressBar(parent, { current: (dims.files_written||{}).current||0, limit: (dims.files_written||{}).limit, label: 'files_written', warning: row.warn_bash_bypass });
+        _ijfwProgressBar(parent, { current: (dims.bytes_written||{}).current||0, limit: (dims.bytes_written||{}).limit, label: 'bytes_written', warning: row.warn_bash_bypass });
+        _ijfwProgressBar(parent, { current: (dims.wall_clock_ms||{}).current||0, limit: (dims.wall_clock_ms||{}).limit, label: 'wall_clock_ms' });
+      });
+    }).catch(function(){});
+}
 </script>
 </body>
 </html>