made presentation together with script to convert to standalone file

app/presentation/se2026/build-standalone.mjs

@@ -0,0 +1,142 @@
+/**
+ * Build helper for the SE2026 one-file presentation.
+ *
+ * What this script does:
+ * - Reads `index.html` as the base reveal deck
+ * - Inlines local CSS (`style.css`)
+ * - Inlines local image assets as data URIs
+ * - Rewrites chart iframe sources to embedded `data:` HTML documents
+ * - Injects chart data (`data/benchmark-results.csv`, `data/rephrasing_metadata.json`)
+ *   directly into chart pages so they no longer fetch local files
+ * - Writes the final output to `standalone.html`
+ *
+ * How to run:
+ * - From this folder:
+ *   `node build-standalone.mjs`
+ * - Or from repo root:
+ *   `node app/presentation/se2026/build-standalone.mjs`
+ */
+import { readFileSync, writeFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const readText = (relativePath) => readFileSync(join(__dirname, relativePath), 'utf8');
+const readBinary = (relativePath) => readFileSync(join(__dirname, relativePath));
+
+const toDataUri = (relativePath, mimeType) =>
+  `data:${mimeType};base64,${readBinary(relativePath).toString('base64')}`;
+
+const css = readText('style.css');
+const csvData = readText('data/benchmark-results.csv');
+const jsonData = readText('data/rephrasing_metadata.json');
+
+const chartIds = [
+  'experiment-flow',
+  'benchmark',
+  'benchmark-prompts',
+  'benchmark-family',
+  'throughput',
+  'cost-efficiency',
+  'pipeline',
+];
+
+const chartDataNeeds = {
+  'experiment-flow': { csv: false, json: true },
+  benchmark: { csv: true, json: false },
+  'benchmark-prompts': { csv: true, json: false },
+  'benchmark-family': { csv: true, json: false },
+  throughput: { csv: false, json: false },
+  'cost-efficiency': { csv: true, json: true },
+  pipeline: { csv: false, json: false },
+};
+
+const imageDataUris = {
+  'assets/bern-skyline.png': toDataUri('assets/bern-skyline.png', 'image/png'),
+  'assets/dclm-filtering-pipeline.png': toDataUri('assets/dclm-filtering-pipeline.png', 'image/png'),
+  'assets/profile.jpg': toDataUri('assets/profile.jpg', 'image/jpeg'),
+  'assets/academia-hub.png': toDataUri('assets/academia-hub.png', 'image/png'),
+};
+
+function injectInlineData(chartHtml, needs) {
+  const snippets = [];
+
+  if (needs.csv) {
+    snippets.push(`window.__INLINE_CSV_DATA__ = ${JSON.stringify(csvData)};`);
+  }
+
+  if (needs.json) {
+    // Avoid accidental closing of the script tag if present in JSON payload.
+    const safeJson = jsonData.replace(/<\/script/gi, '<\\/script');
+    snippets.push(`window.__INLINE_JSON_DATA__ = ${safeJson};`);
+  }
+
+  if (snippets.length === 0) {
+    return chartHtml;
+  }
+
+  const inlineScript = `<script>\n${snippets.join('\n')}\n</script>`;
+  if (!chartHtml.includes('</head>')) {
+    return `${inlineScript}\n${chartHtml}`;
+  }
+
+  return chartHtml.replace('</head>', `${inlineScript}\n</head>`);
+}
+
+function patchChartFetches(chartHtml) {
+  let output = chartHtml;
+
+  // Benchmark chart family: read CSV from inline payload.
+  output = output.replace(
+    /const text = await fetchFirstAvailable\(csvPaths\);/g,
+    'const text = window.__INLINE_CSV_DATA__;'
+  );
+
+  // Experiment flow chart: read JSON from inline payload.
+  output = output.replace(
+    /fetchFirst\(dataPaths\)\.then\(data => buildChart\(data\)\)/g,
+    'Promise.resolve(window.__INLINE_JSON_DATA__).then(data => buildChart(data))'
+  );
+
+  // Cost efficiency chart: read both JSON and CSV from inline payloads.
+  output = output.replace(
+    /Promise\.all\(\[\s*fetchFirst\(dataPaths\),\s*fetchFirst\(csvPaths, d3\.csvParse\)\s*\]\)\.then\(\(\[data, csvRows\]\) => buildChart\(data, csvRows\)\)/g,
+    'Promise.resolve([window.__INLINE_JSON_DATA__, d3.csvParse(window.__INLINE_CSV_DATA__)]).then(([data, csvRows]) => buildChart(data, csvRows))'
+  );
+
+  return output;
+}
+
+function toDataUrl(html) {
+  return `data:text/html;base64,${Buffer.from(html, 'utf8').toString('base64')}`;
+}
+
+const chartDataUrls = {};
+for (const chartId of chartIds) {
+  let chartHtml = readText(`charts/${chartId}.html`);
+  chartHtml = injectInlineData(chartHtml, chartDataNeeds[chartId]);
+  chartHtml = patchChartFetches(chartHtml);
+  chartDataUrls[chartId] = toDataUrl(chartHtml);
+}
+
+let output = readText('index.html');
+
+output = output.replace(
+  '<link rel="stylesheet" href="style.css">',
+  `<style>\n${css}\n</style>`
+);
+
+for (const [path, dataUri] of Object.entries(imageDataUris)) {
+  output = output.replace(new RegExp(`src="${path.replace('.', '\\.')}"`, 'g'), `src="${dataUri}"`);
+}
+
+for (const chartId of chartIds) {
+  const srcPattern = new RegExp(`src="charts/${chartId}\\.html"`, 'g');
+  output = output.replace(srcPattern, `src="${chartDataUrls[chartId]}"`);
+}
+
+writeFileSync(join(__dirname, 'standalone.html'), output, 'utf8');
+
+console.log('Built standalone.html');
+console.log('Size:', (Buffer.byteLength(output) / 1024 / 1024).toFixed(2), 'MB');

app/presentation/se2026/charts/benchmark-family.html

@@ -0,0 +1,837 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Benchmark Comparison</title>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+  <style>
+    :root {
+      --text-color: rgba(255,255,255,0.88);
+      --muted-color: rgba(255,255,255,0.45);
+      --surface-bg: rgba(30,30,40,0.95);
+      --border-color: rgba(255,255,255,0.1);
+      --axis-color: rgba(255,255,255,0.15);
+      --tick-color: rgba(255,255,255,0.5);
+      --grid-color: rgba(255,255,255,0.06);
+      --primary-color: #7c6ff7;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; }
+  </style>
+</head>
+<body>
+<div class="d3-benchmark-comparison" data-config='{"defaultSetup":"average","setups":{"Article":{"datasets":{"mix-fw_edu_hq-article_smollm2_1.7b_hq":"SmolLM2","mix-fw_edu_hq-article_falcon3_1b_hq":"Falcon3","mix-fw_edu_hq-article_granite3_1b_hq":"Granite3","mix-fw_edu_hq-article_1b_hq":"Gemma-3","mix-fw_edu_hq-article_llama3.2_1b_hq":"Llama-3.2","mix-fw_edu_hq-article_qwen3_1.7b_hq":"Qwen3","dclm":{"display":"DCLM","color":"#8b8b8b","baseline":true}}},"Discussion":{"datasets":{"mix-fw_edu_hq-discussion_smollm2_1.7b_hq":"SmolLM2","mix-fw_edu_hq-discussion_falcon3_1b_hq":"Falcon3","mix-fw_edu_hq-discussion_granite3_1b_hq":"Granite3","mix-fw_edu_hq-discussion_1b_hq":"Gemma-3","mix-fw_edu_hq-discussion_llama3.2_1b_hq":"Llama-3.2","mix-fw_edu_hq-discussion_qwen3_1.7b_hq":"Qwen3","dclm":{"display":"DCLM","color":"#8b8b8b","baseline":true}}},"Tutorial":{"datasets":{"mix-fw_edu_hq-tutorial_smollm2_1.7b_hq":"SmolLM2","mix-fw_edu_hq-tutorial_falcon3_1b_hq":"Falcon3","mix-fw_edu_hq-tutorial_qwen3_1.7b_hq":"Qwen3","mix-fw_edu_hq-tutorial_1b_hq":"Gemma-3","mix-fw_edu_hq-tutorial_granite3_1b_hq":"Granite3","mix-fw_edu_hq-tutorial_llama3.2_1b_hq":"Llama-3.2","dclm":{"display":"DCLM","color":"#8b8b8b","baseline":true}}},"FAQ":{"datasets":{"mix-fw_edu_hq-faq_smollm2_1.7b_hq":"SmolLM2","mix-fw_edu_hq-faq_llama3.2_1b_hq":"Llama-3.2","mix-fw_edu_hq-faq_falcon3_1b_hq":"Falcon3","mix-fw_edu_hq-faq_1b_hq":"Gemma-3","mix-fw_edu_hq-faq_granite3_1b_hq":"Granite3","mix-fw_edu_hq-faq_qwen3_1.7b_hq":"Qwen3","dclm":{"display":"DCLM","color":"#8b8b8b","baseline":true}}},"Table":{"datasets":{"mix-fw_edu_hq-table_smollm2_1.7b_hq":"SmolLM2","mix-fw_edu_hq-table_falcon3_1b_hq":"Falcon3","mix-fw_edu_hq-table_granite3_1b_hq":"Granite3","mix-fw_edu_hq-table_qwen3_1.7b_hq":"Qwen3","mix-fw_edu_hq-table_llama3.2_1b_hq":"Llama-3.2","mix-fw_edu_hq-table_1b_hq":"Gemma-3","dclm":{"display":"DCLM","color":"#8b8b8b","baseline":true}}},"Math":{"datasets":{"mix-fw_edu_hq-math_smollm2_1.7b_hq":"SmolLM2","mix-fw_edu_hq-math_falcon3_1b_hq":"Falcon3","mix-fw_edu_hq-math_granite3_1b_hq":"Granite3","mix-fw_edu_hq-math_1b_hq":"Gemma-3","mix-fw_edu_hq-math_llama3.2_1b_hq":"Llama-3.2","mix-fw_edu_hq-math_qwen3_1.7b_hq":"Qwen3","dclm":{"display":"DCLM","color":"#8b8b8b","baseline":true}}}}}' data-datafiles="../data/benchmark-results.csv"></div>
+<style>
+  .d3-benchmark-comparison { position: relative; }
+  .d3-benchmark-comparison .controls {
+    display: flex;
+    gap: 16px;
+    align-items: flex-end;
+    justify-content: center;
+    margin: 10px 0 0 0;
+  }
+  .d3-benchmark-comparison .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-benchmark-comparison .controls label {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-benchmark-comparison .controls select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 6px 28px 6px 10px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    font-size: 18px;
+    line-height: 1.2;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 1.59L6 6.17l4.59-4.58L12 3 6 9 0 3z' fill='%23999'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+  .d3-benchmark-comparison .controls select:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+  .d3-benchmark-comparison .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    margin: 8px 0 0 0;
+    padding-bottom: 4px;
+  }
+  .d3-benchmark-comparison .legend .legend-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-benchmark-comparison .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-benchmark-comparison .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 18px;
+    color: var(--text-color);
+    cursor: pointer;
+  }
+  .d3-benchmark-comparison .legend .item.ghost { opacity: .25; }
+  .d3-benchmark-comparison .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+  .d3-benchmark-comparison .bar.ghost { opacity: .25; }
+  .d3-benchmark-comparison .value-label.ghost { opacity: .25; }
+  .d3-benchmark-comparison .line-path { fill: none; stroke-width: 2; opacity: 0.85; }
+  .d3-benchmark-comparison .line-path.ghost { opacity: .15; }
+  .d3-benchmark-comparison .line-dot.ghost { opacity: .15; }
+  .d3-benchmark-comparison .baseline.ghost { opacity: .1; }
+  .d3-benchmark-comparison .axes path { display: none; }
+  .d3-benchmark-comparison .axes line { stroke: var(--axis-color); }
+  .d3-benchmark-comparison .axes text { fill: var(--tick-color); }
+  .d3-benchmark-comparison .grid line { stroke: var(--grid-color); }
+  .d3-benchmark-comparison .hover-line {
+    stroke: var(--text-color);
+    stroke-opacity: 0.25;
+    stroke-width: 1;
+    pointer-events: none;
+  }
+  .d3-benchmark-comparison .d3-tooltip {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 18px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    opacity: 0;
+    transition: opacity .12s ease;
+    text-align: left;
+    z-index: 10;
+  }
+  .d3-benchmark-comparison .d3-tooltip .tip-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+    margin-right: 6px;
+    vertical-align: middle;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-benchmark-comparison'))) {
+        const cs = Array.from(document.querySelectorAll('.d3-benchmark-comparison')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      container.style.position = container.style.position || 'relative';
+
+      // ─── READ CONFIG ───
+      let mountEl = container;
+      while (mountEl && !mountEl.getAttribute?.('data-config')) { mountEl = mountEl.parentElement; }
+      let cfg = {};
+      try {
+        const raw = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null;
+        if (raw && raw.trim()) cfg = raw.trim().startsWith('{') ? JSON.parse(raw) : {};
+      } catch (_) {}
+
+      // ─── NORMALIZE DATASETS CONFIG ───
+      // Accepts: { "key": "Name" } or { "key": { display, color, shaded, baseline } }
+      // Returns: { key: { display, color, shaded, baseline } }
+      function normalizeDatasets(raw) {
+        const out = {};
+        for (const [k, v] of Object.entries(raw || {})) {
+          out[k] = typeof v === 'string' ? { display: v } : { ...v };
+        }
+        return out;
+      }
+
+      // ─── SETUP SUPPORT ───
+      const SETUPS = cfg.setups || null;
+      const setupNames = SETUPS ? Object.keys(SETUPS) : [];
+      const AVG_SETUP_KEY = 'Average (all setups)';
+      const defaultSetupCfg = cfg.defaultSetup || (setupNames.length >= 2 ? 'average' : null);
+      let currentSetup = SETUPS ? (defaultSetupCfg === 'average' ? AVG_SETUP_KEY : (defaultSetupCfg && setupNames.includes(defaultSetupCfg) ? defaultSetupCfg : setupNames[0])) : null;
+      let DATASETS = SETUPS ? (currentSetup === AVG_SETUP_KEY ? {} : normalizeDatasets(SETUPS[currentSetup].datasets)) : normalizeDatasets(cfg.datasets);
+      let avgDatasets = {};
+      let parsedData = [];
+
+      const RUN_COL       = cfg.runColumn    || 'runname';
+      const STEP_COL      = cfg.stepColumn   || 'steps';
+      const TOKENS_PER_STEP = cfg.tokensPerStep || 2.1e6;
+      const defaultMetric = cfg.defaultMetric || 'agg_score_macro';
+      const defaultView   = cfg.defaultView   || 'bar';
+      const uid = Math.random().toString(36).slice(2, 8);
+
+      // ─── DATASET ACCESSORS ───
+      function displayName(raw) { return DATASETS[raw] ? DATASETS[raw].display : raw; }
+      function isBaseline(raw) { return !!(DATASETS[raw] && DATASETS[raw].baseline); }
+      function isShaded(raw) { return !!(DATASETS[raw] && DATASETS[raw].shaded); }
+      function pinnedColor(raw) { return DATASETS[raw] && DATASETS[raw].color; }
+      function stripePatternId(raw) { return 'stripe-' + uid + '-' + raw.replace(/[^a-zA-Z0-9]/g, '_'); }
+
+      const METRIC_NAMES = {
+        'agg_score_macro': 'Aggregate Score (Macro)',
+        'agg_score_micro': 'Aggregate Score (Micro)',
+        'agg_score_RC': 'Reading Comprehension',
+        'agg_score_GK': 'General Knowledge',
+        'agg_score_NLU': 'Natural Language Understanding',
+        'agg_score_MATH': 'Math',
+        'agg_score_TABLE': 'Table Understanding',
+        'agg_score_RES': 'Reasoning',
+        'lighteval|arc_cf:easy|3/prob_norm_token': 'ARC-Easy',
+        'lighteval|drop|3/prob_norm_token': 'DROP',
+        'lighteval|gsm8k|3/prob_norm_token': 'GSM8K',
+        'lighteval|hellaswag_cf|3/prob_norm_token': 'HellaSwag',
+        'lighteval|openbookqa_cf|3/prob_norm_token': 'OpenBookQA',
+        'lighteval|piqa_cf|3/prob_norm_token': 'PIQA',
+        'lighteval|squad_v2|3/prob_norm_token': 'SQuAD v2',
+        'lighteval|treb_qa|3/prob_norm_token': 'TriviaQA',
+        'lighteval|wikitablequestions|3/prob_norm_token': 'WikiTableQuestions',
+        'lighteval|winogrande_cf|3/prob_norm_token': 'Winogrande',
+        'lighteval|xcsqa_cf|3/prob_norm_token': 'XCSQA',
+        'lighteval|mmlu_redux_cf:_average|3/prob_norm_token': 'MMLU Redux'
+      };
+
+      // Tooltip
+      let tip = container.querySelector('.d3-tooltip'), tipInner;
+      if (!tip) {
+        tip = document.createElement('div'); tip.className = 'd3-tooltip';
+        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      // SVG
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+      const defs = svg.append('defs');
+
+      // State
+      let allData = [];
+      let metricKeys = [];
+      let currentMetric = defaultMetric;
+      let currentView = defaultView;
+      let colorMap = {};
+      let highlight = null;
+
+      // ─── HELPERS ───
+      function metricName(key) { return METRIC_NAMES[key] || key; }
+
+      function stepsToTokens(step) { return step * TOKENS_PER_STEP; }
+      function formatTokens(tokens) {
+        if (tokens >= 1e9) return d3.format('.2f')(tokens / 1e9) + 'B';
+        if (tokens >= 1e6) return d3.format('.1f')(tokens / 1e6) + 'M';
+        return d3.format(',')(tokens);
+      }
+      function formatStep(step) {
+        if (step >= 1000) return d3.format('.0f')(step / 1000) + 'K';
+        return String(step);
+      }
+      function stepLabelShort(step) { return `${formatTokens(stepsToTokens(step))} (${formatStep(step)})`; }
+      function stepLabelLong(step) { return `${formatTokens(stepsToTokens(step))} Tokens (${formatStep(step)} Steps)`; }
+
+      function getCategoricalColors(n) {
+        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch (_) {}
+        return (d3.schemeTableau10 || ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ac']).slice(0, n);
+      }
+
+      function initColors() {
+        if (Object.keys(colorMap).length) return;
+        const allRaw = Array.from(d3.group(allData, d => d[RUN_COL]).keys()).sort();
+        const unpinned = [];
+        allRaw.forEach(raw => {
+          const pc = pinnedColor(raw);
+          if (pc) { colorMap[raw] = pc; }
+          else { unpinned.push(raw); }
+        });
+        const palette = getCategoricalColors(unpinned.length);
+        unpinned.forEach((raw, i) => { colorMap[raw] = palette[i % palette.length]; });
+      }
+
+      // ─── SETUP HELPERS ───
+      function filterData() {
+        const knownNames = Object.keys(DATASETS);
+        allData = knownNames.length ? parsedData.filter(r => knownNames.includes(r[RUN_COL])) : parsedData;
+        allData.columns = parsedData.columns;
+      }
+
+      function computeAverageData(rawData) {
+        if (!SETUPS || setupNames.length < 2) return { data: [], datasets: {} };
+        const displayToRaws = {};
+        for (const sName of setupNames) {
+          const ds = normalizeDatasets(SETUPS[sName].datasets);
+          for (const [raw, opts] of Object.entries(ds)) {
+            if (!displayToRaws[opts.display]) displayToRaws[opts.display] = [];
+            displayToRaws[opts.display].push(raw);
+          }
+        }
+        const fullDisplay = Object.entries(displayToRaws)
+          .filter(([, raws]) => raws.length >= setupNames.length);
+        const byRunStep = {};
+        for (const row of rawData) byRunStep[row[RUN_COL] + '|' + row[STEP_COL]] = row;
+        const steps = Array.from(new Set(rawData.map(r => +r[STEP_COL]))).sort((a, b) => a - b);
+        const cols = rawData.columns || Object.keys(rawData[0] || {});
+        const result = [];
+        const dsMap = {};
+        for (const [display, raws] of fullDisplay) {
+          const avgRaw = '__avg__' + display.replace(/[^a-zA-Z0-9]/g, '_');
+          // Merge options from first setup that has this display name
+          const firstOpts = Object.values(normalizeDatasets(SETUPS[setupNames[0]].datasets)).find(o => o.display === display) || {};
+          dsMap[avgRaw] = { display, ...firstOpts };
+          for (const step of steps) {
+            const rows = raws.map(r => byRunStep[r + '|' + step]).filter(Boolean);
+            if (!rows.length) continue;
+            const avgRow = { [RUN_COL]: avgRaw, [STEP_COL]: String(step) };
+            for (const col of cols) {
+              if (col === RUN_COL || col === STEP_COL) continue;
+              const vals = rows.map(r => +r[col]).filter(v => !isNaN(v));
+              avgRow[col] = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : 0;
+            }
+            result.push(avgRow);
+          }
+        }
+        return { data: result, datasets: dsMap };
+      }
+
+      function switchSetup(name) {
+        currentSetup = name;
+        if (name === AVG_SETUP_KEY) {
+          DATASETS = { ...avgDatasets };
+        } else {
+          DATASETS = normalizeDatasets(SETUPS[name].datasets);
+        }
+        // Re-add baselines from any setup
+        for (const sName of setupNames) {
+          const ds = normalizeDatasets(SETUPS[sName].datasets);
+          for (const [raw, opts] of Object.entries(ds)) {
+            if (opts.baseline && !DATASETS[raw] && parsedData.some(r => r[RUN_COL] === raw)) {
+              DATASETS[raw] = { ...opts };
+            }
+          }
+        }
+        colorMap = {};
+        filterData();
+        initColors();
+        render();
+        buildLegend();
+      }
+
+      function showTip(html, x, y) {
+        tipInner.innerHTML = html;
+        const tipW = tip.offsetWidth || 180;
+        const cW = container.clientWidth || 800;
+        const px = (x + tipW + 20 > cW) ? x - tipW - 12 : x + 12;
+        tip.style.transform = `translate(${px}px, ${Math.max(0, y - 20)}px)`;
+        tip.style.opacity = '1';
+      }
+      function hideTip() {
+        tip.style.opacity = '0';
+        tip.style.transform = 'translate(-9999px, -9999px)';
+      }
+
+      function updateHighlight() {
+        gRoot.selectAll('rect.bar').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('text.value-label').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.line-path').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.line-dot').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-vline').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-vlabel').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-hline').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-hlabel').classed('ghost', d => highlight && d.name !== highlight);
+        container.querySelectorAll('.legend .item').forEach(el => {
+          el.classList.toggle('ghost', highlight && el.getAttribute('data-name') !== highlight);
+        });
+      }
+
+      // ─── AUTO-DETECT METRICS from CSV columns ───
+      function detectMetrics(columns) {
+        const skip = new Set([RUN_COL, STEP_COL, 'seed']);
+        const aggOrder = ['agg_score_macro', 'agg_score_micro', 'agg_score_RC', 'agg_score_GK', 'agg_score_NLU', 'agg_score_MATH', 'agg_score_TABLE', 'agg_score_RES'];
+        const agg = aggOrder.filter(k => columns.includes(k));
+        const ind = columns.filter(k => !skip.has(k) && !agg.includes(k) && !isNaN(+allData[0][k]));
+        return [...agg, ...ind];
+      }
+
+      // ─── BAR CHART ───
+      function renderBar() {
+        const width = container.clientWidth || 800;
+        const hasBaselines = allData.some(r => isBaseline(r[RUN_COL]));
+        const margin = { top: hasBaselines ? 20 : 12, right: 56, bottom: 32, left: 190 };
+
+        const grouped = d3.group(allData, d => d[RUN_COL]);
+        const finalData = [];
+        for (const [raw, rows] of grouped) {
+          const maxStep = d3.max(rows, r => +r[STEP_COL]);
+          const row = rows.find(r => +r[STEP_COL] === maxStep);
+          if (row) finalData.push({ name: displayName(raw), rawName: raw, value: +row[currentMetric] });
+        }
+        finalData.sort((a, b) => b.value - a.value);
+
+        const barData = finalData.filter(d => !isBaseline(d.rawName));
+        const baselineData = finalData.filter(d => isBaseline(d.rawName));
+
+        const height = window.innerHeight || 480;
+        svg.attr('width', width).attr('height', height);
+        const barHeight = Math.min(28, (height - margin.top - margin.bottom) / barData.length * 0.75);
+        const barGap = barHeight * 0.3;
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+
+        const x = d3.scaleLinear().domain([0, d3.max(finalData, d => d.value) * 1.05]).range([0, innerWidth]);
+        const y = d3.scaleBand().domain(barData.map(d => d.name)).range([0, innerHeight]).padding(0.2);
+
+        // Grid
+        gRoot.selectAll('.grid').data([0]).join('g').attr('class', 'grid').call(g => {
+          g.selectAll('line').data(x.ticks(5)).join('line')
+            .attr('x1', d => x(d)).attr('x2', d => x(d)).attr('y1', 0).attr('y2', innerHeight);
+        });
+
+        // X axis
+        gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axes axis-x')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(x).ticks(5).tickFormat(d3.format('.3f')).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Y axis
+        gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axes axis-y')
+          .call(d3.axisLeft(y).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--text-color)').style('font-size', '18px').style('font-weight', '600');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Stripe patterns for shaded bars
+        barData.forEach(d => {
+          if (!isShaded(d.rawName)) return;
+          const c = colorMap[d.rawName] || '#999';
+          const pat = defs.append('pattern').attr('id', stripePatternId(d.rawName))
+            .attr('width', 6).attr('height', 6).attr('patternUnits', 'userSpaceOnUse').attr('patternTransform', 'rotate(45)');
+          pat.append('rect').attr('width', 6).attr('height', 6).attr('fill', c).attr('opacity', 0.35);
+          pat.append('line').attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', 6).attr('stroke', c).attr('stroke-width', 2.5);
+        });
+
+        function barFill(d) {
+          if (isShaded(d.rawName)) return `url(#${stripePatternId(d.rawName)})`;
+          return colorMap[d.rawName] || 'var(--primary-color)';
+        }
+
+        // Bars
+        const barTip = (ev, d) => {
+          const [mx, my] = d3.pointer(ev, container);
+          showTip(`<strong>${d.name}</strong><br/>${metricName(currentMetric)}: <strong>${d.value.toFixed(3)}</strong>`, mx, my);
+        };
+        gRoot.selectAll('rect.bar').data(barData, d => d.name).join(
+          enter => enter.append('rect').attr('class', 'bar')
+            .attr('x', 0).attr('y', d => y(d.name)).attr('height', y.bandwidth()).attr('rx', 3)
+            .attr('fill', d => barFill(d))
+            .attr('width', 0)
+            .on('mouseenter', (ev, d) => { highlight = d.name; updateHighlight(); })
+            .on('mousemove', barTip)
+            .on('mouseleave', () => { hideTip(); highlight = null; updateHighlight(); })
+            .transition().duration(300).attr('width', d => Math.max(0, x(d.value))),
+          update => update
+            .on('mouseenter', (ev, d) => { highlight = d.name; updateHighlight(); })
+            .on('mousemove', barTip)
+            .on('mouseleave', () => { hideTip(); highlight = null; updateHighlight(); })
+            .transition().duration(300)
+            .attr('y', d => y(d.name)).attr('height', y.bandwidth())
+            .attr('width', d => Math.max(0, x(d.value)))
+            .attr('fill', d => barFill(d)),
+          exit => exit.transition().duration(200).attr('width', 0).remove()
+        );
+
+        // Value labels
+        gRoot.selectAll('text.value-label').data(barData, d => d.name).join(
+          enter => enter.append('text').attr('class', 'value-label')
+            .attr('x', d => x(d.value) + 5).attr('y', d => y(d.name) + y.bandwidth() / 2)
+            .attr('dy', '0.35em').attr('fill', 'var(--text-color)').attr('font-size', 18)
+            .text(d => d.value.toFixed(3)),
+          update => update.transition().duration(300)
+            .attr('x', d => x(d.value) + 5).attr('y', d => y(d.name) + y.bandwidth() / 2)
+            .text(d => d.value.toFixed(3)),
+          exit => exit.remove()
+        );
+
+        // Baseline vertical reference lines
+        gRoot.selectAll('.baseline-vline').data(baselineData, d => d.name).join(
+          enter => enter.append('line').attr('class', 'baseline-vline baseline')
+            .attr('x1', d => x(d.value)).attr('x2', d => x(d.value))
+            .attr('y1', 0).attr('y2', innerHeight)
+            .attr('stroke', d => colorMap[d.rawName] || '#999')
+            .attr('stroke-width', 2).attr('stroke-dasharray', '6,4').attr('opacity', 0.7),
+          update => update.transition().duration(300)
+            .attr('x1', d => x(d.value)).attr('x2', d => x(d.value))
+            .attr('y1', 0).attr('y2', innerHeight)
+            .attr('stroke', d => colorMap[d.rawName] || '#999'),
+          exit => exit.remove()
+        );
+        gRoot.selectAll('.baseline-vlabel').data(baselineData, d => d.name).join(
+          enter => enter.append('text').attr('class', 'baseline-vlabel baseline')
+            .attr('x', d => x(d.value)).attr('y', -4)
+            .attr('text-anchor', 'middle').attr('fill', d => colorMap[d.rawName] || '#999')
+            .attr('font-size', 18).attr('font-weight', 600)
+            .text(d => `${d.name} (${d.value.toFixed(3)})`),
+          update => update.transition().duration(300)
+            .attr('x', d => x(d.value))
+            .text(d => `${d.name} (${d.value.toFixed(3)})`),
+          exit => exit.remove()
+        );
+      }
+
+      // ─── LINE CHART ───
+      function renderLine() {
+        const width = container.clientWidth || 800;
+        const hasBaselines = allData.some(r => isBaseline(r[RUN_COL]));
+        const margin = { top: 16, right: 50, bottom: 48, left: 60 };
+        const height = window.innerHeight || 480;
+        svg.attr('width', width).attr('height', height);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+
+        // Build series
+        const grouped = d3.group(allData, d => d[RUN_COL]);
+        const series = [];
+        const baselineSeries = [];
+        for (const [raw, rows] of grouped) {
+          const pts = rows.map(r => ({ step: +r[STEP_COL], value: +r[currentMetric] })).sort((a, b) => a.step - b.step);
+          const entry = { name: displayName(raw), rawName: raw, values: pts };
+          if (isBaseline(raw)) {
+            entry.finalValue = pts[pts.length - 1].value;
+            baselineSeries.push(entry);
+          } else {
+            series.push(entry);
+          }
+        }
+
+        const allSteps = Array.from(new Set(allData.filter(r => !isBaseline(r[RUN_COL])).map(r => +r[STEP_COL]))).sort((a, b) => a - b);
+        const allValues = [...series, ...baselineSeries].flatMap(s => s.finalValue != null ? [s.finalValue] : s.values.map(v => v.value));
+
+        const x = d3.scaleLinear().domain(d3.extent(allSteps)).range([0, innerWidth]);
+        const yMin = d3.min(allValues), yMax = d3.max(allValues), yPad = (yMax - yMin) * 0.08;
+        const y = d3.scaleLinear().domain([yMin - yPad, yMax + yPad]).range([innerHeight, 0]).nice();
+
+        // Grid
+        gRoot.selectAll('.grid').data([0]).join('g').attr('class', 'grid').call(g => {
+          g.selectAll('line').data(y.ticks(6)).join('line')
+            .attr('x1', 0).attr('x2', innerWidth).attr('y1', d => y(d)).attr('y2', d => y(d));
+        });
+
+        // X axis
+        gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axes axis-x')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(x).ticks(6).tickFormat(d => stepLabelShort(d)).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Y axis
+        gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axes axis-y')
+          .call(d3.axisLeft(y).ticks(6).tickFormat(d3.format('.3f')).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Axis labels
+        gRoot.selectAll('.x-label').data([0]).join('text').attr('class', 'x-label')
+          .attr('x', innerWidth / 2).attr('y', innerHeight + 38)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', 18)
+          .text('Tokens (Steps)');
+
+        gRoot.selectAll('.y-label').data([0]).join('text').attr('class', 'y-label')
+          .attr('transform', 'rotate(-90)').attr('x', -innerHeight / 2).attr('y', -44)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', 18)
+          .text(metricName(currentMetric));
+
+        // Baseline horizontal reference lines
+        gRoot.selectAll('.baseline-hline').data(baselineSeries, d => d.name).join(
+          enter => enter.append('line').attr('class', 'baseline-hline baseline')
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => y(d.finalValue)).attr('y2', d => y(d.finalValue))
+            .attr('stroke', d => colorMap[d.rawName] || '#999')
+            .attr('stroke-width', 2).attr('stroke-dasharray', '6,4').attr('opacity', 0.7),
+          update => update.transition().duration(300)
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => y(d.finalValue)).attr('y2', d => y(d.finalValue))
+            .attr('stroke', d => colorMap[d.rawName] || '#999'),
+          exit => exit.remove()
+        );
+        gRoot.selectAll('.baseline-hlabel').data(baselineSeries, d => d.name).join(
+          enter => enter.append('text').attr('class', 'baseline-hlabel baseline')
+            .attr('x', 4).attr('y', d => y(d.finalValue) - 6)
+            .attr('text-anchor', 'start')
+            .attr('fill', d => colorMap[d.rawName] || '#999')
+            .attr('font-size', 18).attr('font-weight', 600)
+            .text(d => `${d.name} (${d.finalValue.toFixed(3)})`),
+          update => update.transition().duration(300)
+            .attr('x', 4).attr('y', d => y(d.finalValue) - 6)
+            .text(d => `${d.name} (${d.finalValue.toFixed(3)})`),
+          exit => exit.remove()
+        );
+
+        // Lines (non-baseline)
+        const line = d3.line().x(d => x(d.step)).y(d => y(d.value)).curve(d3.curveMonotoneX);
+        gRoot.selectAll('.line-path').data(series, d => d.name).join(
+          enter => enter.append('path').attr('class', 'line-path')
+            .attr('stroke', d => colorMap[d.rawName] || 'var(--primary-color)')
+            .attr('d', d => line(d.values)),
+          update => update.transition().duration(300)
+            .attr('stroke', d => colorMap[d.rawName] || 'var(--primary-color)')
+            .attr('d', d => line(d.values)),
+          exit => exit.remove()
+        );
+
+        // Dots (non-baseline)
+        const dotData = series.flatMap(s => s.values.map(v => ({ name: s.name, rawName: s.rawName, step: v.step, value: v.value })));
+        gRoot.selectAll('.line-dot').data(dotData, d => d.name + '-' + d.step).join(
+          enter => enter.append('circle').attr('class', 'line-dot')
+            .attr('cx', d => x(d.step)).attr('cy', d => y(d.value)).attr('r', 3)
+            .attr('fill', d => colorMap[d.rawName] || 'var(--primary-color)')
+            .attr('stroke', 'var(--surface-bg)').attr('stroke-width', 1),
+          update => update.transition().duration(300)
+            .attr('cx', d => x(d.step)).attr('cy', d => y(d.value))
+            .attr('fill', d => colorMap[d.rawName] || 'var(--primary-color)'),
+          exit => exit.remove()
+        );
+
+        // Hover overlay
+        gRoot.selectAll('.hover-line').data([0]).join('line').attr('class', 'hover-line')
+          .attr('y1', 0).attr('y2', innerHeight).style('display', 'none');
+
+        gRoot.selectAll('.hover-overlay').data([0]).join('rect').attr('class', 'hover-overlay')
+          .attr('width', innerWidth).attr('height', innerHeight)
+          .attr('fill', 'none').attr('pointer-events', 'all')
+          .on('mousemove', (ev) => {
+            const [mx] = d3.pointer(ev, gRoot.node());
+            const nearest = allSteps.reduce((best, s) => Math.abs(s - x.invert(mx)) < Math.abs(best - x.invert(mx)) ? s : best, allSteps[0]);
+            gRoot.select('.hover-line').attr('x1', x(nearest)).attr('x2', x(nearest)).style('display', null);
+
+            const entries = series.map(s => {
+              const pt = s.values.find(v => v.step === nearest);
+              return pt ? { name: s.name, rawName: s.rawName, value: pt.value } : null;
+            }).filter(Boolean);
+            baselineSeries.forEach(s => {
+              entries.push({ name: s.name, rawName: s.rawName, value: s.finalValue });
+            });
+            entries.sort((a, b) => b.value - a.value);
+
+            let html = `<div style="font-weight:700;margin-bottom:4px;">${stepLabelLong(nearest)}</div>`;
+            entries.forEach(e => {
+              html += `<div><span class="tip-dot" style="background:${colorMap[e.rawName]}"></span>${e.name}: <strong>${e.value.toFixed(3)}</strong></div>`;
+            });
+            const [cx, cy] = d3.pointer(ev, container);
+            showTip(html, cx, cy);
+          })
+          .on('mouseleave', () => {
+            gRoot.select('.hover-line').style('display', 'none');
+            hideTip();
+          });
+      }
+
+      // ─── RENDER ───
+      function render() {
+        if (!allData.length) return;
+        initColors();
+        gRoot.selectAll('*').remove();
+        defs.selectAll('*').remove();
+        if (currentView === 'bar') renderBar(); else renderLine();
+      }
+
+      // ─── UI ───
+      function buildUI() {
+        const controls = document.createElement('div'); controls.className = 'controls';
+
+        if (SETUPS && setupNames.length > 0) {
+          const setupGroup = document.createElement('div'); setupGroup.className = 'control-group';
+          const setupLabel = document.createElement('label'); setupLabel.setAttribute('for', 'setup-' + uid); setupLabel.textContent = 'Setup';
+          const setupSelect = document.createElement('select'); setupSelect.id = 'setup-' + uid;
+          setupNames.forEach(name => {
+            const opt = document.createElement('option'); opt.value = name; opt.textContent = name;
+            if (name === currentSetup) opt.selected = true;
+            setupSelect.appendChild(opt);
+          });
+          if (setupNames.length >= 2) {
+            const avgOpt = document.createElement('option'); avgOpt.value = AVG_SETUP_KEY; avgOpt.textContent = AVG_SETUP_KEY;
+            if (currentSetup === AVG_SETUP_KEY) avgOpt.selected = true;
+            setupSelect.appendChild(avgOpt);
+          }
+          setupSelect.addEventListener('change', () => { switchSetup(setupSelect.value); });
+          setupGroup.appendChild(setupLabel); setupGroup.appendChild(setupSelect);
+          controls.appendChild(setupGroup);
+        }
+
+        const viewGroup = document.createElement('div'); viewGroup.className = 'control-group';
+        const viewLabel = document.createElement('label'); viewLabel.setAttribute('for', 'view-' + uid); viewLabel.textContent = 'View';
+        const viewSelect = document.createElement('select'); viewSelect.id = 'view-' + uid;
+        [['bar', 'Final Score'], ['line', 'Training Progression']].forEach(([val, text]) => {
+          const opt = document.createElement('option'); opt.value = val; opt.textContent = text;
+          if (val === currentView) opt.selected = true;
+          viewSelect.appendChild(opt);
+        });
+        viewSelect.addEventListener('change', () => { currentView = viewSelect.value; render(); });
+        viewGroup.appendChild(viewLabel); viewGroup.appendChild(viewSelect);
+        controls.appendChild(viewGroup);
+
+        const metricGroup = document.createElement('div'); metricGroup.className = 'control-group';
+        const metricLabel = document.createElement('label'); metricLabel.setAttribute('for', 'metric-' + uid); metricLabel.textContent = 'Metric';
+        const metricSelect = document.createElement('select'); metricSelect.id = 'metric-' + uid;
+        metricGroup.appendChild(metricLabel); metricGroup.appendChild(metricSelect);
+        controls.appendChild(metricGroup);
+
+        container.appendChild(controls);
+
+        const legend = document.createElement('div'); legend.className = 'legend';
+        legend.innerHTML = '<div class="legend-title">Legend</div><div class="items"></div>';
+        container.appendChild(legend);
+      }
+
+      function populateMetricSelect() {
+        const sel = container.querySelector('#metric-' + uid);
+        if (!sel) return;
+        sel.innerHTML = '';
+        const aggGroup = document.createElement('optgroup'); aggGroup.label = 'Aggregate Scores';
+        const indGroup = document.createElement('optgroup'); indGroup.label = 'Individual Benchmarks';
+        metricKeys.forEach(key => {
+          const opt = document.createElement('option'); opt.value = key; opt.textContent = metricName(key);
+          if (key === currentMetric) opt.selected = true;
+          if (key.startsWith('agg_score')) aggGroup.appendChild(opt); else indGroup.appendChild(opt);
+        });
+        if (aggGroup.children.length) sel.appendChild(aggGroup);
+        if (indGroup.children.length) sel.appendChild(indGroup);
+        sel.addEventListener('change', () => { currentMetric = sel.value; render(); });
+      }
+
+      function buildLegend() {
+        const items = container.querySelector('.legend .items');
+        if (!items) return;
+        items.innerHTML = '';
+        const grouped = d3.group(allData, d => d[RUN_COL]);
+        const sorted = Array.from(grouped.entries())
+          .map(([raw, rows]) => {
+            const maxStep = d3.max(rows, r => +r[STEP_COL]);
+            const row = rows.find(r => +r[STEP_COL] === maxStep);
+            return { raw, score: row ? +row[defaultMetric] : 0 };
+          })
+          .sort((a, b) => b.score - a.score)
+          .map(d => d.raw);
+        sorted.filter(raw => !isBaseline(raw)).forEach(raw => {
+          const name = displayName(raw);
+          const el = document.createElement('span'); el.className = 'item'; el.setAttribute('data-name', name);
+          const sw = document.createElement('span'); sw.className = 'swatch';
+          const c = colorMap[raw] || '#999';
+          if (isShaded(raw)) {
+            sw.style.background = c;
+            sw.style.backgroundImage = 'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.4) 2px, rgba(255,255,255,0.4) 4px)';
+          } else {
+            sw.style.background = c;
+          }
+          const txt = document.createElement('span'); txt.textContent = name;
+          el.appendChild(sw); el.appendChild(txt); items.appendChild(el);
+          el.addEventListener('mouseenter', () => { highlight = name; updateHighlight(); });
+          el.addEventListener('mouseleave', () => { highlight = null; updateHighlight(); });
+        });
+      }
+
+      buildUI();
+
+      // ─── DATA LOADING ───
+      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 (_) {}
+        }
+        throw new Error('CSV not found');
+      };
+
+      let dataMountEl = container;
+      while (dataMountEl && !dataMountEl.getAttribute?.('data-datafiles')) { dataMountEl = dataMountEl.parentElement; }
+      let providedData = null;
+      try {
+        const attr = dataMountEl && dataMountEl.getAttribute ? dataMountEl.getAttribute('data-datafiles') : null;
+        if (attr && attr.trim()) providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
+      } catch (_) {}
+
+      const ensurePrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
+      const csvPaths = providedData
+        ? (Array.isArray(providedData) ? providedData.map(ensurePrefix) : [ensurePrefix(providedData)])
+        : ['../data/benchmark-results.csv'];
+
+      (async () => {
+        try {
+          const text = await fetchFirstAvailable(csvPaths);
+          const parsed = d3.csvParse(text);
+          parsedData = parsed;
+          if (SETUPS && setupNames.length >= 2) {
+            const avg = computeAverageData(parsed);
+            avgDatasets = avg.datasets;
+            parsedData = parsed.concat(avg.data);
+            parsedData.columns = parsed.columns;
+            if (currentSetup === AVG_SETUP_KEY) DATASETS = { ...avgDatasets };
+          }
+          filterData();
+          metricKeys = detectMetrics(allData.columns);
+          if (!metricKeys.includes(currentMetric)) currentMetric = metricKeys[0];
+          populateMetricSelect();
+          render();
+          buildLegend();
+          if (window.ResizeObserver) { new ResizeObserver(() => render()).observe(container); }
+          else { window.addEventListener('resize', () => render()); }
+        } catch (e) {
+          const pre = document.createElement('pre');
+          pre.textContent = 'Data load error: ' + (e && e.message ? e.message : e);
+          pre.style.color = 'var(--danger, #b00020)';
+          pre.style.fontSize = '12px';
+          container.appendChild(pre);
+        }
+      })();
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); }
+    else { ensureD3(bootstrap); }
+  })();
+</script>
+</body>
+</html>

