repo-wrapped 0.0.2

package/dist/utils/gitParser.js

@@ -0,0 +1,125 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRepositoryUrl = exports.getRepositoryName = exports.getCurrentGitUser = exports.parseGitCommits = exports.parseCommitData = exports.getCommitHistory = void 0;
+const child_process_1 = require("child_process");
+const path = __importStar(require("path"));
+const GIT_LOG_FORMAT = '--pretty=format:"%H|%an|%aI|%s"';
+const getCommitHistory = (repoPath) => {
+    try {
+        const output = (0, child_process_1.execSync)(`git log ${GIT_LOG_FORMAT}`, {
+            cwd: repoPath,
+            encoding: 'utf-8',
+        });
+        return output;
+    }
+    catch (error) {
+        throw new Error(`Error retrieving commit history: ${error.message}`);
+    }
+};
+exports.getCommitHistory = getCommitHistory;
+const parseCommitData = (commitData) => {
+    if (!commitData || commitData.trim() === '') {
+        return [];
+    }
+    return commitData.split('\n')
+        .filter(line => line.trim())
+        .map(line => {
+        const parts = line.split('|');
+        if (parts.length < 4) {
+            return null;
+        }
+        const [hash, author, date, ...messageParts] = parts;
+        const message = messageParts.join('|'); // Rejoin in case message contains |
+        return { hash, author, date, message };
+    })
+        .filter((commit) => commit !== null &&
+        Boolean(commit.hash) &&
+        Boolean(commit.author) &&
+        Boolean(commit.date));
+};
+exports.parseCommitData = parseCommitData;
+const parseGitCommits = (repoPath) => {
+    const commitHistory = (0, exports.getCommitHistory)(repoPath);
+    return (0, exports.parseCommitData)(commitHistory);
+};
+exports.parseGitCommits = parseGitCommits;
+const getCurrentGitUser = (repoPath) => {
+    try {
+        const name = (0, child_process_1.execSync)('git config user.name', {
+            cwd: repoPath,
+            encoding: 'utf-8',
+        }).trim();
+        return name || 'Unknown';
+    }
+    catch (error) {
+        return 'Unknown';
+    }
+};
+exports.getCurrentGitUser = getCurrentGitUser;
+const getRepositoryName = (repoPath) => {
+    try {
+        // Try to get from remote URL first
+        const remoteUrl = (0, child_process_1.execSync)('git config --get remote.origin.url', {
+            cwd: repoPath,
+            encoding: 'utf-8',
+        }).trim();
+        if (remoteUrl) {
+            // Extract repo name from URL (e.g., "owner/repo" or just "repo")
+            const match = remoteUrl.match(/([^\/]+\/[^\/]+?)(\.git)?$/) || remoteUrl.match(/([^\/]+?)(\.git)?$/);
+            if (match) {
+                return match[1].replace('.git', '');
+            }
+        }
+    }
+    catch (error) {
+        // If git remote fails, fall back to directory name
+    }
+    // Fallback to directory name
+    return path.basename(path.resolve(repoPath));
+};
+exports.getRepositoryName = getRepositoryName;
+const getRepositoryUrl = (repoPath) => {
+    try {
+        const remoteUrl = (0, child_process_1.execSync)('git config --get remote.origin.url', {
+            cwd: repoPath,
+            encoding: 'utf-8',
+        }).trim();
+        if (remoteUrl) {
+            // Convert SSH URL to HTTPS for display
+            if (remoteUrl.startsWith('git@')) {
+                return remoteUrl
+                    .replace(/^git@([^:]+):/, 'https://$1/')
+                    .replace(/\.git$/, '');
+            }
+            return remoteUrl.replace(/\.git$/, '');
+        }
+    }
+    catch (error) {
+        // No remote URL available
+    }
+    return '';
+};
+exports.getRepositoryUrl = getRepositoryUrl;

package/dist/utils/htmlGenerator.js

