VIBN Frontend for Coolify deployment
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Loader2, ArrowRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default async function AnalyzePage({
|
||||
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">Analyzing Your Project</h1>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
Our AI is reviewing your code and documentation to understand your product
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Analysis Progress */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Analysis in Progress
|
||||
</CardTitle>
|
||||
<CardDescription>This may take a few moments...</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-2 w-2 rounded-full bg-green-500" />
|
||||
<span className="text-sm">Reading repository structure</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-2 w-2 rounded-full bg-green-500" />
|
||||
<span className="text-sm">Analyzing code patterns</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Loader2 className="h-3 w-3 animate-spin text-primary" />
|
||||
<span className="text-sm">Processing ChatGPT conversations</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-2 w-2 rounded-full bg-muted-foreground/30" />
|
||||
<span className="text-sm text-muted-foreground">Extracting product vision</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-2 w-2 rounded-full bg-muted-foreground/30" />
|
||||
<span className="text-sm text-muted-foreground">Identifying features</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Continue Button */}
|
||||
<div className="flex justify-end pt-4">
|
||||
<Link href={`/${workspace}/${projectId}/getting-started/summarize`}>
|
||||
<Button size="lg">
|
||||
Continue to Summary
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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'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'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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { WorkspaceLeftRail } from "@/components/layout/workspace-left-rail";
|
||||
import { RightPanel } from "@/components/layout/right-panel";
|
||||
import { ProjectSidebar } from "@/components/layout/project-sidebar";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
export default function GettingStartedLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const [activeSection, setActiveSection] = useState("projects");
|
||||
const params = useParams();
|
||||
const projectId = params.projectId as string;
|
||||
const workspace = params.workspace as string;
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full overflow-hidden bg-background">
|
||||
{/* Left Rail - Workspace Navigation */}
|
||||
<WorkspaceLeftRail activeSection={activeSection} onSectionChange={setActiveSection} />
|
||||
|
||||
{/* Project Sidebar - Getting Started Steps */}
|
||||
<ProjectSidebar projectId={projectId} activeSection={activeSection} workspace={workspace} />
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 overflow-hidden">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* Right Panel - AI Assistant */}
|
||||
<RightPanel />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CheckCircle2, ArrowRight, Sparkles } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default async function SetupPage({
|
||||
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">Setup Your Project</h1>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
We've created your project structure based on the analysis
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Setup Complete */}
|
||||
<Card className="border-green-500/50 bg-green-500/5">
|
||||
<CardContent className="pt-6 pb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-500/10">
|
||||
<CheckCircle2 className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-1">Project Setup Complete!</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Your project has been configured with all the necessary sections
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* What We Created */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>What We've Set Up</CardTitle>
|
||||
<CardDescription>Your project is ready with these sections</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
|
||||
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium">Product Vision</p>
|
||||
<p className="text-sm text-muted-foreground">Your product goals and strategy</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
|
||||
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium">Progress Tracking</p>
|
||||
<p className="text-sm text-muted-foreground">Monitor your development progress</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
|
||||
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium">UI UX Design</p>
|
||||
<p className="text-sm text-muted-foreground">Design and iterate on your screens</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
|
||||
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium">Code Repository</p>
|
||||
<p className="text-sm text-muted-foreground">Connected to your GitHub repo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg border bg-card">
|
||||
<CheckCircle2 className="h-5 w-5 text-green-600 shrink-0" />
|
||||
<div>
|
||||
<p className="font-medium">Deployment & Automation</p>
|
||||
<p className="text-sm text-muted-foreground">CI/CD and automated workflows</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Start Building Button */}
|
||||
<div className="flex justify-center pt-4">
|
||||
<Link href={`/${workspace}/${projectId}/product`}>
|
||||
<Button size="lg" className="gap-2">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
Start Building
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CheckCircle2, ArrowRight, Target, Code2, Zap } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default async function SummarizePage({
|
||||
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">Project Summary</h1>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
Here's what we learned about your product
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Summary Cards */}
|
||||
<div className="space-y-4">
|
||||
{/* Product Vision */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
<Target className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg">Product Vision</CardTitle>
|
||||
<CardDescription>What you're building</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
An AI-powered development monitoring platform that tracks coding sessions,
|
||||
analyzes conversations, and maintains living documentation.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10">
|
||||
<Code2 className="h-5 w-5 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg">Tech Stack</CardTitle>
|
||||
<CardDescription>Technologies detected</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">Next.js</span>
|
||||
<span className="px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">TypeScript</span>
|
||||
<span className="px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">PostgreSQL</span>
|
||||
<span className="px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">Node.js</span>
|
||||
<span className="px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">Tailwind CSS</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Key Features */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-500/10">
|
||||
<Zap className="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg">Key Features</CardTitle>
|
||||
<CardDescription>Main capabilities identified</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
|
||||
<span>Session tracking and cost monitoring</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
|
||||
<span>AI-powered code analysis with Gemini 2.0 Flash</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
|
||||
<span>Automatic documentation generation</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
|
||||
<span>Cursor IDE extension integration</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Continue Button */}
|
||||
<div className="flex justify-end pt-4">
|
||||
<Link href={`/${workspace}/${projectId}/getting-started/setup`}>
|
||||
<Button size="lg">
|
||||
Continue to Setup
|
||||
<ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user