app/presentation/se2026/charts/benchmark-prompts.html

@@ -0,0 +1,837 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Benchmark Comparison</title>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+  <style>
+    :root {
+      --text-color: rgba(255,255,255,0.88);
+      --muted-color: rgba(255,255,255,0.45);
+      --surface-bg: rgba(30,30,40,0.95);
+      --border-color: rgba(255,255,255,0.1);
+      --axis-color: rgba(255,255,255,0.15);
+      --tick-color: rgba(255,255,255,0.5);
+      --grid-color: rgba(255,255,255,0.06);
+      --primary-color: #7c6ff7;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; }
+  </style>
+</head>
+<body>
+<div class="d3-benchmark-comparison" data-config='{"datasets":{"mix-fw_edu_hq-table_1b_hq":{"display":"Table","color":"#EBA937"},"mix-fw_edu_hq-math_1b_hq":{"display":"Math","color":"#e06b9e"},"mix-fw_edu_hq-faq_1b_hq":{"display":"FAQ","color":"#5b9bd5"},"mix-fw_edu_hq-tutorial_1b_hq":{"display":"Tutorial","color":"#8bc474"},"mix-fw_edu_hq-article_1b_hq":{"display":"Article","color":"#9a8ec2"},"mix-fw_edu_hq-commentary_1b_hq":{"display":"Commentary","color":"#c9a046"},"mix-fw_edu_hq-discussion_1b_hq":{"display":"Discussion","color":"#e07b54"},"dclm":{"display":"DCLM","baseline":true}}}' data-datafiles="../data/benchmark-results.csv"></div>
+<style>
+  .d3-benchmark-comparison { position: relative; }
+  .d3-benchmark-comparison .controls {
+    display: flex;
+    gap: 16px;
+    align-items: flex-end;
+    justify-content: center;
+    margin: 10px 0 0 0;
+  }
+  .d3-benchmark-comparison .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-benchmark-comparison .controls label {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-benchmark-comparison .controls select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 6px 28px 6px 10px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    font-size: 18px;
+    line-height: 1.2;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 1.59L6 6.17l4.59-4.58L12 3 6 9 0 3z' fill='%23999'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+  .d3-benchmark-comparison .controls select:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+  .d3-benchmark-comparison .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    margin: 8px 0 0 0;
+    padding-bottom: 4px;
+  }
+  .d3-benchmark-comparison .legend .legend-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-benchmark-comparison .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-benchmark-comparison .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 18px;
+    color: var(--text-color);
+    cursor: pointer;
+  }
+  .d3-benchmark-comparison .legend .item.ghost { opacity: .25; }
+  .d3-benchmark-comparison .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+  .d3-benchmark-comparison .bar.ghost { opacity: .25; }
+  .d3-benchmark-comparison .value-label.ghost { opacity: .25; }
+  .d3-benchmark-comparison .line-path { fill: none; stroke-width: 2; opacity: 0.85; }
+  .d3-benchmark-comparison .line-path.ghost { opacity: .15; }
+  .d3-benchmark-comparison .line-dot.ghost { opacity: .15; }
+  .d3-benchmark-comparison .baseline.ghost { opacity: .1; }
+  .d3-benchmark-comparison .axes path { display: none; }
+  .d3-benchmark-comparison .axes line { stroke: var(--axis-color); }
+  .d3-benchmark-comparison .axes text { fill: var(--tick-color); }
+  .d3-benchmark-comparison .grid line { stroke: var(--grid-color); }
+  .d3-benchmark-comparison .hover-line {
+    stroke: var(--text-color);
+    stroke-opacity: 0.25;
+    stroke-width: 1;
+    pointer-events: none;
+  }
+  .d3-benchmark-comparison .d3-tooltip {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 18px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    opacity: 0;
+    transition: opacity .12s ease;
+    text-align: left;
+    z-index: 10;
+  }
+  .d3-benchmark-comparison .d3-tooltip .tip-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+    margin-right: 6px;
+    vertical-align: middle;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-benchmark-comparison'))) {
+        const cs = Array.from(document.querySelectorAll('.d3-benchmark-comparison')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      container.style.position = container.style.position || 'relative';
+
+      // ─── READ CONFIG ───
+      let mountEl = container;
+      while (mountEl && !mountEl.getAttribute?.('data-config')) { mountEl = mountEl.parentElement; }
+      let cfg = {};
+      try {
+        const raw = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null;
+        if (raw && raw.trim()) cfg = raw.trim().startsWith('{') ? JSON.parse(raw) : {};
+      } catch (_) {}
+
+      // ─── NORMALIZE DATASETS CONFIG ───
+      // Accepts: { "key": "Name" } or { "key": { display, color, shaded, baseline } }
+      // Returns: { key: { display, color, shaded, baseline } }
+      function normalizeDatasets(raw) {
+        const out = {};
+        for (const [k, v] of Object.entries(raw || {})) {
+          out[k] = typeof v === 'string' ? { display: v } : { ...v };
+        }
+        return out;
+      }
+
+      // ─── SETUP SUPPORT ───
+      const SETUPS = cfg.setups || null;
+      const setupNames = SETUPS ? Object.keys(SETUPS) : [];
+      const AVG_SETUP_KEY = 'Average (all setups)';
+      const defaultSetupCfg = cfg.defaultSetup || (setupNames.length >= 2 ? 'average' : null);
+      let currentSetup = SETUPS ? (defaultSetupCfg === 'average' ? AVG_SETUP_KEY : (defaultSetupCfg && setupNames.includes(defaultSetupCfg) ? defaultSetupCfg : setupNames[0])) : null;
+      let DATASETS = SETUPS ? (currentSetup === AVG_SETUP_KEY ? {} : normalizeDatasets(SETUPS[currentSetup].datasets)) : normalizeDatasets(cfg.datasets);
+      let avgDatasets = {};
+      let parsedData = [];
+
+      const RUN_COL       = cfg.runColumn    || 'runname';
+      const STEP_COL      = cfg.stepColumn   || 'steps';
+      const TOKENS_PER_STEP = cfg.tokensPerStep || 2.1e6;
+      const defaultMetric = cfg.defaultMetric || 'agg_score_macro';
+      const defaultView   = cfg.defaultView   || 'bar';
+      const uid = Math.random().toString(36).slice(2, 8);
+
+      // ─── DATASET ACCESSORS ───
+      function displayName(raw) { return DATASETS[raw] ? DATASETS[raw].display : raw; }
+      function isBaseline(raw) { return !!(DATASETS[raw] && DATASETS[raw].baseline); }
+      function isShaded(raw) { return !!(DATASETS[raw] && DATASETS[raw].shaded); }
+      function pinnedColor(raw) { return DATASETS[raw] && DATASETS[raw].color; }
+      function stripePatternId(raw) { return 'stripe-' + uid + '-' + raw.replace(/[^a-zA-Z0-9]/g, '_'); }
+
+      const METRIC_NAMES = {
+        'agg_score_macro': 'Aggregate Score (Macro)',
+        'agg_score_micro': 'Aggregate Score (Micro)',
+        'agg_score_RC': 'Reading Comprehension',
+        'agg_score_GK': 'General Knowledge',
+        'agg_score_NLU': 'Natural Language Understanding',
+        'agg_score_MATH': 'Math',
+        'agg_score_TABLE': 'Table Understanding',
+        'agg_score_RES': 'Reasoning',
+        'lighteval|arc_cf:easy|3/prob_norm_token': 'ARC-Easy',
+        'lighteval|drop|3/prob_norm_token': 'DROP',
+        'lighteval|gsm8k|3/prob_norm_token': 'GSM8K',
+        'lighteval|hellaswag_cf|3/prob_norm_token': 'HellaSwag',
+        'lighteval|openbookqa_cf|3/prob_norm_token': 'OpenBookQA',
+        'lighteval|piqa_cf|3/prob_norm_token': 'PIQA',
+        'lighteval|squad_v2|3/prob_norm_token': 'SQuAD v2',
+        'lighteval|treb_qa|3/prob_norm_token': 'TriviaQA',
+        'lighteval|wikitablequestions|3/prob_norm_token': 'WikiTableQuestions',
+        'lighteval|winogrande_cf|3/prob_norm_token': 'Winogrande',
+        'lighteval|xcsqa_cf|3/prob_norm_token': 'XCSQA',
+        'lighteval|mmlu_redux_cf:_average|3/prob_norm_token': 'MMLU Redux'
+      };
+
+      // Tooltip
+      let tip = container.querySelector('.d3-tooltip'), tipInner;
+      if (!tip) {
+        tip = document.createElement('div'); tip.className = 'd3-tooltip';
+        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      // SVG
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+      const defs = svg.append('defs');
+
+      // State
+      let allData = [];
+      let metricKeys = [];
+      let currentMetric = defaultMetric;
+      let currentView = defaultView;
+      let colorMap = {};
+      let highlight = null;
+
+      // ─── HELPERS ───
+      function metricName(key) { return METRIC_NAMES[key] || key; }
+
+      function stepsToTokens(step) { return step * TOKENS_PER_STEP; }
+      function formatTokens(tokens) {
+        if (tokens >= 1e9) return d3.format('.2f')(tokens / 1e9) + 'B';
+        if (tokens >= 1e6) return d3.format('.1f')(tokens / 1e6) + 'M';
+        return d3.format(',')(tokens);
+      }
+      function formatStep(step) {
+        if (step >= 1000) return d3.format('.0f')(step / 1000) + 'K';
+        return String(step);
+      }
+      function stepLabelShort(step) { return `${formatTokens(stepsToTokens(step))} (${formatStep(step)})`; }
+      function stepLabelLong(step) { return `${formatTokens(stepsToTokens(step))} Tokens (${formatStep(step)} Steps)`; }
+
+      function getCategoricalColors(n) {
+        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch (_) {}
+        return (d3.schemeTableau10 || ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ac']).slice(0, n);
+      }
+
+      function initColors() {
+        if (Object.keys(colorMap).length) return;
+        const allRaw = Array.from(d3.group(allData, d => d[RUN_COL]).keys()).sort();
+        const unpinned = [];
+        allRaw.forEach(raw => {
+          const pc = pinnedColor(raw);
+          if (pc) { colorMap[raw] = pc; }
+          else { unpinned.push(raw); }
+        });
+        const palette = getCategoricalColors(unpinned.length);
+        unpinned.forEach((raw, i) => { colorMap[raw] = palette[i % palette.length]; });
+      }
+
+      // ─── SETUP HELPERS ───
+      function filterData() {
+        const knownNames = Object.keys(DATASETS);
+        allData = knownNames.length ? parsedData.filter(r => knownNames.includes(r[RUN_COL])) : parsedData;
+        allData.columns = parsedData.columns;
+      }
+
+      function computeAverageData(rawData) {
+        if (!SETUPS || setupNames.length < 2) return { data: [], datasets: {} };
+        const displayToRaws = {};
+        for (const sName of setupNames) {
+          const ds = normalizeDatasets(SETUPS[sName].datasets);
+          for (const [raw, opts] of Object.entries(ds)) {
+            if (!displayToRaws[opts.display]) displayToRaws[opts.display] = [];
+            displayToRaws[opts.display].push(raw);
+          }
+        }
+        const fullDisplay = Object.entries(displayToRaws)
+          .filter(([, raws]) => raws.length >= setupNames.length);
+        const byRunStep = {};
+        for (const row of rawData) byRunStep[row[RUN_COL] + '|' + row[STEP_COL]] = row;
+        const steps = Array.from(new Set(rawData.map(r => +r[STEP_COL]))).sort((a, b) => a - b);
+        const cols = rawData.columns || Object.keys(rawData[0] || {});
+        const result = [];
+        const dsMap = {};
+        for (const [display, raws] of fullDisplay) {
+          const avgRaw = '__avg__' + display.replace(/[^a-zA-Z0-9]/g, '_');
+          // Merge options from first setup that has this display name
+          const firstOpts = Object.values(normalizeDatasets(SETUPS[setupNames[0]].datasets)).find(o => o.display === display) || {};
+          dsMap[avgRaw] = { display, ...firstOpts };
+          for (const step of steps) {
+            const rows = raws.map(r => byRunStep[r + '|' + step]).filter(Boolean);
+            if (!rows.length) continue;
+            const avgRow = { [RUN_COL]: avgRaw, [STEP_COL]: String(step) };
+            for (const col of cols) {
+              if (col === RUN_COL || col === STEP_COL) continue;
+              const vals = rows.map(r => +r[col]).filter(v => !isNaN(v));
+              avgRow[col] = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : 0;
+            }
+            result.push(avgRow);
+          }
+        }
+        return { data: result, datasets: dsMap };
+      }
+
+      function switchSetup(name) {
+        currentSetup = name;
+        if (name === AVG_SETUP_KEY) {
+          DATASETS = { ...avgDatasets };
+        } else {
+          DATASETS = normalizeDatasets(SETUPS[name].datasets);
+        }
+        // Re-add baselines from any setup
+        for (const sName of setupNames) {
+          const ds = normalizeDatasets(SETUPS[sName].datasets);
+          for (const [raw, opts] of Object.entries(ds)) {
+            if (opts.baseline && !DATASETS[raw] && parsedData.some(r => r[RUN_COL] === raw)) {
+              DATASETS[raw] = { ...opts };
+            }
+          }
+        }
+        colorMap = {};
+        filterData();
+        initColors();
+        render();
+        buildLegend();
+      }
+
+      function showTip(html, x, y) {
+        tipInner.innerHTML = html;
+        const tipW = tip.offsetWidth || 180;
+        const cW = container.clientWidth || 800;
+        const px = (x + tipW + 20 > cW) ? x - tipW - 12 : x + 12;
+        tip.style.transform = `translate(${px}px, ${Math.max(0, y - 20)}px)`;
+        tip.style.opacity = '1';
+      }
+      function hideTip() {
+        tip.style.opacity = '0';
+        tip.style.transform = 'translate(-9999px, -9999px)';
+      }
+
+      function updateHighlight() {
+        gRoot.selectAll('rect.bar').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('text.value-label').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.line-path').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.line-dot').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-vline').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-vlabel').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-hline').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-hlabel').classed('ghost', d => highlight && d.name !== highlight);
+        container.querySelectorAll('.legend .item').forEach(el => {
+          el.classList.toggle('ghost', highlight && el.getAttribute('data-name') !== highlight);
+        });
+      }
+
+      // ─── AUTO-DETECT METRICS from CSV columns ───
+      function detectMetrics(columns) {
+        const skip = new Set([RUN_COL, STEP_COL, 'seed']);
+        const aggOrder = ['agg_score_macro', 'agg_score_micro', 'agg_score_RC', 'agg_score_GK', 'agg_score_NLU', 'agg_score_MATH', 'agg_score_TABLE', 'agg_score_RES'];
+        const agg = aggOrder.filter(k => columns.includes(k));
+        const ind = columns.filter(k => !skip.has(k) && !agg.includes(k) && !isNaN(+allData[0][k]));
+        return [...agg, ...ind];
+      }
+
+      // ─── BAR CHART ───
+      function renderBar() {
+        const width = container.clientWidth || 800;
+        const hasBaselines = allData.some(r => isBaseline(r[RUN_COL]));
+        const margin = { top: hasBaselines ? 20 : 12, right: 56, bottom: 32, left: 190 };
+
+        const grouped = d3.group(allData, d => d[RUN_COL]);
+        const finalData = [];
+        for (const [raw, rows] of grouped) {
+          const maxStep = d3.max(rows, r => +r[STEP_COL]);
+          const row = rows.find(r => +r[STEP_COL] === maxStep);
+          if (row) finalData.push({ name: displayName(raw), rawName: raw, value: +row[currentMetric] });
+        }
+        finalData.sort((a, b) => b.value - a.value);
+
+        const barData = finalData.filter(d => !isBaseline(d.rawName));
+        const baselineData = finalData.filter(d => isBaseline(d.rawName));
+
+        const height = window.innerHeight || 480;
+        svg.attr('width', width).attr('height', height);
+        const barHeight = Math.min(28, (height - margin.top - margin.bottom) / barData.length * 0.75);
+        const barGap = barHeight * 0.3;
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+
+        const x = d3.scaleLinear().domain([0, d3.max(finalData, d => d.value) * 1.05]).range([0, innerWidth]);
+        const y = d3.scaleBand().domain(barData.map(d => d.name)).range([0, innerHeight]).padding(0.2);
+
+        // Grid
+        gRoot.selectAll('.grid').data([0]).join('g').attr('class', 'grid').call(g => {
+          g.selectAll('line').data(x.ticks(5)).join('line')
+            .attr('x1', d => x(d)).attr('x2', d => x(d)).attr('y1', 0).attr('y2', innerHeight);
+        });
+
+        // X axis
+        gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axes axis-x')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(x).ticks(5).tickFormat(d3.format('.3f')).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Y axis
+        gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axes axis-y')
+          .call(d3.axisLeft(y).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--text-color)').style('font-size', '18px').style('font-weight', '600');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Stripe patterns for shaded bars
+        barData.forEach(d => {
+          if (!isShaded(d.rawName)) return;
+          const c = colorMap[d.rawName] || '#999';
+          const pat = defs.append('pattern').attr('id', stripePatternId(d.rawName))
+            .attr('width', 6).attr('height', 6).attr('patternUnits', 'userSpaceOnUse').attr('patternTransform', 'rotate(45)');
+          pat.append('rect').attr('width', 6).attr('height', 6).attr('fill', c).attr('opacity', 0.35);
+          pat.append('line').attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', 6).attr('stroke', c).attr('stroke-width', 2.5);
+        });
+
+        function barFill(d) {
+          if (isShaded(d.rawName)) return `url(#${stripePatternId(d.rawName)})`;
+          return colorMap[d.rawName] || 'var(--primary-color)';
+        }
+
+        // Bars
+        const barTip = (ev, d) => {
+          const [mx, my] = d3.pointer(ev, container);
+          showTip(`<strong>${d.name}</strong><br/>${metricName(currentMetric)}: <strong>${d.value.toFixed(3)}</strong>`, mx, my);
+        };
+        gRoot.selectAll('rect.bar').data(barData, d => d.name).join(
+          enter => enter.append('rect').attr('class', 'bar')
+            .attr('x', 0).attr('y', d => y(d.name)).attr('height', y.bandwidth()).attr('rx', 3)
+            .attr('fill', d => barFill(d))
+            .attr('width', 0)
+            .on('mouseenter', (ev, d) => { highlight = d.name; updateHighlight(); })
+            .on('mousemove', barTip)
+            .on('mouseleave', () => { hideTip(); highlight = null; updateHighlight(); })
+            .transition().duration(300).attr('width', d => Math.max(0, x(d.value))),
+          update => update
+            .on('mouseenter', (ev, d) => { highlight = d.name; updateHighlight(); })
+            .on('mousemove', barTip)
+            .on('mouseleave', () => { hideTip(); highlight = null; updateHighlight(); })
+            .transition().duration(300)
+            .attr('y', d => y(d.name)).attr('height', y.bandwidth())
+            .attr('width', d => Math.max(0, x(d.value)))
+            .attr('fill', d => barFill(d)),
+          exit => exit.transition().duration(200).attr('width', 0).remove()
+        );
+
+        // Value labels
+        gRoot.selectAll('text.value-label').data(barData, d => d.name).join(
+          enter => enter.append('text').attr('class', 'value-label')
+            .attr('x', d => x(d.value) + 5).attr('y', d => y(d.name) + y.bandwidth() / 2)
+            .attr('dy', '0.35em').attr('fill', 'var(--text-color)').attr('font-size', 18)
+            .text(d => d.value.toFixed(3)),
+          update => update.transition().duration(300)
+            .attr('x', d => x(d.value) + 5).attr('y', d => y(d.name) + y.bandwidth() / 2)
+            .text(d => d.value.toFixed(3)),
+          exit => exit.remove()
+        );
+
+        // Baseline vertical reference lines
+        gRoot.selectAll('.baseline-vline').data(baselineData, d => d.name).join(
+          enter => enter.append('line').attr('class', 'baseline-vline baseline')
+            .attr('x1', d => x(d.value)).attr('x2', d => x(d.value))
+            .attr('y1', 0).attr('y2', innerHeight)
+            .attr('stroke', d => colorMap[d.rawName] || '#999')
+            .attr('stroke-width', 2).attr('stroke-dasharray', '6,4').attr('opacity', 0.7),
+          update => update.transition().duration(300)
+            .attr('x1', d => x(d.value)).attr('x2', d => x(d.value))
+            .attr('y1', 0).attr('y2', innerHeight)
+            .attr('stroke', d => colorMap[d.rawName] || '#999'),
+          exit => exit.remove()
+        );
+        gRoot.selectAll('.baseline-vlabel').data(baselineData, d => d.name).join(
+          enter => enter.append('text').attr('class', 'baseline-vlabel baseline')
+            .attr('x', d => x(d.value)).attr('y', -4)
+            .attr('text-anchor', 'middle').attr('fill', d => colorMap[d.rawName] || '#999')
+            .attr('font-size', 18).attr('font-weight', 600)
+            .text(d => `${d.name} (${d.value.toFixed(3)})`),
+          update => update.transition().duration(300)
+            .attr('x', d => x(d.value))
+            .text(d => `${d.name} (${d.value.toFixed(3)})`),
+          exit => exit.remove()
+        );
+      }
+
+      // ─── LINE CHART ───
+      function renderLine() {
+        const width = container.clientWidth || 800;
+        const hasBaselines = allData.some(r => isBaseline(r[RUN_COL]));
+        const margin = { top: 16, right: 50, bottom: 48, left: 60 };
+        const height = window.innerHeight || 480;
+        svg.attr('width', width).attr('height', height);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+
+        // Build series
+        const grouped = d3.group(allData, d => d[RUN_COL]);
+        const series = [];
+        const baselineSeries = [];
+        for (const [raw, rows] of grouped) {
+          const pts = rows.map(r => ({ step: +r[STEP_COL], value: +r[currentMetric] })).sort((a, b) => a.step - b.step);
+          const entry = { name: displayName(raw), rawName: raw, values: pts };
+          if (isBaseline(raw)) {
+            entry.finalValue = pts[pts.length - 1].value;
+            baselineSeries.push(entry);
+          } else {
+            series.push(entry);
+          }
+        }
+
+        const allSteps = Array.from(new Set(allData.filter(r => !isBaseline(r[RUN_COL])).map(r => +r[STEP_COL]))).sort((a, b) => a - b);
+        const allValues = [...series, ...baselineSeries].flatMap(s => s.finalValue != null ? [s.finalValue] : s.values.map(v => v.value));
+
+        const x = d3.scaleLinear().domain(d3.extent(allSteps)).range([0, innerWidth]);
+        const yMin = d3.min(allValues), yMax = d3.max(allValues), yPad = (yMax - yMin) * 0.08;
+        const y = d3.scaleLinear().domain([yMin - yPad, yMax + yPad]).range([innerHeight, 0]).nice();
+
+        // Grid
+        gRoot.selectAll('.grid').data([0]).join('g').attr('class', 'grid').call(g => {
+          g.selectAll('line').data(y.ticks(6)).join('line')
+            .attr('x1', 0).attr('x2', innerWidth).attr('y1', d => y(d)).attr('y2', d => y(d));
+        });
+
+        // X axis
+        gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axes axis-x')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(x).ticks(6).tickFormat(d => stepLabelShort(d)).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Y axis
+        gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axes axis-y')
+          .call(d3.axisLeft(y).ticks(6).tickFormat(d3.format('.3f')).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Axis labels
+        gRoot.selectAll('.x-label').data([0]).join('text').attr('class', 'x-label')
+          .attr('x', innerWidth / 2).attr('y', innerHeight + 38)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', 18)
+          .text('Tokens (Steps)');
+
+        gRoot.selectAll('.y-label').data([0]).join('text').attr('class', 'y-label')
+          .attr('transform', 'rotate(-90)').attr('x', -innerHeight / 2).attr('y', -44)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', 18)
+          .text(metricName(currentMetric));
+
+        // Baseline horizontal reference lines
+        gRoot.selectAll('.baseline-hline').data(baselineSeries, d => d.name).join(
+          enter => enter.append('line').attr('class', 'baseline-hline baseline')
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => y(d.finalValue)).attr('y2', d => y(d.finalValue))
+            .attr('stroke', d => colorMap[d.rawName] || '#999')
+            .attr('stroke-width', 2).attr('stroke-dasharray', '6,4').attr('opacity', 0.7),
+          update => update.transition().duration(300)
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => y(d.finalValue)).attr('y2', d => y(d.finalValue))
+            .attr('stroke', d => colorMap[d.rawName] || '#999'),
+          exit => exit.remove()
+        );
+        gRoot.selectAll('.baseline-hlabel').data(baselineSeries, d => d.name).join(
+          enter => enter.append('text').attr('class', 'baseline-hlabel baseline')
+            .attr('x', 4).attr('y', d => y(d.finalValue) - 6)
+            .attr('text-anchor', 'start')
+            .attr('fill', d => colorMap[d.rawName] || '#999')
+            .attr('font-size', 18).attr('font-weight', 600)
+            .text(d => `${d.name} (${d.finalValue.toFixed(3)})`),
+          update => update.transition().duration(300)
+            .attr('x', 4).attr('y', d => y(d.finalValue) - 6)
+            .text(d => `${d.name} (${d.finalValue.toFixed(3)})`),
+          exit => exit.remove()
+        );
+
+        // Lines (non-baseline)
+        const line = d3.line().x(d => x(d.step)).y(d => y(d.value)).curve(d3.curveMonotoneX);
+        gRoot.selectAll('.line-path').data(series, d => d.name).join(
+          enter => enter.append('path').attr('class', 'line-path')
+            .attr('stroke', d => colorMap[d.rawName] || 'var(--primary-color)')
+            .attr('d', d => line(d.values)),
+          update => update.transition().duration(300)
+            .attr('stroke', d => colorMap[d.rawName] || 'var(--primary-color)')
+            .attr('d', d => line(d.values)),
+          exit => exit.remove()
+        );
+
+        // Dots (non-baseline)
+        const dotData = series.flatMap(s => s.values.map(v => ({ name: s.name, rawName: s.rawName, step: v.step, value: v.value })));
+        gRoot.selectAll('.line-dot').data(dotData, d => d.name + '-' + d.step).join(
+          enter => enter.append('circle').attr('class', 'line-dot')
+            .attr('cx', d => x(d.step)).attr('cy', d => y(d.value)).attr('r', 3)
+            .attr('fill', d => colorMap[d.rawName] || 'var(--primary-color)')
+            .attr('stroke', 'var(--surface-bg)').attr('stroke-width', 1),
+          update => update.transition().duration(300)
+            .attr('cx', d => x(d.step)).attr('cy', d => y(d.value))
+            .attr('fill', d => colorMap[d.rawName] || 'var(--primary-color)'),
+          exit => exit.remove()
+        );
+
+        // Hover overlay
+        gRoot.selectAll('.hover-line').data([0]).join('line').attr('class', 'hover-line')
+          .attr('y1', 0).attr('y2', innerHeight).style('display', 'none');
+
+        gRoot.selectAll('.hover-overlay').data([0]).join('rect').attr('class', 'hover-overlay')
+          .attr('width', innerWidth).attr('height', innerHeight)
+          .attr('fill', 'none').attr('pointer-events', 'all')
+          .on('mousemove', (ev) => {
+            const [mx] = d3.pointer(ev, gRoot.node());
+            const nearest = allSteps.reduce((best, s) => Math.abs(s - x.invert(mx)) < Math.abs(best - x.invert(mx)) ? s : best, allSteps[0]);
+            gRoot.select('.hover-line').attr('x1', x(nearest)).attr('x2', x(nearest)).style('display', null);
+
+            const entries = series.map(s => {
+              const pt = s.values.find(v => v.step === nearest);
+              return pt ? { name: s.name, rawName: s.rawName, value: pt.value } : null;
+            }).filter(Boolean);
+            baselineSeries.forEach(s => {
+              entries.push({ name: s.name, rawName: s.rawName, value: s.finalValue });
+            });
+            entries.sort((a, b) => b.value - a.value);
+
+            let html = `<div style="font-weight:700;margin-bottom:4px;">${stepLabelLong(nearest)}</div>`;
+            entries.forEach(e => {
+              html += `<div><span class="tip-dot" style="background:${colorMap[e.rawName]}"></span>${e.name}: <strong>${e.value.toFixed(3)}</strong></div>`;
+            });
+            const [cx, cy] = d3.pointer(ev, container);
+            showTip(html, cx, cy);
+          })
+          .on('mouseleave', () => {
+            gRoot.select('.hover-line').style('display', 'none');
+            hideTip();
+          });
+      }
+
+      // ─── RENDER ───
+      function render() {
+        if (!allData.length) return;
+        initColors();
+        gRoot.selectAll('*').remove();
+        defs.selectAll('*').remove();
+        if (currentView === 'bar') renderBar(); else renderLine();
+      }
+
+      // ─── UI ───
+      function buildUI() {
+        const controls = document.createElement('div'); controls.className = 'controls';
+
+        if (SETUPS && setupNames.length > 0) {
+          const setupGroup = document.createElement('div'); setupGroup.className = 'control-group';
+          const setupLabel = document.createElement('label'); setupLabel.setAttribute('for', 'setup-' + uid); setupLabel.textContent = 'Setup';
+          const setupSelect = document.createElement('select'); setupSelect.id = 'setup-' + uid;
+          setupNames.forEach(name => {
+            const opt = document.createElement('option'); opt.value = name; opt.textContent = name;
+            if (name === currentSetup) opt.selected = true;
+            setupSelect.appendChild(opt);
+          });
+          if (setupNames.length >= 2) {
+            const avgOpt = document.createElement('option'); avgOpt.value = AVG_SETUP_KEY; avgOpt.textContent = AVG_SETUP_KEY;
+            if (currentSetup === AVG_SETUP_KEY) avgOpt.selected = true;
+            setupSelect.appendChild(avgOpt);
+          }
+          setupSelect.addEventListener('change', () => { switchSetup(setupSelect.value); });
+          setupGroup.appendChild(setupLabel); setupGroup.appendChild(setupSelect);
+          controls.appendChild(setupGroup);
+        }
+
+        const viewGroup = document.createElement('div'); viewGroup.className = 'control-group';
+        const viewLabel = document.createElement('label'); viewLabel.setAttribute('for', 'view-' + uid); viewLabel.textContent = 'View';
+        const viewSelect = document.createElement('select'); viewSelect.id = 'view-' + uid;
+        [['bar', 'Final Score'], ['line', 'Training Progression']].forEach(([val, text]) => {
+          const opt = document.createElement('option'); opt.value = val; opt.textContent = text;
+          if (val === currentView) opt.selected = true;
+          viewSelect.appendChild(opt);
+        });
+        viewSelect.addEventListener('change', () => { currentView = viewSelect.value; render(); });
+        viewGroup.appendChild(viewLabel); viewGroup.appendChild(viewSelect);
+        controls.appendChild(viewGroup);
+
+        const metricGroup = document.createElement('div'); metricGroup.className = 'control-group';
+        const metricLabel = document.createElement('label'); metricLabel.setAttribute('for', 'metric-' + uid); metricLabel.textContent = 'Metric';
+        const metricSelect = document.createElement('select'); metricSelect.id = 'metric-' + uid;
+        metricGroup.appendChild(metricLabel); metricGroup.appendChild(metricSelect);
+        controls.appendChild(metricGroup);
+
+        container.appendChild(controls);
+
+        const legend = document.createElement('div'); legend.className = 'legend';
+        legend.innerHTML = '<div class="legend-title">Legend</div><div class="items"></div>';
+        container.appendChild(legend);
+      }
+
+      function populateMetricSelect() {
+        const sel = container.querySelector('#metric-' + uid);
+        if (!sel) return;
+        sel.innerHTML = '';
+        const aggGroup = document.createElement('optgroup'); aggGroup.label = 'Aggregate Scores';
+        const indGroup = document.createElement('optgroup'); indGroup.label = 'Individual Benchmarks';
+        metricKeys.forEach(key => {
+          const opt = document.createElement('option'); opt.value = key; opt.textContent = metricName(key);
+          if (key === currentMetric) opt.selected = true;
+          if (key.startsWith('agg_score')) aggGroup.appendChild(opt); else indGroup.appendChild(opt);
+        });
+        if (aggGroup.children.length) sel.appendChild(aggGroup);
+        if (indGroup.children.length) sel.appendChild(indGroup);
+        sel.addEventListener('change', () => { currentMetric = sel.value; render(); });
+      }
+
+      function buildLegend() {
+        const items = container.querySelector('.legend .items');
+        if (!items) return;
+        items.innerHTML = '';
+        const grouped = d3.group(allData, d => d[RUN_COL]);
+        const sorted = Array.from(grouped.entries())
+          .map(([raw, rows]) => {
+            const maxStep = d3.max(rows, r => +r[STEP_COL]);
+            const row = rows.find(r => +r[STEP_COL] === maxStep);
+            return { raw, score: row ? +row[defaultMetric] : 0 };
+          })
+          .sort((a, b) => b.score - a.score)
+          .map(d => d.raw);
+        sorted.filter(raw => !isBaseline(raw)).forEach(raw => {
+          const name = displayName(raw);
+          const el = document.createElement('span'); el.className = 'item'; el.setAttribute('data-name', name);
+          const sw = document.createElement('span'); sw.className = 'swatch';
+          const c = colorMap[raw] || '#999';
+          if (isShaded(raw)) {
+            sw.style.background = c;
+            sw.style.backgroundImage = 'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.4) 2px, rgba(255,255,255,0.4) 4px)';
+          } else {
+            sw.style.background = c;
+          }
+          const txt = document.createElement('span'); txt.textContent = name;
+          el.appendChild(sw); el.appendChild(txt); items.appendChild(el);
+          el.addEventListener('mouseenter', () => { highlight = name; updateHighlight(); });
+          el.addEventListener('mouseleave', () => { highlight = null; updateHighlight(); });
+        });
+      }
+
+      buildUI();
+
+      // ─── DATA LOADING ───
+      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 (_) {}
+        }
+        throw new Error('CSV not found');
+      };
+
+      let dataMountEl = container;
+      while (dataMountEl && !dataMountEl.getAttribute?.('data-datafiles')) { dataMountEl = dataMountEl.parentElement; }
+      let providedData = null;
+      try {
+        const attr = dataMountEl && dataMountEl.getAttribute ? dataMountEl.getAttribute('data-datafiles') : null;
+        if (attr && attr.trim()) providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
+      } catch (_) {}
+
+      const ensurePrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
+      const csvPaths = providedData
+        ? (Array.isArray(providedData) ? providedData.map(ensurePrefix) : [ensurePrefix(providedData)])
+        : ['../data/benchmark-results.csv'];
+
+      (async () => {
+        try {
+          const text = await fetchFirstAvailable(csvPaths);
+          const parsed = d3.csvParse(text);
+          parsedData = parsed;
+          if (SETUPS && setupNames.length >= 2) {
+            const avg = computeAverageData(parsed);
+            avgDatasets = avg.datasets;
+            parsedData = parsed.concat(avg.data);
+            parsedData.columns = parsed.columns;
+            if (currentSetup === AVG_SETUP_KEY) DATASETS = { ...avgDatasets };
+          }
+          filterData();
+          metricKeys = detectMetrics(allData.columns);
+          if (!metricKeys.includes(currentMetric)) currentMetric = metricKeys[0];
+          populateMetricSelect();
+          render();
+          buildLegend();
+          if (window.ResizeObserver) { new ResizeObserver(() => render()).observe(container); }
+          else { window.addEventListener('resize', () => render()); }
+        } catch (e) {
+          const pre = document.createElement('pre');
+          pre.textContent = 'Data load error: ' + (e && e.message ? e.message : e);
+          pre.style.color = 'var(--danger, #b00020)';
+          pre.style.fontSize = '12px';
+          container.appendChild(pre);
+        }
+      })();
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); }
+    else { ensureD3(bootstrap); }
+  })();
+</script>
+</body>
+</html>