@@ -0,0 +1,449 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateHTML = void 0;
+const date_fns_1 = require("date-fns");
+const achievementEngine_1 = require("./achievementEngine");
+const commitQualityAnalyzer_1 = require("./commitQualityAnalyzer");
+const fileHotspotAnalyzer_1 = require("./fileHotspotAnalyzer");
+const impactAnalyzer_1 = require("./impactAnalyzer");
+const knowledgeDistributionAnalyzer_1 = require("./knowledgeDistributionAnalyzer");
+const streakCalculator_1 = require("./streakCalculator");
+const timePatternAnalyzer_1 = require("./timePatternAnalyzer");
+const styleLoader_1 = require("../generators/html/utils/styleLoader");
+const scriptLoader_1 = require("../generators/html/utils/scriptLoader");
+const contributionGraph_1 = require("../generators/html/templates/contributionGraph");
+const streakSection_1 = require("../generators/html/templates/streakSection");
+const timePatternsSection_1 = require("../generators/html/templates/timePatternsSection");
+const commitQualitySection_1 = require("../generators/html/templates/commitQualitySection");
+const achievementsSection_1 = require("../generators/html/templates/achievementsSection");
+const impactSection_1 = require("../generators/html/templates/impactSection");
+const knowledgeSection_1 = require("../generators/html/templates/knowledgeSection");
+const commitMapBuilder_1 = require("../generators/html/utils/commitMapBuilder");
+const developerStatsCalculator_1 = require("../generators/html/utils/developerStatsCalculator");
+const dateRangeCalculator_1 = require("../generators/html/utils/dateRangeCalculator");
+const weekGrouper_1 = require("../generators/html/utils/weekGrouper");
+const colorUtils_1 = require("../generators/html/utils/colorUtils");
+// Helper to format date range for display
+function formatDateRange(start, end) {
+    return `${(0, date_fns_1.format)(start, 'MMM d, yyyy')} – ${(0, date_fns_1.format)(end, 'MMM d, yyyy')}`;
+}
+// Helper to build KPI header
+function buildKPIHeader(totalCommits, qualityScore, currentStreak, activeDayPercentage) {
+    const healthScore = ((qualityScore / 10) * 0.4 + (activeDayPercentage / 100) * 0.3 + Math.min(currentStreak / 30, 1) * 0.3) * 10;
+    return `
+    <header class="kpi-header">
+      <div class="kpi-card">
+        <span class="kpi-label">Total Commits</span>
+        <span class="kpi-value">${totalCommits.toLocaleString()}</span>
+      </div>
+      <div class="kpi-card">
+        <span class="kpi-label">Health Score</span>
+        <span class="kpi-value">${healthScore.toFixed(1)}</span>
+      </div>
+      <div class="kpi-card">
+        <span class="kpi-label">Current Streak</span>
+        <span class="kpi-value">${currentStreak}d</span>
+      </div>
+      <div class="kpi-card">
+        <span class="kpi-label">Quality</span>
+        <span class="kpi-value">${qualityScore.toFixed(1)}</span>
+      </div>
+      <div class="kpi-card">
+        <span class="kpi-label">Active Days</span>
+        <span class="kpi-value">${activeDayPercentage.toFixed(0)}%</span>
+      </div>
+    </header>
+  `;
+}
+// Helper to wrap content in collapsible section
+function wrapInSection(id, title, content, icon = '') {
+    return `
+    <section class="dashboard-section" id="${id}">
+      <header class="section-header" role="button" aria-expanded="true">
+        <h2>${icon ? icon + ' ' : ''}${title}</h2>
+        <span class="collapse-icon">▼</span>
+      </header>
+      <div class="section-content">
+        ${content}
+      </div>
+    </section>
+  `;
+}
+function generateHTML(commits, year, monthsToShow, repoPath, repoName, repoUrl, skipBodyCheck = false, allTime = false, deepAnalysis = false) {
+    // Get current git user
+    const { getCurrentGitUser } = require('./gitParser');
+    const currentUser = getCurrentGitUser(repoPath);
+    // Calculate date ranges
+    const { startDate, endDate, weekStartDate, weekEndDate } = allTime
+        ? (0, dateRangeCalculator_1.calculateDateRangesFromCommits)(commits)
+        : (0, dateRangeCalculator_1.calculateDateRanges)(year, monthsToShow);
+    // Create commit maps for overall and personal commits
+    const { commitMap, commitDetailsMap } = (0, commitMapBuilder_1.createCommitMaps)(commits, startDate, endDate);
+    const personalCommits = commits.filter(c => c.author === currentUser);
+    const { commitMap: personalCommitMap, commitDetailsMap: personalCommitDetailsMap } = (0, commitMapBuilder_1.createCommitMaps)(personalCommits, startDate, endDate);
+    // Calculate per-developer statistics
+    const developerStats = (0, developerStatsCalculator_1.calculateDeveloperStats)(commits, startDate, endDate);
+    // Calculate streak data (overall and personal)
+    const streakData = (0, streakCalculator_1.calculateStreaks)(commits, startDate, endDate);
+    const personalStreakData = (0, streakCalculator_1.calculateStreaks)(personalCommits, startDate, endDate);
+    // Analyze time patterns (overall and personal)
+    const timePattern = (0, timePatternAnalyzer_1.analyzeTimePatterns)(commits, startDate, endDate);
+    const personalTimePattern = (0, timePatternAnalyzer_1.analyzeTimePatterns)(personalCommits, startDate, endDate);
+    // Analyze commit quality (overall and personal)
+    const commitQuality = (0, commitQualityAnalyzer_1.analyzeCommitQuality)(commits, { skipBodyCheck });
+    const personalCommitQuality = (0, commitQualityAnalyzer_1.analyzeCommitQuality)(personalCommits, { skipBodyCheck });
+    // Analyze file hotspots
+    const fileHotspots = (0, fileHotspotAnalyzer_1.analyzeFileHotspots)(repoPath, startDate, endDate);
+    // Analyze impact and knowledge distribution (enterprise insights)
+    const impactAnalysis = (0, impactAnalyzer_1.analyzeImpact)(commits);
+    const knowledgeDistribution = (0, knowledgeDistributionAnalyzer_1.analyzeKnowledgeDistribution)(commits, repoPath, deepAnalysis);
+    const totalCommits = Array.from(commitMap.values()).reduce((sum, count) => sum + count, 0);
+    const totalPersonalCommits = Array.from(personalCommitMap.values()).reduce((sum, count) => sum + count, 0);
+    // Prepare analysis data for achievements (overall and personal)
+    const analysisData = {
+        commits,
+        totalCommits,
+        streakData,
+        timePattern,
+        commitQuality,
+        fileHotspots,
+        dateRange: { start: startDate, end: endDate }
+    };
+    const personalAnalysisData = {
+        commits: personalCommits,
+        totalCommits: totalPersonalCommits,
+        streakData: personalStreakData,
+        timePattern: personalTimePattern,
+        commitQuality: personalCommitQuality,
+        fileHotspots,
+        dateRange: { start: startDate, end: endDate }
+    };
+    // Check achievements
+    const achievementProgress = (0, achievementEngine_1.checkAchievements)(analysisData);
+    const personalAchievementProgress = (0, achievementEngine_1.checkAchievements)(personalAnalysisData);
+    return generateHTMLContent(commitMap, commitDetailsMap, developerStats, streakData, timePattern, commitQuality, fileHotspots, achievementProgress, personalCommitMap, personalCommitDetailsMap, personalStreakData, personalTimePattern, personalCommitQuality, personalAchievementProgress, weekStartDate, weekEndDate, startDate, endDate, repoName, repoUrl, currentUser, skipBodyCheck, impactAnalysis, knowledgeDistribution);
+}
+exports.generateHTML = generateHTML;
+function generatePersonalContent(personalCommitMap, personalCommitDetailsMap, streakData, timePattern, commitQuality, achievementProgress, weekStartDate, weekEndDate, dataStartDate, dataEndDate, currentUser, totalCommits, skipBodyCheck = false) {
+    const weeks = (0, weekGrouper_1.groupDaysIntoWeeks)(weekStartDate, weekEndDate);
+    const dayLabels = (0, weekGrouper_1.getDayLabels)();
+    // Build KPI header for personal stats
+    const kpiHeader = buildKPIHeader(totalCommits, commitQuality.overallScore, streakData.currentStreak.days, streakData.activeDayPercentage);
+    // Generate sections using template builders
+    const contributionGraphHtml = (0, contributionGraph_1.buildContributionGraph)({
+        commitMap: personalCommitMap,
+        commitDetailsMap: personalCommitDetailsMap,
+        weeks,
+        dayLabels,
+        dataStartDate,
+        dataEndDate,
+        totalCommits,
+        title: 'Your contributions',
+        getColorFn: colorUtils_1.getColor
+    });
+    const streakSectionHtml = (0, streakSection_1.buildStreakSection)(streakData);
+    const timePatternsHtml = (0, timePatternsSection_1.buildTimePatternsSection)(timePattern);
+    const commitQualityHtml = (0, commitQualitySection_1.buildCommitQualitySection)(commitQuality, totalCommits, skipBodyCheck);
+    const achievementsHtml = (0, achievementsSection_1.buildAchievementsSection)(achievementProgress);
+    // Combine all sections with collapsible wrappers
+    return `
+    ${kpiHeader}
+    
+    ${wrapInSection('personal-overview', 'Contribution Overview', contributionGraphHtml)}
+    ${wrapInSection('personal-streaks', 'Streak Analysis', streakSectionHtml)}
+    ${wrapInSection('personal-patterns', 'Time Patterns', timePatternsHtml)}
+    ${wrapInSection('personal-quality', 'Commit Quality', commitQualityHtml)}
+    ${wrapInSection('personal-achievements', 'Achievements', achievementsHtml)}
+  `;
+}
+function generateHTMLContent(commitMap, commitDetailsMap, developerStats, streakData, timePattern, commitQuality, fileHotspots, achievementProgress, personalCommitMap, personalCommitDetailsMap, personalStreakData, personalTimePattern, personalCommitQuality, personalAchievementProgress, weekStartDate, weekEndDate, dataStartDate, dataEndDate, repoName, repoUrl, currentUser, skipBodyCheck = false, impactAnalysis, knowledgeDistribution) {
+    const totalPersonalCommits = Array.from(personalCommitMap.values()).reduce((sum, count) => sum + count, 0);
+    const weeks = (0, weekGrouper_1.groupDaysIntoWeeks)(weekStartDate, weekEndDate);
+    // Build month labels and track month boundaries
+    let monthLabels = '';
+    let currentMonth = '';
+    const monthBoundaries = new Set();
+    weeks.forEach((week, weekIndex) => {
+        const firstDayOfWeek = week[0];
+        const monthName = (0, date_fns_1.format)(firstDayOfWeek, 'MMM');
+        if (monthName !== currentMonth) {
+            currentMonth = monthName;
+            if (weekIndex > 0) {
+                monthBoundaries.add(weekIndex);
+            }
+        }
+    });
+    // Build week columns
+    let weekColumns = '';
+    const dayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    weeks.forEach((week, weekIndex) => {
+        let weekColumn = `<div class="graph-column">`;
+        week.forEach((day, dayOfWeek) => {
+            const dateKey = (0, date_fns_1.format)(day, 'yyyy-MM-dd');
+            const count = commitMap.get(dateKey) || 0;
+            const isInRange = day >= dataStartDate && day <= dataEndDate;
+            const color = isInRange ? (0, colorUtils_1.getColor)(count) : 'transparent';
+            const dateStr = (0, date_fns_1.format)(day, 'MMM d, yyyy');
+            const emptyClass = count === 0 ? ' empty' : '';
+            const clickable = count > 0 ? ' clickable' : '';
+            const detailsData = count > 0 ? `data-details='${JSON.stringify(commitDetailsMap.get(dateKey) || [])}'` : '';
+            weekColumn += `<div class="day${emptyClass}${clickable}" style="background-color: ${color};" data-count="${count}" data-date="${dateStr}" ${detailsData}></div>`;
+        });
+        weekColumn += '</div>';
+        weekColumns += weekColumn;
+    });
+    // Build day labels column
+    let dayLabelsHtml = '<div class="day-labels">';
+    dayLabels.forEach((label, index) => {
+        const displayLabel = [1, 3, 5].includes(index) ? label : '';
+        dayLabelsHtml += `<div class="day-label">${displayLabel}</div>`;
+    });
+    dayLabelsHtml += '</div>';
+    // Build month labels header
+    let monthLabelsHtml = '';
+    currentMonth = '';
+    weeks.forEach((week, weekIndex) => {
+        const firstDayOfWeek = week[0];
+        const monthName = (0, date_fns_1.format)(firstDayOfWeek, 'MMM');
+        if (monthName !== currentMonth) {
+            monthLabelsHtml += `<div class="month-label">${monthName}</div>`;
+            currentMonth = monthName;
+        }
+        else {
+            monthLabelsHtml += `<div class="month-label"></div>`;
+        }
+    });
+    const totalCommits = Array.from(commitMap.values()).reduce((sum, count) => sum + count, 0);
+    // Sort developers by commit count
+    const sortedDevelopers = Array.from(developerStats.entries())
+        .sort((a, b) => b[1].commits - a[1].commits);
+    // Generate developer analysis HTML
+    const developerAnalysisHtml = sortedDevelopers.map(([author, stats]) => {
+        const percentage = ((stats.commits / totalCommits) * 100).toFixed(1);
+        const dateRange = stats.firstCommit.toDateString() === stats.lastCommit.toDateString()
+            ? (0, date_fns_1.format)(stats.firstCommit, 'MMM d, yyyy')
+            : `${(0, date_fns_1.format)(stats.firstCommit, 'MMM d, yyyy')} - ${(0, date_fns_1.format)(stats.lastCommit, 'MMM d, yyyy')}`;
+        return `
+      <div class="developer-row">
+        <div class="developer-info">
+          <div class="developer-name">${author}</div>
+          <div class="developer-date-range">${dateRange}</div>
+        </div>
+        <div class="developer-stats">
+          <div class="developer-bar-container">
+            <div class="developer-bar" style="width: ${percentage}%"></div>
+          </div>
+          <div class="developer-count">${stats.commits} commits (${percentage}%)</div>
+        </div>
+      </div>
+    `;
+    }).join('');
+    // Build contribution graph HTML for Overall tab
+    const contributionGraphHtml = `
+    <div class="graph-container">
+      <div class="months">
+        ${monthLabelsHtml}
+      </div>
+      
+      <div class="graph">
+        ${dayLabelsHtml}
+        ${weekColumns}
+      </div>
+      
+      <div class="legend">
+        <span>Less</span>
+        <span class="legend-box" style="background-color: rgba(235, 237, 240, 0.1); border: 1px solid #21262d;"></span>
+        <span class="legend-box" style="background-color: #9be9a8;"></span>
+        <span class="legend-box" style="background-color: #40c463;"></span>
+        <span class="legend-box" style="background-color: #30a14e;"></span>
+        <span class="legend-box" style="background-color: #216e39;"></span>
+        <span>More</span>
+      </div>
+    </div>
+  `;
+    const developerSectionHtml = `
+    <div class="developer-analysis">
+      ${developerAnalysisHtml}
+    </div>
+  `;
+    // Build KPI header for Overall tab
+    const overallKpiHeader = buildKPIHeader(totalCommits, commitQuality.overallScore, streakData.currentStreak.days, streakData.activeDayPercentage);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Git Wrapped - ${repoName}</title>
+  <style>
+    ${(0, styleLoader_1.loadStyles)()}
+  </style>
+</head>
+<body>
+  <!-- Mobile Navigation Toggle -->
+  <button class="mobile-nav-toggle" aria-label="Toggle navigation">
+    <span class="hamburger-icon"></span>
+  </button>
+
+  <div class="dashboard-layout">
+    <!-- Sidebar Navigation -->
+    <nav class="sidebar" role="navigation" aria-label="Main navigation">
+      <div class="sidebar-header">
+        <h2>Git Wrapped</h2>
+        <span class="version">v1.0</span>
+      </div>
+      
+      <div class="nav-section">
+        <div class="nav-section-title">Views</div>
+        <a href="#" class="nav-item active" data-tab="overall">
+          <span class="nav-icon">📊</span>
+          <span class="nav-label">Team Overview</span>
+        </a>
+        <a href="#" class="nav-item" data-tab="personal">
+          <span class="nav-icon">👤</span>
+          <span class="nav-label">Personal Stats</span>
+        </a>
+      </div>
+      
+      <div class="nav-section">
+        <div class="nav-section-title">Quick Jump</div>
+        <a href="#contributions" class="nav-item nav-item-small">
+          <span class="nav-label">Contributions</span>
+        </a>
+        <a href="#personal-streaks" class="nav-item nav-item-small" data-tab="personal">
+          <span class="nav-label">Streaks</span>
+        </a>
+        <a href="#personal-patterns" class="nav-item nav-item-small" data-tab="personal">
+          <span class="nav-label">Patterns</span>
+        </a>
+        <a href="#personal-quality" class="nav-item nav-item-small" data-tab="personal">
+          <span class="nav-label">Quality</span>
+        </a>
+        <a href="#personal-achievements" class="nav-item nav-item-small" data-tab="personal">
+          <span class="nav-label">Achievements</span>
+        </a>
+      </div>
+      
+      <div class="sidebar-footer">
+        <div class="repo-info">
+          <span class="repo-name">${repoName}</span>
+          ${repoUrl ? `<a href="${repoUrl}" target="_blank" class="repo-link">View Repository →</a>` : ''}
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main Content Area -->
+    <main class="main-content">
+      <div class="container">
+        <header class="dashboard-header">
+          <div class="header-left">
+            <h1 class="repo-name">${repoName}</h1>
+          </div>
+          <div class="header-right">
+            <div class="export-controls">
+              <button class="btn btn-secondary btn-sm" data-export="json">Export JSON</button>
+              <button class="btn btn-secondary btn-sm" data-export="csv">Export CSV</button>
+            </div>
+          </div>
+        </header>
+        
+        <div class="filter-bar">
+          <div class="filter-group">
+            <label class="filter-label">Period</label>
+            <span class="filter-value">${formatDateRange(dataStartDate, dataEndDate)}</span>
+          </div>
+          <div class="filter-group">
+            <label class="filter-label">Author</label>
+            <span class="filter-value">${currentUser !== 'Unknown' ? currentUser : 'All Contributors'}</span>
+          </div>
+        </div>
+        
+        <!-- Tab Navigation (kept for backwards compatibility) -->
+        <div class="tab-nav">
+          <button class="tab-button active" data-tab="overall">📊 Team Overview</button>
+          <button class="tab-button" data-tab="personal">👤 Personal</button>
+        </div>
+        
+        <!-- Overall Tab Content -->
+        <div class="tab-content active" id="overall-content">
+          ${overallKpiHeader}
+          
+          ${wrapInSection('contributions', 'Contribution Activity', contributionGraphHtml)}
+          ${wrapInSection('team-developers', 'Developer Contributions', developerSectionHtml)}
+          ${impactAnalysis ? wrapInSection('impact', 'Developer Impact', (0, impactSection_1.buildImpactSection)(impactAnalysis)) : ''}
+          ${knowledgeDistribution ? wrapInSection('knowledge', 'Knowledge Distribution', (0, knowledgeSection_1.buildKnowledgeSection)(knowledgeDistribution)) : ''}
+        </div>
+        <!-- End Overall Tab Content -->
+
+        <!-- Personal Tab Content -->
+        <div class="tab-content" id="personal-content">
+          ${generatePersonalContent(personalCommitMap, personalCommitDetailsMap, personalStreakData, personalTimePattern, personalCommitQuality, personalAchievementProgress, weekStartDate, weekEndDate, dataStartDate, dataEndDate, currentUser, totalPersonalCommits, skipBodyCheck)}
+        </div>
+        <!-- End Personal Tab Content -->
+
+      </div>
+    </main>
+  </div>
+  
+  <div class="tooltip" id="tooltip"></div>
+  
+  <div class="modal" id="modal">
+    <div class="modal-content">
+      <div class="modal-header">
+        <div class="modal-title" id="modal-title"></div>
+        <button class="modal-close" id="modal-close">&times;</button>
+      </div>
+      <div class="commit-list" id="commit-list"></div>
+    </div>
+  </div>
+  
+  <script>
+    // Embed data for export functionality
+    window.__GITWRAPPED_DATA__ = ${JSON.stringify({
+        repository: repoName,
+        period: {
+            start: dataStartDate.toISOString(),
+            end: dataEndDate.toISOString()
+        },
+        author: currentUser,
+        summary: {
+            totalCommits: totalCommits,
+            totalContributors: developerStats.size,
+            activeDays: commitMap.size
+        },
+        streaks: {
+            currentStreak: streakData.currentStreak.days,
+            longestStreak: streakData.longestStreak.days,
+            totalActiveDays: streakData.totalActiveDays,
+            activeDayPercentage: streakData.activeDayPercentage
+        },
+        quality: {
+            overallScore: commitQuality.overallScore,
+            conventionalAdherence: commitQuality.conventionalCommits.adherence,
+            avgSubjectLength: commitQuality.subjectQuality.avgLength
+        },
+        timePattern: {
+            chronotype: timePattern.chronotype,
+            peakHour: timePattern.peakHour.hour,
+            consistency: timePattern.consistency?.score || 0
+        },
+        commits: Array.from(commitDetailsMap.values()).flat().map((c) => ({
+            date: c.date,
+            author: c.author,
+            message: c.message.split('\\n')[0],
+            hash: c.hash
+        })),
+        developerStats: Array.from(developerStats.entries()).map(([name, stats]) => ({
+            name,
+            commits: stats.commits,
+            firstCommit: stats.firstCommit.toISOString(),
+            lastCommit: stats.lastCommit.toISOString()
+        }))
+    })};
+  </script>
+  
+  <script>
+    ${(0, scriptLoader_1.loadScripts)()}
+  </script>
+</body>
+</html>`;
+}