@lakindu_perera/toren 1.0.4 → 1.0.7

package/src/renderers/console-renderer.js

@@ -4,7 +4,9 @@
  * Consumes a {@link ScanResult} and produces styled terminal output.
  *
  * Design contract:
- *  - No business logic. Every value rendered is taken directly from ScanResult.
+ *  - Presentation-only. Every value rendered comes from ScanResult.
+ *    Presentation-level derivations (e.g. frameworks list from projectType) are
+ *    permitted here; business logic is not.
  *  - No imports from the scanner or any domain module.
  *  - Stateless: render() may be called multiple times safely.
  *  - The shape expected here matches the ScanResult typedef in scan.js.
@@ -42,6 +44,47 @@ const C = {
 /** Maximum files shown in the structure preview. */
 const PREVIEW_LIMIT = 20;
 
+// ---------------------------------------------------------------------------
+// Cross-platform capability detection
+// ---------------------------------------------------------------------------
+
+function shouldEnableColors() {
+  if ('FORCE_COLOR' in process.env) {
+    return process.env.FORCE_COLOR !== '0' && process.env.FORCE_COLOR !== 'false';
+  }
+  if ('NO_COLOR' in process.env) return false;
+  if (!process.stdout || !process.stdout.isTTY) return false;
+  if (process.env.TERM === 'dumb') return false;
+  return true;
+}
+
+function isUnicodeSupported() {
+  if (process.platform !== 'win32') {
+    return process.env.TERM !== 'linux';
+  }
+  return Boolean(
+    process.env.CI ||
+    process.env.WT_SESSION ||
+    process.env.TERMINUS_SUBLIME ||
+    process.env.ConEmuTask === '{cmd::Cmder}' ||
+    process.env.TERM_PROGRAM === 'Terminus-Sublime' ||
+    process.env.TERM_PROGRAM === 'vscode' ||
+    process.env.TERM === 'xterm-256color' ||
+    process.env.TERM === 'alacritty' ||
+    process.env.TERMINAL_EMULATOR === 'JetBrains-JediTerm'
+  );
+}
+
+const useColors  = shouldEnableColors();
+const useUnicode = isUnicodeSupported();
+
+const CHARS = {
+  dash:   useUnicode ? '─'    : '-',
+  corner: useUnicode ? '└── ' : '\\-- ',
+  tee:    useUnicode ? '├── ' : '+-- ',
+  pipe:   useUnicode ? '│   ' : '|   ',
+};
+
 // ---------------------------------------------------------------------------
 // Low-level paint / layout helpers  (private to this module)
 // ---------------------------------------------------------------------------
@@ -53,27 +96,19 @@ const PREVIEW_LIMIT = 20;
  * @returns {string}
  */
 function paint(text, ...codes) {
+  if (!useColors) return text;
   return `${codes.join('')}${text}${C.reset}`;
 }
 
 /**
- * Print a full-width horizontal rule (≤ 80 chars).
- * @param {string} [char='─']
- */
-function divider(char = '─') {
-  const width = Math.min(process.stdout.columns ?? 72, 80);
-  console.log(paint(char.repeat(width), C.dim));
-}
-
-/**
- * Print a titled section header followed by a divider.
- * @param {string} emoji
+ * Print a titled section header followed by a matched-length divider.
  * @param {string} title
  */
-function section(emoji, title) {
+function section(title) {
+  const cleanTitle = title.replace(/\x1b\[[0-9;]*m/g, '');
+  console.log(paint(title, C.bold, C.white));
+  console.log(paint(CHARS.dash.repeat(cleanTitle.length), C.dim));
   console.log('');
-  console.log(`${emoji}  ${paint(title, C.bold, C.white)}`);
-  divider();
 }
 
 /**
@@ -84,7 +119,32 @@ function section(emoji, title) {
  */
 function row(label, value, ...valueCodes) {
   const coloured = valueCodes.length ? paint(value, ...valueCodes) : value;
-  console.log(`  ${paint(label, C.dim)}  ${coloured}`);
+  console.log(`${paint(label, C.dim)} ${coloured}`);
+}
+
+/**
+ * Format a scan duration into a human-readable string.
+ * Mirrors the formatDuration helpers in markdown-renderer and html-renderer.
+ * @param {number} ms
+ * @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`;
+}
+
+/**
+ * Derive a frameworks array from the projectType string.
+ * Returns [] when no specific framework is detected (projectType is falsy or 'Unknown').
+ * Mirrors the identical derivation in json-renderer.js — both must stay in sync.
+ *
+ * @param {string} projectType
+ * @returns {string[]}
+ */
+function deriveFrameworks(projectType) {
+  if (!projectType || projectType === 'Unknown') return [];
+  return [projectType];
 }
 
 // ---------------------------------------------------------------------------
@@ -107,21 +167,21 @@ function renderTree(node, prefix, isLast, counter, limit = PREVIEW_LIMIT, depth
   if (counter.maxReached) return;
   if (depth >= maxDepth) return;
 
-  const connector = isLast ? '└── ' : '├── ';
-  const extension = isLast ? '    ' : '│   ';
+  const connector = isLast ? CHARS.corner : CHARS.tee;
+  const extension = isLast ? '    ' : CHARS.pipe;
 
   if (node.type === 'directory') {
-    console.log(`${prefix}${connector}${paint(`${node.name}/`, C.bold, C.blue)}`);
+    console.log(`${prefix}${connector}${paint(`${node.name}${path.sep}`, C.bold, C.blue)}`);
     const children = node.children ?? [];
     
     if (depth === maxDepth - 1 && children.length > 0) {
-       console.log(`${prefix}${extension}└── ${paint('...', C.dim)}`);
+       console.log(`${prefix}${extension}${CHARS.corner}${paint('...', C.dim)}`);
        return;
     }
 
     for (let i = 0; i < children.length; i++) {
       if (counter.count >= limit) {
-        console.log(`${prefix}${extension}└── ${paint('...', C.dim)}`);
+        console.log(`${prefix}${extension}${CHARS.corner}${paint('...', C.dim)}`);
         counter.maxReached = true;
         break;
       }
@@ -137,11 +197,6 @@ function renderTree(node, prefix, isLast, counter, limit = PREVIEW_LIMIT, depth
   }
 }
 
-function formatDuration(ms) {
-  if (ms < 1) return '< 1 ms';
-  if (ms >= 1000) return `${(ms / 1000).toFixed(2)} s`;
-  return `${Math.round(ms)} ms`;
-}
 
 // ---------------------------------------------------------------------------
 // Banner  (private)
@@ -151,8 +206,7 @@ function printBanner() {
   const name    = paint('Toren', C.bold, C.cyan);
   const version = paint(`v${pkg.version}`, C.dim);
   const tagline = paint('Codebase Onboarding Intelligence', C.dim);
-  console.log('');
-  console.log(`  ${name} ${version}  —  ${tagline}`);
+  console.log(`${name} ${version}  —  ${tagline}`);
 }
 
 // ---------------------------------------------------------------------------
@@ -162,8 +216,8 @@ function printBanner() {
 /**
  * Render a ScanResult to the terminal.
  *
- * All sections read exclusively from the ScanResult; no derivations or
- * business decisions are made here.
+ * All sections read from the ScanResult. Presentation-level derivations
+ * (e.g. frameworks list) are computed here; no business logic is added.
  *
  * @param {import('../scanner/scan.js').ScanResult} result
  * @param {{ cwd?: string }} [options]
@@ -173,6 +227,8 @@ export function render(result, options = {}) {
     rootPath,
     projectType,
     entryPoints,
+    configs = [],
+    scripts = [],
     tree,
     flatFiles,
     totalFolders,
@@ -187,33 +243,70 @@ export function render(result, options = {}) {
   console.log('');
 
   // ── Summary ───────────────────────────────────────────────────────────────
-  section('🔍', 'Project Summary');
+  section('Project Summary');
   row('Path:         ', paint(relRoot, C.cyan));
   row('Project type: ', paint(projectType, C.bold, C.green));
   row('Total files:  ', paint(String(flatFiles.length), C.yellow));
   row('Total folders:', paint(String(totalFolders), C.yellow));
-  row('Scan duration:', paint(formatDuration(scanDurationMs), C.magenta));
+  console.log('');
+
+  // ── Frameworks ────────────────────────────────────────────────────────────
+  section('Frameworks');
+  const frameworks = deriveFrameworks(projectType);
+  if (frameworks.length === 0) {
+    console.log(paint('No frameworks detected.', C.dim));
+  } else {
+    for (const fw of frameworks) {
+      console.log(paint(fw, C.white));
+    }
+  }
+  console.log('');
 
   // ── Entry Points ──────────────────────────────────────────────────────────
-  section('🚪', 'Entry Points');
+  section('Entry Points');
   if (entryPoints.length === 0) {
-    console.log(paint('  ⚠ No entry points detected (this may be a library or utility project)', C.yellow));
+    console.log(paint('No entry points detected.', C.dim));
   } else {
     for (const ep of entryPoints) {
-      console.log(`  ${paint('→', C.cyan)}  ${paint(ep, C.white)}`);
+      console.log(paint(ep, C.white));
+    }
+  }
+  console.log('');
+
+  // ── Configuration Files ───────────────────────────────────────────────────
+  section('Configuration Files');
+  if (configs.length === 0) {
+    console.log(paint('No configuration files detected.', C.dim));
+  } else {
+    for (const c of configs) {
+      console.log(paint(c, C.white));
     }
   }
+  console.log('');
+
+  // ── Package Scripts ───────────────────────────────────────────────────────
+  section('Package Scripts');
+  if (scripts.length === 0) {
+    console.log(paint('No package scripts detected.', C.dim));
+  } else {
+    const maxNameLen = Math.max(...scripts.map(s => s.name.length));
+    for (const s of scripts) {
+      const paddedName = s.name.padEnd(maxNameLen, ' ');
+      console.log(`${paint(paddedName, C.white)}  ${paint(s.command, C.dim)}`);
+    }
+  }
+  console.log('');
 
   // ── Structure Preview ─────────────────────────────────────────────────────
-  section('📁', `Folder Structure  ${paint(`(first ${PREVIEW_LIMIT} files)`, C.dim)}`);
+  section('Folder Structure');
 
-  console.log(paint(`${tree.name || '.'}/`, C.bold, C.blue));
+  console.log(paint(`${tree.name || '.'}${path.sep}`, C.bold, C.blue));
 
   const counter  = { count: 0, maxReached: false };
   const children = tree.children ?? [];
   for (let i = 0; i < children.length; i++) {
     if (counter.count >= PREVIEW_LIMIT) {
-      console.log(`└── ${paint('...', C.dim)}`);
+      console.log(`${CHARS.corner}${paint('...', C.dim)}`);
       break;
     }
     renderTree(children[i], '', i === children.length - 1, counter);
@@ -222,13 +315,12 @@ export function render(result, options = {}) {
 
   if (flatFiles.length > PREVIEW_LIMIT) {
     const hidden = flatFiles.length - PREVIEW_LIMIT;
-    console.log(paint(`  … and ${hidden} more file(s) not shown`, C.dim));
+    console.log(paint(`… ${hidden} more file(s) not shown`, C.dim));
   }
 
   // ── Footer ────────────────────────────────────────────────────────────────
   console.log('');
-  divider();
-  console.log(paint('  ✅  Scan complete.', C.green));
+  console.log(paint(`Scan completed in ${formatDuration(scanDurationMs)}`, C.green));
   console.log('');
 }
 
@@ -240,8 +332,8 @@ export function render(result, options = {}) {
 export function renderStructure(result) {
   const { tree, flatFiles } = result;
 
-  console.log(paint('Project Structure:', C.bold, C.white));
-  console.log(paint(`${tree.name || '.'}/`, C.bold, C.blue));
+  section('Folder Structure');
+  console.log(paint(`${tree.name || '.'}${path.sep}`, C.bold, C.blue));
 
   const counter  = { count: 0, maxReached: false };
   const children = tree.children ?? [];
@@ -249,7 +341,7 @@ export function renderStructure(result) {
 
   for (let i = 0; i < children.length; i++) {
     if (counter.count >= limit) {
-      console.log(`└── ${paint('...', C.dim)}`);
+      console.log(`${CHARS.corner}${paint('...', C.dim)}`);
       break;
     }
     renderTree(children[i], '', i === children.length - 1, counter, limit, 0, Infinity);

package/src/renderers/html-renderer.js

@@ -31,34 +31,6 @@ import path from 'node:path';
 // Tree builder (plain-text, HTML-safe — same algorithm as markdown-renderer)
 // ---------------------------------------------------------------------------
 
-/**
- * Build an in-memory nested tree from a flat list of relative file paths.
- *
- * @param {string[]} flatFiles - Relative file paths produced by scan()
- * @returns {{ type: string, children: Record<string, object> }}
- */
-function buildInternalTree(flatFiles) {
-  const root = { type: 'directory', children: {} };
-
-  for (const filePath of flatFiles) {
-    const parts = filePath.split(/[/\\]/).filter(Boolean);
-    let node = root;
-
-    for (let i = 0; i < parts.length; i++) {
-      const part   = parts[i];
-      const isLeaf = i === parts.length - 1;
-
-      if (!node.children[part]) {
-        node.children[part] = isLeaf
-          ? { type: 'file', name: part }
-          : { type: 'directory', name: part, children: {} };
-      }
-      node = node.children[part];
-    }
-  }
-
-  return root;
-}
 
 /**
  * Recursively serialise a tree node into classic tree-connector lines.
@@ -80,10 +52,7 @@ function serializeNode(node, prefix, isLast, lines, depth = 0, maxDepth = 5) {
   lines.push(`${prefix}${connector}${label}`);
 
   if (node.type === 'directory') {
-    const children = Object.values(node.children || {}).sort((a, b) => {
-      if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
-      return a.name.localeCompare(b.name);
-    });
+    const children = node.children || [];
 
     if (depth === maxDepth - 1 && children.length > 0) {
       lines.push(`${prefix}${childPad}└── ...`);
@@ -104,21 +73,18 @@ function serializeNode(node, prefix, isLast, lines, depth = 0, maxDepth = 5) {
 }
 
 /**
- * Convert a flat file list into a plain-text tree string.
+ * Convert a ScanResult tree into a plain-text tree string.
  *
- * @param {string[]} flatFiles
+ * @param {import('../scanner/scan.js').DirNode} tree
  * @param {string}   rootName
+ * @param {number}   totalFiles
  * @returns {string}
  */
-function buildTreeString(flatFiles, rootName) {
-  if (flatFiles.length === 0) return 'No files scanned.';
+function buildTreeString(tree, rootName, totalFiles) {
+  if (totalFiles === 0) return 'No files scanned.';
 
-  const root     = buildInternalTree(flatFiles);
   const lines    = [`${rootName}/`];
-  const children = Object.values(root.children).sort((a, b) => {
-    if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
-    return a.name.localeCompare(b.name);
-  });
+  const children = tree.children || [];
 
   for (let i = 0; i < children.length; i++) {
     serializeNode(children[i], '', i === children.length - 1, lines);
@@ -148,12 +114,13 @@ function esc(value) {
 
 /**
  * Format a scan duration in milliseconds to a human-readable string.
+ * Returns plain text only — callers are responsible for HTML-escaping via esc().
  *
  * @param {number} ms
  * @returns {string}
  */
 function formatDuration(ms) {
-  if (ms < 1)     return '&lt; 1 ms';
+  if (ms < 1)     return '< 1 ms';
   if (ms >= 1000) return `${(ms / 1000).toFixed(2)} s`;
   return `${Math.round(ms)} ms`;
 }
@@ -625,12 +592,26 @@ const icon = {
   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.
+ * Mirrors the identical derivation in console-renderer.js and json-renderer.js.
+ *
+ * @param {string} projectType
+ * @returns {string[]}
+ */
+function deriveFrameworks(projectType) {
+  if (!projectType || projectType === 'Unknown') return [];
+  return [projectType];
+}
+
 /**
  * Render the gradient page header.
  *
@@ -695,7 +676,7 @@ function renderSummaryCards(result) {
     {
       label: 'Scan Duration',
       icon:  icon.clock(),
-      value: formatDuration(scanDurationMs),
+      value: esc(formatDuration(scanDurationMs)),
       isText: true,
       sub:   'wall-clock time',
     },
@@ -714,6 +695,41 @@ function renderSummaryCards(result) {
   return `<div class="cards">${cardHTML}</div>`;
 }
 
+/**
+ * Render the frameworks section.
+ *
+ * @param {string} projectType
+ * @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">
+        ${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 `
+  <section class="section">
+    <div class="section-header">
+      <div class="section-icon">${icon.code()}</div>
+      <h2 class="section-title">Frameworks</h2>
+      ${countBadge}
+    </div>
+    <div class="section-body">${body}</div>
+  </section>`;
+}
+
 /**
  * Render the entry points section.
  *
@@ -738,31 +754,108 @@ function renderEntryPoints(entryPoints) {
     : '';
 
   return `
-  <div class="section">
+  <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.door()}</div>
-      <span class="section-title">Entry Points</span>
+      <h2 class="section-title">Entry Points</h2>
       ${countBadge}
     </div>
     <div class="section-body">${body}</div>
-  </div>`;
+  </section>`;
 }
 
 /**
- * Render the folder structure section with a dark <pre><code> tree.
+ * Render the configuration files section.
  *
+ * @param {string[]} configs
+ * @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">
+        ${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 `
+  <section class="section">
+    <div class="section-header">
+      <div class="section-icon">${icon.file()}</div>
+      <h2 class="section-title">Configuration Files</h2>
+      ${countBadge}
+    </div>
+    <div class="section-body">${body}</div>
+  </section>`;
+}
+
+/**
+ * Render the package scripts section.
+ *
+ * @param {Array<{name: string, command: string}>} scripts
+ * @returns {string}
+ */
+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">
+        <thead>
+          <tr>
+            <th>Script</th>
+            <th>Command</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${scripts.map(s => `
+            <tr>
+              <td><code>${esc(s.name)}</code></td>
+              <td class="val-plain"><code>${esc(s.command)}</code></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.terminal()}</div>
+      <h2 class="section-title">Package Scripts</h2>
+      ${countBadge}
+    </div>
+    <div class="section-body" style="padding:0">${body}</div>
+  </section>`;
+}
+
+/**
+ * Render the folder structure section.
+ *
+ * @param {import('../scanner/scan.js').DirNode} tree
  * @param {string[]} flatFiles
- * @param {string}   rootName
+ * @param {string} rootName
  * @returns {string}
  */
-function renderFolderStructure(flatFiles, rootName) {
-  const treeStr = buildTreeString(flatFiles, rootName);
+function renderFolderStructure(tree, flatFiles, rootName) {
+  const treeStr = buildTreeString(tree, rootName, flatFiles.length);
 
   return `
-  <div class="section">
+  <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.tree()}</div>
-      <span class="section-title">Folder Structure</span>
+      <h2 class="section-title">Folder Structure</h2>
       ${flatFiles.length > 0 ? `<span class="section-count">${flatFiles.length} files</span>` : ''}
     </div>
     <div class="section-body">
@@ -770,7 +863,7 @@ function renderFolderStructure(flatFiles, rootName) {
         <pre><code>${esc(treeStr)}</code></pre>
       </div>
     </div>
-  </div>`;
+  </section>`;
 }
 
 /**
@@ -791,14 +884,14 @@ function renderStats(result) {
   const rowsHTML = rows.map(([metric, value, isNum]) => `
     <tr>
       <td>${esc(metric)}</td>
-      <td class="${isNum ? 'val' : 'val-plain'}">${value}</td>
+      <td class="${isNum ? 'val' : 'val-plain'}">${esc(value)}</td>
     </tr>`).join('');
 
   return `
-  <div class="section">
+  <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.bar()}</div>
-      <span class="section-title">Statistics</span>
+      <h2 class="section-title">Statistics</h2>
     </div>
     <div class="section-body">
       <table class="data-table">
@@ -811,7 +904,7 @@ function renderStats(result) {
         <tbody>${rowsHTML}</tbody>
       </table>
     </div>
-  </div>`;
+  </section>`;
 }
 
 /**
@@ -832,17 +925,17 @@ function renderScanInfo() {
     </tr>`).join('');
 
   return `
-  <div class="section">
+  <section class="section">
     <div class="section-header">
       <div class="section-icon">${icon.info()}</div>
-      <span class="section-title">Scan Information</span>
+      <h2 class="section-title">Scan Information</h2>
     </div>
     <div class="section-body">
       <table class="data-table">
         <tbody>${rowsHTML}</tbody>
       </table>
     </div>
-  </div>`;
+  </section>`;
 }
 
 /**
@@ -873,7 +966,7 @@ function renderFooter() {
  * @param {{ cwd?: string }} [options]
  */
 export function render(result, options = {}) {
-  const { rootPath, projectType, entryPoints, flatFiles } = result;
+  const { rootPath, projectType, entryPoints, configs = [], scripts = [], flatFiles, tree } = result;
 
   const cwd      = options.cwd ?? process.cwd();
   const relRoot  = path.relative(cwd, rootPath) || '.';
@@ -897,9 +990,12 @@ export function render(result, options = {}) {
 
     <main>
       ${renderSummaryCards(result)}
+      ${renderFrameworks(projectType)}
       ${renderEntryPoints(entryPoints)}
-      ${renderFolderStructure(flatFiles, rootName)}
+      ${renderConfigurationFiles(configs)}
+      ${renderPackageScripts(scripts)}
       ${renderStats(result)}
+      ${renderFolderStructure(tree, flatFiles, rootName)}
       ${renderScanInfo()}
     </main>