@nordsym/apiclaw 1.0.0 → 1.1.1

package/landing/src/app/admin/page.tsx

@@ -0,0 +1,348 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Shield, Users, Zap, TrendingUp, Check, X, Clock, ExternalLink, RefreshCw, Eye } from "lucide-react";
+import Link from "next/link";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://brilliant-puffin-712.eu-west-1.convex.cloud";
+
+interface Stats {
+  totalProviders: number;
+  approvedProviders: number;
+  pendingProviders: number;
+  totalAPIs: number;
+  approvedAPIs: number;
+  pendingAPIs: number;
+  totalDiscoveries: number;
+}
+
+interface Provider {
+  _id: string;
+  name: string;
+  email: string;
+  company?: string;
+  website?: string;
+  status: string;
+  createdAt: number;
+  approvedAt?: number;
+}
+
+interface ProviderAPI {
+  _id: string;
+  providerId: string;
+  name: string;
+  description: string;
+  category: string;
+  status: string;
+  pricingModel: string;
+  discoveryCount?: number;
+  createdAt: number;
+}
+
+// Simple admin password check (set via env or hardcode for MVP)
+const ADMIN_PASSWORD = "nordsym2026";
+
+export default function AdminPage() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [password, setPassword] = useState("");
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [providers, setProviders] = useState<Provider[]>([]);
+  const [apis, setApis] = useState<ProviderAPI[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Check if already authenticated this session
+    const auth = sessionStorage.getItem("admin_auth");
+    if (auth === "true") {
+      setIsAuthenticated(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    loadData();
+  }, [isAuthenticated]);
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password === ADMIN_PASSWORD) {
+      setIsAuthenticated(true);
+      sessionStorage.setItem("admin_auth", "true");
+    } else {
+      alert("Invalid password");
+    }
+  };
+
+  const loadData = async () => {
+    setIsLoading(true);
+    try {
+      // Load stats
+      const statsRes = await fetch(`${CONVEX_URL}/api/query`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: "providers:getProviderStats", args: {} }),
+      });
+      const statsData = await statsRes.json();
+      setStats(statsData);
+
+      // Load all providers (using a simple query)
+      const providersRes = await fetch(`${CONVEX_URL}/api/query`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: "providers:getAllProviders", args: {} }),
+      });
+      const providersData = await providersRes.json();
+      setProviders(providersData || []);
+
+      // Load all APIs
+      const apisRes = await fetch(`${CONVEX_URL}/api/query`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: "providers:getAllAPIs", args: {} }),
+      });
+      const apisData = await apisRes.json();
+      setApis(apisData || []);
+    } catch (error) {
+      console.error("Failed to load admin data:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!isAuthenticated) {
+    return (
+      <main className="min-h-screen flex items-center justify-center px-6">
+        <div className="max-w-sm w-full">
+          <div className="text-center mb-8">
+            <Shield className="w-16 h-16 text-accent mx-auto mb-4" />
+            <h1 className="text-2xl font-bold">Admin Access</h1>
+            <p className="text-text-muted">Enter password to continue</p>
+          </div>
+          <form onSubmit={handleLogin} className="space-y-4">
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Password"
+              className="w-full px-4 py-3 rounded-xl bg-surface border border-border focus:border-accent focus:outline-none"
+            />
+            <button type="submit" className="btn-primary w-full justify-center">
+              Access Admin Panel
+            </button>
+          </form>
+        </div>
+      </main>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <main className="min-h-screen flex items-center justify-center">
+        <RefreshCw className="w-12 h-12 text-accent animate-spin" />
+      </main>
+    );
+  }
+
+  const providerAPIs = selectedProvider
+    ? apis.filter((a) => a.providerId === selectedProvider)
+    : [];
+
+  return (
+    <main className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b border-border bg-surface/50 backdrop-blur-xl sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Link href="/" className="w-10 h-10 rounded-xl bg-accent/20 flex items-center justify-center text-xl">
+              🦞
+            </Link>
+            <div>
+              <h1 className="font-bold text-lg">APIClaw Admin</h1>
+              <p className="text-sm text-text-muted">Provider Management</p>
+            </div>
+          </div>
+          <button onClick={loadData} className="btn-secondary !py-2 !px-4 text-sm">
+            <RefreshCw className="w-4 h-4" />
+            Refresh
+          </button>
+        </div>
+      </header>
+
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        {/* Stats */}
+        {stats && (
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+            <StatCard
+              icon={Users}
+              label="Providers"
+              value={stats.totalProviders}
+              subValue={`${stats.approvedProviders} approved`}
+            />
+            <StatCard
+              icon={Zap}
+              label="APIs"
+              value={stats.totalAPIs}
+              subValue={`${stats.approvedAPIs} approved`}
+            />
+            <StatCard
+              icon={TrendingUp}
+              label="Discoveries"
+              value={stats.totalDiscoveries}
+            />
+            <StatCard
+              icon={Clock}
+              label="Pending"
+              value={stats.pendingProviders + stats.pendingAPIs}
+              subValue="need review"
+              accent
+            />
+          </div>
+        )}
+
+        {/* Providers Table */}
+        <div className="bg-surface-elevated rounded-2xl border border-border overflow-hidden mb-8">
+          <div className="p-6 border-b border-border">
+            <h2 className="font-bold text-lg">All Providers</h2>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-surface">
+                <tr>
+                  <th className="text-left px-6 py-3 text-sm font-medium text-text-muted">Provider</th>
+                  <th className="text-left px-6 py-3 text-sm font-medium text-text-muted">Email</th>
+                  <th className="text-left px-6 py-3 text-sm font-medium text-text-muted">Status</th>
+                  <th className="text-left px-6 py-3 text-sm font-medium text-text-muted">APIs</th>
+                  <th className="text-left px-6 py-3 text-sm font-medium text-text-muted">Registered</th>
+                  <th className="text-left px-6 py-3 text-sm font-medium text-text-muted">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border">
+                {providers.map((provider) => {
+                  const apiCount = apis.filter((a) => a.providerId === provider._id).length;
+                  return (
+                    <tr key={provider._id} className="hover:bg-surface/50">
+                      <td className="px-6 py-4">
+                        <div>
+                          <p className="font-medium">{provider.name}</p>
+                          {provider.company && (
+                            <p className="text-sm text-text-muted">{provider.company}</p>
+                          )}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 text-sm">{provider.email}</td>
+                      <td className="px-6 py-4">
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          provider.status === "approved"
+                            ? "bg-green-500/20 text-green-500"
+                            : provider.status === "pending"
+                            ? "bg-yellow-500/20 text-yellow-600"
+                            : "bg-red-500/20 text-red-500"
+                        }`}>
+                          {provider.status}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 text-sm">{apiCount}</td>
+                      <td className="px-6 py-4 text-sm text-text-muted">
+                        {new Date(provider.createdAt).toLocaleDateString()}
+                      </td>
+                      <td className="px-6 py-4">
+                        <button
+                          onClick={() => setSelectedProvider(
+                            selectedProvider === provider._id ? null : provider._id
+                          )}
+                          className="p-2 rounded-lg hover:bg-surface transition"
+                          title="View APIs"
+                        >
+                          <Eye className="w-4 h-4 text-text-muted" />
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })}
+                {providers.length === 0 && (
+                  <tr>
+                    <td colSpan={6} className="px-6 py-12 text-center text-text-muted">
+                      No providers registered yet
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* Selected Provider APIs */}
+        {selectedProvider && (
+          <div className="bg-surface-elevated rounded-2xl border border-border overflow-hidden">
+            <div className="p-6 border-b border-border flex items-center justify-between">
+              <h2 className="font-bold text-lg">
+                APIs for {providers.find((p) => p._id === selectedProvider)?.name}
+              </h2>
+              <button
+                onClick={() => setSelectedProvider(null)}
+                className="text-text-muted hover:text-text-primary"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="divide-y divide-border">
+              {providerAPIs.map((api) => (
+                <div key={api._id} className="p-6">
+                  <div className="flex items-start justify-between mb-2">
+                    <div>
+                      <h3 className="font-semibold">{api.name}</h3>
+                      <p className="text-sm text-text-muted">{api.category} • {api.pricingModel}</p>
+                    </div>
+                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                      api.status === "approved"
+                        ? "bg-green-500/20 text-green-500"
+                        : "bg-yellow-500/20 text-yellow-600"
+                    }`}>
+                      {api.status}
+                    </span>
+                  </div>
+                  <p className="text-text-secondary text-sm mb-3">{api.description}</p>
+                  <div className="flex items-center gap-4 text-sm text-text-muted">
+                    <span>{api.discoveryCount || 0} discoveries</span>
+                    <span>Created {new Date(api.createdAt).toLocaleDateString()}</span>
+                  </div>
+                </div>
+              ))}
+              {providerAPIs.length === 0 && (
+                <div className="p-12 text-center text-text-muted">
+                  No APIs listed for this provider
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
+
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+  subValue,
+  accent,
+}: {
+  icon: typeof Users;
+  label: string;
+  value: number;
+  subValue?: string;
+  accent?: boolean;
+}) {
+  return (
+    <div className={`rounded-2xl border p-5 ${accent ? "bg-accent/10 border-accent/30" : "bg-surface-elevated border-border"}`}>
+      <div className="flex items-center gap-2 mb-2">
+        <Icon className={`w-5 h-5 ${accent ? "text-accent" : "text-text-muted"}`} />
+        <span className="text-sm text-text-muted">{label}</span>
+      </div>
+      <p className={`text-3xl font-bold ${accent ? "text-accent" : ""}`}>{value}</p>
+      {subValue && <p className="text-xs text-text-muted mt-1">{subValue}</p>}
+    </div>
+  );
+}

package/landing/src/app/api/auth/magic-link/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://brilliant-puffin-712.eu-west-1.convex.cloud";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { email } = await req.json();
+
+    if (!email || !email.includes("@")) {
+      return NextResponse.json({ error: "Valid email required" }, { status: 400 });
+    }
+
+    // Create magic link in Convex
+    const response = await fetch(`${CONVEX_URL}/api/mutation`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        path: "providers:createMagicLink",
+        args: { email: email.toLowerCase() },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to create magic link");
+    }
+
+    const { token } = await response.json();
+
+    // Send magic link email via n8n
+    const magicLinkUrl = `${process.env.NEXT_PUBLIC_APP_URL || "https://apiclaw.nordsym.com"}/providers/dashboard/verify?token=${token}`;
+
+    await fetch("https://nordsym.app.n8n.cloud/webhook/symbot-gmail", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        action: "smtp",
+        to: email,
+        subject: "🦞 Sign in to APIClaw Dashboard",
+        message: `
+          <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 500px; margin: 0 auto; padding: 40px 20px;">
+            <div style="text-align: center; margin-bottom: 32px;">
+              <span style="font-size: 48px;">🦞</span>
+              <h1 style="margin: 16px 0 8px; font-size: 24px; font-weight: 700;">Sign in to APIClaw</h1>
+            </div>
+            
+            <p style="color: #525252; font-size: 16px; line-height: 1.6; text-align: center;">
+              Click the button below to sign in to your provider dashboard.
+            </p>
+            
+            <div style="text-align: center; margin: 32px 0;">
+              <a href="${magicLinkUrl}" style="display: inline-block; background: #ef4444; color: white; text-decoration: none; padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: 16px;">
+                Sign In to Dashboard
+              </a>
+            </div>
+            
+            <p style="color: #737373; font-size: 14px; text-align: center;">
+              This link expires in 15 minutes.
+            </p>
+            
+            <p style="color: #737373; font-size: 12px; margin-top: 40px; text-align: center;">
+              If you didn't request this email, you can safely ignore it.
+            </p>
+          </div>
+        `,
+      }),
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Magic link error:", error);
+    return NextResponse.json({ error: "Failed to send magic link" }, { status: 500 });
+  }
+}

