VIBN Frontend for Coolify deployment

app/[workspace]/project/[projectId]/api-map/page.tsx

@@ -0,0 +1,74 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Map } from "lucide-react";
+
+export default async function ApiMapPage({
+  params,
+}: {
+  params: { projectId: string };
+}) {
+  return (
+    <div className="flex h-full flex-col">
+      {/* Page Header */}
+      <div className="border-b bg-card/50 px-6 py-4">
+        <div>
+          <h1 className="text-2xl font-bold">API Map</h1>
+          <p className="text-sm text-muted-foreground">
+            Auto-generated API endpoint documentation
+          </p>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto p-6">
+        <div className="mx-auto max-w-6xl">
+          <Card>
+            <CardHeader>
+              <CardTitle>API Endpoints</CardTitle>
+              <CardDescription>
+                Automatically detected from your codebase
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {/* Example endpoints */}
+                {[
+                  { method: "GET", path: "/api/sessions", desc: "List all sessions" },
+                  { method: "POST", path: "/api/sessions", desc: "Create new session" },
+                  { method: "GET", path: "/api/features", desc: "List features" },
+                ].map((endpoint, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center justify-between rounded-lg border p-4"
+                  >
+                    <div className="flex items-center gap-4">
+                      <Badge
+                        variant={endpoint.method === "GET" ? "outline" : "default"}
+                        className="font-mono"
+                      >
+                        {endpoint.method}
+                      </Badge>
+                      <div>
+                        <code className="text-sm font-mono">{endpoint.path}</code>
+                        <p className="text-sm text-muted-foreground">
+                          {endpoint.desc}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+