feat: extend quota providers and add usage dropdown (#254) (#284)

* feat: extend quota providers and add usage dropdown

Add new quota providers:
- Claude (Anthropic API)
- Codex (OpenAI/ChatGPT)
- GitHub Copilot (base + add-on)
- Kimi for Coding
- OpenRouter

UI enhancements:
- Add rate limits dropdown in header with timer icon
- Desktop: sticky header with Used/Remaining toggle, refresh button
- Mobile: full-screen dropdown with same controls
- Per-provider sticky headers with provider logos
- Auto-refresh on open if no data exists

Usage settings page:
- Provider icon next to header
- Show in dropdown toggle per provider
- Global display selector (Usage vs Quota remaining)
- Auto-refresh controls in sidebar

Settings persistence:
- Add usageDisplayMode and usageDropdownProviders settings
- Server-side sanitization for new settings

Provider logo aliases:
- codex -> openai, claude -> anthropic

Bug fixes:
- Fix React error #310 by calling hooks before early returns
- Add aria-describedby to SettingsWindow dialog
- Remove horizontal scroll from dropdown

* fix: Remove duplicate github copilot declarations
This commit is contained in:
gsxdsm
2026-02-04 11:13:23 +02:00
committed by GitHub
parent 2785f4d9ad
commit a264393f1b
16 changed files with 1600 additions and 319 deletions
+3
View File
@@ -984,6 +984,9 @@ const sanitizeSettingsUpdate = (payload) => {
if (typeof candidate.usageRefreshIntervalMs === 'number' && Number.isFinite(candidate.usageRefreshIntervalMs)) {
result.usageRefreshIntervalMs = Math.max(30000, Math.min(300000, Math.round(candidate.usageRefreshIntervalMs)));
}
if (Array.isArray(candidate.usageDropdownProviders)) {
result.usageDropdownProviders = normalizeStringArray(candidate.usageDropdownProviders);
}
if (typeof candidate.autoDeleteEnabled === 'boolean') {
result.autoDeleteEnabled = candidate.autoDeleteEnabled;
}
+562 -110
View File
@@ -6,6 +6,7 @@ import { readAuthFile } from './opencode-auth.js';
const OPENCODE_CONFIG_DIR = path.join(os.homedir(), '.config', 'opencode');
const OPENCODE_DATA_DIR = path.join(os.homedir(), '.local', 'share', 'opencode');
const ANTIGRAVITY_ACCOUNTS_PATHS = [
path.join(OPENCODE_CONFIG_DIR, 'antigravity-accounts.json'),
path.join(OPENCODE_DATA_DIR, 'antigravity-accounts.json')
@@ -46,6 +47,29 @@ const normalizeAuthEntry = (entry) => {
return null;
};
const toNumber = (value) => {
if (typeof value === 'number' && Number.isFinite(value)) {
return value;
}
if (typeof value === 'string') {
const parsed = Number(value);
return Number.isFinite(parsed) ? parsed : null;
}
return null;
};
const toTimestamp = (value) => {
if (!value) return null;
if (typeof value === 'number') {
return value < 1_000_000_000_000 ? value * 1000 : value;
}
if (typeof value === 'string') {
const parsed = Date.parse(value);
return Number.isNaN(parsed) ? null : parsed;
}
return null;
};
const formatResetTime = (timestamp) => {
try {
const resetDate = new Date(timestamp);
@@ -79,7 +103,7 @@ const calculateResetAfterSeconds = (resetAt) => {
return delta < 0 ? 0 : delta;
};
const toUsageWindow = ({ usedPercent, windowSeconds, resetAt }) => {
const toUsageWindow = ({ usedPercent, windowSeconds, resetAt, valueLabel }) => {
const resetAfterSeconds = calculateResetAfterSeconds(resetAt);
const resetFormatted = resetAt ? formatResetTime(resetAt) : null;
return {
@@ -89,7 +113,8 @@ const toUsageWindow = ({ usedPercent, windowSeconds, resetAt }) => {
resetAfterSeconds,
resetAt,
resetAtFormatted: resetFormatted,
resetAfterFormatted: resetFormatted
resetAfterFormatted: resetFormatted,
...(valueLabel ? { valueLabel } : {})
};
};
@@ -103,13 +128,35 @@ const buildResult = ({ providerId, providerName, ok, configured, usage, error })
fetchedAt: Date.now()
});
const durationToLabel = (duration, unit) => {
if (!duration || !unit) return 'limit';
if (unit === 'TIME_UNIT_MINUTE') return `${duration}m`;
if (unit === 'TIME_UNIT_HOUR') return `${duration}h`;
if (unit === 'TIME_UNIT_DAY') return `${duration}d`;
return 'limit';
};
const durationToSeconds = (duration, unit) => {
if (!duration || !unit) return null;
if (unit === 'TIME_UNIT_MINUTE') return duration * 60;
if (unit === 'TIME_UNIT_HOUR') return duration * 3600;
if (unit === 'TIME_UNIT_DAY') return duration * 86400;
return null;
};
export const listConfiguredQuotaProviders = () => {
const auth = readAuthFile();
const configured = new Set();
const anthropicAuth = normalizeAuthEntry(getAuthEntry(auth, ['anthropic', 'claude']));
if (anthropicAuth?.access || anthropicAuth?.token) {
configured.add('claude');
}
const openaiAuth = normalizeAuthEntry(getAuthEntry(auth, ['openai', 'codex', 'chatgpt']));
if (openaiAuth?.access || openaiAuth?.token) {
configured.add('openai');
configured.add('codex');
}
const googleAuth = normalizeAuthEntry(getAuthEntry(auth, ['google', 'antigravity']));
@@ -122,9 +169,20 @@ export const listConfiguredQuotaProviders = () => {
configured.add('zai-coding-plan');
}
const githubCopilotAuth = normalizeAuthEntry(getAuthEntry(auth, ['github-copilot']));
if (githubCopilotAuth?.access || githubCopilotAuth?.token) {
const kimiAuth = normalizeAuthEntry(getAuthEntry(auth, ['kimi-for-coding', 'kimi']));
if (kimiAuth?.key || kimiAuth?.token) {
configured.add('kimi-for-coding');
}
const openrouterAuth = normalizeAuthEntry(getAuthEntry(auth, ['openrouter']));
if (openrouterAuth?.key || openrouterAuth?.token) {
configured.add('openrouter');
}
const copilotAuth = normalizeAuthEntry(getAuthEntry(auth, ['github-copilot', 'copilot']));
if (copilotAuth?.access || copilotAuth?.token) {
configured.add('github-copilot');
configured.add('github-copilot-addon');
}
for (const filePath of ANTIGRAVITY_ACCOUNTS_PATHS) {
@@ -397,6 +455,493 @@ export const fetchGoogleQuota = async () => {
});
};
const formatMoney = (value) => {
if (typeof value !== 'number' || !Number.isFinite(value)) return null;
return value.toFixed(2);
};
export const fetchClaudeQuota = async () => {
const auth = readAuthFile();
const entry = normalizeAuthEntry(getAuthEntry(auth, ['anthropic', 'claude']));
const accessToken = entry?.access ?? entry?.token;
if (!accessToken) {
return buildResult({
providerId: 'claude',
providerName: 'Claude',
ok: false,
configured: false,
error: 'Not configured'
});
}
try {
const response = await fetch('https://api.anthropic.com/api/oauth/usage', {
method: 'GET',
headers: {
Authorization: `Bearer ${accessToken}`,
'anthropic-beta': 'oauth-2025-04-20'
}
});
if (!response.ok) {
return buildResult({
providerId: 'claude',
providerName: 'Claude',
ok: false,
configured: true,
error: `API error: ${response.status}`
});
}
const payload = await response.json();
const windows = {};
const fiveHour = payload?.five_hour ?? null;
const sevenDay = payload?.seven_day ?? null;
const sevenDaySonnet = payload?.seven_day_sonnet ?? null;
const sevenDayOpus = payload?.seven_day_opus ?? null;
if (fiveHour) {
windows['5h'] = toUsageWindow({
usedPercent: toNumber(fiveHour.utilization),
windowSeconds: null,
resetAt: toTimestamp(fiveHour.resets_at)
});
}
if (sevenDay) {
windows['7d'] = toUsageWindow({
usedPercent: toNumber(sevenDay.utilization),
windowSeconds: null,
resetAt: toTimestamp(sevenDay.resets_at)
});
}
if (sevenDaySonnet) {
windows['7d-sonnet'] = toUsageWindow({
usedPercent: toNumber(sevenDaySonnet.utilization),
windowSeconds: null,
resetAt: toTimestamp(sevenDaySonnet.resets_at)
});
}
if (sevenDayOpus) {
windows['7d-opus'] = toUsageWindow({
usedPercent: toNumber(sevenDayOpus.utilization),
windowSeconds: null,
resetAt: toTimestamp(sevenDayOpus.resets_at)
});
}
return buildResult({
providerId: 'claude',
providerName: 'Claude',
ok: true,
configured: true,
usage: { windows }
});
} catch (error) {
return buildResult({
providerId: 'claude',
providerName: 'Claude',
ok: false,
configured: true,
error: error instanceof Error ? error.message : 'Request failed'
});
}
};
export const fetchCodexQuota = async () => {
const auth = readAuthFile();
const entry = normalizeAuthEntry(getAuthEntry(auth, ['openai', 'codex', 'chatgpt']));
const accessToken = entry?.access ?? entry?.token;
const accountId = entry?.accountId;
if (!accessToken) {
return buildResult({
providerId: 'codex',
providerName: 'Codex',
ok: false,
configured: false,
error: 'Not configured'
});
}
try {
const headers = {
Authorization: `Bearer ${accessToken}`,
'Content-Type': 'application/json',
...(accountId ? { 'ChatGPT-Account-Id': accountId } : {})
};
const response = await fetch('https://chatgpt.com/backend-api/wham/usage', {
method: 'GET',
headers
});
if (!response.ok) {
return buildResult({
providerId: 'codex',
providerName: 'Codex',
ok: false,
configured: true,
error: `API error: ${response.status}`
});
}
const payload = await response.json();
const primary = payload?.rate_limit?.primary_window ?? null;
const secondary = payload?.rate_limit?.secondary_window ?? null;
const credits = payload?.credits ?? null;
const windows = {};
if (primary) {
windows['5h'] = toUsageWindow({
usedPercent: toNumber(primary.used_percent),
windowSeconds: toNumber(primary.limit_window_seconds),
resetAt: toTimestamp(primary.reset_at)
});
}
if (secondary) {
windows['weekly'] = toUsageWindow({
usedPercent: toNumber(secondary.used_percent),
windowSeconds: toNumber(secondary.limit_window_seconds),
resetAt: toTimestamp(secondary.reset_at)
});
}
if (credits) {
const balance = toNumber(credits.balance);
const unlimited = Boolean(credits.unlimited);
const label = unlimited
? 'Unlimited'
: balance !== null
? `$${formatMoney(balance)} remaining`
: null;
windows.credits = toUsageWindow({
usedPercent: null,
windowSeconds: null,
resetAt: null,
valueLabel: label
});
}
return buildResult({
providerId: 'codex',
providerName: 'Codex',
ok: true,
configured: true,
usage: { windows }
});
} catch (error) {
return buildResult({
providerId: 'codex',
providerName: 'Codex',
ok: false,
configured: true,
error: error instanceof Error ? error.message : 'Request failed'
});
}
};
const buildCopilotWindows = (payload) => {
const quota = payload?.quota_snapshots ?? {};
const resetAt = toTimestamp(payload?.quota_reset_date);
const windows = {};
const addWindow = (label, snapshot) => {
if (!snapshot) return;
const entitlement = toNumber(snapshot.entitlement);
const remaining = toNumber(snapshot.remaining);
const usedPercent = entitlement && remaining !== null
? Math.max(0, Math.min(100, 100 - (remaining / entitlement) * 100))
: null;
const valueLabel = entitlement !== null && remaining !== null
? `${remaining.toFixed(0)} / ${entitlement.toFixed(0)} left`
: null;
windows[label] = toUsageWindow({
usedPercent,
windowSeconds: null,
resetAt,
valueLabel
});
};
addWindow('chat', quota.chat);
addWindow('completions', quota.completions);
addWindow('premium', quota.premium_interactions);
return windows;
};
export const fetchCopilotQuota = async () => {
const auth = readAuthFile();
const entry = normalizeAuthEntry(getAuthEntry(auth, ['github-copilot', 'copilot']));
const accessToken = entry?.access ?? entry?.token;
if (!accessToken) {
return buildResult({
providerId: 'github-copilot',
providerName: 'GitHub Copilot',
ok: false,
configured: false,
error: 'Not configured'
});
}
try {
const response = await fetch('https://api.github.com/copilot_internal/user', {
method: 'GET',
headers: {
Authorization: `token ${accessToken}`,
Accept: 'application/json',
'Editor-Version': 'vscode/1.96.2',
'X-Github-Api-Version': '2025-04-01'
}
});
if (!response.ok) {
return buildResult({
providerId: 'github-copilot',
providerName: 'GitHub Copilot',
ok: false,
configured: true,
error: `API error: ${response.status}`
});
}
const payload = await response.json();
return buildResult({
providerId: 'github-copilot',
providerName: 'GitHub Copilot',
ok: true,
configured: true,
usage: { windows: buildCopilotWindows(payload) }
});
} catch (error) {
return buildResult({
providerId: 'github-copilot',
providerName: 'GitHub Copilot',
ok: false,
configured: true,
error: error instanceof Error ? error.message : 'Request failed'
});
}
};
export const fetchCopilotAddonQuota = async () => {
const auth = readAuthFile();
const entry = normalizeAuthEntry(getAuthEntry(auth, ['github-copilot', 'copilot']));
const accessToken = entry?.access ?? entry?.token;
if (!accessToken) {
return buildResult({
providerId: 'github-copilot-addon',
providerName: 'GitHub Copilot Add-on',
ok: false,
configured: false,
error: 'Not configured'
});
}
try {
const response = await fetch('https://api.github.com/copilot_internal/user', {
method: 'GET',
headers: {
Authorization: `token ${accessToken}`,
Accept: 'application/json',
'Editor-Version': 'vscode/1.96.2',
'X-Github-Api-Version': '2025-04-01'
}
});
if (!response.ok) {
return buildResult({
providerId: 'github-copilot-addon',
providerName: 'GitHub Copilot Add-on',
ok: false,
configured: true,
error: `API error: ${response.status}`
});
}
const payload = await response.json();
const windows = buildCopilotWindows(payload);
const premium = windows.premium ? { premium: windows.premium } : windows;
return buildResult({
providerId: 'github-copilot-addon',
providerName: 'GitHub Copilot Add-on',
ok: true,
configured: true,
usage: { windows: premium }
});
} catch (error) {
return buildResult({
providerId: 'github-copilot-addon',
providerName: 'GitHub Copilot Add-on',
ok: false,
configured: true,
error: error instanceof Error ? error.message : 'Request failed'
});
}
};
export const fetchKimiQuota = async () => {
const auth = readAuthFile();
const entry = normalizeAuthEntry(getAuthEntry(auth, ['kimi-for-coding', 'kimi']));
const apiKey = entry?.key ?? entry?.token;
if (!apiKey) {
return buildResult({
providerId: 'kimi-for-coding',
providerName: 'Kimi for Coding',
ok: false,
configured: false,
error: 'Not configured'
});
}
try {
const response = await fetch('https://api.kimi.com/coding/v1/usages', {
method: 'GET',
headers: {
Authorization: `Bearer ${apiKey}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
return buildResult({
providerId: 'kimi-for-coding',
providerName: 'Kimi for Coding',
ok: false,
configured: true,
error: `API error: ${response.status}`
});
}
const payload = await response.json();
const windows = {};
const usage = payload?.usage ?? null;
if (usage) {
const limit = toNumber(usage.limit);
const remaining = toNumber(usage.remaining);
const usedPercent = limit && remaining !== null
? Math.max(0, Math.min(100, 100 - (remaining / limit) * 100))
: null;
windows.weekly = toUsageWindow({
usedPercent,
windowSeconds: null,
resetAt: toTimestamp(usage.resetTime)
});
}
const limits = Array.isArray(payload?.limits) ? payload.limits : [];
for (const limit of limits) {
const window = limit?.window;
const detail = limit?.detail;
const rawLabel = durationToLabel(window?.duration, window?.timeUnit);
const windowSeconds = durationToSeconds(window?.duration, window?.timeUnit);
const label = windowSeconds === 5 * 60 * 60 ? `Rate Limit (${rawLabel})` : rawLabel;
const total = toNumber(detail?.limit);
const remaining = toNumber(detail?.remaining);
const usedPercent = total && remaining !== null
? Math.max(0, Math.min(100, 100 - (remaining / total) * 100))
: null;
windows[label] = toUsageWindow({
usedPercent,
windowSeconds,
resetAt: toTimestamp(detail?.resetTime)
});
}
return buildResult({
providerId: 'kimi-for-coding',
providerName: 'Kimi for Coding',
ok: true,
configured: true,
usage: { windows }
});
} catch (error) {
return buildResult({
providerId: 'kimi-for-coding',
providerName: 'Kimi for Coding',
ok: false,
configured: true,
error: error instanceof Error ? error.message : 'Request failed'
});
}
};
export const fetchOpenRouterQuota = async () => {
const auth = readAuthFile();
const entry = normalizeAuthEntry(getAuthEntry(auth, ['openrouter']));
const apiKey = entry?.key ?? entry?.token;
if (!apiKey) {
return buildResult({
providerId: 'openrouter',
providerName: 'OpenRouter',
ok: false,
configured: false,
error: 'Not configured'
});
}
try {
const response = await fetch('https://openrouter.ai/api/v1/credits', {
method: 'GET',
headers: {
Authorization: `Bearer ${apiKey}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
return buildResult({
providerId: 'openrouter',
providerName: 'OpenRouter',
ok: false,
configured: true,
error: `API error: ${response.status}`
});
}
const payload = await response.json();
const credits = payload?.data ?? {};
const totalCredits = toNumber(credits.total_credits);
const totalUsage = toNumber(credits.total_usage);
const remaining = totalCredits !== null && totalUsage !== null
? Math.max(0, totalCredits - totalUsage)
: null;
const usedPercent = totalCredits && totalUsage !== null
? Math.max(0, Math.min(100, (totalUsage / totalCredits) * 100))
: null;
const valueLabel = remaining !== null ? `$${formatMoney(remaining)} remaining` : null;
const windows = {
credits: toUsageWindow({
usedPercent,
windowSeconds: null,
resetAt: null,
valueLabel
})
};
return buildResult({
providerId: 'openrouter',
providerName: 'OpenRouter',
ok: true,
configured: true,
usage: { windows }
});
} catch (error) {
return buildResult({
providerId: 'openrouter',
providerName: 'OpenRouter',
ok: false,
configured: true,
error: error instanceof Error ? error.message : 'Request failed'
});
}
};
const normalizeTimestamp = (value) => {
if (typeof value !== 'number') return null;
return value < 1_000_000_000_000 ? value * 1000 : value;
@@ -492,117 +1037,24 @@ export const fetchZaiQuota = async () => {
}
};
export const fetchGitHubCopilotQuota = async () => {
const auth = readAuthFile();
const entry = normalizeAuthEntry(getAuthEntry(auth, ['github-copilot']));
const accessToken = entry?.access ?? entry?.token;
if (!accessToken) {
return buildResult({
providerId: 'github-copilot',
providerName: 'GitHub Copilot',
ok: false,
configured: false,
error: 'Not configured'
});
}
try {
const response = await fetch('https://api.github.com/copilot_internal/user', {
method: 'GET',
headers: {
Authorization: `Bearer ${accessToken}`,
Accept: 'application/vnd.github+json',
'User-Agent': 'OpenChamber'
}
});
if (!response.ok) {
return buildResult({
providerId: 'github-copilot',
providerName: 'GitHub Copilot',
ok: false,
configured: true,
error: `API error: ${response.status}`
});
}
const payload = await response.json();
const snapshots = payload?.quota_snapshots ?? {};
const premiumInteractions = snapshots?.premium_interactions ?? null;
// Parse reset date
let resetAt = null;
const resetDateUtc = payload?.quota_reset_date_utc;
const resetDate = payload?.quota_reset_date;
if (resetDateUtc) {
resetAt = new Date(resetDateUtc).getTime();
} else if (resetDate) {
// Use the date as UTC midnight
resetAt = new Date(`${resetDate}T00:00:00Z`).getTime();
}
const windows = {};
if (premiumInteractions) {
let usedPercent = null;
if (premiumInteractions.unlimited === true) {
usedPercent = null;
} else if (typeof premiumInteractions.percent_remaining === 'number') {
usedPercent = 100 - premiumInteractions.percent_remaining;
} else if (
typeof premiumInteractions.entitlement === 'number' &&
premiumInteractions.entitlement > 0
) {
const remaining =
typeof premiumInteractions.remaining === 'number'
? premiumInteractions.remaining
: typeof premiumInteractions.quota_remaining === 'number'
? premiumInteractions.quota_remaining
: null;
if (remaining !== null) {
usedPercent = ((premiumInteractions.entitlement - remaining) / premiumInteractions.entitlement) * 100;
}
}
windows['premium_interactions'] = toUsageWindow({
usedPercent,
windowSeconds: null,
resetAt
});
}
return buildResult({
providerId: 'github-copilot',
providerName: 'GitHub Copilot',
ok: true,
configured: true,
usage: { windows }
});
} catch (error) {
return buildResult({
providerId: 'github-copilot',
providerName: 'GitHub Copilot',
ok: false,
configured: true,
error: error instanceof Error ? error.message : 'Request failed'
});
}
};
export const fetchQuotaForProvider = async (providerId) => {
switch (providerId) {
case 'openai':
return fetchOpenaiQuota();
case 'claude':
return fetchClaudeQuota();
case 'codex':
return fetchCodexQuota();
case 'github-copilot':
return fetchCopilotQuota();
case 'github-copilot-addon':
return fetchCopilotAddonQuota();
case 'google':
return fetchGoogleQuota();
case 'kimi-for-coding':
return fetchKimiQuota();
case 'openrouter':
return fetchOpenRouterQuota();
case 'zai-coding-plan':
return fetchZaiQuota();
case 'github-copilot':
return fetchGitHubCopilotQuota();
default:
return buildResult({
providerId,