1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>AI Quota & Usage Tracker for Claude, ChatGPT, Gemini & More â MyQuota</title> 7 <meta name="description" content="AI quota tracker and token limit monitoring for Claude, ChatGPT, Gemini and more AI tools. 100% local, free." /> 8 <link rel="canonical" href="https://myquota.ai/" /> 9 <meta name="theme-color" content="#f3eee6" /> 10 11 <meta property="og:type" content="website" /> 12 <meta property="og:url" content="https://myquota.ai/" /> 13 <meta property="og:site_name" content="MyQuota" /> 14 <meta property="og:locale" content="en_US" /> 15 <meta property="og:title" content="AI Quota & Usage Tracker for Claude, ChatGPT, Gemini & More â MyQuota" /> 16 <meta property="og:description" content="AI quota tracker and token limit monitoring for Claude, ChatGPT, Gemini and more AI tools. 100% local, free." /> 17 <meta property="og:image" content="https://myquota.ai/og-image.png" /> 18 <meta property="og:image:width" content="1200" /> 19 <meta property="og:image:height" content="630" /> 20 <meta property="og:image:type" content="image/png" /> 21 <meta property="og:image:alt" content="MyQuota promo graphic: "Your AI usage changes. MyQuota adapts." â two popup screenshots showing spend and quota tracking across 10+ AI providers" /> 22 <meta property="og:video" content="https://www.youtube-nocookie.com/embed/ogPjAzxrG6Y" /> 23 <meta property="og:video:secure_url" content="https://www.youtube-nocookie.com/embed/ogPjAzxrG6Y" /> 24 <meta property="og:video:type" content="text/html" /> 25 <meta property="og:video:width" content="1280" /> 26 <meta property="og:video:height" content="720" /> 27 <meta name="twitter:card" content="summary_large_image" /> 28 <meta name="twitter:site" content="@myquota_ai" /> 29 <meta name="twitter:title" content="AI Quota & Usage Tracker for Claude, ChatGPT, Gemini & More â MyQuota" /> 30 <meta name="twitter:description" content="AI quota tracker and token limit monitoring for Claude, ChatGPT, Gemini and more AI tools. 100% local, free." /> 31 <meta name="twitter:image" content="https://myquota.ai/og-image.png" /> 32 <meta name="twitter:image:alt" content="MyQuota promo graphic: "Your AI usage changes. MyQuota adapts." â two popup screenshots showing spend and quota tracking across 10+ AI providers" /> 33 34 <link rel="icon" href="./favicon.ico" sizes="any" /> 35 <link rel="icon" type="image/svg+xml" href="./favicon.svg" /> 36 <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32.png" /> 37 <link rel="icon" type="image/png" sizes="192x192" href="./favicon-192.png" /> 38 <link rel="apple-touch-icon" href="./favicon-192.png" /> 39 40
40<script type="application/ld+json"> 41 { 42 "@context": "https://schema.org", 43 "@type": "SoftwareApplication", 44 "name": "MyQuota", 45 "url": "https://myquota.ai/", 46 "description": "AI quota tracker and token limit monitoring for Claude, ChatGPT, Gemini and more AI tools. 100% local, free.", 47 "sameAs": [ 48 "https://chromewebstore.google.com/detail/myquota-%E2%80%94-ai-usage-cost-t/emlnndkcdmgajmclfoiechengkhagejh", 49 "https://www.youtube.com/@MyQuota", 50 "https://www.reddit.com/r/MyQuota", 51 "https://x.com/myquota_ai", 52 "https://www.instagram.com/myquota_ai", 53 "https://www.facebook.com/MyQuota" 54 ], 55 "operatingSystem": "Desktop Chromium browsers (Chrome, Edge, Brave, Arc)", 56 "applicationCategory": "BrowserApplication", 57 "offers": { 58 "@type": "Offer", 59 "price": "0", 60 "priceCurrency": "USD" 61 }, 62 "softwareVersion": "0.6.67", 63 "screenshot": "https://myquota.ai/og-image.png" 64 } 65 </script>
65 66
66<script type="module" crossorigin src="./assets/main-CSyd-zw1.js"></script>
66 67 <link rel="stylesheet" crossorigin href="./assets/main-DQtqnd86.css">
68<script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoObject","name":"MyQuota promo â up and running in under a minute","description":"AI quota tracker and token limit monitoring for Claude, ChatGPT, Gemini and more AI tools. 100% local, free.","thumbnailUrl":"https://myquota.ai/video-poster.jpg","uploadDate":"2026-07-09","duration":"PT16S","embedUrl":"https://www.youtube-nocookie.com/embed/ogPjAzxrG6Y"}</script>
vendor: 1 bytes, line 68
68
69<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is MyQuota really free?","acceptedAnswer":{"@type":"Answer","text":"Yes â MyQuota is completely free with no paid tiers, no trials, and no account required. Install it and it works."}},{"@type":"Question","name":"Why does Gemini show 0% or \"stale\"?","acceptedAnswer":{"@type":"Answer","text":"This can happen if you're signed into more than one Google account â Gemini uses a separate address for each one, and MyQuota can briefly target the wrong one. It corrects itself automatically the next time you open a Gemini tab."}},{"@type":"Question","name":"Why did a background tab open when I hit Refresh?","acceptedAnswer":{"@type":"Answer","text":"Some providers won't let MyQuota read your usage directly from the page you're on, so it briefly opens a hidden tab to check for you, then closes it automatically. No action needed."}},{"@type":"Question","name":"Does it send my data anywhere?","acceptedA
69nswer":{"@type":"Answer","text":"No. There is no backend. Everything is calculated locally in your browser, and your 90-day usage history is stored only on your device. Only your settings follow you across your own Chrome browsers, the same way Chrome already syncs your bookmarks."}},{"@type":"Question","name":"Which providers are supported?","acceptedAnswer":{"@type":"Answer","text":"MyQuota supports 10+ AI providers today, with their session, daily, weekly and recurring limits, wherever each provider makes that information available."}},{"@type":"Question","name":"How is MyQuota different from other usage trackers?","acceptedAnswer":{"@type":"Answer","text":"Most only watch one AI tool and stop at a raw number. MyQuota tracks 10+ AI providers together, adds up what they're costing you, and keeps a history you can look back on â free, with no account or paid tier."}},{"@type":"Question","name":"How does it read my usage without an API key?","acceptedAnswer":{"@type":"Answer","text":"MyQuota quietly reads the usage numbers the AI site already shows or loads for its own page while you browse normally. It never changes anything you see or type â no API key or account needed."}}
69,{"@type":"Question","name":"Will it work in my browser?","acceptedAnswer":{"@type":"Answer","text":"MyQuota is published on the Chrome Web Store and installs on Chrome plus any Chromium-based browser that supports Manifest V3 extensions and can install from the Chrome Web Store â Edge, Brave, and Arc included."}},{"@type":"Question","name":"Can I get alerted before I hit a limit?","acceptedAnswer":{"@type":"Answer","text":"Yes. Enable notifications and set thresholds â globally or per provider â and MyQuota fires a desktop alert at 80% and 95% of any quota or budget, even when the popup is closed."}}]}</script>
69 70</head> 71<body> 72 73 <!-- ============================ NAV ============================ --> 74 <nav class="nav"> 75 <div class="nav__inner"> 76 <a href="#top" class="logo"> 77 <svg class="logo__mark logo__pulse" viewBox="0 0 24 24" width="30" height="30" aria-hidden="true"> 78 <defs><mask id="lh-nav" maskUnits="userSpaceOnUse" x="-2" y="-2" width="28" height="28"><rect x="-2" y="-2" width="28" height="28" fill="#ffffff"/><path d="M 17.95 16.69 L 17.89 16.97 L 17.85 17.24 L 17.82 17.51 L 17.81 17.77 L 17.81 18.03 L 17.83 18.28 L 17.87 18.52 L 17.94 18.76 L 18.02 19 L 18.13 19.23 L 18.27 19.45 L 18.43 19.66" fill="none" stroke="#000000" stroke-width="5.9" stroke-linecap="round"/></mask></defs> 79 <path d="M 17.44 16.41 A 7 7 0 1 1 18.76 13.81" fill="none" stroke="var(--brand)" stroke-width="3.2" stroke-linecap="round" mask="url(#lh-nav)" /> 80 <path d="M 18.76 13.81 C 18.17 16.03 17.14 18.13 18.43 19.66" fill="none" stroke="var(--brand)" stroke-width="3.2" stroke-linecap="round" /> 81 </svg> 82 <span class="logo__word logo__word--light">My<span class="logo__word-accent">Quota</span></span> 83 </a> 84 <div class="nav__right"> 85 <div class="nav__links"> 86 <a href="#features">Features</a> 87 <a href="#dashboard">Dashboard</a> 88 <a href="#playground">Playground</a> 89 <a href="#how-tracking-works">How it works</a> 90 <a href="#privacy">Privacy</a> 91 <a href="#faq">FAQ</a> 92 </div> 93 <a href="https://chromewebstore.google.com/detail/myquota-%E2%80%94-ai-usage-cost-t/emlnndkcdmgajmclfoiechengkhagejh" target="_blank" rel="noopener noreferrer" class="btn btn--primary btn--sm" data-cta="install"> 94 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.66 5l4.95 8.57A4 4 0 0 1 12 8h9.54A10 10 0 0 0 12 2Zm9.99 6.5h-9.9a3.5 3.5 0 0 1 3.03 5.25l-4.4 7.62A10 10 0 0 0 21.99 8.5ZM8.6 13.78 3.7 5.32a10 10 0 0 0 6.46 16.6l4.4-7.62a3.49 3.49 0 0 1-5.96-.52Z"></path></svg> 95 <span class="cta-label">Add to Chrome</span> 96 </a> 97 <details class="nav__mobile"> 98 <summary class="nav__mobile-toggle" aria-label="Open menu"> 99 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"></path></svg> 100 </summary> 101 <nav class="nav__mobile-panel"> 102 <a href="#features">Features</a> 103 <a href="#dashboard">Dashboard</a> 104 <a href="#playground">Playground</a> 105 <a href="#how-tracking-works">How it works</a> 106 <a href="#privacy">Privacy</a> 107 <a href="#faq">FAQ</a> 108 <a href="https://chromewebstore.google.com/detail/myquota-%E2%80%94-ai-usage-cost-t/emlnndkcdmgajmclfoiechengkhagejh" target="_blank" rel="noopener noreferrer" class="nav__mobile-cta" data-cta="install"><span class="cta-label">Add to Chrome â Free</span></a> 109 </nav> 110 </details> 111 </div> 112 </div> 113 </nav> 114 115 <!-- ============================ HERO ============================ --> 116 <header id="top" class="hero"> 117 <div class="hero__glow hero__glow--a" aria-hidden="true"></div> 118 <div class="hero__glow hero__glow--b" aria-hidden="true"></div> 119 120 <div class="container hero__grid"> 121 <!-- LEFT --> 122 <div data-reveal> 123 <div class="eyebrow eyebrow--pill"> 124 <span class="dot dot--pulse"></span> 125 Free Chrome extension · 100% private 126 </div> 127 <h1 class="hero__title">AI Quota & Usage<br />Tracker.</h1> 128 <p class="hero__subtitle">See how much of each AI you've used â and what it's costing you â at a glance. MyQuota keeps 10+ AI providers in one place, so you're never caught out by a limit or a surprise bill.</p> 129 130 <div class="hero__actions"> 131 <a href="https://chromewebstore.google.com/detail/myquota-%E2%80%94-ai-usage-cost-t/emlnndkcdmgajmclfoiechengkhagejh" target="_blank" rel="noopener noreferrer" class="btn btn--primary" data-cta="install"> 132 <svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.66 5l4.95 8.57A4 4 0 0 1 12 8h9.54A10 10 0 0 0 12 2Zm9.99 6.5h-9.9a3.5 3.5 0 0 1 3.03 5.25l-4.4 7.62A10 10 0 0 0 21.99 8.5ZM8.6 13.78 3.7 5.32a10 10 0 0 0 6.46 16.6l4.4-7.62a3.49 3.49 0 0 1-5.96-.52Z"></path></svg>
133 <span class="cta-label">Add to Chrome â Free</span> 134 </a> 135 <a href="#how-tracking-works" class="btn btn--ghost"> 136 See how it works 137 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"></path></svg> 138 </a> 139 </div> 140 <p class="hero__mobile-note">MyQuota is a desktop browser extension â save this page and open it on your computer to install.</p> 141 142 <div class="hero__trust"> 143 <span><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="oklch(72% 0.13 155)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>No account</span> 144 <span><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="oklch(72% 0.13 155)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>100% local</span> 145 <span><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="oklch(72% 0.13 155)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>Free forever</span> 146 </div> 147 148 <p class="body-sm hero__compatibility">Supported on Chromium desktop browsers: Chrome, Edge, Brave, and Arc.</p> 149 <div class="hero__social-proof"> 150 <svg width="16" height="16" viewBox="0 0 24 24" fill="oklch(80% 0.15 85)" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg> 151 <span class="body-sm">Trusted by AI users worldwide</span> 152 </div> 153 </div> 154 155 <!-- RIGHT â static screenshot of the real extension popup, captured from the 156 current build by scripts/promo/capture-store-screenshots.mjs (WEB-11). 157 The interactive demo lives in #playground. --> 158 <div data-reveal class="hero__mock-wrap"> 159 <div class="hero__mock-glow" aria-hidden="true"></div> 160 <div class="hero__shot-wrap"> 161 <picture> 162 <source srcset="shots/popup.avif" type="image/avif" /> 163 <source srcset="shots/popup.webp" type="image/webp" /> 164 <img class="hero__shot" src="./shots/popup.png" width="800" height="1200" alt="The MyQuota popup: a monthly spend dial at 41% used, a Codex session alert, and per-provider usage rings for Claude, Codex and Gemini" fetchpriority="high" decoding="async" /> 165 </picture> 166 <a class="hero__shot-cta" href="#playground"><span class="dot dot--pulse"></span>Try the interactive demo</a> 167 </div> 168 </div> 169 </div> 170 </header> 171 172 <main> 173 <!-- ============================ PROVIDER STRIP ============================ --> 174 <section class="provider-strip"> 175 <div class="container"> 176 <p data-reveal class="eyebrow eyebrow--center">One popup · every assistant you use</p> 177 <div data-reveal class="provider-strip__row"> 178 <div class="provider-chip"> 179 <span class="provider-chip__mono" style="color: oklch(70% 0.14 36); background: oklch(70% 0.14 36 / 0.16);">C</span> 180 <span class="provider-chip__label">Claude</span> 181 </div> 182 <div class="provider-chip"> 183 <span class="provider-chip__mono" style="color: oklch(72% 0.11 169); background: oklch(72% 0.11 165 / 0.16);">X</span> 184 <span class="provider-chip__label">Codex</span> 185 </div> 186 <div class="provider-chip"> 187 <span class="provider-chip__mono" style="color: oklch(68% 0.17 250); background: oklch(68% 0.17 250 / 0.16);">G</span> 188 <span class="provider-chip__label">Gemini</span> 189 </div> 190 <div class="provider-chip"> 191 <span class="provider-chip__mono" style="color: oklch(74% 0.04 285); background: oklch(74% 0.04 285 / 0.18);">Cr</span> 192 <span class="provider-chip__label">Cursor</span> 193 </div> 194 <div class="provider-chip">
195 <span class="provider-chip__mono" style="color: oklch(72% 0.10 210); background: oklch(72% 0.10 195 / 0.16);">Px</span> 196 <span class="provider-chip__label">Perplexity</span> 197 </div> 198 <div class="provider-chip"> 199 <span class="provider-chip__mono" style="color: oklch(72% 0.14 300); background: oklch(72% 0.14 300 / 0.16);">Gh</span> 200 <span class="provider-chip__label">Copilot</span> 201 </div> 202 </div> 203 </div> 204 </section> 205 206 <!-- ============================ FEATURES ============================ --> 207 <section id="features" class="section section--light"> 208 <div class="container"> 209 <div data-reveal class="section-head"> 210 <div class="eyebrow">Features</div> 211 <h2 class="h2 h2--on-light">Read your usage like an instrument</h2> 212 <p class="lede lede--on-light">No dashboards to set up, no accounts to connect. MyQuota reads what your providers already know â and shows it to you at a glance.</p> 213 </div> 214 215 <div class="spotlight-row"> 216 <div data-reveal class="spotlight spotlight--light"> 217 <div class="icon-tile icon-tile--brand-soft"> 218 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0"></path><path d="M12 7v5l3 2"></path></svg> 219 </div> 220 <h3 class="h3 h3--on-light">Real-time quota bars</h3> 221 <p class="body-sm body-sm--on-light">See exactly how close you are to your session, daily, weekly and recurring limits â updated as you work.</p> 222 <div class="vignette"> 223 <div class="quota-row"><div class="quota-row__top"><span>Claude · session</span><span style="color: oklch(56% 0.14 36);">95%</span></div><div class="bar"><div class="bar__fill" style="width:95%;background:oklch(56% 0.14 36);"></div></div></div> 224 <div class="quota-row"><div class="quota-row__top"><span>Codex · session</span><span style="color: oklch(50% 0.10 169);">88%</span></div><div class="bar"><div class="bar__fill" style="width:88%;background:oklch(50% 0.10 169);"></div></div></div> 225 <div class="quota-row"><div class="quota-row__top"><span>Gemini · weekly</span><span style="color: oklch(52% 0.18 250);">41%</span></div><div class="bar"><div class="bar__fill" style="width:41%;background:oklch(52% 0.18 250);"></div></div></div> 226 </div> 227 </div> 228 229 <div data-reveal class="spotlight spotlight--dark"> 230 <div class="icon-tile icon-tile--brand-strong"> 231 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="22"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg> 232 </div> 233 <h3 class="h3 h3--on-dark">Cost & spend tracker</h3> 234 <p class="body-sm body-sm--on-dark">Track projected USD spend per provider against a monthly cap â and catch the one that's running hot.</p> 235 <div class="spend-vignette"> 236 <div class="spend-vignette__amount"><span>$60</span><small>.80</small><em>of $150 cap</em></div> 237 <div class="stack-bar stack-bar--dark"> 238 <div class="stack-bar__seg" style="width:31%;background:oklch(70% 0.14 36);"></div> 239 <div class="stack-bar__seg" style="width:10%;background:oklch(70% 0.08 210);"></div> 240 </div> 241 <div class="spend-vignette__legend"> 242 <span><span class="dot-sq" style="background:oklch(70% 0.14 36);"></span>Claude $46.30</span> 243 <span><span class="dot-sq" style="background:oklch(70% 0.08 210);"></span>Perplexity $14.50</span> 244 </div> 245 </div> 246 </div> 247 </div> 248 249 <div class="feature-grid"> 250 <div data-reveal class="feature-card"> 251 <div class="icon-tile icon-tile--brand-soft"> 252 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20"></path><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg> 253 </div> 254 <h3 class="h3 h3--on-light">Adaptive Hero</h3> 255 <p class="body-sm body-sm--on-light">The dashboard automatically shows whichever matters more right now â your spend when you're tracking cost, or your usage limit when you're not â so the number you need is always front and center.</p> 256 </div> 257 <div data-reveal class="feature-card"> 258 <div class="icon-tile icon-tile--brand-soft"> 259 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path></svg> 260 </div> 261 <h3 class="h3 h3--on-light">Budget alerts</h3> 262 <p class="body-sm body-sm--on-light">Set global or per-provider thresholds and get a desktop notification at 80% or 95% of any quota.</p> 263 </div> 264 <div data-reveal class="feature-card"> 265 <div class="icon-tile icon-tile--brand-soft"> 266 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"></path><path d="m19 9-5 5-4-4-3 3"></path></svg> 267 </div> 268 <h3 class="h3 h3--on-light">90-day history</h3> 269 <p class="body-sm body-sm--on-light">See your usage trends at a glance, then export the data whenever you want.</p> 270 </div> 271 <div data-reveal class="feature-card"> 272 <div class="icon-tile icon-tile--brand-soft"> 273 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path><path d="M3 21v-5h5"></path></svg> 274 </div> 275 <h3 class="h3 h3--on-light">Cross-device sync</h3> 276 <p class="body-sm body-sm--on-light">Settings and latest snapshots follow you across Chrome browsers via your own Google account.</p> 277 </div> 278 <div data-reveal class="feature-card"> 279 <div class="icon-tile icon-tile--brand-soft"> 280 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="M3 9h18"></path></svg> 281 </div> 282 <h3 class="h3 h3--on-light">Standalone dashboard</h3> 283 <p class="body-sm body-sm--on-light">Pop MyQuota out as a floating always-on window â monitor usage without burning a tab.</p> 284 </div> 285 <div data-reveal class="feature-card"> 286 <div class="icon-tile icon-tile--brand-soft"> 287 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 9V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4"></path><rect width="10" height="7" x="12" y="13" rx="2"></rect></svg> 288 </div> 289 <h3 class="h3 h3--on-light">Pulse Window</h3> 290 <p class="body-sm body-sm--on-light">A small draggable widget shows quota and reset countdowns right on the provider's own page â no popup to open, no tab to switch.</p> 291 </div> 292 <div data-reveal class="feature-card"> 293 <div class="icon-tile icon-tile--brand-soft"> 294 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="M14 4v16"></path></svg> 295 </div> 296 <h3 class="h3 h3--on-light">Side panel mode</h3> 297 <p class="body-sm body-sm--on-light">Switch "Open from toolbar" to Side panel in Settings to keep MyQuota pinned open alongside the page you're working in.</p> 298 </div> 299 </div> 300 </div> 301 </section> 302 303 <!-- ============================ DASHBOARD SHOWCASE ============================ --> 304 <section id="dashboard" class="section section--dark section--glow"> 305 <div class="container"> 306 <div data-reveal class="section-head section-head--center"> 307 <div class="eyebrow eyebrow--brand">Dashboard</div> 308 <h2 class="h2 h2--on-dark">The whole picture, on one screen</h2> 309 <p class="lede lede--on-dark">When the popup isn't enough, pop out the full dashboard â spend, daily pace, every provider's quota, reset timeline and history in a single calm view.</p> 310 </div> 311 312 <div data-reveal class="browser-frame browser-frame--static"> 313 <div class="browser-frame__chrome">
314 <span class="browser-frame__dots"><span></span><span></span><span></span></span> 315 <span class="browser-frame__url"> 316 <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="oklch(56% 0.12 155)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"></rect><path d="M8 11V7a4 4 0 0 1 8 0v4"></path></svg> 317 myquota://dashboard 318 </span> 319 <span class="browser-frame__spacer"></span> 320 </div> 321 <picture> 322 <source srcset="shots/dashboard.avif" type="image/avif" /> 323 <source srcset="shots/dashboard.webp" type="image/webp" /> 324 <img class="browser-frame__shot" src="./shots/dashboard.png" width="1280" height="800" alt="The MyQuota dashboard overview: 41% of a US dollars 150 monthly budget used, a spending-pace projection, and provider quota cards for Claude, Codex and Gemini" loading="lazy" decoding="async" /> 325 </picture> 326 </div> 327 <p data-reveal class="browser-frame__cta"><a href="#playground"><span class="dot dot--pulse"></span>Explore the full dashboard in the Playground</a></p> 328 </div> 329 </section> 330 331 <!-- ============================ PLAYGROUND ============================ --> 332 <section id="playground" class="section section--light-2"> 333 <div class="container"> 334 <div data-reveal class="section-head section-head--center"> 335 <div class="eyebrow">Playground</div> 336 <h2 class="h2 h2--on-light">Try it before you install it</h2> 337 <p class="lede lede--on-light">Drag the sliders or pick a scenario and watch the popup, dashboard and Pulse Window widget react in real time. Everything here is simulated â nothing you do on this page ever reads your actual usage.</p> 338 </div> 339 340 <p data-reveal id="playgroundInstallNote" class="playground-install-note" hidden> 341 <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> 342 MyQuota is already installed in this browser â the controls below are a simulator; open the extension for your real numbers. 343 </p> 344 345 <div data-reveal class="playground-shell"> 346 <div class="playground-controls"> 347 <div class="playground-controls__group"> 348 <span class="playground-controls__label">Scenario</span> 349 <div class="playground-presets" role="group" aria-label="Scenario presets"> 350 <button type="button" class="preset-btn" data-preset="calm">Calm week</button> 351 <button type="button" class="preset-btn" data-preset="crunch">Limit crunch</button> 352 <button type="button" class="preset-btn" data-preset="reset">Just reset</button> 353 </div> 354 <p class="playground-callout" id="playgroundScenarioCallout" aria-live="polite" hidden></p> 355 </div> 356 357 <div class="playground-controls__group"> 358 <span class="playground-controls__label">View</span> 359 <div class="quota-toggle" role="group" aria-label="Playground preview"> 360 <button type="button" class="quota-toggle__opt quota-toggle__opt--active" id="playgroundViewPopup" data-view="popup" aria-pressed="true">Popup</button> 361 <button type="button" class="quota-toggle__opt" id="playgroundViewDashboard" data-view="dashboard" aria-pressed="false">Dashboard</button> 362 <button type="button" class="quota-toggle__opt" id="playgroundViewWidget" data-view="widget" aria-pressed="false">Widget</button> 363 </div> 364 </div> 365 366 <div class="playground-controls__group" id="widgetProviderGroup" hidden> 367 <span class="playground-controls__label">Preview page</span> 368 <div class="widget-tabs" role="group" aria-label="Choose which provider's page to preview the widget on"> 369 <button type="button" class="widget-tab widget-tab--active" data-provider="claude" aria-pressed="true"><span class="dot-sq" style="background: oklch(56% 0.14 36);"></span>Claude</button> 370 <button type="button" class="widget-tab" data-provider="chatgpt" aria-pressed="false"><span class="dot-sq" style="background: oklch(50% 0.10 169);"></span>Codex</button> 371 <button type="button" class="widget-tab" data-provider="gemini" aria-pressed="false"><span class="dot-sq" style="background: oklch(52% 0.18 250);"></span>Gemini</button> 372 <button type="button" class="widget-tab" data-provider="cursor" aria-pressed="false"><span class="dot-sq" style="background: oklch(50% 0.028 285);"></span>Cursor</button> 373 <button type="button" class="widget-tab" data-provider="perplexity" aria-pressed="false"><span class="dot-sq" style="background: oklch(53% 0.08 210);"></span>Perplexity</button> 374 <button type="button" class="widget-tab" data-provider="copilot" aria-pressed="false"><span class="dot-sq" style="background: oklch(50% 0.14 295);"></span>Copilot</button> 375 <button type="button" class="widget-tab" data-provider="kimi" aria-pressed="false"><span class="dot-sq" style="background: oklch(52% 0.19 257);"></span>Kimi</button> 376 <button type="button" class="widget-tab" data-provider="notebook" aria-pressed="false"><span class="dot-sq" style="background: oklch(52% 0.19 266);"></span>Notebook</button> 377 </div> 378 </div> 379 380 <div class="playground-controls__group">
381 <span class="playground-controls__label">Session usage</span> 382 <div class="playground-sliders"> 383 <label class="playground-slider"> 384 <span class="playground-slider__head"><span>Claude</span><output id="sliderOut-claude" for="slider-claude">84%</output></span> 385 <input type="range" min="0" max="100" value="84" id="slider-claude" data-provider="claude" aria-label="Claude session usage percent" /> 386 </label> 387 <label class="playground-slider"> 388 <span class="playground-slider__head"><span>Codex</span><output id="sliderOut-chatgpt" for="slider-chatgpt">100%</output></span> 389 <input type="range" min="0" max="100" value="100" id="slider-chatgpt" data-provider="chatgpt" aria-label="Codex session usage percent" /> 390 </label> 391 <label class="playground-slider"> 392 <span class="playground-slider__head"><span>Gemini</span><output id="sliderOut-gemini" for="slider-gemini">88%</output></span> 393 <input type="range" min="0" max="100" value="88" id="slider-gemini" data-provider="gemini" aria-label="Gemini session usage percent" /> 394 </label> 395 <label class="playground-slider"> 396 <span class="playground-slider__head"><span>Cursor</span><output id="sliderOut-cursor" for="slider-cursor">22%</output></span> 397 <input type="range" min="0" max="100" value="22" id="slider-cursor" data-provider="cursor" aria-label="Cursor session usage percent" /> 398 </label> 399 <label class="playground-slider"> 400 <span class="playground-slider__head"><span>Perplexity</span><output id="sliderOut-perplexity" for="slider-perplexity">41%</output></span> 401 <input type="range" min="0" max="100" value="41" id="slider-perplexity" data-provider="perplexity" aria-label="Perplexity session usage percent" /> 402 </label> 403 <label class="playground-slider"> 404 <span class="playground-slider__head"><span>Copilot</span><output id="sliderOut-copilot" for="slider-copilot">63%</output></span> 405 <input type="range" min="0" max="100" value="63" id="slider-copilot" data-provider="copilot" aria-label="Copilot session usage percent" /> 406 </label> 407 <label class="playground-slider"> 408 <span class="playground-slider__head"><span>Kimi</span><output id="sliderOut-kimi" for="slider-kimi">55%</output></span> 409 <input type="range" min="0" max="100" value="55" id="slider-kimi" data-provider="kimi" aria-label="Kimi session usage percent" /> 410 </label> 411 <label class="playground-slider"> 412 <span class="playground-slider__head"><span>Notebook</span><output id="sliderOut-notebook" for="slider-notebook">40%</output></span> 413 <input type="range" min="0" max="100" value="40" id="slider-notebook" data-provider="notebook" aria-label="Gemini Notebook session usage percent" /> 414 </label> 415 <label class="playground-slider"> 416 <span class="playground-slider__head"><span>Grok</span><output id="sliderOut-grok" for="slider-grok">30%</output></span> 417 <input type="range" min="0" max="100" value="30" id="slider-grok" data-provider="grok" aria-label="Grok session usage percent" /> 418 </label> 419 <label class="playground-slider"> 420 <span class="playground-slider__head"><span>Kiro</span><output id="sliderOut-kiro" for="slider-kiro">20%</output></span> 421 <input type="range" min="0" max="100" value="20" id="slider-kiro" data-provider="kiro" aria-label="Kiro session usage percent" /> 422 </label> 423 <label class="playground-slider"> 424 <span class="playground-slider__head"><span>Fireflies</span><output id="sliderOut-fireflies" for="slider-fireflies">35%</output></span> 425 <input type="range" min="0" max="100" value="35" id="slider-fireflies" data-provider="fireflies" aria-label="Fireflies session usage percent" /> 426 </label> 427 </div> 428 </div> 429 430 <button type="button" class="playground-copy-link" id="playgroundCopyLink"> 431 <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
432 <span class="playground-copy-link__label">Copy link to this view</span> 433 </button> 434 </div> 435 436 <div class="playground-preview"> 437 <div id="playgroundPopupView" class="playground-preview__pane"> 438 <div id="popupDemo" class="popup-mock" role="group" aria-label="Interactive MyQuota popup preview, with live sample data. Click a provider to expand it."> 439 <div id="popupDemoLive" class="sr-only" aria-live="polite"></div> 440 <div class="popup-mock__header"> 441 <div class="popup-mock__brand"> 442 <svg class="logo__pulse" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"> 443 <defs><mask id="lh-popupmock" maskUnits="userSpaceOnUse" x="-2" y="-2" width="28" height="28"><rect x="-2" y="-2" width="28" height="28" fill="#ffffff"/><path d="M 17.95 16.69 L 17.89 16.97 L 17.85 17.24 L 17.82 17.51 L 17.81 17.77 L 17.81 18.03 L 17.83 18.28 L 17.87 18.52 L 17.94 18.76 L 18.02 19 L 18.13 19.23 L 18.27 19.45 L 18.43 19.66" fill="none" stroke="#000000" stroke-width="5.9" stroke-linecap="round"/></mask></defs> 444 <path d="M 17.44 16.41 A 7 7 0 1 1 18.76 13.81" fill="none" stroke="oklch(57% 0.19 40)" stroke-width="3.2" stroke-linecap="round" mask="url(#lh-popupmock)"></path> 445 <path d="M 18.76 13.81 C 18.17 16.03 17.14 18.13 18.43 19.66" fill="none" stroke="oklch(57% 0.19 40)" stroke-width="3.2" stroke-linecap="round"></path> 446 </svg> 447 <span class="logo__word">My<span style="color: oklch(57% 0.19 40);">Quota</span></span> 448 </div> 449 <div class="popup-mock__icons"> 450 <button type="button" id="demoRefreshBtn" class="icon-btn" aria-label="Refresh sample data"> 451 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11.5a8 8 0 1 1-2.34-5.66"></path><path d="M20 4v4h-4"></path></svg> 452 </button> 453 <button type="button" id="demoDashboardBtn" class="icon-btn" aria-label="Jump to the dashboard preview"> 454 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"></path></svg> 455 </button> 456 <button type="button" id="demoQuotaModeBtn" class="icon-btn" aria-pressed="false" aria-label="Toggle quota display between used and remaining"> 457 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9 1.7 1.7 0 0 0 4.3 7.2l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9A1.7 1.7 0 0 0 10 3.1V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"></path></svg> 458 </button> 459 </div> 460 </div> 461 462 <div class="popup-mock__body"> 463 <!-- COST hero (Adaptive hero, cost mode) --> 464 <div class="popup-mock__cost" id="heroCostView"> 465 <div class="popup-mock__cost-row"> 466 <div class="ring ring--md"> 467 <svg viewBox="0 0 72 72" width="72" height="72"> 468 <circle cx="36" cy="36" r="32.75" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="6.5"></circle> 469 <circle cx="36" cy="36" r="32.75" fill="none" stroke="oklch(57% 0.19 40)" stroke-width="6.5" stroke-linecap="round" stroke-dasharray="51.44 154.33" transform="rotate(-90 36 36)"></circle> 470 </svg> 471 <div class="ring__label"> 472 <div class="ring__pct"><span class="qty-num">25</span><small>%</small></div> 473 <div class="ring__caption">USED</div> 474 </div> 475 </div> 476 <div class="popup-mock__spend"> 477 <div class="popup-mock__spend-top">
478 <span class="label-sm">Monthly spend</span> 479 <span class="trend-chip"> 480 <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6"></path></svg>13.7% 481 </span> 482 </div> 483 <div class="popup-mock__spend-amount"><span id="heroSpendMain">$38</span><small>.20</small><em>of $150</em></div> 484 <div class="pace-note"><span class="dot dot--good"></span>under pace · on track for $45.84 this month</div> 485 </div> 486 </div> 487 <div class="hr"></div> 488 <div class="stack-bar"> 489 <div class="stack-bar__seg" style="width: 12.27%; background: oklch(56% 0.14 36);"></div> 490 <div class="stack-bar__seg" style="width: 8.4%; background: oklch(50% 0.10 169);"></div> 491 <div class="stack-bar__seg" style="width: 4.8%; background: oklch(52% 0.18 250);"></div> 492 <div class="stack-bar__pace" style="left: 83%;"></div> 493 </div> 494 <div class="stack-bar__pace-label" style="left: 83%;">pace</div> 495 <button type="button" id="heroModeBtn" class="hero-mode-btn" aria-pressed="false">Quota view</button> 496 </div> 497 498 <!-- QUOTA hero (Adaptive hero, quota mode â soonest-resetting session) --> 499 <div class="popup-mock__cost" id="heroQuotaView" hidden> 500 <div class="popup-mock__cost-row"> 501 <div class="ring ring--md" data-quota-fig="100"> 502 <svg viewBox="0 0 72 72" width="72" height="72"> 503 <circle cx="36" cy="36" r="32.75" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="6.5"></circle> 504 <circle class="ring-fill" cx="36" cy="36" r="32.75" fill="none" stroke="oklch(50% 0.10 169)" stroke-width="6.5" stroke-linecap="round" stroke-dasharray="205.77 0" transform="rotate(-90 36 36)"></circle> 505 </svg> 506 <div class="ring__label"> 507 <div class="ring__pct"><span class="qty-num">100</span><small>%</small></div> 508 <div class="ring__caption">USED</div> 509 </div> 510 </div> 511 <div class="popup-mock__spend"> 512 <div class="popup-mock__spend-top"> 513 <span class="label-sm">Resets soonest</span> 514 </div> 515 <div class="popup-mock__spend-amount"><span style="font-size: 22px;">Codex</span></div> 516 <div class="pace-note"><span class="dot dot--crit"></span>Session · resets in 2h</div> 517 </div> 518 </div> 519 <button type="button" id="heroModeBtnAlt" class="hero-mode-btn" aria-pressed="true">Cost view</button> 520 </div> 521 522 <!-- URGENCY chip --> 523 <button type="button" class="urgency-chip" id="urgencyChip" aria-expanded="false" aria-controls="detail-chatgpt"> 524 <span class="urgency-chip__label"><span class="dot dot--pulse dot--crit"></span><strong>Codex</strong> session almost out</span> 525 <span class="urgency-chip__meta"><span>100%</span><span class="sep">·</span><span>2h</span> 526 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" style="opacity:.7"><path d="M9 18l6-6-6-6"></path></svg> 527 </span> 528 </button> 529 530 <!-- provider rows --> 531 <div class="provider-rows" id="providerRows"> 532 <button type="button" class="provider-row provider-row--expanded" id="row-claude" data-provider="claude" data-quota-fig="84" aria-expanded="true" aria-controls="detail-claude" style="--ring-color: oklch(56% 0.14 36); --ring-color-soft: oklch(56% 0.14 36 / 0.48);"> 533 <span class="provider-row__grip" aria-hidden="true"></span> 534 <div class="ring ring--sm ring--dual"> 535 <svg viewBox="0 0 46 46" width="46" height="46"> 536 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 537 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="var(--ring-color)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="112.16 21.36" transform="rotate(-90 23 23)"></circle> 538 <circle cx="23" cy="23" r="15.25" fill="none" stroke="oklch(86% 0.006 85)" stroke-width="2.5"></circle> 539 <circle cx="23" cy="23" r="15.25" fill="none" stroke="var(--ring-color-soft)" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="57.49 38.33" transform="rotate(-90 23 23)"></circle> 540 </svg>
541 <span class="ring__mono">C</span> 542 </div> 543 <div class="provider-row__body"> 544 <div class="provider-row__name"><span>Claude</span><span class="plan">Pro</span><span class="chip chip--warn" data-chip="severity">high</span></div> 545 <div class="provider-row__meta">resets <b>2h 14m</b><span class="sep">·</span>$18.40</div> 546 </div> 547 <div class="provider-row__pct" style="color: oklch(60% 0.12 72);"><span class="qty-num">84</span><small>%</small></div> 548 </button> 549 <div class="provider-row-detail" id="detail-claude"> 550 <div class="metric-row" data-quota-fig="84"> 551 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(56% 0.14 36);"></span>Session usage</span><span class="metric-row__val" style="color: oklch(60% 0.12 72);"><span class="qty-num">84</span><small>%</small></span></div> 552 <div class="bar"><div class="bar__fill" style="width: 84%; background: oklch(56% 0.14 36);"></div></div> 553 <div class="metric-row__sub">2h 14m</div> 554 </div> 555 <div class="metric-row" data-quota-fig="60"> 556 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(56% 0.14 36 / 0.52);"></span>Weekly usage</span><span class="metric-row__val"><span class="qty-num">60</span><small>%</small></span></div> 557 <div class="bar"><div class="bar__fill" style="width: 60%; background: oklch(56% 0.14 36 / 0.52);"></div></div> 558 <div class="metric-row__sub">Mon 9:00</div> 559 </div> 560 </div> 561 562 <button type="button" class="provider-row" id="row-chatgpt" data-provider="chatgpt" data-quota-fig="100" aria-expanded="false" aria-controls="detail-chatgpt"> 563 <div class="ring ring--sm"> 564 <svg viewBox="0 0 46 46" width="46" height="46"> 565 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 566 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(50% 0.10 169)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="133.52 0" transform="rotate(-90 23 23)"></circle> 567 </svg> 568 <span class="ring__mono" style="color: oklch(50% 0.10 169);">X</span> 569 </div> 570 <div class="provider-row__body"> 571 <div class="provider-row__name"><span>Codex</span><span class="plan">Plus</span><span class="chip chip--crit" data-chip="severity">critical</span></div> 572 <div class="provider-row__meta">resets <b style="color: oklch(52% 0.18 27);">2h</b><span class="sep">·</span>$12.60</div> 573 </div> 574 <div class="provider-row__pct" style="color: oklch(56% 0.18 27);"><span class="qty-num">100</span><small>%</small></div> 575 </button> 576 <div class="provider-row-detail" id="detail-chatgpt" hidden> 577 <div class="metric-row" data-quota-fig="100"> 578 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(50% 0.10 169);"></span>Session usage</span><span class="metric-row__val" style="color: oklch(56% 0.18 27);"><span class="qty-num">100</span><small>%</small></span></div> 579 <div class="bar"><div class="bar__fill" style="width: 100%; background: oklch(50% 0.10 169);"></div></div> 580 <div class="metric-row__sub">2h</div> 581 </div> 582 </div> 583 584 <button type="button" class="provider-row" id="row-gemini" data-provider="gemini" data-quota-fig="88" aria-expanded="false" aria-controls="detail-gemini"> 585 <div class="ring ring--sm ring--dual"> 586 <svg viewBox="0 0 46 46" width="46" height="46"> 587 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 588 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(52% 0.18 250)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="117.50 16.02" transform="rotate(-90 23 23)"></circle> 589 <circle cx="23" cy="23" r="15.25" fill="none" stroke="oklch(86% 0.006 85)" stroke-width="2.5"></circle> 590 <circle cx="23" cy="23" r="15.25" fill="none" stroke="oklch(52% 0.18 252 / 0.48)" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="39.29 56.54" transform="rotate(-90 23 23)"></circle> 591 </svg>
592 <span class="ring__mono" style="color: oklch(52% 0.18 250);">G</span> 593 </div> 594 <div class="provider-row__body"> 595 <div class="provider-row__name"><span>Gemini</span><span class="plan">Advanced</span> 596 <span class="chip chip--muted"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>stale</span> 597 </div> 598 <div class="provider-row__meta">synced <b>3h ago</b><span class="sep">·</span>$7.20</div> 599 </div> 600 <div class="provider-row__pct provider-row__pct--muted"><span class="qty-num">88</span><small>%</small></div> 601 </button> 602 <div class="provider-row-detail" id="detail-gemini" hidden> 603 <div class="metric-row" data-quota-fig="88"> 604 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(52% 0.18 250);"></span>Session usage</span><span class="metric-row__val"><span class="qty-num">88</span><small>%</small></span></div> 605 <div class="bar"><div class="bar__fill" style="width: 88%; background: oklch(52% 0.18 250);"></div></div> 606 <div class="metric-row__sub">synced 3h ago</div> 607 </div> 608 </div> 609 610 <button type="button" class="provider-row" id="row-cursor" data-provider="cursor" data-quota-fig="22" aria-expanded="false" aria-controls="detail-cursor"> 611 <div class="ring ring--sm"> 612 <svg viewBox="0 0 46 46" width="46" height="46"> 613 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 614 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(50% 0.028 285)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="29.37 104.14" transform="rotate(-90 23 23)"></circle> 615 </svg> 616 <span class="ring__mono" style="color: oklch(50% 0.028 285);">Cr</span> 617 </div> 618 <div class="provider-row__body"> 619 <div class="provider-row__name"><span>Cursor</span><span class="plan">Pro</span></div> 620 <div class="provider-row__meta">resets <b style="color: oklch(56% 0.12 155);">in 12d</b></div> 621 </div> 622 <div class="provider-row__pct"><span class="qty-num">22</span><small>%</small></div> 623 </button> 624 <div class="provider-row-detail" id="detail-cursor" hidden> 625 <div class="metric-row" data-quota-fig="22"> 626 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(50% 0.028 285);"></span>Session usage</span><span class="metric-row__val"><span class="qty-num">22</span><small>%</small></span></div> 627 <div class="bar"><div class="bar__fill" style="width: 22%; background: oklch(50% 0.028 285);"></div></div> 628 <div class="metric-row__sub">resets in 12d</div> 629 </div> 630 </div> 631 632 <button type="button" class="provider-row" id="row-perplexity" data-provider="perplexity" data-quota-fig="41" aria-expanded="false" aria-controls="detail-perplexity"> 633 <div class="ring ring--sm"> 634 <svg viewBox="0 0 46 46" width="46" height="46"> 635 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 636 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(53% 0.08 210)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="54.74 78.78" transform="rotate(-90 23 23)"></circle> 637 </svg> 638 <span class="ring__mono" style="color: oklch(53% 0.08 210);">Px</span> 639 </div> 640 <div class="provider-row__body"> 641 <div class="provider-row__name"><span>Perplexity</span><span class="plan">Pro</span></div> 642 <div class="provider-row__meta">resets <b>in 5d</b></div> 643 </div> 644 <div class="provider-row__pct"><span class="qty-num">41</span><small>%</small></div> 645 </button> 646 <div class="provider-row-detail" id="detail-perplexity" hidden> 647 <div class="metric-row" data-quota-fig="41"> 648 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(53% 0.08 210);"></span>Session usage</span><span class="metric-row__val"><span class="qty-num">41</span><small>%</small></span></div> 649 <div class="bar"><div class="bar__fill" style="width: 41%; background: oklch(53% 0.08 210);"></div></div> 650 <div class="metric-row__sub">resets in 5d</div> 651 </div> 652 </div> 653 654 <button type="button" class="provider-row" id="row-copilot" data-provider="copilot" data-quota-fig="63" aria-expanded="false" aria-controls="detail-copilot"> 655 <div class="ring ring--sm"> 656 <svg viewBox="0 0 46 46" width="46" height="46"> 657 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 658 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(50% 0.14 295)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="84.12 49.40" transform="rotate(-90 23 23)"></circle> 659 </svg>
660 <span class="ring__mono" style="color: oklch(50% 0.14 295);">Gh</span> 661 </div> 662 <div class="provider-row__body"> 663 <div class="provider-row__name"><span>Copilot</span><span class="plan">Business</span></div> 664 <div class="provider-row__meta">resets <b>in 18d</b></div> 665 </div> 666 <div class="provider-row__pct"><span class="qty-num">63</span><small>%</small></div> 667 </button> 668 <div class="provider-row-detail" id="detail-copilot" hidden> 669 <div class="metric-row" data-quota-fig="63"> 670 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(50% 0.14 295);"></span>Session usage</span><span class="metric-row__val"><span class="qty-num">63</span><small>%</small></span></div> 671 <div class="bar"><div class="bar__fill" style="width: 63%; background: oklch(50% 0.14 295);"></div></div> 672 <div class="metric-row__sub">resets in 18d</div> 673 </div> 674 </div> 675 676 <button type="button" class="provider-row" id="row-kimi" data-provider="kimi" data-quota-fig="55" aria-expanded="false" aria-controls="detail-kimi"> 677 <div class="ring ring--sm"> 678 <svg viewBox="0 0 46 46" width="46" height="46"> 679 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 680 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(52% 0.19 257)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="73.43 60.08" transform="rotate(-90 23 23)"></circle> 681 </svg> 682 <span class="ring__mono" style="color: oklch(52% 0.19 257);">K</span> 683 </div> 684 <div class="provider-row__body"> 685 <div class="provider-row__name"><span>Kimi</span><span class="plan">Pro</span></div> 686 <div class="provider-row__meta">resets <b>in 3d</b></div> 687 </div> 688 <div class="provider-row__pct"><span class="qty-num">55</span><small>%</small></div> 689 </button> 690 <div class="provider-row-detail" id="detail-kimi" hidden> 691 <div class="metric-row" data-quota-fig="55"> 692 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(52% 0.19 257);"></span>Session usage</span><span class="metric-row__val"><span class="qty-num">55</span><small>%</small></span></div> 693 <div class="bar"><div class="bar__fill" style="width: 55%; background: oklch(52% 0.19 257);"></div></div> 694 <div class="metric-row__sub">resets in 3d</div> 695 </div> 696 </div> 697 698 <button type="button" class="provider-row" id="row-notebook" data-provider="notebook" data-quota-fig="40" aria-expanded="false" aria-controls="detail-notebook"> 699 <div class="ring ring--sm"> 700 <svg viewBox="0 0 46 46" width="46" height="46"> 701 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 702 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(52% 0.19 266)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="53.41 80.11" transform="rotate(-90 23 23)"></circle> 703 </svg> 704 <span class="ring__mono" style="color: oklch(52% 0.19 266);">Nb</span> 705 </div> 706 <div class="provider-row__body"> 707 <div class="provider-row__name"><span>Notebook</span><span class="plan">Pro</span></div> 708 <div class="provider-row__meta">resets <b>in 5h</b></div> 709 </div> 710 <div class="provider-row__pct"><span class="qty-num">40</span><small>%</small></div> 711 </button> 712 <div class="provider-row-detail" id="detail-notebook" hidden> 713 <div class="metric-row" data-quota-fig="40"> 714 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(52% 0.19 266);"></span>Session usage</span><span class="metric-row__val"><span class="qty-num">40</span><small>%</small></span></div> 715 <div class="bar"><div class="bar__fill" style="width: 40%; background: oklch(52% 0.19 266);"></div></div> 716 <div class="metric-row__sub">resets in 5h</div> 717 </div> 718 </div> 719 720 <button type="button" class="provider-row" id="row-grok" data-provider="grok" data-quota-fig="30" aria-expanded="false" aria-controls="detail-grok"> 721 <div class="ring ring--sm"> 722 <svg viewBox="0 0 46 46" width="46" height="46"> 723 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 724 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(22% 0 0)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="40.06 93.46" transform="rotate(-90 23 23)"></circle> 725 </svg>
726 <span class="ring__mono" style="color: oklch(22% 0 0);">Gk</span> 727 </div> 728 <div class="provider-row__body"> 729 <div class="provider-row__name"><span>Grok</span></div> 730 <div class="provider-row__meta">rolls per query</div> 731 </div> 732 <div class="provider-row__pct"><span class="qty-num">30</span><small>%</small></div> 733 </button> 734 <div class="provider-row-detail" id="detail-grok" hidden> 735 <div class="metric-row" data-quota-fig="30"> 736 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(22% 0 0);"></span>Session usage</span><span class="metric-row__val"><span class="qty-num">30</span><small>%</small></span></div> 737 <div class="bar"><div class="bar__fill" style="width: 30%; background: oklch(22% 0 0);"></div></div> 738 <div class="metric-row__sub">rolls per query</div> 739 </div> 740 </div> 741 742 <button type="button" class="provider-row" id="row-kiro" data-provider="kiro" data-quota-fig="20" aria-expanded="false" aria-controls="detail-kiro"> 743 <div class="ring ring--sm"> 744 <svg viewBox="0 0 46 46" width="46" height="46"> 745 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 746 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(52% 0.19 318)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="26.70 106.81" transform="rotate(-90 23 23)"></circle> 747 </svg> 748 <span class="ring__mono" style="color: oklch(52% 0.19 318);">Kr</span> 749 </div> 750 <div class="provider-row__body"> 751 <div class="provider-row__name"><span>Kiro</span></div> 752 <div class="provider-row__meta">resets with the plan</div> 753 </div> 754 <div class="provider-row__pct"><span class="qty-num">20</span><small>%</small></div> 755 </button> 756 <div class="provider-row-detail" id="detail-kiro" hidden> 757 <div class="metric-row" data-quota-fig="20"> 758 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(52% 0.19 318);"></span>Session usage</span><span class="metric-row__val"><span class="qty-num">20</span><small>%</small></span></div> 759 <div class="bar"><div class="bar__fill" style="width: 20%; background: oklch(52% 0.19 318);"></div></div> 760 <div class="metric-row__sub">resets with the plan</div> 761 </div> 762 </div> 763 764 <button type="button" class="provider-row" id="row-fireflies" data-provider="fireflies" data-quota-fig="35" aria-expanded="false" aria-controls="detail-fireflies"> 765 <div class="ring ring--sm"> 766 <svg viewBox="0 0 46 46" width="46" height="46"> 767 <circle cx="23" cy="23" r="21.25" fill="none" stroke="oklch(93.5% 0.008 85)" stroke-width="3.5"></circle> 768 <circle class="ring-fill" cx="23" cy="23" r="21.25" fill="none" stroke="oklch(57% 0.17 353)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="46.73 86.79" transform="rotate(-90 23 23)"></circle> 769 </svg> 770 <span class="ring__mono" style="color: oklch(57% 0.17 353);">Ff</span> 771 </div> 772 <div class="provider-row__body"> 773 <div class="provider-row__name"><span>Fireflies</span></div> 774 <div class="provider-row__meta">monthly allotment</div> 775 </div> 776 <div class="provider-row__pct"><span class="qty-num">35</span><small>%</small></div> 777 </button> 778 <div class="provider-row-detail" id="detail-fireflies" hidden> 779 <div class="metric-row" data-quota-fig="35"> 780 <div class="metric-row__top"><span class="metric-row__label"><span class="dot-sq" style="background: oklch(57% 0.17 353);"></span>Session usage</span><span class="metric-row__val"><span class="qty-num">35</span><small>%</small></span></div> 781 <div class="bar"><div class="bar__fill" style="width: 35%; background: oklch(57% 0.17 353);"></div></div> 782 <div class="metric-row__sub">monthly allotment</div> 783 </div> 784 </div> 785 </div> 786 </div> 787 788 <footer class="popup-mock__footer">
789 <span class="synced-chip"><span class="dot dot--pulse dot--good" id="syncedDot"></span><span id="syncedMinutes">1</span>m<span class="sep-plain">11 of 11 synced</span></span> 790 <span class="side-panel-label"> 791 <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="M14 4v16"></path></svg> 792 Side Panel 793 </span> 794 </footer> 795 </div> 796 </div> 797 <div id="playgroundDashboardView" class="playground-preview__pane" hidden> 798 <div data-reveal id="dashboardDemo" class="browser-frame" role="group" aria-label="Interactive MyQuota dashboard preview, with live sample data"> 799 <div id="dashboardDemoLive" class="sr-only" aria-live="polite"></div> 800 <div class="browser-frame__chrome"> 801 <span class="browser-frame__dots"><span></span><span></span><span></span></span> 802 <span class="browser-frame__url">
803 <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="oklch(56% 0.12 155)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"></rect><path d="M8 11V7a4 4 0 0 1 8 0v4"></path></svg> 804 myquota://dashboard 805 </span> 806 <span class="browser-frame__spacer"></span> 807 </div> 808 809 <div class="dash"> 810 <div class="dash__topbar"> 811 <div class="dash__brand"> 812 <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><defs><mask id="lh-dashmock" maskUnits="userSpaceOnUse" x="-2" y="-2" width="28" height="28"><rect x="-2" y="-2" width="28" height="28" fill="#ffffff"/><path d="M 17.95 16.69 L 17.89 16.97 L 17.85 17.24 L 17.82 17.51 L 17.81 17.77 L 17.81 18.03 L 17.83 18.28 L 17.87 18.52 L 17.94 18.76 L 18.02 19 L 18.13 19.23 L 18.27 19.45 L 18.43 19.66" fill="none" stroke="#000000" stroke-width="5.9" stroke-linecap="round"/></mask></defs><path d="M 17.44 16.41 A 7 7 0 1 1 18.76 13.81" fill="none" stroke="oklch(57% 0.19 40)" stroke-width="3.2" stroke-linecap="round" mask="url(#lh-dashmock)"></path><path d="M 18.76 13.81 C 18.17 16.03 17.14 18.13 18.43 19.66" fill="none" stroke="oklch(57% 0.19 40)" stroke-width="3.2" stroke-linecap="round"></path></svg> 813 <span class="logo__word">My<span style="color: oklch(57% 0.19 40);">Quota</span></span> 814 <span class="tag">Dashboard</span> 815 </div> 816 <div class="dash__tabs" role="tablist" aria-label="Dashboard sections"> 817 <button type="button" class="dash__tab dash__tab--active" id="dashTab-overview" data-panel="overview" role="tab" aria-selected="true" aria-controls="dashPanel-overview">Overview</button> 818 <button type="button" class="dash__tab" id="dashTab-history" data-panel="history" role="tab" aria-selected="false" aria-controls="dashPanel-history">History</button> 819 <button type="button" class="dash__tab" id="dashTab-settings" data-panel="settings" role="tab" aria-selected="false" aria-controls="dashPanel-settings">Settings</button> 820 </div> 821 <div class="dash__topbar-right"> 822 <span class="synced-chip synced-chip--framed"><span class="dot dot--pulse dot--good"></span>synced <span id="dashSyncedMinutes">1</span>m</span> 823 <button type="button" id="dashRefreshBtn" class="icon-btn icon-btn--framed" aria-label="Refresh sample data"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11.5a8 8 0 1 1-2.34-5.66"></path><path d="M20 4v4h-4"></path></svg></button> 824 </div> 825 </div> 826 827 <div class="dash__body"> 828 <div class="dash__sidebar"> 829 <div class="dash__sidebar-head"><span>Providers</span><span class="count-pill">11 / 11</span></div> 830 <button type="button" class="dash__side-item dash__side-item--active" id="dashSide-overview" data-panel="overview"> 831 <span class="dash__side-icon"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg></span> 832 <span class="dash__side-label">Overview</span> 833 </button> 834 <div class="hr hr--tight"></div> 835 836 <button type="button" class="dash__side-item" data-provider="claude"> 837 <span class="ring ring--xs" data-quota-fig="84"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(56% 0.14 36)" stroke-width="3" stroke-linecap="round" stroke-dasharray="84.4 16.1" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(56% 0.14 36);">C</span></span>
838 <span class="dash__side-body"><span class="dash__side-label-row"><b>Claude</b><span class="chip chip--warn chip--xs" data-chip="severity">high</span></span><small>resets 2h 14m</small></span> 839 </button> 840 <button type="button" class="dash__side-item" data-provider="chatgpt"> 841 <span class="ring ring--xs" data-quota-fig="100"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(50% 0.10 169)" stroke-width="3" stroke-linecap="round" stroke-dasharray="100.5 0" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(50% 0.10 169);">X</span></span> 842 <span class="dash__side-body"><span class="dash__side-label-row"><b>Codex</b><span class="chip chip--crit chip--xs" data-chip="severity">critical</span></span><small>resets 2h</small></span> 843 </button> 844 <button type="button" class="dash__side-item" data-provider="gemini"> 845 <span class="ring ring--xs" data-quota-fig="88"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(52% 0.18 250)" stroke-width="3" stroke-linecap="round" stroke-dasharray="88.5 12.0" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(52% 0.18 250);">G</span></span> 846 <span class="dash__side-body"><span class="dash__side-label-row"><b>Gemini</b></span><small>synced 3h ago</small></span> 847 </button> 848 <button type="button" class="dash__side-item" data-provider="cursor"> 849 <span class="ring ring--xs" data-quota-fig="22"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(50% 0.028 285)" stroke-width="3" stroke-linecap="round" stroke-dasharray="22.1 78.4" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(50% 0.028 285);">Cr</span></span> 850 <span class="dash__side-body"><span class="dash__side-label-row"><b>Cursor</b></span><small>resets in 12d</small></span> 851 </button> 852 <button type="button" class="dash__side-item" data-provider="perplexity"> 853 <span class="ring ring--xs" data-quota-fig="41"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(53% 0.08 210)" stroke-width="3" stroke-linecap="round" stroke-dasharray="41.2 59.3" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(53% 0.08 210);">Px</span></span> 854 <span class="dash__side-body"><span class="dash__side-label-row"><b>Perplexity</b></span><small>resets in 5d</small></span> 855 </button> 856 <button type="button" class="dash__side-item" data-provider="copilot"> 857 <span class="ring ring--xs" data-quota-fig="63"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(50% 0.14 295)" stroke-width="3" stroke-linecap="round" stroke-dasharray="63.3 37.2" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(50% 0.14 295);">Gh</span></span> 858 <span class="dash__side-body"><span class="dash__side-label-row"><b>Copilot</b></span><small>resets in 18d</small></span> 859 </button> 860 <button type="button" class="dash__side-item" data-provider="kimi">
861 <span class="ring ring--xs" data-quota-fig="55"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(52% 0.19 257)" stroke-width="3" stroke-linecap="round" stroke-dasharray="55.3 45.2" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(52% 0.19 257);">K</span></span> 862 <span class="dash__side-body"><span class="dash__side-label-row"><b>Kimi</b></span><small>resets in 3d</small></span> 863 </button> 864 <button type="button" class="dash__side-item" data-provider="notebook"> 865 <span class="ring ring--xs" data-quota-fig="40"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(52% 0.19 266)" stroke-width="3" stroke-linecap="round" stroke-dasharray="40.2 60.3" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(52% 0.19 266);">Nb</span></span> 866 <span class="dash__side-body"><span class="dash__side-label-row"><b>Notebook</b></span><small>resets in 5h</small></span> 867 </button> 868 <button type="button" class="dash__side-item" data-provider="grok"> 869 <span class="ring ring--xs" data-quota-fig="30"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(22% 0 0)" stroke-width="3" stroke-linecap="round" stroke-dasharray="30.2 70.4" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(22% 0 0);">Gk</span></span> 870 <span class="dash__side-body"><span class="dash__side-label-row"><b>Grok</b></span><small>rolls per query</small></span> 871 </button> 872 <button type="button" class="dash__side-item" data-provider="kiro"> 873 <span class="ring ring--xs" data-quota-fig="20"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(52% 0.19 318)" stroke-width="3" stroke-linecap="round" stroke-dasharray="20.1 80.4" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(52% 0.19 318);">Kr</span></span> 874 <span class="dash__side-body"><span class="dash__side-label-row"><b>Kiro</b></span><small>resets with the plan</small></span> 875 </button> 876 <button type="button" class="dash__side-item" data-provider="fireflies"> 877 <span class="ring ring--xs" data-quota-fig="35"><svg viewBox="0 0 36 36" width="36" height="36"><circle cx="18" cy="18" r="16" fill="none" stroke="oklch(89.5% 0.006 85)" stroke-width="3"></circle><circle class="ring-fill" cx="18" cy="18" r="16" fill="none" stroke="oklch(57% 0.17 353)" stroke-width="3" stroke-linecap="round" stroke-dasharray="35.2 65.3" transform="rotate(-90 18 18)"></circle></svg><span class="ring__mono" style="color: oklch(57% 0.17 353);">Ff</span></span> 878 <span class="dash__side-body"><span class="dash__side-label-row"><b>Fireflies</b></span><small>monthly allotment</small></span> 879 </button> 880 </div> 881 882 <div class="dash__main"> 883 <div id="dashPanel-overview" class="dash__panel" role="tabpanel" aria-labelledby="dashTab-overview"> 884 <div class="eyebrow eyebrow--brand eyebrow--sm">Overview</div> 885 <h3 class="dash__greeting">Good afternoon, Alex</h3> 886 887 <div class="dash__hero-grid"> 888 <div class="dash-card dash-card--hero"> 889 <div class="dash-card__row"> 890 <div class="ring ring--lg"> 891 <svg viewBox="0 0 92 92" width="92" height="92"><circle cx="46" cy="46" r="41" fill="none" stroke="oklch(93.2% 0.006 85)" stroke-width="8"></circle><circle cx="46" cy="46" r="41" fill="none" stroke="oklch(57% 0.19 40)" stroke-width="8" stroke-linecap="round" stroke-dasharray="64.4 193.3" transform="rotate(-90 46 46)"></circle></svg> 892 <div class="ring__label"><div class="ring__pct ring__pct--lg"><span>25</span><small>%</small></div><div class="ring__caption">USED</div></div> 893 </div> 894 <div class="popup-mock__spend"> 895 <div class="popup-mock__spend-top"><span class="label-sm">Monthly spend</span><span class="trend-chip"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15l6-6 6 6"></path></svg>13.7%</span></div> 896 <div class="popup-mock__spend-amount popup-mock__spend-amount--lg"><span>$38</span><small>.20</small><em>of $150</em></div> 897 <div class="pace-note"><span class="dot dot--good"></span>under pace · on track for $45.84 this month</div> 898 </div> 899 </div> 900 <div class="hr"></div> 901 <div class="stack-bar"> 902 <div class="stack-bar__seg" style="width:48%;background:oklch(56% 0.14 36);"></div> 903 <div class="stack-bar__seg" style="width:33%;background:oklch(50% 0.10 169);"></div> 904 <div class="stack-bar__seg" style="width:19%;background:oklch(52% 0.18 250);"></div> 905 <div class="stack-bar__pace" style="left: 50.9%;"></div> 906 </div> 907 <div class="stack-bar__pace-label" style="left: 50.9%;">pace</div> 908 </div> 909 910 <div class="dash-card"> 911 <div class="dash-card__title"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="oklch(57% 0.19 40)" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9z"></path></svg>Daily pace & projection</div> 912 <div class="dash-card__big"><span>$1.53</span><small>/ day</small></div> 913 <p class="dash-card__note">At today's rate you'll land ~$104 under your monthly cap. Claude is your heaviest line.</p> 914 <div class="insight-list"> 915 <div class="insight-list__item"><span class="dot-sq dot-sq--round" style="background: oklch(56% 0.18 27);"></span>Codex session is exhausted â resets in 2h.</div> 916 <div class="insight-list__item"><span class="dot-sq dot-sq--round" style="background: oklch(56% 0.12 155);"></span>Cursor has ample headroom this cycle.</div> 917 </div> 918 </div> 919 </div> 920 921 <div class="dash__kpi-grid"> 922 <div class="kpi-card"><span class="kpi-card__label">Active quotas</span><div class="kpi-card__value">11</div><div class="kpi-card__sub">of 11 providers</div></div> 923 <div class="kpi-card"><span class="kpi-card__label">At risk</span><div class="kpi-card__value" style="color: oklch(56% 0.18 27);">2</div><div class="kpi-card__sub">over 80% used</div></div> 924 <div class="kpi-card"><span class="kpi-card__label">Spend this month</span><div class="kpi-card__value">$38.20</div><div class="kpi-card__sub">13.7% vs last month</div></div> 925 <div class="kpi-card"><span class="kpi-card__label">Next reset</span><div class="kpi-card__value" style="color: oklch(60% 0.12 72);">2h</div><div class="kpi-card__sub">
925Codex session</div></div> 926 </div> 927 928 <div class="dash__quotas"> 929 <div class="dash__quotas-head"><h4>Provider quotas</h4><span class="hr-flex"></span></div> 930 <div class="dash__quotas-grid"> 931 <div class="dash-quota-card" data-quota-card="claude"> 932 <div class="dash-quota-card__top"> 933 <span class="provider-chip provider-chip--sq" style="color: oklch(56% 0.14 36); background: oklch(56% 0.14 36 / 0.14);">C</span> 934 <span class="dash-quota-card__name"><span class="dash-quota-card__name-row"><b>Claude</b><span class="chip chip--warn chip--xs" data-chip="severity">high</span></span><small>Pro</small></span> 935 <span class="dash-quota-card__headline" style="color: oklch(60% 0.12 72);" data-quota-fig="84"><span class="qty-num">84</span><small>%</small></span> 936 </div> 937 <div class="bar bar--tall"><div class="bar__fill" style="width:84%;background:oklch(56% 0.14 36);"></div></div> 938 <div class="dash-quota-card__foot"><span>resets 2h 14m</span><span>$18.40</span></div> 939 </div> 940 <div class="dash-quota-card" data-quota-card="chatgpt"> 941 <div class="dash-quota-card__top"> 942 <span class="provider-chip provider-chip--sq" style="color: oklch(50% 0.10 169); background: oklch(50% 0.10 168 / 0.14);">X</span> 943 <span class="dash-quota-card__name"><span class="dash-quota-card__name-row"><b>Codex</b><span class="chip chip--crit chip--xs" data-chip="severity">critical</span></span><small>Plus</small></span> 944 <span class="dash-quota-card__headline" style="color: oklch(56% 0.18 27);" data-quota-fig="100"><span class="qty-num">100</span><small>%</small></span> 945 </div> 946 <div class="bar bar--tall"><div class="bar__fill" style="width:100%;background:oklch(50% 0.10 169);"></div></div> 947 <div class="dash-quota-card__foot"><span>resets 2h</span><span>$12.60</span></div> 948 </div> 949 <div class="dash-quota-card" data-quota-card="gemini"> 950 <div class="dash-quota-card__top"> 951 <span class="provider-chip provider-chip--sq" style="color: oklch(52% 0.18 250); background: oklch(52% 0.18 252 / 0.14);">G</span> 952 <span class="dash-quota-card__name"><span class="dash-quota-card__name-row"><b>Gemini</b></span><small>Advanced</small></span> 953 <span class="dash-quota-card__headline" data-quota-fig="88"><span class="qty-num">88</span><small>%</small></span> 954 </div> 955 <div class="bar bar--tall"><div class="bar__fill" style="width:88%;background:oklch(52% 0.18 250);"></div></div> 956 <div class="dash-quota-card__foot"><span>synced 3h ago</span><span>$7.20</span></div> 957 </div> 958 </div> 959 </div> 960 </div> 961 962 <div id="dashPanel-history" class="dash__panel" role="tabpanel" aria-labelledby="dashTab-history" hidden> 963 <div class="eyebrow eyebrow--brand eyebrow--sm">History</div> 964 <h3 class="dash__greeting">Last 7 days</h3> 965 <div class="dash__quotas-grid" style="margin-top: 20px;"> 966 <div class="dash-card"> 967 <div class="dash-card__title"><span class="dot-sq" style="background: oklch(56% 0.14 36);"></span>Claude · session</div> 968 <svg class="dash-spark" viewBox="0 0 220 56" width="100%" height="56" preserveAspectRatio="none" aria-hidden="true"> 969 <polyline points="0,40 30,34 60,38 90,22 120,26 150,14 180,18 220,10" fill="none" stroke="oklch(56% 0.14 36)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></polyline> 970 </svg> 971 </div> 972 <div class="dash-card"> 973 <div class="dash-card__title"><span class="dot-sq" style="background: oklch(50% 0.10 169);"></span>Codex · session</div> 974 <svg class="dash-spark" viewBox="0 0 220 56" width="100%" height="56" preserveAspectRatio="none" aria-hidden="true">
975 <polyline points="0,30 30,32 60,20 90,24 120,8 150,12 180,6 220,4" fill="none" stroke="oklch(50% 0.10 169)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></polyline> 976 </svg> 977 </div> 978 <div class="dash-card"> 979 <div class="dash-card__title"><span class="dot-sq" style="background: oklch(52% 0.18 250);"></span>Gemini · weekly</div> 980 <svg class="dash-spark" viewBox="0 0 220 56" width="100%" height="56" preserveAspectRatio="none" aria-hidden="true"> 981 <polyline points="0,46 30,44 60,40 90,42 120,36 150,34 180,30 220,26" fill="none" stroke="oklch(52% 0.18 250)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></polyline> 982 </svg> 983 </div> 984 </div> 985 </div> 986 987 <div id="dashPanel-settings" class="dash__panel" role="tabpanel" aria-labelledby="dashTab-settings" hidden> 988 <div class="eyebrow eyebrow--brand eyebrow--sm">Settings</div> 989 <h3 class="dash__greeting">Appearance</h3> 990 <div class="dash-card" style="margin-top: 20px; max-width: 420px;"> 991 <div class="dash-card__title">Quota display</div> 992 <p class="dash-card__note">Show each quota figure as the amount used, or the amount you have left.</p> 993 <div class="quota-toggle" role="group" aria-label="Quota display mode" style="margin-top: 14px;"> 994 <button type="button" class="quota-toggle__opt quota-toggle__opt--active" id="dashQuotaModeUsed" data-mode="used" aria-pressed="true">Used</button> 995 <button type="button" class="quota-toggle__opt" id="dashQuotaModeRemaining" data-mode="remaining" aria-pressed="false">Remaining</button> 996 </div> 997 </div> 998 </div> 999 </div> 1000 </div> 1001 </div> 1002 </div> 1003 </div> 1004 <div id="playgroundWidgetView" class="playground-preview__pane" hidden> 1005 <div class="browser-frame widget-stage" id="widgetDemo" role="group" aria-label="Interactive MyQuota Pulse Window preview, floating over a sample provider page"> 1006 <div id="widgetDemoLive" class="sr-only" aria-live="polite"></div> 1007 <div class="browser-frame__chrome"> 1008 <span class="browser-frame__dots"><span></span><span></span><span></span></span> 1009 <span class="browser-frame__url" id="widgetDemoUrl">claude.ai</span> 1010 <span class="browser-frame__spacer"></span> 1011 </div> 1012 <div class="widget-stage__page" aria-hidden="true"> 1013 <div class="widget-stage__skeleton"> 1014 <div class="widget-stage__line widget-stage__line--sm"></div> 1015 <div class="widget-stage__bubble"></div> 1016 <div class="widget-stage__bubble widget-stage__bubble--alt"></div> 1017 <div class="widget-stage__line"></div> 1018 <div class="widget-stage__line widget-stage__line--md"></div> 1019 <div class="widget-stage__bubble widget-stage__bubble--sm"></div> 1020 </div> 1021 <div class="pw-widget" id="widgetCard" style="--pw-accent: oklch(56% 0.14 36);"> 1022 <div class="pw-widget__head"> 1023 <span class="pw-widget__mark"> 1024 <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"> 1025 <defs><mask id="lh-widgetmock" maskUnits="userSpaceOnUse" x="-2" y="-2" width="28" height="28"><rect x="-2" y="-2" width="28" height="28" fill="#ffffff"/><path d="M 17.95 16.69 L 17.89 16.97 L 17.85 17.24 L 17.82 17.51 L 17.81 17.77 L 17.81 18.03 L 17.83 18.28 L 17.87 18.52 L 17.94 18.76 L 18.02 19 L 18.13 19.23 L 18.27 19.45 L 18.43 19.66" fill="none" stroke="#000000" stroke-width="5.9" stroke-linecap="round"/></mask></defs> 1026 <path d="M 17.44 16.41 A 7 7 0 1 1 18.76 13.81" fill="none" stroke="var(--pw-accent)" stroke-width="3.2" stroke-linecap="round" mask="url(#lh-widgetmock)"></path> 1027 <path d="M 18.76 13.81 C 18.17 16.03 17.14 18.13 18.43 19.66" fill="none" stroke="var(--pw-accent)" stroke-width="3.2" stroke-linecap="round"></path> 1028 </svg> 1029 </span>
1030 <span class="pw-widget__name">My<span class="pw-widget__q">Quota</span></span> 1031 <span class="pw-widget__chip" id="widgetStateChip" hidden>â Stale</span> 1032 <span class="pw-widget__open" aria-hidden="true">â</span> 1033 <span class="pw-widget__close" aria-hidden="true">â</span> 1034 </div> 1035 <div class="pw-widget__body"> 1036 <div class="pw-widget__metric" id="widgetSessionRow" data-quota-fig="84"> 1037 <div class="pw-widget__mrow"> 1038 <span class="pw-widget__mlabel">Session</span> 1039 <span class="pw-widget__mval"><span class="qty-num">84</span><span class="pw-widget__msym">%</span><span class="qty-word pw-widget__mword">used</span></span> 1040 </div> 1041 <div class="bar pw-widget__bar"><div class="bar__fill" id="widgetSessionFill" style="width: 84%; background: oklch(56% 0.14 36);"></div></div> 1042 <div class="pw-widget__mfoot" id="widgetSessionFoot">2h 14m</div> 1043 </div> 1044 <div class="pw-widget__metric" id="widgetWeeklyRow" data-quota-fig="60"> 1045 <div class="pw-widget__mrow"> 1046 <span class="pw-widget__mlabel">Weekly</span> 1047 <span class="pw-widget__mval"><span class="qty-num">60</span><span class="pw-widget__msym">%</span><span class="qty-word pw-widget__mword">used</span></span> 1048 </div> 1049 <div class="bar pw-widget__bar"><div class="bar__fill" style="width: 60%; background: oklch(56% 0.14 36 / 0.52);"></div></div> 1050 <div class="pw-widget__mfoot">Mon 9:00</div> 1051 </div> 1052 </div> 1053 <span class="pw-widget__grip" aria-hidden="true"></span> 1054 </div> 1055 </div> 1056 </div> 1057 </div> 1058 </div> 1059 </div> 1060 </div> 1061 </section> 1062 1063 <!-- ============================ HOW IT WORKS ============================ --> 1064 <section id="how-tracking-works" class="section section--light-2"> 1065 <div class="container"> 1066 <div data-reveal class="section-head section-head--center"> 1067 <div class="eyebrow">How it works</div> 1068 <h2 class="h2 h2--on-light">Up and running in under a minute</h2> 1069 </div> 1070 1071 <div data-reveal class="video-wrapper"> 1072 <button type="button" class="video-facade" data-video-id="ogPjAzxrG6Y" aria-label="Play video: MyQuota promo â up and running in under a minute"> 1073 <img src="./video-poster.jpg" alt="" width="1280" height="720" loading="lazy" decoding="async" /> 1074 <span class="video-facade__play" aria-hidden="true"> 1075 <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"></path></svg> 1076 </span> 1077 </button> 1078 </div> 1079 1080 <div class="steps-grid"> 1081 <div data-reveal class="step-card"> 1082 <div class="step-card__num">01</div> 1083 <h3 class="h3 h3--on-light">Pin MyQuota</h3> 1084 <p class="body-sm body-sm--on-light">Add it from the Web Store and pin the icon to your toolbar. No account, no setup.</p> 1085 <div class="kbd">ââ§U · Ctrl+Shift+U</div> 1086 </div> 1087 <div data-reveal class="step-card"> 1088 <div class="step-card__num">02</div> 1089 <h3 class="h3 h3--on-light">Browse normally</h3> 1090 <p class="body-sm body-sm--on-light">Visit any supported AI site. MyQuota quietly reads the usage numbers already on the page as you work â it never changes anything you see or type.</p> 1091 </div> 1092 <div data-reveal class="step-card"> 1093 <div class="step-card__num">03</div> 1094 <h3 class="h3 h3--on-light">Glance at the dial</h3> 1095 <p class="body-sm body-sm--on-light">Click the icon for a live quota pulse, or open the dashboard for alerts, budgets and history.</p> 1096 </div> 1097 </div> 1098 </div> 1099 </section> 1100 1101 <!-- ============================ PRIVACY ============================ --> 1102 <section id="privacy" class="section section--dark section--glow-green"> 1103 <div class="container container--narrow center"> 1104 <div data-reveal class="icon-tile icon-tile--success icon-tile--lg centered"> 1105 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path><path d="m9 12 2 2 4-4"></path></svg> 1106 </div> 1107 <h2 data-reveal class="h2 h2--on-dark">Your usage never leaves your browser</h2> 1108 <p data-reveal class="lede lede--on-dark">There's no backend, no account, and nothing to sign up for. Everything is calculated locally, right there in your browser â MyQuota never sees what you type or what the AI writes back, and it doesn't know
1108who you are.</p> 1109 1110 <div class="privacy-grid"> 1111 <div data-reveal class="privacy-card"> 1112 <div class="eyebrow eyebrow--success">No backend</div> 1113 <h3 class="h3 h3--on-dark">Nothing to sign up for</h3> 1114 <p class="body-sm body-sm--on-dark">There is no MyQuota server. Every calculation happens right there in your browser â your data has nowhere else to go.</p> 1115 </div> 1116 <div data-reveal class="privacy-card"> 1117 <div class="eyebrow eyebrow--success">Local storage</div> 1118 <h3 class="h3 h3--on-dark">History stays on device</h3> 1119 <p class="body-sm body-sm--on-dark">90 days of usage live in your browser's own local storage and never leave your machine. Settings sync via Chrome's own mechanism.</p> 1120 </div> 1121 <div data-reveal class="privacy-card"> 1122 <div class="eyebrow eyebrow--success">Zero telemetry</div> 1123 <h3 class="h3 h3--on-dark">We never see your prompts</h3> 1124 <p class="body-sm body-sm--on-dark">Nothing you type, nothing the AI writes back, no emails, no account IDs â none of it is ever stored or transmitted. No cookies, no ad trackers, ever.</p> 1125 </div> 1126 </div> 1127 </div> 1128 </section> 1129 1130 <!-- ============================ FAQ ============================ --> 1131 <section id="faq" class="section section--light"> 1132 <div class="container container--faq"> 1133 <div data-reveal class="section-head section-head--center"> 1134 <div class="eyebrow">FAQ</div> 1135 <h2 class="h2 h2--on-light">Questions, answered</h2> 1136 <p class="lede lede--on-light">Answers here are short by design. For the fuller picture of how a provider's own usage limits actually work, see the <a href="/guides">guides</a>.</p> 1137 </div> 1138 <div data-reveal class="faq-list"> 1139 <div class="faq-item"> 1140 <button type="button" class="faq-question" aria-expanded="false"> 1141 <span>Is MyQuota really free?</span> 1142 <span class="faq-question__chevron"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></span> 1143 </button> 1144 <div class="faq-answer" hidden="until-found">Yes â MyQuota is completely free with no paid tiers, no trials, and no account required. Install it and it works.</div> 1145 </div> 1146 <div class="faq-item"> 1147 <button type="button" class="faq-question" aria-expanded="false"> 1148 <span>Why does Gemini show 0% or "stale"?</span> 1149 <span class="faq-question__chevron"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></span> 1150 </button> 1151 <div class="faq-answer" hidden="until-found">This can happen if you're signed into more than one Google account â Gemini uses a separate address for each one, and MyQuota can briefly target the wrong one. It corrects itself automatically the next time you open a Gemini tab. <a href="/faq-gemini-stale">Read the full explanation.</a></div> 1152 </div> 1153 <div class="faq-item"> 1154 <button type="button" class="faq-question" aria-expanded="false"> 1155 <span>Why did a background tab open when I hit Refresh?</span> 1156 <span class="faq-question__chevron"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></span> 1157 </button> 1158 <div class="faq-answer" hidden="until-found">Some providers won't let MyQuota read your usage directly from the page you're on, so it briefly opens a hidden tab to check for you, then closes it automatically. No action needed. <a href="/faq-background-tab">Read the full explanation.</a></div> 1159 </div> 1160 <div class="faq-item"> 1161 <button type="button" class="faq-question" aria-expanded="false">
1162 <span>Does it send my data anywhere?</span> 1163 <span class="faq-question__chevron"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></span> 1164 </button> 1165 <div class="faq-answer" hidden="until-found">No. There is no backend. Everything is calculated locally in your browser, and your 90-day usage history is stored only on your device. Only your settings follow you across your own Chrome browsers, the same way Chrome already syncs your bookmarks.</div> 1166 </div> 1167 <div class="faq-item"> 1168 <button type="button" class="faq-question" aria-expanded="false"> 1169 <span>Which providers are supported?</span> 1170 <span class="faq-question__chevron"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></span> 1171 </button> 1172 <div class="faq-answer" hidden="until-found">MyQuota supports 10+ AI providers today, with their session, daily, weekly and recurring limits, wherever each provider makes that information available.</div> 1173 </div> 1174 <div class="faq-item"> 1175 <button type="button" class="faq-question" aria-expanded="false"> 1176 <span>How is MyQuota different from other usage trackers?</span> 1177 <span class="faq-question__chevron"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></span> 1178 </button> 1179 <div class="faq-answer" hidden="until-found">Most only watch one AI tool and stop at a raw number. MyQuota tracks 10+ AI providers together, adds up what they're costing you, and keeps a history you can look back on â free, with no account or paid tier. <a href="/compare">See the full comparison.</a></div> 1180 </div> 1181 <div class="faq-item"> 1182 <button type="button" class="faq-question" aria-expanded="false"> 1183 <span>How does it read my usage without an API key?</span> 1184 <span class="faq-question__chevron"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></span> 1185 </button> 1186 <div class="faq-answer" hidden="until-found">MyQuota quietly reads the usage numbers the AI site already shows or loads for its own page while you browse normally. It never changes anything you see or type â no API key or account needed.</div> 1187 </div> 1188 <div class="faq-item"> 1189 <button type="button" class="faq-question" aria-expanded="false"> 1190 <span>Will it work in my browser?</span> 1191 <span class="faq-question__chevron"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></span> 1192 </button> 1193 <div class="faq-answer" hidden="until-found">MyQuota is published on the Chrome Web Store and installs on Chrome plus any Chromium-based browser that supports Manifest V3 extensions and can install from the Chrome Web Store â Edge, Brave, and Arc included.</div> 1194 </div> 1195 <div class="faq-item"> 1196 <button type="button" class="faq-question" aria-expanded="false"> 1197 <span>Can I get alerted before I hit a limit?</span> 1198 <span class="faq-question__chevron"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></span> 1199 </button> 1200 <div class="faq-answer" hidden="until-found">Yes. Enable notifications and set thresholds â globally or per provider â and MyQuota fires a desktop alert at 80% and 95% of any quota or budget, even when the popup is closed.</div> 1201 </div> 1202 </div> 1203 </div> 1204 </section> 1205 1206 <!-- ============================ FINAL CTA ============================ --> 1207 <section class="section section--dark final-cta-section"> 1208 <div data-reveal class="final-cta"> 1209 <div class="final-cta__glow" aria-hidden="true"></div> 1210 <div class="final-cta__inner"> 1211 <svg class="final-cta__logo logo__pulse" viewBox="0 0 24 24" width="56" height="56" aria-hidden="true"> 1212 <defs><mask id="lh-cta" maskUnits="userSpaceOnUse" x="-2" y="-2" width="28" height="28"><rect x="-2" y="-2" width="28" height="28" fill="#ffffff"/><path d="M 17.95 16.69 L 17.89 16.97 L 17.85 17.24 L 17.82 17.51 L 17.81 17.77 L 17.81 18.03 L 17.83 18.28 L 17.87 18.52 L 17.94 18.76 L 18.02 19 L 18.13 19.23 L 18.27 19.45 L 18.43 19.66" fill="none" stroke="#000000" stroke-width="5.1" stroke-linecap="round"/></mask></defs> 1213 <path d="M 17.44 16.41 A 7 7 0 1 1 18.76 13.81" fill="none" stroke="var(--brand)" stroke-width="3.2" stroke-linecap="round" mask="url(#lh-cta)" /> 1214 <path d="M 18.76 13.81 C 18.17 16.03 17.14 18.13 18.43 19.66" fill="none" stroke="var(--brand)" stroke-width="3.2" stroke-linecap="round" /> 1215 </svg> 1216 <h2 class="h2 h2--on-dark final-cta__title">Stop guessing. Start seeing.</h2> 1217 <p class="lede lede--on-dark final-cta__lede">Add MyQuota to your browser and watch every AI limit and bill in one quiet, private dial.</p> 1218 <div class="final-cta__actions"> 1219 <a href="https://chromewebstore.google.com/detail/myquota-%E2%80%94-ai-usage-cost-t/emlnndkcdmgajmclfoiechengkhagejh" target="_blank" rel="noopener noreferrer" class="btn btn--primary btn--lg" data-cta="install"> 1220 <svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.66 5l4.95 8.57A4 4 0 0 1 12 8h9.54A10 10 0 0 0 12 2Zm9.99 6.5h-9.9a3.5 3.5 0 0 1 3.03 5.25l-4.4 7.62A10 10 0 0 0 21.99 8.5ZM8.6 13.78 3.7 5.32a10 10 0 0 0 6.46 16.6l4.4-7.62a3.49 3.49 0 0 1-5.96-.52Z"></path></svg>
1221 <span class="cta-label">Add to Chrome â Free</span> 1222 </a> 1223 <span class="final-cta__version">Chrome & Chromium</span> 1224 </div> 1225 </div> 1226 </div> 1227 </section> 1228 </main> 1229 1230 <!-- ============================ FOOTER ============================ --> 1231 <footer class="site-footer"> 1232 <div class="container site-footer__top"> 1233 <div class="site-footer__brand"> 1234 <div class="logo"> 1235 <svg viewBox="0 0 24 24" width="26" height="26" aria-hidden="true"> 1236 <defs><mask id="lh-footer" maskUnits="userSpaceOnUse" x="-2" y="-2" width="28" height="28"><rect x="-2" y="-2" width="28" height="28" fill="#ffffff"/><path d="M 17.95 16.69 L 17.89 16.97 L 17.85 17.24 L 17.82 17.51 L 17.81 17.77 L 17.81 18.03 L 17.83 18.28 L 17.87 18.52 L 17.94 18.76 L 18.02 19 L 18.13 19.23 L 18.27 19.45 L 18.43 19.66" fill="none" stroke="#000000" stroke-width="5.9" stroke-linecap="round"/></mask></defs> 1237 <path d="M 17.44 16.41 A 7 7 0 1 1 18.76 13.81" fill="none" stroke="var(--brand)" stroke-width="3.2" stroke-linecap="round" mask="url(#lh-footer)" /> 1238 <path d="M 18.76 13.81 C 18.17 16.03 17.14 18.13 18.43 19.66" fill="none" stroke="var(--brand)" stroke-width="3.2" stroke-linecap="round" /> 1239 </svg> 1240 <span class="logo__word logo__word--light">My<span class="logo__word-accent">Quota</span></span> 1241 </div> 1242 <p class="site-footer__tagline">Every AI quota in one place. Private, local, free.</p> 1243 </div> 1244 <div class="site-footer__links"> 1245 <div class="site-footer__col"> 1246 <div class="site-footer__col-head">Product</div> 1247 <a href="#features">Features</a> 1248 <a href="#how-tracking-works">How it works</a> 1249 </div> 1250 <div class="site-footer__col"> 1251 <div class="site-footer__col-head">Resources</div> 1252 <a href="#faq">FAQ</a> 1253 <a href="/guides">Guides</a> 1254 <a href="/compare">Compare</a> 1255 <a href="/support">Support</a> 1256 <a href="/privacy">Privacy policy</a> 1257 </div> 1258 <div class="site-footer__col"> 1259 <div class="site-footer__col-head">Community</div> 1260 <a href="https://www.youtube.com/@MyQuota" target="_blank" rel="noopener noreferrer">YouTube</a> 1261 <a href="https://www.reddit.com/r/MyQuota" target="_blank" rel="noopener noreferrer">Reddit</a> 1262 <a href="https://x.com/myquota_ai" target="_blank" rel="noopener noreferrer">X (Twitter)</a> 1263 <a href="https://www.instagram.com/myquota_ai" target="_blank" rel="noopener noreferrer">Instagram</a> 1264 <a href="https://www.facebook.com/MyQuota" target="_blank" rel="noopener noreferrer">Facebook</a> 1265 </div> 1266 <div class="site-footer__col"> 1267 <div class="site-footer__col-head">Providers</div> 1268 <a href="/for/claude">Claude</a> 1269 <a href="/for/chatgpt">ChatGPT Codex</a> 1270 <a href="/for/gemini">Gemini</a> 1271 <a href="/for/cursor">Cursor</a> 1272 <a href="/for/perplexity">Perplexity</a> 1273 <a href="/for/copilot">GitHub Copilot</a> 1274 </div> 1275 </div> 1276 </div> 1277 <div class="container site-footer__bottom"> 1278 <p class="site-footer__legal">MyQuota is an independent, third-party tool and is not affiliated with, endorsed by, or sponsored by Anthropic, OpenAI, Google, Anysphere, Perplexity, GitHub, Microsoft or Moonshot AI. Claude, ChatGPT, Gemini, Cursor, Perplexity, GitHub Copilot and Kimi are trademarks of their respective owners.</p> 1279 <p class="site-footer__copyright">© 2026 MyQuota</p> 1280 </div> 1281 </footer>
vendor: 101 bytes, lines 1281-1283
1281 1282 1283<script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "
128371fc01d5e3e5463d87476da3c60809f3
vendor: 14 bytes, line 1283
1283"}'></script>
1284</body> 1285</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.