fix data paths

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

@@ -5,24 +5,30 @@
     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));
+    stroke: var(--grid-color, rgba(0, 0, 0, .08));
   }
+
   .d3-dpo-ablations .d3-tooltip {
     position: absolute;
     top: 0;
@@ -36,13 +42,15 @@
     border: 1px solid var(--border-color);
     background: var(--surface-bg);
     color: var(--text-color);
-    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    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;
@@ -50,16 +58,19 @@
     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;
@@ -68,12 +79,14 @@
     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;
@@ -82,17 +95,20 @@
     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;
@@ -102,16 +118,19 @@
     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);
@@ -189,10 +208,10 @@
 
       // 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'
+        '/data/smollm3_dpo_ablations.csv',
+        './assets/data/smollm3_dpo_ablations.csv',
+        '../assets/data/smollm3_dpo_ablations.csv',
+        '../../assets/data/smollm3_dpo_ablations.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -200,7 +219,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch (e) {}
+          } catch (e) { }
         }
         throw new Error('CSV not found');
       };
@@ -524,4 +543,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-baby-baseline.html

@@ -23,7 +23,7 @@
 
   .d3-sft-baby-baseline .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
+    stroke-dasharray: 2, 2;
   }
 
   .d3-sft-baby-baseline .bar {
@@ -194,10 +194,10 @@
 
       // Data loading helpers
       const CSV_PATHS = [
-        '/data/tech_report/sft_baby-baseline.csv',
-        './assets/data/tech_report/sft_baby-baseline.csv',
-        '../assets/data/tech_report/sft_baby-baseline.csv',
-        '../../assets/data/tech_report/sft_baby-baseline.csv'
+        '/data/sft_baby-baseline.csv',
+        './assets/data/sft_baby-baseline.csv',
+        '../assets/data/sft_baby-baseline.csv',
+        '../../assets/data/sft_baby-baseline.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -205,7 +205,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch (_) {}
+          } catch (_) { }
         }
         throw new Error('CSV not found at any of the specified paths');
       };
@@ -435,18 +435,18 @@
 
         // Hover interactions
         groupsMerge.selectAll('rect.bar')
