@lakindu_perera/toren 1.0.7 → 1.0.9

package/{src → dist}/renderers/html-renderer.js

@@ -24,14 +24,10 @@
  *
  * @module renderers/html-renderer
  */
-
 import path from 'node:path';
-
 // ---------------------------------------------------------------------------
 // Tree builder (plain-text, HTML-safe — same algorithm as markdown-renderer)
 // ---------------------------------------------------------------------------
-
-
 /**
  * Recursively serialise a tree node into classic tree-connector lines.
  *
@@ -43,35 +39,23 @@ import path from 'node:path';
  * @param {number}   maxDepth
  */
 function serializeNode(node, prefix, isLast, lines, depth = 0, maxDepth = 5) {
-  if (depth >= maxDepth) return;
-
-  const connector = isLast ? '└── ' : '├── ';
-  const childPad  = isLast ? '    ' : '│   ';
-  const label     = node.type === 'directory' ? `${node.name}/` : node.name;
-
-  lines.push(`${prefix}${connector}${label}`);
-
-  if (node.type === 'directory') {
-    const children = node.children || [];
-
-    if (depth === maxDepth - 1 && children.length > 0) {
-      lines.push(`${prefix}${childPad}└── ...`);
-      return;
-    }
-
-    for (let i = 0; i < children.length; i++) {
-      serializeNode(
-        children[i],
-        prefix + childPad,
-        i === children.length - 1,
-        lines,
-        depth + 1,
-        maxDepth,
-      );
+    if (depth >= maxDepth)
+        return;
+    const connector = isLast ? '└── ' : '├── ';
+    const childPad = isLast ? '    ' : '│   ';
+    const label = node.type === 'directory' ? `${node.name}/` : node.name;
+    lines.push(`${prefix}${connector}${label}`);
+    if (node.type === 'directory') {
+        const children = node.children || [];
+        if (depth === maxDepth - 1 && children.length > 0) {
+            lines.push(`${prefix}${childPad}└── ...`);
+            return;
+        }
+        for (let i = 0; i < children.length; i++) {
+            serializeNode(children[i], prefix + childPad, i === children.length - 1, lines, depth + 1, maxDepth);
+        }
     }
-  }
 }
-
 /**
  * Convert a ScanResult tree into a plain-text tree string.
  *
@@ -81,22 +65,18 @@ function serializeNode(node, prefix, isLast, lines, depth = 0, maxDepth = 5) {
  * @returns {string}
  */
 function buildTreeString(tree, rootName, totalFiles) {
-  if (totalFiles === 0) return 'No files scanned.';
-
-  const lines    = [`${rootName}/`];
-  const children = tree.children || [];
-
-  for (let i = 0; i < children.length; i++) {
-    serializeNode(children[i], '', i === children.length - 1, lines);
-  }
-
-  return lines.join('\n');
+    if (totalFiles === 0)
+        return 'No files scanned.';
+    const lines = [`${rootName}/`];
+    const children = tree.children || [];
+    for (let i = 0; i < children.length; i++) {
+        serializeNode(children[i], '', i === children.length - 1, lines);
+    }
+    return lines.join('\n');
 }
-
 // ---------------------------------------------------------------------------
 // Utility helpers
 // ---------------------------------------------------------------------------
-
 /**
  * Escape a value for safe insertion into HTML text nodes and attributes.
  *
@@ -104,14 +84,13 @@ function buildTreeString(tree, rootName, totalFiles) {
  * @returns {string}
  */
 function esc(value) {
-  return String(value ?? '')
-    .replace(/&/g,  '&amp;')
-    .replace(/</g,  '&lt;')
-    .replace(/>/g,  '&gt;')
-    .replace(/"/g,  '&quot;')
-    .replace(/'/g,  '&#39;');
+    return String(value ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
 }
-
 /**
  * Format a scan duration in milliseconds to a human-readable string.
  * Returns plain text only — callers are responsible for HTML-escaping via esc().
@@ -120,15 +99,15 @@ function esc(value) {
  * @returns {string}
  */
 function formatDuration(ms) {
-  if (ms < 1)     return '< 1 ms';
-  if (ms >= 1000) return `${(ms / 1000).toFixed(2)} s`;
-  return `${Math.round(ms)} ms`;
+    if (ms < 1)
+        return '< 1 ms';
+    if (ms >= 1000)
+        return `${(ms / 1000).toFixed(2)} s`;
+    return `${Math.round(ms)} ms`;
 }
-
 // ---------------------------------------------------------------------------
 // CSS (inlined — zero external dependencies)
 // ---------------------------------------------------------------------------
-
 /**
  * Build the complete <style> block for the report.
  * All colours are driven by CSS custom properties so they are easy to theme.
@@ -136,7 +115,7 @@ function formatDuration(ms) {
  * @returns {string}
  */
 function buildStyles() {
-  return `<style>
+    return `<style>
 /* ── Reset ──────────────────────────────────────────────────── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -577,28 +556,24 @@ body {
 }
 </style>`;
 }
-
 // ---------------------------------------------------------------------------
 // SVG icon helpers (zero external dependency)
 // ---------------------------------------------------------------------------
-
 /** @returns {string} */
 const icon = {
-  code:    () => `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
-  folder:  () => `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>`,
-  file:    () => `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`,
-  clock:   () => `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`,
-  door:    () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H3a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10"/><polyline points="17 8 22 12 17 16"/><line x1="22" y1="12" x2="11" y2="12"/></svg>`,
-  tree:    () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>`,
-  bar:     () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>`,
-  info:    () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
-  terminal: () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`,
+    code: () => `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
+    folder: () => `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>`,
+    file: () => `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`,
+    clock: () => `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`,
+    door: () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H3a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10"/><polyline points="17 8 22 12 17 16"/><line x1="22" y1="12" x2="11" y2="12"/></svg>`,
+    tree: () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>`,
+    bar: () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>`,
+    info: () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
+    terminal: () => `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`,
 };
-
 // ---------------------------------------------------------------------------
 // Section builders (one function per report section)
 // ---------------------------------------------------------------------------
-
 /**
  * Derive a frameworks array from the projectType string.
  * Returns [] when no specific framework is detected.
@@ -608,10 +583,10 @@ const icon = {
  * @returns {string[]}
  */
 function deriveFrameworks(projectType) {
-  if (!projectType || projectType === 'Unknown') return [];
-  return [projectType];
+    if (!projectType || projectType === 'Unknown')
+        return [];
+    return [projectType];
 }
-
 /**
  * Render the gradient page header.
  *
@@ -620,7 +595,7 @@ function deriveFrameworks(projectType) {
  * @returns {string}
  */
 function renderHeader(projectType, relRoot) {
-  return `
+    return `
   <header class="header">
     <div class="header-top">
       <div>
@@ -643,7 +618,6 @@ function renderHeader(projectType, relRoot) {
     </div>
   </header>`;
 }
-
 /**
  * Render the four summary stat cards.
  *
@@ -651,38 +625,36 @@ function renderHeader(projectType, relRoot) {
  * @returns {string}
  */
 function renderSummaryCards(result) {
-  const { projectType, flatFiles, totalFolders, scanDurationMs } = result;
-
-  const cards = [
-    {
-      label: 'Project Type',
-      icon:  icon.code(),
-      value: esc(projectType || 'Unknown'),
-      isText: true,
-      sub:   'detected framework',
-    },
-    {
-      label: 'Total Files',
-      icon:  icon.file(),
-      value: flatFiles.length,
-      sub:   'source files',
-    },
-    {
-      label: 'Total Folders',
-      icon:  icon.folder(),
-      value: totalFolders,
-      sub:   'directories',
-    },
-    {
-      label: 'Scan Duration',
-      icon:  icon.clock(),
-      value: esc(formatDuration(scanDurationMs)),
-      isText: true,
-      sub:   'wall-clock time',
-    },
-  ];
-
-  const cardHTML = cards.map(c => `
+    const { projectType, flatFiles, totalFolders, scanDurationMs } = result;
+    const cards = [
+        {
+            label: 'Project Type',
+            icon: icon.code(),
+            value: esc(projectType || 'Unknown'),
+            isText: true,
+            sub: 'detected framework',
+        },
+        {
+            label: 'Total Files',
+            icon: icon.file(),
+            value: flatFiles.length,
+            sub: 'source files',
+        },
+        {
+            label: 'Total Folders',
+            icon: icon.folder(),
+            value: totalFolders,
+            sub: 'directories',
+        },
+        {
+            label: 'Scan Duration',
+            icon: icon.clock(),
+            value: esc(formatDuration(scanDurationMs)),
+            isText: true,
+            sub: 'wall-clock time',
+        },
+    ];
+    const cardHTML = cards.map(c => `
     <div class="card">
       <div class="card-label">
         <span class="card-icon">${c.icon}</span>
@@ -691,10 +663,8 @@ function renderSummaryCards(result) {
       <div class="card-value${c.isText ? ' is-text' : ''}">${c.value}</div>
       <div class="card-sub">${esc(c.sub)}</div>
     </div>`).join('');
-
-  return `<div class="cards">${cardHTML}</div>`;
+    return `<div class="cards">${cardHTML}</div>`;
 }
-
 /**
  * Render the frameworks section.
  *
@@ -702,24 +672,21 @@ function renderSummaryCards(result) {
  * @returns {string}
  */
 function renderFrameworks(projectType) {
-  const frameworks = deriveFrameworks(projectType);
-  const count      = frameworks.length;
-
-  const body = count === 0
-    ? `<p class="empty-msg">No frameworks detected.</p>`
-    : `<ul class="entry-list">
+    const frameworks = deriveFrameworks(projectType);
+    const count = frameworks.length;
+    const body = count === 0
+        ? `<p class="empty-msg">No frameworks detected.</p>`
+        : `<ul class="entry-list">
         ${frameworks.map(fw => `
           <li class="entry-item">
             <span class="entry-dot"></span>
             ${esc(fw)}
           </li>`).join('')}
        </ul>`;
-
-  const countBadge = count > 0
-    ? `<span class="section-count">${count} found</span>`
-    : '';
-
-  return `
+    const countBadge = count > 0
+        ? `<span class="section-count">${count} found</span>`
+        : '';
+    return `
   <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.code()}</div>
@@ -729,7 +696,6 @@ function renderFrameworks(projectType) {
     <div class="section-body">${body}</div>
   </section>`;
 }
-
 /**
  * Render the entry points section.
  *
@@ -737,23 +703,20 @@ function renderFrameworks(projectType) {
  * @returns {string}
  */
 function renderEntryPoints(entryPoints) {
-  const count = entryPoints.length;
-
-  const body = count === 0
-    ? `<p class="empty-msg">No entry points detected.</p>`
-    : `<ul class="entry-list">
+    const count = entryPoints.length;
+    const body = count === 0
+        ? `<p class="empty-msg">No entry points detected.</p>`
+        : `<ul class="entry-list">
         ${entryPoints.map(ep => `
           <li class="entry-item">
             <span class="entry-dot"></span>
             ${esc(ep)}
           </li>`).join('')}
        </ul>`;
-
-  const countBadge = count > 0
-    ? `<span class="section-count">${count} found</span>`
-    : '';
-
-  return `
+    const countBadge = count > 0
+        ? `<span class="section-count">${count} found</span>`
+        : '';
+    return `
   <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.door()}</div>
@@ -763,7 +726,6 @@ function renderEntryPoints(entryPoints) {
     <div class="section-body">${body}</div>
   </section>`;
 }
-
 /**
  * Render the configuration files section.
  *
@@ -771,23 +733,20 @@ function renderEntryPoints(entryPoints) {
  * @returns {string}
  */
 function renderConfigurationFiles(configs) {
-  const count = configs.length;
-
-  const body = count === 0
-    ? `<p class="empty-msg">No configuration files detected.</p>`
-    : `<ul class="entry-list">
+    const count = configs.length;
+    const body = count === 0
+        ? `<p class="empty-msg">No configuration files detected.</p>`
+        : `<ul class="entry-list">
         ${configs.map(c => `
           <li class="entry-item">
             <span class="entry-dot"></span>
             ${esc(c)}
           </li>`).join('')}
        </ul>`;
-
-  const countBadge = count > 0
-    ? `<span class="section-count">${count} found</span>`
-    : '';
-
-  return `
+    const countBadge = count > 0
+        ? `<span class="section-count">${count} found</span>`
+        : '';
+    return `
   <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.file()}</div>
@@ -797,49 +756,162 @@ function renderConfigurationFiles(configs) {
     <div class="section-body">${body}</div>
   </section>`;
 }
-
 /**
  * Render the package scripts section.
  *
  * @param {Array<{name: string, command: string}>} scripts
  * @returns {string}
  */
+function renderProjectInfo(projectInfo, packageManager) {
+    const rows = [];
+    if (projectInfo?.name)
+        rows.push(['Name', projectInfo.name]);
+    if (packageManager)
+        rows.push(['Package Manager', packageManager]);
+    if (projectInfo?.runtime)
+        rows.push(['Runtime', projectInfo.runtime]);
+    if (projectInfo?.language)
+        rows.push(['Language', projectInfo.language]);
+    if (projectInfo?.architecture)
+        rows.push(['Architecture', projectInfo.architecture]);
+    if (projectInfo?.framework)
+        rows.push(['Framework', projectInfo.framework]);
+    if (projectInfo?.entryPoint)
+        rows.push(['Entry Point', projectInfo.entryPoint]);
+    if (projectInfo?.sourceDirectory)
+        rows.push(['Source Directory', projectInfo.sourceDirectory]);
+    if (rows.length === 0)
+        return '';
+    const rowsHTML = rows.map(([prop, value]) => `
+    <tr>
+      <td>${esc(prop)}</td>
+      <td class="val-plain">${esc(value)}</td>
+    </tr>`).join('');
+    return `
+  <section class="section">
+    <div class="section-header">
+      <div class="section-icon">${icon.info()}</div>
+      <h2 class="section-title">Project Info</h2>
+    </div>
+    <div class="section-body" style="padding:0">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Property</th>
+            <th style="text-align:right">Value</th>
+          </tr>
+        </thead>
+        <tbody>${rowsHTML}</tbody>
+      </table>
+    </div>
+  </section>`;
+}
+function renderImportantFiles(importantFiles) {
+    const count = importantFiles.length;
+    const body = count === 0
+        ? `<p class="empty-msg" style="padding: 1.5rem">No important files detected.</p>`
+        : `<table class="data-table">
+        <thead>
+          <tr>
+            <th>Path</th>
+            <th>Reason</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${importantFiles.map(f => `
+            <tr>
+              <td><code>${esc(f.path)}</code></td>
+              <td class="val-plain">${esc(f.reason)}</td>
+            </tr>`).join('')}
+        </tbody>
+       </table>`;
+    const countBadge = count > 0
+        ? `<span class="section-count">${count} found</span>`
+        : '';
+    return `
+  <section class="section">
+    <div class="section-header">
+      <div class="section-icon">${icon.file()}</div>
+      <h2 class="section-title">Important Files</h2>
+      ${countBadge}
+    </div>
+    <div class="section-body" style="padding:0">
+      ${body}
+    </div>
+  </section>`;
+}
+function renderProjectHealth(health) {
+    const count = health.length;
+    const body = count === 0
+        ? `<p class="empty-msg" style="padding: 1.5rem">No project health observations available.</p>`
+        : `<ul class="entry-list">
+        ${health.map(h => {
+            let emoji = 'ℹ';
+            if (h.status === 'pass')
+                emoji = '✓';
+            else if (h.status === 'warning')
+                emoji = '⚠';
+            return `
+          <li class="entry-item">
+            <span>${esc(emoji)}</span>
+            ${esc(h.message)}
+          </li>`;
+        }).join('')}
+       </ul>`;
+    const countBadge = count > 0
+        ? `<span class="section-count">${count} observations</span>`
+        : '';
+    return `
+  <section class="section">
+    <div class="section-header">
+      <div class="section-icon">${icon.info()}</div>
+      <h2 class="section-title">Project Health</h2>
+      ${countBadge}
+    </div>
+    <div class="section-body">
+      ${body}
+    </div>
+  </section>`;
+}
 function renderPackageScripts(scripts) {
-  const count = scripts.length;
-
-  const body = count === 0
-    ? `<p class="empty-msg" style="padding: 1.5rem">No package scripts detected.</p>`
-    : `<table class="data-table">
+    const count = scripts.length;
+    const body = count === 0
+        ? `<p class="empty-msg" style="padding: 1.5rem">No package scripts detected.</p>`
+        : `<table class="data-table">
         <thead>
           <tr>
-            <th>Script</th>
+            <th>Usage</th>
+            <th>Description</th>
             <th>Command</th>
           </tr>
         </thead>
         <tbody>
-          ${scripts.map(s => `
+          ${scripts.map(s => {
+            const usage = s.usage || `npm run ${s.name}`;
+            return `
             <tr>
-              <td><code>${esc(s.name)}</code></td>
+              <td><code>${esc(usage)}</code></td>
+              <td class="val-plain">${esc(s.description || '')}</td>
               <td class="val-plain"><code>${esc(s.command)}</code></td>
-            </tr>`).join('')}
+            </tr>`;
+        }).join('')}
         </tbody>
        </table>`;
-
-  const countBadge = count > 0
-    ? `<span class="section-count">${count} found</span>`
-    : '';
-
-  return `
+    const countBadge = count > 0
+        ? `<span class="section-count">${count} found</span>`
+        : '';
+    return `
   <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.terminal()}</div>
       <h2 class="section-title">Package Scripts</h2>
       ${countBadge}
     </div>
-    <div class="section-body" style="padding:0">${body}</div>
+    <div class="section-body" style="padding:0">
+      ${body}
+    </div>
   </section>`;
 }
-
 /**
  * Render the folder structure section.
  *
@@ -849,9 +921,8 @@ function renderPackageScripts(scripts) {
  * @returns {string}
  */
 function renderFolderStructure(tree, flatFiles, rootName) {
-  const treeStr = buildTreeString(tree, rootName, flatFiles.length);
-
-  return `
+    const treeStr = buildTreeString(tree, rootName, flatFiles.length);
+    return `
   <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.tree()}</div>
@@ -865,7 +936,6 @@ function renderFolderStructure(tree, flatFiles, rootName) {
     </div>
   </section>`;
 }
-
 /**
  * Render the statistics table.
  *
@@ -873,21 +943,18 @@ function renderFolderStructure(tree, flatFiles, rootName) {
  * @returns {string}
  */
 function renderStats(result) {
-  const { flatFiles, totalFolders, scanDurationMs } = result;
-
-  const rows = [
-    ['Files',         flatFiles.length,              true],
-    ['Folders',       totalFolders,                  true],
-    ['Scan Duration', formatDuration(scanDurationMs), false],
-  ];
-
-  const rowsHTML = rows.map(([metric, value, isNum]) => `
+    const { flatFiles, totalFolders, scanDurationMs } = result;
+    const rows = [
+        ['Files', flatFiles.length, true],
+        ['Folders', totalFolders, true],
+        ['Scan Duration', formatDuration(scanDurationMs), false],
+    ];
+    const rowsHTML = rows.map(([metric, value, isNum]) => `
     <tr>
       <td>${esc(metric)}</td>
       <td class="${isNum ? 'val' : 'val-plain'}">${esc(value)}</td>
     </tr>`).join('');
-
-  return `
+    return `
   <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.bar()}</div>
@@ -906,25 +973,22 @@ function renderStats(result) {
     </div>
   </section>`;
 }
-
 /**
  * Render the scan provenance / metadata section.
  *
  * @returns {string}
  */
 function renderScanInfo() {
-  const rows = [
-    ['Generated by', '<strong>Toren</strong> — Codebase Onboarding Intelligence'],
-    ['Output format', 'HTML'],
-  ];
-
-  const rowsHTML = rows.map(([label, value]) => `
+    const rows = [
+        ['Generated by', '<strong>Toren</strong> — Codebase Onboarding Intelligence'],
+        ['Output format', 'HTML'],
+    ];
+    const rowsHTML = rows.map(([label, value]) => `
     <tr>
       <td>${esc(label)}</td>
       <td class="val-plain">${value}</td>
     </tr>`).join('');
-
-  return `
+    return `
   <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.info()}</div>
@@ -937,24 +1001,21 @@ function renderScanInfo() {
     </div>
   </section>`;
 }
-
 /**
  * Render the page footer.
  *
  * @returns {string}
  */
 function renderFooter() {
-  return `
+    return `
   <footer class="footer">
     <span class="footer-brand">${icon.code()} Toren</span>
     &nbsp;—&nbsp; Codebase Onboarding Intelligence
   </footer>`;
 }
-
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
-
 /**
  * Render a ScanResult as a self-contained HTML5 report to stdout.
  *
@@ -966,14 +1027,12 @@ function renderFooter() {
  * @param {{ cwd?: string }} [options]
  */
 export function render(result, options = {}) {
-  const { rootPath, projectType, entryPoints, configs = [], scripts = [], flatFiles, tree } = result;
-
-  const cwd      = options.cwd ?? process.cwd();
-  const relRoot  = path.relative(cwd, rootPath) || '.';
-  const rootName = path.basename(rootPath)      || relRoot;
-  const title    = `Toren — ${esc(path.basename(rootPath) || relRoot)}`;
-
-  const html = `<!DOCTYPE html>
+    const { rootPath, projectType, entryPoints, configs = [], scripts = [], flatFiles, tree, importantFiles = [], health = [], projectInfo, packageManager } = result;
+    const cwd = options.cwd ?? process.cwd();
+    const relRoot = path.relative(cwd, rootPath) || '.';
+    const rootName = path.basename(rootPath) || relRoot;
+    const title = `Toren — ${esc(path.basename(rootPath) || relRoot)}`;
+    const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -990,6 +1049,9 @@ export function render(result, options = {}) {
 
     <main>
       ${renderSummaryCards(result)}
+      ${renderProjectInfo(projectInfo, packageManager)}
+      ${renderProjectHealth(health)}
+      ${renderImportantFiles(importantFiles)}
       ${renderFrameworks(projectType)}
       ${renderEntryPoints(entryPoints)}
       ${renderConfigurationFiles(configs)}
@@ -1004,6 +1066,6 @@ export function render(result, options = {}) {
   </div>
 </body>
 </html>`;
-
-  console.log(html);
+    console.log(html);
 }
+//# sourceMappingURL=html-renderer.js.map