"use client" import { useCallback, useMemo, useRef, useState } from "react" import { AnimatePresence, motion } from "motion/react" // ============================================================================ // TYPES // ============================================================================ export interface DedupedRequest { id: string key: string url: string method: string status: "pending" | "completed" | "cached" | "error" response?: unknown error?: Error timestamp: Date completedAt?: Date cachedFrom?: string // ID of original request if this was deduplicated duplicateCount: number } export interface DeduplicatorStats { totalRequests: number cachedResponses: number pendingRequests: number errorCount: number cacheHitRate: number avgResponseTime: number } export interface DeduplicatorConfig { timeWindow?: number // Dedup window in ms (default: 5000) maxCacheSize?: number // Max cached requests (default: 100) keyGenerator?: (url: string, options?: RequestInit) => string } // ============================================================================ // REQUEST DEDUPLICATOR STORE // ============================================================================ class RequestDeduplicatorStore { private requests: Map = new Map() private pendingPromises: Map> = new Map() private timeWindow: number private maxCacheSize: number private keyGenerator: (url: string, options?: RequestInit) => string private responseTimes: number[] = [] constructor(config: DeduplicatorConfig = {}) { this.timeWindow = config.timeWindow || 5000 this.maxCacheSize = config.maxCacheSize || 100 this.keyGenerator = config.keyGenerator || this.defaultKeyGenerator } private defaultKeyGenerator(url: string, options?: RequestInit): string { const method = options?.method || "GET" const body = options?.body ? String(options.body) : "" return `${method}:${url}:${body}` } // Execute a request with deduplication async execute( url: string, options?: RequestInit, fetcher?: () => Promise ): Promise<{ data: T; cached: boolean; request: DedupedRequest }> { const key = this.keyGenerator(url, options) const now = Date.now() // Check for cached response within time window const cached = this.findCachedRequest(key, now) if ( cached && cached.status === "completed" && cached.response !== undefined ) { // Update duplicate count cached.duplicateCount++ // Create a record for this duplicate request const duplicateRequest: DedupedRequest = { id: crypto.randomUUID(), key, url, method: options?.method || "GET", status: "cached", response: cached.response, timestamp: new Date(), completedAt: new Date(), cachedFrom: cached.id, duplicateCount: 0, } this.addRequest(duplicateRequest) return { data: cached.response as T, cached: true, request: duplicateRequest, } } // Check for pending request with same key const pendingPromise = this.pendingPromises.get(key) if (pendingPromise) { const existingRequest = Array.from(this.requests.values()).find( (r) => r.key === key && r.status === "pending" ) if (existingRequest) { existingRequest.duplicateCount++ } const result = await pendingPromise const completedRequest = Array.from(this.requests.values()).find( (r) => r.key === key && r.status === "completed" ) const duplicateRequest: DedupedRequest = { id: crypto.randomUUID(), key, url, method: options?.method || "GET", status: "cached", response: result, timestamp: new Date(), completedAt: new Date(), cachedFrom: completedRequest?.id, duplicateCount: 0, } this.addRequest(duplicateRequest) return { data: result as T, cached: true, request: duplicateRequest } } // Create new request const request: DedupedRequest = { id: crypto.randomUUID(), key, url, method: options?.method || "GET", status: "pending", timestamp: new Date(), duplicateCount: 0, } this.addRequest(request) // Execute the request const startTime = Date.now() const promise = fetcher ? fetcher() : fetch(url, options).then((r) => r.json()) this.pendingPromises.set(key, promise) try { const result = await promise const endTime = Date.now() this.responseTimes.push(endTime - startTime) // Update request status request.status = "completed" request.response = result request.completedAt = new Date() return { data: result as T, cached: false, request } } catch (error) { request.status = "error" request.error = error as Error request.completedAt = new Date() throw error } finally { this.pendingPromises.delete(key) } } private findCachedRequest( key: string, now: number ): DedupedRequest | undefined { return Array.from(this.requests.values()) .filter((r) => r.key === key && r.status === "completed") .find((r) => now - r.timestamp.getTime() < this.timeWindow) } private addRequest(request: DedupedRequest): void { // Enforce max cache size if (this.requests.size >= this.maxCacheSize) { const oldest = Array.from(this.requests.values()).sort( (a, b) => a.timestamp.getTime() - b.timestamp.getTime() )[0] if (oldest) { this.requests.delete(oldest.id) } } this.requests.set(request.id, request) } // Get all requests getAll(): DedupedRequest[] { return Array.from(this.requests.values()).sort( (a, b) => b.timestamp.getTime() - a.timestamp.getTime() ) } // Get requests by status getByStatus(status: DedupedRequest["status"]): DedupedRequest[] { return this.getAll().filter((r) => r.status === status) } // Get statistics getStats(): DeduplicatorStats { const all = this.getAll() const cached = all.filter((r) => r.status === "cached").length const pending = all.filter((r) => r.status === "pending").length const errors = all.filter((r) => r.status === "error").length const total = all.length return { totalRequests: total, cachedResponses: cached, pendingRequests: pending, errorCount: errors, cacheHitRate: total > 0 ? (cached / total) * 100 : 0, avgResponseTime: this.responseTimes.length > 0 ? this.responseTimes.reduce((a, b) => a + b, 0) / this.responseTimes.length : 0, } } // Clear all clear(): void { this.requests.clear() this.pendingPromises.clear() this.responseTimes = [] } // Clear old entries clearOld(maxAge: number = this.timeWindow * 2): void { const now = Date.now() for (const [id, request] of this.requests) { if (now - request.timestamp.getTime() > maxAge) { this.requests.delete(id) } } } // Get size size(): number { return this.requests.size } } // ============================================================================ // HOOK: useRequestDeduplicator // ============================================================================ interface UseRequestDeduplicatorOptions extends DeduplicatorConfig { onRequestStart?: (request: DedupedRequest) => void onRequestComplete?: (request: DedupedRequest, cached: boolean) => void onRequestError?: (request: DedupedRequest, error: Error) => void onDuplicate?: (originalId: string, duplicateCount: number) => void } export function useRequestDeduplicator( options: UseRequestDeduplicatorOptions = {} ) { const { onRequestStart, onRequestComplete, onRequestError, onDuplicate, ...config } = options const storeRef = useRef(new RequestDeduplicatorStore(config)) const [version, setVersion] = useState(0) // Force re-render const refresh = useCallback(() => setVersion((v) => v + 1), []) // Execute a deduplicated request const dedupFetch = useCallback( async ( url: string, options?: RequestInit, fetcher?: () => Promise ): Promise => { const prevSize = storeRef.current.size() try { const { data, cached, request } = await storeRef.current.execute( url, options, fetcher ) if (!cached) { onRequestStart?.(request) } onRequestComplete?.(request, cached) if (cached && request.cachedFrom) { const original = storeRef.current .getAll() .find((r) => r.id === request.cachedFrom) if (original) { onDuplicate?.(original.id, original.duplicateCount) } } refresh() return data } catch (error) { const requests = storeRef.current.getAll() const failedRequest = requests.find((r) => r.status === "error") if (failedRequest) { onRequestError?.(failedRequest, error as Error) } refresh() throw error } }, [onRequestStart, onRequestComplete, onRequestError, onDuplicate, refresh] ) // Get all requests const getRequests = useCallback((): DedupedRequest[] => { return storeRef.current.getAll() }, []) // Get stats const getStats = useCallback((): DeduplicatorStats => { return storeRef.current.getStats() }, []) // Clear all const clearAll = useCallback(() => { storeRef.current.clear() refresh() }, [refresh]) // Clear old entries const clearOld = useCallback( (maxAge?: number) => { storeRef.current.clearOld(maxAge) refresh() }, [refresh] ) return { dedupFetch, getRequests, getStats, clearAll, clearOld, requestCount: storeRef.current.size(), } } // ============================================================================ // STATUS BADGE // ============================================================================ interface StatusBadgeProps { status: DedupedRequest["status"] size?: "sm" | "md" } export function StatusBadge({ status, size = "sm" }: StatusBadgeProps) { const config = { pending: { label: "Pending", color: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/30", icon: , }, completed: { label: "Completed", color: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/30", icon: , }, cached: { label: "Cached", color: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/30", icon: , }, error: { label: "Error", color: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/30", icon: , }, } const { label, color, icon } = config[status] const sizeClasses = size === "sm" ? "px-2 py-0.5 text-[10px]" : "px-3 py-1 text-xs" return ( {icon} {label} ) } // ============================================================================ // STATS PANEL // ============================================================================ interface StatsPanelProps { stats: DeduplicatorStats } export function StatsPanel({ stats }: StatsPanelProps) { return (

