repo-wrapped 0.0.7 → 0.0.9

package/dist/html/htmlDocumentBuilder.js

@@ -0,0 +1,396 @@
+"use strict";
+/**
+ * HTML document builder - assembles the final HTML document.
+ *
+ * @module html/htmlDocumentBuilder
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildHtmlDocument = buildHtmlDocument;
+const date_fns_1 = require("date-fns");
+const package_json_1 = require("../../package.json");
+const styleLoader_1 = require("./shared/styleLoader");
+const scriptLoader_1 = require("./shared/scriptLoader");
+const kpiBuilder_1 = require("./shared/components/kpiBuilder");
+const sectionWrapper_1 = require("./shared/components/sectionWrapper");
+const weekGrouper_1 = require("./shared/weekGrouper");
+const colorUtils_1 = require("./shared/colorUtils");
+const contribution_graph_1 = require("../features/contribution-graph");
+const streaks_1 = require("../features/streaks");
+const time_patterns_1 = require("../features/time-patterns");
+const commit_quality_1 = require("../features/commit-quality");
+const achievements_1 = require("../features/achievements");
+const impact_1 = require("../features/impact");
+const knowledge_1 = require("../features/knowledge");
+const velocity_1 = require("../features/velocity");
+const gaps_1 = require("../features/gaps");
+const comparison_1 = require("../features/comparison");
+const executive_summary_1 = require("../features/executive-summary");
+const team_1 = require("../features/team");
+const events_1 = require("../features/events");
+/**
+ * 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')}`;
+}
+/**
+ * Build the overall contribution graph with month labels.
+ */
+function buildOverallContributionGraph(context, results) {
+    const { dateRange } = context;
+    const { commitMap, commitDetailsMap } = results.overall;
+    const weeks = (0, weekGrouper_1.groupDaysIntoWeeks)(dateRange.weekStart, dateRange.weekEnd);
+    const dayLabels = (0, weekGrouper_1.getDayLabels)();
+    const getColor = (0, colorUtils_1.createDynamicColorFn)(commitMap);
+    // Build month labels
+    let monthLabelsHtml = '';
+    let currentMonth = '';
+    weeks.forEach((week) => {
+        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>`;
+        }
+    });
+    // Build week columns
+    let weekColumns = '';
+    weeks.forEach((week) => {
+        let weekColumn = `<div class="graph-column">`;
+        week.forEach((day) => {
+            const dateKey = (0, date_fns_1.format)(day, 'yyyy-MM-dd');
+            const count = commitMap.get(dateKey) || 0;
+            const isInRange = day >= dateRange.start && day <= dateRange.end;
+            const color = isInRange ? 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 rawCommits = commitDetailsMap.get(dateKey) || [];
+            const sanitizedCommits = rawCommits.map(c => ({
+                ...c,
+                message: c.message
+                    .replace(/[\r\n]+/g, ' ')
+                    .replace(/'/g, '&#39;')
+                    .replace(/"/g, '&quot;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')
+                    .substring(0, 200)
+            }));
+            const detailsData = count > 0 ? `data-details='${JSON.stringify(sanitizedCommits)}'` : '';
+            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
+    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>';
+    return `
+    <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>
+  `;
+}
+/**
+ * Build developer breakdown section.
+ */
+function buildDeveloperSection(developerStats, totalCommits) {
+    const sortedDevelopers = Array.from(developerStats.entries())
+        .sort((a, b) => b[1].commits - a[1].commits);
+    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('');
+    return `<div class="developer-analysis">${developerAnalysisHtml}</div>`;
+}
+/**
+ * Build personal tab content.
+ */
+function buildPersonalContent(context, results, skipBodyCheck) {
+    const { dateRange, currentUser } = context;
+    const { personal } = results;
+    const weeks = (0, weekGrouper_1.groupDaysIntoWeeks)(dateRange.weekStart, dateRange.weekEnd);
+    const dayLabels = (0, weekGrouper_1.getDayLabels)();
+    const kpiHeader = (0, kpiBuilder_1.buildKPIHeader)(personal.totalCommits, personal.commitQuality.overallScore, personal.streakData.currentStreak.days, personal.streakData.activeDayPercentage);
+    const contributionGraphHtml = (0, contribution_graph_1.buildContributionGraph)({
+        commitMap: personal.commitMap,
+        commitDetailsMap: personal.commitDetailsMap,
+        weeks,
+        dayLabels,
+        dataStartDate: dateRange.start,
+        dataEndDate: dateRange.end,
+        totalCommits: personal.totalCommits,
+        title: 'Your contributions',
+        getColorFn: (0, colorUtils_1.createDynamicColorFn)(personal.commitMap)
+    });
+    const streakSectionHtml = (0, streaks_1.buildStreakSection)(personal.streakData);
+    const timePatternsHtml = (0, time_patterns_1.buildTimePatternsSection)(personal.timePattern);
+    const commitQualityHtml = (0, commit_quality_1.buildCommitQualitySection)(personal.commitQuality, personal.totalCommits, skipBodyCheck);
+    const achievementsHtml = (0, achievements_1.buildAchievementsSection)(personal.achievementProgress);
+    return `
+    ${kpiHeader}
+    ${(0, sectionWrapper_1.wrapInSection)('personal-overview', 'Contribution Overview', contributionGraphHtml)}
+    ${(0, sectionWrapper_1.wrapInSection)('personal-streaks', 'Streak Analysis', streakSectionHtml)}
+    ${(0, sectionWrapper_1.wrapInSection)('personal-patterns', 'Time Patterns', timePatternsHtml)}
+    ${(0, sectionWrapper_1.wrapInSection)('personal-quality', 'Commit Quality', commitQualityHtml)}
+    ${(0, sectionWrapper_1.wrapInSection)('personal-achievements', 'Achievements', achievementsHtml)}
+  `;
+}
+/**
+ * Build the overall tab content.
+ */
+function buildOverallContent(context, results) {
+    const { developerStats } = context;
+    const { overall, impactAnalysis, knowledgeDistribution } = results;
+    const kpiHeader = (0, kpiBuilder_1.buildKPIHeader)(overall.totalCommits, overall.commitQuality.overallScore, overall.streakData.currentStreak.days, overall.streakData.activeDayPercentage);
+    const contributionGraphHtml = buildOverallContributionGraph(context, results);
+    const developerSectionHtml = buildDeveloperSection(developerStats, overall.totalCommits);
+    return `
+    ${kpiHeader}
+    ${(0, sectionWrapper_1.wrapInSection)('contributions', 'Contribution Activity', contributionGraphHtml)}
+    ${(0, sectionWrapper_1.wrapInSection)('team-developers', 'Developer Contributions', developerSectionHtml)}
+    ${impactAnalysis ? (0, sectionWrapper_1.wrapInSection)('impact', 'Developer Impact', (0, impact_1.buildImpactSection)(impactAnalysis)) : ''}
+    ${knowledgeDistribution ? (0, sectionWrapper_1.wrapInSection)('knowledge', 'Knowledge Distribution', (0, knowledge_1.buildKnowledgeSection)(knowledgeDistribution)) : ''}
+  `;
+}
+/**
+ * Build the strategic insights (lead dev) tab content.
+ */
+function buildLeadDevContent(results) {
+    const { leadDev } = results;
+    if (!leadDev)
+        return '';
+    const hasContent = leadDev.velocityAnalysis || leadDev.gapAnalysis ||
+        leadDev.rangeComparison || leadDev.executiveSummary ||
+        leadDev.teamAnalysis || (leadDev.events && leadDev.events.length > 0);
+    if (!hasContent)
+        return '';
+    return `
+    ${leadDev.executiveSummary ? (0, sectionWrapper_1.wrapInSection)('executive-summary', 'Executive Summary', (0, executive_summary_1.buildExecutiveSummarySection)(leadDev.executiveSummary), '📋') : ''}
+    ${leadDev.velocityAnalysis ? (0, sectionWrapper_1.wrapInSection)('velocity', 'Velocity Timeline', (0, velocity_1.buildVelocitySection)(leadDev.velocityAnalysis), '📈') : ''}
+    ${leadDev.gapAnalysis ? (0, sectionWrapper_1.wrapInSection)('gaps', 'Gap Analysis', (0, gaps_1.buildGapSection)(leadDev.gapAnalysis), '🚧') : ''}
+    ${leadDev.rangeComparison ? (0, sectionWrapper_1.wrapInSection)('comparison', 'Period Comparison', (0, comparison_1.buildComparisonSection)(leadDev.rangeComparison), '⚖️') : ''}
+    ${leadDev.teamAnalysis ? (0, sectionWrapper_1.wrapInSection)('team-analysis', 'Team Analysis', (0, team_1.buildTeamSection)(leadDev.teamAnalysis), '👥') : ''}
+    ${leadDev.events?.length ? (0, sectionWrapper_1.wrapInSection)('events', 'Event Timeline', (0, events_1.buildEventsSection)(leadDev.events), '📅') : ''}
+  `;
+}
+/**
+ * Build export data for JSON/CSV export.
+ */
+function buildExportData(context, results) {
+    const { repoInfo, currentUser, dateRange, developerStats } = context;
+    const { overall } = results;
+    return {
+        repository: repoInfo.name,
+        period: {
+            start: dateRange.start.toISOString(),
+            end: dateRange.end.toISOString()
+        },
+        author: currentUser,
+        summary: {
+            totalCommits: overall.totalCommits,
+            totalContributors: developerStats.size,
+            activeDays: overall.commitMap.size
+        },
+        streaks: {
+            currentStreak: overall.streakData.currentStreak.days,
+            longestStreak: overall.streakData.longestStreak.days,
+            totalActiveDays: overall.streakData.totalActiveDays,
+            activeDayPercentage: overall.streakData.activeDayPercentage
+        },
+        quality: {
+            overallScore: overall.commitQuality.overallScore,
+            conventionalAdherence: overall.commitQuality.conventionalCommits.adherence,
+            avgSubjectLength: overall.commitQuality.subjectQuality.avgLength
+        },
+        timePattern: {
+            chronotype: overall.timePattern.chronotype,
+            peakHour: overall.timePattern.peakHour.hour,
+            consistency: overall.timePattern.consistency?.score || 0
+        },
+        commits: Array.from(overall.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()
+        }))
+    };
+}
+/**
+ * Build the complete HTML document.
+ */
+function buildHtmlDocument(context, results, skipBodyCheck = false) {
+    const { repoInfo, currentUser, dateRange } = context;
+    const { leadDev } = results;
+    const hasLeadDevContent = leadDev && (leadDev.velocityAnalysis || leadDev.gapAnalysis ||
+        leadDev.rangeComparison || leadDev.executiveSummary ||
+        leadDev.teamAnalysis || (leadDev.events && leadDev.events.length > 0));
+    const overallContent = buildOverallContent(context, results);
+    const personalContent = buildPersonalContent(context, results, skipBodyCheck);
+    const leadDevContent = hasLeadDevContent ? buildLeadDevContent(results) : '';
+    const exportData = buildExportData(context, results);
+    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 - ${repoInfo.name}</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>Repo-Wrapped</h2>
+        <span class="version">v${package_json_1.version}</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-label">Team Overview</span>
+        </a>
+        <a href="#" class="nav-item" data-tab="personal">
+          <span class="nav-label">Personal Stats</span>
+        </a>
+        ${hasLeadDevContent ? `
+        <a href="#" class="nav-item" data-tab="leaddev">
+          <span class="nav-label">Strategic Insights</span>
+        </a>
+        ` : ''}
+      </div>
+      
+      <div class="sidebar-footer">
+        <div class="repo-info">
+          <span class="repo-name">${repoInfo.name}</span>
+          ${repoInfo.url ? `<a href="${repoInfo.url}" 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">${repoInfo.name}</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(dateRange.start, dateRange.end)}</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 -->
+        <div class="tab-nav">
+          <button class="tab-button active" data-tab="overall">📊 Team Overview</button>
+          <button class="tab-button" data-tab="personal">👤 Personal</button>
+          ${hasLeadDevContent ? '<button class="tab-button" data-tab="leaddev">📊 Strategic Insights</button>' : ''}
+        </div>
+        
+        <!-- Overall Tab Content -->
+        <div class="tab-content active" id="overall-content">
+          ${overallContent}
+        </div>
+
+        ${hasLeadDevContent ? `
+        <!-- Lead Developer Tab Content -->
+        <div class="tab-content" id="leaddev-content">
+          ${leadDevContent}
+        </div>
+        ` : ''}
+
+        <!-- Personal Tab Content -->
+        <div class="tab-content" id="personal-content">
+          ${personalContent}
+        </div>
+
+      </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>
+    window.__GITWRAPPED_DATA__ = ${JSON.stringify(exportData)};
+  </script>
+  
+  <script>
+    ${(0, scriptLoader_1.loadScripts)()}
+  </script>
+</body>
+</html>`;
+}

package/dist/html/index.js

@@ -0,0 +1,29 @@
+"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 });
+exports.buildHtmlContext = exports.runAllAnalyzers = exports.buildHtmlDocument = void 0;
+/**
+ * HTML Generation Module
+ * @module html
+ */
+__exportStar(require("./types"), exports);
+__exportStar(require("./shared"), exports);
+var htmlDocumentBuilder_1 = require("./htmlDocumentBuilder");
+Object.defineProperty(exports, "buildHtmlDocument", { enumerable: true, get: function () { return htmlDocumentBuilder_1.buildHtmlDocument; } });
+var analysisRunner_1 = require("./analysisRunner");
+Object.defineProperty(exports, "runAllAnalyzers", { enumerable: true, get: function () { return analysisRunner_1.runAllAnalyzers; } });
+var contextBuilder_1 = require("./shared/contextBuilder");
+Object.defineProperty(exports, "buildHtmlContext", { enumerable: true, get: function () { return contextBuilder_1.buildHtmlContext; } });

package/dist/html/shared/colorUtils.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GITHUB_COLORS = void 0;
+exports.calculateDynamicThresholds = calculateDynamicThresholds;
+exports.createDynamicColorFn = createDynamicColorFn;
+exports.getColor = getColor;
+const constants_1 = require("../../constants");
+Object.defineProperty(exports, "GITHUB_COLORS", { enumerable: true, get: function () { return constants_1.GITHUB_COLORS; } });
+/**
+ * Calculate dynamic thresholds based on the repository's commit distribution.
+ * Uses percentiles to ensure colors adapt to the repo's activity level.
+ */
+function calculateDynamicThresholds(commitMap) {
+    // Get all non-zero counts
+    const counts = Array.from(commitMap.values()).filter(c => c > 0);
+    if (counts.length === 0) {
+        return { l1: 1, l2: 2, l3: 3 };
+    }
+    counts.sort((a, b) => a - b);
+    const percentile = (p) => {
+        const index = Math.ceil((p / 100) * counts.length) - 1;
+        return counts[Math.max(0, index)];
+    };
+    // Use 25th, 50th, 75th percentiles for thresholds
+    const l1 = Math.max(1, percentile(25));
+    const l2 = Math.max(l1 + 1, percentile(50));
+    const l3 = Math.max(l2 + 1, percentile(75));
+    return { l1, l2, l3 };
+}
+/**
+ * Creates a color function with dynamic thresholds based on commit data
+ */
+function createDynamicColorFn(commitMap) {
+    const { l1, l2, l3 } = calculateDynamicThresholds(commitMap);
+    return (count) => {
+        if (count === 0)
+            return constants_1.GITHUB_COLORS.EMPTY;
+        if (count <= l1)
+            return constants_1.GITHUB_COLORS.LEVEL_1;
+        if (count <= l2)
+            return constants_1.GITHUB_COLORS.LEVEL_2;
+        if (count <= l3)
+            return constants_1.GITHUB_COLORS.LEVEL_3;
+        return constants_1.GITHUB_COLORS.LEVEL_4;
+    };
+}
+/**
+ * Gets the color for a given contribution count (uses fixed thresholds - legacy)
+ * @deprecated Use createDynamicColorFn for better scaling
+ */
+function getColor(count) {
+    if (count === 0)
+        return constants_1.GITHUB_COLORS.EMPTY;
+    if (count <= 3)
+        return constants_1.GITHUB_COLORS.LEVEL_1;
+    if (count <= 6)
+        return constants_1.GITHUB_COLORS.LEVEL_2;
+    if (count <= 9)
+        return constants_1.GITHUB_COLORS.LEVEL_3;
+    return constants_1.GITHUB_COLORS.LEVEL_4;
+}

package/dist/html/shared/commitMapBuilder.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCommitMaps = createCommitMaps;
+const date_fns_1 = require("date-fns");
+/**
+ * Creates commit maps from an array of commits within a date range
+ */
+function createCommitMaps(commits, startDate, endDate) {
+    const commitMap = new Map();
+    const commitDetailsMap = new Map();
+    commits.forEach(commit => {
+        const commitDate = new Date(commit.date);
+        if (commitDate >= startDate && commitDate <= endDate) {
+            const dateKey = (0, date_fns_1.format)(commitDate, 'yyyy-MM-dd');
+            commitMap.set(dateKey, (commitMap.get(dateKey) || 0) + 1);
+            if (!commitDetailsMap.has(dateKey)) {
+                commitDetailsMap.set(dateKey, []);
+            }
+            commitDetailsMap.get(dateKey).push(commit);
+        }
+    });
+    return { commitMap, commitDetailsMap };
+}

package/dist/html/shared/components/cardBuilder.js

@@ -0,0 +1,47 @@
+"use strict";
+/**
+ * Shared utility for building consistent stat cards across templates
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildStatCard = buildStatCard;
+exports.buildStatGrid = buildStatGrid;
+exports.buildCardSection = buildCardSection;
+/**
+ * Builds a single stat card with consistent styling
+ */
+function buildStatCard(options) {
+    const { icon, value, label, detail, className = '', valueClass = '' } = options;
+    return `
+    <div class="stat-card-base ${className}">
+      ${icon ? `<div class="stat-icon">${icon}</div>` : ''}
+      <div class="stat-info">
+        <div class="stat-label">${label}</div>
+        <div class="stat-value ${valueClass}">${value}</div>
+        ${detail ? `<div class="stat-detail">${detail}</div>` : ''}
+      </div>
+    </div>
+  `;
+}
+/**
+ * Builds a grid of stat cards
+ */
+function buildStatGrid(options) {
+    return `
+    <div class="stat-grid ${options.className || ''}">
+      ${options.cards.map(card => buildStatCard(card)).join('')}
+    </div>
+  `;
+}
+/**
+ * Builds a card section with title and content
+ */
+function buildCardSection(options) {
+    const { title, content, className = '', icon } = options;
+    const titleContent = icon ? `${icon} ${title}` : title;
+    return `
+    <div class="card-section ${className}">
+      <h3>${titleContent}</h3>
+      ${content}
+    </div>
+  `;
+}

package/dist/html/shared/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapInSection = exports.buildOverallKPIHeader = exports.buildKPIHeaderFromData = exports.buildKPIHeader = exports.calculateHealthScore = exports.buildCardSection = exports.buildStatGrid = exports.buildStatCard = void 0;
+/**
+ * Shared HTML Components
+ * @module html/shared/components
+ */
+var cardBuilder_1 = require("./cardBuilder");
+Object.defineProperty(exports, "buildStatCard", { enumerable: true, get: function () { return cardBuilder_1.buildStatCard; } });
+Object.defineProperty(exports, "buildStatGrid", { enumerable: true, get: function () { return cardBuilder_1.buildStatGrid; } });
+Object.defineProperty(exports, "buildCardSection", { enumerable: true, get: function () { return cardBuilder_1.buildCardSection; } });
+var kpiBuilder_1 = require("./kpiBuilder");
+Object.defineProperty(exports, "calculateHealthScore", { enumerable: true, get: function () { return kpiBuilder_1.calculateHealthScore; } });
+Object.defineProperty(exports, "buildKPIHeader", { enumerable: true, get: function () { return kpiBuilder_1.buildKPIHeader; } });
+Object.defineProperty(exports, "buildKPIHeaderFromData", { enumerable: true, get: function () { return kpiBuilder_1.buildKPIHeaderFromData; } });
+Object.defineProperty(exports, "buildOverallKPIHeader", { enumerable: true, get: function () { return kpiBuilder_1.buildOverallKPIHeader; } });
+var sectionWrapper_1 = require("./sectionWrapper");
+Object.defineProperty(exports, "wrapInSection", { enumerable: true, get: function () { return sectionWrapper_1.wrapInSection; } });

package/dist/html/shared/components/kpiBuilder.js

@@ -0,0 +1,76 @@
+"use strict";
+/**
+ * KPI header building utilities.
+ *
+ * @module html/shared/components/kpiBuilder
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateHealthScore = calculateHealthScore;
+exports.buildKPIHeader = buildKPIHeader;
+exports.buildKPIHeaderFromData = buildKPIHeaderFromData;
+exports.buildOverallKPIHeader = buildOverallKPIHeader;
+/**
+ * Build a KPI header card.
+ */
+function buildKpiCard(label, value) {
+    return `
+    <div class="kpi-card">
+      <span class="kpi-label">${label}</span>
+      <span class="kpi-value">${value}</span>
+    </div>
+  `;
+}
+/**
+ * Calculate a health score from various metrics.
+ *
+ * @param qualityScore - Commit quality score (0-10)
+ * @param activeDayPercentage - Percentage of active days (0-100)
+ * @param currentStreak - Current streak in days
+ * @returns Health score (0-10)
+ */
+function calculateHealthScore(qualityScore, activeDayPercentage, currentStreak) {
+    return ((qualityScore / 10) * 0.4 +
+        (activeDayPercentage / 100) * 0.3 +
+        Math.min(currentStreak / 30, 1) * 0.3) * 10;
+}
+/**
+ * Build a KPI header with standard metrics.
+ *
+ * @param totalCommits - Total number of commits
+ * @param qualityScore - Commit quality score (0-10)
+ * @param currentStreak - Current streak in days
+ * @param activeDayPercentage - Percentage of active days
+ * @returns HTML string for the KPI header
+ */
+function buildKPIHeader(totalCommits, qualityScore, currentStreak, activeDayPercentage) {
+    const healthScore = calculateHealthScore(qualityScore, activeDayPercentage, currentStreak);
+    return `
+    <header class="kpi-header">
+      ${buildKpiCard('Total Commits', totalCommits.toLocaleString())}
+      ${buildKpiCard('Health Score', healthScore.toFixed(1))}
+      ${buildKpiCard('Current Streak', `${currentStreak}d`)}
+      ${buildKpiCard('Quality', qualityScore.toFixed(1))}
+      ${buildKpiCard('Active Days', `${activeDayPercentage.toFixed(0)}%`)}
+    </header>
+  `;
+}
+/**
+ * Build a KPI header from streak and quality data.
+ * Convenience wrapper for common use case.
+ */
+function buildKPIHeaderFromData(totalCommits, streakData, commitQuality) {
+    return buildKPIHeader(totalCommits, commitQuality.overallScore, streakData.currentStreak.days, streakData.activeDayPercentage);
+}
+/**
+ * Build an overview KPI header for team/overall view.
+ */
+function buildOverallKPIHeader(totalCommits, developerCount, activeDays, qualityScore) {
+    return `
+    <header class="kpi-header">
+      ${buildKpiCard('Total Commits', totalCommits.toLocaleString())}
+      ${buildKpiCard('Contributors', developerCount.toString())}
+      ${buildKpiCard('Active Days', activeDays.toString())}
+      ${buildKpiCard('Quality Score', qualityScore.toFixed(1))}
+    </header>
+  `;
+}