@a-r-m-i-n/opencode-openai-usage 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Armin Vieweg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,116 @@
+# @a-r-m-i-n/opencode-openai-usage
+
+OpenCode plugin that reads your ChatGPT account usage and shows it in the TUI sidebar and command palette.
+
+The sidebar panel starts expanded and can be collapsed.
+
+![OpenAI Usage sidebar showing active usage windows](docs/screenshots/sidebar-expanded.png)
+
+## What It Does
+
+- fetches usage data from OpenAI Backend API
+- reads the OpenCode OpenAI OAuth token from OpenCode's local state
+- shows usage windows in the collapsible sidebar
+- adds `OpenAI Usage`, `OpenAI Usage: Toggle Sidebar Display`, and `OpenAI Usage: Show/Hide Sidebar Section` commands to the TUI command list
+
+## Screenshots
+
+### Command Palette
+
+Shows the OpenAI-specific commands added by the plugin.
+
+- `OpenAI Usage`: opens the detailed usage dialog
+- `OpenAI Usage: Toggle Sidebar Display`: switches the sidebar between used quota and remaining quota
+- `OpenAI Usage: Show Sidebar Section` / `OpenAI Usage: Hide Sidebar Section`: toggles the sidebar section and persists the setting across restarts
+
+<img src="docs/screenshots/command-palette-openai.png" alt="Command palette with OpenAI Usage commands" width="400" />
+
+### Usage Dialog
+
+Shows the detailed usage summary, including the current usage windows and account details returned by the upstream endpoint.
+
+<img src="docs/screenshots/openai-usage-dialog.png" alt="OpenAI Usage dialog" width="400" />
+
+### Sidebar Display Modes
+
+The sidebar can show either used quota or remaining quota.
+
+Used mode:
+
+<img src="docs/screenshots/mode-used.png" alt="Sidebar showing used quota" width="350" />
+
+Left mode:
+
+<img src="docs/screenshots/mode-left.png" alt="Sidebar showing remaining quota" width="350" />
+
+## Requirements
+
+- OpenCode with an OpenAI account connected via OAuth
+- Node.js and npm available for installation/build steps
+
+## Install From npm
+
+```bash
+npm install @a-r-m-i-n/opencode-openai-usage
+```
+
+Add the runtime plugin in `opencode.json`:
+
+```json
+{
+  "$schema": "https://opencode.ai/config.json",
+  "plugin": ["@a-r-m-i-n/opencode-openai-usage"]
+}
+```
+
+Add the TUI plugin in `tui.json`:
+
+```json
+{
+  "$schema": "https://opencode.ai/tui.json",
+  "plugin": [["@a-r-m-i-n/opencode-openai-usage/tui", { "invert": false }]]
+}
+```
+
+After changing config, quit and restart OpenCode.
+
+## TUI Options
+
+The TUI plugin accepts options in `tui.json`:
+
+```json
+{
+  "$schema": "https://opencode.ai/tui.json",
+  "plugin": [["@a-r-m-i-n/opencode-openai-usage/tui", { "invert": true }]]
+}
+```
+
+| Option | Default | Description |
+|---|---|---|
+| `invert` | `false` | Default sidebar mode. `false` shows used quota like `60% used`; `true` shows remaining quota like `40% left`. After the `OpenAI Usage: Toggle Sidebar Display` command is used, the last selected mode is persisted across restarts. |
+
+## Project Structure
+
+```text
+src/
+  index.ts
+  tui.tsx
+  lib/openai-usage.ts
+.opencode/
+  plugins/openai-usage.ts
+  tui/openai-usage.tsx
+  tui.json
+```
+
+## Notes And Limitations
+
+- The plugin depends on OpenCode's locally stored `auth.json` format.
+- The usage endpoint is an internal ChatGPT web endpoint and may change without notice.
+- The plugin caches usage data locally in OpenCode's state directory.
+- The plugin hides its sidebar panel when OpenCode has no OpenAI OAuth account configured.
+- Usage-specific commands are hidden when OpenCode has no OpenAI OAuth account configured, but the sidebar visibility toggle remains available.
+- The command summary currently includes the account email returned by the upstream endpoint.
+
+## License
+
+MIT

