Improve chart clarity and fix visualization issues

- Replace dual-axis L1 Time/Quality chart with bubble scatter plot
- Add counts/percentage toggle to failure analysis
- Fix label overlaps in heatmap, scatter, and failure charts
- Remove misleading series divider lines from sorted charts
- Fix total-score description for 50% reference line
- Increase margins and use smart label placement throughout

Made-with: Cursor

README.md

@@ -1,9 +1,9 @@
 ---
-title: 'Bringing paper to life: A modern template for scientific writing'
-short_desc: 'A practical journey behind training SOTA LLMs'
-emoji: 📝
-colorFrom: blue
-colorTo: indigo
+title: 'Unfolding Robotics: Open-Source Shirt Folding from Data to Deployment'
+short_desc: 'The complete open-source recipe for teaching robots to fold clothes'
+emoji: 🤖
+colorFrom: yellow
+colorTo: orange
 sdk: docker
 pinned: false
 header: mini

app/src/components/HtmlEmbed.astro

@@ -293,6 +293,7 @@ const htmlWithId =
     padding: 24px;
     z-index: calc(var(--z-elevated) + 1);
     position: relative;
+    overflow: visible;
   }
   .html-embed__card.is-frameless {
     background: transparent;

app/src/content/article.mdx

@@ -44,7 +44,7 @@ tags:
   - open-source
 tableOfContentsAutoCollapse: true
 pdfProOnly: false
-showPdf: true
+showPdf: false
 ---
 
 import Hero from "./chapters/folding/01-hero.mdx";

app/src/content/chapters/folding/08-ablations.mdx

@@ -78,7 +78,7 @@ The gap between Series 1 and Series 2 is immediately visible. Experiment 2.5 rea
   id="total-score"
   src="folding/total-score.html"
   title="Total Score by Experiment"
-  desc="Overall score (% of maximum 1500) per experiment. The 50% threshold line highlights which experiments achieve at least half the maximum score."
+  desc="Overall score (% of maximum 1500) per experiment. The dashed line marks 50% as a reference point."
 />
 
 Total score captures partial progress that binary success rate misses. Even failed rollouts earn credit for completed subtasks, revealing that some Series 1 experiments make meaningful progress despite 0% Level 2 success. Only two experiments break the 50% threshold, all from Series 2.
@@ -86,8 +86,8 @@ Total score captures partial progress that binary success rate misses. Even fail
 <HtmlEmbed
   id="l1-time-quality"
   src="folding/l1-time-quality.html"
-  title="Level 1 Completion Time & Fold Quality"
-  desc="Average Level 1 completion time (bars) and fold quality score (dashed line, right axis) per experiment. Lower time and higher quality are better."
+  title="Level 1 Completion Time vs. Fold Quality"
+  desc="Each bubble is one experiment. X-axis = completion time (faster is left), Y-axis = fold quality (higher is better), bubble size = total success rate. The best experiments cluster in the top-left corner."
 />
 
 Speed and quality correlate strongly with data quality. Series 2 experiments fold 2-3x faster than Series 1 (40s vs 100s+), and fold quality only breaks past 3.0 with high-quality training data. Faster isn't a separate goal from better; it's a consequence of the policy learning a clear, unambiguous strategy.

app/src/content/embeds/folding/failure-analysis.html

@@ -62,14 +62,42 @@
     padding: 20px 20px 12px;
   }
 
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
   .chart-title {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: #8b8fa8;
-    margin-bottom: 16px;
   }
 
