content.js

(() => {
  const api = typeof browser !== "undefined" && browser.runtime ? browser : chrome;
  const ISSUE_PATH = /^\/([^/]+)\/([^/]+)\/issues\/(\d+)\/?$/;
  const PULL_PATH = /^\/([^/]+)\/([^/]+)\/pull\/(\d+)\/?$/;
  const PROJECT_PATH = /^\/(?:orgs|users)\/[^/]+\/projects\/\d+(?:\/|$)|^\/[^/]+\/[^/]+\/projects\/\d+(?:\/|$)/;
  const CACHE_TTL_MS = 5 * 60 * 1000;
  const DAY_MS = 24 * 60 * 60 * 1000;
  const FETCH_CHUNK = 60;
  const cache = new Map(); // "owner/repo#n" -> { at, values, createdAt }
  const pending = new Set();
  let scheduled = null;
  let noticeShown = false;
  let settings = { ageEnabled: false, ageUnit: "months", ageWarnDays: 90, pinsEnabled: true, skipShownFields: true, prAssociation: true, prFork: false, prSize: false, prMergeState: false, kanbanEnabled: true, kanbanDrag: true, sidebarToggle: true };
  const prCache = new Map(); // "owner/repo!n" -> { at, info }
  const prPending = new Set();
  let pins = [];
  let pinsCollapsed = true;

  // ---------------------------------------------------------------------------
  // Issue references
  // ---------------------------------------------------------------------------

  function refFromPath(path) {
    const m = ISSUE_PATH.exec(path);
    if (!m) return null;
    return { owner: m[1], repo: m[2], number: Number(m[3]), key: `${m[1]}/${m[2]}#${m[3]}` };
  }

  function issueRef(anchor) {
    try {
      return refFromPath(new URL(anchor.href, location.origin).pathname);
    } catch {
      return null;
    }
  }

  // Accepts a URL, "owner/repo#123", or "#123" / "123" when a repository can be inferred from the page.
  function parseIssueInput(text, fallbackRepo) {
    const s = String(text || "").trim();
    if (!s) return null;
    let m = /^([^/\s]+)\/([^#\s]+)#(\d+)$/.exec(s);
    if (m) return { owner: m[1], repo: m[2], number: Number(m[3]), key: `${m[1]}/${m[2]}#${m[3]}` };
    m = /^#?(\d+)$/.exec(s);
    if (m) {
      if (!fallbackRepo) return null;
      return { owner: fallbackRepo.owner, repo: fallbackRepo.repo, number: Number(m[1]), key: `${fallbackRepo.owner}/${fallbackRepo.repo}#${m[1]}` };
    }
    // Only absolute URLs: a relative value would resolve against the current page and pick up its issue number.
    if (/^https?:\/\//i.test(s)) {
      try {
        const url = new URL(s);
        if (/(^|\.)github\.com$/.test(url.hostname)) return refFromPath(url.pathname);
      } catch { /* not a url */ }
    }
    return null;
  }

  // The issue the user is currently looking at: an issue page, or the item opened in a project side panel.
  function currentIssue() {
    const fromPath = refFromPath(location.pathname);
    if (fromPath) return fromPath;
    const param = new URLSearchParams(location.search).get("issue");
    if (param) {
      const parts = param.split("|");
      if (parts.length === 3 && /^\d+$/.test(parts[2])) {
        return { owner: parts[0], repo: parts[1], number: Number(parts[2]), key: `${parts[0]}/${parts[1]}#${parts[2]}` };
      }
    }
    const dialog = document.querySelector('[role="dialog"][class*="SidePanel"], [role="dialog"] [class*="SidePanel"]');
    if (dialog) {
      for (const a of dialog.querySelectorAll("a[href]")) {
        if (a.closest(".gsf-pins, .gsf-kanban")) continue;
        const ref = issueRef(a);
        if (ref) return ref;
      }
    }
    return null;
  }

  // Title of an issue as shown on the current page: issue header, side panel, project row or board card.
  function titleFromPage(ref) {
    if (refFromPath(location.pathname) && refFromPath(location.pathname).key === ref.key) {
      const h1 = document.querySelector('[data-testid="issue-title"], h1 bdi, .js-issue-title');
      if (h1 && h1.textContent.trim()) return h1.textContent.trim();
    }
    const suffix = `/${ref.owner}/${ref.repo}/issues/${ref.number}`;
    for (const a of document.querySelectorAll("a[href]")) {
      if (a.closest(".gsf-pins, .gsf-badge, .gsf-kanban")) continue;
      let path;
      try { path = new URL(a.href, location.origin).pathname.replace(/\/$/, ""); } catch { continue; }
      if (path !== suffix) continue;
      const text = a.textContent.replace(/\s+/g, " ").trim();
      if (text && !/^#?\d+$/.test(text) && !/^(?:[^/\s]+\/[^#\s]+)?#\d+$/.test(text)) return text;
    }
    return "";
  }

  function currentRepo() {
    const m = /^\/([^/]+)\/([^/]+)(?:\/|$)/.exec(location.pathname);
    if (!m || m[1] === "orgs" || m[1] === "users") return null;
    return { owner: m[1], repo: m[2] };
  }

  // ---------------------------------------------------------------------------
  // Rows: sub-issue lists, project table rows, project board cards
  // ---------------------------------------------------------------------------

  function collectRows() {
    const rows = [];
    const seen = new Set();

    const containers = document.querySelectorAll('[data-testid="sub-issues-issue-container"], [data-testid*="sub-issues"]');
    for (const container of containers) {
      // A list the kanban board has replaced is hidden: its rows are not worth a query or a badge.
      if (container.closest(".gsf-kanban-hidden")) continue;
      for (const li of container.querySelectorAll('li[role="treeitem"]')) {
        if (seen.has(li)) continue;
        seen.add(li);
        const titleLink = [...li.querySelectorAll("a[href]")].find((a) => issueRef(a) && !a.closest(".gsf-badge"));
        if (!titleLink) continue;
        const ownContent = li.querySelector(":scope > .PRIVATE_TreeView-item-container, :scope > [class*='TreeViewItemContainer']") || li;
        if (!ownContent.contains(titleLink)) continue;
        rows.push({ kind: "sub", li, titleLink, ref: issueRef(titleLink), content: ownContent });
      }
    }

    // Project table layout: the title cell of each row.
    for (const cell of document.querySelectorAll('[role="grid"] [role="rowheader"]')) {
      if (seen.has(cell)) continue;
      seen.add(cell);
      const titleLink = [...cell.querySelectorAll("a[href]")].find((a) => issueRef(a) && !a.closest(".gsf-badge"));
      if (!titleLink) continue;
      rows.push({ kind: "table", li: cell, titleLink, ref: issueRef(titleLink), content: cell });
    }

    // Project board layout: one card per item.
    for (const h3 of document.querySelectorAll('h3[id^="board-card-title-"]')) {
      const titleLink = h3.closest("a[href]");
      if (!titleLink) continue;
      const ref = issueRef(titleLink);
      if (!ref) continue;
      // The title link itself has role="button"; the card is the closest one above it.
      const card = titleLink.parentElement.closest('[role="button"]') || titleLink.parentElement;
      if (seen.has(card)) continue;
      seen.add(card);
      rows.push({ kind: "board", li: card, titleLink, ref, content: card });
    }

    return rows;
  }

  // What GitHub already displays for this row, so a badge would only repeat it:
  // board cards list their fields under a "Fields" list whose chips carry a "Field: value" tooltip,
  // table views show fields as columns, and a board grouped by a field names that field's value in the column header.
  function shownOnPage(row) {
    const fields = new Set();
    const values = new Set();
    if (row.kind === "board") {
      for (const chip of row.content.querySelectorAll('ul[aria-label="Fields"] li, [data-testid*="card-field"], [class*="cardLabel"]')) {
        const text = (chip.querySelector('[data-component="Tooltip"]') || chip).textContent.trim();
        const m = /^([^:]{1,60}):\s/.exec(text);
        if (m) fields.add(m[1].trim().toLowerCase());
      }
      const column = row.content.closest("[data-board-column]");
      if (column) values.add(String(column.getAttribute("data-board-column")).trim().toLowerCase());
    } else if (row.kind === "table") {
      const grid = row.content.closest('[role="grid"]');
      for (const th of grid ? grid.querySelectorAll('[role="columnheader"]') : []) {
        // The header holds the column name followed by a "<name> column options" menu label; take the first leaf.
        const leaf = [...th.querySelectorAll("*")].find((el) => el.children.length === 0 && el.textContent.trim());
        const text = (leaf ? leaf.textContent : th.textContent).replace(/\s*column options$/i, "").trim().toLowerCase();
        if (text) fields.add(text);
      }
    }
    return { fields, values };
  }

  function findAnchorSlot(row) {
    if (row.kind === "table") {
      return { parent: row.titleLink.parentElement, before: null };
    }
    if (row.kind === "board") {
      let wrap = row.titleLink.parentElement.querySelector(":scope > .gsf-badges");
      if (!wrap) {
        wrap = document.createElement("div");
        wrap.className = "gsf-badges";
        row.titleLink.parentElement.insertBefore(wrap, row.titleLink.nextSibling);
      }
      return { parent: wrap, before: null };
    }
    const typeIndicator = row.content.querySelector('[data-testid*="sub-issue-type-indicator"]');
    if (typeIndicator) {
      const link = typeIndicator.closest("a") || typeIndicator;
      return { parent: link.parentElement, before: link.nextSibling };
    }
    const titleContainer = row.titleLink.closest('[class*="Title-module__container"]') || row.titleLink.parentElement;
    return { parent: titleContainer, before: titleContainer.firstChild };
  }

  // ---------------------------------------------------------------------------
  // Age
  // ---------------------------------------------------------------------------

  function ageOf(createdAt) {
    const created = new Date(createdAt);
    if (Number.isNaN(created.getTime())) return null;
    const days = Math.max(0, Math.floor((Date.now() - created.getTime()) / DAY_MS));
    let text;
    if (settings.ageUnit === "days") {
      text = days === 0 ? "today" : `${days}d`;
    } else if (settings.ageUnit === "weeks") {
      const weeks = Math.floor(days / 7);
      text = weeks < 1 ? "this week" : `${weeks}w`;
    } else {
      const months = Math.floor(days / 30.4375);
      text = months < 1 ? "this month" : `${months} mo`;
    }
    const months = Math.floor(days / 30.4375);
    const warn = settings.ageWarnDays > 0 && days >= settings.ageWarnDays;
    const title = `Age: ${months} month${months === 1 ? "" : "s"} (${days} day${days === 1 ? "" : "s"}), created ${created.toISOString().slice(0, 10)}`
      + (warn ? `. Open for more than ${settings.ageWarnDays} days.` : "");
    return { text, title, days, color: warn ? "YELLOW" : "GRAY" };
  }

  // ---------------------------------------------------------------------------
  // Badges
  // ---------------------------------------------------------------------------

  function render(row, hit) {
    const shown = settings.skipShownFields ? shownOnPage(row) : { fields: new Set(), values: new Set() };
    const values = ((hit && hit.values) || []).filter((v) => !shown.fields.has(String(v.field).toLowerCase()) && !shown.values.has(String(v.value).trim().toLowerCase()));
    const scope = row.content.contains(row.titleLink) ? row.content : row.titleLink.parentElement;
    scope.querySelectorAll(`.gsf-badge[data-gsf-for="${row.ref.key}"]`).forEach((el) => el.remove());
    row.titleLink.parentElement.querySelectorAll(`.gsf-badge[data-gsf-for="${row.ref.key}"]`).forEach((el) => el.remove());
    const age = settings.ageEnabled && hit && hit.createdAt ? ageOf(hit.createdAt) : null;
    if (!values.length && !age) {
      row.li.dataset.gsfState = "empty";
      return;
    }
    const slot = findAnchorSlot(row);
    if (!slot || !slot.parent) return;
    const frag = document.createDocumentFragment();
    for (const v of values) {
      const badge = document.createElement("a");
      badge.className = "gsf-badge";
      badge.dataset.gsfColor = v.color || "GRAY";
      badge.dataset.gsfFor = row.ref.key;
      badge.textContent = v.value;
      badge.title = `${v.field}: ${v.value}`;
      const q = `field.${v.field}:"${v.value}"`;
      badge.href = `/${row.ref.owner}/${row.ref.repo}/issues?q=${encodeURIComponent(q)}`;
      badge.addEventListener("click", (e) => e.stopPropagation());
      frag.appendChild(badge);
    }
    if (age) {
      const badge = document.createElement("span");
      badge.className = "gsf-badge gsf-age";
      badge.dataset.gsfColor = age.color;
      badge.dataset.gsfFor = row.ref.key;
      badge.textContent = age.text;
      badge.title = age.title;
      frag.appendChild(badge);
    }
    slot.parent.insertBefore(frag, slot.before);
    row.li.dataset.gsfState = "done";
  }

  function hasBadges(row) {
    const sel = `.gsf-badge[data-gsf-for="${row.ref.key}"]`;
    return Boolean(row.content.querySelector(sel) || row.titleLink.parentElement.querySelector(sel));
  }

  function showNotice(message, withOptionsButton) {
    if (noticeShown) return;
    const container = document.querySelector('[data-testid="sub-issues-issue-container"]');
    if (!container) {
      // No sub-issues list on this page (project view): report through the pins panel and flag its button.
      if (panel) setPanelStatus(message, false, withOptionsButton);
      flagHeaderButton(message);
      return;
    }
    noticeShown = true;
    const box = document.createElement("div");
    box.className = "gsf-notice";
    const text = document.createElement("span");
    text.textContent = message;
    box.appendChild(text);
    if (withOptionsButton) {
      const btn = document.createElement("button");
      btn.type = "button";
      btn.textContent = "Open extension options";
      btn.addEventListener("click", () => api.runtime.sendMessage({ type: "openOptions" }));
      box.appendChild(btn);
    }
    const close = document.createElement("button");
    close.type = "button";
    close.textContent = "Dismiss";
    close.addEventListener("click", () => box.remove());
    box.appendChild(close);
    container.prepend(box);
  }

  async function scan() {
    scheduled = null;
    syncPanel();
    syncKanban();
    syncSidebar();
    scanPulls().catch((err) => console.warn("[github-issue-toolkit]", err));
    const rows = collectRows();
    if (!rows.length) return;

    const now = Date.now();
    const toFetch = new Map();
    for (const row of rows) {
      const hit = cache.get(row.ref.key);
      if (hit && now - hit.at < CACHE_TTL_MS) {
        if (!hasBadges(row) && row.li.dataset.gsfState !== "empty") render(row, hit);
        continue;
      }
      if (!pending.has(row.ref.key)) toFetch.set(row.ref.key, row.ref);
    }
    if (!toFetch.size) return;

    for (const key of toFetch.keys()) pending.add(key);
    const issues = [...toFetch.values()].map(({ owner, repo, number }) => ({ owner, repo, number }));

    // Project tables can hold hundreds of rows: keep each GraphQL request small enough for GitHub's limits.
    const chunks = [];
    for (let i = 0; i < issues.length; i += FETCH_CHUNK) chunks.push(issues.slice(i, i + FETCH_CHUNK));

    let response;
    try {
      const parts = await Promise.all(chunks.map((chunk) => api.runtime.sendMessage({ type: "fetchFieldValues", issues: chunk })));
      const failed = parts.find((part) => !part || part.error);
      response = failed || parts.reduce((acc, part) => {
        Object.assign(acc.values, part.values || {});
        Object.assign(acc.created, part.created || {});
        return acc;
      }, { values: {}, created: {} });
    } catch (err) {
      response = { error: err && err.message ? err.message : String(err) };
    } finally {
      for (const key of toFetch.keys()) pending.delete(key);
    }

    if (!response || response.error) {
      if (response && response.error === "NO_TOKEN") {
        showNotice("GitHub Issue Toolkit: add a GitHub token in the extension settings to show field values here.", true);
      } else if (response && response.error === "NO_FIELDS") {
        showNotice("GitHub Issue Toolkit: choose which fields to show, or enable the age badge, in the extension settings.", true);
      } else {
        showNotice(`GitHub Issue Toolkit: ${response ? response.error : "unknown error"}`, true);
      }
      return;
    }

    const at = Date.now();
    for (const key of toFetch.keys()) {
      cache.set(key, {
        at,
        values: (response.values && response.values[key]) || [],
        createdAt: (response.created && response.created[key]) || null
      });
    }
    for (const row of collectRows()) {
      const hit = cache.get(row.ref.key);
      if (hit && toFetch.has(row.ref.key)) render(row, hit);
    }
  }


  // ---------------------------------------------------------------------------
  // Pull request lists: author association, fork, size and merge state badges
  // ---------------------------------------------------------------------------

  function prEnabled() {
    return settings.prAssociation || settings.prFork || settings.prSize || settings.prMergeState;
  }

  function pullRef(anchor) {
    let path;
    try { path = new URL(anchor.href, location.origin).pathname; } catch { return null; }
    const m = PULL_PATH.exec(path);
    if (!m) return null;
    return { owner: m[1], repo: m[2], number: Number(m[3]), key: `${m[1]}/${m[2]}!${m[3]}` };
  }

  // Pull request rows: the pull request list (repository /pulls and the global /pulls pages),
  // and Projects views whose items are pull requests (table title cells and board cards).
  function collectPullRows() {
    const rows = [];
    const seen = new Set();
    for (const link of document.querySelectorAll('li a[data-testid="listitem-title-link"], li a[data-testid="issue-pr-title-link"]')) {
      const ref = pullRef(link);
      const li = ref && link.closest("li");
      if (!li || seen.has(li)) continue;
      seen.add(li);
      rows.push({ kind: "list", li, titleLink: link, ref });
    }
    for (const cell of document.querySelectorAll('[role="grid"] [role="rowheader"]')) {
      if (seen.has(cell)) continue;
      const link = [...cell.querySelectorAll("a[href]")].find((a) => pullRef(a) && !a.closest(".gsf-badge"));
      if (!link) continue;
      seen.add(cell);
      rows.push({ kind: "table", li: cell, titleLink: link, ref: pullRef(link) });
    }
    for (const h3 of document.querySelectorAll('h3[id^="board-card-title-"]')) {
      const link = h3.closest("a[href]");
      const ref = link && pullRef(link);
      if (!ref) continue;
      const card = link.parentElement.closest('[role="button"]') || link.parentElement;
      if (seen.has(card)) continue;
      seen.add(card);
      rows.push({ kind: "board", li: card, titleLink: link, ref });
    }
    return rows;
  }

  const ASSOCIATION = {
    FIRST_TIMER: ["First PR on GitHub", "GREEN", "This is the author's first pull request on GitHub"],
    FIRST_TIME_CONTRIBUTOR: ["First-time contributor", "GREEN", "First pull request from this author to this repository"],
    NONE: ["External", "PURPLE", "The author has no previous contributions to this repository"],
    CONTRIBUTOR: ["Contributor", "GRAY", "The author has contributed to this repository before"],
    COLLABORATOR: ["Collaborator", "BLUE", "The author has write access to this repository"],
    MEMBER: ["Member", "BLUE", "The author is a member of the organization"],
    OWNER: ["Owner", "BLUE", "The author owns the repository"]
  };
  const MERGE_STATE = {
    CLEAN: ["Mergeable", "GREEN", "All requirements are met"],
    BEHIND: ["Behind base", "YELLOW", "The branch is behind its base branch"],
    BLOCKED: ["Blocked", "RED", "Branch rules are not satisfied yet"],
    DIRTY: ["Conflicts", "RED", "The branch has merge conflicts"],
    UNSTABLE: ["Checks failing", "YELLOW", "Required checks are failing or pending"]
  };

  function pullBadges(info) {
    const out = [];
    if (settings.prAssociation) {
      if (info.bot) out.push(["Bot", "GRAY", "Opened by an app"]);
      else if (ASSOCIATION[info.association]) out.push(ASSOCIATION[info.association]);
    }
    if (settings.prFork && info.fork) out.push(["From fork", "GRAY", "Opened from a fork of the repository"]);
    if (settings.prSize && Number.isFinite(info.additions)) {
      out.push([{ additions: info.additions, deletions: info.deletions }, "GRAY", `${info.files} changed file${info.files === 1 ? "" : "s"}`]);
    }
    if (settings.prMergeState && !info.draft && MERGE_STATE[info.mergeState]) out.push(MERGE_STATE[info.mergeState]);
    return out;
  }

  function renderPull(row, info) {
    row.li.querySelectorAll(`.gsf-badge[data-gsf-for="${row.ref.key}"]`).forEach((el) => el.remove());
    const badges = pullBadges(info);
    row.li.dataset.gsfPr = "done";
    if (!badges.length) return;
    let parent;
    if (row.kind === "board") {
      parent = row.titleLink.parentElement.querySelector(":scope > .gsf-badges");
      if (!parent) {
        parent = document.createElement("div");
        parent.className = "gsf-badges";
        row.titleLink.parentElement.insertBefore(parent, row.titleLink.nextSibling);
      }
    } else if (row.kind === "table") {
      parent = row.titleLink.parentElement;
    } else {
      const container = row.titleLink.closest('[class*="Title-module__container"]');
      parent = (container && container.querySelector('[class*="trailingBadgesContainer"]')) || container || row.titleLink.parentElement;
    }
    const frag = document.createDocumentFragment();
    for (const [text, color, title] of badges) {
      const badge = document.createElement("span");
      badge.className = "gsf-badge gsf-pr";
      badge.dataset.gsfColor = color;
      badge.dataset.gsfFor = row.ref.key;
      badge.title = title;
      if (typeof text === "object") {
        // diffstat: green additions, red deletions, like GitHub's own file counters
        const add = document.createElement("span");
        add.className = "gsf-add";
        add.textContent = `+${text.additions}`;
        const del = document.createElement("span");
        del.className = "gsf-del";
        del.textContent = `-${text.deletions}`;
        badge.classList.add("gsf-size");
        badge.append(add, " ", del);
      } else {
        badge.textContent = text;
      }
      frag.appendChild(badge);
    }
    parent.appendChild(frag);
  }

  async function scanPulls() {
    if (!prEnabled()) return;
    const rows = collectPullRows();
    if (!rows.length) return;
    const now = Date.now();
    const toFetch = new Map();
    for (const row of rows) {
      const hit = prCache.get(row.ref.key);
      if (hit && now - hit.at < CACHE_TTL_MS) {
        if (!row.li.querySelector(`.gsf-badge[data-gsf-for="${row.ref.key}"]`) && row.li.dataset.gsfPr !== "done") renderPull(row, hit.info);
        continue;
      }
      if (!prPending.has(row.ref.key)) toFetch.set(row.ref.key, row.ref);
    }
    if (!toFetch.size) return;
    for (const key of toFetch.keys()) prPending.add(key);
    const pulls = [...toFetch.values()].map(({ owner, repo, number }) => ({ owner, repo, number }));
    const chunks = [];
    for (let i = 0; i < pulls.length; i += FETCH_CHUNK) chunks.push(pulls.slice(i, i + FETCH_CHUNK));
    let response;
    try {
      const parts = await Promise.all(chunks.map((chunk) => api.runtime.sendMessage({ type: "fetchPullRequests", pulls: chunk })));
      const failed = parts.find((part) => !part || part.error);
      response = failed || parts.reduce((acc, part) => Object.assign(acc, part.pulls || {}), {});
      if (!failed) response = { pulls: response };
    } catch (err) {
      response = { error: err && err.message ? err.message : String(err) };
    } finally {
      for (const key of toFetch.keys()) prPending.delete(key);
    }
    if (!response || response.error) {
      if (response && response.error === "NO_TOKEN") flagHeaderButton("GitHub Issue Toolkit: add a GitHub token in the extension settings to show pull request badges.");
      else flagHeaderButton(`GitHub Issue Toolkit: ${response ? response.error : "unknown error"}`);
      return;
    }
    const at = Date.now();
    for (const key of toFetch.keys()) prCache.set(key, { at, info: response.pulls[key] || null });
    for (const row of collectPullRows()) {
      const hit = prCache.get(row.ref.key);
      if (hit && hit.info && toFetch.has(row.ref.key)) renderPull(row, hit.info);
    }
  }

  function clearBadges() {
    cache.clear();
    prCache.clear();
    epicCache.clear();
    boardSignature = null;
    document.querySelectorAll("[data-gsf-pr]").forEach((el) => delete el.dataset.gsfPr);
    noticeShown = false;
    if (headerButton) {
      headerButton.classList.remove("gsf-has-error");
      headerButton.title = "Pinned issues";
    }
    document.querySelectorAll(".gsf-badge, .gsf-badges, .gsf-notice").forEach((el) => el.remove());
    document.querySelectorAll("[data-gsf-state]").forEach((el) => delete el.dataset.gsfState);
  }

  // ---------------------------------------------------------------------------
  // Epic kanban: the sub-issues of an issue shown as a board
  // ---------------------------------------------------------------------------

  const SUB_ISSUES_LIST = '[data-testid*="sub-issues-issue-container"]';
  const STATE_ICONS = {
    open: ["M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z", "M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"],
    closed: ["M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z", "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"]
  };
  const GROUP_BUILTINS = [
    { id: "state", label: "State" },
    { id: "type", label: "Type" },
    { id: "assignee", label: "Assignee" }
  ];
  const SORT_BUILTINS = [
    { id: "number", label: "Issue number" },
    { id: "created", label: "Creation date" },
    { id: "title", label: "Title" },
    { id: "state", label: "State" },
    { id: "type", label: "Type" },
    { id: "assignee", label: "Assignee" }
  ];
  // A short option list keeps its empty columns, because a stage nothing sits in is worth seeing;
  // a long one would push the board off screen, so only the columns that hold something are drawn.
  const EMPTY_COLUMN_LIMIT = 10;

  // `filterValue` is a column key, so "" is a real value (the items with nothing) and "*" means every value.
  // `hideClosed` takes the finished sub-issues off the board whatever the columns are made of.
  let kanban = { on: false, groupBy: "", sortBy: "number", sortDir: "asc", filterBy: "", filterValue: "*", hideClosed: false };
  const epicCache = new Map(); // "owner/repo#n" -> { at, items, total, fields, fieldDefs }
  const epicPending = new Set();
  let barParts = null;
  let boardRoot = null;
  let boardEpicKey = null;
  let boardSignature = null;
  let noteTimer = null;
  let dragKey = null;
  const moving = new Set();

  // The sub-issues list of the issue page we are on, if GitHub has rendered one.
  function epicList() {
    if (!refFromPath(location.pathname)) return null;
    return document.querySelector(SUB_ISSUES_LIST);
  }

  function saveKanbanView() {
    api.storage.local.set({ kanban: { ...kanban } });
  }

  // Keeping only one dimension's value is enough to answer "show me just S1": the columns still say the rest.
  function matchesFilter(item) {
    if (kanban.hideClosed && item.state === "CLOSED") return false;
    if (!kanban.filterBy || kanban.filterValue === "*") return true;
    const bucket = bucketOf(item, kanban.filterBy);
    return (bucket ? bucket.key : "") === kanban.filterValue;
  }

  // The values that dimension actually holds, in column order, each with how many issues carry it.
  function filterValueChoices(data) {
    if (!kanban.filterBy) return [];
    const columns = columnsOf(data.items, kanban.filterBy, data.fieldDefs).filter((column) => column.items.length);
    return [{ id: "*", label: "Any value" }, ...columns.map((column) => ({ id: column.key, label: `${column.label} (${column.items.length})` }))];
  }

  function valueOf(item, field) {
    const name = String(field).toLowerCase();
    return item.values.find((v) => v.field.toLowerCase() === name) || null;
  }

  // The fields the loaded sub-issues carry, with the id and option list of the single-select ones, taken
  // once from the fetched payload: a board grouped by a field keeps its columns and stays droppable even
  // after the last card holding a value for it is dragged into the "No field" column.
  function fieldDefsOf(items) {
    const defs = new Map();
    for (const item of items) {
      for (const v of item.values) {
        const key = v.field.toLowerCase();
        const def = defs.get(key) || { name: v.field, fieldId: null, options: [] };
        if (!def.fieldId && v.fieldId) def.fieldId = v.fieldId;
        if (!def.options.length && v.options && v.options.length) def.options = v.options;
        defs.set(key, def);
      }
    }
    return defs;
  }

  // Everything the loaded sub-issues can be grouped or ordered by: the fields they carry, in the order the
  // settings list them so the field you care about comes first, then the ones GitHub gives every issue.
  function fieldChoices(data) {
    const configured = (data.fields || []).map((f) => f.toLowerCase());
    const found = new Map();
    for (const [key, def] of data.fieldDefs || []) found.set(key, def.name);
    for (const item of data.items) {
      for (const v of item.values) if (!found.has(v.field.toLowerCase())) found.set(v.field.toLowerCase(), v.field);
    }
    const names = [...found.entries()]
      .sort((a, b) => {
        const ia = configured.indexOf(a[0]);
        const ib = configured.indexOf(b[0]);
        if (ia !== ib) return (ia < 0 ? configured.length : ia) - (ib < 0 ? configured.length : ib);
        return a[1].localeCompare(b[1]);
      })
      .map(([, name]) => name);
    return names.map((name) => ({ id: `field:${name}`, label: name }));
  }

  function groupChoices(data) {
    return [...fieldChoices(data), ...GROUP_BUILTINS];
  }

  function sortChoices(data) {
    return [...SORT_BUILTINS, ...fieldChoices(data)];
  }

  // The column an item belongs to, or null when it has no value for the grouping.
  function bucketOf(item, groupBy) {
    if (groupBy === "state") {
      const closed = item.state === "CLOSED";
      return { key: closed ? "closed" : "open", label: closed ? "Closed" : "Open", color: closed ? "PURPLE" : "GREEN" };
    }
    if (groupBy === "type") {
      return item.type ? { key: `type:${item.type}`, label: item.type, color: item.typeColor || "GRAY" } : null;
    }
    if (groupBy === "assignee") {
      const who = item.assignees[0];
      return who ? { key: `user:${who.login}`, label: who.login, color: "GRAY" } : null;
    }
    const value = valueOf(item, groupBy.slice(6));
    return value ? { key: `value:${value.value}`, label: value.value, color: value.color || "GRAY" } : null;
  }

  function emptyLabel(groupBy) {
    if (groupBy === "assignee") return "Unassigned";
    if (groupBy === "type") return "No type";
    return `No ${groupBy.startsWith("field:") ? groupBy.slice(6) : groupBy}`;
  }

  // Columns in the order the organization defined the field's options, so a board grouped by a stage reads
  // left to right the way the stage does. Without an option list there is nothing to follow but the labels.
  function columnsOf(items, groupBy, fieldDefs) {
    const columns = new Map();
    const none = { key: "", label: emptyLabel(groupBy), color: "GRAY", items: [] };
    const order = [];
    let trimEmpty = false;
    const seed = (column) => {
      order.push(column.key);
      columns.set(column.key, column);
    };
    if (groupBy === "state") {
      seed({ key: "open", label: "Open", color: "GREEN", state: "OPEN", items: [] });
      seed({ key: "closed", label: "Closed", color: "PURPLE", state: "CLOSED", items: [] });
    } else if (groupBy.startsWith("field:")) {
      const name = groupBy.slice(6);
      const def = fieldDefs ? fieldDefs.get(name.toLowerCase()) : null;
      const defined = def && def.options.length ? def : items.map((item) => valueOf(item, name)).find((v) => v && v.options && v.options.length);
      const options = defined ? defined.options : [];
      none.fieldId = defined ? defined.fieldId : null;
      none.options = options;
      // Every option gets a column carrying the ids a drop needs, whatever the length of the list; whether
      // the empty ones are drawn is decided below.
      for (const option of options) {
        seed({ key: `value:${option.name}`, label: option.name, color: option.color || "GRAY", fieldId: none.fieldId, optionId: option.id, options, items: [] });
      }
      trimEmpty = options.length > EMPTY_COLUMN_LIMIT;
    }
    for (const item of items) {
      const bucket = bucketOf(item, groupBy);
      if (!bucket) {
        none.items.push(item);
        continue;
      }
      if (!columns.has(bucket.key)) columns.set(bucket.key, { ...bucket, items: [] });
      columns.get(bucket.key).items.push(item);
    }
    let list = [...columns.values()];
    if (trimEmpty) list = list.filter((column) => column.items.length);
    if (order.length) {
      const rank = (column) => (order.indexOf(column.key) < 0 ? order.length : order.indexOf(column.key));
      list.sort((a, b) => rank(a) - rank(b));
    } else {
      list.sort((a, b) => a.label.localeCompare(b.label, undefined, { numeric: true }));
    }
    if (none.items.length) list.push(none);
    return list;
  }

  // What to order by within a column. `missing` keeps the items without a value at the bottom in both
  // directions, and the comparison stays inside one type because every item is measured on the same key.
  function sortKeyOf(item, sortBy) {
    if (sortBy === "number") return { value: item.number };
    if (sortBy === "created") return { value: new Date(item.createdAt).getTime() || 0 };
    if (sortBy === "title") return { value: item.title.toLowerCase() };
    if (sortBy === "state") return { value: item.state === "CLOSED" ? 1 : 0 };
    if (sortBy === "type") return item.type ? { value: item.type.toLowerCase() } : { value: "", missing: true };
    if (sortBy === "assignee") return item.assignees[0] ? { value: item.assignees[0].login.toLowerCase() } : { value: "", missing: true };
    const value = valueOf(item, sortBy.slice(6));
    if (!value) return { value: "", missing: true };
    if (value.options && value.options.length) {
      const index = value.options.findIndex((o) => o.name === value.value);
      return { value: index < 0 ? value.options.length : index };
    }
    if (value.kind === "number") return { value: Number(value.value) || 0 };
    if (value.kind === "date") return { value: new Date(value.value).getTime() || 0 };
    return { value: value.value.toLowerCase() };
  }

  function sortItems(items, sortBy, sortDir) {
    return items.sort((a, b) => {
      const ka = sortKeyOf(a, sortBy);
      const kb = sortKeyOf(b, sortBy);
      if (Boolean(ka.missing) !== Boolean(kb.missing)) return ka.missing ? 1 : -1;
      let order = ka.value < kb.value ? -1 : ka.value > kb.value ? 1 : a.number - b.number;
      return sortDir === "desc" ? -order : order;
    });
  }

  // A column can take a dropped card when the move is one GitHub can be asked to make: the state of an
  // issue, or a single-select field whose options carry their ids. Everything else is read-only.
  function canDrop(column, groupBy) {
    if (!settings.kanbanDrag) return false;
    if (groupBy === "state") return Boolean(column.state);
    return Boolean(column.fieldId) && Boolean(column.optionId || column.key === "");
  }

  function moveOf(item, groupBy, column) {
    if (groupBy === "state") return { kind: "state", issueId: item.id, state: column.state, stateReason: item.closedReason || null };
    return { kind: "field", issueId: item.id, fieldId: column.fieldId, optionId: column.optionId || null };
  }

  // The same move applied to the copy the board holds, so the card lands in its new column right away.
  function applyMove(item, groupBy, column) {
    if (groupBy === "state") {
      // Reopening remembers how the issue had been closed, so closing it again keeps a "not planned".
      if (item.state === "CLOSED" && item.stateReason) item.closedReason = item.stateReason;
      item.state = column.state;
      item.stateReason = column.state === "CLOSED" ? item.closedReason || "COMPLETED" : null;
      return;
    }
    const name = groupBy.slice(6);
    const current = valueOf(item, name);
    if (!column.optionId) {
      item.values = item.values.filter((v) => v !== current);
      return;
    }
    if (current) {
      current.value = column.label;
      current.color = column.color;
      return;
    }
    item.values.push({ field: name, value: column.label, color: column.color, kind: "singleselect", options: column.options || null, fieldId: column.fieldId });
  }

  async function moveCard(key, column, groupBy) {
    const epic = refFromPath(location.pathname);
    const data = epic && epicCache.get(epic.key);
    const item = data && data.items.find((candidate) => candidate.key === key);
    if (!item || moving.has(key)) return;
    const from = bucketOf(item, groupBy);
    if ((from ? from.key : "") === column.key) return;

    const before = { state: item.state, stateReason: item.stateReason, closedReason: item.closedReason || null, values: item.values.map((v) => ({ ...v })) };
    applyMove(item, groupBy, column);
    moving.add(key);
    setBoardNote(`Moving #${item.number} to ${column.label}...`, false);
    redrawBoard();

    let response;
    try {
      response = await api.runtime.sendMessage({ type: "moveIssue", move: moveOf(item, groupBy, column) });
    } catch (err) {
      response = { error: err && err.message ? err.message : String(err) };
    }
    moving.delete(key);
    if (!response || response.error) {
      Object.assign(item, before);
      setBoardNote(response && response.error === "NO_TOKEN"
        ? "Add a GitHub token in the extension settings to move cards."
        : `Could not move #${item.number}: ${response ? response.error : "unknown error"}`, true);
      redrawBoard();
      return;
    }
    setBoardNote(`#${item.number} moved to ${column.label}.`, false);
  }

  function stateIcon(item) {
    const closed = item.state === "CLOSED";
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("viewBox", "0 0 16 16");
    svg.setAttribute("aria-hidden", "true");
    svg.setAttribute("class", "gsf-kanban-state");
    svg.dataset.state = closed ? (item.stateReason === "NOT_PLANNED" ? "skipped" : "closed") : "open";
    for (const d of STATE_ICONS[closed ? "closed" : "open"]) {
      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
      path.setAttribute("d", d);
      svg.appendChild(path);
    }
    return svg;
  }

  function kanbanBadge(text, color, title, extraClass) {
    const badge = document.createElement("span");
    badge.className = `gsf-badge${extraClass ? ` ${extraClass}` : ""}`;
    badge.dataset.gsfColor = color || "GRAY";
    badge.textContent = text;
    if (title) badge.title = title;
    return badge;
  }

  function kanbanCard(item, data, groupBy, movable) {
    const card = document.createElement("a");
    card.className = "gsf-kanban-card";
    card.href = item.url || `/${item.owner}/${item.repo}/issues/${item.number}`;
    card.dataset.closed = String(item.state === "CLOSED");
    if (movable && item.id) {
      // An anchor drags its own link by default, so the card says what it carries instead.
      card.draggable = true;
      card.addEventListener("dragstart", (e) => {
        dragKey = item.key;
        card.classList.add("gsf-dragging");
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("text/plain", item.key);
        e.stopPropagation();
      });
      card.addEventListener("dragend", () => {
        dragKey = null;
        card.classList.remove("gsf-dragging");
        if (boardRoot) boardRoot.querySelectorAll(".gsf-over").forEach((el) => el.classList.remove("gsf-over"));
      });
    }

    const head = document.createElement("span");
    head.className = "gsf-kanban-card-head";
    head.appendChild(stateIcon(item));
    const ref = document.createElement("span");
    ref.className = "gsf-kanban-ref";
    const repo = currentRepo();
    const sameRepo = repo && repo.owner === item.owner && repo.repo === item.repo;
    ref.textContent = sameRepo ? `#${item.number}` : `${item.key}`;
    head.appendChild(ref);
    if (item.assignees.length) {
      const who = document.createElement("span");
      who.className = "gsf-kanban-assignees";
      for (const assignee of item.assignees) {
        if (!assignee.avatarUrl) continue;
        const avatar = document.createElement("img");
        avatar.className = "gsf-kanban-avatar";
        avatar.src = assignee.avatarUrl;
        avatar.alt = "";
        avatar.title = assignee.login;
        avatar.loading = "lazy";
        who.appendChild(avatar);
      }
      if (who.childElementCount) head.appendChild(who);
    }
    card.appendChild(head);

    const title = document.createElement("span");
    title.className = "gsf-kanban-title";
    title.textContent = item.title;
    card.appendChild(title);

    // The column already says what the grouping field holds, so the badges repeat the other fields only.
    const grouped = groupBy.startsWith("field:") ? groupBy.slice(6).toLowerCase() : "";
    const badges = document.createElement("span");
    badges.className = "gsf-kanban-badges";
    for (const name of data.fields || []) {
      if (settings.skipShownFields && name.toLowerCase() === grouped) continue;
      const value = valueOf(item, name);
      if (value) badges.appendChild(kanbanBadge(value.value, value.color, `${value.field}: ${value.value}`));
    }
    if (item.type && groupBy !== "type") badges.appendChild(kanbanBadge(item.type, item.typeColor || "GRAY", `Type: ${item.type}`));
    const age = settings.ageEnabled ? ageOf(item.createdAt) : null;
    if (age) badges.appendChild(kanbanBadge(age.text, age.color, age.title, "gsf-age"));
    if (badges.childElementCount) card.appendChild(badges);
    return card;
  }

  function kanbanColumn(column, data, groupBy, movable) {
    const col = document.createElement("section");
    col.className = "gsf-kanban-col";
    if (canDrop(column, groupBy)) {
      col.addEventListener("dragover", (e) => {
        if (!dragKey) return;
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
        col.classList.add("gsf-over");
      });
      col.addEventListener("dragleave", (e) => {
        if (!col.contains(e.relatedTarget)) col.classList.remove("gsf-over");
      });
      col.addEventListener("drop", (e) => {
        e.preventDefault();
        e.stopPropagation();
        col.classList.remove("gsf-over");
        const key = dragKey || e.dataTransfer.getData("text/plain");
        dragKey = null;
        if (key) moveCard(key, column, groupBy).catch((err) => console.warn("[github-issue-toolkit]", err));
      });
    }

    const head = document.createElement("header");
    head.className = "gsf-kanban-col-head";
    const dot = document.createElement("span");
    dot.className = "gsf-kanban-dot";
    dot.dataset.gsfColor = column.color || "GRAY";
    const name = document.createElement("span");
    name.className = "gsf-kanban-col-name";
    name.textContent = column.label;
    name.title = column.label;
    const count = document.createElement("span");
    count.className = "gsf-kanban-count";
    count.textContent = String(column.items.length);
    head.append(dot, name, count);
    col.appendChild(head);

    const cards = document.createElement("div");
    cards.className = "gsf-kanban-cards";
    for (const item of column.items) cards.appendChild(kanbanCard(item, data, groupBy, movable));
    col.appendChild(cards);
    return col;
  }

  function setBarStatus(message) {
    if (!barParts) return;
    barParts.status.textContent = message || "";
  }

  // What a move is doing, or why it did not happen. An error stays until the next one; progress fades.
  function setBoardNote(message, isError) {
    if (!barParts) return;
    const { note } = barParts;
    note.textContent = message || "";
    note.dataset.error = String(Boolean(isError));
    clearTimeout(noteTimer);
    if (message && !isError) noteTimer = setTimeout(() => { note.textContent = ""; }, 5000);
  }

  function redrawBoard() {
    boardSignature = null;
    syncKanban();
  }

  function fillSelect(select, choices, selected) {
    select.textContent = "";
    for (const choice of choices) {
      const option = document.createElement("option");
      option.value = choice.id;
      option.textContent = choice.label;
      select.appendChild(option);
    }
    select.value = selected;
  }

  function buildBar() {
    const root = document.createElement("div");
    root.className = "gsf-kanban-bar";

    const toggle = document.createElement("div");
    toggle.className = "gsf-kanban-toggle";
    toggle.setAttribute("role", "group");
    toggle.setAttribute("aria-label", "Sub-issues view");
    const views = {};
    for (const [view, label] of [["list", "List"], ["board", "Kanban"]]) {
      const button = document.createElement("button");
      button.type = "button";
      button.textContent = label;
      button.addEventListener("click", () => {
        if (kanban.on === (view === "board")) return;
        kanban.on = view === "board";
        saveKanbanView();
        boardSignature = null;
        schedule();
      });
      views[view] = button;
      toggle.appendChild(button);
    }
    root.appendChild(toggle);

    const controls = document.createElement("div");
    controls.className = "gsf-kanban-controls";
    const group = document.createElement("select");
    const sort = document.createElement("select");
    const filter = document.createElement("select");
    const filterValue = document.createElement("select");
    filterValue.setAttribute("aria-label", "Filter value");
    for (const [select, label, key] of [[group, "Columns", "groupBy"], [sort, "Sort", "sortBy"]]) {
      const wrap = document.createElement("label");
      wrap.className = "gsf-kanban-field";
      const text = document.createElement("span");
      text.textContent = label;
      select.className = "gsf-kanban-select";
      // GitHub's keyboard shortcuts must not fire while the select has focus.
      select.addEventListener("keydown", (e) => e.stopPropagation());
      select.addEventListener("change", () => {
        kanban[key] = select.value;
        saveKanbanView();
        boardSignature = null;
        schedule();
      });
      wrap.append(text, select);
      controls.appendChild(wrap);
    }
    const dir = document.createElement("button");
    dir.type = "button";
    dir.className = "gsf-kanban-dir";
    dir.addEventListener("click", () => {
      kanban.sortDir = kanban.sortDir === "desc" ? "asc" : "desc";
      saveKanbanView();
      boardSignature = null;
      schedule();
    });
    controls.appendChild(dir);

    const filterWrap = document.createElement("label");
    filterWrap.className = "gsf-kanban-field";
    const filterText = document.createElement("span");
    filterText.textContent = "Filter";
    filterWrap.append(filterText, filter, filterValue);
    for (const [select, key] of [[filter, "filterBy"], [filterValue, "filterValue"]]) {
      select.className = "gsf-kanban-select";
      select.addEventListener("keydown", (e) => e.stopPropagation());
      select.addEventListener("change", () => {
        kanban[key] = select.value;
        // A new dimension starts unfiltered rather than on a value it may not have.
        if (key === "filterBy") kanban.filterValue = "*";
        saveKanbanView();
        boardSignature = null;
        schedule();
      });
    }
    controls.appendChild(filterWrap);

    const hideWrap = document.createElement("label");
    hideWrap.className = "gsf-kanban-field gsf-kanban-check";
    const hideClosed = document.createElement("input");
    hideClosed.type = "checkbox";
    hideClosed.addEventListener("keydown", (e) => e.stopPropagation());
    hideClosed.addEventListener("change", () => {
      kanban.hideClosed = hideClosed.checked;
      saveKanbanView();
      boardSignature = null;
      schedule();
    });
    const hideText = document.createElement("span");
    hideText.textContent = "Hide closed";
    hideWrap.append(hideClosed, hideText);
    controls.appendChild(hideWrap);
    root.appendChild(controls);

    const note = document.createElement("span");
    note.className = "gsf-kanban-note";
    root.appendChild(note);

    const hint = document.createElement("span");
    hint.className = "gsf-kanban-hint";
    root.appendChild(hint);

    const status = document.createElement("span");
    status.className = "gsf-kanban-status";
    root.appendChild(status);

    barParts = { root, views, group, sort, dir, filter, filterValue, hideClosed, status, note, hint, controls };
    return root;
  }

  function syncBar(list, data) {
    if (!barParts) buildBar();
    const { root, views, group, sort, dir, filter, filterValue, hideClosed, controls } = barParts;
    if (!root.isConnected || root.nextElementSibling !== list) list.before(root);
    views.list.dataset.active = String(!kanban.on);
    views.board.dataset.active = String(kanban.on);
    views.list.setAttribute("aria-pressed", String(!kanban.on));
    views.board.setAttribute("aria-pressed", String(kanban.on));
    if (!kanban.on) barParts.hint.textContent = "";
    controls.hidden = !kanban.on || (!data && !group.options.length);
    dir.textContent = kanban.sortDir === "desc" ? "↓" : "↑";
    dir.title = kanban.sortDir === "desc" ? "Descending, click for ascending" : "Ascending, click for descending";
    dir.setAttribute("aria-label", dir.title);
    hideClosed.checked = kanban.hideClosed === true;
    if (!kanban.on || !data || !data.items.length) return;
    const groups = groupChoices(data);
    const sorts = sortChoices(data);
    if (!groups.some((c) => c.id === kanban.groupBy)) kanban.groupBy = groups.length ? groups[0].id : "state";
    if (!sorts.some((c) => c.id === kanban.sortBy)) kanban.sortBy = "number";
    fillSelect(group, groups, kanban.groupBy);
    fillSelect(sort, sorts, kanban.sortBy);

    const dimensions = [{ id: "", label: "No filter" }, ...groups];
    if (!dimensions.some((choice) => choice.id === kanban.filterBy)) kanban.filterBy = "";
    fillSelect(filter, dimensions, kanban.filterBy);
    const values = filterValueChoices(data);
    if (!values.some((choice) => choice.id === kanban.filterValue)) kanban.filterValue = "*";
    fillSelect(filterValue, values, kanban.filterValue);
    filterValue.hidden = !kanban.filterBy;
  }

  function boardBody() {
    if (!boardRoot) {
      boardRoot = document.createElement("div");
      boardRoot.className = "gsf-kanban";
    }
    boardRoot.textContent = "";
    return boardRoot;
  }

  function showBoardMessage(list, message) {
    const root = boardBody();
    const note = document.createElement("p");
    note.className = "gsf-kanban-message";
    note.textContent = message;
    root.appendChild(note);
    if (!root.isConnected || root.previousElementSibling !== list) list.after(root);
  }

  function renderBoard(list, epic, data) {
    syncBar(list, data);
    const signature = [epic.key, data.at, kanban.groupBy, kanban.sortBy, kanban.sortDir, kanban.filterBy, kanban.filterValue, kanban.hideClosed,
      settings.ageEnabled, settings.ageUnit, settings.ageWarnDays, settings.skipShownFields].join("|");
    if (boardRoot && boardRoot.isConnected && boardRoot.previousElementSibling === list && boardSignature === signature) return;
    boardSignature = signature;

    boardBody();
    const items = data.error ? [] : data.items.filter(matchesFilter);
    if (data.error || !data.items.length || !items.length) {
      barParts.hint.textContent = "";
      const filtered = kanban.filterBy && kanban.filterValue !== "*";
      showBoardMessage(list, data.error
        || (!data.items.length ? "This issue has no sub-issues yet."
          : filtered ? "No sub-issue matches the filter." : "Every sub-issue is closed."));
      setBarStatus(data.items.length ? `0 of ${data.items.length} sub-issues` : "");
      return;
    }
    const root = boardRoot;
    const columns = columnsOf(items, kanban.groupBy, data.fieldDefs);
    const movable = columns.some((column) => canDrop(column, kanban.groupBy));
    barParts.hint.textContent = movable || !settings.kanbanDrag
      ? ""
      : "Cards move between columns when the columns come from a single-select field or from the issue state.";
    for (const column of columns) {
      sortItems(column.items, kanban.sortBy, kanban.sortDir);
      root.appendChild(kanbanColumn(column, data, kanban.groupBy, movable));
    }
    if (!root.isConnected || root.previousElementSibling !== list) list.after(root);
    const loaded = data.items.length;
    setBarStatus(items.length < loaded || data.total > loaded
      ? `${items.length} of ${Math.max(loaded, data.total)} sub-issues`
      : `${loaded} sub-issue${loaded === 1 ? "" : "s"}`);
  }

  async function loadEpic(list, epic) {
    if (epicPending.has(epic.key)) return;
    epicPending.add(epic.key);
    setBarStatus("Loading sub-issues...");
    if (!boardRoot || !boardRoot.isConnected || !boardRoot.childElementCount) showBoardMessage(list, "Loading sub-issues...");
    let response;
    try {
      response = await api.runtime.sendMessage({ type: "fetchEpic", issue: { owner: epic.owner, repo: epic.repo, number: epic.number } });
    } catch (err) {
      response = { error: err && err.message ? err.message : String(err) };
    } finally {
      epicPending.delete(epic.key);
    }
    if (!response || response.error) {
      const message = response && response.error === "NO_TOKEN"
        ? "Add a GitHub token in the extension settings to show the board."
        : `Could not load the sub-issues: ${response ? response.error : "unknown error"}`;
      epicCache.set(epic.key, { at: Date.now(), items: [], total: 0, fields: [], fieldDefs: new Map(), error: message });
      boardSignature = null;
      schedule();
      return;
    }
    const items = response.items || [];
    pruneEpicCache(epic.key);
    epicCache.set(epic.key, { at: Date.now(), items, total: response.total || 0, fields: response.fields || [], fieldDefs: fieldDefsOf(items) });
    boardSignature = null;
    schedule();
  }

  // Entries past their time are dropped whenever a fresh one comes in, so a long-lived tab that visited many
  // epics does not keep every one of their sub-issue lists. The epic being drawn is kept until it is replaced.
  function pruneEpicCache(keep) {
    const now = Date.now();
    for (const [key, entry] of epicCache) {
      if (key !== keep && now - entry.at >= CACHE_TTL_MS) epicCache.delete(key);
    }
  }

  function removeBoard(list) {
    if (list) list.classList.remove("gsf-kanban-hidden");
    if (boardRoot && boardRoot.isConnected) boardRoot.remove();
    boardSignature = null;
  }

  // Put the view toggle above the sub-issues list, and swap the list for the board when it is on.
  function syncKanban() {
    const list = epicList();
    const epic = list ? refFromPath(location.pathname) : null;
    if (!settings.kanbanEnabled || !epic) {
      if (barParts && barParts.root.isConnected) barParts.root.remove();
      removeBoard(list || document.querySelector(SUB_ISSUES_LIST));
      return;
    }
    if (!kanban.on) {
      syncBar(list, null);
      removeBoard(list);
      return;
    }
    list.classList.add("gsf-kanban-hidden");
    if (boardEpicKey !== epic.key) {
      // Another epic: the previous board and the choices its fields offered must not linger while this one loads.
      boardEpicKey = epic.key;
      boardSignature = null;
      if (boardRoot) boardBody();
      if (barParts) for (const select of [barParts.group, barParts.sort, barParts.filter, barParts.filterValue]) select.textContent = "";
    }
    const hit = epicCache.get(epic.key);
    if (hit && Date.now() - hit.at < CACHE_TTL_MS) renderBoard(list, epic, hit);
    else {
      syncBar(list, null);
      loadEpic(list, epic).catch((err) => console.warn("[github-issue-toolkit]", err));
    }
  }

  // ---------------------------------------------------------------------------
  // Issue sidebar: a button that hides the metadata column
  // ---------------------------------------------------------------------------

  // The metadata column of the issue page, and the flex row holding it next to the issue itself.
  const SIDEBAR_COLUMN = '[data-testid="issue-viewer-metadata-container"]';
  const CHEVRON_RIGHT = "M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z";
  const CHEVRON_LEFT = "M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z";

  let sidebarCollapsed = false;
  let railParts = null;
  // Whether the row holding the issue and its sidebar lays them side by side, measured once per row element
  // and again after a resize or a remount: getComputedStyle forces a layout flush, and scan runs often.
  let sidebarLayout = { row: null, wide: false };
  let sidebarLayoutStale = true;

  function sidebarSideBySide(row) {
    if (sidebarLayoutStale || sidebarLayout.row !== row || !railParts || !railParts.rail.isConnected) {
      const style = getComputedStyle(row);
      sidebarLayout = { row, wide: style.display === "flex" && style.flexDirection === "row" };
      sidebarLayoutStale = false;
    }
    return sidebarLayout.wide;
  }

  function chevronIcon(collapsed) {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("viewBox", "0 0 16 16");
    svg.setAttribute("aria-hidden", "true");
    svg.setAttribute("class", "gsf-sidebar-chevron");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", collapsed ? CHEVRON_LEFT : CHEVRON_RIGHT);
    svg.appendChild(path);
    return svg;
  }

  function buildRail() {
    const rail = document.createElement("div");
    rail.className = "gsf-sidebar-rail";
    const button = document.createElement("button");
    button.type = "button";
    button.className = "gsf-sidebar-toggle";
    button.addEventListener("click", () => {
      sidebarCollapsed = !sidebarCollapsed;
      api.storage.local.set({ sidebarCollapsed });
      syncSidebar();
    });
    rail.appendChild(button);
    railParts = { rail, button };
    return rail;
  }

  function renderRail(sidebar) {
    const { button } = railParts;
    button.textContent = "";
    button.appendChild(chevronIcon(sidebarCollapsed));
    button.title = sidebarCollapsed ? "Show the issue sidebar" : "Hide the issue sidebar";
    button.setAttribute("aria-label", button.title);
    button.setAttribute("aria-expanded", String(!sidebarCollapsed));
    sidebar.classList.toggle("gsf-sidebar-hidden", sidebarCollapsed);
  }

  function unmountRail(sidebar) {
    if (railParts && railParts.rail.isConnected) railParts.rail.remove();
    if (sidebar) sidebar.classList.remove("gsf-sidebar-hidden");
  }

  // The button lives in a rail of its own between the issue and the sidebar, so it stays in the same place
  // whether the sidebar is there or not. Only the wide layout has the two side by side; stacked, it is skipped.
  function syncSidebar() {
    const sidebar = refFromPath(location.pathname) ? document.querySelector(SIDEBAR_COLUMN) : null;
    if (!settings.sidebarToggle || !sidebar || !sidebar.parentElement) {
      unmountRail(sidebar || document.querySelector(SIDEBAR_COLUMN));
      return;
    }
    if (!sidebarSideBySide(sidebar.parentElement)) {
      unmountRail(sidebar);
      return;
    }
    if (!railParts) buildRail();
    if (railParts.rail.nextElementSibling !== sidebar) sidebar.parentElement.insertBefore(railParts.rail, sidebar);
    renderRail(sidebar);
  }

  // ---------------------------------------------------------------------------
  // Pinned issues panel
  // ---------------------------------------------------------------------------

  let panel = null;
  let panelParts = null;
  let panelStatusTimer = null;
  let lastHref = null;
  let headerButton = null;

  const PIN_ICON = "M11.294.984l3.722 3.722a1.75 1.75 0 0 1-.504 2.826l-1.327.613a3.089 3.089 0 0 0-1.707 2.084l-.584 2.454c-.317 1.332-1.972 1.8-2.94.832L5.75 11.311 1.78 15.28a.749.749 0 1 1-1.06-1.06l3.969-3.97-2.204-2.204c-.968-.968-.5-2.623.832-2.94l2.454-.584a3.08 3.08 0 0 0 2.084-1.707l.613-1.327a1.75 1.75 0 0 1 2.826-.504ZM6.283 9.723l2.732 2.731a.25.25 0 0 0 .42-.119l.584-2.454a4.586 4.586 0 0 1 2.537-3.098l1.328-.613a.25.25 0 0 0 .072-.404l-3.722-3.722a.25.25 0 0 0-.404.072l-.613 1.328a4.584 4.584 0 0 1-3.098 2.537l-2.454.584a.25.25 0 0 0-.119.42l2.731 2.732Z";

  function pinIcon() {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("viewBox", "0 0 16 16");
    svg.setAttribute("width", "16");
    svg.setAttribute("height", "16");
    svg.setAttribute("fill", "currentColor");
    svg.setAttribute("aria-hidden", "true");
    svg.classList.add("octicon", "octicon-pin");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", PIN_ICON);
    svg.appendChild(path);
    return svg;
  }

  // Panel content is useful on project views and issue pages; the header button is shown everywhere the header is.
  function panelWanted() {
    return PROJECT_PATH.test(location.pathname) || ISSUE_PATH.test(location.pathname);
  }

  // GitHub's global header: put our button among the action icons, right before the notifications bell.
  // Class names change between GitHub's header variants, so this is structural: find the bell *button*
  // (never a breadcrumb or page-title link that also points at /notifications), or fall back to the user menu.
  function isBellButton(el) {
    if (!el || el.closest('[class*="Breadcrumb"], nav[aria-label*="readcrumb"], h1, h2')) return false;
    if (el.tagName === "NOTIFICATION-INDICATOR" || el.id === "AppHeader-notifications-button") return true;
    const cls = String(el.className);
    return /IconButton|appHeaderButton|AppHeader-button|Button--iconOnly/.test(cls) || Boolean(el.querySelector("svg.octicon-bell, svg.octicon-inbox"));
  }

  function findHeaderSlot() {
    for (const header of document.querySelectorAll("header")) {
      const candidates = [...header.querySelectorAll('notification-indicator, #AppHeader-notifications-button, a[href^="/notifications"], [data-testid*="notification"]')];
      const bell = candidates.find(isBellButton) || null;
      let ref = bell;
      if (!ref) {
        // No bell on this page (the notifications page hides it): sit before the user menu instead.
        ref = header.querySelector('[class*="GlobalNavUserMenu"], .AppHeader-user, button[aria-label*="user navigation" i], [data-login]');
        if (!ref) continue;
      }
      while (ref.parentElement && ref.parentElement !== header && ref.parentElement.children.length === 1) ref = ref.parentElement;
      let twin = bell && bell.tagName === "A" ? bell : header.querySelector('a[href="/pulls"], a[href="/issues"], #AppHeader-notifications-button');
      if (twin && twin.closest('[class*="Breadcrumb"], nav')) twin = null;
      return { header, ref, twin };
    }
    return null;
  }

  function mountHeaderButton() {
    if (headerButton && headerButton.isConnected) return true;
    const slot = findHeaderSlot();
    if (!slot) return false;
    if (!headerButton) {
      headerButton = document.createElement("button");
      headerButton.type = "button";
      headerButton.setAttribute("aria-label", "Pinned issues");
      headerButton.title = "Pinned issues";
      headerButton.appendChild(pinIcon());
      const count = document.createElement("span");
      count.className = "gsf-pins-count";
      headerButton.appendChild(count);
      headerButton.addEventListener("click", (e) => {
        e.stopPropagation();
        setCollapsed(!pinsCollapsed);
      });
    }
    const twinClasses = slot.twin
      ? [...slot.twin.classList].filter((c) => !/hasIndicator|unread|selected|gsf-/.test(c)).join(" ")
      : "AppHeader-button Button--iconOnly Button--secondary Button--medium Button";
    headerButton.className = `gsf-pins-header-btn ${twinClasses}`;
    slot.ref.parentElement.insertBefore(headerButton, slot.ref);
    updateHeaderButton();
    return true;
  }

  function flagHeaderButton(message) {
    if (!headerButton) return;
    headerButton.classList.add("gsf-has-error");
    headerButton.title = message ? `Pinned issues. ${message}` : "Pinned issues";
  }

  function updateHeaderButton() {
    if (!headerButton) return;
    const count = headerButton.querySelector(".gsf-pins-count");
    count.textContent = pins.length ? String(pins.length) : "";
    count.hidden = !pins.length;
    headerButton.setAttribute("aria-expanded", pinsCollapsed ? "false" : "true");
    headerButton.classList.toggle("gsf-open", !pinsCollapsed);
  }

  function positionBox() {
    if (!panelParts) return;
    const { box } = panelParts;
    if (headerButton && headerButton.isConnected) {
      const r = headerButton.getBoundingClientRect();
      const width = box.offsetWidth || 320;
      const left = Math.min(Math.max(8, Math.round(r.right - width)), Math.max(8, window.innerWidth - width - 8));
      box.style.top = `${Math.round(r.bottom + 8)}px`;
      box.style.left = `${left}px`;
      box.style.right = "auto";
    } else {
      box.style.top = "";
      box.style.left = "";
      box.style.right = "";
    }
  }

  function buildPanel() {
    const root = document.createElement("aside");
    root.className = "gsf-pins";
    root.setAttribute("aria-label", "Pinned issues");

    const pill = document.createElement("button");
    pill.type = "button";
    pill.className = "gsf-pins-pill";
    pill.title = "Pinned issues";
    pill.setAttribute("aria-label", "Pinned issues");
    pill.appendChild(pinIcon());
    const pillCount = document.createElement("span");
    pillCount.className = "gsf-pins-count";
    pill.appendChild(pillCount);
    pill.addEventListener("click", (e) => { e.stopPropagation(); setCollapsed(false); });

    const box = document.createElement("div");
    box.className = "gsf-pins-box";

    const head = document.createElement("div");
    head.className = "gsf-pins-head";
    const heading = document.createElement("span");
    heading.className = "gsf-pins-title";
    heading.textContent = "Pinned issues";
    const collapse = document.createElement("button");
    collapse.type = "button";
    collapse.className = "gsf-pins-icon";
    collapse.title = "Close";
    collapse.setAttribute("aria-label", "Close pinned issues");
    collapse.textContent = "×";
    collapse.addEventListener("click", () => setCollapsed(true));
    head.append(heading, collapse);

    const current = document.createElement("div");
    current.className = "gsf-pins-current";

    const list = document.createElement("ul");
    list.className = "gsf-pins-list";

    const form = document.createElement("form");
    form.className = "gsf-pins-form";
    const input = document.createElement("input");
    input.type = "text";
    input.placeholder = "Issue URL or owner/repo#123";
    input.setAttribute("aria-label", "Issue to pin");
    input.spellcheck = false;
    input.autocomplete = "off";
    const add = document.createElement("button");
    add.type = "submit";
    add.textContent = "Pin";
    form.append(input, add);
    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      const ref = parseIssueInput(input.value, currentRepo());
      if (!ref) {
        setPanelStatus("Enter an issue URL or owner/repo#number.", false);
        return;
      }
      input.value = "";
      await pinIssue(ref);
    });
    // GitHub's keyboard shortcuts must not fire while typing here; Escape still closes the panel.
    for (const type of ["keydown", "keyup", "keypress"]) input.addEventListener(type, (e) => e.stopPropagation());
    input.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.preventDefault(); setCollapsed(true); } });

    const status = document.createElement("div");
    status.className = "gsf-pins-status";
    status.setAttribute("role", "status");

    box.append(head, current, list, form, status);
    box.addEventListener("click", (e) => e.stopPropagation());
    root.append(pill, box);
    document.documentElement.appendChild(root);
    panel = root;
    panelParts = { pill, pillCount, box, current, list, input, status };

    // Behave like a GitHub overlay: click outside or Escape closes it.
    document.addEventListener("click", (e) => {
      if (pinsCollapsed || !panel || panel.hidden) return;
      if (box.contains(e.target) || (headerButton && headerButton.contains(e.target))) return;
      setCollapsed(true);
    });
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && !pinsCollapsed && panel && !panel.hidden && !e.defaultPrevented) setCollapsed(true);
    });
    window.addEventListener("resize", positionBox);
  }

  function setCollapsed(collapsed) {
    pinsCollapsed = collapsed;
    renderPanel();
  }

  function setPanelStatus(message, ok, withOptionsButton) {
    if (!panelParts) return;
    const { status } = panelParts;
    status.textContent = "";
    status.className = `gsf-pins-status ${ok ? "ok" : "err"}`;
    const text = document.createElement("span");
    text.textContent = message;
    status.appendChild(text);
    if (withOptionsButton) {
      const btn = document.createElement("button");
      btn.type = "button";
      btn.textContent = "Open options";
      btn.addEventListener("click", () => api.runtime.sendMessage({ type: "openOptions" }));
      status.appendChild(btn);
    }
    clearTimeout(panelStatusTimer);
    if (ok) panelStatusTimer = setTimeout(() => { status.textContent = ""; status.className = "gsf-pins-status"; }, 4000);
  }

  function pinIndex(key) {
    return pins.findIndex((p) => p.key === key);
  }

  async function savePins() {
    await api.storage.local.set({ pins });
    renderPanel();
  }

  async function pinIssue(ref) {
    if (pinIndex(ref.key) !== -1) {
      setPanelStatus(`${ref.key} is already pinned.`, false);
      return;
    }
    const pin = { key: ref.key, owner: ref.owner, repo: ref.repo, number: ref.number, title: titleFromPage(ref), type: null, typeColor: null };
    pins.push(pin);
    await savePins();
    let res;
    try {
      res = await api.runtime.sendMessage({ type: "fetchIssueMeta", issue: { owner: ref.owner, repo: ref.repo, number: ref.number } });
    } catch (err) {
      res = { error: err && err.message ? err.message : String(err) };
    }
    if (res && res.issue) {
      // Saving above fired storage.onChanged in this tab too, which replaced `pins` with a fresh copy:
      // update the entry that is in the array now, not the object created before the save.
      const saved = pins[pinIndex(ref.key)] || pin;
      saved.title = res.issue.title || saved.title;
      saved.type = res.issue.type;
      saved.typeColor = res.issue.typeColor;
      saved.state = res.issue.state;
      await savePins();
      setPanelStatus(`Pinned ${ref.key}.`, true);
    } else if (res && res.error === "NO_TOKEN") {
      setPanelStatus(pin.title
        ? "Pinned. Add a GitHub token in the options to load the issue type and to link issues."
        : "Pinned without title: add a GitHub token in the options to load issue details.", false, true);
    } else {
      setPanelStatus(res && res.error ? res.error : "Could not load the issue.", false);
    }
  }

  async function unpin(key) {
    const i = pinIndex(key);
    if (i === -1) return;
    pins.splice(i, 1);
    await savePins();
  }

  async function copyRef(pin) {
    const text = pin.key;
    try {
      await navigator.clipboard.writeText(text);
      setPanelStatus(`Copied ${text}.`, true);
    } catch {
      setPanelStatus(`Could not copy. Reference: ${text}`, false);
    }
  }

  async function linkCurrentTo(pin, replaceParent) {
    const child = currentIssue();
    if (!child) {
      setPanelStatus("Open an issue first, then link it.", false);
      return;
    }
    if (child.key === pin.key) {
      setPanelStatus("An issue cannot be its own sub-issue.", false);
      return;
    }
    setPanelStatus(`Linking ${child.key} to ${pin.key}...`, true);
    let res;
    try {
      res = await api.runtime.sendMessage({
        type: "linkSubIssue",
        parent: { owner: pin.owner, repo: pin.repo, number: pin.number },
        child: { owner: child.owner, repo: child.repo, number: child.number },
        replaceParent: Boolean(replaceParent)
      });
    } catch (err) {
      res = { error: err && err.message ? err.message : String(err) };
    }
    if (res && res.ok) {
      setPanelStatus(`${res.child} is now a sub-issue of ${res.parent}. Reload the page to see it.`, true);
      return;
    }
    if (res && res.error === "HAS_PARENT") {
      if (res.parent === pin.key) {
        setPanelStatus(`${child.key} is already a sub-issue of ${pin.key}.`, true);
        return;
      }
      const ok = window.confirm(`${child.key} already has parent ${res.parent}.\nMove it under ${pin.key} instead?`);
      if (ok) await linkCurrentTo(pin, true);
      else setPanelStatus("Kept the existing parent.", false);
      return;
    }
    if (res && res.error === "NO_TOKEN") {
      setPanelStatus("Add a GitHub token in the options to link issues.", false, true);
      return;
    }
    setPanelStatus(res && res.error ? `${res.error} Linking needs a token with write access to the issue's repository.` : "Linking failed.", false);
  }

  function typeBadge(pin) {
    if (!pin.type) return null;
    const el = document.createElement("span");
    el.className = "gsf-badge gsf-pin-type";
    el.dataset.gsfColor = pin.typeColor || "GRAY";
    el.textContent = pin.type;
    return el;
  }

  function renderPanel() {
    if (!panel || !panelParts) return;
    const { pillCount, current, list } = panelParts;
    panel.dataset.collapsed = pinsCollapsed ? "true" : "false";
    panel.dataset.inHeader = headerButton && headerButton.isConnected ? "true" : "false";
    pillCount.textContent = pins.length ? String(pins.length) : "";
    pillCount.hidden = !pins.length;
    updateHeaderButton();
    if (pinsCollapsed) return;
    positionBox();

    const cur = currentIssue();
    current.textContent = "";
    if (cur) {
      const label = document.createElement("span");
      label.className = "gsf-pins-current-label";
      label.textContent = "Current: ";
      const code = document.createElement("code");
      code.textContent = cur.key;
      current.append(label, code);
      if (pinIndex(cur.key) === -1) {
        const btn = document.createElement("button");
        btn.type = "button";
        btn.textContent = "Pin it";
        btn.title = "Pin the issue you are looking at";
        btn.addEventListener("click", () => pinIssue(cur));
        current.appendChild(btn);
      }
    } else {
      const hint = document.createElement("span");
      hint.className = "gsf-pins-current-label";
      hint.textContent = PROJECT_PATH.test(location.pathname)
        ? "Open an item to link it to a pinned epic."
        : "Open an issue to link it to a pinned epic.";
      current.appendChild(hint);
    }

    list.textContent = "";
    if (!pins.length) {
      const empty = document.createElement("li");
      empty.className = "gsf-pins-empty";
      empty.textContent = "No pinned issues yet. Pin the epics you link to most often.";
      list.appendChild(empty);
    }
    for (const pin of pins) {
      const li = document.createElement("li");
      li.className = "gsf-pin";
      if (pin.state === "CLOSED") li.dataset.closed = "true";

      const main = document.createElement("div");
      main.className = "gsf-pin-main";
      const type = typeBadge(pin);
      if (type) main.appendChild(type);
      const link = document.createElement("a");
      link.className = "gsf-pin-title";
      link.href = `https://github.com/${pin.owner}/${pin.repo}/issues/${pin.number}`;
      link.target = "_blank";
      link.rel = "noopener";
      link.textContent = pin.title || pin.key;
      link.title = `${pin.key}${pin.title ? ` – ${pin.title}` : ""}`;
      main.appendChild(link);

      const meta = document.createElement("div");
      meta.className = "gsf-pin-meta";
      const ref = document.createElement("span");
      ref.className = "gsf-pin-ref";
      ref.textContent = pin.key;
      meta.appendChild(ref);

      const actions = document.createElement("div");
      actions.className = "gsf-pin-actions";
      const linkBtn = document.createElement("button");
      linkBtn.type = "button";
      linkBtn.className = "gsf-pin-link";
      linkBtn.textContent = "Link";
      linkBtn.title = cur
        ? `Make ${cur.key} a sub-issue of ${pin.key}`
        : "Open an issue to link it as a sub-issue of this one";
      linkBtn.disabled = !cur || cur.key === pin.key;
      linkBtn.addEventListener("click", () => linkCurrentTo(pin, false));
      const copyBtn = document.createElement("button");
      copyBtn.type = "button";
      copyBtn.textContent = "Copy";
      copyBtn.title = `Copy ${pin.key} to the clipboard`;
      copyBtn.addEventListener("click", () => copyRef(pin));
      const unpinBtn = document.createElement("button");
      unpinBtn.type = "button";
      unpinBtn.className = "gsf-pins-icon";
      unpinBtn.textContent = "×";
      unpinBtn.title = `Unpin ${pin.key}`;
      unpinBtn.setAttribute("aria-label", `Unpin ${pin.key}`);
      unpinBtn.addEventListener("click", () => unpin(pin.key));
      actions.append(linkBtn, copyBtn, unpinBtn);
      meta.appendChild(actions);

      li.append(main, meta);
      list.appendChild(li);
    }
  }

  // Show, hide or refresh the panel when the page or the open item changes (GitHub navigates without reloads).
  function syncPanel() {
    if (!settings.pinsEnabled) {
      if (headerButton && headerButton.isConnected) headerButton.remove();
      if (panel) panel.hidden = true;
      return;
    }
    const inHeader = mountHeaderButton();
    const wanted = inHeader || panelWanted();
    if (wanted && !panel) buildPanel();
    if (!panel) return;
    panel.hidden = !wanted;
    if (!wanted) return;
    const href = location.href;
    if (href !== lastHref) {
      lastHref = href;
      renderPanel();
    } else if (panel.dataset.inHeader !== String(inHeader)) {
      renderPanel();
    }
  }

  // ---------------------------------------------------------------------------
  // Wiring
  // ---------------------------------------------------------------------------

  function schedule() {
    if (scheduled) return;
    scheduled = setTimeout(() => scan().catch((err) => console.warn("[github-issue-toolkit]", err)), 250);
  }

  // Everything this extension adds to the page, so its own mutations never schedule another scan.
  const OURS = ["gsf-badge", "gsf-badges", "gsf-notice", "gsf-pins", "gsf-pins-header-btn", "gsf-kanban", "gsf-kanban-bar", "gsf-sidebar-rail"];
  const OURS_SELECTOR = OURS.map((name) => `.${name}`).join(", ");

  const observer = new MutationObserver((mutations) => {
    for (const m of mutations) {
      if (m.target && m.target.closest && m.target.closest(OURS_SELECTOR)) continue;
      let ours = true;
      for (const n of m.addedNodes) {
        if (!(n.nodeType === 1 && n.classList && OURS.some((name) => n.classList.contains(name)))) { ours = false; break; }
      }
      if (ours && m.addedNodes.length) continue;
      schedule();
      return;
    }
  });
  observer.observe(document.documentElement, { childList: true, subtree: true });
  window.addEventListener("popstate", schedule);
  window.addEventListener("resize", () => {
    sidebarLayoutStale = true;
    schedule();
  });

  api.storage.onChanged.addListener((changes, area) => {
    if (area !== "local") return;
    if (changes.token || changes.fields || changes.ageEnabled || changes.ageUnit || changes.ageWarnDays || changes.skipShownFields || changes.prAssociation || changes.prFork || changes.prSize || changes.prMergeState) {
      if (changes.ageWarnDays) settings.ageWarnDays = Number.isFinite(Number(changes.ageWarnDays.newValue)) ? Number(changes.ageWarnDays.newValue) : 90;
      if (changes.skipShownFields) settings.skipShownFields = changes.skipShownFields.newValue !== false;
      if (changes.prAssociation) settings.prAssociation = changes.prAssociation.newValue !== false;
      if (changes.prFork) settings.prFork = changes.prFork.newValue === true;
      if (changes.prSize) settings.prSize = changes.prSize.newValue === true;
      if (changes.prMergeState) settings.prMergeState = changes.prMergeState.newValue === true;
      if (changes.ageEnabled) settings.ageEnabled = changes.ageEnabled.newValue === true;
      if (changes.ageUnit) settings.ageUnit = changes.ageUnit.newValue || "months";
      clearBadges();
      schedule();
    }
    if (changes.sidebarToggle || changes.sidebarCollapsed) {
      if (changes.sidebarToggle) settings.sidebarToggle = changes.sidebarToggle.newValue !== false;
      if (changes.sidebarCollapsed) sidebarCollapsed = changes.sidebarCollapsed.newValue === true;
      syncSidebar();
    }
    if (changes.kanbanEnabled || changes.kanbanDrag) {
      if (changes.kanbanEnabled) settings.kanbanEnabled = changes.kanbanEnabled.newValue !== false;
      if (changes.kanbanDrag) settings.kanbanDrag = changes.kanbanDrag.newValue !== false;
      boardSignature = null;
      schedule();
    }
    if (changes.kanban) {
      kanban = { ...kanban, ...(changes.kanban.newValue || {}) };
      boardSignature = null;
      schedule();
    }
    if (changes.pinsEnabled) {
      settings.pinsEnabled = changes.pinsEnabled.newValue !== false;
      lastHref = null;
      syncPanel();
    }
    if (changes.pins) {
      pins = Array.isArray(changes.pins.newValue) ? changes.pins.newValue : [];
      lastHref = null;
      syncPanel();
    }
  });

  api.storage.local.get(["ageEnabled", "ageUnit", "ageWarnDays", "pinsEnabled", "skipShownFields", "prAssociation", "prFork", "prSize", "prMergeState", "pins", "kanbanEnabled", "kanbanDrag", "kanban", "sidebarToggle", "sidebarCollapsed"]).then((stored) => {
    settings.ageWarnDays = Number.isFinite(Number(stored.ageWarnDays)) && stored.ageWarnDays !== undefined ? Number(stored.ageWarnDays) : 90;
    settings.skipShownFields = stored.skipShownFields !== false;
    settings.prAssociation = stored.prAssociation !== false;
    settings.prFork = stored.prFork === true;
    settings.prSize = stored.prSize === true;
    settings.prMergeState = stored.prMergeState === true;
    settings.ageEnabled = stored.ageEnabled === true;
    settings.ageUnit = stored.ageUnit || "months";
    settings.pinsEnabled = stored.pinsEnabled !== false;
    settings.kanbanEnabled = stored.kanbanEnabled !== false;
    settings.kanbanDrag = stored.kanbanDrag !== false;
    settings.sidebarToggle = stored.sidebarToggle !== false;
    sidebarCollapsed = stored.sidebarCollapsed === true;
    kanban = { ...kanban, ...(stored.kanban || {}) };
    pins = Array.isArray(stored.pins) ? stored.pins : [];
    lastHref = null;
    schedule();
  }).catch(() => schedule());
})();