package/dist/chunk-SR64YZVV.js

@@ -0,0 +1,396 @@
+// src/lib/openai-usage.ts
+import { mkdir, readFile, writeFile } from "fs/promises";
+import { homedir } from "os";
+import { dirname, join } from "path";
+var USAGE_URL = "https://chatgpt.com/backend-api/wham/usage";
+var CACHE_FILE = "storage/openai-usage-cache.json";
+var AUTH_FILE = "auth.json";
+var FETCH_TIMEOUT_MS = 15e3;
+var COMMAND_SUMMARY_DIVIDER = "-".repeat(56);
+var DEFAULT_USAGE_STATE = {
+  primary: null,
+  secondary: null,
+  fetchedAt: null,
+  error: null,
+  loading: true,
+  configured: null,
+  rateLimitReachedType: null,
+  accountId: null,
+  userId: null,
+  email: null,
+  planType: null
+};
+function getOpenCodeStateDir() {
+  const xdgDataHome = process.env.XDG_DATA_HOME;
+  if (xdgDataHome) {
+    return join(xdgDataHome, "opencode");
+  }
+  if (process.platform === "darwin") {
+    return join(homedir(), "Library", "Application Support", "opencode");
+  }
+  if (process.platform === "win32") {
+    const appData = process.env.APPDATA;
+    if (appData) {
+      return join(appData, "opencode");
+    }
+  }
+  return join(homedir(), ".local", "share", "opencode");
+}
+function getUsageCachePath(stateDir) {
+  return join(stateDir, CACHE_FILE);
+}
+async function readUsageState(stateDir) {
+  const cachePath = getUsageCachePath(stateDir);
+  try {
+    const raw = await readFile(cachePath, "utf8");
+    return normalizeStoredState(JSON.parse(raw));
+  } catch {
+    return { ...DEFAULT_USAGE_STATE };
+  }
+}
+async function writeUsageState(stateDir, state) {
+  const cachePath = getUsageCachePath(stateDir);
+  await mkdir(dirname(cachePath), { recursive: true });
+  await writeFile(cachePath, JSON.stringify(state, null, 2));
+}
+async function buildUsageState(stateDir) {
+  let accessToken;
+  try {
+    const auth = await readAuthFile(stateDir);
+    accessToken = extractAccessToken(auth);
+  } catch (error) {
+    if (isNotConfiguredError(error)) {
+      return buildUnconfiguredState();
+    }
+    throw error;
+  }
+  const data = await fetchUsagePayload(accessToken);
+  const rateLimits = extractRateLimitsPayload(data);
+  const secondaryPayload = rateLimits.secondary ?? rateLimits.secondary_window ?? null;
+  const rateLimitReachedType = normalizeOptionalString(
+    rateLimits.rateLimitReachedType ?? rateLimits.rate_limit_reached_type ?? null
+  );
+  return {
+    primary: normalizeWindow(rateLimits.primary ?? rateLimits.primary_window ?? null, "primary"),
+    secondary: secondaryPayload === null ? null : normalizeWindow(secondaryPayload, "secondary"),
+    fetchedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    error: null,
+    loading: false,
+    configured: true,
+    rateLimitReachedType,
+    email: normalizeOptionalString(data.email ?? rateLimits.email ?? null),
+    accountId: normalizeOptionalString(
+      data.account_id ?? data.accountId ?? rateLimits.account_id ?? rateLimits.accountId ?? null
+    ),
+    userId: normalizeOptionalString(
+      data.user_id ?? data.userId ?? rateLimits.user_id ?? rateLimits.userId ?? null
+    ),
+    planType: normalizeOptionalString(
+      data.plan_type ?? data.planType ?? rateLimits.plan_type ?? rateLimits.planType ?? null
+    )
+  };
+}
+function buildFailureState(previous, error) {
+  return {
+    ...previous,
+    loading: false,
+    error: formatError(error)
+  };
+}
+function formatCommandSummary(state, packageName, pluginVersion, githubUrl) {
+  const lines = [];
+  let hasUsageDetails = false;
+  if (state.error) {
+    lines.push("Status: unavailable");
+    lines.push(`Error: ${state.error}`);
+    hasUsageDetails = true;
+  }
+  hasUsageDetails = appendWindowLines(lines, "Primary", state.primary) || hasUsageDetails;
+  if (state.primary && state.secondary) {
+    lines.push("");
+  }
+  hasUsageDetails = appendWindowLines(lines, "Secondary", state.secondary) || hasUsageDetails;
+  if (state.rateLimitReachedType) {
+    lines.push(`Rate limit reached type: ${state.rateLimitReachedType}`);
+    hasUsageDetails = true;
+  }
+  if (state.planType) {
+    lines.push("");
+    lines.push(`Plan: ${state.planType}`);
+    hasUsageDetails = true;
+  }
+  if (state.email) {
+    lines.push(`Account email: ${state.email}`);
+    hasUsageDetails = true;
+  }
+  if (state.fetchedAt) {
+    lines.push(`Fetched at: ${formatTimestamp(state.fetchedAt)}`);
+    hasUsageDetails = true;
+  }
+  if (!hasUsageDetails) {
+    lines.push("Status: unavailable");
+    lines.push("Error: Usage data has not been fetched yet.");
+  }
+  const pluginLines = [];
+  if (packageName) {
+    pluginLines.push(`Plugin: ${packageName}`);
+  }
+  if (pluginVersion) {
+    pluginLines.push(`Version: ${pluginVersion}`);
+  }
+  if (githubUrl) {
+    if (pluginLines.length > 0) {
+      pluginLines.push("");
+    }
+    pluginLines.push(githubUrl);
+  }
+  if (pluginLines.length > 0) {
+    lines.push("");
+    lines.push(COMMAND_SUMMARY_DIVIDER);
+    lines.push("");
+    lines.push(...pluginLines);
+  }
+  return lines.join("\n");
+}
+function getUsageDisplay(usedPercent, invert) {
+  const clampedUsedPercent = Math.max(0, Math.min(100, usedPercent));
+  if (invert) {
+    return {
+      percent: Math.max(0, 100 - clampedUsedPercent),
+      label: "left"
+    };
+  }
+  return {
+    percent: clampedUsedPercent,
+    label: "used"
+  };
+}
+function appendWindowLines(lines, label, window) {
+  if (!window) {
+    return false;
+  }
+  const leftPercent = Math.max(0, 100 - window.usedPercent);
+  lines.push(`${label} window`);
+  lines.push(
+    `${formatWindowLabel(window.windowDurationMins)}: ${formatPercent(window.usedPercent)} used, ${formatPercent(leftPercent)} left, resets ${formatTimestamp(window.resetsAt)}`
+  );
+  return true;
+}
+async function readAuthFile(stateDir) {
+  const authPath = join(stateDir, AUTH_FILE);
+  let raw;
+  try {
+    raw = await readFile(authPath, "utf8");
+  } catch (error) {
+    if (isMissingFileError(error)) {
+      throw new NotConfiguredError("OpenCode has no ChatGPT auth configured.");
+    }
+    throw error;
+  }
+  return JSON.parse(raw);
+}
+function extractAccessToken(auth) {
+  const provider = auth.openai;
+  if (!isRecord(provider)) {
+    throw new NotConfiguredError("OpenCode has no ChatGPT auth configured.");
+  }
+  const oauth = provider;
+  if (oauth.type !== "oauth") {
+    throw new NotConfiguredError("OpenCode has no ChatGPT auth configured.");
+  }
+  if (typeof oauth.access !== "string" || oauth.access.length === 0) {
+    throw new NotConfiguredError("OpenCode has no ChatGPT auth configured.");
+  }
+  return oauth.access;
+}
+function buildUnconfiguredState() {
+  return {
+    ...DEFAULT_USAGE_STATE,
+    loading: false,
+    configured: false
+  };
+}
+async function fetchUsagePayload(accessToken) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+  let response;
+  try {
+    response = await fetch(USAGE_URL, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        Accept: "application/json"
+      },
+      signal: controller.signal
+    });
+  } catch (error) {
+    if (error instanceof Error && error.name === "AbortError") {
+      throw new Error(`Usage request timed out after ${Math.floor(FETCH_TIMEOUT_MS / 1e3)}s.`);
+    }
+    throw error;
+  } finally {
+    clearTimeout(timeout);
+  }
+  if (!response.ok) {
+    let details = "";
+    try {
+      details = await response.text();
+    } catch {
+      details = "";
+    }
+    const body = details.trim();
+    const suffix = body ? ` - ${body.slice(0, 300)}` : "";
+    throw new Error(`Usage request failed: HTTP ${response.status}${suffix}`);
+  }
+  const data = await response.json();
+  if (!isRecord(data)) {
+    throw new Error("Usage response is not a JSON object.");
+  }
+  return data;
+}
+function extractRateLimitsPayload(data) {
+  const rateLimits = data.rateLimits ?? data.rate_limits ?? data.rate_limit ?? null;
+  return isRecord(rateLimits) ? rateLimits : data;
+}
+function normalizeWindow(window, name) {
+  if (!isRecord(window)) {
+    throw new Error(`Usage response is missing ${name} window data.`);
+  }
+  let windowDurationMins = toNumber(window.windowDurationMins ?? window.window_duration_mins ?? null);
+  const windowDurationSeconds = toNumber(window.limit_window_seconds ?? null);
+  const usedPercent = toNumber(window.usedPercent ?? window.used_percent ?? null);
+  const resetsAt = window.resetsAt ?? window.resetAt ?? window.reset_at ?? null;
+  if (windowDurationMins === null && windowDurationSeconds !== null) {
+    windowDurationMins = Math.ceil(windowDurationSeconds / 60);
+  }
+  if (usedPercent === null || windowDurationMins === null || !isValidResetValue(resetsAt)) {
+    throw new Error(`Usage response contains incomplete ${name} window data.`);
+  }
+  return {
+    usedPercent,
+    windowDurationMins,
+    resetsAt: normalizeResetValue(resetsAt)
+  };
+}
+function normalizeStoredState(input) {
+  return {
+    primary: normalizeStoredWindow(input.primary),
+    secondary: normalizeStoredWindow(input.secondary),
+    fetchedAt: normalizeOptionalString(input.fetchedAt ?? null),
+    error: normalizeOptionalString(input.error ?? null),
+    loading: input.loading === true,
+    configured: typeof input.configured === "boolean" ? input.configured : null,
+    rateLimitReachedType: normalizeOptionalString(input.rateLimitReachedType ?? null),
+    accountId: normalizeOptionalString(input.accountId ?? null),
+    userId: normalizeOptionalString(input.userId ?? null),
+    email: normalizeOptionalString(input.email ?? null),
+    planType: normalizeOptionalString(input.planType ?? null)
+  };
+}
+function normalizeStoredWindow(window) {
+  if (!isRecord(window)) {
+    return null;
+  }
+  const usedPercent = toNumber(window.usedPercent ?? null);
+  const windowDurationMins = toNumber(window.windowDurationMins ?? null);
+  const resetsAt = normalizeOptionalString(window.resetsAt ?? null);
+  if (usedPercent === null || windowDurationMins === null || !resetsAt) {
+    return null;
+  }
+  return { usedPercent, windowDurationMins, resetsAt };
+}
+function normalizeOptionalString(value) {
+  return typeof value === "string" && value.length > 0 ? value : null;
+}
+function formatPercent(value) {
+  return Number.isInteger(value) ? `${value}%` : `${value.toFixed(1)}%`;
+}
+function formatWindowLabel(windowDurationMins) {
+  if (windowDurationMins % (60 * 24) === 0) {
+    return `${windowDurationMins / (60 * 24)}d`;
+  }
+  if (windowDurationMins % 60 === 0) {
+    return `${windowDurationMins / 60}h`;
+  }
+  return `${windowDurationMins}m`;
+}
+function formatTimestamp(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  const yyyy = `${date.getFullYear()}`;
+  const mm = `${date.getMonth() + 1}`.padStart(2, "0");
+  const dd = `${date.getDate()}`.padStart(2, "0");
+  const hh = `${date.getHours()}`.padStart(2, "0");
+  const mi = `${date.getMinutes()}`.padStart(2, "0");
+  return `${yyyy}-${mm}-${dd} ${hh}:${mi}`;
+}
+function formatRelativeDuration(value) {
+  const timestamp = Date.parse(value);
+  if (Number.isNaN(timestamp)) {
+    return formatTimestamp(value);
+  }
+  return formatDurationParts(Math.max(0, timestamp - Date.now()));
+}
+function formatDurationParts(diffMs) {
+  const totalMinutes = Math.ceil(diffMs / 6e4);
+  const days = Math.floor(totalMinutes / (60 * 24));
+  const hours = Math.floor(totalMinutes % (60 * 24) / 60);
+  const minutes = totalMinutes % 60;
+  if (days > 0) {
+    return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
+  }
+  if (hours > 0) {
+    return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+  }
+  return `${Math.max(1, minutes)}m`;
+}
+function isValidResetValue(value) {
+  return typeof value === "string" && value.length > 0 || typeof value === "number";
+}
+function normalizeResetValue(value) {
+  return typeof value === "number" ? new Date(value * 1e3).toISOString() : value;
+}
+function toNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isMissingFileError(error) {
+  return isRecord(error) && error.code === "ENOENT";
+}
+function isNotConfiguredError(error) {
+  return error instanceof NotConfiguredError;
+}
+var NotConfiguredError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "NotConfiguredError";
+  }
+};
+function formatError(error) {
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+  return "Unknown usage error.";
+}
+
+export {
+  getOpenCodeStateDir,
+  readUsageState,
+  writeUsageState,
+  buildUsageState,
+  buildFailureState,
+  formatCommandSummary,
+  getUsageDisplay,
+  formatWindowLabel,
+  formatRelativeDuration
+};