app/presentation/se2026/charts/benchmark.html

@@ -0,0 +1,837 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Benchmark Comparison</title>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+  <style>
+    :root {
+      --text-color: rgba(255,255,255,0.88);
+      --muted-color: rgba(255,255,255,0.45);
+      --surface-bg: rgba(30,30,40,0.95);
+      --border-color: rgba(255,255,255,0.1);
+      --axis-color: rgba(255,255,255,0.15);
+      --tick-color: rgba(255,255,255,0.5);
+      --grid-color: rgba(255,255,255,0.06);
+      --primary-color: #7c6ff7;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; }
+  </style>
+</head>
+<body>
+<div class="d3-benchmark-comparison" data-config='{"datasets":{"mix-fw_edu_hq-table_smollm2_1.7b_hq":{"display":"FinePhrase","color":"#EBA937"},"dclm":{"display":"DCLM","baseline":true},"nemotron_hq_synth":{"display":"Nemotron-HQ-Synth","color":"#76b900","shaded":true},"rewire":{"display":"REWIRE","color":"#1877F2","shaded":true},"cosmopedia":"Cosmopedia","fw_edu_hq":"FW-Edu HQ","synth_query_reasoning_answer":"SYNTH","ultra-fineweb":"Ultra-FineWeb"}}' data-datafiles="../data/benchmark-results.csv"></div>
+<style>
+  .d3-benchmark-comparison { position: relative; }
+  .d3-benchmark-comparison .controls {
+    display: flex;
+    gap: 16px;
+    align-items: flex-end;
+    justify-content: center;
+    margin: 10px 0 0 0;
+  }
+  .d3-benchmark-comparison .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-benchmark-comparison .controls label {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-benchmark-comparison .controls select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 6px 28px 6px 10px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    font-size: 18px;
+    line-height: 1.2;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 1.59L6 6.17l4.59-4.58L12 3 6 9 0 3z' fill='%23999'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+  .d3-benchmark-comparison .controls select:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+  .d3-benchmark-comparison .legend {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    margin: 8px 0 0 0;
+    padding-bottom: 4px;
+  }
+  .d3-benchmark-comparison .legend .legend-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-benchmark-comparison .legend .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-benchmark-comparison .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 18px;
+    color: var(--text-color);
+    cursor: pointer;
+  }
+  .d3-benchmark-comparison .legend .item.ghost { opacity: .25; }
+  .d3-benchmark-comparison .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+  .d3-benchmark-comparison .bar.ghost { opacity: .25; }
+  .d3-benchmark-comparison .value-label.ghost { opacity: .25; }
+  .d3-benchmark-comparison .line-path { fill: none; stroke-width: 2; opacity: 0.85; }
+  .d3-benchmark-comparison .line-path.ghost { opacity: .15; }
+  .d3-benchmark-comparison .line-dot.ghost { opacity: .15; }
+  .d3-benchmark-comparison .baseline.ghost { opacity: .1; }
+  .d3-benchmark-comparison .axes path { display: none; }
+  .d3-benchmark-comparison .axes line { stroke: var(--axis-color); }
+  .d3-benchmark-comparison .axes text { fill: var(--tick-color); }
+  .d3-benchmark-comparison .grid line { stroke: var(--grid-color); }
+  .d3-benchmark-comparison .hover-line {
+    stroke: var(--text-color);
+    stroke-opacity: 0.25;
+    stroke-width: 1;
+    pointer-events: none;
+  }
+  .d3-benchmark-comparison .d3-tooltip {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 18px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    opacity: 0;
+    transition: opacity .12s ease;
+    text-align: left;
+    z-index: 10;
+  }
+  .d3-benchmark-comparison .d3-tooltip .tip-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+    margin-right: 6px;
+    vertical-align: middle;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let s = document.getElementById('d3-cdn-script');
+      if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-benchmark-comparison'))) {
+        const cs = Array.from(document.querySelectorAll('.d3-benchmark-comparison')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      container.style.position = container.style.position || 'relative';
+
+      // ─── READ CONFIG ───
+      let mountEl = container;
+      while (mountEl && !mountEl.getAttribute?.('data-config')) { mountEl = mountEl.parentElement; }
+      let cfg = {};
+      try {
+        const raw = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null;
+        if (raw && raw.trim()) cfg = raw.trim().startsWith('{') ? JSON.parse(raw) : {};
+      } catch (_) {}
+
+      // ─── NORMALIZE DATASETS CONFIG ───
+      // Accepts: { "key": "Name" } or { "key": { display, color, shaded, baseline } }
+      // Returns: { key: { display, color, shaded, baseline } }
+      function normalizeDatasets(raw) {
+        const out = {};
+        for (const [k, v] of Object.entries(raw || {})) {
+          out[k] = typeof v === 'string' ? { display: v } : { ...v };
+        }
+        return out;
+      }
+
+      // ─── SETUP SUPPORT ───
+      const SETUPS = cfg.setups || null;
+      const setupNames = SETUPS ? Object.keys(SETUPS) : [];
+      const AVG_SETUP_KEY = 'Average (all setups)';
+      const defaultSetupCfg = cfg.defaultSetup || (setupNames.length >= 2 ? 'average' : null);
+      let currentSetup = SETUPS ? (defaultSetupCfg === 'average' ? AVG_SETUP_KEY : (defaultSetupCfg && setupNames.includes(defaultSetupCfg) ? defaultSetupCfg : setupNames[0])) : null;
+      let DATASETS = SETUPS ? (currentSetup === AVG_SETUP_KEY ? {} : normalizeDatasets(SETUPS[currentSetup].datasets)) : normalizeDatasets(cfg.datasets);
+      let avgDatasets = {};
+      let parsedData = [];
+
+      const RUN_COL       = cfg.runColumn    || 'runname';
+      const STEP_COL      = cfg.stepColumn   || 'steps';
+      const TOKENS_PER_STEP = cfg.tokensPerStep || 2.1e6;
+      const defaultMetric = cfg.defaultMetric || 'agg_score_macro';
+      const defaultView   = cfg.defaultView   || 'bar';
+      const uid = Math.random().toString(36).slice(2, 8);
+
+      // ─── DATASET ACCESSORS ───
+      function displayName(raw) { return DATASETS[raw] ? DATASETS[raw].display : raw; }
+      function isBaseline(raw) { return !!(DATASETS[raw] && DATASETS[raw].baseline); }
+      function isShaded(raw) { return !!(DATASETS[raw] && DATASETS[raw].shaded); }
+      function pinnedColor(raw) { return DATASETS[raw] && DATASETS[raw].color; }
+      function stripePatternId(raw) { return 'stripe-' + uid + '-' + raw.replace(/[^a-zA-Z0-9]/g, '_'); }
+
+      const METRIC_NAMES = {
+        'agg_score_macro': 'Aggregate Score (Macro)',
+        'agg_score_micro': 'Aggregate Score (Micro)',
+        'agg_score_RC': 'Reading Comprehension',
+        'agg_score_GK': 'General Knowledge',
+        'agg_score_NLU': 'Natural Language Understanding',
+        'agg_score_MATH': 'Math',
+        'agg_score_TABLE': 'Table Understanding',
+        'agg_score_RES': 'Reasoning',
+        'lighteval|arc_cf:easy|3/prob_norm_token': 'ARC-Easy',
+        'lighteval|drop|3/prob_norm_token': 'DROP',
+        'lighteval|gsm8k|3/prob_norm_token': 'GSM8K',
+        'lighteval|hellaswag_cf|3/prob_norm_token': 'HellaSwag',
+        'lighteval|openbookqa_cf|3/prob_norm_token': 'OpenBookQA',
+        'lighteval|piqa_cf|3/prob_norm_token': 'PIQA',
+        'lighteval|squad_v2|3/prob_norm_token': 'SQuAD v2',
+        'lighteval|treb_qa|3/prob_norm_token': 'TriviaQA',
+        'lighteval|wikitablequestions|3/prob_norm_token': 'WikiTableQuestions',
+        'lighteval|winogrande_cf|3/prob_norm_token': 'Winogrande',
+        'lighteval|xcsqa_cf|3/prob_norm_token': 'XCSQA',
+        'lighteval|mmlu_redux_cf:_average|3/prob_norm_token': 'MMLU Redux'
+      };
+
+      // Tooltip
+      let tip = container.querySelector('.d3-tooltip'), tipInner;
+      if (!tip) {
+        tip = document.createElement('div'); tip.className = 'd3-tooltip';
+        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      // SVG
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+      const defs = svg.append('defs');
+
+      // State
+      let allData = [];
+      let metricKeys = [];
+      let currentMetric = defaultMetric;
+      let currentView = defaultView;
+      let colorMap = {};
+      let highlight = null;
+
+      // ─── HELPERS ───
+      function metricName(key) { return METRIC_NAMES[key] || key; }
+
+      function stepsToTokens(step) { return step * TOKENS_PER_STEP; }
+      function formatTokens(tokens) {
+        if (tokens >= 1e9) return d3.format('.2f')(tokens / 1e9) + 'B';
+        if (tokens >= 1e6) return d3.format('.1f')(tokens / 1e6) + 'M';
+        return d3.format(',')(tokens);
+      }
+      function formatStep(step) {
+        if (step >= 1000) return d3.format('.0f')(step / 1000) + 'K';
+        return String(step);
+      }
+      function stepLabelShort(step) { return `${formatTokens(stepsToTokens(step))} (${formatStep(step)})`; }
+      function stepLabelLong(step) { return `${formatTokens(stepsToTokens(step))} Tokens (${formatStep(step)} Steps)`; }
+
+      function getCategoricalColors(n) {
+        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch (_) {}
+        return (d3.schemeTableau10 || ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ac']).slice(0, n);
+      }
+
+      function initColors() {
+        if (Object.keys(colorMap).length) return;
+        const allRaw = Array.from(d3.group(allData, d => d[RUN_COL]).keys()).sort();
+        const unpinned = [];
+        allRaw.forEach(raw => {
+          const pc = pinnedColor(raw);
+          if (pc) { colorMap[raw] = pc; }
+          else { unpinned.push(raw); }
+        });
+        const palette = getCategoricalColors(unpinned.length);
+        unpinned.forEach((raw, i) => { colorMap[raw] = palette[i % palette.length]; });
+      }
+
+      // ─── SETUP HELPERS ───
+      function filterData() {
+        const knownNames = Object.keys(DATASETS);
+        allData = knownNames.length ? parsedData.filter(r => knownNames.includes(r[RUN_COL])) : parsedData;
+        allData.columns = parsedData.columns;
+      }
+
+      function computeAverageData(rawData) {
+        if (!SETUPS || setupNames.length < 2) return { data: [], datasets: {} };
+        const displayToRaws = {};
+        for (const sName of setupNames) {
+          const ds = normalizeDatasets(SETUPS[sName].datasets);
+          for (const [raw, opts] of Object.entries(ds)) {
+            if (!displayToRaws[opts.display]) displayToRaws[opts.display] = [];
+            displayToRaws[opts.display].push(raw);
+          }
+        }
+        const fullDisplay = Object.entries(displayToRaws)
+          .filter(([, raws]) => raws.length >= setupNames.length);
+        const byRunStep = {};
+        for (const row of rawData) byRunStep[row[RUN_COL] + '|' + row[STEP_COL]] = row;
+        const steps = Array.from(new Set(rawData.map(r => +r[STEP_COL]))).sort((a, b) => a - b);
+        const cols = rawData.columns || Object.keys(rawData[0] || {});
+        const result = [];
+        const dsMap = {};
+        for (const [display, raws] of fullDisplay) {
+          const avgRaw = '__avg__' + display.replace(/[^a-zA-Z0-9]/g, '_');
+          // Merge options from first setup that has this display name
+          const firstOpts = Object.values(normalizeDatasets(SETUPS[setupNames[0]].datasets)).find(o => o.display === display) || {};
+          dsMap[avgRaw] = { display, ...firstOpts };
+          for (const step of steps) {
+            const rows = raws.map(r => byRunStep[r + '|' + step]).filter(Boolean);
+            if (!rows.length) continue;
+            const avgRow = { [RUN_COL]: avgRaw, [STEP_COL]: String(step) };
+            for (const col of cols) {
+              if (col === RUN_COL || col === STEP_COL) continue;
+              const vals = rows.map(r => +r[col]).filter(v => !isNaN(v));
+              avgRow[col] = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : 0;
+            }
+            result.push(avgRow);
+          }
+        }
+        return { data: result, datasets: dsMap };
+      }
+
+      function switchSetup(name) {
+        currentSetup = name;
+        if (name === AVG_SETUP_KEY) {
+          DATASETS = { ...avgDatasets };
+        } else {
+          DATASETS = normalizeDatasets(SETUPS[name].datasets);
+        }
+        // Re-add baselines from any setup
+        for (const sName of setupNames) {
+          const ds = normalizeDatasets(SETUPS[sName].datasets);
+          for (const [raw, opts] of Object.entries(ds)) {
+            if (opts.baseline && !DATASETS[raw] && parsedData.some(r => r[RUN_COL] === raw)) {
+              DATASETS[raw] = { ...opts };
+            }
+          }
+        }
+        colorMap = {};
+        filterData();
+        initColors();
+        render();
+        buildLegend();
+      }
+
+      function showTip(html, x, y) {
+        tipInner.innerHTML = html;
+        const tipW = tip.offsetWidth || 180;
+        const cW = container.clientWidth || 800;
+        const px = (x + tipW + 20 > cW) ? x - tipW - 12 : x + 12;
+        tip.style.transform = `translate(${px}px, ${Math.max(0, y - 20)}px)`;
+        tip.style.opacity = '1';
+      }
+      function hideTip() {
+        tip.style.opacity = '0';
+        tip.style.transform = 'translate(-9999px, -9999px)';
+      }
+
+      function updateHighlight() {
+        gRoot.selectAll('rect.bar').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('text.value-label').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.line-path').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.line-dot').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-vline').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-vlabel').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-hline').classed('ghost', d => highlight && d.name !== highlight);
+        gRoot.selectAll('.baseline-hlabel').classed('ghost', d => highlight && d.name !== highlight);
+        container.querySelectorAll('.legend .item').forEach(el => {
+          el.classList.toggle('ghost', highlight && el.getAttribute('data-name') !== highlight);
+        });
+      }
+
+      // ─── AUTO-DETECT METRICS from CSV columns ───
+      function detectMetrics(columns) {
+        const skip = new Set([RUN_COL, STEP_COL, 'seed']);
+        const aggOrder = ['agg_score_macro', 'agg_score_micro', 'agg_score_RC', 'agg_score_GK', 'agg_score_NLU', 'agg_score_MATH', 'agg_score_TABLE', 'agg_score_RES'];
+        const agg = aggOrder.filter(k => columns.includes(k));
+        const ind = columns.filter(k => !skip.has(k) && !agg.includes(k) && !isNaN(+allData[0][k]));
+        return [...agg, ...ind];
+      }
+
+      // ─── BAR CHART ───
+      function renderBar() {
+        const width = container.clientWidth || 800;
+        const hasBaselines = allData.some(r => isBaseline(r[RUN_COL]));
+        const margin = { top: hasBaselines ? 20 : 12, right: 56, bottom: 32, left: 190 };
+
+        const grouped = d3.group(allData, d => d[RUN_COL]);
+        const finalData = [];
+        for (const [raw, rows] of grouped) {
+          const maxStep = d3.max(rows, r => +r[STEP_COL]);
+          const row = rows.find(r => +r[STEP_COL] === maxStep);
+          if (row) finalData.push({ name: displayName(raw), rawName: raw, value: +row[currentMetric] });
+        }
+        finalData.sort((a, b) => b.value - a.value);
+
+        const barData = finalData.filter(d => !isBaseline(d.rawName));
+        const baselineData = finalData.filter(d => isBaseline(d.rawName));
+
+        const height = window.innerHeight || 480;
+        svg.attr('width', width).attr('height', height);
+        const barHeight = Math.min(28, (height - margin.top - margin.bottom) / barData.length * 0.75);
+        const barGap = barHeight * 0.3;
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+
+        const x = d3.scaleLinear().domain([0, d3.max(finalData, d => d.value) * 1.05]).range([0, innerWidth]);
+        const y = d3.scaleBand().domain(barData.map(d => d.name)).range([0, innerHeight]).padding(0.2);
+
+        // Grid
+        gRoot.selectAll('.grid').data([0]).join('g').attr('class', 'grid').call(g => {
+          g.selectAll('line').data(x.ticks(5)).join('line')
+            .attr('x1', d => x(d)).attr('x2', d => x(d)).attr('y1', 0).attr('y2', innerHeight);
+        });
+
+        // X axis
+        gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axes axis-x')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(x).ticks(5).tickFormat(d3.format('.3f')).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Y axis
+        gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axes axis-y')
+          .call(d3.axisLeft(y).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--text-color)').style('font-size', '18px').style('font-weight', '600');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Stripe patterns for shaded bars
+        barData.forEach(d => {
+          if (!isShaded(d.rawName)) return;
+          const c = colorMap[d.rawName] || '#999';
+          const pat = defs.append('pattern').attr('id', stripePatternId(d.rawName))
+            .attr('width', 6).attr('height', 6).attr('patternUnits', 'userSpaceOnUse').attr('patternTransform', 'rotate(45)');
+          pat.append('rect').attr('width', 6).attr('height', 6).attr('fill', c).attr('opacity', 0.35);
+          pat.append('line').attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', 6).attr('stroke', c).attr('stroke-width', 2.5);
+        });
+
+        function barFill(d) {
+          if (isShaded(d.rawName)) return `url(#${stripePatternId(d.rawName)})`;
+          return colorMap[d.rawName] || 'var(--primary-color)';
+        }
+
+        // Bars
+        const barTip = (ev, d) => {
+          const [mx, my] = d3.pointer(ev, container);
+          showTip(`<strong>${d.name}</strong><br/>${metricName(currentMetric)}: <strong>${d.value.toFixed(3)}</strong>`, mx, my);
+        };
+        gRoot.selectAll('rect.bar').data(barData, d => d.name).join(
+          enter => enter.append('rect').attr('class', 'bar')
+            .attr('x', 0).attr('y', d => y(d.name)).attr('height', y.bandwidth()).attr('rx', 3)
+            .attr('fill', d => barFill(d))
+            .attr('width', 0)
+            .on('mouseenter', (ev, d) => { highlight = d.name; updateHighlight(); })
+            .on('mousemove', barTip)
+            .on('mouseleave', () => { hideTip(); highlight = null; updateHighlight(); })
+            .transition().duration(300).attr('width', d => Math.max(0, x(d.value))),
+          update => update
+            .on('mouseenter', (ev, d) => { highlight = d.name; updateHighlight(); })
+            .on('mousemove', barTip)
+            .on('mouseleave', () => { hideTip(); highlight = null; updateHighlight(); })
+            .transition().duration(300)
+            .attr('y', d => y(d.name)).attr('height', y.bandwidth())
+            .attr('width', d => Math.max(0, x(d.value)))
+            .attr('fill', d => barFill(d)),
+          exit => exit.transition().duration(200).attr('width', 0).remove()
+        );
+
+        // Value labels
+        gRoot.selectAll('text.value-label').data(barData, d => d.name).join(
+          enter => enter.append('text').attr('class', 'value-label')
+            .attr('x', d => x(d.value) + 5).attr('y', d => y(d.name) + y.bandwidth() / 2)
+            .attr('dy', '0.35em').attr('fill', 'var(--text-color)').attr('font-size', 18)
+            .text(d => d.value.toFixed(3)),
+          update => update.transition().duration(300)
+            .attr('x', d => x(d.value) + 5).attr('y', d => y(d.name) + y.bandwidth() / 2)
+            .text(d => d.value.toFixed(3)),
+          exit => exit.remove()
+        );
+
+        // Baseline vertical reference lines
+        gRoot.selectAll('.baseline-vline').data(baselineData, d => d.name).join(
+          enter => enter.append('line').attr('class', 'baseline-vline baseline')
+            .attr('x1', d => x(d.value)).attr('x2', d => x(d.value))
+            .attr('y1', 0).attr('y2', innerHeight)
+            .attr('stroke', d => colorMap[d.rawName] || '#999')
+            .attr('stroke-width', 2).attr('stroke-dasharray', '6,4').attr('opacity', 0.7),
+          update => update.transition().duration(300)
+            .attr('x1', d => x(d.value)).attr('x2', d => x(d.value))
+            .attr('y1', 0).attr('y2', innerHeight)
+            .attr('stroke', d => colorMap[d.rawName] || '#999'),
+          exit => exit.remove()
+        );
+        gRoot.selectAll('.baseline-vlabel').data(baselineData, d => d.name).join(
+          enter => enter.append('text').attr('class', 'baseline-vlabel baseline')
+            .attr('x', d => x(d.value)).attr('y', -4)
+            .attr('text-anchor', 'middle').attr('fill', d => colorMap[d.rawName] || '#999')
+            .attr('font-size', 18).attr('font-weight', 600)
+            .text(d => `${d.name} (${d.value.toFixed(3)})`),
+          update => update.transition().duration(300)
+            .attr('x', d => x(d.value))
+            .text(d => `${d.name} (${d.value.toFixed(3)})`),
+          exit => exit.remove()
+        );
+      }
+
+      // ─── LINE CHART ───
+      function renderLine() {
+        const width = container.clientWidth || 800;
+        const hasBaselines = allData.some(r => isBaseline(r[RUN_COL]));
+        const margin = { top: 16, right: 50, bottom: 48, left: 60 };
+        const height = window.innerHeight || 480;
+        svg.attr('width', width).attr('height', height);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+
+        // Build series
+        const grouped = d3.group(allData, d => d[RUN_COL]);
+        const series = [];
+        const baselineSeries = [];
+        for (const [raw, rows] of grouped) {
+          const pts = rows.map(r => ({ step: +r[STEP_COL], value: +r[currentMetric] })).sort((a, b) => a.step - b.step);
+          const entry = { name: displayName(raw), rawName: raw, values: pts };
+          if (isBaseline(raw)) {
+            entry.finalValue = pts[pts.length - 1].value;
+            baselineSeries.push(entry);
+          } else {
+            series.push(entry);
+          }
+        }
+
+        const allSteps = Array.from(new Set(allData.filter(r => !isBaseline(r[RUN_COL])).map(r => +r[STEP_COL]))).sort((a, b) => a - b);
+        const allValues = [...series, ...baselineSeries].flatMap(s => s.finalValue != null ? [s.finalValue] : s.values.map(v => v.value));
+
+        const x = d3.scaleLinear().domain(d3.extent(allSteps)).range([0, innerWidth]);
+        const yMin = d3.min(allValues), yMax = d3.max(allValues), yPad = (yMax - yMin) * 0.08;
+        const y = d3.scaleLinear().domain([yMin - yPad, yMax + yPad]).range([innerHeight, 0]).nice();
+
+        // Grid
+        gRoot.selectAll('.grid').data([0]).join('g').attr('class', 'grid').call(g => {
+          g.selectAll('line').data(y.ticks(6)).join('line')
+            .attr('x1', 0).attr('x2', innerWidth).attr('y1', d => y(d)).attr('y2', d => y(d));
+        });
+
+        // X axis
+        gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axes axis-x')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(d3.axisBottom(x).ticks(6).tickFormat(d => stepLabelShort(d)).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Y axis
+        gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axes axis-y')
+          .call(d3.axisLeft(y).ticks(6).tickFormat(d3.format('.3f')).tickSizeOuter(0))
+          .call(g => {
+            g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+            g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+          });
+
+        // Axis labels
+        gRoot.selectAll('.x-label').data([0]).join('text').attr('class', 'x-label')
+          .attr('x', innerWidth / 2).attr('y', innerHeight + 38)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', 18)
+          .text('Tokens (Steps)');
+
+        gRoot.selectAll('.y-label').data([0]).join('text').attr('class', 'y-label')
+          .attr('transform', 'rotate(-90)').attr('x', -innerHeight / 2).attr('y', -44)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)').attr('font-size', 18)
+          .text(metricName(currentMetric));
+
+        // Baseline horizontal reference lines
+        gRoot.selectAll('.baseline-hline').data(baselineSeries, d => d.name).join(
+          enter => enter.append('line').attr('class', 'baseline-hline baseline')
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => y(d.finalValue)).attr('y2', d => y(d.finalValue))
+            .attr('stroke', d => colorMap[d.rawName] || '#999')
+            .attr('stroke-width', 2).attr('stroke-dasharray', '6,4').attr('opacity', 0.7),
+          update => update.transition().duration(300)
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => y(d.finalValue)).attr('y2', d => y(d.finalValue))
+            .attr('stroke', d => colorMap[d.rawName] || '#999'),
+          exit => exit.remove()
+        );
+        gRoot.selectAll('.baseline-hlabel').data(baselineSeries, d => d.name).join(
+          enter => enter.append('text').attr('class', 'baseline-hlabel baseline')
+            .attr('x', 4).attr('y', d => y(d.finalValue) - 6)
+            .attr('text-anchor', 'start')
+            .attr('fill', d => colorMap[d.rawName] || '#999')
+            .attr('font-size', 18).attr('font-weight', 600)
+            .text(d => `${d.name} (${d.finalValue.toFixed(3)})`),
+          update => update.transition().duration(300)
+            .attr('x', 4).attr('y', d => y(d.finalValue) - 6)
+            .text(d => `${d.name} (${d.finalValue.toFixed(3)})`),
+          exit => exit.remove()
+        );
+
+        // Lines (non-baseline)
+        const line = d3.line().x(d => x(d.step)).y(d => y(d.value)).curve(d3.curveMonotoneX);
+        gRoot.selectAll('.line-path').data(series, d => d.name).join(
+          enter => enter.append('path').attr('class', 'line-path')
+            .attr('stroke', d => colorMap[d.rawName] || 'var(--primary-color)')
+            .attr('d', d => line(d.values)),
+          update => update.transition().duration(300)
+            .attr('stroke', d => colorMap[d.rawName] || 'var(--primary-color)')
+            .attr('d', d => line(d.values)),
+          exit => exit.remove()
+        );
+
+        // Dots (non-baseline)
+        const dotData = series.flatMap(s => s.values.map(v => ({ name: s.name, rawName: s.rawName, step: v.step, value: v.value })));
+        gRoot.selectAll('.line-dot').data(dotData, d => d.name + '-' + d.step).join(
+          enter => enter.append('circle').attr('class', 'line-dot')
+            .attr('cx', d => x(d.step)).attr('cy', d => y(d.value)).attr('r', 3)
+            .attr('fill', d => colorMap[d.rawName] || 'var(--primary-color)')
+            .attr('stroke', 'var(--surface-bg)').attr('stroke-width', 1),
+          update => update.transition().duration(300)
+            .attr('cx', d => x(d.step)).attr('cy', d => y(d.value))
+            .attr('fill', d => colorMap[d.rawName] || 'var(--primary-color)'),
+          exit => exit.remove()
+        );
+
+        // Hover overlay
+        gRoot.selectAll('.hover-line').data([0]).join('line').attr('class', 'hover-line')
+          .attr('y1', 0).attr('y2', innerHeight).style('display', 'none');
+
+        gRoot.selectAll('.hover-overlay').data([0]).join('rect').attr('class', 'hover-overlay')
+          .attr('width', innerWidth).attr('height', innerHeight)
+          .attr('fill', 'none').attr('pointer-events', 'all')
+          .on('mousemove', (ev) => {
+            const [mx] = d3.pointer(ev, gRoot.node());
+            const nearest = allSteps.reduce((best, s) => Math.abs(s - x.invert(mx)) < Math.abs(best - x.invert(mx)) ? s : best, allSteps[0]);
+            gRoot.select('.hover-line').attr('x1', x(nearest)).attr('x2', x(nearest)).style('display', null);
+
+            const entries = series.map(s => {
+              const pt = s.values.find(v => v.step === nearest);
+              return pt ? { name: s.name, rawName: s.rawName, value: pt.value } : null;
+            }).filter(Boolean);
+            baselineSeries.forEach(s => {
+              entries.push({ name: s.name, rawName: s.rawName, value: s.finalValue });
+            });
+            entries.sort((a, b) => b.value - a.value);
+
+            let html = `<div style="font-weight:700;margin-bottom:4px;">${stepLabelLong(nearest)}</div>`;
+            entries.forEach(e => {
+              html += `<div><span class="tip-dot" style="background:${colorMap[e.rawName]}"></span>${e.name}: <strong>${e.value.toFixed(3)}</strong></div>`;
+            });
+            const [cx, cy] = d3.pointer(ev, container);
+            showTip(html, cx, cy);
+          })
+          .on('mouseleave', () => {
+            gRoot.select('.hover-line').style('display', 'none');
+            hideTip();
+          });
+      }
+
+      // ─── RENDER ───
+      function render() {
+        if (!allData.length) return;
+        initColors();
+        gRoot.selectAll('*').remove();
+        defs.selectAll('*').remove();
+        if (currentView === 'bar') renderBar(); else renderLine();
+      }
+
+      // ─── UI ───
+      function buildUI() {
+        const controls = document.createElement('div'); controls.className = 'controls';
+
+        if (SETUPS && setupNames.length > 0) {
+          const setupGroup = document.createElement('div'); setupGroup.className = 'control-group';
+          const setupLabel = document.createElement('label'); setupLabel.setAttribute('for', 'setup-' + uid); setupLabel.textContent = 'Setup';
+          const setupSelect = document.createElement('select'); setupSelect.id = 'setup-' + uid;
+          setupNames.forEach(name => {
+            const opt = document.createElement('option'); opt.value = name; opt.textContent = name;
+            if (name === currentSetup) opt.selected = true;
+            setupSelect.appendChild(opt);
+          });
+          if (setupNames.length >= 2) {
+            const avgOpt = document.createElement('option'); avgOpt.value = AVG_SETUP_KEY; avgOpt.textContent = AVG_SETUP_KEY;
+            if (currentSetup === AVG_SETUP_KEY) avgOpt.selected = true;
+            setupSelect.appendChild(avgOpt);
+          }
+          setupSelect.addEventListener('change', () => { switchSetup(setupSelect.value); });
+          setupGroup.appendChild(setupLabel); setupGroup.appendChild(setupSelect);
+          controls.appendChild(setupGroup);
+        }
+
+        const viewGroup = document.createElement('div'); viewGroup.className = 'control-group';
+        const viewLabel = document.createElement('label'); viewLabel.setAttribute('for', 'view-' + uid); viewLabel.textContent = 'View';
+        const viewSelect = document.createElement('select'); viewSelect.id = 'view-' + uid;
+        [['bar', 'Final Score'], ['line', 'Training Progression']].forEach(([val, text]) => {
+          const opt = document.createElement('option'); opt.value = val; opt.textContent = text;
+          if (val === currentView) opt.selected = true;
+          viewSelect.appendChild(opt);
+        });
+        viewSelect.addEventListener('change', () => { currentView = viewSelect.value; render(); });
+        viewGroup.appendChild(viewLabel); viewGroup.appendChild(viewSelect);
+        controls.appendChild(viewGroup);
+
+        const metricGroup = document.createElement('div'); metricGroup.className = 'control-group';
+        const metricLabel = document.createElement('label'); metricLabel.setAttribute('for', 'metric-' + uid); metricLabel.textContent = 'Metric';
+        const metricSelect = document.createElement('select'); metricSelect.id = 'metric-' + uid;
+        metricGroup.appendChild(metricLabel); metricGroup.appendChild(metricSelect);
+        controls.appendChild(metricGroup);
+
+        container.appendChild(controls);
+
+        const legend = document.createElement('div'); legend.className = 'legend';
+        legend.innerHTML = '<div class="legend-title">Legend</div><div class="items"></div>';
+        container.appendChild(legend);
+      }
+
+      function populateMetricSelect() {
+        const sel = container.querySelector('#metric-' + uid);
+        if (!sel) return;
+        sel.innerHTML = '';
+        const aggGroup = document.createElement('optgroup'); aggGroup.label = 'Aggregate Scores';
+        const indGroup = document.createElement('optgroup'); indGroup.label = 'Individual Benchmarks';
+        metricKeys.forEach(key => {
+          const opt = document.createElement('option'); opt.value = key; opt.textContent = metricName(key);
+          if (key === currentMetric) opt.selected = true;
+          if (key.startsWith('agg_score')) aggGroup.appendChild(opt); else indGroup.appendChild(opt);
+        });
+        if (aggGroup.children.length) sel.appendChild(aggGroup);
+        if (indGroup.children.length) sel.appendChild(indGroup);
+        sel.addEventListener('change', () => { currentMetric = sel.value; render(); });
+      }
+
+      function buildLegend() {
+        const items = container.querySelector('.legend .items');
+        if (!items) return;
+        items.innerHTML = '';
+        const grouped = d3.group(allData, d => d[RUN_COL]);
+        const sorted = Array.from(grouped.entries())
+          .map(([raw, rows]) => {
+            const maxStep = d3.max(rows, r => +r[STEP_COL]);
+            const row = rows.find(r => +r[STEP_COL] === maxStep);
+            return { raw, score: row ? +row[defaultMetric] : 0 };
+          })
+          .sort((a, b) => b.score - a.score)
+          .map(d => d.raw);
+        sorted.filter(raw => !isBaseline(raw)).forEach(raw => {
+          const name = displayName(raw);
+          const el = document.createElement('span'); el.className = 'item'; el.setAttribute('data-name', name);
+          const sw = document.createElement('span'); sw.className = 'swatch';
+          const c = colorMap[raw] || '#999';
+          if (isShaded(raw)) {
+            sw.style.background = c;
+            sw.style.backgroundImage = 'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.4) 2px, rgba(255,255,255,0.4) 4px)';
+          } else {
+            sw.style.background = c;
+          }
+          const txt = document.createElement('span'); txt.textContent = name;
+          el.appendChild(sw); el.appendChild(txt); items.appendChild(el);
+          el.addEventListener('mouseenter', () => { highlight = name; updateHighlight(); });
+          el.addEventListener('mouseleave', () => { highlight = null; updateHighlight(); });
+        });
+      }
+
+      buildUI();
+
+      // ─── DATA LOADING ───
+      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 (_) {}
+        }
+        throw new Error('CSV not found');
+      };
+
+      let dataMountEl = container;
+      while (dataMountEl && !dataMountEl.getAttribute?.('data-datafiles')) { dataMountEl = dataMountEl.parentElement; }
+      let providedData = null;
+      try {
+        const attr = dataMountEl && dataMountEl.getAttribute ? dataMountEl.getAttribute('data-datafiles') : null;
+        if (attr && attr.trim()) providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
+      } catch (_) {}
+
+      const ensurePrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
+      const csvPaths = providedData
+        ? (Array.isArray(providedData) ? providedData.map(ensurePrefix) : [ensurePrefix(providedData)])
+        : ['../data/benchmark-results.csv'];
+
+      (async () => {
+        try {
+          const text = await fetchFirstAvailable(csvPaths);
+          const parsed = d3.csvParse(text);
+          parsedData = parsed;
+          if (SETUPS && setupNames.length >= 2) {
+            const avg = computeAverageData(parsed);
+            avgDatasets = avg.datasets;
+            parsedData = parsed.concat(avg.data);
+            parsedData.columns = parsed.columns;
+            if (currentSetup === AVG_SETUP_KEY) DATASETS = { ...avgDatasets };
+          }
+          filterData();
+          metricKeys = detectMetrics(allData.columns);
+          if (!metricKeys.includes(currentMetric)) currentMetric = metricKeys[0];
+          populateMetricSelect();
+          render();
+          buildLegend();
+          if (window.ResizeObserver) { new ResizeObserver(() => render()).observe(container); }
+          else { window.addEventListener('resize', () => render()); }
+        } catch (e) {
+          const pre = document.createElement('pre');
+          pre.textContent = 'Data load error: ' + (e && e.message ? e.message : e);
+          pre.style.color = 'var(--danger, #b00020)';
+          pre.style.fontSize = '12px';
+          container.appendChild(pre);
+        }
+      })();
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); }
+    else { ensureD3(bootstrap); }
+  })();
+</script>
+</body>
+</html>

