@theihtisham/devtools-with-cloud 1.0.0

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

@@ -0,0 +1,122 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function AiPage() {
+  const [activeFeature, setActiveFeature] = useState<'generate' | 'discover' | 'explain' | 'suggest'>('generate');
+  const [input, setInput] = useState('');
+  const [output, setOutput] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!input.trim()) return;
+    setLoading(true);
+    setOutput('');
+
+    try {
+      let url = '';
+      let body: Record<string, unknown> = {};
+
+      switch (activeFeature) {
+        case 'generate':
+          url = '/api/ai/generate-tests';
+          body = { requestId: 'manual', response: input };
+          break;
+        case 'discover':
+          url = '/api/ai/discover';
+          body = { code: input, framework: 'auto', workspaceId: 'default' };
+          break;
+        case 'explain':
+          url = '/api/ai/explain';
+          body = { response: input };
+          break;
+        case 'suggest':
+          url = '/api/ai/suggest';
+          body = { request: input };
+          break;
+      }
+
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      const data = await res.json();
+      if (data.success) {
+        setOutput(typeof data.data === 'string' ? data.data : JSON.stringify(data.data, null, 2));
+      } else {
+        setOutput(`Error: ${data.error?.message ?? 'Unknown error'}`);
+      }
+    } catch (err) {
+      setOutput(`Error: ${err instanceof Error ? err.message : 'Request failed'}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const features = [
+    { key: 'generate' as const, label: 'Generate Tests', description: 'Generate test assertions from API responses' },
+    { key: 'discover' as const, label: 'Discover Endpoints', description: 'Auto-discover API endpoints from code' },
+    { key: 'explain' as const, label: 'Explain Response', description: 'Get AI explanations of API responses' },
+    { key: 'suggest' as const, label: 'Suggest Improvements', description: 'Get suggestions for API improvements' },
+  ];
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold text-foreground mb-6">AI Assistant</h1>
+
+      {/* Feature Selection */}
+      <div className="grid grid-cols-4 gap-3 mb-6">
+        {features.map((feature) => (
+          <button
+            key={feature.key}
+            onClick={() => { setActiveFeature(feature.key); setInput(''); setOutput(''); }}
+            className={`p-3 rounded-lg border text-left transition-colors ${
+              activeFeature === feature.key
+                ? 'border-primary bg-primary/10'
+                : 'border-border hover:border-primary/50'
+            }`}
+          >
+            <div className="font-medium text-foreground text-sm">{feature.label}</div>
+            <div className="text-xs text-muted-foreground mt-1">{feature.description}</div>
+          </button>
+        ))}
+      </div>
+
+      {/* Input */}
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-foreground mb-2">
+          {activeFeature === 'generate' && 'Paste a JSON response'}
+          {activeFeature === 'discover' && 'Paste source code to scan'}
+          {activeFeature === 'explain' && 'Paste a response to explain'}
+          {activeFeature === 'suggest' && 'Paste a request to analyze'}
+        </label>
+        <textarea
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          className="w-full h-40 px-3 py-2 rounded-md border border-border bg-background text-foreground font-mono text-sm resize-y"
+          placeholder={activeFeature === 'discover' ? '// Paste Express/FastAPI/Next.js code here...' : '{ "key": "value" }'}
+        />
+      </div>
+
+      <button
+        onClick={handleSubmit}
+        disabled={loading || !input.trim()}
+        className="px-6 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
+      >
+        {loading ? 'Processing...' : 'Run'}
+      </button>
+
+      {/* Output */}
+      {output && (
+        <div className="mt-6">
+          <label className="block text-sm font-medium text-foreground mb-2">Result</label>
+          <pre className="p-4 rounded-lg border border-border bg-muted/50 text-foreground font-mono text-sm whitespace-pre-wrap overflow-auto max-h-96">
+            {output}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,155 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface Collection {
+  id: string;
+  name: string;
+  description?: string;
+  workspaceId: string;
+  parentId?: string;
+  sortOrder: number;
+  createdAt: string;
+}
+
+export default function CollectionsPage() {
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newDescription, setNewDescription] = useState('');
+
+  const fetchCollections = useCallback(async () => {
+    try {
+      const res = await fetch('/api/collections');
+      const data = await res.json();
+      if (data.success) {
+        setCollections(data.data);
+      }
+    } catch {
+      // Collections may not be available without DB
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchCollections();
+  }, [fetchCollections]);
+
+  const createCollection = async () => {
+    if (!newName.trim()) return;
+    try {
+      const res = await fetch('/api/collections', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: newName,
+          description: newDescription || undefined,
+          workspaceId: 'default',
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setCollections((prev) => [...prev, data.data]);
+        setShowCreate(false);
+        setNewName('');
+        setNewDescription('');
+      }
+    } catch {
+      // Handle error
+    }
+  };
+
+  const deleteCollection = async (id: string) => {
+    try {
+      await fetch(`/api/collections/${id}`, { method: 'DELETE' });
+      setCollections((prev) => prev.filter((c) => c.id !== id));
+    } catch {
+      // Handle error
+    }
+  };
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-foreground">Collections</h1>
+        <button
+          onClick={() => setShowCreate(true)}
+          className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors"
+        >
+          New Collection
+        </button>
+      </div>
+
+      {showCreate && (
+        <div className="border border-border rounded-lg p-4 mb-6">
+          <h2 className="text-lg font-semibold text-foreground mb-3">Create Collection</h2>
+          <div className="space-y-3">
+            <input
+              type="text"
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              placeholder="Collection name"
+              className="w-full px-3 py-2 rounded-md border border-border bg-background text-foreground text-sm"
+            />
+            <textarea
+              value={newDescription}
+              onChange={(e) => setNewDescription(e.target.value)}
+              placeholder="Description (optional)"
+              className="w-full px-3 py-2 rounded-md border border-border bg-background text-foreground text-sm"
+              rows={2}
+            />
+            <div className="flex gap-2">
+              <button
+                onClick={createCollection}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm"
+              >
+                Create
+              </button>
+              <button
+                onClick={() => { setShowCreate(false); setNewName(''); setNewDescription(''); }}
+                className="px-4 py-2 border border-border rounded-md text-sm text-foreground"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {loading ? (
+        <div className="text-muted-foreground text-center py-8">Loading collections...</div>
+      ) : collections.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground mb-2">No collections yet</p>
+          <p className="text-sm text-muted-foreground">Create a collection to organize your API requests</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {collections.map((collection) => (
+            <div
+              key={collection.id}
+              className="border border-border rounded-lg p-4 hover:border-primary/50 transition-colors"
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="font-medium text-foreground">{collection.name}</h3>
+                  {collection.description && (
+                    <p className="text-sm text-muted-foreground mt-1">{collection.description}</p>
+                  )}
+                </div>
+                <button
+                  onClick={() => deleteCollection(collection.id)}
+                  className="text-sm text-destructive hover:text-destructive/80 transition-colors"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface Environment {
+  id: string;
+  name: string;
+  workspaceId: string;
+  isDefault: boolean;
+  variables: Array<{
+    key: string;
+    value: string;
+    type: string;
+    enabled: boolean;
+  }>;
+}
+
+export default function EnvironmentsPage() {
+  const [environments, setEnvironments] = useState<Environment[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchEnvironments = useCallback(async () => {
+    try {
+      const res = await fetch('/api/environments');
+      const data = await res.json();
+      if (data.success) {
+        setEnvironments(data.data);
+      }
+    } catch {
+      // Environments may not be available without DB
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchEnvironments();
+  }, [fetchEnvironments]);
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-foreground">Environments</h1>
+      </div>
+
+      {loading ? (
+        <div className="text-muted-foreground text-center py-8">Loading environments...</div>
+      ) : environments.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground mb-2">No environments configured</p>
+          <p className="text-sm text-muted-foreground">
+            Create environments to manage variables for different stages (dev, staging, prod)
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {environments.map((env) => (
+            <div
+              key={env.id}
+              className="border border-border rounded-lg p-4"
+            >
+              <div className="flex items-center gap-2 mb-3">
+                <h3 className="font-medium text-foreground">{env.name}</h3>
+                {env.isDefault && (
+                  <span className="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">
+                    Default
+                  </span>
+                )}
+              </div>
+              {env.variables.length > 0 ? (
+                <div className="space-y-1">
+                  {env.variables
+                    .filter((v) => v.enabled)
+                    .map((variable, i) => (
+                      <div key={i} className="flex items-center gap-2 text-sm font-mono">
+                        <span className="text-primary">{variable.key}</span>
+                        <span className="text-muted-foreground">=</span>
+                        <span className="text-foreground">
+                          {variable.type === 'secret' ? '********' : variable.value}
+                        </span>
+                        {variable.type !== 'string' && (
+                          <span className="text-xs text-muted-foreground">({variable.type})</span>
+                        )}
+                      </div>
+                    ))}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">No variables defined</p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { cn } from '@/lib/utils/cn';
+
+interface HistoryEntry {
+  id: string;
+  method: string;
+  url: string;
+  status?: number;
+  statusText?: string;
+  duration?: number;
+  createdAt: string;
+}
+
+export default function HistoryPage() {
+  const [history, setHistory] = useState<HistoryEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchHistory = useCallback(async () => {
+    try {
+      const res = await fetch('/api/requests');
+      const data = await res.json();
+      if (data.success && Array.isArray(data.data)) {
+        // Flatten all requests' history
+        const allHistory: HistoryEntry[] = [];
+        for (const req of data.data) {
+          const histRes = await fetch(`/api/requests/${req.id}/history`);
+          const histData = await histRes.json();
+          if (histData.success && Array.isArray(histData.data)) {
+            allHistory.push(...histData.data);
+          }
+        }
+        allHistory.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+        setHistory(allHistory);
+      }
+    } catch {
+      // History may not be available without DB
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchHistory();
+  }, [fetchHistory]);
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-foreground">Request History</h1>
+      </div>
+
+      {loading ? (
+        <div className="text-muted-foreground text-center py-8">Loading history...</div>
+      ) : history.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground mb-2">No request history</p>
+          <p className="text-sm text-muted-foreground">
+            Send requests from the workspace to see them here
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {history.map((entry) => (
+            <div
+              key={entry.id}
+              className="flex items-center gap-4 p-3 border border-border rounded-lg hover:bg-accent/50 transition-colors"
+            >
+              <span className={cn(
+                'px-2 py-0.5 rounded text-xs font-mono font-medium',
+                entry.method === 'GET' && 'text-method-get',
+                entry.method === 'POST' && 'text-method-post',
+                entry.method === 'PUT' && 'text-method-put',
+                entry.method === 'DELETE' && 'text-method-delete',
+                entry.method === 'PATCH' && 'text-method-patch',
+              )}>
+                {entry.method}
+              </span>
+              <span className="text-sm text-foreground font-mono flex-1 truncate">
+                {entry.url}
+              </span>
+              {entry.status && (
+                <span className={cn(
+                  'text-sm font-mono',
+                  entry.status < 300 && 'text-green-400',
+                  entry.status >= 400 && 'text-red-400',
+                  entry.status >= 300 && entry.status < 400 && 'text-blue-400',
+                )}>
+                  {entry.status}
+                </span>
+              )}
+              {entry.duration != null && (
+                <span className="text-sm text-muted-foreground">
+                  {entry.duration}ms
+                </span>
+              )}
+              <span className="text-xs text-muted-foreground">
+                {new Date(entry.createdAt).toLocaleString()}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+'use client';
+
+import { useState } from 'react';
+
+type ImportFormat = 'openapi' | 'postman' | 'curl' | 'har';
+
+export default function ImportPage() {
+  const [format, setFormat] = useState<ImportFormat>('openapi');
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<string | null>(null);
+
+  const handleImport = async () => {
+    if (!input.trim()) return;
+    setLoading(true);
+    setResult(null);
+
+    try {
+      const res = await fetch(`/api/import/${format}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(
+          format === 'openapi'
+            ? { spec: input, workspaceId: 'default' }
+            : format === 'postman'
+              ? { collection: input, workspaceId: 'default' }
+              : format === 'curl'
+                ? { command: input, collectionId: 'default' }
+                : { har: input, collectionId: 'default' },
+        ),
+      });
+
+      const data = await res.json();
+      if (data.success) {
+        setResult(`Successfully imported: ${JSON.stringify(data.data, null, 2).slice(0, 500)}`);
+      } else {
+        setResult(`Error: ${data.error?.message ?? 'Import failed'}`);
+      }
+    } catch (err) {
+      setResult(`Error: ${err instanceof Error ? err.message : 'Import failed'}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formats: { key: ImportFormat; label: string; placeholder: string }[] = [
+    { key: 'openapi', label: 'OpenAPI / Swagger', placeholder: 'Paste your OpenAPI 3.x JSON or YAML spec...' },
+    { key: 'postman', label: 'Postman Collection', placeholder: 'Paste your Postman Collection v2.1 JSON...' },
+    { key: 'curl', label: 'cURL Command', placeholder: 'curl -X GET https://api.example.com/users -H "Accept: application/json"' },
+    { key: 'har', label: 'HAR File', placeholder: 'Paste your HAR (HTTP Archive) JSON...' },
+  ];
+
+  return (
+    <div className="p-6 max-w-4xl">
+      <h1 className="text-2xl font-bold text-foreground mb-6">Import</h1>
+
+      {/* Format Selection */}
+      <div className="flex gap-2 mb-6">
+        {formats.map((f) => (
+          <button
+            key={f.key}
+            onClick={() => { setFormat(f.key); setInput(''); setResult(null); }}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              format === f.key
+                ? 'bg-primary text-primary-foreground'
+                : 'border border-border text-foreground hover:bg-accent'
+            }`}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Input */}
+      <div className="mb-4">
+        <textarea
+          value={input}
+          onChange={(e) => setInput(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={formats.find((f) => f.key === format)?.placeholder}
+        />
+      </div>
+
+      <button
+        onClick={handleImport}
+        disabled={loading || !input.trim()}
+        className="px-6 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors"
+      >
+        {loading ? 'Importing...' : 'Import'}
+      </button>
+
+      {/* Result */}
+      {result && (
+        <div className="mt-6">
+          <pre className="p-4 rounded-lg border border-border bg-muted/50 text-foreground font-mono text-sm whitespace-pre-wrap overflow-auto max-h-64">
+            {result}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/(app)/layout.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils/cn';
+
+const navItems = [
+  { href: '/workspace', label: 'Workspace', icon: '{ }' },
+  { href: '/collections', label: 'Collections', icon: '#' },
+  { href: '/environments', label: 'Environments', icon: '$' },
+  { href: '/history', label: 'History', icon: '<>' },
+  { href: '/ai', label: 'AI Assistant', icon: '*' },
+  { href: '/import', label: 'Import', icon: '+' },
+  { href: '/settings', label: 'Settings', icon: '@' },
+];
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+      <aside className="w-56 border-r border-border flex flex-col shrink-0">
+        <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-3 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',
+              )}
+            >
+              <span className="font-mono text-xs w-5 text-center">{item.icon}</span>
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+        <div className="p-4 border-t border-border text-xs text-muted-foreground">
+          v1.0.0
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 overflow-auto">
+        {children}
+      </main>
+    </div>
+  );
+}