update

app/src/content/embeds/d3-po-beta-ablation.html

@@ -0,0 +1,538 @@
+<div class="d3-apo-beta-ablation"></div>
+<style>
+  .d3-apo-beta-ablation {
+    width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    position: relative;
+    --axis-color: var(--text-color, #333);
+    --tick-color: var(--muted-color, #666);
+    --grid-color: rgba(0,0,0,.08);
+  }
+  [data-theme="dark"] .d3-apo-beta-ablation {
+    --axis-color: var(--text-color, #ccc);
+    --tick-color: var(--muted-color, #999);
+    --grid-color: rgba(255,255,255,.10);
+  }
+  .d3-apo-beta-ablation svg {
+    display: block;
+    overflow: visible;
+  }
+  .d3-apo-beta-ablation .axes path,
+  .d3-apo-beta-ablation .axes line {
+    stroke: var(--axis-color);
+    shape-rendering: crispEdges;
+  }
+  .d3-apo-beta-ablation .axes text {
+    fill: var(--tick-color);
+    font-size: 11px;
+  }
+  .d3-apo-beta-ablation .grid line {
+    stroke: var(--grid-color);
+    stroke-dasharray: 2,2;
+    shape-rendering: crispEdges;
+  }
+  .d3-apo-beta-ablation .axis-label {
+    fill: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .d3-apo-beta-ablation .line-think {
+    fill: none;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .d3-apo-beta-ablation .line-no-think {
+    fill: none;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .d3-apo-beta-ablation .reference-line {
+    fill: none;
+    stroke-width: 1.5;
+    stroke-dasharray: 5, 5;
+    opacity: 0.4;
+  }
+  .d3-apo-beta-ablation .dot {
+    stroke: var(--surface-bg);
+    stroke-width: 2;
+  }
+  .d3-apo-beta-ablation .header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 16px;
+    flex-wrap: wrap;
+  }
+  .d3-apo-beta-ablation .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-apo-beta-ablation .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-apo-beta-ablation .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-apo-beta-ablation .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+  }
+  .d3-apo-beta-ablation .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+  .d3-apo-beta-ablation .legend .swatch-line {
+    width: 20px;
+    height: 2px;
+    border: none;
+  }
+  .d3-apo-beta-ablation .legend .swatch-dashed {
+    width: 20px;
+    height: 2px;
+    border: none;
+    background: repeating-linear-gradient(
+      to right,
+      var(--text-color) 0,
+      var(--text-color) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+  }
+  .d3-apo-beta-ablation .controls {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+  .d3-apo-beta-ablation .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-apo-beta-ablation .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-apo-beta-ablation .controls select {
+    font-size: 12px;
+    padding: 8px 28px 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+  .d3-apo-beta-ablation .controls select:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+  .d3-apo-beta-ablation .d3-tooltip {
+    position: absolute;
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 12px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    font-size: 12px;
+    z-index: 1000;
+  }
+  .d3-apo-beta-ablation .tooltip-title {
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: var(--text-color);
+  }
+  .d3-apo-beta-ablation .tooltip-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 4px 0;
+    color: var(--text-color);
+  }
+  .d3-apo-beta-ablation .tooltip-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-apo-beta-ablation'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-apo-beta-ablation'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Data embedded inline
+      const data = [{"system_prompt":"/think","Evaluation":"AIME25","Score":45.47,"Beta":0.05},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":7.92,"Beta":0.05},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":42.49,"Beta":0.05},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":32.58,"Beta":0.05},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":69.88,"Beta":0.05},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":74.46,"Beta":0.05},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":23.76,"Beta":0.05},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":13.86,"Beta":0.05},{"system_prompt":"/think","Evaluation":"Average","Score":45.4,"Beta":0.05},{"system_prompt":"/no_think","Evaluation":"Average","Score":32.205,"Beta":0.05},{"system_prompt":"/think","Evaluation":"AIME25","Score":43.28,"Beta":0.01},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":6.77,"Beta":0.01},{"system_prompt":"/think","Evaluation":"AIME25","Score":46.82,"Beta":0.1},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":8.02,"Beta":0.1},{"system_prompt":"/think","Evaluation":"AIME25","Score":44.95,"Beta":0.2},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":7.6,"Beta":0.2},{"system_prompt":"/think","Evaluation":"AIME25","Score":47.45,"Beta":0.5},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":7.29,"Beta":0.5},{"system_prompt":"/think","Evaluation":"AIME25","Score":47.45,"Beta":0.75},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":7.29,"Beta":0.75},{"system_prompt":"/think","Evaluation":"AIME25","Score":45.36,"Beta":0.99},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":8.8,"Beta":0.99},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":39.77,"Beta":0.01},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":32.95,"Beta":0.01},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":44.38,"Beta":0.1},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":33.27,"Beta":0.1},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":42.05,"Beta":0.2},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":31.57,"Beta":0.2},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":41.54,"Beta":0.5},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":31.63,"Beta":0.5},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":41.54,"Beta":0.75},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":31.63,"Beta":0.75},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":42.36,"Beta":0.99},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":30.43,"Beta":0.99},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":69.04,"Beta":0.01},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":77.02,"Beta":0.01},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":71.47,"Beta":0.1},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":75.36,"Beta":0.1},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":71.55,"Beta":0.2},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":75.33,"Beta":0.2},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":73.58,"Beta":0.5},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":75.91,"Beta":0.5},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":73.58,"Beta":0.75},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":75.91,"Beta":0.75},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":69.13,"Beta":0.99},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":75.41,"Beta":0.99},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":12.87,"Beta":0.01},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":10.89,"Beta":0.01},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":29.7,"Beta":0.1},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":16.83,"Beta":0.1},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":26.73,"Beta":0.2},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":16.83,"Beta":0.2},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":28.71,"Beta":0.5},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":11.88,"Beta":0.5},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":28.71,"Beta":0.75},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":11.88,"Beta":0.75},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":34.65,"Beta":0.99},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":19.8,"Beta":0.99},{"system_prompt":"/think","Evaluation":"Average","Score":41.24,"Beta":0.01},{"system_prompt":"/no_think","Evaluation":"Average","Score":31.9075,"Beta":0.01},{"system_prompt":"/think","Evaluation":"Average","Score":48.0925,"Beta":0.1},{"system_prompt":"/no_think","Evaluation":"Average","Score":33.37,"Beta":0.1},{"system_prompt":"/think","Evaluation":"Average","Score":46.32,"Beta":0.2},{"system_prompt":"/no_think","Evaluation":"Average","Score":32.8325,"Beta":0.2},{"system_prompt":"/think","Evaluation":"Average","Score":47.82,"Beta":0.5},{"system_prompt":"/no_think","Evaluation":"Average","Score":31.6775,"Beta":0.5},{"system_prompt":"/think","Evaluation":"Average","Score":47.82,"Beta":0.75},{"system_prompt":"/no_think","Evaluation":"Average","Score":31.6775,"Beta":0.75},{"system_prompt":"/think","Evaluation":"Average","Score":47.875,"Beta":0.99},{"system_prompt":"/no_think","Evaluation":"Average","Score":33.61,"Beta":0.99}];
+      const sftData = [{"system_prompt":"/think","Evaluation":"AIME25","Score":36.56},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":4.01},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":42.23},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":30.43},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":70.03},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":67.29},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":36.63},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":12.87},{"system_prompt":"/think","Evaluation":"Average","Score":46.3625},{"system_prompt":"/no_think","Evaluation":"Average","Score":28.65}];
+
+      // Get colors from ColorPalettes or fallback
+      const getColors = () => {
+        if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+          const colors = window.ColorPalettes.getColors('categorical', 2);
+          return { think: colors[0], noThink: colors[1] };
+        }
+        return { think: '#E377C2', noThink: '#7FC97F' };
+      };
+
+      let colors = getColors();
+
+      // Set up dimensions
+      const margin = { top: 16, right: 28, bottom: 56, left: 64 };
+
+      // Create SVG
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const g = svg.append('g');
+
+      // Tooltip
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          transform: 'translate(-9999px, -9999px)',
+          pointerEvents: 'none',
+          padding: '8px 10px',
+          borderRadius: '8px',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          border: '1px solid var(--border-color)',
+          background: 'var(--surface-bg)',
+          color: 'var(--text-color)',
+          boxShadow: '0 4px 24px rgba(0,0,0,.18)',
+          opacity: '0',
+          transition: 'opacity .12s ease',
+          zIndex: '1000'
+        });
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      const showTooltip = (html, event) => {
+        tipInner.innerHTML = html;
+        const [mx, my] = d3.pointer(event, container);
+        const offsetX = 12, offsetY = 12;
+        tip.style.transform = `translate(${mx + offsetX}px, ${my + offsetY}px)`;
+        tip.style.opacity = '1';
+      };
+
+      const hideTooltip = () => {
+        tip.style.opacity = '0';
+        setTimeout(() => {
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        }, 120);
+      };
+
+      // Get unique evaluations
+      const evaluations = [...new Set(data.map(d => d.Evaluation))];
+
+      // Create header with legend and controls
+      const header = d3.select(container).append('div').attr('class', 'header');
+
+      const legend = header.append('div').attr('class', 'legend');
+      legend.append('div').attr('class', 'legend-title').text('Legend');
+      const legendItems = legend.append('div').attr('class', 'items');
+
+      const controls = header.append('div').attr('class', 'controls');
+      const controlGroup = controls.append('div').attr('class', 'control-group');
+      controlGroup.append('label').attr('for', 'metric-select-beta').text('Metric');
+      const select = controlGroup.append('select').attr('id', 'metric-select-beta');
+
+      // Populate dropdown
+      select.selectAll('option')
+        .data(evaluations)
+        .enter()
+        .append('option')
+        .text(d => d)
+        .attr('value', d => d);
+
+      // Build legend
+      const buildLegend = () => {
+        legendItems.html('');
+
+        const thinkItem = legendItems.append('span').attr('class', 'item');
+        thinkItem.append('span').attr('class', 'swatch-line').style('background', colors.think);
+        thinkItem.append('span').text('/think');
+
+        const noThinkItem = legendItems.append('span').attr('class', 'item');
+        noThinkItem.append('span').attr('class', 'swatch-line').style('background', colors.noThink);
+        noThinkItem.append('span').text('/no_think');
+
+        const sftItem = legendItems.append('span').attr('class', 'item');
+        sftItem.append('span').attr('class', 'swatch-dashed');
+        sftItem.append('span').text('SFT checkpoint');
+      };
+
+      buildLegend();
+
+      // Update chart function
+      function updateChart(evaluation) {
+        const filtered = data.filter(d => d.Evaluation === evaluation);
+        const thinkData = filtered.filter(d => d.system_prompt === "/think").sort((a, b) => a.Beta - b.Beta);
+        const noThinkData = filtered.filter(d => d.system_prompt === "/no_think").sort((a, b) => a.Beta - b.Beta);
+
+        g.selectAll("*").remove();
+
+        const sftThink = sftData.find(d => d.Evaluation === evaluation && d.system_prompt === "/think");
+        const sftNoThink = sftData.find(d => d.Evaluation === evaluation && d.system_prompt === "/no_think");
+
+        const width = container.clientWidth || 800;
+        const height = Math.max(320, Math.round(width / 2.5));
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+
+        svg.attr('width', width).attr('height', height);
+        g.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        // Scales
+        const xScale = d3.scaleLog()
+          .domain([d3.min(filtered, d => d.Beta), d3.max(filtered, d => d.Beta)])
+          .range([0, innerWidth]);
+
+        const allScores = filtered.map(d => d.Score);
+        if (sftThink) allScores.push(sftThink.Score);
+        if (sftNoThink) allScores.push(sftNoThink.Score);
+        const maxScore = d3.max(allScores);
+
+        const yScale = d3.scaleLinear()
+          .domain([0, maxScore * 1.1])
+          .range([innerHeight, 0]);
+
+        // Grid
+        g.append("g")
+          .attr("class", "grid")
+          .attr("transform", `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).tickSize(-innerHeight).tickFormat("").tickSizeOuter(0));
+
+        g.append("g")
+          .attr("class", "grid")
+          .call(d3.axisLeft(yScale).tickSize(-innerWidth).tickFormat("").tickSizeOuter(0));
+
+        // Axes
+        const tickValues = [0.01, 0.05, 0.1, 0.5, 1.0];
+        g.append("g")
+          .attr("class", "axes")
+          .attr("transform", `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).tickValues(tickValues).tickFormat(d3.format(".2f")).tickSizeOuter(0))
+          .call(gAxis => {
+            gAxis.selectAll(".tick line").attr("stroke", "var(--axis-color)").style("opacity", 1);
+            gAxis.selectAll(".tick text").attr("fill", "var(--tick-color)").style("opacity", 1);
+            gAxis.select(".domain").attr("stroke", "var(--axis-color)");
+          });
+
+        g.append("g")
+          .attr("class", "axes")
+          .call(d3.axisLeft(yScale).ticks(6).tickSizeOuter(0))
+          .call(gAxis => {
+            gAxis.selectAll(".tick line").attr("stroke", "var(--axis-color)").style("opacity", 1);
+            gAxis.selectAll(".tick text").attr("fill", "var(--tick-color)").style("opacity", 1);
+            gAxis.select(".domain").attr("stroke", "var(--axis-color)");
+          });
+
+        // Axis labels
+        g.append("text")
+          .attr("class", "axis-label")
+          .attr("text-anchor", "middle")
+          .attr("x", innerWidth / 2)
+          .attr("y", innerHeight + 40)
+          .text("Beta");
+
+        g.append("text")
+          .attr("class", "axis-label")
+          .attr("text-anchor", "middle")
+          .attr("transform", "rotate(-90)")
+          .attr("y", -45)
+          .attr("x", -innerHeight / 2)
+          .text("Score (%)");
+
+        // Line generator
+        const line = d3.line()
+          .x(d => xScale(d.Beta))
+          .y(d => yScale(d.Score));
+
+        // Reference lines
+        if (sftThink) {
+          g.append("line")
+            .attr("class", "reference-line")
+            .style("stroke", colors.think)
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", yScale(sftThink.Score))
+            .attr("y2", yScale(sftThink.Score));
+        }
+
+        if (sftNoThink) {
+          g.append("line")
+            .attr("class", "reference-line")
+            .style("stroke", colors.noThink)
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", yScale(sftNoThink.Score))
+            .attr("y2", yScale(sftNoThink.Score));
+        }
+
+        // Lines
+        g.append("path")
+          .datum(thinkData)
+          .attr("class", "line-think")
+          .style("stroke", colors.think)
+          .attr("d", line);
+
+        g.append("path")
+          .datum(noThinkData)
+          .attr("class", "line-no-think")
+          .style("stroke", colors.noThink)
+          .attr("d", line);
+
+        // Dots for /think
+        g.selectAll(".dot-think")
+          .data(thinkData)
+          .enter()
+          .append("circle")
+          .attr("class", "dot")
+          .style("fill", colors.think)
+          .attr("cx", d => xScale(d.Beta))
+          .attr("cy", d => yScale(d.Score))
+          .attr("r", 4)
+          .on("mouseenter", function(event, d) {
+            const noThinkValue = noThinkData.find(item => item.Beta === d.Beta);
+            const html = `
+              <div class="tooltip-title">Beta ${d.Beta.toFixed(2)}</div>
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.think};"></div>
+                <span>/think: ${d.Score.toFixed(2)}%</span>
+              </div>
+              ${noThinkValue ? `
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.noThink};"></div>
+                <span>/no_think: ${noThinkValue.Score.toFixed(2)}%</span>
+              </div>` : ''}
+            `;
+            showTooltip(html, event);
+          })
+          .on("mouseleave", hideTooltip);
+
+        // Dots for /no_think
+        g.selectAll(".dot-no-think")
+          .data(noThinkData)
+          .enter()
+          .append("circle")
+          .attr("class", "dot")
+          .style("fill", colors.noThink)
+          .attr("cx", d => xScale(d.Beta))
+          .attr("cy", d => yScale(d.Score))
+          .attr("r", 4)
+          .on("mouseenter", function(event, d) {
+            const thinkValue = thinkData.find(item => item.Beta === d.Beta);
+            const html = `
+              <div class="tooltip-title">Beta ${d.Beta.toFixed(2)}</div>
+              ${thinkValue ? `
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.think};"></div>
+                <span>/think: ${thinkValue.Score.toFixed(2)}%</span>
+              </div>` : ''}
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.noThink};"></div>
+                <span>/no_think: ${d.Score.toFixed(2)}%</span>
+              </div>
+            `;
+            showTooltip(html, event);
+          })
+          .on("mouseleave", hideTooltip);
+      }
+
+      // Set default value to "Average" if it exists
+      const defaultEval = evaluations.includes("Average") ? "Average" : evaluations[0];
+      select.property("value", defaultEval);
+
+      // Initial chart
+      updateChart(defaultEval);
+
+      // Update on dropdown change
+      select.on("change", function() {
+        updateChart(this.value);
+      });
+
+      // Resize handling
+      const rerender = () => updateChart(select.property("value"));
+      if (window.ResizeObserver) {
+        const ro = new ResizeObserver(() => rerender());
+        ro.observe(container);
+      } else {
+        window.addEventListener('resize', rerender);
+      }
+
+      // Listen for ColorPalettes changes
+      if (window.ColorPalettes && typeof window.ColorPalettes.addListener === 'function') {
+        window.ColorPalettes.addListener(() => {
+          colors = getColors();
+          buildLegend();
+          updateChart(select.property("value"));
+        });
+      }
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>

app/src/content/embeds/d3-po-loss-ablations.html

