@theihtisham/devtools-with-cloud 1.0.0

package/src/hooks/use-collection.ts

@@ -0,0 +1,71 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface Collection {
+  id: string;
+  name: string;
+  description?: string;
+  parentId?: string;
+  sortOrder: number;
+}
+
+interface UseCollectionReturn {
+  collections: Collection[];
+  loading: boolean;
+  error: string | null;
+  fetchCollections: () => Promise<void>;
+  createCollection: (name: string, description?: string, workspaceId?: string) => Promise<void>;
+  deleteCollection: (id: string) => Promise<void>;
+}
+
+export function useCollection(workspaceId?: string): UseCollectionReturn {
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchCollections = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = workspaceId ? `?workspaceId=${workspaceId}` : '';
+      const res = await fetch(`/api/collections${params}`);
+      const data = await res.json();
+      if (data.success) setCollections(data.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load collections');
+    } finally {
+      setLoading(false);
+    }
+  }, [workspaceId]);
+
+  const createCollection = useCallback(async (name: string, description?: string, wsId?: string) => {
+    try {
+      const res = await fetch('/api/collections', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, description, workspaceId: wsId ?? workspaceId ?? 'default' }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setCollections((prev) => [...prev, data.data]);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create collection');
+    }
+  }, [workspaceId]);
+
+  const deleteCollection = useCallback(async (id: string) => {
+    try {
+      await fetch(`/api/collections/${id}`, { method: 'DELETE' });
+      setCollections((prev) => prev.filter((c) => c.id !== id));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete collection');
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchCollections();
+  }, [fetchCollections]);
+
+  return { collections, loading, error, fetchCollections, createCollection, deleteCollection };
+}

package/src/hooks/use-environment.ts

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface Environment {
+  id: string;
+  name: string;
+  isDefault: boolean;
+  variables: Array<{
+    key: string;
+    value: string;
+    type: string;
+    enabled: boolean;
+  }>;
+}
+
+interface UseEnvironmentReturn {
+  environments: Environment[];
+  activeEnvironment: Environment | null;
+  variables: Record<string, string>;
+  loading: boolean;
+  setActiveEnvironment: (env: Environment | null) => void;
+  refresh: () => Promise<void>;
+}
+
+export function useEnvironment(workspaceId?: string): UseEnvironmentReturn {
+  const [environments, setEnvironments] = useState<Environment[]>([]);
+  const [activeEnvironment, setActiveEnvironment] = useState<Environment | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const variables = useCallback((): Record<string, string> => {
+    const vars: Record<string, string> = {};
+    if (activeEnvironment) {
+      for (const v of activeEnvironment.variables) {
+        if (v.enabled) vars[v.key] = v.value;
+      }
+    }
+    return vars;
+  }, [activeEnvironment]);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = workspaceId ? `?workspaceId=${workspaceId}` : '';
+      const res = await fetch(`/api/environments${params}`);
+      const data = await res.json();
+      if (data.success) {
+        setEnvironments(data.data);
+        const defaultEnv = data.data.find((e: Environment) => e.isDefault);
+        if (defaultEnv && !activeEnvironment) {
+          setActiveEnvironment(defaultEnv);
+        }
+      }
+    } catch {
+      // Handle error
+    } finally {
+      setLoading(false);
+    }
+  }, [workspaceId, activeEnvironment]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return {
+    environments,
+    activeEnvironment,
+    variables: variables(),
+    loading,
+    setActiveEnvironment,
+    refresh,
+  };
+}

