Listen to this post:

Earlier this week, my yearly Claude Pro subscription auto-renewed. This seems to have triggered a “service improvement”, making me subject to weekly limits. I had heard of these, but had until then only been subject to the 5h session limits.

With this came a new form of anxiety summarized as “OMG I think I might be ahead in my consumption of the weekly limit, compared to the passage of time.”

To fight this new existential dread and live with facts not fear, I overlay the week’s time elapsed against the token usage progress, directly on the Claude usage page.

Claude usage page with week time elapsed overlaid against token consumption

I use a bookmarklet for this: tgif-claude. It auto-refreshes, but obviously requires to be clicked on when the page is loaded (a userscript manager or full-on browser add-on seemed overkill).

Copy it from here:

bookmarklet.js view code 
javascript:(function%20()%20%7B%20function%20run()%20%7B%20%5B'tgif-claude-marker'%2C%20'tgif-claude-label'%2C%20'tgif-claude-session'%5D.forEach(function%20(id)%20%7B%20var%20el%20%3D%20document.getElementById(id)%3B%20if%20(el)%20el.remove()%3B%20%7D)%3B%20var%20htmlLang%20%3D%20(document.documentElement.getAttribute('lang')%20%7C%7C%20'en').toLowerCase().split('-')%5B0%5D%3B%20var%20LANGS%20%3D%20%7B%20en%3A%20%7B%20detect%3A%20%2F%5EResets%20%5Cw%7B3%7D%20%5Cd%7B1%2C2%7D%3A%5Cd%7B2%7D%20%5BAP%5DM%24%2F%2C%20parse%3A%20%2FResets%20(%5Cw%2B)%20(%5Cd%2B)%3A(%5Cd%2B)%20(%5BAP%5DM)%2F%2C%20relative%3A%20%2F%5EResets%20in%20%2F%2C%20relParse%3A%20%2FResets%20in%20(%3F%3A(%5Cd%2B)%5Cs*d%5Cs*)%3F(%3F%3A(%5Cd%2B)%5Cs*hr%3F%5Cs*)%3F(%3F%3A(%5Cd%2B)%5Cs*min)%3F%2F%2C%20days%3A%20%7B%20Sun%3A%200%2C%20Mon%3A%201%2C%20Tue%3A%202%2C%20Wed%3A%203%2C%20Thu%3A%204%2C%20Fri%3A%205%2C%20Sat%3A%206%20%7D%2C%20dayNames%3A%20%5B'Sun'%2C%20'Mon'%2C%20'Tue'%2C%20'Wed'%2C%20'Thu'%2C%20'Fri'%2C%20'Sat'%5D%2C%20ampm%3A%20true%2C%20startsText%3A%20'Starts%20when%20a%20message%20is%20sent'%2C%20lastUpdated%3A%20'Last%20updated%3A'%2C%20refreshLabel%3A%20'Refresh%20usage%20limits'%2C%20timeElapsed%3A%20'Elapsed%3A'%2C%20resetsIn%3A%20'Resets%20in'%2C%20overPace%3A%20'over%20pace'%2C%20underPace%3A%20'under%20pace'%2C%20ahead%3A%20'ahead'%2C%20behind%3A%20'behind'%2C%20parseError%3A%20'tgif-claude%3A%20could%20not%20parse%20reset%20time'%2C%20notFound%3A%20'tgif-claude%3A%20weekly%20reset%20text%20not%20found'%2C%20weeklyHeading%3A%20'Weekly%20limits'%2C%20%7D%2C%20fr%3A%20%7B%20detect%3A%20%2F%5ER%C3%A9initialisation%20%5Cw%7B3%7D%5C.%20%5Cd%7B1%2C2%7D%3A%5Cd%7B2%7D%24%2F%2C%20parse%3A%20%2FR%C3%A9initialisation%20(%5Cw%2B)%5C.%20(%5Cd%2B)%3A(%5Cd%2B)%2F%2C%20relative%3A%20%2F%5ER%C3%A9initialisation%20dans%20%2F%2C%20relParse%3A%20%2FR%C3%A9initialisation%20dans%20(%3F%3A(%5Cd%2B)%5Cs*j%5Cs*)%3F(%3F%3A(%5Cd%2B)%5Cs*h%5Cs*)%3F(%3F%3A(%5Cd%2B)%5Cs*min)%3F%2F%2C%20days%3A%20%7B%20dim%3A%200%2C%20lun%3A%201%2C%20mar%3A%202%2C%20mer%3A%203%2C%20jeu%3A%204%2C%20ven%3A%205%2C%20sam%3A%206%20%7D%2C%20dayNames%3A%20%5B'dim'%2C%20'lun'%2C%20'mar'%2C%20'mer'%2C%20'jeu'%2C%20'ven'%2C%20'sam'%5D%2C%20ampm%3A%20false%2C%20startsText%3A%20'Commence%20quand%20un%20message%20est%20envoy%C3%A9'%2C%20lastUpdated%3A%20'Derni%C3%A8re%20mise%20%C3%A0%20jour%20%3A'%2C%20refreshLabel%3A%20'Actualiser%20les%20limites%20d%5C'utilisation'%2C%20timeElapsed%3A%20'%5Cu00c9coul%5Cu00e9%5Cu00a0%3A'%2C%20resetsIn%3A%20'R%5Cu00e9init.%20dans'%2C%20overPace%3A%20'en%20avance'%2C%20underPace%3A%20'en%20retard'%2C%20ahead%3A%20'd%5C'avance'%2C%20behind%3A%20'de%20retard'%2C%20parseError%3A%20'tgif-claude%20%3A%20impossible%20de%20lire%20l%5Cu2019heure%20de%20r%C3%A9initialisation'%2C%20notFound%3A%20'tgif-claude%20%3A%20texte%20de%20r%C3%A9initialisation%20hebdomadaire%20introuvable'%2C%20weeklyHeading%3A%20'Limites%20hebdomadaires'%2C%20%7D%2C%20%7D%3B%20var%20lang%20%3D%20LANGS%5BhtmlLang%5D%20%7C%7C%20LANGS.en%3B%20var%20weeklyHeading%20%3D%20Array.from(document.querySelectorAll('h2')).find(function%20(h)%20%7B%20return%20h.textContent.trim()%20%3D%3D%3D%20lang.weeklyHeading%3B%20%7D)%3B%20var%20weeklySection%20%3D%20weeklyHeading%20%26%26%20weeklyHeading.closest('.space-y-6')%3B%20if%20(!weeklySection)%20weeklySection%20%3D%20weeklyHeading%20%26%26%20weeklyHeading.parentElement%20%26%26%20weeklyHeading.parentElement.parentElement%3B%20if%20(!weeklySection)%20%7B%20alert(lang.notFound)%3B%20return%3B%20%7D%20var%20weeklyPs%20%3D%20Array.from(weeklySection.querySelectorAll('p'))%3B%20var%20resetEl%20%3D%20weeklyPs.find(function%20(p)%20%7B%20return%20lang.detect.test(p.textContent.trim())%3B%20%7D)%3B%20if%20(!resetEl)%20%7B%20resetEl%20%3D%20weeklyPs.find(function%20(p)%20%7B%20return%20lang.relative.test(p.textContent.trim())%3B%20%7D)%3B%20%7D%20if%20(!resetEl)%20%7B%20var%20startsEl%20%3D%20weeklyPs.find(function%20(p)%20%7B%20return%20p.textContent.trim()%20%3D%3D%3D%20lang.startsText%3B%20%7D)%3B%20if%20(startsEl)%20%7B%20var%20waitObserver%20%3D%20new%20MutationObserver(function%20()%20%7B%20waitObserver.disconnect()%3B%20run()%3B%20%7D)%3B%20waitObserver.observe(weeklySection%2C%20%7B%20childList%3A%20true%2C%20subtree%3A%20true%2C%20characterData%3A%20true%20%7D)%3B%20return%3B%20%7D%20alert(lang.notFound)%3B%20return%3B%20%7D%20var%20row%20%3D%20resetEl.parentElement.parentElement%3B%20var%20barContainer%20%3D%20row.querySelector('.bg-bg-000')%3B%20var%20fillEl%20%3D%20barContainer%20%26%26%20barContainer.querySelector('.bg-accent-200')%3B%20if%20(!fillEl)%20return%3B%20var%20lastUpdatedEl%20%3D%20Array.from(document.querySelectorAll('p')).find(function%20(p)%20%7B%20return%20p.textContent.trim().startsWith(lang.lastUpdated)%3B%20%7D)%3B%20var%20refreshBtn%20%3D%20document.querySelector('button%5Baria-label%3D%22'%20%2B%20lang.refreshLabel%20%2B%20'%22%5D')%3B%20var%20WEEK_MS%20%3D%207%20*%2024%20*%2060%20*%2060%20*%201000%3B%20function%20updateSession()%20%7B%20var%20existing%20%3D%20document.getElementById('tgif-claude-session')%3B%20if%20(existing)%20existing.remove()%3B%20var%20lel%20%3D%20Array.from(document.querySelectorAll('p')).find(function%20(p)%20%7B%20return%20p.textContent.trim()%20%3D%3D%3D%20'Current%20session'%3B%20%7D)%3B%20var%20sel%20%3D%20lel%20%26%26%20Array.from(%20lel.parentElement.parentElement.querySelectorAll('p')%20).find(function%20(p)%20%7B%20return%20lang.relative.test(p.textContent.trim())%3B%20%7D)%3B%20if%20(!sel)%20return%3B%20var%20m%20%3D%20sel.textContent.trim().match(lang.relParse)%3B%20if%20(!m)%20return%3B%20var%20sd%20%3D%20parseInt(m%5B1%5D%2C%2010)%20%7C%7C%200%3B%20var%20sh%20%3D%20parseInt(m%5B2%5D%2C%2010)%20%7C%7C%200%3B%20var%20sm%20%3D%20parseInt(m%5B3%5D%2C%2010)%20%7C%7C%200%3B%20var%20ms%20%3D%20((sd%20*%2024%20%2B%20sh)%20*%2060%20%2B%20sm)%20*%2060%20*%201000%3B%20var%20resetAt%20%3D%20new%20Date(Date.now()%20%2B%20ms)%3B%20if%20(resetAt.getMinutes()%20%3E%3D%2030)%20resetAt.setHours(resetAt.getHours()%20%2B%201)%3B%20resetAt.setMinutes(0%2C%200%2C%200)%3B%20var%20rh%20%3D%20resetAt.getHours()%3B%20var%20rampm%20%3D%20rh%20%3E%3D%2012%20%3F%20'PM'%20%3A%20'AM'%3B%20rh%20%3D%20rh%20%25%2012%20%7C%7C%2012%3B%20var%20span%20%3D%20document.createElement('span')%3B%20span.id%20%3D%20'tgif-claude-session'%3B%20span.textContent%20%3D%20'%20(at%20'%20%2B%20rh%20%2B%20'%3A00%20'%20%2B%20rampm%20%2B%20')'%3B%20sel.appendChild(span)%3B%20%7D%20function%20parseMsLeft()%20%7B%20var%20text%20%3D%20resetEl.textContent.trim()%3B%20var%20abs%20%3D%20text.match(lang.parse)%3B%20if%20(abs)%20%7B%20var%20targetDay%20%3D%20lang.days%5Babs%5B1%5D%5D%3B%20var%20hour%20%3D%20parseInt(abs%5B2%5D%2C%2010)%3B%20var%20minute%20%3D%20parseInt(abs%5B3%5D%2C%2010)%3B%20if%20(lang.ampm)%20%7B%20if%20(abs%5B4%5D%20%3D%3D%3D%20'PM'%20%26%26%20hour%20!%3D%3D%2012)%20hour%20%2B%3D%2012%3B%20if%20(abs%5B4%5D%20%3D%3D%3D%20'AM'%20%26%26%20hour%20%3D%3D%3D%2012)%20hour%20%3D%200%3B%20%7D%20var%20now%20%3D%20new%20Date()%3B%20var%20reset%20%3D%20new%20Date(now)%3B%20reset.setHours(hour%2C%20minute%2C%200%2C%200)%3B%20var%20daysUntil%20%3D%20(targetDay%20-%20now.getDay()%20%2B%207)%20%25%207%3B%20if%20(daysUntil%20%3D%3D%3D%200%20%26%26%20reset%20%3C%3D%20now)%20daysUntil%20%3D%207%3B%20reset.setDate(reset.getDate()%20%2B%20daysUntil)%3B%20return%20reset%20-%20now%3B%20%7D%20var%20rel%20%3D%20text.match(lang.relParse)%3B%20if%20(rel)%20%7B%20var%20d%20%3D%20parseInt(rel%5B1%5D%2C%2010)%20%7C%7C%200%3B%20var%20h%20%3D%20parseInt(rel%5B2%5D%2C%2010)%20%7C%7C%200%3B%20var%20m%20%3D%20parseInt(rel%5B3%5D%2C%2010)%20%7C%7C%200%3B%20return%20((d%20*%2024%20%2B%20h)%20*%2060%20%2B%20m)%20*%2060%20*%201000%3B%20%7D%20return%20null%3B%20%7D%20barContainer.style.position%20%3D%20'relative'%3B%20var%20marker%20%3D%20document.createElement('div')%3B%20marker.id%20%3D%20'tgif-claude-marker'%3B%20marker.style.cssText%20%3D%20'position%3Aabsolute%3Btop%3A0%3Bheight%3A100%25%3Bwidth%3A3px%3B'%20%2B%20'background%3A%23f97316%3Bpointer-events%3Anone%3Bborder-radius%3A1px%3B'%3B%20barContainer.appendChild(marker)%3B%20var%20tooltip%20%3D%20document.createElement('div')%3B%20tooltip.style.cssText%20%3D%20'position%3Afixed%3Bdisplay%3Anone%3Bpointer-events%3Anone%3B'%20%2B%20'background%3A%231e1e2e%3Bcolor%3A%23fff%3Bfont-size%3A11px%3Bpadding%3A3px%207px%3B'%20%2B%20'border-radius%3A4px%3Bwhite-space%3Anowrap%3Bz-index%3A9999%3B'%3B%20var%20tooltipText%20%3D%20document.createElement('span')%3B%20tooltip.appendChild(tooltipText)%3B%20var%20tooltipArrow%20%3D%20document.createElement('div')%3B%20tooltipArrow.style.cssText%20%3D%20'position%3Aabsolute%3Bleft%3A50%25%3Btransform%3AtranslateX(-50%25)%3Btop%3A100%25%3B'%20%2B%20'border%3A5px%20solid%20transparent%3Bborder-top-color%3A%23fff%3B'%3B%20tooltip.appendChild(tooltipArrow)%3B%20document.body.appendChild(tooltip)%3B%20var%20weekStartMs%20%3D%200%3B%20function%20formatTooltipTime(date)%20%7B%20var%20day%20%3D%20lang.dayNames%5Bdate.getDay()%5D%3B%20var%20h%20%3D%20date.getHours()%3B%20var%20m%20%3D%20date.getMinutes()%3B%20var%20mm%20%3D%20(m%20%3C%2010%20%3F%20'0'%20%3A%20'')%20%2B%20m%3B%20if%20(lang.ampm)%20%7B%20var%20suffix%20%3D%20h%20%3E%3D%2012%20%3F%20'%20PM'%20%3A%20'%20AM'%3B%20h%20%3D%20h%20%25%2012%20%7C%7C%2012%3B%20return%20day%20%2B%20'%20'%20%2B%20h%20%2B%20'%3A'%20%2B%20mm%20%2B%20suffix%3B%20%7D%20return%20day%20%2B%20'%20'%20%2B%20h%20%2B%20'%3A'%20%2B%20mm%3B%20%7D%20barContainer.addEventListener('mousemove'%2C%20function%20(e)%20%7B%20if%20(!weekStartMs)%20return%3B%20var%20rect%20%3D%20barContainer.getBoundingClientRect()%3B%20var%20x%20%3D%20e.clientX%20-%20rect.left%3B%20var%20pct%20%3D%20Math.max(0%2C%20Math.min(100%2C%20(x%20%2F%20rect.width)%20*%20100))%3B%20var%20time%20%3D%20new%20Date(weekStartMs%20%2B%20(pct%20%2F%20100)%20*%20WEEK_MS)%3B%20tooltipText.textContent%20%3D%20formatTooltipTime(time)%3B%20tooltip.style.display%20%3D%20'block'%3B%20var%20ttLeft%20%3D%20e.clientX%20-%20(tooltip.offsetWidth%20%2F%202)%3B%20tooltip.style.left%20%3D%20ttLeft%20%2B%20'px'%3B%20tooltip.style.top%20%3D%20(rect.top%20-%20tooltip.offsetHeight%20-%208)%20%2B%20'px'%3B%20%7D)%3B%20barContainer.addEventListener('mouseleave'%2C%20function%20()%20%7B%20tooltip.style.display%20%3D%20'none'%3B%20%7D)%3B%20var%20label%20%3D%20document.createElement('div')%3B%20label.id%20%3D%20'tgif-claude-label'%3B%20label.className%20%3D%20resetEl.className%3B%20label.style.marginTop%20%3D%20'4px'%3B%20row.insertAdjacentElement('afterend'%2C%20label)%3B%20function%20update(reason)%20%7B%20var%20usagePct%20%3D%20parseFloat(fillEl.style.width)%20%7C%7C%200%3B%20var%20msLeft%20%3D%20parseMsLeft()%3B%20if%20(msLeft%20%3D%3D%3D%20null)%20%7B%20label.textContent%20%3D%20lang.parseError%3B%20return%3B%20%7D%20weekStartMs%20%3D%20Date.now()%20%2B%20msLeft%20-%20WEEK_MS%3B%20var%20timeElapsedPct%20%3D%20Math.max(0%2C%20Math.min(100%2C%20((WEEK_MS%20-%20msLeft)%20%2F%20WEEK_MS)%20*%20100))%3B%20var%20daysLeft%20%3D%20Math.floor(msLeft%20%2F%20(24%20*%2060%20*%2060%20*%201000))%3B%20var%20hoursLeft%20%3D%20Math.floor((msLeft%20%25%20(24%20*%2060%20*%2060%20*%201000))%20%2F%20(60%20*%2060%20*%201000))%3B%20var%20minsLeft%20%3D%20Math.floor((msLeft%20%25%20(60%20*%2060%20*%201000))%20%2F%20(60%20*%201000))%3B%20var%20remainingParts%20%3D%20%5B%5D%3B%20if%20(daysLeft%20%3E%200)%20remainingParts.push(daysLeft%20%2B%20'd')%3B%20if%20(hoursLeft%20%3E%200%20%7C%7C%20daysLeft%20%3E%200)%20remainingParts.push(hoursLeft%20%2B%20'h')%3B%20remainingParts.push(minsLeft%20%2B%20'm')%3B%20var%20remainingStr%20%3D%20remainingParts.join('%20')%3B%20var%20delta%20%3D%20usagePct%20-%20timeElapsedPct%3B%20var%20overPace%20%3D%20delta%20%3E%200%3B%20var%20statusColor%20%3D%20overPace%20%3F%20'%23dc2626'%20%3A%20'%2316a34a'%3B%20var%20statusText%20%3D%20overPace%20%3F%20lang.overPace%20%3A%20lang.underPace%3B%20var%20usageTime%20%3D%20formatTooltipTime(new%20Date(weekStartMs%20%2B%20(usagePct%20%2F%20100)%20*%20WEEK_MS))%3B%20var%20deltaMs%20%3D%20Math.abs(delta)%20%2F%20100%20*%20WEEK_MS%3B%20var%20deltaDays%20%3D%20Math.floor(deltaMs%20%2F%20(24%20*%2060%20*%2060%20*%201000))%3B%20var%20deltaHours%20%3D%20Math.floor((deltaMs%20%25%20(24%20*%2060%20*%2060%20*%201000))%20%2F%20(60%20*%2060%20*%201000))%3B%20var%20deltaMins%20%3D%20Math.floor((deltaMs%20%25%20(60%20*%2060%20*%201000))%20%2F%20(60%20*%201000))%3B%20var%20deltaParts%20%3D%20%5B%5D%3B%20if%20(deltaDays%20%3E%200)%20deltaParts.push(deltaDays%20%2B%20'd')%3B%20if%20(deltaHours%20%3E%200%20%7C%7C%20deltaDays%20%3E%200)%20deltaParts.push(deltaHours%20%2B%20'h')%3B%20deltaParts.push(deltaMins%20%2B%20'm')%3B%20var%20deltaTimeStr%20%3D%20deltaParts.join('%20')%20%2B%20'%20'%20%2B%20(overPace%20%3F%20lang.ahead%20%3A%20lang.behind)%3B%20console.log('%5Btgif-claude%5D%20usage%3D'%20%2B%20usagePct%20%2B%20'%25%20elapsed%3D'%20%2B%20timeElapsedPct.toFixed(1)%20%2B%20'%25%20delta%3D'%20%2B%20(delta%20%3E%3D%200%20%3F%20'%2B'%20%3A%20'')%20%2B%20delta.toFixed(1)%20%2B%20'%25')%3B%20updateSession()%3B%20marker.style.left%20%3D%20timeElapsedPct.toFixed(2)%20%2B%20'%25'%3B%20label.innerHTML%20%3D%20lang.timeElapsed%20%2B%20'%20%3Cb%3E'%20%2B%20timeElapsedPct.toFixed(1)%20%2B%20'%25%3C%2Fb%3E'%20%2B%20'%20%7C%20'%20%2B%20lang.resetsIn%20%2B%20'%20%3Cb%3E'%20%2B%20remainingStr%20%2B%20'%3C%2Fb%3E'%20%2B%20'%3Cbr%3E'%20%2B%20'Delta%3A%20%3Cb%20style%3D%22color%3A'%20%2B%20statusColor%20%2B%20'%22%3E'%20%2B%20(delta%20%3E%3D%200%20%3F%20'%2B'%20%3A%20'')%20%2B%20delta.toFixed(1)%20%2B%20'%25%20%5Cu2014%20'%20%2B%20deltaTimeStr%20%2B%20'%3C%2Fb%3E'%20%2B%20'%20%3Cspan%20style%3D%22opacity%3A0.7%22%3E(%5Cu2248%20'%20%2B%20usageTime%20%2B%20')%3C%2Fspan%3E'%3B%20%7D%20update('init')%3B%20if%20(lastUpdatedEl)%20%7B%20var%20observer%20%3D%20new%20MutationObserver(function%20()%20%7B%20update('lastUpdated%20mutation')%3B%20%7D)%3B%20observer.observe(lastUpdatedEl%2C%20%7B%20childList%3A%20true%2C%20subtree%3A%20true%2C%20characterData%3A%20true%20%7D)%3B%20%7D%20%7D%20run()%3B%20%7D)()%3B

Or check the readable code on github.