@@ -0,0 +1,527 @@
+<div class="d3-dpo-ablations"></div>
+<style>
+  .d3-dpo-ablations {
+    width: 100%;
+    position: relative;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+  .d3-dpo-ablations svg {
+    display: block;
+    width: 100%;
+  }
+  .d3-dpo-ablations .bar {
+    stroke: none;
+  }
+  .d3-dpo-ablations .axes path,
+  .d3-dpo-ablations .axes line {
+    stroke: var(--axis-color, var(--text-color));
+  }
+  .d3-dpo-ablations .axes text {
+    fill: var(--tick-color, var(--muted-color));
+    font-size: 11px;
+  }
+  .d3-dpo-ablations .grid line {
+    stroke: var(--grid-color, rgba(0,0,0,.08));
+  }
+  .d3-dpo-ablations .d3-tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    opacity: 0;
+    transition: opacity .12s ease;
+  }
+  .d3-dpo-ablations .d3-tooltip__inner {
+    text-align: left;
+  }
+  .d3-dpo-ablations .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    margin-top: 16px;
+  }
+  .d3-dpo-ablations .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-dpo-ablations .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-dpo-ablations .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+  }
+  .d3-dpo-ablations .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+  .d3-dpo-ablations .controls {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    margin-top: 8px;
+  }
+  .d3-dpo-ablations .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-dpo-ablations .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-dpo-ablations .controls select {
+    font-size: 12px;
+    padding: 8px 28px 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    cursor: pointer;
+  }
+  .d3-dpo-ablations .checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .d3-dpo-ablations .checkbox-group input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+  .d3-dpo-ablations .checkbox-group label {
+    font-size: 12px;
+    color: var(--text-color);
+    cursor: pointer;
+    font-weight: 400;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => {
+        if (window.d3 && typeof window.d3.select === 'function') cb();
+      };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-dpo-ablations'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-dpo-ablations'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Tooltip
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      const showTooltip = (html, event) => {
+        tipInner.innerHTML = html;
+        tip.style.opacity = '1';
+        const [mx, my] = d3.pointer(event, container);
+        tip.style.transform = `translate(${mx + 12}px, ${my - 12}px)`;
+      };
+
+      const hideTooltip = () => {
+        tip.style.opacity = '0';
+        setTimeout(() => {
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        }, 120);
+      };
+
+      // SVG scaffolding
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+
+      let width = 800, height = 400;
+      const margin = { top: 16, right: 16, bottom: 80, left: 60 };
+
+      // Data loading
+      const CSV_PATHS = [
+        '/data/apo/smollm3_dpo_ablations.csv',
+        './assets/data/apo/smollm3_dpo_ablations.csv',
+        '../assets/data/apo/smollm3_dpo_ablations.csv',
+        '../../assets/data/apo/smollm3_dpo_ablations.csv'
+      ];
+
+      const fetchFirstAvailable = async (paths) => {
+        for (const p of paths) {
+          try {
+            const r = await fetch(p, { cache: 'no-cache' });
+            if (r.ok) return await r.text();
+          } catch (e) {}
+        }
+        throw new Error('CSV not found');
+      };
+
+      fetchFirstAvailable(CSV_PATHS)
+        .then((csvText) => {
+          const data = d3.csvParse(csvText);
+
+          // Get unique methods and benchmarks
+          const methods = ['SFT', 'DPO', 'IPO', 'APO-zero', 'APO-down', 'DiscoPOP'];
+          const benchmarks = ['aime25', 'gpqa_d', 'ifeval', 'lcb_v4'];
+          const benchmarkNames = {
+            'aime25': 'AIME 2025',
+            'gpqa_d': 'GPQA Diamond',
+            'ifeval': 'IFEval',
+            'lcb_v4': 'LiveCodeBench v4'
+          };
+
+          let selectedMode = 'no_think';
+          let selectedBenchmark = 'ifeval';
+          let showDelta = false;
+
+          // Get colors
+          const colors = window.ColorPalettes
+            ? window.ColorPalettes.getColors('categorical', methods.length)
+            : ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949'];
+
+          // Create controls
+          const controls = document.createElement('div');
+          controls.className = 'controls';
+
+          // Reasoning mode select
+          const modeGroup = document.createElement('div');
+          modeGroup.className = 'control-group';
+
+          const modeLabel = document.createElement('label');
+          modeLabel.textContent = 'Reasoning mode';
+          modeLabel.setAttribute('for', 'mode-select-' + Date.now());
+
+          const modeSelect = document.createElement('select');
+          modeSelect.id = modeLabel.getAttribute('for');
+
+          const thinkOption = document.createElement('option');
+          thinkOption.value = 'think';
+          thinkOption.textContent = '/think';
+
+          const noThinkOption = document.createElement('option');
+          noThinkOption.value = 'no_think';
+          noThinkOption.textContent = '/no_think';
+          noThinkOption.selected = true;
+
+          modeSelect.appendChild(thinkOption);
+          modeSelect.appendChild(noThinkOption);
+
+          modeSelect.addEventListener('change', (e) => {
+            selectedMode = e.target.value;
+            render();
+          });
+
+          modeGroup.appendChild(modeLabel);
+          modeGroup.appendChild(modeSelect);
+
+          // Benchmark select
+          const benchmarkGroup = document.createElement('div');
+          benchmarkGroup.className = 'control-group';
+
+          const benchmarkLabel = document.createElement('label');
+          benchmarkLabel.textContent = 'Benchmark';
+          benchmarkLabel.setAttribute('for', 'benchmark-select-' + Date.now());
+
+          const benchmarkSelect = document.createElement('select');
+          benchmarkSelect.id = benchmarkLabel.getAttribute('for');
+
+          benchmarks.forEach(bench => {
+            const option = document.createElement('option');
+            option.value = bench;
+            option.textContent = benchmarkNames[bench];
+            if (bench === 'ifeval') option.selected = true;
+            benchmarkSelect.appendChild(option);
+          });
+
+          benchmarkSelect.addEventListener('change', (e) => {
+            selectedBenchmark = e.target.value;
+            render();
+          });
+
+          benchmarkGroup.appendChild(benchmarkLabel);
+          benchmarkGroup.appendChild(benchmarkSelect);
+
+          // Delta checkbox
+          const deltaGroup = document.createElement('div');
+          deltaGroup.className = 'control-group';
+
+          const deltaCheckboxGroup = document.createElement('div');
+          deltaCheckboxGroup.className = 'checkbox-group';
+
+          const deltaCheckbox = document.createElement('input');
+          deltaCheckbox.type = 'checkbox';
+          deltaCheckbox.id = 'delta-checkbox-' + Date.now();
+
+          const deltaLabel = document.createElement('label');
+          deltaLabel.textContent = 'Show Δ vs SFT';
+          deltaLabel.setAttribute('for', deltaCheckbox.id);
+
+          deltaCheckbox.addEventListener('change', (e) => {
+            showDelta = e.target.checked;
+            render();
+          });
+
+          deltaCheckboxGroup.appendChild(deltaCheckbox);
+          deltaCheckboxGroup.appendChild(deltaLabel);
+          deltaGroup.appendChild(deltaCheckboxGroup);
+
+          controls.appendChild(modeGroup);
+          controls.appendChild(benchmarkGroup);
+          controls.appendChild(deltaGroup);
+          container.appendChild(controls);
+
+          // Create legend
+          const legend = document.createElement('div');
+          legend.className = 'legend';
+
+          const legendTitle = document.createElement('div');
+          legendTitle.className = 'legend-title';
+          legendTitle.textContent = 'Legend';
+
+          const legendItems = document.createElement('div');
+          legendItems.className = 'items';
+
+          methods.forEach((method, idx) => {
+            const item = document.createElement('span');
+            item.className = 'item';
+
+            const swatch = document.createElement('span');
+            swatch.className = 'swatch';
+            swatch.style.background = colors[idx];
+
+            const text = document.createElement('span');
+            text.textContent = method;
+
+            item.appendChild(swatch);
+            item.appendChild(text);
+            legendItems.appendChild(item);
+          });
+
+          legend.appendChild(legendTitle);
+          legend.appendChild(legendItems);
+          container.appendChild(legend);
+
+          function updateSize() {
+            width = container.clientWidth || 800;
+            height = Math.max(360, Math.round(width / 2.5));
+            svg.attr('width', width).attr('height', height);
+            gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+            return {
+              innerWidth: width - margin.left - margin.right,
+              innerHeight: height - margin.top - margin.bottom
+            };
+          }
+
+          function render() {
+            const { innerWidth, innerHeight } = updateSize();
+
+            // Clear previous
+            gRoot.selectAll('*').remove();
+
+            // Filter data for selected mode
+            const filteredData = data.filter(d => d['reasoning mode'] === selectedMode);
+
+            // Create data for chart
+            let chartData = methods.map(method => {
+              const row = filteredData.find(d => d.Method === method);
+              const absoluteValue = row ? parseFloat(row[selectedBenchmark]) : 0;
+              return {
+                method,
+                absoluteValue,
+                value: absoluteValue
+              };
+            });
+
+            // Get SFT baseline value
+            const sftValue = chartData.find(d => d.method === 'SFT').absoluteValue;
+
+            // Calculate delta if checkbox is checked
+            if (showDelta) {
+              chartData = chartData.map(d => ({
+                ...d,
+                value: d.method === 'SFT' ? 0 : d.absoluteValue - sftValue
+              }));
+            }
+
+            // Separate SFT and sort others by descending value
+            const sftData = chartData.find(d => d.method === 'SFT');
+            const otherData = chartData.filter(d => d.method !== 'SFT')
+              .sort((a, b) => b.value - a.value);
+
+            // Recombine with SFT first (unless showing delta)
+            chartData = showDelta ? otherData : [sftData, ...otherData];
+
+            // Get ordered methods for color mapping and x-axis
+            const orderedMethods = chartData.map(d => d.method);
+
+            // Scales
+            const xScale = d3.scaleBand()
+              .domain(orderedMethods)
+              .range([0, innerWidth])
+              .padding(0.3);
+
+            // Set y-axis domain based on whether we're showing delta
+            const yMin = showDelta ? Math.min(0, d3.min(chartData, d => d.value)) : 0;
+            const yMax = showDelta
+              ? Math.max(Math.abs(yMin), d3.max(chartData, d => d.value)) * 1.1
+              : d3.max(chartData, d => d.value) * 1.1;
+
+            const yScale = d3.scaleLinear()
+              .domain(showDelta ? [yMin * 1.1, yMax] : [0, yMax])
+              .range([innerHeight, 0])
+              .nice();
+
+            // Grid
+            gRoot.append('g')
+              .attr('class', 'grid')
+              .call(
+                d3.axisLeft(yScale)
+                  .ticks(6)
+                  .tickSize(-innerWidth)
+                  .tickFormat('')
+              )
+              .call(g => g.select('.domain').remove());
+
+            // Create color map based on original method order
+            const colorMap = {};
+            methods.forEach((method, idx) => {
+              colorMap[method] = colors[idx];
+            });
+
+            // Add zero line if showing delta
+            if (showDelta) {
+              gRoot.append('line')
+                .attr('x1', 0)
+                .attr('x2', innerWidth)
+                .attr('y1', yScale(0))
+                .attr('y2', yScale(0))
+                .attr('stroke', 'var(--text-color)')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '4,4')
+                .attr('opacity', 0.5);
+            }
+
+            // Bars
+            gRoot.selectAll('rect.bar')
+              .data(chartData)
+              .join('rect')
+              .attr('class', 'bar')
+              .attr('x', d => xScale(d.method))
+              .attr('y', d => d.value >= 0 ? yScale(d.value) : yScale(0))
+              .attr('width', xScale.bandwidth())
+              .attr('height', d => Math.abs(yScale(d.value) - yScale(0)))
+              .attr('fill', d => colorMap[d.method])
+              .attr('opacity', 0.85)
+              .on('mouseenter', (event, d) => {
+                const deltaText = showDelta && d.method !== 'SFT'
+                  ? `Δ: ${d.value >= 0 ? '+' : ''}${d.value.toFixed(2)}%`
+                  : '';
+                const absoluteText = `${benchmarkNames[selectedBenchmark]}: ${d.absoluteValue.toFixed(2)}%`;
+                const html = `<strong>${d.method}</strong><br/>${absoluteText}${deltaText ? '<br/>' + deltaText : ''}`;
+                showTooltip(html, event);
+              })
+              .on('mouseleave', hideTooltip);
+
+            // X axis
+            const xAxis = gRoot.append('g')
+              .attr('class', 'axes')
+              .attr('transform', `translate(0,${innerHeight})`)
+              .call(d3.axisBottom(xScale));
+
+            xAxis.select('.domain').remove();
+
+            xAxis.selectAll('text')
+              .style('text-anchor', 'middle');
+
+            // Y axis
+            const yAxis = gRoot.append('g')
+              .attr('class', 'axes')
+              .call(d3.axisLeft(yScale).ticks(6));
+
+            yAxis.select('.domain').remove();
+
+            // Y axis label
+            gRoot.append('text')
+              .attr('class', 'axes')
+              .attr('transform', 'rotate(-90)')
+              .attr('x', -innerHeight / 2)
+              .attr('y', -45)
+              .attr('text-anchor', 'middle')
+              .style('font-size', '12px')
+              .style('fill', 'var(--text-color)')
+              .text(showDelta ? 'Δ Score vs SFT (%)' : 'Score (%)');
+          }
+
+          render();
+
+          if (window.ResizeObserver) {
+            const ro = new ResizeObserver(() => render());
+            ro.observe(container);
+          } else {
+            window.addEventListener('resize', render);
+          }
+        })
+        .catch((err) => {
+          const pre = document.createElement('pre');
+          pre.textContent = 'Error loading data: ' + err.message;
+          pre.style.cssText = 'color:red;font-size:12px;padding:12px;margin:0;';
+          container.appendChild(pre);
+        });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>

app/src/content/embeds/d3-po-lr-ablation.html