package/dist/index.js

@@ -0,0 +1,73 @@
+import {
+  buildFailureState,
+  buildUsageState,
+  getOpenCodeStateDir,
+  readUsageState,
+  writeUsageState
+} from "./chunk-SR64YZVV.js";
+
+// src/index.ts
+var id = "openai-usage";
+var REFRESH_MS = 6e4;
+var MAX_BACKOFF_MS = 15 * 6e4;
+function shouldRefreshOnEvent(type) {
+  return type === "account.added" || type === "account.removed" || type === "account.switched" || type === "session.next.prompted" || type === "command.executed";
+}
+var module = {
+  id,
+  server: async () => {
+    const stateDir = getOpenCodeStateDir();
+    let currentState = await readUsageState(stateDir);
+    let refreshInFlight = null;
+    let timer;
+    let nextDelay = REFRESH_MS;
+    const persistState = async (state = currentState) => {
+      currentState = state;
+      await writeUsageState(stateDir, currentState);
+    };
+    const refresh = async (_force = false) => {
+      if (refreshInFlight) {
+        return refreshInFlight;
+      }
+      refreshInFlight = (async () => {
+        try {
+          if (!currentState.fetchedAt) {
+            await persistState({ ...currentState, loading: true, error: null });
+          }
+          const nextState = await buildUsageState(stateDir);
+          nextDelay = REFRESH_MS;
+          await persistState(nextState);
+        } catch (error) {
+          nextDelay = Math.min(nextDelay * 2, MAX_BACKOFF_MS);
+          await persistState(buildFailureState(currentState, error));
+        } finally {
+          refreshInFlight = null;
+          schedule(nextDelay);
+        }
+      })();
+      return refreshInFlight;
+    };
+    const schedule = (delay) => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        void refresh(true);
+      }, delay);
+    };
+    void refresh(true);
+    return {
+      event: async ({ event }) => {
+        if (!shouldRefreshOnEvent(event.type)) {
+          return;
+        }
+        await refresh(true);
+      }
+    };
+  }
+};
+var index_default = module;
+export {
+  index_default as default,
+  id
+};

