@nordsym/apiclaw 1.3.3 → 1.3.5

package/docs/PRD-workspace-fixes.md

@@ -0,0 +1,178 @@
+# PRD: Workspace Navigation & Error Fixes
+
+**Date:** 2026-02-28  
+**Status:** Draft  
+**Priority:** P0 (blocking UX)
+
+---
+
+## Problem Summary
+
+Three issues identified after workspace merge:
+
+### Issue 1: Header "Add Your API" should be "Workspace"
+**Location:** Landing page header (logged-in state)  
+**Current:** Shows "Add Your API" button  
+**Expected:** Should show "Workspace" button for logged-in users
+
+### Issue 2: APIs Tab Client-Side Error
+**Location:** `/workspace?tab=apis`  
+**Current:** "Application error: a client-side exception has occurred"  
+**Expected:** Should render APIs list for providers
+
+### Issue 3: Navigation Disharmony
+**Location:** `/providers/dashboard`  
+**Current:** Renders old Provider Dashboard with its own tabs (Overview, APIs, Analytics) inside a sidebar that links to /workspace  
+**Expected:** Should redirect to `/workspace` OR be removed entirely
+
+---
+
+## Root Cause Analysis
+
+### Issue 1: Header
+The header component checks for session but still shows provider-centric CTA. Needs conditional rendering:
+- Logged out: "Add Your API" / "Connect Your Agent"
+- Logged in: "Workspace" button
+
+### Issue 2: APIs Tab Error
+Likely cause: `ApisTab` component tries to render `providerApis` but:
+- Provider session might not be properly loaded
+- Or `isProvider` check passes but `providerApis` fetch fails
+- Or missing null check on API data
+
+### Issue 3: Navigation Disharmony
+`/providers/dashboard/page.tsx` still exists and renders full dashboard. The layout wraps it with sidebar pointing to /workspace, creating two competing navigation systems.
+
+---
+
+## Proposed Fixes
+
+### Fix 1: Header Update
+
+**File:** `landing/src/components/Header.tsx` (or equivalent)
+
+```tsx
+// Pseudo-code
+const isLoggedIn = checkSession();
+
+{isLoggedIn ? (
+  <Link href="/workspace" className="btn-primary">
+    Workspace
+  </Link>
+) : (
+  <>
+    <Link href="/workspace">Connect Your Agent</Link>
+    <Link href="/providers/register">Add Your API</Link>
+  </>
+)}
+```
+
+### Fix 2: APIs Tab Error Fix
+
+**File:** `landing/src/app/workspace/page.tsx`
+
+1. Add error boundary around ApisTab
+2. Add null checks for providerApis
+3. Ensure isProvider only true when providerApis successfully loaded
+4. Add try-catch in fetchProviderData
+
+```tsx
+// In fetchProviderData
+const fetchProviderData = useCallback(async () => {
+  try {
+    const providerData = localStorage.getItem("apiclaw_provider");
+    const providerSession = localStorage.getItem("apiclaw_session");
+    
+    if (!providerData || !providerSession) {
+      setIsProvider(false);
+      return;
+    }
+    
+    // ... fetch APIs
+    
+    if (apisData.value) {
+      setProviderApis(apisData.value);
+      setIsProvider(true);  // Only set true AFTER successful fetch
+    }
+  } catch (err) {
+    console.error("Fetch provider error:", err);
+    setIsProvider(false);  // Fail safe
+  }
+}, []);
+
+// In ApisTab, add defensive check
+function ApisTab({ apis }: { apis: ProviderAPI[] }) {
+  if (!apis) {
+    return <LoadingState />;
+  }
+  // ...
+}
+```
+
+### Fix 3: Remove Old Provider Dashboard
+
+**Option A: Hard Redirect (Recommended)**
+
+Replace `/providers/dashboard/page.tsx` content with redirect:
+
+```tsx
+"use client";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+export default function ProviderDashboardRedirect() {
+  const router = useRouter();
+  useEffect(() => {
+    router.replace("/workspace?tab=apis");
+  }, [router]);
+  return null;
+}
+```
+
+**Option B: Remove entirely**
+
+Delete `/providers/dashboard/page.tsx` and update layout to not render when at root path.
+
+**Note:** Keep `/providers/dashboard/[apiId]/*` routes for API detail pages.
+
+---
+
+## Migration Path
+
+1. **Phase 1:** Fix APIs tab error (unblocks testing)
+2. **Phase 2:** Redirect /providers/dashboard → /workspace
+3. **Phase 3:** Update header for logged-in state
+4. **Phase 4:** Clean up unused provider dashboard components
+
+---
+
+## Files to Modify
+
+| File | Change |
+|------|--------|
+| `workspace/page.tsx` | Add null checks, error handling for APIs tab |
+| `providers/dashboard/page.tsx` | Replace with redirect to /workspace?tab=apis |
+| `components/Header.tsx` or `page.tsx` (landing) | Add logged-in state check, show "Workspace" button |
+| `providers/dashboard/layout.tsx` | Optional: simplify since main page redirects |
+
+---
+
+## Acceptance Criteria
+
+- [ ] Logged-in user sees "Workspace" in header (not "Add Your API")
+- [ ] Clicking "APIs" tab in /workspace shows API list without error
+- [ ] Navigating to /providers/dashboard redirects to /workspace?tab=apis
+- [ ] API detail pages (/providers/dashboard/{id}) still work
+- [ ] No duplicate sidebars/navigation visible
+
+---
+
+## Estimated Effort
+
+| Task | Time |
+|------|------|
+| Fix APIs tab error | 15 min |
+| Redirect provider dashboard | 10 min |
+| Update header | 20 min |
+| Testing | 15 min |
+| **Total** | **~1 hour** |