@@ -0,0 +1,538 @@
+<div class="d3-apo-lr-ablation"></div>
+<style>
+  .d3-apo-lr-ablation {
+    width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    position: relative;
+    --axis-color: var(--text-color, #333);
+    --tick-color: var(--muted-color, #666);
+    --grid-color: rgba(0,0,0,.08);
+  }
+  [data-theme="dark"] .d3-apo-lr-ablation {
+    --axis-color: var(--text-color, #ccc);
+    --tick-color: var(--muted-color, #999);
+    --grid-color: rgba(255,255,255,.10);
+  }
+  .d3-apo-lr-ablation svg {
+    display: block;
+    overflow: visible;
+  }
+  .d3-apo-lr-ablation .axes path,
+  .d3-apo-lr-ablation .axes line {
+    stroke: var(--axis-color);
+    shape-rendering: crispEdges;
+  }
+  .d3-apo-lr-ablation .axes text {
+    fill: var(--tick-color);
+    font-size: 11px;
+  }
+  .d3-apo-lr-ablation .grid line {
+    stroke: var(--grid-color);
+    stroke-dasharray: 2,2;
+    shape-rendering: crispEdges;
+  }
+  .d3-apo-lr-ablation .axis-label {
+    fill: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .d3-apo-lr-ablation .line-think {
+    fill: none;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .d3-apo-lr-ablation .line-no-think {
+    fill: none;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .d3-apo-lr-ablation .reference-line {
+    fill: none;
+    stroke-width: 1.5;
+    stroke-dasharray: 5, 5;
+    opacity: 0.4;
+  }
+  .d3-apo-lr-ablation .dot {
+    stroke: var(--surface-bg);
+    stroke-width: 2;
+  }
+  .d3-apo-lr-ablation .header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 16px;
+    flex-wrap: wrap;
+  }
+  .d3-apo-lr-ablation .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-apo-lr-ablation .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-apo-lr-ablation .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-apo-lr-ablation .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+  }
+  .d3-apo-lr-ablation .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+  .d3-apo-lr-ablation .legend .swatch-line {
+    width: 20px;
+    height: 2px;
+    border: none;
+  }
+  .d3-apo-lr-ablation .legend .swatch-dashed {
+    width: 20px;
+    height: 2px;
+    border: none;
+    background: repeating-linear-gradient(
+      to right,
+      var(--text-color) 0,
+      var(--text-color) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+  }
+  .d3-apo-lr-ablation .controls {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+  .d3-apo-lr-ablation .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-apo-lr-ablation .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-apo-lr-ablation .controls select {
+    font-size: 12px;
+    padding: 8px 28px 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+  .d3-apo-lr-ablation .controls select:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+  .d3-apo-lr-ablation .d3-tooltip {
+    position: absolute;
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 12px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    font-size: 12px;
+    z-index: 1000;
+  }
+  .d3-apo-lr-ablation .tooltip-title {
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: var(--text-color);
+  }
+  .d3-apo-lr-ablation .tooltip-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 4px 0;
+    color: var(--text-color);
+  }
+  .d3-apo-lr-ablation .tooltip-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-apo-lr-ablation'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-apo-lr-ablation'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Data embedded inline
+      const data = [{"Learning rate":0.00001,"system_prompt":"/think","Evaluation":"AIME25","Score":29.9},{"Learning rate":0.00001,"system_prompt":"/no_think","Evaluation":"AIME25","Score":4.9},{"Learning rate":0.000005,"system_prompt":"/think","Evaluation":"AIME25","Score":36.46},{"Learning rate":0.000001,"system_prompt":"/think","Evaluation":"AIME25","Score":45.47},{"Learning rate":0.000001,"system_prompt":"/no_think","Evaluation":"AIME25","Score":7.92},{"Learning rate":0.0000005,"system_prompt":"/think","Evaluation":"AIME25","Score":48.7},{"Learning rate":0.0000005,"system_prompt":"/no_think","Evaluation":"AIME25","Score":7.5},{"Learning rate":0.0000001,"system_prompt":"/think","Evaluation":"AIME25","Score":48.59},{"Learning rate":0.0000001,"system_prompt":"/no_think","Evaluation":"AIME25","Score":9.27},{"Learning rate":0.00001,"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":34.28},{"Learning rate":0.00001,"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":26.64},{"Learning rate":0.000005,"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":36.93},{"Learning rate":0.000005,"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":29.04},{"Learning rate":0.000001,"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":42.49},{"Learning rate":0.000001,"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":32.58},{"Learning rate":0.0000005,"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":44.7},{"Learning rate":0.0000005,"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":32.77},{"Learning rate":0.0000001,"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":44.44},{"Learning rate":0.0000001,"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":32.2},{"Learning rate":0.00001,"system_prompt":"/think","Evaluation":"IF-Eval","Score":69.72},{"Learning rate":0.00001,"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":70.86},{"Learning rate":0.000005,"system_prompt":"/think","Evaluation":"IF-Eval","Score":70.97},{"Learning rate":0.000005,"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":75.46},{"Learning rate":0.000001,"system_prompt":"/think","Evaluation":"IF-Eval","Score":69.88},{"Learning rate":0.000001,"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":74.46},{"Learning rate":0.0000005,"system_prompt":"/think","Evaluation":"IF-Eval","Score":72.61},{"Learning rate":0.0000005,"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":77.13},{"Learning rate":0.0000001,"system_prompt":"/think","Evaluation":"IF-Eval","Score":73.86},{"Learning rate":0.0000001,"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":77.0},{"Learning rate":0.00001,"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":13.86},{"Learning rate":0.00001,"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":11.88},{"Learning rate":0.000005,"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":21.78},{"Learning rate":0.000005,"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":16.83},{"Learning rate":0.000001,"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":23.76},{"Learning rate":0.000001,"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":13.86},{"Learning rate":0.0000005,"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":25.74},{"Learning rate":0.0000005,"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":12.87},{"Learning rate":0.0000001,"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":31.68},{"Learning rate":0.0000001,"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":11.88},{"Learning rate":0.00001,"system_prompt":"/think","Evaluation":"Average","Score":36.94},{"Learning rate":0.00001,"system_prompt":"/no_think","Evaluation":"Average","Score":28.57},{"Learning rate":0.000005,"system_prompt":"/think","Evaluation":"Average","Score":41.535},{"Learning rate":0.000005,"system_prompt":"/no_think","Evaluation":"Average","Score":40.4433333333},{"Learning rate":0.000001,"system_prompt":"/think","Evaluation":"Average","Score":45.4},{"Learning rate":0.000001,"system_prompt":"/no_think","Evaluation":"Average","Score":32.205},{"Learning rate":0.0000005,"system_prompt":"/think","Evaluation":"Average","Score":47.9375},{"Learning rate":0.0000005,"system_prompt":"/no_think","Evaluation":"Average","Score":32.5675},{"Learning rate":0.0000001,"system_prompt":"/think","Evaluation":"Average","Score":49.6425},{"Learning rate":0.0000001,"system_prompt":"/no_think","Evaluation":"Average","Score":32.5875}];
+      const sftData = [{"system_prompt":"/think","Evaluation":"AIME25","Score":36.56},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":4.01},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":42.23},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":30.43},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":70.03},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":67.29},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":36.63},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":12.87},{"system_prompt":"/think","Evaluation":"Average","Score":46.3625},{"system_prompt":"/no_think","Evaluation":"Average","Score":28.65}];
+
+      // Get colors from ColorPalettes or fallback
+      const getColors = () => {
+        if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+          const colors = window.ColorPalettes.getColors('categorical', 2);
+          return { think: colors[0], noThink: colors[1] };
+        }
+        return { think: '#E377C2', noThink: '#7FC97F' };
+      };
+
+      let colors = getColors();
+
+      // Set up dimensions
+      const margin = { top: 16, right: 28, bottom: 56, left: 64 };
+
+      // Create SVG
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const g = svg.append('g');
+
+      // Tooltip
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          transform: 'translate(-9999px, -9999px)',
+          pointerEvents: 'none',
+          padding: '8px 10px',
+          borderRadius: '8px',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          border: '1px solid var(--border-color)',
+          background: 'var(--surface-bg)',
+          color: 'var(--text-color)',
+          boxShadow: '0 4px 24px rgba(0,0,0,.18)',
+          opacity: '0',
+          transition: 'opacity .12s ease',
+          zIndex: '1000'
+        });
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      const showTooltip = (html, event) => {
+        tipInner.innerHTML = html;
+        const [mx, my] = d3.pointer(event, container);
+        const offsetX = 12, offsetY = 12;
+        tip.style.transform = `translate(${mx + offsetX}px, ${my + offsetY}px)`;
+        tip.style.opacity = '1';
+      };
+
+      const hideTooltip = () => {
+        tip.style.opacity = '0';
+        setTimeout(() => {
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        }, 120);
+      };
+
+      // Get unique evaluations
+      const evaluations = [...new Set(data.map(d => d.Evaluation))];
+
+      // Create header with legend and controls
+      const header = d3.select(container).append('div').attr('class', 'header');
+
+      const legend = header.append('div').attr('class', 'legend');
+      legend.append('div').attr('class', 'legend-title').text('Legend');
+      const legendItems = legend.append('div').attr('class', 'items');
+
+      const controls = header.append('div').attr('class', 'controls');
+      const controlGroup = controls.append('div').attr('class', 'control-group');
+      controlGroup.append('label').attr('for', 'metric-select-lr').text('Metric');
+      const select = controlGroup.append('select').attr('id', 'metric-select-lr');
+
+      // Populate dropdown
+      select.selectAll('option')
+        .data(evaluations)
+        .enter()
+        .append('option')
+        .text(d => d)
+        .attr('value', d => d);
+
+      // Build legend
+      const buildLegend = () => {
+        legendItems.html('');
+
+        const thinkItem = legendItems.append('span').attr('class', 'item');
+        thinkItem.append('span').attr('class', 'swatch-line').style('background', colors.think);
+        thinkItem.append('span').text('/think');
+
+        const noThinkItem = legendItems.append('span').attr('class', 'item');
+        noThinkItem.append('span').attr('class', 'swatch-line').style('background', colors.noThink);
+        noThinkItem.append('span').text('/no_think');
+
+        const sftItem = legendItems.append('span').attr('class', 'item');
+        sftItem.append('span').attr('class', 'swatch-dashed');
+        sftItem.append('span').text('SFT checkpoint');
+      };
+
+      buildLegend();
+
+      // Update chart function
+      function updateChart(evaluation) {
+        const filtered = data.filter(d => d.Evaluation === evaluation);
+        const thinkData = filtered.filter(d => d.system_prompt === "/think").sort((a, b) => a["Learning rate"] - b["Learning rate"]);
+        const noThinkData = filtered.filter(d => d.system_prompt === "/no_think").sort((a, b) => a["Learning rate"] - b["Learning rate"]);
+
+        g.selectAll("*").remove();
+
+        const sftThink = sftData.find(d => d.Evaluation === evaluation && d.system_prompt === "/think");
+        const sftNoThink = sftData.find(d => d.Evaluation === evaluation && d.system_prompt === "/no_think");
+
+        const width = container.clientWidth || 800;
+        const height = Math.max(320, Math.round(width / 2.5));
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+
+        svg.attr('width', width).attr('height', height);
+        g.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        // Scales
+        const xScale = d3.scaleLog()
+          .domain([d3.min(filtered, d => d["Learning rate"]), d3.max(filtered, d => d["Learning rate"])])
+          .range([0, innerWidth]);
+
+        const allScores = filtered.map(d => d.Score);
+        if (sftThink) allScores.push(sftThink.Score);
+        if (sftNoThink) allScores.push(sftNoThink.Score);
+        const maxScore = d3.max(allScores);
+
+        const yScale = d3.scaleLinear()
+          .domain([0, maxScore * 1.1])
+          .range([innerHeight, 0]);
+
+        // Grid
+        g.append("g")
+          .attr("class", "grid")
+          .attr("transform", `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).tickSize(-innerHeight).tickFormat("").tickSizeOuter(0));
+
+        g.append("g")
+          .attr("class", "grid")
+          .call(d3.axisLeft(yScale).tickSize(-innerWidth).tickFormat("").tickSizeOuter(0));
+
+        // Axes
+        const tickValues = [1e-7, 5e-7, 1e-6, 5e-6, 1e-5];
+        g.append("g")
+          .attr("class", "axes")
+          .attr("transform", `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).tickValues(tickValues).tickFormat(d3.format(".0e")).tickSizeOuter(0))
+          .call(gAxis => {
+            gAxis.selectAll(".tick line").attr("stroke", "var(--axis-color)").style("opacity", 1);
+            gAxis.selectAll(".tick text").attr("fill", "var(--tick-color)").style("opacity", 1);
+            gAxis.select(".domain").attr("stroke", "var(--axis-color)");
+          });
+
+        g.append("g")
+          .attr("class", "axes")
+          .call(d3.axisLeft(yScale).ticks(6).tickSizeOuter(0))
+          .call(gAxis => {
+            gAxis.selectAll(".tick line").attr("stroke", "var(--axis-color)").style("opacity", 1);
+            gAxis.selectAll(".tick text").attr("fill", "var(--tick-color)").style("opacity", 1);
+            gAxis.select(".domain").attr("stroke", "var(--axis-color)");
+          });
+
+        // Axis labels
+        g.append("text")
+          .attr("class", "axis-label")
+          .attr("text-anchor", "middle")
+          .attr("x", innerWidth / 2)
+          .attr("y", innerHeight + 40)
+          .text("Learning rate");
+
+        g.append("text")
+          .attr("class", "axis-label")
+          .attr("text-anchor", "middle")
+          .attr("transform", "rotate(-90)")
+          .attr("y", -45)
+          .attr("x", -innerHeight / 2)
+          .text("Score (%)");
+
+        // Line generator
+        const line = d3.line()
+          .x(d => xScale(d["Learning rate"]))
+          .y(d => yScale(d.Score));
+
+        // Reference lines
+        if (sftThink) {
+          g.append("line")
+            .attr("class", "reference-line")
+            .style("stroke", colors.think)
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", yScale(sftThink.Score))
+            .attr("y2", yScale(sftThink.Score));
+        }
+
+        if (sftNoThink) {
+          g.append("line")
+            .attr("class", "reference-line")
+            .style("stroke", colors.noThink)
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", yScale(sftNoThink.Score))
+            .attr("y2", yScale(sftNoThink.Score));
+        }
+
+        // Lines
+        g.append("path")
+          .datum(thinkData)
+          .attr("class", "line-think")
+          .style("stroke", colors.think)
+          .attr("d", line);
+
+        g.append("path")
+          .datum(noThinkData)
+          .attr("class", "line-no-think")
+          .style("stroke", colors.noThink)
+          .attr("d", line);
+
+        // Dots for /think
+        g.selectAll(".dot-think")
+          .data(thinkData)
+          .enter()
+          .append("circle")
+          .attr("class", "dot")
+          .style("fill", colors.think)
+          .attr("cx", d => xScale(d["Learning rate"]))
+          .attr("cy", d => yScale(d.Score))
+          .attr("r", 4)
+          .on("mouseenter", function(event, d) {
+            const noThinkValue = noThinkData.find(item => item["Learning rate"] === d["Learning rate"]);
+            const html = `
+              <div class="tooltip-title">LR ${d["Learning rate"].toExponential(0)}</div>
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.think};"></div>
+                <span>/think: ${d.Score.toFixed(2)}%</span>
+              </div>
+              ${noThinkValue ? `
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.noThink};"></div>
+                <span>/no_think: ${noThinkValue.Score.toFixed(2)}%</span>
+              </div>` : ''}
+            `;
+            showTooltip(html, event);
+          })
+          .on("mouseleave", hideTooltip);
+
+        // Dots for /no_think
+        g.selectAll(".dot-no-think")
+          .data(noThinkData)
+          .enter()
+          .append("circle")
+          .attr("class", "dot")
+          .style("fill", colors.noThink)
+          .attr("cx", d => xScale(d["Learning rate"]))
+          .attr("cy", d => yScale(d.Score))
+          .attr("r", 4)
+          .on("mouseenter", function(event, d) {
+            const thinkValue = thinkData.find(item => item["Learning rate"] === d["Learning rate"]);
+            const html = `
+              <div class="tooltip-title">LR ${d["Learning rate"].toExponential(0)}</div>
+              ${thinkValue ? `
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.think};"></div>
+                <span>/think: ${thinkValue.Score.toFixed(2)}%</span>
+              </div>` : ''}
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.noThink};"></div>
+                <span>/no_think: ${d.Score.toFixed(2)}%</span>
+              </div>
+            `;
+            showTooltip(html, event);
+          })
+          .on("mouseleave", hideTooltip);
+      }
+
+      // Set default value to "Average" if it exists
+      const defaultEval = evaluations.includes("Average") ? "Average" : evaluations[0];
+      select.property("value", defaultEval);
+
+      // Initial chart
+      updateChart(defaultEval);
+
+      // Update on dropdown change
+      select.on("change", function() {
+        updateChart(this.value);
+      });
+
+      // Resize handling
+      const rerender = () => updateChart(select.property("value"));
+      if (window.ResizeObserver) {
+        const ro = new ResizeObserver(() => rerender());
+        ro.observe(container);
+      } else {
+        window.addEventListener('resize', rerender);
+      }
+
+      // Listen for ColorPalettes changes
+      if (window.ColorPalettes && typeof window.ColorPalettes.addListener === 'function') {
+        window.ColorPalettes.addListener(() => {
+          colors = getColors();
+          buildLegend();
+          updateChart(select.property("value"));
+        });
+      }
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>

app/src/content/embeds/d3-po-size-ablation.html