app/presentation/se2026/charts/cost-efficiency.html

@@ -0,0 +1,480 @@
+<!DOCTYPE html>
+<html data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Cost Efficiency Chart</title>
+  <style>
+    :root {
+      --text-color: rgba(255,255,255,0.88);
+      --muted-color: rgba(255,255,255,0.45);
+      --surface-bg: rgba(30,30,40,0.95);
+      --border-color: rgba(255,255,255,0.1);
+      --axis-color: rgba(255,255,255,0.15);
+      --tick-color: rgba(255,255,255,0.5);
+      --grid-color: rgba(255,255,255,0.06);
+      --primary-color: #7c6ff7;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+</head>
+<body>
+<div class="d3-cost-efficiency" data-datafiles="../data/rephrasing_metadata.json" style="width:100%;margin:10px 0;min-height:400px;"></div>
+<style>
+  .d3-cost-efficiency { font-family: system-ui, -apple-system, sans-serif; position: relative; }
+  .d3-cost-efficiency .d3-tooltip {
+    position: absolute; top: 0; left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 10px 14px; border-radius: 10px;
+    font-size: 18px; line-height: 1.4;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg); color: var(--text-color);
+    box-shadow: 0 6px 24px rgba(0,0,0,.22);
+    opacity: 0; transition: opacity .12s ease;
+    z-index: 20; max-width: 340px;
+  }
+  .d3-cost-efficiency .controls {
+    display: flex; gap: 16px; align-items: center; justify-content: flex-start; flex-wrap: wrap;
+    margin-top: 4px;
+  }
+  .d3-cost-efficiency .control-group {
+    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
+  }
+  .d3-cost-efficiency .controls label {
+    font-size: 18px; font-weight: 700; color: var(--text-color);
+  }
+  .d3-cost-efficiency .controls select {
+    font-size: 18px; padding: 6px 28px 6px 10px; border: 1px solid var(--border-color);
+    border-radius: 8px; background: var(--surface-bg); color: var(--text-color);
+    appearance: none; cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 8px center;
+  }
+  .d3-cost-efficiency .legend {
+    display: flex; align-items: center; gap: 10px; margin-top: 0; margin-left: auto;
+  }
+  .d3-cost-efficiency .legend-title { font-size: 18px; font-weight: 700; color: var(--text-color); }
+  .d3-cost-efficiency .legend .items { display: flex; flex-wrap: wrap; gap: 6px 14px; }
+  .d3-cost-efficiency .legend .item {
+    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
+    font-size: 18px; color: var(--text-color); cursor: pointer;
+  }
+  .d3-cost-efficiency .legend .swatch {
+    width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-color);
+  }
+</style>
+<script>
+(() => {
+  const bootstrap = () => {
+    const container = document.querySelector('.d3-cost-efficiency');
+    if (!container) return;
+    if (container.dataset.mounted === 'true') return;
+    container.dataset.mounted = 'true';
+
+    let mountEl = container;
+    while (mountEl && !mountEl.getAttribute?.('data-datafiles')) mountEl = mountEl.parentElement;
+    const dataAttr = mountEl?.getAttribute?.('data-datafiles');
+    const dataPaths = dataAttr
+      ? [dataAttr.includes('/') ? dataAttr : `../data/${dataAttr}`]
+      : ['../data/rephrasing_metadata.json', './assets/data/rephrasing_metadata.json'];
+
+    const fetchFirst = async (paths, parse) => {
+      for (const p of paths) {
+        try { const r = await fetch(p, { cache: 'no-cache' }); if (r.ok) return parse ? parse(await r.text()) : r.json(); } catch(_) {}
+      }
+      throw new Error('Data not found');
+    };
+
+    const csvPaths = ['../data/benchmark-results.csv', './assets/data/benchmark-results.csv'];
+
+    Promise.all([
+      fetchFirst(dataPaths),
+      fetchFirst(csvPaths, d3.csvParse)
+    ]).then(([data, csvRows]) => buildChart(data, csvRows)).catch(err => {
+      container.innerHTML = `<pre style="color:red;padding:12px;">Error loading data: ${err.message}</pre>`;
+    });
+
+    function buildChart(rawData, csvRows) {
+      const SOURCE_MAP = {
+        'fineweb-edu-hq-20BT': 'FW-Edu HQ', 'fineweb-edu-lq-20BT': 'FW-Edu LQ',
+        'dclm-37BT': 'DCLM', 'cosmopedia-25BT': 'Cosmopedia'
+      };
+      const PROMPT_LABELS = {
+        'article': 'Article', 'commentary': 'Commentary', 'discussion': 'Discussion',
+        'faq': 'FAQ', 'math': 'Math', 'table': 'Table', 'tutorial': 'Tutorial',
+        'distill': 'Distill', 'diverse_qa_pairs': 'Diverse QA',
+        'extract_knowledge': 'Extract Knowledge', 'knowledge_list': 'Knowledge List',
+        'wikipedia_style_rephrasing': 'Wikipedia Style',
+        'guided_rewrite_improved': 'Guided Rewrite+', 'guided_rewrite_original': 'Guided Rewrite'
+      };
+      const CAT_MAP = { 'format': 'Format', 'nemotron': 'Nemotron', 'rewire': 'REWIRE' };
+      const getFamily = (m) => {
+        const ml = m.toLowerCase();
+        if (ml.includes('smollm')) return 'SmolLM2';
+        if (ml.includes('gemma')) return 'Gemma';
+        if (ml.includes('qwen')) return 'Qwen';
+        if (ml.includes('falcon')) return 'Falcon';
+        if (ml.includes('granite')) return 'Granite';
+        if (ml.includes('llama')) return 'Llama';
+        return 'Other';
+      };
+      const familyColors = {
+        'Gemma': '#5b9bd5', 'Qwen': '#e07b54', 'SmolLM2': '#e06b9e',
+        'Falcon': '#c9a046', 'Granite': '#9a8ec2', 'Llama': '#8bc474'
+      };
+      const familyOrder = ['Gemma', 'Qwen', 'SmolLM2', 'Falcon', 'Granite', 'Llama'];
+
+      const METRICS = [
+        { key: 'agg_score_macro', label: 'Aggregate Score (Macro)', group: 'Aggregate' },
+        { key: 'agg_score_micro', label: 'Aggregate Score (Micro)', group: 'Aggregate' },
+        { key: 'agg_score_RC', label: 'Reading Comprehension', group: 'Aggregate' },
+        { key: 'agg_score_GK', label: 'General Knowledge', group: 'Aggregate' },
+        { key: 'agg_score_NLU', label: 'Natural Language Understanding', group: 'Aggregate' },
+        { key: 'agg_score_MATH', label: 'Math', group: 'Aggregate' },
+        { key: 'agg_score_TABLE', label: 'Table Understanding', group: 'Aggregate' },
+        { key: 'agg_score_RES', label: 'Reasoning', group: 'Aggregate' },
+        { key: 'arc_cf:easy', label: 'ARC-Easy', group: 'Individual' },
+        { key: 'drop', label: 'DROP', group: 'Individual' },
+        { key: 'gsm8k', label: 'GSM8K', group: 'Individual' },
+        { key: 'hellaswag_cf', label: 'HellaSwag', group: 'Individual' },
+        { key: 'openbookqa_cf', label: 'OpenBookQA', group: 'Individual' },
+        { key: 'piqa_cf', label: 'PIQA', group: 'Individual' },
+        { key: 'squad_v2', label: 'SQuAD v2', group: 'Individual' },
+        { key: 'treb_qa', label: 'TriviaQA', group: 'Individual' },
+        { key: 'wikitablequestions', label: 'WikiTableQuestions', group: 'Individual' },
+        { key: 'winogrande_cf', label: 'Winogrande', group: 'Individual' },
+        { key: 'xcsqa_cf', label: 'XCSQA', group: 'Individual' },
+        { key: 'mmlu_redux_cf:_average', label: 'MMLU Redux', group: 'Individual' }
+      ];
+      const CSV_COL = (key) => {
+        if (key.startsWith('agg_score_')) return key;
+        return `lighteval|${key}|3/prob_norm_token`;
+      };
+
+      const experiments = rawData.map(d => {
+        const [cat, promptFile] = d.prompt.split('/');
+        const promptKey = promptFile.replace('.md', '');
+        return {
+          run: d.run,
+          cat: CAT_MAP[cat] || cat,
+          prompt: PROMPT_LABELS[promptKey] || promptKey,
+          model: d.model.split('/').pop(),
+          source: SOURCE_MAP[d.source_dataset] || d.source_dataset,
+          family: getFamily(d.model),
+          gpuSeconds: d.gpu_time_seconds,
+          tpsPerGpu: d.output_tps_per_gpu,
+          outputTokens: d.output_tokens,
+          numDocs: d.num_documents,
+          results: d.results
+        };
+      });
+
+      const fmtGpuTime = (sec) => {
+        const d = sec / 86400;
+        if (d >= 365) { const y = Math.floor(d / 365); const mo = Math.round((d % 365) / 30); return mo ? y + 'y ' + mo + 'mo' : y + 'y'; }
+        if (d >= 30) { const mo = Math.floor(d / 30); const w = Math.round((d % 30) / 7); return w ? mo + 'mo ' + w + 'w' : mo + 'mo'; }
+        if (d >= 7) { const w = Math.floor(d / 7); const dd = Math.round(d % 7); return dd ? w + 'w ' + dd + 'd' : w + 'w'; }
+        return Math.round(d) + 'd';
+      };
+
+      const pareto = (data, metricKey) => {
+        const sorted = [...data].sort((a, b) => a.gpuSeconds - b.gpuSeconds);
+        const frontier = [];
+        let bestScore = -Infinity;
+        for (const pt of sorted) {
+          const score = pt.results[metricKey];
+          if (score == null) continue;
+          if (score > bestScore) {
+            bestScore = score;
+            frontier.push(pt);
+          }
+        }
+        return frontier;
+      };
+
+      const BASELINE_RUNS = {
+        'dclm': { label: 'DCLM', synthetic: false },
+        'fw_edu_hq': { label: 'FW-Edu HQ', synthetic: false },
+        'fw_edu_lq': { label: 'FW-Edu LQ', synthetic: false },
+        'ultra-fineweb': { label: 'Ultra-FineWeb', synthetic: false },
+        'cosmopedia': { label: 'Cosmopedia', synthetic: true },
+        'nemotron_hq_synth': { label: 'Nemotron-HQ-Synth', synthetic: true },
+        'rewire': { label: 'REWIRE', synthetic: true },
+        'synth_query_reasoning_answer': { label: 'SYNTH', synthetic: true }
+      };
+      const BASELINE_COLOR = '#86a1a9';
+      const SYNTH_BASELINE_COLOR = '#b07cc8';
+      const metricKeys = METRICS.map(m => m.key);
+      const baselines = [];
+      const bestStep = {};
+      for (const row of csvRows) {
+        const run = row.runname;
+        if (!(run in BASELINE_RUNS)) continue;
+        const step = +row.steps;
+        if (!(run in bestStep) || step > bestStep[run].step) {
+          const results = {};
+          for (const k of metricKeys) results[k] = +row[CSV_COL(k)];
+          bestStep[run] = { step, results };
+        }
+      }
+      for (const [run, info] of Object.entries(BASELINE_RUNS)) {
+        if (run in bestStep) baselines.push({ run, label: info.label, synthetic: info.synthetic, results: bestStep[run].results });
+      }
+
+      let currentMetric = METRICS[0].key;
+
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gGrid = svg.append('g').attr('class', 'grid');
+      const gPareto = svg.append('g').attr('class', 'pareto');
+      const gDots = svg.append('g').attr('class', 'dots');
+      const gBaselines = svg.append('g').attr('class', 'baselines');
+      const gAxes = svg.append('g').attr('class', 'axes');
+
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div'); tip.className = 'd3-tooltip';
+        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner); container.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      const margin = { top: 12, right: 16, bottom: 56, left: 70 };
+
+      function render() {
+        const width = container.clientWidth || 800;
+        const height = Math.min((window.innerHeight || 420) - 120, Math.max(200, Math.round(width / 3.5)));
+        svg.attr('width', width).attr('height', height);
+        const iw = width - margin.left - margin.right;
+        const ih = height - margin.top - margin.bottom;
+
+        const metricLabel = METRICS.find(m => m.key === currentMetric)?.label || currentMetric;
+
+        const xScale = d3.scaleLog()
+          .domain([5 * 86400, d3.max(experiments, d => d.gpuSeconds) * 1.2])
+          .range([margin.left, width - margin.right]);
+
+        const yVals = experiments.map(d => d.results[currentMetric]).filter(v => v != null)
+          .concat(baselines.map(d => d.results[currentMetric]).filter(v => v != null));
+        const yPad = (d3.max(yVals) - d3.min(yVals)) * 0.08;
+        const yScale = d3.scaleLinear()
+          .domain([d3.min(yVals) - yPad, d3.max(yVals) + yPad])
+          .range([height - margin.bottom, margin.top]);
+
+        const yTicks = yScale.ticks(6);
+        gGrid.selectAll('line').data(yTicks).join('line')
+          .attr('x1', margin.left).attr('x2', width - margin.right)
+          .attr('y1', d => yScale(d)).attr('y2', d => yScale(d))
+          .attr('stroke', 'var(--grid-color)').attr('stroke-width', 0.5);
+
+        gAxes.selectAll('*').remove();
+        const tickDays = [7, 14, 30, 60, 120, 240, 480];
+        const [xMin, xMax] = xScale.domain();
+        const tickValues = tickDays.map(d => d * 86400).filter(v => v >= xMin && v <= xMax);
+        const xAxis = d3.axisBottom(xScale).tickValues(tickValues).tickFormat(fmtGpuTime);
+        gAxes.append('g')
+          .attr('transform', `translate(0,${height - margin.bottom})`)
+          .call(xAxis)
+          .call(g => g.select('.domain').attr('stroke', 'var(--axis-color)'))
+          .call(g => g.selectAll('.tick line').attr('stroke', 'var(--tick-color)'))
+          .call(g => g.selectAll('.tick text').attr('fill', 'var(--tick-color)').attr('font-size', '18px'));
+
+        const yAxis = d3.axisLeft(yScale).ticks(6).tickFormat(v => { const s = v.toFixed(3); return s.replace(/0$/, ''); });
+        gAxes.append('g')
+          .attr('transform', `translate(${margin.left},0)`)
+          .call(yAxis)
+          .call(g => g.select('.domain').attr('stroke', 'var(--axis-color)'))
+          .call(g => g.selectAll('.tick line').attr('stroke', 'var(--tick-color)'))
+          .call(g => g.selectAll('.tick text').attr('fill', 'var(--tick-color)').attr('font-size', '18px'));
+
+        gAxes.append('text')
+          .attr('x', margin.left + iw / 2).attr('y', height - 4)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)')
+          .attr('font-size', '18px').attr('font-weight', '600')
+          .text('GPU time (log scale)');
+
+        gAxes.append('text')
+          .attr('transform', `rotate(-90)`)
+          .attr('x', -(margin.top + ih / 2)).attr('y', 14)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--text-color)')
+          .attr('font-size', '18px').attr('font-weight', '600')
+          .text(metricLabel);
+
+        const frontierPts = pareto(experiments, currentMetric);
+        const lineGen = d3.line()
+          .x(d => xScale(d.gpuSeconds))
+          .y(d => yScale(d.results[currentMetric]));
+
+        const extendedFrontier = [...frontierPts];
+        if (frontierPts.length > 0) {
+          const last = frontierPts[frontierPts.length - 1];
+          extendedFrontier.push({ gpuSeconds: xScale.domain()[1], results: { [currentMetric]: last.results[currentMetric] } });
+        }
+
+        gPareto.selectAll('path').data([extendedFrontier]).join('path')
+          .attr('d', lineGen)
+          .attr('fill', 'none')
+          .attr('stroke', 'var(--primary-color)')
+          .attr('stroke-width', 2)
+          .attr('stroke-dasharray', '6,4')
+          .attr('opacity', 0.6);
+
+        const rBase = Math.max(5, Math.min(9, width * 0.008));
+
+        gDots.selectAll('circle').data(experiments, d => d.run).join('circle')
+          .attr('cx', d => xScale(d.gpuSeconds))
+          .attr('cy', d => yScale(d.results[currentMetric]))
+          .attr('r', rBase)
+          .attr('fill', d => familyColors[d.family] || '#999')
+          .attr('fill-opacity', 0.8)
+          .attr('stroke', d => familyColors[d.family] || '#999')
+          .attr('stroke-width', 1.5)
+          .attr('stroke-opacity', 0.3)
+          .attr('cursor', 'pointer')
+          .on('mouseenter', function(ev, d) {
+            d3.select(this).attr('r', rBase * 1.6).attr('fill-opacity', 1).attr('stroke-opacity', 0.8);
+            gDots.selectAll('circle').filter(c => c !== d)
+              .attr('fill-opacity', 0.2).attr('stroke-opacity', 0.1);
+            gBaselines.selectAll('circle').attr('fill-opacity', 0.12).attr('stroke-opacity', 0.2);
+            const score = d.results[currentMetric];
+            tipInner.innerHTML =
+              `<div style="font-weight:700;font-size:14px;margin-bottom:4px;">${d.prompt} (${d.cat})</div>` +
+              `<div style="font-size:12px;color:var(--muted-color);margin-bottom:6px;">` +
+              `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${familyColors[d.family]};margin-right:4px;vertical-align:middle;"></span>` +
+              `${d.model} · ${d.source}</div>` +
+              `<div style="display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:13px;">` +
+              `<span style="color:var(--muted-color);">GPU time</span><span>${fmtGpuTime(d.gpuSeconds)}</span>` +
+              `<span style="color:var(--muted-color);">TPS/GPU</span><span>${d.tpsPerGpu.toLocaleString()}</span>` +
+              `<span style="color:var(--muted-color);">Output tokens</span><span>${(d.outputTokens / 1e9).toFixed(1)}B</span>` +
+              `<span style="color:var(--muted-color);">Documents</span><span>${(d.numDocs / 1e6).toFixed(1)}M</span>` +
+              `<span style="color:var(--muted-color);">${metricLabel}</span><span style="font-weight:700;">${score != null ? score.toFixed(4) : 'N/A'}</span>` +
+              `</div>`;
+            tip.style.opacity = '1';
+          })
+          .on('mousemove', (ev) => {
+            const [mx, my] = d3.pointer(ev, container);
+            const bw = tip.offsetWidth || 280;
+            const bh = tip.offsetHeight || 160;
+            const ox = (mx + bw + 20 > width) ? -(bw + 12) : 14;
+            const oy = (my + bh + 20 > (height + 60)) ? -(bh + 12) : 14;
+            tip.style.transform = `translate(${Math.round(mx + ox)}px,${Math.round(my + oy)}px)`;
+          })
+          .on('mouseleave', function() {
+            gDots.selectAll('circle').attr('r', rBase).attr('fill-opacity', 0.8).attr('stroke-opacity', 0.3);
+            gBaselines.selectAll('circle').attr('r', rBase * 1.1).attr('fill-opacity', 0.35).attr('stroke-opacity', 0.6);
+            tip.style.opacity = '0';
+            tip.style.transform = 'translate(-9999px,-9999px)';
+          });
+
+        const bx = margin.left + rBase + 10;
+        const bColor = d => d.synthetic ? SYNTH_BASELINE_COLOR : BASELINE_COLOR;
+        gBaselines.selectAll('circle').data(baselines, d => d.run).join('circle')
+          .attr('cx', bx)
+          .attr('cy', d => yScale(d.results[currentMetric]))
+          .attr('r', rBase * 1.1)
+          .attr('fill', bColor)
+          .attr('fill-opacity', 0.35)
+          .attr('stroke', bColor)
+          .attr('stroke-width', 2)
+          .attr('stroke-opacity', 0.6)
+          .attr('cursor', 'pointer')
+          .on('mouseenter', function(ev, d) {
+            d3.select(this).attr('r', rBase * 1.8).attr('fill-opacity', 0.6).attr('stroke-opacity', 1);
+            gDots.selectAll('circle').attr('fill-opacity', 0.15).attr('stroke-opacity', 0.08);
+            const score = d.results[currentMetric];
+            const tag = d.synthetic ? 'synthetic baseline' : 'baseline';
+            tipInner.innerHTML =
+              `<div style="font-weight:700;font-size:14px;margin-bottom:4px;">${d.label} <span style="font-weight:400;font-size:12px;color:var(--muted-color);">(${tag})</span></div>` +
+              `<div style="display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:13px;">` +
+              `<span style="color:var(--muted-color);">GPU time</span><span>0 (no rephrasing)</span>` +
+              `<span style="color:var(--muted-color);">${metricLabel}</span><span style="font-weight:700;">${score != null ? score.toFixed(4) : 'N/A'}</span>` +
+              `</div>`;
+            tip.style.opacity = '1';
+          })
+          .on('mousemove', (ev) => {
+            const [mx, my] = d3.pointer(ev, container);
+            const bw = tip.offsetWidth || 280;
+            const bh = tip.offsetHeight || 100;
+            const ox = (mx + bw + 20 > width) ? -(bw + 12) : 14;
+            const oy = (my + bh + 20 > (height + 60)) ? -(bh + 12) : 14;
+            tip.style.transform = `translate(${Math.round(mx + ox)}px,${Math.round(my + oy)}px)`;
+          })
+          .on('mouseleave', function() {
+            gBaselines.selectAll('circle').attr('r', rBase * 1.1).attr('fill-opacity', 0.35).attr('stroke-opacity', 0.6);
+            gDots.selectAll('circle').attr('r', rBase).attr('fill-opacity', 0.8).attr('stroke-opacity', 0.3);
+            tip.style.opacity = '0';
+            tip.style.transform = 'translate(-9999px,-9999px)';
+          });
+      }
+
+      const controls = document.createElement('div'); controls.className = 'controls';
+      const cg = document.createElement('div'); cg.className = 'control-group';
+      const lbl = document.createElement('label'); lbl.textContent = 'Metric'; lbl.setAttribute('for', 'ce-metric-select');
+      const sel = document.createElement('select'); sel.id = 'ce-metric-select';
+      const groups = {};
+      METRICS.forEach(m => { (groups[m.group] = groups[m.group] || []).push(m); });
+      for (const [gName, gMetrics] of Object.entries(groups)) {
+        const og = document.createElement('optgroup'); og.label = gName;
+        gMetrics.forEach(m => { const o = document.createElement('option'); o.value = m.key; o.textContent = m.label; og.appendChild(o); });
+        sel.appendChild(og);
+      }
+      sel.value = currentMetric;
+      sel.addEventListener('change', () => { currentMetric = sel.value; render(); });
+      cg.appendChild(lbl); cg.appendChild(sel); controls.appendChild(cg);
+
+      const legend = document.createElement('div'); legend.className = 'legend';
+      const ltitle = document.createElement('div'); ltitle.className = 'legend-title'; ltitle.textContent = 'Legend';
+      const items = document.createElement('div'); items.className = 'items';
+      familyOrder.forEach(fam => {
+        const el = document.createElement('span'); el.className = 'item';
+        const sw = document.createElement('span'); sw.className = 'swatch'; sw.style.background = familyColors[fam];
+        const txt = document.createElement('span'); txt.textContent = fam;
+        el.appendChild(sw); el.appendChild(txt); items.appendChild(el);
+        el.addEventListener('mouseenter', () => {
+          gDots.selectAll('circle').attr('fill-opacity', d => d.family === fam ? 0.9 : 0.1)
+            .attr('stroke-opacity', d => d.family === fam ? 0.6 : 0.05);
+          gBaselines.selectAll('circle').attr('fill-opacity', 0.12).attr('stroke-opacity', 0.2);
+        });
+        el.addEventListener('mouseleave', () => {
+          gDots.selectAll('circle').attr('fill-opacity', 0.8).attr('stroke-opacity', 0.3);
+          gBaselines.selectAll('circle').attr('fill-opacity', 0.35).attr('stroke-opacity', 0.6);
+        });
+      });
+      legend.appendChild(ltitle); legend.appendChild(items); controls.appendChild(legend); container.appendChild(controls);
+
+      [[false, BASELINE_COLOR, 'Baselines'],
+       [true, SYNTH_BASELINE_COLOR, 'Synthetic baselines']].forEach(([isSynth, c, text]) => {
+        const el = document.createElement('span'); el.className = 'item';
+        el.innerHTML = `<svg width="14" height="14" style="vertical-align:middle;"><circle cx="7" cy="7" r="6" fill="${c}" fill-opacity="0.35" stroke="${c}" stroke-width="2" stroke-opacity="0.6"/></svg><span>${text}</span>`;
+        items.appendChild(el);
+        el.addEventListener('mouseenter', () => {
+          gBaselines.selectAll('circle')
+            .attr('fill-opacity', d => d.synthetic === isSynth ? 0.6 : 0.1)
+            .attr('stroke-opacity', d => d.synthetic === isSynth ? 1 : 0.15);
+          gDots.selectAll('circle').attr('fill-opacity', 0.15).attr('stroke-opacity', 0.08);
+        });
+        el.addEventListener('mouseleave', () => {
+          gBaselines.selectAll('circle').attr('fill-opacity', 0.35).attr('stroke-opacity', 0.6);
+          gDots.selectAll('circle').attr('fill-opacity', 0.8).attr('stroke-opacity', 0.3);
+        });
+      });
+
+      const paretoItem = document.createElement('span'); paretoItem.className = 'item';
+      paretoItem.innerHTML = `<svg width="20" height="14" style="vertical-align:middle;"><line x1="0" y1="7" x2="20" y2="7" stroke="var(--primary-color)" stroke-width="2" stroke-dasharray="4,3" opacity="0.6"/></svg><span>Pareto frontier</span>`;
+      items.appendChild(paretoItem);
+
+      render();
+      if (window.ResizeObserver) new ResizeObserver(() => render()).observe(container);
+      else window.addEventListener('resize', render);
+    }
+  };
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  else bootstrap();
+})();
+</script>
+</body>
+</html>

