mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VIBN Frontend for Coolify deployment

Browse Source
This commit is contained in:
Mark Henderson
2026-02-15 19:25:52 -08:00
commit 40bf8428cd
398 changed files with 76513 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
app/[workspace]/project/[projectId]/getting-started/connect/page.tsx Normal file
View File

@@ -0,0 +1,138 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Github, ArrowRight, Download } from "lucide-react";
import { CursorIcon, OpenAIIcon } from "@/components/icons/custom-icons";
import Link from "next/link";
export default async function ConnectPage({
params,
}: {
params: Promise<{ workspace: string; projectId: string }>;
}) {
const { workspace, projectId } = await params;
return (
<div className="flex h-full flex-col overflow-auto">
<div className="flex-1 p-8 space-y-8 max-w-4xl">
{/* Header */}
<div>
<h1 className="text-4xl font-bold mb-2">Connect Your Sources</h1>
<p className="text-muted-foreground text-lg">
Install the Cursor extension and connect your development sources. Our AI will analyze all of the information and automatically create your project for you.
</p>
</div>
{/* Connection Cards */}
<div className="space-y-4">
{/* Cursor Extension */}
<Card>
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10">
<CursorIcon className="h-6 w-6 text-blue-600" />
</div>
<div>
<CardTitle>Cursor Extension</CardTitle>
<CardDescription>Install our extension to track your development sessions</CardDescription>
</div>
</div>
<Button>
<Download className="h-4 w-4 mr-2" />
Install Extension
</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-2 text-sm text-muted-foreground">
<p>The extension will help us:</p>
<ul className="list-disc list-inside space-y-1 ml-2">
<li>Track your coding sessions and AI interactions</li>
<li>Monitor costs and token usage</li>
<li>Generate automatic documentation</li>
<li>Sync your conversations with Vib&apos;n</li>
</ul>
</div>
</CardContent>
</Card>
{/* GitHub Connection */}
<Card>
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<Github className="h-6 w-6 text-primary" />
</div>
<div>
<CardTitle>GitHub Repository</CardTitle>
<CardDescription>Connect your code repository for analysis</CardDescription>
</div>
</div>
<Button>
<Github className="h-4 w-4 mr-2" />
Connect GitHub
</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-2 text-sm text-muted-foreground">
<p>We&apos;ll need access to:</p>
<ul className="list-disc list-inside space-y-1 ml-2">
<li>Read your repository code and structure</li>
<li>Access to repository metadata</li>
<li>View commit history</li>
</ul>
</div>
</CardContent>
</Card>
{/* ChatGPT Connection - Optional */}
<Card className="border-dashed">
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10">
<OpenAIIcon className="h-6 w-6 text-green-600" />
</div>
<div>
<div className="flex items-center gap-2">
<CardTitle>ChatGPT Project (MCP)</CardTitle>
<span className="px-2 py-0.5 rounded-full bg-muted text-muted-foreground text-xs font-medium">
Optional
</span>
</div>
<CardDescription>Connect your ChatGPT conversations and docs</CardDescription>
</div>
</div>
<Button variant="outline">
<OpenAIIcon className="h-4 w-4 mr-2" />
Install MCP
</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-2 text-sm text-muted-foreground">
<p>Install the Model Context Protocol to:</p>
<ul className="list-disc list-inside space-y-1 ml-2">
<li>Access your ChatGPT project conversations</li>
<li>Read product documentation and notes</li>
<li>Sync your product vision and requirements</li>
</ul>
</div>
</CardContent>
</Card>
</div>
{/* Continue Button */}
<div className="flex justify-end pt-4">
<Link href={`/${workspace}/${projectId}/getting-started/analyze`}>
<Button size="lg">
Continue to Analyze
<ArrowRight className="h-4 w-4 ml-2" />
</Button>
</Link>
</div>
</div>
</div>
);
}