@craftpipe/contextpack 1.0.0

package/lib/premium/html-report.js

@@ -0,0 +1,1094 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const { requirePro } = require('../premium/gate');
+const { scanProject } = require('../scanner');
+const { analyzeProject } = require('../analyzer');
+const { createBundle } = require('../bundler');
+const { estimateTokens, calculateBundleSize } = require('../tokenizer');
+const { validateBundle } = require('../validator');
+const { loadConfig, mergeWithFlags } = require('../config');
+
+/**
+ * Escape HTML special characters
+ * @param {string} str
+ * @returns {string}
+ */
+function escapeHtml(str) {
+  if (str === null || str === undefined) return '';
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/**
+ * Format a byte count into a human-readable string
+ * @param {number} bytes
+ * @returns {string}
+ */
+function formatBytes(bytes) {
+  if (!bytes || bytes === 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + units[i];
+}
+
+/**
+ * Format a number with thousands separators
+ * @param {number} n
+ * @returns {string}
+ */
+function formatNumber(n) {
+  if (n === null || n === undefined) return '0';
+  return Number(n).toLocaleString();
+}
+
+/**
+ * Derive a simple language label from a file extension
+ * @param {string} filePath
+ * @returns {string}
+ */
+function langFromPath(filePath) {
+  const ext = path.extname(filePath || '').toLowerCase();
+  const map = {
+    '.js': 'JavaScript',
+    '.mjs': 'JavaScript',
+    '.cjs': 'JavaScript',
+    '.jsx': 'JSX',
+    '.ts': 'TypeScript',
+    '.tsx': 'TSX',
+    '.json': 'JSON',
+    '.md': 'Markdown',
+    '.py': 'Python',
+    '.rb': 'Ruby',
+    '.go': 'Go',
+    '.java': 'Java',
+    '.cs': 'C#',
+    '.php': 'PHP',
+    '.swift': 'Swift',
+    '.kt': 'Kotlin',
+  };
+  return map[ext] || ext.replace('.', '').toUpperCase() || 'Unknown';
+}
+
+/**
+ * Build a colour class name for a language badge
+ * @param {string} lang
+ * @returns {string}
+ */
+function langColour(lang) {
+  const map = {
+    JavaScript: 'badge-js',
+    JSX: 'badge-jsx',
+    TypeScript: 'badge-ts',
+    TSX: 'badge-tsx',
+    JSON: 'badge-json',
+    Markdown: 'badge-md',
+    Python: 'badge-py',
+    Go: 'badge-go',
+    Java: 'badge-java',
+  };
+  return map[lang] || 'badge-default';
+}
+
+/**
+ * Render the summary cards section
+ * @param {object} stats
+ * @returns {string}
+ */
+function renderSummaryCards(stats) {
+  const cards = [
+    { label: 'Total Files', value: formatNumber(stats.totalFiles), icon: '&#128196;', cls: 'card-blue' },
+    { label: 'Total Symbols', value: formatNumber(stats.totalSymbols), icon: '&#128279;', cls: 'card-purple' },
+    { label: 'Estimated Tokens', value: formatNumber(stats.estimatedTokens), icon: '&#129520;', cls: 'card-green' },
+    { label: 'Bundle Size', value: formatBytes(stats.bundleSize), icon: '&#128230;', cls: 'card-orange' },
+    { label: 'Dependencies', value: formatNumber(stats.totalDeps), icon: '&#128257;', cls: 'card-teal' },
+    { label: 'Validation Issues', value: formatNumber(stats.validationIssues), icon: '&#9888;&#65039;', cls: stats.validationIssues > 0 ? 'card-red' : 'card-grey' },
+  ];
+
+  const cardHtml = cards.map(c => `
+    <div class="summary-card ${escapeHtml(c.cls)}">
+      <div class="card-icon">${c.icon}</div>
+      <div class="card-value">${escapeHtml(c.value)}</div>
+      <div class="card-label">${escapeHtml(c.label)}</div>
+    </div>`).join('');
+
+  return `<section class="summary-grid">${cardHtml}</section>`;
+}
+
+/**
+ * Render the file table section
+ * @param {Array} files
+ * @returns {string}
+ */
+function renderFileTable(files) {
+  if (!files || files.length === 0) {
+    return '<section class="section"><h2>Files</h2><p class="empty">No files found.</p></section>';
+  }
+
+  const rows = files.map((f, idx) => {
+    const lang = langFromPath(f.path || f.filePath || '');
+    const symbols = Array.isArray(f.symbols) ? f.symbols.length : 0;
+    const size = formatBytes(f.size || 0);
+    const tokens = formatNumber(f.tokens || estimateTokens(f.summary || ''));
+    const filePath = escapeHtml(f.path || f.filePath || '');
+    const summary = escapeHtml((f.summary || '').substring(0, 120) + ((f.summary || '').length > 120 ? '…' : ''));
+
+    return `
+      <tr class="${idx % 2 === 0 ? 'row-even' : 'row-odd'}" data-lang="${escapeHtml(lang)}">
+        <td class="td-path" title="${filePath}">
+          <span class="badge ${escapeHtml(langColour(lang))}">${escapeHtml(lang)}</span>
+          <span class="file-path">${filePath}</span>
+        </td>
+        <td class="td-num">${escapeHtml(size)}</td>
+        <td class="td-num">${escapeHtml(tokens)}</td>
+        <td class="td-num">${symbols}</td>
+        <td class="td-summary">${summary}</td>
+      </tr>`;
+  }).join('');
+
+  return `
+    <section class="section">
+      <h2>&#128196; Files <span class="count-badge">${files.length}</span></h2>
+      <div class="table-controls">
+        <input type="text" id="file-search" placeholder="Filter files…" class="search-input" oninput="filterTable(this,'file-table')" />
+        <select id="lang-filter" class="lang-select" onchange="filterByLang(this,'file-table')">
+          <option value="">All Languages</option>
+        </select>
+      </div>
+      <div class="table-wrap">
+        <table id="file-table" class="data-table">
+          <thead>
+            <tr>
+              <th class="th-sortable" onclick="sortTable('file-table',0)">File &#8597;</th>
+              <th class="th-sortable th-num" onclick="sortTable('file-table',1)">Size &#8597;</th>
+              <th class="th-sortable th-num" onclick="sortTable('file-table',2)">Tokens &#8597;</th>
+              <th class="th-sortable th-num" onclick="sortTable('file-table',3)">Symbols &#8597;</th>
+              <th>Summary</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    </section>`;
+}
+
+/**
+ * Render the symbol index section
+ * @param {object} symbolIndex
+ * @returns {string}
+ */
+function renderSymbolIndex(symbolIndex) {
+  if (!symbolIndex || Object.keys(symbolIndex).length === 0) {
+    return '<section class="section"><h2>Symbol Index</h2><p class="empty">No symbols extracted.</p></section>';
+  }
+
+  const entries = Object.entries(symbolIndex);
+  const rows = entries.map(([name, info], idx) => {
+    const filePath = escapeHtml(info.file || info.filePath || '');
+    const kind = escapeHtml(info.kind || info.type || 'symbol');
+    const kindCls = 'kind-' + kind.toLowerCase().replace(/[^a-z]/g, '');
+    return `
+      <tr class="${idx % 2 === 0 ? 'row-even' : 'row-odd'}">
+        <td class="td-symbol"><code>${escapeHtml(name)}</code></td>
+        <td><span class="kind-badge ${kindCls}">${kind}</span></td>
+        <td class="td-path" title="${filePath}">${filePath}</td>
+      </tr>`;
+  }).join('');
+
+  return `
+    <section class="section">
+      <h2>&#128279; Symbol Index <span class="count-badge">${entries.length}</span></h2>
+      <div class="table-controls">
+        <input type="text" id="sym-search" placeholder="Filter symbols…" class="search-input" oninput="filterTable(this,'sym-table')" />
+      </div>
+      <div class="table-wrap">
+        <table id="sym-table" class="data-table">
+          <thead>
+            <tr>
+              <th class="th-sortable" onclick="sortTable('sym-table',0)">Symbol &#8597;</th>
+              <th class="th-sortable" onclick="sortTable('sym-table',1)">Kind &#8597;</th>
+              <th class="th-sortable" onclick="sortTable('sym-table',2)">File &#8597;</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    </section>`;
+}
+
+/**
+ * Render the dependency map section
+ * @param {object} depMap
+ * @returns {string}
+ */
+function renderDependencyMap(depMap) {
+  if (!depMap || Object.keys(depMap).length === 0) {
+    return '<section class="section"><h2>Dependency Map</h2><p class="empty">No dependencies found.</p></section>';
+  }
+
+  const entries = Object.entries(depMap);
+  const rows = entries.map(([file, deps], idx) => {
+    const depList = Array.isArray(deps) ? deps : [];
+    const depBadges = depList.map(d => `<span class="dep-badge">${escapeHtml(d)}</span>`).join(' ');
+    return `
+      <tr class="${idx % 2 === 0 ? 'row-even' : 'row-odd'}">
+        <td class="td-path" title="${escapeHtml(file)}">${escapeHtml(file)}</td>
+        <td class="td-num">${depList.length}</td>
+        <td class="td-deps">${depBadges || '<span class="none-label">none</span>'}</td>
+      </tr>`;
+  }).join('');
+
+  return `
+    <section class="section">
+      <h2>&#128257; Dependency Map <span class="count-badge">${entries.length}</span></h2>
+      <div class="table-controls">
+        <input type="text" id="dep-search" placeholder="Filter files…" class="search-input" oninput="filterTable(this,'dep-table')" />
+      </div>
+      <div class="table-wrap">
+        <table id="dep-table" class="data-table">
+          <thead>
+            <tr>
+              <th class="th-sortable" onclick="sortTable('dep-table',0)">File &#8597;</th>
+              <th class="th-sortable th-num" onclick="sortTable('dep-table',1)">Count &#8597;</th>
+              <th>Imports</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    </section>`;
+}
+
+/**
+ * Render the validation report section
+ * @param {object} validation
+ * @returns {string}
+ */
+function renderValidation(validation) {
+  if (!validation) {
+    return '<section class="section"><h2>Validation</h2><p class="empty">No validation data.</p></section>';
+  }
+
+  const errors = Array.isArray(validation.errors) ? validation.errors : [];
+  const warnings = Array.isArray(validation.warnings) ? validation.warnings : [];
+  const info = Array.isArray(validation.info) ? validation.info : [];
+
+  const renderItems = (items, cls, icon) => {
+    if (items.length === 0) return '';
+    return items.map(item => {
+      const msg = escapeHtml(typeof item === 'string' ? item : (item.message || JSON.stringify(item)));
+      return `<div class="validation-item ${cls}">${icon} ${msg}</div>`;
+    }).join('');
+  };
+
+  const statusCls = errors.length > 0 ? 'status-error' : warnings.length > 0 ? 'status-warn' : 'status-ok';
+  const statusLabel = errors.length > 0 ? 'Failed' : warnings.length > 0 ? 'Warnings' : 'Passed';
+
+  return `
+    <section class="section">
+      <h2>&#9888;&#65039; Validation <span class="status-badge ${statusCls}">${statusLabel}</span></h2>
+      <div class="validation-summary">
+        <span class="val-count error-count">&#10060; ${errors.length} error${errors.length !== 1 ? 's' : ''}</span>
+        <span class="val-count warn-count">&#9888;&#65039; ${warnings.length} warning${warnings.length !== 1 ? 's' : ''}</span>
+        <span class="val-count info-count">&#8505;&#65039; ${info.length} info</span>
+      </div>
+      <div class="validation-list">
+        ${renderItems(errors, 'item-error', '&#10060;')}
+        ${renderItems(warnings, 'item-warn', '&#9888;&#65039;')}
+        ${renderItems(info, 'item-info', '&#8505;&#65039;')}
+        ${errors.length === 0 && warnings.length === 0 && info.length === 0
+          ? '<div class="validation-item item-ok">&#9989; Bundle passed all validation checks.</div>'
+          : ''}
+      </div>
+    </section>`;
+}
+
+/**
+ * Render the language breakdown chart (pure CSS bar chart)
+ * @param {Array} files
+ * @returns {string}
+ */
+function renderLanguageBreakdown(files) {
+  if (!files || files.length === 0) return '';
+
+  const counts = {};
+  files.forEach(f => {
+    const lang = langFromPath(f.path || f.filePath || '');
+    counts[lang] = (counts[lang] || 0) + 1;
+  });
+
+  const total = files.length;
+  const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]);
+  const maxCount = sorted[0] ? sorted[0][1] : 1;
+
+  const bars = sorted.map(([lang, count]) => {
+    const pct = ((count / total) * 100).toFixed(1);
+    const barWidth = ((count / maxCount) * 100).toFixed(1);
+    const cls = langColour(lang);
+    return `
+      <div class="bar-row">
+        <div class="bar-label">
+          <span class="badge ${escapeHtml(cls)}">${escapeHtml(lang)}</span>
+        </div>
+        <div class="bar-track">
+          <div class="bar-fill ${escapeHtml(cls)}-fill" style="width:${barWidth}%"></div>
+        </div>
+        <div class="bar-stat">${count} <span class="bar-pct">(${pct}%)</span></div>
+      </div>`;
+  }).join('');
+
+  return `
+    <section class="section">
+      <h2>&#128202; Language Breakdown</h2>
+      <div class="bar-chart">${bars}</div>
+    </section>`;
+}
+
+/**
+ * Render the top symbols by file (most symbols per file)
+ * @param {Array} files
+ * @returns {string}
+ */
+function renderTopFiles(files) {
+  if (!files || files.length === 0) return '';
+
+  const sorted = files
+    .filter(f => Array.isArray(f.symbols) && f.symbols.length > 0)
+    .sort((a, b) => b.symbols.length - a.symbols.length)
+    .slice(0, 10);
+
+  if (sorted.length === 0) return '';
+
+  const maxSymbols = sorted[0].symbols.length;
+
+  const rows = sorted.map((f, idx) => {
+    const filePath = escapeHtml(f.path || f.filePath || '');
+    const count = f.symbols.length;
+    const barWidth = ((count / maxSymbols) * 100).toFixed(1);
+    return `
+      <tr class="${idx % 2 === 0 ? 'row-even' : 'row-odd'}">
+        <td class="td-rank">${idx + 1}</td>
+        <td class="td-path" title="${filePath}">${filePath}</td>
+        <td class="td-bar">
+          <div class="inline-bar">
+            <div class="inline-bar-fill" style="width:${barWidth}%"></div>
+          </div>
+        </td>
+        <td class="td-num">${count}</td>
+      </tr>`;
+  }).join('');
+
+  return `
+    <section class="section">
+      <h2>&#127942; Top Files by Symbol Count</h2>
+      <div class="table-wrap">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th class="th-num">#</th>
+              <th>File</th>
+              <th>Distribution</th>
+              <th class="th-num">Symbols</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    </section>`;
+}
+
+/**
+ * Build the complete CSS stylesheet string
+ * @returns {string}
+ */
+function buildCSS() {
+  return `
+    :root {
+      --bg: #0f1117;
+      --surface: #1a1d27;
+      --surface2: #22263a;
+      --border: #2e3250;
+      --text: #e2e8f0;
+      --text-muted: #8892a4;
+      --accent: #6c63ff;
+      --accent2: #00d4aa;
+      --blue: #3b82f6;
+      --purple: #8b5cf6;
+      --green: #10b981;
+      --orange: #f59e0b;
+      --teal: #06b6d4;
+      --red: #ef4444;
+      --grey: #6b7280;
+      --radius: 10px;
+      --shadow: 0 4px 24px rgba(0,0,0,0.4);
+    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 14px;
+      line-height: 1.6;
+      min-height: 100vh;
+    }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    code {
+      font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
+      font-size: 12px;
+      background: var(--surface2);
+      padding: 1px 5px;
+      border-radius: 4px;
+      color: var(--accent2);
+    }
+
+    /* Header */
+    .header {
+      background: linear-gradient(135deg, #1a1d27 0%, #12152a 100%);
+      border-bottom: 1px solid var(--border);
+      padding: 28px 40px 24px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 16px;
+    }
+    .header-brand { display: flex; align-items: center; gap: 14px; }
+    .header-logo {
+      width: 44px; height: 44px;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      border-radius: 10px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 22px;
+    }
+    .header-title { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
+    .header-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+    .header-meta { text-align: right; font-size: 12px; color: var(--text-muted); }
+    .header-meta strong { color: var(--text); display: block; font-size: 13px; }
+    .pro-badge {
+      display: inline-flex; align-items: center; gap: 5px;
+      background: linear-gradient(135deg, #f59e0b, #ef4444);
+      color: #fff; font-size: 10px; font-weight: 700;
+      padding: 3px 8px; border-radius: 20px; letter-spacing: 0.5px;
+      text-transform: uppercase; margin-top: 6px;
+    }
+
+    /* Nav tabs */
+    .nav-tabs {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 0 40px;
+      display: flex; gap: 4px;
+      overflow-x: auto;
+    }
+    .nav-tab {
+      padding: 12px 18px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--text-muted);
+      border-bottom: 2px solid transparent;
+      white-space: nowrap;
+      transition: color 0.15s, border-color 0.15s;
+      background: none; border-top: none; border-left: none; border-right: none;
+    }
+    .nav-tab:hover { color: var(--text); }
+    .nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+
+    /* Main content */
+    .main { padding: 32px 40px; max-width: 1400px; margin: 0 auto; }
+    .tab-panel { display: none; }
+    .tab-panel.active { display: block; }
+
+    /* Summary grid */
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: 16px;
+      margin-bottom: 32px;
+    }
+    .summary-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 20px 16px;
+      text-align: center;
+      transition: transform 0.15s, box-shadow 0.15s;
+      position: relative;
+      overflow: hidden;
+    }
+    .summary-card::before {
+      content: '';
+      position: absolute; top: 0; left: 0; right: 0; height: 3px;
+    }
+    .summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
+    .card-blue::before { background: var(--blue); }
+    .card-purple::before { background: var(--purple); }
+    .card-green::before { background: var(--green); }
+    .card-orange::before { background: var(--orange); }
+    .card-teal::before { background: var(--teal); }
+    .card-red::before { background: var(--red); }
+    .card-grey::before { background: var(--grey); }
+    .card-icon { font-size: 24px; margin-bottom: 8px; }
+    .card-value { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
+    .card-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
+
+    /* Sections */
+    .section { margin-bottom: 36px; }
+    .section h2 {
+      font-size: 17px; font-weight: 600;
+      margin-bottom: 16px;
+      display: flex; align-items: center; gap: 10px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid var(--border);
+    }
+    .count-badge {
+      font-size: 11px; font-weight: 600;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      padding: 2px 8px; border-radius: 20px;
+    }
+    .empty { color: var(--text-muted); font-style: italic; padding: 16px 0; }
+
+    /* Table controls */
+    .table-controls {
+      display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
+    }
+    .search-input, .lang-select {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 7px 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    .search-input { min-width: 220px; }
+    .search-input:focus, .lang-select:focus { border-color: var(--accent); }
+    .lang-select { cursor: pointer; }
+
+    /* Tables */
+    .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
+    .data-table { width: 100%; border-collapse: collapse; }
+    .data-table thead { background: var(--surface2); }
+    .data-table th {
+      padding: 10px 14px;
+      text-align: left;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--text-muted);
+      white-space: nowrap;
+    }
+    .th-sortable { cursor: pointer; user-select: none; }
+    .th-sortable:hover { color: var(--text); }
+    .th-num { text-align: right; }
+    .data-table td { padding: 9px 14px; border-top: 1px solid var(--border); vertical-align: middle; }
+    .row-even { background: var(--surface); }
+    .row-odd { background: var(--bg); }
+    .data-table tr:hover td { background: var(--surface2); }
+    .td-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
+    .td-path {
+      font-family: 'JetBrains Mono', Consolas, monospace;
+      font-size: 12px;
+      max-width: 320px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .td-summary { color: var(--text-muted); font-size: 12px; max-width: 400px; }
+    .td-symbol { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; }
+    .td-deps { max-width: 500px; }
+    .td-rank { text-align: center; color: var(--text-muted); font-weight: 600; }
+    .td-bar { min-width: 120px; }
+    .file-path { margin-left: 6px; }
+
+    /* Badges */
+    .badge {
+      display: inline-block;
+      font-size: 10px; font-weight: 600;
+      padding: 2px 7px; border-radius: 4px;
+      text-transform: uppercase; letter-spacing: 0.3px;
+      white-space: nowrap;
+    }
+    .badge-js { background: #f7df1e22; color: #f7df1e; border: 1px solid #f7df1e44; }
+    .badge-jsx { background: #61dafb22; color: #61dafb; border: 1px solid #61dafb44; }
+    .badge-ts { background: #3178c622; color: #3b82f6; border: 1px solid #3178c644; }
+    .badge-tsx { background: #3178c622; color: #06b6d4; border: 1px solid #06b6d444; }
+    .badge-json { background: #10b98122; color: #10b981; border: 1px solid #10b98144; }
+    .badge-md { background: #8b5cf622; color: #8b5cf6; border: 1px solid #8b5cf644; }
+    .badge-py { background: #3b82f622; color: #60a5fa; border: 1px solid #3b82f644; }
+    .badge-go { background: #06b6d422; color: #06b6d4; border: 1px solid #06b6d444; }
+    .badge-java { background: #f59e0b22; color: #f59e0b; border: 1px solid #f59e0b44; }
+    .badge-default { background: #6b728022; color: #9ca3af; border: 1px solid #6b728044; }
+
+    /* Kind badges */
+    .kind-badge {
+      display: inline-block;
+      font-size: 10px; font-weight: 600;
+      padding: 2px 7px; border-radius: 4px;
+      text-transform: capitalize;
+    }
+    .kind-function { background: #3b82f622; color: #60a5fa; border: 1px solid #3b82f644; }
+    .kind-class { background: #8b5cf622; color: #a78bfa; border: 1px solid #8b5cf644; }
+    .kind-export { background: #10b98122; color: #34d399; border: 1px solid #10b98144; }
+    .kind-import { background: #f59e0b22; color: #fbbf24; border: 1px solid #f59e0b44; }
+    .kind-arrowfunction { background: #06b6d422; color: #22d3ee; border: 1px solid #06b6d444; }
+    .kind-default { background: #6b728022; color: #9ca3af; border: 1px solid #6b728044; }
+
+    /* Dep badges */
+    .dep-badge {
+      display: inline-block;
+      font-size: 11px;
+      font-family: 'JetBrains Mono', Consolas, monospace;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      padding: 1px 6px; border-radius: 4px;
+      margin: 2px 2px;
+    }
+    .none-label { color: var(--text-muted); font-style: italic; font-size: 12px; }
+
+    /* Validation */
+    .validation-summary {
+      display: flex; gap: 20px; margin-bottom: 14px; flex-wrap: wrap;
+    }
+    .val-count { font-size: 13px; font-weight: 600; }
+    .error-count { color: var(--red); }
+    .warn-count { color: var(--orange); }
+    .info-count { color: var(--blue); }
+    .validation-list { display: flex; flex-direction: column; gap: 6px; }
+    .validation-item {
+      padding: 10px 14px;
+      border-radius: 6px;
+      font-size: 13px;
+      border-left: 3px solid transparent;
+    }
+    .item-error { background: #ef444411; border-left-color: var(--red); color: #fca5a5; }
+    .item-warn { background: #f59e0b11; border-left-color: var(--orange); color: #fcd34d; }
+    .item-info { background: #3b82f611; border-left-color: var(--blue); color: #93c5fd; }
+    .item-ok { background: #10b98111; border-left-color: var(--green); color: #6ee7b7; }
+    .status-badge {
+      font-size: 11px; font-weight: 700;
+      padding: 3px 10px; border-radius: 20px;
+      text-transform: uppercase; letter-spacing: 0.5px;
+    }
+    .status-ok { background: #10b98122; color: #34d399; border: 1px solid #10b98144; }
+    .status-warn { background: #f59e0b22; color: #fbbf24; border: 1px solid #f59e0b44; }
+    .status-error { background: #ef444422; color: #f87171; border: 1px solid #ef444444; }
+
+    /* Bar chart */
+    .bar-chart { display: flex; flex-direction: column; gap: 10px; }
+    .bar-row { display: flex; align-items: center; gap: 12px; }
+    .bar-label { min-width: 110px; }
+    .bar-track {
+      flex: 1; height: 10px;
+      background: var(--surface2);
+      border-radius: 5px; overflow: hidden;
+    }
+    .bar-fill {
+      height: 100%; border-radius: 5px;
+      transition: width 0.6s ease;
+    }
+    .badge-js-fill { background: #f7df1e; }
+    .badge-jsx-fill { background: #61dafb; }
+    .badge-ts-fill { background: #3b82f6; }
+    .badge-tsx-fill { background: #06b6d4; }
+    .badge-json-fill { background: #10b981; }
+    .badge-md-fill { background: #8b5cf6; }
+    .badge-py-fill { background: #60a5fa; }
+    .badge-go-fill { background: #06b6d4; }
+    .badge-java-fill { background: #f59e0b; }
+    .badge-default-fill { background: #6b7280; }
+    .bar-stat { min-width: 80px; text-align: right; font-size: 12px; color: var(--text-muted); }
+    .bar-pct { color: var(--text-muted); }
+
+    /* Inline bar */
+    .inline-bar {
+      height: 8px; background: var(--surface2);
+      border-radius: 4px; overflow: hidden; min-width: 80px;
+    }
+    .inline-bar-fill {
+      height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
+      border-radius: 4px;
+    }
+
+    /* Footer */
+    .footer {
+      text-align: center;
+      padding: 24px 40px;
+      border-top: 1px solid var(--border);
+      color: var(--text-muted);
+      font-size: 12px;
+      margin-top: 40px;
+    }
+    .footer a { color: var(--accent); }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+      .header { padding: 20px; }
+      .main { padding: 20px; }
+      .nav-tabs { padding: 0 20px; }
+      .summary-grid { grid-template-columns: repeat(2, 1fr); }
+      .td-summary { display: none; }
+    }
+    @media (max-width: 480px) {
+      .summary-grid { grid-template-columns: 1fr 1fr; }
+      .header-meta { display: none; }
+    }
+  `;
+}
+
+/**
+ * Build the JavaScript string for interactivity
+ * @returns {string}
+ */
+function buildJS() {
+  return `
+    (function() {
+      // Tab switching
+      var tabs = document.querySelectorAll('.nav-tab');
+      var panels = document.querySelectorAll('.tab-panel');
+      tabs.forEach(function(tab) {
+        tab.addEventListener('click', function() {
+          var target = tab.getAttribute('data-tab');
+          tabs.forEach(function(t) { t.classList.remove('active'); });
+          panels.forEach(function(p) { p.classList.remove('active'); });
+          tab.classList.add('active');
+          var panel = document.getElementById('panel-' + target);
+          if (panel) panel.classList.add('active');
+        });
+      });
+
+      // Populate language filter
+      var langFilter = document.getElementById('lang-filter');
+      if (langFilter) {
+        var rows = document.querySelectorAll('#file-table tbody tr');
+        var langs = {};
+        rows.forEach(function(r) { var l = r.getAttribute('data-lang'); if (l) langs[l] = true; });
+        Object.keys(langs).sort().forEach(function(l) {
+          var opt = document.createElement('option');
+          opt.value = l; opt.textContent = l;
+          langFilter.appendChild(opt);
+        });
+      }
+
+      // Table filter by text
+      window.filterTable = function(input, tableId) {
+        var q = input.value.toLowerCase();
+        var rows = document.querySelectorAll('#' + tableId + ' tbody tr');
+        rows.forEach(function(r) {
+          r.style.display = r.textContent.toLowerCase().includes(q) ? '' : 'none';
+        });
+      };
+
+      // Filter by language
+      window.filterByLang = function(select, tableId) {
+        var lang = select.value;
+        var rows = document.querySelectorAll('#' + tableId + ' tbody tr');
+        rows.forEach(function(r) {
+          r.style.display = (!lang || r.getAttribute('data-lang') === lang) ? '' : 'none';
+        });
+      };
+
+      // Table sort
+      window.sortTable = function(tableId, colIdx) {
+        var table = document.getElementById(tableId);
+        if (!table) return;
+        var tbody = table.querySelector('tbody');
+        var rows = Array.from(tbody.querySelectorAll('tr'));
+        var asc = table.getAttribute('data-sort-col') === String(colIdx) &&
+                  table.getAttribute('data-sort-dir') === 'asc';
+        rows.sort(function(a, b) {
+          var aText = (a.cells[colIdx] ? a.cells[colIdx].textContent : '').trim();
+          var bText = (b.cells[colIdx] ? b.cells[colIdx].textContent : '').trim();
+          var aNum = parseFloat(aText.replace(/[^0-9.-]/g, ''));
+          var bNum = parseFloat(bText.replace(/[^0-9.-]/g, ''));
+          if (!isNaN(aNum) && !isNaN(bNum)) {
+            return asc ? aNum - bNum : bNum - aNum;
+          }
+          return asc ? aText.localeCompare(bText) : bText.localeCompare(aText);
+        });
+        table.setAttribute('data-sort-col', String(colIdx));
+        table.setAttribute('data-sort-dir', asc ? 'desc' : 'asc');
+        rows.forEach(function(r) { tbody.appendChild(r); });
+      };
+    })();
+  `;
+}
+
+/**
+ * Assemble the full HTML document
+ * @param {object} opts
+ * @param {object} opts.bundle
+ * @param {object} opts.validation
+ * @param {object} opts.stats
+ * @param {string} opts.projectName
+ * @param {string} opts.generatedAt
+ * @returns {string}
+ */
+function buildHtmlDocument(opts) {
+  const { bundle, validation, stats, projectName, generatedAt } = opts || {};
+
+  const files = (bundle && bundle.files) ? bundle.files : [];
+  const symbolIndex = (bundle && bundle.symbolIndex) ? bundle.symbolIndex : {};
+  const depMap = (bundle && bundle.dependencyMap) ? bundle.dependencyMap : {};
+
+  const overviewHtml = `
+    ${renderSummaryCards(stats)}
+    ${renderLanguageBreakdown(files)}
+    ${renderTopFiles(files)}
+  `;
+
+  const tabs = [
+    { id: 'overview', label: '&#127968; Overview' },
+    { id: 'files', label: '&#128196; Files' },
+    { id: 'symbols', label: '&#128279; Symbols' },
+    { id: 'deps', label: '&#128257; Dependencies' },
+    { id: 'validation', label: '&#9888;&#65039; Validation' },
+  ];
+
+  const navHtml = tabs.map((t, i) =>
+    `<button class="nav-tab${i === 0 ? ' active' : ''}" data-tab="${t.id}">${t.label}</button>`
+  ).join('');
+
+  const panelsHtml = `
+    <div id="panel-overview" class="tab-panel active">${overviewHtml}</div>
+    <div id="panel-files" class="tab-panel">${renderFileTable(files)}</div>
+    <div id="panel-symbols" class="tab-panel">${renderSymbolIndex(symbolIndex)}</div>
+    <div id="panel-deps" class="tab-panel">${renderDependencyMap(depMap)}</div>
+    <div id="panel-validation" class="tab-panel">${renderValidation(validation)}</div>
+  `;
+
+  const safeProject = escapeHtml(projectName || 'Project');
+  const safeDate = escapeHtml(generatedAt || new Date().toISOString());
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ContextPack Report — ${safeProject}</title>
+  <style>${buildCSS()}</style>
+</head>
+<body>
+  <header class="header">
+    <div class="header-brand">
+      <div class="header-logo">&#128230;</div>
+      <div>
+        <div class="header-title">ContextPack</div>
+        <div class="header-subtitle">Codebase Analysis Report</div>
+        <div class="pro-badge">&#11088; Pro</div>
+      </div>
+    </div>
+    <div class="header-meta">
+      <strong>${safeProject}</strong>
+      Generated ${safeDate}
+    </div>
+  </header>
+  <nav class="nav-tabs">${navHtml}</nav>
+  <main class="main">${panelsHtml}</main>
+  <footer class="footer">
+    Generated by <a href="https://craftpipe.gumroad.com" target="_blank">ContextPack Pro</a>
+    &mdash; AI-ready codebase bundles
+  </footer>
+  <script>${buildJS()}</script>
+</body>
+</html>`;
+}
+
+/**
+ * Compute aggregate statistics from bundle and validation data
+ * @param {object} bundle
+ * @param {object} validation
+ * @param {string} rawJson
+ * @returns {object}
+ */
+function computeStats(bundle, validation, rawJson) {
+  const files = (bundle && bundle.files) ? bundle.files : [];
+  const symbolIndex = (bundle && bundle.symbolIndex) ? bundle.symbolIndex : {};
+  const depMap = (bundle && bundle.dependencyMap) ? bundle.dependencyMap : {};
+
+  const totalFiles = files.length;
+  const totalSymbols = Object.keys(symbolIndex).length;
+  const totalDeps = Object.keys(depMap).length;
+
+  let estimatedTokens = 0;
+  try {
+    estimatedTokens = calculateBundleSize(bundle) || estimateTokens(rawJson || '');
+  } catch (_) {
+    estimatedTokens = estimateTokens(rawJson || '');
+  }
+
+  const bundleSize = Buffer.byteLength(rawJson || '', 'utf8');
+
+  const validationErrors = validation && Array.isArray(validation.errors) ? validation.errors : [];
+  const validationWarnings = validation && Array.isArray(validation.warnings) ? validation.warnings : [];
+  const validationIssues = validationErrors.length + validationWarnings.length;
+
+  return { totalFiles, totalSymbols, totalDeps, estimatedTokens, bundleSize, validationIssues };
+}
+
+/**
+ * Generate an HTML report for a ContextPack bundle.
+ *
+ * @param {object} opts
+ * @param {string}  [opts.rootDir]       - Root directory to scan (default: '.')
+ * @param {string}  [opts.output]        - Output HTML file path (default: 'contextpack-report.html')
+ * @param {string}  [opts.configPath]    - Path to .contextpackrc.json
+ * @param {object}  [opts.flags]         - Additional CLI flags to merge with config
+ * @param {boolean} [opts.open]          - Attempt to open the report in a browser after generation
+ * @param {object}  [opts.bundle]        - Pre-built bundle (skips scan/analyze/bundle pipeline)
+ * @param {object}  [opts.validation]    - Pre-built validation result
+ * @param {boolean} [opts.verbose]       - Verbose logging
+ * @returns {Promise<string>}            - Resolves with the output file path
+ */
+async function generateHtmlReport(opts) {
+  const {
+    rootDir = '.',
+    output = 'contextpack-report.html',
+    configPath,
+    flags = {},
+    open: shouldOpen = false,
+    bundle: prebuiltBundle,
+    validation: prebuiltValidation,
+    verbose = false,
+  } = opts || {};
+
+  requirePro('HTML Report');
+
+  const log = verbose ? (...args) => console.log('[html-report]', ...args) : () => {};
+
+  // ── 1. Load config ──────────────────────────────────────────────────────────
+  let config = {};
+  try {
+    const raw = loadConfig(configPath || null);
+    config = mergeWithFlags(raw, { rootDir, ...flags });
+    log('Config loaded');
+  } catch (err) {
+    log('Config load failed, using defaults:', err.message);
+    config = mergeWithFlags({}, { rootDir, ...flags });
+  }
+
+  // ── 2. Run pipeline (or use pre-built data) ─────────────────────────────────
+  let bundle = prebuiltBundle || null;
+  let validation = prebuiltValidation || null;
+
+  if (!bundle) {
+    log('Scanning project…');
+    let fileTree;
+    try {
+      fileTree = await scanProject(config);
+      log(`Scanned ${(fileTree && fileTree.files ? fileTree.files.length : 0)} files`);
+    } catch (err) {
+      throw new Error('[html-report] Scan failed: ' + err.message);
+    }
+
+    log('Analyzing project…');
+    let analysis;
+    try {
+      analysis = await analyzeProject(fileTree, config);
+      log('Analysis complete');
+    } catch (err) {
+      throw new Error('[html-report] Analysis failed: ' + err.message);
+    }
+
+    log('Building bundle…');
+    try {
+      bundle = createBundle(fileTree, analysis, config);
+      log('Bundle created');
+    } catch (err) {
+      throw new Error('[html-report] Bundle creation failed: ' + err.message);
+    }
+  }
+
+  if (!validation) {
+    log('Validating bundle…');
+    try {
+      validation = validateBundle(bundle, config);
+      log('Validation complete');
+    } catch (err) {
+      log('Validation error (non-fatal):', err.message);
+      validation = { errors: [], warnings: [{ message: 'Validation step failed: ' + err.message }], info: [] };
+    }
+  }
+
+  // ── 3. Compute stats ────────────────────────────────────────────────────────
+  let rawJson = '';
+  try {
+    rawJson = JSON.stringify(bundle);
+  } catch (_) {
+    rawJson = '';
+  }
+
+  const stats = computeStats(bundle, validation, rawJson);
+  log('Stats:', stats);
+
+  // ── 4. Determine project name ───────────────────────────────────────────────
+  let projectName = path.basename(path.resolve(rootDir));
+  try {
+    const pkgPath = path.join(path.resolve(rootDir), 'package.json');
+    if (fs.existsSync(pkgPath)) {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+      if (pkg && pkg.name) projectName = pkg.name;
+    }
+  } catch (_) {}
+
+  // ── 5. Build HTML ───────────────────────────────────────────────────────────
+  log('Building HTML document…');
+  const generatedAt = new Date().toLocaleString('en-US', {
+    year: 'numeric', month: 'short', day: 'numeric',
+    hour: '2-digit', minute: '2-digit', timeZoneName: 'short',
+  });
+
+  let html;
+  try {
+    html = buildHtmlDocument({ bundle, validation, stats, projectName, generatedAt });
+  } catch (err) {
+    throw new Error('[html-report] HTML generation failed: ' + err.message);
+  }
+
+  // ── 6. Write output file ────────────────────────────────────────────────────
+  const outputPath = path.resolve(output);
+  try {
+    const dir = path.dirname(outputPath);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+    fs.writeFileSync(outputPath, html, 'utf8');
+    log('Report written to', outputPath);
+  } catch (err) {
+    throw new Error('[html-report] Failed to write output file: ' + err.message);
+  }
+
+  // ── 7. Optionally open in browser ───────────────────────────────────────────
+  if (shouldOpen) {
+    try {
+      const { execSync } = require('child_process');
+      const cmd = process.platform === 'win32'
+        ? `start "" "${outputPath}"`
+        : process.platform === 'darwin'
+          ? `open "${outputPath}"`
+          : `xdg-open "${outputPath}"`;
+      execSync(cmd, { stdio: 'ignore' });
+      log('Opened report in browser');
+    } catch (_) {
+      log('Could not open browser automatically');
+    }
+  }
+
+  console.log(`\n  ✅ HTML report generated: ${outputPath}`);
+  console.log(`     Files: ${stats.totalFiles}  |  Symbols: ${stats.totalSymbols}  |  Tokens: ${stats.estimatedTokens.toLocaleString()}\n`);
+
+  return outputPath;
+}
+
+module.exports = { generateHtmlReport };