app/presentation/se2026/charts/experiment-flow.html

@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html data-theme="dark" lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Experiment Flow</title>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/d3-sankey@0.12.3/dist/d3-sankey.min.js"></script>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; background: transparent; overflow: visible; }
+    :root {
+      --text-color: rgba(255,255,255,0.88);
+      --muted-color: rgba(255,255,255,0.45);
+      --surface-bg: rgba(30,30,40,0.95);
+      --border-color: rgba(255,255,255,0.1);
+      --primary-color: #7c6ff7;
+    }
+    .d3-experiment-overview { position: relative; font-family: system-ui, -apple-system, sans-serif; }
+  </style>
+</head>
+<body>
+  <div class="d3-experiment-overview" data-datafiles="../data/rephrasing_metadata.json" style="width:100%;height:100%;min-height:300px;"></div>
+  <script>
+    (() => {
+        const ensureD3 = (cb) => {
+            if (window.d3 && typeof window.d3.select === 'function' && typeof window.d3.sankey === 'function') return cb();
+            const loadSankey = () => {
+                if (typeof window.d3.sankey === 'function') return cb();
+                let s2 = document.getElementById('d3-sankey-cdn');
+                if (!s2) {
+                    s2 = document.createElement('script');
+                    s2.id = 'd3-sankey-cdn';
+                    s2.src = 'https://cdn.jsdelivr.net/npm/d3-sankey@0.12.3/dist/d3-sankey.min.js';
+                    document.head.appendChild(s2);
+                }
+                s2.addEventListener('load', cb, { once: true });
+            };
+            let s = document.getElementById('d3-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'd3-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+                document.head.appendChild(s);
+            }
+            if (window.d3 && typeof window.d3.select === 'function') { loadSankey(); return; }
+            s.addEventListener('load', loadSankey, { once: true });
+        };
+
+        const bootstrap = () => {
+            const scriptEl = document.currentScript;
+            let container = scriptEl ? scriptEl.previousElementSibling : null;
+            if (!(container && container.classList && container.classList.contains('d3-experiment-overview'))) {
+                const cs = Array.from(document.querySelectorAll('.d3-experiment-overview'))
+                    .filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+                container = cs[cs.length - 1] || null;
+            }
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+
+            // Read data path from HtmlEmbed attribute
+            let mountEl = container;
+            while (mountEl && !mountEl.getAttribute?.('data-datafiles')) mountEl = mountEl.parentElement;
+            const dataAttr = mountEl?.getAttribute?.('data-datafiles');
+            const dataPaths = dataAttr
+                ? [dataAttr.includes('/') ? dataAttr : `/data/${dataAttr}`]
+                : ['../data/rephrasing_metadata.json'];
+
+            const fetchFirst = async (paths) => {
+                for (const p of paths) {
+                    try { const r = await fetch(p, { cache: 'no-cache' }); if (r.ok) return r.json(); } catch(_) {}
+                }
+                throw new Error('Data not found');
+            };
+
+            fetchFirst(dataPaths).then(data => buildChart(data)).catch(err => {
+                container.innerHTML = `<pre style="color:red;padding:12px;">Error loading data: ${err.message}</pre>`;
+            });
+
+            function buildChart(rawData) {
+                // Map source dataset strings to display names
+                const sourceMap = {
+                    'fineweb-edu-hq-20BT': 'FW-Edu HQ',
+                    'fineweb-edu-lq-20BT': 'FW-Edu LQ',
+                    'dclm-37BT': 'DCLM',
+                    'cosmopedia-25BT': 'Cosmopedia',
+                };
+
+                // Map prompt paths to display names and categories
+                const promptMap = {
+                    'format/tutorial.md': { name: 'Tutorial', cat: 'Format' },
+                    'format/faq.md': { name: 'FAQ', cat: 'Format' },
+                    'format/math.md': { name: 'Math', cat: 'Format' },
+                    'format/table.md': { name: 'Table', cat: 'Format' },
+                    'format/commentary.md': { name: 'Commentary', cat: 'Format' },
+                    'format/discussion.md': { name: 'Discussion', cat: 'Format' },
+                    'format/article.md': { name: 'Article', cat: 'Format' },
+                    'nemotron/diverse_qa_pairs.md': { name: 'Diverse QA', cat: 'Nemotron' },
+                    'nemotron/knowledge_list.md': { name: 'Knowledge List', cat: 'Nemotron' },
+                    'nemotron/wikipedia_style_rephrasing.md': { name: 'Wikipedia Style', cat: 'Nemotron' },
+                    'nemotron/extract_knowledge.md': { name: 'Extract Knowledge', cat: 'Nemotron' },
+                    'nemotron/distill.md': { name: 'Distill', cat: 'Nemotron' },
+                    'rewire/guided_rewrite_original.md': { name: 'Guided Rewrite', cat: 'REWIRE' },
+                    'rewire/guided_rewrite_improved.md': { name: 'Guided Rewrite+', cat: 'REWIRE' },
+                };
+
+                // Map model IDs to family names
+                const modelFamilyMap = (modelId) => {
+                    if (modelId.includes('gemma')) return 'Gemma';
+                    if (modelId.includes('Qwen') || modelId.includes('qwen')) return 'Qwen';
+                    if (modelId.includes('Falcon') || modelId.includes('falcon')) return 'Falcon';
+                    if (modelId.includes('granite') || modelId.includes('Granite')) return 'Granite';
+                    if (modelId.includes('Llama') || modelId.includes('llama')) return 'Llama';
+                    if (modelId.includes('SmolLM') || modelId.includes('smollm')) return 'SmolLM2';
+                    return modelId;
+                };
+
+                // Build link counts from data
+                const linkCounts = {};
+                const key = (a, b) => `${a}|||${b}`;
+
+                rawData.forEach(exp => {
+                    const src = sourceMap[exp.source_dataset];
+                    const promptInfo = promptMap[exp.prompt];
+                    const family = modelFamilyMap(exp.model);
+                    if (!src || !promptInfo) return;
+
+                    const spKey = key(src, promptInfo.name);
+                    linkCounts[spKey] = (linkCounts[spKey] || 0) + 1;
+
+                    const pmKey = key(promptInfo.name, family);
+                    linkCounts[pmKey] = (linkCounts[pmKey] || 0) + 1;
+                });
+
+                // Collect unique names in order
+                const sources = [...new Set(rawData.map(e => sourceMap[e.source_dataset]).filter(Boolean))];
+                const prompts = [...new Set(rawData.map(e => promptMap[e.prompt]?.name).filter(Boolean))];
+                const models = [...new Set(rawData.map(e => modelFamilyMap(e.model)).filter(Boolean))];
+
+                // Build node list
+                const nodes = [];
+                sources.forEach(name => nodes.push({ name, col: 'source' }));
+                prompts.forEach(name => {
+                    const info = Object.values(promptMap).find(p => p.name === name);
+                    nodes.push({ name, col: 'prompt', cat: info?.cat || 'Other' });
+                });
+                models.forEach(name => nodes.push({ name, col: 'model' }));
+
+                const ni = (name) => nodes.findIndex(n => n.name === name);
+
+                // Build links
+                const links = [];
+                Object.entries(linkCounts).forEach(([k, value]) => {
+                    const [from, to] = k.split('|||');
+                    const s = ni(from), t = ni(to);
+                    if (s >= 0 && t >= 0) links.push({ source: s, target: t, value });
+                });
+
+                // Colors
+                const sourceColors = { 'FW-Edu HQ': '#6B8DB5', 'FW-Edu LQ': '#B58B9B', 'DCLM': '#7B82C8', 'Cosmopedia': '#8BA878' };
+                const catColors = { 'Format': '#4EA5B7', 'Nemotron': '#76b900', 'REWIRE': '#1877F2' };
+                const familyColors = { 'Gemma': '#5b9bd5', 'Qwen': '#e07b54', 'SmolLM2': '#e06b9e', 'Falcon': '#c9a046', 'Granite': '#9a8ec2', 'Llama': '#8bc474' };
+
+                const nodeColor = (d) => {
+                    if (d.col === 'source') return sourceColors[d.name] || '#888';
+                    if (d.col === 'prompt') return catColors[d.cat] || '#888';
+                    if (d.col === 'model') return familyColors[d.name] || '#888';
+                    return '#888';
+                };
+
+                // SVG
+                const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+
+                const render = () => {
+                    const width = container.clientWidth || 800;
+                    const iframeH = window.innerHeight || 540;
+                    const height = Math.min(iframeH, Math.max(400, width * 9 / 16));
+                    svg.attr('width', width).attr('height', height);
+                    svg.selectAll('*').remove();
+
+                    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                    const textColor = isDark ? 'rgba(255,255,255,0.78)' : 'rgba(0,0,0,0.68)';
+                    const mutedText = isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.30)';
+                    const linkOpacity = isDark ? 0.20 : 0.35;
+                    const linkHoverOpacity = isDark ? 0.50 : 0.65;
+                    const fontSize = Math.max(9, Math.min(12, width / 80));
+
+                    const ml = width * 0.005, mr = width * 0.01;
+                    const mt = 28, mb = height * 0.01;
+
+                    const sankeyGen = d3.sankey()
+                        .nodeId(d => d.index)
+                        .nodeWidth(Math.max(8, width * 0.012))
+                        .nodePadding(Math.max(4, height * 0.014))
+                        .nodeSort(null)
+                        .extent([[ml, mt], [width - mr, height - mb]]);
+
+                    const graph = sankeyGen({
+                        nodes: nodes.map((d, i) => ({ ...d, index: i })),
+                        links: links.map(d => ({ ...d }))
+                    });
+
+                    // Column headers
+                    const modelNodes = graph.nodes.filter(n => n.col === 'model');
+                    const colLabels = [
+                        { text: 'Source Dataset', x: graph.nodes.filter(n => n.col === 'source')[0]?.x0 || ml, anchor: 'start' },
+                        { text: 'Prompt Strategy', x: graph.nodes.filter(n => n.col === 'prompt')[0]?.x1 || width * 0.35, anchor: 'end' },
+                        { text: 'Model Family', x: (modelNodes[0]?.x1 || width * 0.75), anchor: 'end' },
+                    ];
+                    svg.selectAll('text.col-header')
+                        .data(colLabels).join('text')
+                        .attr('class', 'col-header')
+                        .attr('x', d => d.x).attr('y', mt - 8)
+                        .attr('text-anchor', d => d.anchor)
+                        .attr('fill', mutedText)
+                        .attr('font-size', (fontSize * 1.4) + 'px')
+                        .attr('font-weight', '700')
+                        .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                        .attr('letter-spacing', '0.5px')
+                        .attr('text-transform', 'uppercase')
+                        .text(d => d.text);
+
+                    // Category brackets for prompts
+                    const catGroups = {};
+                    graph.nodes.filter(n => n.col === 'prompt').forEach(n => {
+                        if (!catGroups[n.cat]) catGroups[n.cat] = { min: Infinity, max: -Infinity };
+                        catGroups[n.cat].min = Math.min(catGroups[n.cat].min, n.y0);
+                        catGroups[n.cat].max = Math.max(catGroups[n.cat].max, n.y1);
+                    });
+                    const bracketX = (graph.nodes.find(n => n.col === 'prompt')?.x1 || 0) + 5;
+                    Object.entries(catGroups).forEach(([cat, { min: y0, max: y1 }]) => {
+                        const midY = (y0 + y1) / 2;
+                        svg.append('line')
+                            .attr('x1', bracketX).attr('x2', bracketX)
+                            .attr('y1', y0 + 2).attr('y2', y1 - 2)
+                            .attr('stroke', catColors[cat]).attr('stroke-width', 1.5)
+                            .attr('stroke-opacity', 0.35).attr('stroke-linecap', 'round');
+                        svg.append('text')
+                            .attr('x', bracketX + 4).attr('y', midY)
+                            .attr('dominant-baseline', 'central')
+                            .attr('fill', catColors[cat]).attr('fill-opacity', 0.45)
+                            .attr('font-size', (fontSize * 1.3) + 'px')
+                            .attr('font-weight', '600')
+                            .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                            .attr('letter-spacing', '0.3px')
+                            .text(cat);
+                    });
+
+                    // Links
+                    const gLinks = svg.append('g').attr('class', 'links');
+                    const linkPath = d3.sankeyLinkHorizontal();
+                    const linkEls = gLinks.selectAll('path')
+                        .data(graph.links).join('path')
+                        .attr('d', linkPath)
+                        .attr('fill', 'none')
+                        .attr('stroke', d => nodeColor(d.source))
+                        .attr('stroke-width', d => Math.max(1, d.width))
+                        .attr('stroke-opacity', linkOpacity)
+                        .style('mix-blend-mode', isDark ? 'screen' : 'multiply');
+
+                    // Nodes
+                    const gNodes = svg.append('g').attr('class', 'nodes');
+                    const nodeEls = gNodes.selectAll('rect')
+                        .data(graph.nodes).join('rect')
+                        .attr('x', d => d.x0).attr('y', d => d.y0)
+                        .attr('width', d => d.x1 - d.x0)
+                        .attr('height', d => Math.max(1, d.y1 - d.y0))
+                        .attr('fill', d => nodeColor(d))
+                        .attr('fill-opacity', 0.85).attr('rx', 2)
+                        .attr('stroke', d => nodeColor(d))
+                        .attr('stroke-width', 0.5).attr('stroke-opacity', 0.3);
+
+                    // Node labels (interactive, same hover as node rects)
+                    const gLabels = svg.append('g').attr('class', 'labels');
+                    graph.nodes.forEach(d => {
+                        const midY = (d.y0 + d.y1) / 2;
+                        const isSource = d.col === 'source';
+                        let labelX, anchor;
+                        if (isSource) { labelX = d.x1 + 5; anchor = 'start'; }
+                        else { labelX = d.x0 - 5; anchor = 'end'; }
+
+                        const totalIn = (d.targetLinks || []).reduce((s, l) => s + l.value, 0);
+                        const totalOut = (d.sourceLinks || []).reduce((s, l) => s + l.value, 0);
+                        const total = Math.max(totalIn, totalOut);
+
+                        gLabels.append('text')
+                            .datum(d)
+                            .attr('class', 'node-label')
+                            .attr('x', labelX).attr('y', midY - (total > 1 ? fontSize * 0.3 : 0))
+                            .attr('text-anchor', anchor).attr('dominant-baseline', 'central')
+                            .attr('fill', textColor)
+                            .attr('font-size', fontSize + 'px').attr('font-weight', '600')
+                            .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                            .style('cursor', 'pointer')
+                            .text(d.name);
+
+                        if (total > 1) {
+                            gLabels.append('text')
+                                .datum(d)
+                                .attr('class', 'node-label')
+                                .attr('x', labelX).attr('y', midY + fontSize * 0.55)
+                                .attr('text-anchor', anchor).attr('dominant-baseline', 'central')
+                                .attr('fill', mutedText)
+                                .attr('font-size', (fontSize * 0.8) + 'px')
+                                .attr('font-family', 'system-ui, -apple-system, sans-serif')
+                                .style('cursor', 'pointer')
+                                .text(total + ' exp.');
+                        }
+                    });
+
+                    // Tooltip
+                    container.style.position = container.style.position || 'relative';
+                    let tip = container.querySelector('.d3-tooltip');
+                    let tipInner;
+                    if (!tip) {
+                        tip = document.createElement('div');
+                        tip.className = 'd3-tooltip';
+                        Object.assign(tip.style, {
+                            position: 'absolute', top: '0px', left: '0px',
+                            transform: 'translate(-9999px, -9999px)',
+                            pointerEvents: 'none', padding: '8px 12px', borderRadius: '10px',
+                            fontSize: '12px', lineHeight: '1.4',
+                            border: '1px solid var(--border-color)',
+                            background: 'var(--surface-bg)', color: 'var(--text-color)',
+                            boxShadow: '0 6px 24px rgba(0,0,0,.25)',
+                            opacity: '0', transition: 'opacity .12s ease',
+                            backdropFilter: 'saturate(1.12) blur(8px)',
+                            zIndex: '20', maxWidth: '280px'
+                        });
+                        tipInner = document.createElement('div');
+                        tipInner.className = 'd3-tooltip__inner';
+                        tip.appendChild(tipInner);
+                        container.appendChild(tip);
+                    } else {
+                        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+                    }
+
+                    const positionTip = (ev) => {
+                        const [mx, my] = d3.pointer(ev, container);
+                        const bw = tip.offsetWidth || 220, bh = tip.offsetHeight || 60;
+                        const ox = (mx + bw + 20 > width) ? -(bw + 12) : 12;
+                        const oy = (my + bh + 20 > height) ? -(bh + 12) : 14;
+                        tip.style.transform = `translate(${Math.round(mx + ox)}px, ${Math.round(my + oy)}px)`;
+                    };
+                    const showTip = (ev, html) => { tipInner.innerHTML = html; tip.style.opacity = '1'; positionTip(ev); };
+                    const hideTip = () => { tip.style.opacity = '0'; tip.style.transform = 'translate(-9999px, -9999px)'; };
+
+                    // Interaction
+                    linkEls
+                        .on('mouseenter', function (ev, d) {
+                            linkEls.attr('stroke-opacity', l => l === d ? linkHoverOpacity * 1.5 : linkOpacity * 0.3);
+                            showTip(ev, `<b>${d.source.name}</b> \u2192 <b>${d.target.name}</b><br/><span style="color:var(--muted-color);">${d.value} experiment${d.value > 1 ? 's' : ''}</span>`);
+                        })
+                        .on('mousemove', positionTip)
+                        .on('mouseleave', function () { linkEls.attr('stroke-opacity', linkOpacity); hideTip(); });
+
+                    // Shared node hover handlers (used by both rects and labels)
+                    const onNodeEnter = function (ev, d) {
+                        const connected = new Set();
+                        (d.sourceLinks || []).forEach(l => connected.add(l.index));
+                        (d.targetLinks || []).forEach(l => connected.add(l.index));
+                        linkEls.attr('stroke-opacity', l => connected.has(l.index) ? linkHoverOpacity : linkOpacity * 0.15);
+                        const totalIn = (d.targetLinks || []).reduce((s, l) => s + l.value, 0);
+                        const totalOut = (d.sourceLinks || []).reduce((s, l) => s + l.value, 0);
+                        const total = Math.max(totalIn, totalOut);
+                        let info = `<b style="font-size:14px;">${d.name}</b>`;
+                        if (d.cat) info += ` <span style="color:${catColors[d.cat]};font-size:12px;">(${d.cat})</span>`;
+                        info += `<br/><span style="color:var(--muted-color);">${total} experiment${total > 1 ? 's' : ''}</span>`;
+                        showTip(ev, info);
+                    };
+                    const onNodeLeave = function () { linkEls.attr('stroke-opacity', linkOpacity); hideTip(); };
+
+                    nodeEls.style('cursor', 'pointer')
+                        .on('mouseenter', onNodeEnter).on('mousemove', positionTip).on('mouseleave', onNodeLeave);
+
+                    gLabels.selectAll('.node-label')
+                        .on('mouseenter', onNodeEnter).on('mousemove', positionTip).on('mouseleave', onNodeLeave);
+                };
+
+                if (window.ResizeObserver) new ResizeObserver(() => render()).observe(container);
+                else window.addEventListener('resize', render);
+                new MutationObserver(() => render()).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+                render();
+            }
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+        } else { ensureD3(bootstrap); }
+    })();
+  </script>
+</body>
+</html>

