gitfamiliar 0.7.0 → 0.8.0

package/dist/bin/gitfamiliar.js

@@ -8,7 +8,7 @@ import {
   processBatch,
   resolveUser,
   walkFiles
-} from "../chunk-BQCHOSLA.js";
+} from "../chunk-R5MGQGFI.js";
 
 // src/cli/index.ts
 import { Command } from "commander";
@@ -108,9 +108,11 @@ function getModeLabel(mode) {
       return mode;
   }
 }
+var NAME_COLUMN_WIDTH = 24;
 function renderFolder(node, indent, mode, maxDepth) {
   const lines = [];
   const prefix = "  ".repeat(indent);
+  const prefixWidth = indent * 2;
   const sorted = [...node.children].sort((a, b) => {
     if (a.type !== b.type) return a.type === "folder" ? -1 : 1;
     return a.path.localeCompare(b.path);
@@ -121,14 +123,19 @@ function renderFolder(node, indent, mode, maxDepth) {
       const name = folder.path.split("/").pop() + "/";
       const bar = makeBar(folder.score);
       const pct = formatPercent(folder.score);
+      const padWidth = Math.max(
+        1,
+        NAME_COLUMN_WIDTH - prefixWidth - name.length
+      );
+      const padding = " ".repeat(padWidth);
       if (mode === "binary") {
         const readCount = folder.readCount || 0;
         lines.push(
-          `${prefix}${chalk.bold(name.padEnd(16))} ${bar}  ${pct.padStart(4)} (${readCount}/${folder.fileCount} files)`
+          `${prefix}${chalk.bold(name)}${padding} ${bar}  ${pct.padStart(4)} (${readCount}/${folder.fileCount} files)`
         );
       } else {
         lines.push(
-          `${prefix}${chalk.bold(name.padEnd(16))} ${bar}  ${pct.padStart(4)}`
+          `${prefix}${chalk.bold(name)}${padding} ${bar}  ${pct.padStart(4)}`
         );
       }
       if (indent < maxDepth) {
@@ -2075,39 +2082,1037 @@ async function generateAndOpenHotspotHTML(result, repoPath) {
   await openBrowser(outputPath);
 }
 
-// src/cli/index.ts
-function collect(value, previous) {
-  return previous.concat([value]);
+// src/core/unified.ts
+async function computeUnified(options) {
+  console.log("Computing unified dashboard data...");
+  console.log("  [1/4] Scoring (binary, authorship, weighted)...");
+  const [binary, authorship, weighted] = await Promise.all([
+    computeFamiliarity({ ...options, mode: "binary" }),
+    computeFamiliarity({ ...options, mode: "authorship" }),
+    computeFamiliarity({ ...options, mode: "weighted" })
+  ]);
+  console.log("  [2/4] Team coverage...");
+  const coverage = await computeTeamCoverage(options);
+  console.log("  [3/4] Hotspot analysis...");
+  const hotspot = await computeHotspots({
+    ...options,
+    hotspot: "personal"
+  });
+  console.log("  [4/4] Multi-user comparison...");
+  const multiUser = await computeMultiUser({
+    ...options,
+    team: true
+  });
+  console.log("Done.");
+  return {
+    repoName: binary.repoName,
+    userName: binary.userName,
+    scoring: { binary, authorship, weighted },
+    coverage,
+    hotspot,
+    multiUser
+  };
 }
-function createProgram() {
-  const program2 = new Command();
-  program2.name("gitfamiliar").description("Visualize your code familiarity from Git history").version("0.1.1").option(
-    "-m, --mode <mode>",
-    "Scoring mode: binary, authorship, weighted",
-    "binary"
-  ).option(
-    "-u, --user <user>",
-    "Git user name or email (repeatable for comparison)",
-    collect,
-    []
-  ).option(
-    "-e, --expiration <policy>",
-    "Expiration policy: never, time:180d, change:50%, combined:365d:50%",
-    "never"
-  ).option("--html", "Generate HTML treemap report", false).option(
-    "-w, --weights <weights>",
-    'Weights for weighted mode: blame,commit (e.g., "0.5,0.5")'
-  ).option("--team", "Compare all contributors", false).option(
-    "--team-coverage",
-    "Show team coverage map (bus factor analysis)",
-    false
-  ).option("--hotspot [mode]", "Hotspot analysis: personal (default) or team").option(
-    "--window <days>",
-    "Time window for hotspot analysis in days (default: 90)"
-  ).action(async (rawOptions) => {
-    try {
-      const repoPath = process.cwd();
-      const options = parseOptions(rawOptions, repoPath);
+
+// src/cli/output/unified-html.ts
+import { writeFileSync as writeFileSync5 } from "fs";
+import { join as join5 } from "path";
+function generateUnifiedHTML(data) {
+  const scoringBinaryJson = JSON.stringify(data.scoring.binary.tree);
+  const scoringAuthorshipJson = JSON.stringify(data.scoring.authorship.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 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>
+  * { 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;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+  #header {
+    padding: 12px 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: 13px; color: #a0a0a0; }
+
+  /* Tabs */
+  #tabs {
+    display: flex;
+    background: #16213e;
+    border-bottom: 1px solid #0f3460;
+    padding: 0 24px;
+  }
+  #tabs .tab {
+    padding: 10px 20px;
+    cursor: pointer;
+    color: #888;
+    border-bottom: 2px solid transparent;
+    font-size: 14px;
+    transition: color 0.15s;
+  }
+  #tabs .tab:hover { color: #ccc; }
+  #tabs .tab.active { color: #e94560; border-bottom-color: #e94560; }
+
+  /* Sub-tabs (scoring modes) */
+  #scoring-controls {
+    display: none;
+    padding: 8px 24px;
+    background: #16213e;
+    border-bottom: 1px solid #0f3460;
+    align-items: center;
+    gap: 16px;
+  }
+  #scoring-controls.visible { display: flex; }
+  .subtab {
+    padding: 5px 14px;
+    cursor: pointer;
+    color: #888;
+    border: 1px solid #0f3460;
+    border-radius: 4px;
+    font-size: 12px;
+    background: transparent;
+    transition: all 0.15s;
+  }
+  .subtab:hover { color: #ccc; border-color: #555; }
+  .subtab.active { color: #e94560; border-color: #e94560; background: rgba(233,69,96,0.1); }
+  #weight-controls {
+    display: none;
+    align-items: center;
+    gap: 8px;
+    margin-left: 24px;
+    font-size: 12px;
+    color: #a0a0a0;
+  }
+  #weight-controls.visible { display: flex; }
+  #weight-controls input[type="range"] {
+    width: 120px;
+    accent-color: #e94560;
+  }
+  #weight-controls .weight-label { min-width: 36px; text-align: right; color: #e0e0e0; }
+
+  /* Breadcrumb */
+  #breadcrumb {
+    padding: 8px 24px;
+    background: #16213e;
+    font-size: 13px;
+    border-bottom: 1px solid #0f3460;
+    display: none;
+  }
+  #breadcrumb.visible { display: block; }
+  #breadcrumb span { cursor: pointer; color: #5eadf7; }
+  #breadcrumb span:hover { text-decoration: underline; }
+  #breadcrumb .sep { color: #666; margin: 0 4px; }
+
+  /* Tab descriptions */
+  .tab-desc {
+    padding: 8px 24px;
+    background: #16213e;
+    border-bottom: 1px solid #0f3460;
+    font-size: 12px;
+    color: #888;
+    display: none;
+  }
+  .tab-desc.visible { display: block; }
+
+  /* Tab content */
+  #content-area { flex: 1; position: relative; overflow: hidden; }
+  .tab-content { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+  .tab-content.active { display: block; }
+  .tab-content.with-sidebar.active { display: flex; }
+
+  /* Layout with sidebar */
+  .with-sidebar .viz-area { flex: 1; position: relative; height: 100%; }
+  .with-sidebar .sidebar {
+    width: 300px;
+    height: 100%;
+    background: #16213e;
+    border-left: 1px solid #0f3460;
+    overflow-y: auto;
+    padding: 16px;
+  }
+  .sidebar h3 { font-size: 14px; margin-bottom: 12px; color: #e94560; }
+  .sidebar .risk-file, .sidebar .hotspot-item {
+    padding: 6px 0;
+    border-bottom: 1px solid #0f3460;
+    font-size: 12px;
+  }
+  .sidebar .path { color: #e0e0e0; word-break: break-all; }
+  .sidebar .meta { color: #888; margin-top: 2px; }
+  .risk-badge {
+    display: inline-block;
+    padding: 1px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: bold;
+    margin-left: 4px;
+  }
+  .risk-critical { background: #e94560; color: white; }
+  .risk-high { background: #f07040; color: white; }
+  .risk-medium { background: #f5a623; color: black; }
+  .risk-low { background: #27ae60; color: white; }
+
+  /* Multi-user controls */
+  #multiuser-controls {
+    display: none;
+    padding: 8px 24px;
+    background: #16213e;
+    border-bottom: 1px solid #0f3460;
+    align-items: center;
+    gap: 12px;
+  }
+  #multiuser-controls.visible { display: flex; }
+  #multiuser-controls select {
+    padding: 4px 12px;
+    border: 1px solid #0f3460;
+    background: #1a1a2e;
+    color: #e0e0e0;
+    border-radius: 4px;
+    font-size: 13px;
+  }
+  #multiuser-controls label { font-size: 13px; color: #888; }
+
+  /* Tooltip */
+  #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;
+  }
+
+  /* Legends */
+  .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;
+    display: none;
+    z-index: 50;
+  }
+  .legend.active { display: block; }
+  .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; }
+  .legend .row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
+  .legend .swatch { width: 14px; height: 14px; border-radius: 3px; }
+
+  /* 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.binary.totalFiles} files</div>
+</div>
+
+<div id="tabs">
+  <div class="tab active" onclick="switchTab('scoring')">Scoring</div>
+  <div class="tab" onclick="switchTab('coverage')">Coverage</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">
+  Team knowledge distribution: how many people have contributed 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" onclick="switchScoringMode('binary')">Binary</button>
+  <button class="subtab" onclick="switchScoringMode('authorship')">Authorship</button>
+  <button class="subtab" 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="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:#e94560"></div> 0\u20131 (Risk)</div>
+  <div class="row"><div class="swatch" style="background:#f5a623"></div> 2\u20133 (Moderate)</div>
+  <div class="row"><div class="swatch" style="background:#27ae60"></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 = {
+  binary: ${scoringBinaryJson},
+  authorship: ${scoringAuthorshipJson},
+  weighted: ${scoringWeightedJson},
+};
+const coverageData = ${coverageTreeJson};
+const coverageRiskFiles = ${coverageRiskJson};
+const hotspotData = ${hotspotJson};
+const multiUserData = ${multiUserTreeJson};
+const multiUserNames = ${multiUserNamesJson};
+const multiUserSummaries = ${multiUserSummariesJson};
+
+// \u2500\u2500 State \u2500\u2500
+let activeTab = 'scoring';
+let scoringMode = 'binary';
+let blameWeight = 0.5;
+let scoringPath = '';
+let coveragePath = '';
+let multiuserPath = '';
+let currentUser = 0;
+const rendered = { scoring: false, coverage: false, hotspots: false, multiuser: false };
+
+// \u2500\u2500 Common utilities \u2500\u2500
+function scoreColor(score) {
+  if (score <= 0) return '#e94560';
+  if (score >= 1) return '#27ae60';
+  if (score < 0.5) return d3.interpolateRgb('#e94560', '#f5a623')(score / 0.5);
+  return d3.interpolateRgb('#f5a623', '#27ae60')((score - 0.5) / 0.5);
+}
+
+function coverageColor(count) {
+  if (count <= 0) return '#e94560';
+  if (count === 1) return '#d63c57';
+  if (count <= 3) return '#f5a623';
+  return '#27ae60';
+}
+
+function folderRiskColor(riskLevel) {
+  switch (riskLevel) {
+    case 'risk': return '#e94560';
+    case 'moderate': return '#f5a623';
+    default: return '#27ae60';
+  }
+}
+
+function riskLevelColor(level) {
+  switch(level) {
+    case 'critical': return '#e94560';
+    case 'high': return '#f07040';
+    case 'medium': return '#f5a623';
+    default: return '#27ae60';
+  }
+}
+
+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)),
+  };
+}
+
+function updateBreadcrumb(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;
+}
+
+function showTooltipAt(html, event) {
+  const tooltip = document.getElementById('tooltip');
+  tooltip.innerHTML = html;
+  tooltip.style.display = 'block';
+  tooltip.style.left = (event.pageX + 14) + 'px';
+  tooltip.style.top = (event.pageY - 14) + 'px';
+}
+
+function moveTooltip(event) {
+  const tooltip = document.getElementById('tooltip');
+  tooltip.style.left = (event.pageX + 14) + 'px';
+  tooltip.style.top = (event.pageY - 14) + 'px';
+}
+
+function hideTooltip() {
+  document.getElementById('tooltip').style.display = 'none';
+}
+
+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;
+}
+
+// \u2500\u2500 Tab switching \u2500\u2500
+const modeDescriptions = {
+  binary: 'Binary: Have you ever committed to this file? Yes (green) or No (red).',
+  authorship: 'Authorship: How much of the current code did you write? Based on git blame line ownership.',
+  weighted: 'Weighted: Combines blame ownership and commit history with adjustable weights. Use the sliders to tune.',
+};
+
+function switchTab(tab) {
+  activeTab = tab;
+  document.querySelectorAll('#tabs .tab').forEach((el, i) => {
+    const tabs = ['scoring', 'coverage', 'multiuser', 'hotspots'];
+    el.classList.toggle('active', tabs[i] === tab);
+  });
+  document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
+  document.getElementById('tab-' + tab).classList.add('active');
+
+  // Show/hide tab descriptions
+  ['scoring', 'coverage', 'multiuser', 'hotspots'].forEach(t => {
+    document.getElementById('tab-desc-' + t).classList.toggle('visible', t === tab);
+  });
+
+  // Show/hide controls
+  document.getElementById('scoring-controls').classList.toggle('visible', tab === 'scoring');
+  document.getElementById('scoring-mode-desc').classList.toggle('visible', tab === 'scoring');
+  document.getElementById('multiuser-controls').classList.toggle('visible', tab === 'multiuser');
+
+  // Show/hide breadcrumb
+  const showBreadcrumb = tab === 'scoring' || tab === 'coverage' || tab === 'multiuser';
+  document.getElementById('breadcrumb').classList.toggle('visible', showBreadcrumb);
+
+  // Show/hide legends
+  document.getElementById('legend-scoring').classList.toggle('active', tab === 'scoring');
+  document.getElementById('legend-coverage').classList.toggle('active', tab === 'coverage');
+  document.getElementById('legend-multiuser').classList.toggle('active', tab === 'multiuser');
+
+  // Update breadcrumb for current tab
+  if (tab === 'scoring') updateBreadcrumb(scoringPath);
+  else if (tab === 'coverage') updateBreadcrumb(coveragePath);
+  else if (tab === 'multiuser') updateBreadcrumb(multiuserPath);
+
+  // Render after a short delay so layout is computed after display change
+  setTimeout(() => {
+    if (!rendered[tab]) {
+      rendered[tab] = true;
+      if (tab === 'coverage') { renderCoverageSidebar(); renderCoverage(); }
+      else if (tab === 'hotspots') { renderHotspotSidebar(); renderHotspot(); }
+      else if (tab === 'multiuser') { initMultiUserSelect(); renderMultiUser(); }
+    } else {
+      if (tab === 'scoring') renderScoring();
+      else if (tab === 'coverage') renderCoverage();
+      else if (tab === 'hotspots') renderHotspot();
+      else if (tab === 'multiuser') renderMultiUser();
+    }
+  }, 0);
+}
+
+// \u2500\u2500 Zoom (shared across treemap tabs) \u2500\u2500
+function zoomTo(path) {
+  if (activeTab === 'scoring') { scoringPath = path; renderScoring(); }
+  else if (activeTab === 'coverage') { coveragePath = path; renderCoverage(); }
+  else if (activeTab === 'multiuser') { multiuserPath = path; renderMultiUser(); }
+  updateBreadcrumb(path);
+}
+
+// \u2500\u2500 Layout dimensions \u2500\u2500
+function getContentHeight() {
+  return document.getElementById('content-area').offsetHeight;
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// \u2500\u2500 SCORING TAB \u2500\u2500
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+function switchScoringMode(mode) {
+  scoringMode = mode;
+  scoringPath = '';
+  updateBreadcrumb('');
+  document.querySelectorAll('#scoring-controls .subtab').forEach(el => {
+    el.classList.toggle('active', el.textContent.toLowerCase() === mode);
+  });
+  document.getElementById('weight-controls').classList.toggle('visible', mode === 'weighted');
+  document.getElementById('mode-desc-text').textContent = modeDescriptions[mode];
+  renderScoring();
+}
+
+function onWeightChange() {
+  const slider = document.getElementById('blame-slider');
+  const bv = parseInt(slider.value);
+  blameWeight = bv / 100;
+  document.getElementById('blame-label').textContent = bv + '%';
+  document.getElementById('commit-label').textContent = (100 - bv) + '%';
+  recalcWeightedScores(scoringData.weighted, blameWeight, 1 - blameWeight);
+  renderScoring();
+}
+
+function recalcWeightedScores(node, bw, cw) {
+  if (node.type === 'file') {
+    const bs = node.blameScore || 0;
+    const cs = node.commitScore || 0;
+    node.score = bw * bs + cw * cs;
+  } else if (node.children) {
+    let totalLines = 0;
+    let weightedSum = 0;
+    for (const child of node.children) {
+      recalcWeightedScores(child, bw, cw);
+      const lines = child.lines || 1;
+      totalLines += lines;
+      weightedSum += child.score * lines;
+    }
+    node.score = totalLines > 0 ? weightedSum / totalLines : 0;
+  }
+}
+
+function renderScoring() {
+  const container = document.getElementById('tab-scoring');
+  container.innerHTML = '';
+  const height = getContentHeight();
+  const width = window.innerWidth;
+
+  const treeData = scoringData[scoringMode];
+  const targetNode = scoringPath ? findNode(treeData, scoringPath) : treeData;
+  if (!targetNode || !targetNode.children || targetNode.children.length === 0) return;
+
+  const hierarchyData = {
+    name: targetNode.path || 'root',
+    children: targetNode.children.map(c => buildHierarchy(c)),
+  };
+
+  const root = d3.hierarchy(hierarchyData)
+    .sum(d => d.value || 0)
+    .sort((a, b) => (b.value || 0) - (a.value || 0));
+
+  d3.treemap().size([width, height]).padding(2).paddingTop(20).round(true)(root);
+
+  const svg = d3.select('#tab-scoring').append('svg').attr('width', width).attr('height', height);
+  const nodes = root.descendants().filter(d => d.depth > 0);
+
+  const groups = svg.selectAll('g').data(nodes).join('g')
+    .attr('transform', d => 'translate(' + d.x0 + ',' + d.y0 + ')');
+
+  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 => d.data.data ? scoreColor(d.data.data.score) : '#333')
+    .attr('opacity', d => d.children ? 0.35 : 0.88)
+    .attr('stroke', '#1a1a2e').attr('stroke-width', d => d.children ? 1 : 0.5).attr('rx', 2)
+    .style('cursor', d => (d.data.data && d.data.data.type === 'folder') ? 'pointer' : 'default')
+    .on('click', (event, d) => {
+      if (d.data.data && d.data.data.type === 'folder') { event.stopPropagation(); zoomTo(d.data.data.path); }
+    })
+    .on('mouseover', function(event, d) {
+      if (!d.data.data) return;
+      d3.select(this).attr('opacity', d.children ? 0.5 : 1).attr('stroke', '#fff');
+      let html = '<strong>' + d.data.data.path + '</strong>';
+      html += '<br>Score: ' + Math.round(d.data.data.score * 100) + '%';
+      html += '<br>Lines: ' + d.data.data.lines.toLocaleString();
+      if (d.data.data.type === 'folder') {
+        html += '<br>Files: ' + d.data.data.fileCount;
+        html += '<br><em style="color:#5eadf7">Click to drill down \\u25B6</em>';
+      }
+      if (d.data.data.blameScore !== undefined) html += '<br>Blame: ' + Math.round(d.data.data.blameScore * 100) + '%';
+      if (d.data.data.commitScore !== undefined) html += '<br>Commit: ' + Math.round(d.data.data.commitScore * 100) + '%';
+      if (d.data.data.isExpired) html += '<br><span style="color:#e94560">Expired</span>';
+      showTooltipAt(html, event);
+    })
+    .on('mousemove', moveTooltip)
+    .on('mouseout', function(event, d) {
+      d3.select(this).attr('opacity', d.children ? 0.35 : 0.88).attr('stroke', '#1a1a2e');
+      hideTooltip();
+    });
+
+  groups.append('text')
+    .attr('x', 4).attr('y', 14).attr('fill', '#fff')
+    .attr('font-size', d => d.children ? '11px' : '10px')
+    .attr('font-weight', d => d.children ? 'bold' : 'normal')
+    .style('pointer-events', 'none')
+    .text(d => truncateLabel(d.data.name || '', d.x1 - d.x0, d.y1 - d.y0));
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// \u2500\u2500 COVERAGE TAB \u2500\u2500
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+function renderCoverage() {
+  const vizArea = document.getElementById('coverage-viz');
+  vizArea.innerHTML = '';
+  let height = vizArea.offsetHeight;
+  let width = vizArea.offsetWidth;
+
+  if (!width || !height) {
+    const contentH = document.getElementById('content-area').offsetHeight;
+    width = window.innerWidth - 300;
+    height = contentH;
+  }
+
+  const targetNode = coveragePath ? findNode(coverageData, coveragePath) : coverageData;
+  if (!targetNode || !targetNode.children || targetNode.children.length === 0) return;
+
+  const hierarchyData = {
+    name: targetNode.path || 'root',
+    children: targetNode.children.map(c => buildHierarchy(c)),
+  };
+
+  const root = d3.hierarchy(hierarchyData)
+    .sum(d => d.value || 0)
+    .sort((a, b) => (b.value || 0) - (a.value || 0));
+
+  d3.treemap().size([width, height]).padding(2).paddingTop(20).round(true)(root);
+
+  const svg = d3.select('#coverage-viz').append('svg').attr('width', width).attr('height', height);
+  const nodes = root.descendants().filter(d => d.depth > 0);
+
+  const groups = svg.selectAll('g').data(nodes).join('g')
+    .attr('transform', d => 'translate(' + d.x0 + ',' + d.y0 + ')');
+
+  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';
+      if (d.data.data.type === 'file') return coverageColor(d.data.data.contributorCount);
+      return folderRiskColor(d.data.data.riskLevel);
+    })
+    .attr('opacity', d => d.children ? 0.35 : 0.88)
+    .attr('stroke', '#1a1a2e').attr('stroke-width', d => d.children ? 1 : 0.5).attr('rx', 2)
+    .style('cursor', d => (d.data.data && d.data.data.type === 'folder') ? 'pointer' : 'default')
+    .on('click', (event, d) => {
+      if (d.data.data && d.data.data.type === 'folder') { event.stopPropagation(); zoomTo(d.data.data.path); }
+    })
+    .on('mouseover', function(event, d) {
+      if (!d.data.data) return;
+      d3.select(this).attr('opacity', d.children ? 0.5 : 1).attr('stroke', '#fff');
+      let html = '<strong>' + d.data.data.path + '</strong>';
+      if (d.data.data.type === 'file') {
+        html += '<br>Contributors: ' + d.data.data.contributorCount;
+        if (d.data.data.contributors && d.data.data.contributors.length > 0) {
+          html += '<br>' + d.data.data.contributors.slice(0, 8).join(', ');
+          if (d.data.data.contributors.length > 8) html += ', ...';
+        }
+        html += '<br>Lines: ' + d.data.data.lines.toLocaleString();
+      } else {
+        html += '<br>Files: ' + d.data.data.fileCount;
+        html += '<br>Avg Contributors: ' + d.data.data.avgContributors;
+        html += '<br>Bus Factor: ' + d.data.data.busFactor;
+        html += '<br><em style="color:#5eadf7">Click to drill down \\u25B6</em>';
+      }
+      showTooltipAt(html, event);
+    })
+    .on('mousemove', moveTooltip)
+    .on('mouseout', function(event, d) {
+      d3.select(this).attr('opacity', d.children ? 0.35 : 0.88).attr('stroke', '#1a1a2e');
+      hideTooltip();
+    });
+
+  groups.append('text')
+    .attr('x', 4).attr('y', 14).attr('fill', '#fff')
+    .attr('font-size', d => d.children ? '11px' : '10px')
+    .attr('font-weight', d => d.children ? 'bold' : 'normal')
+    .style('pointer-events', 'none')
+    .text(d => truncateLabel(d.data.name || '', d.x1 - d.x0, d.y1 - d.y0));
+}
+
+function renderCoverageSidebar() {
+  const container = document.getElementById('risk-list');
+  if (coverageRiskFiles.length === 0) {
+    container.innerHTML = '<div style="color:#888">No high-risk files found.</div>';
+    return;
+  }
+  let html = '';
+  for (const f of coverageRiskFiles.slice(0, 50)) {
+    const countLabel = f.contributorCount === 0 ? '0 people' : '1 person (' + f.contributors[0] + ')';
+    html += '<div class="risk-file"><div class="path">' + f.path + '</div><div class="meta">' + countLabel + '</div></div>';
+  }
+  if (coverageRiskFiles.length > 50) {
+    html += '<div style="color:#888;padding:8px 0">... and ' + (coverageRiskFiles.length - 50) + ' more</div>';
+  }
+  container.innerHTML = html;
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// \u2500\u2500 HOTSPOT TAB \u2500\u2500
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+function renderHotspot() {
+  const vizArea = document.getElementById('hotspot-viz');
+  const existingSvg = vizArea.querySelector('svg');
+  if (existingSvg) existingSvg.remove();
+
+  let height = vizArea.offsetHeight;
+  let width = vizArea.offsetWidth;
+
+  // Fallback: if the element hasn't been laid out yet, calculate manually
+  if (!width || !height) {
+    const contentH = document.getElementById('content-area').offsetHeight;
+    const totalW = window.innerWidth;
+    width = totalW - 300; // subtract sidebar width
+    height = contentH;
+  }
+
+  const margin = { top: 30, right: 30, bottom: 60, left: 70 };
+  const innerW = width - margin.left - margin.right;
+  const innerH = height - margin.top - margin.bottom;
+
+  const maxFreq = d3.max(hotspotData, d => d.changeFrequency) || 1;
+
+  const x = d3.scaleLinear().domain([0, 1]).range([0, innerW]);
+  const y = d3.scaleLinear().domain([0, maxFreq * 1.1]).range([innerH, 0]);
+  const r = d3.scaleSqrt().domain([0, d3.max(hotspotData, d => d.lines) || 1]).range([3, 20]);
+
+  const svg = d3.select('#hotspot-viz').append('svg').attr('width', width).attr('height', height);
+  const g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+  // Danger zone
+  g.append('rect').attr('x', 0).attr('y', 0)
+    .attr('width', x(0.3)).attr('height', y(maxFreq * 0.3))
+    .attr('fill', 'rgba(233, 69, 96, 0.06)');
+
+  // Axes
+  g.append('g').attr('transform', 'translate(0,' + innerH + ')')
+    .call(d3.axisBottom(x).ticks(5).tickFormat(d => Math.round(d * 100) + '%'))
+    .selectAll('text,line,path').attr('stroke', '#555').attr('fill', '#888');
+
+  svg.append('text').attr('x', margin.left + innerW / 2).attr('y', height - 10)
+    .attr('text-anchor', 'middle').attr('fill', '#888').attr('font-size', '13px')
+    .text('Familiarity \\u2192');
+
+  g.append('g').call(d3.axisLeft(y).ticks(6))
+    .selectAll('text,line,path').attr('stroke', '#555').attr('fill', '#888');
+
+  svg.append('text').attr('transform', 'rotate(-90)')
+    .attr('x', -(margin.top + innerH / 2)).attr('y', 16)
+    .attr('text-anchor', 'middle').attr('fill', '#888').attr('font-size', '13px')
+    .text('Change Frequency (commits) \\u2192');
+
+  // Zone labels
+  const labels = document.getElementById('zone-labels');
+  labels.innerHTML = '';
+  const dangerLabel = document.createElement('div');
+  dangerLabel.className = 'zone-label';
+  dangerLabel.style.left = (margin.left + 8) + 'px';
+  dangerLabel.style.top = (margin.top + 8) + 'px';
+  dangerLabel.textContent = 'DANGER ZONE';
+  dangerLabel.style.color = 'rgba(233,69,96,0.25)';
+  labels.appendChild(dangerLabel);
+
+  const safeLabel = document.createElement('div');
+  safeLabel.className = 'zone-label';
+  safeLabel.style.right = (320 + 40) + 'px';
+  safeLabel.style.bottom = (margin.bottom + 16) + 'px';
+  safeLabel.textContent = 'SAFE ZONE';
+  safeLabel.style.color = 'rgba(39,174,96,0.2)';
+  labels.appendChild(safeLabel);
+
+  // Data points
+  g.selectAll('circle').data(hotspotData).join('circle')
+    .attr('cx', d => x(d.familiarity))
+    .attr('cy', d => y(d.changeFrequency))
+    .attr('r', d => r(d.lines))
+    .attr('fill', d => riskLevelColor(d.riskLevel))
+    .attr('opacity', 0.7)
+    .attr('stroke', 'none')
+    .style('cursor', 'pointer')
+    .on('mouseover', function(event, d) {
+      d3.select(this).attr('opacity', 1).attr('stroke', '#fff').attr('stroke-width', 2);
+      showTooltipAt(
+        '<strong>' + d.path + '</strong>' +
+        '<br>Familiarity: ' + Math.round(d.familiarity * 100) + '%' +
+        '<br>Changes: ' + d.changeFrequency + ' commits' +
+        '<br>Risk: ' + d.risk.toFixed(2) + ' (' + d.riskLevel + ')' +
+        '<br>Lines: ' + d.lines.toLocaleString(),
+        event
+      );
+    })
+    .on('mousemove', moveTooltip)
+    .on('mouseout', function() {
+      d3.select(this).attr('opacity', 0.7).attr('stroke', 'none');
+      hideTooltip();
+    });
+}
+
+function renderHotspotSidebar() {
+  const container = document.getElementById('hotspot-list');
+  const top = hotspotData.slice(0, 30);
+  if (top.length === 0) {
+    container.innerHTML = '<div style="color:#888">No active files in time window.</div>';
+    return;
+  }
+  let html = '';
+  for (let i = 0; i < top.length; i++) {
+    const f = top[i];
+    html += '<div class="hotspot-item"><div class="path">' + (i + 1) + '. ' + f.path +
+      ' <span class="risk-badge risk-' + f.riskLevel + '">' + f.riskLevel.toUpperCase() + '</span></div>' +
+      '<div class="meta">Fam: ' + Math.round(f.familiarity * 100) + '% | Changes: ' + f.changeFrequency + ' | Risk: ' + f.risk.toFixed(2) + '</div></div>';
+  }
+  container.innerHTML = html;
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// \u2500\u2500 MULTI-USER TAB \u2500\u2500
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+
+function initMultiUserSelect() {
+  const select = document.getElementById('userSelect');
+  select.innerHTML = '';
+  multiUserNames.forEach((name, i) => {
+    const opt = document.createElement('option');
+    opt.value = i;
+    const summary = multiUserSummaries[i];
+    opt.textContent = name + ' (' + Math.round(summary.overallScore * 100) + '%)';
+    select.appendChild(opt);
+  });
+}
+
+function onUserChange() {
+  currentUser = parseInt(document.getElementById('userSelect').value);
+  renderMultiUser();
+}
+
+function getUserScore(node) {
+  if (!node.userScores || node.userScores.length === 0) return node.score;
+  const s = node.userScores[currentUser];
+  return s ? s.score : 0;
+}
+
+function renderMultiUser() {
+  const container = document.getElementById('tab-multiuser');
+  container.innerHTML = '';
+  const height = getContentHeight();
+  const width = window.innerWidth;
+
+  const targetNode = multiuserPath ? findNode(multiUserData, multiuserPath) : multiUserData;
+  if (!targetNode || !targetNode.children || targetNode.children.length === 0) return;
+
+  const hierarchyData = {
+    name: targetNode.path || 'root',
+    children: targetNode.children.map(c => buildHierarchy(c)),
+  };
+
+  const root = d3.hierarchy(hierarchyData)
+    .sum(d => d.value || 0)
+    .sort((a, b) => (b.value || 0) - (a.value || 0));
+
+  d3.treemap().size([width, height]).padding(2).paddingTop(20).round(true)(root);
+
+  const svg = d3.select('#tab-multiuser').append('svg').attr('width', width).attr('height', height);
+  const nodes = root.descendants().filter(d => d.depth > 0);
+
+  const groups = svg.selectAll('g').data(nodes).join('g')
+    .attr('transform', d => 'translate(' + d.x0 + ',' + d.y0 + ')');
+
+  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 => d.data.data ? scoreColor(getUserScore(d.data.data)) : '#333')
+    .attr('opacity', d => d.children ? 0.35 : 0.88)
+    .attr('stroke', '#1a1a2e').attr('stroke-width', d => d.children ? 1 : 0.5).attr('rx', 2)
+    .style('cursor', d => (d.data.data && d.data.data.type === 'folder') ? 'pointer' : 'default')
+    .on('click', (event, d) => {
+      if (d.data.data && d.data.data.type === 'folder') { event.stopPropagation(); zoomTo(d.data.data.path); }
+    })
+    .on('mouseover', function(event, d) {
+      if (!d.data.data) return;
+      d3.select(this).attr('opacity', d.children ? 0.5 : 1).attr('stroke', '#fff');
+      let html = '<strong>' + (d.data.data.path || 'root') + '</strong>';
+      if (d.data.data.userScores && d.data.data.userScores.length > 0) {
+        html += '<table style="margin-top:6px;width:100%">';
+        d.data.data.userScores.forEach((s, i) => {
+          const isCurrent = (i === currentUser);
+          const style = isCurrent ? 'font-weight:bold;color:#5eadf7' : '';
+          html += '<tr style="' + style + '"><td>' + multiUserNames[i] + '</td><td style="text-align:right">' + Math.round(s.score * 100) + '%</td></tr>';
+        });
+        html += '</table>';
+      }
+      if (d.data.data.type === 'folder') {
+        html += '<br>Files: ' + d.data.data.fileCount;
+        html += '<br><em style="color:#5eadf7">Click to drill down \\u25B6</em>';
+      } else {
+        html += '<br>Lines: ' + d.data.data.lines.toLocaleString();
+      }
+      showTooltipAt(html, event);
+    })
+    .on('mousemove', moveTooltip)
+    .on('mouseout', function(event, d) {
+      d3.select(this).attr('opacity', d.children ? 0.35 : 0.88).attr('stroke', '#1a1a2e');
+      hideTooltip();
+    });
+
+  groups.append('text')
+    .attr('x', 4).attr('y', 14).attr('fill', '#fff')
+    .attr('font-size', d => d.children ? '11px' : '10px')
+    .attr('font-weight', d => d.children ? 'bold' : 'normal')
+    .style('pointer-events', 'none')
+    .text(d => truncateLabel(d.data.name || '', d.x1 - d.x0, d.y1 - d.y0));
+}
+
+// \u2500\u2500 Init \u2500\u2500
+rendered.scoring = true;
+renderScoring();
+window.addEventListener('resize', () => {
+  if (activeTab === 'scoring') renderScoring();
+  else if (activeTab === 'coverage') renderCoverage();
+  else if (activeTab === 'hotspots') renderHotspot();
+  else if (activeTab === 'multiuser') renderMultiUser();
+});
+</script>
+</body>
+</html>`;
+}
+async function generateAndOpenUnifiedHTML(data, repoPath) {
+  const html = generateUnifiedHTML(data);
+  const outputPath = join5(repoPath, "gitfamiliar-dashboard.html");
+  writeFileSync5(outputPath, html, "utf-8");
+  console.log(`Dashboard generated: ${outputPath}`);
+  await openBrowser(outputPath);
+}
+
+// src/cli/index.ts
+function collect(value, previous) {
+  return previous.concat([value]);
+}
+function createProgram() {
+  const program2 = new Command();
+  program2.name("gitfamiliar").description("Visualize your code familiarity from Git history").version("0.1.1").option(
+    "-m, --mode <mode>",
+    "Scoring mode: binary, authorship, weighted",
+    "binary"
+  ).option(
+    "-u, --user <user>",
+    "Git user name or email (repeatable for comparison)",
+    collect,
+    []
+  ).option(
+    "-e, --expiration <policy>",
+    "Expiration policy: never, time:180d, change:50%, combined:365d:50%",
+    "never"
+  ).option("--html", "Generate HTML treemap report", false).option(
+    "-w, --weights <weights>",
+    'Weights for weighted mode: blame,commit (e.g., "0.5,0.5")'
+  ).option("--team", "Compare all contributors", false).option(
+    "--team-coverage",
+    "Show team coverage map (bus factor analysis)",
+    false
+  ).option("--hotspot [mode]", "Hotspot analysis: personal (default) or team").option(
+    "--window <days>",
+    "Time window for hotspot analysis in days (default: 90)"
+  ).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.teamCoverage && !isMultiUserCheck) {
+        const data = await computeUnified(options);
+        await generateAndOpenUnifiedHTML(data, repoPath);
+        return;
+      }
       if (options.hotspot) {
         const result2 = await computeHotspots(options);
         if (options.html) {