repo-wrapped 0.0.2

package/README.md

@@ -0,0 +1,94 @@
+# repo-wrapped
+
+A CLI tool for generating Git repository analytics and visualizations.
+
+## Installation
+
+```bash
+npm install -g repo-wrapped
+```
+
+## Usage
+
+### Generate Visualization
+
+```bash
+# Current directory, current year
+repo-wrapped generate
+
+# Specific repository with HTML output
+repo-wrapped generate /path/to/repo --html
+
+# Analyze entire repository lifetime
+repo-wrapped generate . --all --html
+
+# Deep analysis with file-level knowledge distribution
+repo-wrapped generate . --html --deep-analysis
+```
+
+### Options
+
+| Flag | Description |
+|------|-------------|
+| `-y, --year <year>` | Year to analyze (default: current year) |
+| `-m, --months <months>` | Number of months to show (1-12, default: 12) |
+| `-a, --all` | Analyze entire repository lifetime |
+| `--html` | Generate HTML report and open in browser |
+| `--body-check` | Include commit body in quality scoring |
+| `--deep-analysis` | Enable file-level analysis for knowledge distribution |
+
+### Year in Code Summary
+
+```bash
+repo-wrapped wrapped 2024 . --html
+```
+
+## HTML Report Sections
+
+- **Contribution Graph** - Interactive commit heatmap
+- **Streak Analytics** - Current and longest streaks, active day percentage
+- **Time Patterns** - Hourly/daily distribution, chronotype detection, burnout risk
+- **Commit Quality** - Message quality scoring, conventional commits adherence
+- **File Hotspots** - Most changed files, technical debt indicators
+- **Achievements** - Progress-based badges and milestones
+- **Impact Analysis** - Lines changed, churn metrics
+- **Knowledge Distribution** - Bus factor risk, ownership analysis
+
+## Development
+
+```bash
+npm install
+npm run build
+npm link
+```
+
+### Project Structure
+
+```
+src/
+├── index.ts                 # CLI entry point
+├── commands/
+│   └── generate.ts          # Generate command
+├── types/
+│   └── index.ts             # TypeScript interfaces
+├── generators/
+│   └── html/
+│       ├── scripts/         # Client-side JS
+│       ├── styles/          # CSS files
+│       ├── templates/       # HTML section builders
+│       └── utils/           # Build utilities
+└── utils/
+    ├── gitParser.ts         # Git log parsing
+    ├── htmlGenerator.ts     # HTML report assembly
+    ├── streakCalculator.ts  # Streak analytics
+    ├── timePatternAnalyzer.ts
+    ├── commitQualityAnalyzer.ts
+    ├── fileHotspotAnalyzer.ts
+    ├── achievementEngine.ts
+    ├── impactAnalyzer.ts
+    └── knowledgeDistributionAnalyzer.ts
+```
+
+## License
+
+MIT

package/dist/cli.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const gitParser_1 = require("./utils/gitParser");
+const matrixGenerator_1 = require("./utils/matrixGenerator");
+const program = new commander_1.Command();
+program
+    .command('generate-matrix <repoPath>')
+    .description('Generate a GitHub-like commit matrix for the specified repository')
+    .option('-y, --year <year>', 'Year to generate matrix for', String(new Date().getFullYear()))
+    .option('-m, --month <month>', 'Month to generate matrix for (1-12)', String(new Date().getMonth() + 1))
+    .action(async (repoPath, options) => {
+    try {
+        const commits = (0, gitParser_1.parseGitCommits)(repoPath);
+        const year = parseInt(options.year);
+        const month = parseInt(options.month);
+        const matrix = (0, matrixGenerator_1.generateCommitMatrix)(commits, year, month, repoPath);
+        console.log(matrix);
+    }
+    catch (error) {
+        console.error('Error generating commit matrix:', error);
+    }
+});
+program.parse(process.argv);

