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);
  });
})();