52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T282f,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; type HttpStatus = | "info" | "success" | "redirect" | "client-error" | "server-error"; interface ApiResponse { status: number; statusText?: string; headers?: Record; body?: unknown; timing?: { dns?: number; connect?: number; ttfb?: number; download?: number; total: number; }; } interface ApiResponseViewerProps { response: ApiResponse; defaultTab?: "body" | "headers" | "timing"; className?: string; } function getStatusType(status: number): HttpStatus { if (status >= 100 && status < 200) return "info"; if (status >= 200 && status < 300) return "success"; if (status >= 300 && status < 400) return "redirect"; if (status >= 400 && status < 500) return "client-error"; return "server-error"; } function StatusBadge({ status, statusText, }: { status: number; statusText?: string; }) { const type = getStatusType(status); const colors: Record = { info: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300", success: "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300", redirect: "bg-yellow-100 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-300", "client-error": "bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300", "server-error": "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300", }; return ( {status} {statusText} ); } function JsonDisplay({ data }: { data: unknown }) { const [collapsed, setCollapsed] = React.useState>(new Set()); const renderValue = ( value: unknown, path: string, depth: number, ): React.ReactNode => { if (value === null) { return null; } if (typeof value === "boolean") { return {String(value)}; } if (typeof value === "number") { return {value}; } if (typeof value === "string") { return ( "{value}" ); } if (Array.isArray(value)) { const isCollapsed = collapsed.has(path); return ( [ {isCollapsed ? ( {value.length} items ) : (

{value.map((item, idx) => (

{renderValue(item, `${path}[${idx}]`, depth + 1)} {idx < value.length - 1 && ( , )}

))}

)} ] ); } if (typeof value === "object") { const entries = Object.entries(value as Record); const isCollapsed = collapsed.has(path); return ( {"{"} {isCollapsed ? ( {entries.length} keys ) : (

{entries.map(([key, val], idx) => (

{key} : {renderValue(val, `${path}.${key}`, depth + 1)} {idx < entries.length - 1 && ( , )}

))}

)} {"}"} ); } return String(value); }; return (

{renderValue(data, "$", 0)}

); } function HeadersTable({ headers }: { headers: Record }) { return (

{Object.entries(headers).map(([key, value]) => ( ))}

Header	Value
{key}	{value}

); } function TimingBar({ timing }: { timing: NonNullable }) { const segments = [ { key: "dns", label: "DNS", color: "bg-purple-500", value: timing.dns }, { key: "connect", label: "Connect", color: "bg-blue-500", value: timing.connect, }, { key: "ttfb", label: "TTFB", color: "bg-green-500", value: timing.ttfb }, { key: "download", label: "Download", color: "bg-orange-500", value: timing.download, }, ].filter((s) => s.value !== undefined); return (

{segments.map((seg) => (

{seg.value}ms

))}

{segments.map((seg) => (

{seg.label}: {seg.value}ms

))}

Total: {timing.total}ms

); } export function ApiResponseViewer({ response, defaultTab = "body", className, }: ApiResponseViewerProps) { const [activeTab, setActiveTab] = React.useState< "body" | "headers" | "timing" >(defaultTab); const tabs = [ { id: "body" as const, label: "Body", available: response.body !== undefined, }, { id: "headers" as const, label: "Headers", available: !!response.headers }, { id: "timing" as const, label: "Timing", available: !!response.timing }, ].filter((t) => t.available); return (

{response.timing && ( {response.timing.total}ms )}

{tabs.map((tab) => ( ))}

{activeTab === "body" && response.body !== undefined && ( )} {activeTab === "headers" && response.headers && ( )} {activeTab === "timing" && response.timing && ( )}

); } export type { ApiResponseViewerProps, ApiResponse }; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/default/blocks/devtools/api-response-viewer/components/elements/api-response-viewer.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]