@nordsym/apiclaw 1.3.3 → 1.3.4

package/landing/src/app/dashboard/verify/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect, useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Loader2, AlertCircle, Check } from "lucide-react";
+import Link from "next/link";
+
+function VerifyContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token");
+
+  const [status, setStatus] = useState<"verifying" | "success" | "error">("verifying");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token) {
+      setStatus("error");
+      setError("No verification token provided");
+      return;
+    }
+
+    const verify = async () => {
+      try {
+        const response = await fetch("/api/workspace-auth/verify", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token }),
+        });
+
+        const data = await response.json();
+
+        if (!response.ok || !data.success) {
+          throw new Error(data.error || "Verification failed");
+        }
+
+        // Store session token in localStorage as backup
+        if (data.sessionToken) {
+          localStorage.setItem("apiclaw_workspace_session", data.sessionToken);
+        }
+
+        setStatus("success");
+
+        // Redirect to dashboard after short delay
+        setTimeout(() => {
+          router.push("/dashboard");
+        }, 1500);
+      } catch (err) {
+        setStatus("error");
+        setError(err instanceof Error ? err.message : "Verification failed");
+      }
+    };
+
+    verify();
+  }, [token, router]);
+
+  return (
+    <main className="min-h-screen flex items-center justify-center px-6 bg-[var(--background)]">
+      <div className="max-w-md w-full text-center">
+        {status === "verifying" && (
+          <>
+            <Loader2 className="w-16 h-16 text-accent animate-spin mx-auto mb-6" />
+            <h1 className="text-2xl font-bold mb-2">Verifying...</h1>
+            <p className="text-[var(--text-muted)]">Please wait while we sign you in.</p>
+          </>
+        )}
+
+        {status === "success" && (
+          <>
+            <div className="w-20 h-20 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-6">
+              <Check className="w-10 h-10 text-green-500" />
+            </div>
+            <h1 className="text-2xl font-bold mb-2">Success!</h1>
+            <p className="text-[var(--text-muted)]">Redirecting to your dashboard...</p>
+          </>
+        )}
+
+        {status === "error" && (
+          <>
+            <div className="w-20 h-20 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-6">
+              <AlertCircle className="w-10 h-10 text-red-500" />
+            </div>
+            <h1 className="text-2xl font-bold mb-2">Verification Failed</h1>
+            <p className="text-red-500 mb-6">{error}</p>
+            <Link href="/login" className="btn-primary">
+              Try Again
+            </Link>
+          </>
+        )}
+      </div>
+    </main>
+  );
+}
+
+export default function VerifyPage() {
+  return (
+    <Suspense fallback={
+      <main className="min-h-screen flex items-center justify-center px-6 bg-[var(--background)]">
+        <div className="text-center">
+          <Loader2 className="w-16 h-16 text-accent animate-spin mx-auto mb-6" />
+          <p className="text-[var(--text-muted)]">Loading...</p>
+        </div>
+      </main>
+    }>
+      <VerifyContent />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,204 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Mail, Loader2, Check, ArrowRight, Sun, Moon, Zap } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [isDark, setIsDark] = useState(true);
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSent, setIsSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Check if already logged in
+    const checkSession = async () => {
+      try {
+        const res = await fetch("/api/workspace-auth/session");
+        const data = await res.json();
+        if (data.session) {
+          router.push("/dashboard");
+          return;
+        }
+      } catch {
+        // Not logged in, continue
+      }
+    };
+    checkSession();
+
+    const saved = localStorage.getItem("theme");
+    const prefersDark = saved ? saved === "dark" : true;
+    setIsDark(prefersDark);
+    document.documentElement.classList.toggle("dark", prefersDark);
+  }, [router]);
+
+  const toggleTheme = () => {
+    const newTheme = !isDark;
+    setIsDark(newTheme);
+    document.documentElement.classList.toggle("dark", newTheme);
+    localStorage.setItem("theme", newTheme ? "dark" : "light");
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch("/api/workspace-auth/magic-link", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || "Failed to send magic link");
+      }
+
+      setIsSent(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isSent) {
+    return (
+      <main className="min-h-screen flex items-center justify-center px-6 bg-[var(--background)]">
+        <div className="max-w-md w-full text-center">
+          <div className="w-20 h-20 rounded-full bg-accent/20 flex items-center justify-center mx-auto mb-8">
+            <Check className="w-10 h-10 text-accent" />
+          </div>
+          <h1 className="text-3xl font-bold mb-4">Check Your Email</h1>
+          <p className="text-[var(--text-secondary)] mb-2">
+            We&apos;ve sent a magic link to:
+          </p>
+          <p className="font-semibold text-lg mb-8">{email}</p>
+          <p className="text-sm text-[var(--text-muted)]">
+            Click the link in the email to sign in. The link expires in 15 minutes.
+          </p>
+          <button
+            onClick={() => setIsSent(false)}
+            className="mt-8 text-accent hover:underline"
+          >
+            Use a different email
+          </button>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-[var(--background)]">
+      {/* Header */}
+      <header className="fixed top-0 w-full z-50 bg-[var(--background)]/90 backdrop-blur-xl border-b border-[var(--border-subtle)]">
+        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-accent/20 flex items-center justify-center text-xl">
+              🦞
+            </div>
+            <span className="font-bold text-lg tracking-tight">APIClaw</span>
+          </Link>
+          <button
+            onClick={toggleTheme}
+            className="p-2 rounded-lg hover:bg-[var(--surface)] transition"
+            aria-label="Toggle theme"
+          >
+            {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+          </button>
+        </div>
+      </header>
+
+      <div className="pt-32 pb-24 px-6">
+        <div className="max-w-md mx-auto">
+          <div className="text-center mb-8">
+            <div className="w-16 h-16 rounded-2xl bg-accent/20 flex items-center justify-center mx-auto mb-6">
+              <Zap className="w-8 h-8 text-accent" />
+            </div>
+            <h1 className="text-3xl font-bold mb-2">Agent Workspace</h1>
+            <p className="text-[var(--text-secondary)]">
+              Sign in to manage your AI agents and view usage
+            </p>
+          </div>
+
+          <div className="rounded-2xl bg-[var(--surface-elevated)] border border-[var(--border)] p-8">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium mb-2">Email</label>
+                <div className="relative">
+                  <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-muted)]" />
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => {
+                      setEmail(e.target.value);
+                      setError(null);
+                    }}
+                    placeholder="you@company.com"
+                    required
+                    className="w-full pl-12 pr-4 py-3 rounded-xl bg-[var(--surface)] border border-[var(--border)] focus:border-accent focus:outline-none transition"
+                  />
+                </div>
+              </div>
+
+              {error && (
+                <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-500 text-sm">
+                  {error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isLoading || !email}
+                className="btn-primary w-full justify-center disabled:opacity-50"
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2 className="w-5 h-5 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    Send Magic Link
+                    <ArrowRight className="w-5 h-5" />
+                  </>
+                )}
+              </button>
+            </form>
+
+            <div className="mt-6 pt-6 border-t border-[var(--border)]">
+              <div className="space-y-3 text-sm text-[var(--text-muted)]">
+                <div className="flex items-center gap-2">
+                  <Check className="w-4 h-4 text-green-500" />
+                  <span>1,000 free API calls per month</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Check className="w-4 h-4 text-green-500" />
+                  <span>Connect unlimited AI agents</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Check className="w-4 h-4 text-green-500" />
+                  <span>Usage analytics & monitoring</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6 text-center">
+            <p className="text-sm text-[var(--text-muted)]">
+              Are you an API provider?{" "}
+              <Link href="/providers/dashboard/login" className="text-accent hover:underline">
+                Provider Dashboard
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,288 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { Suspense } from "react";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://adventurous-avocet-799.convex.cloud";
+
+interface BillingStatus {
+  tier: string;
+  status: string;
+  usageCount: number;
+  usageLimit: number;
+  usageRemaining: number;
+  usagePercent: number;
+  hasStripe: boolean;
+  email: string;
+}
+
+async function queryConvex<T>(path: string, args: Record<string, unknown>): Promise<T> {
+  const response = await fetch(`${CONVEX_URL}/api/query`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ path, args }),
+  });
+  const result = await response.json();
+  return result.value !== undefined ? result.value : result;
+}
+
+async function actionConvex<T>(path: string, args: Record<string, unknown>): Promise<T> {
+  const response = await fetch(`${CONVEX_URL}/api/action`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ path, args }),
+  });
+  const result = await response.json();
+  return result.value !== undefined ? result.value : result;
+}
+
+function UpgradeContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const workspaceId = searchParams.get("ws");
+  const success = searchParams.get("success");
+  
+  const [billing, setBilling] = useState<BillingStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [upgrading, setUpgrading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!workspaceId) {
+      setError("Missing workspace ID");
+      setLoading(false);
+      return;
+    }
+
+    async function loadBilling() {
+      try {
+        const status = await queryConvex<BillingStatus | null>("billing:getBillingStatus", {
+          workspaceId,
+        });
+        setBilling(status);
+      } catch (err) {
+        setError("Failed to load billing status");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadBilling();
+  }, [workspaceId]);
+
+  const handleUpgrade = async () => {
+    if (!workspaceId) return;
+    
+    setUpgrading(true);
+    setError(null);
+
+    try {
+      const result = await actionConvex<{
+        success: boolean;
+        url?: string;
+        error?: string;
+      }>("billing:createCheckoutSession", {
+        workspaceId,
+        successUrl: `${window.location.origin}/upgrade?ws=${workspaceId}&success=true`,
+        cancelUrl: `${window.location.origin}/upgrade?ws=${workspaceId}`,
+      });
+
+      if (result.success && result.url) {
+        window.location.href = result.url;
+      } else {
+        setError(result.error || "Failed to create checkout session");
+        setUpgrading(false);
+      }
+    } catch (err) {
+      setError("Failed to start upgrade process");
+      setUpgrading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
+        <div className="animate-pulse text-gray-400">Loading...</div>
+      </div>
+    );
+  }
+
+  if (error && !billing) {
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
+        <div className="bg-red-900/20 border border-red-500/30 rounded-lg p-6 max-w-md text-center">
+          <div className="text-red-400 text-lg font-medium mb-2">Error</div>
+          <div className="text-gray-400">{error}</div>
+        </div>
+      </div>
+    );
+  }
+
+  const isPro = billing?.tier === "pro" || billing?.tier === "enterprise";
+
+  return (
+    <div className="min-h-screen bg-gray-950 py-12 px-4">
+      <div className="max-w-2xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-3xl font-bold text-white mb-2">
+            APIClaw Workspace
+          </h1>
+          <p className="text-gray-400">
+            {billing?.email}
+          </p>
+        </div>
+
+        {/* Success Message */}
+        {success && (
+          <div className="bg-green-900/20 border border-green-500/30 rounded-lg p-4 mb-8 text-center">
+            <div className="text-green-400 font-medium">
+              🎉 Upgrade successful! Welcome to APIClaw Pro.
+            </div>
+          </div>
+        )}
+
+        {/* Current Plan Card */}
+        <div className="bg-gray-900 border border-gray-800 rounded-xl p-6 mb-8">
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <div className="text-sm text-gray-400 mb-1">Current Plan</div>
+              <div className="text-2xl font-bold text-white capitalize">
+                {billing?.tier || "Free"}
+                {isPro && <span className="ml-2 text-sm text-emerald-400">✓ Active</span>}
+              </div>
+            </div>
+            <div className={`px-4 py-2 rounded-full text-sm font-medium ${
+              isPro ? "bg-emerald-500/20 text-emerald-400" : "bg-gray-800 text-gray-400"
+            }`}>
+              {isPro ? "Pro" : "Free Tier"}
+            </div>
+          </div>
+
+          {/* Usage Bar */}
+          <div className="mb-6">
+            <div className="flex justify-between text-sm mb-2">
+              <span className="text-gray-400">API Calls This Month</span>
+              <span className="text-white font-medium">
+                {billing?.usageCount.toLocaleString()} / {billing?.usageLimit === -1 ? "∞" : billing?.usageLimit.toLocaleString()}
+              </span>
+            </div>
+            <div className="h-3 bg-gray-800 rounded-full overflow-hidden">
+              <div 
+                className={`h-full transition-all ${
+                  (billing?.usagePercent || 0) > 80 ? "bg-red-500" : 
+                  (billing?.usagePercent || 0) > 50 ? "bg-yellow-500" : "bg-emerald-500"
+                }`}
+                style={{ width: `${Math.min(billing?.usagePercent || 0, 100)}%` }}
+              />
+            </div>
+            {!isPro && billing && billing.usageRemaining > 0 && billing.usageRemaining < 20 && (
+              <div className="text-sm text-yellow-400 mt-2">
+                ⚠️ Only {billing.usageRemaining} calls remaining
+              </div>
+            )}
+          </div>
+
+          {/* Plan Features */}
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div className="flex items-center gap-2 text-gray-400">
+              <span className={isPro ? "text-emerald-400" : "text-gray-600"}>✓</span>
+              <span>{isPro ? "10,000" : "100"} API calls/month</span>
+            </div>
+            <div className="flex items-center gap-2 text-gray-400">
+              <span className={isPro ? "text-emerald-400" : "text-gray-600"}>✓</span>
+              <span>Priority support</span>
+            </div>
+            <div className="flex items-center gap-2 text-gray-400">
+              <span className={isPro ? "text-emerald-400" : "text-gray-600"}>✓</span>
+              <span>Advanced analytics</span>
+            </div>
+            <div className="flex items-center gap-2 text-gray-400">
+              <span className={isPro ? "text-emerald-400" : "text-gray-600"}>✓</span>
+              <span>All providers</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Upgrade Card (only show for free tier) */}
+        {!isPro && (
+          <div className="bg-gradient-to-r from-red-600/20 to-orange-600/20 border border-red-500/30 rounded-xl p-6">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <div className="text-xl font-bold text-white mb-1">
+                  Upgrade to Pro
+                </div>
+                <div className="text-gray-400">
+                  100x more API calls, priority support
+                </div>
+              </div>
+              <div className="text-right">
+                <div className="text-3xl font-bold text-white">$99</div>
+                <div className="text-gray-400 text-sm">/month</div>
+              </div>
+            </div>
+
+            {error && (
+              <div className="text-red-400 text-sm mb-4 bg-red-900/20 p-3 rounded">
+                {error}
+              </div>
+            )}
+
+            <button
+              onClick={handleUpgrade}
+              disabled={upgrading}
+              className={`w-full py-3 px-6 rounded-lg font-medium transition-all ${
+                upgrading
+                  ? "bg-gray-700 text-gray-400 cursor-not-allowed"
+                  : "bg-red-600 hover:bg-red-500 text-white"
+              }`}
+            >
+              {upgrading ? (
+                <span className="flex items-center justify-center gap-2">
+                  <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  Processing...
+                </span>
+              ) : (
+                "Add Payment Method →"
+              )}
+            </button>
+
+            <div className="text-center text-gray-500 text-xs mt-4">
+              Secure payment via Stripe. Cancel anytime.
+            </div>
+          </div>
+        )}
+
+        {/* Already Pro Message */}
+        {isPro && !success && (
+          <div className="text-center text-gray-400">
+            You&apos;re on the Pro plan. Enjoy unlimited API calls!
+          </div>
+        )}
+
+        {/* Back Link */}
+        <div className="text-center mt-8">
+          <a href="/" className="text-gray-500 hover:text-gray-400 text-sm">
+            ← Back to APIClaw
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function UpgradePage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
+        <div className="animate-pulse text-gray-400">Loading...</div>
+      </div>
+    }>
+      <UpgradeContent />
+    </Suspense>
+  );
+}

