Change tooltip stickiness

index.html

@@ -105,7 +105,7 @@
     padding: 12px 14px; min-width: 248px; max-width: 320px;
     border-radius: 4px;
     opacity: 0; visibility: hidden; transform: translateY(2px);
-    transition: opacity 0.12s, transform 0.12s;
+    transition: opacity 0.16s ease-out, transform 0.16s ease-out;
     pointer-events: none;
   }
   .point-card.visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
@@ -482,6 +482,50 @@ function renderChart() {
 const pointCard = document.getElementById('pointCard');
 let pcHideTimer = null;
 let pcSticky = false;
+let cardAnchor = null;             // screen coords of the dot the card points at
+const cursor = { x: -1, y: -1 };
+// Track the pointer everywhere (capture phase, so it updates before Chart's
+// own hover handler runs) — the "safe corridor" test below needs to know
+// whether the cursor is travelling from the dot toward the card.
+document.addEventListener('mousemove', e => { cursor.x = e.clientX; cursor.y = e.clientY; }, true);
+
+// Convex hull (monotone chain) + point-in-polygon. Together they form a
+// forgiving hover corridor between the anchored dot and the card: while the
+// cursor is inside it, the card stays put and other dots can't hijack it — so
+// the user can actually reach the card and click its links.
+function convexHull(pts) {
+  const p = pts.slice().sort((a, b) => a.x - b.x || a.y - b.y);
+  if (p.length < 3) return p;
+  const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+  const lower = [];
+  for (const pt of p) { while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], pt) <= 0) lower.pop(); lower.push(pt); }
+  const upper = [];
+  for (let i = p.length - 1; i >= 0; i--) { const pt = p[i]; while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], pt) <= 0) upper.pop(); upper.push(pt); }
+  lower.pop(); upper.pop();
+  return lower.concat(upper);
+}
+function pointInPolygon(pt, poly) {
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const xi = poly[i].x, yi = poly[i].y, xj = poly[j].x, yj = poly[j].y;
+    if (((yi > pt.y) !== (yj > pt.y)) && (pt.x < (xj - xi) * (pt.y - yi) / (yj - yi) + xi)) inside = !inside;
+  }
+  return inside;
+}
+function cardVisible() { return pointCard.classList.contains('visible'); }
+// True while the cursor is over the (padded) card or inside the hull spanning
+// from the anchored dot to it — i.e. plausibly on its way to the card.
+function inSafeCorridor() {
+  if (!cardVisible() || !cardAnchor) return false;
+  const r = pointCard.getBoundingClientRect();
+  const pad = 14;
+  if (cursor.x >= r.left - pad && cursor.x <= r.right + pad && cursor.y >= r.top - pad && cursor.y <= r.bottom + pad) return true;
+  const corners = [
+    { x: r.left - pad, y: r.top - pad }, { x: r.right + pad, y: r.top - pad },
+    { x: r.right + pad, y: r.bottom + pad }, { x: r.left - pad, y: r.bottom + pad },
+  ];
+  return pointInPolygon(cursor, convexHull([cardAnchor, ...corners]));
+}
 
 function buildPointCardHtml(e) {
   const info = AGENTS[e.agent] || null;
@@ -512,7 +556,11 @@ function buildPointCardHtml(e) {
 
   const linkBtns = [];
   if (e.filename) linkBtns.push(`<a href="${escapeHtml(submissionHref(e.filename))}" target="_blank" rel="noopener noreferrer">Submission ↗</a>`);
-  (e.links || []).forEach(l => linkBtns.push(`<a href="${escapeHtml(l.href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(l.label)} ↗</a>`));
+  // The artifacts dir holds the run's code, so surface it as "Code" for clarity.
+  (e.links || []).forEach(l => {
+    const label = l.label.replace(/^Artifacts/i, 'Code');
+    linkBtns.push(`<a href="${escapeHtml(l.href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)} ↗</a>`);
+  });
 
   return `${head}<div class="pc-score"><span class="big">${fmt2(e.score)}</span> tok/s ${verified}</div><div class="pc-rows">${rowsHtml}</div>${note}<div class="pc-links">${linkBtns.join('')}</div>`;
 }
@@ -532,6 +580,7 @@ function showPointCard(entry, c, element) {
   const rect = c.canvas.getBoundingClientRect();
   const px = rect.left + element.x;
   const py = rect.top + element.y;
+  cardAnchor = { x: px, y: py };
   const w = pointCard.offsetWidth, h = pointCard.offsetHeight;
   let left = px + 14;
   if (left + w > window.innerWidth - 8) left = px - w - 14;
@@ -544,12 +593,16 @@ function showPointCard(entry, c, element) {
 }
 function hidePointCard() {
   pcSticky = false;
+  cardAnchor = null;
   pointCard.classList.remove('visible');
   pointCard.setAttribute('aria-hidden', 'true');
 }
-function scheduleHide() { if (!pcSticky) pcHideTimer = setTimeout(hidePointCard, 170); }
+function scheduleHide() { if (pcSticky) return; clearTimeout(pcHideTimer); pcHideTimer = setTimeout(hidePointCard, 300); }
 
 function handleChartHover(evt, elements, c) {
+  // Cursor is over the card or travelling toward it → keep the current card,
+  // and don't let an intervening dot swap it out from under the user.
+  if (inSafeCorridor()) { clearTimeout(pcHideTimer); return; }
   if (elements && elements.length) {
     const entry = entryFromElement(elements[0], c);
     if (entry) { pcSticky = false; showPointCard(entry, c, elements[0].element); return; }