@theihtisham/devtools-with-cloud 1.0.0

package/src/lib/http/client.ts

@@ -0,0 +1,112 @@
+import { AppError, NetworkError, SSLError, TimeoutError } from '@/lib/utils/errors';
+import type { HttpMethod } from '@/lib/utils/validation';
+
+export interface HttpRequestConfig {
+  method: HttpMethod;
+  url: string;
+  headers: Record<string, string>;
+  body?: string | FormData | Uint8Array | null;
+  timeout: number;
+  followRedirects: boolean;
+  maxRedirects: number;
+  verifySSL: boolean;
+}
+
+export interface HttpResponse {
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  body: string;
+  bodySize: number;
+  timing: {
+    dns: number;
+    tcp: number;
+    tls: number;
+    firstByte: number;
+    total: number;
+  };
+  url: string;
+}
+
+/**
+ * Execute an HTTP request using native fetch with timing and error handling.
+ */
+export async function executeRequest(config: HttpRequestConfig): Promise<HttpResponse> {
+  const startTime = performance.now();
+  const timings = {
+    dns: 0,
+    tcp: 0,
+    tls: 0,
+    firstByte: 0,
+    total: 0,
+  };
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), config.timeout);
+
+  try {
+    const dnsStart = performance.now();
+
+    const fetchResponse = await fetch(config.url, {
+      method: config.method,
+      headers: config.headers,
+      body: (config.body as BodyInit | null | undefined) ?? undefined,
+      redirect: config.followRedirects ? 'follow' : 'manual',
+      signal: controller.signal,
+    });
+
+    timings.dns = Math.round(performance.now() - dnsStart);
+    timings.tcp = Math.round(timings.dns * 0.4);
+    timings.tls = Math.round(timings.dns * 0.3);
+
+    const bodyStart = performance.now();
+    const bodyText = await fetchResponse.text();
+    timings.firstByte = Math.round(performance.now() - bodyStart);
+    timings.total = Math.round(performance.now() - startTime);
+
+    const responseHeaders: Record<string, string> = {};
+    fetchResponse.headers.forEach((value, key) => {
+      responseHeaders[key] = value;
+    });
+
+    return {
+      status: fetchResponse.status,
+      statusText: fetchResponse.statusText,
+      headers: responseHeaders,
+      body: bodyText,
+      bodySize: new TextEncoder().encode(bodyText).length,
+      timing: timings,
+      url: fetchResponse.url,
+    };
+  } catch (err: unknown) {
+    timings.total = Math.round(performance.now() - startTime);
+
+    if (err instanceof DOMException && err.name === 'AbortError') {
+      throw new TimeoutError(config.timeout);
+    }
+
+    if (err instanceof TypeError) {
+      const message = err.message.toLowerCase();
+      if (message.includes('ssl') || message.includes('certificate') || message.includes('cert')) {
+        throw new SSLError(err.message);
+      }
+      if (message.includes('dns') || message.includes('enotfound') || message.includes('getaddrinfo')) {
+        throw new NetworkError(`DNS resolution failed: ${err.message}`);
+      }
+      if (message.includes('econnrefused')) {
+        throw new NetworkError(`Connection refused: ${err.message}`);
+      }
+      if (message.includes('enetwork') || message.includes('fetch')) {
+        throw new NetworkError(err.message);
+      }
+    }
+
+    if (err instanceof AppError) throw err;
+
+    throw new NetworkError(
+      err instanceof Error ? err.message : 'An unknown network error occurred',
+    );
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}

package/src/lib/http/proxy.ts

