Render baselines as horizontal reference lines, not timeline points

static/index.html

@@ -1613,18 +1613,31 @@ const GRID_COLOR = 'rgba(0,0,0,0.05)';
 function renderChart(entries) {
   if (!window.Chart) return;
   if (chart) { chart.destroy(); chart = null; }
-  const sorted = [...entries].sort((a, b) => new Date(a.date) - new Date(b.date));
+
+  // Baselines are fixed historical references, not events on this collab's
+  // timeline. Render them as horizontal dashed lines, not as points that
+  // contribute to the running-best curve.
+  const runEntries = entries.filter(e => e.agent !== 'baseline');
+  const baselineEntries = [...entries]
+    .filter(e => e.agent === 'baseline')
+    .sort((a, b) => a.score - b.score);
+
+  const sorted = [...runEntries].sort((a, b) => new Date(a.date) - new Date(b.date));
   let runningBest = Infinity;
   sorted.forEach(e => { e.isRecord = e.score < runningBest; if (e.isRecord) runningBest = e.score; });
   const bestEntries = sorted.filter(e => e.isRecord);
   const nonBestEntries = sorted.filter(e => !e.isRecord);
 
-  const allDates = sorted.map(e => new Date(e.date).getTime());
-  const minDate = Math.min(...allDates);
-  const latestDate = Math.max(...allDates);
+  // X axis: based on agent runs only. Fallback to a window around "now" when
+  // no runs exist yet, so baselines still have a sensible x-range to span.
+  const now = Date.now();
+  const runDates = sorted.map(e => new Date(e.date).getTime());
+  const minDate = runDates.length ? Math.min(...runDates) : now - 30 * 60 * 1000;
+  const latestDate = runDates.length ? Math.max(...runDates) : now;
   const timeRange = latestDate - minDate || 3600000;
   const datePadding = timeRange * 0.05;
   const extendedEnd = latestDate + timeRange * 0.08;
+  const xMin = minDate - datePadding;
 
   const bestLineData = bestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
   if (bestLineData.length) {
@@ -1634,9 +1647,10 @@ function renderChart(entries) {
   const bestScatter = bestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
   const nonBestData = nonBestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
 
-  const allScores = sorted.map(e => e.score);
-  const minScore = Math.min(...allScores);
-  const maxScore = Math.max(...allScores);
+  // Y axis covers runs *and* baselines so baseline lines aren't clipped.
+  const allScores = [...sorted.map(e => e.score), ...baselineEntries.map(e => e.score)];
+  const minScore = allScores.length ? Math.min(...allScores) : 14_000_000;
+  const maxScore = allScores.length ? Math.max(...allScores) : 25_000_000;
   const scorePad = (maxScore - minScore) * 0.2 || 100;
 
   const bestLabels = {
@@ -1698,6 +1712,62 @@ function renderChart(entries) {
     }
   };
 
+  // Horizontal dashed line per baseline, spanning the full visible x-range.
+  // Added *after* the three core datasets so the bestLabels (idx 1) and
+  // nonBestLabels (idx 2) plugins continue to find their dataset metas.
+  const BASELINE_COLOR = 'rgba(107,114,128,0.55)';
+  const baselineDatasets = baselineEntries.map(e => ({
+    label: `baseline · ${e.method || ''}`,
+    data: [{ x: xMin, y: e.score }, { x: extendedEnd, y: e.score }],
+    type: 'line',
+    borderColor: BASELINE_COLOR,
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderDash: [5, 4],
+    pointRadius: 0,
+    pointHoverRadius: 0,
+    fill: false,
+    tension: 0,
+    order: 100,
+  }));
+
+  // Right-edge label per baseline. Stack vertically when y-values cluster.
+  const baselineLabels = {
+    id: 'baselineLabels',
+    afterDatasetsDraw(c) {
+      if (!baselineEntries.length) return;
+      const ctx2 = c.ctx;
+      const a = c.chartArea;
+      const yScale = c.scales.y;
+      ctx2.save();
+      ctx2.font = '500 10px "JetBrains Mono", monospace';
+      const placed = [];
+      // Draw smallest-score (top of chart) first so stacking pushes downward.
+      baselineEntries.forEach(e => {
+        const text = `${e.method || 'baseline'}  ${e.score.toLocaleString()}`;
+        const tw = ctx2.measureText(text).width;
+        const px = 6, boxH = 18, boxW = tw + px * 2;
+        let yc = yScale.getPixelForValue(e.score);
+        for (const p of placed) {
+          if (Math.abs(yc - p) < boxH + 2) yc = p + boxH + 2;
+        }
+        placed.push(yc);
+        let lx = a.right - boxW - 4;
+        let ly = yc - boxH / 2;
+        if (ly < a.top) ly = a.top + 1;
+        if (ly + boxH > a.bottom) ly = a.bottom - boxH - 1;
+        ctx2.fillStyle = 'rgba(243,244,246,0.95)';
+        ctx2.strokeStyle = 'rgba(107,114,128,0.45)';
+        ctx2.lineWidth = 1;
+        ctx2.beginPath(); ctx2.roundRect(lx, ly, boxW, boxH, 5); ctx2.fill(); ctx2.stroke();
+        ctx2.fillStyle = '#6b7280';
+        ctx2.textBaseline = 'middle';
+        ctx2.fillText(text, lx + px, ly + boxH / 2);
+      });
+      ctx2.restore();
+    },
+  };
+
   const ctx = document.getElementById('evolutionChart').getContext('2d');
   chart = new Chart(ctx, {
     type: 'line',
@@ -1706,6 +1776,7 @@ function renderChart(entries) {
         { label: 'Running Best', data: bestLineData, borderColor: HF_ORANGE, backgroundColor: HF_ORANGE_DIM, borderWidth: 2.5, stepped: 'after', fill: true, pointRadius: 0, pointHoverRadius: 0, tension: 0, order: 2 },
         { label: 'Records', data: bestScatter, type: 'scatter', backgroundColor: HF_ORANGE, borderColor: '#fff', borderWidth: 2, pointRadius: 7, pointHoverRadius: 9, pointStyle: 'circle', order: 1 },
         { label: 'Non-Records', data: nonBestData, type: 'scatter', backgroundColor: NON_BEST_COLOR, borderColor: '#fff', borderWidth: 1.5, pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 0 },
+        ...baselineDatasets,
       ],
     },
     options: {
@@ -1720,6 +1791,8 @@ function renderChart(entries) {
           titleFont: { family: "'Source Sans 3', sans-serif", size: 12, weight: '700' },
           bodyFont: { family: "'JetBrains Mono', monospace", size: 11 },
           titleColor: '#fff', bodyColor: '#d1d5db',
+          // Skip tooltip points that aren't real run events (baselines, line extensions).
+          filter: it => it.datasetIndex < 3 && it.raw && !it.raw._ext && it.raw.agent,
           callbacks: {
             title: items => items[0]?.raw?.agent || '',
             label: it => { const d = new Date(it.raw.x); return [`Bytes: ${it.raw.y.toLocaleString()}`, `Date: ${d.toLocaleString()}`]; }
@@ -1752,7 +1825,7 @@ function renderChart(entries) {
       },
       interaction: { mode: 'nearest', intersect: true },
     },
-    plugins: [bestLabels, nonBestLabels],
+    plugins: [bestLabels, nonBestLabels, baselineLabels],
   });
 }