package/dist/tui.js

@@ -0,0 +1,245 @@
+import {
+  formatCommandSummary,
+  formatRelativeDuration,
+  formatWindowLabel,
+  getOpenCodeStateDir,
+  getUsageDisplay,
+  readUsageState
+} from "./chunk-SR64YZVV.js";
+
+// src/tui.tsx
+import { createRequire } from "module";
+import { createTextAttributes } from "@opentui/core";
+import { createSignal } from "solid-js";
+import { jsx, jsxs } from "@opentui/solid/jsx-runtime";
+var id = "openai-usage-tui";
+var CACHE_SYNC_MS = 5e3;
+var DIM_ATTRIBUTES = createTextAttributes({ dim: true });
+var BAR_WIDTH = 20;
+var BAR_EMPTY_COLOR = "#6b7280";
+var BAR_LABEL_DARK_COLOR = "#111827";
+var BAR_LABEL_LIGHT_COLOR = "#f9fafb";
+var SIDEBAR_VERSION_COLOR = "#9ca3af";
+var SIDEBAR_INVERT_KV_KEY = "openai-usage.sidebar.invert";
+var SIDEBAR_VISIBLE_KV_KEY = "openai-usage.sidebar.visible";
+var require2 = createRequire(import.meta.url);
+var PLUGIN_MANIFEST = readPluginManifest();
+var PACKAGE_NAME = PLUGIN_MANIFEST.name;
+var PLUGIN_VERSION = PLUGIN_MANIFEST.version;
+var PACKAGE_HOMEPAGE = PLUGIN_MANIFEST.homepage;
+function readPluginManifest() {
+  try {
+    const manifest = require2("../package.json");
+    const homepage = typeof manifest.homepage === "string" && manifest.homepage.length > 0 ? manifest.homepage.replace(/#readme$/i, "") : null;
+    return {
+      name: typeof manifest.name === "string" && manifest.name.length > 0 ? manifest.name : null,
+      version: typeof manifest.version === "string" && manifest.version.length > 0 ? manifest.version : null,
+      homepage
+    };
+  } catch {
+    return { name: null, version: null, homepage: null };
+  }
+}
+function formatPercent(percent) {
+  return Number.isInteger(percent) ? `${percent}%` : `${percent.toFixed(1)}%`;
+}
+function getBarFillColor(percent, labelSuffix) {
+  if (labelSuffix === "used") {
+    if (percent >= 50) {
+      return "#ef4444";
+    }
+    if (percent >= 20) {
+      return "#eab308";
+    }
+    return "#22c55e";
+  }
+  if (percent >= 50) {
+    return "#22c55e";
+  }
+  if (percent >= 20) {
+    return "#eab308";
+  }
+  return "#ef4444";
+}
+function getBarSegments(percent, width) {
+  const clampedPercent = Math.max(0, Math.min(100, percent));
+  const filled = Math.round(clampedPercent / 100 * width);
+  return {
+    filled: Math.max(0, Math.min(width, filled)),
+    empty: Math.max(0, width - filled)
+  };
+}
+function getBarLabelColor(fillColor) {
+  return fillColor === "#ef4444" ? BAR_LABEL_LIGHT_COLOR : BAR_LABEL_DARK_COLOR;
+}
+function renderProgressBar(percent, labelSuffix) {
+  const barSegments = getBarSegments(percent, BAR_WIDTH);
+  const barFillColor = getBarFillColor(percent, labelSuffix);
+  const label = `${formatPercent(percent)} ${labelSuffix}`;
+  const labelStart = Math.max(0, Math.floor((BAR_WIDTH - label.length) / 2));
+  const labelEnd = labelStart + label.length;
+  return Array.from({ length: BAR_WIDTH }, (_, index) => {
+    const isFilled = index < barSegments.filled;
+    const isLabelCell = index >= labelStart && index < labelEnd;
+    const underlyingColor = isFilled ? barFillColor : BAR_EMPTY_COLOR;
+    if (isLabelCell) {
+      return /* @__PURE__ */ jsx("text", { fg: isFilled ? getBarLabelColor(barFillColor) : BAR_LABEL_LIGHT_COLOR, bg: underlyingColor, children: label[index - labelStart] });
+    }
+    return isFilled ? /* @__PURE__ */ jsx("text", { fg: underlyingColor, children: "\u2588" }) : /* @__PURE__ */ jsx("text", { bg: BAR_EMPTY_COLOR, children: " " });
+  });
+}
+var module = {
+  id,
+  tui: async (api, rawOptions) => {
+    const stateDir = getOpenCodeStateDir();
+    const options = rawOptions ?? {};
+    const [sidebarVisible, setSidebarVisible] = createSignal(
+      api.kv.get(SIDEBAR_VISIBLE_KV_KEY, true) !== false
+    );
+    const [invert, setInvert] = createSignal(api.kv.get(SIDEBAR_INVERT_KV_KEY, options.invert === true) === true);
+    const [state, setState] = createSignal(await readUsageState(stateDir));
+    const [open, setOpen] = createSignal(true);
+    let syncInFlight = null;
+    const syncState = async () => {
+      if (syncInFlight) {
+        return syncInFlight;
+      }
+      syncInFlight = (async () => {
+        try {
+          const nextState = await readUsageState(stateDir);
+          setState(nextState);
+        } finally {
+          syncInFlight = null;
+        }
+      })();
+      return syncInFlight;
+    };
+    const showUsageDialog = async () => {
+      await syncState();
+      const latestState = state();
+      setState(latestState);
+      api.ui.dialog.replace(
+        () => api.ui.DialogAlert({
+          title: "OpenAI Usage",
+          message: formatCommandSummary(latestState, PACKAGE_NAME, PLUGIN_VERSION, PACKAGE_HOMEPAGE)
+        })
+      );
+    };
+    const toggleSidebarInvert = () => {
+      const nextInvert = !invert();
+      setInvert(nextInvert);
+      api.kv.set(SIDEBAR_INVERT_KV_KEY, nextInvert);
+      api.ui.toast({
+        message: nextInvert ? "Sidebar now shows usage left." : "Sidebar now shows usage used."
+      });
+    };
+    const toggleSidebarVisibility = () => {
+      const nextVisible = !sidebarVisible();
+      setSidebarVisible(nextVisible);
+      api.kv.set(SIDEBAR_VISIBLE_KV_KEY, nextVisible);
+      api.ui.toast({
+        message: nextVisible ? "Sidebar section is now visible." : "Sidebar section is now hidden."
+      });
+    };
+    void syncState();
+    const timer = setInterval(() => {
+      void syncState();
+    }, CACHE_SYNC_MS);
+    api.lifecycle.onDispose(() => {
+      clearInterval(timer);
+    });
+    api.event.on("account.added", () => {
+      void syncState();
+    });
+    api.event.on("account.removed", () => {
+      void syncState();
+    });
+    api.event.on("account.switched", () => {
+      void syncState();
+    });
+    api.event.on("session.next.prompted", () => {
+      void syncState();
+    });
+    api.event.on("command.executed", () => {
+      void syncState();
+    });
+    const renderSidebarWindow = (window) => {
+      if (!window) {
+        return null;
+      }
+      const usageDisplay = getUsageDisplay(window.usedPercent, invert());
+      return /* @__PURE__ */ jsx("box", { flexDirection: "column", gap: 0, padding: 0, margin: 0, children: /* @__PURE__ */ jsxs("box", { flexDirection: "row", gap: 0, padding: 0, margin: 0, children: [
+        /* @__PURE__ */ jsx("text", { children: `${formatWindowLabel(window.windowDurationMins)} ` }),
+        renderProgressBar(usageDisplay.percent, usageDisplay.label),
+        /* @__PURE__ */ jsx("text", { attributes: DIM_ATTRIBUTES, children: ` Reset: ${formatRelativeDuration(window.resetsAt)}` })
+      ] }) });
+    };
+    const renderSidebarHeader = () => /* @__PURE__ */ jsxs("box", { flexDirection: "row", gap: 0, padding: 0, margin: 0, onMouseDown: () => setOpen(!open()), children: [
+      /* @__PURE__ */ jsx("text", { children: open() ? "\u25BC OpenAI Usage" : "\u25B6 OpenAI Usage" }),
+      PLUGIN_VERSION ? /* @__PURE__ */ jsx("text", { fg: SIDEBAR_VERSION_COLOR, attributes: DIM_ATTRIBUTES, children: ` ${PLUGIN_VERSION}` }) : null
+    ] });
+    const renderSidebarBody = () => {
+      const currentState = state();
+      if (currentState.error && !currentState.primary && !currentState.secondary) {
+        return /* @__PURE__ */ jsx("text", { children: `Status: unavailable
+Error: ${currentState.error}` });
+      }
+      if (!currentState.primary && !currentState.secondary) {
+        return /* @__PURE__ */ jsx("text", { children: "Status: waiting for usage data" });
+      }
+      return /* @__PURE__ */ jsxs("box", { flexDirection: "column", gap: 0, padding: 0, margin: 0, children: [
+        renderSidebarWindow(currentState.primary),
+        renderSidebarWindow(currentState.secondary)
+      ] });
+    };
+    const renderSidebarContent = () => {
+      const currentState = state();
+      if (!sidebarVisible() || currentState.configured === false) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxs("box", { flexDirection: "column", gap: 0, padding: 0, margin: 0, children: [
+        renderSidebarHeader(),
+        open() ? renderSidebarBody() : null
+      ] });
+    };
+    api.slots.register({
+      order: -100,
+      slots: {
+        sidebar_content: renderSidebarContent
+      }
+    });
+    const unregisterCommand = api.command?.register(() => [
+      {
+        title: sidebarVisible() ? "Hide Sidebar Section" : "Show Sidebar Section",
+        value: "openai-usage.toggle-sidebar-visibility",
+        description: "show/hide sidebar entry",
+        category: "OpenAI Usage",
+        onSelect: toggleSidebarVisibility
+      },
+      ...state().configured === false ? [] : [
+        {
+          title: "View status",
+          value: "openai-usage.show",
+          description: "from OpenAI's backend API",
+          category: "OpenAI Usage",
+          onSelect: showUsageDialog
+        },
+        {
+          title: "Toggle Display Mode",
+          value: "openai-usage.toggle-sidebar-invert",
+          description: "between used/left quota",
+          category: "OpenAI Usage",
+          onSelect: toggleSidebarInvert
+        }
+      ]
+    ]);
+    api.lifecycle.onDispose(() => {
+      unregisterCommand?.();
+    });
+  }
+};
+var tui_default = module;
+export {
+  tui_default as default,
+  id
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@a-r-m-i-n/opencode-openai-usage",
+  "version": "0.1.0",
+  "description": "OpenCode plugin that shows ChatGPT/OpenAI usage in the sidebar and command palette.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/a-r-m-i-n/opencode-openai-usage.git"
+  },
+  "homepage": "https://github.com/a-r-m-i-n/opencode-openai-usage#readme",
+  "bugs": {
+    "url": "https://github.com/a-r-m-i-n/opencode-openai-usage/issues"
+  },
+  "type": "module",
+  "keywords": [
+    "opencode",
+    "opencode-plugin",
+    "openai",
+    "chatgpt",
+    "tui"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./tui": "./dist/tui.js"
+  },
+  "scripts": {
+    "build": "tsup ./src/index.ts ./src/tui.tsx --format esm --out-dir dist --clean --external @opencode-ai/plugin --external @opencode-ai/plugin/tui --external @opentui/core --external @opentui/keymap --external @opentui/solid --external solid-js",
+    "test": "node --import tsx --test ./src/lib/openai-usage.test.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@opencode-ai/plugin": "1.15.10",
+    "@opentui/core": "0.2.16",
+    "@opentui/keymap": "0.2.16",
+    "@opentui/solid": "0.2.16",
+    "solid-js": "1.9.12"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.6",
+    "tsx": "^4.19.2",
+    "typescript": "^5.8.3"
+  }
+}