gitfamiliar 0.8.0 → 0.9.0

package/dist/bin/gitfamiliar.js

@@ -8,9 +8,10 @@ import {
   processBatch,
   resolveUser,
   walkFiles
-} from "../chunk-R5MGQGFI.js";
+} from "../chunk-NGCQUB2H.js";
 
 // src/cli/index.ts
+import { createRequire } from "module";
 import { Command } from "commander";
 
 // src/core/types.ts
@@ -1630,14 +1631,26 @@ async function computeHotspots(options) {
   const isTeamMode = options.hotspot === "team";
   const trackedFiles = /* @__PURE__ */ new Set();
   walkFiles(tree, (f) => trackedFiles.add(f.path));
-  const changeFreqMap = await bulkGetChangeFrequency(gitClient, timeWindow, trackedFiles);
+  const changeFreqMap = await bulkGetChangeFrequency(
+    gitClient,
+    timeWindow,
+    trackedFiles
+  );
   let familiarityMap;
   let userName;
   if (isTeamMode) {
-    familiarityMap = await computeTeamAvgFamiliarity(gitClient, trackedFiles, options);
+    familiarityMap = await computeTeamAvgFamiliarity(
+      gitClient,
+      trackedFiles,
+      options
+    );
   } else {
     const userFlag = Array.isArray(options.user) ? options.user[0] : options.user;
-    const result = await computeFamiliarity({ ...options, team: false, teamCoverage: false });
+    const result = await computeFamiliarity({
+      ...options,
+      team: false,
+      teamCoverage: false
+    });
     userName = result.userName;
     familiarityMap = /* @__PURE__ */ new Map();
     walkFiles(result.tree, (f) => {
@@ -1693,12 +1706,18 @@ function classifyHotspotRisk(risk) {
 async function computeTeamAvgFamiliarity(gitClient, trackedFiles, options) {
   const contributors = await getAllContributors(gitClient, 1);
   const totalContributors = Math.max(1, contributors.length);
-  const fileContributors = await bulkGetFileContributors(gitClient, trackedFiles);
+  const fileContributors = await bulkGetFileContributors(
+    gitClient,
+    trackedFiles
+  );
   const result = /* @__PURE__ */ new Map();
   for (const filePath of trackedFiles) {
     const contribs = fileContributors.get(filePath);
     const count = contribs ? contribs.size : 0;
-    result.set(filePath, Math.min(1, count / Math.max(1, totalContributors * 0.3)));
+    result.set(
+      filePath,
+      Math.min(1, count / Math.max(1, totalContributors * 0.3))
+    );
   }
   return result;
 }
@@ -2093,12 +2112,26 @@ async function computeUnified(options) {
   ]);
   console.log("  [2/4] Team coverage...");
   const coverage = await computeTeamCoverage(options);
-  console.log("  [3/4] Hotspot analysis...");
+  console.log("  [3/5] Hotspot analysis...");
   const hotspot = await computeHotspots({
     ...options,
     hotspot: "personal"
   });
-  console.log("  [4/4] Multi-user comparison...");
+  console.log("  [4/5] Hotspot team familiarity...");
+  const gitClient = new GitClient(options.repoPath);
+  const repoRoot = await gitClient.getRepoRoot();
+  const filter = createFilter(repoRoot);
+  const tree = await buildFileTree(gitClient, filter);
+  const trackedFiles = /* @__PURE__ */ new Set();
+  walkFiles(tree, (f) => trackedFiles.add(f.path));
+  const teamFamMap = await computeTeamAvgFamiliarity(
+    gitClient,
+    trackedFiles,
+    options
+  );
+  const hotspotTeamFamiliarity = {};
+  for (const [k, v] of teamFamMap) hotspotTeamFamiliarity[k] = v;
+  console.log("  [5/5] Multi-user comparison...");
   const multiUser = await computeMultiUser({
     ...options,
     team: true
@@ -2110,6 +2143,7 @@ async function computeUnified(options) {
     scoring: { binary, authorship, weighted },
     coverage,
     hotspot,
+    hotspotTeamFamiliarity,
     multiUser
   };
 }
@@ -2133,6 +2167,7 @@ function generateUnifiedHTML(data) {
       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(
@@ -2145,11 +2180,34 @@ function generateUnifiedHTML(data) {
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>GitFamiliar \u2014 ${data.repoName}</title>
 <style>
+  :root {
+    --bg-base: #1a1a2e;
+    --bg-panel: #16213e;
+    --accent: #e94560;
+    --accent-hover: #ff5577;
+    --border: #0f3460;
+    --text-primary: #e0e0e0;
+    --text-secondary: #a0a0a0;
+    --text-dim: #888;
+    --link: #5eadf7;
+    --color-critical: #e94560;
+    --color-high: #f07040;
+    --color-medium: #f5a623;
+    --color-safe: #27ae60;
+    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
+    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
+    --shadow-glow-accent: 0 0 20px rgba(233,69,96,0.3);
+    --glass-bg: rgba(22,33,62,0.85);
+    --glass-border: rgba(94,173,247,0.15);
+    --transition-fast: 0.15s ease;
+    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: #1a1a2e;
-    color: #e0e0e0;
+    background: var(--bg-base);
+    color: var(--text-primary);
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -2157,39 +2215,51 @@ function generateUnifiedHTML(data) {
   }
   #header {
     padding: 12px 24px;
-    background: #16213e;
-    border-bottom: 1px solid #0f3460;
+    background: linear-gradient(135deg, var(--bg-panel) 0%, #1a2844 100%);
+    border-bottom: 1px solid var(--border);
+    box-shadow: var(--shadow-md);
     display: flex;
     align-items: center;
     justify-content: space-between;
+    position: relative;
+    z-index: 10;
   }
-  #header h1 { font-size: 18px; color: #e94560; }
-  #header .info { font-size: 13px; color: #a0a0a0; }
+  #header h1 { font-size: 18px; color: var(--accent); text-shadow: 0 0 20px rgba(233,69,96,0.4); }
+  #header .info { font-size: 13px; color: var(--text-secondary); }
 
   /* Tabs */
   #tabs {
     display: flex;
-    background: #16213e;
-    border-bottom: 1px solid #0f3460;
+    background: var(--bg-panel);
+    border-bottom: 1px solid var(--border);
     padding: 0 24px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    position: relative;
+    z-index: 9;
   }
   #tabs .tab {
     padding: 10px 20px;
     cursor: pointer;
-    color: #888;
+    color: var(--text-dim);
     border-bottom: 2px solid transparent;
     font-size: 14px;
-    transition: color 0.15s;
+    transition: all var(--transition-smooth);
+    position: relative;
+  }
+  #tabs .tab:hover { color: var(--text-primary); transform: translateY(-1px); }
+  #tabs .tab.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+    text-shadow: 0 0 10px rgba(233,69,96,0.5);
+    background: linear-gradient(to bottom, transparent, rgba(233,69,96,0.05));
   }
-  #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;
+    background: var(--bg-panel);
+    border-bottom: 1px solid var(--border);
     align-items: center;
     gap: 16px;
   }
@@ -2197,50 +2267,103 @@ function generateUnifiedHTML(data) {
   .subtab {
     padding: 5px 14px;
     cursor: pointer;
-    color: #888;
-    border: 1px solid #0f3460;
+    color: var(--text-dim);
+    border: 1px solid var(--border);
     border-radius: 4px;
     font-size: 12px;
     background: transparent;
-    transition: all 0.15s;
+    transition: all var(--transition-smooth);
+    box-shadow: var(--shadow-sm);
   }
-  .subtab:hover { color: #ccc; border-color: #555; }
-  .subtab.active { color: #e94560; border-color: #e94560; background: rgba(233,69,96,0.1); }
+  .subtab:hover { color: var(--text-primary); border-color: #555; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
+  .subtab.active { color: var(--accent); border-color: var(--accent); background: rgba(233,69,96,0.1); box-shadow: 0 0 12px rgba(233,69,96,0.3); }
   #weight-controls {
     display: none;
     align-items: center;
     gap: 8px;
     margin-left: 24px;
     font-size: 12px;
-    color: #a0a0a0;
+    color: var(--text-secondary);
   }
   #weight-controls.visible { display: flex; }
   #weight-controls input[type="range"] {
     width: 120px;
-    accent-color: #e94560;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+  }
+  #weight-controls input[type="range"]::-webkit-slider-runnable-track {
+    height: 6px;
+    background: linear-gradient(to right, var(--accent), var(--link));
+    border-radius: 3px;
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
   }
-  #weight-controls .weight-label { min-width: 36px; text-align: right; color: #e0e0e0; }
+  #weight-controls input[type="range"]::-moz-range-track {
+    height: 6px;
+    background: linear-gradient(to right, var(--accent), var(--link));
+    border-radius: 3px;
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
+  }
+  #weight-controls input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--accent);
+    border-radius: 50%;
+    cursor: pointer;
+    margin-top: -5px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(233,69,96,0.4);
+    transition: all var(--transition-fast);
+  }
+  #weight-controls input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--accent);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(233,69,96,0.4);
+    transition: all var(--transition-fast);
+  }
+  #weight-controls input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 0 16px rgba(233,69,96,0.6);
+  }
+  #weight-controls input[type="range"]::-moz-range-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 0 16px rgba(233,69,96,0.6);
+  }
+  #weight-controls .weight-label { min-width: 36px; text-align: right; color: var(--text-primary); }
 
   /* Breadcrumb */
   #breadcrumb {
     padding: 8px 24px;
-    background: #16213e;
+    background: var(--bg-panel);
     font-size: 13px;
-    border-bottom: 1px solid #0f3460;
+    border-bottom: 1px solid var(--border);
     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; }
+  #breadcrumb span {
+    cursor: pointer;
+    color: var(--link);
+    padding: 3px 10px;
+    border-radius: 12px;
+    transition: all var(--transition-fast);
+    display: inline-block;
+  }
+  #breadcrumb span:hover { background: rgba(94,173,247,0.12); text-shadow: 0 0 8px rgba(94,173,247,0.4); }
+  #breadcrumb .sep { color: var(--text-dim); margin: 0 2px; padding: 0; }
+  #breadcrumb .sep:hover { background: transparent; text-shadow: none; }
 
   /* Tab descriptions */
   .tab-desc {
     padding: 8px 24px;
-    background: #16213e;
-    border-bottom: 1px solid #0f3460;
+    background: var(--bg-panel);
+    border-bottom: 1px solid var(--border);
     font-size: 12px;
-    color: #888;
+    color: var(--text-dim);
     display: none;
   }
   .tab-desc.visible { display: block; }