@@ -0,0 +1,537 @@
+<div class="d3-apo-size-ablation"></div>
+<style>
+  .d3-apo-size-ablation {
+    width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    position: relative;
+    --axis-color: var(--text-color, #333);
+    --tick-color: var(--muted-color, #666);
+    --grid-color: rgba(0,0,0,.08);
+  }
+  [data-theme="dark"] .d3-apo-size-ablation {
+    --axis-color: var(--text-color, #ccc);
+    --tick-color: var(--muted-color, #999);
+    --grid-color: rgba(255,255,255,.10);
+  }
+  .d3-apo-size-ablation svg {
+    display: block;
+    overflow: visible;
+  }
+  .d3-apo-size-ablation .axes path,
+  .d3-apo-size-ablation .axes line {
+    stroke: var(--axis-color);
+    shape-rendering: crispEdges;
+  }
+  .d3-apo-size-ablation .axes text {
+    fill: var(--tick-color);
+    font-size: 11px;
+  }
+  .d3-apo-size-ablation .grid line {
+    stroke: var(--grid-color);
+    stroke-dasharray: 2,2;
+    shape-rendering: crispEdges;
+  }
+  .d3-apo-size-ablation .axis-label {
+    fill: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .d3-apo-size-ablation .line-think {
+    fill: none;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .d3-apo-size-ablation .line-no-think {
+    fill: none;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .d3-apo-size-ablation .reference-line {
+    fill: none;
+    stroke-width: 1.5;
+    stroke-dasharray: 5, 5;
+    opacity: 0.4;
+  }
+  .d3-apo-size-ablation .dot {
+    stroke: var(--surface-bg);
+    stroke-width: 2;
+  }
+  .d3-apo-size-ablation .header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 16px;
+    flex-wrap: wrap;
+  }
+  .d3-apo-size-ablation .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-apo-size-ablation .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-apo-size-ablation .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-apo-size-ablation .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+  }
+  .d3-apo-size-ablation .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+  .d3-apo-size-ablation .legend .swatch-line {
+    width: 20px;
+    height: 2px;
+    border: none;
+  }
+  .d3-apo-size-ablation .legend .swatch-dashed {
+    width: 20px;
+    height: 2px;
+    border: none;
+    background: repeating-linear-gradient(
+      to right,
+      var(--text-color) 0,
+      var(--text-color) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+  }
+  .d3-apo-size-ablation .controls {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+  .d3-apo-size-ablation .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-apo-size-ablation .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-apo-size-ablation .controls select {
+    font-size: 12px;
+    padding: 8px 28px 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+  .d3-apo-size-ablation .controls select:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+  .d3-apo-size-ablation .d3-tooltip {
+    position: absolute;
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 12px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    font-size: 12px;
+    z-index: 1000;
+  }
+  .d3-apo-size-ablation .tooltip-title {
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: var(--text-color);
+  }
+  .d3-apo-size-ablation .tooltip-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 4px 0;
+    color: var(--text-color);
+  }
+  .d3-apo-size-ablation .tooltip-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-apo-size-ablation'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-apo-size-ablation'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Data embedded inline
+      const data = [{"system_prompt":"/think","Evaluation":"AIME25","Score":45.47,"Data Subset":169346},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":7.92,"Data Subset":169346},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":42.49,"Data Subset":169346},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":32.58,"Data Subset":169346},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":69.88,"Data Subset":169346},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":74.46,"Data Subset":169346},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":23.76,"Data Subset":169346},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":13.86,"Data Subset":169346},{"system_prompt":"/think","Evaluation":"Average","Score":45.4,"Data Subset":169346},{"system_prompt":"/no_think","Evaluation":"Average","Score":32.205,"Data Subset":169346},{"system_prompt":"/think","Evaluation":"AIME25","Score":42.4,"Data Subset":1693},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":4.43,"Data Subset":1693},{"system_prompt":"/think","Evaluation":"AIME25","Score":45.36,"Data Subset":8467},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":8.23,"Data Subset":8467},{"system_prompt":"/think","Evaluation":"AIME25","Score":48.54,"Data Subset":16934},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":8.54,"Data Subset":16934},{"system_prompt":"/think","Evaluation":"AIME25","Score":48.65,"Data Subset":42336},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":7.4,"Data Subset":42336},{"system_prompt":"/think","Evaluation":"AIME25","Score":48.65,"Data Subset":84673},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":6.93,"Data Subset":84673},{"system_prompt":"/think","Evaluation":"AIME25","Score":45.16,"Data Subset":127009},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":7.97,"Data Subset":127009},{"system_prompt":"/think","Evaluation":"AIME25","Score":43.18,"Data Subset":338692},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":5.94,"Data Subset":338692},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":43.75,"Data Subset":1693},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":32.32,"Data Subset":1693},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":43.94,"Data Subset":8467},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":31.76,"Data Subset":8467},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":45.39,"Data Subset":16934},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":31.19,"Data Subset":16934},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":42.55,"Data Subset":42336},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":31.69,"Data Subset":42336},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":44.51,"Data Subset":84673},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":33.84,"Data Subset":84673},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":43.12,"Data Subset":127009},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":31.12,"Data Subset":127009},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":43.12,"Data Subset":338692},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":30.3,"Data Subset":338692},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":71.13,"Data Subset":1693},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":70.93,"Data Subset":1693},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":71.97,"Data Subset":8467},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":74.24,"Data Subset":8467},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":75.99,"Data Subset":16934},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":77.05,"Data Subset":16934},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":74.66,"Data Subset":42336},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":78.93,"Data Subset":42336},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":73.22,"Data Subset":84673},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":78.24,"Data Subset":84673},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":72.09,"Data Subset":127009},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":78.27,"Data Subset":127009},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":69.23,"Data Subset":338692},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":76.14,"Data Subset":338692},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":41.58,"Data Subset":1693},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":11.88,"Data Subset":1693},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":32.67,"Data Subset":8467},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":9.9,"Data Subset":8467},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":32.67,"Data Subset":16934},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":9.9,"Data Subset":16934},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":32.67,"Data Subset":42336},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":11.88,"Data Subset":42336},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":29.7,"Data Subset":84673},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":15.84,"Data Subset":84673},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":25.74,"Data Subset":127009},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":13.86,"Data Subset":127009},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":25.74,"Data Subset":338692},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":14.85,"Data Subset":338692},{"system_prompt":"/think","Evaluation":"Average","Score":49.715,"Data Subset":1693},{"system_prompt":"/no_think","Evaluation":"Average","Score":29.89,"Data Subset":1693},{"system_prompt":"/think","Evaluation":"Average","Score":48.485,"Data Subset":8467},{"system_prompt":"/no_think","Evaluation":"Average","Score":31.0325,"Data Subset":8467},{"system_prompt":"/think","Evaluation":"Average","Score":50.6475,"Data Subset":16934},{"system_prompt":"/no_think","Evaluation":"Average","Score":31.67,"Data Subset":16934},{"system_prompt":"/think","Evaluation":"Average","Score":49.6325,"Data Subset":42336},{"system_prompt":"/no_think","Evaluation":"Average","Score":32.475,"Data Subset":42336},{"system_prompt":"/think","Evaluation":"Average","Score":49.02,"Data Subset":84673},{"system_prompt":"/no_think","Evaluation":"Average","Score":33.7125,"Data Subset":84673},{"system_prompt":"/think","Evaluation":"Average","Score":46.5275,"Data Subset":127009},{"system_prompt":"/no_think","Evaluation":"Average","Score":32.805,"Data Subset":127009},{"system_prompt":"/think","Evaluation":"Average","Score":45.3175,"Data Subset":338692},{"system_prompt":"/no_think","Evaluation":"Average","Score":31.8075,"Data Subset":338692}];
+      const sftData = [{"system_prompt":"/think","Evaluation":"AIME25","Score":36.56},{"system_prompt":"/no_think","Evaluation":"AIME25","Score":4.01},{"system_prompt":"/think","Evaluation":"GPQA Diamond","Score":42.23},{"system_prompt":"/no_think","Evaluation":"GPQA Diamond","Score":30.43},{"system_prompt":"/think","Evaluation":"IF-Eval","Score":70.03},{"system_prompt":"/no_think","Evaluation":"IF-Eval","Score":67.29},{"system_prompt":"/think","Evaluation":"LiveCodeBench v4","Score":36.63},{"system_prompt":"/no_think","Evaluation":"LiveCodeBench v4","Score":12.87},{"system_prompt":"/think","Evaluation":"Average","Score":46.3625},{"system_prompt":"/no_think","Evaluation":"Average","Score":28.65}];
+
+      // Get colors from ColorPalettes or fallback
+      const getColors = () => {
+        if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+          const colors = window.ColorPalettes.getColors('categorical', 2);
+          return { think: colors[0], noThink: colors[1] };
+        }
+        return { think: '#E377C2', noThink: '#7FC97F' };
+      };
+
+      let colors = getColors();
+
+      // Set up dimensions
+      const margin = { top: 16, right: 28, bottom: 56, left: 64 };
+
+      // Create SVG
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const g = svg.append('g');
+
+      // Tooltip
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          transform: 'translate(-9999px, -9999px)',
+          pointerEvents: 'none',
+          padding: '8px 10px',
+          borderRadius: '8px',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          border: '1px solid var(--border-color)',
+          background: 'var(--surface-bg)',
+          color: 'var(--text-color)',
+          boxShadow: '0 4px 24px rgba(0,0,0,.18)',
+          opacity: '0',
+          transition: 'opacity .12s ease',
+          zIndex: '1000'
+        });
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      const showTooltip = (html, event) => {
+        tipInner.innerHTML = html;
+        const [mx, my] = d3.pointer(event, container);
+        const offsetX = 12, offsetY = 12;
+        tip.style.transform = `translate(${mx + offsetX}px, ${my + offsetY}px)`;
+        tip.style.opacity = '1';
+      };
+
+      const hideTooltip = () => {
+        tip.style.opacity = '0';
+        setTimeout(() => {
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        }, 120);
+      };
+
+      // Get unique evaluations
+      const evaluations = [...new Set(data.map(d => d.Evaluation))];
+
+      // Create header with legend and controls
+      const header = d3.select(container).append('div').attr('class', 'header');
+
+      const legend = header.append('div').attr('class', 'legend');
+      legend.append('div').attr('class', 'legend-title').text('Legend');
+      const legendItems = legend.append('div').attr('class', 'items');
+
+      const controls = header.append('div').attr('class', 'controls');
+      const controlGroup = controls.append('div').attr('class', 'control-group');
+      controlGroup.append('label').attr('for', 'metric-select-size').text('Metric');
+      const select = controlGroup.append('select').attr('id', 'metric-select-size');
+
+      // Populate dropdown
+      select.selectAll('option')
+        .data(evaluations)
+        .enter()
+        .append('option')
+        .text(d => d)
+        .attr('value', d => d);
+
+      // Build legend
+      const buildLegend = () => {
+        legendItems.html('');
+
+        const thinkItem = legendItems.append('span').attr('class', 'item');
+        thinkItem.append('span').attr('class', 'swatch-line').style('background', colors.think);
+        thinkItem.append('span').text('/think');
+
+        const noThinkItem = legendItems.append('span').attr('class', 'item');
+        noThinkItem.append('span').attr('class', 'swatch-line').style('background', colors.noThink);
+        noThinkItem.append('span').text('/no_think');
+
+        const sftItem = legendItems.append('span').attr('class', 'item');
+        sftItem.append('span').attr('class', 'swatch-dashed');
+        sftItem.append('span').text('SFT checkpoint');
+      };
+
+      buildLegend();
+
+      // Update chart function
+      function updateChart(evaluation) {
+        const filtered = data.filter(d => d.Evaluation === evaluation);
+        const thinkData = filtered.filter(d => d.system_prompt === "/think").sort((a, b) => a["Data Subset"] - b["Data Subset"]);
+        const noThinkData = filtered.filter(d => d.system_prompt === "/no_think").sort((a, b) => a["Data Subset"] - b["Data Subset"]);
+
+        g.selectAll("*").remove();
+
+        const sftThink = sftData.find(d => d.Evaluation === evaluation && d.system_prompt === "/think");
+        const sftNoThink = sftData.find(d => d.Evaluation === evaluation && d.system_prompt === "/no_think");
+
+        const width = container.clientWidth || 800;
+        const height = Math.max(320, Math.round(width / 2.5));
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+
+        svg.attr('width', width).attr('height', height);
+        g.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        // Scales
+        const xScale = d3.scaleLog()
+          .domain([d3.min(filtered, d => d["Data Subset"]), d3.max(filtered, d => d["Data Subset"])])
+          .range([0, innerWidth]);
+
+        const allScores = filtered.map(d => d.Score);
+        if (sftThink) allScores.push(sftThink.Score);
+        if (sftNoThink) allScores.push(sftNoThink.Score);
+        const maxScore = d3.max(allScores);
+
+        const yScale = d3.scaleLinear()
+          .domain([0, maxScore * 1.1])
+          .range([innerHeight, 0]);
+
+        // Grid
+        g.append("g")
+          .attr("class", "grid")
+          .attr("transform", `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).tickSize(-innerHeight).tickFormat("").tickSizeOuter(0));
+
+        g.append("g")
+          .attr("class", "grid")
+          .call(d3.axisLeft(yScale).tickSize(-innerWidth).tickFormat("").tickSizeOuter(0));
+
+        // Axes
+        g.append("g")
+          .attr("class", "axes")
+          .attr("transform", `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).ticks(5).tickSizeOuter(0))
+          .call(gAxis => {
+            gAxis.selectAll(".tick line").attr("stroke", "var(--axis-color)").style("opacity", 1);
+            gAxis.selectAll(".tick text").attr("fill", "var(--tick-color)").style("opacity", 1);
+            gAxis.select(".domain").attr("stroke", "var(--axis-color)");
+          });
+
+        g.append("g")
+          .attr("class", "axes")
+          .call(d3.axisLeft(yScale).ticks(6).tickSizeOuter(0))
+          .call(gAxis => {
+            gAxis.selectAll(".tick line").attr("stroke", "var(--axis-color)").style("opacity", 1);
+            gAxis.selectAll(".tick text").attr("fill", "var(--tick-color)").style("opacity", 1);
+            gAxis.select(".domain").attr("stroke", "var(--axis-color)");
+          });
+
+        // Axis labels
+        g.append("text")
+          .attr("class", "axis-label")
+          .attr("text-anchor", "middle")
+          .attr("x", innerWidth / 2)
+          .attr("y", innerHeight + 40)
+          .text("Dataset size");
+
+        g.append("text")
+          .attr("class", "axis-label")
+          .attr("text-anchor", "middle")
+          .attr("transform", "rotate(-90)")
+          .attr("y", -45)
+          .attr("x", -innerHeight / 2)
+          .text("Score (%)");
+
+        // Line generator
+        const line = d3.line()
+          .x(d => xScale(d["Data Subset"]))
+          .y(d => yScale(d.Score));
+
+        // Reference lines
+        if (sftThink) {
+          g.append("line")
+            .attr("class", "reference-line")
+            .style("stroke", colors.think)
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", yScale(sftThink.Score))
+            .attr("y2", yScale(sftThink.Score));
+        }
+
+        if (sftNoThink) {
+          g.append("line")
+            .attr("class", "reference-line")
+            .style("stroke", colors.noThink)
+            .attr("x1", 0)
+            .attr("x2", innerWidth)
+            .attr("y1", yScale(sftNoThink.Score))
+            .attr("y2", yScale(sftNoThink.Score));
+        }
+
+        // Lines
+        g.append("path")
+          .datum(thinkData)
+          .attr("class", "line-think")
+          .style("stroke", colors.think)
+          .attr("d", line);
+
+        g.append("path")
+          .datum(noThinkData)
+          .attr("class", "line-no-think")
+          .style("stroke", colors.noThink)
+          .attr("d", line);
+
+        // Dots for /think
+        g.selectAll(".dot-think")
+          .data(thinkData)
+          .enter()
+          .append("circle")
+          .attr("class", "dot")
+          .style("fill", colors.think)
+          .attr("cx", d => xScale(d["Data Subset"]))
+          .attr("cy", d => yScale(d.Score))
+          .attr("r", 4)
+          .on("mouseenter", function(event, d) {
+            const noThinkValue = noThinkData.find(item => item["Data Subset"] === d["Data Subset"]);
+            const html = `
+              <div class="tooltip-title">Dataset Size ${d["Data Subset"].toLocaleString()}</div>
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.think};"></div>
+                <span>/think: ${d.Score.toFixed(2)}%</span>
+              </div>
+              ${noThinkValue ? `
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.noThink};"></div>
+                <span>/no_think: ${noThinkValue.Score.toFixed(2)}%</span>
+              </div>` : ''}
+            `;
+            showTooltip(html, event);
+          })
+          .on("mouseleave", hideTooltip);
+
+        // Dots for /no_think
+        g.selectAll(".dot-no-think")
+          .data(noThinkData)
+          .enter()
+          .append("circle")
+          .attr("class", "dot")
+          .style("fill", colors.noThink)
+          .attr("cx", d => xScale(d["Data Subset"]))
+          .attr("cy", d => yScale(d.Score))
+          .attr("r", 4)
+          .on("mouseenter", function(event, d) {
+            const thinkValue = thinkData.find(item => item["Data Subset"] === d["Data Subset"]);
+            const html = `
+              <div class="tooltip-title">Dataset Size ${d["Data Subset"].toLocaleString()}</div>
+              ${thinkValue ? `
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.think};"></div>
+                <span>/think: ${thinkValue.Score.toFixed(2)}%</span>
+              </div>` : ''}
+              <div class="tooltip-item">
+                <div class="tooltip-color" style="background-color: ${colors.noThink};"></div>
+                <span>/no_think: ${d.Score.toFixed(2)}%</span>
+              </div>
+            `;
+            showTooltip(html, event);
+          })
+          .on("mouseleave", hideTooltip);
+      }
+
+      // Set default value to "Average" if it exists
+      const defaultEval = evaluations.includes("Average") ? "Average" : evaluations[0];
+      select.property("value", defaultEval);
+
+      // Initial chart
+      updateChart(defaultEval);
+
+      // Update on dropdown change
+      select.on("change", function() {
+        updateChart(this.value);
+      });
+
+      // Resize handling
+      const rerender = () => updateChart(select.property("value"));
+      if (window.ResizeObserver) {
+        const ro = new ResizeObserver(() => rerender());
+        ro.observe(container);
+      } else {
+        window.addEventListener('resize', rerender);
+      }
+
+      // Listen for ColorPalettes changes
+      if (window.ColorPalettes && typeof window.ColorPalettes.addListener === 'function') {
+        window.ColorPalettes.addListener(() => {
+          colors = getColors();
+          buildLegend();
+          updateChart(select.property("value"));
+        });
+      }
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>

app/src/content/embeds/d3-rl-aime25.html

@@ -0,0 +1,536 @@
+<div class="d3-grpo-aime25"></div>
+<style>
+  .d3-grpo-aime25 {
+    width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    position: relative;
+  }
+
+  .d3-grpo-aime25 svg {
+    display: block;
+    width: 100%;
+  }
+
+  .d3-grpo-aime25 .axis path {
+    stroke: none;
+  }
+
+  .d3-grpo-aime25 .axis line {
+    stroke: var(--axis-color);
+    shape-rendering: crispEdges;
+  }
+
+  .d3-grpo-aime25 .axis text {
+    fill: var(--tick-color);
+    font-size: 11px;
+  }
+
+  .d3-grpo-aime25 .grid line {
+    stroke: var(--grid-color);
+    stroke-dasharray: 2,2;
+  }
+
+  .d3-grpo-aime25 .line {
+    fill: none;
+    stroke-width: 2.5;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .d3-grpo-aime25 .axis-label {
+    fill: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .d3-grpo-aime25 .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .d3-grpo-aime25 .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .d3-grpo-aime25 .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .d3-grpo-aime25 .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+
+  .d3-grpo-aime25 .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+    cursor: pointer;
+    user-select: none;
+    opacity: 1;
+    transition: opacity 0.2s ease;
+  }
+
+  .d3-grpo-aime25 .legend .item.dimmed {
+    opacity: 0.3;
+  }
+
+  .d3-grpo-aime25 .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+
+  .d3-grpo-aime25 .controls {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .d3-grpo-aime25 .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .d3-grpo-aime25 .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .d3-grpo-aime25 .controls .toggle-group {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .d3-grpo-aime25 .controls .toggle-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .d3-grpo-aime25 .controls .toggle-btn:hover {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+  }
+
+  .d3-grpo-aime25 .controls .toggle-btn.active {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => {
+        if (window.d3 && typeof window.d3.select === 'function') cb();
+      };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-grpo-aime25'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-grpo-aime25'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Data loading configuration
+      let mountEl = container;
+      while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
+        mountEl = mountEl.parentElement;
+      }
+      let providedData = null;
+      try {
+        const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
+        if (attr && attr.trim()) {
+          providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
+        }
+      } catch (_) {}
+
+      const DEFAULT_CSV = '/data/grpo/aime25_perf.csv';
+      const ensureDataPrefix = (p) => {
+        if (typeof p !== 'string' || !p) return p;
+        if (p.startsWith('/')) return p;
+        return `/data/${p}`;
+      };
+      const normalizeInput = (inp) => Array.isArray(inp)
+        ? inp.map(ensureDataPrefix)
+        : (typeof inp === 'string' ? [ensureDataPrefix(inp)] : null);
+
+      const CSV_PATHS = Array.isArray(providedData)
+        ? normalizeInput(providedData)
+        : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [
+            DEFAULT_CSV,
+            './assets/data/grpo/aime25_perf.csv',
+            '../assets/data/grpo/aime25_perf.csv',
+            '../../assets/data/grpo/aime25_perf.csv'
+          ]);
+
+      const fetchFirstAvailable = async (paths) => {
+        const errors = [];
+        for (const p of paths) {
+          try {
+            const r = await fetch(p, { cache: 'no-cache' });
+            if (r.ok) return await r.text();
+            errors.push(`${p}: ${r.status}`);
+          } catch (e) {
+            errors.push(`${p}: ${e.message}`);
+          }
+        }
+        throw new Error(`CSV not found. Tried:\n${errors.join('\n')}`);
+      };
+
+      // Tooltip setup
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          transform: 'translate(-9999px, -9999px)',
+          pointerEvents: 'none',
+          padding: '8px 10px',
+          borderRadius: '8px',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          border: '1px solid var(--border-color)',
+          background: 'var(--surface-bg)',
+          color: 'var(--text-color)',
+          boxShadow: '0 4px 24px rgba(0,0,0,.18)',
+          opacity: '0',
+          transition: 'opacity .12s ease',
+          zIndex: '1000'
+        });
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      // SVG setup
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+      const gGrid = gRoot.append('g').attr('class', 'grid');
+      const gLines = gRoot.append('g').attr('class', 'lines');
+      const gAxes = gRoot.append('g').attr('class', 'axes');
+
+      // State
+      let width = 800, height = 400;
+      const margin = { top: 16, right: 28, bottom: 56, left: 64 };
+      let series = [];
+      let hiddenSeries = new Set();
+
+      // Color setup
+      const getColors = (count) => {
+        if (window.ColorPalettes && window.ColorPalettes.getColors) {
+          return window.ColorPalettes.getColors('categorical', count);
+        }
+        return ['#4E79A7', '#F28E2B', '#E15759', '#76B7B2', '#59A14F', '#EDC948'];
+      };
+
+      function parseData(csvText) {
+        const rows = d3.csvParse(csvText);
+
+        // Get column names (excluding 'step')
+        const headers = Object.keys(rows[0]).filter(h => h !== 'step');
+
+        // Build series data
+        series = headers.map(header => {
+          const points = rows
+            .map(row => ({
+              step: +row.step,
+              value: +row[header]
+            }))
+            .filter(p => !isNaN(p.step) && !isNaN(p.value));
+
+          return {
+            name: header,
+            points
+          };
+        });
+      }
+
+      function updateSize() {
+        width = container.clientWidth || 800;
+        height = Math.max(320, Math.round(width / 2.5));
+        svg.attr('width', width).attr('height', height);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+        return {
+          innerWidth: width - margin.left - margin.right,
+          innerHeight: height - margin.top - margin.bottom
+        };
+      }
+
+      function render() {
+        const { innerWidth, innerHeight } = updateSize();
+        if (series.length === 0) return;
+
+        // Filter visible series
+        const visibleSeries = series.filter(s => !hiddenSeries.has(s.name));
+        if (visibleSeries.length === 0) return;
+
+        // Get all points
+        const allPoints = visibleSeries.flatMap(s => s.points);
+
+        // Scales
+        const xScale = d3.scaleLinear()
+          .domain([0, d3.max(allPoints, d => d.step) || 1])
+          .range([0, innerWidth])
+          .nice();
+
+        const minVal = d3.min(allPoints, d => d.value);
+        const maxVal = d3.max(allPoints, d => d.value);
+        const yScale = d3.scaleLinear()
+          .domain([minVal * 0.95, maxVal * 1.05])
+          .range([innerHeight, 0]);
+
+        // Grid
+        gGrid.selectAll('.grid-y').data([0])
+          .join('g')
+          .attr('class', 'grid grid-y')
+          .call(d3.axisLeft(yScale)
+            .tickSize(-innerWidth)
+            .tickFormat('')
+          )
+          .call(g => g.select('.domain').remove());
+
+        // Colors
+        const colors = getColors(series.length);
+        const colorScale = (name) => {
+          const idx = series.findIndex(s => s.name === name);
+          return colors[idx % colors.length];
+        };
+
+        // Line generator
+        const line = d3.line()
+          .x(d => xScale(d.step))
+          .y(d => yScale(d.value))
+          .curve(d3.curveMonotoneX);
+
+        // Render lines
+        gLines.selectAll('.line')
+          .data(visibleSeries, d => d.name)
+          .join('path')
+          .attr('class', 'line')
+          .attr('d', d => line(d.points))
+          .attr('stroke', d => colorScale(d.name));
+
+        // Axes
+        gAxes.selectAll('.x-axis').data([0])
+          .join('g')
+          .attr('class', 'x-axis axis')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).ticks(Math.min(10, Math.floor(innerWidth / 80))));
+
+        gAxes.selectAll('.y-axis').data([0])
+          .join('g')
+          .attr('class', 'y-axis axis')
+          .call(d3.axisLeft(yScale).ticks(8));
+
+        // Axis labels
+        gAxes.selectAll('.x-label').data([0])
+          .join('text')
+          .attr('class', 'x-label axis-label')
+          .attr('text-anchor', 'middle')
+          .attr('x', innerWidth / 2)
+          .attr('y', innerHeight + 45)
+          .text('Training step');
+
+        gAxes.selectAll('.y-label').data([0])
+          .join('text')
+          .attr('class', 'y-label axis-label')
+          .attr('text-anchor', 'middle')
+          .attr('transform', `translate(-48,${innerHeight / 2}) rotate(-90)`)
+          .text('AIME 2025 Score (%)');
+
+        // Tooltip interactions
+        const bisect = d3.bisector(d => d.step).left;
+
+        svg.on('mousemove', function(event) {
+          const [mx] = d3.pointer(event, gRoot.node());
+          const step = xScale.invert(mx);
+
+          let tooltipHtml = `<strong>Step: ${Math.round(step)}</strong><br/>`;
+
+          visibleSeries.forEach(s => {
+            const idx = bisect(s.points, step);
+            if (idx > 0 && idx < s.points.length) {
+              const p = s.points[idx];
+              const color = colorScale(s.name);
+              tooltipHtml += `<div style="margin-top:4px"><span style="color:${color}">●</span> ${s.name}: ${p.value.toFixed(2)}%</div>`;
+            }
+          });
+
+          tipInner.innerHTML = tooltipHtml;
+          const tipBounds = tip.getBoundingClientRect();
+          const [px, py] = d3.pointer(event, container);
+
+          let tipX = px + 12;
+          let tipY = py - 12;
+
+          if (tipX + tipBounds.width > width - 10) {
+            tipX = px - tipBounds.width - 12;
+          }
+          if (tipY - tipBounds.height < 10) {
+            tipY = py + 20;
+          }
+
+          tip.style.transform = `translate(${tipX}px, ${tipY}px)`;
+          tip.style.opacity = '1';
+        });
+
+        svg.on('mouseleave', () => {
+          tip.style.opacity = '0';
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        });
+      }
+
+      function makeLegend() {
+        let header = container.querySelector('.header');
+        if (!header) {
+          header = document.createElement('div');
+          header.className = 'header';
+          container.appendChild(header);
+        }
+
+        let legend = header.querySelector('.legend');
+        if (!legend) {
+          legend = document.createElement('div');
+          legend.className = 'legend';
+          header.appendChild(legend);
+        }
+
+        let title = legend.querySelector('.legend-title');
+        if (!title) {
+          title = document.createElement('div');
+          title.className = 'legend-title';
+          title.textContent = 'Overlong Penalty';
+          legend.appendChild(title);
+        } else {
+          title.textContent = 'Overlong Penalty';
+        }
+
+        let items = legend.querySelector('.items');
+        if (!items) {
+          items = document.createElement('div');
+          items.className = 'items';
+          legend.appendChild(items);
+        }
+
+        const colors = getColors(series.length);
+
+        items.innerHTML = '';
+        series.forEach((s, i) => {
+          const item = document.createElement('span');
+          item.className = 'item';
+          if (hiddenSeries.has(s.name)) {
+            item.classList.add('dimmed');
+          }
+
+          const swatch = document.createElement('span');
+          swatch.className = 'swatch';
+          swatch.style.background = colors[i % colors.length];
+
+          const text = document.createElement('span');
+          text.textContent = s.name;
+
+          item.appendChild(swatch);
+          item.appendChild(text);
+          items.appendChild(item);
+
+          item.addEventListener('click', () => {
+            if (hiddenSeries.has(s.name)) {
+              hiddenSeries.delete(s.name);
+            } else {
+              hiddenSeries.add(s.name);
+            }
+            makeLegend();
+            render();
+          });
+        });
+      }
+
+      // Load data and initialize
+      fetchFirstAvailable(CSV_PATHS)
+        .then(csvText => {
+          parseData(csvText);
+          makeLegend();
+          render();
+
+          // Responsiveness
+          if (window.ResizeObserver) {
+            const ro = new ResizeObserver(() => render());
+            ro.observe(container);
+          } else {
+            window.addEventListener('resize', render);
+          }
+        })
+        .catch(err => {
+          const pre = document.createElement('pre');
+          pre.style.color = '#f44336';
+          pre.style.fontSize = '12px';
+          pre.style.padding = '12px';
+          pre.textContent = `Error loading data: ${err.message}`;
+          container.appendChild(pre);
+        });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>

app/src/content/embeds/d3-rl-full-length.html

