325 lines · 20.9 KB · HTML
RawDownload
<!doctype html><html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>CodexBar — every AI coding limit in your menu bar</title>    <meta      name="description"      content="A tiny macOS menu bar app that tracks AI coding-provider usage windows, credits, costs, and resets across 40+ providers — Codex, OpenAI, Claude, Cursor, Gemini, Copilot, Grok, and more."    />    <meta name="theme-color" content="#0a0a0c" />    <link rel="canonical" href="https://codexbar.app/" />     <meta property="og:title" content="CodexBar" />    <meta      property="og:description"      content="Track usage windows, credits, and resets across 40+ AI coding providers from your macOS menu bar."    />    <meta property="og:type" content="website" />    <meta property="og:url" content="https://codexbar.app/" />    <meta property="og:image" content="https://codexbar.app/social.png" />    <meta property="og:image:width" content="1200" />    <meta property="og:image:height" content="630" />    <meta name="twitter:image" content="https://codexbar.app/social.png" />    <meta name="twitter:card" content="summary_large_image" />     <link rel="icon" href="./icon.png" type="image/png" />    <link rel="apple-touch-icon" href="./icon.png" />    <script>      (function () {        try {          var queryTheme = new URLSearchParams(location.search).get('theme');          var theme = queryTheme === 'light' || queryTheme === 'dark'            ? queryTheme            : localStorage.getItem('codexbar-theme');          if (theme === 'light' || theme === 'dark') document.documentElement.dataset.theme = theme;        } catch (_) {}      })();    </script>    <link rel="stylesheet" href="./site.css?v=8" />  </head>  <body>    <div class="backdrop" aria-hidden="true">      <span class="plane p1"></span>      <span class="plane p2"></span>      <span class="trace t1"></span>      <span class="trace t2"></span>      <span class="trace t3"></span>      <span class="trace t4"></span>    </div>    <header class="masthead">      <a class="brand" href="./" aria-label="CodexBar">        <img class="mark" src="./icon.png" alt="" width="28" height="28" />        <span class="wordmark">CodexBar</span>      </a>      <nav class="nav" aria-label="Primary">        <a class="nav-link" href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md">Docs</a>        <a class="nav-link" href="https://github.com/steipete/CodexBar">Source</a>        <button class="theme-toggle" type="button" aria-label="Switch color theme" aria-pressed="false" title="Switch color theme">          <svg class="sun" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">            <circle cx="8" cy="8" r="2.75" />            <path d="M8 1.5v1.25M8 13.25v1.25M1.5 8h1.25M13.25 8h1.25M3.4 3.4l.9.9M11.7 11.7l.9.9M12.6 3.4l-.9.9M4.3 11.7l-.9.9" />          </svg>          <svg class="moon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">            <path d="M13.2 10.1A5.8 5.8 0 0 1 5.9 2.8a6 6 0 1 0 7.3 7.3Z" />          </svg>        </button>        <a class="btn primary" href="https://github.com/steipete/CodexBar/releases/latest">Download</a>      </nav>    </header>     <main>      <section class="lede">        <h1>Every AI coding limit, <span class="grad">in your menu&nbsp;bar.</span></h1>        <p class="dek">          CodexBar tracks usage windows, credit balances, and reset countdowns across the providers you actually pay for —          one status item each, or merge them into one.        </p>        <div class="actions">          <a class="btn primary lg" href="https://github.com/steipete/CodexBar/releases/latest">Download for macOS</a>          <div class="brew" role="group" aria-label="Homebrew install command">            <code id="brew-cmd">brew install --cask steipete/tap/codexbar</code>            <button class="brew-copy" type="button" aria-label="Copy to clipboard" title="Copy">              <svg class="ic" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">                <rect x="5" y="5" width="9" height="9" rx="1.5" />                <path d="M5 11H3.5A1.5 1.5 0 0 1 2 9.5v-7A1.5 1.5 0 0 1 3.5 1h7A1.5 1.5 0 0 1 12 2.5V5" />              </svg>              <svg class="ok" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">                <polyline points="3 8 6 11 13 4" />              </svg>            </button>          </div>        </div>        <p class="fineprint">Free &amp; open source · macOS 14+ · Universal on GitHub Releases · Apple Silicon via Homebrew</p>      </section>       <section class="providers" aria-labelledby="providers-h">        <header class="section-head">          <h2 id="providers-h">40+ providers, one menu bar</h2>          <p>Popular providers become status items with their own usage windows, reset countdowns, charts, and provider menus.</p>        </header>        <ul class="grid">        <li><a class="provider" style="--brand:#49A3B0" href="https://github.com/steipete/CodexBar/blob/main/docs/codex.md">          <img class="chip-logo no-bg" src="./logos/codex.svg" data-dark-src="./logos/codex-dark.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Codex</span><span class="auth">OAuth</span></span>        </a></li>        <li><a class="provider" style="--brand:#CC7C5E" href="https://github.com/steipete/CodexBar/blob/main/docs/claude.md">          <img class="chip-logo" src="./logos/claude.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Claude</span><span class="auth">OAuth</span></span>        </a></li>        <li><a class="provider" style="--brand:#1A1A1A" href="https://github.com/steipete/CodexBar/blob/main/docs/cursor.md">          <img class="chip-logo" src="./logos/cursor.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Cursor</span><span class="auth">Cookies</span></span>        </a></li>        <li><a class="provider" style="--brand:#3B82F6" href="https://github.com/steipete/CodexBar/blob/main/docs/opencode.md">          <img class="chip-logo preserve-color" src="./logos/opencode.svg" data-dark-src="./logos/opencode-dark.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">OpenCode</span><span class="auth">Cookies + Go</span></span>        </a></li>        <li><a class="provider" style="--brand:#FF6A00" href="https://github.com/steipete/CodexBar/blob/main/docs/alibaba-coding-plan.md">          <img class="chip-logo" src="./logos/alibaba.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Alibaba</span><span class="auth">Cookies</span></span>        </a></li>        <li><a class="provider" style="--brand:#AB87EA" href="https://github.com/steipete/CodexBar/blob/main/docs/gemini.md">          <img class="chip-logo" src="./logos/gemini.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Gemini</span><span class="auth">OAuth</span></span>        </a></li>        <li><a class="provider" style="--brand:#60BA7E" href="https://github.com/steipete/CodexBar/blob/main/docs/antigravity.md">          <img class="chip-logo" src="./logos/antigravity.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Antigravity</span><span class="auth">Local</span></span>        </a></li>        <li><a class="provider" style="--brand:#FF6B35" href="https://github.com/steipete/CodexBar/blob/main/docs/factory.md">          <img class="chip-logo no-bg" src="./logos/droid.svg" data-dark-src="./logos/droid-dark.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Droid</span><span class="auth">Cookies</span></span>        </a></li>        <li><a class="provider" style="--brand:#A855F7" href="https://github.com/steipete/CodexBar/blob/main/docs/copilot.md">          <img class="chip-logo" src="./logos/copilot.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Copilot</span><span class="auth">Device flow</span></span>        </a></li>        <li><a class="provider" style="--brand:#E85A6A" href="https://github.com/steipete/CodexBar/blob/main/docs/zai.md">          <img class="chip-logo no-bg" src="./logos/zai.svg" data-dark-src="./logos/zai-dark.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">z.ai</span><span class="auth">API key</span></span>        </a></li>        <li><a class="provider" style="--brand:#FE6060" href="https://github.com/steipete/CodexBar/blob/main/docs/minimax.md">          <img class="chip-logo" src="./logos/minimax.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">MiniMax</span><span class="auth">API key</span></span>        </a></li>        <li><a class="provider" style="--brand:#FE603C" href="https://github.com/steipete/CodexBar/blob/main/docs/kimi.md">          <img class="chip-logo" src="./logos/kimi.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Kimi</span><span class="auth">Token</span></span>        </a></li>        <li><a class="provider" style="--brand:#4C00FF" href="https://github.com/steipete/CodexBar/blob/main/docs/kimi-k2.md">          <img class="chip-logo" src="./logos/kimi-k2.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Kimi K2</span><span class="auth">Legacy API</span></span>        </a></li>        <li><a class="provider" style="--brand:#f8f676" href="https://github.com/steipete/CodexBar/blob/main/docs/kilo.md">          <img class="chip-logo no-bg" src="./logos/kilo.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Kilo</span><span class="auth">API key</span></span>        </a></li>        <li><a class="provider" style="--brand:#FF9900;--ink:#0a0a0c" href="https://github.com/steipete/CodexBar/blob/main/docs/kiro.md">          <img class="chip-logo no-bg" src="./logos/kiro.svg" data-dark-src="./logos/kiro-dark.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Kiro</span><span class="auth">CLI</span></span>        </a></li>        <li><a class="provider" style="--brand:#4285F4" href="https://github.com/steipete/CodexBar/blob/main/docs/vertexai.md">          <img class="chip-logo" src="./logos/vertex-ai.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Vertex AI</span><span class="auth">gcloud</span></span>        </a></li>        <li><a class="provider logo-dark" style="--brand:#6366F1" href="https://github.com/steipete/CodexBar/blob/main/docs/augment.md">          <img class="chip-logo" src="./logos/augment.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Augment</span><span class="auth">CLI</span></span>        </a></li>        <li><a class="provider" style="--brand:#DC2626" href="https://github.com/steipete/CodexBar/blob/main/docs/amp.md">          <img class="chip-logo" src="./logos/amp.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Amp</span><span class="auth">Cookies</span></span>        </a></li>        <li><a class="provider" style="--brand:#888888" href="https://github.com/steipete/CodexBar/blob/main/docs/ollama.md">          <img class="chip-logo" src="./logos/ollama.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Ollama</span><span class="auth">API key + Cookies</span></span>        </a></li>        <li><a class="provider" style="--brand:#141414" href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md#fetch-strategies-current">          <img class="chip-logo" src="./logos/synthetic.svg" data-dark-src="./logos/synthetic-dark.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Synthetic</span><span class="auth">API key</span></span>        </a></li>        <li><a class="provider" style="--brand:#FF3399" href="https://github.com/steipete/CodexBar/blob/main/docs/jetbrains.md">          <img class="chip-logo" src="./logos/jetbrains-ai.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">JetBrains AI</span><span class="auth">Local</span></span>        </a></li>        <li><a class="provider" style="--brand:#7B68EE" href="https://github.com/steipete/CodexBar/blob/main/docs/warp.md">          <img class="chip-logo" src="./logos/warp.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Warp</span><span class="auth">API key</span></span>        </a></li>        <li><a class="provider" style="--brand:#EAEAE6;--ink:#0a0a0c" href="https://github.com/steipete/CodexBar/blob/main/docs/elevenlabs.md">          <img class="chip-logo" src="./logos/elevenlabs.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">ElevenLabs</span><span class="auth">API key</span></span>        </a></li>        <li><a class="provider" style="--brand:#6467F2" href="https://github.com/steipete/CodexBar/blob/main/docs/openrouter.md">          <img class="chip-logo" src="./logos/openrouter.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">OpenRouter</span><span class="auth">API key</span></span>        </a></li>        <li><a class="provider" style="--brand:#20B2AA" href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md#fetch-strategies-current">          <img class="chip-logo" src="./logos/perplexity.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Perplexity</span><span class="auth">Cookies</span></span>        </a></li>        <li><a class="provider" style="--brand:#38BDF8" href="https://github.com/steipete/CodexBar/blob/main/docs/abacus.md">          <img class="chip-logo no-bg" src="./logos/abacus-ai.png" data-dark-src="./logos/abacus-ai-dark.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Abacus AI</span><span class="auth">Cookies</span></span>        </a></li>        <li><a class="provider" style="--brand:#FF500F" href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md#fetch-strategies-current">          <img class="chip-logo" src="./logos/mistral.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Mistral</span><span class="auth">Cookies</span></span>        </a></li>        <li><a class="provider" style="--brand:#527DF0" href="https://github.com/steipete/CodexBar/blob/main/docs/deepseek.md">          <img class="chip-logo" src="./logos/deepseek.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">DeepSeek</span><span class="auth">API key</span></span>        </a></li>        <li><a class="provider" style="--brand:#44C800;--ink:#0a0a0c" href="https://github.com/steipete/CodexBar/blob/main/docs/codebuff.md">          <img class="chip-logo no-bg" src="./logos/codebuff.png" data-dark-src="./logos/codebuff-dark.svg" alt="" width="20" height="20" /><span class="meta"><span class="name">Codebuff</span><span class="auth">API key</span></span>        </a></li>        <li><a class="provider add" href="https://github.com/steipete/CodexBar/blob/main/docs/provider.md">          <span class="chip">+</span><span class="meta"><span class="name">Your provider</span><span class="auth">Authoring guide</span></span>        </a></li>        </ul>      </section>       <section class="showcase">      <figure class="shot">        <img src="./codexbar.png" alt="CodexBar menu bar popover showing provider tiles with usage bars, reset countdowns, and credit details." />      </figure>      <div class="features">        <article>          <h3>Resets you can plan around</h3>          <p>Per-provider session, weekly, and monthly windows with countdowns to the next reset — no more guessing whether to start a long task.</p>        </article>        <article>          <h3>Credits, spend, and cost scans</h3>          <p>Credit balances and monthly spend where the provider exposes them, plus configurable local cost scans for Codex and Claude.</p>        </article>        <article>          <h3>Status &amp; incidents</h3>          <p>Provider status polling surfaces incident badges in the menu and an indicator overlay on the bar icon.</p>        </article>        <article>          <h3>CLI &amp; widgets</h3>          <p>WidgetKit widgets for supported providers and a bundled <code>codexbar</code> CLI for scripts and CI — macOS and Linux builds on every release.</p>        </article>      </div>      </section>       <section class="detail">      <article class="block">        <h3>Install &amp; updates</h3>        <p>          Universal app via <a href="https://github.com/steipete/CodexBar/releases/latest">GitHub Releases</a> with Sparkle auto-updates, or          <code>brew install --cask steipete/tap/codexbar</code> for Apple Silicon (updates via <code>brew upgrade</code>).        </p>      </article>      <article class="block">        <h3>CLI</h3>        <p>          A bundled <code>codexbar</code> binary plus standalone tarballs for macOS and Linux on each release. On Linux:          <code>brew install steipete/tap/codexbar</code>.        </p>      </article>      <article class="block">        <h3>Privacy</h3>        <p>          Reuses existing provider sessions — OAuth, device flow, API keys, browser cookies, local files — so no passwords are stored.          Audit notes in <a href="https://github.com/steipete/CodexBar/issues/12">issue #12</a>.        </p>      </article>      <article class="block">        <h3>macOS permissions</h3>        <p>          Full Disk Access for Safari cookies, Keychain access for cookie decryption and OAuth flows, and Files &amp; Folders prompts          when provider helpers read project directories.        </p>      </article>      </section>    </main>     <footer class="foot">      <p>        Built by <a href="https://steipete.me">Peter Steinberger</a> ·        <a href="https://github.com/steipete/CodexBar/blob/main/CHANGELOG.md">Changelog</a> ·        <a href="https://github.com/steipete/CodexBar/blob/main/LICENSE">MIT</a> ·        <a href="https://trimmy.app">trimmy.app</a>      </p>    </footer>     <script>      (function () {        var root = document.documentElement;        var toggle = document.querySelector('.theme-toggle');        var metaTheme = document.querySelector('meta[name="theme-color"]');        var media = window.matchMedia('(prefers-color-scheme: dark)');        function queryTheme() {          try {            var value = new URLSearchParams(location.search).get('theme');            return value === 'light' || value === 'dark' ? value : null;          } catch (_) {            return null;          }        }        function storedTheme() {          try { return localStorage.getItem('codexbar-theme'); } catch (_) { return null; }        }        function effectiveTheme() {          return root.dataset.theme || (media.matches ? 'dark' : 'light');        }        function updateThemeImages(theme) {          document.querySelectorAll('img[data-dark-src]').forEach(function (img) {            if (!img.dataset.lightSrc) img.dataset.lightSrc = img.getAttribute('src');            img.setAttribute('src', theme === 'dark' ? img.dataset.darkSrc : img.dataset.lightSrc);          });        }        function updateThemeUI() {          var theme = effectiveTheme();          updateThemeImages(theme);          if (toggle) {            toggle.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');            toggle.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');            toggle.title = theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme';          }          if (metaTheme) metaTheme.setAttribute('content', theme === 'dark' ? '#0a0a0c' : '#fbfbfc');        }        if (toggle) {          toggle.addEventListener('click', function () {            var next = effectiveTheme() === 'dark' ? 'light' : 'dark';            root.dataset.theme = next;            try { localStorage.setItem('codexbar-theme', next); } catch (_) {}            updateThemeUI();          });        }        if (media.addEventListener) {          media.addEventListener('change', function () {            if (!queryTheme() && !storedTheme()) updateThemeUI();          });        }        updateThemeUI();         var btn = document.querySelector('.brew-copy');        if (!btn) return;        btn.addEventListener('click', function () {          var text = document.getElementById('brew-cmd').textContent;          if (!navigator.clipboard) return;          navigator.clipboard.writeText(text).then(function () {            btn.classList.add('copied');            setTimeout(function () { btn.classList.remove('copied'); }, 1500);          });        });      })();    </script>  </body></html>