package/src/hooks/use-request.ts

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { HttpMethod, KeyValue, BodyType, RequestBody, AuthConfig } from '@/lib/utils/validation';
+import type { ApiResponse } from '@/types/response';
+
+interface UseRequestReturn {
+  method: HttpMethod;
+  url: string;
+  headers: KeyValue[];
+  params: KeyValue[];
+  body: string;
+  bodyType: BodyType;
+  auth: AuthConfig | null;
+  response: ApiResponse | null;
+  loading: boolean;
+  error: string | null;
+  setMethod: (method: HttpMethod) => void;
+  setUrl: (url: string) => void;
+  setHeaders: (headers: KeyValue[]) => void;
+  setParams: (params: KeyValue[]) => void;
+  setBody: (body: string) => void;
+  setBodyType: (bodyType: BodyType) => void;
+  setAuth: (auth: AuthConfig | null) => void;
+  send: () => Promise<void>;
+  reset: () => void;
+}
+
+export function useRequest(initialUrl: string = '', initialMethod: HttpMethod = 'GET'): UseRequestReturn {
+  const [method, setMethod] = useState<HttpMethod>(initialMethod);
+  const [url, setUrl] = useState(initialUrl);
+  const [headers, setHeaders] = useState<KeyValue[]>([]);
+  const [params, setParams] = useState<KeyValue[]>([]);
+  const [body, setBody] = useState('');
+  const [bodyType, setBodyType] = useState<BodyType>('none');
+  const [auth, setAuth] = useState<AuthConfig | null>(null);
+  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const send = useCallback(async () => {
+    if (!url.trim()) return;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const headerMap: Record<string, string> = {};
+      for (const h of headers) {
+        if (h.enabled && h.key) headerMap[h.key] = h.value;
+      }
+
+      let reqBody: string | undefined;
+      if (bodyType !== 'none' && method !== 'GET' && method !== 'HEAD') {
+        reqBody = body;
+        if (bodyType === 'json' && !headerMap['Content-Type']) {
+          headerMap['Content-Type'] = 'application/json';
+        }
+      }
+
+      const start = performance.now();
+      const res = await fetch('/api/proxy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url, method, headers: headerMap, body: reqBody }),
+      });
+
+      const data = await res.json();
+      const elapsed = Math.round(performance.now() - start);
+
+      const responseHeaders: Record<string, string> = {};
+      if (data.headers) {
+        for (const [key, value] of Object.entries(data.headers as Record<string, string>)) {
+          responseHeaders[key] = value;
+        }
+      }
+
+      setResponse({
+        status: data.status ?? res.status,
+        statusText: data.statusText ?? res.statusText,
+        headers: responseHeaders,
+        body: typeof data.body === 'string' ? data.body : JSON.stringify(data.body, null, 2),
+        bodySize: typeof data.body === 'string' ? new TextEncoder().encode(data.body).length : 0,
+        timing: { dns: 0, tcp: 0, tls: 0, firstByte: 0, total: elapsed },
+        url,
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Request failed');
+    } finally {
+      setLoading(false);
+    }
+  }, [url, method, headers, body, bodyType]);
+
+  const reset = useCallback(() => {
+    setMethod('GET');
+    setUrl('');
+    setHeaders([]);
+    setParams([]);
+    setBody('');
+    setBodyType('none');
+    setAuth(null);
+    setResponse(null);
+    setError(null);
+  }, []);
+
+  return {
+    method, url, headers, params, body, bodyType, auth,
+    response, loading, error,
+    setMethod, setUrl, setHeaders, setParams, setBody, setBodyType, setAuth,
+    send, reset,
+  };
+}

package/src/lib/ai/endpoint-discovery.ts

