Skip to content

Instantly share code, notes, and snippets.

@gosub
Created March 27, 2026 17:26
Show Gist options
  • Select an option

  • Save gosub/9ffb1fe910046d8a7b9e7b38a4d2f382 to your computer and use it in GitHub Desktop.

Select an option

Save gosub/9ffb1fe910046d8a7b9e7b38a4d2f382 to your computer and use it in GitHub Desktop.
Claude Code usage pace bookmarklet

Claude Code usage pace - bookmarklet

A bookmarklet for claude.ai/settings/usage that overlays a small panel showing how your weekly Claude Code usage compares to how much of the week has elapsed. Useful for spotting over- or under-use before the reset hits.

What it shows

  • Utilizzo: percentage of your weekly limit consumed (read live from the page)
  • Tempo trascorso: percentage of the week that has passed since the last reset
  • Delta: difference in percentage points between the two — positive means you are ahead of pace, negative means you have headroom
  • Giorni al reset: days remaining until the weekly reset
  • Rimasta/giorno: percentage points of budget left per day

The verdict line turns red when you are more than 5pp over pace, green when more than 5pp under, grey when roughly on track.

Usage

  1. Go to claude.ai/settings/usage
  2. Click the bookmarklet
  3. A panel appears in the top-right corner
  4. Click ↻ to re-read the page and refresh all values
  5. Click ✕ to close
  6. Clicking the bookmarklet again while the panel is open closes it

The ↻ button re-reads both the usage percentage and the reset date directly from the DOM, so it picks up any changes the page may have loaded since you opened it.

Installing the bookmarklet

Browsers block pasting javascript: URLs directly into the address bar. Use the bookmark manager instead.

Firefox:

  1. Ctrl+Shift+O to open the bookmark manager
  2. Right-click in an empty area → New Bookmark
  3. Set any name (e.g. Usage pace)
  4. Paste the code below into the URL field
  5. Save

Chrome / Brave:

  1. Show the bookmarks bar: Ctrl+Shift+B
  2. Right-click the bookmarks bar → Add page…
  3. Set any name, paste the code into the URL field
  4. Save

To test without installing: open DevTools (F12), go to the Console tab, paste the code and press Enter.

Code