@@ -0,0 +1,734 @@
+<div class="d3-grpo-full-length"></div>
+<style>
+  .d3-grpo-full-length {
+    width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    position: relative;
+  }
+
+  .d3-grpo-full-length svg {
+    display: block;
+    width: 100%;
+  }
+
+  .d3-grpo-full-length .axis path {
+    stroke: none;
+  }
+
+  .d3-grpo-full-length .axis line {
+    stroke: var(--axis-color);
+    shape-rendering: crispEdges;
+  }
+
+  .d3-grpo-full-length .axis text {
+    fill: var(--tick-color);
+    font-size: 11px;
+  }
+
+  .d3-grpo-full-length .grid line {
+    stroke: var(--grid-color);
+    stroke-dasharray: 2,2;
+  }
+
+  .d3-grpo-full-length .confidence-band {
+    opacity: 0.15;
+  }
+
+  .d3-grpo-full-length .line {
+    fill: none;
+    stroke-width: 2;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .d3-grpo-full-length .axis-label {
+    fill: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .d3-grpo-full-length .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .d3-grpo-full-length .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .d3-grpo-full-length .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .d3-grpo-full-length .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+
+  .d3-grpo-full-length .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+    cursor: pointer;
+    user-select: none;
+    opacity: 1;
+    transition: opacity 0.2s ease;
+  }
+
+  .d3-grpo-full-length .legend .item.dimmed {
+    opacity: 0.3;
+  }
+
+  .d3-grpo-full-length .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+
+  .d3-grpo-full-length .controls {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .d3-grpo-full-length .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .d3-grpo-full-length .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .d3-grpo-full-length .controls .toggle-group {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .d3-grpo-full-length .controls .toggle-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .d3-grpo-full-length .controls .toggle-btn:hover {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+  }
+
+  .d3-grpo-full-length .controls .toggle-btn.active {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => {
+        if (window.d3 && typeof window.d3.select === 'function') cb();
+      };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-grpo-full-length'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-grpo-full-length'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Data loading configuration
+      let mountEl = container;
+      while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
+        mountEl = mountEl.parentElement;
+      }
+      let providedData = null;
+      try {
+        const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
+        if (attr && attr.trim()) {
+          providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
+        }
+      } catch (_) {}
+
+      const DEFAULT_CSV = '/data/grpo/rl_reward_curves.csv';
+      const ensureDataPrefix = (p) => {
+        if (typeof p !== 'string' || !p) return p;
+        // If it starts with /, it's already absolute
+        if (p.startsWith('/')) return p;
+        // Otherwise, prefix with /data/
+        return `/data/${p}`;
+      };
+      const normalizeInput = (inp) => Array.isArray(inp)
+        ? inp.map(ensureDataPrefix)
+        : (typeof inp === 'string' ? [ensureDataPrefix(inp)] : null);
+
+      const CSV_PATHS = Array.isArray(providedData)
+        ? normalizeInput(providedData)
+        : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [
+            DEFAULT_CSV,
+            './assets/data/grpo/rl_reward_curves.csv',
+            '../assets/data/grpo/rl_reward_curves.csv',
+            '../../assets/data/grpo/rl_reward_curves.csv'
+          ]);
+
+      const fetchFirstAvailable = async (paths) => {
+        const errors = [];
+        for (const p of paths) {
+          try {
+            const r = await fetch(p, { cache: 'no-cache' });
+            if (r.ok) return await r.text();
+            errors.push(`${p}: ${r.status}`);
+          } catch (e) {
+            errors.push(`${p}: ${e.message}`);
+          }
+        }
+        throw new Error(`CSV not found. Tried:\n${errors.join('\n')}`);
+      };
+
+      // Tooltip setup
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          transform: 'translate(-9999px, -9999px)',
+          pointerEvents: 'none',
+          padding: '8px 10px',
+          borderRadius: '8px',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          border: '1px solid var(--border-color)',
+          background: 'var(--surface-bg)',
+          color: 'var(--text-color)',
+          boxShadow: '0 4px 24px rgba(0,0,0,.18)',
+          opacity: '0',
+          transition: 'opacity .12s ease',
+          zIndex: '1000'
+        });
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      // SVG setup
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+      const gGrid = gRoot.append('g').attr('class', 'grid');
+      const gBands = gRoot.append('g').attr('class', 'bands');
+      const gLines = gRoot.append('g').attr('class', 'lines');
+      const gAxes = gRoot.append('g').attr('class', 'axes');
+
+      // State
+      let width = 800, height = 400;
+      const margin = { top: 16, right: 28, bottom: 56, left: 64 };
+      let rawData = {}; // Store both datasets
+      let series = [];
+      let hiddenSeries = new Set();
+      let showRunningAverage = true;
+      let currentMetric = 'reward'; // 'reward' or 'length'
+      const RUNNING_AVG_WINDOW = 50; // steps
+
+      // Color setup
+      const getColors = (count) => {
+        if (window.ColorPalettes && window.ColorPalettes.getColors) {
+          return window.ColorPalettes.getColors('categorical', count);
+        }
+        // Fallback colors
+        return ['#4E79A7', '#F28E2B', '#E15759', '#76B7B2', '#59A14F', '#EDC948'];
+      };
+
+      // Calculate running average based on step window
+      function calculateRunningAverage(points, windowSize) {
+        if (points.length === 0) return [];
+
+        const avgPoints = [];
+        for (let i = 0; i < points.length; i++) {
+          const currentStep = points[i].step;
+          const minStep = currentStep - windowSize;
+
+          // Find all points within the window
+          const windowPoints = points.filter(p => p.step >= minStep && p.step <= currentStep);
+
+          if (windowPoints.length > 0) {
+            const avgMean = d3.mean(windowPoints, p => p.mean);
+            const avgMin = d3.mean(windowPoints, p => p.min);
+            const avgMax = d3.mean(windowPoints, p => p.max);
+
+            avgPoints.push({
+              step: currentStep,
+              mean: avgMean,
+              min: avgMin,
+              max: avgMax
+            });
+          }
+        }
+
+        return avgPoints;
+      }
+
+      function parseData(csvText, metricType) {
+        const rows = d3.csvParse(csvText);
+
+        // Determine metric column suffix based on type
+        const metricSuffix = metricType === 'reward'
+          ? 'train/reward'
+          : 'train/completions/mean_terminated_length';
+
+        // Extract run names (each run has _step, mean, MIN, MAX columns)
+        const runNames = [];
+        const headers = Object.keys(rows[0]);
+
+        headers.forEach(h => {
+          if (h.includes(` - ${metricSuffix}`) && !h.includes('MIN') && !h.includes('MAX')) {
+            const runName = h.split(' - ')[0];
+            runNames.push(runName);
+          }
+        });
+
+        // For v18.00, just use a simple label
+        const displayNameMap = {
+          'grpo-SmollM3-3B-GRPO-no-think-v18.00': 'No Penalty'
+        };
+
+        // Build series data using train/global_step for x-axis
+        series = runNames.map(runName => {
+          const meanCol = `${runName} - ${metricSuffix}`;
+          const minCol = `${meanCol}__MIN`;
+          const maxCol = `${meanCol}__MAX`;
+
+          const points = rows
+            .filter(row => row['train/global_step'] && row[meanCol])
+            .map(row => ({
+              step: +row['train/global_step'],
+              mean: +row[meanCol],
+              min: +row[minCol],
+              max: +row[maxCol]
+            }))
+            .filter(p => !isNaN(p.step) && !isNaN(p.mean));
+
+          // Calculate running average
+          const runningAvgPoints = calculateRunningAverage(points, RUNNING_AVG_WINDOW);
+
+          // Map to display name
+          const displayName = displayNameMap[runName] || runName;
+
+          return {
+            name: displayName,
+            fullName: runName,
+            points,
+            runningAvgPoints
+          };
+        });
+      }
+
+      function updateSize() {
+        width = container.clientWidth || 800;
+        height = Math.max(320, Math.round(width / 2.5));
+        svg.attr('width', width).attr('height', height);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+        return {
+          innerWidth: width - margin.left - margin.right,
+          innerHeight: height - margin.top - margin.bottom
+        };
+      }
+
+      function render() {
+        const { innerWidth, innerHeight } = updateSize();
+        if (series.length === 0) return;
+
+        // Filter visible series
+        const visibleSeries = series.filter(s => !hiddenSeries.has(s.name));
+        if (visibleSeries.length === 0) return;
+
+        // Select which points to use based on running average toggle
+        const getPoints = (s) => showRunningAverage ? s.runningAvgPoints : s.points;
+
+        // No filtering for full-length data
+        const getFilteredPoints = (s) => getPoints(s);
+
+        // Get all points for domain calculation
+        const allPoints = visibleSeries.flatMap(s => getFilteredPoints(s));
+
+        // Scales - calculate from data
+        const xScale = d3.scaleLinear()
+          .domain([0, d3.max(allPoints, d => d.step) || 1])
+          .range([0, innerWidth])
+          .nice();
+
+        // Set y-axis domain based on current metric - calculate from data
+        const minVal = d3.min(allPoints, d => d.mean);
+        const maxVal = d3.max(allPoints, d => d.mean);
+        const yDomain = [minVal * 0.95, maxVal * 1.05];
+
+        const yScale = d3.scaleLinear()
+          .domain(yDomain)
+          .range([innerHeight, 0]);
+
+        // Grid
+        gGrid.selectAll('.grid-y').data([0])
+          .join('g')
+          .attr('class', 'grid grid-y')
+          .call(d3.axisLeft(yScale)
+            .tickSize(-innerWidth)
+            .tickFormat('')
+          )
+          .call(g => g.select('.domain').remove());
+
+        // Colors
+        const colors = getColors(series.length);
+        const colorScale = (name) => {
+          const idx = series.findIndex(s => s.name === name);
+          return colors[idx % colors.length];
+        };
+
+        // Line generator
+        const line = d3.line()
+          .x(d => xScale(d.step))
+          .y(d => yScale(d.mean))
+          .curve(d3.curveMonotoneX);
+
+        // Render lines
+        gLines.selectAll('.line')
+          .data(visibleSeries, d => d.name)
+          .join('path')
+          .attr('class', 'line')
+          .attr('d', d => line(getFilteredPoints(d)))
+          .attr('stroke', d => colorScale(d.name));
+
+        // Axes
+        const xAxis = gAxes.selectAll('.x-axis').data([0])
+          .join('g')
+          .attr('class', 'x-axis axis')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).ticks(Math.min(10, Math.floor(innerWidth / 80))));
+
+        const yAxis = gAxes.selectAll('.y-axis').data([0])
+          .join('g')
+          .attr('class', 'y-axis axis')
+          .call(d3.axisLeft(yScale).ticks(8));
+
+        // Axis labels
+        gAxes.selectAll('.x-label').data([0])
+          .join('text')
+          .attr('class', 'x-label axis-label')
+          .attr('text-anchor', 'middle')
+          .attr('x', innerWidth / 2)
+          .attr('y', innerHeight + 45)
+          .text('Training step');
+
+        gAxes.selectAll('.y-label').data([0])
+          .join('text')
+          .attr('class', 'y-label axis-label')
+          .attr('text-anchor', 'middle')
+          .attr('transform', `translate(-48,${innerHeight / 2}) rotate(-90)`)
+          .text(currentMetric === 'reward' ? 'Reward' : 'Mean Terminated Length');
+
+        // Tooltip interactions
+        const bisect = d3.bisector(d => d.step).left;
+
+        svg.on('mousemove', function(event) {
+          const [mx] = d3.pointer(event, gRoot.node());
+          const step = xScale.invert(mx);
+
+          let tooltipHtml = `<strong>Step: ${Math.round(step)}</strong>`;
+          if (showRunningAverage) {
+            tooltipHtml += ` <span style="font-weight:normal;font-size:11px">(${RUNNING_AVG_WINDOW}-step avg)</span>`;
+          }
+          tooltipHtml += `<br/>`;
+
+          visibleSeries.forEach(s => {
+            const points = getFilteredPoints(s);
+            const idx = bisect(points, step);
+            if (idx > 0 && idx < points.length) {
+              const p = points[idx];
+              const color = colorScale(s.name);
+              const valueStr = currentMetric === 'reward'
+                ? `${(p.mean * 100).toFixed(1)}%`
+                : `${p.mean.toFixed(1)} tokens`;
+              tooltipHtml += `<div style="margin-top:4px"><span style="color:${color}">●</span> ${s.name}: ${valueStr}</div>`;
+            }
+          });
+
+          tipInner.innerHTML = tooltipHtml;
+          const tipBounds = tip.getBoundingClientRect();
+          const [px, py] = d3.pointer(event, container);
+
+          let tipX = px + 12;
+          let tipY = py - 12;
+
+          if (tipX + tipBounds.width > width - 10) {
+            tipX = px - tipBounds.width - 12;
+          }
+          if (tipY - tipBounds.height < 10) {
+            tipY = py + 20;
+          }
+
+          tip.style.transform = `translate(${tipX}px, ${tipY}px)`;
+          tip.style.opacity = '1';
+        });
+
+        svg.on('mouseleave', () => {
+          tip.style.opacity = '0';
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        });
+      }
+
+      function makeLegend() {
+        let header = container.querySelector('.header');
+        if (!header) {
+          header = document.createElement('div');
+          header.className = 'header';
+          container.appendChild(header);
+        }
+
+        let legend = header.querySelector('.legend');
+        if (!legend) {
+          legend = document.createElement('div');
+          legend.className = 'legend';
+          header.appendChild(legend);
+        }
+
+        let title = legend.querySelector('.legend-title');
+        if (!title) {
+          title = document.createElement('div');
+          title.className = 'legend-title';
+          title.textContent = 'Configuration';
+          legend.appendChild(title);
+        } else {
+          title.textContent = 'Configuration';
+        }
+
+        let items = legend.querySelector('.items');
+        if (!items) {
+          items = document.createElement('div');
+          items.className = 'items';
+          legend.appendChild(items);
+        }
+
+        const colors = getColors(series.length);
+
+        items.innerHTML = '';
+        series.forEach((s, i) => {
+          const item = document.createElement('span');
+          item.className = 'item';
+          if (hiddenSeries.has(s.name)) {
+            item.classList.add('dimmed');
+          }
+
+          const swatch = document.createElement('span');
+          swatch.className = 'swatch';
+          swatch.style.background = colors[i % colors.length];
+
+          const text = document.createElement('span');
+          text.textContent = s.name;
+
+          item.appendChild(swatch);
+          item.appendChild(text);
+          items.appendChild(item);
+
+          item.addEventListener('click', () => {
+            if (hiddenSeries.has(s.name)) {
+              hiddenSeries.delete(s.name);
+            } else {
+              hiddenSeries.add(s.name);
+            }
+            makeLegend();
+            render();
+          });
+        });
+      }
+
+      function makeControls() {
+        let header = container.querySelector('.header');
+        if (!header) {
+          header = document.createElement('div');
+          header.className = 'header';
+          container.appendChild(header);
+        }
+
+        let controls = header.querySelector('.controls');
+        if (!controls) {
+          controls = document.createElement('div');
+          controls.className = 'controls';
+          header.appendChild(controls);
+        }
+
+        controls.innerHTML = '';
+
+        // Metric selection group
+        const metricGroup = document.createElement('div');
+        metricGroup.className = 'control-group';
+
+        const metricLabel = document.createElement('label');
+        metricLabel.textContent = 'Metric';
+        metricGroup.appendChild(metricLabel);
+
+        const metricToggleGroup = document.createElement('div');
+        metricToggleGroup.className = 'toggle-group';
+
+        const rewardBtn = document.createElement('button');
+        rewardBtn.className = 'toggle-btn' + (currentMetric === 'reward' ? ' active' : '');
+        rewardBtn.textContent = 'Reward';
+        rewardBtn.addEventListener('click', () => {
+          if (currentMetric !== 'reward') {
+            currentMetric = 'reward';
+            parseData(rawData.reward, 'reward');
+            makeControls();
+            makeLegend();
+            render();
+          }
+        });
+
+        const lengthBtn = document.createElement('button');
+        lengthBtn.className = 'toggle-btn' + (currentMetric === 'length' ? ' active' : '');
+        lengthBtn.textContent = 'Length';
+        lengthBtn.addEventListener('click', () => {
+          if (currentMetric !== 'length') {
+            currentMetric = 'length';
+            parseData(rawData.length, 'length');
+            makeControls();
+            makeLegend();
+            render();
+          }
+        });
+
+        metricToggleGroup.appendChild(rewardBtn);
+        metricToggleGroup.appendChild(lengthBtn);
+        metricGroup.appendChild(metricToggleGroup);
+        controls.appendChild(metricGroup);
+
+        // Display options group
+        const displayGroup = document.createElement('div');
+        displayGroup.className = 'control-group';
+
+        const displayLabel = document.createElement('label');
+        displayLabel.textContent = 'Display';
+        displayGroup.appendChild(displayLabel);
+
+        const displayToggleGroup = document.createElement('div');
+        displayToggleGroup.className = 'toggle-group';
+
+        const runningAvgBtn = document.createElement('button');
+        runningAvgBtn.className = 'toggle-btn' + (showRunningAverage ? ' active' : '');
+        runningAvgBtn.textContent = `Running Avg (${RUNNING_AVG_WINDOW} steps)`;
+        runningAvgBtn.addEventListener('click', () => {
+          showRunningAverage = !showRunningAverage;
+          makeControls();
+          render();
+        });
+
+        displayToggleGroup.appendChild(runningAvgBtn);
+        displayGroup.appendChild(displayToggleGroup);
+        controls.appendChild(displayGroup);
+      }
+
+      // Load both datasets
+      const REWARD_PATHS = [
+        '/data/grpo/rl_reward_full_length.csv',
+        './assets/data/grpo/rl_reward_full_length.csv',
+        '../assets/data/grpo/rl_reward_full_length.csv',
+        '../../assets/data/grpo/rl_reward_full_length.csv'
+      ];
+
+      const LENGTH_PATHS = [
+        '/data/grpo/rl_mean_terminated_length_full_length.csv',
+        './assets/data/grpo/rl_mean_terminated_length_full_length.csv',
+        '../assets/data/grpo/rl_mean_terminated_length_full_length.csv',
+        '../../assets/data/grpo/rl_mean_terminated_length_full_length.csv'
+      ];
+
+      Promise.all([
+        fetchFirstAvailable(REWARD_PATHS),
+        fetchFirstAvailable(LENGTH_PATHS)
+      ])
+        .then(([rewardCsvText, lengthCsvText]) => {
+          // Store both datasets
+          rawData.reward = rewardCsvText;
+          rawData.length = lengthCsvText;
+
+          // Initialize with reward data
+          parseData(rewardCsvText, 'reward');
+          makeLegend();
+          makeControls();
+          render();
+
+          // Responsiveness
+          if (window.ResizeObserver) {
+            const ro = new ResizeObserver(() => render());
+            ro.observe(container);
+          } else {
+            window.addEventListener('resize', render);
+          }
+        })
+        .catch(err => {
+          const pre = document.createElement('pre');
+          pre.style.color = '#f44336';
+          pre.style.fontSize = '12px';
+          pre.style.padding = '12px';
+          pre.textContent = `Error loading data: ${err.message}`;
+          container.appendChild(pre);
+        });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>

app/src/content/embeds/d3-rl-reward-curves.html