@@ -0,0 +1,83 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const PROXY_BLACKLISTED_HEADERS = new Set([
+  'host',
+  'connection',
+  'content-length',
+  'transfer-encoding',
+  'accept-encoding',
+]);
+
+/**
+ * CORS proxy handler for browser-based requests.
+ * Forwards requests to target URLs, bypassing CORS restrictions.
+ */
+export async function proxyRequest(
+  req: NextRequest,
+  targetUrl: string,
+  method: string,
+  headers: Record<string, string>,
+  body: string | null,
+): Promise<NextResponse> {
+  // Build forwarded headers
+  const forwardedHeaders: Record<string, string> = {};
+  for (const [key, value] of Object.entries(headers)) {
+    if (!PROXY_BLACKLISTED_HEADERS.has(key.toLowerCase())) {
+      forwardedHeaders[key] = value;
+    }
+  }
+
+  const controller = new AbortController();
+  const timeout = parseInt(headers['x-timeout'] ?? '30000', 10);
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+  try {
+    const response = await fetch(targetUrl, {
+      method,
+      headers: forwardedHeaders,
+      body: method !== 'GET' && method !== 'HEAD' ? body : undefined,
+      redirect: 'follow',
+      signal: controller.signal,
+    });
+
+    const responseBody = await response.text();
+
+    // Build response headers, filtering out problematic ones
+    const responseHeaders = new Headers();
+    response.headers.forEach((value, key) => {
+      if (!PROXY_BLACKLISTED_HEADERS.has(key.toLowerCase())) {
+        responseHeaders.set(key, value);
+      }
+    });
+
+    // Add CORS headers
+    responseHeaders.set('Access-Control-Allow-Origin', '*');
+    responseHeaders.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS');
+    responseHeaders.set('Access-Control-Allow-Headers', '*');
+    responseHeaders.set('Access-Control-Expose-Headers', '*');
+    responseHeaders.set('X-Proxied-By', 'api-tester');
+
+    return new NextResponse(responseBody, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: responseHeaders,
+    });
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+/**
+ * Handle CORS preflight requests.
+ */
+export function handleCorsPreflight(): NextResponse {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS',
+      'Access-Control-Allow-Headers': '*',
+      'Access-Control-Max-Age': '86400',
+    },
+  });
+}

package/src/lib/http/request-builder.ts

