"use client" import { useCallback, useEffect, useRef, useState } from "react" import { AnimatePresence, motion } from "motion/react" // ============================================================================ // TYPES // ============================================================================ export type RateLimitState = "healthy" | "warning" | "limited" | "circuit-open" export interface RateLimitConfig { maxRetries?: number baseDelay?: number maxDelay?: number jitterFactor?: number circuitBreakerThreshold?: number circuitBreakerResetTime?: number } export interface RetryQueueItem { id: string attempt: number maxAttempts: number nextRetryAt: number status: "waiting" | "retrying" | "success" | "failed" } export interface RateLimitMetrics { requestsThisMinute: number tokensThisMinute: number remainingRequests: number | null remainingTokens: number | null resetAt: number | null consecutiveErrors: number lastError: string | null } // ============================================================================ // RATE LIMITER HOOK // ============================================================================ const DEFAULT_CONFIG: Required = { maxRetries: 5, baseDelay: 1000, maxDelay: 60000, jitterFactor: 0.3, circuitBreakerThreshold: 5, circuitBreakerResetTime: 30000, } function calculateBackoff( attempt: number, config: Required ): number { const exponentialDelay = Math.min( config.baseDelay * Math.pow(2, attempt), config.maxDelay ) const jitter = exponentialDelay * config.jitterFactor * (Math.random() * 2 - 1) return Math.max(0, exponentialDelay + jitter) } export function useRateLimiter(userConfig?: RateLimitConfig) { const config = { ...DEFAULT_CONFIG, ...userConfig } const [state, setState] = useState("healthy") const [metrics, setMetrics] = useState({ requestsThisMinute: 0, tokensThisMinute: 0, remainingRequests: null, remainingTokens: null, resetAt: null, consecutiveErrors: 0, lastError: null, }) const [retryQueue, setRetryQueue] = useState([]) const circuitOpenUntil = useRef(0) // Update state based on metrics useEffect(() => { if (Date.now() < circuitOpenUntil.current) { setState("circuit-open") } else if (metrics.consecutiveErrors >= config.circuitBreakerThreshold) { circuitOpenUntil.current = Date.now() + config.circuitBreakerResetTime setState("circuit-open") } else if ( metrics.remainingRequests !== null && metrics.remainingRequests < 10 ) { setState("limited") } else if ( metrics.remainingRequests !== null && metrics.remainingRequests < 50 ) { setState("warning") } else { setState("healthy") } }, [metrics, config.circuitBreakerThreshold, config.circuitBreakerResetTime]) const updateFromHeaders = useCallback((headers: Headers) => { const remaining = headers.get("x-ratelimit-remaining-requests") const remainingTokens = headers.get("x-ratelimit-remaining-tokens") const reset = headers.get("x-ratelimit-reset-requests") setMetrics((prev) => ({ ...prev, remainingRequests: remaining ? parseInt(remaining) : prev.remainingRequests, remainingTokens: remainingTokens ? parseInt(remainingTokens) : prev.remainingTokens, resetAt: reset ? Date.now() + parseResetTime(reset) : prev.resetAt, consecutiveErrors: 0, lastError: null, })) }, []) const recordError = useCallback((error: string, statusCode?: number) => { setMetrics((prev) => ({ ...prev, consecutiveErrors: prev.consecutiveErrors + 1, lastError: error, })) }, []) const addToRetryQueue = useCallback( (id: string): RetryQueueItem => { const item: RetryQueueItem = { id, attempt: 1, maxAttempts: config.maxRetries, nextRetryAt: Date.now() + calculateBackoff(0, config), status: "waiting", } setRetryQueue((prev) => [...prev, item]) return item }, [config] ) const updateRetryItem = useCallback( (id: string, updates: Partial) => { setRetryQueue((prev) => prev.map((item) => (item.id === id ? { ...item, ...updates } : item)) ) }, [] ) const removeFromQueue = useCallback((id: string) => { setRetryQueue((prev) => prev.filter((item) => item.id !== id)) }, []) const executeWithRetry = useCallback( async (fn: () => Promise, requestId?: string): Promise => { const id = requestId || crypto.randomUUID() let attempt = 0 while (attempt < config.maxRetries) { // Check circuit breaker if (Date.now() < circuitOpenUntil.current) { const waitTime = circuitOpenUntil.current - Date.now() await new Promise((resolve) => setTimeout(resolve, waitTime)) } try { if (attempt > 0) { updateRetryItem(id, { status: "retrying", attempt: attempt + 1 }) } const result = await fn() if (attempt > 0) { updateRetryItem(id, { status: "success" }) setTimeout(() => removeFromQueue(id), 2000) } setMetrics((prev) => ({ ...prev, requestsThisMinute: prev.requestsThisMinute + 1, consecutiveErrors: 0, })) return result } catch (error: any) { attempt++ const is429 = error?.status === 429 || error?.message?.includes("429") if (is429 && attempt < config.maxRetries) { const delay = calculateBackoff(attempt - 1, config) if (attempt === 1) { addToRetryQueue(id) } updateRetryItem(id, { nextRetryAt: Date.now() + delay, attempt, }) recordError( `Rate limited (attempt ${attempt}/${config.maxRetries})`, 429 ) await new Promise((resolve) => setTimeout(resolve, delay)) } else { if (attempt > 0) { updateRetryItem(id, { status: "failed" }) setTimeout(() => removeFromQueue(id), 3000) } recordError(error?.message || "Unknown error", error?.status) throw error } } } throw new Error("Max retries exceeded") }, [config, addToRetryQueue, updateRetryItem, removeFromQueue, recordError] ) const reset = useCallback(() => { setMetrics({ requestsThisMinute: 0, tokensThisMinute: 0, remainingRequests: null, remainingTokens: null, resetAt: null, consecutiveErrors: 0, lastError: null, }) setRetryQueue([]) circuitOpenUntil.current = 0 setState("healthy") }, []) return { state, metrics, retryQueue, executeWithRetry, updateFromHeaders, recordError, reset, } } function parseResetTime(reset: string): number { // Handle formats like "1s", "30s", "1m", or milliseconds if (reset.endsWith("ms")) return parseInt(reset) if (reset.endsWith("s")) return parseInt(reset) * 1000 if (reset.endsWith("m")) return parseInt(reset) * 60000 return parseInt(reset) } // ============================================================================ // STATUS INDICATOR COMPONENT // ============================================================================ const stateConfig = { healthy: { color: "bg-emerald-500", glow: "shadow-emerald-500/50", label: "Healthy", description: "All systems operational", }, warning: { color: "bg-amber-500", glow: "shadow-amber-500/50", label: "Warning", description: "Approaching rate limit", }, limited: { color: "bg-red-500", glow: "shadow-red-500/50", label: "Limited", description: "Rate limit active", }, "circuit-open": { color: "bg-purple-500", glow: "shadow-purple-500/50", label: "Circuit Open", description: "Requests paused", }, } export function RateLimitStatus({ state, metrics, compact = false, }: { state: RateLimitState metrics: RateLimitMetrics compact?: boolean }) { const config = stateConfig[state] if (compact) { return (

