Redmine

// Redmine History Timeline Navigator — Bracke Forest (v1.8.1)

// - No visual highlight on first init (only internal mark)

// - Preview de-dup (no heading if missing/duplicated)

// - bf-pills: overflow-x:hidden + ellipsis

// - Removed "bounce"; pills now scroll into view without animation

(function () {

  const CONFIG = {

    PANEL_WIDTH: 280,

    LEFT_OFFSET: 6,

    BOTTOM_OFFSET: 60,

    NOTE_TARGET_PAD: 80,

    LONG_THRESHOLD: 500,

    PREVIEW_MAX_CHARS: 220,

    PREVIEW_IMG_MAX_W: 160,

    PREVIEW_IMG_MAX_H: 100,

    HIGHLIGHT_RING: '0 0 0 2px rgba(37,99,235,.85)',

    HIGHLIGHT_FADE_MS: 700

  };

  // Matches #tab-content-history in your HTML

  const HISTORY_SEL = '#tab-content-history';

  // const NOTE_SEL = '.note[id^="note-"]';	// work with Redmine 6.0

  const NOTE_SEL = 'div[id^="note-"]';		// work with older Redmine installations

  const JOURNAL_SEL = '.journal';

  const PANEL_ID = 'bf-history-timeline-panel';

  const STYLE_ID = PANEL_ID + '-style';

  const LAUNCH_ID = 'bf-history-launcher';

  const HOVERZONE_ID = 'bf-history-hoverzone';

  const PREVIEW_ID = 'bf-history-preview';

  const HINT_ID = 'bf-history-hint';

  const NOTE_HL_CLASS = 'bf-note-highlight';

  if (window.__BF_HistoryTimeline?.destroy) {

    try { window.__BF_HistoryTimeline.destroy(); } catch(e){}

  }

  function ready(fn){

    if (document.readyState === 'complete' || document.readyState === 'interactive') {

      setTimeout(fn, 0);

    } else {

      document.addEventListener('DOMContentLoaded', fn, { once: true });

    }

  }

  ready(bootstrap);

  let retryTimer = null;

  function bootstrap() {

    const tryInit = () => {

      const historyRoot = document.querySelector(HISTORY_SEL);

      if (!historyRoot) return false;

      init(historyRoot);

      return true;

    };

    if (!tryInit()) {

      let tries = 0;

      retryTimer = setInterval(() => {

        tries++;

        if (tryInit() || tries > 50) { clearInterval(retryTimer); retryTimer = null; }

      }, 200);

    }

  }

  function init(historyRoot){

    [PANEL_ID, STYLE_ID, LAUNCH_ID, HOVERZONE_ID, PREVIEW_ID, HINT_ID].forEach(id => document.getElementById(id)?.remove());

    document.querySelectorAll('.' + NOTE_HL_CLASS).forEach(el => el.classList.remove(NOTE_HL_CLASS));

    const esc = (s) => (s || '').replace(/[&<>"]/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[m]));

    const by = (sel, root=document) => root.querySelector(sel);

    function jumpTo(el) {

      if (!el) return;

      const journal = el.closest(JOURNAL_SEL);

      if (journal && journal.style && journal.style.display === 'none') journal.style.display = '';

      const rect = el.getBoundingClientRect();

      const y = window.scrollY + rect.top - CONFIG.NOTE_TARGET_PAD;

      window.scrollTo({ top: Math.max(0, y), behavior: 'smooth' });

      highlight(el);

      setActiveIndex(indexOf(el));

    }

    function highlight(el, silent=false) {

      document.querySelectorAll('.' + NOTE_HL_CLASS).forEach(e => e.classList.remove(NOTE_HL_CLASS));

      if (silent) return;

      el.classList.add(NOTE_HL_CLASS);

      el.style.transition = 'box-shadow 0.6s ease';

      el.style.boxShadow = CONFIG.HIGHLIGHT_RING;

      setTimeout(() => { el.style.boxShadow = '0 0 0 0 rgba(37,99,235,0)'; }, CONFIG.HIGHLIGHT_FADE_MS);

    }

    function extractWhenFromHeader(header) {

      if (!header) return '';

      const links = Array.from(header.querySelectorAll('a[title]'));

      const dateLike = links.find(a => /\d{4}-\d{2}-\d{2}/.test(a.getAttribute('title') || ''));

      if (dateLike) return dateLike.getAttribute('title') || dateLike.textContent.trim();

      const act = links.find(a => /activity\?from=/.test(a.getAttribute('href') || ''));

      if (act) return act.getAttribute('title') || act.textContent.trim();

      const last = links[links.length - 1];

      return last ? (last.getAttribute('title') || last.textContent.trim()) : '';

    }

    function getSummaryAndBody(wikiEl) {

      const firstHeading = wikiEl.querySelector('h1,h2,h3,h4,h5,h6');

      const headingText = firstHeading?.innerText?.trim() || '';

      let bodyText = (wikiEl.innerText || '').replace(/\s+/g,' ').trim();

      const norm = s => (s||'').toLowerCase().replace(/[\s\p{P}\p{S}]+/gu,' ').trim();

      if (headingText && norm(bodyText).startsWith(norm(headingText))) {

        const idx = bodyText.toLowerCase().indexOf(headingText.toLowerCase());

        if (idx === 0) bodyText = bodyText.slice(headingText.length).trim();

      }

      const showTitle = !!headingText && !norm(bodyText.slice(0,100)).includes(norm(headingText));

      const summary = showTitle ? headingText : '';

      return { summary, bodyText };

    }

    const collectNotes = (excludeHiddenJournals) => {

      const notes = Array.from(historyRoot.querySelectorAll(NOTE_SEL))

        .filter(n => {

          if (!excludeHiddenJournals) return true;

          const j = n.closest(JOURNAL_SEL);

          return !(j && j.style && j.style.display === 'none');

        })

        .sort((a,b) => {

          const an = parseInt(a.id.replace('note-',''),10);

          const bn = parseInt(b.id.replace('note-',''),10);

          if (!isNaN(an) && !isNaN(bn)) return an - bn;

          return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;

        });

      return notes.map((note, i) => {

        const num = parseInt(note.id.replace('note-',''),10);

        const journal = note.closest(JOURNAL_SEL);

        const header = note.querySelector('.note-header') || journal?.querySelector('.note-header');

        const author = header?.querySelector('a.user')?.textContent?.trim() || 'Unknown';

        const linkTxt = journal?.querySelector('.journal-link')?.textContent?.trim() || ('#' + (isNaN(num) ? (i+1) : num));

        const when = extractWhenFromHeader(header);

        const wiki = note.querySelector('.wiki') || note;

        const { summary, bodyText } = getSummaryAndBody(wiki);

        const imgSrc = (wiki.querySelector('img')?.getAttribute('src')) || null;

        return { el: note, num, author, linkTxt, when, textLen: bodyText.length, imgSrc, summary, fullText: bodyText };

      });

    };

    let excludeHidden = true;

    let notes = collectNotes(excludeHidden);

    if (!notes.length) { console.warn('Timeline: No notes found.'); return; }

    const indexOf = (el) => notes.findIndex(n => n.el === el);

    let activeIndex = 0;

    const css = document.createElement('style');

    css.id = STYLE_ID;

    css.textContent = `

      :root { --bf-width: ${CONFIG.PANEL_WIDTH}px; --bf-left: ${CONFIG.LEFT_OFFSET}px; --bf-bottom: ${CONFIG.BOTTOM_OFFSET}px; }

      #${HOVERZONE_ID} { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--bf-bottom); width: 360px; height: 42px; z-index: 9997; }

      #${LAUNCH_ID} {

        position: fixed; left: 50%; transform: translateX(-50%);

        bottom: calc(var(--bf-bottom) - 10px); z-index: 9998; opacity: 0; transition: opacity .2s ease, transform .2s ease;

        background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 999px;

        padding: 6px 12px; font-weight: 600; font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.12); cursor: pointer;

      }

      #${HOVERZONE_ID}:hover + #${LAUNCH_ID}, #${LAUNCH_ID}:hover { opacity: 1; transform: translateX(-50%) translateY(-2px); }

      #${PANEL_ID} {

        position: fixed; width: var(--bf-width); left: var(--bf-left);

        bottom: calc(var(--bf-bottom) + 14px); max-width: calc(100vw - 24px); background: #f9fafb; color: #111827;

        border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.18);

        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';

        overflow: hidden; user-select: none; z-index: 9999; transform: translate(-120%, 0); opacity: 0; pointer-events: none;

        transition: transform .28s ease, opacity .28s ease;

      }

      #${PANEL_ID}.open { transform: translate(0, 0); opacity: 1; pointer-events: auto; }

      #${PANEL_ID} .bf-hdr { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#f3f4f6; border-bottom:1px solid #e5e7eb; }

      #${PANEL_ID} .bf-title { font-weight:700; letter-spacing:.2px; color:#111827; }

      #${PANEL_ID} .bf-counter { opacity:.85; font-variant-numeric: tabular-nums; color:#374151; }

      #${PANEL_ID} .bf-close { background:#e5e7eb; color:#374151; border:1px solid #d1d5db; font-size:12px; padding:4px 8px; border-radius:8px; cursor:pointer; }

      #${PANEL_ID} .bf-close:hover { background:#d1d5db; }

      #${PANEL_ID} .bf-controls { display:grid; grid-template-columns: auto 1fr auto; gap:8px; align-items:center; padding:10px 12px; }

      #${PANEL_ID} .bf-btn { border:1px solid #d1d5db; padding:4px 8px; border-radius:8px; background:#ffffff; color:#374151; cursor:pointer; font-size:12px; line-height:1; }

      #${PANEL_ID} .bf-btn:hover { background:#f3f4f6; }

      #${PANEL_ID} .bf-slider-wrap { display:flex; align-items:center; gap:10px; }

      #${PANEL_ID} .bf-edge { font-size:11px; color:#6b7280; user-select:none; }

      #${PANEL_ID} .bf-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; }

      #${PANEL_ID} .bf-slider::-webkit-slider-runnable-track { height: 4px; background: #e5e7eb; border-radius: 999px; border: 1px solid #d1d5db; }

      #${PANEL_ID} .bf-slider::-moz-range-track { height: 4px; background: #e5e7eb; border-radius: 999px; border: 1px solid #d1d5db; }

      #${PANEL_ID} .bf-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; border: 1px solid #9ca3af; margin-top: -6px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

      #${PANEL_ID} .bf-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #ffffff; border: 1px solid #9ca3af; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

      #${PANEL_ID} .bf-toggles { display:flex; gap:10px; align-items:center; padding:0 12px 10px 12px; flex-wrap:wrap; }

      #${PANEL_ID} .bf-toggles label { font-size:12px; color:#374151; display:flex; gap:6px; align-items:center; }

      #${PANEL_ID} .bf-filter { flex:1; min-width:120px; padding:6px 8px; border-radius:8px; border:1px solid #d1d5db; background:#ffffff; color:#111827; font-size:12px; }

      #${PANEL_ID} .bf-pills {

        display:flex;

        flex-wrap:wrap;

        gap:6px;

        padding:0 12px 12px 12px;

        max-height:160px;

        overflow-y:auto;

        overflow-x:hidden;

      }

      #${PANEL_ID} .bf-pill {

        font-size:12px;

        border:1px solid #d1d5db;

        background:#ffffff;

        color:#374151;

        border-radius:999px;

        padding:4px 8px;

        cursor:pointer;

        max-width:100%;

        overflow:hidden;

        text-overflow:ellipsis;

        white-space:nowrap;

      }

      #${PANEL_ID} .bf-pill:hover { background:#f3f4f6; }

      #${PANEL_ID} .bf-pill.active { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.20) inset; }

      #${PANEL_ID} .bf-help { font-size:11px; color:#6b7280; padding:0 12px 12px 12px; }

      .${NOTE_HL_CLASS} { border-radius: inherit !important; }

      .${NOTE_HL_CLASS}::before { border-color: rgba(37,99,235,.85) !important; }

      #${PREVIEW_ID} {

        position: fixed; z-index: 10000; pointer-events: none;

        max-width: 340px; background: #ffffff; color:#111827; border:1px solid #e5e7eb; border-radius: 10px;

        box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 8px; font-size: 12px; display: none;

      }

      #${PREVIEW_ID} .ttl { font-weight: 700; margin-bottom: 4px; }

      #${PREVIEW_ID} .txt { color:#374151; line-height: 1.3; }

      #${PREVIEW_ID} .row { display:flex; gap:8px; align-items:flex-start; }

      #${PREVIEW_ID} img { display:block; max-width:${CONFIG.PREVIEW_IMG_MAX_W}px; max-height:${CONFIG.PREVIEW_IMG_MAX_H}px; border-radius:6px; border:1px solid #e5e7eb; }

      #${HINT_ID}{

        position: fixed; z-index: 10001; pointer-events: none;

        background:#111827; color:#ffffff; border-radius:6px; padding:4px 8px; font-size:11px;

        box-shadow: 0 6px 18px rgba(0,0,0,.18); display:none; white-space:nowrap;

      }

    `;

    document.head.appendChild(css);

    const hoverZone = document.createElement('div'); hoverZone.id = HOVERZONE_ID;

    const launcher = document.createElement('button'); launcher.id = LAUNCH_ID; launcher.textContent = 'Quick jump';

    document.body.appendChild(hoverZone); document.body.appendChild(launcher);

    const panel = document.createElement('div');

    panel.id = PANEL_ID;

    panel.innerHTML = `

      <div class="bf-hdr">

        <span class="bf-title">History timeline</span>

        <span class="bf-counter"></span>

        <button class="bf-close" title="Close">Close</button>

      </div>

      <div class="bf-controls">

        <button class="bf-btn bf-prev" title="Previous (p/k)">⟨</button>

        <div class="bf-slider-wrap">

          <span class="bf-edge">Oldest</span>

          <input type="range" class="bf-slider" min="0" value="0" step="1">

          <span class="bf-edge">Newest</span>

        </div>

        <button class="bf-btn bf-next" title="Next (n/j)">⟩</button>

      </div>

      <div class="bf-toggles">

        <label title="Checked = show only visible notes (ignores hidden journals). Unchecked = include hidden.">

          <input type="checkbox" class="bf-toggle-onlynotes" checked> Only notes

        </label>

        <label><input type="checkbox" class="bf-toggle-long"> Only jump to long notes</label>

        <input type="text" class="bf-filter" placeholder="Filter: author, date or #">

      </div>

      <div class="bf-pills" role="listbox" aria-label="Quick jump"></div>

      <div class="bf-help">Keyboard shortcuts:<br><b>n/j</b> next, <b>p/k</b> previous, <b>g</b> go to #</div>

    `;

    document.body.appendChild(panel);

    const preview = document.createElement('div'); preview.id = PREVIEW_ID; document.body.appendChild(preview);

    const hint = document.createElement('div'); hint.id = HINT_ID; document.body.appendChild(hint);

    const slider = by('.bf-slider', panel);

    const btnPrev = by('.bf-prev', panel);

    const btnNext = by('.bf-next', panel);

    const counter = by('.bf-counter', panel);

    const pills = by('.bf-pills', panel);

    const closeBtn = by('.bf-close', panel);

    const toggleOnlyNotes = by('.bf-toggle-onlynotes', panel);

    const toggleLong = by('.bf-toggle-long', panel);

    const filterInput = by('.bf-filter', panel);

    let filteredIdxList = null;

    let pillEls = [];

    function formatLabel(n) {

      const when = n.when ? n.when.replace(/\s+/g,' ').trim() : '—';

      const numTxt = isNaN(n.num) ? n.linkTxt : `#${n.num}`;

      return `${numTxt} · ${when} · ${n.author}`;

    }

    function buildPreviewHTML(n) {

      const useTitle = !!n.summary;

      const ttl = useTitle ? esc(n.summary) : '';

      const text = esc(n.fullText.slice(0, CONFIG.PREVIEW_MAX_CHARS));

      const textHTML = `<div class="txt">${text}${n.fullText.length > CONFIG.PREVIEW_MAX_CHARS ? '…' : ''}</div>`;

      return n.imgSrc

        ? `<div class="row"><img src="${n.imgSrc}"><div style="flex:1 1 auto;">${useTitle ? `<div class="ttl">${ttl}</div>` : ''}${textHTML}</div></div>`

        : `${useTitle ? `<div class="ttl">${ttl}</div>` : ''}${textHTML}`;

    }

    function showHint(e, text){

      hint.textContent = text;

      hint.style.display = 'block';

      const rectW = hint.offsetWidth || 120;

      const x = Math.min(window.innerWidth - rectW - 8, Math.max(8, e.clientX - rectW/2));

      const y = Math.max(8, e.clientY - 26);

      hint.style.left = `${x}px`;

      hint.style.top = `${y}px`;

    }

    function hideHint(){ hint.style.display = 'none'; }

    function attachPillPreview(pill, n) {

      pill.removeAttribute('title');

      pill.addEventListener('mouseenter', (e) => {

        preview.innerHTML = buildPreviewHTML(n);

        preview.style.display = 'block';

        movePreview(e);

        showHint(e, `Jump to ${isNaN(n.num) ? n.linkTxt : ('#' + n.num)}`);

      });

      pill.addEventListener('mousemove', (e) => { movePreview(e); showHint(e, hint.textContent); });

      pill.addEventListener('mouseleave', () => { preview.style.display = 'none'; hideHint(); });

      function movePreview(e) {

        const pad = 12;

        const vw = window.innerWidth, vh = window.innerHeight;

        let x = e.clientX + pad, y = e.clientY + pad;

        const rectW = preview.offsetWidth || 320, rectH = preview.offsetHeight || 140;

        if (x + rectW + 8 > vw) x = vw - rectW - 8;

        if (y + rectH + 8 > vh) y = vh - rectH - 8;

        preview.style.left = `${x}px`;

        preview.style.top = `${y}px`;

      }

    }

    function rebuildPills() {

      pills.innerHTML = '';

      pillEls = [];

      const term = filterInput.value.trim().toLowerCase();

      const useFilter = !!term;

      filteredIdxList = [];

      notes.forEach((n, idx) => {

        if (toggleLong.checked && n.textLen < CONFIG.LONG_THRESHOLD) return;

        if (useFilter) {

          const hay = `${n.author} ${n.num} ${n.linkTxt} ${n.when}`.toLowerCase();

          if (!hay.includes(term)) return;

        }

        filteredIdxList.push(idx);

        const pill = document.createElement('button');

        pill.className = 'bf-pill';

        pill.setAttribute('role', 'option');

        pill.textContent = formatLabel(n);

        pill.addEventListener('click', () => { setActiveIndex(idx); jumpTo(n.el); });

        attachPillPreview(pill, n);

        pills.appendChild(pill);

        pillEls[idx] = pill;

      });

      if (!filteredIdxList.length) {

        const none = document.createElement('div');

        none.style.color = '#6b7280'; none.style.fontSize = '12px';

        none.textContent = 'No results match the filter.';

        pills.appendChild(none);

      }

      setActiveIndex(Math.min(activeIndex, notes.length - 1));

    }

    // Scroll active pill into view without animation; handle when active is missing in filtered view

    function ensureActivePillVisible() {

      let pill = pillEls[activeIndex];

      if (!pill && filteredIdxList && filteredIdxList.length) {

        let nearest = filteredIdxList[0], best = Math.abs(nearest - activeIndex);

        for (const i of filteredIdxList) {

          const d = Math.abs(i - activeIndex);

          if (d < best) { best = d; nearest = i; }

        }

        activeIndex = nearest;

        pill = pillEls[activeIndex];

      }

      if (!pill) return;

      pill.classList.add('active');

      pillEls.forEach((p, i) => { if (p && i !== activeIndex) p.classList.remove('active'); });

      pillEls.forEach((p, i) => p && p.setAttribute('aria-selected', i === activeIndex ? 'true' : 'false'));

      // scrollIntoView without smooth → no bounce

      if (pill.scrollIntoView) {

        pill.scrollIntoView({ block: 'nearest', inline: 'nearest' });

      } else {

        // manual fallback

        const c = pills, pTop = pill.offsetTop, pBottom = pTop + pill.offsetHeight + 6;

        if (pTop < c.scrollTop) c.scrollTop = pTop - 6;

        else if (pBottom > c.scrollTop + c.clientHeight) c.scrollTop = pBottom - c.clientHeight;

      }

    }

    function setActiveIndex(i) {

      activeIndex = Math.max(0, Math.min(notes.length - 1, i));

      slider.max = String(Math.max(0, notes.length - 1));

      slider.value = String(activeIndex);

      counter.textContent = `${activeIndex + 1}/${notes.length}`;

      ensureActivePillVisible();

    }

    function rebuildAll() {

      notes = collectNotes(excludeHidden);

      rebuildPills();

    }

    function move(delta) {

      const insideFilter = (toggleLong.checked || (filterInput.value.trim().length > 0));

      if (insideFilter && filteredIdxList && filteredIdxList.length) {

        const currPos = filteredIdxList.indexOf(activeIndex);

        const nextPos = currPos === -1 ? 0 : Math.max(0, Math.min(filteredIdxList.length - 1, currPos + delta));

        const nextIdx = filteredIdxList[nextPos];

        setActiveIndex(nextIdx);

      } else {

        setActiveIndex(activeIndex + delta);

      }

      const n = notes[activeIndex];

      if (n) jumpTo(n.el);

    }

    const sliderInput = () => setActiveIndex(parseInt(slider.value,10) || 0);

    slider.addEventListener('input', sliderInput);

    slider.addEventListener('change', () => { const n = notes[activeIndex]; if (n) jumpTo(n.el); });

    btnPrev.addEventListener('click', () => move(-1));

    btnNext.addEventListener('click', () => move(1));

    toggleOnlyNotes.addEventListener('change', () => { excludeHidden = toggleOnlyNotes.checked; rebuildAll(); });

    toggleLong.addEventListener('change', rebuildPills);

    filterInput.addEventListener('input', rebuildPills);

    closeBtn.addEventListener('click', () => panel.classList.remove('open'));

    const launcherClick = () => {

      panel.classList.toggle('open');

      if (panel.classList.contains('open')) selectClosest(false);

    };

    launcher.addEventListener('click', launcherClick);

    const onKey = (e) => {

      if (!panel.classList.contains('open')) return;

      const tag = (e.target.tagName || '').toLowerCase();

      const isTyping = (tag === 'input' || tag === 'textarea' || tag === 'select');

      if (isTyping && e.target !== filterInput) return;

      if (e.key === 'j' || e.key === 'n') { e.preventDefault(); move(1); }

      else if (e.key === 'k' || e.key === 'p') { e.preventDefault(); move(-1); }

      else if (e.key.toLowerCase() === 'g') {

        e.preventDefault();

        const s = prompt('Go to comment # (e.g. 10):'); if (!s) return;

        const targetNum = parseInt(s, 10); if (isNaN(targetNum)) return;

        const idx = notes.findIndex(n => n.num === targetNum);

        if (idx >= 0) { setActiveIndex(idx); jumpTo(notes[idx].el); }

        else alert(`Could not find #${targetNum}`);

      }

    };

    window.addEventListener('keydown', onKey);

    function selectClosest(suppressHighlight=false) {

      const viewportMid = window.scrollY + window.innerHeight / 2;

      let bestIdx = 0, bestDist = Infinity;

      notes.forEach((n, i) => {

        const rect = n.el.getBoundingClientRect();

        const y = window.scrollY + rect.top;

        const d = Math.abs(y - viewportMid);

        if (d < bestDist) { bestDist = d; bestIdx = i; }

      });

      setActiveIndex(bestIdx);

      highlight(notes[bestIdx].el, suppressHighlight);

    }

    rebuildAll();

    selectClosest(true);

    const mo = new MutationObserver(() => {

      clearTimeout(mo._t);

      mo._t = setTimeout(() => {

        const now = collectNotes(excludeHidden);

        const beforeIds = notes.map(n => n.el.id).join(',');

        const afterIds  = now.map(n => n.el.id).join(',');

        if (beforeIds !== afterIds) { notes = now; rebuildPills(); }

      }, 200);

    });

    mo.observe(historyRoot, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });

    window.__BF_HistoryTimeline = {

      refresh: rebuildAll,

      open: () => panel.classList.add('open'),

      close: () => panel.classList.remove('open'),

      setWidth: (px) => { document.documentElement.style.setProperty('--bf-width', px + 'px'); },

      setLeft: (px) => { document.documentElement.style.setProperty('--bf-left', px + 'px'); },

      setBottom: (px) => { document.documentElement.style.setProperty('--bf-bottom', px + 'px'); },

      destroy: () => {

        mo.disconnect();

        [panel, launcher, hoverZone, css, preview, hint].forEach(el=>el?.remove());

        window.removeEventListener('keydown', onKey);

      }

    };

  }

})();