feat: display Copilot premium interactions quota on provider card

Copilot usage query API was implemented but never surfaced on the main
provider list. Add CopilotQuotaFooter component that auto-detects
github_copilot providers and displays premium interaction utilization
inline, reusing the existing TierBadge UI from SubscriptionQuotaFooter.
This commit is contained in:
Jason
2026-04-06 23:21:02 +08:00
parent eb41e1052c
commit d33d63e4df
7 changed files with 251 additions and 1 deletions
+52
View File
@@ -0,0 +1,52 @@
import { useQuery } from "@tanstack/react-query";
import { copilotGetUsage, copilotGetUsageForAccount } from "@/lib/api/copilot";
import type { QuotaTier } from "@/types/subscription";
const REFETCH_INTERVAL = 5 * 60 * 1000; // 5 minutes
export interface CopilotQuota {
success: boolean;
plan: string | null;
resetDate: string | null;
tiers: QuotaTier[];
error: string | null;
queriedAt: number | null;
}
export function useCopilotQuota(accountId: string | null, enabled: boolean) {
return useQuery<CopilotQuota>({
queryKey: ["copilot", "quota", accountId ?? "default"],
queryFn: async (): Promise<CopilotQuota> => {
const usage = accountId
? await copilotGetUsageForAccount(accountId)
: await copilotGetUsage();
const premium = usage.quota_snapshots.premium_interactions;
const utilization =
premium.entitlement > 0
? ((premium.entitlement - premium.remaining) / premium.entitlement) *
100
: 0;
return {
success: true,
plan: usage.copilot_plan,
resetDate: usage.quota_reset_date,
tiers: [
{
name: "premium",
utilization,
resetsAt: usage.quota_reset_date,
},
],
error: null,
queriedAt: Date.now(),
};
},
enabled,
refetchInterval: REFETCH_INTERVAL,
refetchOnWindowFocus: true,
staleTime: REFETCH_INTERVAL,
retry: 1,
});
}