+  .mode-toggle {
+    display: flex;
+    gap: 0;
+  }
+  .mode-btn {
+    padding: 4px 12px;
+    font-size: 10px;
+    font-family: inherit;
+    cursor: pointer;
+    border: 1px solid #2a2d3a;
+    background: none;
+    color: #8b8fa8;
+    transition: all 0.15s;
+    letter-spacing: 0.04em;
+  }
+  .mode-btn:first-child { border-radius: 4px 0 0 4px; }
+  .mode-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
+  .mode-btn.active { background: #252835; color: #e8eaf0; border-color: #4a4d5a; }
+  .mode-btn:hover:not(.active) { color: #e8eaf0; }
+
   .legend {
     display: flex;
     flex-wrap: wrap;
@@ -149,15 +177,21 @@
   <!-- LEVEL 2 PANEL -->
   <div class="panel active" id="panel-l2">
     <div class="insight-box">
-      <strong>Series 1:</strong> nearly all level 2failures occur at Unfold , the robot never gets past step 1.&nbsp;
+      <strong>Series 1:</strong> nearly all level 2 failures occur at Unfold — the robot never gets past step 1.&nbsp;
       <strong>Series 2:</strong> Unfold failures collapse (2.5: 0%), but late-stage failures (Fold 3, Rotation) emerge — the model now reliably unfolds but precision degrades at the end.
     </div>
     <div class="chart-wrap">
-      <div class="chart-title">Where does the robot fail? — Level 2 failed rollouts by subtask</div>
-      <svg id="chart-l2" width="100%" height="320"></svg>
+      <div class="chart-header">
+        <div class="chart-title">Where does the robot fail? — Level 2 failed rollouts by subtask</div>
+        <div class="mode-toggle">
+          <button class="mode-btn active" id="mode-l2-abs" onclick="setMode('l2','abs')">Counts</button>
+          <button class="mode-btn" id="mode-l2-pct" onclick="setMode('l2','pct')">Percentage</button>
+        </div>
+      </div>
+      <svg id="chart-l2" width="100%" height="320" style="overflow:visible"></svg>
       <div class="legend" id="legend-l2"></div>
     </div>
-    <p class="note">Each bar = one experiment, showing how its failed Level 2 rollouts distribute across subtasks. Only failed rollouts shown — successful rollouts are excluded. A failure at "Unfold" means the robot never spread the shirt; a failure at "Rotation" means it completed folding but failed the final placement.</p>
+    <p class="note">Each bar = one experiment, showing how its failed Level 2 rollouts distribute across subtasks. Only failed rollouts shown — successful rollouts are excluded. Toggle "Percentage" to compare failure distributions regardless of total failure count.</p>
   </div>
 
   <!-- LEVEL 1 PANEL -->
@@ -166,71 +200,68 @@
       <strong>Level 1 failures</strong> are more distributed since unfolding is given. Series 1 failures concentrate at Fold 2 and Fold 4 (mid-task precision). Series 2 nearly eliminates failures entirely — only 2.3 (mirroring) and 2.4 (chunk=45) regress significantly.
     </div>
     <div class="chart-wrap">
-      <div class="chart-title">Where does the robot fail? — Level 1 failed rollouts by subtask</div>
-      <svg id="chart-l1" width="100%" height="320"></svg>
+      <div class="chart-header">
+        <div class="chart-title">Where does the robot fail? — Level 1 failed rollouts by subtask</div>
+        <div class="mode-toggle">
+          <button class="mode-btn active" id="mode-l1-abs" onclick="setMode('l1','abs')">Counts</button>
+          <button class="mode-btn" id="mode-l1-pct" onclick="setMode('l1','pct')">Percentage</button>
+        </div>
+      </div>
+      <svg id="chart-l1" width="100%" height="320" style="overflow:visible"></svg>
       <div class="legend" id="legend-l1"></div>
     </div>
-    <p class="note">Level 1 begins with the shirt already laid flat, so "Unfold" is not a failure point. Failures at Fold 1 indicate the robot cannot even begin folding — a severe failure. Failures at Rotation indicate the robot folded successfully but failed the final placement step.</p>
+    <p class="note">Level 1 begins with the shirt already laid flat, so "Unfold" is not a failure point. Toggle "Percentage" to compare where each experiment struggles, independent of how many total failures it has.</p>
   </div>
 
 </div>
 
 <script>
 function _initFailureAnalysis() {
-// ── DATA ──────────────────────────────────────────────────────────────────────
-// Derived from raw rollout data: for each failed rollout, 
-// "failure point" = first subtask that was NOT reached after a previous one was TRUE
-// Level 1: Unfold is given (None), failure starts from Fold 1
-// Level 2: Unfold is explicit
-
 const EXPERIMENTS = [
-  { id:'1.1', series:1 },
-  { id:'1.2', series:1 },
-  { id:'1.3', series:1 },
-  { id:'1.4', series:1 },
-  { id:'1.5', series:1 },
-  { id:'1.7', series:1 },
-  { id:'2.1', series:2 },
-  { id:'2.2', series:2 },
-  { id:'2.3', series:2 },
-  { id:'2.4', series:2 },
-  { id:'2.5', series:2 },
+  { id:'1.1 π0', series:1 },
+  { id:'1.2 π0.5', series:1 },
+  { id:'1.3 ΔActions', series:1 },
+  { id:'1.4 RABC low', series:1 },
+  { id:'1.5 RABC high', series:1 },
+  { id:'1.7 Δ+RABC', series:1 },
+  { id:'2.1 HQ', series:2 },
+  { id:'2.2 HQ+RABC+Δ', series:2 },
+  { id:'2.3 HQ+mirror', series:2 },
+  { id:'2.4 HQ chunk45', series:2 },
+  { id:'2.5 HQ+RABC+Δ★', series:2 },
 ];
 
-// L2 failures: {experimentId: {subtask: count}}
 const L2_FAILURES = {
-  '1.1': { 'Unfold':10 },
-  '1.2': { 'Unfold':9, 'Rotation':1 },
-  '1.3': { 'Unfold':10 },
-  '1.4': { 'Unfold':10 },
-  '1.5': { 'Unfold':9, 'Fold 1':1 },
-  '1.7': { 'Unfold':8, 'Fold 3':1, 'Rotation':1 },
-  '2.1': { 'Unfold':8, 'Rotation':1 },
-  '2.2': { 'Unfold':4, 'Rotation':1 },
-  '2.3': { 'Unfold':8, 'Fold 1':1 },
-  '2.4': { 'Unfold':9, 'Fold 3':1 },
-  '2.5': { 'Unfold':2 },
+  '1.1 π0': { 'Unfold':10 },
+  '1.2 π0.5': { 'Unfold':9, 'Rotation':1 },
+  '1.3 ΔActions': { 'Unfold':10 },
+  '1.4 RABC low': { 'Unfold':10 },
+  '1.5 RABC high': { 'Unfold':9, 'Fold 1':1 },
+  '1.7 Δ+RABC': { 'Unfold':8, 'Fold 3':1, 'Rotation':1 },
+  '2.1 HQ': { 'Unfold':8, 'Rotation':1 },
+  '2.2 HQ+RABC+Δ': { 'Unfold':4, 'Rotation':1 },
+  '2.3 HQ+mirror': { 'Unfold':8, 'Fold 1':1 },
+  '2.4 HQ chunk45': { 'Unfold':9, 'Fold 3':1 },
+  '2.5 HQ+RABC+Δ★': { 'Unfold':2 },
 };
 
-// L1 failures
 const L1_FAILURES = {
-  '1.1': { 'Fold 2':1 },
-  '1.2': { 'Rotation':4, 'Fold 4':2, 'Fold 2':1 },
-  '1.3': { 'Rotation':1, 'Fold 4':1 },
-  '1.4': { 'Rotation':2, 'Fold 3':1, 'Fold 4':2, 'Fold 2':3 },
-  '1.5': { 'Fold 3':2, 'Fold 2':6, 'Fold 1':1 },
-  '1.7': { 'Fold 4':1, 'Fold 2':1, 'Rotation':1 },
-  '2.1': { 'Fold 2':1, 'Fold 4':1 },
-  '2.2': { 'Fold 2':1 },
-  '2.3': { 'Fold 1':3, 'Fold 4':3, 'Fold 3':3 },
-  '2.4': { 'Rotation':2, 'Fold 4':3, 'Fold 3':1 },
-  '2.5': {},  // 0 L1 failures
+  '1.1 π0': { 'Fold 2':1 },
+  '1.2 π0.5': { 'Rotation':4, 'Fold 4':2, 'Fold 2':1 },
+  '1.3 ΔActions': { 'Rotation':1, 'Fold 4':1 },
+  '1.4 RABC low': { 'Rotation':2, 'Fold 3':1, 'Fold 4':2, 'Fold 2':3 },
+  '1.5 RABC high': { 'Fold 3':2, 'Fold 2':6, 'Fold 1':1 },
+  '1.7 Δ+RABC': { 'Fold 4':1, 'Fold 2':1, 'Rotation':1 },
+  '2.1 HQ': { 'Fold 2':1, 'Fold 4':1 },
+  '2.2 HQ+RABC+Δ': { 'Fold 2':1 },
+  '2.3 HQ+mirror': { 'Fold 1':3, 'Fold 4':3, 'Fold 3':3 },
+  '2.4 HQ chunk45': { 'Rotation':2, 'Fold 4':3, 'Fold 3':1 },
+  '2.5 HQ+RABC+Δ★': {},
 };
 
 const SUBTASKS_L2 = ['Unfold','Fold 1','Fold 2','Fold 3','Fold 4','Rotation'];
 const SUBTASKS_L1 = ['Fold 1','Fold 2','Fold 3','Fold 4','Rotation'];
 
-// Colour: warm→cool progression. Unfold = red (early), Rotation = teal (late)
 const COLORS = {
   'Unfold':   '#ef4444',
   'Fold 1':   '#f97316',
@@ -240,12 +271,22 @@ const COLORS = {
   'Rotation': '#818cf8',
 };
 
-// ── CHART BUILDER ─────────────────────────────────────────────────────────────
-function buildStackedBar(svgId, legendId, data, subtasks, experiments) {
+const modes = { l2: 'abs', l1: 'abs' };
+
+function setMode(level, mode) {
+  modes[level] = mode;
+  document.getElementById(`mode-${level}-abs`).classList.toggle('active', mode === 'abs');
+  document.getElementById(`mode-${level}-pct`).classList.toggle('active', mode === 'pct');
+  // Force re-render
+  rendered[level] = false;
+  renderTab(level);
+}
+
+function buildStackedBar(svgId, legendId, data, subtasks, experiments, normalize) {
   const svgEl = document.getElementById(svgId);
   const W = svgEl.parentElement.clientWidth - 40;
-  const H = 300;
-  const margin = { top: 14, right: 16, bottom: 48, left: 38 };
+  const H = 340;
+  const margin = { top: 30, right: 16, bottom: 80, left: 70 };
   const innerW = W - margin.left - margin.right;
   const innerH = H - margin.top - margin.bottom;
 
@@ -256,10 +297,11 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments) {
     .attr('viewBox', `0 0 ${W} ${H}`)
     .attr('height', H);
 
+  svg.selectAll('*').remove();
+
   const g = svg.append('g')
     .attr('transform', `translate(${margin.left},${margin.top})`);
 
-  // Prepare stacked data
   const expIds = experiments.map(a => a.id);
   const stackData = expIds.map(id => {
     const row = { id };
@@ -268,44 +310,39 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments) {
     return row;
   });
 
-  const maxTotal = d3.max(stackData, d => d._total) || 10;
-
-  const x = d3.scaleBand()
-    .domain(expIds)
-    .range([0, innerW])
-    .padding(0.28);
+  let displayData;
+  if (normalize) {
+    displayData = stackData.map(row => {
+      const out = { id: row.id, _total: row._total };
+      subtasks.forEach(s => {
+        out[s] = row._total > 0 ? (row[s] / row._total) * 100 : 0;
+      });
+      out._displayTotal = row._total > 0 ? 100 : 0;
+      return out;
+    });
+  } else {
+    displayData = stackData.map(row => ({ ...row, _displayTotal: row._total }));
+  }
 
-  const y = d3.scaleLinear()
-    .domain([0, maxTotal])
-    .range([innerH, 0])
-    .nice();
+  const maxVal = normalize ? 100 : (d3.max(displayData, d => d._displayTotal) || 10);
 
-  const stack = d3.stack().keys(subtasks)(stackData);
+  const x = d3.scaleBand().domain(expIds).range([0, innerW]).padding(0.28);
+  const y = d3.scaleLinear().domain([0, maxVal]).range([innerH, 0]).nice();
+  const stack = d3.stack().keys(subtasks)(displayData);
 
   // Grid lines
-  g.append('g')
-    .attr('class', 'grid')
-    .call(d3.axisLeft(y)
-      .tickSize(-innerW)
-      .tickFormat('')
-      .ticks(5))
+  g.append('g').attr('class', 'grid')
+    .call(d3.axisLeft(y).tickSize(-innerW).tickFormat('').ticks(5))
     .call(gg => {
       gg.select('.domain').remove();
-      gg.selectAll('line')
-        .attr('stroke', '#2a2d3a')
-        .attr('stroke-dasharray', '3,3');
+      gg.selectAll('line').attr('stroke', '#2a2d3a').attr('stroke-dasharray', '3,3');
     });
 
   // Stacked bars
-  const layer = g.selectAll('.layer')
-    .data(stack)
-    .join('g')
-    .attr('class', 'layer')
-    .attr('fill', d => COLORS[d.key] || '#666');
-
-  layer.selectAll('rect')
-    .data(d => d)
-    .join('rect')
+  const layer = g.selectAll('.layer').data(stack).join('g')
+    .attr('class', 'layer').attr('fill', d => COLORS[d.key] || '#666');
+
+  layer.selectAll('rect').data(d => d).join('rect')
     .attr('x', d => x(d.data.id))
     .attr('y', d => y(d[1]))
     .attr('height', d => Math.max(0, y(d[0]) - y(d[1])))
@@ -313,17 +350,18 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments) {
     .attr('rx', 2)
     .attr('opacity', 0.88);
 
-  // Count labels on top of bars
-  g.selectAll('.bar-label')
-    .data(stackData)
-    .join('text')
+  // Labels on top
+  g.selectAll('.bar-label').data(displayData).join('text')
     .attr('class', 'bar-label')
     .attr('x', d => x(d.id) + x.bandwidth() / 2)
-    .attr('y', d => d._total === 0 ? y(0) - 4 : y(d._total) - 5)
+    .attr('y', d => d._total === 0 ? y(0) - 4 : y(d._displayTotal) - 5)
     .attr('text-anchor', 'middle')
     .attr('fill', d => d._total === 0 ? '#3a3d4a' : '#8b8fa8')
     .attr('font-size', '9')
-    .text(d => d._total === 0 ? '✓' : d._total);
+    .text(d => {
+      if (d._total === 0) return '✓ 0 failures';
+      return normalize ? `n=${d._total}` : d._total;
+    });
 
   // Series divider line
   const s1Last = experiments.filter(a => a.series === 1).pop().id;
@@ -332,43 +370,28 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments) {
     const xDiv = x(s1Last) + x.bandwidth() + x.step() * 0.14;
     g.append('line')
       .attr('x1', xDiv).attr('x2', xDiv)
-      .attr('y1', -8).attr('y2', innerH + 4)
-      .attr('stroke', '#3a3d4a')
-      .attr('stroke-width', 1)
-      .attr('stroke-dasharray', '4,3');
-
-    g.append('text')
-      .attr('x', xDiv - 6)
-      .attr('y', -4)
-      .attr('text-anchor', 'end')
-      .attr('fill', '#f7934f')
-      .attr('font-size', '8')
-      .attr('letter-spacing', '0.06em')
-      .text('SERIES 1');
+      .attr('y1', -22).attr('y2', innerH + 4)
+      .attr('stroke', '#3a3d4a').attr('stroke-width', 1).attr('stroke-dasharray', '4,3');
+
+    g.append('text').attr('x', xDiv - 6).attr('y', -18).attr('text-anchor', 'end')
+      .attr('fill', '#f7934f').attr('font-size', '8').attr('letter-spacing', '0.06em').text('SERIES 1');
 
     if (s2First) {
-      g.append('text')
-        .attr('x', xDiv + 6)
-        .attr('y', -4)
-        .attr('text-anchor', 'start')
-        .attr('fill', '#4dc98a')
-        .attr('font-size', '8')
-        .attr('letter-spacing', '0.06em')
-        .text('SERIES 2');
+      g.append('text').attr('x', xDiv + 6).attr('y', -18).attr('text-anchor', 'start')
+        .attr('fill', '#4dc98a').attr('font-size', '8').attr('letter-spacing', '0.06em').text('SERIES 2');
     }
   }
 
   // Axes
   g.append('g')
-    .call(d3.axisLeft(y).ticks(5).tickSize(4))
+    .call(d3.axisLeft(y).ticks(5).tickSize(4).tickFormat(d => normalize ? d + '%' : d))
     .call(gg => {
       gg.select('.domain').attr('stroke', '#2a2d3a');
       gg.selectAll('text').attr('fill', '#8b8fa8').attr('font-size', '9');
       gg.selectAll('line').attr('stroke', '#2a2d3a');
     });
 
-  g.append('g')
-    .attr('transform', `translate(0,${innerH})`)
+  g.append('g').attr('transform', `translate(0,${innerH})`)
     .call(d3.axisBottom(x).tickSize(0))
     .call(gg => {
       gg.select('.domain').attr('stroke', '#2a2d3a');
@@ -377,19 +400,18 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments) {
           const a = experiments.find(a => a.id === d);
           return a?.series === 2 ? '#4dc98a' : '#f7934f';
         })
-        .attr('font-size', '10')
-        .attr('dy', '1.2em');
+        .attr('font-size', '9')
+        .attr('transform', 'rotate(-40)')
+        .attr('text-anchor', 'end')
+        .attr('dx', '-0.5em')
+        .attr('dy', '0.3em');
     });
 
   // Y axis label
-  svg.append('text')
-    .attr('transform', `rotate(-90)`)
-    .attr('x', -(margin.top + innerH / 2))
-    .attr('y', 10)
-    .attr('text-anchor', 'middle')
-    .attr('fill', '#555e7a')
-    .attr('font-size', '9')
-    .text('Failed rollouts (n)');
+  svg.append('text').attr('transform', 'rotate(-90)')
+    .attr('x', -(margin.top + innerH / 2)).attr('y', 10).attr('text-anchor', 'middle')
+    .attr('fill', '#555e7a').attr('font-size', '9')
+    .text(normalize ? 'Failure distribution (%)' : 'Failed rollouts (n)');
 
   // Legend
   const legendEl = document.getElementById(legendId);
@@ -401,14 +423,14 @@ function buildStackedBar(svgId, legendId, data, subtasks, experiments) {
   `).join('');
 }
 
-// ── TAB SWITCHER ──────────────────────────────────────────────────────────────
 const rendered = { l2: false, l1: false };
 
 function renderTab(id) {
   if (rendered[id]) return;
   rendered[id] = true;
-  if (id === 'l2') buildStackedBar('chart-l2', 'legend-l2', L2_FAILURES, SUBTASKS_L2, EXPERIMENTS);
-  if (id === 'l1') buildStackedBar('chart-l1', 'legend-l1', L1_FAILURES, SUBTASKS_L1, EXPERIMENTS);
+  const normalize = modes[id] === 'pct';
+  if (id === 'l2') buildStackedBar('chart-l2', 'legend-l2', L2_FAILURES, SUBTASKS_L2, EXPERIMENTS, normalize);
+  if (id === 'l1') buildStackedBar('chart-l1', 'legend-l1', L1_FAILURES, SUBTASKS_L1, EXPERIMENTS, normalize);
 }
 
 function showTab(id) {
@@ -422,8 +444,8 @@ function showTab(id) {
 }
 
 window.showTab = showTab;
+window.setMode = setMode;
 
-// ── RENDER (only the visible tab) ─────────────────────────────────────────────
 renderTab('l2');
 
 }

app/src/content/embeds/folding/l1-time-quality.html

@@ -7,207 +7,159 @@
   :root { --bg: transparent; --text: #e8eaf0; --subtext: #8b8fa8; --grid: #2a2d3a; --border: #2a2d3a; }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body { background: var(--bg); font-family: system-ui, sans-serif; color: var(--text); }
-  .legend { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
-  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--subtext); }
-  .legend-dot { width: 12px; height: 12px; border-radius: 50%; }
-  .legend-line { width: 18px; height: 3px; border-radius: 2px; }
-  .legend-pip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+
+  .legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
+  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--subtext); }
+  .legend-pip { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1.5px solid #1a1d27; }
+  .legend-size { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--subtext); }
+  .legend-size circle { fill: none; stroke: var(--subtext); stroke-width: 1; }
+
   .tooltip {
     position: absolute; background: #1a1d27; border: 1px solid var(--border);
     border-radius: 8px; padding: 10px 14px; pointer-events: none;
-    opacity: 0; transition: opacity .15s; z-index: 10; min-width: 220px;
+    opacity: 0; transition: opacity .15s; z-index: 10; min-width: 200px;
     box-shadow: 0 4px 16px rgba(0,0,0,.4); font-size: 13px;
   }
   .tooltip strong { display: block; margin-bottom: 5px; }
   .tooltip-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 3px; font-size: 12px; color: var(--subtext); }
   .tooltip-row span:last-child { color: var(--text); font-weight: 600; }
 
-  .exp-ref-wrap { margin-bottom: 14px; }
-  .exp-ref-toggle { background: none; border: 1px solid #2a2d3a; color: #8b8fa8; font-size: 11px;
-    padding: 4px 10px; border-radius: 6px; cursor: pointer; margin-bottom: 8px; }
-  .exp-ref-toggle:hover { color: #e8eaf0; border-color: #4f8ef7; }
-  .exp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
-  .exp-table th { color: #8b8fa8; font-weight: 500; text-align: left; padding: 4px 8px;
-    border-bottom: 1px solid #2a2d3a; white-space: nowrap; }
-  .exp-table td { color: #c8cad8; padding: 4px 8px; border-bottom: 1px solid #1a1d27; vertical-align: top; }
-  .exp-table td:first-child { color: #e8eaf0; font-weight: 600; white-space: nowrap; }
-  .exp-table tr.s2 td { background: rgba(247,147,79,0.05); }
-  .exp-table tr.s1 td { background: rgba(79,142,247,0.04); }
-  .exp-table tr:hover td { background: rgba(255,255,255,0.04); }
-
-  .axis text { fill: var(--subtext); font-size: 12px; }
+  .axis text { fill: var(--subtext); font-size: 11px; }
   .axis line, .axis path { stroke: var(--grid); }
   .grid line { stroke: var(--grid); stroke-dasharray: 3,3; }
+
+  .annotation-line { stroke: #3a3d4a; stroke-dasharray: 4,3; stroke-width: 1; }
 </style>
 </head>
 <body>
 <div class="legend">
-  <div class="legend-item"><div class="legend-pip" style="background:#f7934f"></div>&nbsp;Series 2 bar &nbsp;<div class="legend-pip" style="background:#4f8ef7"></div>&nbsp;Series 1 bar</div>
-  <div class="legend-item"><div class="legend-line" style="background:#fbbf24"></div>Quality (right axis, 1–5)</div>
-</div>
-<div class="exp-ref-wrap">
-  <button class="exp-ref-toggle" onclick="var t=document.getElementById('exp-ref');t.style.display=t.style.display==='none'?'':'none';this.textContent=t.style.display==='none'?'▶ Show experiment descriptions':'▼ Hide experiment descriptions'">▼ Hide experiment descriptions</button>
-  <div id="exp-ref"></div>
+  <div class="legend-item"><div class="legend-pip" style="background:#f7934f"></div>Series 2</div>
+  <div class="legend-item"><div class="legend-pip" style="background:#4f8ef7"></div>Series 1</div>
+  <div class="legend-item" style="margin-left:8px; font-size:10px; color:#555">
+    Bubble size = Total SR
+  </div>
 </div>
 <div style="position:relative">
-  <svg id="tq-chart"></svg>
+  <svg id="tq-chart" style="overflow:visible"></svg>
   <div class="tooltip" id="tq-tooltip"></div>
 </div>
 <script>
 function _initL1TimeQuality() {
 const raw = [
-  {label:"1.1",series:"1",l1time:121.5, quality:2.70, total_sr:40},
-  {label:"1.2",series:"1",l1time:90.75, quality:2.50, total_sr:20},
-  {label:"1.3",series:"1",l1time:113.86,quality:2.80, total_sr:35},
-  {label:"1.4",series:"1",l1time:78.33, quality:2.20, total_sr:15},
-  {label:"1.5",series:"1",l1time:null,  quality:1.00, total_sr:0 },
-  {label:"1.7",series:"1",l1time:99.5,  quality:2.30, total_sr:40},
-  {label:"2.1",series:"2",l1time:57.57, quality:2.80, total_sr:40},
-  {label:"2.2",series:"2",l1time:43.2,  quality:3.30, total_sr:75},
-  {label:"2.3",series:"2",l1time:null,  quality:1.00, total_sr:5 },
-  {label:"2.4",series:"2",l1time:72.5,  quality:1.80, total_sr:20},
-  {label:"2.5",series:"2",l1time:40.8,  quality:4.10, total_sr:90},
+  {label:"1.1 π0",series:"1",l1time:121.5, quality:2.70, total_sr:40},
+  {label:"1.2 π0.5",series:"1",l1time:90.75, quality:2.50, total_sr:20},
+  {label:"1.3 ΔActions",series:"1",l1time:113.86,quality:2.80, total_sr:35},
+  {label:"1.4 RABC low",series:"1",l1time:78.33, quality:2.20, total_sr:15},
+  {label:"1.5 RABC high",series:"1",l1time:null,  quality:1.00, total_sr:0 },
+  {label:"1.7 Δ+RABC",series:"1",l1time:99.5,  quality:2.30, total_sr:40},
+  {label:"2.1 HQ",series:"2",l1time:57.57, quality:2.80, total_sr:40},
+  {label:"2.2 HQ+RABC+Δ",series:"2",l1time:43.2,  quality:3.30, total_sr:75},
+  {label:"2.3 HQ+mirror",series:"2",l1time:null,  quality:1.00, total_sr:5 },
+  {label:"2.4 HQ chunk45",series:"2",l1time:72.5,  quality:1.80, total_sr:20},
+  {label:"2.5 HQ+RABC+Δ★",series:"2",l1time:40.8,  quality:4.10, total_sr:90},
 ];
 
-// Sort: fastest L1 time first (best performance = least time).
-// N/A (null) goes to the end.
-const data = [...raw].sort((a,b) => {
-  if (a.l1time===null && b.l1time===null) return 0;
-  if (a.l1time===null) return 1;
-  if (b.l1time===null) return -1;
-  return a.l1time - b.l1time;
-});
+const data = raw.filter(d => d.l1time !== null);
+const noData = raw.filter(d => d.l1time === null);
 
 const seriesColor = s => s === "2" ? "#f7934f" : "#4f8ef7";
-const margin = {top:20, right:58, bottom:48, left:46};
+const margin = {top:40, right:24, bottom:48, left:54};
 const svg = d3.select("#tq-chart");
 const container = svg.node().parentElement;
 const tooltip = d3.select("#tq-tooltip");
 
+const rScale = d3.scaleSqrt().domain([0, 100]).range([4, 22]);
+
 function render() {
   svg.selectAll("*").remove();
   const W = container.clientWidth;
-  const H = Math.max(240, Math.min(320, W * 0.4));
+  const H = Math.max(300, Math.min(400, W * 0.52));
   const w = W - margin.left - margin.right;
   const h = H - margin.top - margin.bottom;
   svg.attr("width",W).attr("height",H);
   const g = svg.append("g").attr("transform",`translate(${margin.left},${margin.top})`);
 
-  const x = d3.scaleBand().domain(data.map(d=>d.label)).range([0,w]).padding(0.28);
-  const yTime = d3.scaleLinear().domain([0, 140]).range([h,0]).nice();
-  const yQual = d3.scaleLinear().domain([0, 5]).range([h,0]);
+  const xTime = d3.scaleLinear().domain([30, 135]).range([0,w]);
+  const yQual = d3.scaleLinear().domain([1.5, 4.5]).range([h,0]);
 
-  g.append("g").attr("class","grid").selectAll("line").data(yTime.ticks(5)).join("line")
-    .attr("x1",0).attr("x2",w).attr("y1",d=>yTime(d)).attr("y2",d=>yTime(d));
+  // Grid
+  g.append("g").attr("class","grid").selectAll("line.h").data(yQual.ticks(5)).join("line")
+    .attr("x1",0).attr("x2",w).attr("y1",d=>yQual(d)).attr("y2",d=>yQual(d));
+  g.append("g").attr("class","grid").selectAll("line.v").data(xTime.ticks(6)).join("line")
+    .attr("y1",0).attr("y2",h).attr("x1",d=>xTime(d)).attr("x2",d=>xTime(d));
 
-  g.append("g").attr("class","axis").attr("transform",`translate(0,${h})`).call(
-    d3.axisBottom(x).tickSize(0)).select(".domain").remove();
-  g.append("g").attr("class","axis").call(
-    d3.axisLeft(yTime).ticks(5).tickFormat(d=>d+"s").tickSize(0))
-    .call(ax=>ax.select(".domain").remove())
-    .call(ax=>ax.selectAll(".tick line").remove());
-  g.append("g").attr("class","axis").attr("transform",`translate(${w},0)`).call(
-    d3.axisRight(yQual).ticks(5).tickSize(0))
-    .call(ax=>ax.select(".domain").remove())
-    .call(ax=>ax.selectAll(".tick line").remove());
-
-  // Right axis label
-  g.append("text").attr("x",w+50).attr("y",h/2).attr("text-anchor","middle")
-    .attr("fill","#fbbf24").attr("font-size",10)
-    .attr("transform",`rotate(90,${w+50},${h/2})`)
-    .text("Quality (1–5)");
-
-  // Series pip under labels
-  data.forEach(d => {
-    g.append("rect")
-      .attr("x",x(d.label)).attr("width",x.bandwidth())
-      .attr("y",h+28).attr("height",4).attr("rx",2)
-      .attr("fill",seriesColor(d.series)).attr("opacity",0.8);
-  });
+  // "Better" direction annotation
+  g.append("text").attr("x",4).attr("y",8).attr("fill","#4dc98a").attr("font-size",9).attr("opacity",0.6)
+    .text("← faster, better quality ↑");
 
-  // Bars
-  data.forEach(d => {
-    if (d.l1time !== null) {
-      g.append("rect")
-        .attr("x",x(d.label)).attr("width",x.bandwidth())
-        .attr("y",yTime(d.l1time)).attr("height",h-yTime(d.l1time))
-        .attr("fill",seriesColor(d.series)).attr("rx",3).attr("opacity",0.85)
-        .style("cursor","pointer")
-        .on("mousemove",function(event){
-          tooltip.style("opacity",1).html(`
-            <strong>Experiment ${d.label} <small style="color:${seriesColor(d.series)}">(Series ${d.series})</small></strong>\n          <div style=\"margin-top:6px;padding-top:6px;border-top:1px solid #2a2d3a;font-size:11px;color:#8b8fa8;line-height:1.5\">${(EXPERIMENTS[d.label]||{}).note||''}</div>
-            <div class="tooltip-row"><span>Avg L1 Time</span><span>${d.l1time.toFixed(1)}s</span></div>
-            <div class="tooltip-row"><span>Fold Quality</span><span>${d.quality.toFixed(2)}/5</span></div>
-            <div class="tooltip-row"><span>Total SR</span><span>${d.total_sr}%</span></div>
-          `);
-          const bx=container.getBoundingClientRect();
-          const ex=event.clientX-bx.left, ey=event.clientY-bx.top;
-          tooltip.style("left",Math.min(ex+12,W-185)+"px").style("top",Math.max(ey-90,0)+"px");
-        })
-        .on("mouseleave",()=>tooltip.style("opacity",0));
-
-      g.append("text")
-        .attr("x",x(d.label)+x.bandwidth()/2).attr("y",yTime(d.l1time)-4)
-        .attr("text-anchor","middle").attr("fill","#e8eaf0")
-        .attr("font-size",Math.max(8,Math.min(11,x.bandwidth()*0.28)))
-        .text(d.l1time.toFixed(0)+"s");
-    } else {
-      g.append("text")
-        .attr("x",x(d.label)+x.bandwidth()/2).attr("y",h-8)
-        .attr("text-anchor","middle").attr("fill","#3a3d4a").attr("font-size",9)
-        .text("N/A");
-    }
-  });
+  // Axes
+  g.append("g").attr("class","axis").attr("transform",`translate(0,${h})`).call(
+    d3.axisBottom(xTime).ticks(6).tickFormat(d=>d+"s").tickSize(0))
+    .call(gg=>gg.select(".domain").remove());
 
-  // Quality line
-  const validLine = d3.line().x(d=>x(d.label)+x.bandwidth()/2).y(d=>yQual(d.quality))
-    .curve(d3.curveMonotoneX);
-  g.append("path").datum(data).attr("d",validLine)
-    .attr("fill","none").attr("stroke","#fbbf24").attr("stroke-width",2)
-    .attr("stroke-dasharray","5,3").attr("opacity",0.85);
-  data.forEach(d => {
+  g.append("g").attr("class","axis").call(
+    d3.axisLeft(yQual).ticks(5).tickFormat(d=>d.toFixed(1)).tickSize(0))
+    .call(ax=>ax.select(".domain").remove());
+
+  // Axis labels
+  g.append("text").attr("x",w/2).attr("y",h+38).attr("text-anchor","middle")
+    .attr("fill","#8b8fa8").attr("font-size",11).text("Level 1 Completion Time (s) →  slower");
+  g.append("text").attr("x",-h/2).attr("y",-40).attr("text-anchor","middle")
+    .attr("transform","rotate(-90)").attr("fill","#8b8fa8").attr("font-size",11).text("Fold Quality (1–5)");
+
+  // Quality = 3.0 reference line
+  g.append("line").attr("class","annotation-line")
+    .attr("x1",0).attr("x2",w).attr("y1",yQual(3.0)).attr("y2",yQual(3.0));
+  g.append("text").attr("x",w-2).attr("y",yQual(3.0)-5).attr("text-anchor","end")
+    .attr("fill","#3a3d4a").attr("font-size",8).text("quality = 3.0");
+
+  // Draw bubbles (larger ones first so smaller ones are on top)
+  const sorted = [...data].sort((a,b) => b.total_sr - a.total_sr);
+
+  sorted.forEach(d => {
+    const cx = xTime(d.l1time);
+    const cy = yQual(d.quality);
+    const r = rScale(d.total_sr);
+    const c = seriesColor(d.series);
+
+    // Bubble
     g.append("circle")
-      .attr("cx",x(d.label)+x.bandwidth()/2).attr("cy",yQual(d.quality))
-      .attr("r",4).attr("fill","#fbbf24").attr("stroke","#1a1d27").attr("stroke-width",1.5);
+      .attr("cx",cx).attr("cy",cy).attr("r",r)
+      .attr("fill",c).attr("fill-opacity",0.25)
+      .attr("stroke",c).attr("stroke-width",1.5)
+      .style("cursor","pointer")
+      .on("mousemove",function(event){
+        tooltip.style("opacity",1).html(`
+          <strong>${d.label} <small style="color:${c}">(Series ${d.series})</small></strong>
+          <div class="tooltip-row"><span>L1 Completion Time</span><span>${d.l1time.toFixed(1)}s</span></div>
+          <div class="tooltip-row"><span>Fold Quality</span><span>${d.quality.toFixed(2)} / 5</span></div>
+          <div class="tooltip-row"><span>Total Success Rate</span><span>${d.total_sr}%</span></div>
+        `);
+        const bx=container.getBoundingClientRect();
+        const ex=event.clientX-bx.left, ey=event.clientY-bx.top;
+        tooltip.style("left",Math.min(ex+12,W-210)+"px").style("top",Math.max(ey-90,0)+"px");
+      })
+      .on("mouseleave",()=>tooltip.style("opacity",0));
+
+    // Label below bubble
+    g.append("text")
+      .attr("x",cx).attr("y", cy + r + 12)
+      .attr("text-anchor","middle")
+      .attr("fill","#e8eaf0").attr("font-size",9).attr("font-weight","500")
+      .text(d.label);
   });
 
-  g.append("text").attr("x",w).attr("y",-8).attr("text-anchor","end")
-    .attr("fill","#8b8fa8").attr("font-size",10)
-    .text("sorted: fastest → slowest L1 time (N/A last)");
+  // "No data" annotation for experiments with null L1 time
+  if (noData.length > 0) {
+    const noDataText = noData.map(d => d.label).join(", ");
+    g.append("text").attr("x",w).attr("y",h-4).attr("text-anchor","end")
+      .attr("fill","#3a3d4a").attr("font-size",9)
+      .text(`No L1 completions: ${noDataText}`);
+  }
 }
 
 render();
 window.addEventListener("resize", render);
-
-const EXPERIMENTS = {
-  "1.1": { desc:"π0 · all data · 200k steps · MEAN_STD", note:"Base pi0 policy trained from scratch on the full dataset." },
-  "1.2": { desc:"π0.5 · all data · 200k steps · MEAN_STD", note:"Upgraded to pi0.5 architecture, same data and steps." },
-  "1.3": { desc:"π0.5 · all data · 200k steps · ΔActions · QUANTILES", note:"Adds Delta Actions on top of 1.2 — actions expressed as deltas." },
-  "1.4": { desc:"π0.5 · all data · 200k steps �� RABC κ=0.01", note:"Selective Action Reward Model with low κ (≈ mean threshold, not very selective)." },
-  "1.5": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215", note:"SARM with κ = mean + ½ std — more selective filtering than 1.4." },
-  "1.7": { desc:"π0.5 · all data · 200k steps · ΔActions + RABC κ=0.0215 · QUANTILES", note:"Best of Series 1. Base checkpoint for 2.5." },
-  "2.1": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3", note:"Fine-tunes 1.3 on curated high-quality data only." },
-  "2.2": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + ΔActions", note:"Adds RABC on high-quality fine-tune from 1.3." },
-  "2.3": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + ΔActions + mirroring", note:"Augments the high-quality dataset with mirrored trajectories." },
-  "2.4": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 · chunk=45", note:"Explores chunked action prediction (chunk=50, RTC size=50, execution horizon=35)." },
-  "2.5": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.7 + RABC κ=0.0265 + ΔActions (best)", note:"Top performer. Best overall result." },
-};
-
-
-(function buildRefTable() {
-  const container = document.getElementById('exp-ref');
-  if (!container) return;
-  const order = ["1.1","1.2","1.3","1.4","1.5","1.7","2.1","2.2","2.3","2.4","2.5"];
-  let html = '<table class="exp-table"><thead><tr><th>#</th><th>Description</th></tr></thead><tbody>';
-  order.forEach(k => {
-    const a = EXPERIMENTS[k];
-    const series = k.startsWith("2") ? "s2" : "s1";
-    html += `<tr class="${series}"><td><strong>${k}</strong></td><td>${a.desc}</td></tr>`;
-  });
-  html += '</tbody></table>';
-  container.innerHTML = html;
-})();
-
 }
 
 if (typeof d3 !== "undefined") {

app/src/content/embeds/folding/loss-curves.html

@@ -65,17 +65,17 @@
 <script>
 function _initLossCurves() {
 const RUNS = [
-  { key: "ablation1_1_2",      label: "1.1: π0 · MEAN_STD",                              series: "s1", color: "#ef5350" },
-  { key: "ablation1_2_2",      label: "1.2: π0.5 · MEAN_STD",                            series: "s1", color: "#f59e0b" },
-  { key: "ablation1_3_17_q",   label: "1.3: π0.5 · ΔActions · QUANTILES",                series: "s1", color: "#10b981" },
-  { key: "ablation1-4",        label: "1.4: π0.5 · RABC κ=0.01",                         series: "s1", color: "#3b82f6" },
-  { key: "ablation1-5_9",      label: "1.5: π0.5 · RABC κ=0.0215",                       series: "s1", color: "#8b5cf6" },
-  { key: "ablation1-7_2",      label: "1.7: π0.5 · ΔActions · RABC κ=0.0215 · QUANTILES",series: "s1", color: "#ec4899" },
-  { key: "ablation2-1_100k_q", label: "2.1: HQ finetune from 1.3",                       series: "s2", color: "#14b8a6" },
-  { key: "ablation2-2_100k",   label: "2.2: HQ + RABC κ=0.0265 + ΔActions",              series: "s2", color: "#6366f1" },
-  { key: "ablation2-3_100k_q_it", label: "2.3: HQ + ΔActions + mirroring",               series: "s2", color: "#a78bfa" },
-  { key: "ablation2-4_100k_q", label: "2.4: HQ + ΔActions · chunk=45",                   series: "s2", color: "#f97316" },
-  { key: "ablation2-5_0",      label: "2.5: HQ + RABC + ΔActions (best)",                series: "s2", color: "#22d3ee" },
+  { key: "ablation1_1_2",      label: "1.1 π0",              series: "s1", color: "#ef5350" },
+  { key: "ablation1_2_2",      label: "1.2 π0.5",            series: "s1", color: "#f59e0b" },
+  { key: "ablation1_3_17_q",   label: "1.3 ΔActions",        series: "s1", color: "#10b981" },
+  { key: "ablation1-4",        label: "1.4 RABC low",        series: "s1", color: "#3b82f6" },
+  { key: "ablation1-5_9",      label: "1.5 RABC high",       series: "s1", color: "#8b5cf6" },
+  { key: "ablation1-7_2",      label: "1.7 Δ+RABC",          series: "s1", color: "#ec4899" },
+  { key: "ablation2-1_100k_q", label: "2.1 HQ",              series: "s2", color: "#14b8a6" },
+  { key: "ablation2-2_100k",   label: "2.2 HQ+RABC+Δ",      series: "s2", color: "#6366f1" },
+  { key: "ablation2-3_100k_q_it", label: "2.3 HQ+mirror",    series: "s2", color: "#a78bfa" },
+  { key: "ablation2-4_100k_q", label: "2.4 HQ chunk45",      series: "s2", color: "#f97316" },
+  { key: "ablation2-5_0",      label: "2.5 HQ+RABC+Δ★",     series: "s2", color: "#22d3ee" },
 ];
 
 // ──────────────────────────────────────────────

app/src/content/embeds/folding/statistical-analysis.html

@@ -8,7 +8,7 @@
 body{background:transparent;font-family:system-ui,sans-serif;color:#e8eaf0}
 .wrap{max-width:980px;margin:0 auto;padding:20px 20px 36px}
 
-.card{background:#1a1d27;border:1px solid #2a2d3a;border-radius:6px;overflow:hidden;margin-bottom:12px}
+.card{background:#1a1d27;border:1px solid #2a2d3a;border-radius:6px;overflow:visible;margin-bottom:12px}
 .card-head{padding:9px 14px;border-bottom:1px solid #2a2d3a;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#8b8fa8;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
 .chart-area{padding:16px 16px 10px}
 svg text{font-family:system-ui,sans-serif}
@@ -44,7 +44,7 @@ svg text{font-family:system-ui,sans-serif}
       <button class="ctrl-btn" id="v-l2" onclick="setVLevel('L2')">Level 2</button>
     </div>
   </div>
-  <div class="chart-area"><svg id="svg-violin" width="100%" height="340"></svg></div>
+  <div class="chart-area" style="overflow:visible"><svg id="svg-violin" width="100%" height="500" style="overflow:visible"></svg></div>
   <div class="legend">
     <div class="li"><div class="lsw" style="background:#f7934f"></div>Series 1</div>
     <div class="li"><div class="lsw" style="background:#4dc98a"></div>Series 2</div>
@@ -59,26 +59,26 @@ svg text{font-family:system-ui,sans-serif}
 <script>
 function _initStatAnalysis() {
 // ── DATA ──────────────────────────────────────────────────────────────────────
-const EXPS = ['1.1','1.2','1.3','1.4','1.5','1.7','2.1','2.2','2.3','2.4','2.5'];
+const EXPS = ['1.1 π0','1.2 π0.5','1.3 ΔActions','1.4 RABC low','1.5 RABC high','1.7 Δ+RABC','2.1 HQ','2.2 HQ+RABC+Δ','2.3 HQ+mirror','2.4 HQ chunk45','2.5 HQ+RABC+Δ★'];
 const DATA = {
-  '1.1': {total:[8,20],  L1:[8,10],  L2:[0,10],  series:1},
-  '1.2': {total:[4,20],  L1:[4,10],  L2:[0,10],  series:1},
-  '1.3': {total:[7,20],  L1:[7,10],  L2:[0,10],  series:1},
-  '1.4': {total:[3,20],  L1:[3,10],  L2:[0,10],  series:1},
-  '1.5': {total:[0,20],  L1:[0,10],  L2:[0,10],  series:1},
-  '1.7': {total:[8,20],  L1:[8,10],  L2:[0,10],  series:1},
-  '2.1': {total:[8,20],  L1:[7,10],  L2:[1,10],  series:2},
-  '2.2': {total:[15,20], L1:[10,10], L2:[5,10],  series:2},
-  '2.3': {total:[1,20],  L1:[0,10],  L2:[1,10],  series:2},
-  '2.4': {total:[4,20],  L1:[4,10],  L2:[0,10],  series:2},
-  '2.5': {total:[18,20], L1:[10,10], L2:[8,10],  series:2},
+  '1.1 π0': {total:[8,20],  L1:[8,10],  L2:[0,10],  series:1},
+  '1.2 π0.5': {total:[4,20],  L1:[4,10],  L2:[0,10],  series:1},
+  '1.3 ΔActions': {total:[7,20],  L1:[7,10],  L2:[0,10],  series:1},
+  '1.4 RABC low': {total:[3,20],  L1:[3,10],  L2:[0,10],  series:1},
+  '1.5 RABC high': {total:[0,20],  L1:[0,10],  L2:[0,10],  series:1},
+  '1.7 Δ+RABC': {total:[8,20],  L1:[8,10],  L2:[0,10],  series:1},
+  '2.1 HQ': {total:[8,20],  L1:[7,10],  L2:[1,10],  series:2},
+  '2.2 HQ+RABC+Δ': {total:[15,20], L1:[10,10], L2:[5,10],  series:2},
+  '2.3 HQ+mirror': {total:[1,20],  L1:[0,10],  L2:[1,10],  series:2},
+  '2.4 HQ chunk45': {total:[4,20],  L1:[4,10],  L2:[0,10],  series:2},
+  '2.5 HQ+RABC+Δ★': {total:[18,20], L1:[10,10], L2:[8,10],  series:2},
 };
 
 // CLD assignments (Barnard's exact test, two-sided, Bonferroni α=0.10/55)
 const CLD = {
-  total: {'2.5':'a','2.2':'ab','1.1':'bc','1.7':'bc','2.1':'bc','1.3':'bc','1.2':'c','2.4':'c','1.4':'c','2.3':'c','1.5':'c'},
-  L1:   {'2.2':'a','2.5':'a','1.1':'ab','1.7':'ab','1.3':'ab','2.1':'ab','1.2':'abc','2.4':'abc','1.4':'bc','1.5':'c','2.3':'c'},
-  L2:   {'2.5':'a','2.2':'ab','2.1':'b','2.3':'b','1.1':'b','1.2':'b','1.3':'b','1.4':'b','1.5':'b','1.7':'b','2.4':'b'},
+  total: {'2.5 HQ+RABC+Δ★':'a','2.2 HQ+RABC+Δ':'ab','1.1 π0':'bc','1.7 Δ+RABC':'bc','2.1 HQ':'bc','1.3 ΔActions':'bc','1.2 π0.5':'c','2.4 HQ chunk45':'c','1.4 RABC low':'c','2.3 HQ+mirror':'c','1.5 RABC high':'c'},
+  L1:   {'2.2 HQ+RABC+Δ':'a','2.5 HQ+RABC+Δ★':'a','1.1 π0':'ab','1.7 Δ+RABC':'ab','1.3 ΔActions':'ab','2.1 HQ':'ab','1.2 π0.5':'abc','2.4 HQ chunk45':'abc','1.4 RABC low':'bc','1.5 RABC high':'c','2.3 HQ+mirror':'c'},
+  L2:   {'2.5 HQ+RABC+Δ★':'a','2.2 HQ+RABC+Δ':'ab','2.1 HQ':'b','2.3 HQ+mirror':'b','1.1 π0':'b','1.2 π0.5':'b','1.3 ΔActions':'b','1.4 RABC low':'b','1.5 RABC high':'b','1.7 Δ+RABC':'b','2.4 HQ chunk45':'b'},
 };
 
 // ── BETA DISTRIBUTION PDF ────────────────────────────────────────────────────
@@ -127,11 +127,12 @@ function setVLevel(lv){
 
 function drawViolin(){
   const svgEl=document.getElementById('svg-violin');
-  const W=svgEl.parentElement.clientWidth-32, H=340;
-  const m={top:50,right:16,bottom:32,left:38};
+  const W=svgEl.parentElement.clientWidth-32, H=500;
+  const m={top:50,right:16,bottom:80,left:70};
   const iW=W-m.left-m.right, iH=H-m.top-m.bottom;
   svgEl.setAttribute('viewBox',`0 0 ${W} ${H}`);
-  const svg=d3.select('#svg-violin').attr('viewBox',`0 0 ${W} ${H}`);
+  svgEl.setAttribute('height', H);
+  const svg=d3.select('#svg-violin').attr('viewBox',`0 0 ${W} ${H}`).attr('height',H);
   svg.selectAll('*').remove();
   const g=svg.append('g').attr('transform',`translate(${m.left},${m.top})`);
 
@@ -219,7 +220,7 @@ function drawViolin(){
   // Axes
   g.append('g').attr('transform',`translate(0,${iH})`)
    .call(d3.axisBottom(x).tickSize(0))
-   .call(gg=>{gg.select('.domain').attr('stroke',BORDER);gg.selectAll('text').attr('fill',d=>seriesColor(DATA[d].series)).attr('font-size',10).attr('dy','1.3em')});
+   .call(gg=>{gg.select('.domain').attr('stroke',BORDER);gg.selectAll('text').attr('fill',d=>seriesColor(DATA[d].series)).attr('font-size',9).attr('transform','rotate(-40)').attr('text-anchor','end').attr('dx','-0.5em').attr('dy','0.3em')});
   g.append('g').call(d3.axisLeft(y).ticks(5).tickFormat(d=>Math.round(d*100)+'%').tickSize(3))
    .call(gg=>{gg.select('.domain').attr('stroke',BORDER);gg.selectAll('text').attr('fill',SUB).attr('font-size',9);gg.selectAll('line').attr('stroke',BORDER)});
   g.append('text').attr('transform','rotate(-90)').attr('x',-iH/2).attr('y',-30).attr('text-anchor','middle')

app/src/content/embeds/folding/subtask-heatmap.html

@@ -19,25 +19,9 @@
   .legend-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--subtext); justify-content: center; }
   .legend-gradient { height: 10px; width: 180px; border-radius: 5px; flex-shrink: 0; }
 
-  .exp-ref-wrap { margin-bottom: 14px; }
-  .exp-ref-toggle { background: none; border: 1px solid #2a2d3a; color: #8b8fa8; font-size: 11px;
-    padding: 4px 10px; border-radius: 6px; cursor: pointer; margin-bottom: 8px; }
-  .exp-ref-toggle:hover { color: #e8eaf0; border-color: #4f8ef7; }
-  .exp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
-  .exp-table th { color: #8b8fa8; font-weight: 500; text-align: left; padding: 4px 8px;
-    border-bottom: 1px solid #2a2d3a; white-space: nowrap; }
-  .exp-table td { color: #c8cad8; padding: 4px 8px; border-bottom: 1px solid #1a1d27; vertical-align: top; }
-  .exp-table td:first-child { color: #e8eaf0; font-weight: 600; white-space: nowrap; }
-  .exp-table tr.s2 td { background: rgba(247,147,79,0.05); }
-  .exp-table tr.s1 td { background: rgba(79,142,247,0.04); }
-  .exp-table tr:hover td { background: rgba(255,255,255,0.04); }
 </style>
 </head>
 <body>
-<div class="exp-ref-wrap">
-  <button class="exp-ref-toggle" onclick="var t=document.getElementById('exp-ref');t.style.display=t.style.display==='none'?'':'none';this.textContent=t.style.display==='none'?'▶ Show experiment descriptions':'▼ Hide experiment descriptions'">▼ Hide experiment descriptions</button>
-  <div id="exp-ref"></div>
-</div>
 <div style="position:relative">
   <svg id="hm-chart"></svg>
   <div class="tooltip" id="hm-tooltip"></div>
@@ -50,17 +34,17 @@
 <script>
 function _initSubtaskHeatmap() {
 const rawData = [
-  {label:"1.1",series:"1",total_sr:40, times:[null, 19.2,  42.22, 14.33, 19.88, 27.25]},
-  {label:"1.2",series:"1",total_sr:20, times:[50,   39.27, 41.5,  12.3,  13.75, 10.75]},
-  {label:"1.3",series:"1",total_sr:35, times:[null, 19.5,  44.2,  14.8,  30.33, 22.14]},
-  {label:"1.4",series:"1",total_sr:15, times:[null, 20.8,  36.62, 10.0,  18.8,  12.67]},
-  {label:"1.5",series:"1",total_sr:0,  times:[240,  21.4,  100.0, null,  null,  null ]},
-  {label:"1.7",series:"1",total_sr:40, times:[157.5,19.33, 32.64, 8.9,   11.0,  23.38]},
-  {label:"2.1",series:"2",total_sr:40, times:[77.5, 11.08, 21.09, 5.45,  5.5,   11.5 ]},
-  {label:"2.2",series:"2",total_sr:75, times:[34.33,6.25,  12.31, 3.75,  5.31,  8.93 ]},
-  {label:"2.3",series:"2",total_sr:5,  times:[49,   14.0,  23.71, 17.5,  11.0,  4.0  ]},
-  {label:"2.4",series:"2",total_sr:20, times:[120,  10.09, 41.18, 7.89,  7.33,  10.0 ]},
-  {label:"2.5",series:"2",total_sr:90, times:[62.25,8.28,  12.0,  5.28,  5.22,  6.83 ]},
+  {label:"1.1 π0",series:"1",total_sr:40, times:[null, 19.2,  42.22, 14.33, 19.88, 27.25]},
+  {label:"1.2 π0.5",series:"1",total_sr:20, times:[50,   39.27, 41.5,  12.3,  13.75, 10.75]},
+  {label:"1.3 ΔActions",series:"1",total_sr:35, times:[null, 19.5,  44.2,  14.8,  30.33, 22.14]},
+  {label:"1.4 RABC low",series:"1",total_sr:15, times:[null, 20.8,  36.62, 10.0,  18.8,  12.67]},
+  {label:"1.5 RABC high",series:"1",total_sr:0,  times:[240,  21.4,  100.0, null,  null,  null ]},
+  {label:"1.7 Δ+RABC",series:"1",total_sr:40, times:[157.5,19.33, 32.64, 8.9,   11.0,  23.38]},
+  {label:"2.1 HQ",series:"2",total_sr:40, times:[77.5, 11.08, 21.09, 5.45,  5.5,   11.5 ]},
+  {label:"2.2 HQ+RABC+Δ",series:"2",total_sr:75, times:[34.33,6.25,  12.31, 3.75,  5.31,  8.93 ]},
+  {label:"2.3 HQ+mirror",series:"2",total_sr:5,  times:[49,   14.0,  23.71, 17.5,  11.0,  4.0  ]},
+  {label:"2.4 HQ chunk45",series:"2",total_sr:20, times:[120,  10.09, 41.18, 7.89,  7.33,  10.0 ]},
+  {label:"2.5 HQ+RABC+Δ★",series:"2",total_sr:90, times:[62.25,8.28,  12.0,  5.28,  5.22,  6.83 ]},
 ];
 
 // Sort rows: best → worst by total_sr (heatmap: top = best)
@@ -87,7 +71,7 @@ const canvas = document.getElementById("lgd");
 const ctx = canvas.getContext("2d");
 for (let i=0; i<180; i++) { ctx.fillStyle=colorScale(i/180*120); ctx.fillRect(i,0,1,10); }
 
-const margin = {top:12, right:16, bottom:36, left:60};
+const margin = {top:12, right:16, bottom:36, left:120};
 const svg = d3.select("#hm-chart");
 const container = svg.node().parentElement;
 const tooltip = d3.select("#hm-tooltip");
@@ -96,7 +80,7 @@ function render() {
   svg.selectAll("*").remove();
   const W = container.clientWidth;
   const cellW = Math.floor((W - margin.left - margin.right) / subtasks.length);
-  const cellH = Math.max(26, Math.min(40, cellW * 0.7));
+  const cellH = Math.max(34, Math.min(44, cellW * 0.7));
   const H = data.length * cellH + margin.top + margin.bottom;
   svg.attr("width",W).attr("height",H);
   const g = svg.append("g").attr("transform",`translate(${margin.left},${margin.top})`);
@@ -118,16 +102,14 @@ function render() {
       .attr("fill",seriesColor(d.series)).attr("opacity",0.9);
 
     g.append("text")
-      .attr("x",-8).attr("y",ri*cellH+cellH/2+4)
-      .attr("text-anchor","end").attr("fill","#e8eaf0").attr("font-size",11).attr("font-weight","500")
+      .attr("x",-8).attr("y",ri*cellH+cellH/2)
+      .attr("text-anchor","end").attr("fill","#e8eaf0").attr("font-size",10).attr("font-weight","500")
       .text(d.label);
 
-    // total SR badge
     g.append("text")
-      .attr("x",-8).attr("y",ri*cellH+cellH/2+4)
-      .attr("text-anchor","start").attr("fill","#8b8fa8").attr("font-size",8)
-      .attr("transform",`translate(${-margin.left+10},0)`)
-      .text(d.total_sr+"%");
+      .attr("x",-8).attr("y",ri*cellH+cellH/2+11)
+      .attr("text-anchor","end").attr("fill","#8b8fa8").attr("font-size",8)
+      .text(d.total_sr+"% SR");
   });
 
   // Cells
@@ -177,34 +159,20 @@ render();
 window.addEventListener("resize", render);
 
 const EXPERIMENTS = {
-  "1.1": { desc:"π0 · all data · 200k steps · MEAN_STD", note:"Base pi0 policy trained from scratch on the full dataset." },
-  "1.2": { desc:"π0.5 · all data · 200k steps · MEAN_STD", note:"Upgraded to pi0.5 architecture, same data and steps." },
-  "1.3": { desc:"π0.5 · all data · 200k steps · ΔActions · QUANTILES", note:"Adds Delta Actions on top of 1.2 — actions expressed as deltas." },
-  "1.4": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01", note:"Selective Action Reward Model with low κ (≈ mean threshold, not very selective)." },
-  "1.5": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215", note:"SARM with κ = mean + ½ std — more selective filtering than 1.4." },
-  "1.7": { desc:"π0.5 · all data · 200k steps · ΔActions + RABC κ=0.0215 · QUANTILES", note:"Best of Series 1. Base checkpoint for 2.5." },
-  "2.1": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3", note:"Fine-tunes 1.3 on curated high-quality data only." },
-  "2.2": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + ΔActions", note:"Adds RABC on high-quality fine-tune from 1.3." },
-  "2.3": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + ΔActions + mirroring", note:"Augments the high-quality dataset with mirrored trajectories." },
-  "2.4": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 · chunk=45", note:"Explores chunked action prediction (chunk=50, RTC size=50, execution horizon=35)." },
-  "2.5": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.7 + RABC κ=0.0265 + ΔActions (best)", note:"Top performer. Best overall result." },
+  "1.1 π0": { desc:"π0 · all data · 200k steps · MEAN_STD", note:"Base pi0 policy trained from scratch on the full dataset." },
+  "1.2 π0.5": { desc:"π0.5 · all data · 200k steps · MEAN_STD", note:"Upgraded to pi0.5 architecture, same data and steps." },
+  "1.3 ΔActions": { desc:"π0.5 · all data · 200k steps · ΔActions · QUANTILES", note:"Adds Delta Actions on top of 1.2 — actions expressed as deltas." },
+  "1.4 RABC low": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01", note:"Selective Action Reward Model with low κ (≈ mean threshold, not very selective)." },
+  "1.5 RABC high": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215", note:"SARM with κ = mean + ½ std — more selective filtering than 1.4." },
+  "1.7 Δ+RABC": { desc:"π0.5 · all data · 200k steps · ΔActions + RABC κ=0.0215 · QUANTILES", note:"Best of Series 1. Base checkpoint for 2.5." },
+  "2.1 HQ": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3", note:"Fine-tunes 1.3 on curated high-quality data only." },
+  "2.2 HQ+RABC+Δ": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + ΔActions", note:"Adds RABC on high-quality fine-tune from 1.3." },
+  "2.3 HQ+mirror": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + ΔActions + mirroring", note:"Augments the high-quality dataset with mirrored trajectories." },
+  "2.4 HQ chunk45": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 · chunk=45", note:"Explores chunked action prediction (chunk=50, RTC size=50, execution horizon=35)." },
+  "2.5 HQ+RABC+Δ★": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.7 + RABC κ=0.0265 + ΔActions (best)", note:"Top performer. Best overall result." },
 };
 
 
-(function buildRefTable() {
-  const container = document.getElementById('exp-ref');
-  if (!container) return;
-  const order = ["1.1","1.2","1.3","1.4","1.5","1.7","2.1","2.2","2.3","2.4","2.5"];
-  let html = '<table class="exp-table"><thead><tr><th>#</th><th>Description</th></tr></thead><tbody>';
-  order.forEach(k => {
-    const a = EXPERIMENTS[k];
-    const series = k.startsWith("2") ? "s2" : "s1";
-    html += `<tr class="${series}"><td><strong>${k}</strong></td><td>${a.desc}</td></tr>`;
-  });
-  html += '</tbody></table>';
-  container.innerHTML = html;
-})();
-
 }
 
 if (typeof d3 !== "undefined") {

app/src/content/embeds/folding/success-rates.html

@@ -61,19 +61,6 @@
   .tooltip-ci { font-size: 10px; color: #555; margin-left: 4px; }
   .tooltip-note { margin-top: 7px; padding-top: 7px; border-top: 1px solid #2a2d3a; font-size: 11px; color: #8b8fa8; line-height: 1.5; }
 
-  /* ── Ablation table ── */
-  .abl-ref-wrap { margin-bottom: 14px; }
-  .abl-ref-toggle { background: none; border: 1px solid #2a2d3a; color: #8b8fa8; font-size: 11px;
-    padding: 4px 10px; border-radius: 6px; cursor: pointer; margin-bottom: 8px; }
-  .abl-ref-toggle:hover { color: #e8eaf0; border-color: #4f8ef7; }
-  .abl-table { width: 100%; border-collapse: collapse; font-size: 11px; }
-  .abl-table th { color: #8b8fa8; font-weight: 500; text-align: left; padding: 4px 8px; border-bottom: 1px solid #2a2d3a; white-space: nowrap; }
-  .abl-table td { color: #c8cad8; padding: 4px 8px; border-bottom: 1px solid #1a1d27; vertical-align: top; }
-  .abl-table td:first-child { color: #e8eaf0; font-weight: 600; white-space: nowrap; }
-  .abl-table tr.s2 td { background: rgba(247,147,79,0.05); }
-  .abl-table tr.s1 td { background: rgba(79,142,247,0.04); }
-  .abl-table tr:hover td { background: rgba(255,255,255,0.04); }
-
   /* ── Chart ── */
   .axis text { fill: var(--subtext); font-size: 12px; }
   .axis line, .axis path { stroke: var(--grid); }
@@ -117,14 +104,8 @@
   </span>
 </div>
 
-<!-- Experiment reference table -->
-<div class="abl-ref-wrap">
-  <button class="abl-ref-toggle" onclick="var t=document.getElementById('sr-abl-ref');t.style.display=t.style.display==='none'?'':'none';this.textContent=t.style.display==='none'?'▶ Show experiment descriptions':'▼ Hide experiment descriptions'">▼ Hide experiment descriptions</button>
-  <div id="sr-abl-ref"></div>
-</div>
-
 <div style="position:relative">
-  <svg id="sr-chart"></svg>
+  <svg id="sr-chart" style="overflow:visible"></svg>
   <div class="tooltip" id="sr-tooltip"></div>
 </div>
 
@@ -132,17 +113,17 @@
 function _initSuccessRates() {
 // ── Experiment metadata ───────────────────────────────────────────────────
 const EXPERIMENTS = {
-  "1.1": { desc:"π0 · all data · 200k steps · MEAN_STD",                                                 note:"π0 base model fine-tuned on full dataset. Default normalization." },
-  "1.2": { desc:"π0.5 · all data · 200k steps · MEAN_STD",                                               note:"Upgraded to π0.5 with MEAN_STD normalization." },
-  "1.3": { desc:"π0.5 · all data · 200k steps · ΔActions · QUANTILES",                                   note:"Adds delta actions and switches to QUANTILES normalization." },
-  "1.4": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01",                                            note:"RABC with low κ — not very selective. MEAN_STD norm, no delta actions." },
-  "1.5": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215",                                          note:"RABC with higher κ (mean + ½σ). MEAN_STD norm, no delta actions." },
-  "1.7": { desc:"π0.5 · all data · 200k steps · ΔActions + RABC κ=0.0215 · QUANTILES",                   note:"Best of Series 1. Base checkpoint for 2.5." },
-  "2.1": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3",                                      note:"Fine-tunes 1.3 on curated high-quality data. No RABC." },
-  "2.2": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + ΔActions",           note:"Adds RABC on high-quality fine-tune from 1.3." },
-  "2.3": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + ΔActions + mirroring",         note:"Augments HQ data with mirrored trajectories." },
-  "2.4": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 · chunk=45",                           note:"Larger action chunk size (45 vs default 30)." },
-  "2.5": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.7 + RABC κ=0.0265 + ΔActions (best)",    note:"Top performer. Best overall result." },
+  "1.1 π0": { desc:"π0 · all data · 200k steps · MEAN_STD",                                                 note:"π0 base model fine-tuned on full dataset. Default normalization." },
+  "1.2 π0.5": { desc:"π0.5 · all data · 200k steps · MEAN_STD",                                               note:"Upgraded to π0.5 with MEAN_STD normalization." },
+  "1.3 ΔActions": { desc:"π0.5 · all data · 200k steps · ΔActions · QUANTILES",                                   note:"Adds delta actions and switches to QUANTILES normalization." },
+  "1.4 RABC low": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01",                                            note:"RABC with low κ — not very selective. MEAN_STD norm, no delta actions." },
+  "1.5 RABC high": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215",                                          note:"RABC with higher κ (mean + ½σ). MEAN_STD norm, no delta actions." },
+  "1.7 Δ+RABC": { desc:"π0.5 · all data · 200k steps · ΔActions + RABC κ=0.0215 · QUANTILES",                   note:"Best of Series 1. Base checkpoint for 2.5." },
+  "2.1 HQ": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3",                                      note:"Fine-tunes 1.3 on curated high-quality data. No RABC." },
+  "2.2 HQ+RABC+Δ": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + ΔActions",           note:"Adds RABC on high-quality fine-tune from 1.3." },
+  "2.3 HQ+mirror": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + ΔActions + mirroring",         note:"Augments HQ data with mirrored trajectories." },
+  "2.4 HQ chunk45": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 · chunk=45",                           note:"Larger action chunk size (45 vs default 30)." },
+  "2.5 HQ+RABC+Δ★": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.7 + RABC κ=0.0265 + ΔActions (best)",    note:"Top performer. Best overall result." },
 };
 
 // ── Raw data ───────────────────────────────────────────────────────────────
@@ -150,17 +131,17 @@ const EXPERIMENTS = {
 const N = { total: 20, l1: 10, l2: 10 };
 
 const raw = [
-  {label:"1.1", series:"1", total:40, l1:80,  l2:0 },
-  {label:"1.2", series:"1", total:20, l1:40,  l2:0 },
-  {label:"1.3", series:"1", total:35, l1:70,  l2:0 },
-  {label:"1.4", series:"1", total:15, l1:30,  l2:0 },
-  {label:"1.5", series:"1", total:0,  l1:0,   l2:0 },
-  {label:"1.7", series:"1", total:40, l1:80,  l2:0 },
-  {label:"2.1", series:"2", total:40, l1:70,  l2:10},
-  {label:"2.2", series:"2", total:75, l1:100, l2:50},
-  {label:"2.3", series:"2", total:5,  l1:0,   l2:10},
-  {label:"2.4", series:"2", total:20, l1:40,  l2:0 },
-  {label:"2.5", series:"2", total:90, l1:100, l2:80},
+  {label:"1.1 π0", series:"1", total:40, l1:80,  l2:0 },
+  {label:"1.2 π0.5", series:"1", total:20, l1:40,  l2:0 },
+  {label:"1.3 ΔActions", series:"1", total:35, l1:70,  l2:0 },
+  {label:"1.4 RABC low", series:"1", total:15, l1:30,  l2:0 },
+  {label:"1.5 RABC high", series:"1", total:0,  l1:0,   l2:0 },
+  {label:"1.7 Δ+RABC", series:"1", total:40, l1:80,  l2:0 },
+  {label:"2.1 HQ", series:"2", total:40, l1:70,  l2:10},
+  {label:"2.2 HQ+RABC+Δ", series:"2", total:75, l1:100, l2:50},
+  {label:"2.3 HQ+mirror", series:"2", total:5,  l1:0,   l2:10},
+  {label:"2.4 HQ chunk45", series:"2", total:20, l1:40,  l2:0 },
+  {label:"2.5 HQ+RABC+Δ★", series:"2", total:90, l1:100, l2:80},
 ];
 
 // ── Wilson 90% CI ──────────────────────────────────────────────────────────
@@ -218,7 +199,7 @@ function getSorted() {
 }
 
 // ── Render ─────────────────────────────────────────────────────────────────
-const margin = {top:28, right:20, bottom:48, left:46};
+const margin = {top:28, right:20, bottom:80, left:80};
 const svg       = d3.select("#sr-chart");
 const container = svg.node().parentElement;
 const tooltip   = d3.select("#sr-tooltip");
@@ -229,7 +210,7 @@ function render() {
   const activeKeys = ["total","l1","l2"].filter(k => active[k]);
 
   const W = container.clientWidth;
-  const H = Math.max(260, Math.min(360, W * 0.46));
+  const H = Math.max(300, Math.min(400, W * 0.50));
   const w = W - margin.left - margin.right;
   const h = H - margin.top - margin.bottom;
   svg.attr("width", W).attr("height", H);
@@ -245,7 +226,8 @@ function render() {
 
   // Axes
   g.append("g").attr("class","axis").attr("transform",`translate(0,${h})`).call(
-    d3.axisBottom(x0).tickSize(0)).select(".domain").remove();
+    d3.axisBottom(x0).tickSize(0))
+    .call(gg=>{gg.select(".domain").remove();gg.selectAll("text").attr("transform","rotate(-40)").attr("text-anchor","end").attr("dx","-0.5em").attr("dy","0.3em").attr("font-size",9)});
   g.append("g").attr("class","axis").call(
     d3.axisLeft(y).tickValues([0,25,50,75,100]).tickFormat(d=>d+"%").tickSize(0))
     .call(ax=>ax.select(".domain").remove())
@@ -255,7 +237,7 @@ function render() {
   sortedData.forEach(d => {
     g.append("rect")
       .attr("x", x0(d.label)).attr("width", x0.bandwidth())
-      .attr("y", h+26).attr("height", 4).attr("rx", 2)
+      .attr("y", h+60).attr("height", 4).attr("rx", 2)
       .attr("fill", seriesColor(d.series)).attr("opacity", 0.8);
   });
 
@@ -350,19 +332,6 @@ function render() {
     .text(`sorted: best → worst by ${skLabel[sk]}`);
 }
 
-// ── Reference table ────────────────────────────────────────────────────────
-(function() {
-  const el = document.getElementById("sr-abl-ref");
-  const order = ["1.1","1.2","1.3","1.4","1.5","1.7","2.1","2.2","2.3","2.4","2.5"];
-  let html = '<table class="abl-table"><thead><tr><th>#</th><th>Description</th></tr></thead><tbody>';
-  order.forEach(k => {
-    const e = EXPERIMENTS[k], cls = k.startsWith("2") ? "s2" : "s1";
-    html += `<tr class="${cls}"><td><strong>${k}</strong></td><td>${e.desc}</td></tr>`;
-  });
-  html += "</tbody></table>";
-  el.innerHTML = html;
-})();
-
 render();
 window.addEventListener("resize", render);
 }

app/src/content/embeds/folding/total-score.html

@@ -8,19 +8,6 @@
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body { background: var(--bg); font-family: system-ui, sans-serif; color: var(--text); }
 
-  .exp-ref-wrap { margin-bottom: 14px; }
-  .exp-ref-toggle { background: none; border: 1px solid #2a2d3a; color: #8b8fa8; font-size: 11px;
-    padding: 4px 10px; border-radius: 6px; cursor: pointer; margin-bottom: 8px; }
-  .exp-ref-toggle:hover { color: #e8eaf0; border-color: #4f8ef7; }
-  .exp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
-  .exp-table th { color: #8b8fa8; font-weight: 500; text-align: left; padding: 4px 8px;
-    border-bottom: 1px solid #2a2d3a; white-space: nowrap; }
-  .exp-table td { color: #c8cad8; padding: 4px 8px; border-bottom: 1px solid #1a1d27; vertical-align: top; }
-  .exp-table td:first-child { color: #e8eaf0; font-weight: 600; white-space: nowrap; }
-  .exp-table tr.s2 td { background: rgba(247,147,79,0.05); }
-  .exp-table tr.s1 td { background: rgba(79,142,247,0.04); }
-  .exp-table tr:hover td { background: rgba(255,255,255,0.04); }
-
   .axis text { fill: var(--subtext); font-size: 11px; }
   .axis line, .axis path { stroke: var(--grid); }
   .grid line { stroke: var(--grid); stroke-dasharray: 3,3; }
@@ -37,28 +24,24 @@
 </style>
 </head>
 <body>
-<div class="exp-ref-wrap">
-  <button class="exp-ref-toggle" onclick="var t=document.getElementById('ts-exp-ref');t.style.display=t.style.display==='none'?'':'none';this.textContent=t.style.display==='none'?'▶ Show experiment descriptions':'▼ Hide experiment descriptions'">▼ Hide experiment descriptions</button>
-  <div id="ts-exp-ref"></div>
-</div>
 <div style="position:relative">
-  <svg id="ts-chart"></svg>
+  <svg id="ts-chart" style="overflow:visible"></svg>
   <div class="tooltip" id="ts-tooltip"></div>
 </div>
 <script>
 function _initTotalScore() {
 const raw = [
-  {label:"1.1",series:"1",score:440, pct:29.3,total_sr:40},
-  {label:"1.2",series:"1",score:480, pct:32.0,total_sr:20},
-  {label:"1.3",series:"1",score:460, pct:30.7,total_sr:35},
-  {label:"1.4",series:"1",score:330, pct:22.0,total_sr:15},
-  {label:"1.5",series:"1",score:170, pct:11.3,total_sr:0 },
-  {label:"1.7",series:"1",score:600, pct:40.0,total_sr:40},
-  {label:"2.1",series:"2",score:620, pct:41.3,total_sr:40},
-  {label:"2.2",series:"2",score:1090,pct:72.7,total_sr:75},
-  {label:"2.3",series:"2",score:310, pct:20.7,total_sr:5 },
-  {label:"2.4",series:"2",score:460, pct:30.7,total_sr:20},
-  {label:"2.5",series:"2",score:1300,pct:86.7,total_sr:90},
+  {label:"1.1 π0",series:"1",score:440, pct:29.3,total_sr:40},
+  {label:"1.2 π0.5",series:"1",score:480, pct:32.0,total_sr:20},
+  {label:"1.3 ΔActions",series:"1",score:460, pct:30.7,total_sr:35},
+  {label:"1.4 RABC low",series:"1",score:330, pct:22.0,total_sr:15},
+  {label:"1.5 RABC high",series:"1",score:170, pct:11.3,total_sr:0 },
+  {label:"1.7 Δ+RABC",series:"1",score:600, pct:40.0,total_sr:40},
+  {label:"2.1 HQ",series:"2",score:620, pct:41.3,total_sr:40},
+  {label:"2.2 HQ+RABC+Δ",series:"2",score:1090,pct:72.7,total_sr:75},
+  {label:"2.3 HQ+mirror",series:"2",score:310, pct:20.7,total_sr:5 },
+  {label:"2.4 HQ chunk45",series:"2",score:460, pct:30.7,total_sr:20},
+  {label:"2.5 HQ+RABC+Δ★",series:"2",score:1300,pct:86.7,total_sr:90},
 ];
 
 // Sort highest → lowest score %
@@ -69,7 +52,7 @@ const seriesColor = s => s === "2" ? "#f7934f" : "#4f8ef7";
 const perfColor = d3.scaleSequential().domain([0,100])
   .interpolator(d3.interpolateRgbBasis(["#f87171","#fbbf24","#4dc98a"]));
 
-const margin = {top:28, right:20, bottom:48, left:50};
+const margin = {top:28, right:20, bottom:80, left:80};
 const svg = d3.select("#ts-chart");
 const container = svg.node().parentElement;
 const tooltip = d3.select("#ts-tooltip");
@@ -77,7 +60,7 @@ const tooltip = d3.select("#ts-tooltip");
 function render() {
   svg.selectAll("*").remove();
   const W = container.clientWidth;
-  const H = Math.max(250, Math.min(340, W * 0.43));
+  const H = Math.max(290, Math.min(380, W * 0.47));
   const w = W - margin.left - margin.right;
   const h = H - margin.top - margin.bottom;
   svg.attr("width",W).attr("height",H);
@@ -96,7 +79,8 @@ function render() {
   g.append("text").attr("x",w+3).attr("y",y(50)+4).attr("fill","#fbbf24").attr("font-size",9).text("50%");
 
   g.append("g").attr("class","axis").attr("transform",`translate(0,${h})`).call(
-    d3.axisBottom(x).tickSize(0)).select(".domain").remove();
+    d3.axisBottom(x).tickSize(0))
+    .call(gg=>{gg.select(".domain").remove();gg.selectAll("text").attr("transform","rotate(-40)").attr("text-anchor","end").attr("dx","-0.5em").attr("dy","0.3em").attr("font-size",9)});
   g.append("g").attr("class","axis").call(
     d3.axisLeft(y).ticks(5).tickFormat(d=>d+"%").tickSize(0))
     .call(ax=>ax.select(".domain").remove())
@@ -106,7 +90,7 @@ function render() {
   data.forEach(d => {
     g.append("rect")
       .attr("x",x(d.label)).attr("width",x.bandwidth())
-      .attr("y",h+28).attr("height",4).attr("rx",2)
+      .attr("y",h+60).attr("height",4).attr("rx",2)
       .attr("fill",seriesColor(d.series)).attr("opacity",0.8);
   });
 
@@ -152,6 +136,17 @@ function render() {
       .text(d.pct+"%");
   });
 
+  // Highlight best experiment
+  const best = data[0];
+  if (best) {
+    const bx = x(best.label) + x.bandwidth()/2;
+    const by = y(best.pct);
+    g.append("line").attr("x1",bx).attr("x2",bx).attr("y1",by-16).attr("y2",-8)
+      .attr("stroke","#4dc98a").attr("stroke-width",1).attr("stroke-dasharray","2,2").attr("opacity",0.5);
+    g.append("text").attr("x",bx).attr("y",-12).attr("text-anchor","middle")
+      .attr("fill","#4dc98a").attr("font-size",9).attr("font-weight","600").text("★ best");
+  }
+
   g.append("text").attr("x",w).attr("y",-12).attr("text-anchor","end")
     .attr("fill","#8b8fa8").attr("font-size",10)
     .text("sorted: highest → lowest score %");
@@ -161,34 +156,20 @@ render();
 window.addEventListener("resize", render);
 
 const EXPERIMENTS = {
-  "1.1": { desc:"π0 · all data · 200k steps · MEAN_STD", note:"Base pi0 policy trained from scratch on the full dataset." },
-  "1.2": { desc:"π0.5 · all data · 200k steps · MEAN_STD", note:"Upgraded to pi0.5 architecture, same data and steps." },
-  "1.3": { desc:"π0.5 · all data · 200k steps · ΔActions · QUANTILES", note:"Adds Delta Actions on top of 1.2 — actions expressed as deltas." },
-  "1.4": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01", note:"Selective Action Reward Model with low κ (≈ mean threshold, not very selective)." },
-  "1.5": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215", note:"SARM with κ = mean + ½ std — more selective filtering than 1.4." },
-  "1.7": { desc:"π0.5 · all data · 200k steps · ΔActions + RABC κ=0.0215 · QUANTILES", note:"Best of Series 1. Base checkpoint for 2.5." },
-  "2.1": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3", note:"Fine-tunes 1.3 on curated high-quality data only." },
-  "2.2": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + ΔActions", note:"Adds RABC on high-quality fine-tune from 1.3." },
-  "2.3": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + ΔActions + mirroring", note:"Augments the high-quality dataset with mirrored trajectories." },
-  "2.4": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 · chunk=45", note:"Explores chunked action prediction (chunk=50, RTC size=50, execution horizon=35)." },
-  "2.5": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.7 + RABC κ=0.0265 + ΔActions (best)", note:"Top performer. Best overall result." },
+  "1.1 π0": { desc:"π0 · all data · 200k steps · MEAN_STD", note:"Base pi0 policy trained from scratch on the full dataset." },
+  "1.2 π0.5": { desc:"π0.5 · all data · 200k steps · MEAN_STD", note:"Upgraded to pi0.5 architecture, same data and steps." },
+  "1.3 ΔActions": { desc:"π0.5 · all data · 200k steps · ΔActions · QUANTILES", note:"Adds Delta Actions on top of 1.2 — actions expressed as deltas." },
+  "1.4 RABC low": { desc:"π0.5 · all data · 200k steps · RABC κ=0.01", note:"Selective Action Reward Model with low κ (≈ mean threshold, not very selective)." },
+  "1.5 RABC high": { desc:"π0.5 · all data · 200k steps · RABC κ=0.0215", note:"SARM with κ = mean + ½ std — more selective filtering than 1.4." },
+  "1.7 Δ+RABC": { desc:"π0.5 · all data · 200k steps · ΔActions + RABC κ=0.0215 · QUANTILES", note:"Best of Series 1. Base checkpoint for 2.5." },
+  "2.1 HQ": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3", note:"Fine-tunes 1.3 on curated high-quality data only." },
+  "2.2 HQ+RABC+Δ": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 + RABC κ=0.0265 + ΔActions", note:"Adds RABC on high-quality fine-tune from 1.3." },
+  "2.3 HQ+mirror": { desc:"π0.5 · HQ + mirrored · 100k steps · fine-tune from 1.3 + ΔActions + mirroring", note:"Augments the high-quality dataset with mirrored trajectories." },
+  "2.4 HQ chunk45": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.3 · chunk=45", note:"Explores chunked action prediction (chunk=50, RTC size=50, execution horizon=35)." },
+  "2.5 HQ+RABC+Δ★": { desc:"π0.5 · HQ data · 100k steps · fine-tune from 1.7 + RABC κ=0.0265 + ΔActions (best)", note:"Top performer. Best overall result." },
 };
 
 
-(function buildRefTable() {
-  const container = document.getElementById('ts-exp-ref');
-  if (!container) return;
-  const order = ["1.1","1.2","1.3","1.4","1.5","1.7","2.1","2.2","2.3","2.4","2.5"];
-  let html = '<table class="exp-table"><thead><tr><th>#</th><th>Description</th></tr></thead><tbody>';
-  order.forEach(k => {
-    const a = EXPERIMENTS[k];
-    const series = k.startsWith("2") ? "s2" : "s1";
-    html += `<tr class="${series}"><td><strong>${k}</strong></td><td>${a.desc}</td></tr>`;
-  });
-  html += '</tbody></table>';
-  container.innerHTML = html;
-})();
-
 }
 
 if (typeof d3 !== "undefined") {