From 043f4327bf9083b35661ad2c4e33b6b5cc14e1e9 Mon Sep 17 00:00:00 2001
From: AIRO Coding Agent <airo-coding-agent@users.noreply.github.com>
Date: Mon, 26 Oct 2026 21:48:52 +0000
Subject: [PATCH] Place methodology label beside timeline marker above x-axis

---
 index.html                    | 18 +++++++++++-------
 web/demo/19-live-timeline.jsx | 18 +++++++++++-------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 33d6476..9e3e9d4 100644
--- a/index.html
+++ b/index.html
@@ -697,9 +697,17 @@
         ))}
         {axisEnd > days[n - 1] && W - pad.r - xs[n - 1] >= labelGap && <text x={W - pad.r} y={H - 18} textAnchor="end"
           fontSize="12" fill="var(--ink-faint)" fontWeight="600">Dec 31</text>}
-        {showChange && <line x1={xDay(changeDay)} x2={xDay(changeDay)}
-          y1={pad.t} y2={H - pad.b} stroke="#cf222e" strokeWidth="1.5"
-          strokeDasharray="1 4" strokeLinecap="round" />}
+        {showChange && <g>
+          <line x1={xDay(changeDay)} x2={xDay(changeDay)}
+            y1={pad.t} y2={H - pad.b} stroke="#cf222e" strokeWidth="1.5"
+            strokeDasharray="1 4" strokeLinecap="round" />
+          <text x={xDay(changeDay) + 8} y={H - pad.b - 38}
+            fill="#cf222e" fontSize="11" pointerEvents="none">
+            <tspan x={xDay(changeDay) + 8}>Oct 21, 2026</tspan>
+            <tspan x={xDay(changeDay) + 8} dy="14">Methodology change to add</tspan>
+            <tspan x={xDay(changeDay) + 8} dy="14">more prompting strategies</tspan>
+          </text>
+        </g>}
         {/* Historical model answers are revealed only for the active date. */}
         {series.map(s => (
           <g key={s.label}>
@@ -751,10 +759,6 @@
         ))}
       </svg>
 
-      {showChange && <div style={{ color: "#cf222e", fontSize: 11, marginTop: 2 }}>
-        Oct 21, 2026: Methodology change to add more prompting strategies
-      </div>}
-
       {hovered && (
         <PointTooltip anchor={active.anchor}>
           {hoveredModels.map(([label, val]) => (
diff --git a/web/demo/19-live-timeline.jsx b/web/demo/19-live-timeline.jsx
index 79702a9..ba26480 100644
--- a/web/demo/19-live-timeline.jsx
+++ b/web/demo/19-live-timeline.jsx
@@ -209,9 +209,17 @@ function TimelineChart({ q, snapshots, horizon, scale }) {
         ))}
         {axisEnd > days[n - 1] && W - pad.r - xs[n - 1] >= labelGap && <text x={W - pad.r} y={H - 18} textAnchor="end"
           fontSize="12" fill="var(--ink-faint)" fontWeight="600">Dec 31</text>}
-        {showChange && <line x1={xDay(changeDay)} x2={xDay(changeDay)}
-          y1={pad.t} y2={H - pad.b} stroke="#cf222e" strokeWidth="1.5"
-          strokeDasharray="1 4" strokeLinecap="round" />}
+        {showChange && <g>
+          <line x1={xDay(changeDay)} x2={xDay(changeDay)}
+            y1={pad.t} y2={H - pad.b} stroke="#cf222e" strokeWidth="1.5"
+            strokeDasharray="1 4" strokeLinecap="round" />
+          <text x={xDay(changeDay) + 8} y={H - pad.b - 38}
+            fill="#cf222e" fontSize="11" pointerEvents="none">
+            <tspan x={xDay(changeDay) + 8}>Oct 21, 2026</tspan>
+            <tspan x={xDay(changeDay) + 8} dy="14">Methodology change to add</tspan>
+            <tspan x={xDay(changeDay) + 8} dy="14">more prompting strategies</tspan>
+          </text>
+        </g>}
         {/* Historical model answers are revealed only for the active date. */}
         {series.map(s => (
           <g key={s.label}>
@@ -263,10 +271,6 @@ function TimelineChart({ q, snapshots, horizon, scale }) {
         ))}
       </svg>
 
-      {showChange && <div style={{ color: "#cf222e", fontSize: 11, marginTop: 2 }}>
-        Oct 21, 2026: Methodology change to add more prompting strategies
-      </div>}
-
       {hovered && (
         <PointTooltip anchor={active.anchor}>
           {hoveredModels.map(([label, val]) => (