@@ -2250,71 +2373,120 @@ function generateUnifiedHTML(data) {
   .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; }
+  .tab-content svg { animation: fadeInScale 0.4s ease-out; }
+  @keyframes fadeInScale {
+    from { opacity: 0; transform: scale(0.98); }
+    to { opacity: 1; transform: scale(1); }
+  }
 
   /* 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;
+    background: rgba(22,33,62,0.95);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border-left: 1px solid var(--border);
+    box-shadow: -4px 0 16px rgba(0,0,0,0.3);
     overflow-y: auto;
     padding: 16px;
   }
-  .sidebar h3 { font-size: 14px; margin-bottom: 12px; color: #e94560; }
+  .sidebar h3 { font-size: 14px; margin-bottom: 12px; color: var(--accent); text-shadow: 0 0 10px rgba(233,69,96,0.3); }
   .sidebar .risk-file, .sidebar .hotspot-item {
-    padding: 6px 0;
-    border-bottom: 1px solid #0f3460;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border);
     font-size: 12px;
+    border-radius: 4px;
+    margin-bottom: 2px;
+    transition: all var(--transition-fast);
   }
-  .sidebar .path { color: #e0e0e0; word-break: break-all; }
-  .sidebar .meta { color: #888; margin-top: 2px; }
+  .sidebar .risk-file:hover, .sidebar .hotspot-item:hover {
+    background: rgba(94,173,247,0.06);
+    border-left: 3px solid var(--accent);
+    padding-left: 13px;
+    transform: translateX(2px);
+  }
+  .sidebar .path { color: var(--text-primary); word-break: break-all; }
+  .sidebar .meta { color: var(--text-dim); margin-top: 2px; }
   .risk-badge {
     display: inline-block;
-    padding: 1px 6px;
-    border-radius: 3px;
+    padding: 2px 8px;
+    border-radius: 10px;
     font-size: 10px;
     font-weight: bold;
     margin-left: 4px;
+    box-shadow: var(--shadow-sm);
   }
-  .risk-critical { background: #e94560; color: white; }
-  .risk-high { background: #f07040; color: white; }
-  .risk-medium { background: #f5a623; color: black; }
-  .risk-low { background: #27ae60; color: white; }
+  .risk-critical { background: var(--color-critical); color: white; box-shadow: 0 0 8px rgba(233,69,96,0.4); }
+  .risk-high { background: var(--color-high); color: white; box-shadow: 0 0 6px rgba(240,112,64,0.4); }
+  .risk-medium { background: var(--color-medium); color: black; }
+  .risk-low { background: var(--color-safe); color: white; }
 
   /* Multi-user controls */
   #multiuser-controls {
     display: none;
     padding: 8px 24px;