package/landing/src/lib/stats.json

@@ -1,22 +1,21 @@
 {
   "apiCount": 22392,
-  "categoryCount": 14,
-  "lastUpdated": "2026-02-27T12:05:00.000Z",
-  "generatedAt": "2026-02-27T12:05:00.000Z",
+  "categoryCount": 13,
+  "lastUpdated": "2026-02-27T09:10:41.344767",
+  "generatedAt": "2026-02-28T09:32:15.722Z",
   "categoryBreakdown": {
-    "Utilities": 7069,
-    "Analytics": 2600,
+    "Finance": 1179,
+    "Auth & Security": 491,
+    "Cloud & Infrastructure": 1463,
     "Development": 2278,
-    "Cloud": 1463,
+    "Business": 923,
+    "Commerce": 1151,
+    "Utilities": 7069,
     "AI & ML": 1259,
+    "Location & Maps": 976,
+    "Social & Communication": 1051,
+    "Data & Analytics": 2600,
     "Entertainment": 1212,
-    "Finance": 1179,
-    "Commerce": 1151,
-    "Location": 976,
-    "Communication": 939,
-    "Business": 923,
-    "Health": 740,
-    "Security": 491,
-    "Social": 112
+    "Health & Fitness": 740
   }
-}
+}

package/landing/src/middleware.ts