package/landing/src/app/api/auth/session/route.ts

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://brilliant-puffin-712.eu-west-1.convex.cloud";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { token } = await req.json();
+
+    if (!token) {
+      return NextResponse.json({ error: "Token required" }, { status: 400 });
+    }
+
+    // Get session from Convex
+    const response = await fetch(`${CONVEX_URL}/api/query`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        path: "providers:getSession",
+        args: { token },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Session check failed");
+    }
+
+    const session = await response.json();
+
+    if (!session) {
+      return NextResponse.json({ error: "Invalid session" }, { status: 401 });
+    }
+
+    return NextResponse.json({ session });
+  } catch (error) {
+    console.error("Session error:", error);
+    return NextResponse.json({ error: "Session check failed" }, { status: 500 });
+  }
+}

package/landing/src/app/api/auth/verify/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://brilliant-puffin-712.eu-west-1.convex.cloud";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { token } = await req.json();
+
+    if (!token) {
+      return NextResponse.json({ error: "Token required" }, { status: 400 });
+    }
+
+    // Verify magic link in Convex
+    const response = await fetch(`${CONVEX_URL}/api/mutation`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        path: "providers:verifyMagicLink",
+        args: { token },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Verification failed");
+    }
+
+    const result = await response.json();
+
+    if (!result.success) {
+      return NextResponse.json({ error: result.error || "Invalid token" }, { status: 400 });
+    }
+
+    // Return session token
+    return NextResponse.json({
+      success: true,
+      sessionToken: result.sessionToken,
+      provider: result.provider,
+    });
+  } catch (error) {
+    console.error("Verify error:", error);
+    return NextResponse.json({ error: "Verification failed" }, { status: 500 });
+  }
+}

