☰

Cursor.com Usage Tracker

Tracks and displays the usage statistics and payment cycles for Premium models on Cursor.com, helping users monitor their subscriptions and usage limits.

// ==UserScript==
// @name         Cursor.com Usage Tracker
// @author       monnef, Sonnet 3.5 (via Perplexity and Cursor), some help from Cursor Tab and Cursor Small
// @namespace    http://monnef.eu
// @version      0.2
// @description  Tracks and displays the usage statistics and payment cycles for Premium models on Cursor.com, helping users monitor their subscriptions and usage limits.
// @match        https://www.cursor.com/settings
// @grant        GM_getValue
// @grant        GM_setValue
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @license      AGPL-3.0
// ==/UserScript==

(function () {
  'use strict';

  const $ = jQuery.noConflict();

  const $c = (cls, parent) => $(`.${cls}`, parent);
  const $i = (id, parent) => $(`#${id}`, parent);

  $.fn.nthParent = function (n) {
    return this.parents().eq(n - 1);
  };

  const log = (...messages) => {
    console.log(`[UsageTracker]`, ...messages);
  };

  const error = (...messages) => {
    console.error(`[UsageTracker]`, ...messages);
  };

  const genCssId = name => `ut-${name}`;

  const sigCls = genCssId('sig');
  const buttonCls = genCssId('button');
  const buttonWhiteCls = genCssId('button-white');
  const buttonDarkCls = genCssId('button-dark');
  const mainCaptionCls = genCssId('main-caption');
  const modalCls = genCssId('modal');
  const modalContentCls = genCssId('modal-content');
  const modalCloseCls = genCssId('modal-close');
  const copyButtonCls = genCssId('copy-button');
  const inputCls = genCssId('input');
  const inputWithButtonCls = genCssId('input-with-button');
  const errorMessageCls = genCssId('error-message');
  const settingsModalCls = genCssId('settings-modal');
  const donationModalCls = genCssId('donation-modal');
  const hrCls = genCssId('hr');

  const hSpaceSmCls = genCssId('h-space-sm');
  const hSpaceMdCls = genCssId('h-space-md');
  const hSpaceLgCls = genCssId('h-space-lg');

  const flexCenterCls = genCssId('flex-center');
  const flexRightCls = genCssId('flex-right');
  const flexBetweenCls = genCssId('flex-between');

  const colors = {
    cursor: {
      blue: '#3864f6',
      blueDarker: '#2e53cc',
      lightGray: '#e5e7eb',
      gray: '#a7a9ac',
      grayDark: '#333333',
    }
  };

  const styles = `
    .${hSpaceSmCls} {
      height: 5px;
    }

    .${hSpaceMdCls} {
      height: 10px;
    }

    .${hSpaceLgCls} {
      height: 20px;
    }

    .${flexCenterCls} {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .${flexRightCls} {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .${flexBetweenCls} {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .${sigCls} {
      font-size: 0.75rem;
      color: ${colors.cursor.gray};
      margin-left: 0.75rem;
      opacity: 0.2;
      transition: opacity 0.1s ease-in-out;
      cursor: pointer;
    }
    .${sigCls}:hover {
      opacity: 1;
    }

    .${buttonCls}, .${buttonWhiteCls}, .${buttonDarkCls} {
      background-color: ${colors.cursor.blue};
      color: white;
      font-size: 14px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      padding: 4.25px 8px;
      font-weight: 400;
    }
    .${buttonCls}:hover {
      background-color: ${colors.cursor.blueDarker};
    }

    .${buttonWhiteCls} {
      background-color: white;
      color: black;
      border: 1px solid ${colors.cursor.lightGray};
      padding: 3px 8px;
    }
    .${buttonWhiteCls}:hover {
      background-color: ${colors.cursor.lightGray};
    }

    .${buttonDarkCls} {
      background-color: black;
      color: white;
      border: 1px solid black;
      padding: 3px 8px;
    }
    .${buttonDarkCls}:hover {
      background-color: white;
      color: black;
    }

    .${modalCls} {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(5px) contrast(0.5);
    }

    .${modalContentCls} {
      background-color: black;
      color: white;
      margin: 15% auto;
      padding: 15px 20px;
      width: 600px;
      border-radius: 4px;
      position: relative;
    }

    .${modalCloseCls} {
      color: white;
      position: absolute;
      top: 0px;
      right: 10px;
      font-size: 25px;
      font-weight: bold;
      cursor: pointer;
    }

    .${modalCloseCls}:hover {
      color: ${colors.cursor.lightGray};
    }

    .${copyButtonCls} {
      margin-left: 10px;
      width: 5em;
    }

    .${modalContentCls} h2 {
      margin-bottom: 20px;
    }

    .${modalContentCls} p {
    }

    .${modalContentCls} hr {
      border: 0;
      height: 1px;
      background-color: ${colors.cursor.grayDark};
      margin: 10px 0;
    }

    .${inputCls} {
      background-color: white;
      color: black;
      border: 1px solid ${colors.cursor.lightGray};
      padding: 5px;
      width: 100%;
      border-radius: 4px;
      font-size: 14px;
    }

    .${inputWithButtonCls} {
      width: calc(100% - 5em - 10px);
    }

    .${errorMessageCls} {
      color: #ff4d4f;
      font-size: 14px;
      margin-top: 5px;
    }

    .${hrCls} {
      border: 0;
      height: 1px;
      background-color: ${colors.cursor.grayDark};
      margin: 10px 0;
    }
  `;

  const genHr = () => $('<hr>').addClass(hrCls);

  const getUsageCard = () => $('.col-span-2 > div:has(h2:contains("Usage"))');

  const decorateUsageCard = () => {
    if ($c(mainCaptionCls).length > 0) return true;

    const usageCard = getUsageCard();

    if (!usageCard.length) {
      log('Usage card not found. Not decorating.');
      return false;
    }
    log('Usage card found. Decorating.', usageCard);

    const caption = $('<div>')
      .addClass('font-medium gt-standard-mono text-xl/[1.375rem] font-semibold -tracking-4 md:text-2xl/[1.875rem]')
      .addClass(mainCaptionCls)
      .text('Usage Tracker');
    const sig = $('<span>')
      .addClass(sigCls)
      .text('by monnef')
      .attr('title', 'Enjoying this script? Consider a small donation.')
      ;
    caption.append(sig);
    usageCard.append(genHr(), caption);
    addSettingsButton(caption);

    sig.click(() => {
      log('Signature clicked, showing donation modal');
      $c(donationModalCls).show();
    });

    if ($c(donationModalCls).length === 0) {
      $('body').append(createDonationModal());
    }

    // Add message for unset billing date
    const paymentDay = GM_getValue('paymentDay');
    if (!paymentDay) {
      const message = $('<div>')
        .addClass(getSettingsTextClassName())
        .html('Billing date not set. Please set it in the <strong>Usage Tracker settings</strong> to see usage statistics (top right of this section).');
      usageCard.append(
        // $('<div>').addClass(hSpaceMdCls),
        message
      );
    }

    return true;
  };

  const addUsageTracker = () => {
    const paymentDay = GM_getValue('paymentDay');
    log('Checking payment day.');

    if (!paymentDay) {
      log('Payment day not set. Not adding tracker.');
      return false;
    }

    log(`Payment day is set to: ${paymentDay}`);

    const usageData = getUsageData();
    if (usageData.used !== undefined && usageData.total !== undefined) {
      log(`Retrieved usage data: ${JSON.stringify(usageData)}`);
      displayTrackerData(usageData, paymentDay);
      return true;
    } else {
      log('Failed to retrieve usage data.');
      return false;
    }
  };

  const getPremiumModelsLabel = () => $('span:contains("Premium models")');

  /**
   * @returns {{ used: number, total: number }}
   */
  const getUsageData = () => {
    log('Attempting to find usage data...');
    const usageElement = getPremiumModelsLabel().siblings('span');

    if (usageElement.length === 0) {
      log('Usage element not found.');
      return {};
    }

    const usageText = usageElement.text();
    log(`Extracted text: "${usageText}"`);

    const regex = /(\d+) \/ (\d+)/;
    const matches = usageText.match(regex);
    if (matches && matches.length === 3) {
      const used = parseInt(matches[1], 10);
      const total = parseInt(matches[2], 10);
      log(`Parsed values - Used: ${used}, Total: ${total}`);
      return { used, total };
    } else {
      log('Regex did not match the extracted text.');
      return {};
    }
  };

  /**
   * @param {{ used: number, total: number }} usageData
   * @param {number} paymentDay
   * @returns {void}
   */
  const displayTrackerData = (usageData, paymentDay) => {
    const daysInfo = calculateDaysPassed({ today: new Date(), paymentDay });
    const hueShift = 170;

    if (daysInfo) {
      const { premiumRequestsPerDay, remainingUsesPerDay } = calculateMetrics(usageData, daysInfo);
      const progressBar = createProgressBar({
        value: daysInfo.daysPassed,
        max: daysInfo.totalDays,
        label: 'Days',
        rightLabel: `${daysInfo.daysPassed} / ${daysInfo.totalDays}`,
        textMiddle: ' days passed out of ',
        textAfter: ' days in the current billing cycle.',
        hueShift,
      });
      const usageCard = getUsageCard();
      usageCard.append(progressBar);
      log('Progress bar added to the page');

      // Create new progress bars for the new metrics
      const premiumRequestsBar = createProgressBar({
        value: premiumRequestsPerDay.toFixed(2),
        max: (usageData.total / daysInfo.totalDays).toFixed(2),
        label: 'Premium Requests/Day',
        rightLabel: `${premiumRequestsPerDay.toFixed(2)} / ${(usageData.total / daysInfo.totalDays).toFixed(2)}`,
        textBefore: 'So far you have used ',
        textMiddle: ' requests per day on average.',
        hideMax: true,
        hueShift,
      });

      const remainingUsesBar = createProgressBar({
        value: remainingUsesPerDay.toFixed(2),
        max: (usageData.total / daysInfo.totalDays).toFixed(2),
        label: 'Remaining Uses/Day',
        rightLabel: `${remainingUsesPerDay.toFixed(2)} / ${(usageData.total / daysInfo.totalDays).toFixed(2)}`,
        textBefore: 'You have ',
        textMiddle: ' uses per day available for the remaining ',
        textAfter: ` days.`,
        overrideMax: `${daysInfo.totalDays - daysInfo.daysPassed}`,
        hueShift,
      });

      // Append new progress bars to the usage card
      usageCard.append(premiumRequestsBar, remainingUsesBar);
    }
  };

  /**
   * @param {{ used: number, total: number }} usageData
   * @param {{ daysPassed: number, totalDays: number }} daysInfo
   * @returns {{ premiumRequestsPerDay: number, remainingUsesPerDay: number }}
   */
  const calculateMetrics = (usageData, daysInfo) => {
    const premiumRequestsPerDay = daysInfo.daysPassed > 0 
      ? (usageData.used / daysInfo.daysPassed) 
      : 0; // Avoid division by zero
    const remainingUsesPerDay = (usageData.total - usageData.used) / (daysInfo.totalDays - daysInfo.daysPassed || 1); // Prevent division by zero

    return { premiumRequestsPerDay, remainingUsesPerDay };
  };

  /**
   * @param {{ today: Date, paymentDay: number }} params
   * @returns {{ daysPassed: number, totalDays: number }}
   */
  const calculateDaysPassed = ({ today, paymentDay, disableLog = false }) => {
    const currentMonth = today.getMonth();
    const currentYear = today.getFullYear();
    const lastPaymentDate = new Date(currentYear, currentMonth, paymentDay);

    if (today < lastPaymentDate) {
      lastPaymentDate.setMonth(lastPaymentDate.getMonth() - 1);
    }

    const daysPassed = Math.floor((today - lastPaymentDate) / (1000 * 60 * 60 * 24));
    const nextPaymentDate = new Date(lastPaymentDate);
    nextPaymentDate.setMonth(nextPaymentDate.getMonth() + 1);
    const totalDays = Math.floor((nextPaymentDate - lastPaymentDate) / (1000 * 60 * 60 * 24));

    const res = { daysPassed, totalDays, progress: daysPassed / totalDays };
    if (!disableLog) {
      log(`Calculated days - Passed: ${res.daysPassed}, Total: ${res.totalDays}, Progress: ${res.progress}`);
    }
    return res;
  };

  const TEST_calculateDaysPassed = () => {
    const testCases = [
      { today: new Date(2023, 9, 15), paymentDay: 15, expected: { daysPassed: 0, totalDays: 31 } },
      { today: new Date(2023, 9, 16), paymentDay: 15, expected: { daysPassed: 1, totalDays: 31 } },
      { today: new Date(2023, 10, 1), paymentDay: 15, expected: { daysPassed: 17, totalDays: 31 } },
      { today: new Date(2023, 10, 16), paymentDay: 15, expected: { daysPassed: 1, totalDays: 30 } },
      { today: new Date(2023, 9, 1), paymentDay: 15, expected: { daysPassed: 16, totalDays: 30 } },
      { today: new Date(2023, 12, 29), paymentDay: 2, expected: { daysPassed: 27, totalDays: 31 } },
    ];

    return testCases.every(({ today, paymentDay, expected }) => {
      const result = calculateDaysPassed({ today, paymentDay, disableLog: true });
      const passed = result.daysPassed === expected.daysPassed && result.totalDays === expected.totalDays;

      if (!passed) {
        log(`Test failed for today: ${today.toDateString()}, paymentDay: ${paymentDay}. Expected: ${JSON.stringify(expected)}, got: ${JSON.stringify(result)}`);
      }

      return passed;
    });
  };

  const TEST_calculateMetrics = () => {
    const testCases = [
      { usageData: { used: 10, total: 100 }, daysInfo: { daysPassed: 5, totalDays: 30 }, expected: { premiumRequestsPerDay: 2, remainingUsesPerDay: 3.6 } },
      { usageData: { used: 0, total: 100 }, daysInfo: { daysPassed: 0, totalDays: 30 }, expected: { premiumRequestsPerDay: 0, remainingUsesPerDay: 3.3333333333333335 } },
      { usageData: { used: 50, total: 100 }, daysInfo: { daysPassed: 10, totalDays: 30 }, expected: { premiumRequestsPerDay: 5, remainingUsesPerDay: 2.5 } },
    ];

    return testCases.every(({ usageData, daysInfo, expected }) => {
      const result = calculateMetrics(usageData, daysInfo);
      const passed = result.premiumRequestsPerDay === expected.premiumRequestsPerDay && result.remainingUsesPerDay === expected.remainingUsesPerDay;

      if (!passed) {
        log(`Test failed for usageData: ${JSON.stringify(usageData)}, daysInfo: ${JSON.stringify(daysInfo)}. Expected: ${JSON.stringify(expected)}, got: ${JSON.stringify(result)}`);
      }

      return passed;
    });
  };

  const TEST = () => {
    const tests = {
      calculateDaysPassed: TEST_calculateDaysPassed(),
      calculateMetrics: TEST_calculateMetrics(),
    };
    const allPassed = Object.values(tests).every(testRes => testRes);
    if (allPassed) {
      log('TEST: All tests passed successfully.', tests);
    } else {
      log('TEST: Some tests failed. Check the logs above for details.', tests);
    }
  };

  /**
   * @returns {string|null}
   */
  const getClassNameByPrefix = prefix => {
    const classes = $('[class]')
      .map((_, element) => $(element).attr('class').match(new RegExp(`\\b${prefix}\\S+`, 'g')) || [])
      .get();

    if (classes.length === 0) {
      log('No classes found');
      return null;
    }

    const firstClass = classes[0];
    if (classes.some(cls => cls !== firstClass)) {
      error(`Classes are not the same: ${classes.join(', ')}`);
    }

    return firstClass;
  };

  /**
   * @returns {string|null}
   */
  const getSettingsTextClassName = () => '[&_b]:md:font-semibold font-mono text-sm/[0.875rem] tracking-4 md:text-sm/[1.25rem]';


  /**
   * @returns {string}
   */
  const getInfoNumberClassName = () => 'font-bold inline';

  /**
   * @param {{ value: number, max: number, label: string, rightLabel: string, textBefore?: string, textMiddle?: string, textAfter?: string, hideMax?: boolean, overrideMax?: string, hueShift?: number }} params
   * @returns {string}
   */
  const createProgressBar = ({ value, max, label, rightLabel, textBefore = '', textMiddle = '', textAfter = '', hideMax = false, overrideMax, hueShift }) => {
    const percentage = (value / max) * 100;
    return `<div class='flex flex-col gap-1.5 flex-1'>
              <div class='flex items-center justify-between gap-2'>
                  <div class='gt-standard-mono text-sm font-medium flex items-center gap-1'>
                      <span class='truncate'>${label}</span>
                  </div>
                  <div class='font-mono text-sm font-semibold truncate'>${rightLabel}</div>
              </div>
              <div class='w-full rounded-full bg-brand-borders overflow-hidden' style='height: 6px;'>
                  <div class='h-full' style='background-color: rgb(99, 161, 26); width: ${percentage.toFixed(2)}%; filter: hue-rotate(${hueShift ?? 0}deg);' title='${percentage.toFixed(0)}%'></div>
              </div>
              <div class='flex items-center gap-1'>
                  <div class='${getSettingsTextClassName()}'>
                      ${textBefore}<span class='${getInfoNumberClassName()}'>${value}</span>${textMiddle}<span class='${getInfoNumberClassName()}' ${hideMax ? 'style="display: none;"' : ''}>${overrideMax ? overrideMax : max}</span>${textAfter}
                  </div>
              </div>
          </div>`;
  };

  /**
   * @param {{ className: string, title: string, content: JQuery<HTMLElement> }} params
   * @returns {JQuery<HTMLElement>}
   */
  const createModal = ({ className, title, titleIconAfter, content }) => {
    const modal = $('<div>').addClass(modalCls).addClass(className);
    const modalContent = $('<div>').addClass(modalContentCls);
    const closeButton = $('<span>').addClass(modalCloseCls).text('×');

    const titleElement = $('<h1>')
      .addClass('text-4xl gt-standard-mono font-medium')
      .text(title);

    if (titleIconAfter) {
      titleElement.append(
        createLucideIcon({ iconName: titleIconAfter, size: '32px', invert: true })
          .css({ marginLeft: '10px' })
      );
    }
    ;

    modalContent.append(
      closeButton,
      titleElement,
      $('<div>').addClass(hSpaceMdCls),
      content
    );
    modal.append(modalContent);

    closeButton.click(() => modal.hide());
    $(window).click(event => {
      if (event.target === modal[0]) {
        modal.hide();
      }
    });

    return modal;
  };

  const createSettingsModal = () => {
    const subtitle = $('<p>').text('Enter the day of the month when you are billed (1-31):');

    const input = $('<input>')
      .addClass(inputCls)
      .attr('type', 'number')
      .attr('min', '1')
      .attr('max', '31')
      .val(GM_getValue('paymentDay') || '');
    
    const tip = $('<p>')
      .addClass('text-sm text-gray-500 mt-1')
      .text('You can find your billing date via the "Manage Subscription" button on the left.');

    const errorMessage = $('<p>').addClass(errorMessageCls).hide();

    const saveAndReload = () => {
      const newPaymentDay = parseInt(input.val(), 10);
      if (newPaymentDay && newPaymentDay >= 1 && newPaymentDay <= 31) {
        GM_setValue('paymentDay', newPaymentDay);
        log(`Payment day has been set to: ${newPaymentDay}`);
        $c(settingsModalCls).hide();
        location.reload(); // Refresh to update tracker
      } else {
        errorMessage.text('Invalid input. Please enter a number between 1 and 31.').show();
      }
    };

    const saveButton = $('<button>')
      .addClass(buttonCls)
      .text('Save & Reload')
      .click(saveAndReload);

    // Add keypress event listener to the input
    input.on('keypress', (e) => {
      if (e.which === 13) { // 13 is the Enter key code
        saveAndReload();
      }
    });

    const madeByText = $('<p>').append(
      'Made with ',
      createLucideIcon({ iconName: 'heart', size: '14px', invert: true }),
      ' by monnef & Sonnet 3.5'
    );

    const content = $('<div>').append(
      subtitle,
      $('<div>').addClass(hSpaceSmCls),
      input,
      tip,
      errorMessage,
      $('<div>').addClass(hSpaceLgCls),
      $('<div>').addClass(flexBetweenCls).append(madeByText, saveButton)
    );

    const modal = createModal({
      className: settingsModalCls,
      title: 'Usage Tracker Settings',
      content: content
    });

    return modal;
  };

  const createDonationModal = () => {
    const subtitle = $('<p>').text('Thank you for considering a donation! Your support is appreciated.');

    const createCopyButton = (text, successMessage) => {
      const button = $('<button>')
        .addClass(buttonDarkCls)
        .addClass(copyButtonCls)
        .text('Copy');

      button.click(async () => {
        try {
          await navigator.clipboard.writeText(text);
          button.text(successMessage);
          setTimeout(() => button.text('Copy'), 2000);
        } catch (err) {
          error('Clipboard write failed:', err);
          button.text('Failed');
          setTimeout(() => button.text('Copy'), 2000);
        }
      });

      return button;
    };

    const addressText = $('<p>').text('Bitcoin Address:');
    const addressInput = $('<input>')
      .addClass(inputCls)
      .addClass(inputWithButtonCls)
      .attr('type', 'text')
      .val(bitcoinAddress)
      .prop('readonly', true);
    const copyAddressButton = createCopyButton(bitcoinAddress, 'Copied!');

    const paymentLinkText = $('<p>').text('Payment link:');
    const paymentLinkInput = $('<input>')
      .addClass(inputCls)
      .addClass(inputWithButtonCls)
      .attr('type', 'text')
      .val(bitcoinPaymentLink)
      .prop('readonly', true);
    const copyPaymentLinkButton = createCopyButton(bitcoinPaymentLink, 'Copied!');

    const content = $('<div>').append(
      subtitle,
      genHr(),
      addressText,
      addressInput,
      copyAddressButton,
      genHr(),
      paymentLinkText,
      paymentLinkInput,
      copyPaymentLinkButton,
      $('<div>').addClass(hSpaceMdCls)
    );

    return createModal({
      className: donationModalCls,
      title: 'Donate',
      titleIconAfter: 'heart-handshake',
      content: content
    });
  };

  const createLucideIcon = ({ iconName, size = '16px', invert = false }) => {
    return $('<img>')
      .attr('src', `https://unpkg.com/lucide-static@latest/icons/${iconName}.svg`)
      .css({
        width: size,
        height: size,
        display: 'inline-block',
        verticalAlign: 'text-bottom',
        filter: invert ? 'invert(1)' : 'none'
      });
  };
  const addSettingsButton = (mainCaption) => {
    const settingsButton = $('<button>')
      .css({
        position: 'absolute',
        top: '-10px',
        right: '0px',
        height: '29.4px',
        width: '29.4px',
        padding: '0px',
      })
      .addClass(buttonWhiteCls)
      .attr('title', 'Usage Tracker settings')
      .append(createLucideIcon({ iconName: 'settings' }));

    settingsButton.click(() => {
      log('Usage Tracker settings button clicked.');
      $c(settingsModalCls).show();
      const inputField = $c(settingsModalCls).find(`.${inputCls}`);
      inputField.focus();
    });

    const buttonWrapper = $('<div>').css({ position: 'relative', height: '0px' });
    buttonWrapper.append(settingsButton);

    if (mainCaption.length > 0) {
      mainCaption.prepend(buttonWrapper);
      log('Settings button wrapper added to the page');
    } else {
      log('Main caption not found, settings button not added');
    }
  };

  const state = {
    addingUsageTrackerSucceeded: false,
    addingUsageTrackerAttempts: 0,
  };

  const ATTEMPTS_LIMIT = 10;
  const ATTEMPTS_INTERVAL = 250;
  const ATTEMPTS_MAX_DELAY = 3000;

  /**
   * @returns {void}
   */
  const main = () => {
    const scheduleNextAttempt = () => {
      if (!state.addingUsageTrackerSucceeded && state.addingUsageTrackerAttempts < ATTEMPTS_LIMIT) {
        const delay = Math.min(ATTEMPTS_INTERVAL * (2 ** (state.addingUsageTrackerAttempts - 1)), ATTEMPTS_MAX_DELAY);
        log(`Attempt ${state.addingUsageTrackerAttempts} of ${ATTEMPTS_LIMIT} failed. Retrying in ${delay}ms...`);
        setTimeout(main, delay);
      } else if (state.addingUsageTrackerSucceeded) {
        log(`Attempt ${state.addingUsageTrackerAttempts} of ${ATTEMPTS_LIMIT} succeeded.`);
      } else {
        log(`Attempt ${state.addingUsageTrackerAttempts} of ${ATTEMPTS_LIMIT} failed. No more attempts.`);
      }
    };

    const decorationOkay = decorateUsageCard();
    const paymentDay = GM_getValue('paymentDay');

    if (decorationOkay && !paymentDay) {
      log('Payment day not set. Not adding tracker.');
      return;
    }

    if (!decorationOkay) {
      log('Decoration failed. Try again later.');
      scheduleNextAttempt();
      state.addingUsageTrackerAttempts++;
      return;
    }

    state.addingUsageTrackerSucceeded = addUsageTracker();
    state.addingUsageTrackerAttempts++;

    if (state.addingUsageTrackerAttempts === 1) {
      const paymentDay = GM_getValue('paymentDay');

      if (!paymentDay) {
        log('Payment day not set. Not adding tracker.');
        return;
      }
    }

    scheduleNextAttempt();
  };

  const bitcoinAddress = 'bc1qr7crhydmp68qpa0gumuf2h6jcvdtta4wju49r7';
  const bitcoinPaymentLink = `bitcoin:${bitcoinAddress}`;

  $(document).ready(() => {
    log('Script started');
    unsafeWindow.ut = {
      jq: $,
      resetSettings: () => {
        GM_setValue('paymentDay', undefined);
        location.reload();
      }
    };
    $('head').append($('<style>').text(styles));
    $('body').append(createSettingsModal());
    $('body').append(createDonationModal());
    setTimeout(() => {
      TEST();
      main();
    }, ATTEMPTS_INTERVAL);
  });
})();