-    background: #16213e;
-    border-bottom: 1px solid #0f3460;
+    background: var(--bg-panel);
+    border-bottom: 1px solid var(--border);
     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;
+    padding: 6px 14px;
+    border: 1px solid var(--border);
+    background: var(--bg-base);
+    color: var(--text-primary);
+    border-radius: 6px;
     font-size: 13px;
+    box-shadow: var(--shadow-sm);
+    transition: all var(--transition-fast);
+    cursor: pointer;
+  }
+  #multiuser-controls select:hover { border-color: var(--link); box-shadow: 0 0 8px rgba(94,173,247,0.2); }
+  #multiuser-controls select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 12px rgba(233,69,96,0.3); }
+  #multiuser-controls label { font-size: 13px; color: var(--text-dim); }
+
+  /* Hotspot controls */
+  #hotspot-controls {
+    display: none;
+    padding: 8px 24px;
+    background: var(--bg-panel);
+    border-bottom: 1px solid var(--border);
+    align-items: center;
+    gap: 12px;
+  }
+  #hotspot-controls.visible { display: flex; }
+  #hotspot-controls label { font-size: 13px; color: var(--text-dim); }
+  #hotspot-controls .sep-v {
+    width: 1px;
+    height: 20px;
+    background: var(--border);
+    margin: 0 8px;
+  }
+  .subtab.disabled {
+    opacity: 0.35;
+    pointer-events: none;
+    cursor: default;
   }