package/landing/src/app/api/og/route.tsx

@@ -0,0 +1,84 @@
+import { ImageResponse } from '@vercel/og';
+import statsData from '@/lib/stats.json';
+
+export const runtime = 'edge';
+
+export async function GET() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#0d0d0d',
+          padding: '40px',
+        }}
+      >
+        <div style={{ fontSize: 120, marginBottom: 20 }}>🦞</div>
+        <div
+          style={{
+            fontSize: 72,
+            fontWeight: 'bold',
+            color: '#ef4444',
+            marginBottom: 20,
+          }}
+        >
+          APIClaw
+        </div>
+        <div
+          style={{
+            fontSize: 36,
+            color: '#ffffff',
+            textAlign: 'center',
+            maxWidth: 800,
+          }}
+        >
+          The API Layer for AI Agents
+        </div>
+        <div
+          style={{
+            fontSize: 24,
+            color: '#a3a3a3',
+            marginTop: 16,
+            textAlign: 'center',
+          }}
+        >
+          Find, evaluate, and integrate APIs in milliseconds.
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            gap: 40,
+            marginTop: 40,
+            color: '#ef4444',
+            fontSize: 28,
+          }}
+        >
+          <span>{statsData.apiCount.toLocaleString()}+ APIs</span>
+          <span>•</span>
+          <span>{statsData.categoryCount}+ Categories</span>
+          <span>•</span>
+          <span>MCP Native</span>
+        </div>
+        <div
+          style={{
+            fontSize: 20,
+            color: '#737373',
+            marginTop: 24,
+            fontStyle: 'italic',
+          }}
+        >
+          Built for the agentic era
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  );
+}