Deduplication Statistics

} color="blue" /> } color="purple" /> } color="emerald" />

{/* Progress bar for cache hit rate */}

Cache Efficiency {stats.cachedResponses} / {stats.totalRequests} requests cached

{/* Additional stats */}

{stats.pendingRequests}

Pending

{stats.avgResponseTime > 0 ? `${stats.avgResponseTime.toFixed(0)}ms` : "-"}

Avg Response Time

) } function StatCard({ label, value, icon, color, }: { label: string value: string icon: React.ReactNode color: "blue" | "purple" | "emerald" }) { const colorClasses = { blue: "bg-blue-500/10 text-blue-600 dark:text-blue-400", purple: "bg-purple-500/10 text-purple-600 dark:text-purple-400", emerald: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", } return (

{icon}

{value}

{label}

) } // ============================================================================ // REQUEST LIST // ============================================================================ interface RequestListProps { requests: DedupedRequest[] onClear?: () => void title?: string maxHeight?: string } export function RequestList({ requests, onClear, title = "Requests", maxHeight = "400px", }: RequestListProps) { if (requests.length === 0) { return (

No requests yet

Make API calls to see deduplication in action

) } return (

{title} {onClear && ( )}

{requests.map((request, index) => (

{request.duplicateCount > 0 && ( +{request.duplicateCount} deduped )}

{request.method}

{request.url}

{formatRelativeTime(request.timestamp)} {request.cachedFrom && ( <> • From cache )} {request.completedAt && request.status === "completed" && ( <> • {request.completedAt.getTime() - request.timestamp.getTime()} ms )}

))}

) } // ============================================================================ // REQUEST TIMELINE // ============================================================================ interface RequestTimelineProps { requests: DedupedRequest[] } export function RequestTimeline({ requests }: RequestTimelineProps) { if (requests.length === 0) return null const grouped = useMemo(() => { const groups = new Map() for (const request of requests) { const existing = groups.get(request.key) || [] existing.push(request) groups.set(request.key, existing) } return Array.from(groups.entries()) }, [requests]) return (

Request Timeline

{grouped.slice(0, 5).map(([key, reqs]) => { const original = reqs.find( (r) => r.status === "completed" && !r.cachedFrom ) const cached = reqs.filter((r) => r.status === "cached") return (

{key.split(":")[1]}

1 original {cached.length > 0 && ( <> • {cached.length} deduplicated )}

) })}

) } // ============================================================================ // UTILITIES // ============================================================================ function formatRelativeTime(date: Date): string { const now = new Date() const diff = now.getTime() - date.getTime() const seconds = Math.floor(diff / 1000) const minutes = Math.floor(diff / 60000) if (seconds < 5) return "Just now" if (seconds < 60) return `${seconds}s ago` if (minutes < 60) return `${minutes}m ago` return date.toLocaleTimeString() } // ============================================================================ // ICONS // ============================================================================ function LoadingIcon({ className }: { className?: string }) { return ( ) } function CheckIcon({ className }: { className?: string }) { return ( ) } function CacheIcon({ className }: { className?: string }) { return ( ) } function ErrorIcon({ className }: { className?: string }) { return ( ) } function RequestIcon({ className }: { className?: string }) { return ( ) } function ChartIcon({ className }: { className?: string }) { return ( ) }

request-deduplicator