Displays Grok rate limit on screen based on selected model/mode
// ==UserScript==
// @name Grok Rate Limit Display
// @namespace http://tampermonkey.net/
// @version 2.6
// @description Displays Grok rate limit on screen based on selected model/mode
// @author Blankspeaker, Originally ported from CursedAtom's chrome extension
// @match https://grok.com/*
// @match https://grok.x.ai/*
// @match https://x.com/*
// @match https://twitter.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
console.log('Grok Rate Limit Script loaded');
// Variable to store the last known rate limit values
let lastRateLimit = { remainingQueries: null, totalQueries: null };
// Function to remove any existing rate limit display
function removeExistingRateLimit() {
const existing = document.getElementById('grok-rate-limit');
if (existing) {
existing.remove();
}
}
// Function to normalize model names (lowercase, hyphenated)
function normalizeModelName(modelName) {
return modelName.toLowerCase().replace(/\s+/g, '-');
}
// Function to update or inject the rate limit display
function updateRateLimitDisplay(queryBar, response) {
let rateLimitContainer = document.getElementById('grok-rate-limit');
// If no container exists, create and insert it
if (!rateLimitContainer) {
const bottomBar = queryBar.querySelector('.flex.gap-1\\.5.absolute.inset-x-0.bottom-0');
if (!bottomBar) {
console.log('Bottom bar not found');
return;
}
const attachButton = bottomBar.querySelector('button[aria-label="Attach"]');
if (!attachButton) {
console.log('Attach button not found');
return;
}
rateLimitContainer = document.createElement('div');
rateLimitContainer.id = 'grok-rate-limit';
rateLimitContainer.className = 'inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-60 disabled:cursor-not-allowed [&_svg]:duration-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:-mx-0.5 select-none border-border-l2 text-fg-primary hover:bg-button-ghost-hover disabled:hover:bg-transparent h-10 px-3.5 py-2 text-sm rounded-full group/rate-limit transition-colors duration-100 relative overflow-hidden border cursor-pointer';
rateLimitContainer.style.opacity = '0.8';
rateLimitContainer.style.transition = 'opacity 0.1s ease-in-out';
// Add click event to update on click
rateLimitContainer.addEventListener('click', () => {
fetchAndUpdateRateLimit(queryBar);
});
// Add a gauge SVG icon
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '18');
svg.setAttribute('height', '18');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('fill', 'none');
svg.setAttribute('class', 'stroke-[2] text-fg-secondary group-hover/rate-limit:text-fg-primary transition-colors duration-100');
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', '12');
circle.setAttribute('cy', '12');
circle.setAttribute('r', '8');
circle.setAttribute('stroke', 'currentColor');
circle.setAttribute('stroke-width', '2');
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M12 12L12 6');
path.setAttribute('stroke', 'currentColor');
path.setAttribute('stroke-width', '2');
path.setAttribute('stroke-linecap', 'round');
svg.appendChild(circle);
svg.appendChild(path);
rateLimitContainer.appendChild(svg);
// Add a span for the text
const textSpan = document.createElement('span');
rateLimitContainer.appendChild(textSpan);
attachButton.insertAdjacentElement('afterend', rateLimitContainer);
}
// Update text based on response
const textSpan = rateLimitContainer.querySelector('span');
if (response.error) {
// If there's an error, use the last known rate limit values if available
if (lastRateLimit.remainingQueries !== null && lastRateLimit.totalQueries !== null) {
textSpan.textContent = `${lastRateLimit.remainingQueries}/${lastRateLimit.totalQueries}`;
} else {
// If no previous data exists, show a neutral message without "Error"
textSpan.textContent = 'Unavailable';
}
} else {
const { remainingQueries, totalQueries } = response;
// Store the latest rate limit values
lastRateLimit.remainingQueries = remainingQueries;
lastRateLimit.totalQueries = totalQueries;
textSpan.textContent = `${remainingQueries}/${totalQueries}`;
}
}
// Function to fetch and update rate limit
function fetchAndUpdateRateLimit(queryBar) {
if (!queryBar || !document.body.contains(queryBar)) {
console.log('Query bar not valid, skipping update');
return;
}
// Detect current model from the UI
let modelName = 'grok-4'; // Updated default to grok-4 as of 2025
const modelSpan = queryBar.querySelector('span.inline-block.text-primary');
if (modelSpan) {
const modelText = modelSpan.textContent.trim();
modelName = normalizeModelName(modelText);
}
// Determine requestKind based on model
let requestKind = 'DEFAULT';
if (modelName === 'grok-3') {
const thinkButton = queryBar.querySelector('button[aria-label="Think"]');
if (thinkButton && thinkButton.getAttribute('aria-pressed') === 'true') {
requestKind = 'REASONING';
} else {
let searchButton = queryBar.querySelector('button[aria-label^="Deep"]');
if (searchButton && searchButton.getAttribute('aria-pressed') === 'true') {
const modeSpan = searchButton.querySelector('span');
if (modeSpan) {
const modeText = modeSpan.textContent.trim();
if (modeText === 'DeepSearch') {
requestKind = 'DEEPSEARCH';
} else if (modeText === 'DeeperSearch') {
requestKind = 'DEEPERSEARCH';
}
}
}
}
}
fetch(window.location.origin + '/rest/rate-limits', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
requestKind: requestKind,
modelName: modelName,
}),
credentials: 'include',
})
.then((res) => {
if (!res.ok) {
if (res.status === 401 || res.status === 403) {
throw new Error('Authentication required: Please sign in.');
}
throw new Error(`HTTP error: Status ${res.status}`);
}
return res.json();
})
.then((data) => {
if (queryBar && document.body.contains(queryBar)) {
updateRateLimitDisplay(queryBar, data);
}
})
.catch((err) => {
if (queryBar && document.body.contains(queryBar)) {
updateRateLimitDisplay(queryBar, { error: err.message });
}
});
}
// Function to setup or cleanup Grok-3 specific observers
function setupGrok3Observers(queryBar, currentModel, lastThinkObserver, lastSearchObserver) {
if (currentModel === 'grok-3') {
if (!lastThinkObserver) {
const thinkButton = queryBar.querySelector('button[aria-label="Think"]');
if (thinkButton) {
lastThinkObserver = new MutationObserver(() => {
fetchAndUpdateRateLimit(queryBar);
});
lastThinkObserver.observe(thinkButton, { attributes: true, attributeFilter: ['aria-pressed', 'class'] });
}
}
if (!lastSearchObserver) {
const searchButton = queryBar.querySelector('button[aria-label^="Deep"]');
if (searchButton) {
lastSearchObserver = new MutationObserver(() => {
fetchAndUpdateRateLimit(queryBar);
});
lastSearchObserver.observe(searchButton, { attributes: true, attributeFilter: ['aria-pressed', 'class'], childList: true, subtree: true, characterData: true });
}
}
} else {
if (lastThinkObserver) {
lastThinkObserver.disconnect();
lastThinkObserver = null;
}
if (lastSearchObserver) {
lastSearchObserver.disconnect();
lastSearchObserver = null;
}
}
return { lastThinkObserver, lastSearchObserver };
}
// Function to observe the DOM for the query bar
function observeDOM() {
let lastQueryBar = null;
let lastModel = null;
let lastModelObserver = null;
let lastThinkObserver = null;
let lastSearchObserver = null;
let lastInputElement = null;
let lastSendButton = null;
// Initial check for query bar
const initialQueryBar = document.querySelector('.query-bar');
if (initialQueryBar) {
removeExistingRateLimit();
fetchAndUpdateRateLimit(initialQueryBar);
lastQueryBar = initialQueryBar;
const modelSpan = initialQueryBar.querySelector('span.inline-block.text-primary');
if (modelSpan) {
lastModel = normalizeModelName(modelSpan.textContent.trim());
lastModelObserver = new MutationObserver(() => {
const currentModel = normalizeModelName(modelSpan.textContent.trim());
if (currentModel !== lastModel) {
lastModel = currentModel;
fetchAndUpdateRateLimit(lastQueryBar);
// Setup or cleanup Grok-3 observers
const observers = setupGrok3Observers(lastQueryBar, currentModel, lastThinkObserver, lastSearchObserver);
lastThinkObserver = observers.lastThinkObserver;
lastSearchObserver = observers.lastSearchObserver;
}
});
lastModelObserver.observe(modelSpan, { characterData: true, childList: true, subtree: true });
}
// Initial setup for Grok-3 observers if applicable
const observers = setupGrok3Observers(initialQueryBar, lastModel, lastThinkObserver, lastSearchObserver);
lastThinkObserver = observers.lastThinkObserver;
lastSearchObserver = observers.lastSearchObserver;
// Set up event listeners for query submission
const inputElement = initialQueryBar.querySelector('textarea');
if (inputElement) {
lastInputElement = inputElement;
inputElement.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
setTimeout(() => fetchAndUpdateRateLimit(lastQueryBar), 5000);
}
});
}
const sendButton = initialQueryBar.querySelector('div.h-10.relative.aspect-square');
if (sendButton) {
lastSendButton = sendButton;
sendButton.addEventListener('click', () => {
setTimeout(() => fetchAndUpdateRateLimit(lastQueryBar), 5000);
});
}
}
const observer = new MutationObserver((mutations) => {
const queryBar = document.querySelector('.query-bar');
// Handle query bar changes
if (queryBar && queryBar !== lastQueryBar) {
removeExistingRateLimit();
fetchAndUpdateRateLimit(queryBar);
lastQueryBar = queryBar;
if (lastModelObserver) {
lastModelObserver.disconnect();
lastModelObserver = null;
}
if (lastThinkObserver) {
lastThinkObserver.disconnect();
lastThinkObserver = null;
}
if (lastSearchObserver) {
lastSearchObserver.disconnect();
lastSearchObserver = null;
}
const modelSpan = queryBar.querySelector('span.inline-block.text-primary');
if (modelSpan) {
lastModel = normalizeModelName(modelSpan.textContent.trim());
lastModelObserver = new MutationObserver(() => {
const currentModel = normalizeModelName(modelSpan.textContent.trim());
if (currentModel !== lastModel) {
lastModel = currentModel;
fetchAndUpdateRateLimit(lastQueryBar);
// Setup or cleanup Grok-3 observers
const observers = setupGrok3Observers(lastQueryBar, currentModel, lastThinkObserver, lastSearchObserver);
lastThinkObserver = observers.lastThinkObserver;
lastSearchObserver = observers.lastSearchObserver;
}
});
lastModelObserver.observe(modelSpan, { characterData: true, childList: true, subtree: true });
}
// Initial setup for Grok-3 observers if applicable
const observersInit = setupGrok3Observers(queryBar, lastModel, lastThinkObserver, lastSearchObserver);
lastThinkObserver = observersInit.lastThinkObserver;
lastSearchObserver = observersInit.lastSearchObserver;
// Set up event listeners for query submission
const inputElement = queryBar.querySelector('textarea');
if (inputElement && inputElement !== lastInputElement) {
lastInputElement = inputElement;
inputElement.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
setTimeout(() => fetchAndUpdateRateLimit(lastQueryBar), 5000);
}
});
}
const sendButton = queryBar.querySelector('div.h-10.relative.aspect-square');
if (sendButton && sendButton !== lastSendButton) {
lastSendButton = sendButton;
sendButton.addEventListener('click', () => {
setTimeout(() => fetchAndUpdateRateLimit(lastQueryBar), 5000);
});
}
} else if (!queryBar && lastQueryBar) {
removeExistingRateLimit();
if (lastModelObserver) {
lastModelObserver.disconnect();
lastModelObserver = null;
}
if (lastThinkObserver) {
lastThinkObserver.disconnect();
lastThinkObserver = null;
}
if (lastSearchObserver) {
lastSearchObserver.disconnect();
lastSearchObserver = null;
}
lastQueryBar = null;
lastModel = null;
lastInputElement = null;
lastSendButton = null;
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
// Polling every 5 minutes for rate limit updates when tab is focused
setInterval(() => {
if (lastQueryBar && document.hasFocus()) {
fetchAndUpdateRateLimit(lastQueryBar);
}
}, 300 * 1000);
}
// Start observing the DOM for changes
observeDOM();
})();