package/dist/commands/generate.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateMatrix = void 0;
+const chalk_1 = __importDefault(require("chalk"));
+const child_process_1 = require("child_process");
+const fs = __importStar(require("fs"));
+const ora_1 = __importDefault(require("ora"));
+const os = __importStar(require("os"));
+const path = __importStar(require("path"));
+const gitParser_1 = require("../utils/gitParser");
+const htmlGenerator_1 = require("../utils/htmlGenerator");
+const matrixGenerator_1 = require("../utils/matrixGenerator");
+async function generateMatrix(repoPath, options) {
+    const spinner = (0, ora_1.default)('Analyzing git repository...').start();
+    try {
+        const absolutePath = path.resolve(repoPath);
+        const year = parseInt(options.year);
+        const monthsToShow = parseInt(options.months);
+        if (!options.all && (monthsToShow < 1 || monthsToShow > 12)) {
+            spinner.fail(chalk_1.default.red('Invalid months value. Please provide a value between 1 and 12.'));
+            process.exit(1);
+        }
+        spinner.text = 'Fetching commit history...';
+        const commits = (0, gitParser_1.parseGitCommits)(absolutePath);
+        if (commits.length === 0) {
+            spinner.warn(chalk_1.default.yellow('No commits found in the repository.'));
+            return;
+        }
+        spinner.text = 'Generating visualization...';
+        if (options.html) {
+            // Generate HTML output
+            const repoName = (0, gitParser_1.getRepositoryName)(absolutePath);
+            const repoUrl = (0, gitParser_1.getRepositoryUrl)(absolutePath);
+            const skipBodyCheck = !options.bodyCheck;
+            const deepAnalysis = options.deepAnalysis ?? false;
+            const html = (0, htmlGenerator_1.generateHTML)(commits, year, monthsToShow, absolutePath, repoName, repoUrl, skipBodyCheck, options.all, deepAnalysis);
+            const outputPath = path.join(os.tmpdir(), `git-wrapped-${Date.now()}.html`);
+            fs.writeFileSync(outputPath, html);
+            spinner.succeed(chalk_1.default.green('HTML file generated successfully!'));
+            console.log();
+            console.log(chalk_1.default.cyan('Opening in browser...'));
+            console.log(chalk_1.default.dim(`File: ${outputPath}`));
+            // Open in default browser
+            const command = process.platform === 'win32'
+                ? `start "" "${outputPath}"`
+                : process.platform === 'darwin'
+                    ? `open "${outputPath}"`
+                    : `xdg-open "${outputPath}"`;
+            (0, child_process_1.exec)(command);
+        }
+        else {
+            // Generate terminal output
+            const repoName = (0, gitParser_1.getRepositoryName)(absolutePath);
+            const repoUrl = (0, gitParser_1.getRepositoryUrl)(absolutePath);
+            const matrix = (0, matrixGenerator_1.generateCommitMatrix)(commits, year, monthsToShow, absolutePath, repoName, repoUrl);
+            spinner.succeed(chalk_1.default.green('✓ Analysis complete!'));
+            console.log(matrix);
+            console.log();
+            console.log(chalk_1.default.cyan('💡 Tip:'), chalk_1.default.dim('Run with'), chalk_1.default.white('--html'), chalk_1.default.dim('to see interactive details and per-developer analytics'));
+            console.log(chalk_1.default.dim('   Example:'), chalk_1.default.white(`git-wrapped generate ${repoPath} --html`));
+        }
+    }
+    catch (error) {
+        spinner.fail(chalk_1.default.red('Failed to generate visualization'));
+        console.error(chalk_1.default.red('\nError:'), error.message);
+        process.exit(1);
+    }
+}
+exports.generateMatrix = generateMatrix;

package/dist/commands/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const gitParser_1 = require("../utils/gitParser");
+const matrixGenerator_1 = require("../utils/matrixGenerator");
+const program = new commander_1.Command();
+program
+    .command('generate-matrix <repoPath>')
+    .description('Generate a GitHub-like commit visualization for the specified repository')
+    .option('-y, --year <year>', 'Year to generate visualization for', String(new Date().getFullYear()))
+    .option('-m, --month <month>', 'Month to generate visualization for (1-12)', String(new Date().getMonth() + 1))
+    .action(async (repoPath, options) => {
+    try {
+        const commits = (0, gitParser_1.parseGitCommits)(repoPath);
+        const year = parseInt(options.year);
+        const month = parseInt(options.month);
+        const matrix = (0, matrixGenerator_1.generateCommitMatrix)(commits, year, month, repoPath);
+        console.log(matrix);
+    }
+    catch (error) {
+        console.error('Error generating commit visualization:', error);
+    }
+});
+exports.default = program;