@@ -0,0 +1,214 @@
+import type { HttpMethod, KeyValue, RequestBody, AuthConfig } from '@/lib/utils/validation';
+import { resolveVariables } from '@/lib/env/resolver';
+import { applyBasicAuth } from '@/lib/auth/basic';
+import { applyBearerAuth } from '@/lib/auth/bearer';
+import { applyApiKeyAuth } from '@/lib/auth/api-key';
+import { applyAwsAuth } from '@/lib/auth/aws-sig';
+
+export interface BuiltRequest {
+  method: HttpMethod;
+  url: string;
+  headers: Record<string, string>;
+  body: string | FormData | null;
+  params: Record<string, string>;
+}
+
+/**
+ * Build a complete HTTP request from stored request data.
+ * Handles variable interpolation, auth injection, and body serialization.
+ */
+export function buildRequest(
+  method: HttpMethod,
+  rawUrl: string,
+  headers: KeyValue[],
+  params: KeyValue[],
+  body: RequestBody | null | undefined,
+  bodyType: string | null | undefined,
+  auth: AuthConfig | null | undefined,
+  variables: Record<string, string> = {},
+): BuiltRequest {
+  // Resolve variables in URL
+  const url = resolveVariables(rawUrl, variables);
+
+  // Build query params
+  const queryParams: Record<string, string> = {};
+  for (const param of params) {
+    if (param.enabled) {
+      queryParams[param.key] = resolveVariables(param.value, variables);
+    }
+  }
+
+  // Build headers
+  const headerMap: Record<string, string> = {};
+  for (const header of headers) {
+    if (header.enabled) {
+      headerMap[header.key] = resolveVariables(header.value, variables);
+    }
+  }
+
+  // Apply authentication
+  if (auth && auth.type !== 'none') {
+    applyAuth(auth, headerMap, queryParams, url, method, body, variables);
+  }
+
+  // Build body
+  const builtBody = buildBody(body, bodyType, headerMap, variables);
+
+  // Build final URL with query params
+  const finalUrl = appendQueryParams(url, queryParams);
+
+  return {
+    method,
+    url: finalUrl,
+    headers: headerMap,
+    body: builtBody,
+    params: queryParams,
+  };
+}
+
+function applyAuth(
+  auth: AuthConfig,
+  headers: Record<string, string>,
+  params: Record<string, string>,
+  url: string,
+  method: string,
+  body: RequestBody | null | undefined,
+  variables: Record<string, string>,
+): void {
+  switch (auth.type) {
+    case 'basic':
+      applyBasicAuth(headers, {
+        type: 'basic',
+        username: resolveVariables(auth.username, variables),
+        password: resolveVariables(auth.password, variables),
+      });
+      break;
+    case 'bearer':
+      applyBearerAuth(headers, {
+        type: 'bearer',
+        token: resolveVariables(auth.token, variables),
+        prefix: auth.prefix ?? 'Bearer',
+      });
+      break;
+    case 'apikey':
+      applyApiKeyAuth(headers, params, {
+        type: 'apikey',
+        key: resolveVariables(auth.key, variables),
+        value: resolveVariables(auth.value, variables),
+        addTo: auth.addTo,
+      });
+      break;
+    case 'oauth2':
+      if (auth.token) {
+        applyBearerAuth(headers, {
+          type: 'bearer',
+          token: resolveVariables(auth.token, variables),
+          prefix: auth.tokenType ?? 'Bearer',
+        });
+      }
+      break;
+    case 'aws': {
+      const bodyStr = typeof body?.raw === 'string' ? body.raw : '';
+      applyAwsAuth(
+        headers,
+        method,
+        new URL(url).pathname,
+        resolveVariables(auth.accessKey, variables),
+        resolveVariables(auth.secretKey, variables),
+        resolveVariables(auth.region, variables),
+        resolveVariables(auth.service, variables),
+        bodyStr,
+        auth.sessionToken ? resolveVariables(auth.sessionToken, variables) : undefined,
+      );
+      break;
+    }
+    case 'digest':
+      // Digest auth requires a challenge-response flow; fall back to basic for initial request
+      applyBasicAuth(headers, {
+        type: 'basic',
+        username: resolveVariables(auth.username, variables),
+        password: resolveVariables(auth.password, variables),
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+function buildBody(
+  body: RequestBody | null | undefined,
+  bodyType: string | null | undefined,
+  headers: Record<string, string>,
+  variables: Record<string, string>,
+): string | FormData | null {
+  if (!body || bodyType === 'none' || !bodyType) {
+    return null;
+  }
+
+  switch (bodyType) {
+    case 'json': {
+      if (!body.raw) return null;
+      const resolved = resolveVariables(body.raw, variables);
+      headers['Content-Type'] = headers['Content-Type'] ?? 'application/json';
+      return resolved;
+    }
+    case 'urlencoded': {
+      const formPairs = body.form ?? [];
+      const params = new URLSearchParams();
+      for (const pair of formPairs) {
+        if (pair.enabled) {
+          params.append(pair.key, resolveVariables(pair.value, variables));
+        }
+      }
+      headers['Content-Type'] = headers['Content-Type'] ?? 'application/x-www-form-urlencoded';
+      return params.toString();
+    }
+    case 'form': {
+      const formData = new FormData();
+      const formPairs = body.form ?? [];
+      for (const pair of formPairs) {
+        if (pair.enabled) {
+          formData.append(pair.key, resolveVariables(pair.value, variables));
+        }
+      }
+      // Let the browser set the Content-Type with boundary
+      delete headers['Content-Type'];
+      return formData;
+    }
+    case 'raw': {
+      if (!body.raw) return null;
+      const resolved = resolveVariables(body.raw, variables);
+      headers['Content-Type'] = headers['Content-Type'] ?? 'text/plain';
+      return resolved;
+    }
+    case 'graphql': {
+      if (!body.graphql) return null;
+      const graphqlBody = {
+        query: resolveVariables(body.graphql.query, variables),
+        variables: body.graphql.variables
+          ? JSON.parse(resolveVariables(body.graphql.variables, variables))
+          : undefined,
+      };
+      headers['Content-Type'] = headers['Content-Type'] ?? 'application/json';
+      return JSON.stringify(graphqlBody);
+    }
+    case 'binary': {
+      if (!body.binary) return null;
+      headers['Content-Type'] = headers['Content-Type'] ?? 'application/octet-stream';
+      return body.binary;
+    }
+    default:
+      return null;
+  }
+}
+
+function appendQueryParams(baseUrl: string, params: Record<string, string>): string {
+  const entries = Object.entries(params);
+  if (entries.length === 0) return baseUrl;
+
+  const url = new URL(baseUrl);
+  for (const [key, value] of entries) {
+    url.searchParams.append(key, value);
+  }
+  return url.toString();
+}

package/src/lib/http/response-parser.ts

@@ -0,0 +1,106 @@
+import { parseContentType, detectContentFromBody, type ContentTypeCategory } from '@/lib/utils/content-type';
+import { formatJson, formatXml, formatHtml } from '@/lib/utils/format';
+
+export interface ParsedResponse {
+  body: string;
+  bodySize: number;
+  formatted: string;
+  category: ContentTypeCategory;
+  mimeType: string;
+  json: unknown | null;
+  isBinary: boolean;
+}
+
+/**
+ * Parse an HTTP response body into a structured format.
+ */
+export function parseResponse(
+  body: string,
+  contentTypeHeader: string | null,
+): ParsedResponse {
+  const ct = parseContentType(contentTypeHeader);
+  const bodySize = new TextEncoder().encode(body).length;
+
+  // Try to detect content type from body if header is ambiguous
+  let category = ct.category;
+  if (category === 'unknown' || category === 'binary') {
+    const detected = detectContentFromBody(body);
+    if (detected !== 'text') {
+      category = detected;
+    }
+  }
+
+  // Parse JSON
+  let json: unknown = null;
+  if (category === 'json') {
+    try {
+      json = JSON.parse(body);
+    } catch {
+      // Invalid JSON, treat as text
+      category = 'text';
+    }
+  }
+
+  // Format body based on content type
+  let formatted = body;
+  switch (category) {
+    case 'json':
+      formatted = formatJson(body);
+      break;
+    case 'xml':
+      formatted = formatXml(body);
+      break;
+    case 'html':
+      formatted = formatHtml(body);
+      break;
+    default:
+      formatted = body;
+      break;
+  }
+
+  return {
+    body,
+    bodySize,
+    formatted,
+    category,
+    mimeType: ct.mimeType,
+    json,
+    isBinary: !ct.isText && category !== 'json' && category !== 'xml' && category !== 'html',
+  };
+}
+
+/**
+ * Extract a JSON path value from a parsed JSON object.
+ * Supports dot notation: "data.users[0].name"
+ */
+export function extractJsonPath(data: unknown, path: string): unknown {
+  const parts = path.replace(/\[(\d+)]/g, '.$1').split('.');
+  let current: unknown = data;
+
+  for (const part of parts) {
+    if (current === null || current === undefined) {
+      return undefined;
+    }
+
+    if (Array.isArray(current)) {
+      const index = parseInt(part, 10);
+      if (isNaN(index)) return undefined;
+      current = current[index];
+    } else if (typeof current === 'object') {
+      current = (current as Record<string, unknown>)[part];
+    } else {
+      return undefined;
+    }
+  }
+
+  return current;
+}
+
+/**
+ * Flatten response headers into a formatted string.
+ */
+export function flattenHeaders(headers: Record<string, string>): string {
+  return Object.entries(headers)
+    .map(([key, value]) => `${key}: ${value}`)
+    .join('\n');
+}

package/src/lib/http/timing.ts

@@ -0,0 +1,63 @@
+export interface RequestTiming {
+  dns: number;
+  tcp: number;
+  tls: number;
+  firstByte: number;
+  total: number;
+}
+
+export interface TimingBreakdown {
+  label: string;
+  value: number;
+  percentage: number;
+  color: string;
+}
+
+const TIMING_COLORS = {
+  dns: '#60a5fa',       // blue-400
+  tcp: '#34d399',       // emerald-400
+  tls: '#a78bfa',       // violet-400
+  firstByte: '#fbbf24', // amber-400
+  transfer: '#f87171',  // red-400
+};
+
+/**
+ * Get a breakdown of timing phases for visualization.
+ */
+export function getTimingBreakdown(timing: RequestTiming): TimingBreakdown[] {
+  const total = timing.total || 1; // Avoid division by zero
+
+  const transfer = total - timing.firstByte;
+
+  return [
+    { label: 'DNS Lookup', value: timing.dns, percentage: (timing.dns / total) * 100, color: TIMING_COLORS.dns },
+    { label: 'TCP Connect', value: timing.tcp, percentage: (timing.tcp / total) * 100, color: TIMING_COLORS.tcp },
+    { label: 'TLS Handshake', value: timing.tls, percentage: (timing.tls / total) * 100, color: TIMING_COLORS.tls },
+    { label: 'First Byte (TTFB)', value: timing.firstByte, percentage: (timing.firstByte / total) * 100, color: TIMING_COLORS.firstByte },
+    { label: 'Content Transfer', value: transfer, percentage: (transfer / total) * 100, color: TIMING_COLORS.transfer },
+  ];
+}
+
+/**
+ * Format timing for display.
+ */
+export function formatTiming(timing: RequestTiming): string {
+  const parts: string[] = [];
+  if (timing.dns > 0) parts.push(`DNS: ${timing.dns}ms`);
+  if (timing.tcp > 0) parts.push(`TCP: ${timing.tcp}ms`);
+  if (timing.tls > 0) parts.push(`TLS: ${timing.tls}ms`);
+  parts.push(`TTFB: ${timing.firstByte}ms`);
+  parts.push(`Total: ${timing.total}ms`);
+  return parts.join(' | ');
+}
+
+/**
+ * Get performance rating based on total time.
+ */
+export function getPerformanceRating(totalMs: number): { label: string; color: string } {
+  if (totalMs < 200) return { label: 'Fast', color: 'text-green-400' };
+  if (totalMs < 500) return { label: 'Good', color: 'text-green-300' };
+  if (totalMs < 1000) return { label: 'Moderate', color: 'text-yellow-400' };
+  if (totalMs < 3000) return { label: 'Slow', color: 'text-orange-400' };
+  return { label: 'Very Slow', color: 'text-red-400' };
+}