@girardelli/architect 5.0.0 → 8.1.0

package/src/adapters/html-reporter/sections/anti-patterns.ts

@@ -0,0 +1,81 @@
+import { AnalysisReport} from '@girardelli/architect-core/src/core/types/core.js';
+
+import { escapeHtml } from "../utils_sections.js";
+
+  export function renderAntiPatternBubbles(
+    report: AnalysisReport,
+    grouped: Record<string, { count: number; severity: string; locations: string[]; suggestion: string }>
+  ): string {
+    if (report.antiPatterns.length === 0) {
+      return `
+<h2 class="section-title">✅ Anti-Patterns</h2>
+<div class="card success-card">
+  <p>No significant anti-patterns detected. Excellent architecture!</p>
+</div>`;
+    }
+
+    const severityWeight: Record<string, number> = {
+      CRITICAL: 80, HIGH: 60, MEDIUM: 40, LOW: 25,
+    };
+
+    const severityColor: Record<string, string> = {
+      CRITICAL: '#ef4444', HIGH: '#f59e0b', MEDIUM: '#60a5fa', LOW: '#22c55e',
+    };
+
+    const bubbles = Object.entries(grouped).map(([name, data]) => ({
+      name,
+      count: data.count,
+      severity: data.severity,
+      radius: (severityWeight[data.severity] || 30) + data.count * 8,
+      color: severityColor[data.severity] || '#64748b',
+    }));
+
+    return `
+<h2 class="section-title">🫧 Anti-Pattern Impact Map</h2>
+<div class="card" style="display:flex; justify-content:center;">
+  <div id="bubble-chart" style="width:100%; min-height:300px;"></div>
+</div>
+<script type="application/json" id="bubble-data">${JSON.stringify(bubbles)}<\/script>`;
+  }
+
+
+  export function renderAntiPatterns(
+    report: AnalysisReport,
+    grouped: Record<string, { count: number; severity: string; locations: string[]; suggestion: string }>
+  ): string {
+    if (report.antiPatterns.length === 0) return '';
+
+    const rows = Object.entries(grouped)
+      .sort((a, b) => b[1].count - a[1].count)
+      .map(
+        ([name, data]) => `
+        <tr>
+          <td><strong>${escapeHtml(name)}</strong></td>
+          <td class="count-cell">${data.count}</td>
+          <td><span class="severity-badge severity-${data.severity}">${data.severity}</span></td>
+          <td><small class="suggestion">${escapeHtml(data.suggestion)}</small></td>
+          <td><div class="locations">${data.locations
+            .slice(0, 5)
+            .map((l) => `<code>${escapeHtml(l)}</code>`)
+            .join(' ')}${data.locations.length > 5 ? ` <em>+${data.count - 5} more</em>` : ''}</div></td>
+        </tr>`
+      )
+      .join('');
+
+    return `
+<h2 class="section-title">⚠️ Anti-Pattern Details (${report.antiPatterns.length})</h2>
+<div class="card">
+  <table>
+    <thead>
+      <tr>
+        <th>Pattern</th>
+        <th>Count</th>
+        <th>Severity</th>
+        <th>Suggestion</th>
+        <th>Locations</th>
+      </tr>
+    </thead>
+    <tbody>${rows}</tbody>
+  </table>
+</div>`;
+  }

package/src/adapters/html-reporter/sections/header.ts