package/landing/package-lock.json

@@ -14,7 +14,8 @@
         "next": "^14.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "recharts": "^3.7.0"
+        "recharts": "^3.7.0",
+        "stripe": "^20.4.0"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -924,7 +925,7 @@
       "version": "20.19.33",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
       "integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -2539,6 +2540,23 @@
       "integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==",
       "license": "MIT"
     },
+    "node_modules/stripe": {
+      "version": "20.4.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-20.4.0.tgz",
+      "integrity": "sha512-F/aN1IQ9vHmlyLNi3DkiIbyzQb6gyBG0uYFd/VrEVQSc9BLtlgknPUx0EvzZdBMRLFuRaPFIFd7Mxwtg7Pbwzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "@types/node": ">=16"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -2763,7 +2781,7 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unicode-trie": {

package/landing/package.json

@@ -16,7 +16,8 @@
     "next": "^14.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "recharts": "^3.7.0"
+    "recharts": "^3.7.0",
+    "stripe": "^20.4.0"
   },
   "devDependencies": {
     "@types/node": "^20",

package/landing/src/app/api/stripe/webhook/route.ts

@@ -0,0 +1,178 @@
+import { NextRequest, NextResponse } from "next/server";
+import Stripe from "stripe";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://adventurous-avocet-799.convex.cloud";
+
+// Initialize Stripe
+const stripeSecretKey = process.env.STRIPE_SECRET_KEY;
+const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET;
+
+const stripe = stripeSecretKey ? new Stripe(stripeSecretKey) : null;
+
+// Helper to call Convex mutations
+async function callConvex(path: string, args: Record<string, unknown>) {
+  const response = await fetch(`${CONVEX_URL}/api/mutation`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ path, args }),
+  });
+  
+  const result = await response.json();
+  return result.value || result;
+}
+
+// Helper to call Convex queries
+async function queryConvex(path: string, args: Record<string, unknown>) {
+  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 || result;
+}
+
+export async function POST(req: NextRequest) {
+  if (!stripe || !webhookSecret) {
+    console.error("Stripe not configured");
+    return NextResponse.json({ error: "Stripe not configured" }, { status: 500 });
+  }
+
+  try {
+    // Get raw body for signature verification
+    const body = await req.text();
+    const signature = req.headers.get("stripe-signature");
+
+    if (!signature) {
+      return NextResponse.json({ error: "Missing signature" }, { status: 400 });
+    }
+
+    // Verify webhook signature
+    let event: Stripe.Event;
+    try {
+      event = stripe.webhooks.constructEvent(body, signature, webhookSecret);
+    } catch (err) {
+      console.error("Webhook signature verification failed:", err);
+      return NextResponse.json({ error: "Invalid signature" }, { status: 400 });
+    }
+
+    console.log(`[Stripe Webhook] Event: ${event.type}`);
+
+    // Handle events
+    switch (event.type) {
+      case "checkout.session.completed": {
+        const session = event.data.object as Stripe.Checkout.Session;
+        await handleCheckoutCompleted(session);
+        break;
+      }
+
+      case "invoice.payment_failed": {
+        const invoice = event.data.object as Stripe.Invoice;
+        await handlePaymentFailed(invoice);
+        break;
+      }
+
+      case "customer.subscription.deleted": {
+        const subscription = event.data.object as Stripe.Subscription;
+        await handleSubscriptionCanceled(subscription);
+        break;
+      }
+
+      default:
+        console.log(`[Stripe Webhook] Unhandled event: ${event.type}`);
+    }
+
+    return NextResponse.json({ received: true });
+  } catch (error) {
+    console.error("Webhook error:", error);
+    return NextResponse.json({ error: "Webhook failed" }, { status: 500 });
+  }
+}
+
+// Handle successful checkout
+async function handleCheckoutCompleted(session: Stripe.Checkout.Session) {
+  const workspaceId = session.metadata?.workspaceId;
+  const type = session.metadata?.type;
+
+  console.log(`[Stripe] Checkout completed: ${session.id}, workspace: ${workspaceId}, type: ${type}`);
+
+  if (!workspaceId) {
+    // Try to find workspace by customer ID
+    if (session.customer) {
+      const workspace = await queryConvex("billing:getWorkspaceByStripeCustomer", {
+        stripeCustomerId: session.customer as string,
+      });
+      
+      if (workspace) {
+        await callConvex("billing:upgradeWorkspace", {
+          workspaceId: workspace._id,
+          tier: "pro",
+        });
+        console.log(`[Stripe] Upgraded workspace ${workspace._id} to pro`);
+        return;
+      }
+    }
+    console.error("[Stripe] No workspace found for checkout session");
+    return;
+  }
+
+  // Upgrade workspace to pro
+  const result = await callConvex("billing:upgradeWorkspace", {
+    workspaceId,
+    tier: "pro",
+    stripeSubscriptionId: session.subscription as string,
+  });
+
+  console.log(`[Stripe] Upgrade result:`, result);
+}
+
+// Handle failed payment
+async function handlePaymentFailed(invoice: Stripe.Invoice) {
+  const customerId = invoice.customer as string;
+  
+  console.log(`[Stripe] Payment failed for customer: ${customerId}`);
+
+  // Find workspace by customer ID
+  const workspace = await queryConvex("billing:getWorkspaceByStripeCustomer", {
+    stripeCustomerId: customerId,
+  });
+
+  if (!workspace) {
+    console.error("[Stripe] No workspace found for customer:", customerId);
+    return;
+  }
+
+  // Suspend workspace
+  await callConvex("billing:suspendWorkspace", {
+    workspaceId: workspace._id,
+    reason: "payment_failed",
+  });
+
+  console.log(`[Stripe] Suspended workspace ${workspace._id} due to payment failure`);
+}
+
+// Handle subscription cancellation
+async function handleSubscriptionCanceled(subscription: Stripe.Subscription) {
+  const customerId = subscription.customer as string;
+  
+  console.log(`[Stripe] Subscription canceled for customer: ${customerId}`);
+
+  // Find workspace by customer ID
+  const workspace = await queryConvex("billing:getWorkspaceByStripeCustomer", {
+    stripeCustomerId: customerId,
+  });
+
+  if (!workspace) {
+    console.error("[Stripe] No workspace found for customer:", customerId);
+    return;
+  }
+
+  // Downgrade to free tier
+  await callConvex("billing:upgradeWorkspace", {
+    workspaceId: workspace._id,
+    tier: "free",
+  });
+
+  console.log(`[Stripe] Downgraded workspace ${workspace._id} to free tier`);
+}

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

