@theihtisham/devtools-with-cloud 1.0.0

package/src/app/page.tsx

@@ -0,0 +1,182 @@
+import Link from 'next/link';
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b border-border">
+        <div className="container mx-auto flex items-center justify-between px-6 py-4">
+          <div className="flex items-center gap-2">
+            <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
+              <span className="text-primary-foreground font-bold text-sm">AT</span>
+            </div>
+            <span className="text-xl font-bold text-foreground">APITester</span>
+          </div>
+          <nav className="flex items-center gap-6">
+            <a href="#features" className="text-muted-foreground hover:text-foreground transition-colors">Features</a>
+            <a href="#comparison" className="text-muted-foreground hover:text-foreground transition-colors">Compare</a>
+            <Link
+              href="/workspace"
+              className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors"
+            >
+              Open App
+            </Link>
+          </nav>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <section className="container mx-auto px-6 py-24 text-center">
+        <h1 className="text-5xl font-bold text-foreground mb-6">
+          API Testing,{' '}
+          <span className="text-primary">Reimagined</span>
+        </h1>
+        <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
+          An open-source API testing tool with AI-powered test generation,
+          endpoint discovery, and a beautiful interface. Built for modern developers.
+        </p>
+        <div className="flex gap-4 justify-center">
+          <Link
+            href="/workspace"
+            className="bg-primary text-primary-foreground px-6 py-3 rounded-lg text-lg font-medium hover:bg-primary/90 transition-colors"
+          >
+            Get Started
+          </Link>
+          <a
+            href="https://github.com/api-tester/api-tester"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="border border-border text-foreground px-6 py-3 rounded-lg text-lg font-medium hover:bg-accent transition-colors"
+          >
+            GitHub
+          </a>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section id="features" className="container mx-auto px-6 py-16">
+        <h2 className="text-3xl font-bold text-center text-foreground mb-12">
+          Features That Matter
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {[
+            {
+              title: 'AI Test Generation',
+              description: 'Automatically generate comprehensive test suites from your API responses. Save hours of manual test writing.',
+              icon: 'brain',
+            },
+            {
+              title: 'Endpoint Discovery',
+              description: 'Scan your codebase and auto-generate API collections from Express, FastAPI, Next.js, and more.',
+              icon: 'search',
+            },
+            {
+              title: 'Beautiful Interface',
+              description: 'A modern, responsive UI with syntax highlighting, collapsible JSON, and timing visualizations.',
+              icon: 'palette',
+            },
+            {
+              title: 'Import Anything',
+              description: 'Import from OpenAPI, Postman, cURL, and HAR. Zero migration cost from your existing tools.',
+              icon: 'import',
+            },
+            {
+              title: 'Environment Management',
+              description: 'Switch between development, staging, and production with variable interpolation and secrets masking.',
+              icon: 'env',
+            },
+            {
+              title: 'Self-Hosted',
+              description: 'Run it locally or on your own infrastructure. Your data never leaves your network.',
+              icon: 'server',
+            },
+          ].map((feature) => (
+            <div
+              key={feature.title}
+              className="border border-border rounded-lg p-6 hover:border-primary/50 transition-colors"
+            >
+              <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
+                <span className="text-primary text-lg">
+                  {feature.icon === 'brain' && '{ }'}
+                  {feature.icon === 'search' && '<>'}
+                  {feature.icon === 'palette' && '#'}
+                  {feature.icon === 'import' && '+'}
+                  {feature.icon === 'env' && '$'}
+                  {feature.icon === 'server' && '@'}
+                </span>
+              </div>
+              <h3 className="text-lg font-semibold text-foreground mb-2">{feature.title}</h3>
+              <p className="text-muted-foreground">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Comparison */}
+      <section id="comparison" className="container mx-auto px-6 py-16">
+        <h2 className="text-3xl font-bold text-center text-foreground mb-12">
+          Why APITester?
+        </h2>
+        <div className="overflow-x-auto">
+          <table className="w-full border border-border rounded-lg">
+            <thead>
+              <tr className="border-b border-border bg-muted">
+                <th className="px-4 py-3 text-left text-foreground">Feature</th>
+                <th className="px-4 py-3 text-center text-primary font-bold">APITester</th>
+                <th className="px-4 py-3 text-center text-muted-foreground">Postman</th>
+                <th className="px-4 py-3 text-center text-muted-foreground">Insomnia</th>
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                { feature: 'Open Source', us: true, postman: false, insomnia: true },
+                { feature: 'AI Test Generation', us: true, postman: false, insomnia: false },
+                { feature: 'Self-Hosted', us: true, postman: false, insomnia: false },
+                { feature: 'Unlimited Requests', us: true, postman: true, insomnia: true },
+                { feature: 'Free Forever', us: true, postman: false, insomnia: true },
+                { feature: 'Import/Export', us: true, postman: true, insomnia: true },
+                { feature: 'Environment Variables', us: true, postman: true, insomnia: true },
+              ].map((row) => (
+                <tr key={row.feature} className="border-b border-border">
+                  <td className="px-4 py-3 text-foreground">{row.feature}</td>
+                  <td className="px-4 py-3 text-center">
+                    {row.us ? <span className="text-green-400">&#10003;</span> : <span className="text-red-400">&#10007;</span>}
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    {row.postman ? <span className="text-green-400">&#10003;</span> : <span className="text-red-400">&#10007;</span>}
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    {row.insomnia ? <span className="text-green-400">&#10003;</span> : <span className="text-red-400">&#10007;</span>}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="container mx-auto px-6 py-24 text-center">
+        <h2 className="text-3xl font-bold text-foreground mb-4">
+          Ready to Get Started?
+        </h2>
+        <p className="text-lg text-muted-foreground mb-8">
+          Start testing your APIs in seconds. No account required.
+        </p>
+        <Link
+          href="/workspace"
+          className="bg-primary text-primary-foreground px-8 py-3 rounded-lg text-lg font-medium hover:bg-primary/90 transition-colors inline-block"
+        >
+          Launch APITester
+        </Link>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border py-8">
+        <div className="container mx-auto px-6 text-center text-muted-foreground">
+          <p>APITester - Open Source API Testing Tool</p>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/src/components/ai/ai-panel.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState } from 'react';
+import { useAi } from '@/hooks/use-ai';
+
+export function AiPanel() {
+  const [input, setInput] = useState('');
+  const [mode, setMode] = useState<'generate' | 'discover' | 'explain' | 'suggest'>('generate');
+  const { loading, result, error, generateTests, discoverEndpoints, explainResponse, suggestImprovements, clear } = useAi();
+
+  const handleSubmit = async () => {
+    if (!input.trim()) return;
+    switch (mode) {
+      case 'generate':
+        await generateTests(input);
+        break;
+      case 'discover':
+        await discoverEndpoints(input);
+        break;
+      case 'explain':
+        await explainResponse(input);
+        break;
+      case 'suggest':
+        await suggestImprovements(input);
+        break;
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex gap-1 p-2 border-b border-border">
+        {(['generate', 'discover', 'explain', 'suggest'] as const).map((m) => (
+          <button
+            key={m}
+            onClick={() => { setMode(m); clear(); }}
+            className={`px-3 py-1 text-xs rounded ${mode === m ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground'}`}
+          >
+            {m}
+          </button>
+        ))}
+      </div>
+      <textarea
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        className="flex-1 p-2 bg-transparent text-foreground text-sm font-mono resize-none outline-none"
+        placeholder={`Enter input for ${mode}...`}
+      />
+      <div className="p-2 border-t border-border">
+        <button
+          onClick={handleSubmit}
+          disabled={loading}
+          className="w-full px-3 py-1.5 bg-primary text-primary-foreground rounded text-sm"
+        >
+          {loading ? 'Processing...' : 'Run'}
+        </button>
+      </div>
+      {error && <div className="p-2 text-destructive text-xs border-t border-border">{error}</div>}
+      {result && (
+        <div className="max-h-48 overflow-auto p-2 border-t border-border">
+          <pre className="text-xs font-mono text-foreground whitespace-pre-wrap">{result}</pre>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ai/code-explainer.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useState } from 'react';
+
+export function CodeExplainer() {
+  const [input, setInput] = useState('');
+  const [explanation, setExplanation] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const explain = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/ai/explain', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ response: input }),
+      });
+      const data = await res.json();
+      if (data.success && data.data?.explanation) {
+        setExplanation(data.data.explanation);
+      }
+    } catch {
+      // Handle error silently
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <textarea
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Paste a response to explain..."
+        className="w-full h-40 px-3 py-2 rounded border border-border bg-background text-foreground text-sm font-mono mb-3"
+      />
+      <button
+        onClick={explain}
+        disabled={loading || !input.trim()}
+        className="px-4 py-2 bg-primary text-primary-foreground rounded text-sm mb-3"
+      >
+        {loading ? 'Analyzing...' : 'Explain'}
+      </button>
+      {explanation && (
+        <div className="p-3 rounded border border-border bg-muted/30">
+          <pre className="text-sm text-foreground whitespace-pre-wrap">{explanation}</pre>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ai/endpoint-discovery.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+
+interface DiscoveredEndpoint {
+  method: string;
+  path: string;
+  name: string;
+}
+
+export function EndpointDiscovery() {
+  const [code, setCode] = useState('');
+  const [endpoints, setEndpoints] = useState<DiscoveredEndpoint[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const discover = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/ai/discover', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code, framework: 'auto', workspaceId: 'default' }),
+      });
+      const data = await res.json();
+      if (data.success && data.data?.endpoints) {
+        setEndpoints(data.data.endpoints);
+      }
+    } catch {
+      // Handle error silently
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <textarea
+        value={code}
+        onChange={(e) => setCode(e.target.value)}
+        placeholder="Paste source code to discover endpoints..."
+        className="w-full h-40 px-3 py-2 rounded border border-border bg-background text-foreground text-sm font-mono mb-3"
+      />
+      <button
+        onClick={discover}
+        disabled={loading || !code.trim()}
+        className="px-4 py-2 bg-primary text-primary-foreground rounded text-sm mb-3"
+      >
+        {loading ? 'Scanning...' : 'Discover'}
+      </button>
+      {endpoints.length > 0 && (
+        <div className="space-y-2">
+          {endpoints.map((ep, i) => (
+            <div key={i} className="flex items-center gap-2 p-2 border border-border rounded text-sm">
+              <span className="font-mono text-method-get">{ep.method}</span>
+              <span className="font-mono text-foreground">{ep.path}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ai/test-generator.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useState } from 'react';
+import { CodeEditor } from '@/components/ui/code-editor';
+
+interface TestGeneratorProps {
+  response: string;
+  onGenerated: (tests: string) => void;
+}
+
+export function TestGenerator({ response, onGenerated }: TestGeneratorProps) {
+  const [loading, setLoading] = useState(false);
+  const [tests, setTests] = useState('');
+
+  const generate = async () => {
+    setLoading(true);
+    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 && data.data?.tests) {
+        setTests(data.data.tests);
+        onGenerated(data.data.tests);
+      }
+    } catch {
+      // Handle error silently
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <button
+        onClick={generate}
+        disabled={loading || !response}
+        className="px-4 py-2 bg-primary text-primary-foreground rounded text-sm mb-3"
+      >
+        {loading ? 'Generating...' : 'Generate Tests'}
+      </button>
+      {tests && (
+        <CodeEditor value={tests} onChange={setTests} language="javascript" />
+      )}
+    </div>
+  );
+}

package/src/components/collections/collection-actions.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+interface CollectionActionsProps {
+  collectionId: string;
+  onExport?: (format: string) => void;
+  onRunAll?: () => void;
+  onDelete?: () => void;
+}
+
+export function CollectionActions({ collectionId, onExport, onRunAll, onDelete }: CollectionActionsProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        onClick={onRunAll}
+        className="px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
+      >
+        Run All
+      </button>
+      <select
+        onChange={(e) => e.target.value && onExport?.(e.target.value)}
+        className="px-2 py-1 text-xs border border-border rounded bg-background text-foreground"
+        defaultValue=""
+      >
+        <option value="" disabled>Export</option>
+        <option value="openapi">OpenAPI 3.1</option>
+        <option value="postman">Postman</option>
+      </select>
+      <button
+        onClick={onDelete}
+        className="px-3 py-1 text-xs text-destructive hover:text-destructive/80 transition-colors"
+      >
+        Delete
+      </button>
+    </div>
+  );
+}

package/src/components/collections/collection-tree.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { cn } from '@/lib/utils/cn';
+
+interface CollectionTreeItem {
+  id: string;
+  name: string;
+  method?: string;
+  children?: CollectionTreeItem[];
+}
+
+interface CollectionTreeProps {
+  items: CollectionTreeItem[];
+  selectedId?: string;
+  onSelect: (id: string) => void;
+  className?: string;
+}
+
+export function CollectionTree({ items, selectedId, onSelect, className }: CollectionTreeProps) {
+  return (
+    <div className={cn('space-y-0.5', className)}>
+      {items.map((item) => (
+        <div key={item.id}>
+          <button
+            onClick={() => onSelect(item.id)}
+            className={cn(
+              'w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm text-left transition-colors',
+              selectedId === item.id ? 'bg-primary/10 text-primary' : 'text-foreground hover:bg-accent',
+            )}
+          >
+            {item.method && (
+              <span className={cn(
+                'text-xs font-mono font-medium',
+                item.method === 'GET' && 'text-method-get',
+                item.method === 'POST' && 'text-method-post',
+                item.method === 'PUT' && 'text-method-put',
+                item.method === 'DELETE' && 'text-method-delete',
+                item.method === 'PATCH' && 'text-method-patch',
+              )}>
+                {item.method}
+              </span>
+            )}
+            {!item.method && <span className="text-xs text-muted-foreground">#</span>}
+            <span className="truncate">{item.name}</span>
+          </button>
+          {item.children && item.children.length > 0 && (
+            <div className="ml-4">
+              <CollectionTree items={item.children} selectedId={selectedId} onSelect={onSelect} />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/collections/folder-creator.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+
+interface FolderCreatorProps {
+  parentId?: string;
+  onCreate: (name: string) => void;
+}
+
+export function FolderCreator({ parentId, onCreate }: FolderCreatorProps) {
+  const [name, setName] = useState('');
+  const [show, setShow] = useState(false);
+
+  if (!show) {
+    return (
+      <button
+        onClick={() => setShow(true)}
+        className="text-xs text-primary hover:text-primary/80"
+      >
+        + New Folder
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Folder name"
+        className="flex-1 px-2 py-1 text-sm border border-border rounded bg-background text-foreground"
+        autoFocus
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && name.trim()) {
+            onCreate(name.trim());
+            setName('');
+            setShow(false);
+          }
+          if (e.key === 'Escape') {
+            setShow(false);
+            setName('');
+          }
+        }}
+      />
+      <button
+        onClick={() => { setShow(false); setName(''); }}
+        className="text-xs text-muted-foreground"
+      >
+        Cancel
+      </button>
+    </div>
+  );
+}

package/src/components/landing/comparison.tsx

@@ -0,0 +1,43 @@
+export function Comparison() {
+  const rows = [
+    { feature: 'Open Source', us: true, postman: false, insomnia: true },
+    { feature: 'AI Test Generation', us: true, postman: false, insomnia: false },
+    { feature: 'Self-Hosted', us: true, postman: false, insomnia: false },
+    { feature: 'Free Forever', us: true, postman: false, insomnia: true },
+    { feature: 'Unlimited Requests', us: true, postman: true, insomnia: true },
+  ];
+
+  return (
+    <section className="container mx-auto px-6 py-16">
+      <h2 className="text-3xl font-bold text-center text-foreground mb-12">Why APITester?</h2>
+      <div className="overflow-x-auto">
+        <table className="w-full border border-border rounded-lg">
+          <thead>
+            <tr className="border-b border-border bg-muted">
+              <th className="px-4 py-3 text-left text-foreground">Feature</th>
+              <th className="px-4 py-3 text-center text-primary font-bold">APITester</th>
+              <th className="px-4 py-3 text-center text-muted-foreground">Postman</th>
+              <th className="px-4 py-3 text-center text-muted-foreground">Insomnia</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.feature} className="border-b border-border">
+                <td className="px-4 py-3 text-foreground">{row.feature}</td>
+                <td className="px-4 py-3 text-center">
+                  {row.us ? <span className="text-green-400">&#10003;</span> : <span className="text-red-400">&#10007;</span>}
+                </td>
+                <td className="px-4 py-3 text-center">
+                  {row.postman ? <span className="text-green-400">&#10003;</span> : <span className="text-red-400">&#10007;</span>}
+                </td>
+                <td className="px-4 py-3 text-center">
+                  {row.insomnia ? <span className="text-green-400">&#10003;</span> : <span className="text-red-400">&#10007;</span>}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

package/src/components/landing/cta.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+export function CTA() {
+  return (
+    <section className="container mx-auto px-6 py-24 text-center">
+      <h2 className="text-3xl font-bold text-foreground mb-4">Ready to Get Started?</h2>
+      <p className="text-lg text-muted-foreground mb-8">Start testing your APIs in seconds.</p>
+      <Link
+        href="/workspace"
+        className="bg-primary text-primary-foreground px-8 py-3 rounded-lg text-lg font-medium hover:bg-primary/90 transition-colors inline-block"
+      >
+        Launch APITester
+      </Link>
+    </section>
+  );
+}

package/src/components/landing/features.tsx

@@ -0,0 +1,24 @@
+const features = [
+  { title: 'AI Test Generation', description: 'Automatically generate test suites from API responses.' },
+  { title: 'Endpoint Discovery', description: 'Scan codebases to discover API endpoints automatically.' },
+  { title: 'Beautiful Interface', description: 'Modern, responsive UI with syntax highlighting.' },
+  { title: 'Import Anything', description: 'Import from OpenAPI, Postman, cURL, and HAR.' },
+  { title: 'Environment Management', description: 'Switch between dev, staging, and production.' },
+  { title: 'Self-Hosted', description: 'Run locally. Your data never leaves your network.' },
+];
+
+export function Features() {
+  return (
+    <section className="container mx-auto px-6 py-16">
+      <h2 className="text-3xl font-bold text-center text-foreground mb-12">Features</h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {features.map((f) => (
+          <div key={f.title} className="border border-border rounded-lg p-6 hover:border-primary/50 transition-colors">
+            <h3 className="text-lg font-semibold text-foreground mb-2">{f.title}</h3>
+            <p className="text-muted-foreground">{f.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/components/landing/hero.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link';
+
+export function Hero() {
+  return (
+    <section className="container mx-auto px-6 py-24 text-center">
+      <h1 className="text-5xl font-bold text-foreground mb-6">
+        API Testing, <span className="text-primary">Reimagined</span>
+      </h1>
+      <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
+        An open-source API testing tool with AI-powered test generation,
+        endpoint discovery, and a beautiful interface.
+      </p>
+      <div className="flex gap-4 justify-center">
+        <Link
+          href="/workspace"
+          className="bg-primary text-primary-foreground px-6 py-3 rounded-lg text-lg font-medium hover:bg-primary/90 transition-colors"
+        >
+          Get Started
+        </Link>
+      </div>
+    </section>
+  );
+}