app/presentation/se2026/charts/pipeline.html

@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DataTrove Pipeline</title>
+  <style>
+    :root {
+      --text-color: rgba(255,255,255,0.88);
+      --muted-color: rgba(255,255,255,0.45);
+      --surface-bg: rgba(30,30,40,0.95);
+      --border-color: rgba(255,255,255,0.1);
+      --primary-color: #7c6ff7;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+</head>
+<body>
+<div class="d3-pipeline"></div>
+<style>
+  .d3-pipeline {
+    position: relative;
+    width: 100%;
+    margin: 0;
+    container-type: inline-size;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  }
+  .d3-pipeline .node-group { cursor: default; }
+  .d3-pipeline .node-card { transition: filter .15s ease; }
+  .d3-pipeline .node-group:hover .node-card { filter: brightness(1.05); }
+  .d3-pipeline .node-title { font-weight: 700; fill: var(--text-color); }
+  .d3-pipeline .node-subtitle { fill: var(--muted-color); }
+  .d3-pipeline .group-label { font-weight: 700; fill: var(--muted-color); letter-spacing: 0.02em; }
+  .d3-pipeline .edge-path { fill: none; stroke-linecap: round; }
+  .d3-pipeline .d3-tooltip {
+    position: absolute; top: 0; left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none; padding: 8px 12px; border-radius: 8px;
+    font-size: 12px; line-height: 1.4;
+    border: 1px solid var(--border-color); background: var(--surface-bg);
+    color: var(--text-color); box-shadow: 0 4px 20px rgba(0,0,0,.15);
+    opacity: 0; transition: opacity .12s ease; max-width: 260px; z-index: 100;
+  }
+  .d3-pipeline .d3-tooltip strong { display: block; margin-bottom: 2px; font-size: 13px; }
+</style>
+<script>
+(() => {
+  const ensureD3 = (cb) => {
+    if (window.d3 && typeof window.d3.select === 'function') return cb();
+    let s = document.getElementById('d3-cdn-script');
+    if (!s) { s = document.createElement('script'); s.id = 'd3-cdn-script'; s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js'; document.head.appendChild(s); }
+    const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+    s.addEventListener('load', onReady, { once: true });
+    if (window.d3) onReady();
+  };
+
+  const bootstrap = () => {
+    const scriptEl = document.currentScript;
+    let container = scriptEl ? scriptEl.previousElementSibling : null;
+    if (!(container && container.classList && container.classList.contains('d3-pipeline'))) {
+      const cs = Array.from(document.querySelectorAll('.d3-pipeline')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+      container = cs[cs.length - 1] || null;
+    }
+    if (!container) return;
+    if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+    container.style.position = container.style.position || 'relative';
+
+    const tip = document.createElement('div');
+    tip.className = 'd3-tooltip';
+    const tipInner = document.createElement('div');
+    tip.appendChild(tipInner);
+    container.appendChild(tip);
+
+    function showTip(ev, html) {
+      tipInner.innerHTML = html;
+      tip.style.opacity = '1';
+      const r = container.getBoundingClientRect();
+      const x = ev.clientX - r.left + 14, y = ev.clientY - r.top - 10;
+      tip.style.transform = `translate(${x}px, ${y}px)`;
+    }
+    function hideTip() { tip.style.opacity = '0'; tip.style.transform = 'translate(-9999px,-9999px)'; }
+
+    const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+    const defs = svg.append('defs');
+    defs.append('marker').attr('id', 'pl-arrow').attr('viewBox', '0 0 10 8')
+      .attr('refX', 9).attr('refY', 4).attr('markerWidth', 7).attr('markerHeight', 5.5)
+      .attr('orient', 'auto').append('path').attr('d', 'M0,1 L8,4 L0,7 Z');
+
+    const gRoot = svg.append('g');
+    const gGroups = gRoot.append('g');
+    const gEdges = gRoot.append('g');
+    const gNodes = gRoot.append('g');
+
+    const nodes = [
+      { id: 'hf_in',     label: 'HF Hub Dataset',  sub: '',                    group: 'input',     tip: 'Source dataset from the Hugging Face Hub. Any split or config.' },
+      { id: 'read',      label: 'Read',             sub: 'HuggingFaceDatasetReader', group: 'pipeline', tip: 'Reads documents from the Hub and streams them into the pipeline.' },
+      { id: 'transform', label: 'Transform',        sub: 'InferenceRunner',     group: 'pipeline',  tip: 'Orchestrates LLM inference: batching, retries, metric logging.' },
+      { id: 'write',     label: 'Write',            sub: 'ParquetWriter',       group: 'pipeline',  tip: 'Writes generated outputs as Parquet files with checkpointing.' },
+      { id: 'local',     label: 'Local',            sub: 'single node, multi-GPU', group: 'execution', tip: 'Run on a single machine with multiple workers for development.' },
+      { id: 'slurm',     label: 'Slurm Cluster',    sub: 'multi-node, auto-scaling', group: 'execution', tip: 'Distribute across nodes for large-scale production workloads.' },
+      { id: 'rollout',   label: 'Custom Rollout',   sub: 'async callable',      group: 'inference', tip: 'Your rollout function: orchestrates one or many generate() calls.' },
+      { id: 'vllm',      label: 'vLLM / SGLang',    sub: 'Server',              group: 'inference', tip: 'High-throughput inference engine with prefix caching and batching.' },
+      { id: 'hf_out',    label: 'HF Hub Dataset',   sub: '',                    group: 'output',    tip: 'Generated dataset uploaded continuously to the Hugging Face Hub.' },
+      { id: 'card',      label: 'Dataset Card',     sub: '+ Metrics',           group: 'output',    tip: 'Auto-generated dataset card with throughput stats.' },
+      { id: 'monitor',   label: 'Progress Monitor', sub: '',                    group: 'output',    tip: 'Live progress bar and ETA on the dataset card during inference.' },
+    ];
+
+    const groups = [
+      { id: 'input',     label: 'Input',            icon: '📥' },
+      { id: 'pipeline',  label: 'DataTrove Pipeline', icon: '⚙️' },
+      { id: 'execution', label: 'Execution Mode',   icon: '🖥️' },
+      { id: 'inference', label: 'Inference Engine',  icon: '🚀' },
+      { id: 'output',    label: 'Output',           icon: '📤' },
+    ];
+
+    const edges = [
+      { from: 'hf_in',      to: 'read' },
+      { from: 'read',       to: 'transform' },
+      { from: 'transform',  to: 'write' },
+      { from: 'transform',  to: 'rollout' },
+      { from: 'rollout',    to: 'vllm' },
+      { from: 'write',      to: 'hf_out' },
+      { from: 'write',      to: 'card' },
+      { from: 'write',      to: 'monitor' },
+    ];
+
+    function isDark() { return document.documentElement.getAttribute('data-theme') === 'dark'; }
+
+    function colors() {
+      const dk = isDark();
+      const primary = window.ColorPalettes ? window.ColorPalettes.getPrimary() : (dk ? '#7c6ff7' : '#6366f1');
+      return {
+        nodeBg:    dk ? 'rgba(255,255,255,0.055)' : 'rgba(255,255,255,0.92)',
+        nodeBd:    dk ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.09)',
+        groupBg:   dk ? 'rgba(255,255,255,0.025)' : 'rgba(0,0,0,0.022)',
+        groupBd:   dk ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.055)',
+        pipeBg:    dk ? 'rgba(99,102,241,0.055)' : 'rgba(99,102,241,0.04)',
+        pipeBd:    dk ? 'rgba(99,102,241,0.14)' : 'rgba(99,102,241,0.11)',
+        edge:      dk ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.18)',
+        arrow:     dk ? 'rgba(255,255,255,0.30)' : 'rgba(0,0,0,0.25)',
+        primary,
+      };
+    }
+
+    function computeLayout() {
+      const W = container.clientWidth || 820;
+      const s = Math.min(1, W / 820);
+
+      const nw = Math.round(200 * s), nh = Math.round(60 * s);
+      const nr = Math.round(10 * s);
+      const gp = Math.round(10 * s);
+      const gr = Math.round(10 * s);
+      const glh = Math.round(22 * s);
+      const ng = Math.round(7 * s);
+      const cg = Math.round(70 * s);
+      const rg = Math.round(14 * s);
+
+      const leftW = nw + gp * 2;
+      const centerW = nw + gp * 2;
+      const rightW = nw + gp * 2;
+      const totalW = leftW + centerW + rightW + cg * 2;
+      const offsetX = Math.max(0, (W - totalW) / 2);
+
+      const leftX = offsetX;
+      const centerX = offsetX + leftW + cg;
+      const rightX = offsetX + leftW + cg + centerW + cg;
+
+      let y = Math.round(4 * s);
+      const inputNode = nodes.find(n => n.id === 'hf_in');
+      inputNode._x = centerX + gp; inputNode._y = y + glh + gp;
+      inputNode._w = nw; inputNode._h = nh; inputNode._r = nr;
+      const inputGroup = groups.find(g => g.id === 'input');
+      inputGroup._x = centerX; inputGroup._y = y;
+      inputGroup._w = centerW; inputGroup._h = glh + gp * 2 + nh; inputGroup._r = gr;
+
+      y += inputGroup._h + rg;
+      const pipeTop = y;
+      const pipeNodes = ['read', 'transform', 'write'].map(id => nodes.find(n => n.id === id));
+      pipeNodes.forEach((n, i) => {
+        n._x = centerX + gp;
+        n._y = pipeTop + glh + gp + i * (nh + ng);
+        n._w = nw; n._h = nh; n._r = nr;
+      });
+      const pipeH = glh + gp * 2 + 3 * nh + 2 * ng;
+      const pipeGroup = groups.find(g => g.id === 'pipeline');
+      pipeGroup._x = centerX; pipeGroup._y = pipeTop;
+      pipeGroup._w = centerW; pipeGroup._h = pipeH; pipeGroup._r = gr;
+
+      const execNodes = ['local', 'slurm'].map(id => nodes.find(n => n.id === id));
+      const execH = glh + gp * 2 + execNodes.length * nh + (execNodes.length - 1) * ng;
+      const inferNodes = ['rollout', 'vllm'].map(id => nodes.find(n => n.id === id));
+      const inferH = glh + gp * 2 + inferNodes.length * nh + (inferNodes.length - 1) * ng;
+      const writeNode = nodes.find(n => n.id === 'write');
+      const inferBottom = writeNode._y + writeNode._h + gp;
+      const inferTop = inferBottom - inferH;
+      const execTop = inferTop - rg - execH;
+      execNodes.forEach((n, i) => {
+        n._x = leftX + gp; n._y = execTop + glh + gp + i * (nh + ng);
+        n._w = nw; n._h = nh; n._r = nr;
+      });
+      const execGroup = groups.find(g => g.id === 'execution');
+      execGroup._x = leftX; execGroup._y = execTop;
+      execGroup._w = leftW; execGroup._h = execH; execGroup._r = gr;
+
+      inferNodes.forEach((n, i) => {
+        n._x = leftX + gp; n._y = inferTop + glh + gp + i * (nh + ng);
+        n._w = nw; n._h = nh; n._r = nr;
+      });
+      const inferGroup = groups.find(g => g.id === 'inference');
+      inferGroup._x = leftX; inferGroup._y = inferTop;
+      inferGroup._w = leftW; inferGroup._h = inferH; inferGroup._r = gr;
+
+      const outNodes = ['hf_out', 'card', 'monitor'].map(id => nodes.find(n => n.id === id));
+      const outH = glh + gp * 2 + outNodes.length * nh + (outNodes.length - 1) * ng;
+      const outBottom = writeNode._y + writeNode._h + gp;
+      const outTop = outBottom - outH;
+      outNodes.forEach((n, i) => {
+        n._x = rightX + gp; n._y = outTop + glh + gp + i * (nh + ng);
+        n._w = nw; n._h = nh; n._r = nr;
+      });
+      const outGroup = groups.find(g => g.id === 'output');
+      outGroup._x = rightX; outGroup._y = outTop;
+      outGroup._w = rightW; outGroup._h = outH; outGroup._r = gr;
+
+      const minY = Math.min(
+        ...nodes.map(n => n._y),
+        ...groups.map(g => g._y)
+      );
+      if (minY < 0) {
+        const shift = -minY + Math.round(4 * s);
+        nodes.forEach(n => { n._y += shift; });
+        groups.forEach(g => { g._y += shift; });
+      }
+      const maxY = Math.max(
+        ...nodes.map(n => n._y + n._h + gp),
+        ...groups.map(g => g._y + g._h)
+      );
+      svg.attr('height', maxY + Math.round(4 * s));
+
+      return s;
+    }
+
+    function pt(n, side, offset) {
+      const o = offset || 0;
+      if (side === 'top')    return { x: n._x + n._w / 2 + o, y: n._y };
+      if (side === 'bottom') return { x: n._x + n._w / 2 + o, y: n._y + n._h };
+      if (side === 'left')   return { x: n._x,                 y: n._y + n._h / 2 + o };
+      if (side === 'right')  return { x: n._x + n._w,          y: n._y + n._h / 2 + o };
+    }
+
+    function hBez(a, b) {
+      const mx = (a.x + b.x) / 2;
+      return `M${a.x},${a.y} C${mx},${a.y} ${mx},${b.y} ${b.x},${b.y}`;
+    }
+    function vBez(a, b) {
+      const my = (a.y + b.y) / 2;
+      return `M${a.x},${a.y} C${a.x},${my} ${b.x},${my} ${b.x},${b.y}`;
+    }
+
+    function edgePath(e) {
+      const f = nodes.find(n => n.id === e.from);
+      const t = nodes.find(n => n.id === e.to);
+      if (!f || !t) return '';
+
+      if (e.from === 'hf_in' && e.to === 'read')        return vBez(pt(f,'bottom'), pt(t,'top'));
+      if (e.from === 'read' && e.to === 'transform')     return vBez(pt(f,'bottom'), pt(t,'top'));
+      if (e.from === 'transform' && e.to === 'write')    return vBez(pt(f,'bottom'), pt(t,'top'));
+      if (e.from === 'transform' && e.to === 'rollout')  return hBez(pt(f,'left'),   pt(t,'right'));
+      if (e.from === 'rollout' && e.to === 'vllm')       return vBez(pt(f,'bottom'), pt(t,'top'));
+
+      const sp = Math.round(f._h * 0.28);
+      if (e.from === 'write' && e.to === 'hf_out')  return hBez(pt(f,'right', -sp), pt(t,'left'));
+      if (e.from === 'write' && e.to === 'card')     return hBez(pt(f,'right'),      pt(t,'left'));
+      if (e.from === 'write' && e.to === 'monitor')  return hBez(pt(f,'right',  sp), pt(t,'left'));
+
+      return hBez(pt(f,'right'), pt(t,'left'));
+    }
+
+    function render() {
+      const s = computeLayout();
+      const c = colors();
+
+      const fs = Math.max(11, Math.round(13 * s));
+      const fsSub = Math.max(10, Math.round(11 * s));
+      const fsGrp = Math.max(10, Math.round(11 * s));
+      const fsIcon = Math.max(12, Math.round(14 * s));
+
+      defs.select('#pl-arrow path').attr('fill', c.arrow);
+
+      const gSel = gGroups.selectAll('g.grp').data(groups, d => d.id);
+      const gE = gSel.enter().append('g').attr('class', 'grp');
+      gE.append('rect');
+      gE.append('text').attr('class', 'grp-icon');
+      gE.append('text').attr('class', 'group-label');
+      const gM = gE.merge(gSel);
+      gM.select('rect')
+        .attr('x', d => d._x).attr('y', d => d._y)
+        .attr('width', d => d._w).attr('height', d => d._h)
+        .attr('rx', d => d._r).attr('ry', d => d._r)
+        .attr('fill', d => d.id === 'pipeline' ? c.pipeBg : c.groupBg)
+        .attr('stroke', d => d.id === 'pipeline' ? c.pipeBd : c.groupBd)
+        .attr('stroke-width', 1);
+      gM.select('.grp-icon')
+        .attr('x', d => d._x + Math.round(6 * s))
+        .attr('y', d => d._y + Math.round(15 * s))
+        .style('font-size', fsIcon + 'px')
+        .text(d => d.icon);
+      gM.select('.group-label')
+        .attr('x', d => d._x + Math.round(6 * s) + fsIcon + Math.round(3 * s))
+        .attr('y', d => d._y + Math.round(15 * s))
+        .style('font-size', fsGrp + 'px')
+        .text(d => d.label);
+      gSel.exit().remove();
+
+      const eSel = gEdges.selectAll('path.edge-path').data(edges, d => d.from + d.to);
+      eSel.enter().append('path').attr('class', 'edge-path')
+        .attr('marker-end', 'url(#pl-arrow)')
+        .merge(eSel)
+        .attr('d', edgePath)
+        .attr('stroke', c.edge)
+        .attr('stroke-width', Math.max(1.5, 1.8 * s));
+      eSel.exit().remove();
+
+      const nSel = gNodes.selectAll('g.node-group').data(nodes, d => d.id);
+      const nE = nSel.enter().append('g').attr('class', 'node-group');
+      nE.append('rect').attr('class', 'node-card');
+      nE.append('text').attr('class', 'node-title');
+      nE.append('text').attr('class', 'node-subtitle');
+      const nM = nE.merge(nSel);
+      nM.attr('transform', d => `translate(${d._x},${d._y})`);
+      nM.select('.node-card')
+        .attr('width', d => d._w).attr('height', d => d._h)
+        .attr('rx', d => d._r).attr('ry', d => d._r)
+        .attr('fill', c.nodeBg).attr('stroke', c.nodeBd).attr('stroke-width', 1);
+      nM.select('.node-title')
+        .attr('x', d => d._w / 2).attr('y', d => d.sub ? d._h * 0.38 : d._h / 2)
+        .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+        .style('font-size', fs + 'px').text(d => d.label);
+      nM.select('.node-subtitle')
+        .attr('x', d => d._w / 2).attr('y', d => d._h * 0.68)
+        .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle')
+        .style('font-size', fsSub + 'px').text(d => d.sub || '');
+      nM.on('mouseenter', (ev, d) => { if (d.tip) showTip(ev, `<strong>${d.label}</strong>${d.tip}`); })
+        .on('mousemove', (ev, d) => { if (d.tip) showTip(ev, `<strong>${d.label}</strong>${d.tip}`); })
+        .on('mouseleave', hideTip);
+      nSel.exit().remove();
+    }
+
+    render();
+    if (window.ResizeObserver) { new ResizeObserver(() => render()).observe(container); }
+    else { window.addEventListener('resize', render); }
+    new MutationObserver(() => render()).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+  } else { ensureD3(bootstrap); }
+})();
+</script>
+</body>
+</html>

