---
layout: default
title: "Versions Helper Tool"
description: "A helper tool for generating version reports for The Sunil Abraham Project from any selected date range."
permalink: /versions/helper/
categories: [Project pages, Versions, TSAP Tools]
page_id: TSAP-1232
created: 2026-08-24
---

**Versions Helper Tool** is a reporting tool for The Sunil Abraham Project that generates a summary of pages, Git activity, and GitHub activity for a selected date range. The tool is mainly created to support report writing for the [Versions](/versions/) and other report pages; however, it can also be used for broader activity summaries.

## Helper tool
Generate a report of pages created, Git commits, and GitHub issues for any date range.

<div id="activity-report-app" class="activity-report-container">
  <section class="report-controls" aria-labelledby="controls-heading">
    <h2 id="controls-heading">Select date range (DMY)</h2>
    
    <div class="date-inputs">
      <fieldset class="date-fieldset">
        <legend>From date</legend>
        <div class="dmy-group">
          <div class="dmy-field">
            <label for="from-day">Day</label>
            <select id="from-day" aria-label="From Day"></select>
          </div>
          <div class="dmy-field">
            <label for="from-month">Month</label>
            <select id="from-month" aria-label="From Month">
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
          <div class="dmy-field">
            <label for="from-year">Year</label>
            <select id="from-year" aria-label="From Year"></select>
          </div>
        </div>
      </fieldset>

      <fieldset class="date-fieldset">
        <legend>To date</legend>
        <div class="dmy-group">
          <div class="dmy-field">
            <label for="to-day">Day</label>
            <select id="to-day" aria-label="To Day"></select>
          </div>
          <div class="dmy-field">
            <label for="to-month">Month</label>
            <select id="to-month" aria-label="To Month">
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
          <div class="dmy-field">
            <label for="to-year">Year</label>
            <select id="to-year" aria-label="To Year"></select>
          </div>
        </div>
      </fieldset>
    </div>
    
    <div class="date-shortcuts">
      <button type="button" id="prev-week-btn" class="shortcut-btn">Previous week</button>
      <button type="button" id="current-week-btn" class="shortcut-btn">Current week</button>
    </div>
    
    <button type="button" id="generate-btn" class="generate-btn">Generate report</button>
  </section>
  
  <section id="report-output" class="report-output" aria-live="polite" aria-busy="false">
    <p class="loading-msg">Select a date range and click "Generate report" to see activity.</p>
  </section>
  
  <section id="copy-output" class="copy-output" aria-labelledby="copy-heading">
    <h2 id="copy-heading">Output</h2>
    <p>Use this text for the Versions page or weekly reports.</p>
    <textarea id="copy-text" rows="12" readonly aria-label="Report output text"></textarea>
    <button type="button" id="copy-btn" class="copy-btn">Copy to clipboard</button>
    <span id="copy-status" class="copy-status" role="status" aria-live="polite"></span>
  </section>
</div>

{% include versions.html %}

<style>
.activity-report-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.report-controls {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.date-inputs {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.date-fieldset {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.85rem 1rem 1rem;
  flex: 1 1 320px;
  margin: 0;
}

.date-fieldset legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 0.35rem;
  color: #1e293b;
}

.dmy-group {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.dmy-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 80px;
}

.dmy-field label {
  font-weight: 600;
  font-size: 0.82rem;
  color: #475569;
}

.dmy-field select {
  padding: 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.95rem;
  background: #ffffff;
  color: #1e293b;
  width: 100%;
  box-sizing: border-box;
}

.dmy-field select:focus {
  outline: none;
  border-color: #1f5fbf;
  box-shadow: 0 0 0 3px rgba(31, 95, 191, 0.15);
}

.date-shortcuts {
  display: flex;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  flex-wrap: wrap;
}

.shortcut-btn,
.generate-btn,
.copy-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid #1f5fbf;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  background: #1f5fbf;
  color: #ffffff;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.shortcut-btn {
  background: #ffffff;
  color: #1f5fbf;
  border: 1px solid #cbd5e1;
  font-weight: 500;
}

.shortcut-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.generate-btn:hover,
.copy-btn:hover {
  background: #184c99;
  border-color: #184c99;
}

