From 9ee22adf0e4a6f62cca2310735da80dc27769b7a Mon Sep 17 00:00:00 2001
From: anushkagupta200615-jpg <anushkagupta200615@gmail.com>
Date: Thu, 25 Jun 2026 00:59:00 +0530
Subject: [PATCH] feat: Add 5C Dashboard prototype for #291

---
 5c-dashboard/app.js            |  685 ++++++++++++++++
 5c-dashboard/data/mock-data.js |  202 +++++
 5c-dashboard/index.css         | 1393 ++++++++++++++++++++++++++++++++
 5c-dashboard/index.html        |  273 +++++++
 4 files changed, 2553 insertions(+)
 create mode 100644 5c-dashboard/app.js
 create mode 100644 5c-dashboard/data/mock-data.js
 create mode 100644 5c-dashboard/index.css
 create mode 100644 5c-dashboard/index.html

diff --git a/5c-dashboard/app.js b/5c-dashboard/app.js
new file mode 100644
index 0000000..b4144f8
--- /dev/null
+++ b/5c-dashboard/app.js
@@ -0,0 +1,685 @@
+/**
+ * 5C: Continuous Code Compliance Control Center
+ * Main Application Logic
+ */
+
+const App = (() => {
+  'use strict';
+
+  // ──────────────────────────────────────────────
+  // SVG Icons (inline for zero dependencies)
+  // ──────────────────────────────────────────────
+  const Icons = {
+    dashboard: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>`,
+    vulnerability: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
+    license: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>`,
+    policy: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`,
+    events: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>`,
+    products: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>`,
+    package: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>`,
+    'shield-check': `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>`,
+    'alert-triangle': `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
+    'file-check': `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M9 15l2 2 4-4"/></svg>`,
+    'alert-circle': `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
+    gauge: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/><path d="M12 6v6l4 2"/></svg>`,
+    close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
+    menu: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>`,
+    trendUp: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>`,
+    trendDown: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>`,
+    download: `<svg 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>`,
+    refresh: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>`,
+    barChart: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>`,
+    pieChart: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>`,
+  };
+
+  function icon(name, className = '') {
+    return `<span class="${className}">${Icons[name] || ''}</span>`;
+  }
+
+  // ──────────────────────────────────────────────
+  // Utility Helpers
+  // ──────────────────────────────────────────────
+  function formatNumber(n) {
+    if (typeof n === 'string') return n;
+    return n >= 1000 ? n.toLocaleString() : n.toString();
+  }
+
+  function timeAgo(isoString) {
+    const now = new Date();
+    const date = new Date(isoString);
+    const diffMs = now - date;
+    const diffMin = Math.floor(diffMs / 60000);
+    const diffHr = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffMin < 1) return 'just now';
+    if (diffMin < 60) return `${diffMin}m ago`;
+    if (diffHr < 24) return `${diffHr}h ago`;
+    return `${diffDay}d ago`;
+  }
+
+  function $(selector) {
+    return document.querySelector(selector);
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: KCI Cards
+  // ──────────────────────────────────────────────
+  function renderKCICards() {
+    const container = $('#kci-grid');
+    if (!container) return;
+
+    const data = MockData.kciData;
+    let html = '';
+    let delay = 1;
+
+    for (const [key, kci] of Object.entries(data)) {
+      const trendClass = kci.trend > 0 ? 'positive' : kci.trend < 0 ? 'negative' : 'neutral';
+      const trendIcon = kci.trend > 0 ? '↑' : kci.trend < 0 ? '↓' : '—';
+      const trendText = kci.trend !== 0 ? `${trendIcon} ${Math.abs(kci.trend)}${kci.unit === '%' ? '%' : ''}` : '—';
+
+      let valueHtml;
+      if (key === 'riskLevel') {
+        const riskClass = kci.value.toLowerCase();
+        valueHtml = `<span class="risk-badge risk-${riskClass}">${kci.value}</span>`;
+      } else {
+        valueHtml = `<span class="kci-card-value">${formatNumber(kci.value)}<span class="kci-unit">${kci.unit}</span></span>`;
+      }
+
+      html += `
+        <div class="kci-card animate-in animate-in-delay-${delay}" data-kci="${key}">
+          <div class="kci-card-header">
+            <div class="kci-card-icon">${icon(kci.icon, 'nav-icon')}</div>
+            <span class="kci-trend ${trendClass}">${trendText}</span>
+          </div>
+          ${valueHtml}
+          <div class="kci-card-label">${kci.label}</div>
+          <div class="kci-card-description">${kci.description}</div>
+        </div>
+      `;
+      delay = Math.min(delay + 1, 6);
+    }
+
+    container.innerHTML = html;
+
+    // Attach click handlers for drill-down
+    container.querySelectorAll('.kci-card').forEach(card => {
+      card.addEventListener('click', () => {
+        const key = card.dataset.kci;
+        openDetailPanel('kci', key);
+      });
+    });
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: Vulnerability Severity Bars
+  // ──────────────────────────────────────────────
+  function renderVulnerabilityBars() {
+    const container = $('#vuln-severity-bars');
+    if (!container) return;
+
+    const data = MockData.vulnerabilitySummary;
+    const maxCount = Math.max(...Object.values(data).map(d => d.count));
+    let html = '';
+
+    for (const [severity, info] of Object.entries(data)) {
+      if (severity === 'none') continue;
+      const percent = (info.count / maxCount) * 100;
+      const trendClass = info.trend > 0 ? 'negative' : 'positive';
+      const trendIcon = info.trend > 0 ? '↑' : '↓';
+
+      html += `
+        <div class="severity-bar-row">
+          <span class="severity-label ${severity}">${severity}</span>
+          <div class="severity-bar-track">
+            <div class="severity-bar-fill ${severity}" style="width: 0%" data-target-width="${percent}"></div>
+          </div>
+          <span class="severity-count">${info.count}</span>
+          <span class="severity-trend ${trendClass}">${trendIcon}${Math.abs(info.trend)}</span>
+        </div>
+      `;
+    }
+
+    container.innerHTML = html;
+
+    // Animate bars
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        container.querySelectorAll('.severity-bar-fill').forEach(bar => {
+          bar.style.width = bar.dataset.targetWidth + '%';
+        });
+      }, 300);
+    });
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: License Donut Chart (SVG)
+  // ──────────────────────────────────────────────
+  function renderLicenseDonut() {
+    const container = $('#license-donut');
+    if (!container) return;
+
+    const data = MockData.licenseCategoryBreakdown;
+    const categories = Object.entries(data);
+    const total = categories.reduce((sum, [, v]) => sum + v.count, 0);
+
+    // Build SVG donut
+    const cx = 90, cy = 90, r = 70, strokeWidth = 24;
+    const circumference = 2 * Math.PI * r;
+    let offset = 0;
+    let arcs = '';
+
+    for (const [name, info] of categories) {
+      const pct = info.count / total;
+      const dashLength = pct * circumference;
+      arcs += `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${info.color}" stroke-width="${strokeWidth}" stroke-dasharray="${dashLength} ${circumference - dashLength}" stroke-dashoffset="${-offset}" transform="rotate(-90 ${cx} ${cy})" style="transition: stroke-dashoffset 1s ease;"/>`;
+      offset += dashLength;
+    }
+
+    // Legend
+    let legendHtml = '';
+    for (const [name, info] of categories) {
+      legendHtml += `
+        <div class="legend-item">
+          <span class="legend-dot" style="background:${info.color}"></span>
+          <span>${name.replace('-', ' ')}</span>
+          <span class="legend-value">${info.percentage}%</span>
+        </div>
+      `;
+    }
+
+    container.innerHTML = `
+      <div class="donut-chart-wrapper">
+        <svg class="donut-chart-svg" viewBox="0 0 180 180">
+          ${arcs}
+          <text class="donut-center-text" x="${cx}" y="${cy - 6}" text-anchor="middle" dominant-baseline="middle">
+            <tspan class="donut-center-value">${total.toLocaleString()}</tspan>
+          </text>
+          <text class="donut-center-text donut-center-label" x="${cx}" y="${cy + 16}" text-anchor="middle" dominant-baseline="middle">
+            Packages
+          </text>
+        </svg>
+        <div class="chart-legend">${legendHtml}</div>
+      </div>
+    `;
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: Ecosystem Breakdown Bar Chart (SVG)
+  // ──────────────────────────────────────────────
+  function renderEcosystemChart() {
+    const container = $('#ecosystem-chart');
+    if (!container) return;
+
+    const data = MockData.ecosystemBreakdown;
+    const maxPct = Math.max(...data.map(d => d.percentage));
+    let html = '<div class="severity-bars">';
+
+    for (const eco of data) {
+      const barPct = (eco.percentage / maxPct) * 100;
+      html += `
+        <div class="severity-bar-row">
+          <span class="severity-label" style="color:${eco.color};width:50px;font-size:0.75rem">${eco.ecosystem}</span>
+          <div class="severity-bar-track">
+            <div class="severity-bar-fill" style="width:0%;background:${eco.color}" data-target-width="${barPct}"></div>
+          </div>
+          <span class="severity-count">${eco.count.toLocaleString()}</span>
+          <span class="severity-trend neutral" style="color:var(--text-muted)">${eco.percentage}%</span>
+        </div>
+      `;
+    }
+
+    html += '</div>';
+    container.innerHTML = html;
+
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        container.querySelectorAll('.severity-bar-fill').forEach(bar => {
+          bar.style.width = bar.dataset.targetWidth + '%';
+        });
+      }, 500);
+    });
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: Compliance Trend Sparkline (SVG)
+  // ──────────────────────────────────────────────
+  function renderTrendSparkline() {
+    const container = $('#compliance-trend');
+    if (!container) return;
+
+    const data = MockData.trendData.compliance;
+    const labels = MockData.trendData.labels;
+    const w = 500, h = 80, padding = 2;
+    const min = Math.min(...data) - 1;
+    const max = Math.max(...data) + 1;
+
+    const points = data.map((v, i) => {
+      const x = padding + (i / (data.length - 1)) * (w - padding * 2);
+      const y = h - padding - ((v - min) / (max - min)) * (h - padding * 2);
+      return `${x},${y}`;
+    });
+
+    const polyline = points.join(' ');
+    const areaPoints = `${padding},${h - padding} ${polyline} ${w - padding},${h - padding}`;
+
+    container.innerHTML = `
+      <div class="sparkline-container">
+        <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none">
+          <defs>
+            <linearGradient id="sparkGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="rgba(99,102,241,0.3)"/>
+              <stop offset="100%" stop-color="rgba(99,102,241,0)"/>
+            </linearGradient>
+          </defs>
+          <polygon points="${areaPoints}" fill="url(#sparkGradient)"/>
+          <polyline points="${polyline}" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <circle cx="${points[points.length - 1].split(',')[0]}" cy="${points[points.length - 1].split(',')[1]}" r="3" fill="#6366f1"/>
+        </svg>
+      </div>
+      <div style="display:flex;justify-content:space-between;font-size:0.65rem;color:var(--text-muted);margin-top:4px;font-family:var(--font-mono)">
+        <span>${labels[0]}</span>
+        <span>License Compliance Rate (30d)</span>
+        <span>${labels[labels.length - 1]}</span>
+      </div>
+    `;
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: Vulnerability Trend Sparkline
+  // ──────────────────────────────────────────────
+  function renderVulnTrend() {
+    const container = $('#vuln-trend');
+    if (!container) return;
+
+    const data = MockData.trendData.vulnerabilities;
+    const labels = MockData.trendData.labels;
+    const w = 500, h = 80, padding = 2;
+    const min = Math.min(...data) - 5;
+    const max = Math.max(...data) + 5;
+
+    const points = data.map((v, i) => {
+      const x = padding + (i / (data.length - 1)) * (w - padding * 2);
+      const y = h - padding - ((v - min) / (max - min)) * (h - padding * 2);
+      return `${x},${y}`;
+    });
+
+    const polyline = points.join(' ');
+    const areaPoints = `${padding},${h - padding} ${polyline} ${w - padding},${h - padding}`;
+
+    container.innerHTML = `
+      <div class="sparkline-container">
+        <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none">
+          <defs>
+            <linearGradient id="vulnGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="rgba(248,113,113,0.3)"/>
+              <stop offset="100%" stop-color="rgba(248,113,113,0)"/>
+            </linearGradient>
+          </defs>
+          <polygon points="${areaPoints}" fill="url(#vulnGradient)"/>
+          <polyline points="${polyline}" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <circle cx="${points[points.length - 1].split(',')[0]}" cy="${points[points.length - 1].split(',')[1]}" r="3" fill="#f87171"/>
+        </svg>
+      </div>
+      <div style="display:flex;justify-content:space-between;font-size:0.65rem;color:var(--text-muted);margin-top:4px;font-family:var(--font-mono)">
+        <span>${labels[0]}</span>
+        <span>Open Vulnerabilities (30d) ↓</span>
+        <span>${labels[labels.length - 1]}</span>
+      </div>
+    `;
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: Events Timeline
+  // ──────────────────────────────────────────────
+  let eventsFilter = 'all';
+
+  function renderEvents() {
+    const container = $('#events-list');
+    if (!container) return;
+
+    let filtered = MockData.events;
+    if (eventsFilter !== 'all') {
+      filtered = filtered.filter(e => e.type === eventsFilter);
+    }
+
+    if (filtered.length === 0) {
+      container.innerHTML = `<div class="empty-state"><p>No events matching this filter.</p></div>`;
+      return;
+    }
+
+    let html = '';
+    for (const event of filtered) {
+      html += `
+        <div class="event-item" data-event-id="${event.id}">
+          <div class="event-indicator">
+            <div class="event-dot ${event.severity}"></div>
+            <div class="event-line"></div>
+          </div>
+          <div class="event-content">
+            <div class="event-header">
+              <span class="event-title">${event.title}</span>
+              <span class="event-time">${timeAgo(event.timestamp)}</span>
+            </div>
+            <div class="event-details">${event.details}</div>
+            <div class="event-meta">
+              <span class="event-tag ${event.type}">${event.type}</span>
+              <span class="event-tag status-${event.status}">${event.status}</span>
+              <span style="font-size:0.7rem;color:var(--text-muted)">${event.source} · ${event.product}</span>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    container.innerHTML = html;
+
+    // Attach click for detail
+    container.querySelectorAll('.event-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const id = item.dataset.eventId;
+        openDetailPanel('event', id);
+      });
+    });
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: Policy Rules Table
+  // ──────────────────────────────────────────────
+  function renderPolicyRules() {
+    const container = $('#policy-rules-body');
+    if (!container) return;
+
+    let html = '';
+    for (const rule of MockData.policyRules) {
+      const unit = rule.unit || '';
+      const pct = Math.min((rule.current / rule.threshold) * 100, 150);
+      const barColor = rule.status === 'breach' ? 'var(--color-danger)' : 'var(--color-success)';
+
+      html += `
+        <tr>
+          <td><span class="policy-name">${rule.name}</span><br><span style="font-size:0.7rem;color:var(--text-muted)">${rule.description}</span></td>
+          <td><span class="event-tag ${rule.category}" style="background:var(--accent-primary-glow);color:var(--accent-primary)">${rule.category}</span></td>
+          <td>
+            <div class="policy-progress">
+              <div class="policy-progress-bar">
+                <div class="policy-progress-fill" style="width:${Math.min(pct, 100)}%;background:${barColor}"></div>
+              </div>
+              <span class="policy-progress-text">${rule.current}${unit} / ${rule.threshold}${unit}</span>
+            </div>
+          </td>
+          <td><span class="policy-status ${rule.status}">${rule.status === 'passing' ? '✓ Passing' : '✗ Breach'}</span></td>
+        </tr>
+      `;
+    }
+
+    container.innerHTML = html;
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: Products Overview
+  // ──────────────────────────────────────────────
+  function renderProducts() {
+    const container = $('#products-grid');
+    if (!container) return;
+
+    let html = `
+      <div class="product-row product-row-header">
+        <span>Product</span>
+        <span>Packages</span>
+        <span>Compliance</span>
+        <span>Vulnerabilities</span>
+        <span>Last Scan</span>
+        <span>Risk</span>
+      </div>
+    `;
+
+    for (const product of MockData.products) {
+      const compColor = product.compliance >= 95 ? 'var(--color-success)' : product.compliance >= 90 ? 'var(--color-warning)' : 'var(--color-danger)';
+
+      html += `
+        <div class="product-row" data-product="${product.name}">
+          <span class="product-name">${product.name}</span>
+          <span class="product-packages">${product.packages.toLocaleString()}</span>
+          <span class="product-compliance" style="color:${compColor}">${product.compliance}%</span>
+          <div class="product-vulns">
+            <span class="vuln-pill critical">C:${product.vulns.critical}</span>
+            <span class="vuln-pill high">H:${product.vulns.high}</span>
+            <span class="vuln-pill medium">M:${product.vulns.medium}</span>
+          </div>
+          <span class="product-scan">${product.lastScan}</span>
+          <span class="risk-indicator ${product.risk}">${product.risk}</span>
+        </div>
+      `;
+    }
+
+    container.innerHTML = html;
+
+    container.querySelectorAll('.product-row:not(.product-row-header)').forEach(row => {
+      row.addEventListener('click', () => {
+        openDetailPanel('product', row.dataset.product);
+      });
+    });
+  }
+
+  // ──────────────────────────────────────────────
+  // Render: Top Vulnerable Packages
+  // ──────────────────────────────────────────────
+  function renderTopVulnPackages() {
+    const container = $('#top-vuln-packages');
+    if (!container) return;
+
+    let html = '';
+    for (const pkg of MockData.topVulnerablePackages) {
+      const sevColor = pkg.severity === 'critical' ? 'var(--color-critical)' : pkg.severity === 'high' ? '#f97316' : '#eab308';
+
+      html += `
+        <div class="vuln-package-item">
+          <div>
+            <div class="vuln-package-name">${pkg.name}</div>
+            <div class="vuln-package-version">${pkg.version}</div>
+          </div>
+          <span class="vuln-package-ecosystem">${pkg.ecosystem}</span>
+          <span class="vuln-package-count" style="color:${sevColor}">${pkg.vulns} CVEs</span>
+          <span class="vuln-package-severity"><span class="vuln-pill ${pkg.severity}">${pkg.severity}</span></span>
+        </div>
+      `;
+    }
+
+    container.innerHTML = html;
+  }
+
+  // ──────────────────────────────────────────────
+  // Detail Panel (Drill-Down)
+  // ──────────────────────────────────────────────
+  function openDetailPanel(type, id) {
+    const overlay = $('#detail-overlay');
+    const panel = $('#detail-panel');
+    const title = $('#detail-panel-title');
+    const body = $('#detail-panel-body');
+
+    if (!overlay || !panel) return;
+
+    let html = '';
+
+    if (type === 'kci') {
+      const kci = MockData.kciData[id];
+      if (!kci) return;
+      title.textContent = kci.label;
+      html = `
+        <div class="detail-section">
+          <div class="detail-section-title">Current Value</div>
+          <div style="font-size:2.5rem;font-weight:800;margin-bottom:var(--space-md)">${formatNumber(kci.value)}<span style="font-size:1rem;color:var(--text-muted)">${kci.unit}</span></div>
+          <p style="color:var(--text-secondary);font-size:0.85rem">${kci.description}</p>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">Trend (30 Days)</div>
+          <div class="detail-field">
+            <span class="detail-field-label">Change</span>
+            <span class="detail-field-value" style="color:${kci.trend > 0 ? 'var(--color-success)' : kci.trend < 0 ? 'var(--color-danger)' : 'var(--text-muted)'}">
+              ${kci.trend > 0 ? '↑' : kci.trend < 0 ? '↓' : '—'} ${Math.abs(kci.trend)}${kci.unit === '%' ? '%' : ''}
+            </span>
+          </div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">Related Events</div>
+          <p style="color:var(--text-muted);font-size:0.8rem">Click events in the timeline below for more details.</p>
+        </div>
+      `;
+    } else if (type === 'event') {
+      const event = MockData.events.find(e => e.id === id);
+      if (!event) return;
+      title.textContent = event.title;
+      html = `
+        <div class="detail-section">
+          <div class="detail-section-title">Event Details</div>
+          <div class="detail-field"><span class="detail-field-label">ID</span><span class="detail-field-value">${event.id}</span></div>
+          <div class="detail-field"><span class="detail-field-label">Type</span><span class="detail-field-value">${event.type}</span></div>
+          <div class="detail-field"><span class="detail-field-label">Severity</span><span class="detail-field-value"><span class="vuln-pill ${event.severity}">${event.severity}</span></span></div>
+          <div class="detail-field"><span class="detail-field-label">Source</span><span class="detail-field-value">${event.source}</span></div>
+          <div class="detail-field"><span class="detail-field-label">Product</span><span class="detail-field-value">${event.product}</span></div>
+          <div class="detail-field"><span class="detail-field-label">Status</span><span class="detail-field-value"><span class="event-tag status-${event.status}">${event.status}</span></span></div>
+          <div class="detail-field"><span class="detail-field-label">Time</span><span class="detail-field-value">${new Date(event.timestamp).toLocaleString()}</span></div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">Description</div>
+          <p style="color:var(--text-secondary);font-size:0.85rem;line-height:1.7">${event.details}</p>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">Actions</div>
+          <div style="display:flex;gap:var(--space-sm);flex-wrap:wrap">
+            <button class="btn btn-primary">Acknowledge</button>
+            <button class="btn">Assign to Team</button>
+            <button class="btn">Create Ticket</button>
+            <button class="btn">${icon('download', 'nav-icon')} Export</button>
+          </div>
+        </div>
+      `;
+    } else if (type === 'product') {
+      const product = MockData.products.find(p => p.name === id);
+      if (!product) return;
+      title.textContent = product.name;
+      const compColor = product.compliance >= 95 ? 'var(--color-success)' : product.compliance >= 90 ? 'var(--color-warning)' : 'var(--color-danger)';
+      html = `
+        <div class="detail-section">
+          <div class="detail-section-title">Product Overview</div>
+          <div class="detail-field"><span class="detail-field-label">Total Packages</span><span class="detail-field-value">${product.packages.toLocaleString()}</span></div>
+          <div class="detail-field"><span class="detail-field-label">Compliance Rate</span><span class="detail-field-value" style="color:${compColor}">${product.compliance}%</span></div>
+          <div class="detail-field"><span class="detail-field-label">Last Scan</span><span class="detail-field-value">${product.lastScan}</span></div>
+          <div class="detail-field"><span class="detail-field-label">Risk Level</span><span class="detail-field-value"><span class="risk-indicator ${product.risk}">${product.risk}</span></span></div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">Vulnerability Breakdown</div>
+          <div class="detail-field"><span class="detail-field-label">Critical</span><span class="detail-field-value" style="color:var(--color-critical)">${product.vulns.critical}</span></div>
+          <div class="detail-field"><span class="detail-field-label">High</span><span class="detail-field-value" style="color:#f97316">${product.vulns.high}</span></div>
+          <div class="detail-field"><span class="detail-field-label">Medium</span><span class="detail-field-value" style="color:#eab308">${product.vulns.medium}</span></div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">Actions</div>
+          <div style="display:flex;gap:var(--space-sm);flex-wrap:wrap">
+            <button class="btn btn-primary">Run Full Scan</button>
+            <button class="btn">Generate SBOM</button>
+            <button class="btn">${icon('download', 'nav-icon')} Export Report</button>
+          </div>
+        </div>
+      `;
+    }
+
+    body.innerHTML = html;
+    overlay.classList.add('active');
+    panel.classList.add('active');
+  }
+
+  function closeDetailPanel() {
+    const overlay = $('#detail-overlay');
+    const panel = $('#detail-panel');
+    if (overlay) overlay.classList.remove('active');
+    if (panel) panel.classList.remove('active');
+  }
+
+  // ──────────────────────────────────────────────
+  // Navigation
+  // ──────────────────────────────────────────────
+  function initNavigation() {
+    document.querySelectorAll('.nav-item[data-section]').forEach(item => {
+      item.addEventListener('click', () => {
+        const section = item.dataset.section;
+        // Update active nav
+        document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+        item.classList.add('active');
+        // Scroll to section
+        const target = document.getElementById(section);
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+        // Close mobile menu
+        const sidebar = $('.sidebar');
+        if (sidebar) sidebar.classList.remove('open');
+      });
+    });
+  }
+
+  // ──────────────────────────────────────────────
+  // Event Filter Tabs
+  // ──────────────────────────────────────────────
+  function initEventFilters() {
+    document.querySelectorAll('.filter-btn[data-filter]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.filter-btn[data-filter]').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        eventsFilter = btn.dataset.filter;
+        renderEvents();
+      });
+    });
+  }
+
+  // ──────────────────────────────────────────────
+  // Mobile Menu Toggle
+  // ──────────────────────────────────────────────
+  function initMobileMenu() {
+    const btn = $('#mobile-menu-btn');
+    const sidebar = $('.sidebar');
+    if (btn && sidebar) {
+      btn.addEventListener('click', () => {
+        sidebar.classList.toggle('open');
+      });
+    }
+  }
+
+  // ──────────────────────────────────────────────
+  // Initialize App
+  // ──────────────────────────────────────────────
+  function init() {
+    renderKCICards();
+    renderVulnerabilityBars();
+    renderLicenseDonut();
+    renderEcosystemChart();
+    renderTrendSparkline();
+    renderVulnTrend();
+    renderEvents();
+    renderPolicyRules();
+    renderProducts();
+    renderTopVulnPackages();
+
+    initNavigation();
+    initEventFilters();
+    initMobileMenu();
+
+    // Detail panel close
+    const closeBtn = $('#detail-close-btn');
+    const overlay = $('#detail-overlay');
+    if (closeBtn) closeBtn.addEventListener('click', closeDetailPanel);
+    if (overlay) overlay.addEventListener('click', closeDetailPanel);
+
+    // Keyboard shortcut
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeDetailPanel();
+    });
+
+    console.log('5C Dashboard initialized ✓');
+  }
+
+  return { init };
+})();
+
+// Boot
+document.addEventListener('DOMContentLoaded', App.init);
diff --git a/5c-dashboard/data/mock-data.js b/5c-dashboard/data/mock-data.js
new file mode 100644
index 0000000..4c3b712
--- /dev/null
+++ b/5c-dashboard/data/mock-data.js
@@ -0,0 +1,202 @@
+/**
+ * 5C: Continuous Code Compliance Control Center
+ * Mock Data Module
+ * 
+ * Simulates realistic data from AboutCode tools:
+ * - ScanCode Toolkit (license/copyright detection)
+ * - VulnerableCode (vulnerability database)
+ * - DejaCode (compliance management)
+ * - PURLDB (package metadata)
+ */
+
+const MockData = (() => {
+
+  // ──────────────────────────────────────────────
+  // Key Compliance Indicators (KCIs)
+  // ──────────────────────────────────────────────
+  const kciData = {
+    totalPackages: {
+      label: 'Total Packages',
+      value: 12847,
+      trend: +3.2,
+      icon: 'package',
+      unit: '',
+      description: 'Packages monitored across all products'
+    },
+    licenseCompliance: {
+      label: 'License Compliance',
+      value: 94.7,
+      trend: +1.1,
+      icon: 'shield-check',
+      unit: '%',
+      description: 'Packages with compliant licenses'
+    },
+    vulnerabilityScore: {
+      label: 'Vulnerability Score',
+      value: 87.3,
+      trend: -2.4,
+      icon: 'alert-triangle',
+      unit: '/100',
+      description: 'Overall security posture (higher is better)'
+    },
+    craCompliance: {
+      label: 'CRA Compliance',
+      value: 91.2,
+      trend: +4.5,
+      icon: 'file-check',
+      unit: '%',
+      description: 'Cyber Resilience Act readiness'
+    },
+    openIssues: {
+      label: 'Open Issues',
+      value: 234,
+      trend: -12,
+      icon: 'alert-circle',
+      unit: '',
+      description: 'Unresolved compliance & security issues'
+    },
+    riskLevel: {
+      label: 'Risk Level',
+      value: 'Medium',
+      trend: 0,
+      icon: 'gauge',
+      unit: '',
+      description: 'Aggregate risk assessment',
+      riskColor: 'warning'
+    }
+  };
+
+  // ──────────────────────────────────────────────
+  // License Distribution
+  // ──────────────────────────────────────────────
+  const licenseDistribution = [
+    { license: 'MIT', count: 4231, percentage: 32.9, category: 'permissive', color: '#4ade80' },
+    { license: 'Apache-2.0', count: 3102, percentage: 24.1, category: 'permissive', color: '#60a5fa' },
+    { license: 'BSD-3-Clause', count: 1542, percentage: 12.0, category: 'permissive', color: '#818cf8' },
+    { license: 'GPL-3.0', count: 987, percentage: 7.7, category: 'copyleft', color: '#f472b6' },
+    { license: 'LGPL-2.1', count: 654, percentage: 5.1, category: 'weak-copyleft', color: '#fb923c' },
+    { license: 'GPL-2.0', count: 523, percentage: 4.1, category: 'copyleft', color: '#f87171' },
+    { license: 'ISC', count: 498, percentage: 3.9, category: 'permissive', color: '#34d399' },
+    { license: 'MPL-2.0', count: 312, percentage: 2.4, category: 'weak-copyleft', color: '#fbbf24' },
+    { license: 'AGPL-3.0', count: 189, percentage: 1.5, category: 'copyleft', color: '#ef4444' },
+    { license: 'Unlicense', count: 145, percentage: 1.1, category: 'public-domain', color: '#a78bfa' },
+    { license: 'Unknown', count: 387, percentage: 3.0, category: 'unknown', color: '#6b7280' },
+    { license: 'Other', count: 277, percentage: 2.2, category: 'other', color: '#9ca3af' }
+  ];
+
+  const licenseCategoryBreakdown = {
+    permissive: { count: 9373, percentage: 73.0, color: '#4ade80' },
+    copyleft: { count: 1699, percentage: 13.2, color: '#f87171' },
+    'weak-copyleft': { count: 966, percentage: 7.5, color: '#fbbf24' },
+    'public-domain': { count: 145, percentage: 1.1, color: '#a78bfa' },
+    unknown: { count: 387, percentage: 3.0, color: '#6b7280' },
+    other: { count: 277, percentage: 2.2, color: '#9ca3af' }
+  };
+
+  // ──────────────────────────────────────────────
+  // Vulnerability Data
+  // ──────────────────────────────────────────────
+  const vulnerabilitySummary = {
+    critical: { count: 12, trend: -3, color: '#ef4444' },
+    high: { count: 47, trend: +5, color: '#f97316' },
+    medium: { count: 134, trend: -8, color: '#eab308' },
+    low: { count: 289, trend: -22, color: '#22c55e' },
+    none: { count: 12365, trend: +156, color: '#6b7280' }
+  };
+
+  const topVulnerablePackages = [
+    { name: 'log4j-core', version: '2.14.1', purl: 'pkg:maven/org.apache.logging.log4j/log4j-core@2.14.1', vulns: 4, severity: 'critical', ecosystem: 'Maven' },
+    { name: 'spring-webmvc', version: '5.3.18', purl: 'pkg:maven/org.springframework/spring-webmvc@5.3.18', vulns: 3, severity: 'critical', ecosystem: 'Maven' },
+    { name: 'node-forge', version: '0.10.0', purl: 'pkg:npm/node-forge@0.10.0', vulns: 5, severity: 'high', ecosystem: 'npm' },
+    { name: 'pillow', version: '8.3.2', purl: 'pkg:pypi/pillow@8.3.2', vulns: 7, severity: 'high', ecosystem: 'PyPI' },
+    { name: 'lodash', version: '4.17.20', purl: 'pkg:npm/lodash@4.17.20', vulns: 2, severity: 'high', ecosystem: 'npm' },
+    { name: 'jackson-databind', version: '2.12.3', purl: 'pkg:maven/com.fasterxml.jackson.core/jackson-databind@2.12.3', vulns: 3, severity: 'high', ecosystem: 'Maven' },
+    { name: 'urllib3', version: '1.26.5', purl: 'pkg:pypi/urllib3@1.26.5', vulns: 2, severity: 'medium', ecosystem: 'PyPI' },
+    { name: 'express', version: '4.17.1', purl: 'pkg:npm/express@4.17.1', vulns: 1, severity: 'medium', ecosystem: 'npm' },
+    { name: 'django', version: '3.2.14', purl: 'pkg:pypi/django@3.2.14', vulns: 2, severity: 'medium', ecosystem: 'PyPI' },
+    { name: 'openssl', version: '1.1.1k', purl: 'pkg:generic/openssl@1.1.1k', vulns: 4, severity: 'high', ecosystem: 'Generic' }
+  ];
+
+  // ──────────────────────────────────────────────
+  // Compliance Events Timeline
+  // ──────────────────────────────────────────────
+  const events = [
+    { id: 'EVT-001', timestamp: '2026-06-24T18:30:00Z', type: 'vulnerability', severity: 'critical', title: 'New critical CVE detected in log4j-core', source: 'VulnerableCode', product: 'WebApp v3.2', details: 'CVE-2026-44228 — Remote code execution vulnerability found in log4j-core 2.14.1. Immediate upgrade required.', status: 'open' },
+    { id: 'EVT-002', timestamp: '2026-06-24T16:45:00Z', type: 'license', severity: 'warning', title: 'AGPL-3.0 license detected in dependency', source: 'ScanCode', product: 'API Gateway v2.1', details: 'Package "ghostscript-wrapper" uses AGPL-3.0 which conflicts with commercial distribution policy.', status: 'investigating' },
+    { id: 'EVT-003', timestamp: '2026-06-24T14:20:00Z', type: 'policy', severity: 'info', title: 'CRA compliance report generated', source: 'DejaCode', product: 'All Products', details: 'Quarterly CRA compliance report generated. Overall score: 91.2%. 3 products need attention.', status: 'resolved' },
+    { id: 'EVT-004', timestamp: '2026-06-24T11:00:00Z', type: 'scan', severity: 'info', title: 'ScanCode scan completed for MobileApp v4.0', source: 'ScanCode.io', product: 'MobileApp v4.0', details: 'Full scan completed. 2,341 files analyzed. 156 packages identified. 3 new license issues found.', status: 'resolved' },
+    { id: 'EVT-005', timestamp: '2026-06-23T22:15:00Z', type: 'vulnerability', severity: 'high', title: 'High severity CVE in jackson-databind', source: 'VulnerableCode', product: 'Backend Services v5.1', details: 'CVE-2026-36221 — Deserialization vulnerability in jackson-databind 2.12.3. Upgrade to 2.15.x recommended.', status: 'open' },
+    { id: 'EVT-006', timestamp: '2026-06-23T19:30:00Z', type: 'license', severity: 'warning', title: 'Unknown license in 12 packages', source: 'ScanCode', product: 'DataPlatform v1.8', details: '12 packages have undetectable licenses. Manual review required for compliance clearance.', status: 'open' },
+    { id: 'EVT-007', timestamp: '2026-06-23T15:00:00Z', type: 'policy', severity: 'critical', title: 'Policy threshold breach: vulnerability count', source: '5C Engine', product: 'WebApp v3.2', details: 'Critical vulnerability count (12) exceeds threshold (5). Immediate remediation workflow triggered.', status: 'investigating' },
+    { id: 'EVT-008', timestamp: '2026-06-23T09:45:00Z', type: 'scan', severity: 'info', title: 'SBOM exported for WebApp v3.2', source: 'DejaCode', product: 'WebApp v3.2', details: 'CycloneDX SBOM v1.5 exported with 1,847 components. SHA256 checksum verified.', status: 'resolved' },
+    { id: 'EVT-009', timestamp: '2026-06-22T20:00:00Z', type: 'vulnerability', severity: 'medium', title: '8 medium CVEs resolved in batch update', source: 'VulnerableCode', product: 'Multiple', details: 'Batch dependency update resolved 8 medium-severity CVEs across 3 products.', status: 'resolved' },
+    { id: 'EVT-010', timestamp: '2026-06-22T14:30:00Z', type: 'license', severity: 'info', title: 'License policy updated', source: 'DejaCode', product: 'All Products', details: 'Added SSPL to restricted license list per legal team review. 4 packages affected.', status: 'resolved' }
+  ];
+
+  // ──────────────────────────────────────────────
+  // Policy Rules
+  // ──────────────────────────────────────────────
+  const policyRules = [
+    { id: 'POL-001', name: 'Critical Vulnerability Limit', description: 'Max critical CVEs per product', threshold: 5, current: 12, status: 'breach', category: 'security', severity: 'critical' },
+    { id: 'POL-002', name: 'License Compliance Floor', description: 'Minimum license compliance rate', threshold: 90, current: 94.7, status: 'passing', category: 'license', severity: 'high', unit: '%' },
+    { id: 'POL-003', name: 'Unknown License Cap', description: 'Max packages with unknown licenses', threshold: 50, current: 387, status: 'breach', category: 'license', severity: 'warning' },
+    { id: 'POL-004', name: 'SBOM Freshness', description: 'Max days since last SBOM generation', threshold: 30, current: 2, status: 'passing', category: 'compliance', severity: 'medium' },
+    { id: 'POL-005', name: 'Copyleft Ratio', description: 'Max copyleft license percentage', threshold: 20, current: 13.2, status: 'passing', category: 'license', severity: 'medium', unit: '%' },
+    { id: 'POL-006', name: 'Scan Coverage', description: 'Min percentage of scanned packages', threshold: 95, current: 98.4, status: 'passing', category: 'compliance', severity: 'high', unit: '%' },
+    { id: 'POL-007', name: 'High Vuln Response Time', description: 'Max days to resolve high-severity CVEs', threshold: 14, current: 8, status: 'passing', category: 'security', severity: 'high', unit: 'days' },
+    { id: 'POL-008', name: 'CRA Readiness Score', description: 'Min CRA compliance percentage', threshold: 85, current: 91.2, status: 'passing', category: 'compliance', severity: 'critical', unit: '%' }
+  ];
+
+  // ──────────────────────────────────────────────
+  // Products
+  // ──────────────────────────────────────────────
+  const products = [
+    { name: 'WebApp v3.2', packages: 1847, compliance: 92.1, vulns: { critical: 5, high: 12, medium: 34 }, lastScan: '2026-06-24', risk: 'high' },
+    { name: 'API Gateway v2.1', packages: 943, compliance: 96.8, vulns: { critical: 1, high: 5, medium: 18 }, lastScan: '2026-06-24', risk: 'medium' },
+    { name: 'MobileApp v4.0', packages: 2341, compliance: 94.3, vulns: { critical: 3, high: 8, medium: 27 }, lastScan: '2026-06-24', risk: 'medium' },
+    { name: 'Backend Services v5.1', packages: 3456, compliance: 95.7, vulns: { critical: 2, high: 14, medium: 38 }, lastScan: '2026-06-23', risk: 'medium' },
+    { name: 'DataPlatform v1.8', packages: 2890, compliance: 89.4, vulns: { critical: 1, high: 6, medium: 12 }, lastScan: '2026-06-23', risk: 'low' },
+    { name: 'ML Pipeline v2.0', packages: 1370, compliance: 97.2, vulns: { critical: 0, high: 2, medium: 5 }, lastScan: '2026-06-22', risk: 'low' }
+  ];
+
+  // ──────────────────────────────────────────────
+  // Trend Data (last 30 days)
+  // ──────────────────────────────────────────────
+  const trendData = {
+    labels: Array.from({ length: 30 }, (_, i) => {
+      const d = new Date('2026-06-24');
+      d.setDate(d.getDate() - (29 - i));
+      return d.toISOString().slice(5, 10);
+    }),
+    compliance: [91.2, 91.4, 91.3, 91.5, 91.8, 92.0, 92.1, 92.3, 92.0, 91.9, 92.2, 92.5, 92.8, 93.0, 93.1, 93.0, 93.2, 93.5, 93.4, 93.7, 93.8, 94.0, 94.1, 93.9, 94.2, 94.3, 94.5, 94.6, 94.7, 94.7],
+    vulnerabilities: [78, 82, 80, 79, 76, 74, 72, 75, 73, 70, 68, 71, 69, 65, 63, 67, 64, 62, 60, 58, 61, 59, 55, 54, 52, 50, 49, 48, 47, 47],
+    packages: [12100, 12120, 12150, 12180, 12200, 12230, 12260, 12290, 12310, 12340, 12370, 12400, 12420, 12450, 12480, 12510, 12540, 12570, 12590, 12620, 12650, 12680, 12700, 12730, 12760, 12790, 12800, 12820, 12840, 12847]
+  };
+
+  // ──────────────────────────────────────────────
+  // Ecosystem Breakdown
+  // ──────────────────────────────────────────────
+  const ecosystemBreakdown = [
+    { ecosystem: 'npm', count: 4512, percentage: 35.1, color: '#f87171' },
+    { ecosystem: 'PyPI', count: 3201, percentage: 24.9, color: '#60a5fa' },
+    { ecosystem: 'Maven', count: 2456, percentage: 19.1, color: '#fbbf24' },
+    { ecosystem: 'NuGet', count: 1234, percentage: 9.6, color: '#818cf8' },
+    { ecosystem: 'Go', count: 678, percentage: 5.3, color: '#4ade80' },
+    { ecosystem: 'Cargo', count: 432, percentage: 3.4, color: '#fb923c' },
+    { ecosystem: 'Other', count: 334, percentage: 2.6, color: '#9ca3af' }
+  ];
+
+  return {
+    kciData,
+    licenseDistribution,
+    licenseCategoryBreakdown,
+    vulnerabilitySummary,
+    topVulnerablePackages,
+    events,
+    policyRules,
+    products,
+    trendData,
+    ecosystemBreakdown
+  };
+
+})();
diff --git a/5c-dashboard/index.css b/5c-dashboard/index.css
new file mode 100644
index 0000000..1684261
--- /dev/null
+++ b/5c-dashboard/index.css
@@ -0,0 +1,1393 @@
+/* ═══════════════════════════════════════════════════════════
+   5C: Continuous Code Compliance Control Center
+   Design System & Styles
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Google Fonts ── */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* ── CSS Custom Properties ── */
+:root {
+  /* Colors - Dark Theme */
+  --bg-primary: #0a0e1a;
+  --bg-secondary: #111827;
+  --bg-card: rgba(17, 24, 39, 0.7);
+  --bg-card-hover: rgba(30, 41, 59, 0.8);
+  --bg-glass: rgba(255, 255, 255, 0.03);
+  --bg-glass-hover: rgba(255, 255, 255, 0.06);
+
+  --border-primary: rgba(255, 255, 255, 0.06);
+  --border-hover: rgba(255, 255, 255, 0.12);
+  --border-accent: rgba(99, 102, 241, 0.4);
+
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --text-accent: #818cf8;
+
+  /* Accent Colors */
+  --accent-primary: #6366f1;
+  --accent-primary-glow: rgba(99, 102, 241, 0.15);
+  --accent-secondary: #8b5cf6;
+
+  /* Status Colors */
+  --color-success: #4ade80;
+  --color-success-bg: rgba(74, 222, 128, 0.1);
+  --color-warning: #fbbf24;
+  --color-warning-bg: rgba(251, 191, 36, 0.1);
+  --color-danger: #f87171;
+  --color-danger-bg: rgba(248, 113, 113, 0.1);
+  --color-info: #60a5fa;
+  --color-info-bg: rgba(96, 165, 250, 0.1);
+  --color-critical: #ef4444;
+  --color-critical-bg: rgba(239, 68, 68, 0.12);
+
+  /* Typography */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+
+  /* Radii */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.25rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Layout */
+  --sidebar-width: 260px;
+  --header-height: 64px;
+  --content-max-width: 1600px;
+}
+
+/* ── Reset & Base ── */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Animated gradient background */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
+    radial-gradient(ellipse at 50% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+a {
+  color: var(--text-accent);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--accent-primary);
+}
+
+/* ── Layout ── */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Sidebar ── */
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-primary);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 100;
+  transition: transform var(--transition-base);
+}
+
+.sidebar-header {
+  padding: var(--space-lg);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.sidebar-logo .logo-icon {
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 0.875rem;
+  color: white;
+  letter-spacing: -0.5px;
+}
+
+.sidebar-logo .logo-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-logo .logo-text .title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.sidebar-logo .logo-text .subtitle {
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 500;
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: var(--space-md) 0;
+  overflow-y: auto;
+}
+
+.nav-section {
+  margin-bottom: var(--space-lg);
+}
+
+.nav-section-title {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  color: var(--text-muted);
+  padding: 0 var(--space-lg);
+  margin-bottom: var(--space-sm);
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-lg);
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  border-left: 3px solid transparent;
+  user-select: none;
+}
+
+.nav-item:hover {
+  color: var(--text-primary);
+  background: var(--bg-glass-hover);
+}
+
+.nav-item.active {
+  color: var(--accent-primary);
+  background: var(--accent-primary-glow);
+  border-left-color: var(--accent-primary);
+}
+
+.nav-item .nav-icon {
+  width: 18px;
+  height: 18px;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+.nav-item.active .nav-icon {
+  opacity: 1;
+}
+
+.nav-item .nav-badge {
+  margin-left: auto;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--color-danger-bg);
+  color: var(--color-danger);
+}
+
+.sidebar-footer {
+  padding: var(--space-md) var(--space-lg);
+  border-top: 1px solid var(--border-primary);
+}
+
+.sidebar-footer-text {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.sidebar-footer-text a {
+  color: var(--text-secondary);
+}
+
+/* ── Main Content ── */
+.main-content {
+  flex: 1;
+  margin-left: var(--sidebar-width);
+  min-height: 100vh;
+}
+
+/* ── Header ── */
+.header {
+  height: var(--header-height);
+  background: rgba(10, 14, 26, 0.8);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--border-primary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-xl);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.header-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.header-breadcrumb {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.header-status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: 0.75rem;
+  color: var(--color-success);
+  padding: 4px 12px;
+  background: var(--color-success-bg);
+  border-radius: 999px;
+}
+
+.header-status .status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-success);
+  animation: pulse-dot 2s infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.mobile-menu-btn {
+  display: none;
+  background: none;
+  border: 1px solid var(--border-primary);
+  color: var(--text-primary);
+  padding: var(--space-sm);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+/* ── Page Content ── */
+.page-content {
+  padding: var(--space-xl);
+  max-width: var(--content-max-width);
+}
+
+/* ── Section Headers ── */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-lg);
+}
+
+.section-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.section-title .section-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--accent-primary);
+}
+
+/* ── KCI Cards Grid ── */
+.kci-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--space-md);
+  margin-bottom: var(--space-2xl);
+}
+
+.kci-card {
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+  transition: all var(--transition-base);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.kci-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+  opacity: 0;
+  transition: opacity var(--transition-base);
+}
+
+.kci-card:hover {
+  border-color: var(--border-hover);
+  background: var(--bg-card-hover);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow);
+}
+
+.kci-card:hover::before {
+  opacity: 1;
+}
+
+.kci-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-md);
+}
+
+.kci-card-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-primary-glow);
+}
+
+.kci-card-icon svg {
+  width: 20px;
+  height: 20px;
+  color: var(--accent-primary);
+}
+
+.kci-trend {
+  font-size: 0.75rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 8px;
+  border-radius: 999px;
+}
+
+.kci-trend.positive {
+  color: var(--color-success);
+  background: var(--color-success-bg);
+}
+
+.kci-trend.negative {
+  color: var(--color-danger);
+  background: var(--color-danger-bg);
+}
+
+.kci-trend.neutral {
+  color: var(--text-muted);
+  background: var(--bg-glass);
+}
+
+.kci-card-value {
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  line-height: 1.1;
+  margin-bottom: var(--space-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.kci-card-value .kci-unit {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.kci-card-label {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.kci-card-description {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin-top: var(--space-xs);
+}
+
+/* Risk level special styling */
+.kci-card .risk-badge {
+  font-size: 1.5rem;
+  font-weight: 800;
+  padding: 4px 16px;
+  border-radius: var(--radius-sm);
+  display: inline-block;
+}
+
+.kci-card .risk-badge.risk-low { color: var(--color-success); background: var(--color-success-bg); }
+.kci-card .risk-badge.risk-medium { color: var(--color-warning); background: var(--color-warning-bg); }
+.kci-card .risk-badge.risk-high { color: var(--color-danger); background: var(--color-danger-bg); }
+.kci-card .risk-badge.risk-critical { color: var(--color-critical); background: var(--color-critical-bg); }
+
+/* ── Dashboard Grid ── */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-lg);
+  margin-bottom: var(--space-2xl);
+}
+
+.dashboard-grid.three-col {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+/* ── Card Component ── */
+.card {
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: border-color var(--transition-base);
+}
+
+.card:hover {
+  border-color: var(--border-hover);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-lg);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.card-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.card-title .card-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--accent-primary);
+}
+
+.card-body {
+  padding: var(--space-lg);
+}
+
+.card.full-width {
+  grid-column: 1 / -1;
+}
+
+/* ── Chart Containers ── */
+.chart-container {
+  width: 100%;
+  position: relative;
+}
+
+.chart-container canvas {
+  width: 100% !important;
+  height: 250px !important;
+}
+
+/* ── Vulnerability Severity Bars ── */
+.severity-bars {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.severity-bar-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.severity-label {
+  width: 70px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.severity-label.critical { color: var(--color-critical); }
+.severity-label.high { color: #f97316; }
+.severity-label.medium { color: #eab308; }
+.severity-label.low { color: var(--color-success); }
+
+.severity-bar-track {
+  flex: 1;
+  height: 8px;
+  background: var(--bg-glass);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.severity-bar-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+.severity-bar-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15));
+}
+
+.severity-bar-fill.critical { background: var(--color-critical); }
+.severity-bar-fill.high { background: #f97316; }
+.severity-bar-fill.medium { background: #eab308; }
+.severity-bar-fill.low { background: var(--color-success); }
+
+.severity-count {
+  width: 50px;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+}
+
+.severity-trend {
+  width: 50px;
+  text-align: right;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+/* ── Events Timeline ── */
+.events-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.event-item {
+  display: flex;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-primary);
+  transition: background var(--transition-fast);
+  cursor: pointer;
+}
+
+.event-item:last-child {
+  border-bottom: none;
+}
+
+.event-item:hover {
+  background: var(--bg-glass-hover);
+}
+
+.event-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding-top: 4px;
+}
+
+.event-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.event-dot.critical { background: var(--color-critical); box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
+.event-dot.high, .event-dot.warning { background: var(--color-warning); box-shadow: 0 0 8px rgba(251, 191, 36, 0.3); }
+.event-dot.medium, .event-dot.info { background: var(--color-info); }
+.event-dot.low { background: var(--color-success); }
+
+.event-line {
+  width: 2px;
+  flex: 1;
+  background: var(--border-primary);
+  min-height: 20px;
+}
+
+.event-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.event-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  margin-bottom: 4px;
+}
+
+.event-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.event-time {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+  font-family: var(--font-mono);
+}
+
+.event-details {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: var(--space-sm);
+}
+
+.event-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.event-tag {
+  font-size: 0.65rem;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.event-tag.vulnerability { background: var(--color-danger-bg); color: var(--color-danger); }
+.event-tag.license { background: rgba(251, 191, 36, 0.1); color: var(--color-warning); }
+.event-tag.policy { background: rgba(139, 92, 246, 0.1); color: #a78bfa; }
+.event-tag.scan { background: var(--color-info-bg); color: var(--color-info); }
+
+.event-tag.status-open { background: var(--color-danger-bg); color: var(--color-danger); }
+.event-tag.status-investigating { background: var(--color-warning-bg); color: var(--color-warning); }
+.event-tag.status-resolved { background: var(--color-success-bg); color: var(--color-success); }
+
+/* ── Policy Rules Table ── */
+.policy-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.policy-table th {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  text-align: left;
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.policy-table td {
+  font-size: 0.8rem;
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--border-primary);
+  color: var(--text-secondary);
+}
+
+.policy-table tr:last-child td {
+  border-bottom: none;
+}
+
+.policy-table tr:hover td {
+  background: var(--bg-glass-hover);
+}
+
+.policy-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.policy-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.policy-status.passing {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+.policy-status.breach {
+  background: var(--color-danger-bg);
+  color: var(--color-danger);
+  animation: pulse-breach 2s infinite;
+}
+
+@keyframes pulse-breach {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.policy-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.policy-progress-bar {
+  flex: 1;
+  height: 6px;
+  background: var(--bg-glass);
+  border-radius: 999px;
+  overflow: hidden;
+  min-width: 60px;
+}
+
+.policy-progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 1s ease;
+}
+
+.policy-progress-text {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* ── Products Table ── */
+.products-grid {
+  display: grid;
+  gap: var(--space-sm);
+}
+
+.product-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr 0.8fr;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  border-radius: var(--radius-md);
+  transition: background var(--transition-fast);
+  cursor: pointer;
+}
+
+.product-row:hover {
+  background: var(--bg-glass-hover);
+}
+
+.product-row-header {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  cursor: default;
+  border-bottom: 1px solid var(--border-primary);
+  padding-bottom: var(--space-sm);
+}
+
+.product-row-header:hover {
+  background: transparent;
+}
+
+.product-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+}
+
+.product-packages {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.product-compliance {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.product-vulns {
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.vuln-pill {
+  font-size: 0.65rem;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+}
+
+.vuln-pill.critical { background: var(--color-critical-bg); color: var(--color-critical); }
+.vuln-pill.high { background: rgba(249, 115, 22, 0.12); color: #f97316; }
+.vuln-pill.medium { background: rgba(234, 179, 8, 0.12); color: #eab308; }
+
+.product-scan {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.risk-indicator {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 3px 10px;
+  border-radius: 999px;
+  text-align: center;
+}
+
+.risk-indicator.low { background: var(--color-success-bg); color: var(--color-success); }
+.risk-indicator.medium { background: var(--color-warning-bg); color: var(--color-warning); }
+.risk-indicator.high { background: var(--color-danger-bg); color: var(--color-danger); }
+
+/* ── Donut Chart Legend ── */
+.chart-legend {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-xs) var(--space-md);
+  margin-top: var(--space-md);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.legend-value {
+  margin-left: auto;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+}
+
+/* ── Buttons ── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  font-size: 0.8rem;
+  font-weight: 600;
+  font-family: var(--font-sans);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  background: var(--bg-glass);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.btn:hover {
+  background: var(--bg-glass-hover);
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #5558e6;
+  border-color: #5558e6;
+  color: white;
+  box-shadow: var(--shadow-glow);
+}
+
+.btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* ── Filter/Tab Bar ── */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: 3px;
+  background: var(--bg-glass);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-primary);
+}
+
+.filter-btn {
+  padding: 6px 14px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.filter-btn:hover {
+  color: var(--text-secondary);
+  background: var(--bg-glass-hover);
+}
+
+.filter-btn.active {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+/* ── Detail Modal/Panel ── */
+.detail-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 200;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-base);
+}
+
+.detail-overlay.active {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.detail-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: min(600px, 90vw);
+  height: 100vh;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border-primary);
+  z-index: 201;
+  transform: translateX(100%);
+  transition: transform var(--transition-slow);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-panel.active {
+  transform: translateX(0);
+}
+
+.detail-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-lg);
+  border-bottom: 1px solid var(--border-primary);
+  position: sticky;
+  top: 0;
+  background: var(--bg-secondary);
+  z-index: 1;
+}
+
+.detail-panel-title {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.detail-close-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-glass);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.detail-close-btn:hover {
+  background: var(--bg-glass-hover);
+  color: var(--text-primary);
+}
+
+.detail-panel-body {
+  flex: 1;
+  padding: var(--space-lg);
+}
+
+.detail-section {
+  margin-bottom: var(--space-xl);
+}
+
+.detail-section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  margin-bottom: var(--space-md);
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.detail-field {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-sm) 0;
+  font-size: 0.85rem;
+}
+
+.detail-field-label {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.detail-field-value {
+  color: var(--text-primary);
+  font-weight: 600;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+}
+
+/* ── Animations ── */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slide-in-right {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes count-up {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-in {
+  animation: fade-in 0.5s ease forwards;
+}
+
+.animate-in-delay-1 { animation-delay: 0.05s; opacity: 0; }
+.animate-in-delay-2 { animation-delay: 0.1s; opacity: 0; }
+.animate-in-delay-3 { animation-delay: 0.15s; opacity: 0; }
+.animate-in-delay-4 { animation-delay: 0.2s; opacity: 0; }
+.animate-in-delay-5 { animation-delay: 0.25s; opacity: 0; }
+.animate-in-delay-6 { animation-delay: 0.3s; opacity: 0; }
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* ── Empty state ── */
+.empty-state {
+  text-align: center;
+  padding: var(--space-2xl);
+  color: var(--text-muted);
+}
+
+.empty-state-icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto var(--space-md);
+  opacity: 0.3;
+}
+
+/* ── Responsive ── */
+@media (max-width: 1200px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+  .dashboard-grid.three-col {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
+
+  .mobile-menu-btn {
+    display: flex;
+  }
+
+  .header {
+    padding: 0 var(--space-md);
+  }
+
+  .page-content {
+    padding: var(--space-md);
+  }
+
+  .kci-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .dashboard-grid.three-col {
+    grid-template-columns: 1fr;
+  }
+
+  .product-row {
+    grid-template-columns: 1fr;
+    gap: var(--space-xs);
+  }
+
+  .product-row-header {
+    display: none;
+  }
+
+  .header-breadcrumb {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .kci-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Canvas/SVG charts ── */
+.donut-chart-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xl);
+  flex-wrap: wrap;
+}
+
+.donut-chart-svg {
+  width: 180px;
+  height: 180px;
+  flex-shrink: 0;
+}
+
+.donut-center-text {
+  font-family: var(--font-sans);
+  fill: var(--text-primary);
+}
+
+.donut-center-value {
+  font-size: 1.5rem;
+  font-weight: 800;
+}
+
+.donut-center-label {
+  font-size: 0.6rem;
+  fill: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* ── Sparkline ── */
+.sparkline-container {
+  width: 100%;
+  height: 60px;
+}
+
+.sparkline-container svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Top Vulnerable Packages ── */
+.vuln-package-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.vuln-package-item {
+  display: grid;
+  grid-template-columns: 2fr 1fr 0.8fr 0.6fr;
+  gap: var(--space-md);
+  align-items: center;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
+  transition: background var(--transition-fast);
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+
+.vuln-package-item:hover {
+  background: var(--bg-glass-hover);
+}
+
+.vuln-package-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+}
+
+.vuln-package-version {
+  color: var(--text-muted);
+  font-size: 0.7rem;
+}
+
+.vuln-package-ecosystem {
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+}
+
+.vuln-package-count {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  text-align: center;
+}
+
+.vuln-package-severity {
+  text-align: right;
+}
diff --git a/5c-dashboard/index.html b/5c-dashboard/index.html
new file mode 100644
index 0000000..41f3a31
--- /dev/null
+++ b/5c-dashboard/index.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>5C — Continuous Code Compliance Control Center | AboutCode</title>
+  <meta name="description" content="5C provides visual compliance observability for software supply chains. Monitor packages, licenses, vulnerabilities, and CRA compliance at scale.">
+  <meta name="author" content="AboutCode">
+  <meta name="keywords" content="compliance, cybersecurity, SBOM, license, vulnerability, CRA, AboutCode, ScanCode, DejaCode">
+  <meta property="og:title" content="5C — Continuous Code Compliance Control Center">
+  <meta property="og:description" content="Visual compliance observability for software supply chains at scale.">
+  <meta property="og:type" content="website">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛡️</text></svg>">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+
+<div class="app-layout">
+
+  <!-- ═══ Sidebar ═══ -->
+  <aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+      <div class="sidebar-logo">
+        <div class="logo-icon">5C</div>
+        <div class="logo-text">
+          <span class="title">5C Dashboard</span>
+          <span class="subtitle">Compliance Control Center</span>
+        </div>
+      </div>
+    </div>
+
+    <nav class="sidebar-nav">
+      <div class="nav-section">
+        <div class="nav-section-title">Overview</div>
+        <div class="nav-item active" data-section="section-kci">
+          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+          Dashboard
+        </div>
+        <div class="nav-item" data-section="section-products">
+          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
+          Products
+        </div>
+      </div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Analysis</div>
+        <div class="nav-item" data-section="section-vulnerabilities">
+          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+          Vulnerabilities
+          <span class="nav-badge">12</span>
+        </div>
+        <div class="nav-item" data-section="section-licenses">
+          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
+          Licenses
+        </div>
+        <div class="nav-item" data-section="section-policies">
+          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+          Policy Rules
+          <span class="nav-badge">2</span>
+        </div>
+      </div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Activity</div>
+        <div class="nav-item" data-section="section-events">
+          <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+          Events
+        </div>
+      </div>
+    </nav>
+
+    <div class="sidebar-footer">
+      <div class="sidebar-footer-text">
+        Powered by <a href="https://aboutcode.org" target="_blank" rel="noopener">AboutCode</a><br>
+        ScanCode · DejaCode · VulnerableCode
+      </div>
+    </div>
+  </aside>
+
+  <!-- ═══ Main Content ═══ -->
+  <main class="main-content">
+
+    <!-- Header -->
+    <header class="header">
+      <div class="header-left">
+        <button class="mobile-menu-btn" id="mobile-menu-btn">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+        </button>
+        <h1 class="header-title">Compliance Dashboard</h1>
+        <span class="header-breadcrumb">/ All Products</span>
+      </div>
+      <div class="header-right">
+        <div class="header-status">
+          <span class="status-dot"></span>
+          Monitoring Active
+        </div>
+        <button class="btn" title="Refresh data">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+          Refresh
+        </button>
+      </div>
+    </header>
+
+    <!-- Page Content -->
+    <div class="page-content">
+
+      <!-- ═══ KCI Section ═══ -->
+      <section id="section-kci">
+        <div class="section-header">
+          <h2 class="section-title">
+            <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+            Key Compliance Indicators
+          </h2>
+        </div>
+        <div class="kci-grid" id="kci-grid"></div>
+      </section>
+
+      <!-- ═══ Trends Section ═══ -->
+      <div class="dashboard-grid" style="margin-bottom:var(--space-2xl)">
+        <div class="card">
+          <div class="card-header">
+            <span class="card-title">
+              <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
+              Compliance Trend
+            </span>
+          </div>
+          <div class="card-body" id="compliance-trend"></div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <span class="card-title">
+              <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
+              Vulnerability Trend
+            </span>
+          </div>
+          <div class="card-body" id="vuln-trend"></div>
+        </div>
+      </div>
+
+      <!-- ═══ Vulnerabilities Section ═══ -->
+      <section id="section-vulnerabilities">
+        <div class="section-header">
+          <h2 class="section-title">
+            <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+            Vulnerability Overview
+          </h2>
+        </div>
+        <div class="dashboard-grid">
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">Severity Distribution</span>
+            </div>
+            <div class="card-body">
+              <div class="severity-bars" id="vuln-severity-bars"></div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">Top Vulnerable Packages</span>
+            </div>
+            <div class="card-body">
+              <div class="vuln-package-list" id="top-vuln-packages"></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ═══ Licenses Section ═══ -->
+      <section id="section-licenses" style="margin-top:var(--space-2xl)">
+        <div class="section-header">
+          <h2 class="section-title">
+            <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
+            License Analysis
+          </h2>
+        </div>
+        <div class="dashboard-grid">
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">License Category Breakdown</span>
+            </div>
+            <div class="card-body" id="license-donut"></div>
+          </div>
+          <div class="card">
+            <div class="card-header">
+              <span class="card-title">Package Ecosystems</span>
+            </div>
+            <div class="card-body" id="ecosystem-chart"></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ═══ Products Section ═══ -->
+      <section id="section-products" style="margin-top:var(--space-2xl)">
+        <div class="section-header">
+          <h2 class="section-title">
+            <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
+            Products Overview
+          </h2>
+        </div>
+        <div class="card full-width">
+          <div class="card-body">
+            <div class="products-grid" id="products-grid"></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ═══ Policy Rules Section ═══ -->
+      <section id="section-policies" style="margin-top:var(--space-2xl)">
+        <div class="section-header">
+          <h2 class="section-title">
+            <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+            Policy Rules & Thresholds
+          </h2>
+        </div>
+        <div class="card full-width">
+          <div class="card-body" style="overflow-x:auto">
+            <table class="policy-table">
+              <thead>
+                <tr>
+                  <th>Rule</th>
+                  <th>Category</th>
+                  <th>Current / Threshold</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody id="policy-rules-body"></tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <!-- ═══ Events Timeline Section ═══ -->
+      <section id="section-events" style="margin-top:var(--space-2xl)">
+        <div class="section-header">
+          <h2 class="section-title">
+            <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+            Compliance Events
+          </h2>
+          <div class="filter-bar">
+            <button class="filter-btn active" data-filter="all">All</button>
+            <button class="filter-btn" data-filter="vulnerability">Vulnerabilities</button>
+            <button class="filter-btn" data-filter="license">Licenses</button>
+            <button class="filter-btn" data-filter="policy">Policy</button>
+            <button class="filter-btn" data-filter="scan">Scans</button>
+          </div>
+        </div>
+        <div class="card full-width">
+          <div class="events-list" id="events-list"></div>
+        </div>
+      </section>
+
+    </div><!-- /page-content -->
+  </main>
+</div><!-- /app-layout -->
+
+<!-- ═══ Detail Panel (Drill-Down) ═══ -->
+<div class="detail-overlay" id="detail-overlay"></div>
+<div class="detail-panel" id="detail-panel">
+  <div class="detail-panel-header">
+    <h3 class="detail-panel-title" id="detail-panel-title"></h3>
+    <button class="detail-close-btn" id="detail-close-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+    </button>
+  </div>
+  <div class="detail-panel-body" id="detail-panel-body"></div>
+</div>
+
+<!-- Scripts -->
+<script src="data/mock-data.js"></script>
+<script src="app.js"></script>
+
+</body>
+</html>