update charts

app/src/components/Accordion.astro

@@ -101,6 +101,11 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     position: relative;
   }
 
+  .accordion[size="big"] .accordion__summary {
+    padding: 16px;
+  }
+
+
   /* Remove conditional padding to avoid jump on close */
 
   /* Remove native marker */
@@ -160,6 +165,7 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     padding: 0;
   }
 
+
   /* Separator between header and content when open (edge-to-edge) */
   .accordion[open] .accordion__content-wrapper::before {
     content: "";
@@ -178,6 +184,7 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     outline-offset: 3px;
     border-radius: 8px;
   }
+  
 
 
 </style>

app/src/content/article.mdx

@@ -67,7 +67,7 @@ Projects like The Cauldron, LLaVa and Cambrian aim to provide such datasets, but
 We manually collect **over 180** image-text datasets from the recent literature and create new subsets in lacking domains.
 
 <Wide>
-<Accordion title="FineVision Subsets">
+<Accordion size="big" title="FineVision Subsets">
 |Subset Name                           |Total Images|Total Samples|Total Turns|Total Question Tokens|Total Answer Tokens|Category              |Source                                                             |
 |--------------------------------------|------------|-------------|-----------|---------------------|-------------------|----------------------|-------                                                            |
 |coco_colors                           |118,287     |118,287      |118,287    |1,301,157            |6,376,672          |Captioning & Knowledge|[@noauthor_hazal-karakusmscoco-controlnet]                         |

app/src/content/embeds/against-baselines-deduplicated.html

@@ -180,6 +180,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -428,9 +429,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -531,11 +550,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -552,7 +572,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -560,7 +586,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/against-baselines.html

@@ -177,7 +177,9 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
+      const gErrors = gRoot.append('g').attr('class', 'errors');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
       const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
@@ -425,9 +427,28 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            // Build polygon path going forward on upper bound and back on lower bound
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -439,6 +460,9 @@
           .attr('d', d=>lineGen(d.values));
         paths.exit().remove();
 
+        // Remove candle-like error bars in favor of filled areas
+        gErrors.selectAll('*').remove();
+
         // Draw markers for each data point
         gPoints.selectAll('*').remove();
         series.forEach((s, seriesIndex) => {
@@ -528,11 +552,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +574,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +588,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/all-ratings.html

@@ -177,6 +177,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -425,9 +426,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -528,11 +547,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +569,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +583,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/filters-quad.html

@@ -90,6 +90,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class','grid');
       const gAxes = gRoot.append('g').attr('class','axes');
+      const gAreas = gRoot.append('g').attr('class','areas');
       const gLines = gRoot.append('g').attr('class','lines');
       const gPoints = gRoot.append('g').attr('class','points');
       const gHover = gRoot.append('g').attr('class','hover');
@@ -186,7 +187,21 @@
 
         const { innerWidth, innerHeight } = updateScales();
 
-        const series = runs.map((r, i) => ({ run:r, color: pool[i % pool.length], marker: markerShapes[i % markerShapes.length], values:(map[r]||[]).slice().sort((a,b)=>a.step-b.step).map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt) }));
+        const series = runs.map((r, i) => ({ run:r, color: pool[i % pool.length], marker: markerShapes[i % markerShapes.length], values:(map[r]||[]).slice().sort((a,b)=>a.step-b.step).map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt) }));
+
+        // zones ± stderr (métriques non rank)
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (!withErr.length) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path').attr('d', pathData).attr('fill', s.color).attr('opacity', 0.15).attr('stroke', 'none');
+          });
+        }
 
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2).attr('opacity',0.9)
@@ -216,7 +231,7 @@
         const hoverLine = gHover.append('line').attr('stroke','rgba(0,0,0,0.25)').attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
         const stepSet = new Set(); series.forEach(s=>s.values.forEach(v=>stepSet.add(v.step))); const steps = Array.from(stepSet).sort((a,b)=>a-b);
         function onMove(ev){ const [mx,my]=d3.pointer(ev, overlay.node()); const nearest = steps.reduce((best,s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]); const xpx = xScale(nearest); hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
-          let html = `<div><strong>${titleText}</strong></div><div><strong>step</strong> ${nearest}</div>`; series.forEach(s=>{ const m = new Map(s.values.map(v=>[v.step, v.value])); const val = m.get(nearest); if (val!=null){ html+=`<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${isRankStrictFlag ? d3.format('d')(val) : (+val).toFixed(4)}</div>`; }});
+          let html = `<div><strong>${titleText}</strong></div><div><strong>step</strong> ${nearest}</div>`; series.forEach(s=>{ const m = new Map(s.values.map(v=>[v.step, v])); const pt = m.get(nearest); if (pt && pt.value!=null){ const fmt = (vv)=> (isRankStrictFlag? d3.format('d')(vv) : (+vv).toFixed(4)); const err = (pt.stderr!=null && isFinite(pt.stderr) && pt.stderr>0) ? ` ± ${fmt(pt.stderr)}` : ''; html+=`<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${fmt(pt.value)}${err}</div>`; }});
           tipInner.innerHTML = html; const offsetX=12, offsetY=12; tip.style.opacity='1'; tip.style.transform=`translate(${Math.round(mx+offsetX+margin.left)}px, ${Math.round(my+offsetY+margin.top)}px)`; }
         function onLeave(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); }
         overlay.on('mousemove', onMove).on('mouseleave', onLeave);
