VIBN Frontend for Coolify deployment

app/[workspace]/test-api-key/layout.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { WorkspaceLeftRail } from "@/components/layout/workspace-left-rail";
+import { RightPanel } from "@/components/layout/right-panel";
+import { ReactNode, useState } from "react";
+
+export default function TestApiKeyLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [activeSection, setActiveSection] = useState<string>("connections");
+
+  return (
+    <div className="flex h-screen w-full overflow-hidden bg-background">
+      <WorkspaceLeftRail activeSection={activeSection} onSectionChange={setActiveSection} />
+      <main className="flex-1 flex flex-col overflow-hidden">
+        {children}
+      </main>
+      <RightPanel />
+    </div>
+  );
+}
+

app/[workspace]/test-api-key/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { auth } from "@/lib/firebase/config";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export default function TestApiKeyPage() {
+  const [results, setResults] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+
+  const testApiKey = async () => {
+    setLoading(true);
+    try {
+      const user = auth.currentUser;
+      
+      if (!user) {
+        setResults({ error: "Not authenticated. Please sign in first." });
+        return;
+      }
+
+      const token = await user.getIdToken();
+      
+      console.log('[Test] Calling /api/user/api-key...');
+      console.log('[Test] Token length:', token.length);
+      
+      const response = await fetch('/api/user/api-key', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+
+      console.log('[Test] Response status:', response.status);
+      console.log('[Test] Response headers:', Object.fromEntries(response.headers.entries()));
+      
+      const text = await response.text();
+      console.log('[Test] Response text:', text);
+      
+      let data;
+      try {
+        data = JSON.parse(text);
+      } catch (e) {
+        data = { rawResponse: text };
+      }
+      
+      setResults({
+        status: response.status,
+        ok: response.ok,
+        headers: Object.fromEntries(response.headers.entries()),
+        data: data,
+        userInfo: {
+          uid: user.uid,
+          email: user.email,
+        }
+      });
+    } catch (error: any) {
+      console.error('[Test] Error:', error);
+      setResults({ error: error.message, stack: error.stack });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      if (user) {
+        testApiKey();
+      }
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col overflow-auto p-8">
+      <div className="max-w-4xl space-y-6">
+        <div>
+          <h1 className="text-4xl font-bold mb-2">API Key Test</h1>
+          <p className="text-muted-foreground">Testing /api/user/api-key endpoint</p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Test Results</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {loading && <p>Testing API key endpoint...</p>}
+            {results && (
+              <pre className="bg-muted p-4 rounded-lg overflow-auto text-xs">
+                {JSON.stringify(results, null, 2)}
+              </pre>
+            )}
+          </CardContent>
+        </Card>
+
+        <Button onClick={testApiKey} disabled={loading}>
+          {loading ? "Testing..." : "Test Again"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+