@@ -0,0 +1,158 @@
+import type { HttpMethod } from '@/lib/utils/validation';
+
+export interface DiscoveredEndpoint {
+  method: HttpMethod;
+  path: string;
+  name: string;
+  description?: string;
+  headers: { key: string; value: string; enabled: boolean }[];
+  params: { key: string; value: string; enabled: boolean }[];
+  body?: { raw?: string };
+  bodyType?: string;
+}
+
+/**
+ * Discover API endpoints from source code.
+ * Supports Express, Fastify, Next.js API routes, FastAPI, and more.
+ */
+export function discoverEndpoints(
+  code: string,
+  framework: string = 'auto',
+): DiscoveredEndpoint[] {
+  if (framework === 'auto') {
+    framework = detectFramework(code);
+  }
+
+  switch (framework) {
+    case 'express':
+      return discoverExpressEndpoints(code);
+    case 'nextjs':
+      return discoverNextjsEndpoints(code);
+    case 'fastapi':
+      return discoverFastApiEndpoints(code);
+    default:
+      return discoverExpressEndpoints(code);
+  }
+}
+
+function detectFramework(code: string): string {
+  if (code.includes('express()') || code.includes('require("express")') || code.includes("require('express')")) {
+    return 'express';
+  }
+  if (code.includes('NextResponse') || code.includes('next/server')) {
+    return 'nextjs';
+  }
+  if (code.includes('@app.') || code.includes('@router.') || code.includes('from fastapi')) {
+    return 'fastapi';
+  }
+  if (code.includes('app.get') || code.includes('app.post') || code.includes('app.put') || code.includes('app.delete')) {
+    return 'express';
+  }
+  return 'express';
+}
+
+function discoverExpressEndpoints(code: string): DiscoveredEndpoint[] {
+  const endpoints: DiscoveredEndpoint[] = [];
+  const methodPattern = /app\.(get|post|put|patch|delete|head|options)\s*\(\s*['"`]([^'"`]+)['"`]/gi;
+  let match: RegExpExecArray | null;
+
+  while ((match = methodPattern.exec(code)) !== null) {
+    const method = match[1]?.toUpperCase() as HttpMethod;
+    const path = match[2] ?? '';
+    endpoints.push({
+      method,
+      path,
+      name: `${method} ${path}`,
+      headers: [],
+      params: [],
+    });
+  }
+
+  // Also match router patterns
+  const routerPattern = /router\.(get|post|put|patch|delete|head|options)\s*\(\s*['"`]([^'"`]+)['"`]/gi;
+  while ((match = routerPattern.exec(code)) !== null) {
+    const method = match[1]?.toUpperCase() as HttpMethod;
+    const path = match[2] ?? '';
+    endpoints.push({
+      method,
+      path,
+      name: `${method} ${path}`,
+      headers: [],
+      params: [],
+    });
+  }
+
+  return endpoints;
+}
+
+function discoverNextjsEndpoints(code: string): DiscoveredEndpoint[] {
+  const endpoints: DiscoveredEndpoint[] = [];
+
+  if (code.includes('GET') || code.includes('export async function GET')) {
+    endpoints.push({
+      method: 'GET',
+      path: '/api/...',
+      name: 'GET /api/...',
+      headers: [],
+      params: [],
+    });
+  }
+  if (code.includes('POST') || code.includes('export async function POST')) {
+    endpoints.push({
+      method: 'POST',
+      path: '/api/...',
+      name: 'POST /api/...',
+      headers: [],
+      params: [],
+    });
+  }
+  if (code.includes('PUT') || code.includes('export async function PUT')) {
+    endpoints.push({
+      method: 'PUT',
+      path: '/api/...',
+      name: 'PUT /api/...',
+      headers: [],
+      params: [],
+    });
+  }
+  if (code.includes('DELETE') || code.includes('export async function DELETE')) {
+    endpoints.push({
+      method: 'DELETE',
+      path: '/api/...',
+      name: 'DELETE /api/...',
+      headers: [],
+      params: [],
+    });
+  }
+  if (code.includes('PATCH') || code.includes('export async function PATCH')) {
+    endpoints.push({
+      method: 'PATCH',
+      path: '/api/...',
+      name: 'PATCH /api/...',
+      headers: [],
+      params: [],
+    });
+  }
+
+  return endpoints;
+}
+
+function discoverFastApiEndpoints(code: string): DiscoveredEndpoint[] {
+  const endpoints: DiscoveredEndpoint[] = [];
+  const pattern = /@(?:app|router)\.(get|post|put|patch|delete)\s*\(\s*["']([^"']+)["']/gi;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(code)) !== null) {
+    const method = match[1]?.toUpperCase() as HttpMethod;
+    const path = match[2] ?? '';
+    endpoints.push({
+      method,
+      path,
+      name: `${method} ${path}`,
+      headers: [],
+      params: [],
+    });
+  }
+
+  return endpoints;
+}

package/src/lib/ai/explainer.ts

@@ -0,0 +1,127 @@
+/**
+ * AI response explainer - explains API responses, status codes, and headers.
+ */
+
+interface ExplainRequest {
+  response: {
+    status: number;
+    statusText: string;
+    headers: Record<string, string>;
+    body: string;
+  };
+  question?: string;
+}
+
+/**
+ * Explain an API response. Uses AI if available, falls back to local explanation.
+ */
+export async function explainResponse(
+  req: ExplainRequest,
+  apiKey?: string,
+  baseUrl?: string,
+  model?: string,
+): Promise<string> {
+  const localExplanation = generateLocalExplanation(req);
+
+  if (!apiKey) {
+    return localExplanation;
+  }
+
+  try {
+    const openaiUrl = `${baseUrl ?? 'https://api.openai.com/v1'}/chat/completions`;
+
+    const prompt = `Explain this API response:
+
+Status: ${req.response.status} ${req.response.statusText}
+Headers: ${JSON.stringify(req.response.headers, null, 2)}
+Body: ${req.response.body.slice(0, 2000)}
+
+${req.question ? `User question: ${req.question}` : 'Provide a comprehensive explanation.'}`;
+
+    const res = await fetch(openaiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        model: model ?? 'gpt-4o',
+        messages: [
+          { role: 'system', content: 'You are an API expert. Explain responses clearly and concisely.' },
+          { role: 'user', content: prompt },
+        ],
+        temperature: 0.3,
+        max_tokens: 1000,
+      }),
+    });
+
+    if (!res.ok) return localExplanation;
+
+    const data = await res.json() as { choices: Array<{ message: { content: string } }> };
+    return data.choices?.[0]?.message?.content ?? localExplanation;
+  } catch {
+    return localExplanation;
+  }
+}
+
+function generateLocalExplanation(req: ExplainRequest): string {
+  const parts: string[] = [];
+
+  // Status code explanation
+  parts.push(`**Status: ${req.response.status} ${req.response.statusText}**`);
+  parts.push(getStatusExplanation(req.response.status));
+
+  // Content type
+  const contentType = req.response.headers['content-type'];
+  if (contentType) {
+    parts.push(`\n**Content-Type:** ${contentType}`);
+  }
+
+  // Body analysis
+  try {
+    const json = JSON.parse(req.response.body);
+    if (Array.isArray(json)) {
+      parts.push(`\n**Body:** Array with ${json.length} items`);
+    } else if (typeof json === 'object' && json !== null) {
+      const keys = Object.keys(json);
+      parts.push(`\n**Body:** Object with keys: ${keys.join(', ')}`);
+    }
+  } catch {
+    if (req.response.body.length > 0) {
+      parts.push(`\n**Body:** ${req.response.body.length} bytes of response data`);
+    }
+  }
+
+  return parts.join('\n');
+}
+
+function getStatusExplanation(status: number): string {
+  if (status >= 200 && status < 300) {
+    return 'The request was successful.';
+  }
+  if (status === 301 || status === 302) {
+    return 'The resource has been moved. The client should follow the redirect.';
+  }
+  if (status === 304) {
+    return 'The resource has not been modified since the last request.';
+  }
+  if (status === 400) {
+    return 'Bad Request: The server could not understand the request due to invalid syntax.';
+  }
+  if (status === 401) {
+    return 'Unauthorized: Authentication is required to access this resource.';
+  }
+  if (status === 403) {
+    return 'Forbidden: You do not have permission to access this resource.';
+  }
+  if (status === 404) {
+    return 'Not Found: The requested resource does not exist.';
+  }
+  if (status === 429) {
+    return 'Too Many Requests: Rate limit exceeded. Try again later.';
+  }
+  if (status >= 500) {
+    return 'Server Error: The server encountered an error processing the request.';
+  }
+  return 'See HTTP status code documentation for details.';
+}