-          .on('mouseenter', function(event, d) {
+          .on('mouseenter', function (event, d) {
             const benchmark = d3.select(this.parentNode).datum().benchmark;
             tipInner.innerHTML = `<strong>${d.subset}</strong><br/>${benchmark}: <strong>${d.value.toFixed(2)}</strong>`;
             tip.classList.add('visible');
           })
-          .on('mousemove', function(event) {
+          .on('mousemove', function (event) {
             const [mx, my] = d3.pointer(event, container);
             const offsetX = 10;
             const offsetY = -10;
             tip.style.transform = `translate(${mx + offsetX}px, ${my + offsetY}px)`;
           })
-          .on('mouseleave', function() {
+          .on('mouseleave', function () {
             tip.classList.remove('visible');
             tip.style.transform = 'translate(-9999px, -9999px)';
           });
@@ -514,4 +514,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-base-vs-mid.html

@@ -23,7 +23,7 @@
 
   .d3-sft-base-vs-mid .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
+    stroke-dasharray: 2, 2;
   }
 
   .d3-sft-base-vs-mid .bar {
@@ -194,10 +194,10 @@
 
       // Data loading helpers
       const CSV_PATHS = [
-        '/data/tech_report/sft-base-vs-mid.csv',
-        './assets/data/tech_report/sft-base-vs-mid.csv',
-        '../assets/data/tech_report/sft-base-vs-mid.csv',
-        '../../assets/data/tech_report/sft-base-vs-mid.csv'
+        '/data/sft-base-vs-mid.csv',
+        './assets/data/sft-base-vs-mid.csv',
+        '../assets/data/sft-base-vs-mid.csv',
+        '../../assets/data/sft-base-vs-mid.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -205,7 +205,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch (_) {}
+          } catch (_) { }
         }
         throw new Error('CSV not found at any of the specified paths');
       };
@@ -435,18 +435,18 @@
 
         // Hover interactions
         groupsMerge.selectAll('rect.bar')
-          .on('mouseenter', function(event, d) {
+          .on('mouseenter', function (event, d) {
             const benchmark = d3.select(this.parentNode).datum().benchmark;
             tipInner.innerHTML = `<strong>${d.baseModel}</strong><br/>${benchmark}: <strong>${d.value.toFixed(2)}</strong>`;
             tip.classList.add('visible');
           })
-          .on('mousemove', function(event) {
+          .on('mousemove', function (event) {
             const [mx, my] = d3.pointer(event, container);
             const offsetX = 10;
             const offsetY = -10;
             tip.style.transform = `translate(${mx + offsetX}px, ${my + offsetY}px)`;
           })
-          .on('mouseleave', function() {
+          .on('mouseleave', function () {
             tip.classList.remove('visible');
             tip.style.transform = 'translate(-9999px, -9999px)';
           });
@@ -514,4 +514,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-lr-scan.html

@@ -5,45 +5,54 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     position: relative;
   }
+
   .d3-sft-lr-scan svg {
     display: block;
     overflow: visible;
   }
+
   .d3-sft-lr-scan .axes path,
   .d3-sft-lr-scan .axes line {
     stroke: var(--axis-color);
     shape-rendering: crispEdges;
   }
+
   .d3-sft-lr-scan .axes text {
     fill: var(--tick-color);
     font-size: 11px;
   }
+
   .d3-sft-lr-scan .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
+    stroke-dasharray: 2, 2;
     shape-rendering: crispEdges;
   }
+
   .d3-sft-lr-scan .axis-label {
     fill: var(--text-color);
     font-size: 12px;
     font-weight: 600;
   }
+
   .d3-sft-lr-scan .line-think {
     fill: none;
     stroke-width: 2.5;
     stroke-linecap: round;
     stroke-linejoin: round;
   }
+
   .d3-sft-lr-scan .line-no-think {
     fill: none;
     stroke-width: 2.5;
     stroke-linecap: round;
     stroke-linejoin: round;
   }
+
   .d3-sft-lr-scan .dot {
     stroke: var(--surface-bg);
     stroke-width: 2;
   }
+
   .d3-sft-lr-scan .header {
     display: flex;
     align-items: flex-start;
@@ -52,22 +61,26 @@
     margin-top: 16px;
     flex-wrap: wrap;
   }
+
   .d3-sft-lr-scan .legend {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 6px;
   }
+
   .d3-sft-lr-scan .legend-title {
     font-size: 12px;
     font-weight: 700;
     color: var(--text-color);
   }
+
   .d3-sft-lr-scan .legend .items {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 14px;
   }
+
   .d3-sft-lr-scan .legend .item {
     display: inline-flex;
     align-items: center;
@@ -76,17 +89,20 @@
     font-size: 12px;
     color: var(--text-color);
   }
+
   .d3-sft-lr-scan .legend .swatch {
     width: 14px;
     height: 14px;
     border-radius: 3px;
     border: 1px solid var(--border-color);
   }
+
   .d3-sft-lr-scan .legend .swatch-line {
     width: 20px;
     height: 2px;
     border: none;
   }
+
   .d3-sft-lr-scan .controls {
     display: flex;
     gap: 16px;
@@ -94,17 +110,20 @@
     justify-content: flex-end;
     flex-wrap: wrap;
   }
+
   .d3-sft-lr-scan .control-group {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 6px;
   }
+
   .d3-sft-lr-scan .controls label {
     font-size: 12px;
     font-weight: 700;
     color: var(--text-color);
   }
+
   .d3-sft-lr-scan .controls select {
     font-size: 12px;
     padding: 8px 28px 8px 10px;
@@ -118,6 +137,7 @@
     background-repeat: no-repeat;
     background-position: right 8px center;
   }
+
   .d3-sft-lr-scan .controls select:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
@@ -156,10 +176,10 @@
       }
 
       const CSV_PATHS = [
-        '/data/tech_report/sft-lr-scan.csv',
-        './assets/data/tech_report/sft-lr-scan.csv',
-        '../assets/data/tech_report/sft-lr-scan.csv',
-        '../../assets/data/tech_report/sft-lr-scan.csv'
+        '/data/sft-lr-scan.csv',
+        './assets/data/sft-lr-scan.csv',
+        '../assets/data/sft-lr-scan.csv',
+        '../../assets/data/sft-lr-scan.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -167,7 +187,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch(_){}
+          } catch (_) { }
         }
         throw new Error('CSV not found in any of the expected locations');
       };
@@ -559,4 +579,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-mask-turns.html

@@ -5,24 +5,105 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     position: relative;
   }
-  .d3-sft-mask-turns svg { display: block; }
+
+  .d3-sft-mask-turns svg {
+    display: block;
+  }
+
   .d3-sft-mask-turns .axes path,
-  .d3-sft-mask-turns .axes line { stroke: var(--axis-color); }
-  .d3-sft-mask-turns .axes text { fill: var(--tick-color); font-size: 11px; }
-  .d3-sft-mask-turns .grid line { stroke: var(--grid-color); stroke-dasharray: 2,2; }
-  .d3-sft-mask-turns .axis-label { fill: var(--text-color); font-size: 12px; font-weight: 600; }
-
-  .d3-sft-mask-turns .header { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 16px; flex-wrap: wrap; }
-  .d3-sft-mask-turns .legend { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
-  .d3-sft-mask-turns .legend-title { font-size: 12px; font-weight: 700; color: var(--text-color); }
-  .d3-sft-mask-turns .legend .items { display: flex; flex-wrap: wrap; gap: 8px 14px; }
-  .d3-sft-mask-turns .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.15s ease; }
-  .d3-sft-mask-turns .legend .item.dimmed { opacity: 0.3; }
-  .d3-sft-mask-turns .legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-color); flex-shrink: 0; }
-
-  .d3-sft-mask-turns .controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
-  .d3-sft-mask-turns .controls .control-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
-  .d3-sft-mask-turns .controls label { font-size: 12px; font-weight: 700; color: var(--text-color); }
+  .d3-sft-mask-turns .axes line {
+    stroke: var(--axis-color);
+  }
+
+  .d3-sft-mask-turns .axes text {
+    fill: var(--tick-color);
+    font-size: 11px;
+  }
+
+  .d3-sft-mask-turns .grid line {
+    stroke: var(--grid-color);
+    stroke-dasharray: 2, 2;
+  }
+
+  .d3-sft-mask-turns .axis-label {
+    fill: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .d3-sft-mask-turns .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 12px;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
+  .d3-sft-mask-turns .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .d3-sft-mask-turns .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .d3-sft-mask-turns .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+
+  .d3-sft-mask-turns .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.15s ease;
+  }
+
+  .d3-sft-mask-turns .legend .item.dimmed {
+    opacity: 0.3;
+  }
+
+  .d3-sft-mask-turns .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+
+  .d3-sft-mask-turns .controls {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .d3-sft-mask-turns .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .d3-sft-mask-turns .controls label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
   .d3-sft-mask-turns .controls select {
     font-size: 12px;
     padding: 8px 28px 8px 10px;
@@ -37,8 +118,15 @@
     background-position: right 8px center;
     transition: border-color 0.15s ease;
   }
-  .d3-sft-mask-turns .controls select:hover { border-color: var(--primary-color); }
-  .d3-sft-mask-turns .controls select:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; }
+
+  .d3-sft-mask-turns .controls select:hover {
+    border-color: var(--primary-color);
+  }
+
+  .d3-sft-mask-turns .controls select:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
 
   .d3-sft-mask-turns .d3-tooltip {
     position: absolute;
@@ -53,11 +141,14 @@
     border: 1px solid var(--border-color);
     background: var(--surface-bg);
     color: var(--text-color);
-    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
     opacity: 0;
     transition: opacity .12s ease;
   }
-  .d3-sft-mask-turns .d3-tooltip__inner { text-align: left; }
+
+  .d3-sft-mask-turns .d3-tooltip__inner {
+    text-align: left;
+  }
 </style>
 <script>
   (() => {
@@ -105,12 +196,12 @@
       }
 
       // Data loading
-      const DEFAULT_CSV = '/data/tech_report/sft_mask-turns.csv';
+      const DEFAULT_CSV = '/data/sft_mask-turns.csv';
       const CSV_PATHS = [
         DEFAULT_CSV,
-        './assets/data/tech_report/sft_mask-turns.csv',
-        '../assets/data/tech_report/sft_mask-turns.csv',
-        '../../assets/data/tech_report/sft_mask-turns.csv'
+        './assets/data/sft_mask-turns.csv',
+        '../assets/data/sft_mask-turns.csv',
+        '../../assets/data/sft_mask-turns.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -118,7 +209,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch(_) {}
+          } catch (_) { }
         }
         throw new Error('CSV not found at any path');
       };
@@ -255,7 +346,7 @@
             .attr('fill', d => colorScale(d.mask))
             .attr('opacity', d => hiddenSeries.has(d.mask) ? 0.1 : 1)
             .style('cursor', 'pointer')
-            .on('mouseenter', function(event, d) {
+            .on('mouseenter', function (event, d) {
               if (hiddenSeries.has(d.mask)) return;
               d3.select(this).attr('opacity', 0.8);
               tipInner.innerHTML = `<strong>${d.benchmark}</strong><br/>${maskLabels[d.mask]}<br/>Score: ${d.value.toFixed(2)}%`;
@@ -263,7 +354,7 @@
               const [mx, my] = d3.pointer(event, container);
               tip.style.transform = `translate(${mx + 12}px, ${my - 12}px)`;
             })
-            .on('mouseleave', function(event, d) {
+            .on('mouseleave', function (event, d) {
               d3.select(this).attr('opacity', hiddenSeries.has(d.mask) ? 0.1 : 1);
               tip.style.opacity = '0';
               tip.style.transform = 'translate(-9999px, -9999px)';
@@ -430,4 +521,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-mid-train.html

@@ -23,7 +23,7 @@
 
   .d3-sft-mid-train .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
+    stroke-dasharray: 2, 2;
   }
 
   .d3-sft-mid-train .bar {
@@ -153,10 +153,10 @@
 
       // Data loading helpers
       const CSV_PATHS = [
-        '/data/tech_report/sft-midtrain.csv',
-        './assets/data/tech_report/sft-midtrain.csv',
-        '../assets/data/tech_report/sft-midtrain.csv',
-        '../../assets/data/tech_report/sft-midtrain.csv'
+        '/data/sft-midtrain.csv',
+        './assets/data/sft-midtrain.csv',
+        '../assets/data/sft-midtrain.csv',
+        '../../assets/data/sft-midtrain.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -164,7 +164,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch (_) {}
+          } catch (_) { }
         }
         throw new Error('CSV not found at any of the specified paths');
       };
@@ -352,18 +352,18 @@
 
         // Hover interactions
         groupsMerge.selectAll('rect.bar')
-          .on('mouseenter', function(event, d) {
+          .on('mouseenter', function (event, d) {
             const benchmark = d3.select(this.parentNode).datum().benchmark;
             tipInner.innerHTML = `<strong>${d.subset}</strong><br/>${benchmark}: <strong>${d.value.toFixed(1)}</strong>`;
             tip.classList.add('visible');
           })
-          .on('mousemove', function(event) {
+          .on('mousemove', function (event) {
             const [mx, my] = d3.pointer(event, container);
             const offsetX = 10;
             const offsetY = -10;
             tip.style.transform = `translate(${mx + offsetX}px, ${my + offsetY}px)`;
           })
-          .on('mouseleave', function() {
+          .on('mouseleave', function () {
             tip.classList.remove('visible');
             tip.style.transform = 'translate(-9999px, -9999px)';
           });
@@ -431,4 +431,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-packing-runtime.html

@@ -6,29 +6,36 @@
     min-height: 320px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }
+
   .d3-sft-packing-runtime svg {
     display: block;
     width: 100%;
   }
+
   .d3-sft-packing-runtime .axes path,
   .d3-sft-packing-runtime .axes line {
     stroke: var(--axis-color);
   }
+
   .d3-sft-packing-runtime .axes text {
     fill: var(--tick-color);
     font-size: 11px;
   }
+
   .d3-sft-packing-runtime .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
+    stroke-dasharray: 2, 2;
   }
+
   .d3-sft-packing-runtime .bar {
     cursor: pointer;
     transition: opacity 0.15s ease;
   }
+
   .d3-sft-packing-runtime .bar:hover {
     opacity: 0.85;
   }
+
   .d3-sft-packing-runtime .axis-label {
     fill: var(--text-color);
     font-size: 12px;
@@ -42,16 +49,19 @@
     gap: 6px;
     margin-top: 12px;
   }
+
   .d3-sft-packing-runtime .legend-title {
     font-size: 12px;
     font-weight: 700;
     color: var(--text-color);
   }
+
   .d3-sft-packing-runtime .legend .items {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 14px;
   }
+
   .d3-sft-packing-runtime .legend .item {
     display: inline-flex;
     align-items: center;
@@ -62,9 +72,11 @@
     cursor: pointer;
     transition: opacity 0.15s ease;
   }
+
   .d3-sft-packing-runtime .legend .item:hover {
     opacity: 0.7;
   }
+
   .d3-sft-packing-runtime .legend .swatch {
     width: 14px;
     height: 14px;
@@ -85,17 +97,20 @@
     border: 1px solid var(--border-color);
     background: var(--surface-bg);
     color: var(--text-color);
-    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
     opacity: 0;
     transition: opacity .12s ease;
   }
+
   .d3-sft-packing-runtime .d3-tooltip__inner {
     text-align: left;
   }
+
   .d3-sft-packing-runtime .d3-tooltip .label {
     font-weight: 700;
     margin-bottom: 2px;
   }
+
   .d3-sft-packing-runtime .d3-tooltip .value {
     color: var(--muted-color);
   }
@@ -165,9 +180,9 @@
         if (attr && attr.trim()) {
           providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
         }
-      } catch(_) {}
+      } catch (_) { }
 
-      const DEFAULT_CSV = '/data/tech_report/sft-packing-vs-no-packing-runtime.csv';
+      const DEFAULT_CSV = '/data/sft-packing-vs-no-packing-runtime.csv';
       const ensureDataPrefix = (p) => {
         if (typeof p !== 'string' || !p) return p;
         // If path doesn't start with / or ./, add /data/ prefix
@@ -183,18 +198,18 @@
       const CSV_PATHS = Array.isArray(providedData)
         ? normalizeInput(providedData)
         : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [
-            DEFAULT_CSV,
-            './assets/data/tech_report/sft-packing-vs-no-packing-runtime.csv',
-            '../assets/data/tech_report/sft-packing-vs-no-packing-runtime.csv',
-            '../../assets/data/tech_report/sft-packing-vs-no-packing-runtime.csv'
-          ]);
+          DEFAULT_CSV,
+          './assets/data/tech_report/sft-packing-vs-no-packing-runtime.csv',
+          '../assets/data/tech_report/sft-packing-vs-no-packing-runtime.csv',
+          '../../assets/data/tech_report/sft-packing-vs-no-packing-runtime.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(_) {}
+          } catch (_) { }
         }
         throw new Error('CSV not found at any of: ' + paths.join(', '));
       };
@@ -304,7 +319,7 @@
           const barsEnter = bars.enter()
             .append('rect')
             .attr('class', 'bar')
-            .on('mouseenter', function(event, d) {
+            .on('mouseenter', function (event, d) {
               const [mx, my] = d3.pointer(event, container);
               tipInner.innerHTML = `
                 <div class="label">${d.packing} - Batch Size ${d.batchSize}</div>
@@ -313,7 +328,7 @@
               tip.style.opacity = '1';
               tip.style.transform = `translate(${mx + 12}px, ${my - 12}px)`;
             })
-            .on('mouseleave', function() {
+            .on('mouseleave', function () {
               tip.style.opacity = '0';
               tip.style.transform = 'translate(-9999px, -9999px)';
             });
@@ -422,4 +437,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-packing-tokens.html

@@ -6,29 +6,36 @@
     min-height: 320px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }
+
   .d3-sft-packing-tokens svg {
     display: block;
     width: 100%;
   }
+
   .d3-sft-packing-tokens .axes path,
   .d3-sft-packing-tokens .axes line {
     stroke: var(--axis-color);
   }
+
   .d3-sft-packing-tokens .axes text {
     fill: var(--tick-color);
     font-size: 11px;
   }
+
   .d3-sft-packing-tokens .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
+    stroke-dasharray: 2, 2;
   }
+
   .d3-sft-packing-tokens .bar {
     cursor: pointer;
     transition: opacity 0.15s ease;
   }
+
   .d3-sft-packing-tokens .bar:hover {
     opacity: 0.85;
   }
+
   .d3-sft-packing-tokens .axis-label {
     fill: var(--text-color);
     font-size: 12px;
@@ -42,16 +49,19 @@
     gap: 6px;
     margin-top: 12px;
   }
+
   .d3-sft-packing-tokens .legend-title {
     font-size: 12px;
     font-weight: 700;
     color: var(--text-color);
   }
+
   .d3-sft-packing-tokens .legend .items {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 14px;
   }
+
   .d3-sft-packing-tokens .legend .item {
     display: inline-flex;
     align-items: center;
@@ -62,9 +72,11 @@
     cursor: pointer;
     transition: opacity 0.15s ease;
   }
+
   .d3-sft-packing-tokens .legend .item:hover {
     opacity: 0.7;
   }
+
   .d3-sft-packing-tokens .legend .swatch {
     width: 14px;
     height: 14px;
@@ -85,17 +97,20 @@
     border: 1px solid var(--border-color);
     background: var(--surface-bg);
     color: var(--text-color);
-    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
     opacity: 0;
     transition: opacity .12s ease;
   }
+
   .d3-sft-packing-tokens .d3-tooltip__inner {
     text-align: left;
   }
+
   .d3-sft-packing-tokens .d3-tooltip .label {
     font-weight: 700;
     margin-bottom: 2px;
   }
+
   .d3-sft-packing-tokens .d3-tooltip .value {
     color: var(--muted-color);
   }
@@ -165,9 +180,9 @@
         if (attr && attr.trim()) {
           providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
         }
-      } catch(_) {}
+      } catch (_) { }
 
-      const DEFAULT_CSV = '/data/tech_report/sft-packing-vs-no-packing-tokens.csv';
+      const DEFAULT_CSV = '/data/sft-packing-vs-no-packing-tokens.csv';
       const ensureDataPrefix = (p) => {
         if (typeof p !== 'string' || !p) return p;
         // If path doesn't start with / or ./, add /data/ prefix
@@ -183,18 +198,18 @@
       const CSV_PATHS = Array.isArray(providedData)
         ? normalizeInput(providedData)
         : (typeof providedData === 'string' ? normalizeInput(providedData) || [DEFAULT_CSV] : [
-            DEFAULT_CSV,
-            './assets/data/tech_report/sft-packing-vs-no-packing-tokens.csv',
-            '../assets/data/tech_report/sft-packing-vs-no-packing-tokens.csv',
-            '../../assets/data/tech_report/sft-packing-vs-no-packing-tokens.csv'
-          ]);
+          DEFAULT_CSV,
+          './assets/data/tech_report/sft-packing-vs-no-packing-tokens.csv',
+          '../assets/data/tech_report/sft-packing-vs-no-packing-tokens.csv',
+          '../../assets/data/tech_report/sft-packing-vs-no-packing-tokens.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(_) {}
+          } catch (_) { }
         }
         throw new Error('CSV not found at any of: ' + paths.join(', '));
       };
@@ -304,7 +319,7 @@
           const barsEnter = bars.enter()
             .append('rect')
             .attr('class', 'bar')
-            .on('mouseenter', function(event, d) {
+            .on('mouseenter', function (event, d) {
               const [mx, my] = d3.pointer(event, container);
               tipInner.innerHTML = `
                 <div class="label">${d.packing} - Batch Size ${d.batchSize}</div>
@@ -314,7 +329,7 @@
               tip.style.opacity = '1';
               tip.style.transform = `translate(${mx + 12}px, ${my - 12}px)`;
             })
-            .on('mouseleave', function() {
+            .on('mouseleave', function () {
               tip.style.opacity = '0';
               tip.style.transform = 'translate(-9999px, -9999px)';
             });
@@ -423,4 +438,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-packing-vs-bs.html

@@ -5,50 +5,60 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     position: relative;
   }
+
   .d3-sft-packing-vs-bs svg {
     display: block;
     overflow: visible;
   }
+
   .d3-sft-packing-vs-bs .axes path,
   .d3-sft-packing-vs-bs .axes line {
     stroke: var(--axis-color);
     shape-rendering: crispEdges;
   }
+
   .d3-sft-packing-vs-bs .axes text {
     fill: var(--tick-color);
     font-size: 11px;
   }
+
   .d3-sft-packing-vs-bs .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
+    stroke-dasharray: 2, 2;
     shape-rendering: crispEdges;
   }
+
   .d3-sft-packing-vs-bs .axis-label {
     fill: var(--text-color);
     font-size: 12px;
     font-weight: 600;
   }
+
   .d3-sft-packing-vs-bs .line-think {
     fill: none;
     stroke-width: 2.5;
     stroke-linecap: round;
     stroke-linejoin: round;
   }
+
   .d3-sft-packing-vs-bs .line-no-think {
     fill: none;
     stroke-width: 2.5;
     stroke-linecap: round;
     stroke-linejoin: round;
   }
+
   .d3-sft-packing-vs-bs .line-no-packing {
     fill: none;
     stroke-width: 2;
-    stroke-dasharray: 4,4;
+    stroke-dasharray: 4, 4;
   }
+
   .d3-sft-packing-vs-bs .dot {
     stroke: var(--surface-bg);
     stroke-width: 2;
   }
+
   .d3-sft-packing-vs-bs .header {
     display: flex;
     align-items: flex-start;
@@ -57,22 +67,26 @@
     margin-top: 16px;
     flex-wrap: wrap;
   }
+
   .d3-sft-packing-vs-bs .legend {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 6px;
   }
+
   .d3-sft-packing-vs-bs .legend-title {
     font-size: 12px;
     font-weight: 700;
     color: var(--text-color);
   }
+
   .d3-sft-packing-vs-bs .legend .items {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 14px;
   }
+
   .d3-sft-packing-vs-bs .legend .item {
     display: inline-flex;
     align-items: center;
@@ -81,29 +95,31 @@
     font-size: 12px;
     color: var(--text-color);
   }
+
   .d3-sft-packing-vs-bs .legend .swatch {
     width: 14px;
     height: 14px;
     border-radius: 3px;
     border: 1px solid var(--border-color);
   }
+
   .d3-sft-packing-vs-bs .legend .swatch-line {
     width: 20px;
     height: 2px;
     border: none;
   }
+
   .d3-sft-packing-vs-bs .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
-    );
+    background: repeating-linear-gradient(to right,
+        var(--text-color) 0,
+        var(--text-color) 4px,
+        transparent 4px,
+        transparent 8px);
   }
+
   .d3-sft-packing-vs-bs .controls {
     display: flex;
     gap: 16px;
@@ -111,17 +127,20 @@
     justify-content: flex-end;
     flex-wrap: wrap;
   }
+
   .d3-sft-packing-vs-bs .control-group {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 6px;
   }
+
   .d3-sft-packing-vs-bs .controls label {
     font-size: 12px;
     font-weight: 700;
     color: var(--text-color);
   }
+
   .d3-sft-packing-vs-bs .controls select {
     font-size: 12px;
     padding: 8px 28px 8px 10px;
@@ -135,6 +154,7 @@
     background-repeat: no-repeat;
     background-position: right 8px center;
   }
+
   .d3-sft-packing-vs-bs .controls select:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
@@ -173,10 +193,10 @@
       }
 
       const CSV_PATHS = [
-        '/data/tech_report/sft_packing-vs-bs.csv',
-        './assets/data/tech_report/sft_packing-vs-bs.csv',
-        '../assets/data/tech_report/sft_packing-vs-bs.csv',
-        '../../assets/data/tech_report/sft_packing-vs-bs.csv'
+        '/data/sft_packing-vs-bs.csv',
+        './assets/data/sft_packing-vs-bs.csv',
+        '../assets/data/sft_packing-vs-bs.csv',
+        '../../assets/data/sft_packing-vs-bs.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -184,7 +204,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch(_){}
+          } catch (_) { }
         }
         throw new Error('CSV not found in any of the expected locations');
       };
@@ -594,4 +614,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-packing-vs-no-packing.html

@@ -140,7 +140,7 @@
     border: 1px solid var(--border-color);
     background: var(--surface-bg);
     color: var(--text-color);
-    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
     opacity: 0;
     transition: opacity .12s ease;
   }
