Chart: include negatives in x-axis range, bump trailing pad to 15%, clip:false on scatters

static/index.html

@@ -1842,15 +1842,21 @@ function renderChart(entries) {
   const bestEntries = sorted.filter(e => e.isRecord);
   const nonBestEntries = sorted.filter(e => !e.isRecord);
 
-  // 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.
+  // X axis covers BOTH agent-runs and negatives so no dot sits exactly on
+  // the right edge (which Chart.js would clip). Fallback to a window around
+  // "now" when no agent-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 negDates = negativeEntries.map(e => new Date(e.date).getTime());
+  const allDotDates = [...runDates, ...negDates];
+  const minDate = allDotDates.length ? Math.min(...allDotDates) : now - 30 * 60 * 1000;
+  const latestDate = allDotDates.length ? Math.max(...allDotDates) : now;
   const timeRange = latestDate - minDate || 3600000;
   const datePadding = timeRange * 0.05;
-  const extendedEnd = latestDate + timeRange * 0.08;
+  // 15% trailing breathing room past the latest dot so labels and the
+  // running-best line extension have somewhere to live.
+  const extendedEnd = latestDate + timeRange * 0.15;
   const xMin = minDate - datePadding;
 
   const bestLineData = bestEntries.map(e => ({ x: new Date(e.date).getTime(), y: e.score, agent: e.agent }));
@@ -1860,10 +1866,9 @@ 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 }));
-  // Negatives: clamp dates that may sit outside the run range (e.g. an early
-  // negative posted before the first agent-run) into [xMin, extendedEnd] so
-  // the dot is visible. Original date is preserved in `_origDate` for the
-  // tooltip so the hover-info still shows the real timestamp.
+  // Negatives now use their real timestamps directly — the x-axis is wide
+  // enough to include them. Defensive clamp keeps any pathological out-of-
+  // range value visible. _origDate is preserved for the tooltip.
   const negativeData = negativeEntries.map(e => {
     const t = new Date(e.date).getTime();
     const clamped = Math.max(xMin, Math.min(extendedEnd, t));
@@ -1939,11 +1944,11 @@ function renderChart(entries) {
     data: {
       datasets: [
         { 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 },
+        { label: 'Records', data: bestScatter, type: 'scatter', backgroundColor: HF_ORANGE, borderColor: '#fff', borderWidth: 2, pointRadius: 7, pointHoverRadius: 9, pointStyle: 'circle', order: 1, clip: false },
+        { label: 'Non-Records', data: nonBestData, type: 'scatter', backgroundColor: NON_BEST_COLOR, borderColor: '#fff', borderWidth: 1.5, pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 0, clip: false },
         // Negatives: same styling as Non-Records, also unlabeled. Tooltip
         // on hover identifies any non-record dot.
-        { label: 'Negatives', data: negativeData, type: 'scatter', backgroundColor: NON_BEST_COLOR, borderColor: '#fff', borderWidth: 1.5, pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 0 },
+        { label: 'Negatives', data: negativeData, type: 'scatter', backgroundColor: NON_BEST_COLOR, borderColor: '#fff', borderWidth: 1.5, pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 0, clip: false },
         ...baselineDatasets,
       ],
     },