.generate-btn {
  margin-top: 0.5rem;
}

.report-output {
  margin-bottom: 2rem;
}

.report-section {
  margin-bottom: 2rem;
}

.report-section h3 {
  border-bottom: 2px solid #1f5fbf;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.page-list {
  list-style: none;
  padding: 0;
}

.page-list li {
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #1f5fbf;
  background: #f8fafc;
  border-radius: 0 6px 6px 0;
}

.page-list a {
  font-weight: 600;
  color: #1f5fbf;
  text-decoration: none;
}

.page-list a:hover {
  text-decoration: underline;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.stat-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 1.2rem;
  border-radius: 8px;
  text-align: center;
}

.stat-card .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #1f5fbf;
}

.stat-card .stat-label {
  font-size: 0.9rem;
  color: #64748b;
  margin-top: 0.25rem;
}

.issue-list,
.comment-list {
  list-style: none;
  padding: 0;
}

.issue-list li,
.comment-list li {
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.issue-list a,
.comment-list a {
  color: #1f5fbf;
  text-decoration: none;
  font-weight: 500;
}

.issue-list a:hover,
.comment-list a:hover {
  text-decoration: underline;
}

.copy-output {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #cbd5e1;
}

.copy-output textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.9rem;
  resize: vertical;
  margin: 1rem 0;
  background: #ffffff;
  color: #1e293b;
  box-sizing: border-box;
}

/* Mobile compact output textarea */
@media (max-width: 600px) {
  .copy-output textarea {
    height: 160px;
    min-height: 140px;
    padding: 0.75rem;
    font-size: 0.85rem;
  }
}

.copy-status {
  margin-left: 1rem;
  font-weight: 600;
}

.copy-status.success {
  color: #16a34a;
}

.copy-status.error {
  color: #dc2626;
}

.loading-msg {
  color: #64748b;
  font-style: italic;
}

.error-msg {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  margin: 1rem 0;
}

.warning-msg {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-size: 0.92rem;
}

.day-breakdown,
.category-breakdown {
  margin: 1rem 0;
}

.day-breakdown ul,
.category-breakdown ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.day-breakdown li,
.category-breakdown li {
  background: #f1f5f9;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #334155;
}

/* =========================================================
   Active Class Architecture Dark Mode Overrides
   ========================================================= */