package/dist/constants/chronotypes.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ANALYSIS_CHRONOTYPE_EMOJIS = exports.WRAPPED_CHRONOTYPE_LABELS = exports.WRAPPED_CHRONOTYPE_EMOJIS = void 0;
+// Chronotype definitions for YearInCodeSummary (morning/day/evening/night)
+exports.WRAPPED_CHRONOTYPE_EMOJIS = {
+    morning: '☀️',
+    day: '📅',
+    evening: '🌆',
+    night: '🌙'
+};
+exports.WRAPPED_CHRONOTYPE_LABELS = {
+    morning: 'Morning Person',
+    day: 'Daytime Coder',
+    evening: 'Evening Developer',
+    night: 'Night Owl'
+};
+// Chronotype definitions for TimePattern analysis (early-bird/night-owl/balanced/vampire)
+exports.ANALYSIS_CHRONOTYPE_EMOJIS = {
+    'early-bird': '🐦',
+    'night-owl': '🦉',
+    'vampire': '🧛',
+    'balanced': '⚖️'
+};

package/dist/constants/colors.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTRIBUTION_LEVELS = exports.GITHUB_COLORS = void 0;
+// GitHub contribution colors
+exports.GITHUB_COLORS = {
+    EMPTY: 'rgba(235, 237, 240, 0.1)',
+    LEVEL_1: '#9be9a8',
+    LEVEL_2: '#40c463',
+    LEVEL_3: '#30a14e',
+    LEVEL_4: '#216e39',
+    BORDER: '#21262d'
+};
+// Contribution thresholds
+exports.CONTRIBUTION_LEVELS = {
+    LEVEL_1: 3,
+    LEVEL_2: 6,
+    LEVEL_3: 9
+};

package/dist/constants/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./colors"), exports);
+__exportStar(require("./chronotypes"), exports);

package/dist/formatters/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./timeFormatter"), exports);

package/dist/formatters/timeFormatter.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatHourShort = exports.formatHour = void 0;
+/**
+ * Formats an hour (0-23) to a human-readable AM/PM string
+ */
+function formatHour(hour) {
+    if (hour === 0)
+        return '12:00 AM';
+    if (hour < 12)
+        return `${hour}:00 AM`;
+    if (hour === 12)
+        return '12:00 PM';
+    return `${hour - 12}:00 PM`;
+}
+exports.formatHour = formatHour;
+/**
+ * Formats an hour (0-23) to a short AM/PM string (without :00)
+ */
+function formatHourShort(hour) {
+    if (hour === 0)
+        return '12 AM';
+    if (hour < 12)
+        return `${hour} AM`;
+    if (hour === 12)
+        return '12 PM';
+    return `${hour - 12} PM`;
+}
+exports.formatHourShort = formatHourShort;

package/dist/generators/html/scripts/export.js

