Harden repo-intel against edge cases in URLs, refs, and avatars

- Replace inline `onerror=` JS on avatar imgs with a delegated error
  handler that reads data-attributes. Inline handlers go through HTML
  entity decoding before JS parsing, so a contributor whose name
  starts with a single quote could close the string literal and break
  (or inject into) the fallback construction.
- Guard the GraphQL `defaultBranchRef` for empty repos and exit with a
  clean message instead of TypeError on the chained access.
- Sort commits in `apply_filters` and the timeline by parsed instant
  rather than lexicographically; ISO strings with mixed offsets sort
  inconsistently with UTC order.
- URL-encode branch path segments in heatmap and author links so
  branches like `feature/foo` keep their slashes while `&`, `?`, etc.
  get escaped.
- Fix the `-o, --output` help text to match the actual default
  (`/tmp/<owner>--<repo>.html`).

Author: tyom

src/repo-intel/repo-intel.py

@@ -17,7 +17,7 @@
           When omitted, the current working directory is used as a local git repo.
 
 Options:
-  -o, --output PATH   Write the dashboard to PATH instead of /tmp/<repo-name>.html.
+  -o, --output PATH   Write the dashboard to PATH instead of /tmp/<owner>--<repo>.html.
   --no-open           Don't open the result in a browser.
   --no-cache          Ignore the local cache and re-fetch all commits.
   --commits SPEC      Filter commits by position. SPEC is either N (last N
@@ -64,7 +64,7 @@
 import urllib.request
 import webbrowser
 from collections import defaultdict
-from datetime import datetime
+from datetime import datetime, timezone
 from pathlib import Path
 
 TEMPLATE = "__TEMPLATE_PLACEHOLDER__"
@@ -442,8 +442,11 @@ def collect_remote(slug, no_cache=False, commits_filter=None, since=None, until=
             sys.exit(f"Repository not found or inaccessible: {slug}")
         repo_name = repo_node["name"]
         repo_url = repo_node["url"]
-        default_branch = repo_node["defaultBranchRef"].get("name") or default_branch
-        history = repo_node["defaultBranchRef"]["target"]["history"]
+        branch_ref = repo_node.get("defaultBranchRef")
+        if not branch_ref or not branch_ref.get("target"):
+            sys.exit(f"error: {slug} has no commits on its default branch")
+        default_branch = branch_ref.get("name") or default_branch
+        history = branch_ref["target"]["history"]
         for n in history["nodes"]:
             if n["oid"] in cached_oids:
                 hit_cache = True
@@ -497,7 +500,16 @@ def in_range(m):
             return bool(d) and (not since or d >= since) and (not until or d <= until)
         commits_meta = {h: m for h, m in commits_meta.items() if in_range(m)}
     if commits_filter:
-        ordered = sorted(commits_meta, key=lambda h: commits_meta[h].get("iso") or "")
+        epoch = datetime(1970, 1, 1, tzinfo=timezone.utc)
+        def _ts(h):
+            iso = commits_meta[h].get("iso") or ""
+            if not iso:
+                return epoch
+            try:
+                return datetime.fromisoformat(iso.replace("Z", "+00:00"))
+            except ValueError:
+                return epoch
+        ordered = sorted(commits_meta, key=_ts)
         if commits_filter[0] == "last":
             keep = set(ordered[-commits_filter[1]:])
         else:

src/repo-intel/template.html

@@ -304,9 +304,9 @@ <h1 id="title"></h1>
   let monthHtml = '<div class="heatmap-months">'; monthSpans.forEach(ms => { monthHtml += `<span style="flex:${ms.count} ${ms.count} 0;text-align:left;">${ms.label}</span>`; }); monthHtml += '</div>';
   let dayLabelsHtml = '<div class="heatmap-day-labels">'; ['Mon','','Wed','','Fri','',''].forEach(l => { dayLabelsHtml += `<span>${l}</span>`; }); dayLabelsHtml += '</div>';
   const baseUrl = D.githubBaseUrl;
-  const branch = D.defaultBranch || 'main';
+  const branchPath = (D.defaultBranch || 'main').split('/').map(encodeURIComponent).join('/');
   let gridHtml = '<div class="heatmap">';
-  weeksArr.forEach((week, wi) => { gridHtml += '<div class="heatmap-week">'; if (wi === 0 && week[0].dow > 0) for (let i = 0; i < week[0].dow; i++) gridHtml += '<div class="heatmap-cell" style="visibility:hidden;"></div>'; week.forEach(day => { const bg = cellColor(day.count); const href = baseUrl ? `${baseUrl}/commits/${branch}?after=&since=${day.key}&until=${day.key}` : '#'; gridHtml += `<a href="${href}" target="_blank" class="heatmap-cell" style="background:${bg};" data-date="${day.key}" data-count="${day.count}" data-color="${bg}"></a>`; }); if (wi === weeksArr.length - 1 && week[week.length - 1].dow < 6) for (let i = week[week.length - 1].dow + 1; i <= 6; i++) gridHtml += '<div class="heatmap-cell" style="visibility:hidden;"></div>'; gridHtml += '</div>'; });
+  weeksArr.forEach((week, wi) => { gridHtml += '<div class="heatmap-week">'; if (wi === 0 && week[0].dow > 0) for (let i = 0; i < week[0].dow; i++) gridHtml += '<div class="heatmap-cell" style="visibility:hidden;"></div>'; week.forEach(day => { const bg = cellColor(day.count); const href = baseUrl ? `${baseUrl}/commits/${branchPath}?after=&since=${day.key}&until=${day.key}` : '#'; gridHtml += `<a href="${href}" target="_blank" class="heatmap-cell" style="background:${bg};" data-date="${day.key}" data-count="${day.count}" data-color="${bg}"></a>`; }); if (wi === weeksArr.length - 1 && week[week.length - 1].dow < 6) for (let i = week[week.length - 1].dow + 1; i <= 6; i++) gridHtml += '<div class="heatmap-cell" style="visibility:hidden;"></div>'; gridHtml += '</div>'; });
   gridHtml += '</div>';
   const legendHtml = `<div class="heatmap-legend"><span>Less</span><div class="heatmap-cell" style="background:var(--bg-empty-cell);"></div><div class="heatmap-cell" style="background:${shade(0.25)};"></div><div class="heatmap-cell" style="background:${shade(0.5)};"></div><div class="heatmap-cell" style="background:${shade(0.75)};"></div><div class="heatmap-cell" style="background:${color};"></div><span>More</span></div>`;
   container.innerHTML = `<div class="heatmap-wrap">${monthHtml}<div class="heatmap-grid">${dayLabelsHtml}${gridHtml}</div>${legendHtml}</div>`;
@@ -359,10 +359,12 @@ <h1 id="title"></h1>
 // === COMMIT TIMELINE ===
 function escapeHtml(s) { return String(s).replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m])); }
 