@@ -0,0 +1,35 @@
+import { AnalysisReport } from '@girardelli/architect-core/src/core/types/core.js';
+
+import { escapeHtml } from "../utils_sections.js";
+
+  export function renderHeader(report: AnalysisReport): string {
+    const date = new Date(report.timestamp).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+    return `
+<div class="header">
+  <h1>🏗️ Architect</h1>
+  <p class="subtitle">Architecture Analysis Report</p>
+  <div class="meta">
+    <span>📂 <strong>${escapeHtml(report.projectInfo.name)}</strong></span>
+    <span>📁 <strong>${report.projectInfo.totalFiles}</strong> files</span>
+    <span>📝 <strong>${report.projectInfo.totalLines.toLocaleString()}</strong> lines</span>
+    <span>💻 <strong>${report.projectInfo.primaryLanguages.join(', ')}</strong></span>
+    ${report.projectInfo.frameworks.length > 0 ? `<span>🔧 <strong>${report.projectInfo.frameworks.join(', ')}</strong></span>` : ''}
+    <span>📅 <strong>${date}</strong></span>
+  </div>
+</div>`;
+  }
+
+
+  export function renderFooter(): string {
+    return `
+<div class="footer">
+  <p>Generated by <a href="https://github.com/camilooscargbaptista/architect">⚡ Architect v8.1</a> — Enterprise Architecture Intelligence</p>
+  <p>By <strong>Camilo Girardelli</strong> · <a href="https://www.girardellitecnologia.com">Girardelli Tecnologia</a></p>
+</div>`;
+  }
+
+  // ── Refactoring Plan Section ──

package/src/adapters/html-reporter/sections/layers.ts