package/src/lib/ai/suggester.ts

@@ -0,0 +1,164 @@
+/**
+ * AI code suggester - suggests improvements for API requests.
+ */
+
+interface SuggestRequest {
+  request: {
+    method: string;
+    url: string;
+    headers: Record<string, string>;
+    body?: string;
+    bodyType?: string;
+    auth?: unknown;
+  };
+  response?: {
+    status: number;
+    statusText: string;
+    headers: Record<string, string>;
+    body: string;
+    duration: number;
+  };
+}
+
+export interface Suggestion {
+  category: 'security' | 'performance' | 'best-practice' | 'error-handling';
+  severity: 'info' | 'warning' | 'critical';
+  title: string;
+  description: string;
+}
+
+/**
+ * Generate improvement suggestions for a request/response.
+ */
+export async function suggestImprovements(
+  req: SuggestRequest,
+  apiKey?: string,
+  baseUrl?: string,
+  model?: string,
+): Promise<Suggestion[]> {
+  const localSuggestions = generateLocalSuggestions(req);
+
+  if (!apiKey) {
+    return localSuggestions;
+  }
+
+  try {
+    const openaiUrl = `${baseUrl ?? 'https://api.openai.com/v1'}/chat/completions`;
+
+    const prompt = `Analyze this API request and suggest improvements:
+
+Request:
+- Method: ${req.request.method}
+- URL: ${req.request.url}
+- Headers: ${JSON.stringify(req.request.headers, null, 2)}
+- Body Type: ${req.request.bodyType ?? 'none'}
+- Auth: ${JSON.stringify(req.request.auth)}
+
+${req.response ? `Response:
+- Status: ${req.response.status} ${req.response.statusText}
+- Duration: ${req.response.duration}ms
+- Body: ${req.response.body.slice(0, 1000)}` : ''}
+
+Provide suggestions as JSON array with fields: category (security|performance|best-practice|error-handling), severity (info|warning|critical), title, description.`;
+
+    const res = await fetch(openaiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        model: model ?? 'gpt-4o',
+        messages: [
+          { role: 'system', content: 'You are an API security and performance expert. Respond with valid JSON only.' },
+          { role: 'user', content: prompt },
+        ],
+        temperature: 0.3,
+        max_tokens: 1500,
+      }),
+    });
+
+    if (!res.ok) return localSuggestions;
+
+    const data = await res.json() as { choices: Array<{ message: { content: string } }> };
+    const content = data.choices?.[0]?.message?.content;
+    if (content) {
+      try {
+        const suggestions = JSON.parse(content) as Suggestion[];
+        if (Array.isArray(suggestions)) return suggestions;
+      } catch {
+        // Fall through to local
+      }
+    }
+
+    return localSuggestions;
+  } catch {
+    return localSuggestions;
+  }
+}
+
+function generateLocalSuggestions(req: SuggestRequest): Suggestion[] {
+  const suggestions: Suggestion[] = [];
+  const { request: r } = req;
+
+  // Security checks
+  if (r.url.startsWith('http://') && !r.url.includes('localhost')) {
+    suggestions.push({
+      category: 'security',
+      severity: 'warning',
+      title: 'Use HTTPS',
+      description: 'This request uses HTTP instead of HTTPS. Consider using HTTPS for secure communication.',
+    });
+  }
+
+  const hasAuth = r.headers['Authorization'] || r.headers['authorization'] || r.auth;
+  if (!hasAuth && r.method !== 'GET' && r.method !== 'HEAD' && r.method !== 'OPTIONS') {
+    suggestions.push({
+      category: 'security',
+      severity: 'info',
+      title: 'Consider adding authentication',
+      description: 'This mutating request does not include authentication headers.',
+    });
+  }
+
+  // Performance checks
+  if (req.response && req.response.duration > 2000) {
+    suggestions.push({
+      category: 'performance',
+      severity: 'warning',
+      title: 'Slow response time',
+      description: `Response took ${req.response.duration}ms. Consider optimizing the endpoint or adding caching.`,
+    });
+  }
+
+  // Best practices
+  if (!r.headers['Accept'] && !r.headers['accept']) {
+    suggestions.push({
+      category: 'best-practice',
+      severity: 'info',
+      title: 'Add Accept header',
+      description: 'Include an Accept header to specify the expected response format.',
+    });
+  }
+
+  if (r.bodyType === 'json' && (!r.headers['Content-Type'] && !r.headers['content-type'])) {
+    suggestions.push({
+      category: 'best-practice',
+      severity: 'warning',
+      title: 'Missing Content-Type header',
+      description: 'The request body is JSON but no Content-Type header is set.',
+    });
+  }
+
+  // Error handling
+  if (req.response && req.response.status >= 400) {
+    suggestions.push({
+      category: 'error-handling',
+      severity: 'critical',
+      title: `Request failed with ${req.response.status}`,
+      description: `The server returned ${req.response.status} ${req.response.statusText}. Check the request parameters and try again.`,
+    });
+  }
+
+  return suggestions;
+}