coverme-scanner 1.0.0

package/src/report/index.ts

@@ -0,0 +1,483 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import puppeteer from 'puppeteer';
+
+export interface Finding {
+  id: string;
+  title: string;
+  severity: 'critical' | 'high' | 'medium' | 'low' | 'info';
+  category: string;
+  file?: string;
+  line?: number;
+  description: string;
+  code?: string;
+  recommendation: string;
+  confidence?: number;
+  cwe?: string;
+  why?: string;
+  context?: string;
+  checkBefore?: string;
+}
+
+export interface FalsePositive {
+  id: string;
+  title: string;
+  file?: string;
+  reason: string;
+}
+
+export interface ScanReport {
+  projectName: string;
+  scanDate: string;
+  findings: Finding[];
+  falsePositives: FalsePositive[];
+  positiveObservations: string[];
+  scanDuration?: number;
+  agentCount?: number;
+}
+
+function escapeHtml(text: string): string {
+  if (!text) return '';
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+function calculateScore(findings: Finding[]): { grade: string; value: number } {
+  const critical = findings.filter(f => f.severity === 'critical').length;
+  const high = findings.filter(f => f.severity === 'high').length;
+  const medium = findings.filter(f => f.severity === 'medium').length;
+  const low = findings.filter(f => f.severity === 'low').length;
+
+  let penalty = 0;
+  penalty += Math.min(critical * 20, 50);
+  penalty += Math.min(high * 5, 30);
+  penalty += Math.min(medium * 2, 15);
+  penalty += Math.min(low * 0.5, 5);
+
+  const score = Math.max(0, Math.round(100 - penalty));
+
+  let grade: string;
+  if (critical > 0) grade = 'f';
+  else if (score >= 90) grade = 'a';
+  else if (score >= 75) grade = 'b';
+  else if (score >= 60) grade = 'c';
+  else if (score >= 40) grade = 'd';
+  else grade = 'f';
+
+  return { grade, value: score };
+}
+
+function generateSummary(findings: Finding[]): string {
+  const critical = findings.filter(f => f.severity === 'critical').length;
+  const high = findings.filter(f => f.severity === 'high').length;
+  const total = findings.length;
+
+  if (critical > 0) {
+    return `This scan identified ${total} findings, including ${critical} critical issue${critical > 1 ? 's' : ''} requiring immediate attention.${high > 0 ? ` Additionally, ${high} high-priority issues were found.` : ''} Immediate remediation is recommended.`;
+  }
+  if (high > 0) {
+    return `This scan identified ${total} findings, with ${high} high-priority issue${high > 1 ? 's' : ''} that should be addressed soon. No critical vulnerabilities were detected.`;
+  }
+  if (total > 0) {
+    return `This scan identified ${total} findings, primarily medium and low priority items. No critical or high-severity issues were detected.`;
+  }
+  return `Excellent! No significant security or quality issues were found.`;
+}
+
+function renderFinding(f: Finding, severity: string): string {
+  const dataAttrs = `data-finding-id="${escapeHtml(f.id)}" data-file="${escapeHtml(f.file || '')}" data-line="${f.line || ''}" data-description="${escapeHtml(f.description)}" data-recommendation="${escapeHtml(f.recommendation)}" data-severity="${severity}" data-why="${escapeHtml(f.why || '')}" data-context="${escapeHtml(f.context || '')}" data-checkbefore="${escapeHtml(f.checkBefore || '')}"`;
+
+  const whyBox = f.why ? `
+    <div class="info-box info-why">
+      <span class="info-label">Why This Matters</span>
+      <p>${escapeHtml(f.why)}</p>
+    </div>` : '';
+
+  const contextBox = f.context ? `
+    <div class="info-box info-context">
+      <span class="info-label">Code Context</span>
+      <p>${escapeHtml(f.context)}</p>
+    </div>` : '';
+
+  const checkBox = f.checkBefore ? `
+    <div class="info-box info-check">
+      <span class="info-label">Check Before Fixing</span>
+      <p>${escapeHtml(f.checkBefore)}</p>
+    </div>` : '';
+
+  const codeBlock = f.code ? `
+    <div class="code-block"><code>${escapeHtml(f.code)}</code></div>` : '';
+
+  return `
+    <div class="finding" ${dataAttrs}>
+      <div class="finding-header" onclick="this.parentElement.classList.toggle('open')">
+        <span class="severity-badge sev-${severity}">${severity}</span>
+        <span class="finding-title">${escapeHtml(f.title)}</span>
+        <span class="finding-file">${f.file ? escapeHtml(f.file) : ''}</span>
+        <svg class="expand-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+      </div>
+      <div class="finding-body">
+        <div class="location">
+          <span class="location-file">${escapeHtml(f.file || '')}</span>
+          <span class="location-line">${f.line ? ':' + f.line : ''}</span>
+          <button class="copy-btn" onclick="event.stopPropagation(); copyText('${escapeHtml(f.file || '')}:${f.line || ''}', this)">Copy</button>
+        </div>
+
+        <div class="info-grid">
+          <div class="info-box info-problem">
+            <span class="info-label">Problem</span>
+            <p>${escapeHtml(f.description)}</p>
+          </div>
+          ${whyBox}
+          ${contextBox}
+          ${checkBox}
+          ${codeBlock}
+          <div class="info-box info-fix">
+            <span class="info-label">How to Fix</span>
+            <p>${escapeHtml(f.recommendation)}</p>
+          </div>
+        </div>
+
+        <div class="prompt-box">
+          <div class="prompt-header">
+            <span class="prompt-label">Claude Code Prompt</span>
+            <button class="copy-btn" onclick="event.stopPropagation(); copyPrompt(this.closest('.finding'))">Copy</button>
+          </div>
+          <div class="prompt-text">Fix ${escapeHtml(f.id)} in ${escapeHtml(f.file || '')}:${f.line || ''}
+
+Problem: ${escapeHtml(f.description)}
+${f.why ? `\nWhy: ${escapeHtml(f.why)}` : ''}
+${f.context ? `\nContext: ${escapeHtml(f.context)}` : ''}
+${f.checkBefore ? `\nCheck first: ${escapeHtml(f.checkBefore)}` : ''}
+
+Solution: ${escapeHtml(f.recommendation)}</div>
+        </div>
+      </div>
+    </div>`;
+}
+
+export function generateHtml(report: ScanReport): string {
+  const { grade, value } = calculateScore(report.findings);
+
+  const critical = report.findings.filter(f => f.severity === 'critical');
+  const high = report.findings.filter(f => f.severity === 'high');
+  const medium = report.findings.filter(f => f.severity === 'medium');
+  const low = report.findings.filter(f => f.severity === 'low' || f.severity === 'info');
+
+  const criticalSection = critical.length > 0 ? `
+    <section>
+      <h2 class="section-title">Critical Issues</h2>
+      ${critical.map(f => renderFinding(f, 'critical')).join('\n')}
+    </section>` : '';
+
+  const highSection = high.length > 0 ? `
+    <section>
+      <h2 class="section-title">High Priority</h2>
+      ${high.map(f => renderFinding(f, 'high')).join('\n')}
+    </section>` : '';
+
+  const mediumSection = medium.length > 0 ? `
+    <section>
+      <h2 class="section-title">Medium Priority</h2>
+      ${medium.map(f => renderFinding(f, 'medium')).join('\n')}
+    </section>` : '';
+
+  const lowSection = low.length > 0 ? `
+    <section>
+      <h2 class="section-title">Low Priority</h2>
+      ${low.map(f => renderFinding(f, 'low')).join('\n')}
+    </section>` : '';
+
+  const positiveSection = report.positiveObservations.length > 0 ? `
+    <section>
+      <h2 class="section-title">What's Good</h2>
+      <ul class="positive-list">
+        ${report.positiveObservations.map(obs => `
+          <li class="positive-item">
+            <span class="check-icon">&#10003;</span>
+            <span>${escapeHtml(obs)}</span>
+          </li>
+        `).join('\n')}
+      </ul>
+    </section>` : '';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(report.projectName)} - Security Report</title>
+  <style>
+    :root {
+      --bg: #fafafa;
+      --card: #ffffff;
+      --text: #111111;
+      --text-muted: #666666;
+      --text-light: #999999;
+      --border: #eaeaea;
+      --accent: #000000;
+      --critical: #e11d48;
+      --high: #f97316;
+      --medium: #eab308;
+      --low: #3b82f6;
+      --success: #10b981;
+      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      --mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: var(--font); font-size: 15px; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
+    .container { max-width: 800px; margin: 0 auto; padding: 60px 24px; }
+
+    header { text-align: center; margin-bottom: 60px; }
+    .logo { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-light); margin-bottom: 20px; }
+    h1 { font-size: 42px; font-weight: 700; letter-spacing: -1px; margin-bottom: 8px; }
+    .date { color: var(--text-muted); font-size: 14px; }
+
+    .score-section { display: flex; justify-content: center; gap: 40px; margin: 50px 0; padding: 40px; background: var(--card); border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
+    .score-circle { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: white; text-transform: uppercase; }
+    .grade-a { background: var(--success); }
+    .grade-b { background: #22c55e; }
+    .grade-c { background: var(--medium); }
+    .grade-d { background: var(--high); }
+    .grade-f { background: var(--critical); }
+    .stats { display: flex; align-items: center; gap: 32px; }
+    .stat { text-align: center; }
+    .stat-num { font-size: 28px; font-weight: 700; line-height: 1; }
+    .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-light); margin-top: 6px; }
+    .stat-critical .stat-num { color: var(--critical); }
+    .stat-high .stat-num { color: var(--high); }
+    .stat-medium .stat-num { color: var(--medium); }
+    .stat-low .stat-num { color: var(--low); }
+
+    .copy-all { text-align: center; margin: 40px 0; }
+    .copy-all-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: var(--accent); color: white; border: none; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.2s, opacity 0.2s; }
+    .copy-all-btn:hover { transform: translateY(-2px); opacity: 0.9; }
+    .copy-all-btn.copied { background: var(--success); }
+    .copy-hint { margin-top: 10px; font-size: 13px; color: var(--text-light); }
+
+    section { margin-bottom: 50px; }
+    .section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-light); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
+
+    .finding { background: var(--card); border-radius: 12px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid var(--border); }
+    .finding-header { display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; transition: background 0.15s; }
+    .finding-header:hover { background: var(--bg); }
+    .severity-badge { padding: 4px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: white; }
+    .sev-critical { background: var(--critical); }
+    .sev-high { background: var(--high); }
+    .sev-medium { background: var(--medium); color: #000; }
+    .sev-low { background: var(--low); }
+    .finding-title { flex: 1; font-weight: 600; font-size: 15px; }
+    .finding-file { font-family: var(--mono); font-size: 12px; color: var(--text-light); }
+    .expand-arrow { color: var(--text-light); transition: transform 0.2s; }
+    .finding.open .expand-arrow { transform: rotate(180deg); }
+
+    .finding-body { display: none; padding: 0 24px 24px; }
+    .finding.open .finding-body { display: block; }
+
+    .location { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #f4f4f5; border-radius: 8px; font-family: var(--mono); font-size: 13px; margin-bottom: 20px; }
+    .location-file { color: var(--text); }
+    .location-line { color: var(--text-muted); }
+    .copy-btn { padding: 4px 10px; background: white; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; cursor: pointer; margin-left: 8px; }
+    .copy-btn:hover { background: var(--bg); }
+
+    .info-grid { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
+    .info-box { padding: 16px 20px; border-radius: 10px; font-size: 14px; line-height: 1.6; }
+    .info-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; display: block; }
+    .info-problem { background: #fef2f2; border-left: 3px solid var(--critical); }
+    .info-problem .info-label { color: var(--critical); }
+    .info-why { background: #fff7ed; border-left: 3px solid var(--high); }
+    .info-why .info-label { color: var(--high); }
+    .info-context { background: #f0f9ff; border-left: 3px solid var(--low); }
+    .info-context .info-label { color: var(--low); }
+    .info-check { background: #fefce8; border-left: 3px solid var(--medium); }
+    .info-check .info-label { color: #a16207; }
+    .info-fix { background: #f0fdf4; border-left: 3px solid var(--success); }
+    .info-fix .info-label { color: var(--success); }
+
+    .code-block { background: #18181b; border-radius: 10px; padding: 16px 20px; margin: 16px 0; overflow-x: auto; }
+    .code-block code { font-family: var(--mono); font-size: 13px; color: #e4e4e7; line-height: 1.6; white-space: pre; }
+
+    .prompt-box { margin-top: 20px; padding: 16px 20px; background: #18181b; border-radius: 10px; }
+    .prompt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+    .prompt-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #71717a; }
+    .prompt-text { font-family: var(--mono); font-size: 12px; color: #a1a1aa; line-height: 1.7; white-space: pre-wrap; }
+
+    .summary-box { background: var(--card); border-radius: 12px; padding: 24px; margin-bottom: 20px; border: 1px solid var(--border); }
+    .summary-text { color: var(--text-muted); line-height: 1.8; }
+
+    .positive-list { list-style: none; }
+    .positive-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
+    .positive-item:last-child { border-bottom: none; }
+    .check-icon { width: 22px; height: 22px; background: #dcfce7; color: var(--success); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
+
+    footer { margin-top: 80px; padding-top: 30px; border-top: 1px solid var(--border); text-align: center; font-size: 13px; color: var(--text-light); }
+
+    @media (max-width: 768px) {
+      .container { padding: 30px 16px; }
+      h1 { font-size: 28px; }
+      .score-section { flex-direction: column; gap: 24px; padding: 24px; }
+      .stats { flex-wrap: wrap; justify-content: center; gap: 20px; }
+      .finding-header { flex-wrap: wrap; gap: 10px; padding: 16px; }
+      .finding-title { width: 100%; order: 2; }
+      .finding-file { width: 100%; order: 3; }
+    }
+
+    @media print {
+      .finding-body { display: block !important; }
+      .copy-all, .copy-btn, .prompt-box { display: none; }
+      .finding { break-inside: avoid; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="logo">Security Report</div>
+      <h1>${escapeHtml(report.projectName)}</h1>
+      <p class="date">${report.scanDate}</p>
+    </header>
+
+    <div class="score-section">
+      <div class="score-circle grade-${grade}">${grade}</div>
+      <div class="stats">
+        <div class="stat stat-critical">
+          <div class="stat-num">${critical.length}</div>
+          <div class="stat-label">Critical</div>
+        </div>
+        <div class="stat stat-high">
+          <div class="stat-num">${high.length}</div>
+          <div class="stat-label">High</div>
+        </div>
+        <div class="stat stat-medium">
+          <div class="stat-num">${medium.length}</div>
+          <div class="stat-label">Medium</div>
+        </div>
+        <div class="stat stat-low">
+          <div class="stat-num">${low.length}</div>
+          <div class="stat-label">Low</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="summary-box">
+      <p class="summary-text">${generateSummary(report.findings)}</p>
+    </div>
+
+    <div class="copy-all">
+      <button class="copy-all-btn" onclick="copyAllFixes(this)">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+          <rect x="9" y="9" width="13" height="13" rx="2"></rect>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+        </svg>
+        Copy All Fixes for Claude Code
+      </button>
+      <p class="copy-hint">Paste directly into Claude Code to fix everything</p>
+    </div>
+
+    ${criticalSection}
+    ${highSection}
+    ${mediumSection}
+    ${lowSection}
+    ${positiveSection}
+
+    <footer>
+      <p>Generated by CoverMe Scanner</p>
+      <p>${report.scanDuration ? Math.round(report.scanDuration / 1000) + 's' : ''}${report.agentCount ? ' · ' + report.agentCount + ' agents' : ''}</p>
+    </footer>
+  </div>
+
+  <script>
+    function copyText(text, btn) {
+      navigator.clipboard.writeText(text).then(() => {
+        btn.textContent = 'Copied!';
+        setTimeout(() => btn.textContent = 'Copy', 1500);
+      });
+    }
+
+    function copyPrompt(el) {
+      const text = el.querySelector('.prompt-text').textContent;
+      const btn = el.querySelector('.prompt-box .copy-btn');
+      copyText(text, btn);
+    }
+
+    function copyAllFixes(btn) {
+      const findings = document.querySelectorAll('.finding[data-finding-id]');
+      let prompt = 'Fix these security issues:\\n\\n';
+
+      findings.forEach((f, i) => {
+        prompt += '## ' + (i + 1) + '. [' + f.dataset.severity.toUpperCase() + '] ' + f.dataset.findingId + '\\n';
+        prompt += 'File: ' + f.dataset.file + ':' + f.dataset.line + '\\n';
+        prompt += 'Problem: ' + f.dataset.description + '\\n';
+        if (f.dataset.why) prompt += 'Why: ' + f.dataset.why + '\\n';
+        if (f.dataset.checkbefore) prompt += 'Check first: ' + f.dataset.checkbefore + '\\n';
+        prompt += 'Fix: ' + f.dataset.recommendation + '\\n\\n';
+      });
+
+      navigator.clipboard.writeText(prompt).then(() => {
+        btn.classList.add('copied');
+        btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg> Copied!';
+        setTimeout(() => {
+          btn.classList.remove('copied');
+          btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy All Fixes for Claude Code';
+        }, 2500);
+      });
+    }
+
+    window.onbeforeprint = () => document.querySelectorAll('.finding').forEach(f => f.classList.add('open'));
+  </script>
+</body>
+</html>`;
+}
+
+export async function generatePdf(report: ScanReport, outputPath: string): Promise<void> {
+  const html = generateHtml(report);
+
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ['--no-sandbox', '--disable-setuid-sandbox']
+  });
+
+  const page = await browser.newPage();
+  await page.setViewport({ width: 900, height: 800 });
+  await page.setContent(html, { waitUntil: 'networkidle0' });
+  await page.evaluate('document.querySelectorAll(".finding").forEach(f => f.classList.add("open"))');
+
+  const dimensions = await page.evaluate(`({
+    width: document.body.scrollWidth,
+    height: document.body.scrollHeight
+  })`) as { width: number; height: number };
+
+  await page.pdf({
+    path: outputPath,
+    width: '900px',
+    height: `${dimensions.height + 80}px`,
+    margin: { top: '40px', right: '40px', bottom: '40px', left: '40px' },
+    printBackground: true
+  });
+
+  await browser.close();
+  console.log(`PDF generated: ${outputPath}`);
+}
+
+export async function generateReport(
+  jsonPath: string,
+  outputPath?: string,
+  format: 'pdf' | 'html' = 'pdf'
+): Promise<void> {
+  const reportData = JSON.parse(fs.readFileSync(jsonPath, 'utf-8')) as ScanReport;
+
+  const ext = format === 'pdf' ? '.pdf' : '.html';
+  const finalPath = outputPath || jsonPath.replace('.json', ext);
+
+  if (format === 'pdf') {
+    await generatePdf(reportData, finalPath);
+  } else {
+    const html = generateHtml(reportData);
+    fs.writeFileSync(finalPath, html);
+    console.log(`HTML generated: ${finalPath}`);
+  }
+}