@@ -0,0 +1,165 @@
+import { AnalysisReport } from '@girardelli/architect-core/src/core/types/core.js';
+
+import { escapeHtml } from "../utils_sections.js";
+
+  export function renderLayers(report: AnalysisReport): string {
+    if (report.layers.length === 0) return '';
+
+    const layerColors: Record<string, string> = {
+      API: '#ec4899',
+      Service: '#3b82f6',
+      Data: '#10b981',
+      UI: '#f59e0b',
+      Infrastructure: '#8b5cf6',
+    };
+
+    const cards = report.layers
+      .map((l) => {
+        const color = layerColors[l.name] || '#64748b';
+        return `
+      <div class="layer-card" style="--layer-color: ${color}">
+        <div class="count" style="color: ${color}">${l.files.length}</div>
+        <div class="name">${l.name}</div>
+        <div class="desc">${escapeHtml(l.description)}</div>
+      </div>`;
+      })
+      .join('');
+
+    return `
+<h2 class="section-title">📐 Architectural Layers</h2>
+<div class="layers-grid">${cards}</div>`;
+  }
+
+  /**
+   * Interactive D3.js force-directed dependency graph
+   */
+
+  export function renderDependencyGraph(report: AnalysisReport): string {
+    if (report.dependencyGraph.edges.length === 0) return '';
+
+    // Build real file set — only files that appear as SOURCE in edges (these are real scanned files)
+    const realFiles = new Set(report.dependencyGraph.edges.map(e => e.from));
+
+    // Count connections only for real files
+    const connectionCount: Record<string, number> = {};
+    for (const edge of report.dependencyGraph.edges) {
+      if (realFiles.has(edge.from)) {
+        connectionCount[edge.from] = (connectionCount[edge.from] || 0) + 1;
+      }
+      if (realFiles.has(edge.to)) {
+        connectionCount[edge.to] = (connectionCount[edge.to] || 0) + 1;
+      }
+    }
+
+    // Build layer map from report layers
+    const layerMap: Record<string, string> = {};
+    for (const layer of report.layers) {
+      for (const file of layer.files) {
+        layerMap[file] = layer.name;
+      }
+    }
+
+    // Create nodes only from real files
+    const allNodes = [...realFiles].map(n => ({
+      id: n,
+      name: n.split('/').pop() || n,
+      connections: connectionCount[n] || 0,
+      layer: layerMap[n] || 'Other',
+    }));
+
+    // ── Fallback: color by module/directory when layer detection is weak ──
+    const otherCount = allNodes.filter(n => n.layer === 'Other').length;
+    const useModuleColoring = allNodes.length > 0 && (otherCount / allNodes.length) > 0.7;
+
+    // Palette for module-based coloring (10 distinct, vibrant colors)
+    const modulePalette = [
+      '#3b82f6', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6',
+      '#06b6d4', '#ef4444', '#84cc16', '#f97316', '#6366f1',
+    ];
+
+    let moduleColorMap: Record<string, string> = {};
+    if (useModuleColoring) {
+      // Extract module (first meaningful directory) from each node path
+      const getModule = (filePath: string): string => {
+        const parts = filePath.split('/');
+        if (parts.length < 2) return 'root';
+        const first = parts[0];
+        // If first dir is common source dir, use second level
+        if (['src', 'lib', 'app', 'packages', 'modules', 'features', 'apps'].includes(first)) {
+          return parts.length > 2 ? parts[1] : first;
+        }
+        return first;
+      };
+
+      // Assign colors to modules
+      const moduleNames = [...new Set(allNodes.map(n => getModule(n.id)))];
+      moduleNames.forEach((mod, i) => {
+        moduleColorMap[mod] = modulePalette[i % modulePalette.length];
+      });
+
+      // Reassign layer field to module name for coloring
+      for (const node of allNodes) {
+        node.layer = getModule(node.id);
+      }
+    }
+
+    // Build links only between real files
+    const allLinks = report.dependencyGraph.edges
+      .filter(e => realFiles.has(e.from) && realFiles.has(e.to))
+      .map(e => ({ source: e.from, target: e.to }));
+
+    // Limit to top N most-connected nodes for large projects
+    const maxNodes = 60;
+    const sortedNodes = [...allNodes].sort((a, b) => b.connections - a.connections);
+    const limitedNodes = sortedNodes.slice(0, maxNodes);
+    const limitedNodeIds = new Set(limitedNodes.map(n => n.id));
+    const limitedLinks = allLinks.filter(l => limitedNodeIds.has(l.source) && limitedNodeIds.has(l.target));
+    const isLimited = allNodes.length > maxNodes;
+
+    // Collect unique layers/modules from limited nodes
+    const uniqueLayers = [...new Set(limitedNodes.map(n => n.layer))];
+
+    // Build dynamic color map for legend and D3
+    const colorMap: Record<string, string> = useModuleColoring
+      ? moduleColorMap
+      : { API: '#ec4899', Service: '#3b82f6', Data: '#10b981', UI: '#f59e0b', Infrastructure: '#8b5cf6', Other: '#64748b' };
+
+    const legendLabel = useModuleColoring ? 'Colored by module' : 'Colored by layer';
+
+    const legendHtml = uniqueLayers.map(l => {
+      const color = colorMap[l] || '#64748b';
+      return `<span class="legend-item"><span class="legend-dot" style="background: ${color}"></span> ${l}</span>`;
+    }).join('');
+
+    const filterHtml = uniqueLayers.map(l => {
+      const color = colorMap[l] || '#64748b';
+      return `<label class="graph-filter-check"><input type="checkbox" checked data-layer="${l}" onchange="toggleGraphLayer('${l}', checked)"><span class="legend-dot" style="background: ${color}"></span> ${l}</label>`;
+    }).join('');
+
+    return `
+<h2 class="section-title">🔗 Dependency Graph</h2>
+<div class="card graph-card">
+  <div class="graph-controls">
+    <div class="graph-legend">
+      <span class="legend-label" style="color:#94a3b8;font-size:11px;margin-right:8px;">${legendLabel}:</span>
+      ${legendHtml}
+    </div>
+    <div class="graph-filters">
+      <input type="text" id="graphSearch" class="graph-search" placeholder="🔍 Search node..." oninput="filterGraphNodes(value)">
+      <div class="graph-layer-filters">
+        ${filterHtml}
+      </div>
+    </div>
+    ${isLimited ? `<div class="graph-limit-notice">Showing top ${maxNodes} of ${allNodes.length} source files (most connected) · ${limitedLinks.length} links</div>` : ''}
+  </div>
+  <div id="dep-graph" style="width:100%; min-height:500px;"></div>
+  <div class="graph-hint">🖱️ Drag nodes • Scroll to zoom • Double-click to reset • Node size = connections</div>
+</div>
+<script type="application/json" id="graph-nodes">${JSON.stringify(limitedNodes)}${'</'+'script>'}
+<script type="application/json" id="graph-links">${JSON.stringify(limitedLinks)}${'</'+'script>'}
+<script type="application/json" id="graph-colors">${JSON.stringify(colorMap)}${'</'+'script>'}`;
+  }
+
+  /**
+   * Bubble chart for anti-patterns — bigger = more severe
+   */

