repo-wrapped 0.0.6 → 0.0.9

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

@@ -44,9 +44,9 @@ function buildCommitQualitySection(commitQuality, totalCommits, skipBodyCheck =
           <div class="quality-metric">
             <div class="metric-label">${getQualityIndicator(commitQuality.subjectQuality.score, 7)} Subject Quality</div>
             <div class="metric-bar-container">
-              <div class="metric-bar" style="width: ${(commitQuality.subjectQuality.avgLength / 72) * 100}%"></div>
+              <div class="metric-bar" style="width: ${commitQuality.subjectQuality.score * 10}%"></div>
             </div>
-            <div class="metric-value">${commitQuality.subjectQuality.score.toFixed(1)}/10 (avg ${commitQuality.subjectQuality.avgLength} chars)</div>
+            <div class="metric-value">${commitQuality.subjectQuality.score.toFixed(1)}/10</div>
           </div>
           
           ${!skipBodyCheck ? `
@@ -61,6 +61,32 @@ function buildCommitQualitySection(commitQuality, totalCommits, skipBodyCheck =
         </div>
       </div>
       
+      <div class="subject-quality-breakdown">
+        <h3>Subject Quality Breakdown</h3>
+        <div class="subject-metrics-grid">
+          <div class="subject-metric">
+            <span class="metric-icon">${commitQuality.conventionalCommits.adherence >= 50 ? '✅' : '⚠️'}</span>
+            <span class="metric-name">Semantic Format</span>
+            <span class="metric-detail">${commitQuality.conventionalCommits.adherence.toFixed(0)}% follow conventional commits</span>
+          </div>
+          <div class="subject-metric">
+            <span class="metric-icon">${((totalCommits - commitQuality.subjectQuality.tooShort - commitQuality.subjectQuality.tooLong) / totalCommits) >= 0.8 ? '✅' : '⚠️'}</span>
+            <span class="metric-name">Proper Length</span>
+            <span class="metric-detail">${Math.round(((totalCommits - commitQuality.subjectQuality.tooShort - commitQuality.subjectQuality.tooLong) / totalCommits) * 100)}% within 10-72 chars</span>
+          </div>
+          <div class="subject-metric">
+            <span class="metric-icon">${(commitQuality.codeHygiene.vague + commitQuality.codeHygiene.workInProgress + commitQuality.codeHygiene.singleChar) === 0 ? '✅' : '⚠️'}</span>
+            <span class="metric-name">Quality Messages</span>
+            <span class="metric-detail">${commitQuality.codeHygiene.vague + commitQuality.codeHygiene.workInProgress + commitQuality.codeHygiene.singleChar} low-effort commits</span>
+          </div>
+          <div class="subject-metric">
+            <span class="metric-icon">${commitQuality.subjectQuality.imperativeMood / totalCommits >= 0.7 ? '✅' : '⚠️'}</span>
+            <span class="metric-name">Imperative Mood</span>
+            <span class="metric-detail">${Math.round((commitQuality.subjectQuality.imperativeMood / totalCommits) * 100)}% use imperative verbs</span>
+          </div>
+        </div>
+      </div>
+      
       ${Object.keys(commitQuality.conventionalCommits.types).length > 0 ? `
         <div class="commit-types-chart">
           <h3>Commit Type Distribution</h3>

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,80 @@
+"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>
+      
+      <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/impactSection.js

@@ -11,7 +11,8 @@ function buildImpactSection(impact) {
     <div class="impact-section">
       <h2>Impact Analysis</h2>
       
-      <div class="impact-overview">
+      <div class="impact-content">
+        <div class="impact-overview">
         <div class="impact-score-display">
           <div class="score-circle">
             <span class="score-value">${impact.overallScore}</span>
@@ -28,7 +29,7 @@ function buildImpactSection(impact) {
           <div class="breakdown-items">
             <div class="breakdown-item">
               <div class="breakdown-header">
-                <span class="breakdown-label">Core Contributions</span>
+                <span class="breakdown-label">Core Contributions <span class="info-tooltip" title="Changes to src/core/ and src/lib/ folders - foundational code">ⓘ</span></span>
                 <span class="breakdown-value">${impact.scoreBreakdown.coreContributions}%</span>
               </div>
               <div class="breakdown-bar">
@@ -38,7 +39,7 @@ function buildImpactSection(impact) {
             
             <div class="breakdown-item">
               <div class="breakdown-header">
-                <span class="breakdown-label">Feature Work</span>
+                <span class="breakdown-label">Feature Work <span class="info-tooltip" title="Changes to source files (.ts, .js, .tsx, .jsx) outside core/lib">ⓘ</span></span>
                 <span class="breakdown-value">${impact.scoreBreakdown.featureWork}%</span>
               </div>
               <div class="breakdown-bar">
@@ -48,7 +49,7 @@ function buildImpactSection(impact) {
             
             <div class="breakdown-item">
               <div class="breakdown-header">
-                <span class="breakdown-label">Maintenance</span>
+                <span class="breakdown-label">Maintenance <span class="info-tooltip" title="Changes to tests, configs, CI/CD, and build files">ⓘ</span></span>
                 <span class="breakdown-value">${impact.scoreBreakdown.maintenanceWork}%</span>
               </div>
               <div class="breakdown-bar">
@@ -58,7 +59,7 @@ function buildImpactSection(impact) {
             
             <div class="breakdown-item">
               <div class="breakdown-header">
-                <span class="breakdown-label">Documentation</span>
+                <span class="breakdown-label">Documentation <span class="info-tooltip" title="Changes to .md files, README, and docs/ folder">ⓘ</span></span>
                 <span class="breakdown-value">${impact.scoreBreakdown.documentationWork}%</span>
               </div>
               <div class="breakdown-bar">
@@ -99,10 +100,11 @@ function buildImpactSection(impact) {
         <div class="insights-list">
           <h3>Insights</h3>
           <ul>
-            ${impact.insights.map(insight => `<li>${insight}</li>`).join('')}
+            ${impact.insights.map(insight => `<li>💡 ${insight}</li>`).join('')}
           </ul>
         </div>
       ` : ''}
+      </div>
     </div>
   `;
 }

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

@@ -149,6 +149,9 @@ function buildContributorBreakdown(dir) {
 function buildFileList(files) {
     if (!files || files.length === 0)
         return '';
+    const visibleCount = 10;
+    const hasMore = files.length > visibleCount;
+    const uniqueId = `files-${Math.random().toString(36).substr(2, 9)}`;
     return `
     <div class="file-breakdown">
       <h4>High-Risk Files</h4>
@@ -163,7 +166,7 @@ function buildFileList(files) {
           </tr>
         </thead>
         <tbody>
-          ${files.slice(0, 10).map(file => `
+          ${files.slice(0, visibleCount).map(file => `
             <tr class="${file.busFactorRisk ? 'high-risk-file' : ''}">
               <td class="file-path" title="${file.path}">${getFileName(file.path)}</td>
               <td class="file-owner">${file.primaryOwner}</td>
@@ -174,9 +177,20 @@ function buildFileList(files) {
               <td><span class="risk-badge risk-${file.riskLevel}">${file.riskLevel}</span></td>
             </tr>
           `).join('')}
+          ${hasMore ? files.slice(visibleCount).map(file => `
+            <tr class="${file.busFactorRisk ? 'high-risk-file' : ''} hidden-file" data-group="${uniqueId}" style="display: none;">
+              <td class="file-path" title="${file.path}">${getFileName(file.path)}</td>
+              <td class="file-owner">${file.primaryOwner}</td>
+              <td>
+                <span class="file-ownership">${file.ownershipPercentage}%</span>
+              </td>
+              <td class="file-age">${file.knowledgeAge}</td>
+              <td><span class="risk-badge risk-${file.riskLevel}">${file.riskLevel}</span></td>
+            </tr>
+          `).join('') : ''}
         </tbody>
       </table>
-      ${files.length > 10 ? `<p class="more-files">+ ${files.length - 10} more files</p>` : ''}
+      ${hasMore ? `<button class="more-files-btn" data-target="${uniqueId}" data-count="${files.length - visibleCount}" onclick="toggleMoreFiles(this)">+ ${files.length - visibleCount} more files</button>` : ''}
     </div>
   `;
 }