☰

Cursor.com Usage Tracker

Enhanced usage statistics and analytics for Cursor.com's new frontend, providing detailed insights into usage patterns and billing cycles.

// ==UserScript==
// @name         Cursor.com Usage Tracker
// @author       monnef, v2 by Sonnet 4.0, original by Sonnet 3.5 (via Perplexity and Cursor), some help from Cursor Tab and Cursor Small
// @namespace    http://monnef.eu
// @version      2.0
// @description  Enhanced usage statistics and analytics for Cursor.com's new frontend, providing detailed insights into usage patterns and billing cycles.
// @match        https://www.cursor.com/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_xmlhttpRequest
// @connect      unpkg.com
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @license      AGPL-3.0
// ==/UserScript==

/* CHANGES:
 * 2.0:
 * - Complete rewrite for new Cursor frontend
 * - Auto-extract usage data and reset dates
 * - New card design matching Cursor's updated UI
 * 0.4:
 * - Improved error handling for icon loads
 * 0.3:
 * - Updated to CSP changes causing icons to fail to load
 */

(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 v2]`, ...messages);
  };

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

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

  const sigCls = genCssId('sig');
  const trackerCardCls = genCssId('tracker-card');
  const donationModalCls = genCssId('donation-modal');
  const settingsModalCls = genCssId('settings-modal');
  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 buttonCls = genCssId('button');
  const buttonWhiteCls = genCssId('button-white');
  const errorMessageCls = genCssId('error-message');
  const hrCls = genCssId('hr');
  const highlightValueCls = genCssId('highlight-value');
  const progressBarContainerCls = genCssId('progress-bar-container');
  const progressBarMainCls = genCssId('progress-bar-main');
  const progressBarFillCls = genCssId('progress-bar-fill');
  const progressBarTrackCls = genCssId('progress-bar-track');
  const progressOverflowContainerCls = genCssId('progress-overflow-container');
  const progressOverflowBoxCls = genCssId('progress-overflow-box');

  const colors = Object.freeze({
    cursor: {
      bg: '#16181c',
      cardBg: '#1d1f22',
      text: '#fff', // but opacity 0.8
      textBrandGray300: '#666',
      barColor: '#81A1C1', // bar secondary color is the same as bar color, but opacity 0.1
      blue: '#3864f6',
      blueDarker: '#2e53cc',
      lightGray: '#e5e7eb',
      gray: '#a7a9ac',
      grayDark: '#333333',
      buttonBg: '#242629',
      buttonBorder: '#3a3a3a',
      buttonHover: '#2a2a2d',
    }
  });

  const styles = `
    .${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: ${colors.cursor.bg};
      color: ${colors.cursor.text};
      margin: 15% auto;
      padding: 15px 20px;
      width: 600px;
      border-radius: 12px;
      position: relative;
      border: 1px solid ${colors.cursor.buttonBorder};
    }

    .${modalCloseCls} {
      color: ${colors.cursor.text};
      position: absolute;
      top: 0px;
      right: 10px;
      font-size: 25px;
      font-weight: bold;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s;
    }

    .${modalCloseCls}:hover {
      opacity: 1;
    }

    .${copyButtonCls} {
      background-color: ${colors.cursor.buttonBg};
      color: ${colors.cursor.text};
      border: 1px solid ${colors.cursor.buttonBorder};
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s;
      margin-left: 10px;
      width: 3em;
    }

    .${copyButtonCls}:hover {
      background-color: ${colors.cursor.buttonHover};
    }

    .${buttonCls} {
      background-color: ${colors.cursor.buttonBg};
      color: ${colors.cursor.text};
      border: 1px solid ${colors.cursor.buttonBorder};
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s;
    }

    .${buttonCls}:hover {
      background-color: ${colors.cursor.buttonHover};
    }

    .${buttonWhiteCls} {
      background-color: ${colors.cursor.buttonBg};
      color: ${colors.cursor.text};
      border: none;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 400;
      transition: all 0.2s;
    }

    .${buttonWhiteCls}:hover {
      background-color: ${colors.cursor.buttonHover};
    }

    .${inputCls} {
      background-color: ${colors.cursor.cardBg};
      color: ${colors.cursor.text};
      border: 1px solid ${colors.cursor.buttonBorder};
      padding: 8px 12px;
      width: 100%;
      border-radius: 8px;
      font-size: 14px;
      height: 40px;
    }

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

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

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

    .${sigCls} {
      opacity: 0.3;
      transition: opacity 0.2s ease;
      cursor: pointer;
      font-size: 12px;
      margin-left: 8px;
    }

    .${sigCls}:hover {
      opacity: 0.8;
    }

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

    .${modalContentCls} p {
      margin-bottom: 15px;
    }

    .${highlightValueCls} {
      font-weight: 600;
      opacity: 0.5;
      color: ${colors.cursor.text};
    }

    /* Progress Bar Classes */
    .${progressBarContainerCls} {
      display: flex;
      align-items: center;
      gap: 1px;
      width: 100%;
      height: 4px;
      padding: 8px 0;
    }

    .${progressBarMainCls} {
      flex-grow: 1;
      display: flex;
      gap: 1px;
      height: 4px;
    }

    .${progressBarFillCls} {
      height: 4px;
      /* background-color and width set via inline styles */
    }

    .${progressBarTrackCls} {
      height: 4px;
      flex-grow: 1;
      opacity: 0.1;
      /* background-color set via inline styles */
    }

    .${progressOverflowContainerCls} {
      position: relative;
      width: 0;
      height: 4px;
    }

    .${progressOverflowBoxCls} {
      position: absolute;
      height: 4px;
      margin-right: 2px;
      /* background-color, width, and right position set via inline styles */
    }
  `;

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

  const iconCache = {};

  const createLucideIcon = ({ iconName, size = '16px', invert = false }) => {
    const src = `https://unpkg.com/lucide-static@latest/icons/${iconName}.svg`;
    const img = $('<img>')
      .css({
        width: size,
        height: size,
        display: 'inline-block',
        verticalAlign: 'text-bottom',
        filter: invert ? 'invert(1)' : 'none'
      });

    const cleanupFailedIcon = (reason) => {
      img.remove();
      error(`Failed to load icon: ${iconName}. Reason: ${reason}`);
    };

    if (iconCache[iconName]) {
      img.attr('src', iconCache[iconName]);
      return img;
    }

    GM_xmlhttpRequest({
      method: 'GET',
      url: src,
      onload: function (response) {
        if (response.status >= 200 && response.status < 300) {
          const svg = response.responseText;
          const dataUrl = 'data:image/svg+xml;base64,' + btoa(svg);
          img.attr('src', dataUrl);
          iconCache[iconName] = dataUrl;
        } else {
          cleanupFailedIcon(`HTTP status ${response.status}`);
        }
      },
      onerror: function (error) {
        cleanupFailedIcon(`Network error: ${error.message}`);
      },
      ontimeout: function () {
        cleanupFailedIcon('Request timed out');
      }
    });

    return img;
  };

  const getUsageCard = () => {
    return $('div:contains("Included Requests")').closest('.rounded-xl').first();
  };

  const extractUsageData = () => {
    const usageCard = getUsageCard();
    if (!usageCard.length) {
      log('Usage card not found');
      return null;
    }

    // Extract current usage (e.g., "15")
    const usageSpan = usageCard.find('span').filter(function () {
      return /^\d+$/.test($(this).text().trim());
    }).first();

    // Extract total usage (e.g., "/ 500")
    const totalSpan = usageCard.find('span').filter(function () {
      return /^\/\s*\d+$/.test($(this).text().trim());
    }).first();

    // Extract reset date
    const resetText = usageCard.find('p:contains("Last reset on:")').text();
    const resetMatch = resetText.match(/Last reset on:\s*(.+)/);

    const used = usageSpan.length ? parseInt(usageSpan.text().trim()) : 0;
    const total = totalSpan.length ? parseInt(totalSpan.text().replace(/[^\d]/g, '')) : 500;
    const resetDate = resetMatch ? resetMatch[1].trim() : null;

    log(`Extracted usage data: ${used}/${total}, Reset: ${resetDate}`);
    return { used, total, resetDate };
  };

  const getManualBillingDay = () => {
    return GM_getValue('paymentDay', '');
  };

  const setManualBillingDay = (day) => {
    GM_setValue('paymentDay', day);
  };

  const calculateDaysSinceReset = (resetDateStr) => {
    // Check for manual override first - handle non-string values safely
    const manualDay = getManualBillingDay();
    let resetDate;

    // Safely check if manualDay is a valid string with content
    const manualDayStr = typeof manualDay === 'string' ? manualDay.trim() : String(manualDay || '').trim();

    if (manualDayStr && manualDayStr !== '' && !isNaN(manualDayStr)) {
      // Use manual billing day
      const today = new Date();
      const billingDay = parseInt(manualDayStr, 10);

      if (billingDay >= 1 && billingDay <= 31) {
        resetDate = new Date(today.getFullYear(), today.getMonth(), billingDay);

        // If billing day hasn't occurred this month, use last month
        if (resetDate > today) {
          resetDate.setMonth(resetDate.getMonth() - 1);
        }

        log(`Using manual billing day: ${billingDay}, calculated reset date: ${resetDate}`);
      } else {
        log(`Invalid manual billing day: ${billingDay}, falling back to extracted date`);
      }
    }

    // If no valid manual date or manual date failed, use page-extracted reset date
    if (!resetDate && resetDateStr) {
      try {
        resetDate = new Date(resetDateStr);
        log(`Using extracted reset date: ${resetDate}`);
      } catch (e) {
        error('Failed to parse reset date:', e);
        return null;
      }
    }

    if (!resetDate) {
      log('No reset date available (manual or extracted)');
      return null;
    }

    const today = new Date();
    const diffTime = today - resetDate;
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

    // Estimate next reset (assuming monthly billing)
    const nextReset = new Date(resetDate);
    nextReset.setMonth(nextReset.getMonth() + 1);
    const totalDays = Math.floor((nextReset - resetDate) / (1000 * 60 * 60 * 24));
    const remainingDays = Math.max(0, totalDays - diffDays);

    return { daysPassed: diffDays, totalDays, remainingDays, resetDate, nextReset };
  };

  const createProgressBar = (percentage, color = colors.cursor.barColor) => {
    const actualPercentage = Math.min(percentage, 100); // Cap main bar at 100%
    
    const container = $('<div>').addClass(progressBarContainerCls);

    // Main progress bar (always stays within its bounds)
    const mainBarContainer = $('<div>')
      .addClass(progressBarMainCls)
      .append(
        $('<div>')
          .addClass(progressBarFillCls)
          .css({
            'background-color': color,
            'width': `${actualPercentage}%`
          })
      )
      .append(
        $('<div>')
          .addClass(progressBarTrackCls)
          .css('background-color', color)
      );

    container.append(mainBarContainer);

    // Add overflow boxes if over 100%
    if (percentage > 100) {
      const overflowContainer = $('<div>').addClass(progressOverflowContainerCls);

      // overflow boxes using Array.from to avoid for loop
      Array.from({ length: 2 }, (_, i) =>
        $('<div>')
          .addClass(progressOverflowBoxCls)
          .css({
            'background-color': color,
            'right': `-${(i + 1) * 8 + 4}px`,
            'width': `${8 / (i + 1)}px`
          })
      ).forEach(box => overflowContainer.append(box));

      container.append(overflowContainer);
    }

    return container;
  };

  // Helper function for highlighting values in text
  const createStyledText = (parts) => {
    const container = $('<span>');

    parts.forEach(part => {
      if (typeof part === 'string') {
        container.append(document.createTextNode(part));
      } else if (part.value !== undefined) {
        const valueSpan = $('<span>')
          .addClass(highlightValueCls)
          .text(part.value);
        container.append(valueSpan);
      }
    });

    return container;
  };

  // Helper function for proper pluralization
  const pluralize = (count, singular, plural = null) => {
    const num = parseFloat(count);
    if (num === 1) {
      return singular;
    }
    return plural || singular + 's';
  };

  const createStatsColumn = ({
    mainValue,
    secondaryValue = null,
    progressPercent,
    progressColor,
    title,
    description
  }) => {
    const mainNumberDiv = $('<div>')
      .addClass('flex items-baseline gap-1.5 w-full min-w-0 overflow-hidden')
      .append(
        $('<span>')
          .addClass('[&_b]:md:font-semibold [&_strong]:md:font-semibold text-xl sm:text-2xl leading-tight tracking-tight font-medium flex-shrink-0')
          .text(mainValue)
      );

    // Add secondary value if provided (like "/ 500" or "avg/day")
    if (secondaryValue) {
      mainNumberDiv.append(
        $('<span>')
          .addClass('[&_b]:md:font-semibold [&_strong]:md:font-semibold text-lg sm:text-xl leading-tight tracking-tight font-medium opacity-30 truncate')
          .text(secondaryValue)
      );
    }

    const descriptionElement = $('<p>')
      .addClass('[&_b]:md:font-semibold [&_strong]:md:font-semibold tracking-4 md:text-sm/[1.25rem] text-xs sm:text-sm leading-snug text-brand-gray-300');

    // Handle both string and jQuery element descriptions
    if (typeof description === 'string') {
      descriptionElement.text(description);
    } else {
      descriptionElement.append(description);
    }

    return $('<div>')
      .addClass('flex flex-col gap-4 p-2')
      .append(
        $('<div>')
          .addClass('flex flex-col gap-2 w-full min-w-0')
          .append(mainNumberDiv)
          .append(createProgressBar(progressPercent, progressColor))
          .append(
            $('<span>')
              .addClass('[&_b]:md:font-semibold [&_strong]:md:font-semibold text-sm sm:text-base leading-tight tracking-tight font-medium opacity-80')
              .text(title)
          )
      )
      .append(descriptionElement);
  };

  const createTrackerCard = (usageData, daysInfo) => {
    const { used, total, resetDate } = usageData;
    const usagePercent = (used / total * 100).toFixed(1);

    const header = $('<div>')
      .addClass('flex items-center gap-2 mb-2 ml-2')
      .append(
        $('<h3>')
          .addClass('[&_b]:md:font-semibold [&_strong]:md:font-semibold text-lg sm:text-xl leading-tight tracking-tight font-medium')
          .text('Usage Tracker')
      )
      .append(
        $('<span>')
          .addClass(sigCls)
          .attr('title', 'Enjoying this script? Consider a small donation.')
          .text('by monnef')
      )
      .append(
        $('<button>')
          .addClass(buttonWhiteCls)
          .css({
            'margin-left': 'auto',
            'padding': '6px',
            'width': '32px',
            'height': '32px',
            'display': 'flex',
            'align-items': 'center',
            'justify-content': 'center'
          })
          .attr('title', 'Settings of Usage Tracker UserScript')
          .append(createLucideIcon({ iconName: 'settings', size: '24px', invert: true }))
          .on('click', () => $(`.${settingsModalCls}`).show())
      );

    const gridContainer = $('<div>').addClass('grid grid-cols-1 gap-6 lg:grid-cols-3');

    if (daysInfo) {
      const { daysPassed, totalDays, remainingDays } = daysInfo;
      const daysPercent = (daysPassed / totalDays * 100).toFixed(1);
      const avgPerDay = daysPassed > 0 ? (used / daysPassed).toFixed(1) : '0.0';

      // Calculate theoretical daily allowance based on standard month (30 days)
      const daysInMonth = 30; // Standard month for calculation
      const theoreticalDailyAllowance = total / daysInMonth;
      const avgPerDayPercent = Math.min((avgPerDay / theoreticalDailyAllowance) * 100, 100);

      const optimalUsesPerDay = total / totalDays; // Keep this for the last column

      // Fix the logic for the last column
      const remainingUses = total - used;
      const remainingUsesPerDay = remainingDays > 0 ? remainingUses / remainingDays : 0;
      const remainingUsesPercent = (remainingUsesPerDay / optimalUsesPerDay) * 100;

      // Create Days Elapsed column with styled description
      const daysColumn = createStatsColumn({
        mainValue: daysPassed,
        secondaryValue: `/ ${totalDays}`,
        progressPercent: daysPercent,
        progressColor: '#A3BE8C',
        title: pluralize(daysPassed, 'Day', 'Days') + ' Elapsed',
        description: createStyledText([
          { value: remainingDays },
          ' ',
          pluralize(remainingDays, 'day'),
          ' remaining in current cycle.'
        ])
      });

      // Premium Requests/Day column - using totalUsesPerMonth / daysInMonth
      const usageColumn = createStatsColumn({
        mainValue: avgPerDay,
        secondaryValue: `/ ${theoreticalDailyAllowance.toFixed(1)}`,
        progressPercent: avgPerDayPercent,
        progressColor: colors.cursor.barColor,
        title: 'Premium Requests/Day',
        description: createStyledText([
          'Current average: ',
          { value: avgPerDay },
          ' requests per day since cycle started.'
        ])
      });

      // Create Remaining Uses/Day column - fixed logic
      const metricsColumn = createStatsColumn({
        mainValue: remainingUsesPerDay.toFixed(1),
        secondaryValue: `/ ${optimalUsesPerDay.toFixed(1)}`,
        progressPercent: remainingUsesPercent,
        progressColor: '#D08770',
        title: 'Remaining Uses/Day',
        description: createStyledText([
          'You have ',
          { value: remainingUsesPerDay.toFixed(1) },
          ' uses per day available for the remaining ',
          { value: remainingDays },
          ' ',
          pluralize(remainingDays, 'day'),
          '.'
        ])
      });

      gridContainer
        .append(daysColumn)
        .append(usageColumn)
        .append(metricsColumn);
    }

    const card = $('<div>')
      .addClass('rounded-xl border-brand-neutrals-100 text-brand-foreground dark:border-brand-neutrals-800 dark:shadow-none shadow-[0px_51px_20px_rgba(186,186,186,0.01),0px_29px_17px_rgba(186,186,186,0.05),0px_13px_13px_rgba(186,186,186,0.09),0px_3px_7px_rgba(186,186,186,0.1)] border-0 bg-brand-dashboard-card p-6 dark:bg-brand-dashboard-card')
      .addClass(trackerCardCls)
      .append(header)
      .append(gridContainer);

    return card;
  };

  const createSettingsModal = () => {
    const modal = $('<div>')
      .addClass(modalCls)
      .addClass(settingsModalCls);

    const modalContent = $('<div>')
      .addClass(modalContentCls);

    const closeBtn = $('<span>')
      .addClass(modalCloseCls)
      .text('×')
      .on('click', () => {
        // Clear error message when closing
        errorMessage.hide();
        modal.hide();
      });

    const title = $('<h2>')
      .css({
        'display': 'flex',
        'align-items': 'center',
        'gap': '8px',
        'margin-bottom': '20px'
      })
      .append($('<span>').text('Settings'))
      .append(createLucideIcon({ iconName: 'settings', size: '32px', invert: true }));

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

    const input = $('<input>')
      .addClass(inputCls)
      .attr({
        'type': 'number',
        'min': '1',
        'max': '31'
      })
      .val(getManualBillingDay() || '');

    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 = $('<div>')
      .addClass(errorMessageCls)
      .hide();

    const saveButton = $('<button>')
      .addClass(buttonCls)
      .text('Save')
      .css('margin-right', '10px')
      .on('click', () => {
        const newPaymentDay = parseInt(input.val(), 10);
        if (newPaymentDay && newPaymentDay >= 1 && newPaymentDay <= 31) {
          setManualBillingDay(newPaymentDay);
          log(`Payment day has been set to: ${newPaymentDay}`);
          modal.hide();
          setTimeout(init, 100);
        } else {
          errorMessage.text('Invalid input. Please enter a number between 1 and 31.').show();
        }
      });

    const clearButton = $('<button>')
      .addClass(buttonCls)
      .text('Clear')
      .on('click', () => {
        setManualBillingDay('');
        log('Payment day cleared');
        modal.hide();
        setTimeout(init, 100);
      });

    modalContent
      .append(closeBtn)
      .append(title)
      .append(description)
      .append(input)
      .append(tip)
      .append(errorMessage)
      .append($('<br>'))
      .append(saveButton)
      .append(clearButton);

    modal.append(modalContent);

    // Clear error message when clicking outside
    modal.on('click', (e) => {
      if (e.target === modal[0]) {
        errorMessage.hide();
        modal.hide();
      }
    });

    return modal;
  };

  const createDonationModal = () => {
    const modal = $('<div>')
      .addClass(modalCls)
      .addClass(donationModalCls);

    const modalContent = $('<div>')
      .addClass(modalContentCls);

    const closeBtn = $('<span>')
      .addClass(modalCloseCls)
      .text('×')
      .on('click', () => modal.hide());

    const title = $('<h2>')
      .css({
        'display': 'flex',
        'align-items': 'center',
        'gap': '8px'
      })
      .append($('<span>').text('Donate').addClass('text-2xl'))
      .append(createLucideIcon({ iconName: 'heart-handshake', size: '32px', invert: true }));

    const description = $('<p>')
      .css('opacity', '0.8')
      .text('Thank you for considering a donation! Your support helps maintain and improve this script.');

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

    const bitcoinLabel = $('<p>')
      .css({
        'margin': '15px 0 10px 0',
        'font-weight': '500'
      })
      .text('Bitcoin Address:');

    const bitcoinContainer = $('<div>')
      .css({
        'display': 'flex',
        'align-items': 'center'
      });

    const bitcoinInput = $('<input>')
      .addClass(inputCls)
      .addClass(inputWithButtonCls)
      .attr({
        'type': 'text',
        'value': bitcoinAddress,
        'readonly': true
      });

    const bitcoinCopyBtn = $('<button>')
      .addClass(copyButtonCls)
      .attr('data-copy', bitcoinAddress)
      .append(createLucideIcon({ iconName: 'copy', size: '24px', invert: true }));

    bitcoinContainer.append(bitcoinInput).append(bitcoinCopyBtn);

    const paymentLabel = $('<p>')
      .css({
        'margin': '15px 0 10px 0',
        'font-weight': '500'
      })
      .text('Payment Link:');

    const paymentContainer = $('<div>')
      .css({
        'display': 'flex',
        'align-items': 'center'
      });

    const paymentInput = $('<input>')
      .addClass(inputCls)
      .addClass(inputWithButtonCls)
      .attr({
        'type': 'text',
        'value': bitcoinPaymentLink,
        'readonly': true
      });

    const paymentCopyBtn = $('<button>')
      .addClass(copyButtonCls)
      .attr('data-copy', bitcoinPaymentLink)
      .append(createLucideIcon({ iconName: 'copy', size: '24px', invert: true }));

    paymentContainer.append(paymentInput).append(paymentCopyBtn);

    modalContent
      .append(closeBtn)
      .append(title)
      .append(description)
      .append(hr)
      .append(bitcoinLabel)
      .append(bitcoinContainer)
      .append(paymentLabel)
      .append(paymentContainer);

    modal.append(modalContent);

    // Copy functionality - update to handle icon buttons
    modal.find(`.${copyButtonCls}`).on('click', async function () {
      const button = $(this);
      const textToCopy = button.attr('data-copy');
      const originalContent = button.html();

      try {
        await navigator.clipboard.writeText(textToCopy);
        button.html(createLucideIcon({ iconName: 'check', size: '16px', invert: true })[0].outerHTML);
        setTimeout(() => button.html(originalContent), 2000);
      } catch (err) {
        error('Clipboard write failed:', err);
        button.html(createLucideIcon({ iconName: 'x', size: '16px', invert: true })[0].outerHTML);
        setTimeout(() => button.html(originalContent), 2000);
      }
    });

    // Close on outside click
    modal.on('click', (e) => {
      if (e.target === modal[0]) modal.hide();
    });

    return modal;
  };

  const init = () => {
    // Only run on dashboard page
    if (!window.location.pathname.includes('/dashboard')) {
      log('Not on dashboard page, retrying in 1 second...');
      setTimeout(init, 1000);
      return;
    }

    log('Initializing on dashboard page');

    // Remove existing tracker card
    $(`.${trackerCardCls}`).remove();

    const usageData = extractUsageData();
    if (!usageData) {
      log('Could not extract usage data, retrying in 1 second...');
      setTimeout(init, 1000);
      return;
    }

    const daysInfo = calculateDaysSinceReset(usageData.resetDate);
    const trackerCard = createTrackerCard(usageData, daysInfo);

    // Insert after the original usage card
    const originalCard = getUsageCard();
    if (originalCard.length) {
      originalCard.after(trackerCard);
      log('Usage tracker card inserted successfully');

      // Add donation modal click handler
      trackerCard.find(`.${sigCls}`).on('click', () => {
        $(`.${donationModalCls}`).show();
      });
    } else {
      error('Could not find original usage card to insert tracker after');
      // Retry in a bit
      setTimeout(init, 1000);
    }
  };

  // Initialize when document is ready
  $(document).ready(() => {
    log('Usage Tracker v2 loaded');

    // Add styles
    $('head').append($('<style>').text(styles));

    // Preload icons
    ['settings', 'heart-handshake', 'copy', 'check', 'x']
      .map(iconName => createLucideIcon({ iconName }))
      .forEach(icon => $('body').append(icon))
      ;

    // Add modals to body
    $('body')
      .append(createDonationModal())
      .append(createSettingsModal());

    // Start the continuous check for dashboard page
    setTimeout(init, 1000);

    // Re-run when navigation happens (SPA)
    let lastUrl = location.href;
    new MutationObserver(() => {
      const url = location.href;
      if (url !== lastUrl) {
        lastUrl = url;
        log('URL changed, reinitializing');
        setTimeout(init, 500);
      }
    }).observe(document, { subtree: true, childList: true });

    // Debug helper - tests
    unsafeWindow.usageTracker = {
      reinit: init,
      extractUsageData: extractUsageData,
      calculateDaysSinceReset: calculateDaysSinceReset,
      getManualBillingDay: getManualBillingDay,
      setManualBillingDay: setManualBillingDay,
      createLucideIcon: createLucideIcon,
      colors: colors,
      version: '2.0'
    };
  });
})();