@@ -0,0 +1,50 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://adventurous-avocet-799.convex.cloud";
+
+export async function middleware(request: NextRequest) {
+  const pathname = request.nextUrl.pathname;
+
+  // Only protect /dashboard routes (not /dashboard/verify)
+  if (pathname.startsWith("/dashboard") && !pathname.startsWith("/dashboard/verify")) {
+    const sessionToken = request.cookies.get("apiclaw_workspace_session")?.value;
+
+    if (!sessionToken) {
+      // Redirect to login if no session
+      return NextResponse.redirect(new URL("/login", request.url));
+    }
+
+    // Optionally verify session with Convex
+    // For performance, we do a lightweight check - full validation happens in the page
+    try {
+      const response = await fetch(`${CONVEX_URL}/api/query`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          path: "workspaces:getSession",
+          args: { token: sessionToken },
+        }),
+      });
+
+      const result = await response.json();
+      const session = result.value || result;
+
+      if (!session) {
+        // Invalid session - clear cookie and redirect
+        const res = NextResponse.redirect(new URL("/login", request.url));
+        res.cookies.delete("apiclaw_workspace_session");
+        return res;
+      }
+    } catch {
+      // On error, let the page handle it
+      return NextResponse.next();
+    }
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/dashboard/:path*"],
+};