@@ -0,0 +1,125 @@
+// Export functionality for Git Wrapped reports
+
+function initExport() {
+  document.querySelectorAll('[data-export]').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const format = e.currentTarget.dataset.export;
+      exportData(format);
+    });
+  });
+}
+
+function exportData(format) {
+  const data = window.__GITWRAPPED_DATA__;
+  
+  if (!data) {
+    console.warn('No export data available');
+    return;
+  }
+  
+  const repoName = (data.repository || 'report').replace(/[^a-z0-9]/gi, '-').toLowerCase();
+  const timestamp = new Date().toISOString().slice(0, 10);
+  
+  if (format === 'json') {
+    downloadFile(
+      JSON.stringify(data, null, 2),
+      `git-wrapped-${repoName}-${timestamp}.json`,
+      'application/json'
+    );
+  } else if (format === 'csv') {
+    const csv = convertToCSV(data);
+    downloadFile(csv, `git-wrapped-${repoName}-${timestamp}.csv`, 'text/csv');
+  }
+}
+
+function convertToCSV(data) {
+  const sections = [];
+  
+  // Section 1: Summary Metrics
+  sections.push('# Summary Metrics');
+  sections.push('Metric,Value');
+  sections.push(`Repository,${escapeCSV(data.repository || '')}`);
+  sections.push(`Period Start,${data.period?.start || ''}`);
+  sections.push(`Period End,${data.period?.end || ''}`);
+  sections.push(`Author Filter,${escapeCSV(data.author || 'All')}`);
+  sections.push(`Total Commits,${data.summary?.totalCommits || 0}`);
+  sections.push(`Total Contributors,${data.summary?.totalContributors || 0}`);
+  sections.push(`Active Days,${data.summary?.activeDays || 0}`);
+  
+  // Section 2: Streak Data
+  if (data.streaks) {
+    sections.push('');
+    sections.push('# Streak Analysis');
+    sections.push('Metric,Value');
+    sections.push(`Current Streak (days),${data.streaks.currentStreak || 0}`);
+    sections.push(`Longest Streak (days),${data.streaks.longestStreak || 0}`);
+    sections.push(`Total Active Days,${data.streaks.totalActiveDays || 0}`);
+    sections.push(`Active Day Percentage,${(data.streaks.activeDayPercentage || 0).toFixed(1)}%`);
+  }
+  
+  // Section 3: Quality Metrics
+  if (data.quality) {
+    sections.push('');
+    sections.push('# Commit Quality');
+    sections.push('Metric,Value');
+    sections.push(`Overall Score,${(data.quality.overallScore || 0).toFixed(1)}`);
+    sections.push(`Conventional Commits %,${(data.quality.conventionalAdherence || 0).toFixed(1)}%`);
+    sections.push(`Avg Subject Length,${(data.quality.avgSubjectLength || 0).toFixed(0)} chars`);
+  }
+  
+  // Section 4: Time Patterns
+  if (data.timePattern) {
+    sections.push('');
+    sections.push('# Time Patterns');
+    sections.push('Metric,Value');
+    sections.push(`Chronotype,${data.timePattern.chronotype || 'Unknown'}`);
+    sections.push(`Peak Hour,${data.timePattern.peakHour || 0}:00`);
+    sections.push(`Consistency Score,${(data.timePattern.consistency || 0).toFixed(1)}`);
+  }
+  
+  // Section 5: Developer Stats
+  if (data.developerStats && data.developerStats.length > 0) {
+    sections.push('');
+    sections.push('# Developer Statistics');
+    sections.push('Developer,Commits,First Commit,Last Commit');
+    data.developerStats.forEach(dev => {
+      sections.push(`${escapeCSV(dev.name)},${dev.commits},${dev.firstCommit || ''},${dev.lastCommit || ''}`);
+    });
+  }
+  
+  // Section 6: Recent Commits (last 100)
+  if (data.commits && data.commits.length > 0) {
+    sections.push('');
+    sections.push('# Commits (last 100)');
+    sections.push('Date,Author,Message,Hash');
+    data.commits.slice(0, 100).forEach(c => {
+      sections.push(`${c.date},${escapeCSV(c.author)},${escapeCSV(c.message)},${c.hash || ''}`);
+    });
+  }
+  
+  return sections.join('\n');
+}
+
+function escapeCSV(str) {
+  if (str == null) return '';
+  const s = String(str);
+  if (s.includes(',') || s.includes('"') || s.includes('\n') || s.includes('\r')) {
+    return '"' + s.replace(/"/g, '""') + '"';
+  }
+  return s;
+}
+
+function downloadFile(content, filename, mimeType) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', initExport);

package/dist/generators/html/scripts/knowledge.js

@@ -0,0 +1,120 @@
+/**
+ * Knowledge Distribution - Expandable Row Interactivity
+ * Handles accordion-style expand/collapse for directory deep-dive analysis
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Initialize expandable rows in the knowledge table
+   */
+  function initExpandableRows() {
+    const expandableRows = document.querySelectorAll('.knowledge-table .expandable-row');
+    
+    expandableRows.forEach(row => {
+      row.addEventListener('click', handleRowExpand);
+      row.addEventListener('keydown', handleRowKeydown);
+    });
+  }
+
+  /**
+   * Handle click on expandable row
+   */
+  function handleRowExpand(event) {
+    const row = event.currentTarget;
+    const rowId = row.getAttribute('data-row-id');
+    if (!rowId) return;
+
+    const contentRow = document.getElementById(`${rowId}-content`);
+    if (!contentRow) return;
+
+    const isExpanded = row.getAttribute('aria-expanded') === 'true';
+    
+    if (isExpanded) {
+      collapseRow(row, contentRow);
+    } else {
+      expandRow(row, contentRow);
+    }
+  }
+
+  /**
+   * Handle keyboard navigation on expandable rows
+   */
+  function handleRowKeydown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleRowExpand(event);
+    }
+  }
+
+  /**
+   * Expand a directory row to show details
+   */
+  function expandRow(row, contentRow) {
+    row.setAttribute('aria-expanded', 'true');
+    row.classList.add('expanded');
+    contentRow.classList.remove('hidden');
+    
+    // Animate expand icon
+    const icon = row.querySelector('.expand-icon');
+    if (icon) {
+      icon.textContent = '▼';
+    }
+    
+    // Animate the content panel
+    const panel = contentRow.querySelector('.expansion-panel');
+    if (panel) {
+      panel.style.maxHeight = panel.scrollHeight + 'px';
+      panel.style.opacity = '1';
+    }
+  }
+
+  /**
+   * Collapse a directory row to hide details
+   */
+  function collapseRow(row, contentRow) {
+    row.setAttribute('aria-expanded', 'false');
+    row.classList.remove('expanded');
+    contentRow.classList.add('hidden');
+    
+    // Animate expand icon
+    const icon = row.querySelector('.expand-icon');
+    if (icon) {
+      icon.textContent = '▶';
+    }
+    
+    // Animate the content panel
+    const panel = contentRow.querySelector('.expansion-panel');
+    if (panel) {
+      panel.style.maxHeight = '0';
+      panel.style.opacity = '0';
+    }
+  }
+
+  /**
+   * Collapse all expanded rows
+   */
+  function collapseAllRows() {
+    const expandedRows = document.querySelectorAll('.knowledge-table .expandable-row.expanded');
+    expandedRows.forEach(row => {
+      const rowId = row.getAttribute('data-row-id');
+      const contentRow = document.getElementById(`${rowId}-content`);
+      if (contentRow) {
+        collapseRow(row, contentRow);
+      }
+    });
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initExpandableRows);
+  } else {
+    initExpandableRows();
+  }
+
+  // Expose function for external use (e.g., collapse all when switching tabs)
+  window.knowledgeModule = {
+    collapseAllRows: collapseAllRows
+  };
+})();