+// GitHub branch paths preserve slashes (`feature/foo`), so encode segment-wise.
+function encodeBranch(b) { return (b || 'main').split('/').map(encodeURIComponent).join('/'); }
+
 function authorUrl(c) {
   if (!D.githubBaseUrl) return '#';
-  const branch = D.defaultBranch || 'main';
-  return `${D.githubBaseUrl}/commits/${branch}?author=${encodeURIComponent(c.email)}`;
+  return `${D.githubBaseUrl}/commits/${encodeBranch(D.defaultBranch)}?author=${encodeURIComponent(c.email)}`;
 }
 
 const authorPopover = document.createElement('div');
@@ -375,14 +377,29 @@ <h1 id="title"></h1>
   return m ? '@' + m[1] : '';
 }
 
+// Reads data-bg/data-initial from the failed <img> and swaps in a styled fallback.
+// Doing this from a real event listener avoids the inline-onerror double-decoding
+// trap where a name starting with a single quote would break the JS string literal.
+function installAvatarFallback(img) {
+  if (!img) return;
+  img.addEventListener('error', () => {
+    const tag = img.dataset.fallbackTag || 'div';
+    const fb = document.createElement(tag);
+    fb.className = img.dataset.fallbackClass || '';
+    if (img.dataset.bg) fb.style.background = img.dataset.bg;
+    if (img.dataset.initial) fb.textContent = img.dataset.initial;
+    img.replaceWith(fb);
+  });
+}
+
 function showAuthorPopover(idx, el) {
   const c = contributors[idx];
   if (!c) return;
   const av = c.avatarUrl;
   const handle = githubHandleFromAvatar(av);
   const initial = (c.name || '?').trim().charAt(0).toUpperCase();
   const avatarHtml = av
-    ? `<img class="lp-avatar" src="${escapeHtml(av)}" alt="" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'lp-avatar-fallback',style:'background:${clr(idx)}',textContent:'${escapeHtml(initial)}'}))">`
+    ? `<img class="lp-avatar" src="${escapeHtml(av)}" alt="" data-fallback-class="lp-avatar-fallback" data-bg="${escapeHtml(clr(idx))}" data-initial="${escapeHtml(initial)}">`
     : `<div class="lp-avatar-fallback" style="background:${clr(idx)}">${escapeHtml(initial)}</div>`;
   const net = c.added - c.deleted;
   const netHtml = net > 0
@@ -396,6 +413,7 @@ <h1 id="title"></h1>
     `<div class="lp-stats">${fmt(c.commits)} commits · ${c.activeDays} active day${c.activeDays === 1 ? '' : 's'}</div>` +
     `<div class="lp-stats"><span class="add">+${fmt(c.added)}</span> <span class="del">-${fmt(c.deleted)}</span> (net ${netHtml})</div>` +
     `<div class="lp-period">${c.first} — ${c.last}</div>`;
+  installAvatarFallback(authorPopover.querySelector('.lp-avatar'));
 
   const rect = el.getBoundingClientRect();
   authorPopover.style.left = (rect.right + 12) + 'px';
@@ -459,7 +477,8 @@ <h1 id="title"></h1>
   });
 
   // One-time precomputation. r/y depend on zoom so they're computed in drawCanvas.