-  #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;
+    background: var(--glass-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+    border-radius: 8px;
+    padding: 12px 16px;
     font-size: 13px;
     line-height: 1.6;
     display: none;
     z-index: 100;
     max-width: 350px;
+    box-shadow: var(--shadow-lg);
   }
 
   /* Legends */
@@ -2322,25 +2494,29 @@ function generateUnifiedHTML(data) {
     position: absolute;
     bottom: 16px;
     right: 16px;
-    background: rgba(22, 33, 62, 0.9);
-    border: 1px solid #0f3460;
-    border-radius: 6px;
-    padding: 10px;
+    background: var(--glass-bg);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    border-radius: 10px;
+    padding: 12px 14px;
     font-size: 12px;
     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, #e94560, #f5a623, #27ae60);
-    border-radius: 3px;
+    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: #888; }
+  .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: 3px; }
+  .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; }
@@ -2398,6 +2574,17 @@ function generateUnifiedHTML(data) {
   <select id="userSelect" onchange="onUserChange()"></select>
 </div>
 
+<div id="hotspot-controls">
+  <label>Mode:</label>
+  <button class="subtab active" onclick="switchHotspotMode('personal')">Personal</button>
+  <button class="subtab" onclick="switchHotspotMode('team')">Team</button>
+  <span class="sep-v"></span>
+  <label>Scoring:</label>
+  <button class="subtab hs-scoring active" onclick="switchHotspotScoring('binary')">Binary</button>
+  <button class="subtab hs-scoring" onclick="switchHotspotScoring('authorship')">Authorship</button>
+  <button class="subtab hs-scoring" onclick="switchHotspotScoring('weighted')">Weighted</button>
+</div>
+
 <div id="breadcrumb"><span onclick="zoomTo('')">root</span></div>
 
 <div id="content-area">
@@ -2431,9 +2618,9 @@ function generateUnifiedHTML(data) {
 </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 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>
@@ -2452,6 +2639,7 @@ const scoringData = {
 const coverageData = ${coverageTreeJson};
 const coverageRiskFiles = ${coverageRiskJson};
 const hotspotData = ${hotspotJson};
+const hotspotTeamFamiliarity = ${hotspotTeamFamJson};
 const multiUserData = ${multiUserTreeJson};
 const multiUserNames = ${multiUserNamesJson};
 const multiUserSummaries = ${multiUserSummariesJson};
@@ -2464,8 +2652,66 @@ let scoringPath = '';
 let coveragePath = '';
 let multiuserPath = '';
 let currentUser = 0;
+let hotspotMode = 'personal';
+let hotspotScoring = 'binary';
 const rendered = { scoring: false, coverage: false, hotspots: false, multiuser: false };
 
+// \u2500\u2500 Hotspot recalculation utilities \u2500\u2500
+function extractFlatScores(node) {
+  const map = {};
+  function walk(n) {
+    if (n.type === 'file') { map[n.path] = n.score; }
+    else if (n.children) { n.children.forEach(walk); }
+  }
+  walk(node);
+  return map;
+}
+
+const personalScores = {
+  binary: extractFlatScores(scoringData.binary),
+  authorship: extractFlatScores(scoringData.authorship),
+  weighted: extractFlatScores(scoringData.weighted),
+};
+
+function recalculateHotspotData() {
+  const famScores = hotspotMode === 'personal'
+    ? personalScores[hotspotScoring]
+    : hotspotTeamFamiliarity;
+  const maxFreq = d3.max(hotspotData, d => d.changeFrequency) || 1;
+  return hotspotData.map(d => {
+    const familiarity = famScores[d.path] || 0;
+    const normalizedFreq = d.changeFrequency / maxFreq;
+    const risk = normalizedFreq * (1 - familiarity);
+    return { ...d, familiarity, risk,
+      riskLevel: risk >= 0.6 ? 'critical' : risk >= 0.4 ? 'high' : risk >= 0.2 ? 'medium' : 'low',
+    };
+  }).sort((a, b) => b.risk - a.risk);
+}
+
+function switchHotspotMode(mode) {
+  hotspotMode = mode;
+  document.querySelectorAll('#hotspot-controls .subtab:not(.hs-scoring)').forEach(el => {
+    el.classList.toggle('active', el.textContent.toLowerCase() === mode);
+  });
+  // Disable scoring buttons in team mode
+  const isTeam = mode === 'team';
+  document.querySelectorAll('#hotspot-controls .hs-scoring').forEach(el => {
+    el.classList.toggle('disabled', isTeam);
+  });
+  renderHotspot();
+  renderHotspotSidebar();
+}
+
+function switchHotspotScoring(mode) {
+  if (hotspotMode === 'team') return;
+  hotspotScoring = mode;
+  document.querySelectorAll('#hotspot-controls .hs-scoring').forEach(el => {
+    el.classList.toggle('active', el.textContent.toLowerCase() === mode);
+  });
+  renderHotspot();
+  renderHotspotSidebar();
+}
+
 // \u2500\u2500 Common utilities \u2500\u2500
 function scoreColor(score) {
   if (score <= 0) return '#e94560';
@@ -2583,6 +2829,7 @@ function switchTab(tab) {
   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');
+  document.getElementById('hotspot-controls').classList.toggle('visible', tab === 'hotspots');
 
   // Show/hide breadcrumb
   const showBreadcrumb = tab === 'scoring' || tab === 'coverage' || tab === 'multiuser';
@@ -2857,15 +3104,17 @@ function renderHotspot() {
     height = contentH;
   }
 
+  const currentData = recalculateHotspotData();
+
   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 maxFreq = d3.max(currentData, 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 r = d3.scaleSqrt().domain([0, d3.max(currentData, 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 + ')');
@@ -2912,7 +3161,7 @@ function renderHotspot() {
   labels.appendChild(safeLabel);
 
   // Data points
-  g.selectAll('circle').data(hotspotData).join('circle')
+  g.selectAll('circle').data(currentData).join('circle')
     .attr('cx', d => x(d.familiarity))
     .attr('cy', d => y(d.changeFrequency))
     .attr('r', d => r(d.lines))
@@ -2920,8 +3169,10 @@ function renderHotspot() {
     .attr('opacity', 0.7)
     .attr('stroke', 'none')
     .style('cursor', 'pointer')
+    .style('filter', d => d.riskLevel === 'critical' ? 'drop-shadow(0 0 6px rgba(233,69,96,0.8))' : 'none')
+    .style('transition', 'all 0.2s ease')
     .on('mouseover', function(event, d) {
-      d3.select(this).attr('opacity', 1).attr('stroke', '#fff').attr('stroke-width', 2);
+      d3.select(this).attr('opacity', 1).attr('stroke', '#fff').attr('stroke-width', 2).style('filter', 'drop-shadow(0 0 12px rgba(255,255,255,0.5))');
       showTooltipAt(
         '<strong>' + d.path + '</strong>' +
         '<br>Familiarity: ' + Math.round(d.familiarity * 100) + '%' +
@@ -2932,15 +3183,17 @@ function renderHotspot() {
       );
     })
     .on('mousemove', moveTooltip)
-    .on('mouseout', function() {
-      d3.select(this).attr('opacity', 0.7).attr('stroke', 'none');
+    .on('mouseout', function(event, d) {
+      const origFilter = d.riskLevel === 'critical' ? 'drop-shadow(0 0 6px rgba(233,69,96,0.8))' : 'none';
+      d3.select(this).attr('opacity', 0.7).attr('stroke', 'none').style('filter', origFilter);
       hideTooltip();
     });
 }
 
 function renderHotspotSidebar() {
   const container = document.getElementById('hotspot-list');
-  const top = hotspotData.slice(0, 30);
+  const currentData = recalculateHotspotData();
+  const top = currentData.slice(0, 30);
   if (top.length === 0) {
     container.innerHTML = '<div style="color:#888">No active files in time window.</div>';
     return;
@@ -3075,12 +3328,14 @@ async function generateAndOpenUnifiedHTML(data, repoPath) {
 }
 
 // src/cli/index.ts
+var require2 = createRequire(import.meta.url);
+var pkg = require2("../../package.json");
 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(
+  program2.name("gitfamiliar").description("Visualize your code familiarity from Git history").version(pkg.version).option(
     "-m, --mode <mode>",
     "Scoring mode: binary, authorship, weighted",
     "binary"