body.tsap-dark-mode .report-controls {
  background: #1e293b !important;
  border-color: #374151 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

body.tsap-dark-mode .date-fieldset {
  border-color: #374151 !important;
  background: rgba(15, 23, 42, 0.4) !important;
}

body.tsap-dark-mode .date-fieldset legend,
body.tsap-dark-mode .dmy-field label {
  color: #f3f4f6 !important;
}

body.tsap-dark-mode .dmy-field select {
  background: #0f172a !important;
  border-color: #374151 !important;
  color: #f1f5f9 !important;
}

body.tsap-dark-mode .dmy-field select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

body.tsap-dark-mode .shortcut-btn {
  background: #1e293b !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}

body.tsap-dark-mode .shortcut-btn:hover {
  background: #334155 !important;
  border-color: #64748b !important;
}

body.tsap-dark-mode .generate-btn,
body.tsap-dark-mode .copy-btn {
  background: #1e5fbf !important;
  border-color: #1e5fbf !important;
  color: #ffffff !important;
}

body.tsap-dark-mode .generate-btn:hover,
body.tsap-dark-mode .copy-btn:hover {
  background: #38bdf8 !important;
  border-color: #38bdf8 !important;
  color: #0f172a !important;
}

body.tsap-dark-mode .report-section h3 {
  border-bottom-color: #38bdf8 !important;
}

body.tsap-dark-mode .page-list li {
  background: #1e293b !important;
  border-left-color: #38bdf8 !important;
}

body.tsap-dark-mode .page-list a,
body.tsap-dark-mode .issue-list a,
body.tsap-dark-mode .comment-list a {
  color: #38bdf8 !important;
}

body.tsap-dark-mode .stat-card,
body.tsap-dark-mode .issue-list li,
body.tsap-dark-mode .comment-list li {
  background: #1e293b !important;
  border-color: #374151 !important;
}

body.tsap-dark-mode .stat-card .stat-number {
  color: #38bdf8 !important;
}

body.tsap-dark-mode .stat-card .stat-label,
body.tsap-dark-mode .loading-msg {
  color: #cbd5e1 !important;
}

body.tsap-dark-mode .day-breakdown li,
body.tsap-dark-mode .category-breakdown li {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1px solid #374151 !important;
}

body.tsap-dark-mode .copy-output {
  border-top-color: #374151 !important;
}

body.tsap-dark-mode .copy-output textarea {
  background: #0f172a !important;
  border-color: #374151 !important;
  color: #f1f5f9 !important;
}

body.tsap-dark-mode .error-msg {
  background: rgba(185, 28, 28, 0.2) !important;
  border-color: #f87171 !important;
  color: #fca5a5 !important;
}

body.tsap-dark-mode .warning-msg {
  background: rgba(180, 83, 9, 0.2) !important;
  border-color: #fbbf24 !important;
  color: #fde68a !important;
}
</style>

<script>
(function() {
  'use strict';
  
  const PAGES_JSON_URL = '/pages.json';
  const GITHUB_API_BASE = 'https://api.github.com/repos/sunilabrahamindia/sunilabraham';
  
  const fromDay = document.getElementById('from-day');
  const fromMonth = document.getElementById('from-month');
  const fromYear = document.getElementById('from-year');

  const toDay = document.getElementById('to-day');
  const toMonth = document.getElementById('to-month');
  const toYear = document.getElementById('to-year');

  const prevWeekBtn = document.getElementById('prev-week-btn');
  const currentWeekBtn = document.getElementById('current-week-btn');
  const generateBtn = document.getElementById('generate-btn');
  const reportOutput = document.getElementById('report-output');
  const copyText = document.getElementById('copy-text');
  const copyBtn = document.getElementById('copy-btn');
  const copyStatus = document.getElementById('copy-status');
  
  let cachedPages = null;
  let copyReadyText = '';

  function populateSelect(select, start, end) {
    const frag = document.createDocumentFragment();
    for (let i = start; i <= end; i++) {
      const opt = document.createElement('option');
      opt.value = String(i);
      opt.textContent = String(i);
      frag.appendChild(opt);
    }
    select.appendChild(frag);
  }

  function initDMYSelects() {
    populateSelect(fromDay, 1, 31);
    populateSelect(toDay, 1, 31);
    
    const curYear = new Date().getFullYear();
    populateSelect(fromYear, 2024, curYear + 1);
    populateSelect(toYear, 2024, curYear + 1);
  }
  
  function formatDateDMY(date) {
    const d = date.getDate();
    const m = date.toLocaleString('en-GB', { month: 'long' });
    const y = date.getFullYear();
    return `${d} ${m} ${y}`;
  }
  
  function formatDateISO(date) {
    return date.toISOString().split('T')[0];
  }

  function cleanRelativeUrl(url) {
    if (!url) return '/';
    return url.replace(/^https?:\/\/[^\/]+/i, '');
  }
  
  function getDayName(date) {
    return date.toLocaleString('en-GB', { weekday: 'long' });
  }
  
  function getPreviousSundaySaturday() {
    const today = new Date();
    const dayOfWeek = today.getDay();
    const daysSinceSaturday = (dayOfWeek + 1) % 7;
    const saturday = new Date(today);
    saturday.setDate(today.getDate() - daysSinceSaturday);
    saturday.setHours(0, 0, 0, 0);
    const sunday = new Date(saturday);
    sunday.setDate(saturday.getDate() - 6);
    return { from: sunday, to: saturday };
  }
  
  function getCurrentWeekSundaySaturday() {
    const today = new Date();
    const dayOfWeek = today.getDay();
    const daysSinceSunday = dayOfWeek;
    const sunday = new Date(today);
    sunday.setDate(today.getDate() - daysSinceSunday);
    sunday.setHours(0, 0, 0, 0);
    const saturday = new Date(sunday);
    saturday.setDate(sunday.getDate() + 6);
    return { from: sunday, to: saturday };
  }
  
  function setDates(fromDate, toDate) {
    fromDay.value = String(fromDate.getDate());
    fromMonth.value = String(fromDate.getMonth() + 1);
    fromYear.value = String(fromDate.getFullYear());

    toDay.value = String(toDate.getDate());
    toMonth.value = String(toDate.getMonth() + 1);
    toYear.value = String(toDate.getFullYear());
  }
  
  function updateURL(fromDate, toDate) {
    const params = new URLSearchParams();
    params.set('from', formatDateISO(fromDate));
    params.set('to', formatDateISO(toDate));
    const newURL = `${window.location.pathname}?${params.toString()}`;
    window.history.replaceState({}, '', newURL);
  }
  
  function getSelectedDate(dayEl, monthEl, yearEl) {
    const d = parseInt(dayEl.value, 10);
    const m = parseInt(monthEl.value, 10);
    const y = parseInt(yearEl.value, 10);
    const date = new Date(y, m - 1, d, 0, 0, 0);
    if (date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d) {
      return date;
    }
    return null;
  }
  
  function isInDateRange(date, from, to) {
    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    const f = new Date(from.getFullYear(), from.getMonth(), from.getDate());
    const t = new Date(to.getFullYear(), to.getMonth(), to.getDate());
    return d >= f && d <= t;
  }
  
  async function fetchPages() {
    if (cachedPages) return cachedPages;
    try {
      const resp = await fetch(PAGES_JSON_URL);
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      const data = await resp.json();
      cachedPages = Array.isArray(data) ? data : [];
      return cachedPages;
    } catch (err) {
      console.error('Failed to fetch pages.json:', err);
      throw new Error('Could not load page index. Please refresh the page.');
    }
  }

  async function fetchWithTimeout(url, timeoutMs = 8000) {
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), timeoutMs);
    try {
      const resp = await fetch(url, { signal: controller.signal });
      clearTimeout(timer);
      return resp;
    } catch (err) {
      clearTimeout(timer);
      throw err;
    }
  }
  
  async function fetchCommits(since, until) {
    const commits = [];
    let page = 1;
    const perPage = 100;
    const maxPages = 3;
    
    while (page <= maxPages) {
      const url = `${GITHUB_API_BASE}/commits?since=${formatDateISO(since)}T00:00:00Z&until=${formatDateISO(until)}T23:59:59Z&per_page=${perPage}&page=${page}`;
      const resp = await fetchWithTimeout(url);
      if (!resp.ok) {
        if (resp.status === 403) throw new Error('GitHub API rate limit exceeded.');
        throw new Error(`GitHub API error HTTP ${resp.status}`);
      }
      const data = await resp.json();
      if (!Array.isArray(data) || data.length === 0) break;
      commits.push(...data);
      if (data.length < perPage) break;
      page++;
    }
    return commits;
  }
  
  async function fetchIssues(since, until) {
    const issues = [];
    let page = 1;
    const perPage = 100;
    const maxPages = 3;
    
    while (page <= maxPages) {
      const url = `${GITHUB_API_BASE}/issues?state=all&since=${formatDateISO(since)}T00:00:00Z&until=${formatDateISO(until)}T23:59:59Z&per_page=${perPage}&page=${page}`;
      const resp = await fetchWithTimeout(url);
      if (!resp.ok) {
        if (resp.status === 403) throw new Error('GitHub API rate limit exceeded.');
        throw new Error(`GitHub API error HTTP ${resp.status}`);
      }
      const data = await resp.json();
      if (!Array.isArray(data) || data.length === 0) break;
      issues.push(...data);
      if (data.length < perPage) break;
      page++;
    }
    return issues.filter(i => !i.pull_request);
  }
  
  async function fetchIssueComments(issueNumber, since, until) {
    const url = `${GITHUB_API_BASE}/issues/${issueNumber}/comments?since=${formatDateISO(since)}T00:00:00Z&until=${formatDateISO(until)}T23:59:59Z&per_page=100`;
    const resp = await fetchWithTimeout(url);
    if (!resp.ok) {
      if (resp.status === 403) return { error: 'rate_limit' };
      return { error: `HTTP ${resp.status}` };
    }
    const data = await resp.json();
    return Array.isArray(data) ? data : [];
  }
  
  async function fetchIssuesWithComments(since, until, activeIssues) {
    const issuesWithComments = [];
    let rateLimitHit = false;

    // Filter to issues updated within range to avoid scanning entire repo history
    const candidates = activeIssues.filter(i => {
      const updated = new Date(i.updated_at || i.created_at);
      return isInDateRange(updated, since, until) && (i.comments > 0);
    }).slice(0, 15);
    
    for (const issue of candidates) {
      if (rateLimitHit) break;
      
      try {
        const comments = await fetchIssueComments(issue.number, since, until);
        if (comments.error === 'rate_limit') {
          rateLimitHit = true;
        } else if (Array.isArray(comments) && comments.length > 0) {
          issuesWithComments.push({ issue, comments });
        }
      } catch (err) {
        rateLimitHit = true;
        break;
      }
    }
    
    return { issuesWithComments, rateLimitHit };
  }
  
  function filterPagesByDate(pages, from, to) {
    return pages.filter(p => {
      if (!p.created) return false;
      const createdDate = new Date(p.created + 'T00:00:00');
      return isInDateRange(createdDate, from, to);
    });
  }
  
  function groupPagesByDay(pages) {
    const groups = {};
    for (const p of pages) {
      const day = p.created;
      groups[day] = (groups[day] || 0) + 1;
    }
    return groups;
  }
  
  function groupPagesByCategory(pages) {
    const groups = {};
    for (const p of pages) {
      const cats = p.categories || [];
      for (const c of cats) {
        groups[c] = (groups[c] || 0) + 1;
      }
    }
    return groups;
  }
  
  function renderReport(pages, commitsData, issuesCreatedData, issuesWithCommentsData, from, to) {
    const fromDayName = getDayName(from);
    const toDayName = getDayName(to);
    const fromStr = formatDateDMY(from);
    const toStr = formatDateDMY(to);
    
    const pagesByDay = groupPagesByDay(pages);
    const pagesByCategory = groupPagesByCategory(pages);
    
    let html = '';
    
    html += `<div class="report-section">`;
    html += `<h3>Pages created</h3>`;
    html += `<p><strong>From ${fromDayName} ${fromStr} to ${toDayName} ${toStr}, ${pages.length} page${pages.length !== 1 ? 's' : ''} were created.</strong></p>`;
    
    if (pages.length === 0) {
      html += `<p class="warning-msg">No pages were created during this period.</p>`;
    } else {
      html += `<div class="stats-grid">`;
      html += `<div class="stat-card"><div class="stat-number">${pages.length}</div><div class="stat-label">Total pages</div></div>`;
      html += `</div>`;
      
      html += `<div class="day-breakdown"><h4>Pages per day</h4><ul>`;
      const sortedDays = Object.keys(pagesByDay).sort();
      for (const day of sortedDays) {
        const d = new Date(day + 'T00:00:00');
        const dayName = getDayName(d);
        const dayDate = formatDateDMY(d);
        html += `<li>${dayName} ${dayDate}: ${pagesByDay[day]}</li>`;
      }
      html += `</ul></div>`;
      
      html += `<div class="category-breakdown"><h4>Pages by category</h4><ul>`;
      const sortedCats = Object.keys(pagesByCategory).sort();
      for (const cat of sortedCats) {
        html += `<li>${cat}: ${pagesByCategory[cat]}</li>`;
      }
      html += `</ul></div>`;
      
      html += `<ul class="page-list">`;
      const sortedPages = [...pages].sort((a, b) => a.created.localeCompare(b.created));
      for (const p of sortedPages) {
        const d = new Date(p.created + 'T00:00:00');
        const createdStr = formatDateDMY(d);
        const title = p.title || 'Untitled';
        const relLink = cleanRelativeUrl(p.permalink || p.url || '#');
        const desc = p.description || '';
        html += `<li><a href="${relLink}">${title}</a>, created on ${createdStr} – ${desc}</li>`;
      }
      html += `</ul>`;
    }
    html += `</div>`;
    
    html += `<div class="report-section">`;
    html += `<h3>Git activity</h3>`;
    if (commitsData.error) {
      html += `<p class="warning-msg">Git commit data unavailable (${commitsData.error}).</p>`;
    } else {
      const commits = commitsData.commits || [];
      html += `<p><strong>${commits.length} commit${commits.length !== 1 ? 's' : ''}</strong> were made during this period.</p>`;
    }
    html += `</div>`;
    
    html += `<div class="report-section">`;
    html += `<h3>GitHub issues created</h3>`;
    if (issuesCreatedData.error) {
      html += `<p class="warning-msg">GitHub Issues data unavailable (${issuesCreatedData.error}).</p>`;
    } else {
      const issuesCreated = (issuesCreatedData.issues || []).filter(i => {
        const created = new Date(i.created_at);
        return isInDateRange(created, from, to);
      });
      if (issuesCreated.length === 0) {
        html += `<p class="warning-msg">No issues were created during this period.</p>`;
      } else {
        html += `<ul class="issue-list">`;
        const sortedIssues = [...issuesCreated].sort((a, b) => a.created_at.localeCompare(b.created_at));
        for (const issue of sortedIssues) {
          const d = new Date(issue.created_at);
          const createdStr = formatDateDMY(d);
          html += `<li>#${issue.number} <a href="${issue.html_url}" rel="noopener noreferrer">${issue.title}</a>, created on ${createdStr}</li>`;
        }
        html += `</ul>`;
      }
    }
    html += `</div>`;
    
    html += `<div class="report-section">`;
    html += `<h3>GitHub issues with new comments</h3>`;
    const { issuesWithComments, rateLimitHit } = issuesWithCommentsData;
    const issuesWithNewComments = issuesWithComments || [];
    
    if (issuesWithNewComments.length === 0) {
      html += `<p class="warning-msg">No existing issues received new comments during this period.</p>`;
    } else {
      html += `<ul class="comment-list">`;
      for (const item of issuesWithNewComments) {
        const issue = item.issue;
        const comments = item.comments;
        const firstComment = comments[0];
        const d = new Date(firstComment.created_at);
        const commentStr = formatDateDMY(d);
        html += `<li>#${issue.number} <a href="${issue.html_url}" rel="noopener noreferrer">${issue.title}</a>, ${comments.length} new comment${comments.length !== 1 ? 's' : ''} (first on ${commentStr})</li>`;
      }
      html += `</ul>`;
    }
    
    if (rateLimitHit) {
      html += `<p class="warning-msg">Note: GitHub API comment query limit reached. Some issue comment entries may be truncated.</p>`;
    }
    html += `</div>`;
    
    reportOutput.innerHTML = html;
    
    const openingSentence = `From ${fromDayName} ${fromStr} to ${toDayName} ${toStr}, ${pages.length} page${pages.length !== 1 ? 's' : ''} were created.`;
    let copyTextContent = openingSentence + '\n\n';
    
    if (pages.length > 0) {
      const sortedPages = [...pages].sort((a, b) => a.created.localeCompare(b.created));
      for (const p of sortedPages) {
        const d = new Date(p.created + 'T00:00:00');
        const createdStr = formatDateDMY(d);
        const title = p.title || 'Untitled';
        const relLink = cleanRelativeUrl(p.permalink || p.url || '#');
        const desc = p.description || '';
        copyTextContent += `* **[${title}](${relLink})**, created on ${createdStr} – ${desc}\n`;
      }
      copyTextContent += '\n';
    }
    
    if (!commitsData.error) {
      const commits = commitsData.commits || [];
      copyTextContent += `**Git activity:** ${commits.length} commit${commits.length !== 1 ? 's' : ''}.\n\n`;
    }
    
    if (!issuesCreatedData.error) {
      const issuesCreated = (issuesCreatedData.issues || []).filter(i => {
        const created = new Date(i.created_at);
        return isInDateRange(created, from, to);
      });
      copyTextContent += `**GitHub issues created:** ${issuesCreated.length}.\n`;
      if (issuesCreated.length > 0) {
        const sortedIssues = [...issuesCreated].sort((a, b) => a.created_at.localeCompare(b.created_at));
        for (const issue of sortedIssues) {
          const d = new Date(issue.created_at);
          const createdStr = formatDateDMY(d);
          copyTextContent += `* #${issue.number} [${issue.title}](${issue.html_url}), created on ${createdStr}\n`;
        }
      }
    }
    
    copyReadyText = copyTextContent;
    copyText.value = copyReadyText;
  }
  
  async function generateReport() {
    const from = getSelectedDate(fromDay, fromMonth, fromYear);
    const to = getSelectedDate(toDay, toMonth, toYear);
    
    if (!from || !to) {
      reportOutput.innerHTML = `<p class="error-msg">Please select valid calendar dates for both From and To.</p>`;
      return;
    }
    
    if (from > to) {
      reportOutput.innerHTML = `<p class="error-msg">The From date must be before or equal to the To date.</p>`;
      return;
    }
    
    const today = new Date();
    today.setHours(23, 59, 59, 999);
    if (to > today) {
      reportOutput.innerHTML = `<p class="error-msg">The To date cannot be in the future.</p>`;
      return;
    }

    updateURL(from, to);
    
    reportOutput.setAttribute('aria-busy', 'true');
    reportOutput.innerHTML = `<p class="loading-msg">Loading data…</p>`;
    copyText.value = '';
    copyReadyText = '';
    
    try {
      const pages = await fetchPages();
      const filteredPages = filterPagesByDate(pages, from, to);
      
      let commitsData = { commits: [], error: null };
      try {
        const commits = await fetchCommits(from, to);
        commitsData.commits = commits;
      } catch (err) {
        commitsData.error = err.message || 'Error loading commits';
      }
      
      let issuesCreatedData = { issues: [], error: null };
      try {
        const issues = await fetchIssues(from, to);
        issuesCreatedData.issues = issues;
      } catch (err) {
        issuesCreatedData.error = err.message || 'Error loading issues';
      }
      
      let issuesWithCommentsData = { issuesWithComments: [], rateLimitHit: false };
      if (!issuesCreatedData.error && issuesCreatedData.issues.length > 0) {
        try {
          issuesWithCommentsData = await fetchIssuesWithComments(from, to, issuesCreatedData.issues);
        } catch (err) {
          issuesWithCommentsData = { issuesWithComments: [], rateLimitHit: true };
        }
      }
      
      renderReport(filteredPages, commitsData, issuesCreatedData, issuesWithCommentsData, from, to);
      
    } catch (err) {
      reportOutput.innerHTML = `<p class="error-msg">Error: ${err.message}</p>`;
    } finally {
      reportOutput.setAttribute('aria-busy', 'false');
    }
  }
  
  function copyToClipboard() {
    if (!copyReadyText) {
      copyStatus.textContent = 'Generate a report first.';
      copyStatus.className = 'copy-status error';
      return;
    }
    
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    
    navigator.clipboard.writeText(copyReadyText).then(() => {
      copyStatus.textContent = 'Copied!';
      copyStatus.className = 'copy-status success';
      setTimeout(() => {
        copyStatus.textContent = '';
        copyStatus.className = 'copy-status';
      }, 2000);
    }).catch(() => {
      copyStatus.textContent = 'Copy failed. Select and copy manually.';
      copyStatus.className = 'copy-status error';
    });
  }
  
  initDMYSelects();

  prevWeekBtn.addEventListener('click', () => {
    const { from, to } = getPreviousSundaySaturday();
    setDates(from, to);
  });
  
  currentWeekBtn.addEventListener('click', () => {
    const { from, to } = getCurrentWeekSundaySaturday();
    setDates(from, to);
  });
  
  generateBtn.addEventListener('click', generateReport);
  copyBtn.addEventListener('click', copyToClipboard);
  
  const params = new URLSearchParams(window.location.search);
  const fromParam = params.get('from');
  const toParam = params.get('to');
  
  if (fromParam && toParam) {
    const from = new Date(fromParam + 'T00:00:00');
    const to = new Date(toParam + 'T00:00:00');
    if (!isNaN(from.getTime()) && !isNaN(to.getTime())) {
      setDates(from, to);
      generateReport();
    } else {
      const { from: f, to: t } = getPreviousSundaySaturday();
      setDates(f, t);
    }
  } else {
    const { from, to } = getPreviousSundaySaturday();
    setDates(from, to);
  }
  
})();
</script>