package/dist/generators/html/scripts/modal.js

@@ -0,0 +1,68 @@
+// Modal functionality for commit details
+const modal = document.getElementById('modal');
+const modalTitle = document.getElementById('modal-title');
+const modalClose = document.getElementById('modal-close');
+const commitList = document.getElementById('commit-list');
+
+// Helper function to escape HTML
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// Modal click handlers
+const clickableDays = document.querySelectorAll('.day.clickable');
+clickableDays.forEach(day => {
+  day.addEventListener('click', () => {
+    const details = day.getAttribute('data-details');
+    const dateStr = day.getAttribute('data-date');
+    
+    if (details && dateStr) {
+      try {
+        const commits = JSON.parse(details);
+        const date = new Date(dateStr);
+        const formattedDate = date.toLocaleDateString('en-US', { 
+          weekday: 'long', 
+          year: 'numeric', 
+          month: 'long', 
+          day: 'numeric' 
+        });
+        
+        modalTitle.textContent = `${commits.length} contribution${commits.length !== 1 ? 's' : ''} on ${formattedDate}`;
+        
+        // Build commit list
+        commitList.innerHTML = commits.map(commit => `
+          <div class="commit-item">
+            <div class="commit-message">${escapeHtml(commit.message)}</div>
+            <div class="commit-meta">
+              <span>by <strong>${escapeHtml(commit.author)}</strong></span>
+              <span class="commit-sha">${commit.hash.substring(0, 7)}</span>
+            </div>
+          </div>
+        `).join('');
+        
+        modal.classList.add('active');
+      } catch (e) {
+        console.error('Failed to parse commit details:', e);
+      }
+    }
+  });
+});
+
+// Close modal handlers
+modalClose.addEventListener('click', () => {
+  modal.classList.remove('active');
+});
+
+modal.addEventListener('click', (e) => {
+  if (e.target === modal) {
+    modal.classList.remove('active');
+  }
+});
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && modal.classList.contains('active')) {
+    modal.classList.remove('active');
+  }
+});