npm - gitfamiliar - Versions diffs - 0.10.0 → 0.11.0 - Mend

gitfamiliar 0.10.0 → 0.11.0

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

Files changed (9) hide show

package/README.md +48 -35
package/dist/bin/gitfamiliar.js +1052 -659
package/dist/bin/gitfamiliar.js.map +1 -1
package/dist/{chunk-6XUJIHN3.js → chunk-3SYLST7V.js} +9 -9
package/dist/chunk-3SYLST7V.js.map +1 -0
package/dist/index.d.ts +1 -0
package/dist/index.js +1 -1
package/package.json +1 -1
package/dist/chunk-6XUJIHN3.js.map +0 -1

package/dist/bin/gitfamiliar.js CHANGED Viewed

@@ -8,7 +8,7 @@ import {
   processBatch,
   resolveUser,
   walkFiles
-} from "../chunk-6XUJIHN3.js";
+} from "../chunk-3SYLST7V.js";
 // src/cli/index.ts
 import { createRequire } from "module";
@@ -22,6 +22,19 @@ var DEFAULT_WEIGHTS = {
 var DEFAULT_EXPIRATION = {
   policy: "never"
 };
+var HOTSPOT_RISK_THRESHOLDS = {
+  critical: 0.6,
+  high: 0.4,
+  medium: 0.2
+};
+var COVERAGE_RISK_THRESHOLDS = {
+  risk: 1,
+  // <= 1 contributor
+  moderate: 3
+  // <= 3 contributors
+};
+var DEFAULT_HOTSPOT_WINDOW = 90;
+var BUS_FACTOR_TARGET = 0.5;
 // src/cli/options.ts
 function parseOptions(raw, repoPath) {
@@ -57,7 +70,8 @@ function parseOptions(raw, repoPath) {
     team: raw.team || false,
     contributorsPerFile: raw.contributorsPerFile || raw.contributors || raw.teamCoverage || false,
     hotspot,
-    since: sinceDays
+    since: sinceDays,
+    demo: raw.demo || false
   };
 }
 var MODE_ALIASES = {
@@ -89,13 +103,15 @@ function parseWeights(s) {
 }
 // src/cli/output/terminal.ts
+import chalk2 from "chalk";
+// src/cli/output/terminal-utils.ts
 import chalk from "chalk";
-var BAR_WIDTH = 10;
 var FILLED_CHAR = "\u2588";
 var EMPTY_CHAR = "\u2591";
-function makeBar(score) {
-  const filled = Math.round(score * BAR_WIDTH);
-  const empty = BAR_WIDTH - filled;
+function makeBar(score, width = 10) {
+  const filled = Math.round(score * width);
+  const empty = width - filled;
   const bar = FILLED_CHAR.repeat(filled) + EMPTY_CHAR.repeat(empty);
   if (score >= 0.8) return chalk.green(bar);
   if (score >= 0.5) return chalk.yellow(bar);
@@ -117,6 +133,8 @@ function getModeLabel(mode) {
       return mode;
   }
 }
+// src/cli/output/terminal.ts
 var NAME_COLUMN_WIDTH = 24;
 function renderFolder(node, indent, mode, maxDepth) {
   const lines = [];
@@ -140,11 +158,11 @@ function renderFolder(node, indent, mode, maxDepth) {
       if (mode === "committed") {
         const readCount = folder.readCount || 0;
         lines.push(
-          `${prefix}${chalk.bold(name)}${padding} ${bar}  ${pct.padStart(4)} (${readCount}/${folder.fileCount} files)`
+          `${prefix}${chalk2.bold(name)}${padding} ${bar}  ${pct.padStart(4)} (${readCount}/${folder.fileCount} files)`
         );
       } else {
         lines.push(
-          `${prefix}${chalk.bold(name)}${padding} ${bar}  ${pct.padStart(4)}`
+          `${prefix}${chalk2.bold(name)}${padding} ${bar}  ${pct.padStart(4)}`
         );
       }
       if (indent < maxDepth) {
@@ -158,7 +176,7 @@ function renderTerminal(result) {
   const { tree, repoName, mode } = result;
   console.log("");
   console.log(
-    chalk.bold(`GitFamiliar \u2014 ${repoName} (${getModeLabel(mode)})`)
+    chalk2.bold(`GitFamiliar \u2014 ${repoName} (${getModeLabel(mode)})`)
   );
   console.log("");
   if (mode === "committed") {
@@ -197,18 +215,9 @@ async function openBrowser(filePath) {
   }
 }
-// src/cli/output/html.ts
-function generateTreemapHTML(result) {
-  const dataJson = JSON.stringify(result.tree);
-  const mode = result.mode;
-  const repoName = result.repoName;
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>GitFamiliar \u2014 ${repoName}</title>
-<style>
+// src/cli/output/html-shared.ts
+function getBaseStyles() {
+  return `
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -226,17 +235,6 @@ function generateTreemapHTML(result) {
   }
   #header h1 { font-size: 18px; color: #e94560; }
   #header .info { font-size: 14px; color: #a0a0a0; }
-  #breadcrumb {
-    padding: 8px 24px;
-    background: #16213e;
-    font-size: 13px;
-    border-bottom: 1px solid #0f3460;
-  }
-  #breadcrumb span { cursor: pointer; color: #5eadf7; }
-  #breadcrumb span:hover { text-decoration: underline; }
-  #breadcrumb .sep { color: #666; margin: 0 4px; }
-  #treemap { width: 100%; }
   #tooltip {
     position: absolute;
     pointer-events: none;
@@ -248,8 +246,23 @@ function generateTreemapHTML(result) {
     line-height: 1.6;
     display: none;
     z-index: 100;
-    max-width: 300px;
+    max-width: 350px;
+  }`;
+}
+function getBreadcrumbStyles() {
+  return `
+  #breadcrumb {
+    padding: 8px 24px;
+    background: #16213e;
+    font-size: 13px;
+    border-bottom: 1px solid #0f3460;
   }
+  #breadcrumb span { cursor: pointer; color: #5eadf7; }
+  #breadcrumb span:hover { text-decoration: underline; }
+  #breadcrumb .sep { color: #666; margin: 0 4px; }`;
+}
+function getGradientLegendStyles() {
+  return `
   #legend {
     position: absolute;
     bottom: 16px;
@@ -267,45 +280,22 @@ function generateTreemapHTML(result) {
     border-radius: 3px;
     margin: 4px 0;
   }
-  #legend .labels { display: flex; justify-content: space-between; font-size: 10px; color: #888; }
-</style>
-</head>
-<body>
-<div id="header">
-  <h1>GitFamiliar \u2014 ${repoName}</h1>
-  <div class="info">${mode.charAt(0).toUpperCase() + mode.slice(1)} mode | ${result.totalFiles} files</div>
-</div>
-<div id="breadcrumb"><span onclick="zoomTo('')">root</span></div>
-<div id="treemap"></div>
-<div id="tooltip"></div>
-<div id="legend">
-  <div>Familiarity</div>
-  <div class="gradient-bar"></div>
-  <div class="labels"><span>0%</span><span>50%</span><span>100%</span></div>
-</div>
-<script src="https://d3js.org/d3.v7.min.js"></script>
-<script>
-const rawData = ${dataJson};
-const mode = "${mode}";
-let currentPath = '';
-function scoreColor(score) {
-  if (score <= 0) return '#e94560';
-  if (score >= 1) return '#27ae60';
-  if (score < 0.5) {
-    const t = score / 0.5;
-    return d3.interpolateRgb('#e94560', '#f5a623')(t);
-  }
-  const t = (score - 0.5) / 0.5;
-  return d3.interpolateRgb('#f5a623', '#27ae60')(t);
+  #legend .labels { display: flex; justify-content: space-between; font-size: 10px; color: #888; }`;
 }
-function getNodeScore(node) {
-  return node.score;
+function getSidebarStyles() {
+  return `
+  #main { display: flex; height: calc(100vh - 90px); }
+  #sidebar {
+    width: 300px;
+    background: #16213e;
+    border-left: 1px solid #0f3460;
+    overflow-y: auto;
+    padding: 16px;
+  }
+  #sidebar h3 { font-size: 14px; margin-bottom: 12px; color: #e94560; }`;
 }
+function getTreemapUtilsScript() {
+  return `
 function findNode(node, path) {
   if (node.path === path) return node;
   if (node.children) {
@@ -317,14 +307,6 @@ function findNode(node, path) {
   return null;
 }
-function totalLines(node) {
-  if (node.type === 'file') return Math.max(1, node.lines);
-  if (!node.children) return 1;
-  let sum = 0;
-  for (const c of node.children) sum += totalLines(c);
-  return Math.max(1, sum);
-}
 function buildHierarchy(node) {
   if (node.type === 'file') {
     return { name: node.path.split('/').pop(), data: node, value: Math.max(1, node.lines) };
@@ -336,6 +318,84 @@ function buildHierarchy(node) {
   };
 }
+function truncateLabel(name, w, h) {
+  if (w < 36 || h < 18) return '';
+  const maxChars = Math.floor((w - 8) / 6.5);
+  if (name.length > maxChars) return name.slice(0, maxChars - 1) + '\\u2026';
+  return name;
+}
+function zoomTo(path) {
+  currentPath = path;
+  const el = document.getElementById('breadcrumb');
+  const parts = path ? path.split('/') : [];
+  let html = '<span onclick="zoomTo(\\'\\')">root</span>';
+  let accumulated = '';
+  for (const part of parts) {
+    accumulated = accumulated ? accumulated + '/' + part : part;
+    const p = accumulated;
+    html += '<span class="sep">/</span><span onclick="zoomTo(\\'' + p + '\\')">' + part + '</span>';
+  }
+  el.innerHTML = html;
+  render();
+}`;
+}
+function getScoreColorScript() {
+  return `
+function scoreColor(score) {
+  if (score <= 0) return '#e94560';
+  if (score >= 1) return '#27ae60';
+  if (score < 0.5) {
+    const t = score / 0.5;
+    return d3.interpolateRgb('#e94560', '#f5a623')(t);
+  }
+  const t = (score - 0.5) / 0.5;
+  return d3.interpolateRgb('#f5a623', '#27ae60')(t);
+}`;
+}
+// src/cli/output/html.ts
+function generateTreemapHTML(result) {
+  const dataJson = JSON.stringify(result.tree);
+  const mode = result.mode;
+  const repoName = result.repoName;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>GitFamiliar \u2014 ${repoName}</title>
+<style>
+  ${getBaseStyles()}
+  ${getBreadcrumbStyles()}
+  #treemap { width: 100%; }
+  ${getGradientLegendStyles()}
+</style>
+</head>
+<body>
+<div id="header">
+  <h1>GitFamiliar \u2014 ${repoName}</h1>
+  <div class="info">${mode.charAt(0).toUpperCase() + mode.slice(1)} mode | ${result.totalFiles} files</div>
+</div>
+<div id="breadcrumb"><span onclick="zoomTo('')">root</span></div>
+<div id="treemap"></div>
+<div id="tooltip"></div>
+<div id="legend">
+  <div>Familiarity</div>
+  <div class="gradient-bar"></div>
+  <div class="labels"><span>0%</span><span>50%</span><span>100%</span></div>
+</div>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+const rawData = ${dataJson};
+const mode = "${mode}";
+let currentPath = '';
+${getScoreColorScript()}
+${getTreemapUtilsScript()}
 function render() {
   const container = document.getElementById('treemap');
   container.innerHTML = '';
@@ -351,7 +411,6 @@ function render() {
   const children = targetNode.children || [];
   if (children.length === 0) return;
-  // Build full nested hierarchy from the current target
   const hierarchyData = {
     name: targetNode.path || 'root',
     children: children.map(c => buildHierarchy(c)),
@@ -381,13 +440,12 @@ function render() {
     .join('g')
     .attr('transform', d => \`translate(\${d.x0},\${d.y0})\`);
-  // Rect
   groups.append('rect')
     .attr('width', d => Math.max(0, d.x1 - d.x0))
     .attr('height', d => Math.max(0, d.y1 - d.y0))
     .attr('fill', d => {
       if (!d.data.data) return '#333';
-      return scoreColor(getNodeScore(d.data.data));
+      return scoreColor(d.data.data.score);
     })
     .attr('opacity', d => d.children ? 0.35 : 0.88)
     .attr('stroke', '#1a1a2e')
@@ -414,7 +472,6 @@ function render() {
       tooltip.style.display = 'none';
     });
-  // Labels
   groups.append('text')
     .attr('x', 4)
     .attr('y', 14)
@@ -422,21 +479,13 @@ function render() {
     .attr('font-size', d => d.children ? '11px' : '10px')
     .attr('font-weight', d => d.children ? 'bold' : 'normal')
     .style('pointer-events', 'none')
-    .text(d => {
-      const w = d.x1 - d.x0;
-      const h = d.y1 - d.y0;
-      const name = d.data.name || '';
-      if (w < 36 || h < 18) return '';
-      const maxChars = Math.floor((w - 8) / 6.5);
-      if (name.length > maxChars) return name.slice(0, maxChars - 1) + '\\u2026';
-      return name;
-    });
+    .text(d => truncateLabel(d.data.name || '', d.x1 - d.x0, d.y1 - d.y0));
 }
 function showTooltip(data, event) {
   const tooltip = document.getElementById('tooltip');
   const name = data.path || '';
-  const score = getNodeScore(data);
+  const score = data.score;
   let html = '<strong>' + name + '</strong>';
   html += '<br>Score: ' + Math.round(score * 100) + '%';
   html += '<br>Lines: ' + data.lines.toLocaleString();
@@ -450,7 +499,6 @@ function showTooltip(data, event) {
   if (data.commitScore !== undefined) {
     html += '<br>Commit: ' + Math.round(data.commitScore * 100) + '%';
   }
   if (data.isExpired) {
     html += '<br><span style="color:#e94560">Expired</span>';
   }
@@ -460,25 +508,6 @@ function showTooltip(data, event) {
   tooltip.style.top = (event.pageY - 14) + 'px';
 }
-function zoomTo(path) {
-  currentPath = path;
-  updateBreadcrumb();
-  render();
-}
-function updateBreadcrumb() {
-  const el = document.getElementById('breadcrumb');
-  const parts = currentPath ? currentPath.split('/') : [];
-  let html = '<span onclick="zoomTo(\\'\\')">root</span>';
-  let accumulated = '';
-  for (const part of parts) {
-    accumulated = accumulated ? accumulated + '/' + part : part;
-    const p = accumulated;
-    html += \`<span class="sep">/</span><span onclick="zoomTo('\${p}')">\${part}</span>\`;
-  }
-  el.innerHTML = html;
-}
 window.addEventListener('resize', render);
 render();
 </script>
@@ -493,6 +522,19 @@ async function generateAndOpenHTML(result, repoPath) {
   await openBrowser(outputPath);
 }
+// src/core/risk.ts
+function classifyHotspotRisk(risk) {
+  if (risk >= HOTSPOT_RISK_THRESHOLDS.critical) return "critical";
+  if (risk >= HOTSPOT_RISK_THRESHOLDS.high) return "high";
+  if (risk >= HOTSPOT_RISK_THRESHOLDS.medium) return "medium";
+  return "low";
+}
+function classifyCoverageRisk(contributorCount) {
+  if (contributorCount <= COVERAGE_RISK_THRESHOLDS.risk) return "risk";
+  if (contributorCount <= COVERAGE_RISK_THRESHOLDS.moderate) return "moderate";
+  return "safe";
+}
 // src/git/contributors.ts
 var COMMIT_SEP = "GITFAMILIAR_SEP";
 async function getAllContributors(gitClient, minCommits = 1) {
@@ -554,7 +596,10 @@ async function computeTeamCoverage(options) {
   const tree = await buildFileTree(gitClient, filter);
   const trackedFiles = /* @__PURE__ */ new Set();
   walkFiles(tree, (f) => trackedFiles.add(f.path));
-  const fileContributors = await bulkGetFileContributors(gitClient, trackedFiles);
+  const fileContributors = await bulkGetFileContributors(
+    gitClient,
+    trackedFiles
+  );
   const allContributors = await getAllContributors(gitClient);
   const coverageTree = buildCoverageTree(tree, fileContributors);
   const riskFiles = [];
@@ -573,11 +618,6 @@ async function computeTeamCoverage(options) {
     overallBusFactor: calculateBusFactor(fileContributors)
   };
 }
-function classifyRisk(contributorCount) {
-  if (contributorCount <= 1) return "risk";
-  if (contributorCount <= 3) return "moderate";
-  return "safe";
-}
 function buildCoverageTree(node, fileContributors) {
   const children = [];
   for (const child of node.children) {
@@ -590,17 +630,32 @@ function buildCoverageTree(node, fileContributors) {
         lines: child.lines,
         contributorCount: names.length,
         contributors: names,
-        riskLevel: classifyRisk(names.length)
+        riskLevel: classifyCoverageRisk(names.length)
       });
     } else {
       children.push(buildCoverageTree(child, fileContributors));
     }
   }
   const fileScores = [];
-  walkCoverageFiles({ type: "folder", path: "", lines: 0, fileCount: 0, avgContributors: 0, busFactor: 0, riskLevel: "safe", children }, (f) => {
-    fileScores.push(f);
-  });
-  const totalContributors = fileScores.reduce((sum, f) => sum + f.contributorCount, 0);
+  walkCoverageFiles(
+    {
+      type: "folder",
+      path: "",
+      lines: 0,
+      fileCount: 0,
+      avgContributors: 0,
+      busFactor: 0,
+      riskLevel: "safe",
+      children
+    },
+    (f) => {
+      fileScores.push(f);
+    }
+  );
+  const totalContributors = fileScores.reduce(
+    (sum, f) => sum + f.contributorCount,
+    0
+  );
   const avgContributors = fileScores.length > 0 ? totalContributors / fileScores.length : 0;
   const folderFileContributors = /* @__PURE__ */ new Map();
   for (const f of fileScores) {
@@ -614,7 +669,7 @@ function buildCoverageTree(node, fileContributors) {
     fileCount: node.fileCount,
     avgContributors: Math.round(avgContributors * 10) / 10,
     busFactor,
-    riskLevel: classifyRisk(busFactor),
+    riskLevel: classifyCoverageRisk(busFactor),
     children
   };
 }
@@ -630,7 +685,7 @@ function walkCoverageFiles(node, visitor) {
 function calculateBusFactor(fileContributors) {
   const totalFiles = fileContributors.size;
   if (totalFiles === 0) return 0;
-  const target = Math.ceil(totalFiles * 0.5);
+  const target = Math.ceil(totalFiles * BUS_FACTOR_TARGET);
   const contributorFiles = /* @__PURE__ */ new Map();
   for (const [file, contributors] of fileContributors) {
     for (const contributor of contributors) {
@@ -669,15 +724,15 @@ function calculateBusFactor(fileContributors) {
 }
 // src/cli/output/coverage-terminal.ts
-import chalk2 from "chalk";
+import chalk3 from "chalk";
 function riskBadge(level) {
   switch (level) {
     case "risk":
-      return chalk2.bgRed.white(" RISK ");
+      return chalk3.bgRed.white(" RISK ");
     case "moderate":
-      return chalk2.bgYellow.black(" MOD  ");
+      return chalk3.bgYellow.black(" MOD  ");
     case "safe":
-      return chalk2.bgGreen.black(" SAFE ");
+      return chalk3.bgGreen.black(" SAFE ");
     default:
       return level;
   }
@@ -685,11 +740,11 @@ function riskBadge(level) {
 function riskColor(level) {
   switch (level) {
     case "risk":
-      return chalk2.red;
+      return chalk3.red;
     case "moderate":
-      return chalk2.yellow;
+      return chalk3.yellow;
     default:
-      return chalk2.green;
+      return chalk3.green;
   }
 }
 function renderFolder2(node, indent, maxDepth) {
@@ -704,7 +759,7 @@ function renderFolder2(node, indent, maxDepth) {
       const name = (child.path.split("/").pop() || child.path) + "/";
       const color = riskColor(child.riskLevel);
       lines.push(
-        `${prefix}${chalk2.bold(name.padEnd(24))} ${String(child.avgContributors).padStart(4)} avg    ${String(child.busFactor).padStart(2)}       ${riskBadge(child.riskLevel)}`
+        `${prefix}${chalk3.bold(name.padEnd(24))} ${String(child.avgContributors).padStart(4)} avg    ${String(child.busFactor).padStart(2)}       ${riskBadge(child.riskLevel)}`
       );
       if (indent < maxDepth) {
         lines.push(...renderFolder2(child, indent + 1, maxDepth));
@@ -716,36 +771,36 @@ function renderFolder2(node, indent, maxDepth) {
 function renderCoverageTerminal(result) {
   console.log("");
   console.log(
-    chalk2.bold(
+    chalk3.bold(
       `GitFamiliar \u2014 Team Coverage (${result.totalFiles} files, ${result.totalContributors} contributors)`
     )
   );
   console.log("");
-  const bfColor = result.overallBusFactor <= 1 ? chalk2.red : result.overallBusFactor <= 2 ? chalk2.yellow : chalk2.green;
+  const bfColor = result.overallBusFactor <= 1 ? chalk3.red : result.overallBusFactor <= 2 ? chalk3.yellow : chalk3.green;
   console.log(`Overall Bus Factor: ${bfColor.bold(String(result.overallBusFactor))}`);
   console.log("");
   if (result.riskFiles.length > 0) {
-    console.log(chalk2.red.bold(`Risk Files (0-1 contributors):`));
+    console.log(chalk3.red.bold(`Risk Files (0-1 contributors):`));
     const displayFiles = result.riskFiles.slice(0, 20);
     for (const file of displayFiles) {
       const count = file.contributorCount;
       const names = file.contributors.join(", ");
-      const label = count === 0 ? chalk2.red("0 people") : chalk2.yellow(`1 person  (${names})`);
+      const label = count === 0 ? chalk3.red("0 people") : chalk3.yellow(`1 person  (${names})`);
       console.log(`  ${file.path.padEnd(40)} ${label}`);
     }
     if (result.riskFiles.length > 20) {
       console.log(
-        chalk2.gray(`  ... and ${result.riskFiles.length - 20} more`)
+        chalk3.gray(`  ... and ${result.riskFiles.length - 20} more`)
       );
     }
     console.log("");
   } else {
-    console.log(chalk2.green("No high-risk files found."));
+    console.log(chalk3.green("No high-risk files found."));
     console.log("");
   }
-  console.log(chalk2.bold("Folder Coverage:"));
+  console.log(chalk3.bold("Folder Coverage:"));
   console.log(
-    chalk2.gray(
+    chalk3.gray(
       `  ${"Folder".padEnd(24)} ${"Avg Contrib".padStart(11)}  ${"Bus Factor".padStart(10)}   Risk`
     )
   );
@@ -769,42 +824,9 @@ function generateCoverageHTML(result) {
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>GitFamiliar \u2014 Team Coverage \u2014 ${result.repoName}</title>
 <style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: #1a1a2e;
-    color: #e0e0e0;
-    overflow: hidden;
-  }
-  #header {
-    padding: 16px 24px;
-    background: #16213e;
-    border-bottom: 1px solid #0f3460;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  #header h1 { font-size: 18px; color: #e94560; }
-  #header .info { font-size: 14px; color: #a0a0a0; }
-  #breadcrumb {
-    padding: 8px 24px;
-    background: #16213e;
-    font-size: 13px;
-    border-bottom: 1px solid #0f3460;
-  }
-  #breadcrumb span { cursor: pointer; color: #5eadf7; }
-  #breadcrumb span:hover { text-decoration: underline; }
-  #breadcrumb .sep { color: #666; margin: 0 4px; }
-  #main { display: flex; height: calc(100vh - 90px); }
-  #treemap { flex: 1; }
-  #sidebar {
-    width: 300px;
-    background: #16213e;
-    border-left: 1px solid #0f3460;
-    overflow-y: auto;
-    padding: 16px;
-  }
-  #sidebar h3 { font-size: 14px; margin-bottom: 12px; color: #e94560; }
+  ${getBaseStyles()}
+  ${getBreadcrumbStyles()}
+  ${getSidebarStyles()}
   #sidebar .risk-file {
     padding: 6px 0;
     border-bottom: 1px solid #0f3460;
@@ -812,19 +834,7 @@ function generateCoverageHTML(result) {
   }
   #sidebar .risk-file .path { color: #e0e0e0; word-break: break-all; }
   #sidebar .risk-file .meta { color: #888; margin-top: 2px; }
-  #tooltip {
-    position: absolute;
-    pointer-events: none;
-    background: rgba(22, 33, 62, 0.95);
-    border: 1px solid #0f3460;
-    border-radius: 6px;
-    padding: 10px 14px;
-    font-size: 13px;
-    line-height: 1.6;
-    display: none;
-    z-index: 100;
-    max-width: 320px;
-  }
+  #treemap { flex: 1; }
   #legend {
     position: absolute;
     bottom: 16px;
@@ -881,27 +891,7 @@ function folderColor(riskLevel) {
   }
 }
-function findNode(node, path) {
-  if (node.path === path) return node;
-  if (node.children) {
-    for (const child of node.children) {
-      const found = findNode(child, path);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-function buildHierarchy(node) {
-  if (node.type === 'file') {
-    return { name: node.path.split('/').pop(), data: node, value: Math.max(1, node.lines) };
-  }
-  return {
-    name: node.path.split('/').pop() || node.path,
-    data: node,
-    children: (node.children || []).map(c => buildHierarchy(c)),
-  };
-}
+${getTreemapUtilsScript()}
 function render() {
   const container = document.getElementById('treemap');
@@ -983,15 +973,7 @@ function render() {
     .attr('font-size', d => d.children ? '11px' : '10px')
     .attr('font-weight', d => d.children ? 'bold' : 'normal')
     .style('pointer-events', 'none')
-    .text(d => {
-      const w = d.x1 - d.x0;
-      const h = d.y1 - d.y0;
-      const name = d.data.name || '';
-      if (w < 36 || h < 18) return '';
-      const maxChars = Math.floor((w - 8) / 6.5);
-      if (name.length > maxChars) return name.slice(0, maxChars - 1) + '\\u2026';
-      return name;
-    });
+    .text(d => truncateLabel(d.data.name || '', d.x1 - d.x0, d.y1 - d.y0));
 }
 function showTooltip(data, event) {
@@ -1016,22 +998,6 @@ function showTooltip(data, event) {
   tooltip.style.top = (event.pageY - 14) + 'px';
 }
-function zoomTo(path) {
-  currentPath = path;
-  const el = document.getElementById('breadcrumb');
-  const parts = path ? path.split('/') : [];
-  let html = '<span onclick="zoomTo(\\'\\')">root</span>';
-  let accumulated = '';
-  for (const part of parts) {
-    accumulated = accumulated ? accumulated + '/' + part : part;
-    const p = accumulated;
-    html += '<span class="sep">/</span><span onclick="zoomTo(\\'' + p + '\\')">' + part + '</span>';
-  }
-  el.innerHTML = html;
-  render();
-}
-// Render risk sidebar
 function renderRiskSidebar() {
   const container = document.getElementById('risk-list');
   if (riskFiles.length === 0) {
@@ -1199,34 +1165,8 @@ function findFolderInTree(node, targetPath) {
 }
 // src/cli/output/multi-user-terminal.ts
-import chalk3 from "chalk";
-var BAR_WIDTH2 = 20;
-var FILLED_CHAR2 = "\u2588";
-var EMPTY_CHAR2 = "\u2591";
-function makeBar2(score, width = BAR_WIDTH2) {
-  const filled = Math.round(score * width);
-  const empty = width - filled;
-  const bar = FILLED_CHAR2.repeat(filled) + EMPTY_CHAR2.repeat(empty);
-  if (score >= 0.8) return chalk3.green(bar);
-  if (score >= 0.5) return chalk3.yellow(bar);
-  if (score > 0) return chalk3.red(bar);
-  return chalk3.gray(bar);
-}
-function formatPercent2(score) {
-  return `${Math.round(score * 100)}%`;
-}
-function getModeLabel2(mode) {
-  switch (mode) {
-    case "committed":
-      return "Committed mode";
-    case "code-coverage":
-      return "Code Coverage mode";
-    case "weighted":
-      return "Weighted mode";
-    default:
-      return mode;
-  }
-}
+import chalk4 from "chalk";
+var BAR_WIDTH = 20;
 function truncateName(name, maxLen) {
   if (name.length <= maxLen) return name;
   return name.slice(0, maxLen - 1) + "\u2026";
@@ -1242,8 +1182,8 @@ function renderFolder3(node, indent, maxDepth, nameWidth) {
       const prefix = "  ".repeat(indent);
       const name = (child.path.split("/").pop() || child.path) + "/";
       const displayName = truncateName(name, nameWidth).padEnd(nameWidth);
-      const scores = child.userScores.map((s) => formatPercent2(s.score).padStart(5)).join("  ");
-      lines.push(`${prefix}${chalk3.bold(displayName)}  ${scores}`);
+      const scores = child.userScores.map((s) => formatPercent(s.score).padStart(5)).join("  ");
+      lines.push(`${prefix}${chalk4.bold(displayName)}  ${scores}`);
       if (indent < maxDepth) {
         lines.push(...renderFolder3(child, indent + 1, maxDepth, nameWidth));
       }
@@ -1255,16 +1195,16 @@ function renderMultiUserTerminal(result) {
   const { tree, repoName, mode, userSummaries, totalFiles } = result;
   console.log("");
   console.log(
-    chalk3.bold(
-      `GitFamiliar \u2014 ${repoName} (${getModeLabel2(mode)}, ${userSummaries.length} users)`
+    chalk4.bold(
+      `GitFamiliar \u2014 ${repoName} (${getModeLabel(mode)}, ${userSummaries.length} users)`
     )
   );
   console.log("");
-  console.log(chalk3.bold("Overall:"));
+  console.log(chalk4.bold("Overall:"));
   for (const summary of userSummaries) {
     const name = truncateName(summary.user.name, 14).padEnd(14);
-    const bar = makeBar2(summary.overallScore);
-    const pct = formatPercent2(summary.overallScore);
+    const bar = makeBar(summary.overallScore, BAR_WIDTH);
+    const pct = formatPercent(summary.overallScore);
     if (mode === "committed") {
       console.log(
         `  ${name} ${bar}  ${pct.padStart(4)} (${summary.writtenCount}/${totalFiles} files)`
@@ -1276,7 +1216,7 @@ function renderMultiUserTerminal(result) {
   console.log("");
   const nameWidth = 20;
   const headerNames = userSummaries.map((s) => truncateName(s.user.name, 7).padStart(7)).join("  ");
-  console.log(chalk3.bold("Folders:") + " ".repeat(nameWidth - 4) + headerNames);
+  console.log(chalk4.bold("Folders:") + " ".repeat(nameWidth - 4) + headerNames);
   const folderLines = renderFolder3(tree, 1, 2, nameWidth);
   for (const line of folderLines) {
     console.log(line);
@@ -1298,22 +1238,8 @@ function generateMultiUserHTML(result) {
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>GitFamiliar \u2014 ${result.repoName} \u2014 Multi-User</title>
 <style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: #1a1a2e;
-    color: #e0e0e0;
-    overflow: hidden;
-  }
-  #header {
-    padding: 16px 24px;
-    background: #16213e;
-    border-bottom: 1px solid #0f3460;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  #header h1 { font-size: 18px; color: #e94560; }
+  ${getBaseStyles()}
+  ${getBreadcrumbStyles()}
   #header .controls { display: flex; align-items: center; gap: 12px; }
   #header select {
     padding: 4px 12px;
@@ -1323,46 +1249,8 @@ function generateMultiUserHTML(result) {
     border-radius: 4px;
     font-size: 13px;
   }
-  #header .info { font-size: 14px; color: #a0a0a0; }
-  #breadcrumb {
-    padding: 8px 24px;
-    background: #16213e;
-    font-size: 13px;
-    border-bottom: 1px solid #0f3460;
-  }
-  #breadcrumb span { cursor: pointer; color: #5eadf7; }
-  #breadcrumb span:hover { text-decoration: underline; }
-  #breadcrumb .sep { color: #666; margin: 0 4px; }
   #treemap { width: 100%; }
-  #tooltip {
-    position: absolute;
-    pointer-events: none;
-    background: rgba(22, 33, 62, 0.95);
-    border: 1px solid #0f3460;
-    border-radius: 6px;
-    padding: 10px 14px;
-    font-size: 13px;
-    line-height: 1.6;
-    display: none;
-    z-index: 100;
-    max-width: 350px;
-  }
-  #legend {
-    position: absolute;
-    bottom: 16px;
-    right: 16px;
-    background: rgba(22, 33, 62, 0.9);
-    border: 1px solid #0f3460;
-    border-radius: 6px;
-    padding: 10px;
-    font-size: 12px;
-  }
-  #legend .gradient-bar {
-    width: 120px; height: 12px;
-    background: linear-gradient(to right, #e94560, #f5a623, #27ae60);
-    border-radius: 3px; margin: 4px 0;
-  }
-  #legend .labels { display: flex; justify-content: space-between; font-size: 10px; color: #888; }
+  ${getGradientLegendStyles()}
 </style>
 </head>
 <body>
@@ -1396,54 +1284,25 @@ const select = document.getElementById('userSelect');
 userNames.forEach((name, i) => {
   const opt = document.createElement('option');
   opt.value = i;
-  const summary = summaries[i];
-  opt.textContent = name + ' (' + Math.round(summary.overallScore * 100) + '%)';
-  select.appendChild(opt);
-});
-function changeUser() {
-  currentUser = parseInt(select.value);
-  render();
-}
-function scoreColor(score) {
-  if (score <= 0) return '#e94560';
-  if (score >= 1) return '#27ae60';
-  if (score < 0.5) {
-    const t = score / 0.5;
-    return d3.interpolateRgb('#e94560', '#f5a623')(t);
-  }
-  const t = (score - 0.5) / 0.5;
-  return d3.interpolateRgb('#f5a623', '#27ae60')(t);
+  const summary = summaries[i];
+  opt.textContent = name + ' (' + Math.round(summary.overallScore * 100) + '%)';
+  select.appendChild(opt);
+});
+function changeUser() {
+  currentUser = parseInt(select.value);
+  render();
 }
+${getScoreColorScript()}
 function getUserScore(node) {
   if (!node.userScores || node.userScores.length === 0) return node.score;
   const s = node.userScores[currentUser];
   return s ? s.score : 0;
 }
-function findNode(node, path) {
-  if (node.path === path) return node;
-  if (node.children) {
-    for (const child of node.children) {
-      const found = findNode(child, path);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-function buildHierarchy(node) {
-  if (node.type === 'file') {
-    return { name: node.path.split('/').pop(), data: node, value: Math.max(1, node.lines) };
-  }
-  return {
-    name: node.path.split('/').pop() || node.path,
-    data: node,
-    children: (node.children || []).map(c => buildHierarchy(c)),
-  };
-}
+${getTreemapUtilsScript()}
 function render() {
   const container = document.getElementById('treemap');
@@ -1524,15 +1383,7 @@ function render() {
     .attr('font-size', d => d.children ? '11px' : '10px')
     .attr('font-weight', d => d.children ? 'bold' : 'normal')
     .style('pointer-events', 'none')
-    .text(d => {
-      const w = d.x1 - d.x0;
-      const h = d.y1 - d.y0;
-      const name = d.data.name || '';
-      if (w < 36 || h < 18) return '';
-      const maxChars = Math.floor((w - 8) / 6.5);
-      if (name.length > maxChars) return name.slice(0, maxChars - 1) + '\\u2026';
-      return name;
-    });
+    .text(d => truncateLabel(d.data.name || '', d.x1 - d.x0, d.y1 - d.y0));
 }
 function showTooltip(data, event) {
@@ -1562,21 +1413,6 @@ function showTooltip(data, event) {
   tooltip.style.top = (event.pageY - 14) + 'px';
 }
-function zoomTo(path) {
-  currentPath = path;
-  const el = document.getElementById('breadcrumb');
-  const parts = path ? path.split('/') : [];
-  let html = '<span onclick="zoomTo(\\'\\')">root</span>';
-  let accumulated = '';
-  for (const part of parts) {
-    accumulated = accumulated ? accumulated + '/' + part : part;
-    const p = accumulated;
-    html += '<span class="sep">/</span><span onclick="zoomTo(\\'' + p + '\\')">' + part + '</span>';
-  }
-  el.innerHTML = html;
-  render();
-}
 window.addEventListener('resize', render);
 render();
 </script>
@@ -1625,7 +1461,6 @@ async function bulkGetChangeFrequency(gitClient, days, trackedFiles) {
 }
 // src/core/hotspot.ts
-var DEFAULT_WINDOW = 90;
 async function computeHotspots(options) {
   const gitClient = new GitClient(options.repoPath);
   if (!await gitClient.isRepo()) {
@@ -1635,7 +1470,7 @@ async function computeHotspots(options) {
   const repoRoot = await gitClient.getRepoRoot();
   const filter = createFilter(repoRoot);
   const tree = await buildFileTree(gitClient, filter);
-  const timeWindow = options.since || DEFAULT_WINDOW;
+  const timeWindow = options.since || DEFAULT_HOTSPOT_WINDOW;
   const isTeamMode = options.hotspot === "team";
   const trackedFiles = /* @__PURE__ */ new Set();
   walkFiles(tree, (f) => trackedFiles.add(f.path));
@@ -1705,12 +1540,6 @@ async function computeHotspots(options) {
     summary
   };
 }
-function classifyHotspotRisk(risk) {
-  if (risk >= 0.6) return "critical";
-  if (risk >= 0.4) return "high";
-  if (risk >= 0.2) return "medium";
-  return "low";
-}
 async function computeTeamAvgFamiliarity(gitClient, trackedFiles, options) {
   const contributors = await getAllContributors(gitClient, 1);
   const totalContributors = Math.max(1, contributors.length);
@@ -1731,29 +1560,29 @@ async function computeTeamAvgFamiliarity(gitClient, trackedFiles, options) {
 }
 // src/cli/output/hotspot-terminal.ts
-import chalk4 from "chalk";
+import chalk5 from "chalk";
 function riskBadge2(level) {
   switch (level) {
     case "critical":
-      return chalk4.bgRed.white.bold(" CRIT ");
+      return chalk5.bgRed.white.bold(" CRIT ");
     case "high":
-      return chalk4.bgRedBright.white(" HIGH ");
+      return chalk5.bgRedBright.white(" HIGH ");
     case "medium":
-      return chalk4.bgYellow.black("  MED ");
+      return chalk5.bgYellow.black("  MED ");
     case "low":
-      return chalk4.bgGreen.black("  LOW ");
+      return chalk5.bgGreen.black("  LOW ");
   }
 }
 function riskColor2(level) {
   switch (level) {
     case "critical":
-      return chalk4.red;
+      return chalk5.red;
     case "high":
-      return chalk4.redBright;
+      return chalk5.redBright;
     case "medium":
-      return chalk4.yellow;
+      return chalk5.yellow;
     case "low":
-      return chalk4.green;
+      return chalk5.green;
   }
 }
 function renderHotspotTerminal(result) {
@@ -1762,24 +1591,24 @@ function renderHotspotTerminal(result) {
   const modeLabel = hotspotMode === "team" ? "Team Hotspots" : "Personal Hotspots";
   const userLabel = userName ? ` (${userName})` : "";
   console.log(
-    chalk4.bold(`GitFamiliar \u2014 ${modeLabel}${userLabel} \u2014 ${repoName}`)
+    chalk5.bold(`GitFamiliar \u2014 ${modeLabel}${userLabel} \u2014 ${repoName}`)
   );
-  console.log(chalk4.gray(`  Time window: last ${timeWindow} days`));
+  console.log(chalk5.gray(`  Time window: last ${timeWindow} days`));
   console.log("");
   const activeFiles = files.filter((f) => f.changeFrequency > 0);
   if (activeFiles.length === 0) {
-    console.log(chalk4.gray("  No files changed in the time window."));
+    console.log(chalk5.gray("  No files changed in the time window."));
     console.log("");
     return;
   }
   const displayCount = Math.min(30, activeFiles.length);
   const topFiles = activeFiles.slice(0, displayCount);
   console.log(
-    chalk4.gray(
+    chalk5.gray(
       `  ${"Rank".padEnd(5)} ${"File".padEnd(42)} ${"Familiarity".padStart(11)} ${"Changes".padStart(8)} ${"Risk".padStart(6)}  Level`
     )
   );
-  console.log(chalk4.gray("  " + "\u2500".repeat(90)));
+  console.log(chalk5.gray("  " + "\u2500".repeat(90)));
   for (let i = 0; i < topFiles.length; i++) {
     const f = topFiles[i];
     const rank = String(i + 1).padEnd(5);
@@ -1795,33 +1624,33 @@ function renderHotspotTerminal(result) {
   }
   if (activeFiles.length > displayCount) {
     console.log(
-      chalk4.gray(`  ... and ${activeFiles.length - displayCount} more files`)
+      chalk5.gray(`  ... and ${activeFiles.length - displayCount} more files`)
     );
   }
   console.log("");
-  console.log(chalk4.bold("Summary:"));
+  console.log(chalk5.bold("Summary:"));
   if (summary.critical > 0) {
     console.log(
-      `  ${chalk4.red.bold(`\u{1F534} Critical Risk: ${summary.critical} files`)}`
+      `  ${chalk5.red.bold(`\u{1F534} Critical Risk: ${summary.critical} files`)}`
     );
   }
   if (summary.high > 0) {
     console.log(
-      `  ${chalk4.redBright(`\u{1F7E0} High Risk: ${summary.high} files`)}`
+      `  ${chalk5.redBright(`\u{1F7E0} High Risk: ${summary.high} files`)}`
     );
   }
   if (summary.medium > 0) {
     console.log(
-      `  ${chalk4.yellow(`\u{1F7E1} Medium Risk: ${summary.medium} files`)}`
+      `  ${chalk5.yellow(`\u{1F7E1} Medium Risk: ${summary.medium} files`)}`
     );
   }
   console.log(
-    `  ${chalk4.green(`\u{1F7E2} Low Risk: ${summary.low} files`)}`
+    `  ${chalk5.green(`\u{1F7E2} Low Risk: ${summary.low} files`)}`
   );
   console.log("");
   if (summary.critical > 0 || summary.high > 0) {
     console.log(
-      chalk4.gray(
+      chalk5.gray(
         "  Recommendation: Focus code review and knowledge transfer on critical/high risk files."
       )
     );
@@ -1857,33 +1686,11 @@ function generateHotspotHTML(result) {
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>GitFamiliar \u2014 ${modeLabel} \u2014 ${result.repoName}</title>
 <style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: #1a1a2e;
-    color: #e0e0e0;
-    overflow: hidden;
-  }
-  #header {
-    padding: 16px 24px;
-    background: #16213e;
-    border-bottom: 1px solid #0f3460;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  #header h1 { font-size: 18px; color: #e94560; }
-  #header .info { font-size: 14px; color: #a0a0a0; }
-  #main { display: flex; height: calc(100vh - 60px); }
+  ${getBaseStyles()}
+  ${getSidebarStyles()}
+  #main { height: calc(100vh - 60px); }
+  #sidebar { width: 320px; }
   #chart { flex: 1; position: relative; }
-  #sidebar {
-    width: 320px;
-    background: #16213e;
-    border-left: 1px solid #0f3460;
-    overflow-y: auto;
-    padding: 16px;
-  }
-  #sidebar h3 { font-size: 14px; margin-bottom: 12px; color: #e94560; }
   .hotspot-item {
     padding: 8px 0;
     border-bottom: 1px solid #0f3460;
@@ -1903,19 +1710,6 @@ function generateHotspotHTML(result) {
   .risk-high { background: #f07040; color: white; }
   .risk-medium { background: #f5a623; color: black; }
   .risk-low { background: #27ae60; color: white; }
-  #tooltip {
-    position: absolute;
-    pointer-events: none;
-    background: rgba(22, 33, 62, 0.95);
-    border: 1px solid #0f3460;
-    border-radius: 6px;
-    padding: 10px 14px;
-    font-size: 13px;
-    line-height: 1.6;
-    display: none;
-    z-index: 100;
-    max-width: 350px;
-  }
   #zone-labels { position: absolute; pointer-events: none; }
   .zone-label {
     position: absolute;
@@ -2159,37 +1953,10 @@ async function computeUnified(options) {
 // src/cli/output/unified-html.ts
 import { writeFileSync as writeFileSync5 } from "fs";
 import { join as join5 } from "path";
-function generateUnifiedHTML(data) {
-  const scoringCommittedJson = JSON.stringify(data.scoring.committed.tree);
-  const scoringCodeCoverageJson = JSON.stringify(
-    data.scoring.codeCoverage.tree
-  );
-  const scoringWeightedJson = JSON.stringify(data.scoring.weighted.tree);
-  const coverageTreeJson = JSON.stringify(data.coverage.tree);
-  const coverageRiskJson = JSON.stringify(data.coverage.riskFiles);
-  const hotspotJson = JSON.stringify(
-    data.hotspot.files.filter((f) => f.changeFrequency > 0).map((f) => ({
-      path: f.path,
-      lines: f.lines,
-      familiarity: f.familiarity,
-      changeFrequency: f.changeFrequency,
-      risk: f.risk,
-      riskLevel: f.riskLevel
-    }))
-  );
-  const hotspotTeamFamJson = JSON.stringify(data.hotspotTeamFamiliarity);
-  const multiUserTreeJson = JSON.stringify(data.multiUser.tree);
-  const multiUserSummariesJson = JSON.stringify(data.multiUser.userSummaries);
-  const multiUserNamesJson = JSON.stringify(
-    data.multiUser.users.map((u) => u.name)
-  );
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>GitFamiliar \u2014 ${data.repoName}</title>
-<style>
+// src/cli/output/unified-html-styles.ts
+function getUnifiedStyles() {
+  return `
   :root {
     --bg-base: #1a1a2e;
     --bg-panel: #16213e;
@@ -2514,146 +2281,32 @@ function generateUnifiedHTML(data) {
     display: none;
     z-index: 50;
     box-shadow: var(--shadow-md);
-  }
-  .legend.active { display: block; }
-  .legend .gradient-bar {
-    width: 120px;
-    height: 12px;
-    background: linear-gradient(to right, var(--color-critical), var(--color-medium), var(--color-safe));
-    border-radius: 6px;
-    margin: 4px 0;
-    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
-  }
-  .legend .labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); }
-  .legend .row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
-  .legend .swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: var(--shadow-sm); }
-  /* Zone labels for hotspot */
-  #zone-labels { position: absolute; pointer-events: none; }
-  .zone-label {
-    position: absolute;
-    font-size: 16px;
-    font-weight: bold;
-  }
-</style>
-</head>
-<body>
-<div id="header">
-  <h1>GitFamiliar \u2014 ${data.repoName}</h1>
-  <div class="info">${data.userName} | ${data.scoring.committed.totalFiles} files</div>
-</div>
-<div id="tabs">
-  <div class="tab active" onclick="switchTab('scoring')">Scoring</div>
-  <div class="tab" onclick="switchTab('coverage')">Contributors</div>
-  <div class="tab" onclick="switchTab('multiuser')">Multi-User</div>
-  <div class="tab" onclick="switchTab('hotspots')">Hotspots</div>
-</div>
-<div id="tab-desc-scoring" class="tab-desc visible">
-  Your personal familiarity with each file, based on Git history. Larger blocks = more lines of code. Color shows how well you know each file.
-</div>
-<div id="tab-desc-coverage" class="tab-desc">
-  Contributors per file: how many people have committed to each file. Low contributor count = high bus factor risk.
-</div>
-<div id="tab-desc-multiuser" class="tab-desc">
-  Compare familiarity scores across team members. Select a user to see the codebase colored by their knowledge.
-</div>
-<div id="tab-desc-hotspots" class="tab-desc">
-  Files that change frequently but are poorly understood. Top-left = danger zone (high change, low familiarity).
-</div>
-<div id="scoring-controls" class="visible">
-  <button class="subtab active" data-mode="committed" onclick="switchScoringMode('committed')">Committed</button>
-  <button class="subtab" data-mode="code-coverage" onclick="switchScoringMode('code-coverage')">Code Coverage</button>
-  <button class="subtab" data-mode="weighted" onclick="switchScoringMode('weighted')">Weighted</button>
-  <div id="weight-controls">
-    <span>Blame:</span>
-    <span class="weight-label" id="blame-label">50%</span>
-    <input type="range" id="blame-slider" min="0" max="100" value="50" oninput="onWeightChange()">
-    <span>Commit:</span>
-    <span class="weight-label" id="commit-label">50%</span>
-  </div>
-</div>
-<div id="scoring-mode-desc" class="tab-desc visible" style="padding-top:0">
-  <span id="mode-desc-text">Binary: Have you ever committed to this file? Yes (green) or No (red).</span>
-</div>
-<div id="multiuser-controls">
-  <label>View as:</label>
-  <select id="userSelect" onchange="onUserChange()"></select>
-</div>
-<div id="hotspot-controls">
-  <label>Mode:</label>
-  <button class="subtab active" data-mode="personal" onclick="switchHotspotMode('personal')">Personal</button>
-  <button class="subtab" data-mode="team" onclick="switchHotspotMode('team')">Team</button>
-  <span class="sep-v"></span>
-  <label>Scoring:</label>
-  <button class="subtab hs-scoring active" data-mode="committed" onclick="switchHotspotScoring('committed')">Committed</button>
-  <button class="subtab hs-scoring" data-mode="code-coverage" onclick="switchHotspotScoring('code-coverage')">Code Coverage</button>
-  <button class="subtab hs-scoring" data-mode="weighted" onclick="switchHotspotScoring('weighted')">Weighted</button>
-</div>
-<div id="breadcrumb"><span onclick="zoomTo('')">root</span></div>
-<div id="content-area">
-  <div id="tab-scoring" class="tab-content active"></div>
-  <div id="tab-coverage" class="tab-content with-sidebar">
-    <div class="viz-area" id="coverage-viz"></div>
-    <div class="sidebar" id="coverage-sidebar">
-      <h3>Risk Files (0-1 contributors)</h3>
-      <div id="risk-list"></div>
-    </div>
-  </div>
-  <div id="tab-multiuser" class="tab-content"></div>
-  <div id="tab-hotspots" class="tab-content with-sidebar">
-    <div class="viz-area" id="hotspot-viz">
-      <div id="zone-labels"></div>
-    </div>
-    <div class="sidebar" id="hotspot-sidebar">
-      <h3>Top Hotspots</h3>
-      <div id="hotspot-list"></div>
-    </div>
-  </div>
-</div>
-<div id="tooltip"></div>
-<!-- Legends -->
-<div class="legend active" id="legend-scoring">
-  <div>Familiarity</div>
-  <div class="gradient-bar"></div>
-  <div class="labels"><span>0%</span><span>50%</span><span>100%</span></div>
-</div>
-<div class="legend" id="legend-coverage">
-  <div>Contributors</div>
-  <div class="row"><div class="swatch" style="background:var(--color-critical)"></div> 0\u20131 (Risk)</div>
-  <div class="row"><div class="swatch" style="background:var(--color-medium)"></div> 2\u20133 (Moderate)</div>
-  <div class="row"><div class="swatch" style="background:var(--color-safe)"></div> 4+ (Safe)</div>
-</div>
-<div class="legend" id="legend-multiuser">
-  <div>Familiarity</div>
-  <div class="gradient-bar"></div>
-  <div class="labels"><span>0%</span><span>50%</span><span>100%</span></div>
-</div>
-<script src="https://d3js.org/d3.v7.min.js"></script>
-<script>
-// \u2500\u2500 Data \u2500\u2500
-const scoringData = {
-  committed: ${scoringCommittedJson},
-  'code-coverage': ${scoringCodeCoverageJson},
-  weighted: ${scoringWeightedJson},
-};
-const coverageData = ${coverageTreeJson};
-const coverageRiskFiles = ${coverageRiskJson};
-const hotspotData = ${hotspotJson};
-const hotspotTeamFamiliarity = ${hotspotTeamFamJson};
-const multiUserData = ${multiUserTreeJson};
-const multiUserNames = ${multiUserNamesJson};
-const multiUserSummaries = ${multiUserSummariesJson};
+  }
+  .legend.active { display: block; }
+  .legend .gradient-bar {
+    width: 120px;
+    height: 12px;
+    background: linear-gradient(to right, var(--color-critical), var(--color-medium), var(--color-safe));
+    border-radius: 6px;
+    margin: 4px 0;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
+  }
+  .legend .labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); }
+  .legend .row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
+  .legend .swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: var(--shadow-sm); }
+  /* Zone labels for hotspot */
+  #zone-labels { position: absolute; pointer-events: none; }
+  .zone-label {
+    position: absolute;
+    font-size: 16px;
+    font-weight: bold;
+  }`;
+}
+// src/cli/output/unified-html-scripts.ts
+function getUnifiedScripts() {
+  return `
 // \u2500\u2500 State \u2500\u2500
 let activeTab = 'scoring';
 let scoringMode = 'committed';
@@ -3324,7 +2977,159 @@ window.addEventListener('resize', () => {
   else if (activeTab === 'coverage') renderCoverage();
   else if (activeTab === 'hotspots') renderHotspot();
   else if (activeTab === 'multiuser') renderMultiUser();
-});
+});`;
+}
+// src/cli/output/unified-html.ts
+function generateUnifiedHTML(data) {
+  const scoringCommittedJson = JSON.stringify(data.scoring.committed.tree);
+  const scoringCodeCoverageJson = JSON.stringify(
+    data.scoring.codeCoverage.tree
+  );
+  const scoringWeightedJson = JSON.stringify(data.scoring.weighted.tree);
+  const coverageTreeJson = JSON.stringify(data.coverage.tree);
+  const coverageRiskJson = JSON.stringify(data.coverage.riskFiles);
+  const hotspotJson = JSON.stringify(
+    data.hotspot.files.filter((f) => f.changeFrequency > 0).map((f) => ({
+      path: f.path,
+      lines: f.lines,
+      familiarity: f.familiarity,
+      changeFrequency: f.changeFrequency,
+      risk: f.risk,
+      riskLevel: f.riskLevel
+    }))
+  );
+  const hotspotTeamFamJson = JSON.stringify(data.hotspotTeamFamiliarity);
+  const multiUserTreeJson = JSON.stringify(data.multiUser.tree);
+  const multiUserSummariesJson = JSON.stringify(data.multiUser.userSummaries);
+  const multiUserNamesJson = JSON.stringify(
+    data.multiUser.users.map((u) => u.name)
+  );
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>GitFamiliar \u2014 ${data.repoName}</title>
+<style>${getUnifiedStyles()}</style>
+</head>
+<body>
+<div id="header">
+  <h1>GitFamiliar \u2014 ${data.repoName}</h1>
+  <div class="info">${data.userName} | ${data.scoring.committed.totalFiles} files</div>
+</div>
+<div id="tabs">
+  <div class="tab active" onclick="switchTab('scoring')">Scoring</div>
+  <div class="tab" onclick="switchTab('coverage')">Contributors</div>
+  <div class="tab" onclick="switchTab('multiuser')">Team</div>
+  <div class="tab" onclick="switchTab('hotspots')">Hotspots</div>
+</div>
+<div id="tab-desc-scoring" class="tab-desc visible">
+  Your personal familiarity with each file, based on Git history. Larger blocks = more lines of code. Color shows how well you know each file.
+</div>
+<div id="tab-desc-coverage" class="tab-desc">
+  Contributors per file: how many people have committed to each file. Low contributor count = high bus factor risk.
+</div>
+<div id="tab-desc-multiuser" class="tab-desc">
+  Compare familiarity scores across the team. Select a user to see the codebase colored by their knowledge.
+</div>
+<div id="tab-desc-hotspots" class="tab-desc">
+  Files that change frequently but are poorly understood. Top-left = danger zone (high change, low familiarity).
+</div>
+<div id="scoring-controls" class="visible">
+  <button class="subtab active" data-mode="committed" onclick="switchScoringMode('committed')">Committed</button>
+  <button class="subtab" data-mode="code-coverage" onclick="switchScoringMode('code-coverage')">Code Coverage</button>
+  <button class="subtab" data-mode="weighted" onclick="switchScoringMode('weighted')">Weighted</button>
+  <div id="weight-controls">
+    <span>Blame:</span>
+    <span class="weight-label" id="blame-label">50%</span>
+    <input type="range" id="blame-slider" min="0" max="100" value="50" oninput="onWeightChange()">
+    <span>Commit:</span>
+    <span class="weight-label" id="commit-label">50%</span>
+  </div>
+</div>
+<div id="scoring-mode-desc" class="tab-desc visible" style="padding-top:0">
+  <span id="mode-desc-text">Binary: Have you ever committed to this file? Yes (green) or No (red).</span>
+</div>
+<div id="multiuser-controls">
+  <label>View as:</label>
+  <select id="userSelect" onchange="onUserChange()"></select>
+</div>
+<div id="hotspot-controls">
+  <label>Mode:</label>
+  <button class="subtab active" data-mode="personal" onclick="switchHotspotMode('personal')">Personal</button>
+  <button class="subtab" data-mode="team" onclick="switchHotspotMode('team')">Team</button>
+  <span class="sep-v"></span>
+  <label>Scoring:</label>
+  <button class="subtab hs-scoring active" data-mode="committed" onclick="switchHotspotScoring('committed')">Committed</button>
+  <button class="subtab hs-scoring" data-mode="code-coverage" onclick="switchHotspotScoring('code-coverage')">Code Coverage</button>
+  <button class="subtab hs-scoring" data-mode="weighted" onclick="switchHotspotScoring('weighted')">Weighted</button>
+</div>
+<div id="breadcrumb"><span onclick="zoomTo('')">root</span></div>
+<div id="content-area">
+  <div id="tab-scoring" class="tab-content active"></div>
+  <div id="tab-coverage" class="tab-content with-sidebar">
+    <div class="viz-area" id="coverage-viz"></div>
+    <div class="sidebar" id="coverage-sidebar">
+      <h3>Risk Files (0-1 contributors)</h3>
+      <div id="risk-list"></div>
+    </div>
+  </div>
+  <div id="tab-multiuser" class="tab-content"></div>
+  <div id="tab-hotspots" class="tab-content with-sidebar">
+    <div class="viz-area" id="hotspot-viz">
+      <div id="zone-labels"></div>
+    </div>
+    <div class="sidebar" id="hotspot-sidebar">
+      <h3>Top Hotspots</h3>
+      <div id="hotspot-list"></div>
+    </div>
+  </div>
+</div>
+<div id="tooltip"></div>
+<!-- Legends -->
+<div class="legend active" id="legend-scoring">
+  <div>Familiarity</div>
+  <div class="gradient-bar"></div>
+  <div class="labels"><span>0%</span><span>50%</span><span>100%</span></div>
+</div>
+<div class="legend" id="legend-coverage">
+  <div>Contributors</div>
+  <div class="row"><div class="swatch" style="background:var(--color-critical)"></div> 0\u20131 (Risk)</div>
+  <div class="row"><div class="swatch" style="background:var(--color-medium)"></div> 2\u20133 (Moderate)</div>
+  <div class="row"><div class="swatch" style="background:var(--color-safe)"></div> 4+ (Safe)</div>
+</div>
+<div class="legend" id="legend-multiuser">
+  <div>Familiarity</div>
+  <div class="gradient-bar"></div>
+  <div class="labels"><span>0%</span><span>50%</span><span>100%</span></div>
+</div>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+// \u2500\u2500 Data \u2500\u2500
+const scoringData = {
+  committed: ${scoringCommittedJson},
+  'code-coverage': ${scoringCodeCoverageJson},
+  weighted: ${scoringWeightedJson},
+};
+const coverageData = ${coverageTreeJson};
+const coverageRiskFiles = ${coverageRiskJson};
+const hotspotData = ${hotspotJson};
+const hotspotTeamFamiliarity = ${hotspotTeamFamJson};
+const multiUserData = ${multiUserTreeJson};
+const multiUserNames = ${multiUserNamesJson};
+const multiUserSummaries = ${multiUserSummariesJson};
+${getUnifiedScripts()}
 </script>
 </body>
 </html>`;
@@ -3337,6 +3142,600 @@ async function generateAndOpenUnifiedHTML(data, repoPath) {
   await openBrowser(outputPath);
 }
+// src/core/demo.ts
+var REPO_NAME = "acme-web-app";
+var ALICE = { name: "Alice Chen", email: "alice@acme.dev" };
+var BOB = { name: "Bob Kim", email: "bob@acme.dev" };
+var CHARLIE = {
+  name: "Charlie Rivera",
+  email: "charlie@acme.dev"
+};
+var DIANA = { name: "Diana Patel", email: "diana@acme.dev" };
+var USERS = [ALICE, BOB, CHARLIE, DIANA];
+var DEMO_FILES = [
+  // Root config files
+  {
+    path: "package.json",
+    lines: 25,
+    familiarity: { alice: 0.6, bob: 0.2, charlie: 0.3, diana: 0.8 },
+    written: { alice: true, bob: false, charlie: false, diana: true },
+    contributors: ["Alice Chen", "Diana Patel"],
+    changeFrequency: 1,
+    lastChanged: "2026-02-01"
+  },
+  {
+    path: "tsconfig.json",
+    lines: 15,
+    familiarity: { alice: 0.55, bob: 0.1, charlie: 0.25, diana: 0.75 },
+    written: { alice: true, bob: false, charlie: false, diana: true },
+    contributors: ["Alice Chen", "Diana Patel"],
+    changeFrequency: 0,
+    lastChanged: null
+  },
+  {
+    path: "README.md",
+    lines: 80,
+    familiarity: { alice: 0.4, bob: 0.3, charlie: 0.25, diana: 0.2 },
+    written: { alice: true, bob: true, charlie: false, diana: false },
+    contributors: ["Alice Chen", "Bob Kim", "Charlie Rivera"],
+    changeFrequency: 1,
+    lastChanged: "2026-02-10"
+  },
+  {
+    path: "Dockerfile",
+    lines: 35,
+    familiarity: { alice: 0.3, bob: 0, charlie: 0, diana: 0.9 },
+    written: { alice: false, bob: false, charlie: false, diana: true },
+    contributors: ["Diana Patel"],
+    changeFrequency: 2,
+    lastChanged: "2026-02-20"
+  },
+  // CI/CD
+  {
+    path: ".github/workflows/ci.yml",
+    lines: 65,
+    familiarity: { alice: 0.15, bob: 0, charlie: 0, diana: 0.95 },
+    written: { alice: false, bob: false, charlie: false, diana: true },
+    contributors: ["Diana Patel"],
+    changeFrequency: 3,
+    lastChanged: "2026-02-18"
+  },
+  {
+    path: ".github/workflows/deploy.yml",
+    lines: 45,
+    familiarity: { alice: 0.1, bob: 0, charlie: 0, diana: 0.9 },
+    written: { alice: false, bob: false, charlie: false, diana: true },
+    contributors: ["Diana Patel"],
+    changeFrequency: 2,
+    lastChanged: "2026-02-15"
+  },
+  // src/ core
+  {
+    path: "src/index.ts",
+    lines: 30,
+    familiarity: { alice: 0.85, bob: 0.25, charlie: 0.1, diana: 0.4 },
+    written: { alice: true, bob: true, charlie: false, diana: false },
+    contributors: ["Alice Chen", "Bob Kim"],
+    changeFrequency: 1,
+    lastChanged: "2026-01-20"
+  },
+  {
+    path: "src/config.ts",
+    lines: 55,
+    familiarity: { alice: 0.75, bob: 0.15, charlie: 0.2, diana: 0.6 },
+    written: { alice: true, bob: true, charlie: true, diana: true },
+    contributors: ["Alice Chen", "Bob Kim", "Charlie Rivera", "Diana Patel"],
+    changeFrequency: 3,
+    lastChanged: "2026-02-22"
+  },
+  {
+    path: "src/app.ts",
+    lines: 120,
+    familiarity: { alice: 0.9, bob: 0.1, charlie: 0.1, diana: 0.45 },
+    written: { alice: true, bob: false, charlie: false, diana: true },
+    contributors: ["Alice Chen", "Diana Patel"],
+    changeFrequency: 2,
+    lastChanged: "2026-02-05"
+  },
+  // src/routes
+  {
+    path: "src/routes/auth.ts",
+    lines: 95,
+    familiarity: { alice: 0.9, bob: 0, charlie: 0, diana: 0.1 },
+    written: { alice: true, bob: false, charlie: false, diana: false },
+    contributors: ["Alice Chen"],
+    changeFrequency: 3,
+    lastChanged: "2026-02-12"
+  },
+  {
+    path: "src/routes/users.ts",
+    lines: 130,
+    familiarity: { alice: 0.85, bob: 0.2, charlie: 0, diana: 0.1 },
+    written: { alice: true, bob: true, charlie: false, diana: false },
+    contributors: ["Alice Chen", "Bob Kim"],
+    changeFrequency: 3,
+    lastChanged: "2026-02-14"
+  },
+  {
+    path: "src/routes/products.ts",
+    lines: 180,
+    familiarity: { alice: 0.8, bob: 0.15, charlie: 0, diana: 0.05 },
+    written: { alice: true, bob: true, charlie: false, diana: false },
+    contributors: ["Alice Chen", "Bob Kim"],
+    changeFrequency: 4,
+    lastChanged: "2026-02-19"
+  },
+  {
+    path: "src/routes/orders.ts",
+    lines: 210,
+    familiarity: { alice: 0.25, bob: 0, charlie: 0, diana: 0.05 },
+    written: { alice: true, bob: false, charlie: false, diana: false },
+    contributors: ["Alice Chen"],
+    changeFrequency: 12,
+    lastChanged: "2026-02-25"
+  },
+  // src/middleware
+  {
+    path: "src/middleware/auth.ts",
+    lines: 75,
+    familiarity: { alice: 0.85, bob: 0, charlie: 0, diana: 0.15 },
+    written: { alice: true, bob: false, charlie: false, diana: false },
+    contributors: ["Alice Chen"],
+    changeFrequency: 1,
+    lastChanged: "2026-01-15"
+  },
+  {
+    path: "src/middleware/logging.ts",
+    lines: 50,
+    familiarity: { alice: 0.8, bob: 0, charlie: 0, diana: 0.5 },
+    written: { alice: true, bob: false, charlie: false, diana: true },
+    contributors: ["Alice Chen", "Diana Patel"],
+    changeFrequency: 1,
+    lastChanged: "2026-01-25"
+  },
+  {
+    path: "src/middleware/error-handler.ts",
+    lines: 60,
+    familiarity: { alice: 0.4, bob: 0, charlie: 0, diana: 0.2 },
+    written: { alice: true, bob: false, charlie: false, diana: false },
+    contributors: ["Alice Chen"],
+    changeFrequency: 6,
+    lastChanged: "2026-02-23"
+  },
+  // src/models
+  {
+    path: "src/models/user.ts",
+    lines: 85,
+    familiarity: { alice: 0.88, bob: 0.2, charlie: 0, diana: 0.1 },
+    written: { alice: true, bob: true, charlie: false, diana: false },
+    contributors: ["Alice Chen", "Bob Kim"],
+    changeFrequency: 2,
+    lastChanged: "2026-02-08"
+  },
+  {
+    path: "src/models/product.ts",
+    lines: 90,
+    familiarity: { alice: 0.85, bob: 0, charlie: 0, diana: 0.05 },
+    written: { alice: true, bob: false, charlie: false, diana: false },
+    contributors: ["Alice Chen"],
+    changeFrequency: 1,
+    lastChanged: "2026-01-10"
+  },
+  {
+    path: "src/models/order.ts",
+    lines: 110,
+    familiarity: { alice: 0.7, bob: 0, charlie: 0, diana: 0.05 },
+    written: { alice: true, bob: false, charlie: false, diana: false },
+    contributors: ["Alice Chen"],
+    changeFrequency: 5,
+    lastChanged: "2026-02-21"
+  },
+  // src/services
+  {
+    path: "src/services/email.ts",
+    lines: 70,
+    familiarity: { alice: 0.8, bob: 0, charlie: 0, diana: 0.15 },
+    written: { alice: true, bob: false, charlie: false, diana: false },
+    contributors: ["Alice Chen"],
+    changeFrequency: 1,
+    lastChanged: "2026-01-05"
+  },
+  {
+    path: "src/services/payment.ts",
+    lines: 150,
+    familiarity: { alice: 0.5, bob: 0, charlie: 0, diana: 0.35 },
+    written: { alice: true, bob: false, charlie: false, diana: true },
+    contributors: ["Alice Chen", "Diana Patel"],
+    changeFrequency: 9,
+    lastChanged: "2026-02-24"
+  },
+  {
+    path: "src/services/inventory.ts",
+    lines: 95,
+    familiarity: { alice: 0.55, bob: 0, charlie: 0, diana: 0.1 },
+    written: { alice: true, bob: false, charlie: false, diana: false },
+    contributors: ["Alice Chen"],
+    changeFrequency: 5,
+    lastChanged: "2026-02-17"
+  },
+  // src/utils
+  {
+    path: "src/utils/validators.ts",
+    lines: 65,
+    familiarity: { alice: 0.85, bob: 0.15, charlie: 0.1, diana: 0.2 },
+    written: { alice: true, bob: true, charlie: false, diana: false },
+    contributors: ["Alice Chen", "Bob Kim"],
+    changeFrequency: 1,
+    lastChanged: "2026-01-30"
+  },
+  {
+    path: "src/utils/helpers.ts",
+    lines: 45,
+    familiarity: { alice: 0.8, bob: 0, charlie: 0.05, diana: 0.1 },
+    written: { alice: true, bob: false, charlie: false, diana: false },
+    contributors: ["Alice Chen"],
+    changeFrequency: 0,
+    lastChanged: null
+  },
+  // frontend
+  {
+    path: "frontend/App.tsx",
+    lines: 140,
+    familiarity: { alice: 0.15, bob: 0, charlie: 0.85, diana: 0.05 },
+    written: { alice: true, bob: false, charlie: true, diana: false },
+    contributors: ["Charlie Rivera", "Alice Chen"],
+    changeFrequency: 7,
+    lastChanged: "2026-02-24"
+  },
+  {
+    path: "frontend/index.tsx",
+    lines: 20,
+    familiarity: { alice: 0.1, bob: 0, charlie: 0.8, diana: 0 },
+    written: { alice: false, bob: false, charlie: true, diana: false },
+    contributors: ["Charlie Rivera"],
+    changeFrequency: 1,
+    lastChanged: "2026-01-12"
+  },
+  {
+    path: "frontend/components/Header.tsx",
+    lines: 85,
+    familiarity: { alice: 0.1, bob: 0, charlie: 0.9, diana: 0 },
+    written: { alice: false, bob: false, charlie: true, diana: false },
+    contributors: ["Charlie Rivera"],
+    changeFrequency: 2,
+    lastChanged: "2026-02-03"
+  },
+  {
+    path: "frontend/components/ProductList.tsx",
+    lines: 160,
+    familiarity: { alice: 0.1, bob: 0, charlie: 0.85, diana: 0 },
+    written: { alice: false, bob: false, charlie: true, diana: false },
+    contributors: ["Charlie Rivera"],
+    changeFrequency: 4,
+    lastChanged: "2026-02-16"
+  },
+  {
+    path: "frontend/components/Cart.tsx",
+    lines: 190,
+    familiarity: { alice: 0.08, bob: 0, charlie: 0.92, diana: 0 },
+    written: { alice: false, bob: false, charlie: true, diana: false },
+    contributors: ["Charlie Rivera"],
+    changeFrequency: 8,
+    lastChanged: "2026-02-22"
+  },
+  {
+    path: "frontend/components/Checkout.tsx",
+    lines: 220,
+    familiarity: { alice: 0.05, bob: 0, charlie: 0.95, diana: 0 },
+    written: { alice: false, bob: false, charlie: true, diana: false },
+    contributors: ["Charlie Rivera"],
+    changeFrequency: 10,
+    lastChanged: "2026-02-25"
+  },
+  {
+    path: "frontend/styles/global.css",
+    lines: 120,
+    familiarity: { alice: 0.05, bob: 0, charlie: 0.9, diana: 0 },
+    written: { alice: false, bob: false, charlie: true, diana: false },
+    contributors: ["Charlie Rivera"],
+    changeFrequency: 2,
+    lastChanged: "2026-02-11"
+  }
+];
+function buildDemoTree(files, createFolder) {
+  const allDirs = /* @__PURE__ */ new Set();
+  for (const file of files) {
+    const parts = file.path.split("/");
+    for (let i = 1; i < parts.length; i++) {
+      allDirs.add(parts.slice(0, i).join("/"));
+    }
+  }
+  const dirChildren = /* @__PURE__ */ new Map();
+  for (const file of files) {
+    const lastSlash = file.path.lastIndexOf("/");
+    const parentDir = lastSlash >= 0 ? file.path.substring(0, lastSlash) : "";
+    if (!dirChildren.has(parentDir)) dirChildren.set(parentDir, []);
+    dirChildren.get(parentDir).push(file);
+  }
+  const sortedDirs = [...allDirs].sort(
+    (a, b) => b.split("/").length - a.split("/").length
+  );
+  for (const dir of sortedDirs) {
+    const children = dirChildren.get(dir) || [];
+    const folder = createFolder(dir, children);
+    const lastSlash = dir.lastIndexOf("/");
+    const parentDir = lastSlash >= 0 ? dir.substring(0, lastSlash) : "";
+    if (!dirChildren.has(parentDir)) dirChildren.set(parentDir, []);
+    dirChildren.get(parentDir).push(folder);
+  }
+  const rootChildren = dirChildren.get("") || [];
+  return createFolder("", rootChildren);
+}
+function sortChildren(children) {
+  return [...children].sort((a, b) => {
+    if (a.type !== b.type) return a.type === "folder" ? -1 : 1;
+    return a.path.localeCompare(b.path);
+  });
+}
+function buildScoringTree(files, mode) {
+  return buildDemoTree(files, (path, children) => {
+    let totalLines = 0;
+    let weightedScore = 0;
+    let fileCount = 0;
+    let readCount = 0;
+    for (const child of children) {
+      totalLines += child.lines;
+      weightedScore += child.lines * child.score;
+      if (child.type === "file") {
+        fileCount++;
+        if (child.score > 0) readCount++;
+      } else {
+        fileCount += child.fileCount;
+        readCount += child.readCount || 0;
+      }
+    }
+    const folder = {
+      type: "folder",
+      path,
+      lines: totalLines,
+      score: totalLines > 0 ? weightedScore / totalLines : 0,
+      fileCount,
+      children: sortChildren(children)
+    };
+    if (mode === "committed") folder.readCount = readCount;
+    return folder;
+  });
+}
+function getDemoFamiliarityResult(mode) {
+  const m = mode || "committed";
+  const files = DEMO_FILES.map((file) => {
+    const base = {
+      type: "file",
+      path: file.path,
+      lines: file.lines,
+      score: 0
+    };
+    switch (m) {
+      case "committed":
+        base.score = file.written.alice ? 1 : 0;
+        base.isWritten = file.written.alice;
+        break;
+      case "code-coverage":
+        base.score = file.familiarity.alice;
+        break;
+      case "weighted":
+        base.blameScore = file.familiarity.alice;
+        base.commitScore = Math.min(
+          1,
+          file.written.alice ? file.familiarity.alice * 0.9 + 0.1 : 0
+        );
+        base.score = 0.5 * base.blameScore + 0.5 * base.commitScore;
+        break;
+    }
+    return base;
+  });
+  const tree = buildScoringTree(files, m);
+  const writtenCount = DEMO_FILES.filter((file) => file.written.alice).length;
+  return {
+    tree,
+    repoName: REPO_NAME,
+    userName: ALICE.name,
+    mode: m,
+    writtenCount,
+    totalFiles: DEMO_FILES.length
+  };
+}
+function getDemoHotspotResult() {
+  const maxFreq = Math.max(...DEMO_FILES.map((file) => file.changeFrequency));
+  const files = DEMO_FILES.map((file) => {
+    const normalizedFreq = maxFreq > 0 ? file.changeFrequency / maxFreq : 0;
+    const familiarity = file.familiarity.alice;
+    const risk = normalizedFreq * (1 - familiarity);
+    return {
+      path: file.path,
+      lines: file.lines,
+      familiarity,
+      changeFrequency: file.changeFrequency,
+      lastChanged: file.lastChanged ? new Date(file.lastChanged) : null,
+      risk,
+      riskLevel: classifyHotspotRisk(risk)
+    };
+  }).sort((a, b) => b.risk - a.risk);
+  const summary = { critical: 0, high: 0, medium: 0, low: 0 };
+  for (const hotspot of files) summary[hotspot.riskLevel]++;
+  return {
+    files,
+    repoName: REPO_NAME,
+    userName: ALICE.name,
+    hotspotMode: "personal",
+    timeWindow: DEFAULT_HOTSPOT_WINDOW,
+    summary
+  };
+}
+function buildCoverageTree2(files) {
+  return buildDemoTree(
+    files,
+    (path, children) => {
+      let totalLines = 0;
+      let fileCount = 0;
+      let totalContributors = 0;
+      for (const child of children) {
+        totalLines += child.lines;
+        if (child.type === "file") {
+          fileCount++;
+          totalContributors += child.contributorCount;
+        } else {
+          const folderChild = child;
+          fileCount += folderChild.fileCount;
+          totalContributors += folderChild.avgContributors * folderChild.fileCount;
+        }
+      }
+      const avgContributors = fileCount > 0 ? Math.round(totalContributors / fileCount * 10) / 10 : 0;
+      const busFactor = avgContributors >= 4 ? 3 : avgContributors >= 2 ? 2 : 1;
+      return {
+        type: "folder",
+        path,
+        lines: totalLines,
+        fileCount,
+        avgContributors,
+        busFactor,
+        riskLevel: busFactor <= 1 ? "risk" : busFactor <= 2 ? "moderate" : "safe",
+        children: sortChildren(children)
+      };
+    }
+  );
+}
+function getDemoCoverageResult() {
+  const coverageFiles = DEMO_FILES.map((file) => ({
+    type: "file",
+    path: file.path,
+    lines: file.lines,
+    contributorCount: file.contributors.length,
+    contributors: file.contributors,
+    riskLevel: classifyCoverageRisk(file.contributors.length)
+  }));
+  const tree = buildCoverageTree2(coverageFiles);
+  const riskFiles = coverageFiles.filter((file) => file.contributorCount <= 1).sort((a, b) => a.contributorCount - b.contributorCount);
+  return {
+    tree,
+    repoName: REPO_NAME,
+    totalContributors: USERS.length,
+    totalFiles: DEMO_FILES.length,
+    riskFiles,
+    overallBusFactor: 1
+  };
+}
+function buildMultiUserTree(files) {
+  return buildDemoTree(
+    files,
+    (path, children) => {
+      let totalLines = 0;
+      let fileCount = 0;
+      const userTotals = USERS.map(() => 0);
+      for (const child of children) {
+        totalLines += child.lines;
+        if (child.type === "file") {
+          fileCount++;
+          const fileNode = child;
+          fileNode.userScores.forEach((userScore, i) => {
+            userTotals[i] += userScore.score * fileNode.lines;
+          });
+        } else {
+          const folderNode = child;
+          fileCount += folderNode.fileCount;
+          folderNode.userScores.forEach((userScore, i) => {
+            userTotals[i] += userScore.score * folderNode.lines;
+          });
+        }
+      }
+      const userScores = USERS.map((user, i) => ({
+        user,
+        score: totalLines > 0 ? userTotals[i] / totalLines : 0
+      }));
+      const avgScore = userScores.reduce((sum, entry) => sum + entry.score, 0) / userScores.length;
+      return {
+        type: "folder",
+        path,
+        lines: totalLines,
+        score: avgScore,
+        fileCount,
+        userScores,
+        children: sortChildren(children)
+      };
+    }
+  );
+}
+function getDemoMultiUserResult() {
+  const files = DEMO_FILES.map((file) => {
+    const scores = [
+      file.familiarity.alice,
+      file.familiarity.bob,
+      file.familiarity.charlie,
+      file.familiarity.diana
+    ];
+    const userScores = USERS.map((user, i) => ({
+      user,
+      score: scores[i],
+      isWritten: [
+        file.written.alice,
+        file.written.bob,
+        file.written.charlie,
+        file.written.diana
+      ][i]
+    }));
+    return {
+      type: "file",
+      path: file.path,
+      lines: file.lines,
+      score: scores.reduce((a, b) => a + b, 0) / scores.length,
+      userScores
+    };
+  });
+  const tree = buildMultiUserTree(files);
+  const userSummaries = USERS.map((user, i) => {
+    const key = ["alice", "bob", "charlie", "diana"][i];
+    const writtenCount = DEMO_FILES.filter((file) => file.written[key]).length;
+    const totalLines = DEMO_FILES.reduce((sum, file) => sum + file.lines, 0);
+    const weightedScore = DEMO_FILES.reduce(
+      (sum, file) => sum + file.familiarity[key] * file.lines,
+      0
+    );
+    return {
+      user,
+      writtenCount,
+      overallScore: totalLines > 0 ? weightedScore / totalLines : 0
+    };
+  });
+  return {
+    tree,
+    repoName: REPO_NAME,
+    users: USERS,
+    mode: "committed",
+    totalFiles: DEMO_FILES.length,
+    userSummaries
+  };
+}
+function getDemoUnifiedData() {
+  const hotspotTeamFamiliarity = {};
+  for (const file of DEMO_FILES) {
+    const avg = (file.familiarity.alice + file.familiarity.bob + file.familiarity.charlie + file.familiarity.diana) / 4;
+    hotspotTeamFamiliarity[file.path] = avg;
+  }
+  return {
+    repoName: REPO_NAME,
+    userName: ALICE.name,
+    scoring: {
+      committed: getDemoFamiliarityResult("committed"),
+      codeCoverage: getDemoFamiliarityResult("code-coverage"),
+      weighted: getDemoFamiliarityResult("weighted")
+    },
+    coverage: getDemoCoverageResult(),
+    hotspot: getDemoHotspotResult(),
+    hotspotTeamFamiliarity,
+    multiUser: getDemoMultiUserResult()
+  };
+}
 // src/cli/index.ts
 var require2 = createRequire(import.meta.url);
 var pkg = require2("../../package.json");
@@ -3365,49 +3764,43 @@ function createProgram() {
     "--contributors-per-file",
     "Analyze number of contributors per file (bus factor)",
     false
-  ).option("--contributors", "Alias for --contributors-per-file").option("--team-coverage", "Deprecated alias for --contributors-per-file").option("--hotspot [mode]", "Hotspot analysis: personal (default) or team").option("--since <days>", "Hotspot analysis period in days (default: 90)").option("--window <days>", "Deprecated alias for --since").action(async (rawOptions) => {
+  ).option("--contributors", "Alias for --contributors-per-file").option("--team-coverage", "Deprecated alias for --contributors-per-file").option("--hotspot [mode]", "Hotspot analysis: personal (default) or team").option("--since <days>", "Hotspot analysis period in days (default: 90)").option("--window <days>", "Deprecated alias for --since").option("--demo", "Show demo with sample data (no git repo needed)", false).action(async (rawOptions) => {
     try {
       const repoPath = process.cwd();
       const options = parseOptions(rawOptions, repoPath);
-      const isMultiUserCheck = options.team || Array.isArray(options.user) && options.user.length > 1;
-      if (options.html && !options.hotspot && !options.contributorsPerFile && !isMultiUserCheck) {
-        const data = await computeUnified(options);
+      const isDemo = options.demo;
+      const isMultiUser = options.team || Array.isArray(options.user) && options.user.length > 1;
+      if (options.html && !options.hotspot && !options.contributorsPerFile && !isMultiUser) {
+        const data = isDemo ? getDemoUnifiedData() : await computeUnified(options);
         await generateAndOpenUnifiedHTML(data, repoPath);
-        return;
-      }
-      if (options.hotspot) {
-        const result2 = await computeHotspots(options);
+      } else if (options.hotspot) {
+        const result = isDemo ? getDemoHotspotResult() : await computeHotspots(options);
         if (options.html) {
-          await generateAndOpenHotspotHTML(result2, repoPath);
+          await generateAndOpenHotspotHTML(result, repoPath);
         } else {
-          renderHotspotTerminal(result2);
+          renderHotspotTerminal(result);
         }
-        return;
-      }
-      if (options.contributorsPerFile) {
-        const result2 = await computeTeamCoverage(options);
+      } else if (options.contributorsPerFile) {
+        const result = isDemo ? getDemoCoverageResult() : await computeTeamCoverage(options);
         if (options.html) {
-          await generateAndOpenCoverageHTML(result2, repoPath);
+          await generateAndOpenCoverageHTML(result, repoPath);
         } else {
-          renderCoverageTerminal(result2);
+          renderCoverageTerminal(result);
         }
-        return;
-      }
-      const isMultiUser = options.team || Array.isArray(options.user) && options.user.length > 1;
-      if (isMultiUser) {
-        const result2 = await computeMultiUser(options);
+      } else if (isMultiUser) {
+        const result = isDemo ? getDemoMultiUserResult() : await computeMultiUser(options);
         if (options.html) {
-          await generateAndOpenMultiUserHTML(result2, repoPath);
+          await generateAndOpenMultiUserHTML(result, repoPath);
         } else {
-          renderMultiUserTerminal(result2);
+          renderMultiUserTerminal(result);
         }
-        return;
-      }
-      const result = await computeFamiliarity(options);
-      if (options.html) {
-        await generateAndOpenHTML(result, repoPath);
       } else {
-        renderTerminal(result);
+        const result = isDemo ? getDemoFamiliarityResult(options.mode) : await computeFamiliarity(options);
+        if (options.html) {
+          await generateAndOpenHTML(result, repoPath);
+        } else {
+          renderTerminal(result);
+        }
       }
     } catch (error) {
       console.error(`Error: ${error.message}`);