feat: add public stats page at herdr.dev/stats

1 files changed, 742 insertions, 0 deletions

diff --git a/website/src/scripts/stats-page.ts b/website/src/scripts/stats-page.ts
new file mode 100644
index 00000000..7fcada3d
--- /dev/null
+++ b/website/src/scripts/stats-page.ts
@@ -0,0 +1,742 @@
+// Client renderer for /stats/. Fetches the public stats snapshot from R2 and
+// renders every number and chart client-side, so the static page never goes stale.
+
+const STATS_URL = "https://assets.herdr.dev/stats/stats.json";
+const REPO_API_URL = "https://api.github.com/repos/ogulcancelik/herdr";
+
+const LINE_H = 320;
+const BAR_W = 420;
+const BAR_H = 240;
+const STAR_MILESTONES = [1_000, 5_000, 10_000, 25_000, 50_000, 100_000, 250_000];
+const MONTHS = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
+
+type SeriesPoint = { d: string; v: number };
+
+type StatsJson = {
+  schemaVersion: number;
+  generatedAt: string;
+  repo: string;
+  bornDay: string;
+  stars: { total: number; daily: SeriesPoint[] };
+  downloads: { github: number; brew: number; daily: SeriesPoint[] };
+  releases: { shipped: number };
+  traffic: {
+    windowDays: number;
+    daily: SeriesPoint[];
+    topCountries: Array<{ code: string; visits: number }>;
+    topReferrers: Array<{ host: string; visits: number }>;
+    topPaths: Array<{ path: string; views: number }>;
+  };
+  timeline: Array<{ d: string; label: string; note?: string; badge?: string }>;
+};
+
+type WeekPoint = { weekStart: string; value: number; partial: boolean; daysIn: number };
+type Milestone = { day: string; value: number; label: string };
+
+// ---------- formatting ----------
+
+function fmtInt(value: number): string {
+  return Math.round(value).toLocaleString("en-US");
+}
+
+function fmtCompact(value: number): string {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(value % 1_000_000 === 0 ? 0 : 1)}M`;
+  if (value >= 10_000) return `${Math.round(value / 1_000)}k`;
+  if (value >= 1_000) {
+    const scaled = value / 1_000;
+    return `${Number.isInteger(scaled) ? scaled : scaled.toFixed(1)}k`;
+  }
+  return String(Math.round(value));
+}
+
+function fmtDay(day: string): string {
+  const date = new Date(`${day}T00:00:00Z`);
+  return `${MONTHS[date.getUTCMonth()]} ${date.getUTCDate()}`;
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+// ---------- date/series math ----------
+
+function dayEpoch(day: string): number {
+  return Date.parse(`${day}T00:00:00Z`);
+}
+
+function daysBetween(fromDay: string, toDay: string): number {
+  return Math.round((dayEpoch(toDay) - dayEpoch(fromDay)) / 86_400_000);
+}
+
+function todayUtc(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+function weekStartOf(day: string): string {
+  const date = new Date(`${day}T00:00:00Z`);
+  const sinceMonday = (date.getUTCDay() + 6) % 7;
+  return new Date(date.getTime() - sinceMonday * 86_400_000).toISOString().slice(0, 10);
+}
+
+function weekMeta(weekStart: string, lastDataDay: string | null): { partial: boolean; daysIn: number } {
+  if (!lastDataDay) return { partial: false, daysIn: 7 };
+  const weekEnd = new Date(dayEpoch(weekStart) + 6 * 86_400_000).toISOString().slice(0, 10);
+  const partial = lastDataDay < weekEnd || weekEnd >= todayUtc();
+  const daysIn = partial ? Math.min(daysBetween(weekStart, lastDataDay) + 1, 7) : 7;
+  return { partial, daysIn };
+}
+
+function deltasFromCumulative(daily: SeriesPoint[]): SeriesPoint[] {
+  const deltas: SeriesPoint[] = [];
+  for (let index = 1; index < daily.length; index += 1) {
+    deltas.push({ d: daily[index].d, v: Math.max(daily[index].v - daily[index - 1].v, 0) });
+  }
+  return deltas;
+}
+
+function weeklySums(days: SeriesPoint[], lastDataDay: string | null): WeekPoint[] {
+  const byWeek = new Map<string, number>();
+  for (const point of days) {
+    const week = weekStartOf(point.d);
+    byWeek.set(week, (byWeek.get(week) ?? 0) + point.v);
+  }
+  return [...byWeek.entries()]
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .map(([weekStart, value]) => ({ weekStart, value, ...weekMeta(weekStart, lastDataDay) }));
+}
+
+function weeklyAverages(days: SeriesPoint[], lastDataDay: string | null): WeekPoint[] {
+  const byWeek = new Map<string, { sum: number; count: number }>();
+  for (const point of days) {
+    const week = weekStartOf(point.d);
+    const bucket = byWeek.get(week) ?? { sum: 0, count: 0 };
+    bucket.sum += point.v;
+    bucket.count += 1;
+    byWeek.set(week, bucket);
+  }
+  return [...byWeek.entries()]
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .map(([weekStart, bucket]) => ({
+      weekStart,
+      value: Math.round(bucket.sum / bucket.count),
+      ...weekMeta(weekStart, lastDataDay),
+    }));
+}
+
+function starMilestones(daily: SeriesPoint[]): Milestone[] {
+  const milestones: Milestone[] = [];
+  let next = 0;
+  for (const point of daily) {
+    while (next < STAR_MILESTONES.length && point.v >= STAR_MILESTONES[next]) {
+      const value = STAR_MILESTONES[next];
+      milestones.push({ day: point.d, value, label: value >= 1_000 ? `${value / 1_000}k` : String(value) });
+      next += 1;
+    }
+  }
+  return milestones;
+}
+
+function niceTicks(max: number, count = 4): number[] {
+  if (max <= 0) return [0];
+  const rawStep = max / count;
+  const power = 10 ** Math.floor(Math.log10(rawStep));
+  const step = [1, 2, 2.5, 5, 10].map((mult) => mult * power).find((candidate) => candidate >= rawStep) ?? rawStep;
+  const ticks: number[] = [];
+  for (let tick = 0; tick <= max; tick += step) ticks.push(tick);
+  return ticks;
+}
+
+function monthStartsBetween(firstDay: string, lastDay: string): string[] {
+  const starts: string[] = [];
+  const last = dayEpoch(lastDay);
+  const cursor = new Date(`${firstDay.slice(0, 7)}-01T00:00:00Z`);
+  cursor.setUTCMonth(cursor.getUTCMonth() + 1);
+  while (cursor.getTime() <= last) {
+    starts.push(cursor.toISOString().slice(0, 10));
+    cursor.setUTCMonth(cursor.getUTCMonth() + 1);
+  }
+  return starts;
+}
+
+// ---------- chart builders (SVG strings) ----------
+
+type LineChartOptions = {
+  points: SeriesPoint[];
+  colorVar: string;
+  unit: string;
+  width: number;
+  milestones?: Milestone[];
+  events?: Array<{ day: string; label: string }>;
+};
+
+function lineChart(options: LineChartOptions): string {
+  const { points, width } = options;
+  if (points.length < 2) return `<p class="chart-empty">not enough data yet</p>`;
+
+  const margin = { top: 34, right: 26, bottom: 30, left: 54 };
+  const innerW = width - margin.left - margin.right;
+  const innerH = LINE_H - margin.top - margin.bottom;
+
+  const x0 = dayEpoch(points[0].d);
+  const x1 = dayEpoch(points[points.length - 1].d);
+  const yMaxData = Math.max(...points.map((point) => point.v));
+  const ticks = niceTicks(yMaxData);
+  const yMax = Math.max(ticks[ticks.length - 1], yMaxData) * 1.04;
+
+  const xFor = (day: string): number => margin.left + ((dayEpoch(day) - x0) / (x1 - x0)) * innerW;
+  const yFor = (value: number): number => margin.top + innerH - (value / yMax) * innerH;
+
+  const coords = points.map((point) => ({ x: xFor(point.d), y: yFor(point.v), day: point.d, value: point.v }));
+  const linePath = coords.map((c, i) => `${i === 0 ? "M" : "L"}${c.x.toFixed(1)},${c.y.toFixed(1)}`).join("");
+  const baseline = margin.top + innerH;
+  const areaPath = `${linePath}L${coords[coords.length - 1].x.toFixed(1)},${baseline}L${coords[0].x.toFixed(1)},${baseline}Z`;
+
+  const grid = ticks
+    .map((tick) => {
+      const y = yFor(tick).toFixed(1);
+      return `<line class="grid" x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}"/>` +
+        `<text class="tick" x="${margin.left - 8}" y="${y}" dy="0.32em" text-anchor="end">${fmtCompact(tick)}</text>`;
+    })
+    .join("");
+
+  const monthLabels = monthStartsBetween(points[0].d, points[points.length - 1].d)
+    .map((day) => {
+      const x = xFor(day).toFixed(1);
+      return `<text class="tick" x="${x}" y="${baseline + 20}" text-anchor="middle">${MONTHS[new Date(`${day}T00:00:00Z`).getUTCMonth()]}</text>`;
+    })
+    .join("");
+
+  const milestoneMarks = (options.milestones ?? [])
+    .map((milestone) => {
+      const x = xFor(milestone.day);
+      const y = yFor(milestone.value);
+      return (
+        `<line class="milestone-leader" x1="${x.toFixed(1)}" y1="${(y - 9).toFixed(1)}" x2="${x.toFixed(1)}" y2="${(y - 18).toFixed(1)}"/>` +
+        `<circle class="dot" cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="4.5" style="fill:var(${options.colorVar})"/>` +
+        `<text class="milestone-label" x="${x.toFixed(1)}" y="${(y - 23).toFixed(1)}" text-anchor="middle">${milestone.label}</text>`
+      );
+    })
+    .join("");
+
+  const events = (options.events ?? []).map((event) => {
+    const x = xFor(event.day);
+    const nearest = coords.reduce((best, c) => (Math.abs(c.x - x) < Math.abs(best.x - x) ? c : best), coords[0]);
+    return { ...event, dotX: nearest.x, dotY: nearest.y };
+  });
+  const eventBaseX = Math.min(...events.map((event) => event.dotX), Infinity) - 12;
+  const eventMarks = events
+    .map((event, index) => {
+      const labelY = margin.top + 14 + index * 16;
+      return (
+        `<line class="milestone-leader" x1="${(eventBaseX + 4).toFixed(1)}" y1="${(labelY + 4).toFixed(1)}" x2="${(event.dotX - 2).toFixed(1)}" y2="${(event.dotY - 6).toFixed(1)}"/>` +
+        `<circle class="event-dot" cx="${event.dotX.toFixed(1)}" cy="${event.dotY.toFixed(1)}" r="4" style="stroke:var(${options.colorVar})"/>` +
+        `<text class="milestone-label" x="${eventBaseX.toFixed(1)}" y="${labelY.toFixed(1)}" text-anchor="end">${escapeHtml(event.label)}</text>`
+      );
+    })
+    .join("");
+
+  const end = coords[coords.length - 1];
+  const endDot = `<circle class="dot" cx="${end.x.toFixed(1)}" cy="${end.y.toFixed(1)}" r="4.5" style="fill:var(${options.colorVar})"/>`;
+
+  // escape < so the JSON can never terminate the wrapping <script> tag
+  const data = JSON.stringify({
+    unit: options.unit,
+    width,
+    points: coords.map((c) => ({ x: Number(c.x.toFixed(1)), y: Number(c.y.toFixed(1)), day: c.day, value: c.value })),
+  }).replace(/</g, "\\u003c");
+
+  return `
+    <div class="chart">
+      <svg viewBox="0 0 ${width} ${LINE_H}" role="img" aria-label="${options.unit} over time" tabindex="0">
+        ${grid}
+        ${monthLabels}
+        <path class="area" d="${areaPath}" style="fill:var(${options.colorVar})"/>
+        <path class="line" d="${linePath}" style="stroke:var(${options.colorVar})"/>
+        ${milestoneMarks}
+        ${eventMarks}
+        ${endDot}
+        <line class="crosshair" y1="${margin.top}" y2="${baseline}" x1="-10" x2="-10" hidden></line>
+        <circle class="hover-dot" r="4.5" cx="-10" cy="-10" style="fill:var(${options.colorVar})" hidden></circle>
+      </svg>
+      <div class="chart-tip" hidden></div>
+      <script type="application/json">${data}</script>
+    </div>`;
+}
+
+type BarChartOptions = {
+  weeks: WeekPoint[];
+  colorVar: string;
+  unit: string;
+  maxWeeks?: number;
+};
+
+function barChart(options: BarChartOptions): string {
+  const weeks = options.weeks.slice(-(options.maxWeeks ?? 14));
+  if (weeks.length === 0) return `<p class="chart-empty">not enough data yet</p>`;
+
+  const margin = { top: 26, right: 12, bottom: 30, left: 44 };
+  const innerW = BAR_W - margin.left - margin.right;
+  const innerH = BAR_H - margin.top - margin.bottom;
+
+  const yMaxData = Math.max(...weeks.map((week) => week.value));
+  const ticks = niceTicks(yMaxData, 3);
+  const yMax = Math.max(ticks[ticks.length - 1], yMaxData) * 1.06;
+  const yFor = (value: number): number => margin.top + innerH - (value / yMax) * innerH;
+  const baseline = margin.top + innerH;
+
+  const band = innerW / weeks.length;
+  const barWidth = Math.min(24, Math.max(band - 2, 4));
+
+  const grid = ticks
+    .filter((tick) => tick > 0)
+    .map((tick) => {
+      const y = yFor(tick).toFixed(1);
+      return `<line class="grid" x1="${margin.left}" y1="${y}" x2="${BAR_W - margin.right}" y2="${y}"/>` +
+        `<text class="tick" x="${margin.left - 7}" y="${y}" dy="0.32em" text-anchor="end">${fmtCompact(tick)}</text>`;
+    })
+    .join("");
+
+  const maxValue = Math.max(...weeks.filter((week) => !week.partial).map((week) => week.value), 0);
+  const labelStep = Math.ceil(weeks.length / 5);
+
+  const bars = weeks
+    .map((week, index) => {
+      const xCenter = margin.left + band * index + band / 2;
+      const x = xCenter - barWidth / 2;
+      const yTop = yFor(week.value);
+      const r = Math.min(4, barWidth / 2, Math.max(baseline - yTop, 0));
+      const path =
+        `M${x.toFixed(1)},${baseline}` +
+        `L${x.toFixed(1)},${(yTop + r).toFixed(1)}` +
+        `Q${x.toFixed(1)},${yTop.toFixed(1)} ${(x + r).toFixed(1)},${yTop.toFixed(1)}` +
+        `L${(x + barWidth - r).toFixed(1)},${yTop.toFixed(1)}` +
+        `Q${(x + barWidth).toFixed(1)},${yTop.toFixed(1)} ${(x + barWidth).toFixed(1)},${(yTop + r).toFixed(1)}` +
+        `L${(x + barWidth).toFixed(1)},${baseline}Z`;
+      const capLabel = !week.partial && week.value === maxValue && week.value > 0
+        ? `<text class="cap-label" x="${xCenter.toFixed(1)}" y="${(yTop - 7).toFixed(1)}" text-anchor="middle">${fmtCompact(week.value)}</text>`
+        : "";
+      const axisLabel = index % labelStep === 0
+        ? `<text class="tick" x="${xCenter.toFixed(1)}" y="${baseline + 20}" text-anchor="middle">${fmtDay(week.weekStart)}</text>`
+        : "";
+      const tipText = week.partial
+        ? `week of ${fmtDay(week.weekStart)} · ${fmtInt(week.value)} ${options.unit} · day ${week.daysIn}/7`
+        : `week of ${fmtDay(week.weekStart)} · ${fmtInt(week.value)} ${options.unit}`;
+      return (
+        `<g class="bar${week.partial ? " partial" : ""}" data-tip="${escapeHtml(tipText)}">` +
+        `<rect class="hit" x="${(margin.left + band * index).toFixed(1)}" y="${margin.top}" width="${band.toFixed(1)}" height="${innerH}"></rect>` +
+        `<path class="fill" d="${path}" style="fill:var(${options.colorVar})"/>` +
+        `</g>${capLabel}${axisLabel}`
+      );
+    })
+    .join("");
+
+  return `
+    <div class="chart">
+      <svg viewBox="0 0 ${BAR_W} ${BAR_H}" role="img" aria-label="${options.unit} per week">
+        ${grid}
+        <line class="grid strong" x1="${margin.left}" y1="${baseline}" x2="${BAR_W - margin.right}" y2="${baseline}"/>
+        ${bars}
+      </svg>
+      <div class="chart-tip" hidden></div>
+    </div>`;
+}
+
+// ---------- tables, rank lists, timeline ----------
+
+function detailsTable(headers: [string, string], rows: string): string {
+  return `
+    <details class="chart-table">
+      <summary>view as table</summary>
+      <div class="chart-table-scroll">
+        <table><thead><tr><th>${headers[0]}</th><th>${headers[1]}</th></tr></thead><tbody>${rows}</tbody></table>
+      </div>
+    </details>`;
+}
+
+function weeklyTable(weeks: WeekPoint[], unit: string): string {
+  const rows = [...weeks]
+    .slice(-14)
+    .reverse()
+    .map(
+      (week) =>
+        `<tr><td>week of ${fmtDay(week.weekStart)}</td><td>${fmtInt(week.value)}${week.partial ? ` (day ${week.daysIn}/7)` : ""}</td></tr>`,
+    )
+    .join("");
+  return detailsTable(["week", unit], rows);
+}
+
+function cumulativeTable(points: SeriesPoint[], unit: string): string {
+  const byMonth = new Map<string, SeriesPoint>();
+  for (const point of points) byMonth.set(point.d.slice(0, 7), point);
+  const rows = [...byMonth.values()]
+    .map((point) => `<tr><td>${fmtDay(point.d)}</td><td>${fmtInt(point.v)}</td></tr>`)
+    .join("");
+  return detailsTable(["end of month", unit], rows);
+}
+
+function flagEmoji(code: string): string {
+  if (!/^[A-Z]{2}$/.test(code)) return "";
+  return String.fromCodePoint(...[...code].map((char) => 0x1f1a5 + char.charCodeAt(0)));
+}
+
+function countryName(code: string): string {
+  try {
+    return new Intl.DisplayNames(["en"], { type: "region" }).of(code) ?? code;
+  } catch {
+    return code;
+  }
+}
+
+function rankList(rows: Array<{ label: string; value: number }>, unit: string): string {
+  if (rows.length === 0) return `<p class="chart-empty">no data yet</p>`;
+  const max = Math.max(...rows.map((row) => row.value), 1);
+  const items = rows
+    .map(
+      (row) =>
+        `<div class="rank-row" title="${escapeHtml(row.label)} · ${fmtInt(row.value)} ${unit}">` +
+        `<span class="rank-name">${escapeHtml(row.label)}</span>` +
+        `<span class="rank-bar"><span class="rank-fill" style="width:${((row.value / max) * 100).toFixed(1)}%"></span></span>` +
+        `<span class="rank-value">${fmtCompact(row.value)}</span>` +
+        `</div>`,
+    )
+    .join("");
+  return `<div class="rank-list">${items}</div>`;
+}
+
+function timelineTerminal(stats: StatsJson, milestones: Milestone[]): string {
+  const lines: Array<{ day: string; text: string; note: string }> = [];
+  for (const entry of stats.timeline) {
+    const note = entry.note ?? `day ${daysBetween(stats.bornDay, entry.d)}`;
+    lines.push({ day: entry.d, text: escapeHtml(entry.label), note: escapeHtml(note) });
+  }
+  let previousDay = stats.timeline.find((entry) => entry.label.includes("first star"))?.d ?? stats.bornDay;
+  for (const milestone of milestones) {
+    lines.push({ day: milestone.day, text: `★ ${fmtInt(milestone.value)}`, note: `+${daysBetween(previousDay, milestone.day)} days` });
+    previousDay = milestone.day;
+  }
+  lines.sort((a, b) => a.day.localeCompare(b.day));
+  lines.push({ day: todayUtc(), text: `★ ${fmtInt(stats.stars.total)}`, note: "today" });
+
+  const body = lines
+    .map(
+      (line) =>
+        `<div class="term-line"><span class="term-date">${fmtDay(line.day)}</span><span class="term-text">${line.text}</span><span class="term-note">${line.note}</span></div>`,
+    )
+    .join("");
+
+  return `
+    <div class="milestone-term" role="img" aria-label="herdr timeline">
+      <div class="term-line term-cmd-line"><span class="term-prompt">$</span><span class="term-cmd">herdr stats --timeline</span></div>
+      ${body}
+    </div>`;
+}
+
+// ---------- interaction ----------
+
+function attachChartInteractions(root: ParentNode): void {
+  root.querySelectorAll<HTMLElement>(".chart").forEach((chart) => {
+    const dataEl = chart.querySelector<HTMLScriptElement>("script[type='application/json']");
+    const tip = chart.querySelector<HTMLElement>(".chart-tip");
+    const svg = chart.querySelector<SVGSVGElement>("svg");
+    if (!svg || !tip) return;
+
+    if (dataEl?.textContent) {
+      const data = JSON.parse(dataEl.textContent) as {
+        unit: string;
+        width: number;
+        points: Array<{ x: number; y: number; day: string; value: number }>;
+      };
+      const crosshair = svg.querySelector<SVGLineElement>(".crosshair");
+      const hoverDot = svg.querySelector<SVGCircleElement>(".hover-dot");
+      if (!crosshair || !hoverDot) return;
+      const points = data.points;
+      let active = -1;
+
+      const showIndex = (index: number): void => {
+        if (index < 0 || index >= points.length) return;
+        active = index;
+        const point = points[index];
+        crosshair.setAttribute("x1", String(point.x));
+        crosshair.setAttribute("x2", String(point.x));
+        crosshair.hidden = false;
+        hoverDot.setAttribute("cx", String(point.x));
+        hoverDot.setAttribute("cy", String(point.y));
+        hoverDot.hidden = false;
+        tip.innerHTML = "";
+        const strong = document.createElement("strong");
+        strong.textContent = `${point.value.toLocaleString("en-US")} ${data.unit}`;
+        tip.appendChild(strong);
+        tip.appendChild(document.createElement("br"));
+        tip.appendChild(document.createTextNode(fmtDay(point.day)));
+        const rect = svg.getBoundingClientRect();
+        const scale = rect.width / data.width;
+        tip.style.left = `${point.x * scale}px`;
+        tip.style.top = `${point.y * scale}px`;
+        tip.hidden = false;
+      };
+
+      const hide = (): void => {
+        active = -1;
+        crosshair.hidden = true;
+        hoverDot.hidden = true;
+        tip.hidden = true;
+      };
+
+      svg.addEventListener("pointermove", (event) => {
+        const rect = svg.getBoundingClientRect();
+        const x = ((event.clientX - rect.left) / rect.width) * data.width;
+        let best = 0;
+        let bestDist = Infinity;
+        for (let i = 0; i < points.length; i += 1) {
+          const dist = Math.abs(points[i].x - x);
+          if (dist < bestDist) {
+            bestDist = dist;
+            best = i;
+          }
+        }
+        showIndex(best);
+      });
+      svg.addEventListener("pointerleave", hide);
+      svg.addEventListener("focus", () => showIndex(points.length - 1));
+      svg.addEventListener("blur", hide);
+      svg.addEventListener("keydown", (event) => {
+        if (event.key === "ArrowLeft") {
+          showIndex(Math.max(active - 1, 0));
+          event.preventDefault();
+        }
+        if (event.key === "ArrowRight") {
+          showIndex(Math.min(active + 1, points.length - 1));
+          event.preventDefault();
+        }
+      });
+    }
+
+    chart.querySelectorAll<SVGGElement>(".bar").forEach((bar) => {
+      bar.addEventListener("pointerenter", () => {
+        const hit = bar.querySelector(".hit");
+        if (!hit) return;
+        const svgRect = svg.getBoundingClientRect();
+        const barRect = hit.getBoundingClientRect();
+        tip.textContent = bar.getAttribute("data-tip");
+        tip.style.left = `${barRect.left - svgRect.left + barRect.width / 2}px`;
+        tip.style.top = `${barRect.top - svgRect.top + 18}px`;
+        tip.hidden = false;
+        bar.classList.add("active");
+      });
+      bar.addEventListener("pointerleave", () => {
+        tip.hidden = true;
+        bar.classList.remove("active");
+      });
+    });
+  });
+}
+
+// ---------- live star counter ----------
+
+function startLiveStars(initial: number): void {
+  const hero = document.getElementById("star-count");
+  if (!hero) return;
+  let current = initial;
+  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  const renderCount = (value: number): void => {
+    hero.textContent = Math.round(value).toLocaleString("en-US");
+  };
+  renderCount(current);
+
+  const animateTo = (target: number): void => {
+    if (reduceMotion || target <= current) {
+      current = Math.max(current, target);
+      renderCount(current);
+      return;
+    }
+    const from = current;
+    const start = performance.now();
+    const duration = 900;
+    const frame = (now: number): void => {
+      const t = Math.min((now - start) / duration, 1);
+      const eased = 1 - (1 - t) ** 3;
+      renderCount(from + (target - from) * eased);
+      if (t < 1) requestAnimationFrame(frame);
+      else current = target;
+    };
+    requestAnimationFrame(frame);
+  };
+
+  const poll = (): void => {
+    fetch(REPO_API_URL)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((repo) => {
+        if (repo && typeof repo.stargazers_count === "number") animateTo(repo.stargazers_count);
+      })
+      .catch(() => {
+        // keep last known number; the counter must never break the page
+      });
+  };
+  poll();
+  setInterval(poll, 60_000);
+}
+
+// ---------- page assembly ----------
+
+function setText(id: string, text: string): void {
+  const el = document.getElementById(id);
+  if (el) el.textContent = text;
+}
+
+function setHtml(id: string, html: string): void {
+  const el = document.getElementById(id);
+  if (el) el.innerHTML = html;
+}
+
+function render(stats: StatsJson): void {
+  const starsDaily = stats.stars.daily;
+  const lastStarDay = starsDaily.at(-1)?.d ?? null;
+  const milestones = starMilestones(starsDaily);
+  const badges = stats.timeline
+    .filter((entry) => entry.badge)
+    .map((entry) => ({ day: entry.d, label: entry.badge ?? "" }));
+
+  // hero
+  const last7d = (() => {
+    const last = starsDaily.at(-1);
+    if (!last) return null;
+    const weekAgoDay = new Date(dayEpoch(last.d) - 7 * 86_400_000).toISOString().slice(0, 10);
+    const anchor = [...starsDaily].reverse().find((point) => point.d <= weekAgoDay);
+    return anchor ? stats.stars.total - anchor.v : null;
+  })();
+  if (last7d !== null) setText("hero-note", `+${fmtInt(last7d)} stars in the last 7 days`);
+  if (starsDaily[0]) setText("stars-since", `since ${fmtDay(starsDaily[0].d)}`);
+  setHtml(
+    "chart-stars",
+    lineChart({ points: starsDaily, colorVar: "--accent", unit: "stars", width: 640, milestones, events: badges }) +
+      cumulativeTable(starsDaily, "stars"),
+  );
+
+  // KPIs
+  const downloadsDeltas = deltasFromCumulative(stats.downloads.daily);
+  const lastDownloadDay = stats.downloads.daily.at(-1)?.d ?? null;
+  const downloadsWeekly = weeklySums(downloadsDeltas, lastDownloadDay);
+  const lastFullWeek = [...downloadsWeekly].reverse().find((week) => !week.partial);
+  setText("kpi-installs", fmtInt(stats.downloads.github + stats.downloads.brew));
+  setHtml(
+    "kpi-installs-sub",
+    `${lastFullWeek ? `<span class="up">+${fmtInt(lastFullWeek.value)}</span> last week · ` : ""}releases + homebrew`,
+  );
+
+  const trafficDaily = stats.traffic.daily;
+  const lastSevenTraffic = trafficDaily.slice(-7);
+  const visitorsAvg = lastSevenTraffic.length
+    ? Math.round(lastSevenTraffic.reduce((sum, point) => sum + point.v, 0) / lastSevenTraffic.length)
+    : null;
+  setText("kpi-visitors", visitorsAvg === null ? "—" : fmtCompact(visitorsAvg));
+
+  setText("kpi-releases", fmtInt(stats.releases.shipped));
+  setText("kpi-age", fmtInt(daysBetween(stats.bornDay, todayUtc())));
+  setText("kpi-age-sub", `born ${fmtDay(stats.bornDay)}, ${stats.bornDay.slice(0, 4)}`);
+
+  // weekly velocity
+  const starsDeltas = deltasFromCumulative(starsDaily);
+  setHtml(
+    "chart-stars-week",
+    barChart({ weeks: weeklySums(starsDeltas, lastStarDay), colorVar: "--accent", unit: "stars" }) +
+      weeklyTable(weeklySums(starsDeltas, lastStarDay), "stars"),
+  );
+  setHtml(
+    "chart-downloads-week",
+    barChart({ weeks: downloadsWeekly, colorVar: "--green", unit: "downloads" }) + weeklyTable(downloadsWeekly, "downloads"),
+  );
+  const visitorsWeekly = weeklyAverages(trafficDaily, trafficDaily.at(-1)?.d ?? null);
+  setHtml(
+    "chart-visitors-week",
+    barChart({ weeks: visitorsWeekly, colorVar: "--yellow", unit: "avg daily visitors" }) +
+      weeklyTable(visitorsWeekly, "avg daily visitors"),
+  );
+
+  // downloads cumulative
+  const trackedSince = stats.downloads.daily[0]?.d;
+  setText(
+    "downloads-sub",
+    `GitHub release downloads, cumulative${trackedSince ? `, tracked since ${fmtDay(trackedSince)}` : ""}. ` +
+      `Homebrew adds ${fmtInt(stats.downloads.brew)} installs on top (not shown in the curve).`,
+  );
+  setHtml(
+    "chart-downloads",
+    lineChart({ points: stats.downloads.daily, colorVar: "--green", unit: "downloads", width: 960 }) +
+      cumulativeTable(stats.downloads.daily, "downloads"),
+  );
+
+  // traffic
+  setText("traffic-sub", `herdr.dev traffic over the last ${stats.traffic.windowDays} days, measured by Cloudflare.`);
+  setHtml(
+    "rank-countries",
+    rankList(
+      stats.traffic.topCountries.map((row) => ({ label: `${flagEmoji(row.code)} ${countryName(row.code)}`.trim(), value: row.visits })),
+      "visits",
+    ),
+  );
+  setHtml(
+    "rank-referrers",
+    rankList(stats.traffic.topReferrers.map((row) => ({ label: row.host, value: row.visits })), "visits"),
+  );
+  setHtml(
+    "rank-paths",
+    rankList(stats.traffic.topPaths.map((row) => ({ label: row.path, value: row.views })), "page views"),
+  );
+
+  // timeline + freshness
+  setHtml("timeline", timelineTerminal(stats, milestones));
+  const generated = new Date(stats.generatedAt);
+  const ageHours = (Date.now() - generated.getTime()) / 3_600_000;
+  const stampText = `Data updated ${fmtDay(stats.generatedAt.slice(0, 10))}, ${stats.generatedAt.slice(11, 16)} UTC.`;
+  setText("updated-note", stampText);
+  if (ageHours > 6) {
+    const note = document.createElement("p");
+    note.className = "stats-stale";
+    note.textContent = `note: snapshot is ${Math.round(ageHours)} hours old — the star counter above is still live.`;
+    document.getElementById("sources-note")?.after(note);
+  }
+
+  attachChartInteractions(document);
+  startLiveStars(stats.stars.total);
+}
+
+function assertStatsShape(stats: StatsJson): void {
+  const ok =
+    stats.schemaVersion === 1 &&
+    typeof stats.generatedAt === "string" &&
+    typeof stats.bornDay === "string" &&
+    typeof stats.stars?.total === "number" &&
+    Array.isArray(stats.stars?.daily) &&
+    typeof stats.downloads?.github === "number" &&
+    typeof stats.downloads?.brew === "number" &&
+    Array.isArray(stats.downloads?.daily) &&
+    typeof stats.releases?.shipped === "number" &&
+    Array.isArray(stats.traffic?.daily) &&
+    Array.isArray(stats.traffic?.topCountries) &&
+    Array.isArray(stats.traffic?.topReferrers) &&
+    Array.isArray(stats.traffic?.topPaths) &&
+    Array.isArray(stats.timeline);
+  if (!ok) throw new Error("stats snapshot has unexpected shape");
+}
+
+export function initStatsPage(): void {
+  fetch(STATS_URL, { headers: { accept: "application/json" } })
+    .then((res) => {
+      if (!res.ok) throw new Error(`stats fetch failed: ${res.status}`);
+      return res.json() as Promise<StatsJson>;
+    })
+    .then((stats) => {
+      assertStatsShape(stats);
+      render(stats);
+    })
+    .catch((error) => {
+      console.error("stats page render failed", error);
+      setText("hero-note", "stats are temporarily unavailable, try again in a minute");
+      startLiveStars(0);
+    });
+}