@@ -216,10 +216,10 @@
 
       // Data loading
       const CSV_PATHS = [
-        '/data/tech_report/sft_packing-vs-no-packing.csv',
-        './assets/data/tech_report/sft_packing-vs-no-packing.csv',
-        '../assets/data/tech_report/sft_packing-vs-no-packing.csv',
-        '../../assets/data/tech_report/sft_packing-vs-no-packing.csv'
+        '/data/sft_packing-vs-no-packing.csv',
+        './assets/data/sft_packing-vs-no-packing.csv',
+        '../assets/data/sft_packing-vs-no-packing.csv',
+        '../../assets/data/sft_packing-vs-no-packing.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -227,7 +227,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch (_) {}
+          } catch (_) { }
         }
         throw new Error('CSV not found in any of the expected locations');
       };
@@ -330,7 +330,7 @@
               .attr('transform', d => `translate(${xBenchmark(d.benchmark)},0)`);
 
             // Bars within each group
-            groupsMerged.each(function(groupData) {
+            groupsMerged.each(function (groupData) {
               const bars = d3.select(this)
                 .selectAll('.bar')
                 .data(groupData.values, d => d.packing);
@@ -340,14 +340,14 @@
                 .attr('x', d => xPacking(d.packing))
                 .attr('width', xPacking.bandwidth())
                 .attr('fill', d => colorMap[d.packing])
-                .on('mouseenter', function(event, d) {
+                .on('mouseenter', function (event, d) {
                   const packingLabel = d.packing === 'TRUE' ? 'Packing' : 'No Packing';
                   tipInner.innerHTML = `<strong>${groupData.benchmark}</strong><br/>${packingLabel}: ${d.value.toFixed(2)}`;
                   tip.style.opacity = '1';
                   const [mx, my] = d3.pointer(event, container);
                   tip.style.transform = `translate(${mx + 12}px, ${my - 12}px)`;
                 })
-                .on('mouseleave', function() {
+                .on('mouseleave', function () {
                   tip.style.opacity = '0';
                   tip.style.transform = 'translate(-9999px, -9999px)';
                 })
@@ -509,4 +509,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-think-follow-0.html

@@ -23,7 +23,7 @@
 
   .d3-sft-think-follow .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
+    stroke-dasharray: 2, 2;
   }
 
   .d3-sft-think-follow .bar {
@@ -194,10 +194,10 @@
 
       // Data loading helpers
       const CSV_PATHS = [
-        '/data/tech_report/sft_think-follow-0.csv',
-        './assets/data/tech_report/sft_think-follow-0.csv',
-        '../assets/data/tech_report/sft_think-follow-0.csv',
-        '../../assets/data/tech_report/sft_think-follow-0.csv'
+        '/data/sft_think-follow-0.csv',
+        './assets/data/sft_think-follow-0.csv',
+        '../assets/data/sft_think-follow-0.csv',
+        '../../assets/data/sft_think-follow-0.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -205,7 +205,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch (_) {}
+          } catch (_) { }
         }
         throw new Error('CSV not found at any of the specified paths');
       };
@@ -408,18 +408,18 @@
 
         // Hover interactions
         groupsMerge.selectAll('rect.bar')
-          .on('mouseenter', function(event, d) {
+          .on('mouseenter', function (event, d) {
             const turn = d3.select(this.parentNode).datum().turn;
             tipInner.innerHTML = `<strong>${d.model}</strong><br/>${turn}: <strong>${d.value.toFixed(2)}%</strong>`;
             tip.classList.add('visible');
           })
-          .on('mousemove', function(event) {
+          .on('mousemove', function (event) {
             const [mx, my] = d3.pointer(event, container);
             const offsetX = 10;
             const offsetY = -10;
             tip.style.transform = `translate(${mx + offsetX}px, ${my + offsetY}px)`;
           })
-          .on('mouseleave', function() {
+          .on('mouseleave', function () {
             tip.classList.remove('visible');
             tip.style.transform = 'translate(-9999px, -9999px)';
           });
@@ -488,4 +488,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>

app/src/content/embeds/d3-sft-think-follow-1.html

@@ -23,7 +23,7 @@
 
   .d3-sft-think-follow-1 .grid line {
     stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
+    stroke-dasharray: 2, 2;
   }
 
   .d3-sft-think-follow-1 .bar {
@@ -194,10 +194,10 @@
 
       // Data loading helpers
       const CSV_PATHS = [
-        '/data/tech_report/sft_think-follow-1.csv',
-        './assets/data/tech_report/sft_think-follow-1.csv',
-        '../assets/data/tech_report/sft_think-follow-1.csv',
-        '../../assets/data/tech_report/sft_think-follow-1.csv'
+        '/data/sft_think-follow-1.csv',
+        './assets/data/sft_think-follow-1.csv',
+        '../assets/data/sft_think-follow-1.csv',
+        '../../assets/data/sft_think-follow-1.csv'
       ];
 
       const fetchFirstAvailable = async (paths) => {
@@ -205,7 +205,7 @@
           try {
             const r = await fetch(p, { cache: 'no-cache' });
             if (r.ok) return await r.text();
-          } catch (_) {}
+          } catch (_) { }
         }
         throw new Error('CSV not found at any of the specified paths');
       };
@@ -408,18 +408,18 @@
 
         // Hover interactions
         groupsMerge.selectAll('rect.bar')
-          .on('mouseenter', function(event, d) {
+          .on('mouseenter', function (event, d) {
             const turn = d3.select(this.parentNode).datum().turn;
             tipInner.innerHTML = `<strong>${d.model}</strong><br/>${turn}: <strong>${d.value.toFixed(2)}%</strong>`;
             tip.classList.add('visible');
           })
-          .on('mousemove', function(event) {
+          .on('mousemove', function (event) {
             const [mx, my] = d3.pointer(event, container);
             const offsetX = 10;
             const offsetY = -10;
             tip.style.transform = `translate(${mx + offsetX}px, ${my + offsetY}px)`;
           })
-          .on('mouseleave', function() {
+          .on('mouseleave', function () {
             tip.classList.remove('visible');
             tip.style.transform = 'translate(-9999px, -9999px)';
           });
@@ -488,4 +488,4 @@
       ensureD3(bootstrap);
     }
   })();
-</script>
+</script>