@@ -0,0 +1,84 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://adventurous-avocet-799.convex.cloud";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { email, fingerprint } = 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: "workspaces:createMagicLink",
+        args: { email: email.toLowerCase(), fingerprint },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to create magic link");
+    }
+
+    const result = await response.json();
+    
+    // Convex wraps response in { status: "success", value: {...} }
+    const token = result.value?.token || result.token;
+    
+    if (!token) {
+      throw new Error("Failed to get token from Convex");
+    }
+
+    // Send magic link email via n8n
+    const magicLinkUrl = `${process.env.NEXT_PUBLIC_APP_URL || "https://apiclaw.nordsym.com"}/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 Workspace",
+        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>
+              <p style="color: #737373; margin: 0;">Agent Workspace Dashboard</p>
+            </div>
+            
+            <p style="color: #525252; font-size: 16px; line-height: 1.6; text-align: center;">
+              Click the button below to sign in to your workspace dashboard and manage your AI agents.
+            </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 Workspace
+              </a>
+            </div>
+            
+            <p style="color: #737373; font-size: 14px; text-align: center;">
+              This link expires in 15 minutes.
+            </p>
+            
+            <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e5e5;">
+              <p style="color: #a3a3a3; font-size: 12px; text-align: center;">
+                If you didn't request this email, you can safely ignore it.<br/>
+                APIClaw by NordSym
+              </p>
+            </div>
+          </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/workspace-auth/session/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://adventurous-avocet-799.convex.cloud";
+
+export async function GET(req: NextRequest) {
+  try {
+    // Get session from cookie or Authorization header
+    const cookieToken = req.cookies.get("apiclaw_workspace_session")?.value;
+    const headerToken = req.headers.get("Authorization")?.replace("Bearer ", "");
+    const token = cookieToken || headerToken;
+
+    if (!token) {
+      return NextResponse.json({ session: null }, { status: 200 });
+    }
+
+    // Verify session in Convex
+    const response = await fetch(`${CONVEX_URL}/api/query`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        path: "workspaces:getSession",
+        args: { token },
+      }),
+    });
+
+    if (!response.ok) {
+      return NextResponse.json({ session: null }, { status: 200 });
+    }
+
+    const result = await response.json();
+    const session = result.value || result;
+
+    if (!session) {
+      // Clear invalid cookie
+      const res = NextResponse.json({ session: null }, { status: 200 });
+      res.cookies.delete("apiclaw_workspace_session");
+      return res;
+    }
+
+    return NextResponse.json({ session });
+  } catch (error) {
+    console.error("Session check error:", error);
+    return NextResponse.json({ session: null }, { status: 200 });
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const cookieToken = req.cookies.get("apiclaw_workspace_session")?.value;
+    const headerToken = req.headers.get("Authorization")?.replace("Bearer ", "");
+    const token = cookieToken || headerToken;
+
+    if (token) {
+      // Logout in Convex
+      await fetch(`${CONVEX_URL}/api/mutation`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          path: "workspaces:logout",
+          args: { token },
+        }),
+      });
+    }
+
+    // Clear cookie
+    const res = NextResponse.json({ success: true });
+    res.cookies.delete("apiclaw_workspace_session");
+    return res;
+  } catch (error) {
+    console.error("Logout error:", error);
+    return NextResponse.json({ error: "Logout failed" }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const CONVEX_URL = process.env.NEXT_PUBLIC_CONVEX_URL || "https://adventurous-avocet-799.convex.cloud";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { token, fingerprint } = 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: "workspaces:verifyMagicLink",
+        args: { token, fingerprint },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Verification failed");
+    }
+
+    const result = await response.json();
+    
+    // Convex wraps response in { status: "success", value: {...} }
+    const data = result.value || result;
+
+    if (!data.success) {
+      return NextResponse.json({ error: data.error || "Invalid token" }, { status: 400 });
+    }
+
+    // Create response with session cookie
+    const res = NextResponse.json({
+      success: true,
+      sessionToken: data.sessionToken,
+      workspace: data.workspace,
+    });
+
+    // Set httpOnly cookie for session
+    res.cookies.set("apiclaw_workspace_session", data.sessionToken, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      maxAge: 30 * 24 * 60 * 60, // 30 days
+      path: "/",
+    });
+
+    return res;
+  } catch (error) {
+    console.error("Verify error:", error);
+    return NextResponse.json({ error: "Verification failed" }, { status: 500 });
+  }
+}