@@ -0,0 +1,770 @@
+<div class="d3-grpo-reward-curves"></div>
+<style>
+  .d3-grpo-reward-curves {
+    width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    position: relative;
+  }
+
+  .d3-grpo-reward-curves svg {
+    display: block;
+    width: 100%;
+  }
+
+  .d3-grpo-reward-curves .axis path {
+    stroke: none;
+  }
+
+  .d3-grpo-reward-curves .axis line {
+    stroke: var(--axis-color);
+    shape-rendering: crispEdges;
+  }
+
+  .d3-grpo-reward-curves .axis text {
+    fill: var(--tick-color);
+    font-size: 11px;
+  }
+
+  .d3-grpo-reward-curves .grid line {
+    stroke: var(--grid-color);
+    stroke-dasharray: 2,2;
+  }
+
+  .d3-grpo-reward-curves .confidence-band {
+    opacity: 0.15;
+  }
+
+  .d3-grpo-reward-curves .line {
+    fill: none;
+    stroke-width: 2;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .d3-grpo-reward-curves .axis-label {
+    fill: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .d3-grpo-reward-curves .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .d3-grpo-reward-curves .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .d3-grpo-reward-curves .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .d3-grpo-reward-curves .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+
+  .d3-grpo-reward-curves .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+    cursor: pointer;
+    user-select: none;
+    opacity: 1;
+    transition: opacity 0.2s ease;
+  }
+
+  .d3-grpo-reward-curves .legend .item.dimmed {
+    opacity: 0.3;
+  }
+
+  .d3-grpo-reward-curves .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+
+  .d3-grpo-reward-curves .controls {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .d3-grpo-reward-curves .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .d3-grpo-reward-curves .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .d3-grpo-reward-curves .controls .toggle-group {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .d3-grpo-reward-curves .controls .toggle-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .d3-grpo-reward-curves .controls .toggle-btn:hover {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+  }
+
+  .d3-grpo-reward-curves .controls .toggle-btn.active {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => {
+        if (window.d3 && typeof window.d3.select === 'function') cb();
+      };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-grpo-reward-curves'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-grpo-reward-curves'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Data loading configuration
+      let mountEl = container;
+      while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
+        mountEl = mountEl.parentElement;
+      }
+      let providedData = null;
+      try {
+        const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
+        if (attr && attr.trim()) {
+          providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
+        }
+      } catch (_) {}
+
+      const DEFAULT_CSV = '/data/grpo/rl_reward_curves.csv';
+      const ensureDataPrefix = (p) => {
+        if (typeof p !== 'string' || !p) return p;
+        // If it starts with /, it's already absolute
+        if (p.startsWith('/')) return p;
+        // Otherwise, prefix with /data/
+        return `/data/${p}`;
+      };
+      const normalizeInput = (inp) => Array.isArray(inp)
+        ? inp.map(ensureDataPrefix)
+        : (typeof inp === 'string' ? [ensureDataPrefix(inp)] : null);
+
+      const CSV_PATHS = Array.isArray(providedData)
+        ? normalizeInput(providedData)
+        : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [
+            DEFAULT_CSV,
+            './assets/data/grpo/rl_reward_curves.csv',
+            '../assets/data/grpo/rl_reward_curves.csv',
+            '../../assets/data/grpo/rl_reward_curves.csv'
+          ]);
+
+      const fetchFirstAvailable = async (paths) => {
+        const errors = [];
+        for (const p of paths) {
+          try {
+            const r = await fetch(p, { cache: 'no-cache' });
+            if (r.ok) return await r.text();
+            errors.push(`${p}: ${r.status}`);
+          } catch (e) {
+            errors.push(`${p}: ${e.message}`);
+          }
+        }
+        throw new Error(`CSV not found. Tried:\n${errors.join('\n')}`);
+      };
+
+      // Tooltip setup
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          transform: 'translate(-9999px, -9999px)',
+          pointerEvents: 'none',
+          padding: '8px 10px',
+          borderRadius: '8px',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          border: '1px solid var(--border-color)',
+          background: 'var(--surface-bg)',
+          color: 'var(--text-color)',
+          boxShadow: '0 4px 24px rgba(0,0,0,.18)',
+          opacity: '0',
+          transition: 'opacity .12s ease',
+          zIndex: '1000'
+        });
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      // SVG setup
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+      const gGrid = gRoot.append('g').attr('class', 'grid');
+      const gBands = gRoot.append('g').attr('class', 'bands');
+      const gLines = gRoot.append('g').attr('class', 'lines');
+      const gAxes = gRoot.append('g').attr('class', 'axes');
+
+      // State
+      let width = 800, height = 400;
+      const margin = { top: 16, right: 28, bottom: 56, left: 64 };
+      let rawData = {}; // Store both datasets
+      let series = [];
+      let hiddenSeries = new Set();
+      let showRunningAverage = true;
+      let currentMetric = 'reward'; // 'reward' or 'length'
+      const RUNNING_AVG_WINDOW = 50; // steps
+
+      // Color setup
+      const getColors = (count) => {
+        if (window.ColorPalettes && window.ColorPalettes.getColors) {
+          return window.ColorPalettes.getColors('categorical', count);
+        }
+        // Fallback colors
+        return ['#4E79A7', '#F28E2B', '#E15759', '#76B7B2', '#59A14F', '#EDC948'];
+      };
+
+      // Calculate running average based on step window
+      function calculateRunningAverage(points, windowSize) {
+        if (points.length === 0) return [];
+
+        const avgPoints = [];
+        for (let i = 0; i < points.length; i++) {
+          const currentStep = points[i].step;
+          const minStep = currentStep - windowSize;
+
+          // Find all points within the window
+          const windowPoints = points.filter(p => p.step >= minStep && p.step <= currentStep);
+
+          if (windowPoints.length > 0) {
+            const avgMean = d3.mean(windowPoints, p => p.mean);
+            const avgMin = d3.mean(windowPoints, p => p.min);
+            const avgMax = d3.mean(windowPoints, p => p.max);
+
+            avgPoints.push({
+              step: currentStep,
+              mean: avgMean,
+              min: avgMin,
+              max: avgMax
+            });
+          }
+        }
+
+        return avgPoints;
+      }
+
+      function parseData(csvText, metricType) {
+        const rows = d3.csvParse(csvText);
+
+        // Determine metric column suffix based on type
+        const metricSuffix = metricType === 'reward'
+          ? 'train/rewards/strip_reasoning_accuracy_reward/mean'
+          : 'train/completions/mean_terminated_length';
+
+        // Extract run names (each run has _step, mean, MIN, MAX columns)
+        const runNames = [];
+        const headers = Object.keys(rows[0]);
+
+        headers.forEach(h => {
+          if (h.includes(` - ${metricSuffix}`) && !h.includes('MIN') && !h.includes('MAX')) {
+            const runName = h.split(' - ')[0];
+            runNames.push(runName);
+          }
+        });
+
+        // Mapping of v27.x to overlong penalty ranges
+        const penaltyRangeMap = {
+          'v27.00': '1.5-2k',
+          'v27.01': '2-2.5k',
+          'v27.02': '2.5-3k',
+          'v27.03': '3-3.5k',
+          'v27.04': '3.5-4k',
+          'v27.05': '4-4.5k'
+        };
+
+        // Build series data using train/global_step for x-axis
+        series = runNames.map(runName => {
+          const meanCol = `${runName} - ${metricSuffix}`;
+          const minCol = `${meanCol}__MIN`;
+          const maxCol = `${meanCol}__MAX`;
+
+          const points = rows
+            .filter(row => row['train/global_step'] && row[meanCol])
+            .map(row => ({
+              step: +row['train/global_step'],
+              mean: +row[meanCol],
+              min: +row[minCol],
+              max: +row[maxCol]
+            }))
+            .filter(p => !isNaN(p.step) && !isNaN(p.mean));
+
+          // Calculate running average
+          const runningAvgPoints = calculateRunningAverage(points, RUNNING_AVG_WINDOW);
+
+          // Extract version from run name
+          const versionMatch = runName.match(/v(\d+\.\d+)/);
+          const version = versionMatch ? `v${versionMatch[1]}` : runName;
+
+          // Map to penalty range label
+          const displayName = penaltyRangeMap[version] || version;
+
+          return {
+            name: displayName,
+            version: version, // Keep original version for sorting
+            fullName: runName,
+            points,
+            runningAvgPoints
+          };
+        });
+
+        // Sort series by version number to get correct order
+        series.sort((a, b) => {
+          const getVersionNum = (v) => {
+            const match = v.version?.match(/v(\d+)\.(\d+)/);
+            return match ? parseFloat(`${match[1]}.${match[2]}`) : 0;
+          };
+          return getVersionNum(a) - getVersionNum(b);
+        });
+      }
+
+      function updateSize() {
+        width = container.clientWidth || 800;
+        height = Math.max(320, Math.round(width / 2.5));
+        svg.attr('width', width).attr('height', height);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+        return {
+          innerWidth: width - margin.left - margin.right,
+          innerHeight: height - margin.top - margin.bottom
+        };
+      }
+
+      function render() {
+        const { innerWidth, innerHeight } = updateSize();
+        if (series.length === 0) return;
+
+        // Filter visible series
+        const visibleSeries = series.filter(s => !hiddenSeries.has(s.name));
+        if (visibleSeries.length === 0) return;
+
+        // Select which points to use based on running average toggle
+        const getPoints = (s) => showRunningAverage ? s.runningAvgPoints : s.points;
+
+        // Filter points to limit x-axis to 500 steps and y-axis based on metric
+        const MAX_STEPS = 500;
+        const getFilteredPoints = (s) => {
+          const pts = getPoints(s);
+          if (currentMetric === 'reward') {
+            const MIN_REWARD = 0.55;
+            const MAX_REWARD = 0.9;
+            return pts.filter(p => p.step <= MAX_STEPS && p.mean >= MIN_REWARD && p.mean <= MAX_REWARD);
+          } else {
+            // For length, no y-axis filtering
+            return pts.filter(p => p.step <= MAX_STEPS);
+          }
+        };
+
+        // Get all points for domain calculation
+        const allPoints = visibleSeries.flatMap(s => getFilteredPoints(s));
+
+        // Scales
+        const xScale = d3.scaleLinear()
+          .domain([0, MAX_STEPS])
+          .range([0, innerWidth])
+          .nice();
+
+        // Set y-axis domain based on current metric
+        let yDomain;
+        if (currentMetric === 'reward') {
+          yDomain = [0.55, 0.9];
+        } else {
+          // For length, calculate from data
+          const minVal = d3.min(allPoints, d => d.mean);
+          const maxVal = d3.max(allPoints, d => d.mean);
+          yDomain = [minVal * 0.95, maxVal * 1.05];
+        }
+
+        const yScale = d3.scaleLinear()
+          .domain(yDomain)
+          .range([innerHeight, 0]);
+
+        // Grid
+        gGrid.selectAll('.grid-y').data([0])
+          .join('g')
+          .attr('class', 'grid grid-y')
+          .call(d3.axisLeft(yScale)
+            .tickSize(-innerWidth)
+            .tickFormat('')
+          )
+          .call(g => g.select('.domain').remove());
+
+        // Colors
+        const colors = getColors(series.length);
+        const colorScale = (name) => {
+          const idx = series.findIndex(s => s.name === name);
+          return colors[idx % colors.length];
+        };
+
+        // Line generator
+        const line = d3.line()
+          .x(d => xScale(d.step))
+          .y(d => yScale(d.mean))
+          .curve(d3.curveMonotoneX);
+
+        // Render lines
+        gLines.selectAll('.line')
+          .data(visibleSeries, d => d.name)
+          .join('path')
+          .attr('class', 'line')
+          .attr('d', d => line(getFilteredPoints(d)))
+          .attr('stroke', d => colorScale(d.name));
+
+        // Axes
+        const xAxis = gAxes.selectAll('.x-axis').data([0])
+          .join('g')
+          .attr('class', 'x-axis axis')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(xScale).ticks(Math.min(10, Math.floor(innerWidth / 80))));
+
+        const yAxis = gAxes.selectAll('.y-axis').data([0])
+          .join('g')
+          .attr('class', 'y-axis axis')
+          .call(d3.axisLeft(yScale).ticks(8));
+
+        // Axis labels
+        gAxes.selectAll('.x-label').data([0])
+          .join('text')
+          .attr('class', 'x-label axis-label')
+          .attr('text-anchor', 'middle')
+          .attr('x', innerWidth / 2)
+          .attr('y', innerHeight + 45)
+          .text('Training step');
+
+        gAxes.selectAll('.y-label').data([0])
+          .join('text')
+          .attr('class', 'y-label axis-label')
+          .attr('text-anchor', 'middle')
+          .attr('transform', `translate(-48,${innerHeight / 2}) rotate(-90)`)
+          .text(currentMetric === 'reward' ? 'Reward' : 'Mean Terminated Length');
+
+        // Tooltip interactions
+        const bisect = d3.bisector(d => d.step).left;
+
+        svg.on('mousemove', function(event) {
+          const [mx] = d3.pointer(event, gRoot.node());
+          const step = xScale.invert(mx);
+
+          let tooltipHtml = `<strong>Step: ${Math.round(step)}</strong>`;
+          if (showRunningAverage) {
+            tooltipHtml += ` <span style="font-weight:normal;font-size:11px">(${RUNNING_AVG_WINDOW}-step avg)</span>`;
+          }
+          tooltipHtml += `<br/>`;
+
+          visibleSeries.forEach(s => {
+            const points = getFilteredPoints(s);
+            const idx = bisect(points, step);
+            if (idx > 0 && idx < points.length) {
+              const p = points[idx];
+              const color = colorScale(s.name);
+              const valueStr = currentMetric === 'reward'
+                ? `${(p.mean * 100).toFixed(1)}%`
+                : `${p.mean.toFixed(1)} tokens`;
+              tooltipHtml += `<div style="margin-top:4px"><span style="color:${color}">●</span> ${s.name}: ${valueStr}</div>`;
+            }
+          });
+
+          tipInner.innerHTML = tooltipHtml;
+          const tipBounds = tip.getBoundingClientRect();
+          const [px, py] = d3.pointer(event, container);
+
+          let tipX = px + 12;
+          let tipY = py - 12;
+
+          if (tipX + tipBounds.width > width - 10) {
+            tipX = px - tipBounds.width - 12;
+          }
+          if (tipY - tipBounds.height < 10) {
+            tipY = py + 20;
+          }
+
+          tip.style.transform = `translate(${tipX}px, ${tipY}px)`;
+          tip.style.opacity = '1';
+        });
+
+        svg.on('mouseleave', () => {
+          tip.style.opacity = '0';
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        });
+      }
+
+      function makeLegend() {
+        let header = container.querySelector('.header');
+        if (!header) {
+          header = document.createElement('div');
+          header.className = 'header';
+          container.appendChild(header);
+        }
+
+        let legend = header.querySelector('.legend');
+        if (!legend) {
+          legend = document.createElement('div');
+          legend.className = 'legend';
+          header.appendChild(legend);
+        }
+
+        let title = legend.querySelector('.legend-title');
+        if (!title) {
+          title = document.createElement('div');
+          title.className = 'legend-title';
+          title.textContent = 'Overlong Penalty';
+          legend.appendChild(title);
+        } else {
+          title.textContent = 'Overlong Penalty';
+        }
+
+        let items = legend.querySelector('.items');
+        if (!items) {
+          items = document.createElement('div');
+          items.className = 'items';
+          legend.appendChild(items);
+        }
+
+        const colors = getColors(series.length);
+
+        items.innerHTML = '';
+        series.forEach((s, i) => {
+          const item = document.createElement('span');
+          item.className = 'item';
+          if (hiddenSeries.has(s.name)) {
+            item.classList.add('dimmed');
+          }
+
+          const swatch = document.createElement('span');
+          swatch.className = 'swatch';
+          swatch.style.background = colors[i % colors.length];
+
+          const text = document.createElement('span');
+          text.textContent = s.name;
+
+          item.appendChild(swatch);
+          item.appendChild(text);
+          items.appendChild(item);
+
+          item.addEventListener('click', () => {
+            if (hiddenSeries.has(s.name)) {
+              hiddenSeries.delete(s.name);
+            } else {
+              hiddenSeries.add(s.name);
+            }
+            makeLegend();
+            render();
+          });
+        });
+      }
+
+      function makeControls() {
+        let header = container.querySelector('.header');
+        if (!header) {
+          header = document.createElement('div');
+          header.className = 'header';
+          container.appendChild(header);
+        }
+
+        let controls = header.querySelector('.controls');
+        if (!controls) {
+          controls = document.createElement('div');
+          controls.className = 'controls';
+          header.appendChild(controls);
+        }
+
+        controls.innerHTML = '';
+
+        // Metric selection group
+        const metricGroup = document.createElement('div');
+        metricGroup.className = 'control-group';
+
+        const metricLabel = document.createElement('label');
+        metricLabel.textContent = 'Metric';
+        metricGroup.appendChild(metricLabel);
+
+        const metricToggleGroup = document.createElement('div');
+        metricToggleGroup.className = 'toggle-group';
+
+        const rewardBtn = document.createElement('button');
+        rewardBtn.className = 'toggle-btn' + (currentMetric === 'reward' ? ' active' : '');
+        rewardBtn.textContent = 'Reward';
+        rewardBtn.addEventListener('click', () => {
+          if (currentMetric !== 'reward') {
+            currentMetric = 'reward';
+            parseData(rawData.reward, 'reward');
+            makeControls();
+            makeLegend();
+            render();
+          }
+        });
+
+        const lengthBtn = document.createElement('button');
+        lengthBtn.className = 'toggle-btn' + (currentMetric === 'length' ? ' active' : '');
+        lengthBtn.textContent = 'Length';
+        lengthBtn.addEventListener('click', () => {
+          if (currentMetric !== 'length') {
+            currentMetric = 'length';
+            parseData(rawData.length, 'length');
+            makeControls();
+            makeLegend();
+            render();
+          }
+        });
+
+        metricToggleGroup.appendChild(rewardBtn);
+        metricToggleGroup.appendChild(lengthBtn);
+        metricGroup.appendChild(metricToggleGroup);
+        controls.appendChild(metricGroup);
+
+        // Display options group
+        const displayGroup = document.createElement('div');
+        displayGroup.className = 'control-group';
+
+        const displayLabel = document.createElement('label');
+        displayLabel.textContent = 'Display';
+        displayGroup.appendChild(displayLabel);
+
+        const displayToggleGroup = document.createElement('div');
+        displayToggleGroup.className = 'toggle-group';
+
+        const runningAvgBtn = document.createElement('button');
+        runningAvgBtn.className = 'toggle-btn' + (showRunningAverage ? ' active' : '');
+        runningAvgBtn.textContent = `Running Avg (${RUNNING_AVG_WINDOW} steps)`;
+        runningAvgBtn.addEventListener('click', () => {
+          showRunningAverage = !showRunningAverage;
+          makeControls();
+          render();
+        });
+
+        displayToggleGroup.appendChild(runningAvgBtn);
+        displayGroup.appendChild(displayToggleGroup);
+        controls.appendChild(displayGroup);
+      }
+
+      // Load both datasets
+      const REWARD_PATHS = [
+        '/data/grpo/rl_reward_curves.csv',
+        './assets/data/grpo/rl_reward_curves.csv',
+        '../assets/data/grpo/rl_reward_curves.csv',
+        '../../assets/data/grpo/rl_reward_curves.csv'
+      ];
+
+      const LENGTH_PATHS = [
+        '/data/grpo/rl_mean_teminated_lengths.csv',
+        './assets/data/grpo/rl_mean_teminated_lengths.csv',
+        '../assets/data/grpo/rl_mean_teminated_lengths.csv',
+        '../../assets/data/grpo/rl_mean_teminated_lengths.csv'
+      ];
+
+      Promise.all([
+        fetchFirstAvailable(REWARD_PATHS),
+        fetchFirstAvailable(LENGTH_PATHS)
+      ])
+        .then(([rewardCsvText, lengthCsvText]) => {
+          // Store both datasets
+          rawData.reward = rewardCsvText;
+          rawData.length = lengthCsvText;
+
+          // Initialize with reward data
+          parseData(rewardCsvText, 'reward');
+          makeLegend();
+          makeControls();
+          render();
+
+          // Responsiveness
+          if (window.ResizeObserver) {
+            const ro = new ResizeObserver(() => render());
+            ro.observe(container);
+          } else {
+            window.addEventListener('resize', render);
+          }
+        })
+        .catch(err => {
+          const pre = document.createElement('pre');
+          pre.style.color = '#f44336';
+          pre.style.fontSize = '12px';
+          pre.style.padding = '12px';
+          pre.textContent = `Error loading data: ${err.message}`;
+          container.appendChild(pre);
+        });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>

app/src/content/embeds/d3-rl-token-comparison.html

