💫 Points Maker (Optimized + Abroad Color)

Optimized: Points-style PDA panel showing Torn display + abroad stock. Collapsible. Abroad stock color-coded. Safe polling, debounced layout, reduced DOM churn.

נכון ליום 13-11-2025. ראה הגרסה האחרונה.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         💫 Points Maker (Optimized + Abroad Color)
// @namespace    http://tampermonkey.net/
// @version      1.2.5
// @description  Optimized: Points-style PDA panel showing Torn display + abroad stock. Collapsible. Abroad stock color-coded. Safe polling, debounced layout, reduced DOM churn.
// @match        https://www.torn.com/*
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_xmlhttpRequest
// @run-at       document-end
// ==/UserScript==

(function () {
  'use strict';

  // CONFIG
  const PANEL_ID = 'points_maker_pda';
  const POLL_INTERVAL_MS = 45 * 1000;
  const YATA_URL = 'https://yata.yt/api/v1/travel/export/';
  const PROM_URL = 'https://api.prombot.co.uk/api/travel';
  const SPECIAL_DRUG = 'Xanax';

  // Abroad color max per category
  const MAX_ABROAD = { flowers: 50, plushies: 50, drugs: 50 }; // you can tweak values

  // DATA (unchanged mapping lists)
  const FLOWERS = { /* same as original */ 
    "Dahlia": { short: "Dahlia", loc: "MX 🇲🇽", country: "Mexico" },
    "Orchid": { short: "Orchid", loc: "HW 🏝️", country: "Hawaii" },
    "African Violet": { short: "Violet", loc: "SA 🇿🇦", country: "South Africa" },
    "Cherry Blossom": { short: "Cherry", loc: "JP 🇯🇵", country: "Japan" },
    "Peony": { short: "Peony", loc: "CN 🇨🇳", country: "China" },
    "Ceibo Flower": { short: "Ceibo", loc: "AR 🇦🇷", country: "Argentina" },
    "Edelweiss": { short: "Edelweiss", loc: "CH 🇨🇭", country: "Switzerland" },
    "Crocus": { short: "Crocus", loc: "CA 🇨🇦", country: "Canada" },
    "Heather": { short: "Heather", loc: "UK 🇬🇧", country: "United Kingdom" },
    "Tribulus Omanense": { short: "Tribulus", loc: "AE 🇦🇪", country: "UAE" },
    "Banana Orchid": { short: "Banana", loc: "KY 🇰🇾", country: "Cayman Islands" }
  };

  const PLUSHIES = { /* same as original */
    "Sheep Plushie": { short: "Sheep", loc: "B.B 🏪", country: "Torn City" },
    "Teddy Bear Plushie": { short: "Teddy", loc: "B.B 🏪", country: "Torn City" },
    "Kitten Plushie": { short: "Kitten", loc: "B.B 🏪", country: "Torn City" },
    "Jaguar Plushie": { short: "Jaguar", loc: "MX 🇲🇽", country: "Mexico" },
    "Wolverine Plushie": { short: "Wolverine", loc: "CA 🇨🇦", country: "Canada" },
    "Nessie Plushie": { short: "Nessie", loc: "UK 🇬🇧", country: "United Kingdom" },
    "Red Fox Plushie": { short: "Fox", loc: "UK 🇬🇧", country: "United Kingdom" },
    "Monkey Plushie": { short: "Monkey", loc: "AR 🇦🇷", country: "Argentina" },
    "Chamois Plushie": { short: "Chamois", loc: "CH 🇨🇭", country: "Switzerland" },
    "Panda Plushie": { short: "Panda", loc: "CN 🇨🇳", country: "China" },
    "Lion Plushie": { short: "Lion", loc: "SA 🇿🇦", country: "South Africa" },
    "Camel Plushie": { short: "Camel", loc: "AE 🇦🇪", country: "UAE" },
    "Stingray Plushie": { short: "Stingray", loc: "KY 🇰🇾", country: "Cayman Islands" }
  };

  const COUNTRY_NAME_TO_CODE = {
    'JAPAN': 'JAP', 'MEXICO': 'MEX', 'CANADA': 'CAN', 'CHINA': 'CHI', 'UNITED KINGDOM': 'UNI',
    'ARGENTINA': 'ARG', 'SWITZERLAND': 'SWI', 'HAWAII': 'HAW', 'UAE': 'UAE', 'CAYMAN ISLANDS': 'CAY',
    'SOUTH AFRICA': 'SOU', 'S.A': 'SOU', 'SA': 'SOU', 'TORN': 'BB', 'B.B': 'BB'
  };

  // UTIL
  function escapeHtml(s) { if (s == null) return ''; return String(s).replace(/[&<>"']/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m])); }
  function colorForPercent(value, max) {
    if (!max || max === 0) return '#bdbdbd';
    const pct = (value / max) * 100;
    if (pct >= 75) return '#00c853';
    if (pct >= 40) return '#3399ff';
    return '#ff1744';
  }
  function stockClassByQty(q) { q = Number(q || 0); if (q === 0) return 'stock-red'; if (q >= 1500) return 'stock-green'; if (q >= 321 && q <= 749) return 'stock-orange'; return 'stock-gray'; }

  // STYLE
  GM_addStyle(`
    #${PANEL_ID} { position: fixed; top: 42px; left: 100px; width: 250px; background: #0b0b0b; color: #eaeaea; font-family: "DejaVu Sans Mono", monospace; font-size: 9px; border: 1px solid #444; border-radius: 6px; z-index: 999999; box-shadow: 0 6px 16px rgba(0,0,0,0.5); max-height: 65vh; overflow-y: auto; line-height: 1.1; }
    #${PANEL_ID} .header { background: #121212; padding: 4px 6px; cursor: pointer; font-weight:700; font-size:10px; border-bottom:1px solid #333; user-select:none; display:flex; align-items:center; gap:6px; }
    #${PANEL_ID} .controls { padding:6px; display:flex; gap:6px; }
    #${PANEL_ID} .controls button { font-size:9px; padding:2px 6px; background:#171717; color:#eaeaea; border:1px solid #333; border-radius:3px; cursor:pointer; }
    #${PANEL_ID} .controls button:hover { background:#222; }
    #${PANEL_ID} .summary-line { font-weight:700; margin:6px; font-size:10px; color:#dfe7ff; }
    #${PANEL_ID} .low-line { color:#ff4d4d; font-weight:700; margin:6px; font-size:10px; }
    #${PANEL_ID} .group-title { font-weight:700; margin:6px 6px 2px 6px; font-size:9.5px; }
    #${PANEL_ID} ul.item-list { margin:4px 6px 8px 12px; padding:0; list-style:none; }
    #${PANEL_ID} li.item-row { display:flex; align-items:center; gap:6px; padding:2px 0; white-space:nowrap; }
    #${PANEL_ID} .item-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
    #${PANEL_ID} .item-total { flex:0 0 36px; text-align:right; color:#cfe8c6; }
    #${PANEL_ID} .item-av { flex:0 0 60px; text-align:right; color:#f7b3b3; }
    #${PANEL_ID} .item-loc { flex:0 0 36px; text-align:right; color:#bcbcbc; font-size:8.5px; }
    #${PANEL_ID} #tc_status { font-size:9px; color:#bdbdbd; margin:6px; }
    .stock-green{ color:#00c853 !important; } .stock-orange{ color:#ff9800 !important; } .stock-red{ color:#ff1744 !important; } .stock-gray{ color:#9ea6b3 !important; }
  `);

  // CACHE derived lists
  function buildRequiredList(mapObj) {
    const fullNames = Object.keys(mapObj);
    const shortNames = fullNames.map(fn => mapObj[fn].short);
    const locByShort = {};
    const countryByShort = {};
    fullNames.forEach(fn => {
      const s = mapObj[fn].short;
      locByShort[s] = mapObj[fn].loc;
      countryByShort[s] = mapObj[fn].country;
    });
    return { fullNames, shortNames, locByShort, countryByShort };
  }
  const flowersReq = buildRequiredList(FLOWERS);
  const plushReq = buildRequiredList(PLUSHIES);

  // UI builder
  let statusEl, summaryEl, contentEl;
  function buildUI() {
    if (document.getElementById(PANEL_ID)) return;
    const root = document.createElement('div');
    root.id = PANEL_ID;
    root.innerHTML = `
      <div id="tc_header" class="header">▶ 💫 Points Maker</div>
      <div id="tc_content_wrapper">
        <div id="tc_controls" class="controls">
          <button id="tc_refresh">Refresh</button>
          <button id="tc_setkey">Set API Key</button>
          <button id="tc_resetkey">Reset Key</button>
        </div>
        <div id="tc_status">Waiting for API key...</div>
        <div id="tc_summary"></div>
        <div id="tc_content"></div>
      </div>
    `;
    document.body.appendChild(root);

    const headerEl = root.querySelector('#tc_header');
    const contentWrapper = root.querySelector('#tc_content_wrapper');
    let collapsed = GM_getValue(`${PANEL_ID}-collapsed`, false);
    function updateCollapse() {
      headerEl.textContent = (collapsed ? '▶ ' : '▼ ') + '💫 Points Maker';
      contentWrapper.style.display = collapsed ? 'none' : 'block';
    }
    updateCollapse();
    headerEl.addEventListener('click', () => {
      collapsed = !collapsed;
      GM_setValue(`${PANEL_ID}-collapsed`, collapsed);
      updateCollapse();
    });

    root.querySelector('#tc_refresh').addEventListener('click', () => refreshAll(true));
    root.querySelector('#tc_setkey').addEventListener('click', () => askKey(true));
    root.querySelector('#tc_resetkey').addEventListener('click', () => {
      GM_setValue('tornAPIKey', null);
      apiKey = null;
      if (statusEl) statusEl.textContent = 'Key cleared. Click Set API Key.';
      if (summaryEl) summaryEl.innerHTML = '';
      if (contentEl) contentEl.innerHTML = '';
      stopPolling();
    });

    statusEl = root.querySelector('#tc_status');
    summaryEl = root.querySelector('#tc_summary');
    contentEl = root.querySelector('#tc_content');
  }

  buildUI();

  // NETWORK helper
  function gmGetJson(url, timeout = 14000) {
    return new Promise((resolve, reject) => {
      try {
        GM_xmlhttpRequest({
          method: 'GET',
          url,
          timeout,
          onload: res => {
            try {
              const txt = (typeof res.response === 'string' && res.response) ? res.response : res.responseText;
              const parsed = txt && txt.length ? JSON.parse(txt) : res.response;
              resolve(parsed);
            } catch (e) { reject(e); }
          },
          onerror: err => reject(err),
          ontimeout: () => reject(new Error('timeout'))
        });
      } catch (e) { reject(e); }
    });
  }

  // TORN API + DOM
  function aggregateFromApiResponse(data) {
    const items = {};
    const push = (src) => {
      if (!src) return;
      const entries = Array.isArray(src) ? src : Object.values(src);
      for (const e of entries) {
        if (!e) continue;
        const name = e.name || e.item_name || e.title || e.item || null;
        if (!name) continue;
        const qty = Number(e.quantity ?? e.qty ?? e.amount ?? 1) || 0;
        items[name] = (items[name] || 0) + qty;
      }
    };
    push(data.display);
    push(data.inventory);
    return items;
  }

  async function fetchTornDisplayInventory() {
    const key = GM_getValue('tornAPIKey', null);
    if (!key) return null;
    const url = `https://api.torn.com/user/?selections=display,inventory&key=${encodeURIComponent(key)}`;
    try {
      const data = await gmGetJson(url);
      if (!data || data.error) return null;
      return aggregateFromApiResponse(data);
    } catch (e) { console.warn('fetchTornDisplayInventory', e); return null; }
  }

  function fetchDisplayViaDOM() {
    const map = {};
    const els = document.querySelectorAll('.display-item, .display_case_item, .dcItem, .item-wrap .item');
    if (els && els.length) {
      els.forEach(el => {
        let name = ''; let qty = 0;
        const nameEl = el.querySelector('.item-name, .name, .title') || el.querySelector('a') || el;
        if (nameEl) name = (nameEl.innerText || '').trim();
        const qtyEl = el.querySelector('.item-amount, .count, .qty, .quantity, .item-qty');
        if (qtyEl) qty = parseInt((qtyEl.innerText || '').replace(/\D/g, '')) || 0;
        if (name) map[name] = (map[name] || 0) + qty;
      });
    }
    return map;
  }

  // PARSERS
  function parseYata(yataData) {
    const map = {};
    if (!yataData || !yataData.stocks) return map;
    for (const [code, obj] of Object.entries(yataData.stocks)) {
      const c = String(code).toUpperCase();
      const arr = Array.isArray(obj.stocks) ? obj.stocks : [];
      const m = {};
      for (const it of arr) if (it && it.name) m[it.name] = Number(it.quantity ?? it.qty ?? 0) || 0;
      map[c] = m;
    }
    return map;
  }

  function parseProm(promData) {
    const map = {};
    if (!promData) return map;
    for (const [countryKey, countryVal] of Object.entries(promData)) {
      if (!countryVal) continue;
      const up = String(countryKey).trim().toUpperCase();
      let code = up;
      if (COUNTRY_NAME_TO_CODE[up]) code = COUNTRY_NAME_TO_CODE[up];
      const m = {};
      if (Array.isArray(countryVal.stocks)) {
        for (const it of countryVal.stocks) if (it && it.name) m[it.name] = Number(it.quantity ?? it.qty ?? 0) || 0;
      } else {
        for (const [k, v] of Object.entries(countryVal)) {
          if (v == null) continue;
          if (typeof v === 'object' && ('quantity' in v || 'qty' in v || 'amount' in v)) {
            m[k] = Number(v.quantity ?? v.qty ?? v.amount ?? 0) || 0;
          } else if (typeof v === 'number' || !isNaN(Number(v))) {
            m[k] = Number(v) || 0;
          } else if (typeof v === 'object' && v.stocks && Array.isArray(v.stocks)) {
            for (const it of v.stocks) if (it && it.name) m[it.name] = Number(it.quantity ?? it.qty ?? 0) || 0;
          }
        }
      }
      map[String(code).toUpperCase()] = m;
    }
    return map;
  }

  function sumAcrossCountriesFor(itemName, parsedMap) {
    if (!parsedMap) return 0;
    let total = 0;
    for (const c of Object.keys(parsedMap)) total += Number(parsedMap[c][itemName] || 0);
    return total;
  }

  // counts & set calc
  function countsForReq(itemsAgg, req, mapObj) {
    const counts = {};
    req.shortNames.forEach(s => counts[s] = 0);
    req.fullNames.forEach(fn => {
      const short = mapObj[fn].short;
      const q = itemsAgg[fn] || 0;
      counts[short] = (counts[short] || 0) + q;
    });
    return counts;
  }

  function calcSetsAndRemainderFromCounts(counts, shortNames) {
    const countsArr = shortNames.map(n => counts[n] || 0);
    const sets = countsArr.length ? Math.min(...countsArr) : 0;
    const remainder = {};
    shortNames.forEach(n => remainder[n] = Math.max(0, (counts[n] || 0) - sets));
    return { sets, remainder };
  }

  function findLowest(remainder, locMap, countryMap) {
    const keys = Object.keys(remainder);
    if (!keys.length) return null;
    let min = Infinity;
    keys.forEach(k => { if (remainder[k] < min) min = remainder[k]; });
    const allEqual = keys.every(k => remainder[k] === min);
    if (allEqual) return null;
    const key = keys.find(k => remainder[k] === min);
    return { short: key, rem: min, loc: locMap[key] || '', country: countryMap[key] || '' };
  }

  // RENDER
  function renderUI(itemsAgg, yataRaw, promRaw) {
    if (!contentEl) return;
    const flowerTotals = countsForReq(itemsAgg, flowersReq, FLOWERS);
    const plushTotals  = countsForReq(itemsAgg, plushReq, PLUSHIES);
    const fCalc = calcSetsAndRemainderFromCounts(flowerTotals, flowersReq.shortNames);
    const pCalc = calcSetsAndRemainderFromCounts(plushTotals, plushReq.shortNames);
    const totalSets = fCalc.sets + pCalc.sets;
    const totalPoints = totalSets * 10;
    const yataMap = parseYata(yataRaw);
    const promMap = parseProm(promRaw);

    const flowerDisplay = fCalc.remainder;
    const plushDisplay  = pCalc.remainder;

    function pickAvFor(fullName, category) {
      const yataSum = sumAcrossCountriesFor(fullName, yataMap);
      const promSum = sumAcrossCountriesFor(fullName, promMap);
      let val = 0; let src = '';
      if (yataSum > 0) { val = yataSum; src = 'Y'; }
      else if (promSum > 0) { val = promSum; src = 'P'; }
      else if (yataRaw && Object.keys(yataRaw).length) { val = yataSum; src = 'Y'; }
      else if (promRaw && Object.keys(promRaw).length) { val = promSum; src = 'P'; }
      else { val = null; src = null; }
      // compute color based on abroad total
      let col = '#f7b3b3';
      if (val != null && category && MAX_ABROAD[category]) col = colorForPercent(val, MAX_ABROAD[category]);
      return { val, src, color: col };
    }

    if (statusEl) statusEl.textContent = `Updated: ${new Date().toLocaleTimeString()} — Sets F:${fCalc.sets} P:${pCalc.sets}`;
    if (summaryEl) summaryEl.innerHTML = `<div class="summary-line">Total sets: ${totalSets} | Points: ${totalPoints}</div>`;

    const lowFlower = findLowest(flowerDisplay, flowersReq.locByShort, flowersReq.countryByShort);
    const lowPlush  = findLowest(plushDisplay, plushReq.locByShort, plushReq.countryByShort);

    let html = '';
    if (lowFlower) html += `<div class="low-line">🛫 Low on ${escapeHtml(lowFlower.short)} — travel to ${escapeHtml(lowFlower.country)} ${escapeHtml(lowFlower.loc)} and import 🛬</div>`;

    html += `<div class="group-title">Flowers — sets: ${fCalc.sets} | pts: ${fCalc.sets * 10}</div><ul class="item-list">`;
    const maxFlower = Math.max(...Object.values(flowerDisplay), 1);
    flowersReq.fullNames.forEach(full => {
      const short = FLOWERS[full].short;
      const total = flowerDisplay[short] ?? 0;
      const picked = pickAvFor(full, 'flowers');
      const avText = (picked && picked.val != null && picked.src) ? `${picked.val} Av [${picked.src}]` : '—';
      html += `<li class="item-row" style="color:${picked.color}"><span class="item-name">${escapeHtml(short)}</span><span class="item-total">${total}</span><span class="item-av">(${avText})</span><span class="item-loc">${FLOWERS[full].loc || ''}</span></li>`;
    });
    html += `</ul>`;

    if (lowPlush) html += `<div class="low-line">🛫 Low on ${escapeHtml(lowPlush.short)} — travel to ${escapeHtml(lowPlush.country)} ${escapeHtml(lowPlush.loc)} and import 🛬</div>`;

    html += `<div class="group-title">Plushies — sets: ${pCalc.sets} | pts: ${pCalc.sets * 10}</div><ul class="item-list">`;
    const maxPlush = Math.max(...Object.values(plushDisplay), 1);
    plushReq.fullNames.forEach(full => {
      const short = PLUSHIES[full].short;
      const total = plushDisplay[short] ?? 0;
      const picked = pickAvFor(full, 'plushies');
      const avText = (picked && picked.val != null && picked.src) ? `${picked.val} Av [${picked.src}]` : '—';
      html += `<li class="item-row" style="color:${picked.color}"><span class="item-name">${escapeHtml(short)}</span><span class="item-total">${total}</span><span class="item-av">(${avText})</span><span class="item-loc">${PLUSHIES[full].loc || ''}</span></li>`;
    });
    html += `</ul>`;

    // drugs
    const xanInv = Number(itemsAgg[SPECIAL_DRUG] || 0);
    const yataX = sumAcrossCountriesFor(SPECIAL_DRUG, yataMap);
    const promX = sumAcrossCountriesFor(SPECIAL_DRUG, promMap);
    let xanPicked = { val: null, src: null, color: '#f7b3b3' };
    if (yataX > 0) xanPicked = { val: yataX, src: 'Y', color: colorForPercent(yataX, MAX_ABROAD.drugs) };
    else if (promX > 0) xanPicked = { val: promX, src: 'P', color: colorForPercent(promX, MAX_ABROAD.drugs) };
    else if (yataRaw && Object.keys(yataRaw).length) xanPicked = { val: yataX, src: 'Y', color: colorForPercent(yataX, MAX_ABROAD.drugs) };
    else if (promRaw && Object.keys(promRaw).length) xanPicked = { val: promX, src: 'P', color: colorForPercent(promX, MAX_ABROAD.drugs) };
    const xanAvText = xanPicked.val != null && xanPicked.src ? `${xanPicked.val} Av [${xanPicked.src}]` : '—';
    html += `<div class="group-title">Drugs</div><ul class="item-list"><li class="item-row" style="color:${xanPicked.color}"><span class="item-name">${escapeHtml(SPECIAL_DRUG)}</span><span class="item-total">${xanInv}</span><span class="item-av">(${xanAvText})</span><span class="item-loc">🇿🇦</span></li></ul>`;

    contentEl.innerHTML = html;
  }

  // POLLING
  let pollTimer = null;
  let isRefreshing = false;
  function startPolling() { if (pollTimer) return; pollTimer = setTimeout(() => refreshAll(true), 200); }
  function stopPolling() { if (!pollTimer) return; clearTimeout(pollTimer); pollTimer = null; }

  async function refreshAll(force = false) {
    if (isRefreshing && !force) return;
    isRefreshing = true;
    if (statusEl) statusEl.textContent = 'Fetching...';
    try {
      const tornPromise = fetchTornDisplayInventory().catch(() => null);
      const yataPromise = gmGetJson(YATA_URL).catch(() => null);
      const promPromise = gmGetJson(PROM_URL).catch(() => null);
      const [displayFromApi, yataRaw, promRaw] = await Promise.all([tornPromise, yataPromise, promPromise]);

      let itemsAgg = {};
      if (displayFromApi && Object.keys(displayFromApi).length > 0) itemsAgg = displayFromApi;
      else {
        const dom = fetchDisplayViaDOM();
        itemsAgg = (dom && Object.keys(dom).length) ? dom : (displayFromApi || {});
      }

      renderUI(itemsAgg, yataRaw, promRaw);
      if (statusEl) statusEl.textContent = `Updated: ${new Date().toLocaleTimeString()}`;
    } catch (err) {
      console.warn('refreshAll err', err);
      if (statusEl) statusEl.textContent = 'Update failed';
    } finally {
      isRefreshing = false;
      if (pollTimer !== null) pollTimer = setTimeout(() => refreshAll(false), POLL_INTERVAL_MS);
    }
  }

  let apiKey = GM_getValue('tornAPIKey', null);
  async function askKey(force) {
    if (!apiKey || force) {
      const k = prompt('Enter your Torn API key (needs display + inventory permissions):', apiKey || '');
      if (k) { apiKey = k.trim(); GM_setValue('tornAPIKey', apiKey); }
    }
    if (apiKey) { startPolling(); refreshAll(true); }
  }

  // Layout placement
  let navEl = null;
  function findNavContainer() { if (navEl) return navEl; const selectors = ['#pda-nav', '.pda', '.torn-header', '.header', '#topbar', '.topbar', '.top-nav', '.topbar-inner', '.top-links', '.nav', '.main-nav', '.top-navigation', '.header-top']; for (const sel of selectors) { const el = document.querySelector(sel); if (el) { navEl = el; return el; } } const fallback = document.querySelector('header') || document.querySelector('nav'); navEl = fallback || null; return navEl; }

  let placeDeb = null;
  function placeAboveNavButtons() {
    if (placeDeb) return;
    placeDeb = setTimeout(() => {
      placeDeb = null;
      const nav = findNavContainer();
      const panelEl = document.getElementById(PANEL_ID);
      if (!panelEl) return;
      if (nav) {
        const nRect = nav.getBoundingClientRect();
        const gap = 6;
        const desiredTop = Math.max(window.scrollY + nRect.top - (panelEl.offsetHeight + gap), 6 + window.scrollY);
        const desiredLeft = Math.max(window.scrollX + nRect.left + 4, 6 + window.scrollX);
        panelEl.style.position = 'fixed';
        panelEl.style.left = desiredLeft + 'px';
        panelEl.style.top = desiredTop + 'px';
        panelEl.style.transform = 'none';
        panelEl.style.zIndex = '2147483647';
      } else {
        panelEl.style.left = '30px';
        panelEl.style.top = '42px';
        panelEl.style.zIndex = '999999';
      }
    }, 120);
  }

  let mo = null;
  function startNavObserver() { const target = findNavContainer() || document.body; if (mo) return; mo = new MutationObserver(() => placeAboveNavButtons()); try { mo.observe(target, { childList: true, subtree: true }); } catch (e) { mo.observe(document.body, { childList: true, subtree: false }); } }
  function stopNavObserver() { if (!mo) return; mo.disconnect(); mo = null; }

  buildUI();
  placeAboveNavButtons();
  window.addEventListener('resize', placeAboveNavButtons, { passive: true });
  window.addEventListener('scroll', placeAboveNavButtons, { passive: true });
  startNavObserver();

  if (apiKey) { startPolling(); refreshAll(true); } else { setTimeout(() => askKey(false), 300); }
  window.addEventListener('beforeunload', () => { stopPolling(); stopNavObserver(); });

})();