From e9ae50be0c2ea5cbaaa62a33a4bb2e24d2946e25 Mon Sep 17 00:00:00 2001 From: Randi <55005611+rdself@users.noreply.github.com> Date: Wed, 25 Mar 2026 07:16:28 -0400 Subject: [PATCH] fix: improve Provider Limits light mode contrast and Claude plan tier display (#591) - Replace hardcoded rgba(255,255,255,...) borders/backgrounds with theme-aware CSS variables (--color-border, --color-bg-subtle) for proper light mode contrast - Add dark: variants for hover states and progress bar backgrounds - Fix Claude plan tier: try to extract actual plan from OAuth response instead of hardcoding "Claude Code" - Recognize provider names (Claude Code, Kimi Coding, Kiro) as non-plan-tier values in normalizePlanTier() to avoid showing them as tier badges Co-authored-by: Claude Opus 4.6 --- open-sse/services/usage.ts | 31 +++++++++---- .../usage/components/ProviderLimits/index.tsx | 46 +++++++++---------- .../usage/components/ProviderLimits/utils.tsx | 5 ++ 3 files changed, 49 insertions(+), 33 deletions(-) diff --git a/open-sse/services/usage.ts b/open-sse/services/usage.ts index e641553d7e..f2be04086e 100644 --- a/open-sse/services/usage.ts +++ b/open-sse/services/usage.ts @@ -86,7 +86,8 @@ function toDisplayLabel(value: string): string { .filter(Boolean) .map((part) => { if (/^pro\+$/i.test(part)) return "Pro+"; - if (/^[a-z]{2,}$/.test(part)) return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(); + if (/^[a-z]{2,}$/.test(part)) + return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(); return part; }) .join(" ") @@ -200,7 +201,9 @@ async function getGitHubUsage(accessToken, providerSpecificData) { if (dataRecord.quota_snapshots) { // Paid plan format const snapshots = toRecord(dataRecord.quota_snapshots); - const resetAt = parseResetTime(getFieldValue(dataRecord, "quota_reset_date", "quotaResetDate")); + const resetAt = parseResetTime( + getFieldValue(dataRecord, "quota_reset_date", "quotaResetDate") + ); const premiumQuota = formatGitHubQuotaSnapshot(snapshots.premium_interactions, resetAt); const chatQuota = formatGitHubQuotaSnapshot(snapshots.chat, resetAt); const completionsQuota = formatGitHubQuotaSnapshot(snapshots.completions, resetAt); @@ -225,7 +228,11 @@ async function getGitHubUsage(accessToken, providerSpecificData) { // Free/limited plan format const monthlyQuotas = toRecord(dataRecord.monthly_quotas); const usedQuotas = toRecord(dataRecord.limited_user_quotas); - const resetDate = getFieldValue(dataRecord, "limited_user_reset_date", "limitedUserResetDate"); + const resetDate = getFieldValue( + dataRecord, + "limited_user_reset_date", + "limitedUserResetDate" + ); const resetAt = parseResetTime(resetDate); const quotas: Record = {}; @@ -327,11 +334,7 @@ function inferGitHubPlanName(data: JsonRecord, premiumQuota: UsageQuota | null): toNumber(getFieldValue(monthlyQuotas, "premium_interactions", "premiumInteractions"), 0); const chatTotal = toNumber(getFieldValue(monthlyQuotas, "chat", "chat"), 0); - if ( - combined.includes("PRO+") || - combined.includes("PRO_PLUS") || - combined.includes("PROPLUS") - ) { + if (combined.includes("PRO+") || combined.includes("PRO_PLUS") || combined.includes("PROPLUS")) { return "Copilot Pro+"; } if (combined.includes("ENTERPRISE")) return "Copilot Enterprise"; @@ -655,8 +658,18 @@ async function getClaudeUsage(accessToken) { } } + // Try to extract plan tier from the OAuth response + const planRaw = + typeof data.tier === "string" + ? data.tier + : typeof data.plan === "string" + ? data.plan + : typeof data.subscription_type === "string" + ? data.subscription_type + : null; + return { - plan: "Claude Code", + plan: planRaw || "Claude Code", quotas, extraUsage: data.extra_usage ?? null, }; diff --git a/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.tsx b/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.tsx index 07bca9cfad..1329694d9d 100644 --- a/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.tsx +++ b/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.tsx @@ -412,24 +412,25 @@ export default function ProviderLimits() {
{/* Group by toggle */} -
+
{/* Account rows */} -
+
{/* Table header */}
{t("account")}
@@ -523,11 +524,11 @@ export default function ProviderLimits() { return (
{/* Account Info */} @@ -614,7 +615,7 @@ export default function ProviderLimits() { ) : null} {/* Progress bar */} -
+
( -
+
diff --git a/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/utils.tsx b/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/utils.tsx index b5861de700..b59097ec01 100644 --- a/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/utils.tsx +++ b/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/utils.tsx @@ -222,6 +222,11 @@ export function normalizePlanTier(plan) { const upper = raw.toUpperCase(); + // Provider names that are not real plan tiers — treat as unknown + if (upper === "CLAUDE CODE" || upper === "KIMI CODING" || upper === "KIRO") { + return { key: "unknown", label: raw, variant: "default", rank: 0, raw }; + } + if (upper.includes("PRO+") || upper.includes("PRO PLUS") || upper.includes("PROPLUS")) { return { key: "plus", label: "Pro+", variant: "secondary", rank: 4, raw }; }