-  const sorted = commits.slice().sort((a, b) => a.d.localeCompare(b.d));
+  // Sort by parsed UTC instant — lex-sort on ISO mis-orders across timezone offsets.
+  const sorted = commits.slice().sort((a, b) => new Date(a.d) - new Date(b.d));
   const dayStackTmp = new Map();
   const drawables = [];
   sorted.forEach(c => {
@@ -884,12 +903,13 @@ <h1 id="title"></h1>
     const timeStr = dt.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
     const av = author.avatarUrl;
     const avatarHtml = av
-      ? `<img class="tt-avatar" src="${escapeHtml(av)}" alt="" onerror="this.replaceWith(Object.assign(document.createElement('span'),{className:'tt-dot',style:'background:${hit.color}'}))">`
+      ? `<img class="tt-avatar" src="${escapeHtml(av)}" alt="" data-fallback-tag="span" data-fallback-class="tt-dot" data-bg="${escapeHtml(hit.color)}">`
       : `<span class="tt-dot" style="background:${hit.color}"></span>`;
     tooltip.innerHTML =
       `<div class="tt-author-row">${avatarHtml}<span class="tt-author">${escapeHtml(author.name)}</span></div>` +
       `<div class="tt-subject">${escapeHtml(c.s || '')}</div>` +
       `<div class="tt-meta">${dateStr} ${timeStr} · <span style="color:${colorAdded}">+${fmt(c.a || 0)}</span> <span style="color:${colorDeleted}">-${fmt(c.l || 0)}</span> · <span class="tt-hash">${c.h}</span></div>`;
+    installAvatarFallback(tooltip.querySelector('.tt-avatar'));
     tooltip.style.left = clientX + 'px';
     tooltip.style.top = clientY + 'px';
     tooltip.classList.add('visible');