repo-wrapped 0.0.6 → 0.0.7

package/dist/generators/html/templates/comparisonSection.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildComparisonSection = buildComparisonSection;
+const date_fns_1 = require("date-fns");
+function buildComparisonSection(comparison) {
+    const { range1, range2, changes, summary } = comparison;
+    return `
+    <div class="comparison-section">
+      <h2>📊 Period Comparison</h2>
+      
+      <div class="comparison-header">
+        <div class="period-label period-1">
+          <span class="period-name">${range1.label}</span>
+          <span class="period-dates">${(0, date_fns_1.format)(range1.start, 'MMM d, yyyy')} - ${(0, date_fns_1.format)(range1.end, 'MMM d, yyyy')}</span>
+        </div>
+        <div class="vs-divider">VS</div>
+        <div class="period-label period-2">
+          <span class="period-name">${range2.label}</span>
+          <span class="period-dates">${(0, date_fns_1.format)(range2.start, 'MMM d, yyyy')} - ${(0, date_fns_1.format)(range2.end, 'MMM d, yyyy')}</span>
+        </div>
+      </div>
+      
+      <div class="comparison-summary">
+        <p>${summary}</p>
+      </div>
+      
+      <div class="comparison-grid">
+        ${buildComparisonCard('Commits', range1.metrics.totalCommits, range2.metrics.totalCommits, changes.commits, '📝')}
+        ${buildComparisonCard('Velocity', range1.metrics.commitsPerWeek, range2.metrics.commitsPerWeek, changes.velocity, '🚀', '/week')}
+        ${buildComparisonCard('Quality', range1.metrics.qualityScore, range2.metrics.qualityScore, changes.quality, '✨', '/10')}
+        ${buildComparisonCard('Active Days', range1.metrics.activeDays, range2.metrics.activeDays, changes.activeDays, '📅')}
+        ${buildComparisonCard('Contributors', range1.metrics.totalAuthors, range2.metrics.totalAuthors, changes.authors, '👥')}
+      </div>
+      
+      ${buildTypeDistributionComparison(range1, range2)}
+    </div>
+  `;
+}
+function buildComparisonCard(label, value1, value2, change, emoji, suffix = '') {
+    const trendClass = change.trend === 'up' ? 'positive' : change.trend === 'down' ? 'negative' : 'neutral';
+    const trendArrow = change.trend === 'up' ? '↑' : change.trend === 'down' ? '↓' : '→';
+    const sign = change.percentage >= 0 ? '+' : '';
+    return `
+    <div class="comparison-card">
+      <div class="card-header">
+        <span class="card-emoji">${emoji}</span>
+        <span class="card-label">${label}</span>
+      </div>
+      <div class="card-values">
+        <div class="value-box period-1">
+          <span class="value">${value1}${suffix}</span>
+        </div>
+        <div class="change-indicator ${trendClass}">
+          <span class="change-arrow">${trendArrow}</span>
+          <span class="change-percent">${sign}${change.percentage}%</span>
+        </div>
+        <div class="value-box period-2">
+          <span class="value">${value2}${suffix}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+function buildTypeDistributionComparison(range1, range2) {
+    const types = ['feat', 'fix', 'docs', 'refactor', 'test', 'chore', 'other'];
+    const typeLabels = {
+        feat: 'Features',
+        fix: 'Fixes',
+        docs: 'Docs',
+        refactor: 'Refactor',
+        test: 'Tests',
+        chore: 'Chores',
+        other: 'Other',
+    };
+    const typeColors = {
+        feat: '#69db7c',
+        fix: '#ff6b6b',
+        docs: '#4dabf7',
+        refactor: '#ffa94d',
+        test: '#da77f2',
+        chore: '#868e96',
+        other: '#495057',
+    };
+    const total1 = Object.values(range1.metrics.commitsByType).reduce((a, b) => a + b, 0) || 1;
+    const total2 = Object.values(range2.metrics.commitsByType).reduce((a, b) => a + b, 0) || 1;
+    const bars = types.map(type => {
+        const count1 = range1.metrics.commitsByType[type] || 0;
+        const count2 = range2.metrics.commitsByType[type] || 0;
+        const pct1 = Math.round((count1 / total1) * 100);
+        const pct2 = Math.round((count2 / total2) * 100);
+        return `
+      <div class="type-row">
+        <div class="type-label" style="color: ${typeColors[type]}">${typeLabels[type]}</div>
+        <div class="type-bars">
+          <div class="bar-container period-1">
+            <div class="bar" style="width: ${pct1}%; background: ${typeColors[type]}"></div>
+            <span class="bar-value">${count1} (${pct1}%)</span>
+          </div>
+          <div class="bar-container period-2">
+            <div class="bar" style="width: ${pct2}%; background: ${typeColors[type]}"></div>
+            <span class="bar-value">${count2} (${pct2}%)</span>
+          </div>
+        </div>
+      </div>
+    `;
+    }).join('');
+    return `
+    <div class="type-distribution-comparison">
+      <h3>Commit Type Distribution</h3>
+      <div class="distribution-legend">
+        <span class="legend-item period-1">${range1.label}</span>
+        <span class="legend-item period-2">${range2.label}</span>
+      </div>
+      <div class="type-bars-container">
+        ${bars}
+      </div>
+    </div>
+  `;
+}

package/dist/generators/html/templates/eventsSection.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildEventsSection = buildEventsSection;
+const date_fns_1 = require("date-fns");
+const EVENT_ICONS = {
+    disruption: '⚠️',
+    attrition: '👋',
+    growth: '🌱',
+    release: '🚀',
+    incident: '🔥',
+    external: '📅',
+    custom: '📌'
+};
+const EVENT_COLORS = {
+    disruption: '#f59e0b',
+    attrition: '#ef4444',
+    growth: '#10b981',
+    release: '#3b82f6',
+    incident: '#dc2626',
+    external: '#6b7280',
+    custom: '#8b5cf6'
+};
+function buildEventsSection(events) {
+    if (!events || events.length === 0) {
+        return '<p class="no-data">No events annotated</p>';
+    }
+    const sortedEvents = [...events].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+    return `
+    <div class="events-section">
+      <!-- Event Legend -->
+      <div class="events-legend">
+        ${Object.entries(EVENT_ICONS).map(([type, icon]) => `
+          <span class="legend-item">
+            <span class="event-icon">${icon}</span>
+            <span class="legend-label">${type}</span>
+          </span>
+        `).join('')}
+      </div>
+
+      <!-- Event Stats Summary -->
+      <div class="events-summary">
+        <div class="summary-stat">
+          <span class="stat-value">${events.length}</span>
+          <span class="stat-label">Total Events</span>
+        </div>
+        ${buildEventTypeCounts(events)}
+      </div>
+
+      <!-- Events Timeline -->
+      <div class="events-timeline">
+        ${sortedEvents.map(event => buildEventCard(event)).join('')}
+      </div>
+    </div>
+  `;
+}
+function buildEventTypeCounts(events) {
+    const counts = events.reduce((acc, e) => {
+        acc[e.type] = (acc[e.type] || 0) + 1;
+        return acc;
+    }, {});
+    const topTypes = Object.entries(counts)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 3);
+    return topTypes.map(([type, count]) => `
+    <div class="summary-stat">
+      <span class="stat-value">${EVENT_ICONS[type] || '📌'} ${count}</span>
+      <span class="stat-label">${type}</span>
+    </div>
+  `).join('');
+}
+function buildEventCard(event) {
+    const icon = EVENT_ICONS[event.type] || '📌';
+    const color = EVENT_COLORS[event.type] || '#6b7280';
+    const dateStr = (0, date_fns_1.format)(new Date(event.date), 'MMM d, yyyy');
+    let correlationHtml = '';
+    if (event.correlation) {
+        const { velocityChange, qualityChange, activeAuthorsChange } = event.correlation.impact;
+        correlationHtml = `
+      <div class="event-correlation">
+        <div class="correlation-metrics">
+          <div class="correlation-metric ${velocityChange >= 0 ? 'positive' : 'negative'}">
+            <span class="metric-label">Velocity</span>
+            <span class="metric-value">${velocityChange >= 0 ? '+' : ''}${velocityChange.toFixed(0)}%</span>
+          </div>
+          <div class="correlation-metric ${qualityChange >= 0 ? 'positive' : 'negative'}">
+            <span class="metric-label">Quality</span>
+            <span class="metric-value">${qualityChange >= 0 ? '+' : ''}${qualityChange.toFixed(1)}</span>
+          </div>
+          <div class="correlation-metric ${activeAuthorsChange >= 0 ? 'positive' : 'negative'}">
+            <span class="metric-label">Contributors</span>
+            <span class="metric-value">${activeAuthorsChange >= 0 ? '+' : ''}${activeAuthorsChange}</span>
+          </div>
+        </div>
+        <div class="correlation-assessment">
+          <span class="assessment-icon">💡</span>
+          ${event.correlation.assessment}
+        </div>
+      </div>
+    `;
+    }
+    return `
+    <div class="event-card" style="--event-color: ${color}">
+      <div class="event-header">
+        <span class="event-icon">${icon}</span>
+        <span class="event-date">${dateStr}</span>
+        <span class="event-type-badge">${event.type}</span>
+      </div>
+      <div class="event-label">${event.label}</div>
+      ${event.description ? `<div class="event-description">${event.description}</div>` : ''}
+      ${correlationHtml}
+    </div>
+  `;
+}

package/dist/generators/html/templates/executiveSummarySection.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildExecutiveSummarySection = buildExecutiveSummarySection;
+const date_fns_1 = require("date-fns");
+function buildExecutiveSummarySection(summary) {
+    return `
+    <div class="executive-summary-section">
+      <div class="executive-header">
+        <h2>📊 Executive Summary</h2>
+        <div class="summary-meta">
+          <span class="repo-name">${summary.repoName}</span>
+          <span class="period">${(0, date_fns_1.format)(summary.period.start, 'MMM d, yyyy')} - ${(0, date_fns_1.format)(summary.period.end, 'MMM d, yyyy')}</span>
+        </div>
+      </div>
+      
+      <div class="kpi-grid">
+        ${summary.kpis.map(kpi => buildKPICard(kpi)).join('')}
+      </div>
+      
+      <div class="insights-risks-grid">
+        <div class="insights-column">
+          <h3>💡 Key Insights</h3>
+          <div class="insights-list">
+            ${summary.keyInsights.map(insight => `
+              <div class="insight-item ${insight.type}">
+                <span class="insight-icon">${insight.type === 'positive' ? '✅' : insight.type === 'negative' ? '⚠️' : 'ℹ️'}</span>
+                <span class="insight-text">${insight.insight}</span>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+        
+        <div class="risks-column">
+          <h3>🚨 Risk Assessment</h3>
+          <div class="risks-list">
+            ${summary.risks.length > 0 ? summary.risks.map(risk => `
+              <div class="risk-item ${risk.level}">
+                <span class="risk-badge">${risk.level.toUpperCase()}</span>
+                <div class="risk-content">
+                  <span class="risk-category">${risk.category}</span>
+                  <span class="risk-description">${risk.description}</span>
+                </div>
+              </div>
+            `).join('') : '<div class="no-risks">No significant risks identified</div>'}
+          </div>
+        </div>
+      </div>
+      
+      <div class="recommendations-section">
+        <h3>📋 Recommendations</h3>
+        <ol class="recommendations-list">
+          ${summary.recommendations.map(rec => `<li>${rec}</li>`).join('')}
+        </ol>
+      </div>
+      
+      <div class="summary-footer">
+        Generated: ${(0, date_fns_1.format)(summary.generatedAt, 'MMM d, yyyy HH:mm')}
+      </div>
+    </div>
+  `;
+}
+function buildKPICard(kpi) {
+    const statusColors = {
+        green: '#69db7c',
+        yellow: '#ffd43b',
+        red: '#ff6b6b',
+    };
+    const trendArrow = kpi.trend === 'up' ? '↑' : kpi.trend === 'down' ? '↓' : '→';
+    const trendClass = kpi.trend === 'up' ? 'positive' : kpi.trend === 'down' ? 'negative' : 'neutral';
+    return `
+    <div class="kpi-card" style="--status-color: ${statusColors[kpi.status]}">
+      <div class="kpi-status-indicator" title="${kpi.status}"></div>
+      <div class="kpi-content">
+        <div class="kpi-label">${kpi.name}</div>
+        <div class="kpi-value">${kpi.value}</div>
+        <div class="kpi-trend ${trendClass}">
+          <span class="trend-arrow">${trendArrow}</span>
+          <span class="trend-value">${kpi.trendValue}</span>
+        </div>
+        ${kpi.benchmark ? `<div class="kpi-benchmark">${kpi.benchmark}</div>` : ''}
+      </div>
+    </div>
+  `;
+}

package/dist/generators/html/templates/gapSection.js

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildGapSection = buildGapSection;
+const date_fns_1 = require("date-fns");
+function buildGapSection(gapAnalysis) {
+    const statsHtml = buildGapStats(gapAnalysis);
+    const timelineHtml = buildGapTimeline(gapAnalysis);
+    const gapsListHtml = buildGapsList(gapAnalysis.gaps);
+    return `
+    <div class="gap-section">
+      <h2>🕳️ Gap & Blocker Analysis</h2>
+      
+      ${statsHtml}
+      
+      ${timelineHtml}
+      
+      ${gapsListHtml}
+    </div>
+  `;
+}
+function buildGapStats(gapAnalysis) {
+    const riskColors = {
+        low: '#69db7c',
+        medium: '#ffd43b',
+        high: '#ff922b',
+        critical: '#ff6b6b',
+    };
+    const riskEmoji = {
+        low: '🟢',
+        medium: '🟡',
+        high: '🟠',
+        critical: '🔴',
+    };
+    return `
+    <div class="gap-stats">
+      <div class="gap-stat-card">
+        <div class="stat-icon">🕳️</div>
+        <div class="stat-info">
+          <div class="stat-label">Total Gaps</div>
+          <div class="stat-value">${gapAnalysis.gaps.length}</div>
+          <div class="stat-detail">${gapAnalysis.gapFrequency}/month avg</div>
+        </div>
+      </div>
+      <div class="gap-stat-card">
+        <div class="stat-icon">📅</div>
+        <div class="stat-info">
+          <div class="stat-label">Gap Days</div>
+          <div class="stat-value">${gapAnalysis.totalGapDays}</div>
+          <div class="stat-detail">${gapAnalysis.percentageOfPeriodInGaps}% of period</div>
+        </div>
+      </div>
+      <div class="gap-stat-card">
+        <div class="stat-icon">⏱️</div>
+        <div class="stat-info">
+          <div class="stat-label">Longest Gap</div>
+          <div class="stat-value">${gapAnalysis.longestGap?.durationDays || 0} days</div>
+          <div class="stat-detail">avg: ${gapAnalysis.averageGapLength} days</div>
+        </div>
+      </div>
+      <div class="gap-stat-card risk-card" style="--risk-color: ${riskColors[gapAnalysis.riskLevel]}">
+        <div class="stat-icon">${riskEmoji[gapAnalysis.riskLevel]}</div>
+        <div class="stat-info">
+          <div class="stat-label">Risk Level</div>
+          <div class="stat-value risk-${gapAnalysis.riskLevel}">${gapAnalysis.riskLevel.toUpperCase()}</div>
+        </div>
+      </div>
+    </div>
+    
+    ${gapAnalysis.riskFactors.length > 0 ? `
+      <div class="risk-factors">
+        <h4>Risk Factors</h4>
+        <ul>
+          ${gapAnalysis.riskFactors.map(f => `<li>${f}</li>`).join('')}
+        </ul>
+      </div>
+    ` : ''}
+  `;
+}
+function buildGapTimeline(gapAnalysis) {
+    if (gapAnalysis.gaps.length === 0) {
+        return `
+      <div class="gap-timeline-container">
+        <h3>Activity Timeline</h3>
+        <div class="no-gaps-message">
+          <span class="success-icon">✅</span>
+          <span>No significant activity gaps detected</span>
+        </div>
+      </div>
+    `;
+    }
+    // Find the full date range
+    const allDates = gapAnalysis.gaps.flatMap(g => [g.start, g.end]);
+    const minDate = new Date(Math.min(...allDates.map(d => d.getTime())));
+    const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())));
+    const totalDays = Math.ceil((maxDate.getTime() - minDate.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+    if (totalDays <= 0) {
+        return '';
+    }
+    // Build gap segments
+    const segments = gapAnalysis.gaps.map(gap => {
+        const startOffset = Math.ceil((gap.start.getTime() - minDate.getTime()) / (1000 * 60 * 60 * 24));
+        const width = gap.durationDays;
+        const leftPercent = (startOffset / totalDays) * 100;
+        const widthPercent = (width / totalDays) * 100;
+        const typeClass = gap.possibleType === 'blocker' ? 'blocker' :
+            gap.possibleType === 'vacation' ? 'vacation' :
+                gap.possibleType === 'holiday' ? 'holiday' : 'unknown';
+        return `
+      <div class="gap-segment ${typeClass}" 
+           style="left: ${leftPercent}%; width: ${widthPercent}%"
+           title="${gap.durationDays} days - ${gap.possibleType}">
+      </div>
+    `;
+    }).join('');
+    return `
+    <div class="gap-timeline-container">
+      <h3>Activity Timeline</h3>
+      <div class="gap-timeline">
+        <div class="timeline-track">
+          ${segments}
+        </div>
+        <div class="timeline-labels">
+          <span>${(0, date_fns_1.format)(minDate, 'MMM d, yyyy')}</span>
+          <span>${(0, date_fns_1.format)(maxDate, 'MMM d, yyyy')}</span>
+        </div>
+      </div>
+      <div class="timeline-legend">
+        <span class="legend-item"><span class="legend-color blocker"></span> Potential Blocker</span>
+        <span class="legend-item"><span class="legend-color vacation"></span> Vacation</span>
+        <span class="legend-item"><span class="legend-color holiday"></span> Holiday</span>
+        <span class="legend-item"><span class="legend-color unknown"></span> Unknown</span>
+      </div>
+    </div>
+  `;
+}
+function buildGapsList(gaps) {
+    if (gaps.length === 0) {
+        return '';
+    }
+    // Sort by duration descending, take top 5
+    const sortedGaps = [...gaps].sort((a, b) => b.durationDays - a.durationDays).slice(0, 5);
+    const gapItems = sortedGaps.map(gap => {
+        const typeEmoji = {
+            blocker: '🚧',
+            vacation: '🏖️',
+            holiday: '🎄',
+            weekend: '📅',
+            unknown: '❓',
+        };
+        return `
+      <div class="gap-item">
+        <div class="gap-item-header">
+          <span class="gap-type-icon">${typeEmoji[gap.possibleType]}</span>
+          <span class="gap-duration">${gap.durationDays} days</span>
+          <span class="gap-type-badge ${gap.possibleType}">${gap.possibleType}</span>
+        </div>
+        <div class="gap-dates">
+          ${(0, date_fns_1.format)(gap.start, 'MMM d')} - ${(0, date_fns_1.format)(gap.end, 'MMM d, yyyy')}
+        </div>
+        <div class="gap-context">
+          ${gap.commitBefore ? `
+            <div class="context-item before">
+              <span class="context-label">Before:</span>
+              <span class="context-message">"${truncate(gap.commitBefore.message, 50)}"</span>
+            </div>
+          ` : ''}
+          ${gap.commitAfter ? `
+            <div class="context-item after">
+              <span class="context-label">After:</span>
+              <span class="context-message">"${truncate(gap.commitAfter.message, 50)}"</span>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+    }).join('');
+    return `
+    <div class="gaps-list-section">
+      <h3>Top Gaps by Duration</h3>
+      <div class="gaps-list">
+        ${gapItems}
+      </div>
+    </div>
+  `;
+}
+function truncate(str, maxLength) {
+    if (str.length <= maxLength)
+        return str;
+    return str.substring(0, maxLength - 3) + '...';
+}

package/dist/generators/html/templates/teamSection.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTeamSection = buildTeamSection;
+/**
+ * Builds the HTML section for team analysis visualization
+ */
+function buildTeamSection(analysis) {
+    if (!analysis || analysis.members.length === 0) {
+        return '<p class="no-data">No team data available</p>';
+    }
+    const { teamMetrics, memberBreakdown, loadDistribution } = analysis;
+    // Build summary cards
+    const summaryHtml = buildSummaryCards(teamMetrics, analysis.members.length);
+    // Build load distribution indicator
+    const loadDistHtml = buildLoadDistribution(loadDistribution);
+    // Build member breakdown
+    const membersHtml = buildMemberList(memberBreakdown);
+    // Build insights
+    const insightsHtml = buildInsights(loadDistribution.insights);
+    return `
+    <div class="team-section">
+      ${summaryHtml}
+      ${loadDistHtml}
+      ${membersHtml}
+      ${insightsHtml}
+    </div>
+  `;
+}
+function buildSummaryCards(metrics, memberCount) {
+    return `
+    <div class="team-summary">
+      <div class="team-stat-card">
+        <span class="stat-value">${metrics.totalCommits.toLocaleString()}</span>
+        <span class="stat-label">Total Commits</span>
+      </div>
+      <div class="team-stat-card">
+        <span class="stat-value">${memberCount}</span>
+        <span class="stat-label">Team Members</span>
+      </div>
+      <div class="team-stat-card">
+        <span class="stat-value">${metrics.commitsPerMember.toFixed(1)}</span>
+        <span class="stat-label">Commits/Member</span>
+      </div>
+      <div class="team-stat-card">
+        <span class="stat-value">${metrics.activeDays}</span>
+        <span class="stat-label">Active Days</span>
+      </div>
+      <div class="team-stat-card">
+        <span class="stat-value">${metrics.qualityScore.toFixed(1)}</span>
+        <span class="stat-label">Avg Quality</span>
+      </div>
+    </div>
+  `;
+}
+function buildLoadDistribution(loadDist) {
+    const gini = loadDist.giniCoefficient;
+    const percentage = Math.round(gini * 100);
+    // Color based on assessment
+    let colorClass = 'balanced';
+    let statusIcon = '✅';
+    if (loadDist.assessment === 'moderate-imbalance') {
+        colorClass = 'moderate';
+        statusIcon = '⚠️';
+    }
+    else if (loadDist.assessment === 'high-imbalance') {
+        colorClass = 'imbalanced';
+        statusIcon = '🚨';
+    }
+    const assessmentLabel = loadDist.assessment.replace('-', ' ').replace(/\b\w/g, c => c.toUpperCase());
+    return `
+    <div class="load-distribution">
+      <h3>Load Distribution</h3>
+      <div class="gini-container">
+        <div class="gini-bar-bg">
+          <div class="gini-bar ${colorClass}" style="width: ${percentage}%"></div>
+        </div>
+        <div class="gini-info">
+          <span class="gini-value">Gini: ${gini.toFixed(2)}</span>
+          <span class="gini-assessment ${colorClass}">${statusIcon} ${assessmentLabel}</span>
+        </div>
+      </div>
+      <p class="gini-explanation">
+        ${gini < 0.3 ? 'Work is evenly distributed across the team.' :
+        gini < 0.5 ? 'Some team members are contributing more than others.' :
+            'Work is concentrated among a few contributors. Consider redistributing.'}
+      </p>
+    </div>
+  `;
+}
+function buildMemberList(members) {
+    // Sort by commits descending
+    const sorted = [...members].sort((a, b) => b.commits - a.commits);
+    const maxCommits = sorted[0]?.commits || 1;
+    const membersHtml = sorted.map((member, index) => {
+        const barWidth = (member.commits / maxCommits) * 100;
+        const rankBadge = index === 0 ? '👑' : index < 3 ? '⭐' : '';
+        return `
+      <div class="member-card">
+        <div class="member-rank">${index + 1}</div>
+        <div class="member-info">
+          <div class="member-name">${rankBadge} ${escapeHtml(member.author)}</div>
+          <div class="member-areas">${member.topAreas.slice(0, 3).map(a => `<span class="area-tag">${escapeHtml(a)}</span>`).join('')}</div>
+        </div>
+        <div class="member-bar-container">
+          <div class="member-bar" style="width: ${barWidth}%"></div>
+        </div>
+        <div class="member-stats">
+          <span class="member-commits">${member.commits}</span>
+          <span class="member-percentage">(${member.percentage.toFixed(1)}%)</span>
+        </div>
+        <div class="member-quality" title="Commit quality score">
+          <span class="quality-badge">${member.qualityScore.toFixed(1)}</span>
+        </div>
+      </div>
+    `;
+    }).join('');
+    return `
+    <div class="member-breakdown">
+      <h3>Team Members</h3>
+      <div class="member-list">
+        ${membersHtml}
+      </div>
+    </div>
+  `;
+}
+function buildInsights(insights) {
+    if (!insights || insights.length === 0) {
+        return '';
+    }
+    return `
+    <div class="team-insights">
+      <h3>Insights</h3>
+      <ul class="insights-list">
+        ${insights.map(insight => `<li class="insight-item">💡 ${escapeHtml(insight)}</li>`).join('')}
+      </ul>
+    </div>
+  `;
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}