feat(cli): show Codex usage

.changeset/codex-usage-visibility.md

@@ -0,0 +1,6 @@
+---
+"@kilocode/cli": minor
+"kilo-code": minor
+---
+
+Show ChatGPT-backed Codex quota and purchased-credit status alongside other provider usage.

packages/kilo-docs/source-links.md

@@ -46,6 +46,8 @@
   <!-- packages/kilo-vscode/webview-ui/src/components/settings/ProviderConnectDialog.tsx -->
 - <https://blog.kilo.ai/p/new-kilo-for-vs-code-is-live>
   <!-- packages/kilo-vscode/webview-ui/src/components/migration/MigrationWizard.tsx -->
+- <https://chatgpt.com/codex/settings/usage>
+  <!-- packages/opencode/src/kilocode/provider/codex/usage.ts -->
 - <https://chatgpt.com/explore/plus>
   <!-- packages/opencode/src/provider/error.ts -->
 - <https://cli.github.com/>

packages/kilo-vscode/webview-ui/src/components/profile/ProviderUsageCards.tsx

@@ -77,75 +77,80 @@ const UsageCard: Component<{
       </p>
     </Show>
 
-    <div class="provider-usage-resources">
-      <For each={props.item.windows}>
-        {(window) => {
-          const progress = () => windowProgress(window)
-          return (
+    <Show
+      when={props.item.windows.length > 0 || props.item.balances.length > 0 || props.item.credits.length > 0}
+      fallback={<p class="provider-usage-meta">{props.language.t("profile.usage.detailsUnavailable")}</p>}
+    >
+      <div class="provider-usage-resources">
+        <For each={props.item.windows}>
+          {(window) => {
+            const progress = () => windowProgress(window)
+            return (
+              <div class="provider-usage-row">
+                <div class="provider-usage-row-heading">
+                  <span>{window.label}</span>
+                  <strong>{formatWindowValue(window, labels(props.language))}</strong>
+                </div>
+                <Show when={progress() !== undefined}>
+                  <Progress
+                    value={progress()}
+                    minValue={0}
+                    maxValue={100}
+                    aria-label={`${window.label}: ${formatWindowValue(window, labels(props.language))}`}
+                  />
+                </Show>
+                <Show when={window.resetAt}>
+                  {(reset) => (
+                    <span class="provider-usage-meta">
+                      {props.language.t("profile.usage.reset", { date: new Date(reset()).toLocaleString() })}
+                    </span>
+                  )}
+                </Show>
+              </div>
+            )
+          }}
+        </For>
+
+        <For each={props.item.balances}>
+          {(balance) => (
             <div class="provider-usage-row">
               <div class="provider-usage-row-heading">
-                <span>{window.label}</span>
-                <strong>{formatWindowValue(window, labels(props.language))}</strong>
+                <span>{balance.label}</span>
+                <strong>
+                  {balance.total} {balance.currency}
+                  {balance.available === false ? ` ${props.language.t("profile.usage.balance.unavailable")}` : ""}
+                </strong>
               </div>
-              <Show when={progress() !== undefined}>
-                <Progress
-                  value={progress()}
-                  minValue={0}
-                  maxValue={100}
-                  aria-label={`${window.label}: ${formatWindowValue(window, labels(props.language))}`}
-                />
-              </Show>
-              <Show when={window.resetAt}>
-                {(reset) => (
-                  <span class="provider-usage-meta">
-                    {props.language.t("profile.usage.reset", { date: new Date(reset()).toLocaleString() })}
-                  </span>
-                )}
+              <Show when={balance.granted !== undefined || balance.toppedUp !== undefined}>
+                <span class="provider-usage-meta">
+                  {props.language.t("profile.usage.balance.breakdown", {
+                    granted: balance.granted ?? props.language.t("profile.usage.status.unknown"),
+                    toppedUp: balance.toppedUp ?? props.language.t("profile.usage.status.unknown"),
+                  })}
+                </span>
               </Show>
             </div>
-          )
-        }}
-      </For>
+          )}
+        </For>
 
-      <For each={props.item.balances}>
-        {(balance) => (
-          <div class="provider-usage-row">
+        <For each={props.item.credits}>
+          {(credit) => (
             <div class="provider-usage-row-heading">
-              <span>{balance.label}</span>
+              <span>{credit.label}</span>
               <strong>
-                {balance.total} {balance.currency}
-                {balance.available === false ? ` ${props.language.t("profile.usage.balance.unavailable")}` : ""}
+                {credit.unlimited
+                  ? props.language.t("profile.usage.status.unlimited")
+                  : credit.balance !== undefined
+                    ? `${credit.balance}${credit.unit ? ` ${credit.unit}` : ""}`
+                    : credit.availableResets !== undefined
+                      ? props.language.t("profile.usage.credits.resets", { count: String(credit.availableResets) })
+                      : props.language.t("profile.usage.status.unknown")}
               </strong>
             </div>
-            <Show when={balance.granted !== undefined || balance.toppedUp !== undefined}>
-              <span class="provider-usage-meta">
-                {props.language.t("profile.usage.balance.breakdown", {
-                  granted: balance.granted ?? props.language.t("profile.usage.status.unknown"),
-                  toppedUp: balance.toppedUp ?? props.language.t("profile.usage.status.unknown"),
-                })}
-              </span>
-            </Show>
-          </div>
-        )}
-      </For>
-
-      <For each={props.item.credits}>
-        {(credit) => (
-          <div class="provider-usage-row-heading">
-            <span>{credit.label}</span>
-            <strong>
-              {credit.unlimited
-                ? props.language.t("profile.usage.status.unlimited")
-                : credit.balance !== undefined
-                  ? `${credit.balance}${credit.unit ? ` ${credit.unit}` : ""}`
-                  : credit.availableResets !== undefined
-                    ? props.language.t("profile.usage.credits.resets", { count: String(credit.availableResets) })
-                    : props.language.t("profile.usage.status.unknown")}
-            </strong>
-          </div>
-        )}
-      </For>
-    </div>
+          )}
+        </For>
+      </div>
+    </Show>
 
     <Show when={props.item.routingState !== "active" && props.item.routingState !== "not_applicable"}>
       <p class="provider-usage-notice">

packages/kilo-vscode/webview-ui/src/i18n/en.ts

@@ -1063,6 +1063,7 @@ export const dict = {
   "profile.usage.description": "Current plan quota and balances",
   "profile.usage.refresh": "Refresh provider usage",
   "profile.usage.empty": "No provider usage sources detected.",
+  "profile.usage.detailsUnavailable": "No usage details reported by provider for this plan.",
   "profile.usage.source.viaKilo": "via Kilo",
   "profile.usage.source.direct": "Direct",
   "profile.usage.source.chatgpt": "ChatGPT",

packages/opencode/script/build.ts

@@ -111,6 +111,8 @@ function smokeEnv(root: string) {
   delete env.KILO_CONFIG_DIR
   return {
     ...env,
+    HOME: path.join(root, "home"),
+    USERPROFILE: path.join(root, "home"),
     XDG_DATA_HOME: path.join(root, "data"),
     XDG_CACHE_HOME: path.join(root, "cache"),
     XDG_CONFIG_HOME: path.join(root, "config"),

packages/opencode/src/kilocode/components/dialog-provider-usage.tsx

@@ -47,6 +47,11 @@ function Item(props: { item: ProviderUsageSnapshot }) {
       <text fg={props.item.fetchState === "ready" ? theme.textMuted : theme.warning}>
         {props.item.fetchState === "ready" ? props.item.planState : props.item.fetchState}
       </text>
+      <Show
+        when={props.item.windows.length === 0 && props.item.balances.length === 0 && props.item.credits.length === 0}
+      >
+        <text fg={theme.textMuted}>No usage details reported by provider for this plan.</text>
+      </Show>
       <For each={props.item.windows}>
         {(window) => (
           <box>