commit-report 1.0.1 → 1.0.2

package/templates/report-scripts/08-engineering.html

@@ -0,0 +1,200 @@
+  // ============================================================
+  // 工程质量分析
+  // ============================================================
+  function renderEngineeringMetrics() {
+    const engineering = stats.engineering;
+    const empty = document.getElementById('engineering-empty');
+    const content = document.getElementById('engineering-content');
+
+    if (!engineering) {
+      empty.innerHTML = renderSingleRepoOnlyEmptyState('工程质量分析');
+      empty.classList.remove('hidden');
+      content.classList.add('hidden');
+      return;
+    }
+
+    empty.classList.add('hidden');
+    content.classList.remove('hidden');
+    renderEngineeringScoreCards(engineering);
+    renderBugHotFiles(engineering.bugFixHotFiles);
+    renderCodeOwnership(engineering.codeOwnership);
+    renderReviewQuality(engineering.reviewQuality);
+    renderChangeMix(engineering.changeMix);
+  }
+
+  function renderEngineeringScoreCards(engineering) {
+    const container = document.getElementById('engineering-score-cards');
+    const quality = engineering.commitQuality;
+    const review = engineering.reviewQuality;
+    const ownership = engineering.codeOwnership;
+
+    const scoreColor = quality.score >= 80 ? 'text-emerald-500' :
+      quality.score >= 60 ? 'text-amber-500' : 'text-rose-500';
+
+    const cards = [
+      ['Commit 质量', quality.score, scoreColor, '团队综合评分'],
+      ['规范度', formatPercent(quality.conventionalRate), 'text-primary-500', 'Conventional Commits'],
+      ['Scope 覆盖', formatPercent(quality.scopeCoverageRate), 'text-indigo-500', '带模块范围的提交'],
+      ['平均长度', quality.averageMessageLength.toFixed(1), 'text-slate-700 dark:text-slate-200', 'Subject 字符数'],
+      ['Review 参与', formatPercent(review.reviewParticipationRate), 'text-emerald-500', 'Merge trailer 覆盖'],
+      ['HEAD 文件', formatNumber(ownership ? ownership.totalFiles : 0), 'text-slate-700 dark:text-slate-200', 'blame 可分析文件'],
+    ];
+
+    container.innerHTML = `
+      <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4">
+        ${cards.map(([label, value, color, desc]) => `
+          <div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-5 border border-slate-100 dark:border-slate-700/50">
+            <div class="text-sm text-slate-500 dark:text-slate-400 font-medium mb-2">${label}</div>
+            <div class="text-2xl font-bold ${color}">${value}</div>
+            <div class="text-xs text-slate-400 mt-1">${desc}</div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+  }
+
+  function renderBugHotFiles(bugFixHotFiles) {
+    const container = document.getElementById('bug-hot-files-list');
+    const files = bugFixHotFiles.hotFiles || [];
+
+    if (files.length === 0) {
+      container.innerHTML = emptyEngineeringMessage('暂无 fix: 文件热点');
+      return;
+    }
+
+    container.innerHTML = `
+      <div class="overflow-x-auto max-h-[360px] overflow-y-auto scrollbar-thin">
+        <table class="w-full text-sm">
+          <thead class="sticky top-0 bg-slate-50 dark:bg-slate-700/50">
+            <tr class="text-left border-b border-slate-200 dark:border-slate-600">
+              <th class="py-2 text-slate-500 dark:text-slate-400 font-medium">文件路径</th>
+              <th class="py-2 text-slate-500 dark:text-slate-400 font-medium text-right">修复次数</th>
+              <th class="py-2 text-slate-500 dark:text-slate-400 font-medium text-right">作者数</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${files.slice(0, 20).map(file => `
+              <tr class="border-b border-slate-100 dark:border-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-800/50">
+                <td class="py-3 pr-4 font-mono text-xs text-slate-700 dark:text-slate-300 truncate max-w-sm" title="${escapeHtml(file.path)}">${escapeHtml(file.path)}</td>
+                <td class="py-3 text-right font-semibold text-rose-500">${formatNumber(file.fixCount)}</td>
+                <td class="py-3 text-right text-slate-600 dark:text-slate-400">${formatNumber(file.fixAuthors.length)}</td>
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+
+  function renderCodeOwnership(ownership) {
+    const container = document.getElementById('code-ownership-list');
+    const files = ownership ? ownership.files || [] : [];
+
+    if (files.length === 0) {
+      container.innerHTML = emptyEngineeringMessage('暂无 blame 所有权数据');
+      return;
+    }
+
+    container.innerHTML = `
+      <div class="overflow-x-auto max-h-[360px] overflow-y-auto scrollbar-thin">
+        <table class="w-full text-sm">
+          <thead class="sticky top-0 bg-slate-50 dark:bg-slate-700/50">
+            <tr class="text-left border-b border-slate-200 dark:border-slate-600">
+              <th class="py-2 text-slate-500 dark:text-slate-400 font-medium">文件路径</th>
+              <th class="py-2 text-slate-500 dark:text-slate-400 font-medium">主导者</th>
+              <th class="py-2 text-slate-500 dark:text-slate-400 font-medium text-right">占比</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${files.slice(0, 20).map(file => `
+              <tr class="border-b border-slate-100 dark:border-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-800/50">
+                <td class="py-3 pr-4 font-mono text-xs text-slate-700 dark:text-slate-300 truncate max-w-xs" title="${escapeHtml(file.path)}">${escapeHtml(file.path)}</td>
+                <td class="py-3 text-slate-700 dark:text-slate-300">${escapeHtml(file.ownerName)}</td>
+                <td class="py-3 text-right">
+                  <span class="px-2 py-1 rounded text-xs font-semibold bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300">${formatPercent(file.ownershipRatio)}</span>
+                </td>
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+
+  function renderReviewQuality(reviewQuality) {
+    const container = document.getElementById('review-quality-list');
+    const reviewers = reviewQuality.reviewers || [];
+
+    if (reviewQuality.mergeCommitCount === 0) {
+      container.innerHTML = emptyEngineeringMessage('暂无 merge commit 数据');
+      return;
+    }
+
+    container.innerHTML = `
+      <div class="grid grid-cols-3 gap-3 mb-4">
+        <div class="bg-white dark:bg-slate-800 rounded-lg p-3">
+          <div class="text-xs text-slate-400">Merge</div>
+          <div class="text-xl font-bold">${formatNumber(reviewQuality.mergeCommitCount)}</div>
+        </div>
+        <div class="bg-white dark:bg-slate-800 rounded-lg p-3">
+          <div class="text-xs text-slate-400">带评审</div>
+          <div class="text-xl font-bold text-emerald-500">${formatNumber(reviewQuality.reviewedMergeCount)}</div>
+        </div>
+        <div class="bg-white dark:bg-slate-800 rounded-lg p-3">
+          <div class="text-xs text-slate-400">参与率</div>
+          <div class="text-xl font-bold">${formatPercent(reviewQuality.reviewParticipationRate)}</div>
+        </div>
+      </div>
+      <div class="space-y-2 max-h-[250px] overflow-y-auto scrollbar-thin">
+        ${reviewers.length === 0 ? emptyEngineeringMessage('暂无 reviewer trailer') : reviewers.map(reviewer => `
+          <div class="flex items-center justify-between bg-white dark:bg-slate-800 rounded-lg px-3 py-2">
+            <div>
+              <div class="font-medium text-slate-700 dark:text-slate-200">${escapeHtml(reviewer.name)}</div>
+              <div class="text-xs text-slate-400">${escapeHtml(reviewer.email)}</div>
+            </div>
+            <span class="text-sm font-semibold text-slate-600 dark:text-slate-300">${formatNumber(reviewer.commits)}</span>
+          </div>
+        `).join('')}
+      </div>
+    `;
+  }
+
+  function renderChangeMix(changeMix) {
+    const container = document.getElementById('change-mix-list');
+    const total = changeMix.createdFiles + changeMix.deletedFiles + changeMix.modifiedFiles;
+    const featureWidth = total > 0 ? changeMix.featureRatio * 100 : 0;
+    const refactorWidth = total > 0 ? changeMix.refactorRatio * 100 : 0;
+
+    container.innerHTML = `
+      <div class="mb-5">
+        <div class="flex h-4 overflow-hidden rounded bg-slate-200 dark:bg-slate-800">
+          <div class="bg-emerald-500" style="width: ${featureWidth}%"></div>
+          <div class="bg-amber-500" style="width: ${refactorWidth}%"></div>
+        </div>
+        <div class="flex justify-between text-xs text-slate-500 dark:text-slate-400 mt-2">
+          <span>新增 ${formatPercent(changeMix.featureRatio)}</span>
+          <span>重构 ${formatPercent(changeMix.refactorRatio)}</span>
+        </div>
+      </div>
+      <div class="grid grid-cols-3 gap-3">
+        ${[
+          ['创建', changeMix.createdFiles, 'text-emerald-500'],
+          ['删除', changeMix.deletedFiles, 'text-rose-500'],
+          ['修改', changeMix.modifiedFiles, 'text-amber-500'],
+        ].map(([label, value, color]) => `
+          <div class="bg-white dark:bg-slate-800 rounded-lg p-4 text-center">
+            <div class="text-xs text-slate-400 mb-1">${label}</div>
+            <div class="text-2xl font-bold ${color}">${formatNumber(value)}</div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+  }
+
+  function formatPercent(value) {
+    return (value * 100).toFixed(1) + '%';
+  }
+
+  function emptyEngineeringMessage(message) {
+    return `<div class="text-sm text-slate-500 dark:text-slate-400 py-8 text-center">${message}</div>`;
+  }

package/templates/report-scripts/09-extensions.html

@@ -0,0 +1,313 @@
+  // ============================================================
+  // 扩展统计 - 渲染入口
+  // ============================================================
+  function renderExtensions() {
+    renderChangeSize();
+    renderDirCoupling();
+    renderAIQuality();
+  }
+
+  // ============================================================
+  // #2 变更尺寸分布
+  // ============================================================
+  function renderChangeSize() {
+    const data = stats.changeSizeDistribution;
+    const summaryEl = document.getElementById('change-size-summary');
+    if (!data || data.buckets.every(b => b.count === 0)) {
+      summaryEl.innerHTML = '<div class="col-span-4">' + renderSingleRepoOnlyEmptyState('变更尺寸分析', '未发现可用于分桶的提交变更数据。') + '</div>';
+      return;
+    }
+
+    // 概要卡片
+    const card = (label, value, desc, color) => `
+      <div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-5 border border-slate-100 dark:border-slate-700/50">
+        <div class="text-sm text-slate-500 dark:text-slate-400 font-medium mb-2">${label}</div>
+        <div class="text-2xl font-bold ${color}">${value}</div>
+        <div class="text-xs text-slate-400 mt-1">${desc}</div>
+      </div>
+    `;
+    summaryEl.innerHTML =
+      card('平均行数', Math.round(data.avgChangeSize), '每次提交', 'text-primary-500') +
+      card('中位数', data.medianChangeSize, '50% 提交 ≤ 此值', 'text-emerald-500') +
+      card('P95', data.p95ChangeSize, '95% 提交 ≤ 此值', 'text-amber-500') +
+      card('XL 大提交', data.buckets.find(b => b.label === 'XL').count,
+           '≥1000 行（评审难）', 'text-rose-500');
+
+    // 分桶柱状图
+    const container = document.getElementById('change-size-buckets');
+    container.innerHTML = '';
+    const w = container.clientWidth || 400;
+    const h = 280;
+    const margin = { top: 20, right: 20, bottom: 40, left: 50 };
+    const innerW = w - margin.left - margin.right;
+    const innerH = h - margin.top - margin.bottom;
+
+    const svg = d3.select(container).append('svg').attr('width', w).attr('height', h);
+    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+
+    const x = d3.scaleBand().domain(data.buckets.map(b => b.label)).range([0, innerW]).padding(0.2);
+    const y = d3.scaleLinear().domain([0, d3.max(data.buckets, b => b.count) || 1]).nice().range([innerH, 0]);
+
+    const colorMap = { XS: '#10b981', S: '#22c55e', M: '#0ea5e9', L: '#f59e0b', XL: '#ef4444' };
+
+    g.append('g').attr('transform', `translate(0,${innerH})`)
+      .call(d3.axisBottom(x))
+      .selectAll('text')
+      .style('font-size', '11px')
+      .style('fill', isDark() ? '#cbd5e1' : '#475569');
+    g.append('g').call(d3.axisLeft(y).ticks(5))
+      .selectAll('text').style('fill', isDark() ? '#cbd5e1' : '#475569');
+
+    g.selectAll('.bar').data(data.buckets).enter().append('rect')
+      .attr('x', d => x(d.label))
+      .attr('y', d => y(d.count))
+      .attr('width', x.bandwidth())
+      .attr('height', d => innerH - y(d.count))
+      .attr('rx', 4)
+      .attr('fill', d => colorMap[d.label])
+      .on('mouseover', (e, d) =>
+        showTooltip(e, `<b>${d.label}</b> (${d.range} 行)<br/>${d.count} 次提交 (${d.percentage.toFixed(1)}%)`)
+      )
+      .on('mouseout', hideTooltip);
+
+    // 数值标签
+    g.selectAll('.label').data(data.buckets).enter().append('text')
+      .attr('x', d => x(d.label) + x.bandwidth() / 2)
+      .attr('y', d => y(d.count) - 6)
+      .attr('text-anchor', 'middle')
+      .attr('font-size', '11px')
+      .attr('fill', isDark() ? '#e2e8f0' : '#475569')
+      .text(d => d.percentage.toFixed(0) + '%');
+
+    // 大提交列表
+    const listEl = document.getElementById('large-commits-list');
+    if (!data.largeCommits.length) {
+      listEl.innerHTML = '<p class="text-sm text-slate-500 dark:text-slate-400">无大提交</p>';
+      return;
+    }
+    listEl.innerHTML = data.largeCommits.map(c => `
+      <div class="py-2 border-b border-slate-200 dark:border-slate-700 last:border-0">
+        <div class="flex items-center justify-between gap-2">
+          <code class="text-xs text-primary-500">${c.hash.slice(0, 7)}</code>
+          <span class="text-rose-500 font-semibold text-sm">${formatNumber(c.totalLines)} 行</span>
+        </div>
+        <div class="text-sm text-slate-700 dark:text-slate-200 truncate" title="${escapeHtml(c.message)}">${escapeHtml(c.message)}</div>
+        <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">
+          ${escapeHtml(c.author)} · ${c.filesCount} 文件 · ${formatDateKeyLocal(c.date)}
+        </div>
+      </div>
+    `).join('');
+  }
+
+  // ============================================================
+  // #6 目录耦合
+  // ============================================================
+  function renderDirCoupling() {
+    const data = stats.directoryCoupling;
+    const emptyEl = document.getElementById('dir-coupling-empty');
+    const contentEl = document.getElementById('dir-coupling-content');
+
+    if (!data || !data.directories.length) {
+      emptyEl.innerHTML = renderSingleRepoOnlyEmptyState('目录耦合分析');
+      emptyEl.classList.remove('hidden');
+      contentEl.classList.add('hidden');
+      return;
+    }
+
+    // 矩阵热力图
+    const matrixEl = document.getElementById('dir-coupling-matrix');
+    matrixEl.innerHTML = '';
+    const dirs = data.directories;
+    const cellSize = Math.min(36, Math.floor(360 / dirs.length));
+    const labelW = 100;
+    const labelH = 100;
+    const w = labelW + dirs.length * cellSize + 20;
+    const h = labelH + dirs.length * cellSize + 20;
+
+    const svg = d3.select(matrixEl).append('svg').attr('width', w).attr('height', h);
+
+    const maxOff = d3.max(data.matrix.filter(c => c.dir1 !== c.dir2), c => c.value) || 1;
+    const colorScale = d3.scaleSequential(d3.interpolateOranges).domain([0, maxOff]);
+    const truncate = (s) => s.length > 12 ? s.slice(0, 11) + '…' : s;
+
+    // 顶部标签
+    dirs.forEach((d, i) => {
+      svg.append('text')
+        .attr('x', labelW + i * cellSize + cellSize / 2)
+        .attr('y', labelH - 6)
+        .attr('text-anchor', 'start')
+        .attr('transform', `rotate(-45 ${labelW + i * cellSize + cellSize / 2} ${labelH - 6})`)
+        .attr('font-size', '11px')
+        .attr('fill', isDark() ? '#cbd5e1' : '#475569')
+        .text(truncate(d));
+    });
+    // 左侧标签
+    dirs.forEach((d, i) => {
+      svg.append('text')
+        .attr('x', labelW - 6)
+        .attr('y', labelH + i * cellSize + cellSize / 2 + 4)
+        .attr('text-anchor', 'end')
+        .attr('font-size', '11px')
+        .attr('fill', isDark() ? '#cbd5e1' : '#475569')
+        .text(truncate(d));
+    });
+
+    // 单元格
+    data.matrix.forEach(cell => {
+      const i = dirs.indexOf(cell.dir1);
+      const j = dirs.indexOf(cell.dir2);
+      if (i < 0 || j < 0) return;
+      const isDiag = cell.dir1 === cell.dir2;
+      svg.append('rect')
+        .attr('x', labelW + j * cellSize + 1)
+        .attr('y', labelH + i * cellSize + 1)
+        .attr('width', cellSize - 2)
+        .attr('height', cellSize - 2)
+        .attr('rx', 2)
+        .attr('fill', isDiag ? (isDark() ? '#334155' : '#e2e8f0') : (cell.value > 0 ? colorScale(cell.value) : (isDark() ? '#1e293b' : '#f1f5f9')))
+        .on('mouseover', (e) => showTooltip(e,
+          isDiag
+            ? `<b>${escapeHtml(cell.dir1)}</b><br/>共 ${cell.value} 次提交`
+            : `<b>${escapeHtml(cell.dir1)}</b> ↔ <b>${escapeHtml(cell.dir2)}</b><br/>共变 ${cell.value} 次`
+        ))
+        .on('mouseout', hideTooltip);
+    });
+
+    // 列表
+    const listEl = document.getElementById('dir-coupling-list');
+    if (!data.pairs.length) {
+      listEl.innerHTML = '<p class="text-sm text-slate-500 dark:text-slate-400">无跨目录耦合</p>';
+      return;
+    }
+    listEl.innerHTML = '<table class="w-full text-sm">' +
+      '<thead><tr class="text-left text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">' +
+      '<th class="pb-2">目录对</th><th class="pb-2 text-right">共变</th><th class="pb-2 text-right">耦合度</th></tr></thead><tbody>' +
+      data.pairs.slice(0, 20).map(p => {
+        const couplingPct = (p.coupling * 100).toFixed(0);
+        const color = p.coupling > 0.5 ? 'text-rose-500' : p.coupling > 0.3 ? 'text-amber-500' : 'text-emerald-500';
+        return `<tr class="border-b border-slate-100 dark:border-slate-700/50">
+          <td class="py-2"><code class="text-xs">${escapeHtml(p.dir1)}</code> ↔ <code class="text-xs">${escapeHtml(p.dir2)}</code></td>
+          <td class="py-2 text-right">${p.coOccurrence}</td>
+          <td class="py-2 text-right font-semibold ${color}">${couplingPct}%</td>
+        </tr>`;
+      }).join('') + '</tbody></table>';
+  }
+
+  // ============================================================
+  // #18 AI × 质量交叉风险
+  // ============================================================
+  function renderAIQuality() {
+    const data = stats.aiQualityRisk;
+    const summaryEl = document.getElementById('ai-quality-summary');
+    if (!data || !data.scatter.length) {
+      summaryEl.innerHTML = '<div class="col-span-4">' + renderSingleRepoOnlyEmptyState('AI × 质量风险分析', '当前范围内没有可交叉分析的 AI 与质量风险数据。') + '</div>';
+      return;
+    }
+
+    const s = data.summary;
+    const card = (label, value, color, desc) => `
+      <div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-5 border border-slate-100 dark:border-slate-700/50">
+        <div class="text-sm text-slate-500 dark:text-slate-400 font-medium mb-2">${label}</div>
+        <div class="text-2xl font-bold ${color}">${value}</div>
+        <div class="text-xs text-slate-400 mt-1">${desc}</div>
+      </div>
+    `;
+    summaryEl.innerHTML =
+      card('高 AI + 高 Churn', s.highAIHighChurn, 'text-rose-500', '强烈建议人审') +
+      card('高 AI + 低 Churn', s.highAILowChurn, 'text-amber-500', '可能稳定') +
+      card('低 AI + 高 Churn', s.lowAIHighChurn, 'text-orange-500', '人写但反复重写') +
+      card('低风险文件', s.lowAILowChurn, 'text-emerald-500', '健康代码');
+
+    // 散点图
+    const container = document.getElementById('ai-quality-scatter');
+    container.innerHTML = '';
+    const w = container.clientWidth || 400;
+    const h = 400;
+    const margin = { top: 20, right: 30, bottom: 50, left: 50 };
+    const innerW = w - margin.left - margin.right;
+    const innerH = h - margin.top - margin.bottom;
+
+    const svg = d3.select(container).append('svg').attr('width', w).attr('height', h);
+    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+
+    const x = d3.scaleLinear().domain([0, 100]).range([0, innerW]);
+    const y = d3.scaleLinear().domain([0, Math.min(2, (d3.max(data.scatter, p => p.churnRate) || 1) * 1.1)]).range([innerH, 0]);
+    const r = d3.scaleSqrt().domain([1, d3.max(data.scatter, p => p.modifyCount) || 1]).range([3, 12]);
+
+    // 高风险象限背景
+    g.append('rect')
+      .attr('x', x(50)).attr('y', y(2))
+      .attr('width', innerW - x(50)).attr('height', innerH - y(0.5) - (y(2) - y(0.5)))
+      .attr('fill', 'rgba(239,68,68,0.08)');
+
+    // 坐标轴
+    g.append('g').attr('transform', `translate(0,${innerH})`)
+      .call(d3.axisBottom(x).ticks(5).tickFormat(d => d + '%'))
+      .selectAll('text').style('fill', isDark() ? '#cbd5e1' : '#475569');
+    g.append('text')
+      .attr('x', innerW / 2).attr('y', innerH + 38)
+      .attr('text-anchor', 'middle').attr('font-size', '12px')
+      .attr('fill', isDark() ? '#cbd5e1' : '#475569')
+      .text('AI 评分 (%)');
+
+    g.append('g').call(d3.axisLeft(y).ticks(5))
+      .selectAll('text').style('fill', isDark() ? '#cbd5e1' : '#475569');
+    g.append('text')
+      .attr('transform', 'rotate(-90)')
+      .attr('x', -innerH / 2).attr('y', -36)
+      .attr('text-anchor', 'middle').attr('font-size', '12px')
+      .attr('fill', isDark() ? '#cbd5e1' : '#475569')
+      .text('Churn Rate (deleted/added)');
+
+    // 参考线
+    g.append('line')
+      .attr('x1', x(50)).attr('x2', x(50))
+      .attr('y1', 0).attr('y2', innerH)
+      .attr('stroke', isDark() ? '#475569' : '#cbd5e1').attr('stroke-dasharray', '3 3');
+    g.append('line')
+      .attr('x1', 0).attr('x2', innerW)
+      .attr('y1', y(0.5)).attr('y2', y(0.5))
+      .attr('stroke', isDark() ? '#475569' : '#cbd5e1').attr('stroke-dasharray', '3 3');
+
+    // 散点
+    g.selectAll('.dot').data(data.scatter).enter().append('circle')
+      .attr('cx', d => x(d.aiScore))
+      .attr('cy', d => y(Math.min(d.churnRate, 2)))
+      .attr('r', d => r(d.modifyCount))
+      .attr('fill', d => {
+        const high = d.aiScore > 50 && d.churnRate > 0.5;
+        return high ? 'rgba(239,68,68,0.7)' : 'rgba(14,165,233,0.5)';
+      })
+      .attr('stroke', d => d.aiScore > 50 && d.churnRate > 0.5 ? '#dc2626' : '#0284c7')
+      .attr('stroke-width', 1)
+      .on('mouseover', (e, d) => showTooltip(e,
+        `<b>${escapeHtml(d.path)}</b><br/>AI: ${d.aiScore.toFixed(0)}% · Churn: ${d.churnRate.toFixed(2)} · 修改 ${d.modifyCount} 次`
+      ))
+      .on('mouseout', hideTooltip);
+
+    // 文件列表
+    const listEl = document.getElementById('ai-quality-files');
+    if (!data.files.length) {
+      listEl.innerHTML = '<p class="text-sm text-slate-500 dark:text-slate-400">无高风险文件</p>';
+      return;
+    }
+    listEl.innerHTML = '<table class="w-full text-sm">' +
+      '<thead><tr class="text-left text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">' +
+      '<th class="pb-2">文件</th><th class="pb-2 text-right">AI</th><th class="pb-2 text-right">Churn</th><th class="pb-2 text-right">修改</th><th class="pb-2">建议</th></tr></thead><tbody>' +
+      data.files.map(f => `
+        <tr class="border-b border-slate-100 dark:border-slate-700/50">
+          <td class="py-2"><code class="text-xs" title="${escapeHtml(f.path)}">${escapeHtml(f.path.length > 36 ? '…' + f.path.slice(-35) : f.path)}</code></td>
+          <td class="py-2 text-right ${f.aiScore > 50 ? 'text-rose-500 font-semibold' : 'text-slate-600 dark:text-slate-300'}">${f.aiScore.toFixed(0)}%</td>
+          <td class="py-2 text-right ${f.churnRate > 0.5 ? 'text-rose-500 font-semibold' : 'text-slate-600 dark:text-slate-300'}">${f.churnRate.toFixed(2)}</td>
+          <td class="py-2 text-right text-slate-600 dark:text-slate-300">${f.modifyCount}</td>
+          <td class="py-2 text-xs text-slate-600 dark:text-slate-300">${getAIQualitySuggestion(f)}</td>
+        </tr>
+      `).join('') + '</tbody></table>';
+  }
+
+  function getAIQualitySuggestion(file) {
+    if (file.aiScore > 50 && file.churnRate > 0.5) return '重点 Review + 补测试';
+    if (file.aiScore > 50) return '抽样 Review';
+    if (file.churnRate > 0.5) return '补回归测试';
+    return '常规巡检';
+  }

package/templates/report-scripts/10-runtime.html

@@ -0,0 +1,54 @@
+  setupCommitDetailFilters();
+  setupReportControls();
+
+  // 启动渲染
+  renderAll();
+
+  // 窗口大小变化时重新渲染
+  let resizeTimer;
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(renderAll, 300);
+  });
+
+  function activateAdvancedGroup(group) {
+    const groups = document.querySelectorAll('.advanced-tab-group');
+    const panels = document.querySelectorAll('[data-tab-group-panel]');
+
+    groups.forEach(item => item.classList.toggle('active', item.dataset.tabGroup === group));
+    panels.forEach(panel => panel.classList.toggle('hidden', panel.dataset.tabGroupPanel !== group));
+    reportState.advancedGroup = group;
+  }
+
+  function activateAdvancedTab(tabId, shouldUpdateHash = true) {
+    const tab = document.querySelector(`.advanced-tab[data-tab="${tabId}"]`);
+    const target = document.getElementById(tabId);
+    if (!tab || !target) return;
+
+    const group = tab.dataset.tabGroup || 'health';
+    activateAdvancedGroup(group);
+
+    document.querySelectorAll('.advanced-tab').forEach(item => item.classList.remove('active'));
+    document.querySelectorAll('.advanced-tab-content').forEach(content => content.classList.add('hidden'));
+
+    tab.classList.add('active');
+    target.classList.remove('hidden');
+    reportState.advancedTab = tabId;
+    renderAdvancedTab(tabId);
+    if (shouldUpdateHash) updateReportHash();
+  }
+
+  document.querySelectorAll('.advanced-tab-group').forEach(group => {
+    group.addEventListener('click', () => {
+      const targetGroup = group.dataset.tabGroup;
+      const firstVisibleTab = document.querySelector(`.advanced-tab[data-tab-group="${targetGroup}"]:not([style*="display: none"])`);
+      if (firstVisibleTab) activateAdvancedTab(firstVisibleTab.dataset.tab);
+    });
+  });
+
+  document.querySelectorAll('.advanced-tab').forEach(tab => {
+    tab.addEventListener('click', () => activateAdvancedTab(tab.dataset.tab));
+  });
+
+  activateAdvancedTab(reportState.advancedTab, false);
+  </script>