[V0_FILE]typescript:file="lib/detect.ts" isMerged="true" export type SupportedFormat = "json" | "csv" | "xml" | "yaml" | "query" | "ndjson" | "unknown" export function detectFormat(text: string): SupportedFormat { const trimmed = text.trim() if (!trimmed) return "unknown" // JSON detection if ((trimmed.startsWith("{") && trimmed.endsWith("}")) || (trimmed.startsWith("[") && trimmed.endsWith("]"))) { try { JSON.parse(trimmed) return "json" } catch { // Continue to other formats } } // NDJSON detection (multiple JSON objects separated by newlines) const lines = trimmed.split("\n").filter((line) => line.trim()) if ( lines.length > 1 && lines.every((line) => { try { JSON.parse(line.trim()) return true } catch { return false } }) ) { return "ndjson" } // XML detection if (trimmed.startsWith("<") && trimmed.includes(">")) { return "xml" } // YAML detection if (trimmed.includes(":") && (trimmed.includes("\n") || /^[a-zA-Z_][a-zA-Z0-9_]*:\s*.+/.test(trimmed))) { // Check for YAML-specific patterns if (trimmed.includes("---") || /^[a-zA-Z_][a-zA-Z0-9_]*:\s*[|>]/.test(trimmed) || /^\s*-\s+/.test(trimmed)) { return "yaml" } } // Query string detection if (trimmed.includes("=") && trimmed.includes("&")) { return "query" } // CSV detection const csvLines = trimmed.split("\n") if (csvLines.length > 1) { const firstLine = csvLines[0] const delimiter = firstLine.includes(",") ? "," : firstLine.includes(";") ? ";" : firstLine.includes("\t") ? "\t" : null if (delimiter) { const firstRowCols = firstLine.split(delimiter).length const hasConsistentColumns = csvLines.slice(1, 5).every((line) => line.split(delimiter).length === firstRowCols) if (hasConsistentColumns && firstRowCols > 1) { return "csv" } } } return "unknown" } export function getFormatDescription(format: SupportedFormat): string { switch (format) { case "json": return "JSON (JavaScript Object Notation)" case "csv": return "CSV (Comma Separated Values)" case "xml": return "XML (eXtensible Markup Language)" case "yaml": return "YAML (YAML Ain't Markup Language)" case "query": return "Query String Parameters" case "ndjson": return "NDJSON (Newline Delimited JSON)" default: return "Unknown Format" } } [V0_FILE]typescript:file="lib/convert.ts" isMerged="true" import type { SupportedFormat } from "./detect" export interface ConversionResult { success: boolean data?: any errors?: Array<{ line: number column: number message: string snippet: string }> } export async function convertToJson(text: string, format: SupportedFormat): Promise { try { switch (format) { case "json": return convertJsonToJson(text) case "csv": return convertCsvToJson(text) case "xml": return convertXmlToJson(text) case "yaml": return convertYamlToJson(text) case "query": return convertQueryToJson(text) case "ndjson": return convertNdjsonToJson(text) default: return convertFallbackToJson(text) } } catch (error) { return { success: false, errors: [ { line: 1, column: 1, message: error instanceof Error ? error.message : "Conversion failed", snippet: text.slice(0, 100), }, ], } } } function convertJsonToJson(text: string): ConversionResult { try { const data = JSON.parse(text) return { success: true, data } } catch (error) { const match = error instanceof Error ? error.message.match(/position (\d+)/) : null const position = match ? Number.parseInt(match[1]) : 0 const lines = text.slice(0, position).split("\n") const line = lines.length const column = lines[lines.length - 1].length + 1 return { success: false, errors: [ { line, column, message: error instanceof Error ? error.message : "JSON parse error", snippet: getSnippet(text, position), }, ], } } } function convertCsvToJson(text: string): ConversionResult { const lines = text.trim().split("\n") if (lines.length < 2) { return { success: false, errors: [ { line: 1, column: 1, message: "CSV must have at least a header and one data row", snippet: text.slice(0, 100), }, ], } } const delimiter = detectCsvDelimiter(lines[0]) const headers = parseCsvLine(lines[0], delimiter) const data = [] for (let i = 1; i < lines.length; i++) { if (lines[i].trim()) { const values = parseCsvLine(lines[i], delimiter) const row: Record = {} headers.forEach((header, index) => { row[header] = values[index] || "" }) data.push(row) } } return { success: true, data } } function convertXmlToJson(text: string): ConversionResult { try { const parser = new DOMParser() const doc = parser.parseFromString(text, "text/xml") const parseError = doc.querySelector("parsererror") if (parseError) { return { success: false, errors: [ { line: 1, column: 1, message: "XML parsing error: " + parseError.textContent, snippet: text.slice(0, 100), }, ], } } const data = xmlNodeToJson(doc.documentElement) return { success: true, data } } catch (error) { return { success: false, errors: [ { line: 1, column: 1, message: error instanceof Error ? error.message : "XML conversion failed", snippet: text.slice(0, 100), }, ], } } } function convertYamlToJson(text: string): ConversionResult { // Simple YAML parser for basic cases try { const lines = text.split("\n") const result: any = {} const currentObj = result const stack: any[] = [result] for (let i = 0; i < lines.length; i++) { const line = lines[i] const trimmed = line.trim() if (!trimmed || trimmed.startsWith("#")) continue const indent = line.length - line.trimStart().length const colonIndex = trimmed.indexOf(":") if (colonIndex > 0) { const key = trimmed.slice(0, colonIndex).trim() const value = trimmed.slice(colonIndex + 1).trim() if (value) { currentObj[key] = parseYamlValue(value) } else { currentObj[key] = {} // Handle nested objects (simplified) } } } return { success: true, data: result } } catch (error) { return { success: false, errors: [ { line: 1, column: 1, message: "YAML parsing not fully supported. Try a simpler format.", snippet: text.slice(0, 100), }, ], } } } function convertQueryToJson(text: string): ConversionResult { try { const params = new URLSearchParams(text) const data: Record = {} for (const [key, value] of params.entries()) { if (data[key]) { if (Array.isArray(data[key])) { ;(data[key] as string[]).push(value) } else { data[key] = [data[key] as string, value] } } else { data[key] = value } } return { success: true, data } } catch (error) { return { success: false, errors: [ { line: 1, column: 1, message: error instanceof Error ? error.message : "Query string parse error", snippet: text.slice(0, 100), }, ], } } } function convertNdjsonToJson(text: string): ConversionResult { try { const lines = text.trim().split("\n") const data = lines.map((line) => JSON.parse(line.trim())) return { success: true, data } } catch (error) { return { success: false, errors: [ { line: 1, column: 1, message: error instanceof Error ? error.message : "NDJSON parse error", snippet: text.slice(0, 100), }, ], } } } function convertFallbackToJson(text: string): ConversionResult { // Try to extract key-value pairs from logs or other text const lines = text.split("\n") const data: Record = {} for (const line of lines) { const kvMatch = line.match(/(\w+)[:=]\s*(.+)/) if (kvMatch) { const [, key, value] = kvMatch data[key] = parseYamlValue(value) } } if (Object.keys(data).length > 0) { return { success: true, data } } return { success: false, errors: [ { line: 1, column: 1, message: "Unable to detect a supported format. Try JSON, CSV, XML, or YAML.", snippet: text.slice(0, 100), }, ], } } // Helper functions function detectCsvDelimiter(line: string): string { const delimiters = [",", ";", "\t"] let maxCount = 0 let bestDelimiter = "," for (const delimiter of delimiters) { const count = line.split(delimiter).length - 1 if (count > maxCount) { maxCount = count bestDelimiter = delimiter } } return bestDelimiter } function parseCsvLine(line: string, delimiter: string): string[] { const result = [] let current = "" let inQuotes = false for (let i = 0; i < line.length; i++) { const char = line[i] if (char === '"') { inQuotes = !inQuotes } else if (char === delimiter && !inQuotes) { result.push(current.trim()) current = "" } else { current += char } } result.push(current.trim()) return result } function xmlNodeToJson(node: Element): any { const result: any = {} // Handle attributes if (node.attributes.length > 0) { result["@attributes"] = {} for (let i = 0; i < node.attributes.length; i++) { const attr = node.attributes[i] result["@attributes"][attr.name] = attr.value } } // Handle child nodes const children = Array.from(node.childNodes) const textContent = node.textContent?.trim() if (children.length === 1 && children[0].nodeType === Node.TEXT_NODE) { return textContent } const elementChildren = children.filter((child) => child.nodeType === Node.ELEMENT_NODE) as Element[] for (const child of elementChildren) { const childData = xmlNodeToJson(child) if (result[child.tagName]) { if (!Array.isArray(result[child.tagName])) { result[child.tagName] = [result[child.tagName]] } result[child.tagName].push(childData) } else { result[child.tagName] = childData } } return result } function parseYamlValue(value: string): any { if (value === "true") return true if (value === "false") return false if (value === "null") return null if (/^\d+$/.test(value)) return Number.parseInt(value) if (/^\d+\.\d+$/.test(value)) return Number.parseFloat(value) return value } function getSnippet(text: string, position: number): string { const start = Math.max(0, position - 50) const end = Math.min(text.length, position + 50) return text.slice(start, end) } [V0_FILE]typescript:file="lib/pretty.ts" isMerged="true" import type { FormatOptions } from "@/app/page" export function formatJson(data: any, options: FormatOptions): string { if (options.minify) { return JSON.stringify(processData(data, options), null, 0) } const indent = options.indent === "tab" ? "\t" : " ".repeat(options.indent) return JSON.stringify(processData(data, options), null, indent) } function processData(data: any, options: FormatOptions): any { if (data === null || data === undefined) { return options.removeEmpty ? undefined : data } if (Array.isArray(data)) { const processed = data .map((item) => processData(item, options)) .filter((item) => !options.removeEmpty || (item !== undefined && item !== null && item !== "")) return processed.length === 0 && options.removeEmpty ? undefined : processed } if (typeof data === "object") { const processed: any = {} const keys = options.sortKeys ? Object.keys(data).sort() : Object.keys(data) for (const key of keys) { const value = processData(data[key], options) if (!options.removeEmpty || (value !== undefined && value !== null && value !== "")) { processed[key] = value } } return Object.keys(processed).length === 0 && options.removeEmpty ? undefined : processed } return data } export function calculateJsonStats(data: any): { keys: number arrays: number depth: number } { let keys = 0 let arrays = 0 let maxDepth = 0 function traverse(obj: any, depth = 0) { maxDepth = Math.max(maxDepth, depth) if (Array.isArray(obj)) { arrays++ obj.forEach((item) => traverse(item, depth + 1)) } else if (obj && typeof obj === "object") { const objKeys = Object.keys(obj) keys += objKeys.length objKeys.forEach((key) => traverse(obj[key], depth + 1)) } } traverse(data) return { keys, arrays, depth: maxDepth } } [V0_FILE]typescript:file="lib/share.ts" isEdit="true" isMerged="true" export function encodeState(input: string, formatOptions: any): string { const state = { input: input.slice(0, 10000), // Limit size for URL options: formatOptions, version: 1, // Added version for future compatibility } try { const jsonString = JSON.stringify(state) const compressed = btoa(jsonString).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "") return compressed } catch { return "" } } export function decodeState(encoded: string): { input: string; options: any } | null { try { const padded = encoded + "=".repeat((4 - (encoded.length % 4)) % 4) const base64 = padded.replace(/-/g, "+").replace(/_/g, "/") const decoded = atob(base64) const state = JSON.parse(decoded) if (state.version && state.version === 1) { return { input: state.input || "", options: state.options || { indent: 2, sortKeys: false, removeEmpty: false, minify: false, }, } } // Fallback for legacy format return state } catch { return null } } export function getShareUrl(input: string, formatOptions: any): string { if (typeof window === "undefined") return "" const encoded = encodeState(input, formatOptions) if (!encoded) return window.location.origin const url = new URL(window.location.origin + window.location.pathname) url.searchParams.set("state", encoded) return url.toString() } export function loadStateFromUrl(): { input: string; options: any } | null { if (typeof window === "undefined") return null const params = new URLSearchParams(window.location.search) const state = params.get("state") if (!state) return null return decodeState(state) } export function isStateInUrl(input: string, formatOptions: any): boolean { if (typeof window === "undefined") return false const currentState = loadStateFromUrl() if (!currentState) return !input && Object.values(formatOptions).every((v) => v === false || v === 2) return currentState.input === input && JSON.stringify(currentState.options) === JSON.stringify(formatOptions) } export function generateShareText(input: string, parsedData: any): string { const lines = input.split("\n").length const size = new Blob([input]).size const format = parsedData ? "JSON" : "Raw" return `Check out this ${format} data (${lines} lines, ${(size / 1024).toFixed(1)}KB) formatted with JSON Formatter` } [V0_FILE]typescriptreact:file="components/FileDrop.tsx" isMerged="true" "use client" import type React from "react" import { useCallback, useState } from "react" import { motion } from "framer-motion" import { Upload, AlertCircle } from "lucide-react" import { cn } from "@/lib/utils" interface FileDropProps { onFileUpload: (file: File) => void isDragging: boolean onDragStateChange: (isDragging: boolean) => void children: React.ReactNode } const SUPPORTED_EXTENSIONS = [".json", ".csv", ".xml", ".yaml", ".yml", ".txt"] const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB export function FileDrop({ onFileUpload, isDragging, onDragStateChange, children }: FileDropProps) { const [dragError, setDragError] = useState(null) const validateFile = (file: File): string | null => { // Check file size if (file.size > MAX_FILE_SIZE) { return `File too large. Maximum size is ${MAX_FILE_SIZE / 1024 / 1024}MB` } // Check file extension const extension = "." + file.name.split(".").pop()?.toLowerCase() if (!SUPPORTED_EXTENSIONS.includes(extension)) { return `Unsupported file type. Supported: ${SUPPORTED_EXTENSIONS.join(", ")}` } return null } const handleDragOver = useCallback( (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() if (!isDragging) { onDragStateChange(true) setDragError(null) } }, [isDragging, onDragStateChange], ) const handleDragLeave = useCallback( (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() // Only hide drag state if leaving the drop zone entirely if (!e.currentTarget.contains(e.relatedTarget as Node)) { onDragStateChange(false) setDragError(null) } }, [onDragStateChange], ) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() onDragStateChange(false) const files = Array.from(e.dataTransfer.files) if (files.length === 0) { setDragError("No files detected") return } if (files.length > 1) { setDragError("Please drop only one file at a time") return } const file = files[0] const error = validateFile(file) if (error) { setDragError(error) return } setDragError(null) onFileUpload(file) }, [onFileUpload, onDragStateChange], ) return (

{children} {isDragging && (

Drop your file here

Supports: {SUPPORTED_EXTENSIONS.join(", ")}

)} {dragError && ( { setTimeout(() => setDragError(null), 3000) }} >

{dragError}

)}

) } [V0_FILE]typescriptreact:file="components/Toolbar.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { Badge } from "@/components/ui/badge" import { Upload, Download, Share2, Copy, Trash2, Settings, CheckCircle, XCircle, Link } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { getShareUrl } from "@/lib/share" import { ThemeToggle } from "@/components/theme-toggle" import { HistoryControls } from "@/components/HistoryControls" import type { FormatOptions, ParsedData } from "@/app/page" interface ToolbarProps { formatOptions: FormatOptions onFormatChange: (options: FormatOptions) => void onFileUpload: () => void onClear: () => void parsedData: ParsedData | null input: string canUndo?: boolean canRedo?: boolean onUndo?: () => void onRedo?: () => void historySize?: number } export function Toolbar({ formatOptions, onFormatChange, onFileUpload, onClear, parsedData, input, canUndo = false, canRedo = false, onUndo = () => {}, onRedo = () => {}, historySize = 0, }: ToolbarProps) { const { toast } = useToast() const handleCopy = async () => { if (!parsedData?.formatted) return try { await navigator.clipboard.writeText(parsedData.formatted) toast({ title: "Copied to clipboard", description: "JSON data copied successfully", }) } catch (error) { toast({ title: "Copy failed", description: "Unable to copy to clipboard", variant: "destructive", }) } } const handleDownload = (format: "json" | "ndjson" = "json") => { if (!parsedData?.formatted) return const content = format === "ndjson" && Array.isArray(parsedData.json) ? parsedData.json.map((item) => JSON.stringify(item)).join("\n") : parsedData.formatted const blob = new Blob([content], { type: "application/json" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `formatted-data.${format}` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) toast({ title: "Download started", description: `File saved as formatted-data.${format}`, }) } const handleShare = async () => { if (typeof window === "undefined") return try { const shareUrl = getShareUrl(input, formatOptions) await navigator.clipboard.writeText(shareUrl) toast({ title: "Share URL copied", description: "URL with current state copied to clipboard", action: ( ), }) } catch (error) { toast({ title: "Share failed", description: "Unable to generate share URL", variant: "destructive", }) } } const handleNativeShare = async () => { if (!navigator.share) { handleShare() return } try { const shareUrl = getShareUrl(input, formatOptions) await navigator.share({ title: "JSON Formatter - Shared Data", text: "Check out this formatted JSON data", url: shareUrl, }) toast({ title: "Shared successfully", description: "Data shared via native share", }) } catch (error) { // Fallback to clipboard copy handleShare() } } const updateFormatOptions = (updates: Partial) => { onFormatChange({ ...formatOptions, ...updates }) } return (

Format Options {parsedData && ( 0 ? "destructive" : "default"} className="text-xs"> {parsedData.errors.length > 0 ? ( <> {parsedData.errors.length} errors ) : ( <> Valid )} )}

Indentation

Options

updateFormatOptions({ sortKeys: checked })} /> Sort keys

updateFormatOptions({ removeEmpty: checked })} /> Remove empty

Output

updateFormatOptions({ minify: checked })} /> Minify

Actions

) } [V0_FILE]typescript:file="lib/worker.ts" isMerged="true" // Web Worker bridge for parsing large files without blocking the main thread export interface WorkerMessage { id: string type: "parse" | "cancel" data?: { text: string format: string options: any } } export interface WorkerResponse { id: string type: "success" | "error" | "progress" data?: any error?: string progress?: number } class ParseWorkerBridge { private worker: Worker | null = null private pendingRequests = new Map() private requestId = 0 private initWorker() { if (this.worker) return // Create worker from inline script to avoid external file dependency const workerScript = ` // Import conversion functions (simplified inline versions) function detectFormat(text) { const trimmed = text.trim() if (!trimmed) return "unknown" if ((trimmed.startsWith("{") && trimmed.endsWith("}")) || (trimmed.startsWith("[") && trimmed.endsWith("]"))) { try { JSON.parse(trimmed) return "json" } catch { // Continue } } if (trimmed.startsWith("<") && trimmed.includes(">")) return "xml" if (trimmed.includes(":") && trimmed.includes("\\n")) return "yaml" if (trimmed.includes("=") && trimmed.includes("&")) return "query" const lines = trimmed.split("\\n") if (lines.length > 1) { const firstLine = lines[0] const delimiter = firstLine.includes(",") ? "," : firstLine.includes(";") ? ";" : firstLine.includes("\\t") ? "\\t" : null if (delimiter) return "csv" } return "unknown" } function convertToJson(text, format) { try { switch (format) { case "json": return { success: true, data: JSON.parse(text) } case "csv": return convertCsvToJson(text) case "xml": return convertXmlToJson(text) case "yaml": return convertYamlToJson(text) case "query": return convertQueryToJson(text) default: return { success: false, errors: [{ line: 1, column: 1, message: "Unsupported format", snippet: text.slice(0, 100) }] } } } catch (error) { return { success: false, errors: [{ line: 1, column: 1, message: error.message, snippet: text.slice(0, 100) }] } } } function convertCsvToJson(text) { const lines = text.trim().split("\\n") if (lines.length < 2) { return { success: false, errors: [{ line: 1, column: 1, message: "CSV must have header and data", snippet: text.slice(0, 100) }] } } const delimiter = lines[0].includes(",") ? "," : ";" const headers = lines[0].split(delimiter).map(h => h.trim()) const data = [] for (let i = 1; i < lines.length; i++) { if (lines[i].trim()) { const values = lines[i].split(delimiter).map(v => v.trim()) const row = {} headers.forEach((header, index) => { row[header] = values[index] || "" }) data.push(row) } } return { success: true, data } } function convertXmlToJson(text) { try { const parser = new DOMParser() const doc = parser.parseFromString(text, "text/xml") const parseError = doc.querySelector("parsererror") if (parseError) { return { success: false, errors: [{ line: 1, column: 1, message: "XML parse error", snippet: text.slice(0, 100) }] } } const data = xmlNodeToJson(doc.documentElement) return { success: true, data } } catch (error) { return { success: false, errors: [{ line: 1, column: 1, message: error.message, snippet: text.slice(0, 100) }] } } } function xmlNodeToJson(node) { const result = {} if (node.attributes.length > 0) { result["@attributes"] = {} for (let i = 0; i < node.attributes.length; i++) { const attr = node.attributes[i] result["@attributes"][attr.name] = attr.value } } const children = Array.from(node.childNodes) const textContent = node.textContent?.trim() if (children.length === 1 && children[0].nodeType === Node.TEXT_NODE) { return textContent } const elementChildren = children.filter(child => child.nodeType === Node.ELEMENT_NODE) for (const child of elementChildren) { const childData = xmlNodeToJson(child) if (result[child.tagName]) { if (!Array.isArray(result[child.tagName])) { result[child.tagName] = [result[child.tagName]] } result[child.tagName].push(childData) } else { result[child.tagName] = childData } } return result } function convertYamlToJson(text) { // Simplified YAML parser const lines = text.split("\\n") const result = {} for (const line of lines) { const trimmed = line.trim() if (!trimmed || trimmed.startsWith("#")) continue const colonIndex = trimmed.indexOf(":") if (colonIndex > 0) { const key = trimmed.slice(0, colonIndex).trim() const value = trimmed.slice(colonIndex + 1).trim() result[key] = parseYamlValue(value) } } return { success: true, data: result } } function parseYamlValue(value) { if (value === "true") return true if (value === "false") return false if (value === "null") return null if (/^\\d+$/.test(value)) return parseInt(value) if (/^\\d+\\.\\d+$/.test(value)) return parseFloat(value) return value } function convertQueryToJson(text) { try { const params = new URLSearchParams(text) const data = {} for (const [key, value] of params.entries()) { if (data[key]) { if (Array.isArray(data[key])) { data[key].push(value) } else { data[key] = [data[key], value] } } else { data[key] = value } } return { success: true, data } } catch (error) { return { success: false, errors: [{ line: 1, column: 1, message: error.message, snippet: text.slice(0, 100) }] } } } self.onmessage = function(e) { const { id, type, data } = e.data if (type === "parse") { try { // Send progress updates for large files const textSize = data.text.length if (textSize > 100000) { self.postMessage({ id, type: "progress", progress: 25 }) } const format = detectFormat(data.text) if (textSize > 100000) { self.postMessage({ id, type: "progress", progress: 50 }) } const result = convertToJson(data.text, format) if (textSize > 100000) { self.postMessage({ id, type: "progress", progress: 75 }) } self.postMessage({ id, type: "success", data: { ...result, format, originalSize: textSize } }) } catch (error) { self.postMessage({ id, type: "error", error: error.message }) } } } ` const blob = new Blob([workerScript], { type: "application/javascript" }) this.worker = new Worker(URL.createObjectURL(blob)) this.worker.onmessage = (e: MessageEvent) => { const { id, type, data, error, progress } = e.data const request = this.pendingRequests.get(id) if (!request) return if (type === "success") { this.pendingRequests.delete(id) request.resolve(data) } else if (type === "error") { this.pendingRequests.delete(id) request.reject(new Error(error)) } else if (type === "progress" && progress !== undefined) { // Progress updates don't resolve the promise if (request.onProgress) { request.onProgress(progress) } } } this.worker.onerror = (error) => { console.error("Worker error:", error) // Reject all pending requests for (const [id, request] of this.pendingRequests) { request.reject(new Error("Worker error")) } this.pendingRequests.clear() } } async parseInWorker( text: string, format: string, options: any, onProgress?: (progress: number) => void, ): Promise { this.initWorker() const id = (++this.requestId).toString() return new Promise((resolve, reject) => { this.pendingRequests.set(id, { resolve, reject, onProgress }) this.worker!.postMessage({ id, type: "parse", data: { text, format, options }, } as WorkerMessage) // Timeout for very large files setTimeout(() => { if (this.pendingRequests.has(id)) { this.pendingRequests.delete(id) reject(new Error("Parse timeout")) } }, 30000) // 30 second timeout }) } terminate() { if (this.worker) { this.worker.terminate() this.worker = null } this.pendingRequests.clear() } } export const parseWorker = new ParseWorkerBridge() // Utility to determine if we should use worker export function shouldUseWorker(text: string): boolean { return text.length > 50000 // Use worker for files > 50KB } [V0_FILE]typescriptreact:file="components/VirtualizedTree.tsx" isMerged="true" "use client" import type React from "react" import { useMemo, useCallback, useRef, useEffect } from "react" import { FixedSizeList as List } from "react-window" import { Button } from "@/components/ui/button" import { Copy, ChevronRight, ChevronDown } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { cn } from "@/lib/utils" interface VirtualizedTreeProps { data: any searchTerm: string expandedNodes: Set onToggleNode: (path: string) => void height: number } interface TreeItem { id: string path: string[] data: any level: number isExpandable: boolean isExpanded: boolean key?: string parentType?: "object" | "array" } const ITEM_HEIGHT = 32 export function VirtualizedTree({ data, searchTerm, expandedNodes, onToggleNode, height }: VirtualizedTreeProps) { const { toast } = useToast() const listRef = useRef(null) const flattenedItems = useMemo(() => { const items: TreeItem[] = [] const traverse = (obj: any, path: string[] = ["root"], level = 0, parentType?: "object" | "array") => { const pathStr = path.join(".") const isExpandable = obj && typeof obj === "object" const isExpanded = expandedNodes.has(pathStr) // Add current item items.push({ id: pathStr, path, data: obj, level, isExpandable, isExpanded, key: path.length > 1 ? path[path.length - 1] : undefined, parentType, }) // Add children if expanded if (isExpanded && isExpandable) { if (Array.isArray(obj)) { obj.forEach((item, index) => { traverse(item, [...path, index.toString()], level + 1, "array") }) } else { Object.entries(obj).forEach(([key, value]) => { traverse(value, [...path, key], level + 1, "object") }) } } } if (data !== null && data !== undefined) { traverse(data) } return items }, [data, expandedNodes]) const filteredItems = useMemo(() => { if (!searchTerm) return flattenedItems return flattenedItems.filter((item) => { const keyMatch = item.key?.toLowerCase().includes(searchTerm.toLowerCase()) const valueMatch = String(item.data).toLowerCase().includes(searchTerm.toLowerCase()) return keyMatch || valueMatch }) }, [flattenedItems, searchTerm]) const handleCopyValue = useCallback( async (value: any) => { try { const textValue = typeof value === "string" ? value : JSON.stringify(value, null, 2) await navigator.clipboard.writeText(textValue) toast({ title: "Copied to clipboard", description: "Value copied successfully", }) } catch (error) { toast({ title: "Copy failed", description: "Unable to copy value", variant: "destructive", }) } }, [toast], ) const getValueIcon = (value: any) => { if (Array.isArray(value)) return "[]" if (value && typeof value === "object") return "{}" if (typeof value === "string") return '"' if (typeof value === "number") return "#" if (typeof value === "boolean") return "⚡" return "•" } const getValueColor = (value: any) => { if (value === null) return "text-muted-foreground" if (typeof value === "string") return "text-green-600 dark:text-green-400" if (typeof value === "number") return "text-blue-600 dark:text-blue-400" if (typeof value === "boolean") return "text-purple-600 dark:text-purple-400" return "text-foreground" } const formatValue = (value: any) => { if (value === null) return "null" if (typeof value === "string") return `"${value}"` if (typeof value === "boolean") return value.toString() if (typeof value === "number") return value.toString() if (Array.isArray(value)) return `Array(${value.length})` if (typeof value === "object") return `Object(${Object.keys(value).length})` return String(value) } const highlightMatch = (text: string) => { if (!searchTerm) return text const regex = new RegExp(`(${searchTerm})`, "gi") const parts = text.split(regex) return parts.map((part, index) => regex.test(part) ? ( {part} ) : ( part ), ) } const Row = useCallback( ({ index, style }: { index: number; style: React.CSSProperties }) => { const item = filteredItems[index] if (!item) return null const { data, level, isExpandable, isExpanded, key, parentType, path } = item return (

isExpandable && onToggleNode(path.join("."))} >

{isExpandable ? ( isExpanded ? ( ) : ( ) ) : (

{getValueIcon(data)}

)}

{key && {highlightMatch(key)}:} {highlightMatch(formatValue(data))}

) }, [filteredItems, onToggleNode, handleCopyValue, searchTerm], ) // Auto-scroll to first search result useEffect(() => { if (searchTerm && filteredItems.length > 0 && listRef.current) { listRef.current.scrollToItem(0, "start") } }, [searchTerm, filteredItems.length]) if (filteredItems.length === 0) { return (

No items to display

{searchTerm &&

Try a different search term

}

) } return ( {Row} ) } [V0_FILE]typescriptreact:file="components/Editor.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Textarea } from "@/components/ui/textarea" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Loader2, Play, FileText, AlertCircle, CheckCircle2 } from "lucide-react" import { detectFormat, getFormatDescription } from "@/lib/detect" interface EditorProps { value: string onChange: (value: string) => void onParse: (value: string) => void isLoading: boolean } export function Editor({ value, onChange, onParse, isLoading }: EditorProps) { const textareaRef = useRef(null) const [detectedFormat, setDetectedFormat] = useState("unknown") const [hasError, setHasError] = useState(false) const [showSuccess, setShowSuccess] = useState(false) useEffect(() => { if (value.trim()) { const format = detectFormat(value) setDetectedFormat(format) setHasError(format === "unknown") } else { setDetectedFormat("unknown") setHasError(false) } }, [value]) useEffect(() => { // Auto-parse when content changes (debounced) const timer = setTimeout(() => { if (value.trim()) { onParse(value) if (detectedFormat !== "unknown") { setShowSuccess(true) setTimeout(() => setShowSuccess(false), 2000) } } }, 500) return () => clearTimeout(timer) }, [value, onParse, detectedFormat]) const handleKeyDown = (e: React.KeyboardEvent) => { // Ctrl/Cmd + Enter to parse if ((e.ctrlKey || e.metaKey) && e.key === "Enter") { e.preventDefault() onParse(value) } // Tab support if (e.key === "Tab") { e.preventDefault() const textarea = textareaRef.current if (!textarea) return const start = textarea.selectionStart const end = textarea.selectionEnd const newValue = value.substring(0, start) + " " + value.substring(end) onChange(newValue) // Restore cursor position setTimeout(() => { textarea.selectionStart = textarea.selectionEnd = start + 2 }, 0) } } const lineCount = value.split("\n").length const charCount = value.length return (

Input {detectedFormat !== "unknown" && ( {hasError && } {showSuccess && !hasError && } {getFormatDescription(detectedFormat as any)} )}

{lineCount} lines, {charCount.toLocaleString()} chars

onChange(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Paste your JSON, CSV, XML, YAML, or other data here...

Supported formats:
• JSON - JavaScript Object Notation
• CSV - Comma Separated Values  
• XML - eXtensible Markup Language
• YAML - YAML Ain't Markup Language
• Query strings - URL parameters
• NDJSON - Newline Delimited JSON

Keyboard shortcuts:
• Ctrl/Cmd + Enter: Parse
• Tab: Insert spaces"
            className={`min-h-[400px] font-mono text-sm resize-none focus:ring-2 transition-all duration-200 ${
              hasError && value.trim() ? "focus:ring-destructive/20 border-destructive/50" : "focus:ring-primary/20"
            }`}
            spellCheck={false}
          />
        </motion.div>

<AnimatePresence>
          {isLoading && (
            <motion.div
              className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center rounded-md"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
            >
              <motion.div
                className="flex items-center gap-2 text-sm text-muted-foreground bg-card px-4 py-2 rounded-lg border shadow-lg"
                initial={{ scale: 0.9, y: 10 }}
                animate={{ scale: 1, y: 0 }}
                exit={{ scale: 0.9, y: 10 }}
              >
                <Loader2 className="h-4 w-4 animate-spin" />
                Parsing...
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>

{/* Success indicator */}
        <AnimatePresence>
          {showSuccess && !hasError && (
            <motion.div
              className="absolute top-2 right-2 bg-green-500 text-white px-2 py-1 rounded text-xs flex items-center gap-1"
              initial={{ opacity: 0, scale: 0.8, y: -10 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.8, y: -10 }}
              transition={{ duration: 0.3 }}
            >
              <CheckCircle2 className="h-3 w-3" />
              Parsed
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/StatsBar.tsx" isEdit="true" isMerged="true"
"use client"

import { motion, AnimatePresence } from "framer-motion"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { FileText, Hash, Layers, BarChart3, HardDrive, AlertTriangle, TrendingUp, Clock } from "lucide-react"
import type { ParsedData } from "@/app/page"

interface StatsBarProps {
  parsedData: ParsedData | null
}

export function StatsBar({ parsedData }: StatsBarProps) {
  if (!parsedData) {
    return (
      <motion.div
        className="p-4 bg-gradient-to-r from-muted/30 to-muted/10 rounded-lg border border-dashed"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
      >
        <motion.div
          className="flex items-center gap-2 text-sm text-muted-foreground"
          animate={{ opacity: [0.5, 1, 0.5] }}
          transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
        >
          <FileText className="h-4 w-4" />
          <span>No data parsed yet</span>
        </motion.div>
      </motion.div>
    )
  }

const { stats, errors } = parsedData
  const hasErrors = errors.length > 0

const formatBytes = (bytes: number): string => {
    if (bytes === 0) return "0 B"
    const k = 1024
    const sizes = ["B", "KB", "MB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return `${Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
  }

const getComplexityColor = (depth: number): string => {
    if (depth <= 3) return "text-green-600 dark:text-green-400"
    if (depth <= 6) return "text-yellow-600 dark:text-yellow-400"
    return "text-red-600 dark:text-red-400"
  }

const getComplexityLabel = (depth: number): string => {
    if (depth <= 3) return "Simple"
    if (depth <= 6) return "Moderate"
    return "Complex"
  }

const getPerformanceScore = () => {
    let score = 100
    if (stats.size > 1024 * 1024) score -= 20 // Large file penalty
    if (stats.depth > 10) score -= 15 // Deep nesting penalty
    if (stats.keys > 1000) score -= 10 // Many keys penalty
    if (hasErrors) score -= 30 // Error penalty
    return Math.max(0, score)
  }

const performanceScore = getPerformanceScore()

return (
    <motion.div
      className="space-y-4"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, delay: 0.1 }}
    >
      <AnimatePresence>
        {hasErrors && (
          <motion.div
            className="p-4 bg-gradient-to-r from-destructive/10 to-destructive/5 border border-destructive/20 rounded-lg"
            initial={{ opacity: 0, scale: 0.95, x: -20 }}
            animate={{ opacity: 1, scale: 1, x: 0 }}
            exit={{ opacity: 0, scale: 0.95, x: 20 }}
            transition={{ duration: 0.3 }}
          >
            <motion.div
              className="flex items-center gap-2 mb-3"
              animate={{ x: [-1, 1, -1, 1, 0] }}
              transition={{ duration: 0.4, delay: 0.1 }}
            >
              <AlertTriangle className="h-4 w-4 text-destructive" />
              <span className="text-sm font-medium text-destructive">
                {errors.length} Parse Error{errors.length > 1 ? "s" : ""}
              </span>
            </motion.div>
            <div className="space-y-2">
              {errors.slice(0, 3).map((error, index) => (
                <motion.div
                  key={index}
                  className="text-xs text-destructive/80 bg-destructive/5 p-2 rounded"
                  initial={{ opacity: 0, x: -10 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.2, delay: index * 0.1 }}
                >
                  <div className="font-mono text-destructive/60 mb-1">
                    Line {error.line}, Col {error.column}
                  </div>
                  <div>{error.message}</div>
                </motion.div>
              ))}
              {errors.length > 3 && (
                <motion.div
                  className="text-xs text-destructive/60"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 0.3 }}
                >
                  +{errors.length - 3} more errors...
                </motion.div>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

<motion.div
        className="p-4 bg-gradient-to-r from-card to-card/50 border rounded-lg shadow-sm"
        whileHover={{ boxShadow: "0 8px 25px rgba(0,0,0,0.1)" }}
        transition={{ duration: 0.2 }}
      >
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-4">
          <motion.div className="flex items-center gap-2" whileHover={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
            <motion.div
              animate={{ rotate: [0, 5, -5, 0] }}
              transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, repeatDelay: 3 }}
            >
              <HardDrive className="h-4 w-4 text-muted-foreground" />
            </motion.div>
            <div>
              <div className="text-xs text-muted-foreground">Size</div>
              <motion.div
                className="text-sm font-medium"
                initial={{ opacity: 0, y: 5 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 }}
              >
                {formatBytes(stats.size)}
              </motion.div>
            </div>
          </motion.div>

<motion.div className="flex items-center gap-2" whileHover={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
            <FileText className="h-4 w-4 text-muted-foreground" />
            <div>
              <div className="text-xs text-muted-foreground">Lines</div>
              <motion.div
                className="text-sm font-medium"
                initial={{ opacity: 0, y: 5 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
              >
                {stats.lines.toLocaleString()}
              </motion.div>
            </div>
          </motion.div>

<motion.div className="flex items-center gap-2" whileHover={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
            <Hash className="h-4 w-4 text-muted-foreground" />
            <div>
              <div className="text-xs text-muted-foreground">Keys</div>
              <motion.div
                className="text-sm font-medium"
                initial={{ opacity: 0, y: 5 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.3 }}
              >
                {stats.keys.toLocaleString()}
              </motion.div>
            </div>
          </motion.div>

<motion.div className="flex items-center gap-2" whileHover={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
            <BarChart3 className="h-4 w-4 text-muted-foreground" />
            <div>
              <div className="text-xs text-muted-foreground">Arrays</div>
              <motion.div
                className="text-sm font-medium"
                initial={{ opacity: 0, y: 5 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 }}
              >
                {stats.arrays.toLocaleString()}
              </motion.div>
            </div>
          </motion.div>

<motion.div className="flex items-center gap-2" whileHover={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
            <Layers className="h-4 w-4 text-muted-foreground" />
            <div>
              <div className="text-xs text-muted-foreground">Depth</div>
              <div className="flex items-center gap-2">
                <motion.span
                  className="text-sm font-medium"
                  initial={{ opacity: 0, y: 5 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.5 }}
                >
                  {stats.depth}
                </motion.span>
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: 0.6 }}
                >
                  <Badge variant="outline" className={`text-xs ${getComplexityColor(stats.depth)}`}>
                    {getComplexityLabel(stats.depth)}
                  </Badge>
                </motion.div>
              </div>
            </div>
          </motion.div>
        </div>

{/* Performance Score */}
        <motion.div
          className="space-y-2"
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.7 }}
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <TrendingUp className="h-4 w-4 text-muted-foreground" />
              <span className="text-xs text-muted-foreground">Performance Score</span>
            </div>
            <motion.span
              className={`text-xs font-medium ${
                performanceScore >= 80
                  ? "text-green-600 dark:text-green-400"
                  : performanceScore >= 60
                    ? "text-yellow-600 dark:text-yellow-400"
                    : "text-red-600 dark:text-red-400"
              }`}
              animate={{ scale: [1, 1.1, 1] }}
              transition={{ duration: 0.3, delay: 0.8 }}
            >
              {performanceScore}/100
            </motion.span>
          </div>
          <motion.div initial={{ width: 0 }} animate={{ width: "100%" }} transition={{ duration: 0.8, delay: 0.9 }}>
            <Progress value={performanceScore} className="h-2" />
          </motion.div>
        </motion.div>

{/* Complexity Indicator */}
        {stats.size > 0 && (
          <motion.div
            className="mt-3 space-y-1"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 1 }}
          >
            <div className="flex justify-between text-xs text-muted-foreground">
              <div className="flex items-center gap-1">
                <Clock className="h-3 w-3" />
                <span>Complexity</span>
              </div>
              <span>{Math.min(100, (stats.depth / 10) * 100).toFixed(0)}%</span>
            </div>
            <motion.div initial={{ width: 0 }} animate={{ width: "100%" }} transition={{ duration: 0.6, delay: 1.1 }}>
              <Progress value={Math.min(100, (stats.depth / 10) * 100)} className="h-1" />
            </motion.div>
          </motion.div>
        )}
      </motion.div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { JetBrains_Mono } from "next/font/google"
import "./globals.css"

export const metadata: Metadata = {
  title: "JSON Formatter - Free Online JSON Validator & Beautifier | Spectrum UI",
  description:
    "Professional JSON formatter, validator, and beautifier by Spectrum UI. Convert JSON to CSV, XML, YAML. Features tree view, diff comparison, API integration, and advanced search. Free online tool for developers.",
  generator: "Spectrum UI",
  applicationName: "JSON Formatter by Spectrum UI",
  keywords: [
    "JSON formatter",
    "JSON validator",
    "JSON beautifier",
    "JSON parser",
    "JSON converter",
    "JSON to CSV",
    "JSON to XML",
    "JSON to YAML",
    "JSON tree view",
    "JSON diff",
    "JSON compare",
    "JSON minifier",
    "JSON pretty print",
    "online JSON tool",
    "free JSON formatter",
    "JSON editor",
    "JSON viewer",
    "JSON analyzer",
    "developer tools",
    "web development",
    "API testing",
    "data conversion",
    "Spectrum UI",
    "json.spectrumhq.in",
  ],
  authors: [{ name: "Spectrum UI", url: "https://spectrumhq.in" }],
  creator: "Spectrum UI",
  publisher: "Spectrum UI",
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    title: "JSON Formatter - Free Online JSON Validator & Beautifier | Spectrum UI",
    description:
      "Professional JSON formatter, validator, and beautifier by Spectrum UI. Convert JSON to CSV, XML, YAML with advanced features like tree view, diff comparison, and API integration.",
    url: "https://json.spectrumhq.in",
    siteName: "JSON Formatter by Spectrum UI",
    type: "website",
    locale: "en_US",
    images: [
      {
        url: "/og-image.png",
        width: 1200,
        height: 630,
        alt: "JSON Formatter by Spectrum UI - Professional JSON Tools",
        type: "image/png",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "JSON Formatter - Free Online JSON Validator & Beautifier",
    description:
      "Professional JSON formatter by Spectrum UI. Convert, validate, and beautify JSON with advanced features.",
    images: ["/og-image.png"],
    creator: "@spectrumhq",
    site: "@spectrumhq",
  },
  alternates: {
    canonical: "https://json.spectrumhq.in",
  },
  category: "Developer Tools",
  classification: "Web Development Tools",
  other: {
    "google-site-verification": "your-google-verification-code",
    "msvalidate.01": "your-bing-verification-code",
  },
}

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
})

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-jetbrains-mono",
})

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${inter.variable} ${jetbrainsMono.variable} scroll-smooth antialiased`}>
      <head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "WebApplication",
              name: "JSON Formatter by Spectrum UI",
              description: "Professional JSON formatter, validator, and beautifier with advanced features",
              url: "https://json.spectrumhq.in",
              applicationCategory: "DeveloperApplication",
              operatingSystem: "Web Browser",
              offers: {
                "@type": "Offer",
                price: "0",
                priceCurrency: "USD",
              },
              creator: {
                "@type": "Organization",
                name: "Spectrum UI",
                url: "https://spectrumhq.in",
              },
              featureList: [
                "JSON formatting and validation",
                "Convert JSON to CSV, XML, YAML",
                "Interactive tree view",
                "Diff comparison",
                "API integration",
                "Advanced search with JSONPath",
                "File upload and drag-drop",
                "Share via URL",
                "Dark/Light themes",
              ],
            }),
          }}
        />
        <link rel="canonical" href="https://json.spectrumhq.in" />
        <meta name="theme-color" content="#3b82f6" />
        <meta name="msapplication-TileColor" content="#3b82f6" />
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
      </head>
      <body className="font-sans">{children}</body>
    </html>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --font-inter: "Inter", sans-serif;
  --font-jetbrains-mono: "JetBrains Mono", monospace;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --font-sans: var(--font-inter);
  --font-mono: var(--font-jetbrains-mono);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }

/* Enhanced scrollbar styling */
  .scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

.scrollbar::-webkit-scrollbar-track {
    @apply bg-muted/30 rounded-full;
  }

.scrollbar::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/30 rounded-full hover:bg-muted-foreground/50;
  }

.scrollbar::-webkit-scrollbar-corner {
    @apply bg-transparent;
  }

/* Smooth focus transitions */
  input,
  textarea,
  button,
  select {
    @apply transition-all duration-200;
  }

/* Enhanced selection styling */
  ::selection {
    @apply bg-primary/20 text-primary-foreground;
  }

/* Improved mark styling for search highlights */
  mark {
    @apply bg-yellow-200 dark:bg-yellow-800/50 text-yellow-900 dark:text-yellow-100 px-0.5 rounded;
  }

/* Smooth animations for all interactive elements */
  button,
  [role="button"] {
    @apply transition-all duration-200 ease-out;
  }

button:hover,
  [role="button"]:hover {
    @apply transform scale-[1.02];
  }

button:active,
  [role="button"]:active {
    @apply transform scale-[0.98];
  }

/* Enhanced card hover effects */
  .card-hover {
    @apply transition-all duration-300 ease-out;
  }

.card-hover:hover {
    @apply shadow-lg transform translate-y-[-2px];
  }

/* Gradient backgrounds for visual appeal */
  .gradient-bg {
    background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--muted)) 100%);
  }

.gradient-border {
    background: linear-gradient(135deg, hsl(var(--border)) 0%, hsl(var(--muted)) 100%);
  }
}

/* Custom animations */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 5px hsl(var(--primary) / 0.3);
  }
  50% {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.6);
  }
}

.shimmer {
  animation: shimmer 2s infinite;
}

.pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* Loading skeleton styles */
.skeleton {
  @apply bg-gradient-to-r from-muted via-muted/50 to-muted animate-pulse rounded;
}

/* Enhanced focus styles for accessibility */
.focus-visible {
  @apply outline-2 outline-offset-2 outline-primary;
}

/* Smooth page transitions */
.page-transition {
  @apply transition-all duration-300 ease-out;
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"
import { Moon, Sun, Monitor } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className="h-8 px-2 bg-transparent">
          <Sun className="h-3 w-3 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-3 w-3 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          <Sun className="mr-2 h-4 w-4" />
          <span>Light</span>
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          <Moon className="mr-2 h-4 w-4" />
          <span>Dark</span>
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          <Monitor className="mr-2 h-4 w-4" />
          <span>System</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescript:file="hooks/use-history.ts" isMerged="true"
"use client"

import { useState, useCallback, useRef } from "react"

interface HistoryState<T> {
  past: T[]
  present: T
  future: T[]
}

interface UseHistoryReturn<T> {
  state: T
  setState: (newState: T) => void
  undo: () => void
  redo: () => void
  canUndo: boolean
  canRedo: boolean
  clear: () => void
  historySize: number
}

export function useHistory<T>(initialState: T, maxHistorySize = 50): UseHistoryReturn<T> {
  const [history, setHistory] = useState<HistoryState<T>>({
    past: [],
    present: initialState,
    future: [],
  })

const lastUpdateTime = useRef<number>(0)
  const debounceDelay = 500 // 500ms debounce for history entries

const setState = useCallback(
    (newState: T) => {
      const now = Date.now()
      const shouldCreateHistoryEntry = now - lastUpdateTime.current > debounceDelay

setHistory((prev) => {
        // If the new state is the same as current, don't update
        if (JSON.stringify(prev.present) === JSON.stringify(newState)) {
          return prev
        }

if (shouldCreateHistoryEntry) {
          // Create new history entry
          const newPast = [...prev.past, prev.present]

// Limit history size
          if (newPast.length > maxHistorySize) {
            newPast.shift()
          }

lastUpdateTime.current = now
          return {
            past: newPast,
            present: newState,
            future: [], // Clear future when new state is set
          }
        } else {
          // Just update present without creating history entry
          return {
            ...prev,
            present: newState,
          }
        }
      })
    },
    [maxHistorySize, debounceDelay],
  )

const undo = useCallback(() => {
    setHistory((prev) => {
      if (prev.past.length === 0) return prev

const previous = prev.past[prev.past.length - 1]
      const newPast = prev.past.slice(0, prev.past.length - 1)

return {
        past: newPast,
        present: previous,
        future: [prev.present, ...prev.future],
      }
    })
  }, [])

const redo = useCallback(() => {
    setHistory((prev) => {
      if (prev.future.length === 0) return prev

const next = prev.future[0]
      const newFuture = prev.future.slice(1)

return {
        past: [...prev.past, prev.present],
        present: next,
        future: newFuture,
      }
    })
  }, [])

const clear = useCallback(() => {
    setHistory((prev) => ({
      past: [],
      present: prev.present,
      future: [],
    }))
  }, [])

return {
    state: history.present,
    setState,
    undo,
    redo,
    canUndo: history.past.length > 0,
    canRedo: history.future.length > 0,
    clear,
    historySize: history.past.length + history.future.length + 1,
  }
}
[V0_FILE]typescriptreact:file="components/HistoryControls.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Undo2, Redo2, History } from "lucide-react"
import { Badge } from "@/components/ui/badge"

interface HistoryControlsProps {
  canUndo: boolean
  canRedo: boolean
  onUndo: () => void
  onRedo: () => void
  historySize: number
}

export function HistoryControls({ canUndo, canRedo, onUndo, onRedo, historySize }: HistoryControlsProps) {
  return (
    <TooltipProvider>
      <div className="flex items-center gap-1">
        <div className="flex items-center gap-1 mr-2">
          <History className="h-3 w-3 text-muted-foreground" />
          <Badge variant="outline" className="text-xs h-5">
            {historySize}
          </Badge>
        </div>

<Tooltip>
          <TooltipTrigger asChild>
            <Button
              size="sm"
              variant="outline"
              onClick={onRedo}
              disabled={!canRedo}
              className="h-8 px-2 bg-transparent"
            >
              <Redo2 className="h-3 w-3" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <p>Redo (Ctrl+Y)</p>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}
[V0_FILE]typescript:file="lib/diff.ts" isMerged="true"
export interface DiffResult {
  path: string[]
  type: "added" | "removed" | "modified" | "unchanged"
  oldValue?: any
  newValue?: any
  children?: DiffResult[]
}

export function deepDiff(obj1: any, obj2: any, path: string[] = []): DiffResult[] {
  const results: DiffResult[] = []

// Handle null/undefined cases
  if (obj1 === null || obj1 === undefined) {
    if (obj2 === null || obj2 === undefined) {
      return [{ path, type: "unchanged", oldValue: obj1, newValue: obj2 }]
    }
    return [{ path, type: "added", newValue: obj2 }]
  }

if (obj2 === null || obj2 === undefined) {
    return [{ path, type: "removed", oldValue: obj1 }]
  }

// Handle primitive values
  if (typeof obj1 !== "object" || typeof obj2 !== "object") {
    if (obj1 === obj2) {
      return [{ path, type: "unchanged", oldValue: obj1, newValue: obj2 }]
    }
    return [{ path, type: "modified", oldValue: obj1, newValue: obj2 }]
  }

// Handle arrays
  if (Array.isArray(obj1) && Array.isArray(obj2)) {
    const maxLength = Math.max(obj1.length, obj2.length)

for (let i = 0; i < maxLength; i++) {
      const newPath = [...path, i.toString()]

if (i >= obj1.length) {
        results.push({ path: newPath, type: "added", newValue: obj2[i] })
      } else if (i >= obj2.length) {
        results.push({ path: newPath, type: "removed", oldValue: obj1[i] })
      } else {
        results.push(...deepDiff(obj1[i], obj2[i], newPath))
      }
    }

return results
  }

// Handle objects
  if (Array.isArray(obj1) || Array.isArray(obj2)) {
    return [{ path, type: "modified", oldValue: obj1, newValue: obj2 }]
  }

const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)])

for (const key of allKeys) {
    const newPath = [...path, key]

if (!(key in obj1)) {
      results.push({ path: newPath, type: "added", newValue: obj2[key] })
    } else if (!(key in obj2)) {
      results.push({ path: newPath, type: "removed", oldValue: obj1[key] })
    } else {
      results.push(...deepDiff(obj1[key], obj2[key], newPath))
    }
  }

return results
}

export function formatDiffPath(path: string[]): string {
  if (path.length === 0) return "root"

return path.reduce((acc, segment, index) => {
    if (index === 0) return segment

// Check if segment is a number (array index)
    if (/^\d+$/.test(segment)) {
      return `${acc}[${segment}]`
    }

// Check if segment needs quotes (contains special characters)
    if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(segment)) {
      return `${acc}.${segment}`
    }

return `${acc}["${segment}"]`
  })
}

export function getDiffStats(diffs: DiffResult[]) {
  const stats = {
    added: 0,
    removed: 0,
    modified: 0,
    unchanged: 0,
    total: 0,
  }

function countDiffs(diffList: DiffResult[]) {
    for (const diff of diffList) {
      stats[diff.type]++
      stats.total++

if (diff.children) {
        countDiffs(diff.children)
      }
    }
  }

countDiffs(diffs)
  return stats
}
[V0_FILE]typescriptreact:file="components/ApiIntegration.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  Globe,
  Send,
  Save,
  Trash2,
  Clock,
  CheckCircle,
  XCircle,
  Key,
  Plus,
  Minus,
  Copy,
  BookOpen,
  Upload,
} from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { ApiClient, EndpointStorage, type ApiRequest, type ApiResponse, type SavedEndpoint } from "@/lib/api"

interface ApiIntegrationProps {
  onDataReceived: (data: string) => void
  className?: string
}

interface QueryParam {
  key: string
  value: string
  enabled: boolean
}

export function ApiIntegration({ onDataReceived, className }: ApiIntegrationProps) {
  const [request, setRequest] = useState<ApiRequest>({
    url: "",
    method: "GET",
    headers: ApiClient.getCommonHeaders(),
    body: "",
    timeout: 30000,
  })

const [queryParams, setQueryParams] = useState<QueryParam[]>([])
  const [bodyType, setBodyType] = useState<BodyType>("none")
  const [formData, setFormData] = useState<
    Array<{ key: string; value: string; type: "text" | "file"; enabled: boolean }>
  >([])

const [response, setResponse] = useState<ApiResponse | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [savedEndpoints, setSavedEndpoints] = useState<SavedEndpoint[]>(EndpointStorage.getEndpoints())
  const [showAuthConfig, setShowAuthConfig] = useState(false)
  const [authType, setAuthType] = useState<"none" | "bearer" | "apikey" | "basic">("none")
  const [authCredentials, setAuthCredentials] = useState({
    token: "",
    key: "",
    value: "",
    username: "",
    password: "",
  })

const { toast } = useToast()

const updateRequest = useCallback(
    (updates: Partial<ApiRequest>) => {
      setRequest((prev) => {
        const newRequest = { ...prev, ...updates }

if (updates.url !== undefined || queryParams.length > 0) {
          const baseUrl = updates.url ?? prev.url
          const enabledParams = queryParams.filter((p) => p.enabled && p.key && p.value)

if (enabledParams.length > 0) {
            const url = new URL(baseUrl.startsWith("http") ? baseUrl : `https://${baseUrl}`)
            enabledParams.forEach((param) => {
              url.searchParams.set(param.key, param.value)
            })
            newRequest.url = url.toString()
          } else {
            newRequest.url = baseUrl
          }
        }

return newRequest
      })
    },
    [queryParams],
  )

const addQueryParam = useCallback(() => {
    setQueryParams((prev) => [...prev, { key: "", value: "", enabled: true }])
  }, [])

const updateQueryParam = useCallback((index: number, updates: Partial<QueryParam>) => {
    setQueryParams((prev) => prev.map((param, i) => (i === index ? { ...param, ...updates } : param)))
  }, [])

const removeQueryParam = useCallback((index: number) => {
    setQueryParams((prev) => prev.filter((_, i) => i !== index))
  }, [])

const addFormField = useCallback(() => {
    setFormData((prev) => [...prev, { key: "", value: "", type: "text", enabled: true }])
  }, [])

const updateFormField = useCallback((index: number, updates: any) => {
    setFormData((prev) => prev.map((field, i) => (i === index ? { ...field, ...updates } : field)))
  }, [])

const removeFormField = useCallback((index: number) => {
    setFormData((prev) => prev.filter((_, i) => i !== index))
  }, [])

const getRequestBody = useCallback(() => {
    switch (bodyType) {
      case "json":
        return request.body
      case "form-data":
        const formDataObj = new FormData()
        formData
          .filter((f) => f.enabled && f.key)
          .forEach((field) => {
            formDataObj.append(field.key, field.value)
          })
        return formDataObj
      case "x-www-form-urlencoded":
        const params = new URLSearchParams()
        formData
          .filter((f) => f.enabled && f.key)
          .forEach((field) => {
            params.append(field.key, field.value)
          })
        return params.toString()
      case "raw":
        return request.body
      default:
        return ""
    }
  }, [bodyType, request.body, formData])

const addHeader = useCallback(() => {
    const key = `header-${Date.now()}`
    updateRequest({
      headers: { ...request.headers, [key]: "" },
    })
  }, [request.headers, updateRequest])

const updateHeader = useCallback(
    (oldKey: string, newKey: string, value: string) => {
      const newHeaders = { ...request.headers }
      if (oldKey !== newKey) {
        delete newHeaders[oldKey]
      }
      if (newKey) {
        newHeaders[newKey] = value
      }
      updateRequest({ headers: newHeaders })
    },
    [request.headers, updateRequest],
  )

const removeHeader = useCallback(
    (key: string) => {
      const newHeaders = { ...request.headers }
      delete newHeaders[key]
      updateRequest({ headers: newHeaders })
    },
    [request.headers, updateRequest],
  )

const applyAuth = useCallback(() => {
    const authHeaders = ApiClient.getAuthHeaders(authType as any, authCredentials)
    updateRequest({
      headers: { ...request.headers, ...authHeaders },
    })
    setShowAuthConfig(false)

toast({
      title: "Authentication applied",
      description: `${authType} authentication headers added`,
    })
  }, [authType, authCredentials, request.headers, updateRequest, toast])

const makeRequest = useCallback(async () => {
    if (!request.url.trim()) {
      toast({
        title: "URL required",
        description: "Please enter a valid URL",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)
    setResponse(null)

try {
      const requestWithBody = {
        ...request,
        body: getRequestBody(),
      }

const result = await ApiClient.makeRequest(requestWithBody)
      setResponse(result)

if (result.success && result.data) {
        const dataString = typeof result.data === "string" ? result.data : JSON.stringify(result.data, null, 2)
        onDataReceived(dataString)

toast({
          title: "Request successful",
          description: `Received ${typeof result.data === "object" ? "JSON" : "text"} data (${result.responseTime}ms)`,
        })
      } else {
        toast({
          title: "Request failed",
          description: result.error || "Unknown error",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Request error",
        description: error instanceof Error ? error.message : "Unknown error",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }, [request, getRequestBody, onDataReceived, toast])

const saveEndpoint = useCallback(() => {
    if (!request.url.trim()) {
      toast({
        title: "URL required",
        description: "Please enter a valid URL to save",
        variant: "destructive",
      })
      return
    }

const name = prompt("Enter a name for this endpoint:")
    if (!name) return

try {
      const saved = EndpointStorage.saveEndpoint({
        name: name.trim(),
        url: request.url,
        method: request.method,
        headers: request.headers,
        body: request.body,
      })

setSavedEndpoints(EndpointStorage.getEndpoints())

toast({
        title: "Endpoint saved",
        description: `"${saved.name}" has been saved`,
      })
    } catch (error) {
      toast({
        title: "Save failed",
        description: "Unable to save endpoint",
        variant: "destructive",
      })
    }
  }, [request, toast])

const loadEndpoint = useCallback(
    (endpoint: SavedEndpoint) => {
      setRequest({
        url: endpoint.url,
        method: endpoint.method,
        headers: endpoint.headers,
        body: endpoint.body || "",
        timeout: 30000,
      })

toast({
        title: "Endpoint loaded",
        description: `Loaded "${endpoint.name}"`,
      })
    },
    [toast],
  )

const deleteEndpoint = useCallback(
    (id: string, name: string) => {
      if (confirm(`Delete endpoint "${name}"?`)) {
        EndpointStorage.deleteEndpoint(id)
        setSavedEndpoints(EndpointStorage.getEndpoints())

toast({
          title: "Endpoint deleted",
          description: `"${name}" has been deleted`,
        })
      }
    },
    [toast],
  )

const copyResponse = useCallback(async () => {
    if (!response?.data) return

try {
      const text = typeof response.data === "string" ? response.data : JSON.stringify(response.data, null, 2)
      await navigator.clipboard.writeText(text)

toast({
        title: "Copied",
        description: "Response data copied to clipboard",
      })
    } catch (error) {
      toast({
        title: "Copy failed",
        description: "Unable to copy response data",
        variant: "destructive",
      })
    }
  }, [response, toast])

return (
    <div className={className}>
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Globe className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">API Integration</span>
          </div>

<Tabs defaultValue="request" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="request">Request</TabsTrigger>
            <TabsTrigger value="response">Response</TabsTrigger>
            <TabsTrigger value="saved">Saved</TabsTrigger>
          </TabsList>

<TabsContent value="request" className="space-y-4">
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm">Request Configuration</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex gap-2">
                  <Select value={request.method} onValueChange={(value: any) => updateRequest({ method: value })}>
                    <SelectTrigger className="w-28">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="GET">GET</SelectItem>
                      <SelectItem value="POST">POST</SelectItem>
                      <SelectItem value="PUT">PUT</SelectItem>
                      <SelectItem value="PATCH">PATCH</SelectItem>
                      <SelectItem value="DELETE">DELETE</SelectItem>
                      <SelectItem value="HEAD">HEAD</SelectItem>
                      <SelectItem value="OPTIONS">OPTIONS</SelectItem>
                      <SelectItem value="CONNECT">CONNECT</SelectItem>
                      <SelectItem value="TRACE">TRACE</SelectItem>
                    </SelectContent>
                  </Select>

<Input
                    placeholder="https://api.example.com/data"
                    value={request.url}
                    onChange={(e) => updateRequest({ url: e.target.value })}
                    className="flex-1"
                  />

<Button onClick={makeRequest} disabled={isLoading || !request.url.trim()}>
                    <Send className="h-3 w-3 mr-1" />
                    {isLoading ? "Sending..." : "Send"}
                  </Button>
                </div>

<Card className="p-3">
                  <div className="flex items-center justify-between mb-2">
                    <Label className="text-xs font-medium">Query Parameters</Label>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={addQueryParam}
                      className="h-6 px-2 text-xs bg-transparent"
                    >
                      <Plus className="h-3 w-3" />
                    </Button>
                  </div>
                  <ScrollArea className="max-h-32">
                    <div className="space-y-1">
                      {queryParams.map((param, index) => (
                        <div key={index} className="flex gap-1 items-center">
                          <input
                            type="checkbox"
                            checked={param.enabled}
                            onChange={(e) => updateQueryParam(index, { enabled: e.target.checked })}
                            className="w-3 h-3"
                          />
                          <Input
                            placeholder="Key"
                            value={param.key}
                            onChange={(e) => updateQueryParam(index, { key: e.target.value })}
                            className="h-7 text-xs"
                          />
                          <Input
                            placeholder="Value"
                            value={param.value}
                            onChange={(e) => updateQueryParam(index, { value: e.target.value })}
                            className="h-7 text-xs"
                          />
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => removeQueryParam(index)}
                            className="h-7 px-2"
                          >
                            <Minus className="h-3 w-3" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </Card>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="text-xs font-medium">Headers</Label>
                      <div className="flex gap-1">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => setShowAuthConfig(!showAuthConfig)}
                          className="h-6 px-2 text-xs"
                        >
                          <Key className="h-3 w-3 mr-1" />
                          Auth
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={addHeader}
                          className="h-6 px-2 text-xs bg-transparent"
                        >
                          <Plus className="h-3 w-3" />
                        </Button>
                      </div>
                    </div>

{showAuthConfig && (
                      <Card className="p-3">
                        <div className="space-y-3">
                          <Select value={authType} onValueChange={(value: any) => setAuthType(value)}>
                            <SelectTrigger className="h-8">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="none">No Authentication</SelectItem>
                              <SelectItem value="bearer">Bearer Token</SelectItem>
                              <SelectItem value="apikey">API Key</SelectItem>
                              <SelectItem value="basic">Basic Auth</SelectItem>
                            </SelectContent>
                          </Select>

{authType === "bearer" && (
                            <Input
                              placeholder="Token"
                              value={authCredentials.token}
                              onChange={(e) => setAuthCredentials((prev) => ({ ...prev, token: e.target.value }))}
                              className="h-8"
                            />
                          )}

{authType === "apikey" && (
                            <div className="grid grid-cols-2 gap-2">
                              <Input
                                placeholder="Header name"
                                value={authCredentials.key}
                                onChange={(e) => setAuthCredentials((prev) => ({ ...prev, key: e.target.value }))}
                                className="h-8"
                              />
                              <Input
                                placeholder="API key"
                                value={authCredentials.value}
                                onChange={(e) => setAuthCredentials((prev) => ({ ...prev, value: e.target.value }))}
                                className="h-8"
                              />
                            </div>
                          )}

{authType === "basic" && (
                            <div className="grid grid-cols-2 gap-2">
                              <Input
                                placeholder="Username"
                                value={authCredentials.username}
                                onChange={(e) => setAuthCredentials((prev) => ({ ...prev, username: e.target.value }))}
                                className="h-8"
                              />
                              <Input
                                placeholder="Password"
                                type="password"
                                value={authCredentials.password}
                                onChange={(e) => setAuthCredentials((prev) => ({ ...prev, password: e.target.value }))}
                                className="h-8"
                              />
                            </div>
                          )}

<div className="flex gap-2">
                            <Button size="sm" onClick={applyAuth} disabled={authType === "none"}>
                              Apply
                            </Button>
                            <Button size="sm" variant="outline" onClick={() => setShowAuthConfig(false)}>
                              Cancel
                            </Button>
                          </div>
                        </div>
                      </Card>
                    )}

<ScrollArea className="h-32">
                      <div className="space-y-1">
                        {Object.entries(request.headers).map(([key, value]) => (
                          <div key={key} className="flex gap-1">
                            <Input
                              placeholder="Header name"
                              value={key}
                              onChange={(e) => updateHeader(key, e.target.value, value)}
                              className="h-7 text-xs"
                            />
                            <Input
                              placeholder="Header value"
                              value={value}
                              onChange={(e) => updateHeader(key, key, e.target.value)}
                              className="h-7 text-xs"
                            />
                            <Button size="sm" variant="outline" onClick={() => removeHeader(key)} className="h-7 px-2">
                              <Minus className="h-3 w-3" />
                            </Button>
                          </div>
                        ))}
                      </div>
                    </ScrollArea>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="text-xs font-medium">Request Body</Label>
                      <Select value={bodyType} onValueChange={(value: BodyType) => setBodyType(value)}>
                        <SelectTrigger className="w-32 h-6 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="none">None</SelectItem>
                          <SelectItem value="json">JSON</SelectItem>
                          <SelectItem value="form-data">Form Data</SelectItem>
                          <SelectItem value="x-www-form-urlencoded">URL Encoded</SelectItem>
                          <SelectItem value="raw">Raw</SelectItem>
                          <SelectItem value="binary">Binary</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

{bodyType === "json" || bodyType === "raw" ? (
                      <Textarea
                        placeholder={bodyType === "json" ? '{\n  "key": "value"\n}' : "Raw request body"}
                        value={request.body}
                        onChange={(e) => updateRequest({ body: e.target.value })}
                        className="h-32 text-xs font-mono"
                      />
                    ) : bodyType === "form-data" || bodyType === "x-www-form-urlencoded" ? (
                      <Card className="p-2">
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-xs text-muted-foreground">Form Fields</span>
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={addFormField}
                            className="h-6 px-2 text-xs bg-transparent"
                          >
                            <Plus className="h-3 w-3" />
                          </Button>
                        </div>
                        <ScrollArea className="max-h-24">
                          <div className="space-y-1">
                            {formData.map((field, index) => (
                              <div key={index} className="flex gap-1 items-center">
                                <input
                                  type="checkbox"
                                  checked={field.enabled}
                                  onChange={(e) => updateFormField(index, { enabled: e.target.checked })}
                                  className="w-3 h-3"
                                />
                                <Input
                                  placeholder="Key"
                                  value={field.key}
                                  onChange={(e) => updateFormField(index, { key: e.target.value })}
                                  className="h-6 text-xs"
                                />
                                <Input
                                  placeholder="Value"
                                  value={field.value}
                                  onChange={(e) => updateFormField(index, { value: e.target.value })}
                                  className="h-6 text-xs"
                                />
                                {bodyType === "form-data" && (
                                  <Select
                                    value={field.type}
                                    onValueChange={(value: "text" | "file") => updateFormField(index, { type: value })}
                                  >
                                    <SelectTrigger className="w-16 h-6 text-xs">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="text">Text</SelectItem>
                                      <SelectItem value="file">File</SelectItem>
                                    </SelectContent>
                                  </Select>
                                )}
                                <Button
                                  size="sm"
                                  variant="outline"
                                  onClick={() => removeFormField(index)}
                                  className="h-6 px-2"
                                >
                                  <Minus className="h-3 w-3" />
                                </Button>
                              </div>
                            ))}
                          </div>
                        </ScrollArea>
                      </Card>
                    ) : bodyType === "binary" ? (
                      <div className="h-32 border-2 border-dashed border-muted-foreground/25 rounded-lg flex items-center justify-center">
                        <div className="text-center text-muted-foreground">
                          <Upload className="h-6 w-6 mx-auto mb-1" />
                          <p className="text-xs">Binary file upload</p>
                          <p className="text-xs opacity-75">Feature coming soon</p>
                        </div>
                      </div>
                    ) : null}
                  </div>
                </div>

<div className="flex items-center gap-4">
                  <div className="flex items-center gap-2">
                    <Label htmlFor="timeout" className="text-xs">
                      Timeout:
                    </Label>
                    <Input
                      id="timeout"
                      type="number"
                      value={request.timeout}
                      onChange={(e) => updateRequest({ timeout: Number.parseInt(e.target.value) || 30000 })}
                      className="w-20 h-7 text-xs"
                      min="1000"
                      max="300000"
                      step="1000"
                    />
                    <span className="text-xs text-muted-foreground">ms</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="response" className="space-y-4">
            {response ? (
              <Card>
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-sm">Response</CardTitle>
                    <div className="flex items-center gap-2">
                      <Badge variant={response.success ? "default" : "destructive"}>
                        {response.success ? (
                          <CheckCircle className="h-3 w-3 mr-1" />
                        ) : (
                          <XCircle className="h-3 w-3 mr-1" />
                        )}
                        {response.status || "Error"}
                      </Badge>
                      <Badge variant="outline" className="text-xs">
                        <Clock className="h-3 w-3 mr-1" />
                        {response.responseTime}ms
                      </Badge>
                      <Button size="sm" variant="outline" onClick={copyResponse} disabled={!response.data}>
                        <Copy className="h-3 w-3 mr-1" />
                        Copy
                      </Button>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  {response.error && (
                    <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300">
                      {response.error}
                    </div>
                  )}

{response.data && (
                    <ScrollArea className="h-64">
                      <pre className="text-xs bg-muted p-3 rounded overflow-x-auto">
                        {typeof response.data === "string" ? response.data : JSON.stringify(response.data, null, 2)}
                      </pre>
                    </ScrollArea>
                  )}

{response.headers && Object.keys(response.headers).length > 0 && (
                    <div className="mt-4">
                      <Label className="text-xs font-medium">Response Headers</Label>
                      <ScrollArea className="h-20 mt-1">
                        <div className="text-xs space-y-1">
                          {Object.entries(response.headers).map(([key, value]) => (
                            <div key={key} className="flex">
                              <span className="font-mono text-muted-foreground w-32 flex-shrink-0">{key}:</span>
                              <span className="font-mono">{value}</span>
                            </div>
                          ))}
                        </div>
                      </ScrollArea>
                    </div>
                  )}
                </CardContent>
              </Card>
            ) : (
              <Card>
                <CardContent className="flex items-center justify-center h-32 text-muted-foreground">
                  <div className="text-center">
                    <Globe className="h-8 w-8 mx-auto mb-2 opacity-50" />
                    <p className="text-sm">No response yet. Make a request to see results.</p>
                  </div>
                </CardContent>
              </Card>
            )}
          </TabsContent>

<TabsContent value="saved" className="space-y-4">
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <BookOpen className="h-4 w-4" />
                  Saved Endpoints ({savedEndpoints.length})
                </CardTitle>
              </CardHeader>
              <CardContent>
                {savedEndpoints.length > 0 ? (
                  <ScrollArea className="h-64">
                    <div className="space-y-2">
                      {savedEndpoints.map((endpoint) => (
                        <motion.div
                          key={endpoint.id}
                          initial={{ opacity: 0, y: 10 }}
                          animate={{ opacity: 1, y: 0 }}
                          className="flex items-center justify-between p-3 border rounded-lg"
                        >
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 mb-1">
                              <Badge variant="outline" className="text-xs">
                                {endpoint.method}
                              </Badge>
                              <span className="font-medium text-sm truncate">{endpoint.name}</span>
                            </div>
                            <p className="text-xs text-muted-foreground truncate">{endpoint.url}</p>
                          </div>
                          <div className="flex gap-1">
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => loadEndpoint(endpoint)}
                              className="h-7 px-2"
                            >
                              Load
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => deleteEndpoint(endpoint.id, endpoint.name)}
                              className="h-7 px-2"
                            >
                              <Trash2 className="h-3 w-3" />
                            </Button>
                          </div>
                        </motion.div>
                      ))}
                    </div>
                  </ScrollArea>
                ) : (
                  <div className="text-center py-8 text-muted-foreground">
                    <BookOpen className="h-8 w-8 mx-auto mb-2 opacity-50" />
                    <p className="text-sm">No saved endpoints yet.</p>
                    <p className="text-xs">Configure a request and click "Save" to store it.</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/search.ts" isMerged="true"
export interface SearchResult {
  path: string[]
  value: any
  key?: string
  parent?: any
  matchType: "key" | "value" | "path"
  matchText: string
  context?: string
}

export interface SearchOptions {
  caseSensitive: boolean
  wholeWord: boolean
  regex: boolean
  searchKeys: boolean
  searchValues: boolean
  maxResults: number
}

export class JsonSearcher {
  private static readonly DEFAULT_MAX_RESULTS = 100

static search(data: any, query: string, options: SearchOptions): SearchResult[] {
    if (!query.trim() || !data) return []

const results: SearchResult[] = []
    const maxResults = options.maxResults || this.DEFAULT_MAX_RESULTS

try {
      if (query.startsWith("$")) {
        // JSONPath query
        return this.searchJsonPath(data, query, maxResults)
      } else {
        // Text/regex search
        return this.searchText(data, query, options, [], results, maxResults)
      }
    } catch (error) {
      console.error("Search error:", error)
      return []
    }
  }

private static searchJsonPath(data: any, jsonPath: string, maxResults: number): SearchResult[] {
    try {
      // Simple JSONPath implementation
      const results: SearchResult[] = []
      const paths = this.evaluateJsonPath(data, jsonPath)

for (const pathResult of paths.slice(0, maxResults)) {
        results.push({
          path: pathResult.path,
          value: pathResult.value,
          matchType: "path",
          matchText: jsonPath,
          context: this.getContext(pathResult.value),
        })
      }

return results
    } catch (error) {
      return []
    }
  }

private static evaluateJsonPath(data: any, path: string): Array<{ path: string[]; value: any }> {
    const results: Array<{ path: string[]; value: any }> = []

// Remove leading $ and split by dots, handling array notation
    const segments = path
      .replace(/^\$\.?/, "")
      .split(/\.|\[/)
      .map((s) => s.replace(/\]$/, ""))
      .filter((s) => s !== "")

if (segments.length === 0) {
      return [{ path: [], value: data }]
    }

this.traverseJsonPath(data, segments, [], results)
    return results
  }

private static traverseJsonPath(
    current: any,
    segments: string[],
    currentPath: string[],
    results: Array<{ path: string[]; value: any }>,
  ): void {
    if (segments.length === 0) {
      results.push({ path: currentPath, value: current })
      return
    }

const [segment, ...remaining] = segments

if (segment === "*") {
      // Wildcard - match all properties/indices
      if (Array.isArray(current)) {
        current.forEach((item, index) => {
          this.traverseJsonPath(item, remaining, [...currentPath, index.toString()], results)
        })
      } else if (current && typeof current === "object") {
        Object.keys(current).forEach((key) => {
          this.traverseJsonPath(current[key], remaining, [...currentPath, key], results)
        })
      }
    } else if (segment === "**") {
      // Recursive descent
      this.recursiveSearch(current, remaining, currentPath, results)
    } else if (/^\d+$/.test(segment)) {
      // Array index
      const index = Number.parseInt(segment)
      if (Array.isArray(current) && index < current.length) {
        this.traverseJsonPath(current[index], remaining, [...currentPath, segment], results)
      }
    } else {
      // Object property
      if (current && typeof current === "object" && segment in current) {
        this.traverseJsonPath(current[segment], remaining, [...currentPath, segment], results)
      }
    }
  }

private static recursiveSearch(
    current: any,
    segments: string[],
    currentPath: string[],
    results: Array<{ path: string[]; value: any }>,
  ): void {
    // Try to match at current level
    this.traverseJsonPath(current, segments, currentPath, results)

// Recurse into children
    if (Array.isArray(current)) {
      current.forEach((item, index) => {
        this.recursiveSearch(item, segments, [...currentPath, index.toString()], results)
      })
    } else if (current && typeof current === "object") {
      Object.keys(current).forEach((key) => {
        this.recursiveSearch(current[key], segments, [...currentPath, key], results)
      })
    }
  }

private static searchText(
    data: any,
    query: string,
    options: SearchOptions,
    currentPath: string[],
    results: SearchResult[],
    maxResults: number,
  ): SearchResult[] {
    if (results.length >= maxResults) return results

const searchPattern = this.createSearchPattern(query, options)

if (Array.isArray(data)) {
      data.forEach((item, index) => {
        if (results.length >= maxResults) return
        this.searchText(item, query, options, [...currentPath, index.toString()], results, maxResults)
      })
    } else if (data && typeof data === "object") {
      Object.entries(data).forEach(([key, value]) => {
        if (results.length >= maxResults) return

// Search in keys
        if (options.searchKeys && this.matchesPattern(key, searchPattern)) {
          results.push({
            path: [...currentPath, key],
            value,
            key,
            parent: data,
            matchType: "key",
            matchText: key,
            context: this.getContext(value),
          })
        }

// Search in values
        if (options.searchValues && this.matchesPattern(String(value), searchPattern)) {
          results.push({
            path: [...currentPath, key],
            value,
            key,
            parent: data,
            matchType: "value",
            matchText: String(value),
            context: this.getContext(value),
          })
        }

// Recurse into nested objects
        if (typeof value === "object" && value !== null) {
          this.searchText(value, query, options, [...currentPath, key], results, maxResults)
        }
      })
    } else {
      // Primitive value
      if (options.searchValues && this.matchesPattern(String(data), searchPattern)) {
        results.push({
          path: currentPath,
          value: data,
          matchType: "value",
          matchText: String(data),
          context: this.getContext(data),
        })
      }
    }

return results
  }

private static createSearchPattern(query: string, options: SearchOptions): RegExp {
    let pattern = query

if (!options.regex) {
      // Escape regex special characters
      pattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
    }

if (options.wholeWord) {
      pattern = `\\b${pattern}\\b`
    }

const flags = options.caseSensitive ? "g" : "gi"
    return new RegExp(pattern, flags)
  }

private static matchesPattern(text: string, pattern: RegExp): boolean {
    return pattern.test(text)
  }

private static getContext(value: any): string {
    if (typeof value === "string") {
      return value.length > 100 ? `${value.substring(0, 100)}...` : value
    }
    if (typeof value === "object") {
      return Array.isArray(value) ? `Array(${value.length})` : "Object"
    }
    return String(value)
  }

static formatPath(path: string[]): string {
    if (path.length === 0) return "$"

return path.reduce((acc, segment, index) => {
      if (index === 0) return `$.${segment}`

// Check if segment is a number (array index)
      if (/^\d+$/.test(segment)) {
        return `${acc}[${segment}]`
      }

// Check if segment needs quotes (contains special characters)
      if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(segment)) {
        return `${acc}.${segment}`
      }

return `${acc}["${segment}"]`
    })
  }
}

export class SearchHistory {
  private static readonly STORAGE_KEY = "json-formatter-search-history"
  private static readonly MAX_HISTORY = 20

static getHistory(): string[] {
    try {
      const stored = localStorage.getItem(this.STORAGE_KEY)
      return stored ? JSON.parse(stored) : []
    } catch {
      return []
    }
  }

static addToHistory(query: string): void {
    if (!query.trim()) return

try {
      const history = this.getHistory()
      const filtered = history.filter((item) => item !== query)
      const newHistory = [query, ...filtered].slice(0, this.MAX_HISTORY)

localStorage.setItem(this.STORAGE_KEY, JSON.stringify(newHistory))
    } catch {
      // Ignore storage errors
    }
  }

static clearHistory(): void {
    try {
      localStorage.removeItem(this.STORAGE_KEY)
    } catch {
      // Ignore storage errors
    }
  }
}
[V0_FILE]typescriptreact:file="components/AdvancedSearch.tsx" isMerged="true"
"use client"

import { useState, useCallback, useMemo } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Search, Copy, History, Trash2, BookOpen, Target, Filter, Key, Hash } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { JsonSearcher, SearchHistory, type SearchResult, type SearchOptions } from "@/lib/search"

interface AdvancedSearchProps {
  data: any
  onResultSelect?: (result: SearchResult) => void
  className?: string
}

export function AdvancedSearch({ data, onResultSelect, className }: AdvancedSearchProps) {
  const [query, setQuery] = useState("")
  const [searchOptions, setSearchOptions] = useState<SearchOptions>({
    caseSensitive: false,
    wholeWord: false,
    regex: false,
    searchKeys: true,
    searchValues: true,
    maxResults: 100,
  })
  const [isSearching, setIsSearching] = useState(false)
  const [showOptions, setShowOptions] = useState(false)
  const [showHistory, setShowHistory] = useState(false)
  const [searchHistory, setSearchHistory] = useState<string[]>(SearchHistory.getHistory())

const { toast } = useToast()

const searchResults = useMemo(() => {
    if (!query.trim() || !data) return []

try {
      setIsSearching(true)
      const results = JsonSearcher.search(data, query, searchOptions)
      return results
    } catch (error) {
      console.error("Search error:", error)
      return []
    } finally {
      setIsSearching(false)
    }
  }, [data, query, searchOptions])

const handleSearch = useCallback((searchQuery: string) => {
    setQuery(searchQuery)
    if (searchQuery.trim()) {
      SearchHistory.addToHistory(searchQuery)
      setSearchHistory(SearchHistory.getHistory())
    }
  }, [])

const handleResultClick = useCallback(
    (result: SearchResult) => {
      onResultSelect?.(result)

toast({
        title: "Result selected",
        description: `Navigated to ${JsonSearcher.formatPath(result.path)}`,
      })
    },
    [onResultSelect, toast],
  )

const copyPath = useCallback(
    async (path: string[]) => {
      try {
        const pathString = JsonSearcher.formatPath(path)
        await navigator.clipboard.writeText(pathString)

toast({
          title: "Path copied",
          description: "JSONPath copied to clipboard",
        })
      } catch (error) {
        toast({
          title: "Copy failed",
          description: "Unable to copy path",
          variant: "destructive",
        })
      }
    },
    [toast],
  )

const clearHistory = useCallback(() => {
    SearchHistory.clearHistory()
    setSearchHistory([])

toast({
      title: "History cleared",
      description: "Search history has been cleared",
    })
  }, [toast])

const updateSearchOptions = useCallback((updates: Partial<SearchOptions>) => {
    setSearchOptions((prev) => ({ ...prev, ...updates }))
  }, [])

const getResultIcon = (result: SearchResult) => {
    switch (result.matchType) {
      case "key":
        return <Key className="h-3 w-3 text-blue-600" />
      case "value":
        return <Hash className="h-3 w-3 text-green-600" />
      case "path":
        return <Target className="h-3 w-3 text-purple-600" />
      default:
        return <Search className="h-3 w-3" />
    }
  }

const getResultTypeColor = (type: string) => {
    switch (type) {
      case "key":
        return "bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800"
      case "value":
        return "bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800"
      case "path":
        return "bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800"
      default:
        return "bg-muted"
    }
  }

return (
    <div className={className}>
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Search className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">Advanced Search</span>
            {searchResults.length > 0 && (
              <Badge variant="outline" className="text-xs">
                {searchResults.length} results
              </Badge>
            )}
          </div>

<div className="flex gap-1">
            <Button
              size="sm"
              variant="outline"
              onClick={() => setShowHistory(!showHistory)}
              className="h-8 px-2 bg-transparent"
            >
              <History className="h-3 w-3" />
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => setShowOptions(!showOptions)}
              className="h-8 px-2 bg-transparent"
            >
              <Filter className="h-3 w-3" />
            </Button>
          </div>
        </div>

<div className="space-y-2">
          <div className="flex gap-2">
            <Input
              placeholder="Search JSON data or use JSONPath (e.g., $.users[*].name)"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  handleSearch(query)
                }
              }}
              className="flex-1"
            />
            <Button onClick={() => handleSearch(query)} disabled={!query.trim() || isSearching}>
              <Search className="h-3 w-3 mr-1" />
              {isSearching ? "Searching..." : "Search"}
            </Button>
          </div>

<AnimatePresence>
            {showHistory && (
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: "auto" }}
                exit={{ opacity: 0, height: 0 }}
              >
                <Card>
                  <CardHeader className="pb-2">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-sm flex items-center gap-2">
                        <History className="h-4 w-4" />
                        Search History
                      </CardTitle>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={clearHistory}
                        className="h-6 px-2 text-xs bg-transparent"
                      >
                        <Trash2 className="h-3 w-3 mr-1" />
                        Clear
                      </Button>
                    </div>
                  </CardHeader>
                  <CardContent>
                    {searchHistory.length > 0 ? (
                      <div className="space-y-1">
                        {searchHistory.slice(0, 10).map((historyQuery, index) => (
                          <Button
                            key={index}
                            variant="ghost"
                            size="sm"
                            onClick={() => handleSearch(historyQuery)}
                            className="w-full justify-start h-7 px-2 text-xs font-mono"
                          >
                            {historyQuery}
                          </Button>
                        ))}
                      </div>
                    ) : (
                      <p className="text-sm text-muted-foreground">No search history yet</p>
                    )}
                  </CardContent>
                </Card>
              </motion.div>
            )}
          </AnimatePresence>

<AnimatePresence>
            {showOptions && (
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: "auto" }}
                exit={{ opacity: 0, height: 0 }}
              >
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm flex items-center gap-2">
                      <Filter className="h-4 w-4" />
                      Search Options
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-3">
                        <div className="flex items-center space-x-2">
                          <Switch
                            id="case-sensitive"
                            checked={searchOptions.caseSensitive}
                            onCheckedChange={(checked) => updateSearchOptions({ caseSensitive: checked })}
                          />
                          <Label htmlFor="case-sensitive" className="text-xs">
                            Case sensitive
                          </Label>
                        </div>

<div className="flex items-center space-x-2">
                          <Switch
                            id="whole-word"
                            checked={searchOptions.wholeWord}
                            onCheckedChange={(checked) => updateSearchOptions({ wholeWord: checked })}
                          />
                          <Label htmlFor="whole-word" className="text-xs">
                            Whole word
                          </Label>
                        </div>

<div className="flex items-center space-x-2">
                          <Switch
                            id="regex"
                            checked={searchOptions.regex}
                            onCheckedChange={(checked) => updateSearchOptions({ regex: checked })}
                          />
                          <Label htmlFor="regex" className="text-xs">
                            Regular expression
                          </Label>
                        </div>
                      </div>

<div className="space-y-3">
                        <div className="flex items-center space-x-2">
                          <Switch
                            id="search-keys"
                            checked={searchOptions.searchKeys}
                            onCheckedChange={(checked) => updateSearchOptions({ searchKeys: checked })}
                          />
                          <Label htmlFor="search-keys" className="text-xs">
                            Search in keys
                          </Label>
                        </div>

<div className="flex items-center space-x-2">
                          <Switch
                            id="search-values"
                            checked={searchOptions.searchValues}
                            onCheckedChange={(checked) => updateSearchOptions({ searchValues: checked })}
                          />
                          <Label htmlFor="search-values" className="text-xs">
                            Search in values
                          </Label>
                        </div>

<div className="space-y-1">
                          <Label htmlFor="max-results" className="text-xs">
                            Max results: {searchOptions.maxResults}
                          </Label>
                          <input
                            id="max-results"
                            type="range"
                            min="10"
                            max="500"
                            step="10"
                            value={searchOptions.maxResults}
                            onChange={(e) => updateSearchOptions({ maxResults: Number.parseInt(e.target.value) })}
                            className="w-full h-1 bg-muted rounded-lg appearance-none cursor-pointer"
                          />
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

{query && (
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <BookOpen className="h-4 w-4" />
                Search Results
                {searchResults.length > 0 && (
                  <Badge variant="outline" className="text-xs">
                    {searchResults.length}
                  </Badge>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent>
              {searchResults.length > 0 ? (
                <ScrollArea className="h-64">
                  <div className="space-y-2">
                    {searchResults.map((result, index) => (
                      <motion.div
                        key={index}
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: index * 0.02 }}
                        className="p-3 border rounded-lg hover:bg-muted/50 cursor-pointer"
                        onClick={() => handleResultClick(result)}
                      >
                        <div className="flex items-start justify-between gap-2">
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 mb-1">
                              {getResultIcon(result)}
                              <code className="text-xs font-mono bg-background px-1 py-0.5 rounded truncate">
                                {JsonSearcher.formatPath(result.path)}
                              </code>
                              <Badge variant="outline" className={`text-xs ${getResultTypeColor(result.matchType)}`}>
                                {result.matchType}
                              </Badge>
                            </div>

<div className="text-sm">
                              <span className="text-muted-foreground">Match: </span>
                              <code className="bg-background px-1 py-0.5 rounded text-xs">
                                {result.matchText.length > 50
                                  ? `${result.matchText.substring(0, 50)}...`
                                  : result.matchText}
                              </code>
                            </div>

{result.context && (
                              <div className="text-xs text-muted-foreground mt-1">
                                <span>Context: </span>
                                <span className="font-mono">{result.context}</span>
                              </div>
                            )}
                          </div>

<Button
                            size="sm"
                            variant="outline"
                            onClick={(e) => {
                              e.stopPropagation()
                              copyPath(result.path)
                            }}
                            className="h-7 px-2"
                          >
                            <Copy className="h-3 w-3" />
                          </Button>
                        </div>
                      </motion.div>
                    ))}
                  </div>
                </ScrollArea>
              ) : (
                <div className="text-center py-8 text-muted-foreground">
                  <Search className="h-8 w-8 mx-auto mb-2 opacity-50" />
                  <p className="text-sm">{query.trim() ? "No results found" : "Enter a search query to find data"}</p>
                  <p className="text-xs mt-1">
                    Try JSONPath queries like <code className="bg-muted px-1 rounded">$.users[*].name</code> or simple
                    text search
                  </p>
                </div>
              )}
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/JsonTree.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useMemo, useCallback } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  ChevronRight,
  ChevronDown,
  Search,
  Copy,
  Eye,
  EyeOff,
  ExpandIcon,
  ShrinkIcon,
  FileText,
  Hash,
  Type,
  ToggleLeft,
  Brackets,
  Braces,
  Zap,
} from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { cn } from "@/lib/utils"
import { VirtualizedTree } from "./VirtualizedTree"
import { AdvancedSearch } from "./AdvancedSearch"
import type { SearchResult } from "@/lib/search"
import type { ParsedData, FormatOptions } from "@/app/page"

interface JsonTreeProps {
  data: ParsedData | null
  formatOptions: FormatOptions
}

interface TreeNodeProps {
  data: any
  path: string[]
  searchTerm: string
  expandedNodes: Set<string>
  onToggleNode: (path: string) => void
  level: number
  isLast?: boolean
  parentType?: "object" | "array"
  highlightedPaths?: Set<string>
}

const LARGE_TREE_THRESHOLD = 1000 // Use virtualization for trees with 1000+ nodes

export function JsonTree({ data, formatOptions }: JsonTreeProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set(["root"]))
  const [highlightedPaths, setHighlightedPaths] = useState<Set<string>>(new Set())
  const [showRawJson, setShowRawJson] = useState(false)
  const [isProcessing, setIsProcessing] = useState(false)
  const [processingProgress, setProcessingProgress] = useState(0)
  const [activeTab, setActiveTab] = useState("tree")
  const { toast } = useToast()

const toggleNode = useCallback((path: string) => {
    setExpandedNodes((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(path)) {
        newSet.delete(path)
      } else {
        newSet.add(path)
      }
      return newSet
    })
  }, [])

const handleSearchResultSelect = useCallback(
    (result: SearchResult) => {
      const pathStr = result.path.join(".")

// Expand all parent nodes to make the result visible
      const pathParts = result.path.slice(0, -1)
      const newExpanded = new Set(expandedNodes)

for (let i = 0; i <= pathParts.length; i++) {
        const parentPath = pathParts.slice(0, i).join(".")
        if (parentPath) {
          newExpanded.add(parentPath)
        }
      }
      newExpanded.add("root")

setExpandedNodes(newExpanded)

// Highlight the result path
      setHighlightedPaths(new Set([pathStr]))

// Switch to tree view if not already there
      setActiveTab("tree")

// Clear highlight after 3 seconds
      setTimeout(() => {
        setHighlightedPaths(new Set())
      }, 3000)
    },
    [expandedNodes],
  )

const expandAll = useCallback(() => {
    if (!data?.json) return

setIsProcessing(true)
    setProcessingProgress(0)

// Use requestIdleCallback for non-blocking expansion
    const expandInChunks = () => {
      const allPaths = new Set<string>()
      let processed = 0
      let total = 0

const countNodes = (obj: any, currentPath: string[] = []) => {
        total++
        if (Array.isArray(obj)) {
          obj.forEach((item, index) => {
            countNodes(item, [...currentPath, index.toString()])
          })
        } else if (obj && typeof obj === "object") {
          Object.keys(obj).forEach((key) => {
            countNodes(obj[key], [...currentPath, key])
          })
        }
      }

const traverse = (obj: any, currentPath: string[] = []) => {
        const pathStr = currentPath.join(".")
        if (pathStr) allPaths.add(pathStr)

processed++
        if (processed % 100 === 0) {
          setProcessingProgress((processed / total) * 100)
        }

if (Array.isArray(obj)) {
          obj.forEach((item, index) => {
            traverse(item, [...currentPath, index.toString()])
          })
        } else if (obj && typeof obj === "object") {
          Object.keys(obj).forEach((key) => {
            traverse(obj[key], [...currentPath, key])
          })
        }
      }

countNodes(data.json, ["root"])
      traverse(data.json, ["root"])

setExpandedNodes(allPaths)
      setIsProcessing(false)
      setProcessingProgress(0)

toast({
        title: "Expanded all nodes",
        description: `${allPaths.size} nodes expanded`,
      })
    }

// Use setTimeout to allow UI to update
    setTimeout(expandInChunks, 10)
  }, [data?.json, toast])

const collapseAll = useCallback(() => {
    setExpandedNodes(new Set(["root"]))
    setHighlightedPaths(new Set())
    toast({
      title: "Collapsed all nodes",
      description: "Tree collapsed to root level",
    })
  }, [toast])

const handleCopyFormatted = async () => {
    if (!data?.formatted) return

try {
      await navigator.clipboard.writeText(data.formatted)
      toast({
        title: "Copied to clipboard",
        description: "Formatted JSON copied successfully",
      })
    } catch (error) {
      toast({
        title: "Copy failed",
        description: "Unable to copy to clipboard",
        variant: "destructive",
      })
    }
  }

const filteredData = useMemo(() => {
    if (!data?.json || !searchTerm) return data?.json

const filterObject = (obj: any): any => {
      if (Array.isArray(obj)) {
        return obj.map((item) => filterObject(item)).filter((item) => item !== null && item !== undefined)
      }

if (obj && typeof obj === "object") {
        const filtered: any = {}
        let hasMatch = false

for (const [key, value] of Object.entries(obj)) {
          if (key.toLowerCase().includes(searchTerm.toLowerCase())) {
            filtered[key] = value
            hasMatch = true
          } else {
            const filteredValue = filterObject(value)
            if (filteredValue !== null && filteredValue !== undefined) {
              if (typeof filteredValue === "object" && Object.keys(filteredValue).length > 0) {
                filtered[key] = filteredValue
                hasMatch = true
              } else if (typeof filteredValue !== "object") {
                filtered[key] = filteredValue
                hasMatch = true
              }
            }
          }
        }

return hasMatch ? filtered : null
      }

const stringValue = String(obj).toLowerCase()
      return stringValue.includes(searchTerm.toLowerCase()) ? obj : null
    }

return filterObject(data.json)
  }, [data?.json, searchTerm])

// Calculate tree complexity to determine if virtualization is needed
  const treeComplexity = useMemo(() => {
    if (!data?.json) return 0

let nodeCount = 0
    const traverse = (obj: any) => {
      nodeCount++
      if (Array.isArray(obj)) {
        obj.forEach(traverse)
      } else if (obj && typeof obj === "object") {
        Object.values(obj).forEach(traverse)
      }
    }

traverse(data.json)
    return nodeCount
  }, [data?.json])

const shouldUseVirtualization = treeComplexity > LARGE_TREE_THRESHOLD

if (!data) {
    return (
      <div className="h-full flex items-center justify-center text-muted-foreground">
        <div className="text-center space-y-2">
          <FileText className="h-12 w-12 mx-auto opacity-50" />
          <p className="text-sm">No data to display</p>
          <p className="text-xs">Parse some data to see the tree view</p>
        </div>
      </div>
    )
  }

if (data.errors.length > 0) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center space-y-4 max-w-md">
          <div className="text-destructive">
            <Hash className="h-12 w-12 mx-auto mb-2" />
            <h3 className="font-medium">Parse Errors</h3>
          </div>
          <div className="space-y-2 text-sm">
            {data.errors.slice(0, 3).map((error, index) => (
              <div key={index} className="p-2 bg-destructive/10 rounded text-left">
                <div className="font-mono text-xs text-muted-foreground">
                  Line {error.line}, Column {error.column}
                </div>
                <div className="text-destructive">{error.message}</div>
                {error.snippet && <div className="mt-1 font-mono text-xs bg-muted p-1 rounded">{error.snippet}</div>}
              </div>
            ))}
            {data.errors.length > 3 && (
              <div className="text-xs text-muted-foreground">+{data.errors.length - 3} more errors</div>
            )}
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-4 h-full flex flex-col">
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Eye className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">JSON Explorer</span>
            <Badge variant="secondary" className="text-xs">
              {Array.isArray(data.json) ? "Array" : typeof data.json === "object" ? "Object" : typeof data.json}
            </Badge>
            {shouldUseVirtualization && (
              <Badge variant="outline" className="text-xs">
                <Zap className="h-3 w-3 mr-1" />
                Virtualized ({treeComplexity.toLocaleString()} nodes)
              </Badge>
            )}
          </div>

<div className="flex items-center gap-1">
            <Button
              size="sm"
              variant="outline"
              onClick={expandAll}
              disabled={isProcessing}
              className="h-7 bg-transparent"
            >
              <ExpandIcon className="h-3 w-3 mr-1" />
              Expand
            </Button>
            <Button size="sm" variant="outline" onClick={collapseAll} className="h-7 bg-transparent">
              <ShrinkIcon className="h-3 w-3 mr-1" />
              Collapse
            </Button>
            <Button size="sm" variant="outline" onClick={handleCopyFormatted} className="h-7 bg-transparent">
              <Copy className="h-3 w-3 mr-1" />
              Copy
            </Button>
            <Button size="sm" variant="outline" onClick={() => setShowRawJson(!showRawJson)} className="h-7">
              {showRawJson ? <EyeOff className="h-3 w-3 mr-1" /> : <Eye className="h-3 w-3 mr-1" />}
              {showRawJson ? "Tree" : "Raw"}
            </Button>
          </div>
        </div>

{isProcessing && (
          <div className="space-y-2">
            <div className="flex items-center justify-between text-xs text-muted-foreground">
              <span>Expanding nodes...</span>
              <span>{Math.round(processingProgress)}%</span>
            </div>
            <Progress value={processingProgress} className="h-1" />
          </div>
        )}
      </div>

<div className="flex-1 min-h-0">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full flex flex-col">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="tree">Tree View</TabsTrigger>
            <TabsTrigger value="search">Advanced Search</TabsTrigger>
            <TabsTrigger value="raw">Raw JSON</TabsTrigger>
          </TabsList>

<TabsContent value="tree" className="flex-1 mt-4">
            <div className="space-y-3 h-full flex flex-col">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Quick search keys and values..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10 h-8"
                />
              </div>

<div className="flex-1 min-h-0">
                {filteredData !== null && filteredData !== undefined ? (
                  shouldUseVirtualization ? (
                    <VirtualizedTree
                      data={filteredData}
                      searchTerm={searchTerm}
                      expandedNodes={expandedNodes}
                      onToggleNode={toggleNode}
                      height={400}
                    />
                  ) : (
                    <ScrollArea className="h-full">
                      <div className="p-2">
                        <TreeNode
                          data={filteredData}
                          path={["root"]}
                          searchTerm={searchTerm}
                          expandedNodes={expandedNodes}
                          onToggleNode={toggleNode}
                          level={0}
                          highlightedPaths={highlightedPaths}
                        />
                      </div>
                    </ScrollArea>
                  )
                ) : (
                  <div className="text-center py-8 text-muted-foreground">
                    <Search className="h-8 w-8 mx-auto mb-2 opacity-50" />
                    <p className="text-sm">No matches found</p>
                    <p className="text-xs">Try a different search term</p>
                  </div>
                )}
              </div>
            </div>
          </TabsContent>

<TabsContent value="raw" className="flex-1 mt-4">
            <ScrollArea className="h-full">
              <pre className="text-xs font-mono p-4 bg-muted/30 rounded-lg overflow-x-auto">{data.formatted}</pre>
            </ScrollArea>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}

function TreeNode({
  data,
  path,
  searchTerm,
  expandedNodes,
  onToggleNode,
  level,
  isLast = true,
  parentType,
  highlightedPaths = new Set(),
}: TreeNodeProps) {
  const { toast } = useToast()
  const pathStr = path.join(".")
  const isExpanded = expandedNodes.has(pathStr)
  const isExpandable = data && typeof data === "object"
  const isHighlighted = highlightedPaths.has(pathStr)

const handleCopyValue = async (value: any) => {
    try {
      const textValue = typeof value === "string" ? value : JSON.stringify(value, null, 2)
      await navigator.clipboard.writeText(textValue)
      toast({
        title: "Copied to clipboard",
        description: "Value copied successfully",
      })
    } catch (error) {
      toast({
        title: "Copy failed",
        description: "Unable to copy value",
        variant: "destructive",
      })
    }
  }

const getValueIcon = (value: any) => {
    if (Array.isArray(value)) return <Brackets className="h-3 w-3" />
    if (value && typeof value === "object") return <Braces className="h-3 w-3" />
    if (typeof value === "string") return <Type className="h-3 w-3" />
    if (typeof value === "number") return <Hash className="h-3 w-3" />
    if (typeof value === "boolean") return <ToggleLeft className="h-3 w-3" />
    return <FileText className="h-3 w-3" />
  }

const getValueColor = (value: any) => {
    if (value === null) return "text-muted-foreground"
    if (typeof value === "string") return "text-green-600 dark:text-green-400"
    if (typeof value === "number") return "text-blue-600 dark:text-blue-400"
    if (typeof value === "boolean") return "text-purple-600 dark:text-purple-400"
    return "text-foreground"
  }

const formatValue = (value: any) => {
    if (value === null) return "null"
    if (typeof value === "string") return `"${value}"`
    if (typeof value === "boolean") return value.toString()
    if (typeof value === "number") return value.toString()
    if (Array.isArray(value)) return `Array(${value.length})`
    if (typeof value === "object") return `Object(${Object.keys(value).length})`
    return String(value)
  }

const highlightMatch = (text: string) => {
    if (!searchTerm) return text

const regex = new RegExp(`(${searchTerm})`, "gi")
    const parts = text.split(regex)

return parts.map((part, index) =>
      regex.test(part) ? (
        <mark key={index} className="bg-yellow-200 dark:bg-yellow-800 px-0.5 rounded">
          {part}
        </mark>
      ) : (
        part
      ),
    )
  }

if (!isExpandable) {
    const key = path[path.length - 1]
    return (
      <motion.div
        className={cn(
          "flex items-center gap-2 py-1 hover:bg-muted/50 rounded px-2 group",
          isHighlighted && "bg-primary/10 border border-primary/20",
        )}
        initial={{ opacity: 0, x: -10 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.2, delay: level * 0.05 }}
      >
        <div className="flex items-center gap-1 min-w-0 flex-1">
          <div className="flex items-center gap-1 text-muted-foreground">{getValueIcon(data)}</div>
          {parentType && <span className="text-sm font-medium text-foreground">{highlightMatch(key)}:</span>}
          <span className={cn("text-sm font-mono", getValueColor(data))}>{highlightMatch(formatValue(data))}</span>
        </div>
        <Button
          size="sm"
          variant="ghost"
          onClick={() => handleCopyValue(data)}
          className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
        >
          <Copy className="h-3 w-3" />
        </Button>
      </motion.div>
    )
  }

return (
    <motion.div
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.2, delay: level * 0.05 }}
    >
      <div
        className={cn(
          "flex items-center gap-2 py-1 hover:bg-muted/50 rounded px-2 cursor-pointer group",
          isHighlighted && "bg-primary/10 border border-primary/20",
        )}
        onClick={() => onToggleNode(pathStr)}
      >
        <div className="flex items-center gap-1">
          {isExpanded ? (
            <ChevronDown className="h-4 w-4 text-muted-foreground" />
          ) : (
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          )}
          {getValueIcon(data)}
        </div>

<div className="flex items-center gap-2 min-w-0 flex-1">
          {path.length > 1 && (
            <span className="text-sm font-medium text-foreground">{highlightMatch(path[path.length - 1])}:</span>
          )}
          <span className="text-sm text-muted-foreground">
            {Array.isArray(data) ? `Array(${data.length})` : `Object(${Object.keys(data).length})`}
          </span>
        </div>

<Button
          size="sm"
          variant="ghost"
          onClick={(e) => {
            e.stopPropagation()
            handleCopyValue(data)
          }}
          className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
        >
          <Copy className="h-3 w-3" />
        </Button>
      </div>

<AnimatePresence>
        {isExpanded && (
          <motion.div
            className="ml-4 border-l border-muted-foreground/20 pl-2"
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.2 }}
          >
            {Array.isArray(data)
              ? data.map((item, index) => (
                  <TreeNode
                    key={index}
                    data={item}
                    path={[...path, index.toString()]}
                    searchTerm={searchTerm}
                    expandedNodes={expandedNodes}
                    onToggleNode={onToggleNode}
                    level={level + 1}
                    isLast={index === data.length - 1}
                    parentType="array"
                    highlightedPaths={highlightedPaths}
                  />
                ))
              : Object.entries(data).map(([key, value], index, entries) => (
                  <TreeNode
                    key={key}
                    data={value}
                    path={[...path, key]}
                    searchTerm={searchTerm}
                    expandedNodes={expandedNodes}
                    onToggleNode={onToggleNode}
                    level={level + 1}
                    isLast={index === entries.length - 1}
                    parentType="object"
                    highlightedPaths={highlightedPaths}
                  />
                ))}
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}
[V0_FILE]xml:file="app/sitemap.xml" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://json.spectrumhq.in</loc>
    <lastmod>2024-01-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>
[V0_FILE]plaintext:file="app/robots.txt" isMerged="true"
User-agent: *
Allow: /

Sitemap: https://json.spectrumhq.in/sitemap.xml

# Optimize crawl budget
Crawl-delay: 1

# Block unnecessary paths
Disallow: /api/
Disallow: /_next/
Disallow: /static/
[V0_FILE]plaintext:file="public/favicon.ico" query="JSON formatter icon with curly braces symbol, Spectrum UI colors, professional developer tool design" isMerged="true"
[V0_FILE]typescript:file="lib/api.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
export interface ApiRequest {
  url: string
  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE"
  headers: Record<string, string>
  body?: string
  timeout?: number
}

export interface ApiResponse {
  success: boolean
  data?: any
  status?: number
  statusText?: string
  headers?: Record<string, string>
  error?: string
  responseTime?: number
}

export interface SavedEndpoint {
  id: string
  name: string
  url: string
  method: ApiRequest["method"]
  headers: Record<string, string>
  body?: string
  createdAt: number
}

export interface AuthConfig {
  type: "none" | "bearer" | "apikey" | "basic" | "oauth2" | "jwt" | "digest" | "aws" | "custom"
  credentials: Record<string, string>
  settings?: Record<string, any>
}

export interface HeaderPreset {
  id: string
  name: string
  headers: Record<string, string>
  description?: string
}

export interface EnvironmentVariable {
  key: string
  value: string
  enabled: boolean
  description?: string
}

export class ApiClient {
  private static readonly DEFAULT_TIMEOUT = 30000 // 30 seconds
  private static readonly MAX_RESPONSE_SIZE = 10 * 1024 * 1024 // 10MB

static async makeRequest(request: ApiRequest): Promise<ApiResponse> {
    const startTime = Date.now()

try {
      // Validate URL
      let url: URL
      try {
        url = new URL(request.url)
      } catch {
        return {
          success: false,
          error: "Invalid URL format",
        }
      }

// Prepare headers
      const headers = new Headers()
      Object.entries(request.headers).forEach(([key, value]) => {
        if (key && value) {
          headers.set(key, value)
        }
      })

// Set default headers if not provided
      if (!headers.has("User-Agent")) {
        headers.set("User-Agent", "JSON-Formatter/1.0")
      }

// Prepare request options
      const requestOptions: RequestInit = {
        method: request.method,
        headers,
        signal: AbortSignal.timeout(request.timeout || this.DEFAULT_TIMEOUT),
        mode: "cors", // Added to handle CORS properly
      }

// Add body for non-GET requests
      if (request.method !== "GET" && request.body) {
        requestOptions.body = request.body

// Set content-type if not provided and body looks like JSON
        if (!headers.has("Content-Type")) {
          try {
            JSON.parse(request.body)
            headers.set("Content-Type", "application/json")
          } catch {
            // Not JSON, leave content-type unset
          }
        }
      }

// Make the request
      const response = await fetch(request.url, requestOptions)
      const responseTime = Date.now() - startTime

// Get response headers
      const responseHeaders: Record<string, string> = {}
      response.headers.forEach((value, key) => {
        responseHeaders[key] = value
      })

// Check content length
      const contentLength = response.headers.get("content-length")
      if (contentLength && Number.parseInt(contentLength) > this.MAX_RESPONSE_SIZE) {
        return {
          success: false,
          error: `Response too large (${contentLength} bytes). Maximum allowed: ${this.MAX_RESPONSE_SIZE} bytes`,
          status: response.status,
          statusText: response.statusText,
          headers: responseHeaders,
          responseTime,
        }
      }

// Get response text
      const responseText = await response.text()

// Check if response is too large
      if (responseText.length > this.MAX_RESPONSE_SIZE) {
        return {
          success: false,
          error: `Response too large (${responseText.length} characters). Maximum allowed: ${this.MAX_RESPONSE_SIZE} characters`,
          status: response.status,
          statusText: response.statusText,
          headers: responseHeaders,
          responseTime,
        }
      }

// Try to parse as JSON
      let data: any
      try {
        data = JSON.parse(responseText)
      } catch {
        // If not JSON, return as text
        data = responseText
      }

return {
        success: response.ok,
        data,
        status: response.status,
        statusText: response.statusText,
        headers: responseHeaders,
        responseTime,
        error: response.ok ? undefined : `HTTP ${response.status}: ${response.statusText}`,
      }
    } catch (error) {
      const responseTime = Date.now() - startTime

if (error instanceof Error) {
        if (error.name === "AbortError" || error.name === "TimeoutError") {
          return {
            success: false,
            error: `Request timeout after ${request.timeout || this.DEFAULT_TIMEOUT}ms`,
            responseTime,
          }
        }

// Added specific CORS error handling
        if (error.message.includes("CORS") || error.message.includes("fetch")) {
          return {
            success: false,
            error: `CORS Error: ${error.message}. The API server may not allow requests from this domain. Try using a CORS proxy or test with a tool like Postman.`,
            responseTime,
          }
        }

return {
          success: false,
          error: error.message,
          responseTime,
        }
      }

return {
        success: false,
        error: "Unknown error occurred",
        responseTime,
      }
    }
  }

static getCommonHeaders(): Record<string, string> {
    return {
      Accept: "application/json, text/plain, */*",
      "Cache-Control": "no-cache",
    }
  }

static getAuthHeaders(
    type: AuthConfig["type"],
    credentials: Record<string, string>,
    settings?: Record<string, any>,
  ): Record<string, string> {
    switch (type) {
      case "bearer":
        return credentials.token ? { Authorization: `Bearer ${credentials.token}` } : {}

case "apikey":
        if (credentials.key && credentials.value) {
          const location = settings?.location || "header"
          if (location === "header") {
            return { [credentials.key]: credentials.value }
          } else if (location === "query") {
            // Query params handled separately
            return {}
          }
        }
        return {}

case "basic":
        if (credentials.username && credentials.password) {
          const encoded = btoa(`${credentials.username}:${credentials.password}`)
          return { Authorization: `Basic ${encoded}` }
        }
        return {}

case "oauth2":
        if (credentials.accessToken) {
          return { Authorization: `Bearer ${credentials.accessToken}` }
        }
        return {}

case "jwt":
        if (credentials.token) {
          const prefix = settings?.prefix || "Bearer"
          return { Authorization: `${prefix} ${credentials.token}` }
        }
        return {}

case "digest":
        // Digest auth requires server challenge, simplified implementation
        if (credentials.username && credentials.password) {
          return {
            Authorization: `Digest username="${credentials.username}", realm="${settings?.realm || ""}", nonce="${settings?.nonce || ""}", uri="${settings?.uri || ""}", response="${settings?.response || ""}"`,
          }
        }
        return {}

case "aws":
        if (credentials.accessKey && credentials.secretKey) {
          // AWS Signature V4 - simplified implementation
          const date = new Date().toISOString().split("T")[0].replace(/-/g, "")
          return {
            Authorization: `AWS4-HMAC-SHA256 Credential=${credentials.accessKey}/${date}/${settings?.region || "us-east-1"}/${settings?.service || "s3"}/aws4_request`,
            "X-Amz-Date": new Date().toISOString().replace(/[:-]|\.\d{3}/g, ""),
          }
        }
        return {}

case "custom":
        if (credentials.headerName && credentials.headerValue) {
          const prefix = credentials.prefix || ""
          return { [credentials.headerName]: `${prefix}${credentials.headerValue}` }
        }
        return {}

default:
        return {}
    }
  }

static getHeaderPresets(): HeaderPreset[] {
    try {
      const stored = localStorage.getItem("json-formatter-header-presets")
      return stored ? JSON.parse(stored) : this.getDefaultHeaderPresets()
    } catch {
      return this.getDefaultHeaderPresets()
    }
  }

static getDefaultHeaderPresets(): HeaderPreset[] {
    return [
      {
        id: "json-api",
        name: "JSON API",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        description: "Standard JSON API headers",
      },
      {
        id: "form-data",
        name: "Form Data",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Accept: "application/json",
        },
        description: "Form submission headers",
      },
      {
        id: "xml-api",
        name: "XML API",
        headers: {
          "Content-Type": "application/xml",
          Accept: "application/xml",
        },
        description: "XML API headers",
      },
      {
        id: "cors-headers",
        name: "CORS Headers",
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type, Authorization",
        },
        description: "Common CORS headers",
      },
    ]
  }

static saveHeaderPreset(preset: Omit<HeaderPreset, "id">): HeaderPreset {
    const presets = this.getHeaderPresets()
    const newPreset: HeaderPreset = {
      ...preset,
      id: crypto.randomUUID(),
    }
    presets.push(newPreset)
    localStorage.setItem("json-formatter-header-presets", JSON.stringify(presets))
    return newPreset
  }

static deleteHeaderPreset(id: string): void {
    const presets = this.getHeaderPresets().filter((p) => p.id !== id)
    localStorage.setItem("json-formatter-header-presets", JSON.stringify(presets))
  }

static getEnvironmentVariables(): EnvironmentVariable[] {
    try {
      const stored = localStorage.getItem("json-formatter-env-vars")
      return stored ? JSON.parse(stored) : []
    } catch {
      return []
    }
  }

static saveEnvironmentVariable(envVar: EnvironmentVariable): void {
    const envVars = this.getEnvironmentVariables()
    const existingIndex = envVars.findIndex((v) => v.key === envVar.key)

if (existingIndex !== -1) {
      envVars[existingIndex] = envVar
    } else {
      envVars.push(envVar)
    }

localStorage.setItem("json-formatter-env-vars", JSON.stringify(envVars))
  }

static deleteEnvironmentVariable(key: string): void {
    const envVars = this.getEnvironmentVariables().filter((v) => v.key !== key)
    localStorage.setItem("json-formatter-env-vars", JSON.stringify(envVars))
  }

static interpolateVariables(text: string, variables: EnvironmentVariable[]): string {
    let result = text
    variables
      .filter((v) => v.enabled)
      .forEach((variable) => {
        const regex = new RegExp(`{{${variable.key}}}`, "g")
        result = result.replace(regex, variable.value)
      })
    return result
  }

static generateOAuth2AuthUrl(
    authUrl: string,
    clientId: string,
    redirectUri: string,
    scope?: string,
    state?: string,
  ): string {
    const params = new URLSearchParams({
      response_type: "code",
      client_id: clientId,
      redirect_uri: redirectUri,
    })

if (scope) params.set("scope", scope)
    if (state) params.set("state", state)

return `${authUrl}?${params.toString()}`
  }

static async exchangeOAuth2Code(
    tokenUrl: string,
    code: string,
    clientId: string,
    clientSecret: string,
    redirectUri: string,
  ): Promise<{ access_token?: string; refresh_token?: string; error?: string }> {
    try {
      const response = await fetch(tokenUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Accept: "application/json",
        },
        body: new URLSearchParams({
          grant_type: "authorization_code",
          code,
          client_id: clientId,
          client_secret: clientSecret,
          redirect_uri: redirectUri,
        }),
      })

const data = await response.json()
      return data
    } catch (error) {
      return { error: error instanceof Error ? error.message : "OAuth2 exchange failed" }
    }
  }
}

// Local storage utilities for saved endpoints
export class EndpointStorage {
  private static readonly STORAGE_KEY = "json-formatter-endpoints"

static getEndpoints(): SavedEndpoint[] {
    try {
      const stored = localStorage.getItem(this.STORAGE_KEY)
      return stored ? JSON.parse(stored) : []
    } catch {
      return []
    }
  }

static saveEndpoint(endpoint: Omit<SavedEndpoint, "id" | "createdAt">): SavedEndpoint {
    const endpoints = this.getEndpoints()
    const newEndpoint: SavedEndpoint = {
      ...endpoint,
      id: crypto.randomUUID(),
      createdAt: Date.now(),
    }

endpoints.push(newEndpoint)
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(endpoints))
    return newEndpoint
  }

static deleteEndpoint(id: string): void {
    const endpoints = this.getEndpoints().filter((ep) => ep.id !== id)
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(endpoints))
  }

static updateEndpoint(id: string, updates: Partial<SavedEndpoint>): void {
    const endpoints = this.getEndpoints()
    const index = endpoints.findIndex((ep) => ep.id === id)

if (index !== -1) {
      endpoints[index] = { ...endpoints[index], ...updates }
      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(endpoints))
    }
  }
}
[V0_FILE]typescriptreact:file="components/AdvancedAuth.tsx" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Key, Plus, Save, Trash2, Eye, EyeOff, Settings, Lock, Zap } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { ApiClient, type AuthConfig, type HeaderPreset, type EnvironmentVariable } from "@/lib/api"

interface AdvancedAuthProps {
  onAuthApplied: (headers: Record<string, string>) => void
  className?: string
}

export function AdvancedAuth({ onAuthApplied, className }: AdvancedAuthProps) {
  const [authConfig, setAuthConfig] = useState<AuthConfig>({
    type: "none",
    credentials: {},
    settings: {},
  })

const [headerPresets, setHeaderPresets] = useState<HeaderPreset[]>(ApiClient.getHeaderPresets())
  const [envVars, setEnvVars] = useState<EnvironmentVariable[]>(ApiClient.getEnvironmentVariables())
  const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({})
  const [newPresetName, setNewPresetName] = useState("")
  const [newEnvVar, setNewEnvVar] = useState<EnvironmentVariable>({
    key: "",
    value: "",
    enabled: true,
    description: "",
  })

const { toast } = useToast()

const updateAuthConfig = useCallback((updates: Partial<AuthConfig>) => {
    setAuthConfig((prev) => ({ ...prev, ...updates }))
  }, [])

const updateCredentials = useCallback((key: string, value: string) => {
    setAuthConfig((prev) => ({
      ...prev,
      credentials: { ...prev.credentials, [key]: value },
    }))
  }, [])

const updateSettings = useCallback((key: string, value: any) => {
    setAuthConfig((prev) => ({
      ...prev,
      settings: { ...prev.settings, [key]: value },
    }))
  }, [])

const applyAuth = useCallback(() => {
    const headers = ApiClient.getAuthHeaders(authConfig.type, authConfig.credentials, authConfig.settings)
    onAuthApplied(headers)

toast({
      title: "Authentication applied",
      description: `${authConfig.type} authentication configured`,
    })
  }, [authConfig, onAuthApplied, toast])

const applyHeaderPreset = useCallback(
    (preset: HeaderPreset) => {
      onAuthApplied(preset.headers)

toast({
        title: "Headers applied",
        description: `Applied "${preset.name}" preset`,
      })
    },
    [onAuthApplied, toast],
  )

const saveHeaderPreset = useCallback(() => {
    if (!newPresetName.trim()) {
      toast({
        title: "Name required",
        description: "Please enter a name for the preset",
        variant: "destructive",
      })
      return
    }

const headers = ApiClient.getAuthHeaders(authConfig.type, authConfig.credentials, authConfig.settings)
    const preset = ApiClient.saveHeaderPreset({
      name: newPresetName.trim(),
      headers,
      description: `${authConfig.type} authentication preset`,
    })

setHeaderPresets(ApiClient.getHeaderPresets())
    setNewPresetName("")

toast({
      title: "Preset saved",
      description: `"${preset.name}" has been saved`,
    })
  }, [newPresetName, authConfig, toast])

const deleteHeaderPreset = useCallback(
    (id: string, name: string) => {
      if (confirm(`Delete preset "${name}"?`)) {
        ApiClient.deleteHeaderPreset(id)
        setHeaderPresets(ApiClient.getHeaderPresets())

toast({
          title: "Preset deleted",
          description: `"${name}" has been deleted`,
        })
      }
    },
    [toast],
  )

const saveEnvVar = useCallback(() => {
    if (!newEnvVar.key.trim()) {
      toast({
        title: "Key required",
        description: "Please enter a variable key",
        variant: "destructive",
      })
      return
    }

ApiClient.saveEnvironmentVariable(newEnvVar)
    setEnvVars(ApiClient.getEnvironmentVariables())
    setNewEnvVar({ key: "", value: "", enabled: true, description: "" })

toast({
      title: "Variable saved",
      description: `"${newEnvVar.key}" has been saved`,
    })
  }, [newEnvVar, toast])

const deleteEnvVar = useCallback(
    (key: string) => {
      if (confirm(`Delete variable "${key}"?`)) {
        ApiClient.deleteEnvironmentVariable(key)
        setEnvVars(ApiClient.getEnvironmentVariables())

toast({
          title: "Variable deleted",
          description: `"${key}" has been deleted`,
        })
      }
    },
    [toast],
  )

const toggleSecret = useCallback((key: string) => {
    setShowSecrets((prev) => ({ ...prev, [key]: !prev[key] }))
  }, [])

const renderAuthForm = () => {
    switch (authConfig.type) {
      case "bearer":
        return (
          <div className="space-y-3">
            <div className="relative">
              <Input
                placeholder="Bearer token"
                type={showSecrets.token ? "text" : "password"}
                value={authConfig.credentials.token || ""}
                onChange={(e) => updateCredentials("token", e.target.value)}
                className="pr-10"
              />
              <Button
                size="sm"
                variant="ghost"
                onClick={() => toggleSecret("token")}
                className="absolute right-1 top-1 h-6 w-6 p-0"
              >
                {showSecrets.token ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
              </Button>
            </div>
          </div>
        )

case "apikey":
        return (
          <div className="space-y-3">
            <div className="grid grid-cols-2 gap-2">
              <Input
                placeholder="Header/Param name"
                value={authConfig.credentials.key || ""}
                onChange={(e) => updateCredentials("key", e.target.value)}
              />
              <div className="relative">
                <Input
                  placeholder="API key"
                  type={showSecrets.apikey ? "text" : "password"}
                  value={authConfig.credentials.value || ""}
                  onChange={(e) => updateCredentials("value", e.target.value)}
                  className="pr-10"
                />
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => toggleSecret("apikey")}
                  className="absolute right-1 top-1 h-6 w-6 p-0"
                >
                  {showSecrets.apikey ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
                </Button>
              </div>
            </div>
            <Select
              value={authConfig.settings?.location || "header"}
              onValueChange={(value) => updateSettings("location", value)}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="header">Header</SelectItem>
                <SelectItem value="query">Query Parameter</SelectItem>
              </SelectContent>
            </Select>
          </div>
        )

case "basic":
        return (
          <div className="space-y-3">
            <Input
              placeholder="Username"
              value={authConfig.credentials.username || ""}
              onChange={(e) => updateCredentials("username", e.target.value)}
            />
            <div className="relative">
              <Input
                placeholder="Password"
                type={showSecrets.password ? "text" : "password"}
                value={authConfig.credentials.password || ""}
                onChange={(e) => updateCredentials("password", e.target.value)}
                className="pr-10"
              />
              <Button
                size="sm"
                variant="ghost"
                onClick={() => toggleSecret("password")}
                className="absolute right-1 top-1 h-6 w-6 p-0"
              >
                {showSecrets.password ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
              </Button>
            </div>
          </div>
        )

case "oauth2":
        return (
          <div className="space-y-3">
            <Input
              placeholder="Access Token"
              type={showSecrets.oauth ? "text" : "password"}
              value={authConfig.credentials.accessToken || ""}
              onChange={(e) => updateCredentials("accessToken", e.target.value)}
            />
            <Input
              placeholder="Refresh Token (optional)"
              type={showSecrets.refresh ? "text" : "password"}
              value={authConfig.credentials.refreshToken || ""}
              onChange={(e) => updateCredentials("refreshToken", e.target.value)}
            />
            <div className="text-xs text-muted-foreground">
              <p>For OAuth 2.0 flow, you'll need to handle authorization separately.</p>
            </div>
          </div>
        )

case "jwt":
        return (
          <div className="space-y-3">
            <div className="relative">
              <Input
                placeholder="JWT Token"
                type={showSecrets.jwt ? "text" : "password"}
                value={authConfig.credentials.token || ""}
                onChange={(e) => updateCredentials("token", e.target.value)}
                className="pr-10"
              />
              <Button
                size="sm"
                variant="ghost"
                onClick={() => toggleSecret("jwt")}
                className="absolute right-1 top-1 h-6 w-6 p-0"
              >
                {showSecrets.jwt ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
              </Button>
            </div>
            <Input
              placeholder="Prefix (default: Bearer)"
              value={authConfig.settings?.prefix || ""}
              onChange={(e) => updateSettings("prefix", e.target.value)}
            />
          </div>
        )

case "custom":
        return (
          <div className="space-y-3">
            <Input
              placeholder="Header Name"
              value={authConfig.credentials.headerName || ""}
              onChange={(e) => updateCredentials("headerName", e.target.value)}
            />
            <Input
              placeholder="Prefix (optional)"
              value={authConfig.credentials.prefix || ""}
              onChange={(e) => updateCredentials("prefix", e.target.value)}
            />
            <div className="relative">
              <Input
                placeholder="Header Value"
                type={showSecrets.custom ? "text" : "password"}
                value={authConfig.credentials.headerValue || ""}
                onChange={(e) => updateCredentials("headerValue", e.target.value)}
                className="pr-10"
              />
              <Button
                size="sm"
                variant="ghost"
                onClick={() => toggleSecret("custom")}
                className="absolute right-1 top-1 h-6 w-6 p-0"
              >
                {showSecrets.custom ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
              </Button>
            </div>
          </div>
        )

default:
        return (
          <div className="text-center py-4 text-muted-foreground">
            <Lock className="h-8 w-8 mx-auto mb-2 opacity-50" />
            <p className="text-sm">Select an authentication method to configure</p>
          </div>
        )
    }
  }

return (
    <div className={className}>
      <Tabs defaultValue="auth" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="auth">Authentication</TabsTrigger>
          <TabsTrigger value="presets">Header Presets</TabsTrigger>
          <TabsTrigger value="variables">Variables</TabsTrigger>
        </TabsList>

<TabsContent value="auth" className="space-y-4">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <Key className="h-4 w-4" />
                Authentication Configuration
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Select
                value={authConfig.type}
                onValueChange={(value: AuthConfig["type"]) =>
                  updateAuthConfig({ type: value, credentials: {}, settings: {} })
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">No Authentication</SelectItem>
                  <SelectItem value="bearer">Bearer Token</SelectItem>
                  <SelectItem value="apikey">API Key</SelectItem>
                  <SelectItem value="basic">Basic Auth</SelectItem>
                  <SelectItem value="oauth2">OAuth 2.0</SelectItem>
                  <SelectItem value="jwt">JWT</SelectItem>
                  <SelectItem value="custom">Custom</SelectItem>
                </SelectContent>
              </Select>

{renderAuthForm()}

<div className="flex gap-2">
                <Button onClick={applyAuth} disabled={authConfig.type === "none"}>
                  Apply Authentication
                </Button>
                <Button
                  variant="outline"
                  onClick={saveHeaderPreset}
                  disabled={authConfig.type === "none" || !newPresetName.trim()}
                >
                  <Save className="h-3 w-3 mr-1" />
                  Save as Preset
                </Button>
              </div>

{authConfig.type !== "none" && (
                <div className="space-y-2">
                  <Label className="text-xs">Save as Preset</Label>
                  <Input
                    placeholder="Preset name"
                    value={newPresetName}
                    onChange={(e) => setNewPresetName(e.target.value)}
                    className="h-8"
                  />
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="presets" className="space-y-4">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <Settings className="h-4 w-4" />
                Header Presets ({headerPresets.length})
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-64">
                <div className="space-y-2">
                  {headerPresets.map((preset) => (
                    <motion.div
                      key={preset.id}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className="flex items-center justify-between p-3 border rounded-lg"
                    >
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-sm">{preset.name}</span>
                          <Badge variant="outline" className="text-xs">
                            {Object.keys(preset.headers).length} headers
                          </Badge>
                        </div>
                        {preset.description && <p className="text-xs text-muted-foreground">{preset.description}</p>}
                      </div>
                      <div className="flex gap-1">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => applyHeaderPreset(preset)}
                          className="h-7 px-2"
                        >
                          Apply
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => deleteHeaderPreset(preset.id, preset.name)}
                          className="h-7 px-2"
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="variables" className="space-y-4">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <Zap className="h-4 w-4" />
                Environment Variables ({envVars.length})
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Card className="p-3">
                <div className="space-y-2">
                  <Label className="text-xs">Add New Variable</Label>
                  <div className="grid grid-cols-2 gap-2">
                    <Input
                      placeholder="Variable key"
                      value={newEnvVar.key}
                      onChange={(e) => setNewEnvVar((prev) => ({ ...prev, key: e.target.value }))}
                      className="h-8"
                    />
                    <Input
                      placeholder="Variable value"
                      value={newEnvVar.value}
                      onChange={(e) => setNewEnvVar((prev) => ({ ...prev, value: e.target.value }))}
                      className="h-8"
                    />
                  </div>
                  <Input
                    placeholder="Description (optional)"
                    value={newEnvVar.description}
                    onChange={(e) => setNewEnvVar((prev) => ({ ...prev, description: e.target.value }))}
                    className="h-8"
                  />
                  <Button size="sm" onClick={saveEnvVar} disabled={!newEnvVar.key.trim()}>
                    <Plus className="h-3 w-3 mr-1" />
                    Add Variable
                  </Button>
                </div>
              </Card>

<ScrollArea className="h-48">
                <div className="space-y-2">
                  {envVars.map((envVar) => (
                    <motion.div
                      key={envVar.key}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className="flex items-center justify-between p-3 border rounded-lg"
                    >
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <code className="text-xs bg-muted px-1 rounded">{`{{${envVar.key}}}`}</code>
                          <Badge variant={envVar.enabled ? "default" : "secondary"} className="text-xs">
                            {envVar.enabled ? "Enabled" : "Disabled"}
                          </Badge>
                        </div>
                        {envVar.description && <p className="text-xs text-muted-foreground">{envVar.description}</p>}
                      </div>
                      <div className="flex gap-1">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => deleteEnvVar(envVar.key)}
                          className="h-7 px-2"
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </ScrollArea>

{envVars.length > 0 && (
                <div className="text-xs text-muted-foreground p-2 bg-muted rounded">
                  <p>
                    <strong>Usage:</strong> Use variables in URLs, headers, or body with{" "}
                    <code>{`{{variableName}}`}</code> syntax.
                  </p>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="lib/collections.ts" isMerged="true"
export interface RequestCollection {
  id: string
  name: string
  description?: string
  folders: CollectionFolder[]
  requests: CollectionRequest[]
  variables: EnvironmentVariable[]
  createdAt: number
  updatedAt: number
}

export interface CollectionFolder {
  id: string
  name: string
  description?: string
  parentId?: string
  requests: string[] // Request IDs
  subfolders: string[] // Folder IDs
}

export interface CollectionRequest {
  id: string
  name: string
  description?: string
  folderId?: string
  url: string
  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS" | "CONNECT" | "TRACE"
  headers: Record<string, string>
  body?: string
  queryParams: Array<{ key: string; value: string; enabled: boolean }>
  authConfig?: AuthConfig
  tests?: string[] // Test scripts
  preRequestScript?: string
  createdAt: number
  updatedAt: number
}

export interface Environment {
  id: string
  name: string
  variables: EnvironmentVariable[]
  isActive: boolean
  createdAt: number
}

export interface EnvironmentVariable {
  key: string
  value: string
  enabled: boolean
  description?: string
  type?: "default" | "secret"
}

export interface AuthConfig {
  type: "none" | "bearer" | "apikey" | "basic" | "oauth2" | "jwt" | "digest" | "aws" | "custom"
  credentials: Record<string, string>
  settings?: Record<string, any>
}

export class CollectionManager {
  private static readonly COLLECTIONS_KEY = "json-formatter-collections"
  private static readonly ENVIRONMENTS_KEY = "json-formatter-environments"
  private static readonly ACTIVE_ENV_KEY = "json-formatter-active-environment"

// Collection Management
  static getCollections(): RequestCollection[] {
    try {
      const stored = localStorage.getItem(this.COLLECTIONS_KEY)
      return stored ? JSON.parse(stored) : []
    } catch {
      return []
    }
  }

static saveCollection(collection: Omit<RequestCollection, "id" | "createdAt" | "updatedAt">): RequestCollection {
    const collections = this.getCollections()
    const newCollection: RequestCollection = {
      ...collection,
      id: crypto.randomUUID(),
      createdAt: Date.now(),
      updatedAt: Date.now(),
    }

collections.push(newCollection)
    localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))
    return newCollection
  }

static updateCollection(id: string, updates: Partial<RequestCollection>): void {
    const collections = this.getCollections()
    const index = collections.findIndex((c) => c.id === id)

if (index !== -1) {
      collections[index] = {
        ...collections[index],
        ...updates,
        updatedAt: Date.now(),
      }
      localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))
    }
  }

static deleteCollection(id: string): void {
    const collections = this.getCollections().filter((c) => c.id !== id)
    localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))
  }

static duplicateCollection(id: string): RequestCollection | null {
    const collections = this.getCollections()
    const original = collections.find((c) => c.id === id)

if (!original) return null

const duplicate: RequestCollection = {
      ...original,
      id: crypto.randomUUID(),
      name: `${original.name} (Copy)`,
      createdAt: Date.now(),
      updatedAt: Date.now(),
      requests: original.requests.map((req) => ({
        ...req,
        id: crypto.randomUUID(),
      })),
      folders: original.folders.map((folder) => ({
        ...folder,
        id: crypto.randomUUID(),
      })),
    }

collections.push(duplicate)
    localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))
    return duplicate
  }

// Request Management
  static addRequestToCollection(
    collectionId: string,
    request: Omit<CollectionRequest, "id" | "createdAt" | "updatedAt">,
  ): CollectionRequest | null {
    const collections = this.getCollections()
    const collection = collections.find((c) => c.id === collectionId)

if (!collection) return null

const newRequest: CollectionRequest = {
      ...request,
      id: crypto.randomUUID(),
      createdAt: Date.now(),
      updatedAt: Date.now(),
    }

collection.requests.push(newRequest)
    collection.updatedAt = Date.now()

localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))
    return newRequest
  }

static updateRequest(collectionId: string, requestId: string, updates: Partial<CollectionRequest>): void {
    const collections = this.getCollections()
    const collection = collections.find((c) => c.id === collectionId)

if (!collection) return

const requestIndex = collection.requests.findIndex((r) => r.id === requestId)
    if (requestIndex !== -1) {
      collection.requests[requestIndex] = {
        ...collection.requests[requestIndex],
        ...updates,
        updatedAt: Date.now(),
      }
      collection.updatedAt = Date.now()
      localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))
    }
  }

static deleteRequest(collectionId: string, requestId: string): void {
    const collections = this.getCollections()
    const collection = collections.find((c) => c.id === collectionId)

if (!collection) return

collection.requests = collection.requests.filter((r) => r.id !== requestId)
    collection.updatedAt = Date.now()
    localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))
  }

// Folder Management
  static addFolder(collectionId: string, folder: Omit<CollectionFolder, "id">): CollectionFolder | null {
    const collections = this.getCollections()
    const collection = collections.find((c) => c.id === collectionId)

if (!collection) return null

const newFolder: CollectionFolder = {
      ...folder,
      id: crypto.randomUUID(),
    }

collection.folders.push(newFolder)
    collection.updatedAt = Date.now()

localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))
    return newFolder
  }

static deleteFolder(collectionId: string, folderId: string): void {
    const collections = this.getCollections()
    const collection = collections.find((c) => c.id === collectionId)

if (!collection) return

// Remove folder and move requests to root
    collection.folders = collection.folders.filter((f) => f.id !== folderId)
    collection.requests.forEach((req) => {
      if (req.folderId === folderId) {
        req.folderId = undefined
      }
    })

collection.updatedAt = Date.now()
    localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))
  }

// Environment Management
  static getEnvironments(): Environment[] {
    try {
      const stored = localStorage.getItem(this.ENVIRONMENTS_KEY)
      return stored ? JSON.parse(stored) : this.getDefaultEnvironments()
    } catch {
      return this.getDefaultEnvironments()
    }
  }

static getDefaultEnvironments(): Environment[] {
    return [
      {
        id: "development",
        name: "Development",
        variables: [
          { key: "baseUrl", value: "http://localhost:3000", enabled: true, description: "Development API base URL" },
          { key: "apiKey", value: "dev-api-key", enabled: true, description: "Development API key", type: "secret" },
        ],
        isActive: true,
        createdAt: Date.now(),
      },
      {
        id: "staging",
        name: "Staging",
        variables: [
          {
            key: "baseUrl",
            value: "https://staging-api.example.com",
            enabled: true,
            description: "Staging API base URL",
          },
          { key: "apiKey", value: "staging-api-key", enabled: true, description: "Staging API key", type: "secret" },
        ],
        isActive: false,
        createdAt: Date.now(),
      },
      {
        id: "production",
        name: "Production",
        variables: [
          { key: "baseUrl", value: "https://api.example.com", enabled: true, description: "Production API base URL" },
          { key: "apiKey", value: "prod-api-key", enabled: true, description: "Production API key", type: "secret" },
        ],
        isActive: false,
        createdAt: Date.now(),
      },
    ]
  }

static saveEnvironment(environment: Omit<Environment, "id" | "createdAt">): Environment {
    const environments = this.getEnvironments()
    const newEnvironment: Environment = {
      ...environment,
      id: crypto.randomUUID(),
      createdAt: Date.now(),
    }

environments.push(newEnvironment)
    localStorage.setItem(this.ENVIRONMENTS_KEY, JSON.stringify(environments))
    return newEnvironment
  }

static updateEnvironment(id: string, updates: Partial<Environment>): void {
    const environments = this.getEnvironments()
    const index = environments.findIndex((e) => e.id === id)

if (index !== -1) {
      environments[index] = { ...environments[index], ...updates }
      localStorage.setItem(this.ENVIRONMENTS_KEY, JSON.stringify(environments))
    }
  }

static deleteEnvironment(id: string): void {
    const environments = this.getEnvironments().filter((e) => e.id !== id)
    localStorage.setItem(this.ENVIRONMENTS_KEY, JSON.stringify(environments))
  }

static setActiveEnvironment(id: string): void {
    const environments = this.getEnvironments()
    environments.forEach((env) => {
      env.isActive = env.id === id
    })
    localStorage.setItem(this.ENVIRONMENTS_KEY, JSON.stringify(environments))
    localStorage.setItem(this.ACTIVE_ENV_KEY, id)
  }

static getActiveEnvironment(): Environment | null {
    const environments = this.getEnvironments()
    return environments.find((env) => env.isActive) || null
  }

// Import/Export
  static exportCollection(id: string): string | null {
    const collection = this.getCollections().find((c) => c.id === id)
    if (!collection) return null

return JSON.stringify(
      {
        version: "1.0",
        collection,
        exportedAt: Date.now(),
      },
      null,
      2,
    )
  }

static importCollection(jsonData: string): RequestCollection | null {
    try {
      const data = JSON.parse(jsonData)

if (data.collection) {
        const collection = {
          ...data.collection,
          id: crypto.randomUUID(),
          createdAt: Date.now(),
          updatedAt: Date.now(),
        }

const collections = this.getCollections()
        collections.push(collection)
        localStorage.setItem(this.COLLECTIONS_KEY, JSON.stringify(collections))

return collection
      }

return null
    } catch {
      return null
    }
  }

// Variable Interpolation
  static interpolateVariables(text: string, environment?: Environment): string {
    if (!environment) {
      environment = this.getActiveEnvironment()
    }

if (!environment) return text

let result = text
    environment.variables
      .filter((v) => v.enabled)
      .forEach((variable) => {
        const regex = new RegExp(`{{${variable.key}}}`, "g")
        result = result.replace(regex, variable.value)
      })

return result
  }

// Search
  static searchRequests(query: string, collectionId?: string): CollectionRequest[] {
    const collections = collectionId
      ? this.getCollections().filter((c) => c.id === collectionId)
      : this.getCollections()

const results: CollectionRequest[] = []
    const searchTerm = query.toLowerCase()

collections.forEach((collection) => {
      collection.requests.forEach((request) => {
        if (
          request.name.toLowerCase().includes(searchTerm) ||
          request.url.toLowerCase().includes(searchTerm) ||
          request.method.toLowerCase().includes(searchTerm) ||
          request.description?.toLowerCase().includes(searchTerm)
        ) {
          results.push(request)
        }
      })
    })

return results
  }
}
[V0_FILE]typescriptreact:file="components/CollectionManager.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useCallback, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  Folder,
  Plus,
  Search,
  Download,
  Upload,
  Copy,
  Trash2,
  Settings,
  Play,
  Globe,
  ChevronRight,
  ChevronDown,
  FileText,
} from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import {
  CollectionManager,
  type RequestCollection,
  type CollectionRequest,
  type Environment,
  type CollectionFolder,
} from "@/lib/collections"

interface CollectionManagerProps {
  onRequestSelected: (request: CollectionRequest) => void
  className?: string
}

export function CollectionManagerComponent({ onRequestSelected, className }: CollectionManagerProps) {
  const [collections, setCollections] = useState<RequestCollection[]>([])
  const [environments, setEnvironments] = useState<Environment[]>([])
  const [activeEnvironment, setActiveEnvironment] = useState<Environment | null>(null)
  const [expandedCollections, setExpandedCollections] = useState<Set<string>>(new Set())
  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set())
  const [searchQuery, setSearchQuery] = useState("")
  const [newCollectionName, setNewCollectionName] = useState("")
  const [newEnvironmentName, setNewEnvironmentName] = useState("")
  const [selectedCollection, setSelectedCollection] = useState<string | null>(null)

const { toast } = useToast()

useEffect(() => {
    setCollections(CollectionManager.getCollections())
    setEnvironments(CollectionManager.getEnvironments())
    setActiveEnvironment(CollectionManager.getActiveEnvironment())
  }, [])

const createCollection = useCallback(() => {
    if (!newCollectionName.trim()) {
      toast({
        title: "Name required",
        description: "Please enter a collection name",
        variant: "destructive",
      })
      return
    }

const collection = CollectionManager.saveCollection({
      name: newCollectionName.trim(),
      description: "",
      folders: [],
      requests: [],
      variables: [],
    })

setCollections(CollectionManager.getCollections())
    setNewCollectionName("")

toast({
      title: "Collection created",
      description: `"${collection.name}" has been created`,
    })
  }, [newCollectionName, toast])

const deleteCollection = useCallback(
    (id: string, name: string) => {
      if (confirm(`Delete collection "${name}" and all its requests?`)) {
        CollectionManager.deleteCollection(id)
        setCollections(CollectionManager.getCollections())

toast({
          title: "Collection deleted",
          description: `"${name}" has been deleted`,
        })
      }
    },
    [toast],
  )

const duplicateCollection = useCallback(
    (id: string) => {
      const duplicate = CollectionManager.duplicateCollection(id)
      if (duplicate) {
        setCollections(CollectionManager.getCollections())

toast({
          title: "Collection duplicated",
          description: `"${duplicate.name}" has been created`,
        })
      }
    },
    [toast],
  )

const createEnvironment = useCallback(() => {
    if (!newEnvironmentName.trim()) {
      toast({
        title: "Name required",
        description: "Please enter an environment name",
        variant: "destructive",
      })
      return
    }

const environment = CollectionManager.saveEnvironment({
      name: newEnvironmentName.trim(),
      variables: [],
      isActive: false,
    })

setEnvironments(CollectionManager.getEnvironments())
    setNewEnvironmentName("")

toast({
      title: "Environment created",
      description: `"${environment.name}" has been created`,
    })
  }, [newEnvironmentName, toast])

const setActiveEnv = useCallback(
    (id: string) => {
      CollectionManager.setActiveEnvironment(id)
      setEnvironments(CollectionManager.getEnvironments())
      setActiveEnvironment(CollectionManager.getActiveEnvironment())

const env = environments.find((e) => e.id === id)
      toast({
        title: "Environment activated",
        description: `"${env?.name}" is now active`,
      })
    },
    [environments, toast],
  )

const exportCollection = useCallback(
    (id: string, name: string) => {
      const jsonData = CollectionManager.exportCollection(id)
      if (jsonData) {
        const blob = new Blob([jsonData], { type: "application/json" })
        const url = URL.createObjectURL(blob)
        const a = document.createElement("a")
        a.href = url
        a.download = `${name.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.json`
        a.click()
        URL.revokeObjectURL(url)

toast({
          title: "Collection exported",
          description: `"${name}" has been exported`,
        })
      }
    },
    [toast],
  )

const importCollection = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const file = event.target.files?.[0]
      if (!file) return

const reader = new FileReader()
      reader.onload = (e) => {
        const content = e.target?.result as string
        const collection = CollectionManager.importCollection(content)

if (collection) {
          setCollections(CollectionManager.getCollections())
          toast({
            title: "Collection imported",
            description: `"${collection.name}" has been imported`,
          })
        } else {
          toast({
            title: "Import failed",
            description: "Invalid collection file format",
            variant: "destructive",
          })
        }
      }
      reader.readAsText(file)
      event.target.value = ""
    },
    [toast],
  )

const toggleCollection = useCallback((id: string) => {
    setExpandedCollections((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(id)) {
        newSet.delete(id)
      } else {
        newSet.add(id)
      }
      return newSet
    })
  }, [])

const toggleFolder = useCallback((id: string) => {
    setExpandedFolders((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(id)) {
        newSet.delete(id)
      } else {
        newSet.add(id)
      }
      return newSet
    })
  }, [])

const filteredCollections = collections.filter(
    (collection) =>
      collection.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      collection.requests.some(
        (req) =>
          req.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
          req.url.toLowerCase().includes(searchQuery.toLowerCase()),
      ),
  )

const renderRequest = (request: CollectionRequest, collectionId: string) => (
    <motion.div
      key={request.id}
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      className="flex items-center justify-between p-2 hover:bg-muted/50 rounded cursor-pointer group"
      onClick={() => onRequestSelected(request)}
    >
      <div className="flex items-center gap-2 flex-1 min-w-0">
        <Badge variant="outline" className="text-xs">
          {request.method}
        </Badge>
        <span className="text-sm truncate">{request.name}</span>
      </div>
      <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
        <Button size="sm" variant="ghost" className="h-6 w-6 p-0">
          <Play className="h-3 w-3" />
        </Button>
        <Button
          size="sm"
          variant="ghost"
          className="h-6 w-6 p-0"
          onClick={(e) => {
            e.stopPropagation()
            CollectionManager.deleteRequest(collectionId, request.id)
            setCollections(CollectionManager.getCollections())
          }}
        >
          <Trash2 className="h-3 w-3" />
        </Button>
      </div>
    </motion.div>
  )

const renderFolder = (folder: CollectionFolder, collection: RequestCollection) => {
    const isExpanded = expandedFolders.has(folder.id)
    const folderRequests = collection.requests.filter((req) => req.folderId === folder.id)

return (
      <div key={folder.id} className="ml-4">
        <div
          className="flex items-center gap-2 p-2 hover:bg-muted/50 rounded cursor-pointer"
          onClick={() => toggleFolder(folder.id)}
        >
          {isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
          <Folder className="h-4 w-4 text-muted-foreground" />
          <span className="text-sm font-medium">{folder.name}</span>
          <Badge variant="secondary" className="text-xs">
            {folderRequests.length}
          </Badge>
        </div>

<AnimatePresence>
          {isExpanded && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              className="ml-4"
            >
              {folderRequests.map((request) => renderRequest(request, collection.id))}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    )
  }

const renderCollection = (collection: RequestCollection) => {
    const isExpanded = expandedCollections.has(collection.id)
    const rootRequests = collection.requests.filter((req) => !req.folderId)

return (
      <Card key={collection.id} className="mb-2">
        <CardHeader className="pb-2">
          <div className="flex items-center justify-between">
            <div
              className="flex items-center gap-2 cursor-pointer flex-1"
              onClick={() => toggleCollection(collection.id)}
            >
              {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
              <Globe className="h-4 w-4 text-muted-foreground" />
              <div className="flex-1 min-w-0">
                <h3 className="font-medium text-sm truncate">{collection.name}</h3>
                <p className="text-xs text-muted-foreground">
                  {collection.requests.length} requests • {collection.folders.length} folders
                </p>
              </div>
            </div>
            <div className="flex gap-1">
              <Button
                size="sm"
                variant="ghost"
                onClick={() => exportCollection(collection.id, collection.name)}
                className="h-6 w-6 p-0"
              >
                <Download className="h-3 w-3" />
              </Button>
              <Button
                size="sm"
                variant="ghost"
                onClick={() => duplicateCollection(collection.id)}
                className="h-6 w-6 p-0"
              >
                <Copy className="h-3 w-3" />
              </Button>
              <Button
                size="sm"
                variant="ghost"
                onClick={() => deleteCollection(collection.id, collection.name)}
                className="h-6 w-6 p-0"
              >
                <Trash2 className="h-3 w-3" />
              </Button>
            </div>
          </div>
        </CardHeader>

<AnimatePresence>
          {isExpanded && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
            >
              <CardContent className="pt-0">
                <div className="space-y-1">
                  {collection.folders.map((folder) => renderFolder(folder, collection))}
                  {rootRequests.map((request) => renderRequest(request, collection.id))}
                </div>
              </CardContent>
            </motion.div>
          )}
        </AnimatePresence>
      </Card>
    )
  }

return (
    <div className={className}>
      <Tabs defaultValue="collections" className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="collections">Collections</TabsTrigger>
          <TabsTrigger value="environments">Environments</TabsTrigger>
        </TabsList>

<TabsContent value="collections" className="space-y-4">
          <Card>
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-sm">Request Collections</CardTitle>
                <div className="flex gap-1">
                  <Button size="sm" variant="outline" onClick={() => document.getElementById("import-file")?.click()}>
                    <Upload className="h-3 w-3 mr-1" />
                    Import
                  </Button>
                  <input id="import-file" type="file" accept=".json" onChange={importCollection} className="hidden" />
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex gap-2">
                <div className="relative flex-1">
                  <Search className="absolute left-2 top-2.5 h-3 w-3 text-muted-foreground" />
                  <Input
                    placeholder="Search collections and requests..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-7 h-8"
                  />
                </div>
              </div>

<div className="flex gap-2">
                <Input
                  placeholder="New collection name"
                  value={newCollectionName}
                  onChange={(e) => setNewCollectionName(e.target.value)}
                  className="h-8"
                  onKeyDown={(e) => e.key === "Enter" && createCollection()}
                />
                <Button size="sm" onClick={createCollection} disabled={!newCollectionName.trim()}>
                  <Plus className="h-3 w-3 mr-1" />
                  Create
                </Button>
              </div>

<ScrollArea className="h-96">
                <div className="space-y-2">
                  {filteredCollections.length > 0 ? (
                    filteredCollections.map(renderCollection)
                  ) : (
                    <div className="text-center py-8 text-muted-foreground">
                      <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
                      <p className="text-sm">No collections found</p>
                      <p className="text-xs">Create a collection to organize your API requests</p>
                    </div>
                  )}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="environments" className="space-y-4">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <Settings className="h-4 w-4" />
                Environment Management
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {activeEnvironment && (
                <div className="p-3 bg-green-50 border border-green-200 rounded-lg dark:bg-green-950 dark:border-green-800">
                  <div className="flex items-center gap-2">
                    <Badge variant="default" className="bg-green-600">
                      Active
                    </Badge>
                    <span className="font-medium text-sm">{activeEnvironment.name}</span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">
                    {activeEnvironment.variables.filter((v) => v.enabled).length} variables enabled
                  </p>
                </div>
              )}

<div className="flex gap-2">
                <Input
                  placeholder="New environment name"
                  value={newEnvironmentName}
                  onChange={(e) => setNewEnvironmentName(e.target.value)}
                  className="h-8"
                  onKeyDown={(e) => e.key === "Enter" && createEnvironment()}
                />
                <Button size="sm" onClick={createEnvironment} disabled={!newEnvironmentName.trim()}>
                  <Plus className="h-3 w-3 mr-1" />
                  Create
                </Button>
              </div>

<ScrollArea className="h-64">
                <div className="space-y-2">
                  {environments.map((environment) => (
                    <motion.div
                      key={environment.id}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className="flex items-center justify-between p-3 border rounded-lg"
                    >
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-sm">{environment.name}</span>
                          {environment.isActive && (
                            <Badge variant="default" className="text-xs">
                              Active
                            </Badge>
                          )}
                        </div>
                        <p className="text-xs text-muted-foreground">{environment.variables.length} variables</p>
                      </div>
                      <div className="flex gap-1">
                        {!environment.isActive && (
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => setActiveEnv(environment.id)}
                            className="h-7 px-2"
                          >
                            Activate
                          </Button>
                        )}
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => {
                            if (confirm(`Delete environment "${environment.name}"?`)) {
                              CollectionManager.deleteEnvironment(environment.id)
                              setEnvironments(CollectionManager.getEnvironments())
                            }
                          }}
                          className="h-7 px-2"
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="lib/testing.ts" isMerged="true"
export interface TestResult {
  id: string
  name: string
  passed: boolean
  message: string
  duration: number
  timestamp: number
}

export interface TestSuite {
  id: string
  name: string
  tests: TestScript[]
  results: TestResult[]
  totalTests: number
  passedTests: number
  failedTests: number
  duration: number
  timestamp: number
}

export interface TestScript {
  id: string
  name: string
  script: string
  enabled: boolean
}

export interface ResponseAnalysis {
  size: {
    total: number
    headers: number
    body: number
  }
  performance: {
    responseTime: number
    rating: "excellent" | "good" | "fair" | "poor"
    suggestions: string[]
  }
  format: {
    type: "json" | "xml" | "html" | "text" | "binary"
    isValid: boolean
    errors: string[]
  }
  security: {
    headers: SecurityHeader[]
    issues: string[]
    score: number
  }
}

export interface SecurityHeader {
  name: string
  value?: string
  present: boolean
  recommended: boolean
  description: string
}

export class ResponseTester {
  private response: any
  private headers: Record<string, string>
  private status: number
  private responseTime: number

constructor(response: any, headers: Record<string, string>, status: number, responseTime: number) {
    this.response = response
    this.headers = headers
    this.status = status
    this.responseTime = responseTime
  }

// Test execution environment
  static createTestEnvironment(response: any, headers: Record<string, string>, status: number, responseTime: number) {
    const tester = new ResponseTester(response, headers, status, responseTime)

return {
      // Response data
      response: response,
      responseHeaders: headers,
      responseTime: responseTime,
      status: status,

// Test utilities
      expect: (actual: any) => ({
        toBe: (expected: any) => actual === expected,
        toEqual: (expected: any) => JSON.stringify(actual) === JSON.stringify(expected),
        toContain: (expected: any) => {
          if (typeof actual === "string") return actual.includes(expected)
          if (Array.isArray(actual)) return actual.includes(expected)
          return false
        },
        toBeGreaterThan: (expected: number) => actual > expected,
        toBeLessThan: (expected: number) => actual < expected,
        toBeNull: () => actual === null,
        toBeUndefined: () => actual === undefined,
        toBeTruthy: () => !!actual,
        toBeFalsy: () => !actual,
        toMatch: (pattern: RegExp) => pattern.test(actual),
        toHaveProperty: (property: string) => actual && actual.hasOwnProperty(property),
      }),

// JSON path utilities
      jsonPath: (path: string) => tester.getJsonPath(path),

// Header utilities
      hasHeader: (name: string) => headers.hasOwnProperty(name.toLowerCase()),
      getHeader: (name: string) => headers[name.toLowerCase()],

// Status utilities
      isSuccess: () => status >= 200 && status < 300,
      isRedirect: () => status >= 300 && status < 400,
      isClientError: () => status >= 400 && status < 500,
      isServerError: () => status >= 500,

// Performance utilities
      isFast: () => responseTime < 200,
      isAcceptable: () => responseTime < 1000,
      isSlow: () => responseTime > 2000,

// Validation utilities
      isValidJson: () => {
        try {
          JSON.parse(typeof response === "string" ? response : JSON.stringify(response))
          return true
        } catch {
          return false
        }
      },

// Custom assertions
      assert: (condition: boolean, message: string) => {
        if (!condition) throw new Error(message)
      },
    }
  }

private getJsonPath(path: string): any {
    try {
      const parts = path.split(".")
      let current = this.response

for (const part of parts) {
        if (part.includes("[") && part.includes("]")) {
          const [key, indexStr] = part.split("[")
          const index = Number.parseInt(indexStr.replace("]", ""))
          current = current[key][index]
        } else {
          current = current[part]
        }
      }

return current
    } catch {
      return undefined
    }
  }

static async runTests(
    tests: TestScript[],
    response: any,
    headers: Record<string, string>,
    status: number,
    responseTime: number,
  ): Promise<TestResult[]> {
    const results: TestResult[] = []
    const testEnv = this.createTestEnvironment(response, headers, status, responseTime)

for (const test of tests.filter((t) => t.enabled)) {
      const startTime = Date.now()

try {
        // Create a safe execution environment
        const testFunction = new Function(
          "response",
          "responseHeaders",
          "status",
          "responseTime",
          "expect",
          "jsonPath",
          "hasHeader",
          "getHeader",
          "isSuccess",
          "isRedirect",
          "isClientError",
          "isServerError",
          "isFast",
          "isAcceptable",
          "isSlow",
          "isValidJson",
          "assert",
          test.script,
        )

testFunction(
          testEnv.response,
          testEnv.responseHeaders,
          testEnv.status,
          testEnv.responseTime,
          testEnv.expect,
          testEnv.jsonPath,
          testEnv.hasHeader,
          testEnv.getHeader,
          testEnv.isSuccess,
          testEnv.isRedirect,
          testEnv.isClientError,
          testEnv.isServerError,
          testEnv.isFast,
          testEnv.isAcceptable,
          testEnv.isSlow,
          testEnv.isValidJson,
          testEnv.assert,
        )

results.push({
          id: test.id,
          name: test.name,
          passed: true,
          message: "Test passed",
          duration: Date.now() - startTime,
          timestamp: Date.now(),
        })
      } catch (error) {
        results.push({
          id: test.id,
          name: test.name,
          passed: false,
          message: error instanceof Error ? error.message : "Test failed",
          duration: Date.now() - startTime,
          timestamp: Date.now(),
        })
      }
    }

return results
  }

static analyzeResponse(
    response: any,
    headers: Record<string, string>,
    status: number,
    responseTime: number,
    responseText: string,
  ): ResponseAnalysis {
    const headerSize = Object.entries(headers).reduce((size, [key, value]) => size + key.length + value.length + 4, 0)
    const bodySize = new Blob([responseText]).size
    const totalSize = headerSize + bodySize

// Performance analysis
    let performanceRating: "excellent" | "good" | "fair" | "poor"
    const suggestions: string[] = []

if (responseTime < 100) {
      performanceRating = "excellent"
    } else if (responseTime < 300) {
      performanceRating = "good"
    } else if (responseTime < 1000) {
      performanceRating = "fair"
      suggestions.push("Consider optimizing server response time")
    } else {
      performanceRating = "poor"
      suggestions.push("Response time is too slow, investigate server performance")
    }

if (totalSize > 1024 * 1024) {
      suggestions.push("Response size is large, consider pagination or compression")
    }

// Format analysis
    let format: ResponseAnalysis["format"]
    try {
      JSON.parse(responseText)
      format = { type: "json", isValid: true, errors: [] }
    } catch (jsonError) {
      if (responseText.trim().startsWith("<")) {
        format = { type: "xml", isValid: true, errors: [] }
      } else if (responseText.includes("<!DOCTYPE html>") || responseText.includes("<html")) {
        format = { type: "html", isValid: true, errors: [] }
      } else {
        format = { type: "text", isValid: true, errors: [] }
      }
    }

// Security analysis
    const securityHeaders: SecurityHeader[] = [
      {
        name: "Content-Security-Policy",
        value: headers["content-security-policy"],
        present: !!headers["content-security-policy"],
        recommended: true,
        description: "Helps prevent XSS attacks",
      },
      {
        name: "X-Frame-Options",
        value: headers["x-frame-options"],
        present: !!headers["x-frame-options"],
        recommended: true,
        description: "Prevents clickjacking attacks",
      },
      {
        name: "X-Content-Type-Options",
        value: headers["x-content-type-options"],
        present: !!headers["x-content-type-options"],
        recommended: true,
        description: "Prevents MIME type sniffing",
      },
      {
        name: "Strict-Transport-Security",
        value: headers["strict-transport-security"],
        present: !!headers["strict-transport-security"],
        recommended: true,
        description: "Enforces HTTPS connections",
      },
    ]

const securityIssues: string[] = []
    let securityScore = 100

securityHeaders.forEach((header) => {
      if (header.recommended && !header.present) {
        securityIssues.push(`Missing ${header.name} header`)
        securityScore -= 20
      }
    })

return {
      size: {
        total: totalSize,
        headers: headerSize,
        body: bodySize,
      },
      performance: {
        responseTime,
        rating: performanceRating,
        suggestions,
      },
      format,
      security: {
        headers: securityHeaders,
        issues: securityIssues,
        score: Math.max(0, securityScore),
      },
    }
  }

static getDefaultTests(): TestScript[] {
    return [
      {
        id: "status-success",
        name: "Status is successful",
        script: `assert(isSuccess(), "Expected successful status code, got " + status)`,
        enabled: true,
      },
      {
        id: "response-time",
        name: "Response time is acceptable",
        script: `assert(isAcceptable(), "Response time too slow: " + responseTime + "ms")`,
        enabled: true,
      },
      {
        id: "valid-json",
        name: "Response is valid JSON",
        script: `assert(isValidJson(), "Response is not valid JSON")`,
        enabled: false,
      },
      {
        id: "has-content-type",
        name: "Has Content-Type header",
        script: `assert(hasHeader("content-type"), "Missing Content-Type header")`,
        enabled: true,
      },
    ]
  }
}
[V0_FILE]typescriptreact:file="components/ResponseVisualization.tsx" isMerged="true"
"use client"

import { useState, useCallback, useMemo } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Progress } from "@/components/ui/progress"
import {
  Eye,
  Code,
  BarChart3,
  Shield,
  Clock,
  FileText,
  CheckCircle,
  XCircle,
  AlertTriangle,
  Copy,
  Download,
} from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { ResponseTester, type TestResult } from "@/lib/testing"
import type { ApiResponse } from "@/lib/api"

interface ResponseVisualizationProps {
  response: ApiResponse | null
  className?: string
}

export function ResponseVisualization({ response, className }: ResponseVisualizationProps) {
  const [activeTab, setActiveTab] = useState("formatted")
  const [testResults, setTestResults] = useState<TestResult[]>([])
  const [isRunningTests, setIsRunningTests] = useState(false)

const { toast } = useToast()

const analysis = useMemo(() => {
    if (!response || !response.success) return null

return ResponseTester.analyzeResponse(
      response.data,
      response.headers || {},
      response.status || 0,
      response.responseTime || 0,
      typeof response.data === "string" ? response.data : JSON.stringify(response.data),
    )
  }, [response])

const runTests = useCallback(async () => {
    if (!response || !response.success) return

setIsRunningTests(true)

try {
      const defaultTests = ResponseTester.getDefaultTests()
      const results = await ResponseTester.runTests(
        defaultTests,
        response.data,
        response.headers || {},
        response.status || 0,
        response.responseTime || 0,
      )

setTestResults(results)

const passed = results.filter((r) => r.passed).length
      const total = results.length

toast({
        title: "Tests completed",
        description: `${passed}/${total} tests passed`,
        variant: passed === total ? "default" : "destructive",
      })
    } catch (error) {
      toast({
        title: "Test execution failed",
        description: error instanceof Error ? error.message : "Unknown error",
        variant: "destructive",
      })
    } finally {
      setIsRunningTests(false)
    }
  }, [response, toast])

const copyResponse = useCallback(async () => {
    if (!response?.data) return

try {
      const text = typeof response.data === "string" ? response.data : JSON.stringify(response.data, null, 2)
      await navigator.clipboard.writeText(text)

const downloadResponse = useCallback(() => {
    if (!response?.data) return

try {
      const text = typeof response.data === "string" ? response.data : JSON.stringify(response.data, null, 2)
      const blob = new Blob([text], { type: "application/json" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `response_${Date.now()}.json`
      a.click()
      URL.revokeObjectURL(url)

toast({
        title: "Downloaded",
        description: "Response saved to file",
      })
    } catch (error) {
      toast({
        title: "Download failed",
        description: "Unable to save response",
        variant: "destructive",
      })
    }
  }, [response, toast])

const formatResponseData = useCallback(() => {
    if (!response?.data) return ""

if (typeof response.data === "string") {
      try {
        const parsed = JSON.parse(response.data)
        return JSON.stringify(parsed, null, 2)
      } catch {
        return response.data
      }
    }

return JSON.stringify(response.data, null, 2)
  }, [response])

const getPerformanceColor = (rating: string) => {
    switch (rating) {
      case "excellent":
        return "text-green-600 dark:text-green-400"
      case "good":
        return "text-blue-600 dark:text-blue-400"
      case "fair":
        return "text-yellow-600 dark:text-yellow-400"
      case "poor":
        return "text-red-600 dark:text-red-400"
      default:
        return "text-muted-foreground"
    }
  }

if (!response) {
    return (
      <div className={className}>
        <Card>
          <CardContent className="flex items-center justify-center h-64 text-muted-foreground">
            <div className="text-center">
              <Eye className="h-8 w-8 mx-auto mb-2 opacity-50" />
              <p className="text-sm">No response to visualize</p>
              <p className="text-xs">Make a request to see response analysis</p>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className={className}>
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <CardTitle className="text-sm flex items-center gap-2">
              <Eye className="h-4 w-4" />
              Response Analysis
            </CardTitle>
            <div className="flex items-center gap-2">
              <Badge variant={response.success ? "default" : "destructive"}>
                {response.success ? <CheckCircle className="h-3 w-3 mr-1" /> : <XCircle className="h-3 w-3 mr-1" />}
                {response.status || "Error"}
              </Badge>
              <Badge variant="outline" className="text-xs">
                <Clock className="h-3 w-3 mr-1" />
                {response.responseTime}ms
              </Badge>
              <Button size="sm" variant="outline" onClick={copyResponse}>
                <Copy className="h-3 w-3 mr-1" />
                Copy
              </Button>
              <Button size="sm" variant="outline" onClick={downloadResponse}>
                <Download className="h-3 w-3 mr-1" />
                Save
              </Button>
            </div>
          </div>
        </CardHeader>

<CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-5">
              <TabsTrigger value="formatted">
                <Code className="h-3 w-3 mr-1" />
                Formatted
              </TabsTrigger>
              <TabsTrigger value="raw">
                <FileText className="h-3 w-3 mr-1" />
                Raw
              </TabsTrigger>
              <TabsTrigger value="headers">Headers</TabsTrigger>
              <TabsTrigger value="analysis">
                <BarChart3 className="h-3 w-3 mr-1" />
                Analysis
              </TabsTrigger>
              <TabsTrigger value="tests">
                <CheckCircle className="h-3 w-3 mr-1" />
                Tests
              </TabsTrigger>
            </TabsList>

<TabsContent value="formatted" className="mt-4">
              <ScrollArea className="h-96">
                <pre className="text-xs bg-muted p-4 rounded-lg overflow-x-auto font-mono">{formatResponseData()}</pre>
              </ScrollArea>
            </TabsContent>

<TabsContent value="raw" className="mt-4">
              <ScrollArea className="h-96">
                <pre className="text-xs bg-muted p-4 rounded-lg overflow-x-auto font-mono whitespace-pre-wrap">
                  {typeof response.data === "string" ? response.data : JSON.stringify(response.data)}
                </pre>
              </ScrollArea>
            </TabsContent>

<TabsContent value="headers" className="mt-4">
              <ScrollArea className="h-96">
                <div className="space-y-2">
                  {response.headers && Object.keys(response.headers).length > 0 ? (
                    Object.entries(response.headers).map(([key, value]) => (
                      <div key={key} className="flex items-start gap-2 p-2 bg-muted rounded">
                        <span className="font-mono text-xs font-medium text-muted-foreground min-w-0 flex-shrink-0">
                          {key}:
                        </span>
                        <span className="font-mono text-xs break-all">{value}</span>
                      </div>
                    ))
                  ) : (
                    <div className="text-center py-8 text-muted-foreground">
                      <p className="text-sm">No response headers</p>
                    </div>
                  )}
                </div>
              </ScrollArea>
            </TabsContent>

<TabsContent value="analysis" className="mt-4">
              {analysis ? (
                <div className="space-y-4">
                  {/* Performance Analysis */}
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm flex items-center gap-2">
                        <Clock className="h-4 w-4" />
                        Performance
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Response Time</span>
                        <Badge variant="outline" className={getPerformanceColor(analysis.performance.rating)}>
                          {analysis.performance.responseTime}ms ({analysis.performance.rating})
                        </Badge>
                      </div>

<div className="flex items-center justify-between">
                        <span className="text-sm">Response Size</span>
                        <span className="text-sm font-mono">{(analysis.size.total / 1024).toFixed(1)} KB</span>
                      </div>

{analysis.performance.suggestions.length > 0 && (
                        <div className="space-y-1">
                          <span className="text-sm font-medium">Suggestions:</span>
                          {analysis.performance.suggestions.map((suggestion, index) => (
                            <div key={index} className="flex items-start gap-2 text-xs text-muted-foreground">
                              <AlertTriangle className="h-3 w-3 mt-0.5 flex-shrink-0" />
                              {suggestion}
                            </div>
                          ))}
                        </div>
                      )}
                    </CardContent>
                  </Card>

{/* Security Analysis */}
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm flex items-center gap-2">
                        <Shield className="h-4 w-4" />
                        Security Analysis
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Security Score</span>
                        <div className="flex items-center gap-2">
                          <Progress value={analysis.security.score} className="w-20 h-2" />
                          <span className="text-sm font-mono">{analysis.security.score}/100</span>
                        </div>
                      </div>

<div className="space-y-2">
                        {analysis.security.headers.map((header) => (
                          <div key={header.name} className="flex items-center justify-between text-xs">
                            <span className="font-mono">{header.name}</span>
                            <Badge variant={header.present ? "default" : "secondary"}>
                              {header.present ? "Present" : "Missing"}
                            </Badge>
                          </div>
                        ))}
                      </div>

{analysis.security.issues.length > 0 && (
                        <div className="space-y-1">
                          <span className="text-sm font-medium">Issues:</span>
                          {analysis.security.issues.map((issue, index) => (
                            <div key={index} className="flex items-start gap-2 text-xs text-red-600 dark:text-red-400">
                              <XCircle className="h-3 w-3 mt-0.5 flex-shrink-0" />
                              {issue}
                            </div>
                          ))}
                        </div>
                      )}
                    </CardContent>
                  </Card>

{/* Format Analysis */}
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-sm">Format Analysis</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Content Type</span>
                        <Badge variant="outline">{analysis.format.type.toUpperCase()}</Badge>
                      </div>
                      <div className="flex items-center justify-between mt-2">
                        <span className="text-sm">Valid Format</span>
                        <Badge variant={analysis.format.isValid ? "default" : "destructive"}>
                          {analysis.format.isValid ? "Valid" : "Invalid"}
                        </Badge>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              ) : (
                <div className="text-center py-8 text-muted-foreground">
                  <BarChart3 className="h-8 w-8 mx-auto mb-2 opacity-50" />
                  <p className="text-sm">No analysis available</p>
                </div>
              )}
            </TabsContent>

<TabsContent value="tests" className="mt-4">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium">Response Tests</span>
                    {testResults.length > 0 && (
                      <Badge variant="outline">
                        {testResults.filter((r) => r.passed).length}/{testResults.length} passed
                      </Badge>
                    )}
                  </div>
                  <Button size="sm" onClick={runTests} disabled={isRunningTests || !response.success}>
                    {isRunningTests ? "Running..." : "Run Tests"}
                  </Button>
                </div>

<ScrollArea className="h-64">
                  {testResults.length > 0 ? (
                    <div className="space-y-2">
                      {testResults.map((result) => (
                        <motion.div
                          key={result.id}
                          initial={{ opacity: 0, y: 10 }}
                          animate={{ opacity: 1, y: 0 }}
                          className={`p-3 rounded-lg border ${
                            result.passed
                              ? "bg-green-50 border-green-200 dark:bg-green-950 dark:border-green-800"
                              : "bg-red-50 border-red-200 dark:bg-red-950 dark:border-red-800"
                          }`}
                        >
                          <div className="flex items-center justify-between mb-1">
                            <div className="flex items-center gap-2">
                              {result.passed ? (
                                <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
                              ) : (
                                <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
                              )}
                              <span className="font-medium text-sm">{result.name}</span>
                            </div>
                            <Badge variant="outline" className="text-xs">
                              {result.duration}ms
                            </Badge>
                          </div>
                          <p className="text-xs text-muted-foreground">{result.message}</p>
                        </motion.div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-8 text-muted-foreground">
                      <CheckCircle className="h-8 w-8 mx-auto mb-2 opacity-50" />
                      <p className="text-sm">No test results yet</p>
                      <p className="text-xs">Run tests to validate the response</p>
                    </div>
                  )}
                </ScrollArea>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/codegen.ts" isMerged="true"
import type { ApiRequest } from "./api"
import type { RequestCollection } from "./collections"

export interface CodeGenOptions {
  language: string
  framework?: string
  includeComments: boolean
  useEnvironmentVariables: boolean
  indentSize: number
  indentType: "spaces" | "tabs"
}

export interface GeneratedCode {
  code: string
  language: string
  framework?: string
  filename: string
  dependencies?: string[]
}

export class CodeGenerator {
  private static indent(level: number, options: CodeGenOptions): string {
    const char = options.indentType === "tabs" ? "\t" : " ".repeat(options.indentSize)
    return char.repeat(level)
  }

private static formatHeaders(headers: Record<string, string>, options: CodeGenOptions, level = 1): string {
    const entries = Object.entries(headers).filter(([_, value]) => value)
    if (entries.length === 0) return "{}"

const indent = this.indent(level, options)
    const baseIndent = this.indent(level - 1, options)

return "{\n" + entries.map(([key, value]) => `${indent}"${key}": "${value}"`).join(",\n") + `\n${baseIndent}}`
  }

private static escapeString(str: string): string {
    return str.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n").replace(/\r/g, "\\r")
  }

static generateJavaScriptFetch(request: ApiRequest, options: CodeGenOptions): GeneratedCode {
    const { url, method, headers, body } = request
    const indent = this.indent(1, options)
    const hasBody = method !== "GET" && body

let code = ""

if (options.includeComments) {
      code += `// Generated API request using fetch\n`
      code += `// Method: ${method}\n`
      code += `// URL: ${url}\n\n`
    }

code += `const response = await fetch("${url}", {\n`
    code += `${indent}method: "${method}",\n`

if (Object.keys(headers).length > 0) {
      code += `${indent}headers: ${this.formatHeaders(headers, options, 2)},\n`
    }

if (hasBody) {
      code += `${indent}body: ${method === "POST" && headers["Content-Type"]?.includes("json") ? "JSON.stringify(" : '"'}${this.escapeString(body || "")}${method === "POST" && headers["Content-Type"]?.includes("json") ? ")" : '"'}\n`
    }

code += `});\n\n`

if (options.includeComments) {
      code += `// Handle the response\n`
    }

code += `if (response.ok) {\n`
    code += `${indent}const data = await response.json();\n`
    code += `${indent}console.log(data);\n`
    code += `} else {\n`
    code += `${indent}console.error('Request failed:', response.status, response.statusText);\n`
    code += `}`

return {
      code,
      language: "javascript",
      filename: "api-request.js",
      dependencies: [],
    }
  }

static generateNodeJS(request: ApiRequest, options: CodeGenOptions): GeneratedCode {
    const { url, method, headers, body } = request
    const indent = this.indent(1, options)
    const hasBody = method !== "GET" && body

let code = ""

if (options.includeComments) {
      code += `// Generated Node.js API request using fetch\n`
      code += `// Install: npm install node-fetch (if Node.js < 18)\n\n`
    }

code += `const fetch = require('node-fetch'); // Remove if Node.js >= 18\n\n`

code += `async function makeRequest() {\n`
    code += `${indent}try {\n`
    code += `${this.indent(2, options)}const response = await fetch("${url}", {\n`
    code += `${this.indent(3, options)}method: "${method}",\n`

if (Object.keys(headers).length > 0) {
      code += `${this.indent(3, options)}headers: ${this.formatHeaders(headers, options, 4)},\n`
    }

if (hasBody) {
      code += `${this.indent(3, options)}body: ${method === "POST" && headers["Content-Type"]?.includes("json") ? "JSON.stringify(" : '"'}${this.escapeString(body || "")}${method === "POST" && headers["Content-Type"]?.includes("json") ? ")" : '"'}\n`
    }

code += `${this.indent(2, options)}});\n\n`
    code += `${this.indent(2, options)}if (response.ok) {\n`
    code += `${this.indent(3, options)}const data = await response.json();\n`
    code += `${this.indent(3, options)}console.log(data);\n`
    code += `${this.indent(3, options)}return data;\n`
    code += `${this.indent(2, options)}} else {\n`
    code += `${this.indent(3, options)}throw new Error(\`Request failed: \${response.status} \${response.statusText}\`);\n`
    code += `${this.indent(2, options)}}\n`
    code += `${indent}} catch (error) {\n`
    code += `${this.indent(2, options)}console.error('Error:', error.message);\n`
    code += `${this.indent(2, options)}throw error;\n`
    code += `${indent}}\n`
    code += `}\n\n`
    code += `makeRequest();`

return {
      code,
      language: "javascript",
      framework: "nodejs",
      filename: "api-request.js",
      dependencies: ["node-fetch"],
    }
  }

static generatePython(request: ApiRequest, options: CodeGenOptions): GeneratedCode {
    const { url, method, headers, body } = request
    const indent = this.indent(1, options)
    const hasBody = method !== "GET" && body

let code = ""

if (options.includeComments) {
      code += `# Generated Python API request using requests\n`
      code += `# Install: pip install requests\n\n`
    }

code += `import requests\nimport json\n\n`

code += `def make_request():\n`
    code += `${indent}url = "${url}"\n`

if (Object.keys(headers).length > 0) {
      code += `${indent}headers = {\n`
      Object.entries(headers)
        .filter(([_, value]) => value)
        .forEach(([key, value]) => {
          code += `${this.indent(2, options)}"${key}": "${value}",\n`
        })
      code += `${indent}}\n`
    }

if (hasBody) {
      if (headers["Content-Type"]?.includes("json")) {
        code += `${indent}data = ${JSON.stringify(JSON.parse(body || "{}"), null, options.indentSize)}\n`
      } else {
        code += `${indent}data = "${this.escapeString(body || "")}"\n`
      }
    }

code += `\n${indent}try:\n`
    code += `${this.indent(2, options)}response = requests.${method.toLowerCase()}(\n`
    code += `${this.indent(3, options)}url,\n`

if (Object.keys(headers).length > 0) {
      code += `${this.indent(3, options)}headers=headers,\n`
    }

if (hasBody) {
      if (headers["Content-Type"]?.includes("json")) {
        code += `${this.indent(3, options)}json=data\n`
      } else {
        code += `${this.indent(3, options)}data=data\n`
      }
    }

code += `${this.indent(2, options)})\n\n`
    code += `${this.indent(2, options)}response.raise_for_status()\n`
    code += `${this.indent(2, options)}return response.json()\n\n`
    code += `${indent}except requests.exceptions.RequestException as e:\n`
    code += `${this.indent(2, options)}print(f"Request failed: {e}")\n`
    code += `${this.indent(2, options)}raise\n\n`

if (options.includeComments) {
      code += `# Execute the request\n`
    }

code += `if __name__ == "__main__":\n`
    code += `${indent}result = make_request()\n`
    code += `${indent}print(json.dumps(result, indent=2))`

return {
      code,
      language: "python",
      filename: "api_request.py",
      dependencies: ["requests"],
    }
  }

static generateCurl(request: ApiRequest, options: CodeGenOptions): GeneratedCode {
    const { url, method, headers, body } = request
    const hasBody = method !== "GET" && body

let code = ""

if (options.includeComments) {
      code += `# Generated cURL command\n`
      code += `# Copy and paste into terminal\n\n`
    }

code += `curl -X ${method} \\\n`
    code += `  "${url}"`

Object.entries(headers)
      .filter(([_, value]) => value)
      .forEach(([key, value]) => {
        code += ` \\\n  -H "${key}: ${value}"`
      })

if (hasBody) {
      code += ` \\\n  -d '${body}'`
    }

return {
      code,
      language: "bash",
      filename: "api-request.sh",
      dependencies: [],
    }
  }

static generatePHP(request: ApiRequest, options: CodeGenOptions): GeneratedCode {
    const { url, method, headers, body } = request
    const indent = this.indent(1, options)
    const hasBody = method !== "GET" && body

let code = ""

if (options.includeComments) {
      code += `<?php\n// Generated PHP API request using cURL\n\n`
    } else {
      code += `<?php\n\n`
    }

code += `function makeRequest() {\n`
    code += `${indent}$url = "${url}";\n`
    code += `${indent}$ch = curl_init();\n\n`

code += `${indent}curl_setopt_array($ch, [\n`
    code += `${this.indent(2, options)}CURLOPT_URL => $url,\n`
    code += `${this.indent(2, options)}CURLOPT_RETURNTRANSFER => true,\n`
    code += `${this.indent(2, options)}CURLOPT_CUSTOMREQUEST => "${method}",\n`

if (Object.keys(headers).length > 0) {
      code += `${this.indent(2, options)}CURLOPT_HTTPHEADER => [\n`
      Object.entries(headers)
        .filter(([_, value]) => value)
        .forEach(([key, value]) => {
          code += `${this.indent(3, options)}"${key}: ${value}",\n`
        })
      code += `${this.indent(2, options)}],\n`
    }

if (hasBody) {
      code += `${this.indent(2, options)}CURLOPT_POSTFIELDS => '${this.escapeString(body || "")}',\n`
    }

code += `${indent}]);\n\n`

code += `${indent}$response = curl_exec($ch);\n`
    code += `${indent}$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n`
    code += `${indent}$error = curl_error($ch);\n`
    code += `${indent}curl_close($ch);\n\n`

code += `${indent}if ($error) {\n`
    code += `${this.indent(2, options)}throw new Exception("cURL Error: " . $error);\n`
    code += `${indent}}\n\n`

code += `${indent}if ($httpCode >= 400) {\n`
    code += `${this.indent(2, options)}throw new Exception("HTTP Error: " . $httpCode);\n`
    code += `${indent}}\n\n`

code += `${indent}return json_decode($response, true);\n`
    code += `}\n\n`

if (options.includeComments) {
      code += `// Execute the request\n`
    }

code += `try {\n`
    code += `${indent}$result = makeRequest();\n`
    code += `${indent}echo json_encode($result, JSON_PRETTY_PRINT);\n`
    code += `} catch (Exception $e) {\n`
    code += `${indent}echo "Error: " . $e->getMessage();\n`
    code += `}`

return {
      code,
      language: "php",
      filename: "api_request.php",
      dependencies: [],
    }
  }

static generateGo(request: ApiRequest, options: CodeGenOptions): GeneratedCode {
    const { url, method, headers, body } = request
    const indent = this.indent(1, options)
    const hasBody = method !== "GET" && body

let code = ""

if (options.includeComments) {
      code += `// Generated Go API request\n`
      code += `// go mod init api-request && go run main.go\n\n`
    }

code += `package main\n\n`
    code += `import (\n`
    code += `${indent}"bytes"\n`
    code += `${indent}"encoding/json"\n`
    code += `${indent}"fmt"\n`
    code += `${indent}"io"\n`
    code += `${indent}"net/http"\n`
    code += `)\n\n`

code += `func makeRequest() error {\n`
    code += `${indent}url := "${url}"\n`

if (hasBody) {
      code += `${indent}payload := []byte(\`${body}\`)\n`
      code += `${indent}req, err := http.NewRequest("${method}", url, bytes.NewBuffer(payload))\n`
    } else {
      code += `${indent}req, err := http.NewRequest("${method}", url, nil)\n`
    }

code += `${indent}if err != nil {\n`
    code += `${this.indent(2, options)}return fmt.Errorf("error creating request: %w", err)\n`
    code += `${indent}}\n\n`

if (Object.keys(headers).length > 0) {
      Object.entries(headers)
        .filter(([_, value]) => value)
        .forEach(([key, value]) => {
          code += `${indent}req.Header.Set("${key}", "${value}")\n`
        })
      code += `\n`
    }

code += `${indent}client := &http.Client{}\n`
    code += `${indent}resp, err := client.Do(req)\n`
    code += `${indent}if err != nil {\n`
    code += `${this.indent(2, options)}return fmt.Errorf("error making request: %w", err)\n`
    code += `${indent}}\n`
    code += `${indent}defer resp.Body.Close()\n\n`

code += `${indent}body, err := io.ReadAll(resp.Body)\n`
    code += `${indent}if err != nil {\n`
    code += `${this.indent(2, options)}return fmt.Errorf("error reading response: %w", err)\n`
    code += `${indent}}\n\n`

code += `${indent}if resp.StatusCode >= 400 {\n`
    code += `${this.indent(2, options)}return fmt.Errorf("HTTP error %d: %s", resp.StatusCode, string(body))\n`
    code += `${indent}}\n\n`

code += `${indent}var result interface{}\n`
    code += `${indent}if err := json.Unmarshal(body, &result); err != nil {\n`
    code += `${this.indent(2, options)}fmt.Println("Raw response:", string(body))\n`
    code += `${indent}} else {\n`
    code += `${this.indent(2, options)}prettyJSON, _ := json.MarshalIndent(result, "", "  ")\n`
    code += `${this.indent(2, options)}fmt.Println(string(prettyJSON))\n`
    code += `${indent}}\n\n`

code += `${indent}return nil\n`
    code += `}\n\n`

code += `func main() {\n`
    code += `${indent}if err := makeRequest(); err != nil {\n`
    code += `${this.indent(2, options)}fmt.Printf("Error: %v\\n", err)\n`
    code += `${indent}}\n`
    code += `}`

return {
      code,
      language: "go",
      filename: "main.go",
      dependencies: [],
    }
  }

static generateCode(request: ApiRequest, options: CodeGenOptions): GeneratedCode {
    switch (options.language) {
      case "javascript":
        return options.framework === "nodejs"
          ? this.generateNodeJS(request, options)
          : this.generateJavaScriptFetch(request, options)
      case "python":
        return this.generatePython(request, options)
      case "curl":
        return this.generateCurl(request, options)
      case "php":
        return this.generatePHP(request, options)
      case "go":
        return this.generateGo(request, options)
      default:
        throw new Error(`Unsupported language: ${options.language}`)
    }
  }

static getSupportedLanguages(): Array<{ value: string; label: string; frameworks?: string[] }> {
    return [
      {
        value: "javascript",
        label: "JavaScript",
        frameworks: ["browser", "nodejs"],
      },
      {
        value: "python",
        label: "Python",
      },
      {
        value: "curl",
        label: "cURL",
      },
      {
        value: "php",
        label: "PHP",
      },
      {
        value: "go",
        label: "Go",
      },
    ]
  }

// Export functionality
  static exportToPostmanCollection(collection: RequestCollection): string {
    const postmanCollection = {
      info: {
        name: collection.name,
        description: collection.description || "",
        schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
      },
      item: collection.requests.map((request) => ({
        name: request.name,
        request: {
          method: request.method,
          header: Object.entries(request.headers).map(([key, value]) => ({
            key,
            value,
            type: "text",
          })),
          url: {
            raw: request.url,
            host: [new URL(request.url).hostname],
            path: new URL(request.url).pathname.split("/").filter(Boolean),
          },
          body: request.body
            ? {
                mode: "raw",
                raw: request.body,
                options: {
                  raw: {
                    language: "json",
                  },
                },
              }
            : undefined,
        },
        response: [],
      })),
      variable: collection.variables.map((variable) => ({
        key: variable.key,
        value: variable.value,
        type: "string",
      })),
    }

return JSON.stringify(postmanCollection, null, 2)
  }

static exportToOpenAPI(collection: RequestCollection): string {
    const openApiSpec = {
      openapi: "3.0.0",
      info: {
        title: collection.name,
        description: collection.description || "",
        version: "1.0.0",
      },
      servers: [
        {
          url: "https://api.example.com",
          description: "API Server",
        },
      ],
      paths: {} as Record<string, any>,
    }

collection.requests.forEach((request) => {
      try {
        const url = new URL(request.url)
        const path = url.pathname
        const method = request.method.toLowerCase()

if (!openApiSpec.paths[path]) {
          openApiSpec.paths[path] = {}
        }

openApiSpec.paths[path][method] = {
          summary: request.name,
          description: request.description || "",
          parameters: request.queryParams
            ?.filter((p) => p.enabled)
            .map((param) => ({
              name: param.key,
              in: "query",
              required: false,
              schema: {
                type: "string",
              },
              example: param.value,
            })),
          requestBody:
            request.body && method !== "get"
              ? {
                  content: {
                    "application/json": {
                      schema: {
                        type: "object",
                      },
                      example: request.body,
                    },
                  },
                }
              : undefined,
          responses: {
            "200": {
              description: "Successful response",
              content: {
                "application/json": {
                  schema: {
                    type: "object",
                  },
                },
              },
            },
          },
        }
      } catch (error) {
        console.warn(`Failed to process request ${request.name}:`, error)
      }
    })

return JSON.stringify(openApiSpec, null, 2)
  }
}
[V0_FILE]typescriptreact:file="components/CodeGeneration.tsx" isMerged="true"
"use client"

import { useState, useCallback, useMemo } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Code, Copy, Download, Settings, FileText, Zap } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { CodeGenerator, type CodeGenOptions } from "@/lib/codegen"
import type { ApiRequest } from "@/lib/api"
import type { RequestCollection } from "@/lib/collections"

interface CodeGenerationProps {
  request: ApiRequest | null
  collection?: RequestCollection | null
  className?: string
}

export function CodeGeneration({ request, collection, className }: CodeGenerationProps) {
  const [options, setOptions] = useState<CodeGenOptions>({
    language: "javascript",
    framework: "browser",
    includeComments: true,
    useEnvironmentVariables: false,
    indentSize: 2,
    indentType: "spaces",
  })

const [activeTab, setActiveTab] = useState("generate")

const { toast } = useToast()

const supportedLanguages = useMemo(() => CodeGenerator.getSupportedLanguages(), [])

const generatedCode = useMemo(() => {
    if (!request) return null

try {
      return CodeGenerator.generateCode(request, options)
    } catch (error) {
      console.error("Code generation failed:", error)
      return null
    }
  }, [request, options])

const updateOptions = useCallback((updates: Partial<CodeGenOptions>) => {
    setOptions((prev) => ({ ...prev, ...updates }))
  }, [])

const copyCode = useCallback(async () => {
    if (!generatedCode) return

try {
      await navigator.clipboard.writeText(generatedCode.code)
      toast({
        title: "Code copied",
        description: "Generated code copied to clipboard",
      })
    } catch (error) {
      toast({
        title: "Copy failed",
        description: "Unable to copy code to clipboard",
        variant: "destructive",
      })
    }
  }, [generatedCode, toast])

const downloadCode = useCallback(() => {
    if (!generatedCode) return

try {
      const blob = new Blob([generatedCode.code], { type: "text/plain" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = generatedCode.filename
      a.click()
      URL.revokeObjectURL(url)

toast({
        title: "Code downloaded",
        description: `Code saved as ${generatedCode.filename}`,
      })
    } catch (error) {
      toast({
        title: "Download failed",
        description: "Unable to download code file",
        variant: "destructive",
      })
    }
  }, [generatedCode, toast])

const exportCollection = useCallback(
    (format: "postman" | "openapi") => {
      if (!collection) return

try {
        let exportData: string
        let filename: string

if (format === "postman") {
          exportData = CodeGenerator.exportToPostmanCollection(collection)
          filename = `${collection.name.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.postman_collection.json`
        } else {
          exportData = CodeGenerator.exportToOpenAPI(collection)
          filename = `${collection.name.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.openapi.json`
        }

const blob = new Blob([exportData], { type: "application/json" })
        const url = URL.createObjectURL(blob)
        const a = document.createElement("a")
        a.href = url
        a.download = filename
        a.click()
        URL.revokeObjectURL(url)

toast({
          title: "Collection exported",
          description: `Collection exported as ${format.toUpperCase()}`,
        })
      } catch (error) {
        toast({
          title: "Export failed",
          description: `Unable to export collection as ${format.toUpperCase()}`,
          variant: "destructive",
        })
      }
    },
    [collection, toast],
  )

const selectedLanguage = supportedLanguages.find((lang) => lang.value === options.language)

return (
    <div className={className}>
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm flex items-center gap-2">
            <Code className="h-4 w-4" />
            Code Generation & Export
          </CardTitle>
        </CardHeader>

<CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="generate">
                <Zap className="h-3 w-3 mr-1" />
                Generate
              </TabsTrigger>
              <TabsTrigger value="settings">
                <Settings className="h-3 w-3 mr-1" />
                Settings
              </TabsTrigger>
              <TabsTrigger value="export">
                <FileText className="h-3 w-3 mr-1" />
                Export
              </TabsTrigger>
            </TabsList>

<TabsContent value="generate" className="mt-4 space-y-4">
              <div className="flex items-center gap-2">
                <Select value={options.language} onValueChange={(value) => updateOptions({ language: value })}>
                  <SelectTrigger className="w-32">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {supportedLanguages.map((lang) => (
                      <SelectItem key={lang.value} value={lang.value}>
                        {lang.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

{selectedLanguage?.frameworks && (
                  <Select value={options.framework} onValueChange={(value) => updateOptions({ framework: value })}>
                    <SelectTrigger className="w-32">
                      <SelectValue placeholder="Framework" />
                    </SelectTrigger>
                    <SelectContent>
                      {selectedLanguage.frameworks.map((framework) => (
                        <SelectItem key={framework} value={framework}>
                          {framework}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}

{generatedCode && (
                  <div className="flex gap-1">
                    <Button size="sm" variant="outline" onClick={copyCode}>
                      <Copy className="h-3 w-3 mr-1" />
                      Copy
                    </Button>
                    <Button size="sm" variant="outline" onClick={downloadCode}>
                      <Download className="h-3 w-3 mr-1" />
                      Download
                    </Button>
                  </div>
                )}
              </div>

{generatedCode ? (
                <Card>
                  <CardHeader className="pb-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Badge variant="outline">{generatedCode.language}</Badge>
                        {generatedCode.framework && <Badge variant="secondary">{generatedCode.framework}</Badge>}
                        <span className="text-xs text-muted-foreground">{generatedCode.filename}</span>
                      </div>
                      {generatedCode.dependencies && generatedCode.dependencies.length > 0 && (
                        <div className="flex items-center gap-1">
                          <span className="text-xs text-muted-foreground">Dependencies:</span>
                          {generatedCode.dependencies.map((dep) => (
                            <Badge key={dep} variant="outline" className="text-xs">
                              {dep}
                            </Badge>
                          ))}
                        </div>
                      )}
                    </div>
                  </CardHeader>
                  <CardContent>
                    <ScrollArea className="h-96">
                      <pre className="text-xs bg-muted p-4 rounded-lg overflow-x-auto font-mono whitespace-pre">
                        {generatedCode.code}
                      </pre>
                    </ScrollArea>
                  </CardContent>
                </Card>
              ) : request ? (
                <div className="text-center py-8 text-muted-foreground">
                  <Code className="h-8 w-8 mx-auto mb-2 opacity-50" />
                  <p className="text-sm">Code generation failed</p>
                  <p className="text-xs">Please check your request configuration</p>
                </div>
              ) : (
                <div className="text-center py-8 text-muted-foreground">
                  <Code className="h-8 w-8 mx-auto mb-2 opacity-50" />
                  <p className="text-sm">No request to generate code for</p>
                  <p className="text-xs">Configure a request to generate code snippets</p>
                </div>
              )}
            </TabsContent>

<TabsContent value="settings" className="mt-4 space-y-4">
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-sm">Code Generation Settings</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="include-comments" className="text-sm">
                      Include Comments
                    </Label>
                    <Switch
                      id="include-comments"
                      checked={options.includeComments}
                      onCheckedChange={(checked) => updateOptions({ includeComments: checked })}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <Label htmlFor="use-env-vars" className="text-sm">
                      Use Environment Variables
                    </Label>
                    <Switch
                      id="use-env-vars"
                      checked={options.useEnvironmentVariables}
                      onCheckedChange={(checked) => updateOptions({ useEnvironmentVariables: checked })}
                    />
                  </div>

<div className="space-y-2">
                    <Label className="text-sm">Indentation</Label>
                    <div className="flex gap-2">
                      <Select
                        value={options.indentType}
                        onValueChange={(value: "spaces" | "tabs") => updateOptions({ indentType: value })}
                      >
                        <SelectTrigger className="w-24">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="spaces">Spaces</SelectItem>
                          <SelectItem value="tabs">Tabs</SelectItem>
                        </SelectContent>
                      </Select>

{options.indentType === "spaces" && (
                        <Select
                          value={options.indentSize.toString()}
                          onValueChange={(value) => updateOptions({ indentSize: Number.parseInt(value) })}
                        >
                          <SelectTrigger className="w-16">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="2">2</SelectItem>
                            <SelectItem value="4">4</SelectItem>
                            <SelectItem value="8">8</SelectItem>
                          </SelectContent>
                        </Select>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="export" className="mt-4 space-y-4">
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-sm">Export Collection</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {collection ? (
                    <div className="space-y-3">
                      <div className="p-3 bg-muted rounded-lg">
                        <div className="flex items-center justify-between mb-2">
                          <span className="font-medium text-sm">{collection.name}</span>
                          <Badge variant="outline">{collection.requests.length} requests</Badge>
                        </div>
                        {collection.description && (
                          <p className="text-xs text-muted-foreground">{collection.description}</p>
                        )}
                      </div>

<div className="grid grid-cols-2 gap-2">
                        <Button
                          variant="outline"
                          onClick={() => exportCollection("postman")}
                          className="flex items-center gap-2"
                        >
                          <Download className="h-3 w-3" />
                          Postman Collection
                        </Button>
                        <Button
                          variant="outline"
                          onClick={() => exportCollection("openapi")}
                          className="flex items-center gap-2"
                        >
                          <Download className="h-3 w-3" />
                          OpenAPI Spec
                        </Button>
                      </div>

<div className="text-xs text-muted-foreground space-y-1">
                        <p>
                          <strong>Postman Collection:</strong> Import into Postman for team collaboration
                        </p>
                        <p>
                          <strong>OpenAPI Spec:</strong> Generate documentation and client SDKs
                        </p>
                      </div>
                    </div>
                  ) : (
                    <div className="text-center py-8 text-muted-foreground">
                      <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
                      <p className="text-sm">No collection to export</p>
                      <p className="text-xs">Create a collection to export your API requests</p>
                    </div>
                  )}
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/websocket.ts" isMerged="true"
export interface WebSocketMessage {
  id: string
  type: "sent" | "received" | "system"
  content: string
  timestamp: Date
  size: number
}

export interface WebSocketConnection {
  url: string
  protocols?: string[]
  headers?: Record<string, string>
  auth?: {
    type: "bearer" | "basic" | "custom"
    token?: string
    username?: string
    password?: string
    customHeader?: string
    customValue?: string
  }
}

export interface WebSocketStats {
  connected: boolean
  connectionTime?: Date
  lastMessageTime?: Date
  messagesSent: number
  messagesReceived: number
  bytesTransferred: number
  latency?: number
}

export class WebSocketClient {
  private ws: WebSocket | null = null
  private connection: WebSocketConnection | null = null
  private stats: WebSocketStats = {
    connected: false,
    messagesSent: 0,
    messagesReceived: 0,
    bytesTransferred: 0,
  }
  private pingInterval: NodeJS.Timeout | null = null
  private onMessage: (message: WebSocketMessage) => void = () => {}
  private onStatsUpdate: (stats: WebSocketStats) => void = () => {}
  private onConnectionChange: (connected: boolean) => void = () => {}

setMessageHandler(handler: (message: WebSocketMessage) => void) {
    this.onMessage = handler
  }

setStatsHandler(handler: (stats: WebSocketStats) => void) {
    this.onStatsUpdate = handler
  }

setConnectionHandler(handler: (connected: boolean) => void) {
    this.onConnectionChange = handler
  }

async connect(connection: WebSocketConnection): Promise<void> {
    if (this.ws) {
      this.disconnect()
    }

this.connection = connection

try {
      // Build WebSocket URL with auth if needed
      let wsUrl = connection.url
      if (connection.auth?.type === "basic" && connection.auth.username && connection.auth.password) {
        const credentials = btoa(`${connection.auth.username}:${connection.auth.password}`)
        wsUrl += (wsUrl.includes("?") ? "&" : "?") + `auth=${credentials}`
      }

this.ws = new WebSocket(wsUrl, connection.protocols)

// Add custom headers if supported (limited in browser WebSocket)
      if (connection.headers) {
        this.addSystemMessage("Note: Custom headers are limited in browser WebSocket connections")
      }

this.ws.onopen = () => {
        this.stats.connected = true
        this.stats.connectionTime = new Date()
        this.addSystemMessage("Connected to WebSocket server")
        this.onConnectionChange(true)
        this.onStatsUpdate({ ...this.stats })
        this.startPing()
      }

this.ws.onmessage = (event) => {
        const message: WebSocketMessage = {
          id: crypto.randomUUID(),
          type: "received",
          content: event.data,
          timestamp: new Date(),
          size: new Blob([event.data]).size,
        }

this.stats.messagesReceived++
        this.stats.bytesTransferred += message.size
        this.stats.lastMessageTime = new Date()

this.onMessage(message)
        this.onStatsUpdate({ ...this.stats })
      }

this.ws.onclose = (event) => {
        this.stats.connected = false
        this.addSystemMessage(`Connection closed: ${event.code} ${event.reason || "Unknown reason"}`)
        this.onConnectionChange(false)
        this.onStatsUpdate({ ...this.stats })
        this.stopPing()
      }

this.ws.onerror = () => {
        this.addSystemMessage("WebSocket connection error")
      }
    } catch (error) {
      this.addSystemMessage(`Connection failed: ${error instanceof Error ? error.message : "Unknown error"}`)
      throw error
    }
  }

disconnect() {
    if (this.ws) {
      this.ws.close()
      this.ws = null
    }
    this.stopPing()
    this.stats.connected = false
    this.onConnectionChange(false)
    this.onStatsUpdate({ ...this.stats })
  }

sendMessage(content: string): WebSocketMessage | null {
    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
      this.addSystemMessage("Cannot send message: WebSocket not connected")
      return null
    }

try {
      this.ws.send(content)

const message: WebSocketMessage = {
        id: crypto.randomUUID(),
        type: "sent",
        content,
        timestamp: new Date(),
        size: new Blob([content]).size,
      }

this.stats.messagesSent++
      this.stats.bytesTransferred += message.size
      this.stats.lastMessageTime = new Date()

this.onMessage(message)
      this.onStatsUpdate({ ...this.stats })

return message
    } catch (error) {
      this.addSystemMessage(`Failed to send message: ${error instanceof Error ? error.message : "Unknown error"}`)
      return null
    }
  }

ping() {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      const startTime = Date.now()
      this.ws.send(JSON.stringify({ type: "ping", timestamp: startTime }))

// Simple latency calculation (not accurate for all servers)
      setTimeout(() => {
        this.stats.latency = Date.now() - startTime
        this.onStatsUpdate({ ...this.stats })
      }, 100)
    }
  }

private startPing() {
    this.pingInterval = setInterval(() => {
      this.ping()
    }, 30000) // Ping every 30 seconds
  }

private stopPing() {
    if (this.pingInterval) {
      clearInterval(this.pingInterval)
      this.pingInterval = null
    }
  }

private addSystemMessage(content: string) {
    const message: WebSocketMessage = {
      id: crypto.randomUUID(),
      type: "system",
      content,
      timestamp: new Date(),
      size: 0,
    }
    this.onMessage(message)
  }

getStats(): WebSocketStats {
    return { ...this.stats }
  }

isConnected(): boolean {
    return this.ws?.readyState === WebSocket.OPEN
  }
}
[V0_FILE]typescriptreact:file="components/WebSocketTesting.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useToast } from "@/hooks/use-toast"
import { WebSocketClient, type WebSocketMessage, type WebSocketConnection, type WebSocketStats } from "@/lib/websocket"
import { Play, Square, Send, Trash2, Copy, Download, Upload } from "lucide-react"

interface WebSocketTestingProps {
  className?: string
}

export function WebSocketTesting({ className }: WebSocketTestingProps) {
  const [client] = useState(() => new WebSocketClient())
  const [connection, setConnection] = useState<WebSocketConnection>({
    url: "wss://echo.websocket.org",
    protocols: [],
  })
  const [messages, setMessages] = useState<WebSocketMessage[]>([])
  const [stats, setStats] = useState<WebSocketStats>({
    connected: false,
    messagesSent: 0,
    messagesReceived: 0,
    bytesTransferred: 0,
  })
  const [messageInput, setMessageInput] = useState("")
  const [isConnecting, setIsConnecting] = useState(false)
  const [savedConnections, setSavedConnections] = useState<WebSocketConnection[]>([])
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const { toast } = useToast()

useEffect(() => {
    client.setMessageHandler((message) => {
      setMessages((prev) => [...prev, message])
    })

client.setStatsHandler((newStats) => {
      setStats(newStats)
    })

client.setConnectionHandler((connected) => {
      setIsConnecting(false)
      if (connected) {
        toast({
          title: "Connected",
          description: "WebSocket connection established",
        })
      }
    })

return () => {
      client.disconnect()
    }
  }, [client, toast])

useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

const handleConnect = async () => {
    if (stats.connected) {
      client.disconnect()
      return
    }

if (!connection.url.trim()) {
      toast({
        title: "Invalid URL",
        description: "Please enter a valid WebSocket URL",
        variant: "destructive",
      })
      return
    }

setIsConnecting(true)
    try {
      await client.connect(connection)
    } catch (error) {
      setIsConnecting(false)
      toast({
        title: "Connection failed",
        description: error instanceof Error ? error.message : "Unknown error",
        variant: "destructive",
      })
    }
  }

const handleSendMessage = () => {
    if (!messageInput.trim()) return

const sent = client.sendMessage(messageInput)
    if (sent) {
      setMessageInput("")
    }
  }

const handleClearMessages = () => {
    setMessages([])
    toast({
      title: "Messages cleared",
      description: "All messages have been removed",
    })
  }

const handleSaveConnection = () => {
    const name = prompt("Enter connection name:")
    if (name) {
      setSavedConnections((prev) => [...prev, { ...connection, url: `${name}|${connection.url}` }])
      toast({
        title: "Connection saved",
        description: `Saved as "${name}"`,
      })
    }
  }

const handleLoadConnection = (savedConnection: WebSocketConnection) => {
    const [name, url] = savedConnection.url.split("|")
    setConnection({ ...savedConnection, url })
  }

const copyMessage = (content: string) => {
    navigator.clipboard.writeText(content)
    toast({
      title: "Copied",
      description: "Message copied to clipboard",
    })
  }

const exportMessages = () => {
    const data = JSON.stringify(messages, null, 2)
    const blob = new Blob([data], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `websocket-messages-${new Date().toISOString().split("T")[0]}.json`
    a.click()
    URL.revokeObjectURL(url)
  }

const formatMessageContent = (content: string) => {
    try {
      const parsed = JSON.parse(content)
      return JSON.stringify(parsed, null, 2)
    } catch {
      return content
    }
  }

return (
    <div className={className}>
      <Tabs defaultValue="connection" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="connection">Connection</TabsTrigger>
          <TabsTrigger value="messages">Messages</TabsTrigger>
          <TabsTrigger value="stats">Statistics</TabsTrigger>
        </TabsList>

<TabsContent value="connection" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                WebSocket Connection
                <Badge variant={stats.connected ? "default" : "secondary"}>
                  {stats.connected ? "Connected" : "Disconnected"}
                </Badge>
              </CardTitle>
              <CardDescription>Configure and manage WebSocket connections</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="ws-url">WebSocket URL</Label>
                <Input
                  id="ws-url"
                  placeholder="wss://echo.websocket.org"
                  value={connection.url}
                  onChange={(e) => setConnection((prev) => ({ ...prev, url: e.target.value }))}
                  disabled={stats.connected}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="protocols">Protocols (comma-separated)</Label>
                <Input
                  id="protocols"
                  placeholder="chat, superchat"
                  value={connection.protocols?.join(", ") || ""}
                  onChange={(e) =>
                    setConnection((prev) => ({
                      ...prev,
                      protocols: e.target.value
                        .split(",")
                        .map((p) => p.trim())
                        .filter(Boolean),
                    }))
                  }
                  disabled={stats.connected}
                />
              </div>

<div className="space-y-2">
                <Label>Authentication</Label>
                <Select
                  value={connection.auth?.type || "none"}
                  onValueChange={(value) =>
                    setConnection((prev) => ({
                      ...prev,
                      auth: value === "none" ? undefined : { type: value as any },
                    }))
                  }
                  disabled={stats.connected}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">No Authentication</SelectItem>
                    <SelectItem value="bearer">Bearer Token</SelectItem>
                    <SelectItem value="basic">Basic Auth</SelectItem>
                    <SelectItem value="custom">Custom Header</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{connection.auth?.type === "bearer" && (
                <div className="space-y-2">
                  <Label htmlFor="bearer-token">Bearer Token</Label>
                  <Input
                    id="bearer-token"
                    type="password"
                    placeholder="Enter bearer token"
                    value={connection.auth.token || ""}
                    onChange={(e) =>
                      setConnection((prev) => ({
                        ...prev,
                        auth: { ...prev.auth!, token: e.target.value },
                      }))
                    }
                    disabled={stats.connected}
                  />
                </div>
              )}

{connection.auth?.type === "basic" && (
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="username">Username</Label>
                    <Input
                      id="username"
                      placeholder="Username"
                      value={connection.auth.username || ""}
                      onChange={(e) =>
                        setConnection((prev) => ({
                          ...prev,
                          auth: { ...prev.auth!, username: e.target.value },
                        }))
                      }
                      disabled={stats.connected}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="password">Password</Label>
                    <Input
                      id="password"
                      type="password"
                      placeholder="Password"
                      value={connection.auth.password || ""}
                      onChange={(e) =>
                        setConnection((prev) => ({
                          ...prev,
                          auth: { ...prev.auth!, password: e.target.value },
                        }))
                      }
                      disabled={stats.connected}
                    />
                  </div>
                </div>
              )}

<div className="flex gap-2">
                <Button onClick={handleConnect} disabled={isConnecting} className="flex-1">
                  {isConnecting ? (
                    "Connecting..."
                  ) : stats.connected ? (
                    <>
                      <Square className="w-4 h-4 mr-2" />
                      Disconnect
                    </>
                  ) : (
                    <>
                      <Play className="w-4 h-4 mr-2" />
                      Connect
                    </>
                  )}
                </Button>
                <Button variant="outline" onClick={handleSaveConnection}>
                  <Upload className="w-4 h-4" />
                </Button>
              </div>

{savedConnections.length > 0 && (
                <div className="space-y-2">
                  <Label>Saved Connections</Label>
                  <div className="flex flex-wrap gap-2">
                    {savedConnections.map((conn, index) => {
                      const [name] = conn.url.split("|")
                      return (
                        <Button key={index} variant="outline" size="sm" onClick={() => handleLoadConnection(conn)}>
                          {name}
                        </Button>
                      )
                    })}
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="messages" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Messages</CardTitle>
                  <CardDescription>Send and receive WebSocket messages</CardDescription>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" size="sm" onClick={exportMessages}>
                    <Download className="w-4 h-4" />
                  </Button>
                  <Button variant="outline" size="sm" onClick={handleClearMessages}>
                    <Trash2 className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex gap-2">
                <Textarea
                  placeholder="Enter message to send..."
                  value={messageInput}
                  onChange={(e) => setMessageInput(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
                      e.preventDefault()
                      handleSendMessage()
                    }
                  }}
                  className="flex-1"
                  rows={3}
                />
                <Button
                  onClick={handleSendMessage}
                  disabled={!stats.connected || !messageInput.trim()}
                  className="self-end"
                >
                  <Send className="w-4 h-4" />
                </Button>
              </div>

<ScrollArea className="h-96 border rounded-lg p-4">
                <AnimatePresence>
                  {messages.map((message) => (
                    <motion.div
                      key={message.id}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className="mb-4 last:mb-0"
                    >
                      <div className="flex items-center justify-between mb-1">
                        <div className="flex items-center gap-2">
                          <Badge
                            variant={
                              message.type === "sent"
                                ? "default"
                                : message.type === "received"
                                  ? "secondary"
                                  : "outline"
                            }
                          >
                            {message.type}
                          </Badge>
                          <span className="text-xs text-muted-foreground">
                            {message.timestamp.toLocaleTimeString()}
                          </span>
                          {message.size > 0 && (
                            <span className="text-xs text-muted-foreground">({message.size} bytes)</span>
                          )}
                        </div>
                        <Button variant="ghost" size="sm" onClick={() => copyMessage(message.content)}>
                          <Copy className="w-3 h-3" />
                        </Button>
                      </div>
                      <pre className="text-sm bg-muted p-2 rounded overflow-x-auto">
                        {formatMessageContent(message.content)}
                      </pre>
                    </motion.div>
                  ))}
                </AnimatePresence>
                <div ref={messagesEndRef} />
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="stats" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Connection Status</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stats.connected ? "Connected" : "Disconnected"}</div>
                {stats.connectionTime && (
                  <p className="text-xs text-muted-foreground">Since {stats.connectionTime.toLocaleTimeString()}</p>
                )}
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Messages Sent</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stats.messagesSent}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Messages Received</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stats.messagesReceived}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Data Transferred</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{(stats.bytesTransferred / 1024).toFixed(1)}KB</div>
              </CardContent>
            </Card>
          </div>

{stats.latency && (
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Latency</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stats.latency}ms</div>
                <p className="text-xs text-muted-foreground">Last ping response time</p>
              </CardContent>
            </Card>
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="lib/graphql.ts" isMerged="true"
export interface GraphQLSchema {
  types: GraphQLType[]
  queryType?: GraphQLType
  mutationType?: GraphQLType
  subscriptionType?: GraphQLType
}

export interface GraphQLType {
  name: string
  kind: "OBJECT" | "SCALAR" | "ENUM" | "INPUT_OBJECT" | "LIST" | "NON_NULL" | "INTERFACE" | "UNION"
  description?: string
  fields?: GraphQLField[]
  enumValues?: GraphQLEnumValue[]
  inputFields?: GraphQLInputField[]
  possibleTypes?: GraphQLType[]
}

export interface GraphQLField {
  name: string
  description?: string
  type: GraphQLType
  args: GraphQLInputField[]
  isDeprecated: boolean
  deprecationReason?: string
}

export interface GraphQLInputField {
  name: string
  description?: string
  type: GraphQLType
  defaultValue?: any
}

export interface GraphQLEnumValue {
  name: string
  description?: string
  isDeprecated: boolean
  deprecationReason?: string
}

export interface GraphQLQuery {
  id: string
  name: string
  operation: "query" | "mutation" | "subscription"
  query: string
  variables?: Record<string, any>
  headers?: Record<string, string>
  endpoint: string
  createdAt: Date
  lastUsed?: Date
}

export interface GraphQLResponse {
  data?: any
  errors?: Array<{
    message: string
    locations?: Array<{ line: number; column: number }>
    path?: Array<string | number>
    extensions?: Record<string, any>
  }>
  extensions?: Record<string, any>
}

export class GraphQLClient {
  private endpoint: string
  private headers: Record<string, string>

constructor(endpoint: string, headers: Record<string, string> = {}) {
    this.endpoint = endpoint
    this.headers = {
      "Content-Type": "application/json",
      ...headers,
    }
  }

async introspectSchema(): Promise<GraphQLSchema> {
    const introspectionQuery = `
      query IntrospectionQuery {
        __schema {
          queryType { name }
          mutationType { name }
          subscriptionType { name }
          types {
            ...FullType
          }
        }
      }

fragment FullType on __Type {
        kind
        name
        description
        fields(includeDeprecated: true) {
          name
          description
          args {
            ...InputValue
          }
          type {
            ...TypeRef
          }
          isDeprecated
          deprecationReason
        }
        inputFields {
          ...InputValue
        }
        interfaces {
          ...TypeRef
        }
        enumValues(includeDeprecated: true) {
          name
          description
          isDeprecated
          deprecationReason
        }
        possibleTypes {
          ...TypeRef
        }
      }

fragment InputValue on __InputValue {
        name
        description
        type { ...TypeRef }
        defaultValue
      }

fragment TypeRef on __Type {
        kind
        name
        ofType {
          kind
          name
          ofType {
            kind
            name
            ofType {
              kind
              name
              ofType {
                kind
                name
                ofType {
                  kind
                  name
                  ofType {
                    kind
                    name
                    ofType {
                      kind
                      name
                    }
                  }
                }
              }
            }
          }
        }
      }
    `

const response = await this.executeQuery(introspectionQuery)
    if (response.errors) {
      throw new Error(`Schema introspection failed: ${response.errors[0].message}`)
    }

return this.parseIntrospectionResult(response.data.__schema)
  }

async executeQuery(query: string, variables?: Record<string, any>): Promise<GraphQLResponse> {
    try {
      const response = await fetch(this.endpoint, {
        method: "POST",
        headers: this.headers,
        body: JSON.stringify({
          query,
          variables,
        }),
      })

if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
      }

return await response.json()
    } catch (error) {
      throw new Error(`GraphQL request failed: ${error instanceof Error ? error.message : "Unknown error"}`)
    }
  }

private parseIntrospectionResult(schema: any): GraphQLSchema {
    const typeMap = new Map<string, GraphQLType>()

// First pass: create all types
    schema.types.forEach((type: any) => {
      typeMap.set(type.name, {
        name: type.name,
        kind: type.kind,
        description: type.description,
        fields: [],
        enumValues: [],
        inputFields: [],
        possibleTypes: [],
      })
    })

// Second pass: populate fields and relationships
    schema.types.forEach((type: any) => {
      const graphqlType = typeMap.get(type.name)!

if (type.fields) {
        graphqlType.fields = type.fields.map((field: any) => ({
          name: field.name,
          description: field.description,
          type: this.parseTypeRef(field.type, typeMap),
          args:
            field.args?.map((arg: any) => ({
              name: arg.name,
              description: arg.description,
              type: this.parseTypeRef(arg.type, typeMap),
              defaultValue: arg.defaultValue,
            })) || [],
          isDeprecated: field.isDeprecated,
          deprecationReason: field.deprecationReason,
        }))
      }

if (type.enumValues) {
        graphqlType.enumValues = type.enumValues.map((value: any) => ({
          name: value.name,
          description: value.description,
          isDeprecated: value.isDeprecated,
          deprecationReason: value.deprecationReason,
        }))
      }

if (type.inputFields) {
        graphqlType.inputFields = type.inputFields.map((field: any) => ({
          name: field.name,
          description: field.description,
          type: this.parseTypeRef(field.type, typeMap),
          defaultValue: field.defaultValue,
        }))
      }

if (type.possibleTypes) {
        graphqlType.possibleTypes = type.possibleTypes.map((t: any) => typeMap.get(t.name)!)
      }
    })

return {
      types: Array.from(typeMap.values()),
      queryType: schema.queryType ? typeMap.get(schema.queryType.name) : undefined,
      mutationType: schema.mutationType ? typeMap.get(schema.mutationType.name) : undefined,
      subscriptionType: schema.subscriptionType ? typeMap.get(schema.subscriptionType.name) : undefined,
    }
  }

private parseTypeRef(typeRef: any, typeMap: Map<string, GraphQLType>): GraphQLType {
    if (typeRef.ofType) {
      return this.parseTypeRef(typeRef.ofType, typeMap)
    }

return (
      typeMap.get(typeRef.name) || {
        name: typeRef.name,
        kind: typeRef.kind,
        fields: [],
        enumValues: [],
        inputFields: [],
        possibleTypes: [],
      }
    )
  }

updateHeaders(headers: Record<string, string>) {
    this.headers = { ...this.headers, ...headers }
  }

updateEndpoint(endpoint: string) {
    this.endpoint = endpoint
  }
}

export class GraphQLQueryBuilder {
  private schema: GraphQLSchema | null = null

setSchema(schema: GraphQLSchema) {
    this.schema = schema
  }

buildQuery(selections: QuerySelection[], operation: "query" | "mutation" | "subscription" = "query"): string {
    if (!this.schema) {
      throw new Error("Schema not loaded")
    }

const rootType =
      operation === "query"
        ? this.schema.queryType
        : operation === "mutation"
          ? this.schema.mutationType
          : this.schema.subscriptionType

if (!rootType) {
      throw new Error(`${operation} type not available in schema`)
    }

const queryBody = this.buildSelectionSet(selections, rootType, 0)
    return `${operation} {\n${queryBody}\n}`
  }

private buildSelectionSet(selections: QuerySelection[], type: GraphQLType, depth: number): string {
    const indent = "  ".repeat(depth + 1)

return selections
      .map((selection) => {
        const field = type.fields?.find((f) => f.name === selection.name)
        if (!field) return ""

let fieldStr = `${indent}${selection.name}`

// Add arguments
        if (selection.args && Object.keys(selection.args).length > 0) {
          const args = Object.entries(selection.args)
            .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
            .join(", ")
          fieldStr += `(${args})`
        }

// Add sub-selections for object types
        if (selection.selections && selection.selections.length > 0) {
          const subSelections = this.buildSelectionSet(selection.selections, field.type, depth + 1)
          fieldStr += ` {\n${subSelections}\n${indent}}`
        }

return fieldStr
      })
      .join("\n")
  }

validateQuery(query: string): Array<{ message: string; line?: number; column?: number }> {
    const errors: Array<{ message: string; line?: number; column?: number }> = []

// Basic syntax validation
    if (!query.trim()) {
      errors.push({ message: "Query cannot be empty" })
      return errors
    }

// Check for balanced braces
    let braceCount = 0
    let parenCount = 0

for (let i = 0; i < query.length; i++) {
      const char = query[i]
      if (char === "{") braceCount++
      else if (char === "}") braceCount--
      else if (char === "(") parenCount++
      else if (char === ")") parenCount--
    }

if (braceCount !== 0) {
      errors.push({ message: "Unbalanced braces in query" })
    }

if (parenCount !== 0) {
      errors.push({ message: "Unbalanced parentheses in query" })
    }

return errors
  }

getFieldSuggestions(typeName: string, prefix = ""): Array<{ name: string; description?: string; type: string }> {
    if (!this.schema) return []

const type = this.schema.types.find((t) => t.name === typeName)
    if (!type || !type.fields) return []

return type.fields
      .filter((field) => field.name.toLowerCase().includes(prefix.toLowerCase()))
      .map((field) => ({
        name: field.name,
        description: field.description,
        type: this.getTypeString(field.type),
      }))
  }

private getTypeString(type: GraphQLType): string {
    return type.name
  }
}

export interface QuerySelection {
  name: string
  args?: Record<string, any>
  selections?: QuerySelection[]
}

// Query storage utilities
export class GraphQLQueryStorage {
  private static STORAGE_KEY = "graphql_queries"

static saveQuery(query: GraphQLQuery): void {
    const queries = this.getQueries()
    const existingIndex = queries.findIndex((q) => q.id === query.id)

if (existingIndex >= 0) {
      queries[existingIndex] = query
    } else {
      queries.push(query)
    }

localStorage.setItem(this.STORAGE_KEY, JSON.stringify(queries))
  }

static getQueries(): GraphQLQuery[] {
    try {
      const stored = localStorage.getItem(this.STORAGE_KEY)
      if (!stored) return []

return JSON.parse(stored).map((q: any) => ({
        ...q,
        createdAt: new Date(q.createdAt),
        lastUsed: q.lastUsed ? new Date(q.lastUsed) : undefined,
      }))
    } catch {
      return []
    }
  }

static deleteQuery(id: string): void {
    const queries = this.getQueries().filter((q) => q.id !== id)
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(queries))
  }

static clearQueries(): void {
    localStorage.removeItem(this.STORAGE_KEY)
  }
}
[V0_FILE]typescriptreact:file="components/GraphQLPlayground.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useToast } from "@/hooks/use-toast"
import {
  GraphQLClient,
  GraphQLQueryBuilder,
  type GraphQLSchema,
  type GraphQLQuery,
  type GraphQLResponse,
  GraphQLQueryStorage,
  type QuerySelection,
} from "@/lib/graphql"
import { Play, Save, Trash2, Book, Settings, Plus, Minus } from "lucide-react"

interface GraphQLPlaygroundProps {
  className?: string
}

export function GraphQLPlayground({ className }: GraphQLPlaygroundProps) {
  const [client, setClient] = useState<GraphQLClient | null>(null)
  const [queryBuilder] = useState(() => new GraphQLQueryBuilder())
  const [endpoint, setEndpoint] = useState("https://api.github.com/graphql")
  const [headers, setHeaders] = useState<Record<string, string>>({
    Authorization: "Bearer YOUR_TOKEN_HERE",
  })
  const [schema, setSchema] = useState<GraphQLSchema | null>(null)
  const [isLoadingSchema, setIsLoadingSchema] = useState(false)
  const [currentQuery, setCurrentQuery] = useState<GraphQLQuery>({
    id: crypto.randomUUID(),
    name: "New Query",
    operation: "query",
    query: `query {
  viewer {
    login
    name
    email
  }
}`,
    variables: {},
    headers: {},
    endpoint: "",
    createdAt: new Date(),
  })
  const [queryResult, setQueryResult] = useState<GraphQLResponse | null>(null)
  const [isExecuting, setIsExecuting] = useState(false)
  const [savedQueries, setSavedQueries] = useState<GraphQLQuery[]>([])
  const [selectedType, setSelectedType] = useState<string>("")
  const [querySelections, setQuerySelections] = useState<QuerySelection[]>([])
  const [showQueryBuilder, setShowQueryBuilder] = useState(false)
  const [validationErrors, setValidationErrors] = useState<Array<{ message: string; line?: number; column?: number }>>(
    [],
  )
  const queryTextareaRef = useRef<HTMLTextAreaElement>(null)
  const { toast } = useToast()

useEffect(() => {
    setSavedQueries(GraphQLQueryStorage.getQueries())
  }, [])

useEffect(() => {
    if (endpoint && headers) {
      setClient(new GraphQLClient(endpoint, headers))
    }
  }, [endpoint, headers])

useEffect(() => {
    if (currentQuery.query) {
      const errors = queryBuilder.validateQuery(currentQuery.query)
      setValidationErrors(errors)
    }
  }, [currentQuery.query, queryBuilder])

const handleLoadSchema = async () => {
    if (!client) {
      toast({
        title: "No client",
        description: "Please configure endpoint and headers first",
        variant: "destructive",
      })
      return
    }

setIsLoadingSchema(true)
    try {
      const loadedSchema = await client.introspectSchema()
      setSchema(loadedSchema)
      queryBuilder.setSchema(loadedSchema)

if (loadedSchema.queryType) {
        setSelectedType(loadedSchema.queryType.name)
      }

toast({
        title: "Schema loaded",
        description: `Loaded ${loadedSchema.types.length} types`,
      })
    } catch (error) {
      toast({
        title: "Schema loading failed",
        description: error instanceof Error ? error.message : "Unknown error",
        variant: "destructive",
      })
    } finally {
      setIsLoadingSchema(false)
    }
  }

const handleExecuteQuery = async () => {
    if (!client) {
      toast({
        title: "No client",
        description: "Please configure endpoint and headers first",
        variant: "destructive",
      })
      return
    }

if (validationErrors.length > 0) {
      toast({
        title: "Query validation failed",
        description: validationErrors[0].message,
        variant: "destructive",
      })
      return
    }

setIsExecuting(true)
    try {
      const result = await client.executeQuery(currentQuery.query, currentQuery.variables)
      setQueryResult(result)

if (result.errors) {
        toast({
          title: "Query executed with errors",
          description: `${result.errors.length} error(s) found`,
          variant: "destructive",
        })
      } else {
        toast({
          title: "Query executed successfully",
          description: "Results displayed below",
        })
      }

// Update last used time
      const updatedQuery = { ...currentQuery, lastUsed: new Date() }
      setCurrentQuery(updatedQuery)
    } catch (error) {
      toast({
        title: "Query execution failed",
        description: error instanceof Error ? error.message : "Unknown error",
        variant: "destructive",
      })
    } finally {
      setIsExecuting(false)
    }
  }

const handleSaveQuery = () => {
    const queryToSave = { ...currentQuery }
    GraphQLQueryStorage.saveQuery(queryToSave)
    setSavedQueries(GraphQLQueryStorage.getQueries())

toast({
      title: "Query saved",
      description: `Saved "${queryToSave.name}"`,
    })
  }

const handleLoadQuery = (query: GraphQLQuery) => {
    setCurrentQuery(query)
    setEndpoint(query.endpoint || endpoint)
    if (Object.keys(query.headers || {}).length > 0) {
      setHeaders({ ...headers, ...query.headers })
    }
  }

const handleDeleteQuery = (id: string) => {
    GraphQLQueryStorage.deleteQuery(id)
    setSavedQueries(GraphQLQueryStorage.getQueries())
    toast({
      title: "Query deleted",
      description: "Query removed from saved queries",
    })
  }

const handleAddHeader = () => {
    const key = prompt("Header name:")
    const value = prompt("Header value:")
    if (key && value) {
      setHeaders((prev) => ({ ...prev, [key]: value }))
    }
  }

const handleRemoveHeader = (key: string) => {
    setHeaders((prev) => {
      const newHeaders = { ...prev }
      delete newHeaders[key]
      return newHeaders
    })
  }

const buildQueryFromSelections = () => {
    if (!schema || querySelections.length === 0) return

try {
      const builtQuery = queryBuilder.buildQuery(querySelections, currentQuery.operation)
      setCurrentQuery((prev) => ({ ...prev, query: builtQuery }))
      toast({
        title: "Query built",
        description: "Query generated from selections",
      })
    } catch (error) {
      toast({
        title: "Query building failed",
        description: error instanceof Error ? error.message : "Unknown error",
        variant: "destructive",
      })
    }
  }

const addFieldSelection = (fieldName: string) => {
    setQuerySelections((prev) => [...prev, { name: fieldName, selections: [] }])
  }

const removeFieldSelection = (index: number) => {
    setQuerySelections((prev) => prev.filter((_, i) => i !== index))
  }

const formatResult = (result: any) => {
    try {
      return JSON.stringify(result, null, 2)
    } catch {
      return String(result)
    }
  }

return (
    <div className={className}>
      <Tabs defaultValue="playground" className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="playground">Playground</TabsTrigger>
          <TabsTrigger value="schema">Schema</TabsTrigger>
          <TabsTrigger value="builder">Query Builder</TabsTrigger>
          <TabsTrigger value="history">History</TabsTrigger>
        </TabsList>

<TabsContent value="playground" className="space-y-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            {/* Query Input */}
            <div className="space-y-4">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle className="flex items-center gap-2">
                        GraphQL Query
                        {validationErrors.length > 0 && (
                          <Badge variant="destructive">{validationErrors.length} errors</Badge>
                        )}
                      </CardTitle>
                      <CardDescription>Write and execute GraphQL queries</CardDescription>
                    </div>
                    <div className="flex gap-2">
                      <Button variant="outline" size="sm" onClick={handleSaveQuery}>
                        <Save className="w-4 h-4" />
                      </Button>
                      <Button onClick={handleExecuteQuery} disabled={isExecuting || !client} size="sm">
                        <Play className="w-4 h-4 mr-2" />
                        {isExecuting ? "Executing..." : "Execute"}
                      </Button>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="query-name">Query Name</Label>
                    <Input
                      id="query-name"
                      value={currentQuery.name}
                      onChange={(e) => setCurrentQuery((prev) => ({ ...prev, name: e.target.value }))}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="operation">Operation Type</Label>
                    <Select
                      value={currentQuery.operation}
                      onValueChange={(value: "query" | "mutation" | "subscription") =>
                        setCurrentQuery((prev) => ({ ...prev, operation: value }))
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="query">Query</SelectItem>
                        <SelectItem value="mutation">Mutation</SelectItem>
                        <SelectItem value="subscription">Subscription</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="query-text">Query</Label>
                    <Textarea
                      ref={queryTextareaRef}
                      id="query-text"
                      value={currentQuery.query}
                      onChange={(e) => setCurrentQuery((prev) => ({ ...prev, query: e.target.value }))}
                      className="font-mono text-sm min-h-[200px]"
                      placeholder="Enter your GraphQL query..."
                    />
                    {validationErrors.length > 0 && (
                      <div className="text-sm text-destructive">
                        {validationErrors.map((error, index) => (
                          <div key={index}>{error.message}</div>
                        ))}
                      </div>
                    )}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="variables">Variables (JSON)</Label>
                    <Textarea
                      id="variables"
                      value={JSON.stringify(currentQuery.variables, null, 2)}
                      onChange={(e) => {
                        try {
                          const variables = JSON.parse(e.target.value || "{}")
                          setCurrentQuery((prev) => ({ ...prev, variables }))
                        } catch {
                          // Invalid JSON, ignore
                        }
                      }}
                      className="font-mono text-sm"
                      rows={4}
                      placeholder="{}"
                    />
                  </div>
                </CardContent>
              </Card>

{/* Configuration */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Settings className="w-4 h-4" />
                    Configuration
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="endpoint">GraphQL Endpoint</Label>
                    <Input
                      id="endpoint"
                      value={endpoint}
                      onChange={(e) => setEndpoint(e.target.value)}
                      placeholder="https://api.example.com/graphql"
                    />
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label>Headers</Label>
                      <Button variant="outline" size="sm" onClick={handleAddHeader}>
                        <Plus className="w-4 h-4" />
                      </Button>
                    </div>
                    <div className="space-y-2">
                      {Object.entries(headers).map(([key, value]) => (
                        <div key={key} className="flex items-center gap-2">
                          <Input value={key} disabled className="flex-1" />
                          <Input
                            value={value}
                            onChange={(e) => setHeaders((prev) => ({ ...prev, [key]: e.target.value }))}
                            className="flex-1"
                            type={key.toLowerCase().includes("auth") ? "password" : "text"}
                          />
                          <Button variant="outline" size="sm" onClick={() => handleRemoveHeader(key)}>
                            <Minus className="w-4 h-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>

<Button onClick={handleLoadSchema} disabled={isLoadingSchema || !endpoint} className="w-full">
                    <Book className="w-4 h-4 mr-2" />
                    {isLoadingSchema ? "Loading Schema..." : "Load Schema"}
                  </Button>
                </CardContent>
              </Card>
            </div>

{/* Results */}
            <div className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Results</CardTitle>
                  <CardDescription>Query execution results</CardDescription>
                </CardHeader>
                <CardContent>
                  {queryResult ? (
                    <ScrollArea className="h-96">
                      <Tabs defaultValue="data" className="w-full">
                        <TabsList className="grid w-full grid-cols-2">
                          <TabsTrigger value="data">Data</TabsTrigger>
                          <TabsTrigger value="errors">Errors</TabsTrigger>
                        </TabsList>
                        <TabsContent value="data">
                          <pre className="text-sm bg-muted p-4 rounded overflow-x-auto">
                            {formatResult(queryResult.data)}
                          </pre>
                        </TabsContent>
                        <TabsContent value="errors">
                          {queryResult.errors && queryResult.errors.length > 0 ? (
                            <div className="space-y-2">
                              {queryResult.errors.map((error, index) => (
                                <div key={index} className="p-3 bg-destructive/10 border border-destructive/20 rounded">
                                  <div className="font-medium text-destructive">{error.message}</div>
                                  {error.locations && (
                                    <div className="text-sm text-muted-foreground">
                                      Line {error.locations[0].line}, Column {error.locations[0].column}
                                    </div>
                                  )}
                                  {error.path && (
                                    <div className="text-sm text-muted-foreground">Path: {error.path.join(" → ")}</div>
                                  )}
                                </div>
                              ))}
                            </div>
                          ) : (
                            <div className="text-center text-muted-foreground py-8">No errors</div>
                          )}
                        </TabsContent>
                      </Tabs>
                    </ScrollArea>
                  ) : (
                    <div className="text-center text-muted-foreground py-8">Execute a query to see results</div>
                  )}
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

<TabsContent value="schema" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Schema Explorer</CardTitle>
              <CardDescription>Browse the GraphQL schema types and fields</CardDescription>
            </CardHeader>
            <CardContent>
              {schema ? (
                <ScrollArea className="h-96">
                  <div className="space-y-4">
                    {schema.types
                      .filter((type) => !type.name.startsWith("__"))
                      .map((type) => (
                        <div key={type.name} className="border rounded p-3">
                          <div className="flex items-center gap-2 mb-2">
                            <Badge variant="outline">{type.kind}</Badge>
                            <span className="font-medium">{type.name}</span>
                          </div>
                          {type.description && <p className="text-sm text-muted-foreground mb-2">{type.description}</p>}
                          {type.fields && type.fields.length > 0 && (
                            <div className="space-y-1">
                              <div className="text-sm font-medium">Fields:</div>
                              {type.fields.slice(0, 5).map((field) => (
                                <div key={field.name} className="text-sm pl-4">
                                  <span className="font-mono">{field.name}</span>
                                  <span className="text-muted-foreground">: {field.type.name}</span>
                                </div>
                              ))}
                              {type.fields.length > 5 && (
                                <div className="text-sm text-muted-foreground pl-4">
                                  ... and {type.fields.length - 5} more
                                </div>
                              )}
                            </div>
                          )}
                        </div>
                      ))}
                  </div>
                </ScrollArea>
              ) : (
                <div className="text-center text-muted-foreground py-8">Load a schema to explore types and fields</div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="builder" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Visual Query Builder</CardTitle>
              <CardDescription>Build queries visually by selecting fields</CardDescription>
            </CardHeader>
            <CardContent>
              {schema ? (
                <div className="space-y-4">
                  <div className="flex gap-2">
                    <Button onClick={buildQueryFromSelections} disabled={querySelections.length === 0}>
                      Build Query
                    </Button>
                    <Button variant="outline" onClick={() => setQuerySelections([])}>
                      Clear Selections
                    </Button>
                  </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <h4 className="font-medium mb-2">Available Fields</h4>
                      <ScrollArea className="h-64 border rounded p-2">
                        {selectedType &&
                          schema.types
                            .find((t) => t.name === selectedType)
                            ?.fields?.map((field) => (
                              <div
                                key={field.name}
                                className="flex items-center justify-between p-2 hover:bg-muted rounded"
                              >
                                <div>
                                  <span className="font-mono text-sm">{field.name}</span>
                                  <span className="text-muted-foreground text-sm">: {field.type.name}</span>
                                </div>
                                <Button size="sm" variant="outline" onClick={() => addFieldSelection(field.name)}>
                                  <Plus className="w-3 h-3" />
                                </Button>
                              </div>
                            ))}
                      </ScrollArea>
                    </div>

<div>
                      <h4 className="font-medium mb-2">Selected Fields</h4>
                      <ScrollArea className="h-64 border rounded p-2">
                        {querySelections.map((selection, index) => (
                          <div key={index} className="flex items-center justify-between p-2 hover:bg-muted rounded">
                            <span className="font-mono text-sm">{selection.name}</span>
                            <Button size="sm" variant="outline" onClick={() => removeFieldSelection(index)}>
                              <Minus className="w-3 h-3" />
                            </Button>
                          </div>
                        ))}
                      </ScrollArea>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="text-center text-muted-foreground py-8">
                  Load a schema to use the visual query builder
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="history" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Saved Queries</CardTitle>
                  <CardDescription>Manage your saved GraphQL queries</CardDescription>
                </div>
                <Button variant="outline" onClick={() => setSavedQueries(GraphQLQueryStorage.getQueries())}>
                  Refresh
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              {savedQueries.length > 0 ? (
                <ScrollArea className="h-96">
                  <div className="space-y-2">
                    {savedQueries.map((query) => (
                      <div key={query.id} className="flex items-center justify-between p-3 border rounded">
                        <div className="flex-1">
                          <div className="font-medium">{query.name}</div>
                          <div className="text-sm text-muted-foreground">
                            {query.operation} • Created {query.createdAt.toLocaleDateString()}
                            {query.lastUsed && ` • Last used ${query.lastUsed.toLocaleDateString()}`}
                          </div>
                        </div>
                        <div className="flex gap-2">
                          <Button size="sm" variant="outline" onClick={() => handleLoadQuery(query)}>
                            Load
                          </Button>
                          <Button size="sm" variant="outline" onClick={() => handleDeleteQuery(query.id)}>
                            <Trash2 className="w-3 h-3" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              ) : (
                <div className="text-center text-muted-foreground py-8">No saved queries yet</div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="lib/performance.ts" isMerged="true"
export interface PerformanceTestConfig {
  id: string
  name: string
  endpoint: string
  method: string
  headers: Record<string, string>
  body?: string
  testType: "load" | "stress" | "spike" | "volume" | "endurance"
  duration: number // in seconds
  concurrency: number
  rampUpTime?: number // in seconds
  targetRPS?: number // requests per second
  maxRequests?: number
  thresholds: {
    avgResponseTime: number // ms
    p95ResponseTime: number // ms
    errorRate: number // percentage
    minThroughput: number // requests per second
  }
}

export interface PerformanceMetrics {
  totalRequests: number
  successfulRequests: number
  failedRequests: number
  avgResponseTime: number
  minResponseTime: number
  maxResponseTime: number
  p50ResponseTime: number
  p95ResponseTime: number
  p99ResponseTime: number
  throughput: number // requests per second
  errorRate: number // percentage
  bytesTransferred: number
  startTime: Date
  endTime?: Date
  duration: number // actual duration in ms
}

export interface RequestResult {
  id: string
  timestamp: Date
  responseTime: number
  statusCode: number
  success: boolean
  error?: string
  size: number
}

export interface PerformanceTestResult {
  config: PerformanceTestConfig
  metrics: PerformanceMetrics
  requests: RequestResult[]
  timeline: Array<{
    timestamp: Date
    activeRequests: number
    rps: number
    avgResponseTime: number
    errorRate: number
  }>
  passed: boolean
  failedThresholds: string[]
}

export class PerformanceTestRunner {
  private isRunning = false
  private shouldStop = false
  private activeRequests = 0
  private results: RequestResult[] = []
  private timeline: PerformanceTestResult["timeline"] = []
  private onProgress: (progress: number, metrics: Partial<PerformanceMetrics>) => void = () => {}
  private onResult: (result: RequestResult) => void = () => {}

setProgressHandler(handler: (progress: number, metrics: Partial<PerformanceMetrics>) => void) {
    this.onProgress = handler
  }

setResultHandler(handler: (result: RequestResult) => void) {
    this.onResult = handler
  }

async runTest(config: PerformanceTestConfig): Promise<PerformanceTestResult> {
    if (this.isRunning) {
      throw new Error("Test is already running")
    }

this.isRunning = true
    this.shouldStop = false
    this.activeRequests = 0
    this.results = []
    this.timeline = []

const startTime = new Date()
    const endTime = new Date(startTime.getTime() + config.duration * 1000)

try {
      // Start timeline tracking
      const timelineInterval = setInterval(() => {
        if (!this.isRunning) {
          clearInterval(timelineInterval)
          return
        }

const recentResults = this.results.filter(
          (r) => r.timestamp.getTime() > Date.now() - 5000, // Last 5 seconds
        )

const rps = recentResults.length / 5
        const avgResponseTime =
          recentResults.length > 0
            ? recentResults.reduce((sum, r) => sum + r.responseTime, 0) / recentResults.length
            : 0
        const errorRate =
          recentResults.length > 0 ? (recentResults.filter((r) => !r.success).length / recentResults.length) * 100 : 0

this.timeline.push({
          timestamp: new Date(),
          activeRequests: this.activeRequests,
          rps,
          avgResponseTime,
          errorRate,
        })

// Report progress
        const progress = Math.min(100, ((Date.now() - startTime.getTime()) / (config.duration * 1000)) * 100)
        this.onProgress(progress, {
          totalRequests: this.results.length,
          successfulRequests: this.results.filter((r) => r.success).length,
          failedRequests: this.results.filter((r) => !r.success).length,
          avgResponseTime,
          throughput: rps,
          errorRate,
        })
      }, 1000)

// Execute test based on type
      switch (config.testType) {
        case "load":
          await this.runLoadTest(config, startTime, endTime)
          break
        case "stress":
          await this.runStressTest(config, startTime, endTime)
          break
        case "spike":
          await this.runSpikeTest(config, startTime, endTime)
          break
        case "volume":
          await this.runVolumeTest(config, startTime, endTime)
          break
        case "endurance":
          await this.runEnduranceTest(config, startTime, endTime)
          break
      }

// Wait for all active requests to complete
      while (this.activeRequests > 0 && !this.shouldStop) {
        await new Promise((resolve) => setTimeout(resolve, 100))
      }

clearInterval(timelineInterval)
    } finally {
      this.isRunning = false
    }

const actualEndTime = new Date()
    const metrics = this.calculateMetrics(startTime, actualEndTime)
    const result: PerformanceTestResult = {
      config,
      metrics,
      requests: this.results,
      timeline: this.timeline,
      passed: this.evaluateThresholds(config.thresholds, metrics),
      failedThresholds: this.getFailedThresholds(config.thresholds, metrics),
    }

return result
  }

stop() {
    this.shouldStop = true
  }

private async runLoadTest(config: PerformanceTestConfig, startTime: Date, endTime: Date) {
    const rampUpDuration = config.rampUpTime || 0
    const steadyStateDuration = config.duration - rampUpDuration

// Ramp-up phase
    if (rampUpDuration > 0) {
      const rampUpEnd = new Date(startTime.getTime() + rampUpDuration * 1000)
      await this.rampUpRequests(config, startTime, rampUpEnd)
    }

// Steady state phase
    const steadyStateStart = new Date(startTime.getTime() + rampUpDuration * 1000)
    const steadyStateEnd = new Date(steadyStateStart.getTime() + steadyStateDuration * 1000)
    await this.maintainConcurrency(config, steadyStateStart, steadyStateEnd)
  }

private async runStressTest(config: PerformanceTestConfig, startTime: Date, endTime: Date) {
    // Gradually increase load beyond normal capacity
    const phases = 5
    const phaseDuration = config.duration / phases

for (let phase = 1; phase <= phases && !this.shouldStop; phase++) {
      const phaseStart = new Date(startTime.getTime() + (phase - 1) * phaseDuration * 1000)
      const phaseEnd = new Date(phaseStart.getTime() + phaseDuration * 1000)
      const phaseConcurrency = Math.floor(config.concurrency * phase * 0.5)

await this.maintainConcurrency({ ...config, concurrency: phaseConcurrency }, phaseStart, phaseEnd)
    }
  }

private async runSpikeTest(config: PerformanceTestConfig, startTime: Date, endTime: Date) {
    const normalLoad = Math.floor(config.concurrency * 0.3)
    const spikeLoad = config.concurrency
    const spikeDuration = Math.min(30, config.duration * 0.2) // 20% of total time or 30s max

// Normal load phase 1
    const phase1End = new Date(startTime.getTime() + (config.duration - spikeDuration) * 500)
    await this.maintainConcurrency({ ...config, concurrency: normalLoad }, startTime, phase1End)

// Spike phase
    const spikeEnd = new Date(phase1End.getTime() + spikeDuration * 1000)
    await this.maintainConcurrency({ ...config, concurrency: spikeLoad }, phase1End, spikeEnd)

// Normal load phase 2
    await this.maintainConcurrency({ ...config, concurrency: normalLoad }, spikeEnd, endTime)
  }

private async runVolumeTest(config: PerformanceTestConfig, startTime: Date, endTime: Date) {
    // High volume of data with normal concurrency
    await this.maintainConcurrency(config, startTime, endTime)
  }

private async runEnduranceTest(config: PerformanceTestConfig, startTime: Date, endTime: Date) {
    // Sustained load over extended period
    await this.maintainConcurrency(config, startTime, endTime)
  }

private async rampUpRequests(config: PerformanceTestConfig, startTime: Date, endTime: Date) {
    const duration = endTime.getTime() - startTime.getTime()
    const interval = duration / config.concurrency

for (let i = 0; i < config.concurrency && !this.shouldStop; i++) {
      setTimeout(() => {
        if (!this.shouldStop) {
          this.startRequestLoop(config, endTime)
        }
      }, i * interval)
    }
  }

private async maintainConcurrency(config: PerformanceTestConfig, startTime: Date, endTime: Date) {
    const promises: Promise<void>[] = []

for (let i = 0; i < config.concurrency; i++) {
      promises.push(this.startRequestLoop(config, endTime))
    }

await Promise.all(promises)
  }

private async startRequestLoop(config: PerformanceTestConfig, endTime: Date): Promise<void> {
    while (Date.now() < endTime.getTime() && !this.shouldStop) {
      if (config.maxRequests && this.results.length >= config.maxRequests) {
        break
      }

await this.executeRequest(config)

// Add delay if target RPS is specified
      if (config.targetRPS) {
        const delay = (1000 / config.targetRPS) * config.concurrency
        await new Promise((resolve) => setTimeout(resolve, delay))
      }
    }
  }

private async executeRequest(config: PerformanceTestConfig): Promise<void> {
    const requestId = crypto.randomUUID()
    const startTime = Date.now()

this.activeRequests++

try {
      const response = await fetch(config.endpoint, {
        method: config.method,
        headers: config.headers,
        body: config.body,
      })

const endTime = Date.now()
      const responseTime = endTime - startTime
      const responseText = await response.text()
      const size = new Blob([responseText]).size

const result: RequestResult = {
        id: requestId,
        timestamp: new Date(startTime),
        responseTime,
        statusCode: response.status,
        success: response.ok,
        size,
        error: response.ok ? undefined : `HTTP ${response.status}: ${response.statusText}`,
      }

this.results.push(result)
      this.onResult(result)
    } catch (error) {
      const endTime = Date.now()
      const responseTime = endTime - startTime

const result: RequestResult = {
        id: requestId,
        timestamp: new Date(startTime),
        responseTime,
        statusCode: 0,
        success: false,
        size: 0,
        error: error instanceof Error ? error.message : "Unknown error",
      }

this.results.push(result)
      this.onResult(result)
    } finally {
      this.activeRequests--
    }
  }

private calculateMetrics(startTime: Date, endTime: Date): PerformanceMetrics {
    const duration = endTime.getTime() - startTime.getTime()
    const successfulRequests = this.results.filter((r) => r.success)
    const failedRequests = this.results.filter((r) => !r.success)

const responseTimes = this.results.map((r) => r.responseTime).sort((a, b) => a - b)
    const totalBytes = this.results.reduce((sum, r) => sum + r.size, 0)

return {
      totalRequests: this.results.length,
      successfulRequests: successfulRequests.length,
      failedRequests: failedRequests.length,
      avgResponseTime:
        responseTimes.length > 0 ? responseTimes.reduce((sum, rt) => sum + rt, 0) / responseTimes.length : 0,
      minResponseTime: responseTimes.length > 0 ? responseTimes[0] : 0,
      maxResponseTime: responseTimes.length > 0 ? responseTimes[responseTimes.length - 1] : 0,
      p50ResponseTime: this.getPercentile(responseTimes, 50),
      p95ResponseTime: this.getPercentile(responseTimes, 95),
      p99ResponseTime: this.getPercentile(responseTimes, 99),
      throughput: this.results.length / (duration / 1000),
      errorRate: this.results.length > 0 ? (failedRequests.length / this.results.length) * 100 : 0,
      bytesTransferred: totalBytes,
      startTime,
      endTime,
      duration,
    }
  }

private getPercentile(sortedArray: number[], percentile: number): number {
    if (sortedArray.length === 0) return 0
    const index = Math.ceil((percentile / 100) * sortedArray.length) - 1
    return sortedArray[Math.max(0, Math.min(index, sortedArray.length - 1))]
  }

private evaluateThresholds(thresholds: PerformanceTestConfig["thresholds"], metrics: PerformanceMetrics): boolean {
    return (
      metrics.avgResponseTime <= thresholds.avgResponseTime &&
      metrics.p95ResponseTime <= thresholds.p95ResponseTime &&
      metrics.errorRate <= thresholds.errorRate &&
      metrics.throughput >= thresholds.minThroughput
    )
  }

private getFailedThresholds(thresholds: PerformanceTestConfig["thresholds"], metrics: PerformanceMetrics): string[] {
    const failed: string[] = []

if (metrics.avgResponseTime > thresholds.avgResponseTime) {
      failed.push(`Average response time: ${metrics.avgResponseTime.toFixed(2)}ms > ${thresholds.avgResponseTime}ms`)
    }

if (metrics.p95ResponseTime > thresholds.p95ResponseTime) {
      failed.push(
        `95th percentile response time: ${metrics.p95ResponseTime.toFixed(2)}ms > ${thresholds.p95ResponseTime}ms`,
      )
    }

if (metrics.errorRate > thresholds.errorRate) {
      failed.push(`Error rate: ${metrics.errorRate.toFixed(2)}% > ${thresholds.errorRate}%`)
    }

if (metrics.throughput < thresholds.minThroughput) {
      failed.push(`Throughput: ${metrics.throughput.toFixed(2)} RPS < ${thresholds.minThroughput} RPS`)
    }

return failed
  }

isTestRunning(): boolean {
    return this.isRunning
  }
}

// Performance test storage
export class PerformanceTestStorage {
  private static STORAGE_KEY = "performance_tests"
  private static RESULTS_KEY = "performance_results"

static saveTest(config: PerformanceTestConfig): void {
    const tests = this.getTests()
    const existingIndex = tests.findIndex((t) => t.id === config.id)

if (existingIndex >= 0) {
      tests[existingIndex] = config
    } else {
      tests.push(config)
    }

localStorage.setItem(this.STORAGE_KEY, JSON.stringify(tests))
  }

static getTests(): PerformanceTestConfig[] {
    try {
      const stored = localStorage.getItem(this.STORAGE_KEY)
      return stored ? JSON.parse(stored) : []
    } catch {
      return []
    }
  }

static deleteTest(id: string): void {
    const tests = this.getTests().filter((t) => t.id !== id)
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(tests))
  }

static saveResult(result: PerformanceTestResult): void {
    const results = this.getResults()
    results.push({
      ...result,
      metrics: {
        ...result.metrics,
        startTime: result.metrics.startTime.toISOString(),
        endTime: result.metrics.endTime?.toISOString(),
      },
    })

// Keep only last 50 results
    if (results.length > 50) {
      results.splice(0, results.length - 50)
    }

localStorage.setItem(this.RESULTS_KEY, JSON.stringify(results))
  }

static getResults(): any[] {
    try {
      const stored = localStorage.getItem(this.RESULTS_KEY)
      return stored ? JSON.parse(stored) : []
    } catch {
      return []
    }
  }

static clearResults(): void {
    localStorage.removeItem(this.RESULTS_KEY)
  }
}
[V0_FILE]typescriptreact:file="components/PerformanceTesting.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Progress } from "@/components/ui/progress"
import { useToast } from "@/hooks/use-toast"
import {
  PerformanceTestRunner,
  type PerformanceTestConfig,
  type PerformanceTestResult,
  PerformanceTestStorage,
  type PerformanceMetrics,
  type RequestResult,
} from "@/lib/performance"
import { Play, Square, Save, Trash2, Download, TrendingUp, Activity, Zap, BarChart3 } from "lucide-react"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

interface PerformanceTestingProps {
  className?: string
}

export function PerformanceTesting({ className }: PerformanceTestingProps) {
  const [runner] = useState(() => new PerformanceTestRunner())
  const [testConfig, setTestConfig] = useState<PerformanceTestConfig>({
    id: crypto.randomUUID(),
    name: "Load Test",
    endpoint: "https://httpbin.org/delay/1",
    method: "GET",
    headers: { "Content-Type": "application/json" },
    testType: "load",
    duration: 60,
    concurrency: 10,
    rampUpTime: 10,
    thresholds: {
      avgResponseTime: 2000,
      p95ResponseTime: 5000,
      errorRate: 5,
      minThroughput: 5,
    },
  })
  const [isRunning, setIsRunning] = useState(false)
  const [progress, setProgress] = useState(0)
  const [currentMetrics, setCurrentMetrics] = useState<Partial<PerformanceMetrics>>({})
  const [testResult, setTestResult] = useState<PerformanceTestResult | null>(null)
  const [recentResults, setRecentResults] = useState<RequestResult[]>([])
  const [savedTests, setSavedTests] = useState<PerformanceTestConfig[]>([])
  const [testHistory, setTestHistory] = useState<any[]>([])
  const [activeTab, setActiveTab] = useState("config")
  const { toast } = useToast()

useEffect(() => {
    setSavedTests(PerformanceTestStorage.getTests())
    setTestHistory(PerformanceTestStorage.getResults())
  }, [])

useEffect(() => {
    runner.setProgressHandler((progress, metrics) => {
      setProgress(progress)
      setCurrentMetrics(metrics)
    })

runner.setResultHandler((result) => {
      setRecentResults((prev) => [...prev.slice(-99), result]) // Keep last 100 results
    })
  }, [runner])

const handleStartTest = async () => {
    if (isRunning) {
      runner.stop()
      setIsRunning(false)
      return
    }

setIsRunning(true)
    setProgress(0)
    setCurrentMetrics({})
    setRecentResults([])
    setTestResult(null)
    setActiveTab("monitor")

try {
      const result = await runner.runTest(testConfig)
      setTestResult(result)
      PerformanceTestStorage.saveResult(result)
      setTestHistory(PerformanceTestStorage.getResults())

toast({
        title: result.passed ? "Test passed" : "Test failed",
        description: result.passed
          ? "All performance thresholds met"
          : `${result.failedThresholds.length} threshold(s) failed`,
        variant: result.passed ? "default" : "destructive",
      })

setActiveTab("results")
    } catch (error) {
      toast({
        title: "Test failed",
        description: error instanceof Error ? error.message : "Unknown error",
        variant: "destructive",
      })
    } finally {
      setIsRunning(false)
      setProgress(0)
    }
  }

const handleSaveTest = () => {
    PerformanceTestStorage.saveTest(testConfig)
    setSavedTests(PerformanceTestStorage.getTests())
    toast({
      title: "Test saved",
      description: `Saved "${testConfig.name}"`,
    })
  }

const handleLoadTest = (config: PerformanceTestConfig) => {
    setTestConfig(config)
    toast({
      title: "Test loaded",
      description: `Loaded "${config.name}"`,
    })
  }

const handleDeleteTest = (id: string) => {
    PerformanceTestStorage.deleteTest(id)
    setSavedTests(PerformanceTestStorage.getTests())
    toast({
      title: "Test deleted",
      description: "Test configuration removed",
    })
  }

const exportResults = () => {
    if (!testResult) return

const data = JSON.stringify(testResult, null, 2)
    const blob = new Blob([data], { type: "application/json" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `performance-test-${testResult.config.name}-${new Date().toISOString().split("T")[0]}.json`
    a.click()
    URL.revokeObjectURL(url)
  }

const formatDuration = (ms: number) => {
    if (ms < 1000) return `${ms.toFixed(0)}ms`
    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
    return `${(ms / 60000).toFixed(1)}m`
  }

const getTestTypeIcon = (type: string) => {
    switch (type) {
      case "load":
        return <Activity className="w-4 h-4" />
      case "stress":
        return <TrendingUp className="w-4 h-4" />
      case "spike":
        return <Zap className="w-4 h-4" />
      default:
        return <BarChart3 className="w-4 h-4" />
    }
  }

const getTestTypeColor = (type: string) => {
    switch (type) {
      case "load":
        return "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
      case "stress":
        return "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300"
      case "spike":
        return "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300"
      case "volume":
        return "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300"
      case "endurance":
        return "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300"
      default:
        return "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300"
    }
  }

return (
    <div className={className}>
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="config">Configuration</TabsTrigger>
          <TabsTrigger value="monitor">Monitor</TabsTrigger>
          <TabsTrigger value="results">Results</TabsTrigger>
          <TabsTrigger value="history">History</TabsTrigger>
        </TabsList>

<TabsContent value="config" className="space-y-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Test Configuration</CardTitle>
                <CardDescription>Configure your performance test parameters</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="test-name">Test Name</Label>
                  <Input
                    id="test-name"
                    value={testConfig.name}
                    onChange={(e) => setTestConfig((prev) => ({ ...prev, name: e.target.value }))}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="endpoint">Endpoint URL</Label>
                  <Input
                    id="endpoint"
                    value={testConfig.endpoint}
                    onChange={(e) => setTestConfig((prev) => ({ ...prev, endpoint: e.target.value }))}
                    placeholder="https://api.example.com/endpoint"
                  />
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="method">HTTP Method</Label>
                    <Select
                      value={testConfig.method}
                      onValueChange={(value) => setTestConfig((prev) => ({ ...prev, method: value }))}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="GET">GET</SelectItem>
                        <SelectItem value="POST">POST</SelectItem>
                        <SelectItem value="PUT">PUT</SelectItem>
                        <SelectItem value="DELETE">DELETE</SelectItem>
                        <SelectItem value="PATCH">PATCH</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="test-type">Test Type</Label>
                    <Select
                      value={testConfig.testType}
                      onValueChange={(value: any) => setTestConfig((prev) => ({ ...prev, testType: value }))}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="load">Load Test</SelectItem>
                        <SelectItem value="stress">Stress Test</SelectItem>
                        <SelectItem value="spike">Spike Test</SelectItem>
                        <SelectItem value="volume">Volume Test</SelectItem>
                        <SelectItem value="endurance">Endurance Test</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="request-body">Request Body (JSON)</Label>
                  <Textarea
                    id="request-body"
                    value={testConfig.body || ""}
                    onChange={(e) => setTestConfig((prev) => ({ ...prev, body: e.target.value }))}
                    placeholder='{"key": "value"}'
                    rows={3}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="headers">Headers (JSON)</Label>
                  <Textarea
                    id="headers"
                    value={JSON.stringify(testConfig.headers, null, 2)}
                    onChange={(e) => {
                      try {
                        const headers = JSON.parse(e.target.value)
                        setTestConfig((prev) => ({ ...prev, headers }))
                      } catch {
                        // Invalid JSON, ignore
                      }
                    }}
                    rows={3}
                  />
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Load Parameters</CardTitle>
                <CardDescription>Configure load testing parameters</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="duration">Duration (seconds)</Label>
                    <Input
                      id="duration"
                      type="number"
                      value={testConfig.duration}
                      onChange={(e) =>
                        setTestConfig((prev) => ({ ...prev, duration: Number.parseInt(e.target.value) || 60 }))
                      }
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="concurrency">Concurrent Users</Label>
                    <Input
                      id="concurrency"
                      type="number"
                      value={testConfig.concurrency}
                      onChange={(e) =>
                        setTestConfig((prev) => ({ ...prev, concurrency: Number.parseInt(e.target.value) || 10 }))
                      }
                    />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="ramp-up">Ramp-up Time (seconds)</Label>
                    <Input
                      id="ramp-up"
                      type="number"
                      value={testConfig.rampUpTime || 0}
                      onChange={(e) =>
                        setTestConfig((prev) => ({ ...prev, rampUpTime: Number.parseInt(e.target.value) || 0 }))
                      }
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="target-rps">Target RPS (optional)</Label>
                    <Input
                      id="target-rps"
                      type="number"
                      value={testConfig.targetRPS || ""}
                      onChange={(e) =>
                        setTestConfig((prev) => ({ ...prev, targetRPS: Number.parseInt(e.target.value) || undefined }))
                      }
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="max-requests">Max Requests (optional)</Label>
                  <Input
                    id="max-requests"
                    type="number"
                    value={testConfig.maxRequests || ""}
                    onChange={(e) =>
                      setTestConfig((prev) => ({ ...prev, maxRequests: Number.parseInt(e.target.value) || undefined }))
                    }
                  />
                </div>

<div className="space-y-3">
                  <Label>Performance Thresholds</Label>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="avg-response">Avg Response Time (ms)</Label>
                      <Input
                        id="avg-response"
                        type="number"
                        value={testConfig.thresholds.avgResponseTime}
                        onChange={(e) =>
                          setTestConfig((prev) => ({
                            ...prev,
                            thresholds: {
                              ...prev.thresholds,
                              avgResponseTime: Number.parseInt(e.target.value) || 2000,
                            },
                          }))
                        }
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="p95-response">P95 Response Time (ms)</Label>
                      <Input
                        id="p95-response"
                        type="number"
                        value={testConfig.thresholds.p95ResponseTime}
                        onChange={(e) =>
                          setTestConfig((prev) => ({
                            ...prev,
                            thresholds: {
                              ...prev.thresholds,
                              p95ResponseTime: Number.parseInt(e.target.value) || 5000,
                            },
                          }))
                        }
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="error-rate">Max Error Rate (%)</Label>
                      <Input
                        id="error-rate"
                        type="number"
                        value={testConfig.thresholds.errorRate}
                        onChange={(e) =>
                          setTestConfig((prev) => ({
                            ...prev,
                            thresholds: { ...prev.thresholds, errorRate: Number.parseInt(e.target.value) || 5 },
                          }))
                        }
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="min-throughput">Min Throughput (RPS)</Label>
                      <Input
                        id="min-throughput"
                        type="number"
                        value={testConfig.thresholds.minThroughput}
                        onChange={(e) =>
                          setTestConfig((prev) => ({
                            ...prev,
                            thresholds: { ...prev.thresholds, minThroughput: Number.parseInt(e.target.value) || 5 },
                          }))
                        }
                      />
                    </div>
                  </div>
                </div>

<div className="flex gap-2">
                  <Button onClick={handleStartTest} disabled={isRunning} className="flex-1">
                    {isRunning ? (
                      <>
                        <Square className="w-4 h-4 mr-2" />
                        Stop Test
                      </>
                    ) : (
                      <>
                        <Play className="w-4 h-4 mr-2" />
                        Start Test
                      </>
                    )}
                  </Button>
                  <Button variant="outline" onClick={handleSaveTest}>
                    <Save className="w-4 h-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>

{savedTests.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle>Saved Tests</CardTitle>
                <CardDescription>Load previously saved test configurations</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                  {savedTests.map((test) => (
                    <div key={test.id} className="flex items-center justify-between p-3 border rounded">
                      <div className="flex items-center gap-2">
                        {getTestTypeIcon(test.testType)}
                        <div>
                          <div className="font-medium">{test.name}</div>
                          <div className="text-sm text-muted-foreground">
                            <span className={`px-2 py-1 rounded-full text-xs ${getTestTypeColor(test.testType)}`}>
                              {test.testType}
                            </span>
                          </div>
                        </div>
                      </div>
                      <div className="flex gap-1">
                        <Button size="sm" variant="outline" onClick={() => handleLoadTest(test)}>
                          Load
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleDeleteTest(test.id)}>
                          <Trash2 className="w-3 h-3" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </TabsContent>

<TabsContent value="monitor" className="space-y-4">
          {isRunning && (
            <Card>
              <CardHeader>
                <CardTitle>Test Progress</CardTitle>
                <CardDescription>Real-time performance monitoring</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>Progress</span>
                    <span>{progress.toFixed(1)}%</span>
                  </div>
                  <Progress value={progress} className="h-2" />
                </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold">{currentMetrics.totalRequests || 0}</div>
                    <div className="text-sm text-muted-foreground">Total Requests</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold">{(currentMetrics.throughput || 0).toFixed(1)}</div>
                    <div className="text-sm text-muted-foreground">RPS</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold">{(currentMetrics.avgResponseTime || 0).toFixed(0)}ms</div>
                    <div className="text-sm text-muted-foreground">Avg Response</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold">{(currentMetrics.errorRate || 0).toFixed(1)}%</div>
                    <div className="text-sm text-muted-foreground">Error Rate</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

{recentResults.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle>Recent Requests</CardTitle>
                <CardDescription>Latest request results</CardDescription>
              </CardHeader>
              <CardContent>
                <ScrollArea className="h-64">
                  <div className="space-y-2">
                    {recentResults
                      .slice(-20)
                      .reverse()
                      .map((result) => (
                        <div key={result.id} className="flex items-center justify-between p-2 border rounded text-sm">
                          <div className="flex items-center gap-2">
                            <Badge variant={result.success ? "default" : "destructive"}>{result.statusCode}</Badge>
                            <span>{result.timestamp.toLocaleTimeString()}</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <span>{result.responseTime}ms</span>
                            <span className="text-muted-foreground">{result.size}B</span>
                          </div>
                        </div>
                      ))}
                  </div>
                </ScrollArea>
              </CardContent>
            </Card>
          )}
        </TabsContent>

<TabsContent value="results" className="space-y-4">
          {testResult ? (
            <>
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle className="flex items-center gap-2">
                        Test Results
                        <Badge variant={testResult.passed ? "default" : "destructive"}>
                          {testResult.passed ? "PASSED" : "FAILED"}
                        </Badge>
                      </CardTitle>
                      <CardDescription>{testResult.config.name}</CardDescription>
                    </div>
                    <Button variant="outline" onClick={exportResults}>
                      <Download className="w-4 h-4 mr-2" />
                      Export
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    <div className="text-center">
                      <div className="text-2xl font-bold">{testResult.metrics.totalRequests}</div>
                      <div className="text-sm text-muted-foreground">Total Requests</div>
                    </div>
                    <div className="text-center">
                      <div className="text-2xl font-bold">{testResult.metrics.throughput.toFixed(1)}</div>
                      <div className="text-sm text-muted-foreground">RPS</div>
                    </div>
                    <div className="text-center">
                      <div className="text-2xl font-bold">{testResult.metrics.avgResponseTime.toFixed(0)}ms</div>
                      <div className="text-sm text-muted-foreground">Avg Response</div>
                    </div>
                    <div className="text-center">
                      <div className="text-2xl font-bold">{testResult.metrics.errorRate.toFixed(1)}%</div>
                      <div className="text-sm text-muted-foreground">Error Rate</div>
                    </div>
                  </div>

{testResult.failedThresholds.length > 0 && (
                    <div className="mb-6">
                      <h4 className="font-medium mb-2 text-destructive">Failed Thresholds</h4>
                      <div className="space-y-1">
                        {testResult.failedThresholds.map((threshold, index) => (
                          <div key={index} className="text-sm text-destructive bg-destructive/10 p-2 rounded">
                            {threshold}
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                      <h4 className="font-medium mb-3">Response Time Distribution</h4>
                      <div className="space-y-2 text-sm">
                        <div className="flex justify-between">
                          <span>Min:</span>
                          <span>{testResult.metrics.minResponseTime.toFixed(0)}ms</span>
                        </div>
                        <div className="flex justify-between">
                          <span>50th percentile:</span>
                          <span>{testResult.metrics.p50ResponseTime.toFixed(0)}ms</span>
                        </div>
                        <div className="flex justify-between">
                          <span>95th percentile:</span>
                          <span>{testResult.metrics.p95ResponseTime.toFixed(0)}ms</span>
                        </div>
                        <div className="flex justify-between">
                          <span>99th percentile:</span>
                          <span>{testResult.metrics.p99ResponseTime.toFixed(0)}ms</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Max:</span>
                          <span>{testResult.metrics.maxResponseTime.toFixed(0)}ms</span>
                        </div>
                      </div>
                    </div>

<div>
                      <h4 className="font-medium mb-3">Test Summary</h4>
                      <div className="space-y-2 text-sm">
                        <div className="flex justify-between">
                          <span>Duration:</span>
                          <span>{formatDuration(testResult.metrics.duration)}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Successful:</span>
                          <span className="text-green-600">{testResult.metrics.successfulRequests}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Failed:</span>
                          <span className="text-red-600">{testResult.metrics.failedRequests}</span>
                        </div>
                        <div className="flex justify-between">
                          <span>Data Transferred:</span>
                          <span>{(testResult.metrics.bytesTransferred / 1024).toFixed(1)}KB</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

{testResult.timeline.length > 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Performance Timeline</CardTitle>
                    <CardDescription>Response time and throughput over time</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="h-64">
                      <ResponsiveContainer width="100%" height="100%">
                        <LineChart data={testResult.timeline}>
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="timestamp" tickFormatter={(value) => new Date(value).toLocaleTimeString()} />
                          <YAxis />
                          <Tooltip labelFormatter={(value) => new Date(value).toLocaleTimeString()} />
                          <Line
                            type="monotone"
                            dataKey="avgResponseTime"
                            stroke="#8884d8"
                            name="Avg Response Time (ms)"
                          />
                          <Line type="monotone" dataKey="rps" stroke="#82ca9d" name="RPS" />
                        </LineChart>
                      </ResponsiveContainer>
                    </div>
                  </CardContent>
                </Card>
              )}
            </>
          ) : (
            <Card>
              <CardContent className="text-center py-8">
                <div className="text-muted-foreground">Run a performance test to see results</div>
              </CardContent>
            </Card>
          )}
        </TabsContent>

<TabsContent value="history" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Test History</CardTitle>
                  <CardDescription>Previous performance test results</CardDescription>
                </div>
                <Button variant="outline" onClick={() => setTestHistory(PerformanceTestStorage.getResults())}>
                  Refresh
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              {testHistory.length > 0 ? (
                <ScrollArea className="h-96">
                  <div className="space-y-3">
                    {testHistory.reverse().map((result, index) => (
                      <div key={index} className="flex items-center justify-between p-3 border rounded">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <span className="font-medium">{result.config.name}</span>
                            <Badge variant={result.passed ? "default" : "destructive"}>
                              {result.passed ? "PASSED" : "FAILED"}
                            </Badge>
                            <span
                              className={`px-2 py-1 rounded-full text-xs ${getTestTypeColor(result.config.testType)}`}
                            >
                              {result.config.testType}
                            </span>
                          </div>
                          <div className="text-sm text-muted-foreground">
                            {new Date(result.metrics.startTime).toLocaleString()} •{result.metrics.totalRequests}{" "}
                            requests •{result.metrics.avgResponseTime.toFixed(0)}ms avg •
                            {result.metrics.errorRate.toFixed(1)}% errors
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              ) : (
                <div className="text-center text-muted-foreground py-8">No test history available</div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="lib/monitoring.ts" isMerged="true"
export interface MonitorConfig {
  id: string
  name: string
  url: string
  method: "GET" | "POST" | "PUT" | "DELETE" | "HEAD"
  headers?: Record<string, string>
  body?: string
  interval: number // in minutes
  timeout: number // in seconds
  expectedStatus?: number[]
  expectedContent?: string
  alertThreshold: number // consecutive failures before alert
  enabled: boolean
  createdAt: Date
  lastChecked?: Date
  tags: string[]
}

export interface MonitorCheck {
  id: string
  monitorId: string
  timestamp: Date
  responseTime: number
  statusCode: number
  success: boolean
  error?: string
  size: number
  location?: string
}

export interface MonitorStats {
  uptime: number // percentage
  avgResponseTime: number
  totalChecks: number
  successfulChecks: number
  failedChecks: number
  lastFailure?: Date
  currentStatus: "up" | "down" | "degraded"
  incidents: MonitorIncident[]
}

export interface MonitorIncident {
  id: string
  monitorId: string
  startTime: Date
  endTime?: Date
  duration?: number
  status: "ongoing" | "resolved"
  failureCount: number
  checks: MonitorCheck[]
}

export interface MonitorAlert {
  id: string
  monitorId: string
  type: "email" | "webhook" | "slack"
  config: {
    email?: string
    webhookUrl?: string
    slackChannel?: string
  }
  enabled: boolean
}

export class MonitoringEngine {
  private monitors = new Map<string, MonitorConfig>()
  private checks = new Map<string, MonitorCheck[]>()
  private incidents = new Map<string, MonitorIncident[]>()
  private intervals = new Map<string, NodeJS.Timeout>()
  private alerts = new Map<string, MonitorAlert[]>()
  private onCheckComplete: (check: MonitorCheck) => void = () => {}
  private onIncidentStart: (incident: MonitorIncident) => void = () => {}
  private onIncidentEnd: (incident: MonitorIncident) => void = () => {}

setCheckHandler(handler: (check: MonitorCheck) => void) {
    this.onCheckComplete = handler
  }

setIncidentHandlers(onStart: (incident: MonitorIncident) => void, onEnd: (incident: MonitorIncident) => void) {
    this.onIncidentStart = onStart
    this.onIncidentEnd = onEnd
  }

addMonitor(config: MonitorConfig): void {
    this.monitors.set(config.id, config)
    this.checks.set(config.id, [])
    this.incidents.set(config.id, [])

if (config.enabled) {
      this.startMonitoring(config.id)
    }

this.saveToStorage()
  }

updateMonitor(config: MonitorConfig): void {
    const existing = this.monitors.get(config.id)
    if (!existing) return

this.monitors.set(config.id, config)

// Restart monitoring if interval changed or enabled/disabled
    if (existing.interval !== config.interval || existing.enabled !== config.enabled) {
      this.stopMonitoring(config.id)
      if (config.enabled) {
        this.startMonitoring(config.id)
      }
    }

this.saveToStorage()
  }

removeMonitor(id: string): void {
    this.stopMonitoring(id)
    this.monitors.delete(id)
    this.checks.delete(id)
    this.incidents.delete(id)
    this.alerts.delete(id)
    this.saveToStorage()
  }

getMonitor(id: string): MonitorConfig | undefined {
    return this.monitors.get(id)
  }

getAllMonitors(): MonitorConfig[] {
    return Array.from(this.monitors.values())
  }

getMonitorStats(id: string, timeRange = 24 * 60 * 60 * 1000): MonitorStats {
    const checks = this.getChecks(id, timeRange)
    const incidents = this.incidents.get(id) || []

const totalChecks = checks.length
    const successfulChecks = checks.filter((c) => c.success).length
    const failedChecks = totalChecks - successfulChecks

const uptime = totalChecks > 0 ? (successfulChecks / totalChecks) * 100 : 100
    const avgResponseTime =
      successfulChecks > 0
        ? checks.filter((c) => c.success).reduce((sum, c) => sum + c.responseTime, 0) / successfulChecks
        : 0

const lastFailure = checks
      .filter((c) => !c.success)
      .sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())[0]?.timestamp

const ongoingIncident = incidents.find((i) => i.status === "ongoing")
    const currentStatus = ongoingIncident ? "down" : uptime < 99 ? "degraded" : "up"

return {
      uptime,
      avgResponseTime,
      totalChecks,
      successfulChecks,
      failedChecks,
      lastFailure,
      currentStatus,
      incidents: incidents.slice(-10), // Last 10 incidents
    }
  }

getChecks(id: string, timeRange?: number): MonitorCheck[] {
    const allChecks = this.checks.get(id) || []
    if (!timeRange) return allChecks

const cutoff = new Date(Date.now() - timeRange)
    return allChecks.filter((check) => check.timestamp >= cutoff)
  }

async runCheck(id: string): Promise<MonitorCheck> {
    const monitor = this.monitors.get(id)
    if (!monitor) {
      throw new Error(`Monitor ${id} not found`)
    }

const startTime = Date.now()
    const check: MonitorCheck = {
      id: crypto.randomUUID(),
      monitorId: id,
      timestamp: new Date(),
      responseTime: 0,
      statusCode: 0,
      success: false,
      size: 0,
    }

try {
      const controller = new AbortController()
      const timeoutId = setTimeout(() => controller.abort(), monitor.timeout * 1000)

const response = await fetch(monitor.url, {
        method: monitor.method,
        headers: monitor.headers,
        body: monitor.body,
        signal: controller.signal,
      })

clearTimeout(timeoutId)

const endTime = Date.now()
      const responseText = await response.text()

check.responseTime = endTime - startTime
      check.statusCode = response.status
      check.size = new Blob([responseText]).size

// Check if response meets expectations
      const statusOk = monitor.expectedStatus ? monitor.expectedStatus.includes(response.status) : response.ok

const contentOk = monitor.expectedContent ? responseText.includes(monitor.expectedContent) : true

check.success = statusOk && contentOk

if (!check.success) {
        check.error = `Status: ${response.status}${!statusOk ? " (unexpected)" : ""}${
          !contentOk ? ", Content mismatch" : ""
        }`
      }
    } catch (error) {
      check.responseTime = Date.now() - startTime
      check.error = error instanceof Error ? error.message : "Unknown error"
    }

// Store check
    const checks = this.checks.get(id) || []
    checks.push(check)

// Keep only last 1000 checks per monitor
    if (checks.length > 1000) {
      checks.splice(0, checks.length - 1000)
    }

this.checks.set(id, checks)

// Update monitor last checked time
    monitor.lastChecked = new Date()
    this.monitors.set(id, monitor)

// Handle incidents
    this.handleIncident(id, check)

// Trigger callbacks
    this.onCheckComplete(check)

this.saveToStorage()
    return check
  }

private startMonitoring(id: string): void {
    const monitor = this.monitors.get(id)
    if (!monitor || !monitor.enabled) return

// Run initial check
    this.runCheck(id)

// Schedule recurring checks
    const interval = setInterval(
      () => {
        this.runCheck(id)
      },
      monitor.interval * 60 * 1000,
    )

this.intervals.set(id, interval)
  }

private stopMonitoring(id: string): void {
    const interval = this.intervals.get(id)
    if (interval) {
      clearInterval(interval)
      this.intervals.delete(id)
    }
  }

private handleIncident(id: string, check: MonitorCheck): void {
    const monitor = this.monitors.get(id)
    if (!monitor) return

const incidents = this.incidents.get(id) || []
    const recentChecks = this.getChecks(id, 60 * 60 * 1000) // Last hour
    const recentFailures = recentChecks.filter((c) => !c.success).slice(-monitor.alertThreshold)

const ongoingIncident = incidents.find((i) => i.status === "ongoing")

if (!check.success) {
      if (!ongoingIncident && recentFailures.length >= monitor.alertThreshold) {
        // Start new incident
        const incident: MonitorIncident = {
          id: crypto.randomUUID(),
          monitorId: id,
          startTime: recentFailures[0].timestamp,
          status: "ongoing",
          failureCount: recentFailures.length,
          checks: recentFailures,
        }

incidents.push(incident)
        this.incidents.set(id, incidents)
        this.onIncidentStart(incident)
        this.sendAlert(id, incident)
      } else if (ongoingIncident) {
        // Update ongoing incident
        ongoingIncident.failureCount++
        ongoingIncident.checks.push(check)
      }
    } else if (ongoingIncident) {
      // Resolve incident
      ongoingIncident.endTime = check.timestamp
      ongoingIncident.duration = ongoingIncident.endTime.getTime() - ongoingIncident.startTime.getTime()
      ongoingIncident.status = "resolved"
      this.onIncidentEnd(ongoingIncident)
      this.sendRecoveryAlert(id, ongoingIncident)
    }
  }

private async sendAlert(id: string, incident: MonitorIncident): Promise<void> {
    const monitor = this.monitors.get(id)
    const alerts = this.alerts.get(id) || []

if (!monitor) return

for (const alert of alerts.filter((a) => a.enabled)) {
      try {
        switch (alert.type) {
          case "webhook":
            if (alert.config.webhookUrl) {
              await fetch(alert.config.webhookUrl, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                  type: "incident_start",
                  monitor: monitor.name,
                  url: monitor.url,
                  incident,
                  timestamp: new Date().toISOString(),
                }),
              })
            }
            break
          case "email":
            // Email integration would require backend service
            console.log(`Email alert for ${monitor.name}: Incident started`)
            break
          case "slack":
            // Slack integration would require webhook URL
            console.log(`Slack alert for ${monitor.name}: Incident started`)
            break
        }
      } catch (error) {
        console.error(`Failed to send ${alert.type} alert:`, error)
      }
    }
  }

private async sendRecoveryAlert(id: string, incident: MonitorIncident): Promise<void> {
    const monitor = this.monitors.get(id)
    const alerts = this.alerts.get(id) || []

if (!monitor) return

addAlert(monitorId: string, alert: MonitorAlert): void {
    const alerts = this.alerts.get(monitorId) || []
    alerts.push(alert)
    this.alerts.set(monitorId, alerts)
    this.saveToStorage()
  }

removeAlert(monitorId: string, alertId: string): void {
    const alerts = this.alerts.get(monitorId) || []
    const filtered = alerts.filter((a) => a.id !== alertId)
    this.alerts.set(monitorId, filtered)
    this.saveToStorage()
  }

getAlerts(monitorId: string): MonitorAlert[] {
    return this.alerts.get(monitorId) || []
  }

private saveToStorage(): void {
    try {
      const data = {
        monitors: Array.from(this.monitors.entries()),
        checks: Array.from(this.checks.entries()),
        incidents: Array.from(this.incidents.entries()),
        alerts: Array.from(this.alerts.entries()),
      }
      localStorage.setItem("api_monitoring", JSON.stringify(data))
    } catch (error) {
      console.error("Failed to save monitoring data:", error)
    }
  }

loadFromStorage(): void {
    try {
      const stored = localStorage.getItem("api_monitoring")
      if (!stored) return

const data = JSON.parse(stored)

// Restore monitors
      if (data.monitors) {
        this.monitors = new Map(
          data.monitors.map(([id, config]: [string, any]) => [
            id,
            {
              ...config,
              createdAt: new Date(config.createdAt),
              lastChecked: config.lastChecked ? new Date(config.lastChecked) : undefined,
            },
          ]),
        )
      }

// Restore checks
      if (data.checks) {
        this.checks = new Map(
          data.checks.map(([id, checks]: [string, any[]]) => [
            id,
            checks.map((check) => ({
              ...check,
              timestamp: new Date(check.timestamp),
            })),
          ]),
        )
      }

// Restore incidents
      if (data.incidents) {
        this.incidents = new Map(
          data.incidents.map(([id, incidents]: [string, any[]]) => [
            id,
            incidents.map((incident) => ({
              ...incident,
              startTime: new Date(incident.startTime),
              endTime: incident.endTime ? new Date(incident.endTime) : undefined,
              checks: incident.checks.map((check: any) => ({
                ...check,
                timestamp: new Date(check.timestamp),
              })),
            })),
          ]),
        )
      }

// Restore alerts
      if (data.alerts) {
        this.alerts = new Map(data.alerts)
      }

// Restart monitoring for enabled monitors
      for (const [id, monitor] of this.monitors) {
        if (monitor.enabled) {
          this.startMonitoring(id)
        }
      }
    } catch (error) {
      console.error("Failed to load monitoring data:", error)
    }
  }

destroy(): void {
    // Stop all monitoring
    for (const id of this.monitors.keys()) {
      this.stopMonitoring(id)
    }

// Clear all data
    this.monitors.clear()
    this.checks.clear()
    this.incidents.clear()
    this.intervals.clear()
    this.alerts.clear()
  }
}

// Singleton instance
export const monitoringEngine = new MonitoringEngine()

// Auto-load on initialization
if (typeof window !== "undefined") {
  monitoringEngine.loadFromStorage()
}
[V0_FILE]typescriptreact:file="components/ApiMonitoring.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Switch } from "@/components/ui/switch"
import { useToast } from "@/hooks/use-toast"
import { monitoringEngine, type MonitorConfig, type MonitorCheck, type MonitorStats } from "@/lib/monitoring"
import { Play, Plus, Trash2, AlertTriangle, CheckCircle, XCircle, Clock, Bell } from "lucide-react"
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"

interface ApiMonitoringProps {
  className?: string
}

export function ApiMonitoring({ className }: ApiMonitoringProps) {
  const [monitors, setMonitors] = useState<MonitorConfig[]>([])
  const [selectedMonitor, setSelectedMonitor] = useState<string | null>(null)
  const [monitorStats, setMonitorStats] = useState<Record<string, MonitorStats>>({})
  const [recentChecks, setRecentChecks] = useState<MonitorCheck[]>([])
  const [showAddMonitor, setShowAddMonitor] = useState(false)
  const [newMonitor, setNewMonitor] = useState<Partial<MonitorConfig>>({
    name: "",
    url: "",
    method: "GET",
    interval: 5,
    timeout: 30,
    alertThreshold: 3,
    enabled: true,
    tags: [],
  })
  const [activeTab, setActiveTab] = useState("dashboard")
  const { toast } = useToast()

useEffect(() => {
    // Load initial data
    setMonitors(monitoringEngine.getAllMonitors())
    updateStats()

// Set up event handlers
    monitoringEngine.setCheckHandler((check) => {
      setRecentChecks((prev) => [...prev.slice(-99), check])
      updateStats()
    })

monitoringEngine.setIncidentHandlers(
      (incident) => {
        toast({
          title: "Incident Started",
          description: `${getMonitorName(incident.monitorId)} is experiencing issues`,
          variant: "destructive",
        })
      },
      (incident) => {
        const duration = incident.duration ? formatDuration(incident.duration) : "Unknown"
        toast({
          title: "Incident Resolved",
          description: `${getMonitorName(incident.monitorId)} is back online (${duration} downtime)`,
        })
      },
    )

return () => {
      // Cleanup is handled by the monitoring engine
    }
  }, [])

const updateStats = () => {
    const stats: Record<string, MonitorStats> = {}
    for (const monitor of monitoringEngine.getAllMonitors()) {
      stats[monitor.id] = monitoringEngine.getMonitorStats(monitor.id)
    }
    setMonitorStats(stats)
  }

const getMonitorName = (id: string) => {
    return monitors.find((m) => m.id === id)?.name || "Unknown Monitor"
  }

const handleAddMonitor = () => {
    if (!newMonitor.name || !newMonitor.url) {
      toast({
        title: "Invalid monitor",
        description: "Name and URL are required",
        variant: "destructive",
      })
      return
    }

const monitor: MonitorConfig = {
      id: crypto.randomUUID(),
      name: newMonitor.name,
      url: newMonitor.url,
      method: newMonitor.method || "GET",
      headers: newMonitor.headers,
      body: newMonitor.body,
      interval: newMonitor.interval || 5,
      timeout: newMonitor.timeout || 30,
      expectedStatus: newMonitor.expectedStatus,
      expectedContent: newMonitor.expectedContent,
      alertThreshold: newMonitor.alertThreshold || 3,
      enabled: newMonitor.enabled ?? true,
      createdAt: new Date(),
      tags: newMonitor.tags || [],
    }

monitoringEngine.addMonitor(monitor)
    setMonitors(monitoringEngine.getAllMonitors())
    setShowAddMonitor(false)
    setNewMonitor({
      name: "",
      url: "",
      method: "GET",
      interval: 5,
      timeout: 30,
      alertThreshold: 3,
      enabled: true,
      tags: [],
    })

toast({
      title: "Monitor added",
      description: `${monitor.name} is now being monitored`,
    })
  }

const handleDeleteMonitor = (id: string) => {
    const monitor = monitors.find((m) => m.id === id)
    if (!monitor) return

monitoringEngine.removeMonitor(id)
    setMonitors(monitoringEngine.getAllMonitors())
    if (selectedMonitor === id) {
      setSelectedMonitor(null)
    }

toast({
      title: "Monitor deleted",
      description: `${monitor.name} monitoring stopped`,
    })
  }

const handleToggleMonitor = (id: string, enabled: boolean) => {
    const monitor = monitors.find((m) => m.id === id)
    if (!monitor) return

const updated = { ...monitor, enabled }
    monitoringEngine.updateMonitor(updated)
    setMonitors(monitoringEngine.getAllMonitors())

toast({
      title: enabled ? "Monitor enabled" : "Monitor disabled",
      description: `${monitor.name} monitoring ${enabled ? "started" : "stopped"}`,
    })
  }

const handleRunCheck = async (id: string) => {
    try {
      await monitoringEngine.runCheck(id)
      toast({
        title: "Check completed",
        description: "Manual check executed successfully",
      })
    } catch (error) {
      toast({
        title: "Check failed",
        description: error instanceof Error ? error.message : "Unknown error",
        variant: "destructive",
      })
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "up":
        return "text-green-600 bg-green-100 dark:bg-green-900/30 dark:text-green-300"
      case "down":
        return "text-red-600 bg-red-100 dark:bg-red-900/30 dark:text-red-300"
      case "degraded":
        return "text-yellow-600 bg-yellow-100 dark:bg-yellow-900/30 dark:text-yellow-300"
      default:
        return "text-gray-600 bg-gray-100 dark:bg-gray-900/30 dark:text-gray-300"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "up":
        return <CheckCircle className="w-4 h-4" />
      case "down":
        return <XCircle className="w-4 h-4" />
      case "degraded":
        return <AlertTriangle className="w-4 h-4" />
      default:
        return <Clock className="w-4 h-4" />
    }
  }

const formatDuration = (ms: number) => {
    const seconds = Math.floor(ms / 1000)
    const minutes = Math.floor(seconds / 60)
    const hours = Math.floor(minutes / 60)
    const days = Math.floor(hours / 24)

if (days > 0) return `${days}d ${hours % 24}h`
    if (hours > 0) return `${hours}h ${minutes % 60}m`
    if (minutes > 0) return `${minutes}m ${seconds % 60}s`
    return `${seconds}s`
  }

const formatUptime = (uptime: number) => {
    return `${uptime.toFixed(2)}%`
  }

const getUptimeChartData = (monitorId: string) => {
    const checks = monitoringEngine.getChecks(monitorId, 24 * 60 * 60 * 1000) // Last 24 hours
    const hourlyData: Record<string, { hour: string; uptime: number; responseTime: number; count: number }> = {}

checks.forEach((check) => {
      const hour = new Date(check.timestamp).toISOString().slice(0, 13) + ":00"
      if (!hourlyData[hour]) {
        hourlyData[hour] = { hour, uptime: 0, responseTime: 0, count: 0 }
      }

hourlyData[hour].count++
      if (check.success) {
        hourlyData[hour].uptime++
        hourlyData[hour].responseTime += check.responseTime
      }
    })

return Object.values(hourlyData)
      .map((data) => ({
        hour: new Date(data.hour).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
        uptime: data.count > 0 ? (data.uptime / data.count) * 100 : 0,
        responseTime: data.uptime > 0 ? data.responseTime / data.uptime : 0,
      }))
      .slice(-24)
  }

return (
    <div className={className}>
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
          <TabsTrigger value="monitors">Monitors</TabsTrigger>
          <TabsTrigger value="incidents">Incidents</TabsTrigger>
          <TabsTrigger value="alerts">Alerts</TabsTrigger>
        </TabsList>

<TabsContent value="dashboard" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Total Monitors</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{monitors.length}</div>
                <p className="text-xs text-muted-foreground">{monitors.filter((m) => m.enabled).length} active</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Overall Uptime</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">
                  {monitors.length > 0
                    ? formatUptime(
                        Object.values(monitorStats).reduce((sum, stats) => sum + stats.uptime, 0) / monitors.length,
                      )
                    : "100%"}
                </div>
                <p className="text-xs text-muted-foreground">Last 24 hours</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Active Incidents</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">
                  {Object.values(monitorStats).reduce(
                    (sum, stats) => sum + stats.incidents.filter((i) => i.status === "ongoing").length,
                    0,
                  )}
                </div>
                <p className="text-xs text-muted-foreground">Ongoing issues</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Avg Response Time</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">
                  {monitors.length > 0
                    ? Math.round(
                        Object.values(monitorStats).reduce((sum, stats) => sum + stats.avgResponseTime, 0) /
                          monitors.length,
                      )
                    : 0}
                  ms
                </div>
                <p className="text-xs text-muted-foreground">Last 24 hours</p>
              </CardContent>
            </Card>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Monitor Status</CardTitle>
                <CardDescription>Current status of all monitors</CardDescription>
              </CardHeader>
              <CardContent>
                <ScrollArea className="h-64">
                  <div className="space-y-2">
                    {monitors.map((monitor) => {
                      const stats = monitorStats[monitor.id]
                      return (
                        <div key={monitor.id} className="flex items-center justify-between p-3 border rounded">
                          <div className="flex items-center gap-3">
                            {getStatusIcon(stats?.currentStatus || "unknown")}
                            <div>
                              <div className="font-medium">{monitor.name}</div>
                              <div className="text-sm text-muted-foreground">{monitor.url}</div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Badge className={getStatusColor(stats?.currentStatus || "unknown")}>
                              {stats?.currentStatus || "unknown"}
                            </Badge>
                            <span className="text-sm text-muted-foreground">
                              {stats ? formatUptime(stats.uptime) : "N/A"}
                            </span>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </ScrollArea>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Recent Activity</CardTitle>
                <CardDescription>Latest monitoring checks</CardDescription>
              </CardHeader>
              <CardContent>
                <ScrollArea className="h-64">
                  <div className="space-y-2">
                    {recentChecks
                      .slice(-20)
                      .reverse()
                      .map((check) => (
                        <div key={check.id} className="flex items-center justify-between p-2 border rounded text-sm">
                          <div className="flex items-center gap-2">
                            {check.success ? (
                              <CheckCircle className="w-4 h-4 text-green-600" />
                            ) : (
                              <XCircle className="w-4 h-4 text-red-600" />
                            )}
                            <span>{getMonitorName(check.monitorId)}</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <Badge variant={check.success ? "default" : "destructive"}>{check.statusCode}</Badge>
                            <span>{check.responseTime}ms</span>
                            <span className="text-muted-foreground">{check.timestamp.toLocaleTimeString()}</span>
                          </div>
                        </div>
                      ))}
                  </div>
                </ScrollArea>
              </CardContent>
            </Card>
          </div>

{selectedMonitor && (
            <Card>
              <CardHeader>
                <CardTitle>Monitor Details</CardTitle>
                <CardDescription>{getMonitorName(selectedMonitor)} - 24 Hour Overview</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-64">
                  <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={getUptimeChartData(selectedMonitor)}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="hour" />
                      <YAxis />
                      <Tooltip />
                      <Area type="monotone" dataKey="uptime" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
                    </AreaChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>
          )}
        </TabsContent>

<TabsContent value="monitors" className="space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-medium">Monitors</h3>
            <Button onClick={() => setShowAddMonitor(true)}>
              <Plus className="w-4 h-4 mr-2" />
              Add Monitor
            </Button>
          </div>

{showAddMonitor && (
            <Card>
              <CardHeader>
                <CardTitle>Add New Monitor</CardTitle>
                <CardDescription>Configure a new endpoint to monitor</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="monitor-name">Monitor Name</Label>
                    <Input
                      id="monitor-name"
                      value={newMonitor.name || ""}
                      onChange={(e) => setNewMonitor((prev) => ({ ...prev, name: e.target.value }))}
                      placeholder="My API"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="monitor-url">URL</Label>
                    <Input
                      id="monitor-url"
                      value={newMonitor.url || ""}
                      onChange={(e) => setNewMonitor((prev) => ({ ...prev, url: e.target.value }))}
                      placeholder="https://api.example.com/health"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="monitor-method">HTTP Method</Label>
                    <Select
                      value={newMonitor.method || "GET"}
                      onValueChange={(value: any) => setNewMonitor((prev) => ({ ...prev, method: value }))}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="GET">GET</SelectItem>
                        <SelectItem value="POST">POST</SelectItem>
                        <SelectItem value="PUT">PUT</SelectItem>
                        <SelectItem value="DELETE">DELETE</SelectItem>
                        <SelectItem value="HEAD">HEAD</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="monitor-interval">Check Interval (minutes)</Label>
                    <Input
                      id="monitor-interval"
                      type="number"
                      value={newMonitor.interval || 5}
                      onChange={(e) =>
                        setNewMonitor((prev) => ({ ...prev, interval: Number.parseInt(e.target.value) || 5 }))
                      }
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="monitor-timeout">Timeout (seconds)</Label>
                    <Input
                      id="monitor-timeout"
                      type="number"
                      value={newMonitor.timeout || 30}
                      onChange={(e) =>
                        setNewMonitor((prev) => ({ ...prev, timeout: Number.parseInt(e.target.value) || 30 }))
                      }
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="alert-threshold">Alert Threshold (failures)</Label>
                    <Input
                      id="alert-threshold"
                      type="number"
                      value={newMonitor.alertThreshold || 3}
                      onChange={(e) =>
                        setNewMonitor((prev) => ({ ...prev, alertThreshold: Number.parseInt(e.target.value) || 3 }))
                      }
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="monitor-headers">Headers (JSON)</Label>
                  <Textarea
                    id="monitor-headers"
                    value={JSON.stringify(newMonitor.headers || {}, null, 2)}
                    onChange={(e) => {
                      try {
                        const headers = JSON.parse(e.target.value || "{}")
                        setNewMonitor((prev) => ({ ...prev, headers }))
                      } catch {
                        // Invalid JSON, ignore
                      }
                    }}
                    rows={3}
                    placeholder='{"Authorization": "Bearer token"}'
                  />
                </div>

<div className="flex items-center space-x-2">
                  <Switch
                    id="monitor-enabled"
                    checked={newMonitor.enabled ?? true}
                    onCheckedChange={(enabled) => setNewMonitor((prev) => ({ ...prev, enabled }))}
                  />
                  <Label htmlFor="monitor-enabled">Enable monitoring</Label>
                </div>

<div className="flex gap-2">
                  <Button onClick={handleAddMonitor}>Add Monitor</Button>
                  <Button variant="outline" onClick={() => setShowAddMonitor(false)}>
                    Cancel
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {monitors.map((monitor) => {
              const stats = monitorStats[monitor.id]
              return (
                <Card key={monitor.id} className="cursor-pointer" onClick={() => setSelectedMonitor(monitor.id)}>
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-base">{monitor.name}</CardTitle>
                      <div className="flex items-center gap-2">
                        <Badge className={getStatusColor(stats?.currentStatus || "unknown")}>
                          {stats?.currentStatus || "unknown"}
                        </Badge>
                        <Switch
                          checked={monitor.enabled}
                          onCheckedChange={(enabled) => handleToggleMonitor(monitor.id, enabled)}
                          onClick={(e) => e.stopPropagation()}
                        />
                      </div>
                    </div>
                    <CardDescription className="truncate">{monitor.url}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-4 text-sm">
                      <div>
                        <div className="text-muted-foreground">Uptime</div>
                        <div className="font-medium">{stats ? formatUptime(stats.uptime) : "N/A"}</div>
                      </div>
                      <div>
                        <div className="text-muted-foreground">Response</div>
                        <div className="font-medium">{stats ? `${Math.round(stats.avgResponseTime)}ms` : "N/A"}</div>
                      </div>
                      <div>
                        <div className="text-muted-foreground">Interval</div>
                        <div className="font-medium">{monitor.interval}m</div>
                      </div>
                      <div>
                        <div className="text-muted-foreground">Last Check</div>
                        <div className="font-medium">
                          {monitor.lastChecked ? monitor.lastChecked.toLocaleTimeString() : "Never"}
                        </div>
                      </div>
                    </div>

<div className="flex gap-2 mt-4" onClick={(e) => e.stopPropagation()}>
                      <Button size="sm" variant="outline" onClick={() => handleRunCheck(monitor.id)}>
                        <Play className="w-3 h-3 mr-1" />
                        Test
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => handleDeleteMonitor(monitor.id)}>
                        <Trash2 className="w-3 h-3" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </TabsContent>

<TabsContent value="incidents" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Recent Incidents</CardTitle>
              <CardDescription>Monitor downtime and incident history</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-96">
                <div className="space-y-3">
                  {Object.entries(monitorStats)
                    .flatMap(([monitorId, stats]) => stats.incidents.map((incident) => ({ ...incident, monitorId })))
                    .sort((a, b) => b.startTime.getTime() - a.startTime.getTime())
                    .map((incident) => (
                      <div key={incident.id} className="flex items-center justify-between p-3 border rounded">
                        <div className="flex items-center gap-3">
                          {incident.status === "ongoing" ? (
                            <AlertTriangle className="w-5 h-5 text-red-600" />
                          ) : (
                            <CheckCircle className="w-5 h-5 text-green-600" />
                          )}
                          <div>
                            <div className="font-medium">{getMonitorName(incident.monitorId)}</div>
                            <div className="text-sm text-muted-foreground">
                              Started {incident.startTime.toLocaleString()}
                              {incident.endTime && ` • Resolved ${incident.endTime.toLocaleString()}`}
                            </div>
                          </div>
                        </div>
                        <div className="text-right">
                          <Badge variant={incident.status === "ongoing" ? "destructive" : "default"}>
                            {incident.status}
                          </Badge>
                          <div className="text-sm text-muted-foreground mt-1">
                            {incident.duration ? formatDuration(incident.duration) : "Ongoing"}
                          </div>
                        </div>
                      </div>
                    ))}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="alerts" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Alert Configuration</CardTitle>
              <CardDescription>Set up notifications for monitor incidents</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="text-center py-8 text-muted-foreground">
                <Bell className="w-12 h-12 mx-auto mb-4 opacity-50" />
                <p>Alert configuration coming soon</p>
                <p className="text-sm">Webhook, email, and Slack integrations will be available in the next update</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useCallback, useRef, useEffect } from "react"
import { motion } from "framer-motion"
import { Editor } from "@/components/Editor"
import { JsonTree } from "@/components/JsonTree"
import { Toolbar } from "@/components/Toolbar"
import { StatsBar } from "@/components/StatsBar"
import { FileDrop } from "@/components/FileDrop"
import { DiffViewer } from "@/components/DiffViewer"
import { ApiIntegration } from "@/components/ApiIntegration"
import { WebSocketTesting } from "@/components/WebSocketTesting"
import { GraphQLPlayground } from "@/components/GraphQLPlayground"
import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { useHistory } from "@/hooks/use-history"
import { detectFormat } from "@/lib/detect"
import { convertToJson } from "@/lib/convert"
import { formatJson } from "@/lib/pretty"
import { loadStateFromUrl, getShareUrl } from "@/lib/share"
import { parseWorker, shouldUseWorker } from "@/lib/worker"
import { PerformanceTesting } from "@/components/PerformanceTesting"
import { ApiMonitoring } from "@/components/ApiMonitoring"

export interface ParsedData {
  json: any
  formatted: string
  stats: {
    size: number
    lines: number
    keys: number
    arrays: number
    depth: number
  }
  errors: Array<{
    line: number
    column: number
    message: string
    snippet: string
  }>
}

export interface FormatOptions {
  indent: 2 | 4 | "tab"
  sortKeys: boolean
  removeEmpty: boolean
  minify: boolean
}

export default function JsonFormatterPage() {
  const {
    state: input,
    setState: setInput,
    undo,
    redo,
    canUndo,
    canRedo,
    clear: clearHistory,
    historySize,
  } = useHistory("")

const [parsedData, setParsedData] = useState<ParsedData | null>(null)
  const [formatOptions, setFormatOptions] = useState<FormatOptions>({
    indent: 2,
    sortKeys: false,
    removeEmpty: false,
    minify: false,
  })
  const [isLoading, setIsLoading] = useState(false)
  const [isDragging, setIsDragging] = useState(false)
  const [parseProgress, setParseProgress] = useState(0)
  const [showProgress, setShowProgress] = useState(false)
  const [activeTab, setActiveTab] = useState("formatter")
  const fileInputRef = useRef<HTMLInputElement>(null)
  const parseTimeoutRef = useRef<NodeJS.Timeout>()
  const { toast } = useToast()

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === "z") {
        e.preventDefault()
        if (canUndo) {
          undo()
          toast({
            title: "Undone",
            description: "Reverted to previous state",
          })
        }
      } else if (
        ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "Z") ||
        ((e.ctrlKey || e.metaKey) && e.key === "y")
      ) {
        e.preventDefault()
        if (canRedo) {
          redo()
          toast({
            title: "Redone",
            description: "Restored next state",
          })
        }
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [canUndo, canRedo, undo, redo, toast])

useEffect(() => {
    const savedState = loadStateFromUrl()
    if (savedState) {
      setInput(savedState.input)
      setFormatOptions(savedState.options)

if (savedState.input.trim()) {
        handleParse(savedState.input)
      }

toast({
        title: "State restored",
        description: "Loaded data from shared URL",
      })
    }
  }, [setInput])

useEffect(() => {
    if (input || Object.values(formatOptions).some((v) => v !== false && v !== 2)) {
      const newUrl = getShareUrl(input, formatOptions)
      const currentUrl = window.location.href.split("?")[0]

if (newUrl !== currentUrl) {
        window.history.replaceState({}, "", newUrl)
      }
    }
  }, [input, formatOptions])

useEffect(() => {
    return () => {
      parseWorker.terminate()
      if (parseTimeoutRef.current) {
        clearTimeout(parseTimeoutRef.current)
      }
    }
  }, [])

const handleParse = useCallback(
    async (text: string) => {
      if (!text.trim()) {
        setParsedData(null)
        return
      }

// Clear any existing timeout
      if (parseTimeoutRef.current) {
        clearTimeout(parseTimeoutRef.current)
      }

setIsLoading(true)
      setParseProgress(0)

const useWorker = shouldUseWorker(text)
      if (useWorker) {
        setShowProgress(true)
      }

try {
        let result

if (useWorker) {
          // Use Web Worker for large files
          const format = detectFormat(text)
          result = await parseWorker.parseInWorker(text, format, formatOptions, (progress) => {
            setParseProgress(progress)
          })

// Handle worker result format
          if (result.success) {
            const formatted = formatJson(result.data, formatOptions)
            const stats = calculateStats(result.data, formatted)

setParsedData({
              json: result.data,
              formatted,
              stats,
              errors: [],
            })

toast({
              title: "Parse successful",
              description: `Converted ${result.format} to JSON (${(result.originalSize / 1024).toFixed(1)}KB)`,
            })
          } else {
            setParsedData({
              json: null,
              formatted: "",
              stats: { size: 0, lines: 0, keys: 0, arrays: 0, depth: 0 },
              errors: result.errors || [],
            })

toast({
              title: "Parse failed",
              description: result.errors?.[0]?.message || "Invalid format",
              variant: "destructive",
            })
          }
        } else {
          // Use main thread for smaller files
          const format = detectFormat(text)
          result = await convertToJson(text, format)

if (result.success) {
            const formatted = formatJson(result.data, formatOptions)
            const stats = calculateStats(result.data, formatted)

setParsedData({
              json: result.data,
              formatted,
              stats,
              errors: [],
            })

toast({
              title: "Parse successful",
              description: `Converted ${format} to JSON`,
            })
          } else {
            setParsedData({
              json: null,
              formatted: "",
              stats: { size: 0, lines: 0, keys: 0, arrays: 0, depth: 0 },
              errors: result.errors || [],
            })

toast({
              title: "Parse failed",
              description: result.errors?.[0]?.message || "Invalid format",
              variant: "destructive",
            })
          }
        }
      } catch (error) {
        toast({
          title: "Parse error",
          description: error instanceof Error ? error.message : "Unknown error",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
        setShowProgress(false)
        setParseProgress(0)
      }
    },
    [formatOptions, toast],
  )

const handleFormatOptionsChange = useCallback(
    (newOptions: FormatOptions) => {
      setFormatOptions(newOptions)

if (parsedData?.json) {
        const formatted = formatJson(parsedData.json, newOptions)
        const stats = calculateStats(parsedData.json, formatted)

setParsedData((prev) =>
          prev
            ? {
                ...prev,
                formatted,
                stats,
              }
            : null,
        )
      }
    },
    [parsedData?.json],
  )

const handleFileUpload = useCallback(
    (file: File) => {
      const reader = new FileReader()
      reader.onload = (e) => {
        const content = e.target?.result as string
        setInput(content)
        handleParse(content)
      }
      reader.readAsText(file)
    },
    [handleParse],
  )

const handleClear = useCallback(() => {
    setInput("")
    setParsedData(null)
    clearHistory()

window.history.replaceState({}, "", window.location.pathname)

toast({
      title: "Cleared",
      description: "All data, history, and URL state cleared",
    })
  }, [setInput, clearHistory, toast])

const handleApiDataReceived = useCallback(
    (data: string) => {
      setInput(data)
      handleParse(data)
      setActiveTab("formatter") // Switch to formatter tab to show the result
    },
    [setInput, handleParse],
  )

const calculateStats = (json: any, formatted: string) => {
    const size = new Blob([formatted]).size
    const lines = formatted.split("\n").length

let keys = 0
    let arrays = 0
    let depth = 0

const traverse = (obj: any, currentDepth = 0) => {
      depth = Math.max(depth, currentDepth)

if (Array.isArray(obj)) {
        arrays++
        obj.forEach((item) => traverse(item, currentDepth + 1))
      } else if (obj && typeof obj === "object") {
        keys += Object.keys(obj).length
        Object.values(obj).forEach((value) => traverse(value, currentDepth + 1))
      }
    }

if (json) traverse(json)

return { size, lines, keys, arrays, depth }
  }

// Debounced parsing to avoid excessive re-parsing
  const debouncedParse = useCallback(
    (text: string) => {
      if (parseTimeoutRef.current) {
        clearTimeout(parseTimeoutRef.current)
      }

parseTimeoutRef.current = setTimeout(() => {
        handleParse(text)
      }, 300) // 300ms debounce
    },
    [handleParse],
  )

return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <div className="min-h-screen bg-background">
        <div className="container mx-auto p-4 max-w-7xl">
          <header className="mb-6">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-sm">{}</span>
              </div>
              <div>
                <h1 className="text-3xl font-bold text-foreground">JSON Formatter</h1>
                <p className="text-sm text-muted-foreground">by Spectrum UI</p>
              </div>
            </div>
            <p className="text-muted-foreground">
              Professional JSON formatter, validator, and converter. Transform JSON to CSV, XML, YAML with advanced
              features like tree view, diff comparison, API integration, and JSONPath search.
            </p>
            <div className="flex flex-wrap gap-2 mt-3">
              <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs rounded-full">
                Free Online Tool
              </span>
              <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs rounded-full">
                No Registration Required
              </span>
              <span className="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs rounded-full">
                Privacy Focused
              </span>
            </div>
          </header>

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-7 mb-6">
              <TabsTrigger value="formatter">Formatter</TabsTrigger>
              <TabsTrigger value="diff">Diff Viewer</TabsTrigger>
              <TabsTrigger value="api">API Integration</TabsTrigger>
              <TabsTrigger value="websocket">WebSocket</TabsTrigger>
              <TabsTrigger value="graphql">GraphQL</TabsTrigger>
              <TabsTrigger value="performance">Performance</TabsTrigger>
              <TabsTrigger value="monitoring">Monitoring</TabsTrigger>
            </TabsList>

<TabsContent value="formatter" className="space-y-4">
              {showProgress && (
                <motion.div
                  className="mb-4 p-3 bg-card border rounded-lg"
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                >
                  <div className="flex items-center justify-between text-sm mb-2">
                    <span>Processing large file...</span>
                    <span>{Math.round(parseProgress)}%</span>
                  </div>
                  <Progress value={parseProgress} className="h-2" />
                </motion.div>
              )}

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-[calc(100vh-280px)]">
                <motion.div
                  className="space-y-4"
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.3 }}
                >
                  <Toolbar
                    formatOptions={formatOptions}
                    onFormatChange={handleFormatOptionsChange}
                    onFileUpload={() => fileInputRef.current?.click()}
                    onClear={handleClear}
                    parsedData={parsedData}
                    input={input}
                    canUndo={canUndo}
                    canRedo={canRedo}
                    onUndo={undo}
                    onRedo={redo}
                    historySize={historySize}
                  />

<motion.div
                  className="space-y-4"
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.3, delay: 0.1 }}
                >
                  <JsonTree data={parsedData} formatOptions={formatOptions} />
                </motion.div>
              </div>
            </TabsContent>

<input
            ref={fileInputRef}
            type="file"
            accept=".json,.csv,.xml,.yaml,.yml,.txt"
            onChange={(e) => {
              const file = e.target.files?.[0]
              if (file) handleFileUpload(file)
            }}
            className="hidden"
          />
        </div>

<footer className="border-t bg-card/50 mt-12">
          <div className="container mx-auto p-4 max-w-7xl">
            <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <span>Powered by</span>
                <a
                  href="https://spectrumhq.in"
                  className="font-semibold text-foreground hover:text-blue-600 transition-colors"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Spectrum UI
                </a>
              </div>
              <div className="flex items-center gap-4">
                <span>Free JSON Tools for Developers</span>
                <span>•</span>
                <span>json.spectrumhq.in</span>
              </div>
            </div>
          </div>
        </footer>
      </div>
      <Toaster />
    </ThemeProvider>
  )
}
[V0_FILE]typescriptreact:file="components/DiffViewer.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useMemo } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Plus, Minus, Edit, ArrowLeftRight, Copy, FileText } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { deepDiff, formatDiffPath, getDiffStats, type DiffResult } from "@/lib/diff"
import { convertToJson } from "@/lib/convert"
import { detectFormat } from "@/lib/detect"

interface DiffViewerProps {
  className?: string
}

export function DiffViewer({ className }: DiffViewerProps) {
  const [leftInput, setLeftInput] = useState("")
  const [rightInput, setRightInput] = useState("")
  const [leftJson, setLeftJson] = useState<any>(null)
  const [rightJson, setRightJson] = useState<any>(null)
  const [leftError, setLeftError] = useState<string>("")
  const [rightError, setRightError] = useState<string>("")
  const { toast } = useToast()

const diffs = useMemo(() => {
    if (!leftJson || !rightJson) return []
    return deepDiff(leftJson, rightJson)
  }, [leftJson, rightJson])

const stats = useMemo(() => getDiffStats(diffs), [diffs])

const renderGitHubStyleDiff = () => {
    if (!leftJson || !rightJson) return null

const leftLines = JSON.stringify(leftJson, null, 2).split("\n")
    const rightLines = JSON.stringify(rightJson, null, 2).split("\n")
    const diffMap = new Map<string, DiffResult>()

// Create a map of paths to diff results for quick lookup
    diffs.forEach((diff) => {
      const pathKey = formatDiffPath(diff.path)
      diffMap.set(pathKey, diff)
    })

return (
      <div className="border rounded-lg overflow-hidden bg-background">
        <div className="bg-muted px-4 py-2 border-b">
          <div className="flex items-center gap-2 text-sm font-medium">
            <FileText className="h-4 w-4" />
            Diff View
          </div>
        </div>
        <div className="grid grid-cols-2 divide-x">
          <div>
            <div className="bg-red-50 dark:bg-red-950/20 px-2 py-1 text-xs font-medium text-red-800 dark:text-red-200 border-b">
              Original
            </div>
            <ScrollArea className="h-[500px]">
              <pre className="text-xs leading-relaxed">{renderJsonWithHighlights(leftJson, "removed")}</pre>
            </ScrollArea>
          </div>
          <div>
            <div className="bg-green-50 dark:bg-green-950/20 px-2 py-1 text-xs font-medium text-green-800 dark:text-green-200 border-b">
              Modified
            </div>
            <ScrollArea className="h-[500px]">
              <pre className="text-xs leading-relaxed">{renderJsonWithHighlights(rightJson, "added")}</pre>
            </ScrollArea>
          </div>
        </div>
      </div>
    )
  }

const renderJsonWithHighlights = (obj: any, diffType: "added" | "removed", path: string[] = []): React.ReactNode => {
    if (obj === null) return <span className="text-gray-500">null</span>
    if (typeof obj === "string") return <span className="text-green-600">"{obj}"</span>
    if (typeof obj === "number") return <span className="text-blue-600">{obj}</span>
    if (typeof obj === "boolean") return <span className="text-purple-600">{obj.toString()}</span>

if (Array.isArray(obj)) {
      return (
        <span>
          {"[\n"}
          {obj.map((item, index) => {
            const currentPath = [...path, index.toString()]
            const pathKey = formatDiffPath(currentPath)
            const diff = diffs.find((d) => formatDiffPath(d.path) === pathKey)
            const isHighlighted =
              diff &&
              ((diffType === "added" && (diff.type === "added" || diff.type === "modified")) ||
                (diffType === "removed" && (diff.type === "removed" || diff.type === "modified")))

return (
              <span key={index}>
                {"  "}
                <span className={isHighlighted ? getHighlightClass(diff?.type || "unchanged", diffType) : ""}>
                  {renderJsonWithHighlights(item, diffType, currentPath)}
                </span>
                {index < obj.length - 1 ? "," : ""}
                {"\n"}
              </span>
            )
          })}
          {"]"}
        </span>
      )
    }

if (typeof obj === "object") {
      const entries = Object.entries(obj)
      return (
        <span>
          {"{\n"}
          {entries.map(([key, value], index) => {
            const currentPath = [...path, key]
            const pathKey = formatDiffPath(currentPath)
            const diff = diffs.find((d) => formatDiffPath(d.path) === pathKey)
            const isHighlighted =
              diff &&
              ((diffType === "added" && (diff.type === "added" || diff.type === "modified")) ||
                (diffType === "removed" && (diff.type === "removed" || diff.type === "modified")))

return (
              <span key={key}>
                {"  "}
                <span className={isHighlighted ? getHighlightClass(diff?.type || "unchanged", diffType) : ""}>
                  <span className="text-blue-800 dark:text-blue-200">"{key}"</span>
                  {": "}
                  {renderJsonWithHighlights(value, diffType, currentPath)}
                </span>
                {index < entries.length - 1 ? "," : ""}
                {"\n"}
              </span>
            )
          })}
          {"}"}
        </span>
      )
    }

return <span>{String(obj)}</span>
  }

const getHighlightClass = (diffType: string, side: "added" | "removed"): string => {
    if (diffType === "added" && side === "added") {
      return "bg-green-100 dark:bg-green-900/30 px-1 rounded"
    }
    if (diffType === "removed" && side === "removed") {
      return "bg-red-100 dark:bg-red-900/30 px-1 rounded"
    }
    if (diffType === "modified") {
      return side === "added"
        ? "bg-green-100 dark:bg-green-900/30 px-1 rounded"
        : "bg-red-100 dark:bg-red-900/30 px-1 rounded"
    }
    return ""
  }

const parseInput = async (input: string, side: "left" | "right") => {
    if (!input.trim()) {
      if (side === "left") {
        setLeftJson(null)
        setLeftError("")
      } else {
        setRightJson(null)
        setRightError("")
      }
      return
    }

try {
      const format = detectFormat(input)
      const result = await convertToJson(input, format)

if (result.success) {
        if (side === "left") {
          setLeftJson(result.data)
          setLeftError("")
        } else {
          setRightJson(result.data)
          setRightError("")
        }
      } else {
        const errorMsg = result.errors?.[0]?.message || "Invalid format"
        if (side === "left") {
          setLeftJson(null)
          setLeftError(errorMsg)
        } else {
          setRightJson(null)
          setRightError(errorMsg)
        }
      }
    } catch (error) {
      const errorMsg = error instanceof Error ? error.message : "Parse error"
      if (side === "left") {
        setLeftJson(null)
        setLeftError(errorMsg)
      } else {
        setRightJson(null)
        setRightError(errorMsg)
      }
    }
  }

const handleSwap = () => {
    const tempInput = leftInput
    const tempJson = leftJson
    const tempError = leftError

setLeftInput(rightInput)
    setLeftJson(rightJson)
    setLeftError(rightError)

setRightInput(tempInput)
    setRightJson(tempJson)
    setRightError(tempError)

toast({
      title: "Swapped",
      description: "Left and right inputs have been swapped",
    })
  }

const handleClear = () => {
    setLeftInput("")
    setRightInput("")
    setLeftJson(null)
    setRightJson(null)
    setLeftError("")
    setRightError("")

toast({
      title: "Cleared",
      description: "All diff data cleared",
    })
  }

const copyDiffReport = async () => {
    if (diffs.length === 0) return

const report = generateDiffReport(diffs, stats)

try {
      await navigator.clipboard.writeText(report)
      toast({
        title: "Copied",
        description: "Diff report copied to clipboard",
      })
    } catch (error) {
      toast({
        title: "Copy failed",
        description: "Unable to copy diff report",
        variant: "destructive",
      })
    }
  }

return (
    <div className={className}>
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <ArrowLeftRight className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium">JSON Difference Viewer</span>
            {stats.total > 0 && (
              <div className="flex gap-1">
                <Badge variant="outline" className="text-xs">
                  <Plus className="h-3 w-3 mr-1 text-green-600" />
                  {stats.added}
                </Badge>
                <Badge variant="outline" className="text-xs">
                  <Minus className="h-3 w-3 mr-1 text-red-600" />
                  {stats.removed}
                </Badge>
                <Badge variant="outline" className="text-xs">
                  <Edit className="h-3 w-3 mr-1 text-yellow-600" />
                  {stats.modified}
                </Badge>
              </div>
            )}
          </div>

<div className="flex gap-1">
            <Button size="sm" variant="outline" onClick={handleSwap} disabled={!leftInput && !rightInput}>
              <ArrowLeftRight className="h-3 w-3 mr-1" />
              Swap
            </Button>
            <Button size="sm" variant="outline" onClick={copyDiffReport} disabled={diffs.length === 0}>
              <Copy className="h-3 w-3 mr-1" />
              Copy Report
            </Button>
            <Button size="sm" variant="outline" onClick={handleClear}>
              Clear
            </Button>
          </div>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <FileText className="h-4 w-4" />
                Original (Left)
                {leftError && (
                  <Badge variant="destructive" className="text-xs">
                    Error
                  </Badge>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Textarea
                value={leftInput}
                onChange={(e) => {
                  setLeftInput(e.target.value)
                  parseInput(e.target.value, "left")
                }}
                placeholder="Paste your original JSON, CSV, XML, or YAML here..."
                className="min-h-[200px] font-mono text-sm"
              />
              {leftError && <p className="text-sm text-red-600 mt-2">{leftError}</p>}
            </CardContent>
          </Card>

<Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm flex items-center gap-2">
                <FileText className="h-4 w-4" />
                Modified (Right)
                {rightError && (
                  <Badge variant="destructive" className="text-xs">
                    Error
                  </Badge>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Textarea
                value={rightInput}
                onChange={(e) => {
                  setRightInput(e.target.value)
                  parseInput(e.target.value, "right")
                }}
                placeholder="Paste your modified JSON, CSV, XML, or YAML here..."
                className="min-h-[200px] font-mono text-sm"
              />
              {rightError && <p className="text-sm text-red-600 mt-2">{rightError}</p>}
            </CardContent>
          </Card>
        </div>

{diffs.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">Differences</CardTitle>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue="github" className="w-full">
                <TabsList className="grid w-full grid-cols-3">
                  <TabsTrigger value="github">GitHub Style</TabsTrigger>
                  <TabsTrigger value="list">List View</TabsTrigger>
                  <TabsTrigger value="side-by-side">Side by Side</TabsTrigger>
                </TabsList>

<TabsContent value="github" className="mt-4">
                  {renderGitHubStyleDiff()}
                </TabsContent>

<TabsContent value="list" className="mt-4">
                  <ScrollArea className="h-[400px]">
                    <div className="space-y-2">
                      {diffs.map((diff, index) => (
                        <DiffItem key={index} diff={diff} />
                      ))}
                    </div>
                  </ScrollArea>
                </TabsContent>

<TabsContent value="side-by-side" className="mt-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <h4 className="text-sm font-medium mb-2">Original</h4>
                      <ScrollArea className="h-[400px]">
                        <pre className="text-xs bg-muted p-3 rounded">{JSON.stringify(leftJson, null, 2)}</pre>
                      </ScrollArea>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium mb-2">Modified</h4>
                      <ScrollArea className="h-[400px]">
                        <pre className="text-xs bg-muted p-3 rounded">{JSON.stringify(rightJson, null, 2)}</pre>
                      </ScrollArea>
                    </div>
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}

function DiffItem({ diff }: { diff: DiffResult }) {
  const getIcon = () => {
    switch (diff.type) {
      case "added":
        return <Plus className="h-3 w-3 text-green-600" />
      case "removed":
        return <Minus className="h-3 w-3 text-red-600" />
      case "modified":
        return <Edit className="h-3 w-3 text-yellow-600" />
      default:
        return null
    }
  }

const getBgColor = () => {
    switch (diff.type) {
      case "added":
        return "bg-green-50 border-green-200 dark:bg-green-950 dark:border-green-800"
      case "removed":
        return "bg-red-50 border-red-200 dark:bg-red-950 dark:border-red-800"
      case "modified":
        return "bg-yellow-50 border-yellow-200 dark:bg-yellow-950 dark:border-yellow-800"
      default:
        return "bg-muted"
    }
  }

if (diff.type === "unchanged") return null

return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className={`p-3 rounded-lg border ${getBgColor()}`}
    >
      <div className="flex items-start gap-2">
        {getIcon()}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <code className="text-xs font-mono bg-background px-1 py-0.5 rounded">{formatDiffPath(diff.path)}</code>
            <Badge variant="outline" className="text-xs">
              {diff.type}
            </Badge>
          </div>

{diff.type === "added" && (
            <div className="text-sm">
              <span className="text-muted-foreground">Added: </span>
              <code className="bg-background px-1 py-0.5 rounded text-xs">{JSON.stringify(diff.newValue)}</code>
            </div>
          )}

{diff.type === "removed" && (
            <div className="text-sm">
              <span className="text-muted-foreground">Removed: </span>
              <code className="bg-background px-1 py-0.5 rounded text-xs">{JSON.stringify(diff.oldValue)}</code>
            </div>
          )}

{diff.type === "modified" && (
            <div className="text-sm space-y-1">
              <div>
                <span className="text-muted-foreground">From: </span>
                <code className="bg-background px-1 py-0.5 rounded text-xs">{JSON.stringify(diff.oldValue)}</code>
              </div>
              <div>
                <span className="text-muted-foreground">To: </span>
                <code className="bg-background px-1 py-0.5 rounded text-xs">{JSON.stringify(diff.newValue)}</code>
              </div>
            </div>
          )}
        </div>
      </div>
    </motion.div>
  )
}

function generateDiffReport(diffs: DiffResult[], stats: ReturnType<typeof getDiffStats>): string {
  const lines = [
    "# JSON Difference Report",
    "",
    `## Summary`,
    `- Added: ${stats.added}`,
    `- Removed: ${stats.removed}`,
    `- Modified: ${stats.modified}`,
    `- Total changes: ${stats.added + stats.removed + stats.modified}`,
    "",
    "## Changes",
    "",
  ]

for (const diff of diffs) {
    if (diff.type === "unchanged") continue

const path = formatDiffPath(diff.path)
    const icon = diff.type === "added" ? "+" : diff.type === "removed" ? "-" : "~"

lines.push(`### ${icon} ${path}`)
    lines.push(`**Type:** ${diff.type}`)

if (diff.type === "added") {
      lines.push(`**Value:** \`${JSON.stringify(diff.newValue)}\``)
    } else if (diff.type === "removed") {
      lines.push(`**Value:** \`${JSON.stringify(diff.oldValue)}\``)
    } else if (diff.type === "modified") {
      lines.push(`**From:** \`${JSON.stringify(diff.oldValue)}\``)
      lines.push(`**To:** \`${JSON.stringify(diff.newValue)}\``)
    }

lines.push("")
  }

return lines.join("\n")
}</article></body></html>