app/presentation/se2026/charts/throughput.html

@@ -0,0 +1,466 @@
+<!DOCTYPE html>
+<html data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Throughput Chart</title>
+  <style>
+    :root {
+      --text-color: rgba(255,255,255,0.88);
+      --muted-color: rgba(255,255,255,0.45);
+      --surface-bg: rgba(30,30,40,0.95);
+      --border-color: rgba(255,255,255,0.1);
+      --axis-color: rgba(255,255,255,0.15);
+      --tick-color: rgba(255,255,255,0.5);
+      --grid-color: rgba(255,255,255,0.06);
+      --primary-color: #7c6ff7;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; background: transparent; overflow: visible; }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+</head>
+<body>
+<div class="d3-optimization-sweep"></div>
+<style>
+  .d3-optimization-sweep { position: relative; }
+  .d3-optimization-sweep .controls {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin: 10px 0 0 0;
+  }
+  .d3-optimization-sweep .controls .control-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+  .d3-optimization-sweep .controls label {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-optimization-sweep .controls select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 6px 28px 6px 10px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    font-size: 18px;
+    line-height: 1.2;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 1.59L6 6.17l4.59-4.58L12 3 6 9 0 3z' fill='%23999'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+  .d3-optimization-sweep .controls select:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+  }
+  .d3-optimization-sweep .legend {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    margin: 0 0 0 auto;
+  }
+  .d3-optimization-sweep .legend .legend-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+  .d3-optimization-sweep .legend .legend-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+  }
+  .d3-optimization-sweep .legend .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    font-size: 18px;
+    color: var(--text-color);
+  }
+  .d3-optimization-sweep .legend .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+  .d3-optimization-sweep .legend .shape-swatch {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+  .d3-optimization-sweep .d3-tooltip {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 8px 10px;
+    border-radius: 8px;
+    font-size: 18px;
+    line-height: 1.35;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 4px 24px rgba(0,0,0,.18);
+    opacity: 0;
+    transition: opacity .12s ease;
+    text-align: left;
+    max-width: 320px;
+    z-index: 10;
+  }
+  .d3-optimization-sweep .d3-tooltip .tip-label { color: var(--muted-color); }
+  .d3-optimization-sweep .d3-tooltip .tip-val { font-weight: 600; }
+  .d3-optimization-sweep .d3-tooltip .tip-regression { color: #e05252; }
+  .d3-optimization-sweep .y-label-text {
+    font-size: 18px;
+    cursor: default;
+  }
+  .d3-optimization-sweep .speedup-label {
+    font-size: 18px;
+    font-weight: 600;
+  }
+</style>
+<script>
+  (() => {
+    const bootstrap = () => {
+      const container = document.querySelector('.d3-optimization-sweep');
+      if (!container) return;
+      if (container.dataset && container.dataset.mounted === 'true') return;
+      if (container.dataset) container.dataset.mounted = 'true';
+      container.style.position = container.style.position || 'relative';
+
+      // ── Data ──
+      const DATA = [
+        { model: 'GPT-OSS-120B', family: 'GPT-OSS', baseTp: 1, baseTps: 3138, t0Tps: 6117, t0Speedup: 1.95, t0Params: 'tp=2, mns=1024, mnbt=32768', t1Tps: 5450, t1Speedup: 1.74, t1Params: 'tp=2, mns=1024, mnbt=32768', bestSpeedup: 1.95 },
+        { model: 'Qwen3-8B', family: 'Qwen3', baseTp: 1, baseTps: 6338, t0Tps: 6338, t0Speedup: 1.00, t0Params: '(baseline)', t1Tps: 6443, t1Speedup: 1.02, t1Params: 'gmu=95', bestSpeedup: 1.02 },
+        { model: 'Gemma-3-4B', family: 'Gemma3', baseTp: 1, baseTps: 8501, t0Tps: 9253, t0Speedup: 1.09, t0Params: 'mns=1024, mnbt=32768', t1Tps: 8361, t1Speedup: 0.98, t1Params: 'mns=1024, mnbt=32768', bestSpeedup: 1.09 },
+        { model: 'SmolLM2-1.7B', family: 'SmolLM2', baseTp: 1, baseTps: 5255, t0Tps: 5437, t0Speedup: 1.03, t0Params: 'mns=2048, mnbt=32768', t1Tps: 9220, t1Speedup: 1.75, t1Params: 'mns=2048, mnbt=32768, gmu=95, spec=suffix_32', bestSpeedup: 1.75 },
+      ];
+
+      const FAMILIES = ['Qwen3', 'SmolLM2', 'Gemma3', 'GPT-OSS'];
+      const TIERS = ['Baseline', 'Tier 0', 'Tier 1'];
+      const SHAPE_SIZE = 42;
+      const TIER_Y_OFFSET = { 'Baseline': -0.38, 'Tier 0': 0, 'Tier 1': 0.38 };
+      const margin = { top: 30, right: 60, bottom: 50, left: 140 };
+
+      // ── Colors & shapes ──
+      const FAMILY_COLORS = { 'Qwen3': '#e07b54', 'SmolLM2': '#e06b9e', 'Gemma3': '#5b9bd5', 'GPT-OSS': '#8bc474' };
+      const familyPalette = FAMILIES.map(f => FAMILY_COLORS[f] || '#999');
+      const familyColor = (family) => FAMILY_COLORS[family] || '#999';
+
+      const shapeGenerators = {
+        'Baseline': d3.symbol().type(d3.symbolCircle),
+        'Tier 0': d3.symbol().type(d3.symbolSquare),
+        'Tier 1': d3.symbol().type(d3.symbolTriangle),
+      };
+
+      // ── Tooltip ──
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div'); tip.className = 'd3-tooltip';
+        tipInner = document.createElement('div'); tipInner.className = 'd3-tooltip__inner'; tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner); container.appendChild(tip);
+      } else { tipInner = tip.querySelector('.d3-tooltip__inner') || tip; }
+
+      function showTip(html, mx, my) {
+        tipInner.innerHTML = html;
+        const cw = container.clientWidth;
+        let tx = mx + 14, ty = my - 10;
+        if (tx + (tip.offsetWidth || 200) > cw - 8) tx = mx - (tip.offsetWidth || 200) - 14;
+        if (ty + (tip.offsetHeight || 100) > container.clientHeight) ty = container.clientHeight - (tip.offsetHeight || 100) - 4;
+        if (ty < 0) ty = 4;
+        tip.style.transform = `translate(${tx}px, ${ty}px)`;
+        tip.style.opacity = '1';
+      }
+      function hideTip() {
+        tip.style.opacity = '0';
+        tip.style.transform = 'translate(-9999px, -9999px)';
+      }
+
+      // ── Shared tooltip event handlers ──
+      function attachTipEvents(sel, opacityFn) {
+        sel
+          .attr('cursor', 'pointer')
+          .on('mouseenter', function (event, d) {
+            d3.select(this).attr('opacity', 1);
+            const [mx, my] = d3.pointer(event, container);
+            showTip(buildTooltip(d), mx, my);
+          })
+          .on('mousemove', function (event) {
+            const [mx, my] = d3.pointer(event, container);
+            tip.style.transform = `translate(${mx + 14}px, ${my - 10}px)`;
+          })
+          .on('mouseleave', function (event, d) {
+            d3.select(this).attr('opacity', opacityFn(d));
+            hideTip();
+          });
+      }
+
+      // ── Shared axis styling ──
+      function styleAxis(g) {
+        g.selectAll('path, line').attr('stroke', 'var(--axis-color)');
+        g.selectAll('text').attr('fill', 'var(--tick-color)').style('font-size', '18px');
+      }
+
+      // ── SVG ──
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+
+      // ── State ──
+      const state = { metric: 'speedup', sort: 'speedup' };
+
+      function sortedData() {
+        const d = [...DATA];
+        if (state.sort === 'speedup') d.sort((a, b) => b.bestSpeedup - a.bestSpeedup);
+        else if (state.sort === 'baseline') d.sort((a, b) => b.baseTps - a.baseTps);
+        else if (state.sort === 'family') {
+          d.sort((a, b) => {
+            const fi = FAMILIES.indexOf(a.family) - FAMILIES.indexOf(b.family);
+            return fi !== 0 ? fi : b.bestSpeedup - a.bestSpeedup;
+          });
+        }
+        return d;
+      }
+
+      // ── X axis tick format helper ──
+      function xTickFormat() {
+        return state.metric === 'throughput'
+          ? (d => d >= 1000 ? (d / 1000) + 'k' : d)
+          : (d => d.toFixed(1) + 'x');
+      }
+
+      // ── Render ──
+      function render() {
+        const iw = (container.clientWidth || 800) - margin.left - margin.right;
+        const ih = Math.max(150, DATA.length * 60 + margin.top + margin.bottom) - margin.top - margin.bottom;
+        svg.attr('width', container.clientWidth || 800).attr('height', ih + margin.top + margin.bottom);
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        const data = sortedData();
+        const yScale = d3.scaleBand().domain(data.map(d => d.model)).range([0, ih]).padding(0.35);
+        const bandH = yScale.bandwidth();
+
+        // X scale
+        let xScale;
+        if (state.metric === 'throughput') {
+          const maxTps = d3.max(data, d => Math.max(d.baseTps, d.t0Tps, d.t1Tps));
+          xScale = d3.scaleLinear().domain([0, maxTps * 1.08]).range([0, iw]).nice();
+        } else {
+          const maxSpd = d3.max(data, d => Math.max(d.t0Speedup, d.t1Speedup));
+          const minSpd = d3.min(data, d => Math.min(d.t0Speedup, d.t1Speedup));
+          xScale = d3.scaleLinear().domain([Math.min(0.85, minSpd - 0.05), Math.max(2.05, maxSpd + 0.1)]).range([0, iw]).nice();
+        }
+
+        // Grid
+        gRoot.selectAll('.grid').data([0]).join('g').attr('class', 'grid')
+          .call(g => {
+            g.selectAll('line').data(xScale.ticks(8), d => d).join('line')
+              .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
+              .attr('y1', 0).attr('y2', ih)
+              .attr('stroke', 'var(--grid-color)').attr('stroke-width', 1);
+          });
+
+        // X axes (bottom + top)
+        const fmt = xTickFormat();
+        gRoot.selectAll('.axis-x').data([0]).join('g').attr('class', 'axis-x')
+          .attr('transform', `translate(0,${ih})`)
+          .call(d3.axisBottom(xScale).ticks(8).tickFormat(fmt)).call(styleAxis);
+        gRoot.selectAll('.axis-x-top').data([0]).join('g').attr('class', 'axis-x-top')
+          .call(d3.axisTop(xScale).ticks(8).tickFormat(fmt)).call(styleAxis);
+
+        // X axis label
+        const xLabel = state.metric === 'throughput' ? 'Tokens per second per GPU' : 'Speedup vs baseline';
+        gRoot.selectAll('.x-label').data([0]).join('text').attr('class', 'x-label')
+          .attr('x', iw / 2).attr('y', ih + margin.bottom - 4)
+          .attr('text-anchor', 'middle').attr('fill', 'var(--muted-color)')
+          .attr('font-size', 18).text(xLabel);
+
+        // Y axis (model names)
+        gRoot.selectAll('.axis-y').data([0]).join('g').attr('class', 'axis-y')
+          .call(g => {
+            g.selectAll('text.y-label-text').data(data, d => d.model).join(
+              enter => enter.append('text').attr('class', 'y-label-text')
+                .attr('x', -8).attr('dy', '0.35em').attr('text-anchor', 'end').style('font-size', '18px').style('font-weight', '600'),
+              update => update,
+              exit => exit.remove()
+            )
+              .attr('y', d => yScale(d.model) + bandH / 2)
+              .attr('fill', d => familyColor(d.family))
+              .text(d => d.model);
+          });
+
+        // Reference line at 1.0x in speedup mode
+        gRoot.selectAll('.ref-line').data(state.metric === 'speedup' ? [1.0] : []).join('line')
+          .attr('class', 'ref-line')
+          .attr('x1', d => xScale(d)).attr('x2', d => xScale(d))
+          .attr('y1', 0).attr('y2', ih)
+          .attr('stroke', 'var(--text-color)').attr('stroke-width', 1.5)
+          .attr('stroke-dasharray', '4,3').attr('opacity', 0.5);
+
+        // View-specific elements
+        if (state.metric === 'throughput') {
+          gRoot.selectAll('.speedup-bar').remove();
+          renderThroughput(data, xScale, yScale, bandH);
+        } else {
+          gRoot.selectAll('.conn-line').remove();
+          gRoot.selectAll('.dot').remove();
+          renderSpeedup(data, xScale, yScale, bandH);
+        }
+
+        // Speedup annotation (shared between both views)
+        gRoot.selectAll('.speedup-label').data(data, d => d.model).join('text')
+          .attr('class', 'speedup-label')
+          .attr('x', iw + 6)
+          .attr('y', d => yScale(d.model) + bandH / 2)
+          .attr('dy', '0.35em')
+          .attr('fill', 'var(--muted-color)')
+          .text(d => d.bestSpeedup.toFixed(2) + 'x');
+      }
+
+      function renderThroughput(data, xScale, yScale, bandH) {
+        // Connecting lines between the three staggered dots
+        const lineGen = d3.line().x(p => p.x).y(p => p.y);
+        const connData = data.map(d => {
+          const cy = yScale(d.model) + bandH / 2;
+          return {
+            model: d.model, family: d.family,
+            points: TIERS.map((tier, i) => ({
+              x: xScale([d.baseTps, d.t0Tps, d.t1Tps][i]),
+              y: cy + TIER_Y_OFFSET[tier] * bandH,
+            })),
+          };
+        });
+        gRoot.selectAll('.conn-line').data(connData, d => d.model).join('path')
+          .attr('class', 'conn-line')
+          .attr('d', d => lineGen(d.points))
+          .attr('fill', 'none')
+          .attr('stroke', d => familyColor(d.family))
+          .attr('stroke-width', 1.5).attr('opacity', 0.35);
+
+        // Dots: 3 per model with vertical stagger
+        const dots = [];
+        data.forEach(d => {
+          const cy = yScale(d.model) + bandH / 2;
+          const vals = [d.baseTps, d.t0Tps, d.t1Tps];
+          TIERS.forEach((tier, i) => {
+            dots.push({ ...d, tier, val: vals[i], cx: xScale(vals[i]), cy: cy + TIER_Y_OFFSET[tier] * bandH });
+          });
+        });
+
+        const dotSel = gRoot.selectAll('.dot').data(dots, d => d.model + '-' + d.tier).join('path')
+          .attr('class', 'dot')
+          .attr('d', d => shapeGenerators[d.tier].size(SHAPE_SIZE)())
+          .attr('transform', d => `translate(${d.cx},${d.cy})`)
+          .attr('fill', d => familyColor(d.family))
+          .attr('stroke', 'none')
+          .attr('opacity', 0.9);
+        attachTipEvents(dotSel, () => 0.9);
+      }
+
+      function renderSpeedup(data, xScale, yScale, bandH) {
+        const barH = bandH * 0.38;
+        const barData = [];
+        data.forEach(d => {
+          const baseY = yScale(d.model);
+          barData.push({ ...d, tier: 'Tier 0', val: d.t0Speedup, y: baseY + bandH * 0.12, h: barH });
+          barData.push({ ...d, tier: 'Tier 1', val: d.t1Speedup, y: baseY + bandH * 0.5, h: barH });
+        });
+
+        const oneX = xScale(1.0);
+        const barSel = gRoot.selectAll('.speedup-bar').data(barData, d => d.model + '-' + d.tier).join('rect')
+          .attr('class', 'speedup-bar')
+          .attr('x', d => d.val >= 1.0 ? oneX : xScale(d.val))
+          .attr('y', d => d.y)
+          .attr('width', d => Math.abs(xScale(d.val) - oneX))
+          .attr('height', d => d.h)
+          .attr('rx', 2)
+          .attr('fill', d => familyColor(d.family))
+          .attr('opacity', d => d.tier === 'Tier 0' ? 0.9 : 0.55)
+          .attr('stroke', d => d.val < 1.0 ? '#e05252' : 'none')
+          .attr('stroke-width', d => d.val < 1.0 ? 1 : 0);
+        attachTipEvents(barSel, d => d.tier === 'Tier 0' ? 0.9 : 0.55);
+      }
+
+      function buildTooltip(d) {
+        const fmt = (v) => v.toLocaleString();
+        const spd = (v) => v.toFixed(2) + 'x';
+        const cls = (v) => v < 1.0 ? 'tip-regression' : 'tip-val';
+        return `<div style="margin-bottom:4px"><strong>${d.model}</strong> <span class="tip-label">(${d.family})</span></div>`
+          + `<div><span class="tip-label">Baseline:</span> <span class="tip-val">${fmt(d.baseTps)}</span> tps/gpu <span class="tip-label">(tp=${d.baseTp})</span></div>`
+          + `<div><span class="tip-label">Tier 0:</span> <span class="${cls(d.t0Speedup)}">${fmt(d.t0Tps)}</span> tps/gpu <span class="${cls(d.t0Speedup)}">${spd(d.t0Speedup)}</span></div>`
+          + `<div style="font-size:10px;color:var(--muted-color);margin-left:8px">${d.t0Params}</div>`
+          + `<div><span class="tip-label">Tier 1:</span> <span class="${cls(d.t1Speedup)}">${fmt(d.t1Tps)}</span> tps/gpu <span class="${cls(d.t1Speedup)}">${spd(d.t1Speedup)}</span></div>`
+          + `<div style="font-size:10px;color:var(--muted-color);margin-left:8px">${d.t1Params}</div>`;
+      }
+
+      // ── Controls ──
+      function makeSelect(id, label, options, initial, onChange) {
+        const group = document.createElement('div'); group.className = 'control-group';
+        const lbl = document.createElement('label'); lbl.textContent = label; lbl.setAttribute('for', id);
+        const sel = document.createElement('select'); sel.id = id;
+        options.forEach(([v, t]) => {
+          const o = document.createElement('option'); o.value = v; o.textContent = t; sel.appendChild(o);
+        });
+        sel.value = initial;
+        sel.addEventListener('change', () => onChange(sel.value));
+        group.appendChild(lbl); group.appendChild(sel);
+        return group;
+      }
+
+      const controls = document.createElement('div'); controls.className = 'controls';
+      controls.appendChild(makeSelect('metric-sel-optsweep', 'Metric',
+        [['throughput', 'Throughput'], ['speedup', 'Speedup']], state.metric,
+        v => { state.metric = v; render(); }));
+      controls.appendChild(makeSelect('sort-sel-optsweep', 'Sort',
+        [['speedup', 'By Best Speedup'], ['baseline', 'By Baseline Throughput'], ['family', 'By Model Family']], state.sort,
+        v => { state.sort = v; render(); }));
+
+      // Legend inline with controls
+      const legend = document.createElement('div'); legend.className = 'legend';
+      legend.style.display = 'flex'; legend.style.alignItems = 'center'; legend.style.gap = '14px'; legend.style.marginLeft = 'auto'; legend.style.margin = '0 0 0 auto';
+      const svgNS = 'http://www.w3.org/2000/svg';
+      TIERS.forEach(tier => {
+        const item = document.createElement('span'); item.className = 'item';
+        const shapeSvg = document.createElementNS(svgNS, 'svg');
+        shapeSvg.setAttribute('width', '14'); shapeSvg.setAttribute('height', '14');
+        shapeSvg.setAttribute('viewBox', '-8 -8 16 16'); shapeSvg.style.display = 'block';
+        const path = document.createElementNS(svgNS, 'path');
+        path.setAttribute('d', shapeGenerators[tier].size(SHAPE_SIZE)());
+        path.setAttribute('fill', 'var(--text-color)');
+        shapeSvg.appendChild(path);
+        const swWrap = document.createElement('span'); swWrap.className = 'shape-swatch'; swWrap.appendChild(shapeSvg);
+        const txt = document.createElement('span'); txt.textContent = tier;
+        item.appendChild(swWrap); item.appendChild(txt); legend.appendChild(item);
+      });
+      controls.appendChild(legend);
+      container.appendChild(controls);
+
+      // ── Initial render + resize ──
+      render();
+      if (window.ResizeObserver) {
+        new ResizeObserver(() => render()).observe(container);
+      } else {
+        window.addEventListener('resize', render);
+      }
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+    } else {
+      bootstrap();
+    }
+  })();
+</script>
+</body>
+</html>

app/presentation/se2026/data/benchmark-results.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0359f44cbbe97ee8f7ea598152a5053a322a81af818de890606e0daa6c15fd3a
+size 1378100

app/presentation/se2026/data/rephrasing_metadata.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cac779aca41bc6f868d99a7c7fcc43343591b40ace727098341d52285c1ff856
+size 152802

app/presentation/se2026/index.html

