<!doctype html><html lang="en" class="bg-black"> <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 63 providers — Codex, OpenAI, Claude, Cursor, Gemini, Copilot, LiteLLM, and more." /> <meta name="theme-color" content="#0a0a0c" /> <link rel="canonical" href="https://codexbar.app/" /> <link rel="alternate" hreflang="x-default" href="https://codexbar.app/" /> <link rel="alternate" hreflang="en" href="https://codexbar.app/?lang=en" /> <link rel="alternate" hreflang="zh-CN" href="https://codexbar.app/?lang=zh-CN" /> <link rel="alternate" hreflang="zh-TW" href="https://codexbar.app/?lang=zh-TW" /> <link rel="alternate" hreflang="ja" href="https://codexbar.app/?lang=ja-JP" /> <link rel="alternate" hreflang="es" href="https://codexbar.app/?lang=es" /> <link rel="alternate" hreflang="pt-BR" href="https://codexbar.app/?lang=pt-BR" /> <link rel="alternate" hreflang="ko" href="https://codexbar.app/?lang=ko" /> <link rel="alternate" hreflang="de" href="https://codexbar.app/?lang=de" /> <link rel="alternate" hreflang="fr" href="https://codexbar.app/?lang=fr" /> <link rel="alternate" hreflang="ar" href="https://codexbar.app/?lang=ar" /> <link rel="alternate" hreflang="it" href="https://codexbar.app/?lang=it" /> <link rel="alternate" hreflang="vi" href="https://codexbar.app/?lang=vi" /> <link rel="alternate" hreflang="nl" href="https://codexbar.app/?lang=nl" /> <link rel="alternate" hreflang="tr" href="https://codexbar.app/?lang=tr" /> <link rel="alternate" hreflang="uk" href="https://codexbar.app/?lang=uk" /> <link rel="alternate" hreflang="ru" href="https://codexbar.app/?lang=ru" /> <link rel="alternate" hreflang="id" href="https://codexbar.app/?lang=id" /> <link rel="alternate" hreflang="pl" href="https://codexbar.app/?lang=pl" /> <link rel="alternate" hreflang="fa" href="https://codexbar.app/?lang=fa" /> <link rel="alternate" hreflang="th" href="https://codexbar.app/?lang=th" /> <link rel="alternate" hreflang="gl" href="https://codexbar.app/?lang=gl" /> <link rel="alternate" hreflang="ca" href="https://codexbar.app/?lang=ca" /> <link rel="alternate" hreflang="sv" href="https://codexbar.app/?lang=sv" /> <meta property="og:title" content="CodexBar" /> <meta property="og:description" content="Track usage windows, credits, and resets across 63 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?v=4" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta name="twitter:image" content="https://codexbar.app/social.png?v=4" /> <meta name="twitter:card" content="summary_large_image" /> <link rel="icon" type="image/png" href="./icon.png?v=2" /> <link rel="apple-touch-icon" href="./icon.png?v=2" /> <script> (() => { const queryTheme = new URLSearchParams(location.search).get('theme'); let storedTheme = 'system'; try { storedTheme = localStorage.getItem('codexbar-theme') || 'system'; } catch (_) {} const preference = queryTheme === 'light' || queryTheme === 'dark' ? queryTheme : storedTheme; const resolvedTheme = preference === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : preference; document.documentElement.dataset.theme = resolvedTheme; document.documentElement.dataset.themePreference = preference; })(); </script> <link rel="stylesheet" href="./site-utilities.css?v=1" /> <link rel="stylesheet" href="./site.css?v=3" /> </head> <body class="min-h-screen overflow-x-hidden text-zinc-100"> <header class="absolute inset-x-0 top-0 z-20 flex h-[var(--header-height)] items-center justify-between bg-transparent px-5 sm:px-8 md:grid md:grid-cols-[1fr_auto_1fr] lg:px-12"> <a href="#top" class="button-press flex w-fit items-center gap-2.5 text-sm font-semibold tracking-[-0.03em] text-white sm:text-base" aria-label="CodexBar home" data-i18n-aria-label="nav.home"> <img src="./icon.png?v=2" alt="" class="h-7 w-7 rounded-[7px] sm:h-8 sm:w-8 sm:rounded-lg" /> <span>CodexBar</span> </a> <nav class="hidden items-center justify-center gap-3 md:flex" aria-label="Project links" data-i18n-aria-label="nav.projectLinks"> <a href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md" class="button-press hidden text-[14px] text-zinc-400 hover:text-white sm:block" data-i18n="nav.docs">docs</a> <span class="hidden text-sm text-zinc-700 sm:block" aria-hidden="true" data-project-separator>/</span> <a href="https://github.com/steipete/CodexBar" class="button-press group flex items-center justify-center gap-2.5 text-[14px] text-zinc-400 hover:text-white" aria-label="CodexBar source on GitHub" data-i18n-aria-label="nav.sourceGitHub" > <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path d="M12 .8a11.4 11.4 0 0 0-3.6 22.2c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.6-.3-5.4-1.3-5.4-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.1 1.2a10.8 10.8 0 0 1 5.7 0C16.9 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.4 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.4 11.4 0 0 0 12 .8Z" /> </svg> <span class="hidden sm:inline" data-i18n-rich="nav.sourceStars"> source </span> </a> </nav> <nav class="flex items-center justify-end gap-2 sm:gap-3" aria-label="Display and download" data-i18n-aria-label="nav.displayDownload"> <button class="theme-option grid" id="theme-toggle" type="button" data-theme-value="system" aria-label="Theme: system. Switch to light" title="System theme"> <svg data-theme-icon="system" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect width="20" height="14" x="2" y="3" rx="2" /> <line x1="8" x2="16" y1="21" y2="21" /> <line x1="12" x2="12" y1="17" y2="21" /> </svg> <svg data-theme-icon="light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="12" cy="12" r="4" /> <path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" /> </svg> <svg data-theme-icon="dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" /> </svg> </button> <div class="language-picker" id="language-picker"> <button class="language-picker-trigger button-press" id="language-picker-trigger" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="language-picker-menu" aria-label="Language" data-i18n-aria-label="nav.language" > <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="12" cy="12" r="9" /> <path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18" /> </svg> <span data-lang-short>EN</span> </button> <div class="language-picker-menu" id="language-picker-menu" hidden> <div class="language-picker-menu-scroll" id="language-picker-list" role="listbox" aria-label="Language" data-i18n-aria-label="nav.language"></div> </div> </div> <span class="header-divider hidden sm:block" aria-hidden="true"></span> <a href="https://github.com/steipete/CodexBar/releases/latest" class="download-button button-press inline-flex h-9 items-center gap-2 rounded-full px-4 text-sm font-medium sm:h-10 sm:px-5" > <span class="grid h-4 w-4 place-items-center" aria-hidden="true"> <img src="./images/apple.svg" alt="" class="apple-icon" /> </span> <span data-i18n="nav.download">download</span> </a> </nav> </header> <main id="top"> <section class="hero-section relative overflow-hidden"> <div class="mockup-stage" id="mockup-stage" aria-hidden="true"> <div class="mockup-glow" aria-hidden="true"></div> <div class="mockup-wrap" id="mockup-wrap"> <img src="./hero-mockup.svg" alt="MacBook menu bar" data-i18n-alt="mockup.macbookAlt" class="block h-full w-full select-none object-contain" draggable="false" width="6111" height="3239" fetchpriority="high" /> </div> <div class="mockup-hud-layer"> <div class="mockup-artboard"> <div class="mockup-hud-anchor"> <div class="system-menubar" aria-label="macOS menu bar status items" data-i18n-aria-label="mockup.menuBarAria"> <img class="sf-symbol sf-symbol--openclaw" src="./images/menubar/openclaw-menubar.svg" alt="" aria-hidden="true" /> <div class="menu-bar-mark" aria-label="CodexBar menu bar icon" data-i18n-aria-label="mockup.menuIconAria"> <span></span> <span></span> </div> <img class="sf-symbol" src="./images/menubar/wifi.png" alt="" aria-hidden="true" style="filter: brightness(0) invert(86%) drop-shadow(0 0.08em 0.18em rgba(0, 0, 0, 0.58))" /> <img class="sf-symbol" src="./images/menubar/personalhotspot.png" alt="" aria-hidden="true" style="filter: brightness(0) invert(86%) drop-shadow(0 0.08em 0.18em rgba(0, 0, 0, 0.58))" /> <img class="sf-symbol" src="./images/menubar/person-circle.png" alt="" aria-hidden="true" style="filter: brightness(0) invert(86%) drop-shadow(0 0.08em 0.18em rgba(0, 0, 0, 0.58))" /> <span class="time" id="menu-time">Sun Jun 28 9:41 AM</span> </div> <aside class="codex-popover" aria-label="Open CodexBar usage panel" data-i18n-aria-label="mockup.usagePanelAria"> <header class="popover-top"> <p><strong>Codex</strong><span data-i18n="mockup.updatedJustNow">Updated just now</span></p> <p class="right"><strong>user@example.com</strong><span data-i18n="mockup.plus">Plus</span></p> </header> <section class="popover-section"> <h3 data-i18n="mockup.session">Session</h3> <div class="usage-meter" style="--fill: 60%; --danger: 58%; --meter-delay: 420ms;"><i style="--tick: 20%;"></i><i style="--tick: 48%;"></i></div> <p class="usage-row"> <span><strong data-i18n="mockup.left60">60% left</strong><strong data-i18n="mockup.reserve2">2% in reserve</strong></span> <span class="right"><strong data-i18n="mockup.resets2h53m">Resets in 2h 53m</strong><strong data-i18n="mockup.lastsUntilReset">Lasts until reset</strong></span> </p> </section> <section class="popover-section"> <h3 data-i18n="mockup.weekly">Weekly</h3> <div class="usage-meter" style="--fill: 73%; --danger: 73%; --meter-delay: 520ms;"><i style="--tick: 20%;"></i><i style="--tick: 48%;"></i></div> <p class="usage-row"> <span><strong data-i18n="mockup.left73">73% left</strong><strong data-i18n="mockup.onPace">On pace</strong></span> <span class="right"><strong data-i18n="mockup.resets5d4h">Resets in 5d 4h</strong><strong data-i18n="mockup.runsOut4d21h">Runs out in 4d 21h</strong></span> </p> </section> <section class="reset-credit"> <p><strong data-i18n="mockup.limitResetCredits">Limit Reset Credits</strong><span data-i18n="mockup.nextExpires28d2h">Next expires in 28d 2h</span></p> <p><strong data-i18n="mockup.manualResetAvailable">1 reset available</strong></p> </section> <section class="number-grid" aria-label="Recent Codex usage" data-i18n-aria-label="mockup.recentUsageAria"> <p class="popover-number"><span data-i18n="mockup.today">Today</span><strong>$51.56</strong></p> <p class="popover-number"><span data-i18n="mockup.last31DaysCost">Last 31 days Cost</span><strong>$5,251.23</strong></p> <p class="popover-number"><span data-i18n="mockup.last31DaysTokens">Last 31 days tokens</span><strong>5.9B</strong></p> <p class="popover-number"><span data-i18n="mockup.latestTokens">Latest tokens</span><strong>85M</strong></p> </section> <figure class="usage-chart" aria-label="31 day usage chart" data-i18n-aria-label="mockup.usageChartAria"> <i style="--h: 52%;"></i><i style="--h: 55%;"></i><i style="--h: 38%;"></i><i style="--h: 60%;"></i><i style="--h: 34%;"></i><i style="--h: 73%;"></i><i style="--h: 33%;"></i><i style="--h: 10%;"></i><i style="--h: 28%;"></i><i style="--h: 47%;"></i><i style="--h: 18%;"></i><i style="--h: 5%;"></i><i style="--h: 20%;"></i><i style="--h: 18%;"></i><i style="--h: 4%;"></i><i style="--h: 9%;"></i><i style="--h: 32%;"></i><i style="--h: 40%;"></i><i style="--h: 28%;"></i><i style="--h: 38%;"></i><i style="--h: 45%;"></i><i style="--h: 31%;"></i><i style="--h: 39%;"></i><i style="--h: 42%;"></i><i style="--h: 34%;"></i><i style="--h: 8%;"></i><i style="--h: 6%;"></i><i style="--h: 7%;"></i><i style="--h: 17%;"></i><i style="--h: 38%;"></i><i style="--h: 4%;"></i> </figure> <p class="popover-note"><strong data-i18n="mockup.topModel">Top model: Example-1</strong><br /><span data-i18n="mockup.estimatedLogs">Estimated from local Codex logs for the selected acco...</span></p> <section class="popover-foot"> <strong data-i18n="mockup.credits">Credits</strong> <div class="credit-meter"></div> <p class="credit-row"><strong data-i18n="mockup.zeroLeft">0 left</strong><span>1K tokens</span></p> <p class="buy-row"> <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6.2" stroke="currentColor" stroke-width="1.8" /><path d="M8 5v6M5 8h6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg> <span data-i18n="mockup.buyCredits">Buy credits...</span> </p> </section> </aside> </div> </div> </div> </div> <div class="hero-content px-5 sm:px-8 lg:px-12"> <div class="section-inner"> <div class="hero-copy"> <div class="reveal flex items-center justify-center gap-2.5 text-[15px] tracking-[-0.025em] text-zinc-400 sm:justify-start sm:text-lg"> <span data-i18n="hero.badgeStart">AI usage limits</span> <img src="./icon.png?v=2" alt="" class="h-6 w-6 rounded-md shadow-[0_0_1.5rem_rgba(14,165,233,0.24)]" /> <span data-i18n="hero.badgeEnd">for macOS</span> </div> <h1 class="reveal reveal-2 mt-5 text-[clamp(3rem,5.7vw,60px)] font-semibold leading-[0.98] tracking-[-0.06em] text-zinc-100"> <span class="hero-title-line" data-i18n="hero.prefix">Every AI coding limit,</span> <span class="hero-title-line" data-i18n="hero.accent">in your menu bar.</span> </h1> <p class="reveal reveal-3 mt-6 max-w-[38rem] text-balance text-[clamp(1rem,1.25vw,1.28rem)] leading-[1.42] tracking-[-0.035em] text-zinc-400"> <span data-i18n="hero.descriptionShort">Track usage windows, credit balances, and reset countdowns across the AI tools you actually pay for.</span> </p> <div class="hero-cta-row reveal reveal-4 mt-8 sm:mt-10"> <a href="https://github.com/steipete/CodexBar/releases/latest" class="download-button hero-download button-press inline-flex h-11 items-center gap-2 rounded-full px-5 text-sm font-medium" > <span class="grid h-4 w-4 place-items-center" aria-hidden="true"> <img src="./images/apple.svg" alt="" class="apple-icon" /> </span> <span data-i18n="hero.download">Download for macOS</span> </a> <button id="brew-copy" type="button" class="button-press brew-pill inline-flex h-11 max-w-full items-center gap-3 rounded-full px-4 font-mono text-[13px] text-zinc-100 hover:bg-white/10" aria-label="Copy Homebrew install command" data-i18n-aria-label="clipboard.copyBrew" > <span class="text-zinc-400" aria-hidden="true">$</span> <span data-brew-label class="truncate text-zinc-100">brew install --cask steipete/tap/codexbar</span> <span data-brew-icon class="grid h-5 w-5 shrink-0 place-items-center text-zinc-400" aria-hidden="true"> <svg data-icon="copy" class="h-3.5 w-3.5" viewBox="0 0 18 18" fill="none"> <rect x="6.25" y="3.25" width="8.5" height="8.5" rx="1.4" stroke="currentColor" stroke-width="1.5" /> <path d="M11.75 14.75H4.65c-.77 0-1.4-.63-1.4-1.4v-7.1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /> </svg> <svg data-icon="check" class="h-3.5 w-3.5" viewBox="0 0 18 18" fill="none"> <path d="M4.5 9.25 7.5 12.25 13.5 6.25" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> </svg> </span> <span class="sr-only" data-brew-status aria-live="polite"></span> </button> </div> <p class="reveal reveal-5 mt-5 text-sm tracking-[-0.02em] text-zinc-600"> <span data-i18n="hero.fineprintShort">Free & open source · macOS 14+</span> </p> </div> </div> </div> </section> <section class="provider-section px-5 py-20 sm:px-8 lg:px-12 lg:py-28" data-provider-section> <div class="section-inner"> <header class="relative z-10 grid gap-5 tablet:grid-cols-[1fr_0.86fr] tablet:items-center"> <h2 class="provider-reveal max-w-3xl text-balance text-[clamp(2.4rem,4.4vw,5rem)] font-semibold leading-[0.98] tracking-[-0.07em] text-zinc-100"> <span data-i18n-rich="providers.title">63 providers,{mobileBreak}one menu bar</span> </h2> <p class="provider-reveal max-w-2xl text-[clamp(1rem,1.35vw,1.28rem)] leading-[1.45] tracking-[-0.035em] text-zinc-400" style="--reveal-delay: 70ms"> <span data-i18n="providers.description">Popular providers become status items with their own usage windows, reset countdowns, charts, and provider menus.</span> </p> </header> <ul class="relative z-10 mt-12 grid list-none gap-3 p-0 tablet:grid-cols-3 xl:grid-cols-5"> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/codex.md"><span class="provider-logo" data-icon="◎" style="--brand:#49A3B0;--icon:url('./logos/codex-dark.svg')"><img src="./logos/codex-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Codex</strong><span data-i18n="auth.oauth">OAuth</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/claude.md"><span class="provider-logo" data-icon="✳" style="--brand:#CC7C5E;--icon:url('./logos/claude.svg')"><img src="./logos/claude.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Claude</strong><span data-i18n="auth.oauth">OAuth</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/cursor.md"><span class="provider-logo" data-icon="◆" style="--brand:#1A1A1A;--icon:url('./logos/cursor.svg')"><img src="./logos/cursor.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Cursor</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/opencode.md"><span class="provider-logo" data-icon="OC" style="--brand:#3B82F6;--icon:url('./logos/opencode-dark.svg')"><img src="./logos/opencode-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>OpenCode</strong><span data-i18n="auth.cookiesGo">Cookies + Go</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/alibaba-coding-plan.md"><span class="provider-logo" data-icon="a" style="--brand:#FF6A00;--icon:url('./logos/alibaba.svg')"><img src="./logos/alibaba.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Alibaba</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/alibaba-token-plan.md"><span class="provider-logo" style="--brand:#FF6A00;--icon:url('./logos/alibaba.svg')"><img src="./logos/alibaba.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Alibaba Token</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/gemini.md"><span class="provider-logo" data-icon="◇" style="--brand:#AB87EA;--icon:url('./logos/gemini.svg')"><img src="./logos/gemini.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Gemini</strong><span data-i18n="auth.oauth">OAuth</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/antigravity.md"><span class="provider-logo" data-icon="A" style="--brand:#60BA7E;--icon:url('./logos/antigravity.svg')"><img src="./logos/antigravity.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Antigravity</strong><span data-i18n="auth.local">Local</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/factory.md"><span class="provider-logo" data-icon="✺" style="--brand:#FF6B35;--icon:url('./logos/droid-dark.svg')"><img src="./logos/droid-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Droid</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/copilot.md"><span class="provider-logo" data-icon="⌘" style="--brand:#A855F7;--icon:url('./logos/copilot.svg')"><img src="./logos/copilot.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Copilot</strong><span data-i18n="auth.deviceFlow">Device flow</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/devin.md"><span class="provider-logo" style="--brand:#0F172A;--icon:url('./logos/devin.svg')"><img src="./logos/devin.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Devin</strong><span data-i18n="auth.bearerLocal">Bearer / Local</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/zai.md"><span class="provider-logo" data-icon="Z" style="--brand:#E85A6A;--icon:url('./logos/zai-dark.svg')"><img src="./logos/zai-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>z.ai</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/minimax.md"><span class="provider-logo" data-icon="≋" style="--brand:#FE6060;--icon:url('./logos/minimax.svg')"><img src="./logos/minimax.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>MiniMax</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/kimi.md"><span class="provider-logo" data-icon="K" style="--brand:#FE603C;--icon:url('./logos/kimi.svg')"><img src="./logos/kimi.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Kimi</strong><span data-i18n="auth.token">Token</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/kilo.md"><span class="provider-logo" data-icon="kg" style="--brand:#f8f676;--icon:url('./logos/kilo.svg')"><img src="./logos/kilo.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Kilo</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/kiro.md"><span class="provider-logo" data-icon="•" style="--brand:#FF9900;--icon:url('./logos/kiro-dark.svg')"><img src="./logos/kiro-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Kiro</strong><span data-i18n="auth.cli">CLI</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/vertexai.md"><span class="provider-logo" data-icon="VA" style="--brand:#4285F4;--icon:url('./logos/vertex-ai.svg')"><img src="./logos/vertex-ai.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Vertex AI</strong><span data-i18n="auth.gcloud">gcloud</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/augment.md"><span class="provider-logo" data-icon="{ }" style="--brand:#6366F1;--icon:url('./logos/augment.svg')"><img src="./logos/augment.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Augment</strong><span data-i18n="auth.cli">CLI</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/amp.md"><span class="provider-logo" data-icon="amp" style="--brand:#DC2626;--icon:url('./logos/amp.svg')"><img src="./logos/amp.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Amp</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/ollama.md"><span class="provider-logo" data-icon="ll" style="--brand:#888888;--icon:url('./logos/ollama.svg')"><img src="./logos/ollama.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Ollama</strong><span data-i18n="auth.apiKeyCookies">API key + Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/synthetic.md"><span class="provider-logo" data-icon="✽" style="--brand:#141414;--icon:url('./logos/synthetic-dark.svg')"><img src="./logos/synthetic-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Synthetic</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/jetbrains.md"><span class="provider-logo" data-icon="JB" style="--brand:#FF3399;--icon:url('./logos/jetbrains-ai.svg')"><img src="./logos/jetbrains-ai.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>JetBrains AI</strong><span data-i18n="auth.local">Local</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/warp.md"><span class="provider-logo" data-icon="W" style="--brand:#7B68EE;--icon:url('./logos/warp.svg')"><img src="./logos/warp.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Warp</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/elevenlabs.md"><span class="provider-logo" style="--brand:#EAEAE6;--icon:url('./logos/elevenlabs.svg')"><img src="./logos/elevenlabs.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>ElevenLabs</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/openrouter.md"><span class="provider-logo" data-icon="OR" style="--brand:#6467F2;--icon:url('./logos/openrouter.svg')"><img src="./logos/openrouter.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>OpenRouter</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/litellm.md"><span class="provider-logo" style="--brand:#4C89F0;--icon:url('./logos/litellm.svg')"><img src="./logos/litellm.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>LiteLLM</strong><span data-i18n="auth.virtualKey">Virtual key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md#fetch-strategies-current"><span class="provider-logo" data-icon="∞" style="--brand:#20B2AA;--icon:url('./logos/perplexity.svg')"><img src="./logos/perplexity.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Perplexity</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/abacus.md"><span class="provider-logo" style="--brand:#38BDF8;--icon:url('./logos/abacus-ai-dark.svg')"><img src="./logos/abacus-ai-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Abacus AI</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md#fetch-strategies-current"><span class="provider-logo" style="--brand:#FF500F;--icon:url('./logos/mistral.svg')"><img src="./logos/mistral.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Mistral</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/deepseek.md"><span class="provider-logo" style="--brand:#527DF0;--icon:url('./logos/deepseek.svg')"><img src="./logos/deepseek.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>DeepSeek</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/deepinfra.md"><span class="provider-logo" style="--brand:#2A3275;--icon:url('./logos/deepinfra.svg')"><img src="./logos/deepinfra.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>DeepInfra</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/t3chat.md"><span class="provider-logo" style="--brand:#2563EB;--icon:url('./logos/t3chat.svg')"><img src="./logos/t3chat.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>T3 Chat</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/codebuff.md"><span class="provider-logo" style="--brand:#44C800;--icon:url('./logos/codebuff-dark.svg')"><img src="./logos/codebuff-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Codebuff</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/poe.md"><span class="provider-logo" style="--brand:#5D5CDE;--icon:url('./logos/poe.svg')"><img src="./logos/poe.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Poe</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/chutes.md"><span class="provider-logo" style="--brand:#3184FF;--icon:url('./logos/chutes.svg')"><img src="./logos/chutes.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Chutes</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/zed.md"><span class="provider-logo" style="--brand:#084EFF;--icon:url('./logos/zed.svg')"><img src="./logos/zed.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Zed</strong><span data-i18n="auth.local">Local</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/provider.md"><span class="provider-logo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 .83.18 2 2 0 0 0 .83-.18l8.58-3.9a1 1 0 0 0 0-1.831z"/><path d="M16 17h6"/><path d="M19 14v6"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 .825.178"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l2.116-.962"/></svg></span><p><strong data-i18n="providers.yourProvider">Your provider</strong><span class="provider-authoring"><span data-i18n="providers.authoringGuide">Authoring guide</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg></span></p></a></li> </ul> </div> </section> <section class="features-section px-5 py-20 sm:px-8 lg:px-12 lg:py-28" data-scroll-section> <div class="section-inner"> <h2 class="features-heading provider-reveal text-balance" data-i18n="features.title">Limits, spend, and status</h2> <div class="features-grid relative z-10"> <article class="feature-card provider-reveal" style="--reveal-delay: 80ms"> <div class="feature-card-copy"> <h3 data-i18n="features.resetsTitle">Resets you can plan around</h3> <p data-i18n="features.resetsBody">Per-provider session, weekly, and monthly windows with countdowns to the next reset — no more guessing whether to start a long task.</p> </div> <div class="feature-card-visual" aria-hidden="true"> <img src="./features/feature-resets.webp" alt="" width="1620" height="1020" loading="lazy" /> <div class="feature-card-overlay is-usage-menu"> <div class="feature-usage-panel"> <header class="feature-usage-header"> <p><strong>Codex</strong><span data-i18n="mockup.updatedJustNow">Updated just now</span></p> <p class="feature-usage-account"><strong>user@example.com</strong><span data-i18n="mockup.plus">Plus</span></p> </header> <section class="feature-usage-block"> <h4 class="feature-usage-title" data-i18n="mockup.session">Session</h4> <div class="feature-usage-track" aria-hidden="true"> <div class="feature-usage-fill" style="--amount: 100%"> <i style="--flex: 89"></i> <i class="is-reserve" style="--flex: 5"></i> <i class="is-spent" style="--flex: 6"></i> </div> </div> <div class="feature-usage-meta"> <div> <p><strong data-i18n="mockup.left89">89% left</strong><span class="is-subtle" data-i18n="mockup.reserve5">5% in reserve</span></p> </div> <div> <p><strong data-i18n="mockup.resets4h12m">Resets in 4h 12m</strong><span class="is-subtle" data-i18n="mockup.lastsUntilReset">Lasts until reset</span></p> </div> </div> </section> <section class="feature-usage-block"> <h4 class="feature-usage-title" data-i18n="mockup.weekly">Weekly</h4> <div class="feature-usage-track" aria-hidden="true"> <div class="feature-usage-fill" style="--amount: 100%"> <i style="--flex: 98"></i> <i class="is-spent" style="--flex: 2"></i> </div> </div> <div class="feature-usage-meta"> <div> <p><strong data-i18n="mockup.left98">98% left</strong></p> </div> <div> <p><strong data-i18n="mockup.resets6d23h">Resets in 6d 23h</strong></p> </div> </div> </section> </div> </div> </div> </article> <article class="feature-card provider-reveal" style="--reveal-delay: 140ms"> <div class="feature-card-copy"> <h3 data-i18n="features.spendTitle">Credits, spend, and cost scans</h3> <p data-i18n="features.spendBody">Credit balances and monthly spend where the provider exposes them, plus configurable local cost scans for Codex and Claude.</p> </div> <div class="feature-card-visual" aria-hidden="true"> <img src="./features/feature-credits.webp" alt="" width="1620" height="1020" loading="lazy" /> <div class="feature-card-overlay"> <div class="feature-cost-panel"> <div class="feature-credit-head"> <p><strong data-i18n="mockup.limitResetCredits">Limit Reset Credits</strong><span data-i18n="mockup.nextExpires27d21h">Next expires in 27d 21h</span></p> <p><strong data-i18n="mockup.manualResetAvailable">1 reset available</strong></p> </div> <dl class="feature-cost-stats"> <div> <dt data-i18n="mockup.today">Today</dt> <dd>$86.62</dd> </div> <div> <dt data-i18n="mockup.last31DaysCost">Last 31 days Cost</dt> <dd>$5,286.29</dd> </div> <div> <dt data-i18n="mockup.last31DaysTokens">Last 31 days tokens</dt> <dd>5.9B</dd> </div> <div> <dt data-i18n="mockup.latestTokens">Latest tokens</dt> <dd>119M</dd> </div> </dl> <div class="feature-cost-chart" aria-hidden="true"> <i style="--h: 72%"></i><i style="--h: 77%"></i><i style="--h: 53%"></i><i style="--h: 81%"></i><i style="--h: 46%"></i><i style="--h: 96%"></i><i style="--h: 47%"></i><i style="--h: 10%"></i><i style="--h: 29%"></i><i style="--h: 64%"></i><i style="--h: 21%"></i><i style="--h: 5%"></i><i style="--h: 23%"></i><i style="--h: 22%"></i><i style="--h: 4%"></i><i style="--h: 10%"></i><i style="--h: 37%"></i><i style="--h: 45%"></i><i style="--h: 33%"></i><i style="--h: 50%"></i><i style="--h: 58%"></i><i style="--h: 35%"></i><i style="--h: 48%"></i><i style="--h: 55%"></i><i style="--h: 40%"></i><i style="--h: 8%"></i><i style="--h: 7%"></i><i style="--h: 8%"></i><i style="--h: 20%"></i><i style="--h: 54%"></i><i style="--h: 22%"></i> </div> </div> </div> </div> </article> <article class="feature-card provider-reveal" style="--reveal-delay: 200ms"> <div class="feature-card-copy"> <h3 data-i18n="features.statusTitle">Status & incidents</h3> <p data-i18n="features.statusBody">Provider status polling surfaces incident badges in the menu and an indicator overlay on the bar icon.</p> </div> <div class="feature-card-visual" aria-hidden="true"> <img src="./features/feature-status.webp" alt="" width="1620" height="1020" loading="lazy" /> <div class="feature-card-overlay is-status-menu"> <div class="feature-status-panel"> <p class="feature-status-summary"><span data-i18n="mockup.partialDegradation">Partial degradation</span> <span data-i18n="mockup.twoIncidents">2 incidents</span></p> <ul class="feature-status-list" aria-hidden="true"> <li class="is-critical"> <span class="feature-status-dot"></span> <span class="feature-status-name">Codex API</span> <span class="feature-status-label" data-i18n="mockup.majorOutage">Major outage</span> </li> <li class="is-minor"> <span class="feature-status-dot"></span> <span class="feature-status-name">Chat Completions</span> <span class="feature-status-label" data-i18n="mockup.degraded">Degraded</span> </li> <li> <span class="feature-status-dot"></span> <span class="feature-status-name">CLI</span> <span class="feature-status-label" data-i18n="mockup.operational">Operational</span> </li> <li> <span class="feature-status-dot"></span> <span class="feature-status-name">Responses</span> <span class="feature-status-label" data-i18n="mockup.operational">Operational</span> </li> </ul> </div> </div> </div> </article> </div> </div> </section> <section class="cli-section px-5 py-20 sm:px-8 lg:px-12 lg:py-28" data-scroll-section> <div class="section-inner relative z-10"> <div class="split-layout"> <div class="split-visual-wrap provider-reveal" role="img" aria-label="CodexBar CLI output preview" data-i18n-aria-label="cli.outputPreviewAria"> <div class="cli-terminal"> <div class="cli-terminal-chrome"> <div class="cli-terminal-dots" aria-hidden="true"> <span></span><span></span><span></span> </div> <p class="cli-terminal-title">codexbar · terminal</p> <div class="cli-terminal-chrome-spacer" aria-hidden="true"></div> </div> <div class="cli-terminal-body"> <section class="cli-provider-block"> <p class="cli-provider-label">== Codex (oauth) ==</p> <div class="cli-row"> <span class="cli-row-label" data-i18n="mockup.session">Session</span> <span class="cli-row-value" data-i18n="cli.left99">99% left</span>Lines 1–500 of 775. Load more
<!doctype html> <html lang="en" class="bg-black"> <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 63 providers — Codex, OpenAI, Claude, Cursor, Gemini, Copilot, LiteLLM, and more." /> <meta name="theme-color" content="#0a0a0c" /> <link rel="canonical" href="https://codexbar.app/" /> <link rel="alternate" hreflang="x-default" href="https://codexbar.app/" /> <link rel="alternate" hreflang="en" href="https://codexbar.app/?lang=en" /> <link rel="alternate" hreflang="zh-CN" href="https://codexbar.app/?lang=zh-CN" /> <link rel="alternate" hreflang="zh-TW" href="https://codexbar.app/?lang=zh-TW" /> <link rel="alternate" hreflang="ja" href="https://codexbar.app/?lang=ja-JP" /> <link rel="alternate" hreflang="es" href="https://codexbar.app/?lang=es" /> <link rel="alternate" hreflang="pt-BR" href="https://codexbar.app/?lang=pt-BR" /> <link rel="alternate" hreflang="ko" href="https://codexbar.app/?lang=ko" /> <link rel="alternate" hreflang="de" href="https://codexbar.app/?lang=de" /> <link rel="alternate" hreflang="fr" href="https://codexbar.app/?lang=fr" /> <link rel="alternate" hreflang="ar" href="https://codexbar.app/?lang=ar" /> <link rel="alternate" hreflang="it" href="https://codexbar.app/?lang=it" /> <link rel="alternate" hreflang="vi" href="https://codexbar.app/?lang=vi" /> <link rel="alternate" hreflang="nl" href="https://codexbar.app/?lang=nl" /> <link rel="alternate" hreflang="tr" href="https://codexbar.app/?lang=tr" /> <link rel="alternate" hreflang="uk" href="https://codexbar.app/?lang=uk" /> <link rel="alternate" hreflang="ru" href="https://codexbar.app/?lang=ru" /> <link rel="alternate" hreflang="id" href="https://codexbar.app/?lang=id" /> <link rel="alternate" hreflang="pl" href="https://codexbar.app/?lang=pl" /> <link rel="alternate" hreflang="fa" href="https://codexbar.app/?lang=fa" /> <link rel="alternate" hreflang="th" href="https://codexbar.app/?lang=th" /> <link rel="alternate" hreflang="gl" href="https://codexbar.app/?lang=gl" /> <link rel="alternate" hreflang="ca" href="https://codexbar.app/?lang=ca" /> <link rel="alternate" hreflang="sv" href="https://codexbar.app/?lang=sv" /> <meta property="og:title" content="CodexBar" /> <meta property="og:description" content="Track usage windows, credits, and resets across 63 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?v=4" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta name="twitter:image" content="https://codexbar.app/social.png?v=4" /> <meta name="twitter:card" content="summary_large_image" /> <link rel="icon" type="image/png" href="./icon.png?v=2" /> <link rel="apple-touch-icon" href="./icon.png?v=2" /> <script> (() => { const queryTheme = new URLSearchParams(location.search).get('theme'); let storedTheme = 'system'; try { storedTheme = localStorage.getItem('codexbar-theme') || 'system'; } catch (_) {} const preference = queryTheme === 'light' || queryTheme === 'dark' ? queryTheme : storedTheme; const resolvedTheme = preference === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : preference; document.documentElement.dataset.theme = resolvedTheme; document.documentElement.dataset.themePreference = preference; })(); </script> <link rel="stylesheet" href="./site-utilities.css?v=1" /> <link rel="stylesheet" href="./site.css?v=3" /> </head> <body class="min-h-screen overflow-x-hidden text-zinc-100"> <header class="absolute inset-x-0 top-0 z-20 flex h-[var(--header-height)] items-center justify-between bg-transparent px-5 sm:px-8 md:grid md:grid-cols-[1fr_auto_1fr] lg:px-12"> <a href="#top" class="button-press flex w-fit items-center gap-2.5 text-sm font-semibold tracking-[-0.03em] text-white sm:text-base" aria-label="CodexBar home" data-i18n-aria-label="nav.home"> <img src="./icon.png?v=2" alt="" class="h-7 w-7 rounded-[7px] sm:h-8 sm:w-8 sm:rounded-lg" /> <span>CodexBar</span> </a> <nav class="hidden items-center justify-center gap-3 md:flex" aria-label="Project links" data-i18n-aria-label="nav.projectLinks"> <a href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md" class="button-press hidden text-[14px] text-zinc-400 hover:text-white sm:block" data-i18n="nav.docs">docs</a> <span class="hidden text-sm text-zinc-700 sm:block" aria-hidden="true" data-project-separator>/</span> <a href="https://github.com/steipete/CodexBar" class="button-press group flex items-center justify-center gap-2.5 text-[14px] text-zinc-400 hover:text-white" aria-label="CodexBar source on GitHub" data-i18n-aria-label="nav.sourceGitHub" > <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path d="M12 .8a11.4 11.4 0 0 0-3.6 22.2c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.6-.3-5.4-1.3-5.4-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.1 1.2a10.8 10.8 0 0 1 5.7 0C16.9 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.4 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A11.4 11.4 0 0 0 12 .8Z" /> </svg> <span class="hidden sm:inline" data-i18n-rich="nav.sourceStars"> source </span> </a> </nav> <nav class="flex items-center justify-end gap-2 sm:gap-3" aria-label="Display and download" data-i18n-aria-label="nav.displayDownload"> <button class="theme-option grid" id="theme-toggle" type="button" data-theme-value="system" aria-label="Theme: system. Switch to light" title="System theme"> <svg data-theme-icon="system" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <rect width="20" height="14" x="2" y="3" rx="2" /> <line x1="8" x2="16" y1="21" y2="21" /> <line x1="12" x2="12" y1="17" y2="21" /> </svg> <svg data-theme-icon="light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="12" cy="12" r="4" /> <path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" /> </svg> <svg data-theme-icon="dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" /> </svg> </button> <div class="language-picker" id="language-picker"> <button class="language-picker-trigger button-press" id="language-picker-trigger" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="language-picker-menu" aria-label="Language" data-i18n-aria-label="nav.language" > <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="12" cy="12" r="9" /> <path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18" /> </svg> <span data-lang-short>EN</span> </button> <div class="language-picker-menu" id="language-picker-menu" hidden> <div class="language-picker-menu-scroll" id="language-picker-list" role="listbox" aria-label="Language" data-i18n-aria-label="nav.language"></div> </div> </div> <span class="header-divider hidden sm:block" aria-hidden="true"></span> <a href="https://github.com/steipete/CodexBar/releases/latest" class="download-button button-press inline-flex h-9 items-center gap-2 rounded-full px-4 text-sm font-medium sm:h-10 sm:px-5" > <span class="grid h-4 w-4 place-items-center" aria-hidden="true"> <img src="./images/apple.svg" alt="" class="apple-icon" /> </span> <span data-i18n="nav.download">download</span> </a> </nav> </header> <main id="top"> <section class="hero-section relative overflow-hidden"> <div class="mockup-stage" id="mockup-stage" aria-hidden="true"> <div class="mockup-glow" aria-hidden="true"></div> <div class="mockup-wrap" id="mockup-wrap"> <img src="./hero-mockup.svg" alt="MacBook menu bar" data-i18n-alt="mockup.macbookAlt" class="block h-full w-full select-none object-contain" draggable="false" width="6111" height="3239" fetchpriority="high" /> </div> <div class="mockup-hud-layer"> <div class="mockup-artboard"> <div class="mockup-hud-anchor"> <div class="system-menubar" aria-label="macOS menu bar status items" data-i18n-aria-label="mockup.menuBarAria"> <img class="sf-symbol sf-symbol--openclaw" src="./images/menubar/openclaw-menubar.svg" alt="" aria-hidden="true" /> <div class="menu-bar-mark" aria-label="CodexBar menu bar icon" data-i18n-aria-label="mockup.menuIconAria"> <span></span> <span></span> </div> <img class="sf-symbol" src="./images/menubar/wifi.png" alt="" aria-hidden="true" style="filter: brightness(0) invert(86%) drop-shadow(0 0.08em 0.18em rgba(0, 0, 0, 0.58))" /> <img class="sf-symbol" src="./images/menubar/personalhotspot.png" alt="" aria-hidden="true" style="filter: brightness(0) invert(86%) drop-shadow(0 0.08em 0.18em rgba(0, 0, 0, 0.58))" /> <img class="sf-symbol" src="./images/menubar/person-circle.png" alt="" aria-hidden="true" style="filter: brightness(0) invert(86%) drop-shadow(0 0.08em 0.18em rgba(0, 0, 0, 0.58))" /> <span class="time" id="menu-time">Sun Jun 28 9:41 AM</span> </div> <aside class="codex-popover" aria-label="Open CodexBar usage panel" data-i18n-aria-label="mockup.usagePanelAria"> <header class="popover-top"> <p><strong>Codex</strong><span data-i18n="mockup.updatedJustNow">Updated just now</span></p> <p class="right"><strong>user@example.com</strong><span data-i18n="mockup.plus">Plus</span></p> </header> <section class="popover-section"> <h3 data-i18n="mockup.session">Session</h3> <div class="usage-meter" style="--fill: 60%; --danger: 58%; --meter-delay: 420ms;"><i style="--tick: 20%;"></i><i style="--tick: 48%;"></i></div> <p class="usage-row"> <span><strong data-i18n="mockup.left60">60% left</strong><strong data-i18n="mockup.reserve2">2% in reserve</strong></span> <span class="right"><strong data-i18n="mockup.resets2h53m">Resets in 2h 53m</strong><strong data-i18n="mockup.lastsUntilReset">Lasts until reset</strong></span> </p> </section> <section class="popover-section"> <h3 data-i18n="mockup.weekly">Weekly</h3> <div class="usage-meter" style="--fill: 73%; --danger: 73%; --meter-delay: 520ms;"><i style="--tick: 20%;"></i><i style="--tick: 48%;"></i></div> <p class="usage-row"> <span><strong data-i18n="mockup.left73">73% left</strong><strong data-i18n="mockup.onPace">On pace</strong></span> <span class="right"><strong data-i18n="mockup.resets5d4h">Resets in 5d 4h</strong><strong data-i18n="mockup.runsOut4d21h">Runs out in 4d 21h</strong></span> </p> </section> <section class="reset-credit"> <p><strong data-i18n="mockup.limitResetCredits">Limit Reset Credits</strong><span data-i18n="mockup.nextExpires28d2h">Next expires in 28d 2h</span></p> <p><strong data-i18n="mockup.manualResetAvailable">1 reset available</strong></p> </section> <section class="number-grid" aria-label="Recent Codex usage" data-i18n-aria-label="mockup.recentUsageAria"> <p class="popover-number"><span data-i18n="mockup.today">Today</span><strong>$51.56</strong></p> <p class="popover-number"><span data-i18n="mockup.last31DaysCost">Last 31 days Cost</span><strong>$5,251.23</strong></p> <p class="popover-number"><span data-i18n="mockup.last31DaysTokens">Last 31 days tokens</span><strong>5.9B</strong></p> <p class="popover-number"><span data-i18n="mockup.latestTokens">Latest tokens</span><strong>85M</strong></p> </section> <figure class="usage-chart" aria-label="31 day usage chart" data-i18n-aria-label="mockup.usageChartAria"> <i style="--h: 52%;"></i><i style="--h: 55%;"></i><i style="--h: 38%;"></i><i style="--h: 60%;"></i><i style="--h: 34%;"></i><i style="--h: 73%;"></i><i style="--h: 33%;"></i><i style="--h: 10%;"></i><i style="--h: 28%;"></i><i style="--h: 47%;"></i><i style="--h: 18%;"></i><i style="--h: 5%;"></i><i style="--h: 20%;"></i><i style="--h: 18%;"></i><i style="--h: 4%;"></i><i style="--h: 9%;"></i><i style="--h: 32%;"></i><i style="--h: 40%;"></i><i style="--h: 28%;"></i><i style="--h: 38%;"></i><i style="--h: 45%;"></i><i style="--h: 31%;"></i><i style="--h: 39%;"></i><i style="--h: 42%;"></i><i style="--h: 34%;"></i><i style="--h: 8%;"></i><i style="--h: 6%;"></i><i style="--h: 7%;"></i><i style="--h: 17%;"></i><i style="--h: 38%;"></i><i style="--h: 4%;"></i> </figure> <p class="popover-note"><strong data-i18n="mockup.topModel">Top model: Example-1</strong><br /><span data-i18n="mockup.estimatedLogs">Estimated from local Codex logs for the selected acco...</span></p> <section class="popover-foot"> <strong data-i18n="mockup.credits">Credits</strong> <div class="credit-meter"></div> <p class="credit-row"><strong data-i18n="mockup.zeroLeft">0 left</strong><span>1K tokens</span></p> <p class="buy-row"> <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6.2" stroke="currentColor" stroke-width="1.8" /><path d="M8 5v6M5 8h6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg> <span data-i18n="mockup.buyCredits">Buy credits...</span> </p> </section> </aside> </div> </div> </div> </div> <div class="hero-content px-5 sm:px-8 lg:px-12"> <div class="section-inner"> <div class="hero-copy"> <div class="reveal flex items-center justify-center gap-2.5 text-[15px] tracking-[-0.025em] text-zinc-400 sm:justify-start sm:text-lg"> <span data-i18n="hero.badgeStart">AI usage limits</span> <img src="./icon.png?v=2" alt="" class="h-6 w-6 rounded-md shadow-[0_0_1.5rem_rgba(14,165,233,0.24)]" /> <span data-i18n="hero.badgeEnd">for macOS</span> </div> <h1 class="reveal reveal-2 mt-5 text-[clamp(3rem,5.7vw,60px)] font-semibold leading-[0.98] tracking-[-0.06em] text-zinc-100"> <span class="hero-title-line" data-i18n="hero.prefix">Every AI coding limit,</span> <span class="hero-title-line" data-i18n="hero.accent">in your menu bar.</span> </h1> <p class="reveal reveal-3 mt-6 max-w-[38rem] text-balance text-[clamp(1rem,1.25vw,1.28rem)] leading-[1.42] tracking-[-0.035em] text-zinc-400"> <span data-i18n="hero.descriptionShort">Track usage windows, credit balances, and reset countdowns across the AI tools you actually pay for.</span> </p> <div class="hero-cta-row reveal reveal-4 mt-8 sm:mt-10"> <a href="https://github.com/steipete/CodexBar/releases/latest" class="download-button hero-download button-press inline-flex h-11 items-center gap-2 rounded-full px-5 text-sm font-medium" > <span class="grid h-4 w-4 place-items-center" aria-hidden="true"> <img src="./images/apple.svg" alt="" class="apple-icon" /> </span> <span data-i18n="hero.download">Download for macOS</span> </a> <button id="brew-copy" type="button" class="button-press brew-pill inline-flex h-11 max-w-full items-center gap-3 rounded-full px-4 font-mono text-[13px] text-zinc-100 hover:bg-white/10" aria-label="Copy Homebrew install command" data-i18n-aria-label="clipboard.copyBrew" > <span class="text-zinc-400" aria-hidden="true">$</span> <span data-brew-label class="truncate text-zinc-100">brew install --cask steipete/tap/codexbar</span> <span data-brew-icon class="grid h-5 w-5 shrink-0 place-items-center text-zinc-400" aria-hidden="true"> <svg data-icon="copy" class="h-3.5 w-3.5" viewBox="0 0 18 18" fill="none"> <rect x="6.25" y="3.25" width="8.5" height="8.5" rx="1.4" stroke="currentColor" stroke-width="1.5" /> <path d="M11.75 14.75H4.65c-.77 0-1.4-.63-1.4-1.4v-7.1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /> </svg> <svg data-icon="check" class="h-3.5 w-3.5" viewBox="0 0 18 18" fill="none"> <path d="M4.5 9.25 7.5 12.25 13.5 6.25" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> </svg> </span> <span class="sr-only" data-brew-status aria-live="polite"></span> </button> </div> <p class="reveal reveal-5 mt-5 text-sm tracking-[-0.02em] text-zinc-600"> <span data-i18n="hero.fineprintShort">Free & open source · macOS 14+</span> </p> </div> </div> </div> </section> <section class="provider-section px-5 py-20 sm:px-8 lg:px-12 lg:py-28" data-provider-section> <div class="section-inner"> <header class="relative z-10 grid gap-5 tablet:grid-cols-[1fr_0.86fr] tablet:items-center"> <h2 class="provider-reveal max-w-3xl text-balance text-[clamp(2.4rem,4.4vw,5rem)] font-semibold leading-[0.98] tracking-[-0.07em] text-zinc-100"> <span data-i18n-rich="providers.title">63 providers,{mobileBreak}one menu bar</span> </h2> <p class="provider-reveal max-w-2xl text-[clamp(1rem,1.35vw,1.28rem)] leading-[1.45] tracking-[-0.035em] text-zinc-400" style="--reveal-delay: 70ms"> <span data-i18n="providers.description">Popular providers become status items with their own usage windows, reset countdowns, charts, and provider menus.</span> </p> </header> <ul class="relative z-10 mt-12 grid list-none gap-3 p-0 tablet:grid-cols-3 xl:grid-cols-5"> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/codex.md"><span class="provider-logo" data-icon="◎" style="--brand:#49A3B0;--icon:url('./logos/codex-dark.svg')"><img src="./logos/codex-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Codex</strong><span data-i18n="auth.oauth">OAuth</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/claude.md"><span class="provider-logo" data-icon="✳" style="--brand:#CC7C5E;--icon:url('./logos/claude.svg')"><img src="./logos/claude.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Claude</strong><span data-i18n="auth.oauth">OAuth</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/cursor.md"><span class="provider-logo" data-icon="◆" style="--brand:#1A1A1A;--icon:url('./logos/cursor.svg')"><img src="./logos/cursor.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Cursor</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/opencode.md"><span class="provider-logo" data-icon="OC" style="--brand:#3B82F6;--icon:url('./logos/opencode-dark.svg')"><img src="./logos/opencode-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>OpenCode</strong><span data-i18n="auth.cookiesGo">Cookies + Go</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/alibaba-coding-plan.md"><span class="provider-logo" data-icon="a" style="--brand:#FF6A00;--icon:url('./logos/alibaba.svg')"><img src="./logos/alibaba.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Alibaba</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/alibaba-token-plan.md"><span class="provider-logo" style="--brand:#FF6A00;--icon:url('./logos/alibaba.svg')"><img src="./logos/alibaba.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Alibaba Token</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/gemini.md"><span class="provider-logo" data-icon="◇" style="--brand:#AB87EA;--icon:url('./logos/gemini.svg')"><img src="./logos/gemini.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Gemini</strong><span data-i18n="auth.oauth">OAuth</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/antigravity.md"><span class="provider-logo" data-icon="A" style="--brand:#60BA7E;--icon:url('./logos/antigravity.svg')"><img src="./logos/antigravity.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Antigravity</strong><span data-i18n="auth.local">Local</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/factory.md"><span class="provider-logo" data-icon="✺" style="--brand:#FF6B35;--icon:url('./logos/droid-dark.svg')"><img src="./logos/droid-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Droid</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/copilot.md"><span class="provider-logo" data-icon="⌘" style="--brand:#A855F7;--icon:url('./logos/copilot.svg')"><img src="./logos/copilot.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Copilot</strong><span data-i18n="auth.deviceFlow">Device flow</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/devin.md"><span class="provider-logo" style="--brand:#0F172A;--icon:url('./logos/devin.svg')"><img src="./logos/devin.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Devin</strong><span data-i18n="auth.bearerLocal">Bearer / Local</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/zai.md"><span class="provider-logo" data-icon="Z" style="--brand:#E85A6A;--icon:url('./logos/zai-dark.svg')"><img src="./logos/zai-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>z.ai</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/minimax.md"><span class="provider-logo" data-icon="≋" style="--brand:#FE6060;--icon:url('./logos/minimax.svg')"><img src="./logos/minimax.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>MiniMax</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/kimi.md"><span class="provider-logo" data-icon="K" style="--brand:#FE603C;--icon:url('./logos/kimi.svg')"><img src="./logos/kimi.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Kimi</strong><span data-i18n="auth.token">Token</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/kilo.md"><span class="provider-logo" data-icon="kg" style="--brand:#f8f676;--icon:url('./logos/kilo.svg')"><img src="./logos/kilo.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Kilo</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/kiro.md"><span class="provider-logo" data-icon="•" style="--brand:#FF9900;--icon:url('./logos/kiro-dark.svg')"><img src="./logos/kiro-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Kiro</strong><span data-i18n="auth.cli">CLI</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/vertexai.md"><span class="provider-logo" data-icon="VA" style="--brand:#4285F4;--icon:url('./logos/vertex-ai.svg')"><img src="./logos/vertex-ai.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Vertex AI</strong><span data-i18n="auth.gcloud">gcloud</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/augment.md"><span class="provider-logo" data-icon="{ }" style="--brand:#6366F1;--icon:url('./logos/augment.svg')"><img src="./logos/augment.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Augment</strong><span data-i18n="auth.cli">CLI</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/amp.md"><span class="provider-logo" data-icon="amp" style="--brand:#DC2626;--icon:url('./logos/amp.svg')"><img src="./logos/amp.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Amp</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/ollama.md"><span class="provider-logo" data-icon="ll" style="--brand:#888888;--icon:url('./logos/ollama.svg')"><img src="./logos/ollama.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Ollama</strong><span data-i18n="auth.apiKeyCookies">API key + Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/synthetic.md"><span class="provider-logo" data-icon="✽" style="--brand:#141414;--icon:url('./logos/synthetic-dark.svg')"><img src="./logos/synthetic-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Synthetic</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/jetbrains.md"><span class="provider-logo" data-icon="JB" style="--brand:#FF3399;--icon:url('./logos/jetbrains-ai.svg')"><img src="./logos/jetbrains-ai.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>JetBrains AI</strong><span data-i18n="auth.local">Local</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/warp.md"><span class="provider-logo" data-icon="W" style="--brand:#7B68EE;--icon:url('./logos/warp.svg')"><img src="./logos/warp.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Warp</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/elevenlabs.md"><span class="provider-logo" style="--brand:#EAEAE6;--icon:url('./logos/elevenlabs.svg')"><img src="./logos/elevenlabs.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>ElevenLabs</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/openrouter.md"><span class="provider-logo" data-icon="OR" style="--brand:#6467F2;--icon:url('./logos/openrouter.svg')"><img src="./logos/openrouter.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>OpenRouter</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/litellm.md"><span class="provider-logo" style="--brand:#4C89F0;--icon:url('./logos/litellm.svg')"><img src="./logos/litellm.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>LiteLLM</strong><span data-i18n="auth.virtualKey">Virtual key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md#fetch-strategies-current"><span class="provider-logo" data-icon="∞" style="--brand:#20B2AA;--icon:url('./logos/perplexity.svg')"><img src="./logos/perplexity.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Perplexity</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/abacus.md"><span class="provider-logo" style="--brand:#38BDF8;--icon:url('./logos/abacus-ai-dark.svg')"><img src="./logos/abacus-ai-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Abacus AI</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/providers.md#fetch-strategies-current"><span class="provider-logo" style="--brand:#FF500F;--icon:url('./logos/mistral.svg')"><img src="./logos/mistral.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Mistral</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/deepseek.md"><span class="provider-logo" style="--brand:#527DF0;--icon:url('./logos/deepseek.svg')"><img src="./logos/deepseek.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>DeepSeek</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/deepinfra.md"><span class="provider-logo" style="--brand:#2A3275;--icon:url('./logos/deepinfra.svg')"><img src="./logos/deepinfra.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>DeepInfra</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/t3chat.md"><span class="provider-logo" style="--brand:#2563EB;--icon:url('./logos/t3chat.svg')"><img src="./logos/t3chat.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>T3 Chat</strong><span data-i18n="auth.cookies">Cookies</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/codebuff.md"><span class="provider-logo" style="--brand:#44C800;--icon:url('./logos/codebuff-dark.svg')"><img src="./logos/codebuff-dark.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Codebuff</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/poe.md"><span class="provider-logo" style="--brand:#5D5CDE;--icon:url('./logos/poe.svg')"><img src="./logos/poe.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Poe</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/chutes.md"><span class="provider-logo" style="--brand:#3184FF;--icon:url('./logos/chutes.svg')"><img src="./logos/chutes.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Chutes</strong><span data-i18n="auth.apiKey">API key</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/zed.md"><span class="provider-logo" style="--brand:#084EFF;--icon:url('./logos/zed.svg')"><img src="./logos/zed.svg" alt="" loading="lazy" onerror="this.remove()" /></span><p><strong>Zed</strong><span data-i18n="auth.local">Local</span></p></a></li> <li class="provider-card"><a class="provider-card-link" href="https://github.com/steipete/CodexBar/blob/main/docs/provider.md"><span class="provider-logo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 .83.18 2 2 0 0 0 .83-.18l8.58-3.9a1 1 0 0 0 0-1.831z"/><path d="M16 17h6"/><path d="M19 14v6"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 .825.178"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l2.116-.962"/></svg></span><p><strong data-i18n="providers.yourProvider">Your provider</strong><span class="provider-authoring"><span data-i18n="providers.authoringGuide">Authoring guide</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg></span></p></a></li> </ul> </div> </section> <section class="features-section px-5 py-20 sm:px-8 lg:px-12 lg:py-28" data-scroll-section> <div class="section-inner"> <h2 class="features-heading provider-reveal text-balance" data-i18n="features.title">Limits, spend, and status</h2> <div class="features-grid relative z-10"> <article class="feature-card provider-reveal" style="--reveal-delay: 80ms"> <div class="feature-card-copy"> <h3 data-i18n="features.resetsTitle">Resets you can plan around</h3> <p data-i18n="features.resetsBody">Per-provider session, weekly, and monthly windows with countdowns to the next reset — no more guessing whether to start a long task.</p> </div> <div class="feature-card-visual" aria-hidden="true"> <img src="./features/feature-resets.webp" alt="" width="1620" height="1020" loading="lazy" /> <div class="feature-card-overlay is-usage-menu"> <div class="feature-usage-panel"> <header class="feature-usage-header"> <p><strong>Codex</strong><span data-i18n="mockup.updatedJustNow">Updated just now</span></p> <p class="feature-usage-account"><strong>user@example.com</strong><span data-i18n="mockup.plus">Plus</span></p> </header> <section class="feature-usage-block"> <h4 class="feature-usage-title" data-i18n="mockup.session">Session</h4> <div class="feature-usage-track" aria-hidden="true"> <div class="feature-usage-fill" style="--amount: 100%"> <i style="--flex: 89"></i> <i class="is-reserve" style="--flex: 5"></i> <i class="is-spent" style="--flex: 6"></i> </div> </div> <div class="feature-usage-meta"> <div> <p><strong data-i18n="mockup.left89">89% left</strong><span class="is-subtle" data-i18n="mockup.reserve5">5% in reserve</span></p> </div> <div> <p><strong data-i18n="mockup.resets4h12m">Resets in 4h 12m</strong><span class="is-subtle" data-i18n="mockup.lastsUntilReset">Lasts until reset</span></p> </div> </div> </section> <section class="feature-usage-block"> <h4 class="feature-usage-title" data-i18n="mockup.weekly">Weekly</h4> <div class="feature-usage-track" aria-hidden="true"> <div class="feature-usage-fill" style="--amount: 100%"> <i style="--flex: 98"></i> <i class="is-spent" style="--flex: 2"></i> </div> </div> <div class="feature-usage-meta"> <div> <p><strong data-i18n="mockup.left98">98% left</strong></p> </div> <div> <p><strong data-i18n="mockup.resets6d23h">Resets in 6d 23h</strong></p> </div> </div> </section> </div> </div> </div> </article> <article class="feature-card provider-reveal" style="--reveal-delay: 140ms"> <div class="feature-card-copy"> <h3 data-i18n="features.spendTitle">Credits, spend, and cost scans</h3> <p data-i18n="features.spendBody">Credit balances and monthly spend where the provider exposes them, plus configurable local cost scans for Codex and Claude.</p> </div> <div class="feature-card-visual" aria-hidden="true"> <img src="./features/feature-credits.webp" alt="" width="1620" height="1020" loading="lazy" /> <div class="feature-card-overlay"> <div class="feature-cost-panel"> <div class="feature-credit-head"> <p><strong data-i18n="mockup.limitResetCredits">Limit Reset Credits</strong><span data-i18n="mockup.nextExpires27d21h">Next expires in 27d 21h</span></p> <p><strong data-i18n="mockup.manualResetAvailable">1 reset available</strong></p> </div> <dl class="feature-cost-stats"> <div> <dt data-i18n="mockup.today">Today</dt> <dd>$86.62</dd> </div> <div> <dt data-i18n="mockup.last31DaysCost">Last 31 days Cost</dt> <dd>$5,286.29</dd> </div> <div> <dt data-i18n="mockup.last31DaysTokens">Last 31 days tokens</dt> <dd>5.9B</dd> </div> <div> <dt data-i18n="mockup.latestTokens">Latest tokens</dt> <dd>119M</dd> </div> </dl> <div class="feature-cost-chart" aria-hidden="true"> <i style="--h: 72%"></i><i style="--h: 77%"></i><i style="--h: 53%"></i><i style="--h: 81%"></i><i style="--h: 46%"></i><i style="--h: 96%"></i><i style="--h: 47%"></i><i style="--h: 10%"></i><i style="--h: 29%"></i><i style="--h: 64%"></i><i style="--h: 21%"></i><i style="--h: 5%"></i><i style="--h: 23%"></i><i style="--h: 22%"></i><i style="--h: 4%"></i><i style="--h: 10%"></i><i style="--h: 37%"></i><i style="--h: 45%"></i><i style="--h: 33%"></i><i style="--h: 50%"></i><i style="--h: 58%"></i><i style="--h: 35%"></i><i style="--h: 48%"></i><i style="--h: 55%"></i><i style="--h: 40%"></i><i style="--h: 8%"></i><i style="--h: 7%"></i><i style="--h: 8%"></i><i style="--h: 20%"></i><i style="--h: 54%"></i><i style="--h: 22%"></i> </div> </div> </div> </div> </article> <article class="feature-card provider-reveal" style="--reveal-delay: 200ms"> <div class="feature-card-copy"> <h3 data-i18n="features.statusTitle">Status & incidents</h3> <p data-i18n="features.statusBody">Provider status polling surfaces incident badges in the menu and an indicator overlay on the bar icon.</p> </div> <div class="feature-card-visual" aria-hidden="true"> <img src="./features/feature-status.webp" alt="" width="1620" height="1020" loading="lazy" /> <div class="feature-card-overlay is-status-menu"> <div class="feature-status-panel"> <p class="feature-status-summary"><span data-i18n="mockup.partialDegradation">Partial degradation</span> <span data-i18n="mockup.twoIncidents">2 incidents</span></p> <ul class="feature-status-list" aria-hidden="true"> <li class="is-critical"> <span class="feature-status-dot"></span> <span class="feature-status-name">Codex API</span> <span class="feature-status-label" data-i18n="mockup.majorOutage">Major outage</span> </li> <li class="is-minor"> <span class="feature-status-dot"></span> <span class="feature-status-name">Chat Completions</span> <span class="feature-status-label" data-i18n="mockup.degraded">Degraded</span> </li> <li> <span class="feature-status-dot"></span> <span class="feature-status-name">CLI</span> <span class="feature-status-label" data-i18n="mockup.operational">Operational</span> </li> <li> <span class="feature-status-dot"></span> <span class="feature-status-name">Responses</span> <span class="feature-status-label" data-i18n="mockup.operational">Operational</span> </li> </ul> </div> </div> </div> </article> </div> </div> </section> <section class="cli-section px-5 py-20 sm:px-8 lg:px-12 lg:py-28" data-scroll-section> <div class="section-inner relative z-10"> <div class="split-layout"> <div class="split-visual-wrap provider-reveal" role="img" aria-label="CodexBar CLI output preview" data-i18n-aria-label="cli.outputPreviewAria"> <div class="cli-terminal"> <div class="cli-terminal-chrome"> <div class="cli-terminal-dots" aria-hidden="true"> <span></span><span></span><span></span> </div> <p class="cli-terminal-title">codexbar · terminal</p> <div class="cli-terminal-chrome-spacer" aria-hidden="true"></div> </div> <div class="cli-terminal-body"> <section class="cli-provider-block"> <p class="cli-provider-label">== Codex (oauth) ==</p> <div class="cli-row"> <span class="cli-row-label" data-i18n="mockup.session">Session</span> <span class="cli-row-value" data-i18n="cli.left99">99% left</span>