package/src/adapters/html-reporter/sections/overview.ts

@@ -0,0 +1,64 @@
+import { AnalysisReport } from '@girardelli/architect-core/src/core/types/core.js';
+
+import { esc } from "../utils_sections.js";
+
+  export function renderProjectOverview(report: AnalysisReport): string {
+    const summary = report.projectSummary;
+    if (!summary) return '';
+
+    const modulesHtml = summary.modules.length > 0
+      ? summary.modules.map(m => `
+        <div class="overview-module">
+          <div class="overview-module-name">${esc(m.name)}</div>
+          <div class="overview-module-desc">${esc(m.description)}</div>
+          <div class="overview-module-files">${m.files} file${m.files > 1 ? 's' : ''}</div>
+        </div>`).join('')
+      : '<div class="overview-empty">Nenhum módulo detectado</div>';
+
+    const techHtml = summary.techStack
+      .map(t => `<span class="overview-tag tech-tag">${esc(t)}</span>`)
+      .join('');
+
+    const keywordsHtml = summary.keywords
+      .map(k => `<span class="overview-tag keyword-tag">${esc(k)}</span>`)
+      .join('');
+
+    const entryHtml = summary.entryPoints.length > 0
+      ? summary.entryPoints.map(e => `<code class="overview-entry">${esc(e)}</code>`).join(' ')
+      : '<span class="overview-empty">—</span>';
+
+    return `
+    <details class="section-accordion" id="overview" open>
+      <summary class="section-accordion-header">📋 Project Overview</summary>
+      <div class="section-accordion-body">
+        <div class="overview-grid">
+          <div class="overview-card overview-main">
+            <div class="overview-label">O que é</div>
+            <div class="overview-description">${esc(summary.description)}</div>
+            <div class="overview-purpose-row">
+              <span class="overview-purpose-label">Tipo:</span>
+              <span class="overview-purpose-value">${esc(summary.purpose)}</span>
+            </div>
+          </div>
+          <div class="overview-card">
+            <div class="overview-label">Tech Stack</div>
+            <div class="overview-tags">${techHtml || '<span class="overview-empty">—</span>'}</div>
+          </div>
+          <div class="overview-card">
+            <div class="overview-label">Keywords</div>
+            <div class="overview-tags">${keywordsHtml || '<span class="overview-empty">—</span>'}</div>
+          </div>
+          <div class="overview-card">
+            <div class="overview-label">Entry Points</div>
+            <div class="overview-entries">${entryHtml}</div>
+          </div>
+        </div>
+        <div class="overview-modules-section">
+          <div class="overview-label">Módulos Detectados (${summary.modules.length})</div>
+          <div class="overview-modules-grid">
+            ${modulesHtml}
+          </div>
+        </div>
+      </div>
+    </details>`;
+  }

package/src/adapters/html-reporter/sections/refactoring-plan.ts

