@theihtisham/devtools-with-cloud 1.0.0

package/src/app/(app)/settings/page.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function SettingsPage() {
+  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
+  const [defaultTimeout, setDefaultTimeout] = useState('30000');
+  const [followRedirects, setFollowRedirects] = useState(true);
+  const [verifySSL, setVerifySSL] = useState(true);
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h1 className="text-2xl font-bold text-foreground mb-6">Settings</h1>
+
+      <div className="space-y-6">
+        {/* Appearance */}
+        <section>
+          <h2 className="text-lg font-semibold text-foreground mb-3">Appearance</h2>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label className="text-sm text-foreground">Theme</label>
+              <select
+                value={theme}
+                onChange={(e) => setTheme(e.target.value as 'dark' | 'light')}
+                className="px-3 py-1.5 rounded-md border border-border bg-background text-foreground text-sm"
+              >
+                <option value="dark">Dark</option>
+                <option value="light">Light</option>
+              </select>
+            </div>
+          </div>
+        </section>
+
+        {/* Request Defaults */}
+        <section>
+          <h2 className="text-lg font-semibold text-foreground mb-3">Request Defaults</h2>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label className="text-sm text-foreground">Default Timeout (ms)</label>
+              <input
+                type="number"
+                value={defaultTimeout}
+                onChange={(e) => setDefaultTimeout(e.target.value)}
+                className="w-32 px-3 py-1.5 rounded-md border border-border bg-background text-foreground text-sm text-right"
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <label className="text-sm text-foreground">Follow Redirects</label>
+              <button
+                onClick={() => setFollowRedirects(!followRedirects)}
+                className={`w-10 h-6 rounded-full transition-colors ${followRedirects ? 'bg-primary' : 'bg-border'}`}
+              >
+                <span className={`block w-4 h-4 rounded-full bg-white transition-transform ${followRedirects ? 'translate-x-5' : 'translate-x-1'}`} />
+              </button>
+            </div>
+            <div className="flex items-center justify-between">
+              <label className="text-sm text-foreground">Verify SSL</label>
+              <button
+                onClick={() => setVerifySSL(!verifySSL)}
+                className={`w-10 h-6 rounded-full transition-colors ${verifySSL ? 'bg-primary' : 'bg-border'}`}
+              >
+                <span className={`block w-4 h-4 rounded-full bg-white transition-transform ${verifySSL ? 'translate-x-5' : 'translate-x-1'}`} />
+              </button>
+            </div>
+          </div>
+        </section>
+
+        {/* About */}
+        <section>
+          <h2 className="text-lg font-semibold text-foreground mb-3">About</h2>
+          <div className="text-sm text-muted-foreground space-y-1">
+            <p>APITester v1.0.0</p>
+            <p>Open-source API testing tool with AI-powered features</p>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

package/src/app/(app)/workspace/page.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { HttpMethod, KeyValue } from '@/lib/utils/validation';
+import { cn } from '@/lib/utils/cn';
+
+const METHODS: HttpMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'];
+
+interface RequestState {
+  method: HttpMethod;
+  url: string;
+  headers: KeyValue[];
+  params: KeyValue[];
+  body: string;
+  bodyType: string;
+  activeTab: string;
+}
+
+type ResponseState = {
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  body: string;
+  duration: number;
+  size: number;
+} | null;
+
+export default function WorkspacePage() {
+  const [request, setRequest] = useState<RequestState>({
+    method: 'GET',
+    url: '',
+    headers: [],
+    params: [],
+    body: '',
+    bodyType: 'none',
+    activeTab: 'params',
+  });
+  const [response, setResponse] = useState<ResponseState>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const sendRequest = useCallback(async () => {
+    if (!request.url.trim()) return;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const start = performance.now();
+      const headerMap: Record<string, string> = {};
+      for (const h of request.headers) {
+        if (h.enabled && h.key) {
+          headerMap[h.key] = h.value;
+        }
+      }
+
+      let body: string | undefined;
+      if (request.bodyType !== 'none' && request.method !== 'GET' && request.method !== 'HEAD') {
+        body = request.body;
+        if (request.bodyType === 'json' && !headerMap['Content-Type']) {
+          headerMap['Content-Type'] = 'application/json';
+        }
+      }
+
+      const res = await fetch('/api/proxy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          url: request.url,
+          method: request.method,
+          headers: headerMap,
+          body,
+        }),
+      });
+
+      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),
+        duration: elapsed,
+        size: typeof data.body === 'string' ? new TextEncoder().encode(data.body).length : 0,
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Request failed');
+    } finally {
+      setLoading(false);
+    }
+  }, [request]);
+
+  const updateMethod = (method: HttpMethod) => {
+    setRequest((prev) => ({ ...prev, method }));
+  };
+
+  const updateUrl = (url: string) => {
+    setRequest((prev) => ({ ...prev, url }));
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* URL Bar */}
+      <div className="flex items-center gap-2 p-3 border-b border-border">
+        <select
+          value={request.method}
+          onChange={(e) => updateMethod(e.target.value as HttpMethod)}
+          className={cn(
+            'px-3 py-2 rounded-md border border-border bg-background text-sm font-medium font-mono',
+            request.method === 'GET' && 'text-method-get',
+            request.method === 'POST' && 'text-method-post',
+            request.method === 'PUT' && 'text-method-put',
+            request.method === 'DELETE' && 'text-method-delete',
+            request.method === 'PATCH' && 'text-method-patch',
+          )}
+        >
+          {METHODS.map((m) => (
+            <option key={m} value={m}>{m}</option>
+          ))}
+        </select>
+        <input
+          type="text"
+          value={request.url}
+          onChange={(e) => updateUrl(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && sendRequest()}
+          placeholder="Enter request URL (e.g., https://api.example.com/users)"
+          className="flex-1 px-3 py-2 rounded-md border border-border bg-background text-foreground text-sm font-mono placeholder:text-muted-foreground"
+        />
+        <button
+          onClick={sendRequest}
+          disabled={loading || !request.url.trim()}
+          className="px-6 py-2 rounded-md bg-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          {loading ? 'Sending...' : 'Send'}
+        </button>
+      </div>
+
+      {/* Request/Response Split */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Request Panel */}
+        <div className="w-1/2 border-r border-border flex flex-col overflow-hidden">
+          {/* Tabs */}
+          <div className="flex border-b border-border">
+            {['params', 'headers', 'body', 'auth'].map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setRequest((prev) => ({ ...prev, activeTab: tab }))}
+                className={cn(
+                  'px-4 py-2 text-sm capitalize transition-colors',
+                  request.activeTab === tab
+                    ? 'text-primary border-b-2 border-primary'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+
+          {/* Tab Content */}
+          <div className="flex-1 overflow-auto p-4">
+            {request.activeTab === 'params' && (
+              <div>
+                <div className="text-sm text-muted-foreground mb-2">Query Parameters</div>
+                <textarea
+                  value={request.headers.map((h) => `${h.key}: ${h.value}`).join('\n')}
+                  readOnly
+                  className="w-full h-32 px-3 py-2 rounded-md border border-border bg-background text-foreground font-mono text-sm"
+                  placeholder="No parameters"
+                />
+              </div>
+            )}
+            {request.activeTab === 'headers' && (
+              <div>
+                <div className="text-sm text-muted-foreground mb-2">Request Headers</div>
+                <textarea
+                  value={request.headers.map((h) => `${h.key}: ${h.value}`).join('\n')}
+                  readOnly
+                  className="w-full h-32 px-3 py-2 rounded-md border border-border bg-background text-foreground font-mono text-sm"
+                  placeholder="No headers"
+                />
+              </div>
+            )}
+            {request.activeTab === 'body' && (
+              <div>
+                <div className="flex items-center gap-2 mb-2">
+                  <select
+                    value={request.bodyType}
+                    onChange={(e) => setRequest((prev) => ({ ...prev, bodyType: e.target.value }))}
+                    className="px-2 py-1 rounded border border-border bg-background text-sm text-foreground"
+                  >
+                    <option value="none">none</option>
+                    <option value="json">JSON</option>
+                    <option value="text">Text</option>
+                    <option value="xml">XML</option>
+                    <option value="urlencoded">Form URL Encoded</option>
+                  </select>
+                </div>
+                {request.bodyType !== 'none' && (
+                  <textarea
+                    value={request.body}
+                    onChange={(e) => setRequest((prev) => ({ ...prev, body: e.target.value }))}
+                    className="w-full h-64 px-3 py-2 rounded-md border border-border bg-background text-foreground font-mono text-sm resize-y"
+                    placeholder={`Enter ${request.bodyType} body...`}
+                  />
+                )}
+              </div>
+            )}
+            {request.activeTab === 'auth' && (
+              <div className="text-sm text-muted-foreground">
+                <p>Configure authentication in the request settings.</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Response Panel */}
+        <div className="w-1/2 flex flex-col overflow-hidden">
+          {error && (
+            <div className="p-3 bg-destructive/10 text-destructive text-sm border-b border-border">
+              {error}
+            </div>
+          )}
+          {response ? (
+            <>
+              <div className="flex items-center gap-4 p-3 border-b border-border">
+                <span className={cn(
+                  'px-2 py-1 rounded text-sm font-mono font-medium',
+                  response.status < 300 && 'bg-green-500/10 text-green-400',
+                  response.status >= 300 && response.status < 400 && 'bg-blue-500/10 text-blue-400',
+                  response.status >= 400 && response.status < 500 && 'bg-orange-500/10 text-orange-400',
+                  response.status >= 500 && 'bg-red-500/10 text-red-400',
+                )}>
+                  {response.status} {response.statusText}
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {response.duration}ms
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {formatBytes(response.size)}
+                </span>
+              </div>
+              <div className="flex-1 overflow-auto p-4">
+                <pre className="text-sm font-mono text-foreground whitespace-pre-wrap break-all">
+                  {tryFormatJson(response.body)}
+                </pre>
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-muted-foreground">
+              <div className="text-center">
+                <p className="text-lg mb-2">No response yet</p>
+                <p className="text-sm">Enter a URL and click Send to make a request</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const units = ['B', 'KB', 'MB', 'GB'];
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${units[i] ?? 'B'}`;
+}
+
+function tryFormatJson(body: string): string {
+  try {
+    return JSON.stringify(JSON.parse(body), null, 2);
+  } catch {
+    return body;
+  }
+}

package/src/app/api/ai/discover/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest } from 'next/server';
+import { success, error } from '@/lib/utils/api-response';
+import { AiDiscoverSchema } from '@/lib/utils/validation';
+import { discoverEndpoints } from '@/lib/ai/endpoint-discovery';
+
+export async function POST(req: NextRequest): Promise<Response> {
+  try {
+    const body = await req.json();
+    const parsed = AiDiscoverSchema.parse(body);
+
+    const endpoints = discoverEndpoints(parsed.code, parsed.framework);
+
+    return success({ endpoints, count: endpoints.length }) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}

package/src/app/api/ai/explain/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest } from 'next/server';
+import { success, error } from '@/lib/utils/api-response';
+import { AiExplainSchema } from '@/lib/utils/validation';
+import { explainResponse } from '@/lib/ai/explainer';
+
+export async function POST(req: NextRequest): Promise<Response> {
+  try {
+    const body = await req.json();
+    const parsed = AiExplainSchema.parse(body);
+
+    const responseData = typeof parsed.response === 'object' && parsed.response !== null && 'status' in parsed.response
+      ? parsed.response as { status: number; statusText: string; headers: Record<string, string>; body: string }
+      : { status: 200, statusText: 'OK', headers: {}, body: JSON.stringify(parsed.response) };
+
+    const explanation = await explainResponse(
+      {
+        response: responseData,
+        question: parsed.question,
+      },
+      process.env['OPENAI_API_KEY'],
+      process.env['OPENAI_BASE_URL'],
+      process.env['OPENAI_MODEL'],
+    );
+
+    return success({ explanation }) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}

package/src/app/api/ai/generate-tests/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest } from 'next/server';
+import { success, error } from '@/lib/utils/api-response';
+import { AiGenerateTestsSchema } from '@/lib/utils/validation';
+import { generateTests } from '@/lib/ai/test-generator';
+
+export async function POST(req: NextRequest): Promise<Response> {
+  try {
+    const body = await req.json();
+    const parsed = AiGenerateTestsSchema.parse(body);
+
+    const tests = await generateTests(
+      {
+        method: 'GET',
+        url: '',
+        headers: {},
+      },
+      {
+        status: typeof parsed.response === 'object' && parsed.response !== null && 'status' in parsed.response
+          ? (parsed.response as { status: number }).status
+          : 200,
+        statusText: 'OK',
+        headers: {},
+        body: typeof parsed.response === 'string'
+          ? parsed.response
+          : JSON.stringify(parsed.response, null, 2),
+        duration: 0,
+      },
+      process.env['OPENAI_API_KEY'],
+      process.env['OPENAI_BASE_URL'],
+      process.env['OPENAI_MODEL'],
+    );
+
+    return success({ tests }) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}

package/src/app/api/ai/suggest/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest } from 'next/server';
+import { success, error } from '@/lib/utils/api-response';
+import { AiSuggestSchema } from '@/lib/utils/validation';
+import { suggestImprovements } from '@/lib/ai/suggester';
+
+export async function POST(req: NextRequest): Promise<Response> {
+  try {
+    const body = await req.json();
+    const parsed = AiSuggestSchema.parse(body);
+
+    const requestData = typeof parsed.request === 'object' && parsed.request !== null
+      ? parsed.request as { method: string; url: string; headers: Record<string, string>; body?: string; bodyType?: string; auth?: unknown }
+      : { method: 'GET', url: String(parsed.request), headers: {} };
+
+    const suggestions = await suggestImprovements(
+      {
+        request: requestData,
+        response: parsed.response as { status: number; statusText: string; headers: Record<string, string>; body: string; duration: number } | undefined,
+      },
+      process.env['OPENAI_API_KEY'],
+      process.env['OPENAI_BASE_URL'],
+      process.env['OPENAI_MODEL'],
+    );
+
+    return success({ suggestions }) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}

package/src/app/api/collections/[id]/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest } from 'next/server';
+import { prisma } from '@/lib/db/client';
+import { success, noContent, error } from '@/lib/utils/api-response';
+import { NotFoundError } from '@/lib/utils/errors';
+import { UpdateCollectionSchema } from '@/lib/utils/validation';
+
+interface RouteContext {
+  params: { id: string };
+}
+
+export async function GET(_req: NextRequest, context: RouteContext): Promise<Response> {
+  try {
+    const { id } = context.params;
+    const collection = await prisma.collection.findUnique({
+      where: { id },
+      include: {
+        requests: { orderBy: { sortOrder: 'asc' } },
+        children: { include: { requests: { orderBy: { sortOrder: 'asc' } } } },
+      },
+    });
+
+    if (!collection) {
+      throw new NotFoundError('Collection', id);
+    }
+
+    return success(collection) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}
+
+export async function PUT(req: NextRequest, context: RouteContext): Promise<Response> {
+  try {
+    const { id } = context.params;
+    const body = await req.json();
+    const parsed = UpdateCollectionSchema.parse({ ...body, id });
+
+    const collection = await prisma.collection.update({
+      where: { id },
+      data: {
+        name: parsed.name,
+        description: parsed.description,
+        parentId: parsed.parentId,
+        variables: parsed.variables,
+        preScript: parsed.preScript,
+        postScript: parsed.postScript,
+        sortOrder: parsed.sortOrder,
+      },
+    });
+
+    return success(collection) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}
+
+export async function DELETE(_req: NextRequest, context: RouteContext): Promise<Response> {
+  try {
+    const { id } = context.params;
+
+    await prisma.collection.delete({ where: { id } });
+    return noContent() as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}

package/src/app/api/collections/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest } from 'next/server';
+import { prisma } from '@/lib/db/client';
+import { success, created, error } from '@/lib/utils/api-response';
+import { CreateCollectionSchema } from '@/lib/utils/validation';
+
+export async function GET(req: NextRequest): Promise<Response> {
+  try {
+    const { searchParams } = new URL(req.url);
+    const workspaceId = searchParams.get('workspaceId');
+
+    const collections = await prisma.collection.findMany({
+      where: workspaceId ? { workspaceId, parentId: null } : { parentId: null },
+      include: {
+        requests: { orderBy: { sortOrder: 'asc' } },
+        children: { include: { requests: { orderBy: { sortOrder: 'asc' } } } },
+      },
+      orderBy: { sortOrder: 'asc' },
+    });
+
+    return success(collections) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}
+
+export async function POST(req: NextRequest): Promise<Response> {
+  try {
+    const body = await req.json();
+    const parsed = CreateCollectionSchema.parse(body);
+
+    const collection = await prisma.collection.create({
+      data: {
+        name: parsed.name,
+        description: parsed.description,
+        workspaceId: parsed.workspaceId,
+        parentId: parsed.parentId,
+        variables: parsed.variables,
+        preScript: parsed.preScript,
+        postScript: parsed.postScript,
+        sortOrder: parsed.sortOrder,
+      },
+    });
+
+    return created(collection) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}

package/src/app/api/environments/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest } from 'next/server';
+import { prisma } from '@/lib/db/client';
+import { success, created, error } from '@/lib/utils/api-response';
+import { CreateEnvironmentSchema } from '@/lib/utils/validation';
+
+export async function GET(req: NextRequest): Promise<Response> {
+  try {
+    const { searchParams } = new URL(req.url);
+    const workspaceId = searchParams.get('workspaceId');
+
+    const environments = await prisma.environment.findMany({
+      where: workspaceId ? { workspaceId } : undefined,
+      orderBy: { createdAt: 'asc' },
+    });
+
+    return success(environments) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}
+
+export async function POST(req: NextRequest): Promise<Response> {
+  try {
+    const body = await req.json();
+    const parsed = CreateEnvironmentSchema.parse(body);
+
+    const environment = await prisma.environment.create({
+      data: {
+        name: parsed.name,
+        workspaceId: parsed.workspaceId,
+        variables: parsed.variables,
+        isDefault: parsed.isDefault,
+      },
+    });
+
+    return created(environment) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}

package/src/app/api/export/openapi/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest } from 'next/server';
+import { success, error } from '@/lib/utils/api-response';
+import { exportToOpenApi, type ExportCollection } from '@/lib/exporters/openapi';
+
+export async function POST(req: NextRequest): Promise<Response> {
+  try {
+    const body = await req.json() as {
+      collection: ExportCollection;
+    };
+
+    const spec = exportToOpenApi(body.collection);
+
+    return success({ spec, format: 'openapi-3.1' }) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}

package/src/app/api/export/postman/route.ts

@@ -0,0 +1,18 @@
+import { NextRequest } from 'next/server';
+import { success, error } from '@/lib/utils/api-response';
+import { exportToPostman } from '@/lib/exporters/postman';
+import type { ExportCollection } from '@/lib/exporters/openapi';
+
+export async function POST(req: NextRequest): Promise<Response> {
+  try {
+    const body = await req.json() as {
+      collection: ExportCollection;
+    };
+
+    const spec = exportToPostman(body.collection);
+
+    return success({ spec, format: 'postman-v2.1' }) as Response;
+  } catch (err) {
+    return error(err) as Response;
+  }
+}