{config.label}

) } return (

{config.label}

{config.description}

{metrics.remainingRequests !== null && (

{metrics.remainingRequests}

requests left

)}

{/* Progress bar */} {metrics.remainingRequests !== null && (

)} {/* Error display */} {metrics.lastError && (

{metrics.lastError}

)}

) } // ============================================================================ // RETRY QUEUE VISUALIZATION // ============================================================================ export function RetryQueue({ items }: { items: RetryQueueItem[] }) { const [now, setNow] = useState(Date.now()) useEffect(() => { const interval = setInterval(() => setNow(Date.now()), 100) return () => clearInterval(interval) }, []) if (items.length === 0) return null return (

Retry Queue

{items.length} pending

{items.map((item) => { const timeUntilRetry = Math.max(0, item.nextRetryAt - now) const progress = item.status === "waiting" ? Math.min( 100, ((now - (item.nextRetryAt - 5000)) / 5000) * 100 ) : 100 return ( {/* Progress background */}

{item.status === "waiting" && (

)} {item.status === "retrying" && ( )} {item.status === "success" && (

)} {item.status === "failed" && (

)} {item.id.slice(0, 8)}

Attempt {item.attempt}/{item.maxAttempts} {item.status === "waiting" && timeUntilRetry > 0 && ( {(timeUntilRetry / 1000).toFixed(1)}s )} {item.status === "retrying" && ( Retrying... )} {item.status === "success" && ( Success )} {item.status === "failed" && ( Failed )}

) })}

) } // ============================================================================ // METRICS PANEL // ============================================================================ export function RateLimitMetricsPanel({ metrics, }: { metrics: RateLimitMetrics }) { return (

0 ? "danger" : "default"} />

) } function MetricCard({ label, value, maxValue, suffix, format, variant = "default", }: { label: string value: number | null maxValue?: number suffix?: string format?: "compact" variant?: "default" | "danger" | "muted" }) { const displayValue = value === null ? "—" : format === "compact" ? Intl.NumberFormat("en", { notation: "compact" }).format(value) : value.toLocaleString() return (

{label}

0 ? "text-destructive" : variant === "muted" ? "text-muted-foreground" : "" }`} > {displayValue} {suffix && {suffix}}

{maxValue && value !== null && (

)}

) }

rate-limit-handler