ngx-security-audit 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-security-audit",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Enterprise-grade Angular security auditing tool. Static analysis scanner that detects XSS, CSRF, injection, sensitive data exposure, misconfigurations and 40+ security vulnerabilities in Angular projects. Generates detailed reports with severity levels for CI/CD pipeline integration.",
   "main": "src/index.js",
   "bin": {

package/src/reporters/html-reporter.js

@@ -2,190 +2,633 @@
 
 const { SEVERITY, SEVERITY_LABELS } = require('../utils/severity');
 
-/**
- * HTML Reporter - Beautiful HTML report for stakeholders
- */
-function htmlReport(result) {
-  const severityColors = {
-    [SEVERITY.CRITICAL]: '#dc2626',
-    [SEVERITY.HIGH]: '#ea580c',
-    [SEVERITY.MEDIUM]: '#d97706',
-    [SEVERITY.LOW]: '#2563eb',
-    [SEVERITY.INFO]: '#6b7280',
+const SEV_COLORS = {
+  [SEVERITY.CRITICAL]: '#ef4444',
+  [SEVERITY.HIGH]: '#f97316',
+  [SEVERITY.MEDIUM]: '#eab308',
+  [SEVERITY.LOW]: '#3b82f6',
+  [SEVERITY.INFO]: '#6b7280',
+};
+
+const OWASP_LABELS = {
+  A01: 'Broken Access Control',
+  A02: 'Cryptographic Failures',
+  A03: 'Injection',
+  A04: 'Insecure Design',
+  A05: 'Security Misconfiguration',
+  A06: 'Vulnerable Components',
+  A07: 'Auth Failures',
+  A08: 'Software Integrity',
+  A09: 'Logging Failures',
+  A10: 'SSRF',
+};
+
+function escapeHtml(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+/* ── SVG Helpers ────────────────────────────────────── */
+
+function buildDonutChart(summary) {
+  const data = [
+    { label: 'Critical', value: summary.critical, color: SEV_COLORS.critical },
+    { label: 'High', value: summary.high, color: SEV_COLORS.high },
+    { label: 'Medium', value: summary.medium, color: SEV_COLORS.medium },
+    { label: 'Low', value: summary.low, color: SEV_COLORS.low },
+    { label: 'Info', value: summary.info, color: SEV_COLORS.info },
+  ].filter((d) => d.value > 0);
+
+  if (data.length === 0) {
+    return `<svg viewBox="0 0 200 200" width="200" height="200">
+      <circle cx="100" cy="100" r="80" fill="none" stroke="#22c55e" stroke-width="30"/>
+      <text x="100" y="105" text-anchor="middle" fill="#22c55e" font-size="18" font-weight="800">CLEAN</text>
+    </svg>`;
+  }
+
+  const total = data.reduce((s, d) => s + d.value, 0);
+  const R = 80, CX = 100, CY = 100;
+  const circumference = 2 * Math.PI * R;
+  let offset = 0;
+  const arcs = data.map((d) => {
+    const pct = d.value / total;
+    const dash = pct * circumference;
+    const gap = circumference - dash;
+    const arc = `<circle cx="${CX}" cy="${CY}" r="${R}" fill="none" stroke="${d.color}" stroke-width="30" stroke-dasharray="${dash.toFixed(2)} ${gap.toFixed(2)}" stroke-dashoffset="${(-offset).toFixed(2)}" transform="rotate(-90 ${CX} ${CY})"/>`;
+    offset += dash;
+    return arc;
+  });
+
+  return `<svg viewBox="0 0 200 200" width="200" height="200">
+    ${arcs.join('\n    ')}
+    <circle cx="${CX}" cy="${CY}" r="60" fill="#0f172a"/>
+    <text x="${CX}" y="${CY - 5}" text-anchor="middle" fill="#f1f5f9" font-size="28" font-weight="800">${total}</text>
+    <text x="${CX}" y="${CY + 16}" text-anchor="middle" fill="#94a3b8" font-size="11">issues</text>
+  </svg>`;
+}
+
+function buildBarChart(summary) {
+  const bars = [
+    { label: 'Critical', value: summary.critical, color: SEV_COLORS.critical },
+    { label: 'High', value: summary.high, color: SEV_COLORS.high },
+    { label: 'Medium', value: summary.medium, color: SEV_COLORS.medium },
+    { label: 'Low', value: summary.low, color: SEV_COLORS.low },
+    { label: 'Info', value: summary.info, color: SEV_COLORS.info },
+  ];
+
+  const maxVal = Math.max(...bars.map((b) => b.value), 1);
+  const barW = 48, gap = 16, chartH = 160, padTop = 20, padBottom = 30;
+  const totalW = bars.length * barW + (bars.length - 1) * gap + 40;
+
+  const rects = bars.map((b, i) => {
+    const x = 20 + i * (barW + gap);
+    const h = (b.value / maxVal) * (chartH - padTop);
+    const y = chartH - h;
+    return `
+      <rect x="${x}" y="${y}" width="${barW}" height="${h}" rx="6" fill="${b.color}" opacity="0.85"/>
+      <text x="${x + barW / 2}" y="${y - 6}" text-anchor="middle" fill="#f1f5f9" font-size="13" font-weight="700">${b.value}</text>
+      <text x="${x + barW / 2}" y="${chartH + 16}" text-anchor="middle" fill="#94a3b8" font-size="10">${b.label}</text>`;
+  });
+
+  return `<svg viewBox="0 0 ${totalW} ${chartH + padBottom}" width="${totalW}" height="${chartH + padBottom}">
+    <line x1="15" y1="${chartH}" x2="${totalW - 15}" y2="${chartH}" stroke="#334155" stroke-width="1"/>
+    ${rects.join('')}
+  </svg>`;
+}
+
+function buildScoreGauge(score) {
+  const R = 70, CX = 90, CY = 90;
+  const arc = Math.PI * 1.5; // 270° arc
+  const circumference = arc * R;
+  const filled = (score / 100) * circumference;
+  const gap = circumference - filled;
+  const color = score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : '#ef4444';
+
+  return `<svg viewBox="0 0 180 180" width="180" height="180">
+    <circle cx="${CX}" cy="${CY}" r="${R}" fill="none" stroke="#1e293b" stroke-width="14"
+      stroke-dasharray="${circumference.toFixed(2)} 9999" stroke-dashoffset="0"
+      transform="rotate(135 ${CX} ${CY})" stroke-linecap="round"/>
+    <circle cx="${CX}" cy="${CY}" r="${R}" fill="none" stroke="${color}" stroke-width="14"
+      stroke-dasharray="${filled.toFixed(2)} ${gap.toFixed(2)}" stroke-dashoffset="0"
+      transform="rotate(135 ${CX} ${CY})" stroke-linecap="round"/>
+    <text x="${CX}" y="${CY - 2}" text-anchor="middle" fill="${color}" font-size="36" font-weight="900">${score}</text>
+    <text x="${CX}" y="${CY + 18}" text-anchor="middle" fill="#94a3b8" font-size="12">/ 100</text>
+  </svg>`;
+}
+
+function buildCategoryChart(findings) {
+  const cats = {};
+  for (const f of findings) {
+    cats[f.category] = (cats[f.category] || 0) + 1;
+  }
+  const entries = Object.entries(cats).sort((a, b) => b[1] - a[1]);
+  if (entries.length === 0) return '';
+
+  const maxVal = Math.max(...entries.map((e) => e[1]), 1);
+  const barH = 28, gap = 8, padLeft = 150, padRight = 50;
+  const totalH = entries.length * (barH + gap) + 10;
+  const chartW = 500;
+  const barArea = chartW - padLeft - padRight;
+  const colors = ['#38bdf8', '#818cf8', '#c084fc', '#f472b6', '#fb923c', '#34d399', '#fbbf24'];
+
+  const rows = entries.map(([cat, count], i) => {
+    const y = i * (barH + gap) + 5;
+    const w = (count / maxVal) * barArea;
+    const c = colors[i % colors.length];
+    return `
+      <text x="${padLeft - 10}" y="${y + barH / 2 + 4}" text-anchor="end" fill="#cbd5e1" font-size="12">${escapeHtml(cat)}</text>
+      <rect x="${padLeft}" y="${y}" width="${w}" height="${barH}" rx="6" fill="${c}" opacity="0.8"/>
+      <text x="${padLeft + w + 8}" y="${y + barH / 2 + 4}" fill="#f1f5f9" font-size="12" font-weight="700">${count}</text>`;
+  });
+
+  return `<svg viewBox="0 0 ${chartW} ${totalH}" width="${chartW}" height="${totalH}">
+    ${rows.join('')}
+  </svg>`;
+}
+
+function buildOwaspRadar(findings) {
+  const mappings = {
+    'XSS': ['A03'],
+    'Injection': ['A03'],
+    'Authentication': ['A01', 'A07'],
+    'Sensitive Data': ['A02', 'A09'],
+    'HTTP Security': ['A02', 'A05'],
+    'Angular Config': ['A04', 'A05', 'A06', 'A10'],
+    'Best Practices': ['A01', 'A03', 'A04', 'A06'],
   };
 
-  const scoreColor = result.score >= 80 ? '#16a34a' : result.score >= 60 ? '#d97706' : '#dc2626';
+  const owaspCounts = {};
+  const owaspKeys = ['A01', 'A02', 'A03', 'A04', 'A05', 'A06', 'A07', 'A09', 'A10'];
+  owaspKeys.forEach((k) => (owaspCounts[k] = 0));
 
-  const findingsHtml = result.findings
+  for (const f of findings) {
+    const tags = mappings[f.category] || [];
+    for (const t of tags) {
+      if (owaspCounts[t] !== undefined) owaspCounts[t]++;
+    }
+  }
+
+  const n = owaspKeys.length;
+  const CX = 160, CY = 160, R = 120;
+  const maxVal = Math.max(...Object.values(owaspCounts), 1);
+
+  // Grid circles
+  const gridCircles = [0.25, 0.5, 0.75, 1].map((p) =>
+    `<circle cx="${CX}" cy="${CY}" r="${R * p}" fill="none" stroke="#334155" stroke-width="0.5"/>`
+  ).join('\n    ');
+
+  // Axis lines and labels
+  const axes = owaspKeys.map((key, i) => {
+    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
+    const x2 = CX + R * Math.cos(angle);
+    const y2 = CY + R * Math.sin(angle);
+    const lx = CX + (R + 22) * Math.cos(angle);
+    const ly = CY + (R + 22) * Math.sin(angle);
+    return `
+      <line x1="${CX}" y1="${CY}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" stroke="#334155" stroke-width="0.5"/>
+      <text x="${lx.toFixed(1)}" y="${(ly + 4).toFixed(1)}" text-anchor="middle" fill="#94a3b8" font-size="9">${key}</text>`;
+  });
+
+  // Data polygon
+  const points = owaspKeys.map((key, i) => {
+    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
+    const r = (owaspCounts[key] / maxVal) * R;
+    return `${(CX + r * Math.cos(angle)).toFixed(1)},${(CY + r * Math.sin(angle)).toFixed(1)}`;
+  }).join(' ');
+
+  // Data dots
+  const dots = owaspKeys.map((key, i) => {
+    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
+    const r = (owaspCounts[key] / maxVal) * R;
+    const x = CX + r * Math.cos(angle);
+    const y = CY + r * Math.sin(angle);
+    return `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="3" fill="#38bdf8"/>`;
+  });
+
+  return `<svg viewBox="0 0 320 320" width="320" height="320">
+    ${gridCircles}
+    ${axes.join('')}
+    <polygon points="${points}" fill="rgba(56,189,248,0.15)" stroke="#38bdf8" stroke-width="2"/>
+    ${dots.join('\n    ')}
+  </svg>`;
+}
+
+function buildFileHeatmap(findings) {
+  const fileCounts = {};
+  for (const f of findings) {
+    const short = f.file ? f.file.replace(/\\/g, '/').split('/').slice(-2).join('/') : 'unknown';
+    fileCounts[short] = (fileCounts[short] || 0) + 1;
+  }
+  const entries = Object.entries(fileCounts).sort((a, b) => b[1] - a[1]).slice(0, 10);
+  if (entries.length === 0) return '';
+
+  const maxVal = Math.max(...entries.map((e) => e[1]), 1);
+  const barH = 26, gap = 6, padLeft = 200, padRight = 50;
+  const totalH = entries.length * (barH + gap) + 10;
+  const chartW = 560;
+  const barArea = chartW - padLeft - padRight;
+
+  const rows = entries.map(([file, count], i) => {
+    const y = i * (barH + gap) + 5;
+    const w = Math.max(4, (count / maxVal) * barArea);
+    const heat = count / maxVal;
+    const color = heat > 0.66 ? '#ef4444' : heat > 0.33 ? '#f97316' : '#eab308';
+    return `
+      <text x="${padLeft - 10}" y="${y + barH / 2 + 4}" text-anchor="end" fill="#cbd5e1" font-size="11" font-family="monospace">${escapeHtml(file)}</text>
+      <rect x="${padLeft}" y="${y}" width="${w}" height="${barH}" rx="5" fill="${color}" opacity="0.75"/>
+      <text x="${padLeft + w + 8}" y="${y + barH / 2 + 4}" fill="#f1f5f9" font-size="11" font-weight="700">${count}</text>`;
+  });
+
+  return `<svg viewBox="0 0 ${chartW} ${totalH}" width="100%" height="${totalH}" preserveAspectRatio="xMinYMin meet">
+    ${rows.join('')}
+  </svg>`;
+}
+
+/* ── Executive Summary ──────────────────────────────── */
+
+function buildExecutiveSummary(result) {
+  const { critical, high, medium, low, info, total } = result.summary;
+  const urgent = critical + high;
+  const riskLevel = critical > 0 ? 'CRITICAL' : high > 0 ? 'HIGH' : medium > 0 ? 'MODERATE' : 'LOW';
+  const riskColor = critical > 0 ? '#ef4444' : high > 0 ? '#f97316' : medium > 0 ? '#eab308' : '#22c55e';
+
+  const bullets = [];
+  if (critical > 0) bullets.push(`<li><strong style="color:#ef4444">${critical} critical</strong> vulnerability${critical > 1 ? 'ies' : 'y'} requiring immediate remediation.</li>`);
+  if (high > 0) bullets.push(`<li><strong style="color:#f97316">${high} high-severity</strong> issue${high > 1 ? 's' : ''} that should be addressed before production.</li>`);
+  if (medium > 0) bullets.push(`<li><strong style="color:#eab308">${medium} medium</strong> finding${medium > 1 ? 's' : ''} recommended for next sprint.</li>`);
+  if (low + info > 0) bullets.push(`<li><strong style="color:#3b82f6">${low + info} low/informational</strong> item${(low + info) > 1 ? 's' : ''} for continuous improvement.</li>`);
+  if (total === 0) bullets.push('<li style="color:#22c55e"><strong>No security issues detected.</strong> The application passed all checks.</li>');
+
+  return `
+    <div class="exec-summary">
+      <h2>📋 Executive Summary</h2>
+      <div class="exec-grid">
+        <div class="exec-card">
+          <div class="exec-label">Overall Risk</div>
+          <div class="exec-value" style="color:${riskColor}">${riskLevel}</div>
+        </div>
+        <div class="exec-card">
+          <div class="exec-label">Urgent Actions</div>
+          <div class="exec-value" style="color:${urgent > 0 ? '#ef4444' : '#22c55e'}">${urgent}</div>
+        </div>
+        <div class="exec-card">
+          <div class="exec-label">Total Findings</div>
+          <div class="exec-value">${total}</div>
+        </div>
+        <div class="exec-card">
+          <div class="exec-label">Attack Surface</div>
+          <div class="exec-value">${result.filesScanned} files</div>
+        </div>
+      </div>
+      <ul class="exec-bullets">${bullets.join('\n        ')}</ul>
+    </div>`;
+}
+
+/* ── Top Risks + Remediation ────────────────────────── */
+
+function buildTopRisks(findings) {
+  const top = findings
     .sort((a, b) => {
       const order = { critical: 0, high: 1, medium: 2, low: 3, info: 4 };
       return (order[a.severity] || 5) - (order[b.severity] || 5);
     })
-    .map((f) => `
-      <div class="finding finding-${f.severity}">
-        <div class="finding-header">
-          <span class="badge" style="background:${severityColors[f.severity]}">${SEVERITY_LABELS[f.severity]}</span>
-          <span class="rule-id">${escapeHtml(f.ruleId)}</span>
-          <span class="category">${escapeHtml(f.category)}</span>
-        </div>
-        <p class="finding-message">${escapeHtml(f.message)}</p>
-        <div class="finding-meta">
-          <span>📁 ${escapeHtml(f.file)}${f.line ? `:${f.line}` : ''}</span>
-        </div>
-        ${f.code ? `<pre class="code-block"><code>${escapeHtml(f.code)}</code></pre>` : ''}
-        ${f.recommendation ? `<div class="recommendation">✅ <strong>Recommendation:</strong> ${escapeHtml(f.recommendation)}</div>` : ''}
+    .slice(0, 5);
+
+  if (top.length === 0) return '';
+
+  const rows = top.map((f, i) => `
+    <tr>
+      <td class="rank">#${i + 1}</td>
+      <td><span class="badge-sm" style="background:${SEV_COLORS[f.severity]}">${SEVERITY_LABELS[f.severity]}</span></td>
+      <td class="rule-id-cell">${escapeHtml(f.ruleId)}</td>
+      <td>${escapeHtml(f.message).substring(0, 100)}</td>
+      <td class="rec-cell">${escapeHtml(f.recommendation || 'See documentation')}</td>
+    </tr>`).join('');
+
+  return `
+    <div class="section-block">
+      <h2>🔥 Top Risks &amp; Remediation</h2>
+      <div class="table-wrap">
+        <table class="data-table">
+          <thead><tr><th>#</th><th>Severity</th><th>Rule</th><th>Issue</th><th>Recommended Fix</th></tr></thead>
+          <tbody>${rows}</tbody>
+        </table>
       </div>
-    `)
-    .join('\n');
+    </div>`;
+}
+
+/* ── OWASP Compliance Table ─────────────────────────── */
+
+function buildOwaspTable(findings) {
+  const mappings = {
+    'XSS': ['A03'],
+    'Injection': ['A03'],
+    'Authentication': ['A01', 'A07'],
+    'Sensitive Data': ['A02', 'A09'],
+    'HTTP Security': ['A02', 'A05'],
+    'Angular Config': ['A04', 'A05', 'A06', 'A10'],
+    'Best Practices': ['A01', 'A03', 'A04', 'A06'],
+  };
+
+  const owaspCounts = {};
+  const owaspKeys = ['A01', 'A02', 'A03', 'A04', 'A05', 'A06', 'A07', 'A08', 'A09', 'A10'];
+  owaspKeys.forEach((k) => (owaspCounts[k] = 0));
+
+  for (const f of findings) {
+    const tags = mappings[f.category] || [];
+    for (const t of tags) {
+      if (owaspCounts[t] !== undefined) owaspCounts[t]++;
+    }
+  }
+
+  const rows = owaspKeys.map((k) => {
+    const count = owaspCounts[k];
+    const status = count === 0 ? '<span style="color:#22c55e">✅ Pass</span>' : `<span style="color:#ef4444">⚠️ ${count} issue${count > 1 ? 's' : ''}</span>`;
+    return `<tr><td><strong>${k}</strong></td><td>${OWASP_LABELS[k] || k}</td><td>${status}</td></tr>`;
+  }).join('');
+
+  return `
+    <div class="section-block">
+      <h2>🌐 OWASP Top 10 Compliance</h2>
+      <div class="table-wrap">
+        <table class="data-table"><thead><tr><th>ID</th><th>Category</th><th>Status</th></tr></thead><tbody>${rows}</tbody></table>
+      </div>
+    </div>`;
+}
+
+/* ── Main Report ────────────────────────────────────── */
+
+function htmlReport(result) {
+  const scoreColor = result.score >= 80 ? '#22c55e' : result.score >= 60 ? '#eab308' : '#ef4444';
+
+  const sortedFindings = [...result.findings].sort((a, b) => {
+    const order = { critical: 0, high: 1, medium: 2, low: 3, info: 4 };
+    return (order[a.severity] || 5) - (order[b.severity] || 5);
+  });
+
+  const findingsHtml = sortedFindings.map((f) => `
+    <div class="finding finding-${f.severity}">
+      <div class="finding-header">
+        <span class="badge" style="background:${SEV_COLORS[f.severity]}">${SEVERITY_LABELS[f.severity]}</span>
+        <span class="rule-id">${escapeHtml(f.ruleId)}</span>
+        <span class="cat-tag">${escapeHtml(f.category)}</span>
+      </div>
+      <p class="finding-message">${escapeHtml(f.message)}</p>
+      <div class="finding-meta">📁 ${escapeHtml(f.file)}${f.line ? `:${f.line}` : ''}</div>
+      ${f.code ? `<pre class="code-block"><code>${escapeHtml(f.code)}</code></pre>` : ''}
+      ${f.recommendation ? `<div class="recommendation">💡 <strong>Fix:</strong> ${escapeHtml(f.recommendation)}</div>` : ''}
+    </div>`).join('\n');
 
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>NGX Security Audit Report - ${escapeHtml(result.projectName || 'Angular Project')}</title>
+  <title>Security Report — ${escapeHtml(result.projectName || 'Angular Project')}</title>
   <style>
-    :root {
-      --bg: #0f172a;
-      --surface: #1e293b;
-      --surface2: #334155;
-      --text: #f1f5f9;
-      --text-dim: #94a3b8;
-      --accent: #38bdf8;
-      --success: #22c55e;
-      --danger: #ef4444;
-      --border: #475569;
-    }
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
-    .container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
-    header { text-align: center; padding: 3rem 0; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
-    header h1 { font-size: 2.5rem; background: linear-gradient(135deg, #38bdf8, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; }
-    header .subtitle { color: var(--text-dim); font-size: 1.1rem; }
-    .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
-    .info-card { background: var(--surface); border-radius: 12px; padding: 1.5rem; border: 1px solid var(--border); }
-    .info-card label { color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
-    .info-card .value { font-size: 1.3rem; font-weight: 600; margin-top: 0.25rem; }
-    .score-section { text-align: center; padding: 3rem; background: var(--surface); border-radius: 16px; margin-bottom: 2rem; border: 1px solid var(--border); }
-    .score-circle { display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 160px; border-radius: 50%; border: 8px solid ${scoreColor}; margin-bottom: 1rem; }
-    .score-number { font-size: 3rem; font-weight: 800; color: ${scoreColor}; }
-    .score-grade { font-size: 1.5rem; color: ${scoreColor}; font-weight: 700; }
-    .status { display: inline-block; padding: 0.5rem 2rem; border-radius: 50px; font-weight: 700; font-size: 1.1rem; margin-top: 1rem; }
-    .status-pass { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 2px solid #22c55e; }
-    .status-fail { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 2px solid #ef4444; }
-    .summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 2rem; }
-    .summary-card { background: var(--surface); border-radius: 12px; padding: 1.2rem; text-align: center; border: 1px solid var(--border); }
-    .summary-card .count { font-size: 2rem; font-weight: 800; }
-    .summary-card .label { color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; }
-    .findings-section h2 { font-size: 1.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--accent); }
-    .finding { background: var(--surface); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; border-left: 4px solid var(--border); border: 1px solid var(--border); }
-    .finding-critical { border-left-color: #dc2626; }
-    .finding-high { border-left-color: #ea580c; }
-    .finding-medium { border-left-color: #d97706; }
-    .finding-low { border-left-color: #2563eb; }
-    .finding-info { border-left-color: #6b7280; }
-    .finding-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
-    .badge { padding: 0.2rem 0.75rem; border-radius: 50px; color: white; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
-    .rule-id { font-family: monospace; color: var(--accent); font-size: 0.9rem; }
-    .category { color: var(--text-dim); font-size: 0.85rem; background: var(--surface2); padding: 0.15rem 0.5rem; border-radius: 4px; }
-    .finding-message { margin-bottom: 0.75rem; }
-    .finding-meta { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.75rem; }
-    .code-block { background: #0d1117; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 0.75rem 0; border: 1px solid #30363d; }
-    .code-block code { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.85rem; color: #c9d1d9; white-space: pre; }
-    .recommendation { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.9rem; color: #86efac; }
-    footer { text-align: center; padding: 2rem 0; color: var(--text-dim); border-top: 1px solid var(--border); margin-top: 2rem; font-size: 0.85rem; }
-    @media (max-width: 768px) {
-      .summary-grid { grid-template-columns: repeat(2, 1fr); }
-      .info-grid { grid-template-columns: 1fr; }
-      header h1 { font-size: 1.8rem; }
+    :root{--bg:#0f172a;--surface:#1e293b;--surface2:#334155;--text:#f1f5f9;--text-dim:#94a3b8;--accent:#38bdf8;--accent2:#818cf8;--success:#22c55e;--danger:#ef4444;--border:#475569;--gradient:linear-gradient(135deg,#38bdf8,#818cf8,#c084fc)}
+    *{margin:0;padding:0;box-sizing:border-box}
+    body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
+    a{color:var(--accent)}
+    code,pre{font-family:'Cascadia Code','Fira Code','JetBrains Mono',monospace}
+    .container{max-width:1280px;margin:0 auto;padding:2rem}
+
+    /* Print */
+    @media print{body{background:#fff;color:#111}.container{max-width:100%}nav,.no-print{display:none!important}.surface,.section-block,.finding,.exec-card,.info-card,.score-section,.chart-panel{background:#f8fafc!important;border-color:#d1d5db!important;color:#111!important}h1,h2,h3,.score-number,.exec-value,.count{color:#111!important;-webkit-text-fill-color:#111!important}}
+
+    /* Nav */
+    nav{position:sticky;top:0;z-index:100;background:rgba(15,23,42,0.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0.75rem 0}
+    nav .container{display:flex;align-items:center;justify-content:space-between;padding-top:0;padding-bottom:0}
+    nav .logo{font-weight:800;font-size:1.1rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+    .nav-links{display:flex;gap:1.5rem}
+    .nav-links a{color:var(--text-dim);font-size:0.85rem;font-weight:500;text-decoration:none}
+    .nav-links a:hover{color:var(--text)}
+    .print-btn{background:var(--surface2);color:var(--text);border:1px solid var(--border);padding:0.4rem 1rem;border-radius:8px;font-size:0.8rem;cursor:pointer;font-weight:600}
+    .print-btn:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
+
+    /* Header */
+    .report-header{text-align:center;padding:3rem 0 2rem;border-bottom:1px solid var(--border);margin-bottom:2rem}
+    .report-header h1{font-size:2.8rem;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:0.5rem}
+    .report-header .subtitle{color:var(--text-dim);font-size:1.1rem}
+    .report-header .ts{color:var(--text-dim);font-size:0.85rem;margin-top:0.5rem}
+
+    /* Info strip */
+    .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:2rem}
+    .info-card{background:var(--surface);border-radius:12px;padding:1.2rem 1.5rem;border:1px solid var(--border)}
+    .info-card label{color:var(--text-dim);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.06em}
+    .info-card .value{font-size:1.2rem;font-weight:700;margin-top:0.2rem}
+
+    /* Score section */
+    .score-section{text-align:center;padding:2.5rem;background:var(--surface);border-radius:16px;margin-bottom:2rem;border:1px solid var(--border)}
+    .score-grade{font-size:1.5rem;color:${scoreColor};font-weight:800;margin-top:0.5rem}
+    .status{display:inline-block;padding:0.5rem 2rem;border-radius:50px;font-weight:700;font-size:1rem;margin-top:1rem}
+    .status-pass{background:rgba(34,197,94,0.12);color:#22c55e;border:2px solid #22c55e}
+    .status-fail{background:rgba(239,68,68,0.12);color:#ef4444;border:2px solid #ef4444}
+
+    /* Charts */
+    .charts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}
+    .chart-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;align-items:center}
+    .chart-panel h3{font-size:1rem;margin-bottom:1rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.04em;font-weight:600}
+
+    /* Executive summary */
+    .exec-summary{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem;margin-bottom:2rem}
+    .exec-summary h2{font-size:1.4rem;margin-bottom:1rem}
+    .exec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
+    .exec-card{background:var(--bg);border-radius:12px;padding:1.2rem;text-align:center;border:1px solid var(--border)}
+    .exec-label{color:var(--text-dim);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.04em}
+    .exec-value{font-size:1.6rem;font-weight:800;margin-top:0.3rem}
+    .exec-bullets{list-style:none;padding:0}
+    .exec-bullets li{padding:0.4rem 0;padding-left:1.2rem;position:relative;font-size:0.95rem}
+    .exec-bullets li::before{content:'›';position:absolute;left:0;color:var(--accent);font-weight:800}
+
+    /* Summary cards */
+    .summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:2rem}
+    .summary-card{background:var(--surface);border-radius:12px;padding:1.2rem;text-align:center;border:1px solid var(--border);transition:transform 0.2s}
+    .summary-card:hover{transform:translateY(-2px)}
+    .summary-card .count{font-size:2.2rem;font-weight:800}
+    .summary-card .label{color:var(--text-dim);font-size:0.8rem;text-transform:uppercase;margin-top:0.2rem}
+
+    /* Section blocks */
+    .section-block{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem;margin-bottom:2rem}
+    .section-block h2{font-size:1.4rem;margin-bottom:1.2rem}
+
+    /* Tables */
+    .table-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--border);background:var(--bg)}
+    .data-table{width:100%;border-collapse:collapse}
+    .data-table th{text-align:left;padding:0.6rem 1rem;color:var(--text-dim);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;border-bottom:2px solid var(--border)}
+    .data-table td{padding:0.6rem 1rem;border-bottom:1px solid var(--border);font-size:0.88rem}
+    .data-table tr:hover{background:var(--surface)}
+    .rank{font-weight:800;color:var(--accent);font-size:1rem}
+    .rule-id-cell{font-family:monospace;color:var(--accent);font-size:0.85rem}
+    .rec-cell{font-size:0.82rem;color:#86efac;max-width:250px}
+    .badge-sm{padding:0.15rem 0.6rem;border-radius:50px;color:white;font-size:0.7rem;font-weight:700;text-transform:uppercase}
+
+    /* Findings */
+    .findings-section{margin-bottom:2rem}
+    .findings-section > h2{font-size:1.5rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--accent)}
+    .finding{background:var(--surface);border-radius:12px;padding:1.5rem;margin-bottom:1rem;border:1px solid var(--border);border-left:4px solid var(--border)}
+    .finding-critical{border-left-color:#ef4444}
+    .finding-high{border-left-color:#f97316}
+    .finding-medium{border-left-color:#eab308}
+    .finding-low{border-left-color:#3b82f6}
+    .finding-info{border-left-color:#6b7280}
+    .finding-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;flex-wrap:wrap}
+    .badge{padding:0.2rem 0.75rem;border-radius:50px;color:white;font-size:0.72rem;font-weight:700;text-transform:uppercase}
+    .rule-id{font-family:monospace;color:var(--accent);font-size:0.88rem}
+    .cat-tag{color:var(--text-dim);font-size:0.82rem;background:var(--surface2);padding:0.12rem 0.5rem;border-radius:4px}
+    .finding-message{margin-bottom:0.75rem}
+    .finding-meta{color:var(--text-dim);font-size:0.82rem;margin-bottom:0.75rem;font-family:monospace}
+    .code-block{background:#0d1117;border-radius:8px;padding:1rem;overflow-x:auto;margin:0.75rem 0;border:1px solid #30363d}
+    .code-block code{font-size:0.82rem;color:#c9d1d9;white-space:pre}
+    .recommendation{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:8px;padding:0.75rem 1rem;font-size:0.88rem;color:#86efac}
+
+    /* Filter */
+    .filter-bar{display:flex;gap:0.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
+    .filter-btn{padding:0.4rem 1rem;border-radius:50px;font-size:0.82rem;font-weight:600;cursor:pointer;background:var(--surface2);color:var(--text-dim);border:1px solid var(--border);transition:all 0.2s}
+    .filter-btn:hover,.filter-btn.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
+
+    /* Footer */
+    footer{text-align:center;padding:2rem 0;color:var(--text-dim);border-top:1px solid var(--border);margin-top:2rem;font-size:0.82rem}
+    footer strong{color:var(--accent)}
+
+    @media(max-width:768px){
+      .summary-grid{grid-template-columns:repeat(2,1fr)}
+      .info-grid{grid-template-columns:1fr 1fr}
+      .report-header h1{font-size:1.8rem}
+      .charts-row{grid-template-columns:1fr}
     }
   </style>
 </head>
 <body>
+
+  <nav class="no-print">
+    <div class="container">
+      <span class="logo">🛡️ ngx-security-audit</span>
+      <div class="nav-links">
+        <a href="#summary">Summary</a>
+        <a href="#charts">Charts</a>
+        <a href="#owasp">OWASP</a>
+        <a href="#findings">Findings</a>
+        <button class="print-btn" onclick="window.print()">🖨️ Print / PDF</button>
+      </div>
+    </div>
+  </nav>
+
   <div class="container">
-    <header>
-      <h1>🛡️ NGX Security Audit Report</h1>
-      <p class="subtitle">Angular Application Security Analysis powered by ngx-security-audit</p>
-    </header>
 
+    <!-- Header -->
+    <div class="report-header">
+      <h1>🛡️ Security Audit Report</h1>
+      <p class="subtitle">${escapeHtml(result.projectName || 'Angular Project')} — Comprehensive Security Analysis</p>
+      <p class="ts">Generated ${new Date(result.scanDate).toLocaleString()} by <strong>ngx-security-audit v1.1.0</strong></p>
+    </div>
+
+    <!-- Project Info -->
     <div class="info-grid">
-      <div class="info-card">
-        <label>Project</label>
-        <div class="value">${escapeHtml(result.projectName || 'Angular Project')}</div>
-      </div>
-      <div class="info-card">
-        <label>Angular Version</label>
-        <div class="value">${escapeHtml(result.angularVersion || 'Unknown')}</div>
-      </div>
-      <div class="info-card">
-        <label>Scan Date</label>
-        <div class="value">${new Date(result.scanDate).toLocaleDateString()}</div>
-      </div>
-      <div class="info-card">
-        <label>Files Scanned</label>
-        <div class="value">${result.filesScanned}</div>
-      </div>
-      <div class="info-card">
-        <label>Rules Executed</label>
-        <div class="value">${result.rulesExecuted}</div>
-      </div>
+      <div class="info-card"><label>Project</label><div class="value">${escapeHtml(result.projectName || 'Angular Project')}</div></div>
+      <div class="info-card"><label>Angular</label><div class="value">${escapeHtml(result.angularVersion || 'N/A')}</div></div>
+      <div class="info-card"><label>Scan Date</label><div class="value">${new Date(result.scanDate).toLocaleDateString()}</div></div>
+      <div class="info-card"><label>Files Scanned</label><div class="value">${result.filesScanned}</div></div>
+      <div class="info-card"><label>Rules Executed</label><div class="value">${result.rulesExecuted}</div></div>
+      <div class="info-card"><label>Threshold</label><div class="value" style="text-transform:uppercase">${escapeHtml(result.threshold)}</div></div>
     </div>
 
-    <div class="score-section">
-      <div class="score-circle">
-        <span class="score-number">${result.score}</span>
-      </div>
+    <!-- Score -->
+    <div class="score-section" id="summary">
+      ${buildScoreGauge(result.score)}
       <div class="score-grade">Grade: ${result.grade}</div>
       <div class="status ${result.passed ? 'status-pass' : 'status-fail'}">
-        ${result.passed ? '✅ PASSED' : '❌ FAILED'} (threshold: ${escapeHtml(result.threshold)})
+        ${result.passed ? '✅ AUDIT PASSED' : '❌ AUDIT FAILED'}
       </div>
     </div>
 
+    <!-- Executive Summary -->
+    ${buildExecutiveSummary(result)}
+
+    <!-- Severity Cards -->
     <div class="summary-grid">
-      <div class="summary-card">
-        <div class="count" style="color:#dc2626">${result.summary.critical}</div>
-        <div class="label">Critical</div>
+      <div class="summary-card"><div class="count" style="color:#ef4444">${result.summary.critical}</div><div class="label">Critical</div></div>
+      <div class="summary-card"><div class="count" style="color:#f97316">${result.summary.high}</div><div class="label">High</div></div>
+      <div class="summary-card"><div class="count" style="color:#eab308">${result.summary.medium}</div><div class="label">Medium</div></div>
+      <div class="summary-card"><div class="count" style="color:#3b82f6">${result.summary.low}</div><div class="label">Low</div></div>
+      <div class="summary-card"><div class="count" style="color:#6b7280">${result.summary.info}</div><div class="label">Info</div></div>
+    </div>
+
+    <!-- Charts -->
+    <div class="charts-row" id="charts">
+      <div class="chart-panel">
+        <h3>Severity Distribution</h3>
+        ${buildDonutChart(result.summary)}
       </div>
-      <div class="summary-card">
-        <div class="count" style="color:#ea580c">${result.summary.high}</div>
-        <div class="label">High</div>
+      <div class="chart-panel">
+        <h3>Severity Breakdown</h3>
+        ${buildBarChart(result.summary)}
       </div>
-      <div class="summary-card">
-        <div class="count" style="color:#d97706">${result.summary.medium}</div>
-        <div class="label">Medium</div>
+      <div class="chart-panel">
+        <h3>OWASP Radar</h3>
+        ${buildOwaspRadar(result.findings)}
       </div>
-      <div class="summary-card">
-        <div class="count" style="color:#2563eb">${result.summary.low}</div>
-        <div class="label">Low</div>
+    </div>
+
+    <div class="charts-row">
+      <div class="chart-panel">
+        <h3>Findings by Category</h3>
+        ${buildCategoryChart(result.findings) || '<p style="color:var(--text-dim)">No findings</p>'}
       </div>
-      <div class="summary-card">
-        <div class="count" style="color:#6b7280">${result.summary.info}</div>
-        <div class="label">Info</div>
+      <div class="chart-panel">
+        <h3>Hotspot Files</h3>
+        ${buildFileHeatmap(result.findings) || '<p style="color:var(--text-dim)">No findings</p>'}
       </div>
     </div>
 
-    <div class="findings-section">
-      <h2>Detailed Findings (${result.summary.total})</h2>
-      ${result.findings.length === 0 ? '<p style="color: #22c55e; text-align: center; padding: 2rem;">🎉 No security issues found! Your Angular application passed all checks.</p>' : findingsHtml}
+    <!-- Top Risks -->
+    ${buildTopRisks(sortedFindings)}
+
+    <!-- OWASP Table -->
+    <div id="owasp"></div>
+    ${buildOwaspTable(result.findings)}
+
+    <!-- Findings -->
+    <div class="findings-section" id="findings">
+      <h2>📝 Detailed Findings (${result.summary.total})</h2>
+
+      <div class="filter-bar no-print">
+        <button class="filter-btn active" onclick="filterFindings('all',this)">All (${result.summary.total})</button>
+        <button class="filter-btn" onclick="filterFindings('critical',this)">Critical (${result.summary.critical})</button>
+        <button class="filter-btn" onclick="filterFindings('high',this)">High (${result.summary.high})</button>
+        <button class="filter-btn" onclick="filterFindings('medium',this)">Medium (${result.summary.medium})</button>
+        <button class="filter-btn" onclick="filterFindings('low',this)">Low (${result.summary.low})</button>
+        <button class="filter-btn" onclick="filterFindings('info',this)">Info (${result.summary.info})</button>
+      </div>
+
+      ${result.findings.length === 0 ? '<p style="color:#22c55e;text-align:center;padding:2rem;">🎉 No security issues found! Your Angular application passed all checks.</p>' : findingsHtml}
     </div>
 
     <footer>
-      <p>Generated by <strong>ngx-security-audit v1.0.0</strong> | ${new Date(result.scanDate).toISOString()}</p>
-      <p>OWASP Top 10 Aligned | ${result.rulesExecuted} Security Rules | Angular-Specific Analysis</p>
+      <p>Generated by <strong>ngx-security-audit v1.1.0</strong> — ${new Date(result.scanDate).toISOString()}</p>
+      <p>OWASP Top 10 2021 Aligned · ${result.rulesExecuted} Security Rules · CWE Mapped · Angular-Specific Analysis</p>
+      <p style="margin-top:0.5rem">© ${new Date().getFullYear()} ngx-security-audit — MIT License</p>
     </footer>
+
   </div>
+
+  <script>
+    function filterFindings(sev, btn) {
+      document.querySelectorAll('.filter-btn').forEach(function(b){b.classList.remove('active')});
+      btn.classList.add('active');
+      document.querySelectorAll('.finding').forEach(function(el) {
+        if (sev === 'all') { el.style.display = ''; return; }
+        el.style.display = el.classList.contains('finding-' + sev) ? '' : 'none';
+      });
+    }
+  </script>
 </body>
 </html>`;
 }
 
-function escapeHtml(str) {
-  if (!str) return '';
-  return String(str)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
-}
-
 module.exports = htmlReport;