javascript:(function(){var existing=document.getElementById('_utrk');if(existing){existing.remove();return;}function readDOM(){var usedEls=[...document.querySelectorAll('p.font-base.text-text-400.whitespace-nowrap.text-right.min-w-\\[5\\.5rem\\]')];var usedEl=usedEls[1];if(!usedEl)return null;var usedPct=parseFloat(usedEl.textContent);var allP=[...document.querySelectorAll('p.font-base.text-text-400.whitespace-nowrap')];var idx=allP.indexOf(usedEl);var resetEl=null;for(var j=idx-1;j>=0;j--){if(/resets/i.test(allP[j].textContent)){resetEl=allP[j];break;}}return{usedPct:usedPct,resetText:resetEl?resetEl.textContent.trim():''};}function parseResetDate(t){var rel=t.match(/resets\s+in\s+(\d+)\s*hr?\s*(\d+)?\s*min?/i);if(rel){return new Date(Date.now()+(parseInt(rel[1]||0)*60+parseInt(rel[2]||0))*60000);}var dow=t.match(/resets\s+(sun|mon|tue|wed|thu|fri|sat)\s+(\d+):(\d+)\s*(am|pm)?/i);if(dow){var days={sun:0,mon:1,tue:2,wed:3,thu:4,fri:5,sat:6};var td=days[dow[1].toLowerCase()];var h=parseInt(dow[2]);var m=parseInt(dow[3]);var ap=(dow[4]||'').toLowerCase();if(ap==='pm'&&h<12)h+=12;if(ap==='am'&&h===12)h=0;var now=new Date();var d=new Date(now);d.setHours(h,m,0,0);var diff=(td-d.getDay()+7)%7;if(diff===0&&d<=now)diff=7;d.setDate(d.getDate()+diff);return d;}var abs=t.match(/resets\s+(.+)/i);if(abs){var raw=abs[1].trim();var a=new Date(raw+' '+new Date().getFullYear());if(isNaN(a))a=new Date(raw);if(!isNaN(a)){if(a<new Date())a=new Date(a.getTime()+7*24*3600*1000);return a;}}return null;}var initial=readDOM();if(!initial){alert('Usage pace: element "% used" not found. Are you on claude.ai/settings/usage?');return;}var s=document.createElement('style');s.textContent='#_utrk{position:fixed;top:20px;right:20px;z-index:99999;background:#fff;border:0.5px solid #d0d0d0;border-radius:12px;padding:1.1rem 1.25rem;font-family:sans-serif;font-size:13px;width:300px;box-shadow:0 4px 20px rgba(0,0,0,.1);color:#1a1a1a}#_utrk *{box-sizing:border-box;margin:0;padding:0}#_utrk h3{font-size:13px;font-weight:500;margin-bottom:.9rem;padding-right:3rem}#_utrk .bt{height:7px;background:#eee;border-radius:99px;overflow:hidden;margin-bottom:3px}#_utrk .bf{height:100%;border-radius:99px}#_utrk .bl{display:flex;justify-content:space-between;font-size:11px;color:#888;margin-bottom:.45rem}#_utrk .stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:.85rem 0 0}#_utrk .st{background:#f5f5f5;border-radius:6px;padding:.45rem .6rem}#_utrk .sv{font-size:17px;font-weight:500}#_utrk .sl{font-size:11px;color:#888;margin-top:1px}#_utrk .verdict{padding:.45rem .7rem;border-radius:6px;font-size:12px;font-weight:500;margin-top:.75rem}#_utrk .src{font-size:11px;color:#aaa;margin-top:.6rem}#_utrk-btns{position:absolute;top:9px;right:9px;display:flex;gap:4px}#_utrk-btns button{cursor:pointer;font-size:13px;color:#bbb;background:none;border:none;line-height:1;padding:2px 3px}#_utrk-btns button:hover{color:#555}';document.head.appendChild(s);var d=document.createElement('div');d.id='_utrk';var btns=document.createElement('div');btns.id='_utrk-btns';var refreshBtn=document.createElement('button');refreshBtn.innerHTML='&#x21BB;';refreshBtn.title='Refresh';var closeBtn=document.createElement('button');closeBtn.innerHTML='&#x2715;';closeBtn.title='Close';closeBtn.addEventListener('click',function(){d.remove();});refreshBtn.addEventListener('click',function(){render();});btns.appendChild(refreshBtn);btns.appendChild(closeBtn);d.appendChild(btns);var content=document.createElement('div');d.appendChild(content);document.body.appendChild(d);function render(){var data=readDOM();if(!data){content.innerHTML='<h3>Usage pace</h3><p style="font-size:12px;color:#a00">Elements not found.</p>';return;}var usedPct=data.usedPct;var resetText=data.resetText;var resetDate=parseResetDate(resetText);if(!resetDate){content.innerHTML='<h3>Usage pace</h3><p style="font-size:12px;color:#a00">Cannot parse reset date: "'+resetText+'"</p>';return;}var now=new Date();var start=new Date(resetDate.getTime()-7*24*3600*1000);var timePct=Math.min(100,Math.max(0,(now-start)/(resetDate-start)*100));var daysLeft=Math.max(0,(resetDate-now)/(24*3600*1000));var pace=(100-usedPct)/Math.max(daysLeft,0.01);var diff=usedPct-timePct;var sign=diff>=0?'+':'';var vcls=Math.abs(diff)<5?'background:#f0f0f0;color:#555':diff>0?'background:#fde8e8;color:#a32d2d':'background:#eaf3de;color:#3b6d11';var vtxt=Math.abs(diff)<5?'On track.':diff>0?'Over pace by '+Math.abs(Math.round(diff))+'pp.':'Under pace by '+Math.abs(Math.round(diff))+'pp. You have headroom.';content.innerHTML='<h3>Usage pace \u2014 Claude Code</h3><div class="bl"><span>Usage</span><span>'+Math.round(usedPct)+'%</span></div><div class="bt"><div class="bf" style="width:'+Math.min(usedPct,100)+'%;background:#378ADD"></div></div><div class="bl"><span>Week elapsed</span><span>'+Math.round(timePct)+'%</span></div><div class="bt"><div class="bf" style="width:'+Math.min(timePct,100)+'%;background:#888"></div></div><div class="stats"><div class="st"><div class="sv">'+sign+Math.round(diff)+'pp</div><div class="sl">delta</div></div><div class="st"><div class="sv">'+daysLeft.toFixed(1)+'</div><div class="sl">days to reset</div></div><div class="st"><div class="sv">'+pace.toFixed(1)+'%</div><div class="sl">left/day</div></div></div><div class="verdict" style="'+vcls+'">'+vtxt+'</div><div class="src">'+resetText+'</div>';}render();})();

Notes

  • Reads the DOM on each ↻ click, so it stays accurate without a page reload as long as the page has updated its own values.
  • The reset date parser handles three formats seen on the page: Resets Sat 8:00 AM, Resets in 3 hr 39 min, and Resets Apr 1.
  • If Anthropic changes the CSS class names used on settings/usage, the selectors will need updating.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment