@theihtisham/devtools-with-cloud 1.0.0

package/src/components/ui/toast.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+interface Toast {
+  id: string;
+  message: string;
+  type: 'success' | 'error' | 'info';
+}
+
+let addToastFn: ((message: string, type?: 'success' | 'error' | 'info') => void) | null = null;
+
+export function toast(message: string, type: 'success' | 'error' | 'info' = 'info') {
+  addToastFn?.(message, type);
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback((message: string, type: 'success' | 'error' | 'info' = 'info') => {
+    const id = Math.random().toString(36).slice(2);
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 3000);
+  }, []);
+
+  useEffect(() => {
+    addToastFn = addToast;
+    return () => { addToastFn = null; };
+  }, [addToast]);
+
+  return (
+    <>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={cn(
+              'px-4 py-2 rounded-lg text-sm shadow-lg animate-slide-in',
+              t.type === 'success' && 'bg-green-500/90 text-white',
+              t.type === 'error' && 'bg-destructive/90 text-destructive-foreground',
+              t.type === 'info' && 'bg-primary/90 text-primary-foreground',
+            )}
+          >
+            {t.message}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

package/src/components/workspace/request-panel.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useState } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+interface RequestPanelProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+  children: React.ReactNode;
+}
+
+const REQUEST_TABS = ['params', 'headers', 'body', 'auth', 'scripts'];
+
+export function RequestPanel({ activeTab, onTabChange, children }: RequestPanelProps) {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex border-b border-border">
+        {REQUEST_TABS.map((tab) => (
+          <button
+            key={tab}
+            onClick={() => onTabChange(tab)}
+            className={cn(
+              'px-4 py-2 text-sm capitalize transition-colors',
+              activeTab === tab
+                ? 'text-primary border-b-2 border-primary'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+      <div className="flex-1 overflow-auto p-4">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/workspace/response-panel.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { cn } from '@/lib/utils/cn';
+
+interface ResponsePanelProps {
+  status: number | null;
+  statusText: string | null;
+  duration: number | null;
+  size: number | null;
+  body: string | null;
+  error?: string | null;
+}
+
+export function ResponsePanel({ status, statusText, duration, size, body, error }: ResponsePanelProps) {
+  if (error) {
+    return (
+      <div className="flex-1 flex items-center justify-center p-4">
+        <div className="text-destructive text-sm">{error}</div>
+      </div>
+    );
+  }
+
+  if (status === null) {
+    return (
+      <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</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Status bar */}
+      <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',
+          status < 300 && 'bg-green-500/10 text-green-400',
+          status >= 300 && status < 400 && 'bg-blue-500/10 text-blue-400',
+          status >= 400 && status < 500 && 'bg-orange-500/10 text-orange-400',
+          status >= 500 && 'bg-red-500/10 text-red-400',
+        )}>
+          {status} {statusText}
+        </span>
+        {duration != null && (
+          <span className="text-sm text-muted-foreground">{duration}ms</span>
+        )}
+        {size != null && (
+          <span className="text-sm text-muted-foreground">{formatBytes(size)}</span>
+        )}
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-auto p-4">
+        {body && (
+          <pre className="text-sm font-mono text-foreground whitespace-pre-wrap break-all">
+            {tryFormatJson(body)}
+          </pre>
+        )}
+      </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/components/workspace/sidebar.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils/cn';
+
+const navItems = [
+  { href: '/workspace', label: 'Workspace' },
+  { href: '/collections', label: 'Collections' },
+  { href: '/environments', label: 'Environments' },
+  { href: '/history', label: 'History' },
+  { href: '/ai', label: 'AI' },
+  { href: '/import', label: 'Import' },
+  { href: '/settings', label: 'Settings' },
+];
+
+interface SidebarProps {
+  className?: string;
+}
+
+export function Sidebar({ className }: SidebarProps) {
+  const pathname = usePathname();
+
+  return (
+    <aside className={cn('w-56 border-r border-border flex flex-col shrink-0', className)}>
+      <div className="p-4 border-b border-border">
+        <Link href="/" className="flex items-center gap-2">
+          <div className="h-7 w-7 rounded-md bg-primary flex items-center justify-center">
+            <span className="text-primary-foreground font-bold text-xs">AT</span>
+          </div>
+          <span className="font-bold text-foreground">APITester</span>
+        </Link>
+      </div>
+      <nav className="flex-1 p-2">
+        {navItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={cn(
+              'flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors mb-1',
+              pathname === item.href || pathname?.startsWith(item.href + '/')
+                ? 'bg-primary/10 text-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent',
+            )}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}

package/src/components/workspace/split-pane.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useState, useRef, useCallback, type ReactNode } from 'react';
+
+interface SplitPaneProps {
+  left: ReactNode;
+  right: ReactNode;
+  defaultSplit?: number;
+  minSize?: number;
+  className?: string;
+}
+
+export function SplitPane({ left, right, defaultSplit = 50, minSize = 200, className }: SplitPaneProps) {
+  const [split, setSplit] = useState(defaultSplit);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  const onMouseDown = useCallback(() => {
+    dragging.current = true;
+    const onMouseMove = (e: MouseEvent) => {
+      if (!dragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const pct = ((e.clientX - rect.left) / rect.width) * 100;
+      setSplit(Math.max(minSize / rect.width * 100, Math.min(100 - minSize / rect.width * 100, pct)));
+    };
+    const onMouseUp = () => {
+      dragging.current = false;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }, [minSize]);
+
+  return (
+    <div ref={containerRef} className="flex h-full">
+      <div style={{ width: `${split}%` }} className="overflow-hidden">
+        {left}
+      </div>
+      <div
+        className="w-1 cursor-col-resize bg-border hover:bg-primary/30 transition-colors"
+        onMouseDown={onMouseDown}
+      />
+      <div style={{ width: `${100 - split}%` }} className="overflow-hidden">
+        {right}
+      </div>
+    </div>
+  );
+}

package/src/components/workspace/tabs/auth-tab.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useState } from 'react';
+
+const AUTH_TYPES = ['none', 'basic', 'bearer', 'apikey', 'oauth2', 'aws'];
+
+interface AuthTabProps {
+  auth: Record<string, string> | null;
+  onChange: (auth: Record<string, string> | null) => void;
+}
+
+export function AuthTab({ auth, onChange }: AuthTabProps) {
+  const authType = auth?.['type'] ?? 'none';
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-sm text-muted-foreground">Type:</span>
+        <select
+          value={authType}
+          onChange={(e) => {
+            const type = e.target.value;
+            if (type === 'none') onChange(null);
+            else onChange({ type, ...getDefaultAuthFields(type) });
+          }}
+          className="px-2 py-1 rounded border border-border bg-background text-sm text-foreground"
+        >
+          {AUTH_TYPES.map((t) => (
+            <option key={t} value={t}>{t}</option>
+          ))}
+        </select>
+      </div>
+
+      {authType === 'basic' && (
+        <div className="space-y-2">
+          <input
+            type="text"
+            value={auth?.['username'] ?? ''}
+            onChange={(e) => onChange({ ...auth!, username: e.target.value })}
+            placeholder="Username"
+            className="w-full px-2 py-1.5 rounded border border-border bg-background text-foreground text-sm"
+          />
+          <input
+            type="password"
+            value={auth?.['password'] ?? ''}
+            onChange={(e) => onChange({ ...auth!, password: e.target.value })}
+            placeholder="Password"
+            className="w-full px-2 py-1.5 rounded border border-border bg-background text-foreground text-sm"
+          />
+        </div>
+      )}
+
+      {authType === 'bearer' && (
+        <input
+          type="text"
+          value={auth?.['token'] ?? ''}
+          onChange={(e) => onChange({ ...auth!, token: e.target.value })}
+          placeholder="Token"
+          className="w-full px-2 py-1.5 rounded border border-border bg-background text-foreground text-sm"
+        />
+      )}
+
+      {authType === 'apikey' && (
+        <div className="space-y-2">
+          <input
+            type="text"
+            value={auth?.['key'] ?? ''}
+            onChange={(e) => onChange({ ...auth!, key: e.target.value })}
+            placeholder="Key name"
+            className="w-full px-2 py-1.5 rounded border border-border bg-background text-foreground text-sm"
+          />
+          <input
+            type="text"
+            value={auth?.['value'] ?? ''}
+            onChange={(e) => onChange({ ...auth!, value: e.target.value })}
+            placeholder="Key value"
+            className="w-full px-2 py-1.5 rounded border border-border bg-background text-foreground text-sm"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getDefaultAuthFields(type: string): Record<string, string> {
+  switch (type) {
+    case 'basic': return { username: '', password: '' };
+    case 'bearer': return { token: '', prefix: 'Bearer' };
+    case 'apikey': return { key: '', value: '', addTo: 'header' };
+    case 'oauth2': return { grantType: 'authorization_code', clientId: '', clientSecret: '' };
+    case 'aws': return { accessKey: '', secretKey: '', region: '', service: '' };
+    default: return {};
+  }
+}

package/src/components/workspace/tabs/body-tab.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState } from 'react';
+import { CodeEditor } from '@/components/ui/code-editor';
+
+const BODY_TYPES = ['none', 'json', 'urlencoded', 'raw', 'graphql'];
+
+interface BodyTabProps {
+  body: string;
+  bodyType: string;
+  onBodyChange: (body: string) => void;
+  onBodyTypeChange: (bodyType: string) => void;
+}
+
+export function BodyTab({ body, bodyType, onBodyChange, onBodyTypeChange }: BodyTabProps) {
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-sm text-muted-foreground">Type:</span>
+        <select
+          value={bodyType}
+          onChange={(e) => onBodyTypeChange(e.target.value)}
+          className="px-2 py-1 rounded border border-border bg-background text-sm text-foreground"
+        >
+          {BODY_TYPES.map((t) => (
+            <option key={t} value={t}>{t}</option>
+          ))}
+        </select>
+      </div>
+      {bodyType !== 'none' && (
+        <CodeEditor
+          value={body}
+          onChange={onBodyChange}
+          language={bodyType === 'json' || bodyType === 'graphql' ? 'json' : 'text'}
+          placeholder={`Enter ${bodyType} body...`}
+          className="h-64"
+        />
+      )}
+    </div>
+  );
+}

package/src/components/workspace/tabs/headers-tab.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { KeyValueEditor } from '@/components/ui/key-value-editor';
+import type { KeyValue } from '@/lib/utils/validation';
+
+interface HeadersTabProps {
+  headers: KeyValue[];
+  onChange: (headers: KeyValue[]) => void;
+}
+
+export function HeadersTab({ headers, onChange }: HeadersTabProps) {
+  return (
+    <div>
+      <h3 className="text-sm font-medium text-foreground mb-2">Request Headers</h3>
+      <KeyValueEditor
+        pairs={headers}
+        onChange={onChange}
+        keyPlaceholder="Header name"
+        valuePlaceholder="Header value"
+      />
+    </div>
+  );
+}

package/src/components/workspace/tabs/params-tab.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { KeyValueEditor } from '@/components/ui/key-value-editor';
+import type { KeyValue } from '@/lib/utils/validation';
+
+interface ParamsTabProps {
+  params: KeyValue[];
+  onChange: (params: KeyValue[]) => void;
+}
+
+export function ParamsTab({ params, onChange }: ParamsTabProps) {
+  return (
+    <div>
+      <h3 className="text-sm font-medium text-foreground mb-2">Query Parameters</h3>
+      <KeyValueEditor
+        pairs={params}
+        onChange={onChange}
+        keyPlaceholder="Parameter name"
+        valuePlaceholder="Parameter value"
+      />
+    </div>
+  );
+}

package/src/components/workspace/tabs/pre-request-tab.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { CodeEditor } from '@/components/ui/code-editor';
+
+interface PreRequestTabProps {
+  script: string;
+  onChange: (script: string) => void;
+}
+
+export function PreRequestTab({ script, onChange }: PreRequestTabProps) {
+  return (
+    <div>
+      <h3 className="text-sm font-medium text-foreground mb-2">Pre-request Script</h3>
+      <p className="text-xs text-muted-foreground mb-3">
+        JavaScript code that runs before the request is sent.
+      </p>
+      <CodeEditor
+        value={script}
+        onChange={onChange}
+        language="javascript"
+        placeholder="// Write your pre-request script here"
+        className="h-64"
+      />
+    </div>
+  );
+}

package/src/components/workspace/url-bar.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { cn } from '@/lib/utils/cn';
+import type { HttpMethod } from '@/lib/utils/validation';
+
+const METHODS: HttpMethod[] = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'];
+
+interface UrlBarProps {
+  method: HttpMethod;
+  url: string;
+  loading: boolean;
+  onMethodChange: (method: HttpMethod) => void;
+  onUrlChange: (url: string) => void;
+  onSend: () => void;
+}
+
+export function UrlBar({ method, url, loading, onMethodChange, onUrlChange, onSend }: UrlBarProps) {
+  return (
+    <div className="flex items-center gap-2 p-3 border-b border-border">
+      <select
+        value={method}
+        onChange={(e) => onMethodChange(e.target.value as HttpMethod)}
+        className={cn(
+          'px-3 py-2 rounded-md border border-border bg-background text-sm font-medium font-mono',
+          method === 'GET' && 'text-method-get',
+          method === 'POST' && 'text-method-post',
+          method === 'PUT' && 'text-method-put',
+          method === 'DELETE' && 'text-method-delete',
+          method === 'PATCH' && 'text-method-patch',
+        )}
+      >
+        {METHODS.map((m) => (
+          <option key={m} value={m}>{m}</option>
+        ))}
+      </select>
+      <input
+        type="text"
+        value={url}
+        onChange={(e) => onUrlChange(e.target.value)}
+        onKeyDown={(e) => e.key === 'Enter' && onSend()}
+        placeholder="Enter request URL"
+        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={onSend}
+        disabled={loading || !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>
+  );
+}

package/src/hooks/use-ai.ts

@@ -0,0 +1,115 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+
+interface UseAiReturn {
+  loading: boolean;
+  result: string | null;
+  error: string | null;
+  generateTests: (response: unknown) => Promise<void>;
+  discoverEndpoints: (code: string, framework?: string) => Promise<void>;
+  explainResponse: (response: unknown, question?: string) => Promise<void>;
+  suggestImprovements: (request: unknown, response?: unknown) => Promise<void>;
+  clear: () => void;
+}
+
+export function useAi(): UseAiReturn {
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const generateTests = useCallback(async (response: unknown) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/ai/generate-tests', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ requestId: 'manual', response }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setResult(typeof data.data === 'string' ? data.data : JSON.stringify(data.data, null, 2));
+      } else {
+        setError(data.error?.message ?? 'Failed to generate tests');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to generate tests');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const discoverEndpoints = useCallback(async (code: string, framework: string = 'auto') => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/ai/discover', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code, framework, workspaceId: 'default' }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setResult(JSON.stringify(data.data, null, 2));
+      } else {
+        setError(data.error?.message ?? 'Failed to discover endpoints');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to discover endpoints');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const explainResponse = useCallback(async (response: unknown, question?: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/ai/explain', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ response, question }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setResult(typeof data.data === 'string' ? data.data : JSON.stringify(data.data, null, 2));
+      } else {
+        setError(data.error?.message ?? 'Failed to explain response');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to explain response');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const suggestImprovements = useCallback(async (request: unknown, response?: unknown) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/ai/suggest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ request, response }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setResult(JSON.stringify(data.data, null, 2));
+      } else {
+        setError(data.error?.message ?? 'Failed to get suggestions');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to get suggestions');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const clear = useCallback(() => {
+    setResult(null);
+    setError(null);
+  }, []);
+
+  return { loading, result, error, generateTests, discoverEndpoints, explainResponse, suggestImprovements, clear };
+}