775 lines · 62.8 KB · HTML
RawDownload
<!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&nbsp;&nbsp;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 &amp; 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 &amp; 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.