"use client"; import { useState, useEffect, useRef, useCallback } from "react"; import { fetchUsageSummary, type UsageSummary } from "@/lib/api/telemetry"; // ─── Types ─────────────────────────────────────────────────────────── interface UsageTier { name: string; tokens: number; limit: number; percentage: number; } // ─── Helpers ───────────────────────────────────────────────────────── function getUsageColor(percentage: number): string { if (percentage < 60) return "var(--success)"; if (percentage < 80) return "var(--warn)"; return "var(--danger)"; } function formatTokens(value: number): string { if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`; if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`; return value.toFixed(0); } // ─── Component ─────────────────────────────────────────────────────── export function UsageWidget(): React.JSX.Element { const [summary, setSummary] = useState(null); const [popoverOpen, setPopoverOpen] = useState(false); const [isLoading, setIsLoading] = useState(true); const popoverRef = useRef(null); const tiers: UsageTier[] = summary ? [ { name: "Session", tokens: summary.totalTokens, limit: 100_000, percentage: (summary.totalTokens / 100_000) * 100, }, { name: "Daily", tokens: summary.totalTokens, limit: 500_000, percentage: (summary.totalTokens / 500_000) * 100, }, { name: "Monthly", tokens: summary.totalTokens, limit: 2_000_000, percentage: (summary.totalTokens / 2_000_000) * 100, }, ] : []; const currentTier = tiers[0]; const usageColor = currentTier ? getUsageColor(currentTier.percentage) : "var(--muted)"; const loadSummary = useCallback(async () => { try { const data = await fetchUsageSummary("30d"); setSummary(data); } catch (err) { console.error("Failed to load usage summary:", err); } finally { setIsLoading(false); } }, []); useEffect(() => { void loadSummary(); }, [loadSummary]); useEffect(() => { function handleClickOutside(event: MouseEvent): void { if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) { setPopoverOpen(false); } } if (!popoverOpen) { return; } document.addEventListener("mousedown", handleClickOutside); return (): void => { document.removeEventListener("mousedown", handleClickOutside); }; }, [popoverOpen]); const pct = currentTier ? Math.min(currentTier.percentage, 100) : 0; return (

{popoverOpen && ( ); }