npm - thuban - Versions diffs - 0.3.3 → 0.4.0 - Mend

thuban 0.3.3 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (960) hide show

package/packages/scanner/html-report.js DELETED Viewed

@@ -1,634 +0,0 @@
-/**
- * @thuban-dna
- * @purpose Generate visual HTML tech debt dashboards
- * @module thuban
- * @layer presentation
- * @imports-from tech-debt-analyzer, dependency-graph
- * @exports-to cli, api
- * @side-effects File system write (HTML output)
- * @critical-for CTO-facing reports, sales demos, enterprise value proposition
- */
-const fs = require('fs');
-const path = require('path');
-class HtmlReportGenerator {
-  constructor(config = {}) {
-    this.config = {
-      rootPath: config.rootPath || process.cwd(),
-      outputDir: config.outputDir || process.cwd(),
-      ...config
-    };
-  }
-  /**
-   * Generate a full HTML dashboard report
-   */
-  generate(debt, depData = {}, meta = {}) {
-    const timestamp = new Date().toISOString();
-    const projectName = meta.projectName || path.basename(this.config.rootPath);
-    const html = `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Thuban Report — ${this._esc(projectName)}</title>
-<style>
-${this._css()}
-</style>
-</head>
-<body>
-<div class="container">
-  ${this._header(projectName, timestamp, debt)}
-  ${this._overallScore(debt)}
-  ${this._categoryCards(debt)}
-  ${this._motherCodeSection(debt)}
-  ${this._topIssues(debt)}
-  ${this._fixableItems(debt)}
-  ${this._dependencySection(depData)}
-  ${this._recommendations(debt)}
-  ${this._footer(debt, meta)}
-</div>
-<script>
-${this._js()}
-</script>
-</body>
-</html>`;
-    return html;
-  }
-  /**
-   * Generate and write to file
-   */
-  async writeReport(debt, depData = {}, meta = {}) {
-    const html = this.generate(debt, depData, meta);
-    const filename = `thuban-report-${new Date().toISOString().slice(0, 10)}.html`;
-    const outputPath = path.join(this.config.outputDir, filename);
-    fs.writeFileSync(outputPath, html, 'utf-8');
-    return outputPath;
-  }
-  // ─── HTML Sections ──────────────────────────────────────
-  _header(projectName, timestamp, debt) {
-    return `
-  <header class="header">
-    <div class="header-left">
-      <div class="logo">
-        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-          <polygon points="16,2 30,28 2,28" stroke="#00f6ff" stroke-width="2" fill="none"/>
-          <polygon points="16,8 25,25 7,25" stroke="#00f6ff" stroke-width="1" fill="rgba(0,246,255,0.1)"/>
-          <circle cx="16" cy="18" r="3" fill="#00f6ff"/>
-        </svg>
-        <h1>THUBAN</h1>
-      </div>
-      <span class="subtitle">Code Health Report</span>
-    </div>
-    <div class="header-right">
-      <div class="meta-item"><span class="meta-label">Project</span><span class="meta-value">${this._esc(projectName)}</span></div>
-      <div class="meta-item"><span class="meta-label">Generated</span><span class="meta-value">${new Date(timestamp).toLocaleString()}</span></div>
-      <div class="meta-item"><span class="meta-label">Files</span><span class="meta-value">${debt.stats.totalFiles}</span></div>
-      <div class="meta-item"><span class="meta-label">Scan Time</span><span class="meta-value">${debt.stats.scanTime}ms</span></div>
-    </div>
-  </header>`;
-  }
-  _overallScore(debt) {
-    const score = debt.scores.overall;
-    const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 70 ? 'C' : score >= 60 ? 'D' : 'F';
-    const gradeClass = score >= 80 ? 'grade-good' : score >= 60 ? 'grade-warn' : 'grade-bad';
-    const circumference = 2 * Math.PI * 54;
-    const offset = circumference - (score / 100) * circumference;
-    return `
-  <section class="score-section">
-    <div class="score-ring-container">
-      <svg class="score-ring" viewBox="0 0 120 120">
-        <circle cx="60" cy="60" r="54" stroke="#1a1a2e" stroke-width="8" fill="none"/>
-        <circle cx="60" cy="60" r="54" stroke="${this._scoreColor(score)}" stroke-width="8" fill="none"
-          stroke-dasharray="${circumference}" stroke-dashoffset="${offset}"
-          stroke-linecap="round" transform="rotate(-90 60 60)" class="score-progress"/>
-      </svg>
-      <div class="score-inner">
-        <span class="score-number">${score}</span>
-        <span class="score-label">/ 100</span>
-      </div>
-    </div>
-    <div class="score-details">
-      <div class="grade ${gradeClass}">Grade ${grade}</div>
-      <div class="score-summary">
-        <div class="stat"><span class="stat-num">${debt.stats.totalIssues}</span><span class="stat-label">Issues</span></div>
-        <div class="stat"><span class="stat-num">${debt.stats.fixableCount}</span><span class="stat-label">Auto-fixable</span></div>
-        <div class="stat"><span class="stat-num">${debt.stats.manualCount}</span><span class="stat-label">Manual</span></div>
-        <div class="stat"><span class="stat-num">${debt.stats.estimatedFixTime}</span><span class="stat-label">Est. Fix Time</span></div>
-      </div>
-    </div>
-  </section>`;
-  }
-  _categoryCards(debt) {
-    const categories = [
-      { key: 'security', icon: '🛡️', label: 'Security' },
-      { key: 'architecture', icon: '🏗️', label: 'Architecture' },
-      { key: 'codeQuality', icon: '📝', label: 'Code Quality' },
-      { key: 'motherCode', icon: '🧬', label: 'Mother Code' },
-      { key: 'dependencies', icon: '🔗', label: 'Dependencies' },
-    ];
-    const cards = categories.map(cat => {
-      const score = debt.scores[cat.key] || 0;
-      const catData = debt.categories[cat.key] || {};
-      const issueCount = catData.issues?.length || 0;
-      return `
-      <div class="category-card">
-        <div class="card-header">
-          <span class="card-icon">${cat.icon}</span>
-          <span class="card-label">${cat.label}</span>
-        </div>
-        <div class="card-score" style="color: ${this._scoreColor(score)}">${score}%</div>
-        <div class="card-bar">
-          <div class="card-bar-fill" style="width: ${score}%; background: ${this._scoreColor(score)}"></div>
-        </div>
-        <div class="card-issues">${issueCount} issue${issueCount !== 1 ? 's' : ''}</div>
-      </div>`;
-    }).join('');
-    return `
-  <section class="categories-section">
-    <h2>Category Breakdown</h2>
-    <div class="category-grid">${cards}</div>
-  </section>`;
-  }
-  _motherCodeSection(debt) {
-    const mc = debt.categories.motherCode;
-    if (!mc) return '';
-    const coverage = mc.coverage || 0;
-    return `
-  <section class="mother-code-section">
-    <h2>🧬 Mother Code Coverage</h2>
-    <div class="mc-grid">
-      <div class="mc-stat">
-        <div class="mc-circle" style="background: conic-gradient(${this._scoreColor(coverage)} ${coverage * 3.6}deg, #1a1a2e ${coverage * 3.6}deg)">
-          <span>${coverage}%</span>
-        </div>
-        <span class="mc-label">Coverage</span>
-      </div>
-      <div class="mc-details">
-        <div class="mc-row"><span class="mc-dot dot-green"></span> Annotated: <strong>${mc.annotated || 0}</strong> files</div>
-        <div class="mc-row"><span class="mc-dot dot-yellow"></span> Missing: <strong>${mc.missing || 0}</strong> files</div>
-        <div class="mc-row"><span class="mc-dot dot-red"></span> Drifted: <strong>${mc.drifted || 0}</strong> files</div>
-      </div>
-      <div class="mc-action">
-        <p>Inject Mother Code DNA into all files:</p>
-        <code>thuban inject [path] --fix</code>
-      </div>
-    </div>
-  </section>`;
-  }
-  _topIssues(debt) {
-    const allIssues = [...(debt.manual || []), ...(debt.fixable || [])];
-    const sorted = allIssues
-      .filter(i => i.severity !== 'info')
-      .sort((a, b) => {
-        const sevOrder = { critical: 0, high: 1, error: 1, medium: 2, warning: 2, low: 3 };
-        return (sevOrder[a.severity] || 4) - (sevOrder[b.severity] || 4);
-      })
-      .slice(0, 20);
-    if (sorted.length === 0) return '';
-    const rows = sorted.map(issue => `
-        <tr>
-          <td><span class="sev sev-${issue.severity}">${(issue.severity || '').toUpperCase()}</span></td>
-          <td class="file-cell">${this._esc(issue.file || '')}</td>
-          <td>${this._esc(issue.message || issue.type || '')}</td>
-          <td>${issue.fixable ? '<span class="fixable-badge">Auto-fix</span>' : '<span class="manual-badge">Manual</span>'}</td>
-        </tr>`).join('');
-    return `
-  <section class="issues-section">
-    <h2>Top Issues</h2>
-    <table class="issues-table">
-      <thead><tr><th>Severity</th><th>File</th><th>Issue</th><th>Fix</th></tr></thead>
-      <tbody>${rows}</tbody>
-    </table>
-  </section>`;
-  }
-  _fixableItems(debt) {
-    if (!debt.fixable || debt.fixable.length === 0) return '';
-    const grouped = {};
-    for (const item of debt.fixable) {
-      const action = item.fixAction || 'unknown';
-      if (!grouped[action]) grouped[action] = { count: 0, label: action };
-      grouped[action].count++;
-    }
-    const labels = {
-      inject_widget: 'Inject Mother Code DNA',
-      regenerate_widget: 'Update stale annotations',
-      remove_console_log: 'Remove debug console.logs',
-      extract_to_env: 'Extract hardcoded secrets to .env',
-      flag_for_removal: 'Remove orphan files',
-      break_circular: 'Break circular dependencies',
-    };
-    const items = Object.entries(grouped)
-      .sort((a, b) => b[1].count - a[1].count)
-      .map(([action, data]) => `
-        <div class="fix-item">
-          <span class="fix-count">${data.count}</span>
-          <span class="fix-label">${labels[action] || action}</span>
-        </div>`).join('');
-    return `
-  <section class="fixable-section">
-    <h2>Auto-Fixable Tech Debt</h2>
-    <p class="fix-intro">Run <code>thuban fix [path] --fix</code> to resolve ${debt.stats.fixableCount} items automatically:</p>
-    <div class="fix-grid">${items}</div>
-  </section>`;
-  }
-  _dependencySection(depData) {
-    if (!depData || (!depData.circular?.length && !depData.orphans?.length && !depData.critical?.length)) {
-      return '';
-    }
-    let content = '<section class="deps-section"><h2>Dependency Analysis</h2><div class="deps-grid">';
-    if (depData.circular?.length > 0) {
-      content += `
-      <div class="dep-card dep-danger">
-        <h3>Circular Dependencies</h3>
-        <span class="dep-count">${depData.circular.length}</span>
-        <ul>${depData.circular.slice(0, 5).map(c => `<li>${this._esc(Array.isArray(c) ? c.join(' → ') : String(c))}</li>`).join('')}</ul>
-      </div>`;
-    }
-    if (depData.orphans?.length > 0) {
-      content += `
-      <div class="dep-card dep-warn">
-        <h3>Orphan Files</h3>
-        <span class="dep-count">${depData.orphans.length}</span>
-        <p>Files with no imports and no consumers</p>
-      </div>`;
-    }
-    if (depData.critical?.length > 0) {
-      content += `
-      <div class="dep-card dep-info">
-        <h3>Critical Files</h3>
-        <span class="dep-count">${depData.critical.length}</span>
-        <p>Files with the most dependents — high blast radius</p>
-      </div>`;
-    }
-    content += '</div></section>';
-    return content;
-  }
-  _recommendations(debt) {
-    const recs = [];
-    if (debt.scores.security < 80) recs.push({ priority: 'critical', text: 'Fix security issues immediately — hardcoded secrets or injection risks detected' });
-    if ((debt.categories.architecture?.issues || []).filter(i => i.type === 'circular_dependency').length > 0) recs.push({ priority: 'high', text: 'Resolve circular dependencies to prevent build fragility' });
-    if ((debt.categories.motherCode?.coverage || 0) < 50) recs.push({ priority: 'medium', text: `Run <code>thuban inject --fix</code> to raise Mother Code coverage from ${debt.categories.motherCode?.coverage || 0}% to 100%` });
-    if (debt.stats.fixableCount > 0) recs.push({ priority: 'medium', text: `Run <code>thuban fix --fix</code> to auto-resolve ${debt.stats.fixableCount} items` });
-    if ((debt.categories.motherCode?.drifted || 0) > 0) recs.push({ priority: 'low', text: `${debt.categories.motherCode.drifted} files have drifted from their Mother Code annotations — regenerate with <code>thuban fix --fix</code>` });
-    if (recs.length === 0) {
-      return `
-  <section class="recs-section">
-    <h2>Recommendations</h2>
-    <div class="rec-clean">Codebase is in excellent health. No critical actions needed.</div>
-  </section>`;
-    }
-    const items = recs.map(r => `
-      <div class="rec-item rec-${r.priority}">
-        <span class="rec-priority">${r.priority.toUpperCase()}</span>
-        <span class="rec-text">${r.text}</span>
-      </div>`).join('');
-    return `
-  <section class="recs-section">
-    <h2>Recommendations</h2>
-    ${items}
-  </section>`;
-  }
-  _footer(debt, meta) {
-    return `
-  <footer class="footer">
-    <div class="footer-brand">
-      <span>Generated by <strong>Thuban</strong> Code Health Engine v0.2.0</span>
-      <span class="footer-link">thuban.dev</span>
-    </div>
-    <div class="footer-meta">
-      <span>${debt.stats.totalFiles} files scanned in ${debt.stats.scanTime}ms</span>
-    </div>
-  </footer>`;
-  }
-  // ─── CSS ────────────────────────────────────────────────
-  _css() {
-    return `
-:root {
-  --bg: #0a0a1a;
-  --surface: #12122a;
-  --surface2: #1a1a3e;
-  --border: #2a2a5a;
-  --text: #e0e0f0;
-  --text-dim: #8888aa;
-  --cyan: #00f6ff;
-  --green: #00ff88;
-  --yellow: #ffd93d;
-  --red: #ff4444;
-  --orange: #ff9500;
-  --purple: #a855f7;
-  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
-  --mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-}
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--font);
-  line-height: 1.6;
-  min-height: 100vh;
-}
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-/* Header */
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem 2rem;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  margin-bottom: 2rem;
-}
-.header-left { display: flex; align-items: center; gap: 1.5rem; }
-.logo { display: flex; align-items: center; gap: 0.75rem; }
-.logo h1 { font-size: 1.5rem; letter-spacing: 0.3em; color: var(--cyan); font-weight: 300; }
-.subtitle { color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; }
-.header-right { display: flex; gap: 2rem; }
-.meta-item { display: flex; flex-direction: column; align-items: flex-end; }
-.meta-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
-.meta-value { font-size: 0.9rem; color: var(--text); font-family: var(--mono); }
-/* Score Section */
-.score-section {
-  display: flex;
-  align-items: center;
-  gap: 3rem;
-  padding: 2rem;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  margin-bottom: 2rem;
-}
-.score-ring-container { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
-.score-ring { width: 100%; height: 100%; }
-.score-progress { transition: stroke-dashoffset 1s ease-out; }
-.score-inner {
-  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-  text-align: center;
-}
-.score-number { font-size: 2.5rem; font-weight: 700; color: var(--text); display: block; line-height: 1; }
-.score-label { font-size: 0.8rem; color: var(--text-dim); }
-.score-details { flex: 1; }
-.grade {
-  font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem;
-  letter-spacing: 0.05em;
-}
-.grade-good { color: var(--green); }
-.grade-warn { color: var(--yellow); }
-.grade-bad { color: var(--red); }
-.score-summary { display: flex; gap: 2rem; }
-.stat { display: flex; flex-direction: column; }
-.stat-num { font-size: 1.4rem; font-weight: 600; font-family: var(--mono); }
-.stat-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; }
-/* Category Cards */
-.categories-section { margin-bottom: 2rem; }
-.categories-section h2 { margin-bottom: 1rem; font-size: 1.1rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.1em; }
-.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
-.category-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 1.25rem;
-  text-align: center;
-  transition: border-color 0.2s;
-}
-.category-card:hover { border-color: var(--cyan); }
-.card-header { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; }
-.card-icon { font-size: 1.2rem; }
-.card-label { font-size: 0.85rem; color: var(--text-dim); }
-.card-score { font-size: 2rem; font-weight: 700; font-family: var(--mono); margin-bottom: 0.5rem; }
-.card-bar { height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; margin-bottom: 0.5rem; }
-.card-bar-fill { height: 100%; border-radius: 2px; transition: width 0.8s ease-out; }
-.card-issues { font-size: 0.75rem; color: var(--text-dim); }
-/* Mother Code */
-.mother-code-section {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 2rem;
-  margin-bottom: 2rem;
-}
-.mother-code-section h2 { margin-bottom: 1.5rem; font-size: 1.1rem; color: var(--cyan); }
-.mc-grid { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 2rem; align-items: center; }
-.mc-circle {
-  width: 120px; height: 120px; border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  margin: 0 auto;
-}
-.mc-circle span { background: var(--bg); width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; font-family: var(--mono); }
-.mc-label { text-align: center; margin-top: 0.5rem; color: var(--text-dim); font-size: 0.85rem; }
-.mc-row { padding: 0.4rem 0; display: flex; align-items: center; gap: 0.5rem; }
-.mc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
-.dot-green { background: var(--green); }
-.dot-yellow { background: var(--yellow); }
-.dot-red { background: var(--red); }
-.mc-action code {
-  display: inline-block; background: var(--bg); padding: 0.4rem 0.8rem;
-  border-radius: 6px; font-family: var(--mono); color: var(--cyan); margin-top: 0.5rem;
-  border: 1px solid var(--border);
-}
-/* Issues Table */
-.issues-section { margin-bottom: 2rem; }
-.issues-section h2 { margin-bottom: 1rem; font-size: 1.1rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.1em; }
-.issues-table {
-  width: 100%; border-collapse: collapse;
-  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
-  overflow: hidden;
-}
-.issues-table th {
-  text-align: left; padding: 0.75rem 1rem; background: var(--surface2);
-  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim);
-  border-bottom: 1px solid var(--border);
-}
-.issues-table td { padding: 0.6rem 1rem; border-bottom: 1px solid rgba(42,42,90,0.5); font-size: 0.85rem; }
-.issues-table tr:last-child td { border-bottom: none; }
-.issues-table tr:hover { background: rgba(0,246,255,0.03); }
-.file-cell { font-family: var(--mono); font-size: 0.8rem; color: var(--cyan); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sev {
-  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px;
-  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
-}
-.sev-critical { background: rgba(255,68,68,0.2); color: var(--red); }
-.sev-high, .sev-error { background: rgba(255,149,0,0.2); color: var(--orange); }
-.sev-medium, .sev-warning { background: rgba(255,217,61,0.2); color: var(--yellow); }
-.sev-low, .sev-info { background: rgba(136,136,170,0.15); color: var(--text-dim); }
-.fixable-badge { background: rgba(0,255,136,0.15); color: var(--green); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; }
-.manual-badge { background: rgba(255,217,61,0.15); color: var(--yellow); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; }
-/* Fixable Section */
-.fixable-section {
-  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
-  padding: 2rem; margin-bottom: 2rem;
-}
-.fixable-section h2 { margin-bottom: 0.5rem; font-size: 1.1rem; color: var(--green); }
-.fix-intro { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.5rem; }
-.fix-intro code { background: var(--bg); padding: 0.2rem 0.5rem; border-radius: 4px; font-family: var(--mono); color: var(--cyan); border: 1px solid var(--border); }
-.fix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
-.fix-item {
-  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
-  padding: 1rem; display: flex; align-items: center; gap: 1rem;
-}
-.fix-count { font-size: 1.8rem; font-weight: 700; color: var(--green); font-family: var(--mono); min-width: 40px; }
-.fix-label { font-size: 0.85rem; color: var(--text); }
-/* Dependencies */
-.deps-section { margin-bottom: 2rem; }
-.deps-section h2 { margin-bottom: 1rem; font-size: 1.1rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.1em; }
-.deps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
-.dep-card {
-  background: var(--surface); border-radius: 10px; padding: 1.5rem;
-  border: 1px solid var(--border);
-}
-.dep-danger { border-left: 3px solid var(--red); }
-.dep-warn { border-left: 3px solid var(--yellow); }
-.dep-info { border-left: 3px solid var(--cyan); }
-.dep-card h3 { font-size: 0.9rem; margin-bottom: 0.5rem; }
-.dep-count { font-size: 2rem; font-weight: 700; font-family: var(--mono); color: var(--text); display: block; margin-bottom: 0.5rem; }
-.dep-card ul { list-style: none; font-size: 0.8rem; color: var(--text-dim); font-family: var(--mono); }
-.dep-card li { padding: 0.2rem 0; }
-.dep-card p { font-size: 0.8rem; color: var(--text-dim); }
-/* Recommendations */
-.recs-section { margin-bottom: 2rem; }
-.recs-section h2 { margin-bottom: 1rem; font-size: 1.1rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.1em; }
-.rec-item {
-  display: flex; align-items: center; gap: 1rem;
-  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
-  padding: 1rem 1.5rem; margin-bottom: 0.5rem;
-}
-.rec-critical { border-left: 3px solid var(--red); }
-.rec-high { border-left: 3px solid var(--orange); }
-.rec-medium { border-left: 3px solid var(--yellow); }
-.rec-low { border-left: 3px solid var(--text-dim); }
-.rec-priority {
-  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
-  padding: 0.2rem 0.5rem; border-radius: 4px; min-width: 70px; text-align: center;
-}
-.rec-critical .rec-priority { background: rgba(255,68,68,0.2); color: var(--red); }
-.rec-high .rec-priority { background: rgba(255,149,0,0.2); color: var(--orange); }
-.rec-medium .rec-priority { background: rgba(255,217,61,0.2); color: var(--yellow); }
-.rec-low .rec-priority { background: rgba(136,136,170,0.15); color: var(--text-dim); }
-.rec-text { font-size: 0.9rem; }
-.rec-text code { background: var(--bg); padding: 0.15rem 0.4rem; border-radius: 4px; font-family: var(--mono); color: var(--cyan); font-size: 0.8rem; }
-.rec-clean { background: var(--surface); border: 1px solid var(--green); border-radius: 8px; padding: 1.5rem; text-align: center; color: var(--green); }
-/* Footer */
-.footer {
-  display: flex; justify-content: space-between; align-items: center;
-  padding: 1.5rem 2rem; border-top: 1px solid var(--border);
-  color: var(--text-dim); font-size: 0.8rem; margin-top: 2rem;
-}
-.footer-brand { display: flex; align-items: center; gap: 1.5rem; }
-.footer-brand strong { color: var(--cyan); }
-.footer-link { color: var(--cyan); }
-/* Responsive */
-@media (max-width: 900px) {
-  .category-grid { grid-template-columns: repeat(2, 1fr); }
-  .fix-grid { grid-template-columns: repeat(2, 1fr); }
-  .mc-grid { grid-template-columns: 1fr; }
-  .header { flex-direction: column; gap: 1rem; }
-  .score-section { flex-direction: column; text-align: center; }
-  .score-summary { justify-content: center; }
-}
-@media (max-width: 600px) {
-  .category-grid { grid-template-columns: 1fr; }
-  .fix-grid { grid-template-columns: 1fr; }
-  .deps-grid { grid-template-columns: 1fr; }
-}
-/* Print */
-@media print {
-  body { background: #fff; color: #111; }
-  .container { max-width: 100%; }
-  .header, .category-card, .mother-code-section, .fixable-section, .issues-section, .dep-card, .rec-item {
-    background: #fafafa; border-color: #ddd;
-  }
-}
-`;
-  }
-  _js() {
-    return `
-// Animate score ring on load
-document.addEventListener('DOMContentLoaded', () => {
-  const progress = document.querySelector('.score-progress');
-  if (progress) {
-    const final = progress.style.strokeDashoffset || progress.getAttribute('stroke-dashoffset');
-    progress.style.strokeDashoffset = progress.getAttribute('stroke-dasharray');
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        progress.style.strokeDashoffset = final;
-      });
-    });
-  }
-});
-`;
-  }
-  // ─── Utilities ──────────────────────────────────────────
-  _scoreColor(score) {
-    if (score >= 80) return '#00ff88';
-    if (score >= 60) return '#ffd93d';
-    return '#ff4444';
-  }
-  _esc(str) {
-    return String(str || '')
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;');
-  }
-}
-module.exports = HtmlReportGenerator;