@@ -0,0 +1,166 @@
+import { RefactoringPlan, RefactorStep } from '@girardelli/architect-core/src/core/types/rules.js';
+
+import { scoreColor, opColor, opIcon, escapeHtml } from "../utils_sections.js";
+
+  export function renderRefactoringPlan(plan: RefactoringPlan): string {
+    if (plan.steps.length === 0) {
+      return `
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
+  <h2 class="section-title" style="margin-bottom: 0;">✅ Refactoring Plan</h2>
+</div>
+<div class="card success-card">
+  <p>No refactoring needed! Your architecture is already in great shape.</p>
+</div>`;
+    }
+
+    const improvement = plan.estimatedScoreAfter.overall - plan.currentScore.overall;
+
+    const metrics = Object.keys(plan.currentScore.breakdown) as Array<keyof typeof plan.currentScore.breakdown>;
+    const bars = metrics.map(metric => {
+      const before = plan.currentScore.breakdown[metric];
+      const after = plan.estimatedScoreAfter.breakdown[metric] ?? before;
+      const diff = after - before;
+      return `
+      <div class="comparison-row">
+        <div class="refactor-metric-name">${metric}</div>
+        <div class="refactor-metric-bars">
+          <div class="rbar-before" style="width: ${before}%; background: ${scoreColor(before)}40"><span>${before}</span></div>
+          <div class="rbar-after" style="width: ${after}%; background: ${scoreColor(after)}"><span>${after}</span></div>
+        </div>
+        <div class="refactor-metric-diff" style="color: ${diff > 0 ? '#22c55e' : '#64748b'}">
+          ${diff > 0 ? `+${diff}` : diff === 0 ? '—' : String(diff)}
+        </div>
+      </div>`;
+    }).join('');
+
+    const stepsHtml = plan.steps.map(step => renderRefactorStep(step)).join('');
+
+    const criticalCount = plan.steps.filter(s => s.priority === 'CRITICAL').length;
+    const highCount = plan.steps.filter(s => s.priority === 'HIGH').length;
+    const mediumCount = plan.steps.filter(s => s.priority === 'MEDIUM').length;
+    const lowCount = plan.steps.filter(s => s.priority === 'LOW').length;
+
+    return `
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+  <h2 class="section-title" style="margin-bottom: 0;">🔧 Refactoring Plan</h2>
+  <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: #10b981; font-weight: 600; font-size: 0.9rem; background: #10b98115; padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid #10b98140;">
+    <input type="checkbox" id="select-all-prompts" style="width: 1.1rem; height: 1.1rem; accent-color: #10b981; cursor: pointer;" onchange="window.toggleAllPrompts(this.checked)">
+    Selecionar Todos
+  </label>
+</div>
+<button id="download-selected-prompts-btn" onclick="window.downloadSelectedPrompts()" style="display: none; position: fixed; bottom: 30px; right: 30px; background: #10b981; color: white; border: none; padding: 1rem 2rem; border-radius: 50px; font-weight: bold; font-size: 1rem; cursor: pointer; box-shadow: 0 10px 25px rgba(16,185,129,0.4); z-index: 9999; transition: all 0.3s; align-items: center; gap: 0.5rem;">
+  📥 Criar <span id="prompt-count-badge" style="background: white; color: #10b981; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.9rem;">0</span> Prompts p/ IA
+</button>
+<p>Below are action-items ordered by impact and safety. Implementing these gives an estimated score of <strong>${plan.estimatedScoreAfter.overall}/100</strong> (+${improvement}).</p>
+
+<div class="card refactor-score">
+  <div class="refactor-score-pair">
+    <div class="rscore-box">
+      <div class="rscore-num" style="color: ${scoreColor(plan.currentScore.overall)}">${plan.currentScore.overall}</div>
+      <div class="rscore-label">Current</div>
+    </div>
+    <div class="rscore-arrow">
+      <svg width="60" height="30" viewBox="0 0 60 30">
+        <path d="M5 15 L45 15 M40 8 L48 15 L40 22" stroke="#818cf8" stroke-width="2.5" fill="none"/>
+      </svg>
+    </div>
+    <div class="rscore-box">
+      <div class="rscore-num" style="color: ${scoreColor(plan.estimatedScoreAfter.overall)}">${plan.estimatedScoreAfter.overall}</div>
+      <div class="rscore-label">Estimated</div>
+    </div>
+    <div class="rscore-improvement" style="color: #22c55e">+${improvement} pts</div>
+  </div>
+  <div class="refactor-bars-section">
+    <div class="refactor-legend">
+      <span class="rlegend-tag rbefore">Before</span>
+      <span class="rlegend-tag rafter">After</span>
+    </div>
+    ${bars}
+  </div>
+</div>
+
+<div class="refactor-stats-row">
+  <div class="rstat">${plan.steps.length} steps</div>
+  <div class="rstat">${plan.totalOperations} operations</div>
+  <div class="rstat">Tier 1: ${plan.tier1Steps}</div>
+  <div class="rstat">Tier 2: ${plan.tier2Steps}</div>
+</div>
+
+<div class="priority-bar">
+  ${criticalCount ? `<div class="prio-seg prio-critical" style="flex: ${criticalCount}">🔴 ${criticalCount}</div>` : ''}
+  ${highCount ? `<div class="prio-seg prio-high" style="flex: ${highCount}">🟠 ${highCount}</div>` : ''}
+  ${mediumCount ? `<div class="prio-seg prio-medium" style="flex: ${mediumCount}">🔵 ${mediumCount}</div>` : ''}
+  ${lowCount ? `<div class="prio-seg prio-low" style="flex: ${lowCount}">🟢 ${lowCount}</div>` : ''}
+</div>
+
+<div class="refactor-roadmap">
+  ${stepsHtml}
+</div>`;
+  }
+
+
+  export function renderRefactorStep(step: RefactorStep): string {
+    const operationsHtml = step.operations.map(op => `
+      <div class="rop">
+        <span class="rop-icon">${opIcon(op.type)}</span>
+        <span class="rop-badge" style="background: ${opColor(op.type)}20; color: ${opColor(op.type)}; border: 1px solid ${opColor(op.type)}40">${op.type}</span>
+        <code class="rop-path">${escapeHtml(op.path)}</code>
+        ${op.newPath ? `<span class="rop-arrow">→</span> <code class="rop-path">${escapeHtml(op.newPath)}</code>` : ''}
+        <div class="rop-desc">${escapeHtml(op.description)}</div>
+      </div>
+    `).join('');
+
+    const impactHtml = step.scoreImpact.map(i =>
+      `<span class="rimpact-tag">${i.metric}: ${i.before}→${i.after} <strong>+${i.after - i.before}</strong></span>`
+    ).join('');
+
+    const promptHtml = step.aiPrompt ? `
+      <div class="ai-prompt-box">
+        <div class="ai-prompt-header">
+          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+            <input type="checkbox" class="prompt-export-cb" data-filename="step-${step.id}-${step.rule.replace(/[^a-zA-Z0-9-]/g, '-')}.md" onchange="window.updatePromptSelection()">
+            <div>
+              <h4>🤖 Auto-Execute in AI</h4>
+              <p class="ai-prompt-desc">Select to batch-download this prompt for your IDE.</p>
+            </div>
+          </label>
+          <button class="ai-prompt-btn" onclick="window.downloadAIPrompt(this, 'step-${step.id}-refactor.md')">
+            📥 Download Single
+          </button>
+        </div>
+        <div class="ai-prompt-pre">
+          <pre><code>${escapeHtml(step.aiPrompt)}</code></pre>
+        </div>
+      </div>` : '';
+
+    return `
+<div class="rstep-card">
+  <div class="rstep-header">
+    <div class="rstep-number">${step.id}</div>
+    <div class="rstep-info">
+      <div class="rstep-title-row">
+        <h3>${escapeHtml(step.title)}</h3>
+        <span class="severity-badge severity-${step.priority}">${step.priority}</span>
+        <span class="tier-badge">Tier ${step.tier}</span>
+      </div>
+      <p class="rstep-desc">${escapeHtml(step.description)}</p>
+      <details class="rstep-details">
+        <summary>📖 Why?</summary>
+        <p class="rstep-rationale">${escapeHtml(step.rationale)}</p>
+      </details>
+    </div>
+  </div>
+  <details class="rstep-ops-accordion">
+    <summary class="rstep-ops-toggle">📋 Operations (${step.operations.length})</summary>
+    <div class="rstep-ops">
+      ${operationsHtml}
+    </div>
+  </details>
+  <div class="rstep-impact">
+    <h4>📈 Score Impact</h4>
+    <div class="rimpact-tags">${impactHtml}</div>
+  </div>
+  ${promptHtml}
+</div>`;
+  }
+

