app/src/content/embeds/d3-pr-convergence.html

<div class="d3-pr-convergence"></div>
<style>
  .d3-pr-convergence {
    position: relative;
  }
  .d3-pr-convergence svg {
    display: block;
    width: 100%;
  }
  .d3-pr-convergence .pr-box {
    stroke-width: 0.5;
  }
  .d3-pr-convergence .pr-text {
    font-size: 10px;
  }
  .d3-pr-convergence .result-box {
    stroke-width: 1;
  }
</style>
<script>
  (() => {
    const bootstrap = () => {
      const scriptEl = document.currentScript;
      let container = scriptEl ? scriptEl.previousElementSibling : null;
      if (!(container && container.classList && container.classList.contains('d3-pr-convergence'))) {
        const candidates = Array.from(document.querySelectorAll('.d3-pr-convergence'))
          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
        container = candidates[candidates.length - 1] || null;
      }
      if (!container) return;
      if (container.dataset.mounted === 'true') return;
      container.dataset.mounted = 'true';

      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
      const prFill = isDark ? '#1a1a2e' : '#F0EDF5';
      const prStroke = '#7B68AE';
      const prText = isDark ? '#C4B8E0' : '#4A3D6B';
      const resultFill = isDark ? '#1a2e1a' : '#EAF2E6';
      const resultStroke = '#2D5A27';
      const resultTitle = isDark ? '#A8D89A' : '#1E3D1A';
      const resultSub = isDark ? '#6B9B5E' : '#3D6B35';
      const headerFill = isDark ? '#2a2a2a' : '#F5F4F0';
      const headerStroke = isDark ? '#777' : '#999';
      const headerText = isDark ? '#ccc' : '#444';
      const arrowColor = isDark ? '#5A8B4F' : '#2D5A27';
      const guideColor = prStroke;
      const noteColor = isDark ? '#999' : '#888';
      const textColor = isDark ? '#ddd' : '#222';

      const prs = [
        '#43996 FNet, CVT','#43997 RegNet','#43998 TimmBackbone','#43999 MobileNetV1',
        '#44000 DualEncoder','#44001 UnivNet','#44002 UPerNet','#44003 Mamba',
        '#44004 CodeGen','#44007 ResNet','#44013 MobileNetV2','#44018 GPT-Neo',
        '#44019 ResNet (dup)','#44024 FocalNet','#44025 DepthAnything','#44026 VisionEnc',
        '#44027 SpeechEnc','#44028 SuperPoint','#44029 RWKV','#44030 DPR',
        '#44044 DeBERTa','#44056 MPNet','#44059 GPT-2','#44066 GPT-J',
        '#44071 MPT','#44072 EfficientNet','#44073 VisualBert','#44074 TextNet',
        '#44076 ImageGPT','#44085 RemBERT','#44086 MGP-STR','#44101 XLM',
        '#44114 Wav2Vec2','#44116 Flaubert','#44129 SpeechT5',
        '#44154 VITS','#44161 LongT5',
        '#44713 ColQwen2','#44722 GPT-J (dup)'
      ];

      const cols = 4;
      const boxW = 155;
      const boxH = 24;
      const gapX = 10;
      const gapY = 6;
      const totalW = cols * boxW + (cols - 1) * gapX;

      const fullRows = Math.floor(prs.length / cols);
      const remainder = prs.length % cols;
      const totalRows = fullRows + (remainder > 0 ? 1 : 0);

      const svgW = totalW + 40;
      const headerY = 12;
      const headerH = 32;
      const gridTop = headerY + headerH + 24;
      const gridBottom = gridTop + totalRows * (boxH + gapY) - gapY;
      const arrowTop = gridBottom + 16;
      const arrowBottom = arrowTop + 32;
      const resultTop = arrowBottom + 6;
      const resultH = 48;
      const noteTop = resultTop + resultH + 20;
      const svgH = noteTop + 16;

      const offsetX = 20;

      let svgMarkup = `<svg viewBox="0 0 ${svgW} ${svgH}" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="39 duplicate PRs converging into 1 combined PR">`;

      svgMarkup += `<rect x="${svgW/2 - 140}" y="${headerY}" width="280" height="${headerH}" fill="${headerFill}" stroke="${headerStroke}" stroke-width="0.5"/>`;
      svgMarkup += `<text x="${svgW/2}" y="${headerY + 21}" text-anchor="middle" fill="${headerText}" font-family="system-ui,sans-serif" font-size="13" font-weight="500">Issue #43979 — output tracing refactor</text>`;

      svgMarkup += `<line x1="${offsetX + 80}" y1="${gridTop - 4}" x2="${offsetX + 80}" y2="${gridBottom + 4}" stroke="${guideColor}" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.3"/>`;
      svgMarkup += `<line x1="${offsetX + totalW - 80}" y1="${gridTop - 4}" x2="${offsetX + totalW - 80}" y2="${gridBottom + 4}" stroke="${guideColor}" stroke-width="0.5" stroke-dasharray="3,3" opacity="0.3"/>`;

      prs.forEach((label, i) => {
        const row = Math.floor(i / cols);
        const col = i % cols;
        let x, y;

        if (row < fullRows) {
          x = offsetX + col * (boxW + gapX);
          y = gridTop + row * (boxH + gapY);
        } else {
          const remCount = remainder;
          const remOffset = (totalW - remCount * boxW - (remCount - 1) * gapX) / 2;
          x = offsetX + remOffset + (i - fullRows * cols) * (boxW + gapX);
          y = gridTop + row * (boxH + gapY);
        }

        svgMarkup += `<rect x="${x}" y="${y}" width="${boxW}" height="${boxH}" fill="${prFill}" stroke="${prStroke}" stroke-width="0.5"/>`;
        svgMarkup += `<text x="${x + boxW/2}" y="${y + 16}" text-anchor="middle" fill="${prText}" font-family="system-ui,sans-serif" font-size="10">${label}</text>`;
      });

      const cx = svgW / 2;
      svgMarkup += `<line x1="${cx}" y1="${arrowTop}" x2="${cx}" y2="${arrowBottom}" stroke="${arrowColor}" stroke-width="1.5"/>`;
      svgMarkup += `<polygon points="${cx-6},${arrowBottom-5} ${cx},${arrowBottom+3} ${cx+6},${arrowBottom-5}" fill="${arrowColor}"/>`;

      const rw = 240;
      svgMarkup += `<rect x="${cx - rw/2}" y="${resultTop}" width="${rw}" height="${resultH}" fill="${resultFill}" stroke="${resultStroke}" stroke-width="1"/>`;
      svgMarkup += `<text x="${cx}" y="${resultTop + 21}" text-anchor="middle" fill="${resultTitle}" font-family="system-ui,sans-serif" font-size="15" font-weight="500">1 combined PR</text>`;
      svgMarkup += `<text x="${cx}" y="${resultTop + 38}" text-anchor="middle" fill="${resultSub}" font-family="system-ui,sans-serif" font-size="11">39 contributions merged</text>`;

      svgMarkup += `<text x="${cx}" y="${noteTop}" text-anchor="middle" fill="${noteColor}" font-family="system-ui,sans-serif" font-size="11" font-style="italic">Each PR applies the same decorator pattern to a different model file</text>`;

      svgMarkup += '</svg>';
      container.innerHTML = svgMarkup;
    };

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
    } else { bootstrap(); }
  })();
</script>