diff --git a/.env.example b/.env.example
index b0333f7..c7b79b7 100644
--- a/.env.example
+++ b/.env.example
@@ -2,7 +2,11 @@ DATABASE_URL=postgresql://codeboard:codeboard@localhost:5432/codeboard
REDIS_URL=redis://localhost:6379
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-NEXTAUTH_SECRET=
-NEXTAUTH_URL=http://localhost:3000
+LLM_MODEL=
+LLM_BASE_URL=
+AUTH_SECRET=
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+STRIPE_STARTER_PRICE_ID=
+STRIPE_PRO_PRICE_ID=
+EMAIL_PASSWORD=
diff --git a/apps/web/package.json b/apps/web/package.json
index 56b71ba..6ebbb66 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -14,19 +14,28 @@
"@codeboard/database": "*",
"@codeboard/shared": "*",
"@tailwindcss/typography": "^0.5.19",
+ "bcryptjs": "^3.0.3",
"bullmq": "^5.34.0",
+ "clsx": "^2.1.1",
"cmdk": "^1.1.1",
"ioredis": "^5.4.0",
"lucide-react": "^0.563.0",
"mermaid": "^11.4.0",
"next": "^14.2.0",
+ "next-auth": "^5.0.0-beta.30",
+ "nodemailer": "^7.0.7",
"react": "^18.3.0",
"react-dom": "^18.3.0",
- "react-markdown": "^9.0.0"
+ "react-markdown": "^9.0.0",
+ "stripe": "^20.3.1",
+ "tailwind-merge": "^2.6.0",
+ "zod": "^3.24.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.0.0",
+ "@types/bcryptjs": "^2.4.6",
"@types/node": "^20.0.0",
+ "@types/nodemailer": "^6.4.17",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
"postcss": "^8.5.0",
diff --git a/apps/web/src/app/(auth)/forgot-password/page.tsx b/apps/web/src/app/(auth)/forgot-password/page.tsx
new file mode 100644
index 0000000..6ce0c2a
--- /dev/null
+++ b/apps/web/src/app/(auth)/forgot-password/page.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Code2, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export default function ForgotPasswordPage() {
+ const [email, setEmail] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [submitted, setSubmitted] = useState(false);
+ const [error, setError] = useState("");
+ const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+ async function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+ setError("");
+ if (!emailValid) { setError("Please enter a valid email address"); return; }
+ setLoading(true);
+ try {
+ const res = await fetch("/api/auth/forgot-password", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email }) });
+ if (!res.ok) { const data: { error?: string } = await res.json(); setError(data.error ?? "Something went wrong"); setLoading(false); return; }
+ setSubmitted(true);
+ } catch { setError("Something went wrong."); setLoading(false); }
+ }
+
+ if (submitted) {
+ return (
+
+
+
+
+
Check your email
+
If an account exists for that email, we sent a password reset link. It expires in 1 hour.
+
+
+
Back to sign in
+
+
+
+
+
Reset your password
+
Enter your email and we'll send you a reset link
+
+
+
+
Remember your password?{" "}Sign in
+
+
+
+
+
+
+
Welcome back
+
Sign in to your CodeBoard account
+
+
+
+ {verified && (
+
+
+
Email verified! You can now sign in.
+
+ )}
+
+
+
Don't have an account?{" "}Create one
+
+
+
+
+
+
+
Create your account
+
Start generating architecture diagrams with CodeBoard
+
+
+
+
Already have an account?{" "}Sign in
+
+
+
+
Invalid reset link
This password reset link is invalid or has expired.
+
+
Request a new reset link
+
+
+
+
Password reset
Your password has been successfully reset.
+
+
Sign in with your new password
+
+
+
+
Set new password
Enter your new password below
+
+
+
Remember your password?{" "}Sign in
+
+
+
+
Check your email
We sent a verification link to your inbox
+
+
+
+
Click the link in the email to verify your account. The link expires in 24 hours.
+
+ {message && (
)}
+ {error && (
)}
+
+
Already verified?{" "}Sign in
+
+
Reset your password
+
+ You requested a password reset for your CodeBoard account. Click the button below to set a new password.
+
+
+ Reset password
+
+
+ This link expires in 1 hour. If you did not request this, you can safely ignore this email.
+
+
+
Verify your email
+
+ Thanks for signing up for CodeBoard. Click the link below to verify your email address.
+
+
+ Verify Email
+
+
+ This link expires in 24 hours. If you didn't create an account, you can safely ignore this email.
+
+
+
Verify your email
+
+ Click the link below to verify your email address for CodeBoard.
+
+
+ Verify Email
+
+
+ This link expires in 24 hours.
+
+
+
+
API Keys
Manage API keys for programmatic access
+
+
+
+ {newlyCreatedKey && (
+
+
+
+
API Key Created
{newlyCreatedKey.name}
+
+
+
{newlyCreatedKey.key}
+
+
+
This key won't be shown again. Copy it now.
+
+
+ )}
+
+ {showCreateForm && !newlyCreatedKey && (
+
+
+
+
+ setNewKeyName(e.target.value)} placeholder="e.g. Production, Staging"
+ className="w-full px-4 py-2.5 bg-neutral-950 border border-neutral-800 rounded-lg text-sm text-neutral-200 placeholder:text-neutral-600 focus:outline-none focus:border-blue-500/40 focus:ring-1 focus:ring-blue-500/20 transition-colors"
+ onKeyDown={(e) => { if (e.key === "Enter") handleCreate(); }} autoFocus />
+
+
+
+
+
+
+ )}
+
+
+
Active Keys
+
+ {isLoading ? (
+
{Array.from({ length: 3 }).map((_, i) => (
))}
+ ) : keys.length === 0 ? (
+
No API keys yet
Create one for programmatic access
+ ) : (
+
+ {keys.map((apiKey) => (
+
+
+
+
{apiKey.name}
+
+ {apiKey.keyPrefix}••••••••
+ Created {formatDate(apiKey.createdAt)}
+ {apiKey.lastUsedAt && Last used {formatDate(apiKey.lastUsedAt)}}
+
+
+ {confirmRevokeId === apiKey.id ? (
+
+
+
+
+ ) : (
+
+ )}
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+ CodeBoard
+ Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+ {sent ? "Verification email sent! Check your inbox." : "Please verify your email address. Check your inbox or"}
+
+ {!sent && (
+
+ )}
+
+
+
+
+
+
+ {sidebarOpen && (
+
setSidebarOpen(false)} />
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
CodeBoard
+
+
+
{children}
+
+
+ );
+}
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..5afbd53
--- /dev/null
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
+import { FileText, Clock, CheckCircle, XCircle, Loader2, ExternalLink } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Generation {
+ id: string;
+ repoUrl: string;
+ repoName: string;
+ status: string;
+ createdAt: string;
+ duration: number | null;
+}
+
+export default function DashboardPage() {
+ const [generations, setGenerations] = useState
([]);
+ const [isLoading, setIsLoading] = useState(true);
+
+ const fetchGenerations = useCallback(async () => {
+ setIsLoading(true);
+ try {
+ const statsRes = await fetch("/api/generations/mine", { cache: "no-store" });
+ if (statsRes.ok) {
+ const data = await statsRes.json();
+ setGenerations(data.generations ?? []);
+ }
+ } catch (error) {
+ console.error("Failed to fetch generations:", error);
+ } finally {
+ setIsLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchGenerations();
+ }, [fetchGenerations]);
+
+ const statusIcon = (status: string) => {
+ switch (status) {
+ case "COMPLETED": return ;
+ case "FAILED": return ;
+ default: return ;
+ }
+ };
+
+ return (
+
+
+
My Generations
+
Your architecture diagram generation history
+
+
+
+ {isLoading ? (
+
+
+
Loading generations...
+
+ ) : generations.length === 0 ? (
+
+
+
+
+
No generations yet
+
Generate your first architecture diagram from the home page
+
+ ) : (
+
+ {generations.map((gen) => (
+
+ {statusIcon(gen.status)}
+
+
{gen.repoName}
+
+ {gen.repoUrl}
+ {gen.duration && (
+
+ {gen.duration}s
+
+ )}
+
+
+
{new Date(gen.createdAt).toLocaleDateString()}
+
+
+ ))}
+
+ )}
+
+
+
+
Settings
+
Account, billing, and configuration
+
+
+ {/* Account */}
+
+
+
+
Account
+
+
+ {isLoadingAccount ? (
+
Loading account...
+ ) : account ? (
+
+
+
Name
{account.name ?? "\u2014"}
+
Member since
{new Date(account.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
+
+ ) : (
Unable to load account info
)}
+
+
+ {/* Subscription */}
+
+
+
+
Subscription & Billing
+
+
+
+
+ Current plan
+
+ {currentTier === "PRO" && }
+ {currentTier === "STARTER" && }
+ {currentTier}
+
+
+ {currentTier !== "FREE" && account?.subscription?.hasStripeSubscription && (
+
+ )}
+
+
+
+ {generationsUsed.toLocaleString()} of {generationsLimit.toLocaleString()} generations used
+ {currentTier === "FREE" ? "15 generations/day" : "This billing period"}
+
+
+
90 ? "bg-amber-500" : "bg-blue-500")} style={{ width: `${usagePercent}%` }} />
+
+
+
+
+
+ {TIERS.map((tier) => {
+ const isCurrent = currentTier === tier.key;
+ const tierOrder = { FREE: 0, STARTER: 1, PRO: 2 };
+ const isUpgrade = tierOrder[tier.key] > tierOrder[currentTier];
+ const isDowngrade = tierOrder[tier.key] < tierOrder[currentTier];
+
+ return (
+
+ {isCurrent && (
Current
)}
+
{tier.name}
{tier.description}
+
${tier.price}/{tier.period}
+
+ {tier.features.map((f) => (- {f}
))}
+
+ {isCurrent ? (
Active plan
)
+ : isUpgrade ? (
)
+ : isDowngrade ? (
)
+ : null}
+
+ );
+ })}
+
+
+
+ {/* Data */}
+
+
+
+
Data & Storage
+
+
+ {isLoadingStats ? (
+
{Array.from({ length: 3 }).map((_, i) => (
))}
+ ) : stats ? (
+
+
Total
{stats.totalGenerations.toLocaleString()}
+
Completed
{stats.completedGenerations.toLocaleString()}
+
Failed
{stats.failedGenerations.toLocaleString()}
+
+ ) : (
Unable to load statistics
)}
+
+
+
Purge All Data
Permanently delete all your generations
+ {showPurgeConfirm ? (
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+ {/* About */}
+
+
-
-
-
-
-
-
- {children}
-
-
-
-
+
+
+
+
+
+
+ {children}
+
+
+
+