package/src/adapters/html-reporter/sections/score.ts

@@ -0,0 +1,80 @@
+import { AnalysisReport } from '@girardelli/architect-core/src/core/types/core.js';
+
+import { scoreColor, scoreEmoji, scoreLabel } from "../utils_sections.js";
+
+  export function renderScoreHero(report: AnalysisReport): string {
+    const overall = report.score.overall;
+    const circumference = 2 * Math.PI * 85;
+    const offset = circumference * (1 - overall / 100);
+
+    const breakdownItems = Object.entries(report.score.breakdown)
+      .map(
+        ([name, score]) => `
+      <div class="score-item">
+        <div class="name">${name}</div>
+        <div class="val" style="color: ${scoreColor(score)}">${score} ${scoreEmoji(score)}</div>
+        <div class="bar-container">
+          <div class="bar" style="width: ${score}%; background: ${scoreColor(score)}"></div>
+        </div>
+      </div>`
+      )
+      .join('');
+
+    return `
+<div class="score-hero">
+  <div class="score-circle">
+    <svg viewBox="0 0 200 200" width="180" height="180">
+      <circle class="bg" cx="100" cy="100" r="85" />
+      <circle class="fg" cx="100" cy="100" r="85"
+        stroke="${scoreColor(overall)}"
+        stroke-dasharray="${circumference}"
+        stroke-dashoffset="${offset}" />
+    </svg>
+    <div class="score-value">
+      <div class="number score-counter" data-target="${overall}" style="color: ${scoreColor(overall)}">0</div>
+      <div class="label">/ 100</div>
+      <div class="grade">${scoreLabel(overall)}</div>
+    </div>
+  </div>
+  <div class="score-breakdown">
+    ${breakdownItems}
+  </div>
+</div>`;
+  }
+
+  /**
+   * Radar chart for the 4 score components
+   */
+
+  export function renderRadarChart(report: AnalysisReport): string {
+    // @ts-ignore - Audit cleanup unused variable
+    const entries = Object.entries(report.score.breakdown);
+    return `
+<h2 class="section-title">🎯 Health Radar</h2>
+<div class="card" style="display: flex; justify-content: center;">
+  <svg id="radar-chart" width="350" height="350" viewBox="0 0 350 350"></svg>
+</div>`;
+  }
+
+
+  export function renderStats(report: AnalysisReport): string {
+    return `
+<div class="stats-grid">
+  <div class="stat-card">
+    <div class="value stat-counter" data-target="${report.projectInfo.totalFiles}">0</div>
+    <div class="label">Files Scanned</div>
+  </div>
+  <div class="stat-card">
+    <div class="value stat-counter" data-target="${report.projectInfo.totalLines}">0</div>
+    <div class="label">Lines of Code</div>
+  </div>
+  <div class="stat-card">
+    <div class="value stat-counter" data-target="${report.antiPatterns.length}">0</div>
+    <div class="label">Anti-Patterns</div>
+  </div>
+  <div class="stat-card">
+    <div class="value stat-counter" data-target="${report.dependencyGraph.edges.length}">0</div>
+    <div class="label">Dependencies</div>
+  </div>
+</div>`;
+  }

package/src/adapters/html-reporter/sections/suggestions.ts

@@ -0,0 +1,39 @@
+import { escapeHtml } from "../utils_sections.js";
+
+  export function renderSuggestions(
+    suggestions: Array<{ priority: string; title: string; description: string; impact: string; count: number }>
+  ): string {
+    if (suggestions.length === 0) return '';
+
+    const rows = suggestions
+      .map(
+        (s, i) => `
+        <tr>
+          <td>${i + 1}</td>
+          <td><span class="severity-badge severity-${s.priority}">${s.priority}</span></td>
+          <td>
+            <strong>${escapeHtml(s.title)}</strong>
+            ${s.count > 1 ? `<span class="count-badge">×${s.count}</span>` : ''}
+            <br/><small class="suggestion">${escapeHtml(s.description)}</small>
+          </td>
+          <td class="impact">${escapeHtml(s.impact)}</td>
+        </tr>`
+      )
+      .join('');
+
+    return `
+<h2 class="section-title">💡 Refactoring Suggestions</h2>
+<div class="card">
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Priority</th>
+        <th>Suggestion</th>
+        <th>Impact</th>
+      </tr>
+    </thead>
+    <tbody>${rows}</tbody>
+  </table>
+</div>`;
+  }