@@ -0,0 +1,504 @@
+<div class="d3-grpo-token-comparison"></div>
+<style>
+  .d3-grpo-token-comparison {
+    width: 100%;
+    position: relative;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+  .d3-grpo-token-comparison svg {
+    display: block;
+    width: 100%;
+  }
+  .d3-grpo-token-comparison .bar {
+    stroke: none;
+  }
+  .d3-grpo-token-comparison .axes path,
+  .d3-grpo-token-comparison .axes line {
+    stroke: var(--axis-color, var(--text-color));
+  }
+  .d3-grpo-token-comparison .axes text {
+    fill: var(--tick-color, var(--muted-color));
+    font-size: 11px;
+  }
+  .d3-grpo-token-comparison .grid line {
+    stroke: var(--grid-color, rgba(0,0,0,.08));
+  }
+  .d3-grpo-token-comparison .chart-title {
+    font-size: 13px;
+    font-weight: 600;
+    fill: var(--text-color);
+  }
+  .d3-grpo-token-comparison .d3-tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    opacity: 0;
+    transition: opacity .12s ease;
+  }
+  .d3-grpo-token-comparison .d3-tooltip__inner {
+    text-align: left;
+  }
+  .d3-grpo-token-comparison .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    margin-top: 16px;
+  }
+  .d3-grpo-token-comparison .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-grpo-token-comparison .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-grpo-token-comparison .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    color: var(--text-color);
+  }
+  .d3-grpo-token-comparison .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+  .d3-grpo-token-comparison .controls {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    margin-top: 8px;
+  }
+  .d3-grpo-token-comparison .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-grpo-token-comparison .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-grpo-token-comparison .controls select {
+    font-size: 12px;
+    padding: 8px 28px 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    cursor: pointer;
+  }
+  .d3-grpo-token-comparison .slider-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 300px;
+  }
+  .d3-grpo-token-comparison .slider-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .d3-grpo-token-comparison input[type="range"] {
+    flex: 1;
+    height: 6px;
+    border-radius: 3px;
+    background: var(--border-color);
+    outline: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+  }
+  .d3-grpo-token-comparison input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    cursor: pointer;
+  }
+  .d3-grpo-token-comparison input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    cursor: pointer;
+    border: none;
+  }
+  .d3-grpo-token-comparison .slider-value {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-color);
+    min-width: 60px;
+    text-align: right;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => {
+        if (window.d3 && typeof window.d3.select === 'function') cb();
+      };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-grpo-token-comparison'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-grpo-token-comparison'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Tooltip
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      const showTooltip = (html, event) => {
+        tipInner.innerHTML = html;
+        tip.style.opacity = '1';
+        const [mx, my] = d3.pointer(event, container);
+        tip.style.transform = `translate(${mx + 12}px, ${my - 12}px)`;
+      };
+
+      const hideTooltip = () => {
+        tip.style.opacity = '0';
+        setTimeout(() => {
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        }, 120);
+      };
+
+      // SVG scaffolding
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+
+      let width = 800, height = 400;
+      const margin = { top: 40, right: 16, bottom: 56, left: 60 };
+
+      // Dataset configurations
+      const datasetConfigs = [
+        {
+          file: 'HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-GRPO-no-think_v27_00-step-000000400_aime25_2025-10-16T01-18-56.json',
+          name: '1.5-2k',
+          id: 'grpo-1.5-2k'
+        },
+        {
+          file: 'HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-GRPO-no-think_v27_01-step-000000400_aime25_2025-10-16T01-22-56.json',
+          name: '2-2.5k',
+          id: 'grpo-2-2.5k'
+        },
+        {
+          file: 'HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-GRPO-no-think_v27_02-step-000000400_aime25_2025-10-16T01-23-56.json',
+          name: '2.5-3k',
+          id: 'grpo-2.5-3k'
+        },
+        {
+          file: 'HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-GRPO-no-think_v27_03-step-000000400_aime25_2025-10-16T01-58-31.json',
+          name: '3-3.5k',
+          id: 'grpo-3-3.5k'
+        },
+        {
+          file: 'HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-GRPO-no-think_v27_04-step-000000400_aime25_2025-10-16T04-55-04.json',
+          name: '3.5-4k',
+          id: 'grpo-3.5-4k'
+        },
+        {
+          file: 'HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-GRPO-no-think_v27_05-step-000000400_aime25_2025-10-16T06-12-05.json',
+          name: '4-4.5k',
+          id: 'grpo-4-4.5k'
+        }
+      ];
+
+      const fetchFirstAvailable = async (filename) => {
+        const paths = [
+          `/data/grpo/histograms/${filename}`,
+          `./assets/data/grpo/histograms/${filename}`,
+          `../assets/data/grpo/histograms/${filename}`,
+          `../../assets/data/grpo/histograms/${filename}`
+        ];
+
+        for (const p of paths) {
+          try {
+            const r = await fetch(p, { cache: 'no-cache' });
+            if (r.ok) return await r.json();
+          } catch (e) {}
+        }
+        throw new Error(`JSON not found: ${filename}`);
+      };
+
+      // Load baseline (APO No-Think)
+      const baselineFile = 'HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-APO-no-think_main_aime25_2025-10-02T13-20-35.json';
+
+      fetchFirstAvailable(baselineFile)
+        .then(async (baselineData) => {
+          // Load all comparison datasets
+          const comparisonData = await Promise.all(
+            datasetConfigs.map(async (config) => ({
+              ...config,
+              data: await fetchFirstAvailable(config.file)
+            }))
+          );
+
+          // Get colors
+          const colors = window.ColorPalettes
+            ? window.ColorPalettes.getColors('categorical', 2)
+            : ['#4e79a7', '#f28e2c'];
+
+          let selectedComparison = comparisonData[0];
+          let currentIndex = 0;
+
+          // Create controls
+          const controls = document.createElement('div');
+          controls.className = 'controls';
+
+          const sliderContainer = document.createElement('div');
+          sliderContainer.className = 'slider-container';
+
+          const label = document.createElement('label');
+          label.textContent = 'Overlong Penalty';
+          label.style.fontSize = '12px';
+          label.style.fontWeight = '700';
+          label.style.color = 'var(--text-color)';
+
+          const sliderRow = document.createElement('div');
+          sliderRow.className = 'slider-row';
+
+          const slider = document.createElement('input');
+          slider.type = 'range';
+          slider.min = '0';
+          slider.max = String(comparisonData.length - 1);
+          slider.value = '0';
+          slider.step = '1';
+
+          const sliderValue = document.createElement('span');
+          sliderValue.className = 'slider-value';
+          sliderValue.textContent = comparisonData[0].name;
+
+          slider.addEventListener('input', (e) => {
+            currentIndex = parseInt(e.target.value);
+            selectedComparison = comparisonData[currentIndex];
+            sliderValue.textContent = selectedComparison.name;
+            render();
+          });
+
+          sliderRow.appendChild(slider);
+          sliderRow.appendChild(sliderValue);
+          sliderContainer.appendChild(label);
+          sliderContainer.appendChild(sliderRow);
+          controls.appendChild(sliderContainer);
+          container.appendChild(controls);
+
+          // Create legend
+          const legend = document.createElement('div');
+          legend.className = 'legend';
+
+          const legendTitle = document.createElement('div');
+          legendTitle.className = 'legend-title';
+          legendTitle.textContent = 'Legend';
+
+          const legendItems = document.createElement('div');
+          legendItems.className = 'items';
+
+          ['APO No-Think (Baseline)', 'GRPO on Math with Overlong Penalty'].forEach((name, idx) => {
+            const item = document.createElement('span');
+            item.className = 'item';
+
+            const swatch = document.createElement('span');
+            swatch.className = 'swatch';
+            swatch.style.background = colors[idx];
+
+            const text = document.createElement('span');
+            text.textContent = name;
+
+            item.appendChild(swatch);
+            item.appendChild(text);
+            legendItems.appendChild(item);
+          });
+
+          legend.appendChild(legendTitle);
+          legend.appendChild(legendItems);
+          container.appendChild(legend);
+
+          function updateSize() {
+            width = container.clientWidth || 800;
+            height = Math.max(400, Math.round(width / 2.2));
+            svg.attr('width', width).attr('height', height);
+            gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+            return {
+              innerWidth: width - margin.left - margin.right,
+              innerHeight: height - margin.top - margin.bottom
+            };
+          }
+
+          function render() {
+            const { innerWidth, innerHeight } = updateSize();
+
+            // Clear previous
+            gRoot.selectAll('*').remove();
+
+            const datasets = [
+              { name: 'APO No-Think (Baseline)', data: baselineData, idx: 0 },
+              { name: selectedComparison.name, data: selectedComparison.data, idx: 1 }
+            ];
+
+            // Use 0-4k for both to keep scales comparable
+            const xDomain = [0, 4000];
+
+            // Create bins for both datasets
+            const allBins = datasets.map(ds => {
+              const tokens = ds.data.token_counts;
+              const bins = d3.bin()
+                .domain(xDomain)
+                .thresholds(30)(tokens);
+              return { ...ds, bins };
+            });
+
+            // Find max frequency across both datasets for shared y-scale
+            const maxFreq = d3.max(allBins.flatMap(d => d.bins.map(b => b.length)));
+
+            const xScale = d3.scaleLinear()
+              .domain(xDomain)
+              .range([0, innerWidth]);
+
+            const yScale = d3.scaleLinear()
+              .domain([0, maxFreq])
+              .range([innerHeight, 0])
+              .nice();
+
+            // Grid
+            gRoot.append('g')
+              .attr('class', 'grid')
+              .call(
+                d3.axisLeft(yScale)
+                  .ticks(5)
+                  .tickSize(-innerWidth)
+                  .tickFormat('')
+              )
+              .call(g => g.select('.domain').remove());
+
+            // Draw histograms (comparison first, baseline second so baseline is on top)
+            allBins.reverse().forEach(({ name, bins, idx, data }) => {
+              gRoot.selectAll(`rect.bar-${idx}`)
+                .data(bins)
+                .join('rect')
+                .attr('class', `bar bar-${idx}`)
+                .attr('x', d => xScale(d.x0))
+                .attr('y', d => yScale(d.length))
+                .attr('width', d => Math.max(1, xScale(d.x1) - xScale(d.x0) - 1))
+                .attr('height', d => Math.max(0, innerHeight - yScale(d.length)))
+                .attr('fill', colors[idx])
+                .attr('opacity', 0.6)
+                .on('mouseenter', (event, d) => {
+                  const stats = data.statistics;
+                  const html = `<strong>${name}</strong><br/>Tokens: ${d.x0.toFixed(0)} - ${d.x1.toFixed(0)}<br/>Count: ${d.length}<br/>Mean: ${stats.mean.toFixed(0)} | Median: ${stats.median.toFixed(0)}`;
+                  showTooltip(html, event);
+                })
+                .on('mouseleave', hideTooltip);
+            });
+
+            // X axis
+            const xAxis = gRoot.append('g')
+              .attr('class', 'axes')
+              .attr('transform', `translate(0,${innerHeight})`)
+              .call(d3.axisBottom(xScale).ticks(8).tickFormat(d3.format(',d')));
+
+            xAxis.select('.domain').remove();
+
+            // Y axis
+            const yAxis = gRoot.append('g')
+              .attr('class', 'axes')
+              .call(d3.axisLeft(yScale).ticks(6));
+
+            yAxis.select('.domain').remove();
+
+            // X axis label
+            gRoot.append('text')
+              .attr('class', 'axes')
+              .attr('x', innerWidth / 2)
+              .attr('y', innerHeight + 40)
+              .attr('text-anchor', 'middle')
+              .style('font-size', '12px')
+              .style('fill', 'var(--text-color)')
+              .text('Token count');
+
+            // Y axis label
+            gRoot.append('text')
+              .attr('class', 'axes')
+              .attr('transform', 'rotate(-90)')
+              .attr('x', -innerHeight / 2)
+              .attr('y', -45)
+              .attr('text-anchor', 'middle')
+              .style('font-size', '12px')
+              .style('fill', 'var(--text-color)')
+              .text('Frequency');
+          }
+
+          render();
+
+          if (window.ResizeObserver) {
+            const ro = new ResizeObserver(() => render());
+            ro.observe(container);
+          } else {
+            window.addEventListener('resize', render);
+          }
+        })
+        .catch((err) => {
+          const pre = document.createElement('pre');
+          pre.textContent = 'Error loading data: ' + err.message;
+          pre.style.cssText = 'color:red;font-size:12px;padding:12px;margin:0;';
+          container.appendChild(pre);
+        });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>

app/src/content/embeds/d3-rl-token-histogram.html

@@ -0,0 +1,321 @@
+<div class="d3-grpo-token-histogram"></div>
+<style>
+  .d3-grpo-token-histogram {
+    width: 100%;
+    position: relative;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+  .d3-grpo-token-histogram svg {
+    display: block;
+    width: 100%;
+  }
+  .d3-grpo-token-histogram .bar {
+    stroke: none;
+  }
+  .d3-grpo-token-histogram .axes path,
+  .d3-grpo-token-histogram .axes line {
+    stroke: var(--axis-color, var(--text-color));
+  }
+  .d3-grpo-token-histogram .axes text {
+    fill: var(--tick-color, var(--muted-color));
+    font-size: 11px;
+  }
+  .d3-grpo-token-histogram .grid line {
+    stroke: var(--grid-color, rgba(0,0,0,.08));
+  }
+  .d3-grpo-token-histogram .chart-title {
+    font-size: 13px;
+    font-weight: 600;
+    fill: var(--text-color);
+  }
+  .d3-grpo-token-histogram .d3-tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 12px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    opacity: 0;
+    transition: opacity .12s ease;
+  }
+  .d3-grpo-token-histogram .d3-tooltip__inner {
+    text-align: left;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) {
+        s = document.createElement('script');
+        s.id = 'd3-cdn-script';
+        s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+        document.head.appendChild(s);
+      }
+      const onReady = () => {
+        if (window.d3 && typeof window.d3.select === 'function') cb();
+      };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-grpo-token-histogram'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-grpo-token-histogram'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Tooltip
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      const showTooltip = (html, event) => {
+        tipInner.innerHTML = html;
+        tip.style.opacity = '1';
+        const [mx, my] = d3.pointer(event, container);
+        tip.style.transform = `translate(${mx + 12}px, ${my - 12}px)`;
+      };
+
+      const hideTooltip = () => {
+        tip.style.opacity = '0';
+        setTimeout(() => {
+          tip.style.transform = 'translate(-9999px, -9999px)';
+        }, 120);
+      };
+
+      // SVG scaffolding
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+
+      let width = 800, height = 400;
+      const margin = { top: 40, right: 16, bottom: 56, left: 60 };
+
+      // Data loading
+      const JSON_PATHS = [
+        '/data/grpo/histograms/HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-APO-no-think_main_aime25_2025-10-02T13-20-35.json',
+        './assets/data/grpo/histograms/HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-APO-no-think_main_aime25_2025-10-02T13-20-35.json',
+        '../assets/data/grpo/histograms/HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-APO-no-think_main_aime25_2025-10-02T13-20-35.json',
+        '../../assets/data/grpo/histograms/HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-APO-no-think_main_aime25_2025-10-02T13-20-35.json'
+      ];
+
+      const JSON_PATHS_THINK = [
+        '/data/grpo/histograms/HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-APO-think_main_aime25_2025-10-17T09-02-45.json',
+        './assets/data/grpo/histograms/HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-APO-think_main_aime25_2025-10-17T09-02-45.json',
+        '../assets/data/grpo/histograms/HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-APO-think_main_aime25_2025-10-17T09-02-45.json',
+        '../../assets/data/grpo/histograms/HuggingFaceH4_details_HuggingFaceH4__SmolLM3-3B-APO-think_main_aime25_2025-10-17T09-02-45.json'
+      ];
+
+      const fetchFirstAvailable = async (paths) => {
+        for (const p of paths) {
+          try {
+            const r = await fetch(p, { cache: 'no-cache' });
+            if (r.ok) return await r.json();
+          } catch (e) {}
+        }
+        throw new Error('JSON not found');
+      };
+
+      Promise.all([
+        fetchFirstAvailable(JSON_PATHS),
+        fetchFirstAvailable(JSON_PATHS_THINK)
+      ])
+        .then(([dataNoThink, dataThink]) => {
+          const datasets = [
+            { name: 'No-Think', data: dataNoThink, title: 'APO No-Think' },
+            { name: 'Think', data: dataThink, title: 'APO Think' }
+          ];
+
+          // Get colors
+          const colors = window.ColorPalettes
+            ? window.ColorPalettes.getColors('categorical', 2)
+            : ['#4e79a7', '#f28e2c'];
+
+          function updateSize() {
+            width = container.clientWidth || 800;
+            height = Math.max(400, Math.round(width / 2.2));
+            svg.attr('width', width).attr('height', height);
+            gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+            return {
+              innerWidth: width - margin.left - margin.right,
+              innerHeight: height - margin.top - margin.bottom
+            };
+          }
+
+          function render() {
+            const { innerWidth, innerHeight } = updateSize();
+
+            // Clear previous
+            gRoot.selectAll('*').remove();
+
+            // Calculate histogram bins for each dataset
+            const chartWidth = (innerWidth - 40) / 2;
+            const histograms = datasets.map((ds, idx) => {
+              const tokens = ds.data.token_counts;
+              const xOffset = idx * (chartWidth + 40);
+
+              // Use independent x-axis ranges optimized for each dataset
+              // No-Think: most data is 0-4k range (median 723)
+              // Think: data is spread around median 16,769
+              const xDomain = idx === 0
+                ? [0, 4000]   // No-Think: focus on 0-4k range
+                : [0, 32000]; // Think: show full range
+
+              // Create bins
+              const bins = d3.bin()
+                .domain(xDomain)
+                .thresholds(30)(tokens);
+
+              const xScale = d3.scaleLinear()
+                .domain(xDomain)
+                .range([0, chartWidth]);
+
+              const yScale = d3.scaleLinear()
+                .domain([0, d3.max(bins, d => d.length)])
+                .range([innerHeight, 0])
+                .nice();
+
+              return { ds, bins, xScale, yScale, xOffset, idx };
+            });
+
+            // Draw each histogram
+            histograms.forEach(({ ds, bins, xScale, yScale, xOffset, idx }) => {
+              const g = gRoot.append('g').attr('transform', `translate(${xOffset},0)`);
+
+              // Title
+              g.append('text')
+                .attr('class', 'chart-title')
+                .attr('x', chartWidth / 2)
+                .attr('y', -12)
+                .attr('text-anchor', 'middle')
+                .text(ds.title);
+
+              // Bars
+              g.selectAll('rect.bar')
+                .data(bins)
+                .join('rect')
+                .attr('class', 'bar')
+                .attr('x', d => xScale(d.x0))
+                .attr('y', d => yScale(d.length))
+                .attr('width', d => Math.max(1, xScale(d.x1) - xScale(d.x0) - 1))
+                .attr('height', d => Math.max(0, innerHeight - yScale(d.length)))
+                .attr('fill', colors[idx])
+                .attr('opacity', 0.8)
+                .on('mouseenter', (event, d) => {
+                  const html = `<strong>Tokens: ${d.x0.toFixed(0)} - ${d.x1.toFixed(0)}</strong><br/>Count: ${d.length}`;
+                  showTooltip(html, event);
+                })
+                .on('mouseleave', hideTooltip);
+
+              // X axis
+              const xAxis = g.append('g')
+                .attr('class', 'axes')
+                .attr('transform', `translate(0,${innerHeight})`)
+                .call(d3.axisBottom(xScale).ticks(5).tickFormat(d3.format(',d')));
+
+              xAxis.select('.domain').remove();
+
+              // Y axis
+              const yAxis = g.append('g')
+                .attr('class', 'axes')
+                .call(d3.axisLeft(yScale).ticks(5));
+
+              yAxis.select('.domain').remove();
+
+              // Grid
+              g.append('g')
+                .attr('class', 'grid')
+                .call(
+                  d3.axisLeft(yScale)
+                    .ticks(5)
+                    .tickSize(-chartWidth)
+                    .tickFormat('')
+                )
+                .call(g => g.select('.domain').remove());
+
+              // X axis label
+              g.append('text')
+                .attr('class', 'axes')
+                .attr('x', chartWidth / 2)
+                .attr('y', innerHeight + 40)
+                .attr('text-anchor', 'middle')
+                .style('font-size', '12px')
+                .style('fill', 'var(--text-color)')
+                .text('Token count');
+
+              // Y axis label (only for left chart)
+              if (idx === 0) {
+                g.append('text')
+                  .attr('class', 'axes')
+                  .attr('transform', 'rotate(-90)')
+                  .attr('x', -innerHeight / 2)
+                  .attr('y', -45)
+                  .attr('text-anchor', 'middle')
+                  .style('font-size', '12px')
+                  .style('fill', 'var(--text-color)')
+                  .text('Frequency');
+              }
+
+              // Statistics text
+              const stats = ds.data.statistics;
+              const statsText = `Mean: ${stats.mean.toFixed(0)} | Median: ${stats.median.toFixed(0)}`;
+              g.append('text')
+                .attr('x', chartWidth / 2)
+                .attr('y', innerHeight + 54)
+                .attr('text-anchor', 'middle')
+                .style('font-size', '11px')
+                .style('fill', 'var(--muted-color)')
+                .text(statsText);
+            });
+          }
+
+          render();
+
+          if (window.ResizeObserver) {
+            const ro = new ResizeObserver(() => render());
+            ro.observe(container);
+          } else {
+            window.addEventListener('resize', render);
+          }
+        })
+        .catch((err) => {
+          const pre = document.createElement('pre');
+          pre.textContent = 'Error loading data: ' + err.message;
+          pre.style.cssText = 'color:red;font-size:12px;padding:12px;margin:0;';
+          container.appendChild(pre);
+        });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>