@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>The Synthetic Data Playbook</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/night.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="reveal">
+<div class="slides">
+
+<!-- ============================================================ -->
+<!-- SECTION 1: MOTIVATION AND RECAP (~40%, slides 1-8, ~9 min)   -->
+<!-- ============================================================ -->
+
+<!-- SLIDE 1: Title -->
+<section class="center-slide">
+  <div style="margin-top:-160px;">
+    <h2>The Synthetic Data Playbook</h2>
+    <br>
+    <h3>How to Cook Better Training Data for LLMs</h3>
+    <br>
+    <p style="margin-top:20px;font-size:0.8em;color:rgba(255,255,255,1);">
+      SE 26
+    </p>
+  </div>
+  <img src="assets/bern-skyline.png" style="position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:auto;opacity:0.6;pointer-events:none;">
+  <aside class="notes">
+    ~30s. Welcome, introduce yourself. "Today I'll show you how we made LLMs better
+    by rewriting their training data instead of just filtering it."
+  </aside>
+</section>
+
+<!-- SLIDE 2: Digital Sovereignty -->
+<section>
+  <p class="section-label">Why This Matters</p>
+  <h2>The Data Black Box</h2>
+  <div style="font-size:0.65em;margin-top:20px;">
+    <p>Frontier labs (OpenAI, Google, Anthropic) don't disclose how they build their training data.</p>
+    <p class="fragment">Neither do the Chinese labs (DeepSeek or Qwen).</p>
+    <p class="fragment" style="margin-top:20px;">
+      Training data is the <span class="highlight">most important ingredient</span> in building an LLM,
+      yet the recipes are kept secret.
+    </p>
+    <div class="fragment" style="margin-top:30px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px;">
+      <p style="font-weight:700;color:#f0c674;margin-bottom:8px;font-size:1.1em;">Digital Sovereignty</p>
+      <p>If you can't build the data, you can't build the model.<br>
+        If you can't build the model, you depend on those who can.</p>
+      <p style="margin-top:12px;">This work puts the knowledge <span class="accent">out in the open</span> for everyone:
+        governments, universities, startups, and individuals.</p>
+    </div>
+  </div>
+  <aside class="notes">
+    ~1 min. "Before we dive in, let me explain why this matters beyond the technical.
+    None of the frontier labs, not OpenAI, not Google, not Anthropic, and not the Chinese labs either,
+    tell you how they build their training data. It's the most important ingredient and it's a black box.
+    This is a digital sovereignty issue. If you can't build the data yourself,
+    you can't build the model, and you're dependent on whoever can.
+    Our work makes this knowledge open and accessible to everyone."
+  </aside>
+</section>
+
+<!-- SLIDE 3: LLMs and Pretraining Recap -->
+<section>
+  <p class="section-label">Quick Recap</p>
+  <h2>LLMs: What's Under the Hood</h2>
+  <div class="two-col" style="font-size:0.65em;margin-top:20px;">
+    <div class="col">
+      <p>You use these every day: ChatGPT, Copilot, Claude.</p>
+      <p class="fragment">Under the hood: a giant function that takes <span class="accent">tokens in</span> and predicts <span class="accent">tokens out</span>.</p>
+      <p class="fragment">Trained by reading <span class="highlight">billions of web pages</span>, learning to predict the next word.</p>
+      <p class="fragment" style="margin-top:20px;font-weight:700;color:#f0c674;">
+        Data quality defines model quality.
+      </p>
+    </div>
+    <div class="col fragment" style="text-align:center;">
+      <div style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:30px 20px;">
+        <div style="font-size:0.9em;color:rgba(255,255,255,0.5);">Input text</div>
+        <div style="font-size:2em;margin:10px 0;">↓</div>
+        <div style="background:rgba(124,111,247,0.15);border:1px solid rgba(124,111,247,0.3);border-radius:12px;padding:16px;font-weight:700;font-size:1.1em;">
+          LLM<br><span style="font-size:0.6em;font-weight:400;color:rgba(255,255,255,0.4);">billions of parameters</span>
+        </div>
+        <div style="font-size:2em;margin:10px 0;">↓</div>
+        <div style="font-size:0.9em;color:rgba(255,255,255,0.5);">Output text</div>
+      </div>
+    </div>
+  </div>
+  <aside class="notes">
+    ~1.5 min. "Quick recap so we have shared vocabulary." Click through fragments.
+    Emphasize: model quality = data quality. Like training a code model on all of GitHub.
+  </aside>
+</section>
+
+<!-- SLIDE 4: The Data Quality Problem -->
+<section>
+  <p class="section-label">The Problem</p>
+  <h2>You Start With the Entire Internet...</h2>
+  <h3 class="fragment">...and throw away 98.6% of it</h3>
+  <div class="fragment">
+    <img src="assets/dclm-filtering-pipeline.png" class="img-contain" style="margin-top:10px;max-height:400px;">
+    <p style="font-size:0.45em;color:rgba(255,255,255,0.3);margin-top:8px;">
+      DCLM: 240T tokens from Common Crawl → 1.4% survives as DCLM-Baseline
+    </p>
+  </div>
+  <aside class="notes">
+    ~1 min. "This is the DCLM dataset pipeline. You scrape the whole internet, 240 trillion tokens.
+    Then heuristic filters, deduplication, model-based filtering. Only 1.4% of documents survive.
+    All this engineering just to clean the data. What if there was a better way?"
+  </aside>
+</section>
+
+<!-- SLIDE 5: Synthetic Data -->
+<section>
+  <p class="section-label">The Idea</p>
+  <h2>Rewrite Instead of Filter</h2>
+  <div class="before-after">
+    <div class="panel bad">
+      <div class="panel-title">Raw Web Text</div>
+      <p style="margin:0;line-height:1.6;">
+        <span style="color:rgba(255,255,255,0.3);">★★★ BeSt DeAls!!!</span><br>
+        Photosynthesis is the process by wich plants convert sunlit into energy.
+        It occurs in the chloroplasts<br>
+        <span style="color:rgba(255,255,255,0.3);">Click here for more → → →</span><br>
+        <span style="color:rgba(255,255,255,0.3);">© 2019 AllScienceInfo.biz</span><br>
+        Carbon dioxide and water are transformed into glucose and oxygen...
+        <span style="color:rgba(255,255,255,0.3);">[AD] [AD] [POPUP]</span>
+      </p>
+    </div>
+    <div class="arrow fragment" data-fragment-index="0">→</div>
+    <div class="panel good fragment" data-fragment-index="0">
+      <div class="panel-title">LLM-Rewritten FAQ</div>
+      <p style="margin:0;line-height:1.6;">
+        <strong>Q: What is photosynthesis?</strong><br>
+        A: Photosynthesis is the process by which plants convert sunlight into chemical energy.
+        It occurs in organelles called chloroplasts.<br><br>
+        <strong>Q: What are the inputs and outputs?</strong><br>
+        A: Plants take in carbon dioxide (CO₂) and water (H₂O), and using light energy,
+        produce glucose (C₆H₁₂O₆) and oxygen (O₂).
+      </p>
+    </div>
+  </div>
+  <p class="fragment" style="font-size:0.55em;margin-top:16px;">
+    Same knowledge, better packaging.<br>
+    You keep <span class="highlight">100%</span> of your data instead of discarding 90%.
+  </p>
+  <aside class="notes">
+    ~1.5 min. Walk through the before/after. Left: messy web text with spam, typos, ads, broken formatting.
+    Right: same knowledge, but restructured as a clean FAQ. The LLM acts as a rewriter.
+    Key insight: you preserve the knowledge, you just improve the presentation. No data wasted.
+  </aside>
+</section>
+
+<!-- SLIDE 6: Research Question -->
+<section>
+  <p class="section-label">Our Research</p>
+  <h2>What's the Best Recipe?</h2>
+  <p style="font-size:0.6em;color:rgba(255,255,255,0.6);margin-bottom:12px;">
+    Three knobs to tune: <span class="accent">source data</span>, <span class="accent">prompt strategy</span>, and
+    <span class="accent">generator model</span>.
+  </p>
+  <div style="display:flex;align-items:center;gap:24px;">
+    <iframe src="charts/experiment-flow.html" style="flex:0 1 75%;height:540px;border:none;border-radius:8px;background:transparent;" loading="lazy"></iframe>
+    <div class="fragment" style="display:flex;flex-direction:column;gap:24px;min-width:120px;text-align:center;align-self:flex-start;margin-top:40px;padding-left:40px;">
+      <div class="stat-box"><div class="num" style="font-size:1.6em;">70+</div><div class="label">experiments</div></div>
+      <div class="stat-box"><div class="num" style="font-size:1.6em;">1T+</div><div class="label">tokens generated</div></div>
+      <div class="stat-box"><div class="num" style="font-size:1.6em;">60k+</div><div class="label">GPU hours</div></div>
+    </div>
+  </div>
+  <aside class="notes">
+    ~1 min. "We ran a massive ablation study. Three axes: what prompt do you give the rewriter,
+    which model does the rewriting, and what source data do you start from.
+    This Sankey shows our 70+ experiments flowing from source → prompt → model.
+    Over 1 trillion tokens generated, 100k GPU hours."
+  </aside>
+</section>
+
+<!-- SLIDE 7: How We Evaluate -->
+<section>
+  <p class="section-label">Methodology</p>
+  <h2>Our Integration Test Suite</h2>
+  <div style="font-size:0.7em;margin-top:30px;">
+    <p style="color:rgba(255,255,255,0.5);">For each experiment, we:</p>
+    <ul>
+      <li class="fragment">Train a <span class="accent">1.2B parameter</span> model from scratch</li>
+      <li class="fragment">Feed it <span class="accent">20B tokens</span> of synthetic and original data</li>
+      <li class="fragment">Test on <span class="accent">12 benchmarks</span> (reading, math, reasoning, knowledge...)</li>
+      <li class="fragment">Compare against curated web datasets as baselines</li>
+    </ul>
+    <p class="fragment" style="margin-top:16px;font-size:0.9em;color:rgba(255,255,255,0.6);">
+      This is expensive so we tried proxies:
+    </p>
+    <ul class="fragment" style="font-size:0.85em;margin-top:4px;">
+      <li>DCLM/Edu scores (used for filtering pretraining data)</li>
+      <li>Smaller training runs</li>
+    </ul>
+    <p class="fragment" style="margin-top:4px;font-size:0.9em;">
+      None correlated well enough.
+    </p>
+    <p class="fragment" style="margin-top:10px;color:#f0c674;font-weight:600;">
+      No shortcuts: you must train and evaluate to know if your data is good.
+    </p>
+  </div>
+  <aside class="notes">
+    ~1 min. "Think of it like an integration test suite for data quality.
+    We train a model on each dataset variant and see how it scores.
+    12 benchmarks covering reading comprehension, math, general knowledge, reasoning.
+    65 separate training runs. No proxy metric can replace this."
+  </aside>
+</section>
+
+<!-- SLIDE 8: Spoiler -->
+<section>
+  <p class="section-label">Spoiler</p>
+  <h2>FinePhrase Wins</h2>
+  <p style="font-size:0.55em;color:rgba(255,255,255,0.5);margin-bottom:10px;">
+    Our best synthetic recipe outperforms all tested baselines, including curated web data.
+  </p>
+  <iframe src="charts/benchmark.html" class="chart-frame" style="height:360px;" loading="lazy"></iframe>
+  <p class="fragment" style="font-size:0.6em;margin-top:10px;color:rgba(255,255,255,0.6);">
+    Let's unpack <span class="accent">how</span>.
+  </p>
+  <aside class="notes">
+    ~1 min. "Here's the punchline up front. FinePhrase, our best configuration,
+    beats all baselines including DCLM, Nemotron, REWIRE, and Cosmopedia.
+    Let's unpack the three key findings that got us here."
+    Transition to Section 2.
+  </aside>
+</section>
+
+<!-- ============================================================ -->
+<!-- SECTION 2: EXPERIMENTAL RESULTS (~20%, slides 9-12, ~4 min)  -->
+<!-- ============================================================ -->
+
+<!-- SLIDE 9: Prompts Matter Most -->
+<section>
+  <p class="section-label">Finding #1</p>
+  <h2>Prompt Design Is the #1 Lever</h2>
+  <div class="two-col" style="font-size:0.6em;grid-template-columns:1.5fr 1fr;gap:20px;">
+    <div class="col" style="text-align:center;">
+      <iframe src="charts/benchmark-prompts.html" class="chart-frame" loading="lazy"
+        style="height:480px;" id="prompts-chart"></iframe>
+    </div>
+    <div class="col">
+      <p>Structured prompts beat everything:</p>
+      <ul>
+        <li class="fragment"><span class="highlight">Math</span> reformatting</li>
+        <li class="fragment"><span class="highlight">Table</span> extraction</li>
+        <li class="fragment"><span class="highlight">FAQ</span> generation</li>
+        <li class="fragment"><span class="highlight">Tutorial</span> rewriting</li>
+      </ul>
+      <p class="fragment" style="margin-top:20px;">
+        These beat curated web data <em>and</em> all prior synthetic baselines.
+      </p>
+      <p class="fragment" style="color:#f0c674;font-weight:600;margin-top:10px;">
+        The prompt matters more than the model or the source data.
+      </p>
+    </div>
+  </div>
+  <aside class="notes">
+    ~1 min. "Finding number one, and the most important: prompt design is the biggest lever.
+    Structured formats like Math, Table, FAQ, Tutorial consistently outperform
+    both curated web data and prior synthetic approaches.
+    The prompt matters more than which model you use or what source data you start from."
+  </aside>
+</section>
+
+<!-- SLIDE 10: Smol Models Are Enough -->
+<section>
+  <p class="section-label">Finding #2</p>
+  <h2>Smol Models Are Enough</h2>
+  <div class="two-col" style="font-size:0.6em;grid-template-columns:1.6fr 1fr;gap:16px;">
+    <div class="col" style="text-align:center;">
+      <iframe src="charts/benchmark-family.html" class="chart-frame" loading="lazy"
+        style="height:440px;"></iframe>
+    </div>
+    <div class="col">
+      <p>1B matches 4B, 12B, and 27B model performance.</p>
+      <p class="fragment"><span class="accent">SmolLM2-1.7B</span> beats Qwen, Gemma, Llama, Falcon, and Granite.</p>
+      <p class="fragment" style="margin-top:20px;">And it's <em>much</em> faster:</p>
+      <ul>
+        <li class="fragment"><span class="highlight">3.0x</span> faster than Gemma-3-12B<br><span style="color:rgba(255,255,255,0.4);">(9,220 vs 3,046 tps/gpu)</span></li>
+        <li class="fragment"><span class="highlight">5.3x</span> faster than Gemma-3-27B<br><span style="color:rgba(255,255,255,0.4);">(9,220 vs 1,724 tps/gpu)</span></li>
+      </ul>
+      <p class="fragment" style="color:#f0c674;font-weight:600;margin-top:20px;">
+        Better quality <em>and</em> faster inference.
+      </p>
+    </div>
+  </div>
+  <aside class="notes">
+    ~1 min. "Finding two: you don't need a big model.
+    1B parameters match 4B, 12B, even 27B for rephrasing quality.
+    SmolLM2 at 1.7B beats all other model families.
+    And it's 3x faster than Gemma-12B, 5.3x faster than Gemma-27B.
+    Better quality AND faster inference. You don't need a big model."
+  </aside>
+</section>
+
+<!-- SLIDE 11: Diversity Paradox -->
+<section>
+  <p class="section-label">Finding #3</p>
+  <h2>Diversity Beats Consistency</h2>
+  <div style="font-size:0.65em;">
+    <div class="two-col">
+      <div class="col">
+        <p><span class="highlight">Messy beats polished.</span></p>
+        <p class="fragment" data-fragment-index="1">SmolLM2's varied, inconsistent outputs outperform
+          Qwen3's template-locked, clean outputs.</p>
+        <p class="fragment" data-fragment-index="3" style="margin-top:20px;">
+          <span class="accent">Synthetic-only fails.</span><br>
+          You must mix synthetic data with original web data.
+        </p>
+        <p class="fragment" data-fragment-index="4" style="margin-top:20px;">
+          The mix-in dataset matters as much as the synthetic data itself.
+        </p>
+      </div>
+      <div class="col fragment" data-fragment-index="2">
+        <div style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:24px;">
+          <div style="font-size:1em;font-weight:700;margin-bottom:12px;">Template Collapse</div>
+          <div style="font-size:0.9em;line-height:1.6;">
+            <p style="color:rgba(255,255,255,0.5);">Qwen3 Math outputs:</p>
+            <p><span class="danger">115 / 1000</span> samples start with the exact same sentence</p>
+            <p style="margin-top:12px;color:rgba(255,255,255,0.5);">SmolLM2 Math outputs:</p>
+            <p><span class="accent">Highly varied</span> formatting and structure</p>
+            <p style="margin-top:16px;color:#f0c674;font-weight:600;">
+              Diversity beats consistency for pretraining.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <aside class="notes">
+    ~1 min. "Finding three: diversity beats polish. This was counterintuitive.
+    Qwen3's math outputs are very clean and consistent, but 115 out of 1000 start identically.
+    SmolLM2's outputs are messier but more varied. The varied outputs win.
+    Also: synthetic-only training fails. You need to mix in original data.
+    The mix-in dataset influence is sometimes larger than the synthetic data itself."
+  </aside>
+</section>
+
+<!-- SLIDE 12: Results Summary -->
+<section>
+  <p class="section-label">Summary</p>
+  <h2>What We Found</h2>
+  <ul class="takeaway-list" style="margin-top:30px;">
+    <li class="fragment">
+      <span class="accent">Prompt design</span> is the #1 lever.
+      Structured formats (Math, Table, FAQ, Tutorial) outperform everything.
+    </li>
+    <li class="fragment">
+      <span class="accent">1B models suffice.</span>
+      SmolLM2-1.7B is the best rephraser across the board.
+    </li>
+    <li class="fragment">
+      <span class="accent">Mix original data in.</span>
+      Synthetic-only fails. The mix-in dataset matters.
+    </li>
+    <li class="fragment">
+      <span class="accent">Diversity wins over polish.</span>
+      Varied, messy outputs beat clean, template-locked ones.
+    </li>
+  </ul>
+  <aside class="notes">
+    ~30s. Quick recap of findings. Click through each point. These four bullets
+    are the core message of the talk. Transition: "Now let's talk about
+    the engineering challenge of actually doing this at scale."
+  </aside>
+</section>
+
+<!-- ============================================================ -->
+<!-- SECTION 3: INFRASTRUCTURE (~20%, slides 13-16, ~4 min)       -->
+<!-- ============================================================ -->
+
+<!-- SLIDE 13: Engineering Challenge -->
+<section>
+  <p class="section-label">Infrastructure</p>
+  <h2>How Do You Rephrase 1T Tokens?</h2>
+  <div style="font-size:0.65em;margin-top:30px;">
+    <p>Each experiment generates ~15B tokens.</p>
+    <p class="fragment">70+ experiments = <span class="accent">1T+ tokens</span> of LLM output.</p>
+    <p class="fragment" style="margin-top:20px;">
+      At ~4,750 tokens/sec/GPU (mean across all experiments):
+    </p>
+    <div class="fragment stat-row" style="margin-top:20px;">
+      <div class="stat-box"><div class="num">~880</div><div class="label">GPU-hours per experiment</div></div>
+      <div class="stat-box"><div class="num">~$3k</div><div class="label">cloud cost per experiment</div></div>
+      <div class="stat-box"><div class="num">~$215k</div><div class="label">total compute budget</div></div>
+    </div>
+    <p class="fragment" style="margin-top:20px;color:#f0c674;font-weight:600;">
+      You need a scalable, fault-tolerant pipeline.
+    </p>
+  </div>
+  <aside class="notes">
+    ~1 min. "Now the engineering side. Each experiment is 15 billion tokens of LLM generation.
+    70+ experiments. That's over a trillion tokens total. At $3.50/GPU-hour,
+    each experiment costs about $7,000. You need infrastructure that handles failures,
+    checkpoints, and scales across many nodes."
+  </aside>
+</section>
+
+<!-- SLIDE 14: DataTrove + vLLM -->
+<section>
+  <p class="section-label">Infrastructure</p>
+  <h2>DataTrove + vLLM</h2>
+  <iframe src="charts/pipeline.html" class="chart-frame" loading="lazy" style="height:440px;margin-bottom:0;"></iframe>
+  <div style="font-size:0.55em;color:rgba(255,255,255,0.5);margin-top:2px;">
+    DataTrove orchestrates the pipeline. vLLM serves the model with optimized batching and prefix caching.
+  </div>
+  <aside class="notes">
+    ~1 min. "We built on DataTrove, our open-source data processing library.
+    The pipeline is Read → Transform → Write. The Transform step calls vLLM,
+    a high-throughput inference engine with tensor parallelism, chunked prefill, and prefix caching.
+    Everything runs on Slurm with checkpointing and auto-recovery.
+    Outputs go straight to a Hugging Face dataset with auto-generated cards."
+  </aside>
+</section>
+
+<!-- SLIDE 15: Throughput Optimization -->
+<section>
+  <p class="section-label">Infrastructure</p>
+  <h2>Throughput Optimization</h2>
+  <p style="font-size:0.55em;color:rgba(255,255,255,0.5);margin-bottom:8px;">
+    18 models benchmarked on H100 GPUs. Two tiers of optimization.
+  </p>
+  <iframe src="charts/throughput.html" class="chart-frame" loading="lazy" style="height:420px;"></iframe>
+  <aside class="notes">
+    ~1 min. "We benchmarked 18 models across two tiers of optimization.
+    Tier 0: tensor parallelism, batch sizes, sequence lengths. Tier 1: GPU memory utilization, speculative decoding.
+    For large MoE models like GPT-OSS-120B, Tier 0 alone gives 1.95x speedup, cutting cost by nearly half.
+    Speculative decoding helps small models but can hurt others (Gemma 3 regresses due to vocab size)."
+  </aside>
+</section>
+
+<!-- SLIDE 16: Cost-Performance -->
+<section>
+  <p class="section-label">Infrastructure</p>
+  <h2>Cost vs. Performance</h2>
+  <p style="font-size:0.55em;color:rgba(255,255,255,0.5);margin-bottom:8px;">
+    Small models + good prompts dominate the Pareto frontier.
+  </p>
+  <iframe src="charts/cost-efficiency.html" class="chart-frame" loading="lazy" style="height:420px;"></iframe>
+  <p class="fragment" style="font-size:0.6em;margin-top:4px;color:#f0c674;font-weight:600;">
+    Invest in prompt design, not model size.
+  </p>
+  <aside class="notes">
+    ~1 min. "This scatter plot shows GPU time vs downstream performance for all experiments.
+    The Pareto frontier is dominated by small models with structured prompts.
+    The baselines on the left have zero rephrasing cost. Our best synthetic setups
+    beat them while remaining cost-efficient. Key takeaway: optimize throughput first,
+    then worry about model size."
+  </aside>
+</section>
+
+<!-- ============================================================ -->
+<!-- SECTION 4: CONCLUSIONS (~20%, slides 17-21, ~4 min)          -->
+<!-- ============================================================ -->
+
+<!-- SLIDE 17: The FinePhrase Recipe -->
+<section>
+  <p class="section-label">Conclusion</p>
+  <h2>The FinePhrase Recipe</h2>
+  <div class="recipe-diagram fragment">
+    <div class="box">
+      <div style="font-size:1.4em;">📄</div>
+      <div style="font-weight:700;">Source Data</div>
+      <div style="font-size:0.85em;color:rgba(255,255,255,0.4);">Web text<br>(even low-quality)</div>
+    </div>
+    <div class="plus">+</div>
+    <div class="box">
+      <div style="font-size:1.4em;">📝</div>
+      <div style="font-weight:700;">Structured Prompt</div>
+      <div style="font-size:0.85em;color:rgba(255,255,255,0.4);">Math / Table /<br>FAQ / Tutorial</div>
+    </div>
+    <div class="plus">+</div>
+    <div class="box">
+      <div style="font-size:1.4em;">🤖</div>
+      <div style="font-weight:700;">SmolLM2-1.7B</div>
+      <div style="font-size:0.85em;color:rgba(255,255,255,0.4);">Small, fast,<br>diverse outputs</div>
+    </div>
+    <div class="equals">=</div>
+    <div class="box result">
+      <div style="font-size:1.4em;">✨</div>
+      <div style="font-weight:700;color:#7c6ff7;">FinePhrase</div>
+      <div style="font-size:0.85em;color:rgba(255,255,255,0.4);">Best synthetic<br>pretraining data</div>
+    </div>
+  </div>
+  <p class="fragment" style="font-size:0.6em;color:rgba(255,255,255,0.5);margin-top:20px;">
+    Mixed with high-quality original data (e.g., FineWeb-Edu) for best results.
+  </p>
+  <aside class="notes">
+    ~1 min. "Here's the recipe in one slide. Take any web text, even low-quality,
+    apply a structured prompt (Math, Table, FAQ, Tutorial), run it through SmolLM2-1.7B,
+    and mix the output with high-quality original data. That's FinePhrase.
+    It outperforms all tested baselines."
+  </aside>
+</section>
+
+<!-- SLIDE 18: What Surprised Us -->
+<section>
+  <p class="section-label">Conclusion</p>
+  <h2>What Surprised Us</h2>
+  <div class="surprise-grid fragment">
+    <div class="surprise-card">
+      <div class="icon">🤷</div>
+      <h4>Typos Don't Matter</h4>
+      <p>REWIRE's original prompt had typos. Fixing them made no measurable difference to downstream performance.</p>
+    </div>
+    <div class="surprise-card">
+      <div class="icon">📊</div>
+      <h4>Proxy Scores Lie</h4>
+      <p>Edu-score and DCLM-score do not reliably predict downstream performance. You must train and evaluate.</p>
+    </div>
+    <div class="surprise-card">
+      <div class="icon">🎲</div>
+      <h4>Messier Is Better</h4>
+      <p>Varied, inconsistent outputs from SmolLM2 beat Qwen3's polished, template-locked outputs every time.</p>
+    </div>
+  </div>
+  <aside class="notes">
+    ~1 min. "Three things that surprised us. First: typos in prompts don't matter.
+    REWIRE's prompt had actual typos and fixing them changed nothing.
+    Second: quality proxy scores like edu-score don't predict performance. You must train.
+    Third: messy, varied outputs consistently beat clean, polished ones. Diversity is king."
+  </aside>
+</section>
+
+<!-- SLIDE 19: Everything Is Open -->
+<section>
+  <p class="section-label">Open Source</p>
+  <h2>Everything Is Open</h2>
+  <div style="font-size:0.65em;margin-top:20px;">
+    <ul>
+      <li class="fragment">All prompts, configs, and pipeline code</li>
+      <li class="fragment">Generated datasets on the Hugging Face Hub</li>
+      <li class="fragment">Throughput benchmarks for 18 models</li>
+      <li class="fragment">Blog post with interactive charts</li>
+    </ul>
+    <div class="fragment" style="margin-top:30px;">
+      <p style="font-weight:700;color:#f0c674;font-size:1.1em;">Future directions:</p>
+      <ul style="color:rgba(255,255,255,0.5);">
+        <li>Diffusion LMs for faster inference</li>
+        <li>Scaling to more data (ablations trained on only 21B tokens)</li>
+        <li>Mixing ratio: how little synthetic data can you get away with?</li>
+        <li>Best-of-N filtering on synthetic outputs</li>
+      </ul>
+    </div>
+  </div>
+  <aside class="notes">
+    ~1 min. "We're releasing everything. All prompts, the pipeline code in DataTrove,
+    the generated datasets on the Hub, throughput benchmarks.
+    The blog post itself has interactive charts you can explore.
+    Future work: we're looking at diffusion LMs for faster inference,
+    scaling beyond our 21B token ablations, exploring mixing ratios to find how little
+    synthetic data you actually need, and using best-of-N filtering on synthetic outputs."
+  </aside>
+</section>
+
+<!-- SLIDE 20: Academia Hub -->
+<section>
+  <img src="assets/academia-hub.png" class="img-contain" style="max-height:560px;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,0.4);">
+  <aside class="notes">
+    ~30s. "If you're at a university or research lab, check out our Academia Hub:
+    institution-wide access to the Hugging Face Hub with priority GPU access,
+    inference credits, storage, and enterprise admin."
+  </aside>
+</section>
+
+<!-- SLIDE 21: Q&A -->
+<section class="center-slide">
+  <h2>Thank You</h2>
+  <p style="font-size:0.6em;color:rgba(255,255,255,0.5);margin-top:10px;">Questions?</p>
+  <div style="display:flex;align-items:center;justify-content:center;gap:28px;margin-top:30px;">
+    <img src="assets/profile.jpg" style="width:90px;height:90px;border-radius:50%;border:2px solid rgba(255,255,255,0.15);object-fit:cover;">
+    <div style="text-align:left;font-size:0.55em;">
+      <div style="font-weight:700;font-size:1.2em;margin-bottom:8px;">Joel Niklaus</div>
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="rgba(255,255,255,0.7)"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+        <a href="https://linkedin.com/in/joelniklaus" target="_blank" style="color:rgba(255,255,255,0.7);text-decoration:none;">joelniklaus</a>
+      </div>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="rgba(255,255,255,0.7)"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+        <a href="https://x.com/joelniklaus" target="_blank" style="color:rgba(255,255,255,0.7);text-decoration:none;">@joelniklaus</a>
+      </div>
+    </div>
+  </div>
+  <p style="margin-top:24px;font-size:0.55em;color:rgba(255,255,255,0.4);">
+    Stay tuned for the blog post with many more details.
+  </p>
+  <aside class="notes">
+    Q&A time. Mention they can reach out on LinkedIn or X. Have the blog open in a browser tab
+    for live demos if questions come up.
+  </aside>
+</section>
+
+</div><!-- /slides -->
+</div><!-- /reveal -->
+
+<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/notes/notes.js"></script>
+<script>
+  Reveal.initialize({
+    hash: true,
+    slideNumber: 'c/t',
+    showSlideNumber: 'speaker',
+    transition: 'fade',
+    transitionSpeed: 'fast',
+    center: false,
+    width: 1200,
+    height: 700,
+    margin: 0.06,
+    plugins: [RevealNotes],
+  });
+</script>
+</body>
+</html>

app/presentation/se2026/style.css

@@ -0,0 +1,298 @@
+:root {
+  --text-color: rgba(255,255,255,0.88);
+  --muted-color: rgba(255,255,255,0.45);
+  --surface-bg: rgba(30,30,40,0.95);
+  --border-color: rgba(255,255,255,0.1);
+  --axis-color: rgba(255,255,255,0.15);
+  --tick-color: rgba(255,255,255,0.5);
+  --grid-color: rgba(255,255,255,0.06);
+  --primary-color: #7c6ff7;
+  --danger: #e05252;
+}
+
+html { data-theme: dark; }
+
+.reveal {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+.reveal h1, .reveal h2, .reveal h3 {
+  font-weight: 700;
+  text-transform: none;
+  letter-spacing: -0.02em;
+}
+
+.reveal .slides section {
+  top: 0 !important;
+  padding-top: 5px;
+}
+
+.reveal .slides section.center-slide {
+  top: auto !important;
+  display: flex !important;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  padding-top: 0;
+}
+
+.reveal h2 {
+  font-size: 1.6em;
+  margin-top: 0;
+  margin-bottom: 0.3em;
+}
+
+.reveal h3 {
+  font-size: 1.15em;
+  color: rgba(255,255,255,0.6);
+  font-weight: 500;
+  margin-bottom: 0.4em;
+}
+
+.reveal .subtitle {
+  font-size: 0.55em;
+  font-weight: 400;
+  color: rgba(255,255,255,0.5);
+  margin-top: 0.3em;
+}
+
+.reveal .section-label {
+  font-size: 0.5em;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: #7c6ff7;
+  margin-bottom: 0.1em;
+}
+
+.reveal ul {
+  list-style: none;
+  padding-left: 0;
+  font-size: 0.75em;
+}
+
+.reveal ul li {
+  margin-bottom: 0.5em;
+  padding-left: 1.2em;
+  position: relative;
+}
+
+.reveal ul li::before {
+  content: '→';
+  position: absolute;
+  left: 0;
+  color: #7c6ff7;
+}
+
+.reveal .accent {
+  color: #7c6ff7;
+}
+
+.reveal .highlight {
+  color: #f0c674;
+}
+
+.reveal .danger {
+  color: #e05252;
+}
+
+.reveal .big-number {
+  font-size: 3em;
+  font-weight: 800;
+  line-height: 1.1;
+  color: #7c6ff7;
+}
+
+.reveal .big-number .unit {
+  font-size: 0.35em;
+  font-weight: 500;
+  color: rgba(255,255,255,0.5);
+}
+
+.stat-row {
+  display: flex;
+  justify-content: center;
+  gap: 60px;
+  margin: 30px 0;
+}
+
+.stat-box {
+  text-align: center;
+}
+
+.stat-box .num {
+  font-size: 2.2em;
+  font-weight: 800;
+  color: #7c6ff7;
+  line-height: 1.1;
+}
+
+.stat-box .label {
+  font-size: 0.55em;
+  color: rgba(255,255,255,0.5);
+  margin-top: 4px;
+}
+
+.two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  text-align: left;
+  align-items: start;
+}
+
+.two-col .col {
+  padding: 0;
+}
+
+.before-after {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+  align-items: start;
+  font-size: 0.52em;
+  text-align: left;
+}
+
+.before-after .arrow {
+  font-size: 2em;
+  color: #7c6ff7;
+  align-self: center;
+  padding-top: 20px;
+}
+
+.before-after .panel {
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 12px;
+  padding: 18px 20px;
+  line-height: 1.5;
+}
+
+.before-after .panel.bad {
+  border-color: rgba(224,82,82,0.3);
+}
+
+.before-after .panel.good {
+  border-color: rgba(124,111,247,0.3);
+}
+
+.before-after .panel-title {
+  font-weight: 700;
+  font-size: 1.1em;
+  margin-bottom: 8px;
+}
+
+.before-after .panel.bad .panel-title {
+  color: #e05252;
+}
+
+.before-after .panel.good .panel-title {
+  color: #7c6ff7;
+}
+
+.chart-frame {
+  width: 100%;
+  height: 480px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+}
+
+.chart-frame.tall {
+  height: 540px;
+}
+
+.chart-frame.short {
+  height: 400px;
+}
+
+.img-contain {
+  max-width: 100%;
+  max-height: 480px;
+  border-radius: 8px;
+}
+
+.recipe-diagram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  font-size: 0.75em;
+  margin: 30px 0;
+}
+
+.recipe-diagram .box {
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 12px;
+  padding: 16px 22px;
+  text-align: center;
+  min-width: 120px;
+}
+
+.recipe-diagram .box.result {
+  border-color: rgba(124,111,247,0.4);
+  background: rgba(124,111,247,0.08);
+}
+
+.recipe-diagram .plus {
+  font-size: 1.8em;
+  color: rgba(255,255,255,0.3);
+}
+
+.recipe-diagram .equals {
+  font-size: 1.8em;
+  color: #7c6ff7;
+}
+
+.takeaway-list {
+  font-size: 0.65em;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.takeaway-list li {
+  margin-bottom: 0.7em;
+  line-height: 1.5;
+}
+
+.qr-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  margin-top: 20px;
+}
+
+.surprise-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+  font-size: 0.6em;
+  text-align: left;
+}
+
+.surprise-card {
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.surprise-card .icon {
+  font-size: 1.6em;
+  margin-bottom: 8px;
+}
+
+.surprise-card h4 {
+  font-size: 1.05em;
+  margin: 0 0 8px 0;
+  color: #f0c674;
+}
+
+.surprise-card p {
+  margin: 0;
+  color: rgba(255,255,255,0.6);
+  line-height: 1.5;
+}