@@ -237,10 +252,10 @@
             try { const r = await fetch(p, { cache:'no-cache' }); if (r.ok) { text = await r.text(); break; } } catch(e){}
           }
           if (text == null) throw new Error(`CSV not found: ${file}`);
-          const rows = d3.csvParse(text, d => ({ run:(d.run||'').trim(), step:+d.step, metric:(d.metric||'').trim(), value:+d.value }));
+          const rows = d3.csvParse(text, d => ({ run:(d.run||'').trim(), step:+d.step, metric:(d.metric||'').trim(), value:+d.value, stderr: (d.stderr!=null && d.stderr!=='') ? +d.stderr : null }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort(); runOrder = runList;
-          metricList.forEach(m => { const map={}; runList.forEach(r=>map[r]=[]); rows.filter(r=>r.metric===m).forEach(r=>{ if(!isNaN(r.step)&&!isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); }); dataByMetric.set(m, map); });
+          metricList.forEach(m => { const map={}; runList.forEach(r=>map[r]=[]); rows.filter(r=>r.metric===m).forEach(r=>{ if(!isNaN(r.step)&&!isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); }); dataByMetric.set(m, map); });
           const def = metricList.find(m => /average_rank/i.test(m)) || metricList[0];
           renderMetric(def);
           const ro = window.ResizeObserver ? new ResizeObserver(()=>renderMetric(def)) : null; if (ro) ro.observe(cell);

app/src/content/embeds/formatting-filters.html

@@ -177,6 +177,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -425,9 +426,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -528,11 +547,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +569,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +583,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/image-correspondence-filters.html

@@ -177,6 +177,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -425,9 +426,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -528,11 +547,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +569,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +583,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/internal-deduplication.html

@@ -177,6 +177,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -425,9 +426,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -528,11 +547,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +569,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +583,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/relevance-filters.html

@@ -177,6 +177,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -425,9 +426,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -528,11 +547,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +569,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +583,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/remove-ch.html

@@ -177,6 +177,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -425,9 +426,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -528,11 +547,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +569,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +583,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/s25-ratings.html

@@ -177,6 +177,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -425,9 +426,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -528,11 +547,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +569,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +583,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/ss-vs-s1.html

@@ -177,6 +177,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -425,9 +426,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -528,11 +547,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +569,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +583,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });
 

app/src/content/embeds/visual-dependency-filters.html

@@ -177,6 +177,7 @@
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gAreas = gRoot.append('g').attr('class', 'areas');
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
@@ -425,9 +426,27 @@
           values: (map[r]||[])
             .slice()
             .sort((a,b)=>a.step-b.step)
-            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value), stderr: pt.stderr } : pt)
         }));
 
+        // Uncertainty area (± stderr) for non-rank metrics
+        gAreas.selectAll('*').remove();
+        if (!isRank) {
+          series.forEach((s) => {
+            const withErr = s.values.filter(v => v && v.stderr != null && isFinite(v.stderr) && v.stderr > 0 && isFinite(v.value));
+            if (withErr.length === 0) return;
+            const upper = withErr.map(d => [xScale(d.step), yScale(d.value + d.stderr)]);
+            const lower = withErr.slice().reverse().map(d => [xScale(d.step), yScale(d.value - d.stderr)]);
+            const coords = upper.concat(lower);
+            const pathData = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveLinearClosed)(coords);
+            gAreas.append('path')
+              .attr('d', pathData)
+              .attr('fill', s.color)
+              .attr('opacity', 0.15)
+              .attr('stroke', 'none');
+          });
+        }
+
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
@@ -528,11 +547,12 @@
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
           series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v.value]));
-            const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) {
               const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
             }
           });
           tipInner.innerHTML = html;
@@ -549,7 +569,13 @@
       (async () => {
         try {
           const text = await fetchFirstAvailable(CSV_PATHS);
-          const rows = d3.csvParse(text, d => ({ run: (d.run||'').trim(), step: +d.step, metric: (d.metric||'').trim(), value: +d.value }));
+          const rows = d3.csvParse(text, d => ({
+            run: (d.run||'').trim(),
+            step: +d.step,
+            metric: (d.metric||'').trim(),
+            value: +d.value,
+            stderr: (d.stderr != null && d.stderr !== '') ? +d.stderr : null
+          }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
           runOrder = runList;
@@ -557,7 +583,7 @@
           metricList.forEach(m => {
             const map = {};
             runList.forEach(r => { map[r] = []; });
-            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value }); });
+            rows.filter(r=>r.metric===m).forEach(r => { if (!isNaN(r.step) && !isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); });
             dataByMetric.set(m, map);
           });