chore: add auth/billing Prisma migration (clean rebuild of User table)

- NextAuth v5 with email+password credentials, JWT sessions
- Registration, login, email verification, password reset flows
- Stripe integration: Free (15/day), Starter ($5/1k/mo), Pro ($20/100k/mo)
- API key management (cb_ prefix) with hash-based validation
- Dashboard with generations history, settings, billing management
- Rate limiting: Redis daily counter (free), DB monthly (paid)
- Generate route auth: Bearer API key + session, anonymous allowed
- Worker userId propagation for generation history
- Pricing section on landing page, auth-aware navbar
- Middleware with route protection, CORS for codeboard.vectry.tech
- Docker env vars for auth, Stripe, email (smtp.migadu.com)

.dockerignore

@@ -12,3 +12,5 @@ tmp
 .vercel
 *.log
 .git
+tests
+README.md

.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=
+LLM_MODEL=
-GITHUB_CLIENT_SECRET=
+LLM_BASE_URL=
-NEXTAUTH_SECRET=
+AUTH_SECRET=
-NEXTAUTH_URL=http://localhost:3000
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+STRIPE_STARTER_PRICE_ID=
+STRIPE_PRO_PRICE_ID=
+EMAIL_PASSWORD=

Dockerfile

@@ -16,6 +16,7 @@ RUN npm install --production=false
 FROM base AS builder
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
+RUN npx prisma generate --schema=packages/database/prisma/schema.prisma
 RUN npx turbo build
 
 FROM base AS web
@@ -24,6 +25,7 @@ RUN addgroup --system --gid 1001 nodejs && \
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
 COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
+COPY --from=builder --chown=nextjs:nodejs /app/packages/database/prisma ./packages/database/prisma
 USER nextjs
 EXPOSE 3000
 ENV PORT=3000 HOSTNAME="0.0.0.0"
@@ -38,6 +40,11 @@ COPY --from=builder /app/packages/shared/dist ./packages/shared/dist
 COPY --from=builder /app/packages/parser/dist ./packages/parser/dist
 COPY --from=builder /app/packages/llm/dist ./packages/llm/dist
 COPY --from=builder /app/packages/diagrams/dist ./packages/diagrams/dist
+COPY --from=builder /app/packages/database/dist ./packages/database/dist
+COPY --from=builder /app/packages/database/package.json ./packages/database/
+COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
+COPY --from=builder /app/node_modules/@prisma ./node_modules/@prisma
+COPY --from=builder /app/packages/database/prisma ./packages/database/prisma
 COPY --from=builder /app/package.json ./
 COPY --from=builder /app/apps/worker/package.json ./apps/worker/
 COPY --from=builder /app/packages/shared/package.json ./packages/shared/

README.md

@@ -57,4 +57,4 @@ MIT
 
 ---
 
-Built by [Vectry](https://company.repi.fun) — Engineering AI into your workflow.
+Built by [Vectry](https://vectry.tech) — Engineering AI into your workflow.

apps/web/next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const config = {
-  transpilePackages: ["@codeboard/shared"],
+  transpilePackages: ["@codeboard/shared", "@codeboard/database"],
   output: "standalone",
 };
 

apps/web/package.json

@@ -11,19 +11,31 @@
     "db:push": "prisma db push --schema=../../packages/database/prisma/schema.prisma"
   },
   "dependencies": {
+    "@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",

apps/web/public/llms.txt

@@ -0,0 +1,22 @@
+# CodeBoard
+
+> CodeBoard is a developer tool that generates interactive onboarding documentation from any GitHub repository. Paste a URL and get architecture diagrams, module breakdowns, and getting started guides in minutes.
+
+CodeBoard uses AI to analyze codebases and produce structured documentation that helps new developers understand unfamiliar projects quickly. It generates visual architecture diagrams, identifies key modules and their relationships, and creates step-by-step getting started guides.
+
+## Product
+
+- [CodeBoard App](https://codeboard.vectry.tech): Paste a GitHub URL to generate documentation
+- [Source Code](https://gitea.repi.fun/repi/codeboard): Repository on Gitea
+
+## Features
+
+- **Architecture Diagrams**: Auto-generated visual maps of codebase structure and dependencies
+- **Module Breakdowns**: Detailed analysis of each major component with purpose and key files
+- **Getting Started Guides**: Step-by-step instructions for setting up and running the project
+- **Technology Detection**: Identifies frameworks, languages, and tools used in the project
+
+## Optional
+
+- [Vectry](https://vectry.tech): Built by Vectry, an engineering-first AI consultancy
+- [AgentLens](https://agentlens.vectry.tech): Sister product — open-source agent observability platform

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 (
+      <div className="space-y-8">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20"><Code2 className="w-6 h-6 text-white" /></div>
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-neutral-100">Check your email</h1>
+            <p className="mt-1 text-sm text-neutral-400">If an account exists for that email, we sent a password reset link. It expires in 1 hour.</p>
+          </div>
+        </div>
+        <p className="text-center text-sm text-neutral-400"><Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">Back to sign in</Link></p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col items-center gap-4">
+        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20"><Code2 className="w-6 h-6 text-white" /></div>
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-neutral-100">Reset your password</h1>
+          <p className="mt-1 text-sm text-neutral-400">Enter your email and we&apos;ll send you a reset link</p>
+        </div>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div className="rounded-xl bg-neutral-900 border border-neutral-800 p-6 space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="email" className="block text-sm font-medium text-neutral-300">Email</label>
+            <input id="email" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com"
+              className={cn("w-full px-3 py-2.5 bg-neutral-950 border rounded-lg text-sm text-neutral-100 placeholder-neutral-500 outline-none transition-colors", email && !emailValid ? "border-red-500/50 focus:border-red-500" : "border-neutral-800 focus:border-blue-500")} />
+            {email && !emailValid && <p className="text-xs text-red-400">Please enter a valid email address</p>}
+          </div>
+        </div>
+        {error && (<div className="rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3"><p className="text-sm text-red-400">{error}</p></div>)}
+        <button type="submit" disabled={loading}
+          className={cn("w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors", loading ? "bg-blue-500/50 text-white/50 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-400 text-white")}>
+          {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+          {loading ? "Sending..." : "Send reset link"}
+        </button>
+      </form>
+      <p className="text-center text-sm text-neutral-400">Remember your password?{" "}<Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">Sign in</Link></p>
+    </div>
+  );
+}

apps/web/src/app/(auth)/layout.tsx

@@ -0,0 +1,11 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
+      <div className="w-full max-w-md">{children}</div>
+    </div>
+  );
+}

apps/web/src/app/(auth)/login/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Suspense, useState } from "react";
+import { signIn } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { Code2, CheckCircle, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export default function LoginPage() {
+  return (
+    <Suspense>
+      <LoginForm />
+    </Suspense>
+  );
+}
+
+function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const verified = searchParams.get("verified") === "true";
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  const passwordValid = password.length >= 8;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    if (!emailValid) { setError("Please enter a valid email address"); return; }
+    if (!passwordValid) { setError("Password must be at least 8 characters"); return; }
+    setLoading(true);
+    const result = await signIn("credentials", { email, password, redirect: false });
+    if (result?.error) { setError("Invalid email or password"); setLoading(false); return; }
+    router.push("/dashboard");
+    router.refresh();
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col items-center gap-4">
+        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
+          <Code2 className="w-6 h-6 text-white" />
+        </div>
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-neutral-100">Welcome back</h1>
+          <p className="mt-1 text-sm text-neutral-400">Sign in to your CodeBoard account</p>
+        </div>
+      </div>
+
+      {verified && (
+        <div className="rounded-lg bg-blue-500/10 border border-blue-500/20 px-4 py-3 flex items-center gap-2">
+          <CheckCircle className="w-4 h-4 text-blue-400 shrink-0" />
+          <p className="text-sm text-blue-400">Email verified! You can now sign in.</p>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div className="rounded-xl bg-neutral-900 border border-neutral-800 p-6 space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="email" className="block text-sm font-medium text-neutral-300">Email</label>
+            <input id="email" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com"
+              className={cn("w-full px-3 py-2.5 bg-neutral-950 border rounded-lg text-sm text-neutral-100 placeholder-neutral-500 outline-none transition-colors", email && !emailValid ? "border-red-500/50 focus:border-red-500" : "border-neutral-800 focus:border-blue-500")} />
+            {email && !emailValid && <p className="text-xs text-red-400">Please enter a valid email address</p>}
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="password" className="block text-sm font-medium text-neutral-300">Password</label>
+            <input id="password" type="password" autoComplete="current-password" required value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••"
+              className={cn("w-full px-3 py-2.5 bg-neutral-950 border rounded-lg text-sm text-neutral-100 placeholder-neutral-500 outline-none transition-colors", password && !passwordValid ? "border-red-500/50 focus:border-red-500" : "border-neutral-800 focus:border-blue-500")} />
+            {password && !passwordValid && <p className="text-xs text-red-400">Password must be at least 8 characters</p>}
+          </div>
+        </div>
+        <div className="flex justify-end">
+          <Link href="/forgot-password" className="text-sm text-neutral-500 hover:text-blue-400 transition-colors">Forgot password?</Link>
+        </div>
+        {error && (<div className="rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3"><p className="text-sm text-red-400">{error}</p></div>)}
+        <button type="submit" disabled={loading}
+          className={cn("w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors", loading ? "bg-blue-500/50 text-white/50 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-400 text-white")}>
+          {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+          {loading ? "Signing in…" : "Sign in"}
+        </button>
+      </form>
+      <p className="text-center text-sm text-neutral-400">Don&apos;t have an account?{" "}<Link href="/register" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">Create one</Link></p>
+    </div>
+  );
+}

apps/web/src/app/(auth)/register/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Code2, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  const passwordValid = password.length >= 8;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    if (!emailValid) { setError("Please enter a valid email address"); return; }
+    if (!passwordValid) { setError("Password must be at least 8 characters"); return; }
+    setLoading(true);
+    try {
+      const res = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password, ...(name.trim() ? { name: name.trim() } : {}) }),
+      });
+      if (res.status === 429) { const data: { error?: string } = await res.json(); setError(data.error ?? "Too many attempts."); setLoading(false); return; }
+      if (!res.ok) { const data: { error?: string } = await res.json(); setError(data.error ?? "Registration failed"); setLoading(false); return; }
+      const result = await signIn("credentials", { email, password, redirect: false });
+      if (result?.error) { router.push("/login"); return; }
+      router.push("/dashboard");
+      router.refresh();
+    } catch { setError("Something went wrong."); setLoading(false); }
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col items-center gap-4">
+        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
+          <Code2 className="w-6 h-6 text-white" />
+        </div>
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-neutral-100">Create your account</h1>
+          <p className="mt-1 text-sm text-neutral-400">Start generating architecture diagrams with CodeBoard</p>
+        </div>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div className="rounded-xl bg-neutral-900 border border-neutral-800 p-6 space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="name" className="block text-sm font-medium text-neutral-300">Name <span className="text-neutral-500 font-normal">(optional)</span></label>
+            <input id="name" type="text" autoComplete="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Jane Doe"
+              className="w-full px-3 py-2.5 bg-neutral-950 border border-neutral-800 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 outline-none transition-colors focus:border-blue-500" />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="email" className="block text-sm font-medium text-neutral-300">Email</label>
+            <input id="email" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com"
+              className={cn("w-full px-3 py-2.5 bg-neutral-950 border rounded-lg text-sm text-neutral-100 placeholder-neutral-500 outline-none transition-colors", email && !emailValid ? "border-red-500/50 focus:border-red-500" : "border-neutral-800 focus:border-blue-500")} />
+            {email && !emailValid && <p className="text-xs text-red-400">Please enter a valid email address</p>}
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="password" className="block text-sm font-medium text-neutral-300">Password</label>
+            <input id="password" type="password" autoComplete="new-password" required value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••"
+              className={cn("w-full px-3 py-2.5 bg-neutral-950 border rounded-lg text-sm text-neutral-100 placeholder-neutral-500 outline-none transition-colors", password && !passwordValid ? "border-red-500/50 focus:border-red-500" : "border-neutral-800 focus:border-blue-500")} />
+            {password && !passwordValid && <p className="text-xs text-red-400">Password must be at least 8 characters</p>}
+          </div>
+        </div>
+        {error && (<div className="rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3"><p className="text-sm text-red-400">{error}</p></div>)}
+        <button type="submit" disabled={loading}
+          className={cn("w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors", loading ? "bg-blue-500/50 text-white/50 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-400 text-white")}>
+          {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+          {loading ? "Creating account…" : "Create account"}
+        </button>
+      </form>
+      <p className="text-center text-sm text-neutral-400">Already have an account?{" "}<Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">Sign in</Link></p>
+    </div>
+  );
+}

apps/web/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Suspense, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { Code2, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export default function ResetPasswordPage() {
+  return (<Suspense><ResetPasswordForm /></Suspense>);
+}
+
+function ResetPasswordForm() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const passwordValid = password.length >= 8;
+  const passwordsMatch = password === confirmPassword;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    if (!passwordValid) { setError("Password must be at least 8 characters"); return; }
+    if (!passwordsMatch) { setError("Passwords do not match"); return; }
+    if (!token) { setError("Invalid reset link"); return; }
+    setLoading(true);
+    try {
+      const res = await fetch("/api/auth/reset-password", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ token, password }) });
+      if (!res.ok) { const data: { error?: string } = await res.json(); setError(data.error ?? "Something went wrong"); setLoading(false); return; }
+      setSuccess(true);
+    } catch { setError("Something went wrong."); setLoading(false); }
+  }
+
+  if (!token) {
+    return (
+      <div className="space-y-8">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20"><Code2 className="w-6 h-6 text-white" /></div>
+          <div className="text-center"><h1 className="text-2xl font-bold text-neutral-100">Invalid reset link</h1><p className="mt-1 text-sm text-neutral-400">This password reset link is invalid or has expired.</p></div>
+        </div>
+        <p className="text-center text-sm text-neutral-400"><Link href="/forgot-password" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">Request a new reset link</Link></p>
+      </div>
+    );
+  }
+
+  if (success) {
+    return (
+      <div className="space-y-8">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20"><Code2 className="w-6 h-6 text-white" /></div>
+          <div className="text-center"><h1 className="text-2xl font-bold text-neutral-100">Password reset</h1><p className="mt-1 text-sm text-neutral-400">Your password has been successfully reset.</p></div>
+        </div>
+        <p className="text-center text-sm text-neutral-400"><Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">Sign in with your new password</Link></p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col items-center gap-4">
+        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20"><Code2 className="w-6 h-6 text-white" /></div>
+        <div className="text-center"><h1 className="text-2xl font-bold text-neutral-100">Set new password</h1><p className="mt-1 text-sm text-neutral-400">Enter your new password below</p></div>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div className="rounded-xl bg-neutral-900 border border-neutral-800 p-6 space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="password" className="block text-sm font-medium text-neutral-300">New password</label>
+            <input id="password" type="password" autoComplete="new-password" required value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••"
+              className={cn("w-full px-3 py-2.5 bg-neutral-950 border rounded-lg text-sm text-neutral-100 placeholder-neutral-500 outline-none transition-colors", password && !passwordValid ? "border-red-500/50 focus:border-red-500" : "border-neutral-800 focus:border-blue-500")} />
+            {password && !passwordValid && <p className="text-xs text-red-400">Password must be at least 8 characters</p>}
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="confirmPassword" className="block text-sm font-medium text-neutral-300">Confirm password</label>
+            <input id="confirmPassword" type="password" autoComplete="new-password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="••••••••"
+              className={cn("w-full px-3 py-2.5 bg-neutral-950 border rounded-lg text-sm text-neutral-100 placeholder-neutral-500 outline-none transition-colors", confirmPassword && !passwordsMatch ? "border-red-500/50 focus:border-red-500" : "border-neutral-800 focus:border-blue-500")} />
+            {confirmPassword && !passwordsMatch && <p className="text-xs text-red-400">Passwords do not match</p>}
+          </div>
+        </div>
+        {error && (<div className="rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3"><p className="text-sm text-red-400">{error}</p></div>)}
+        <button type="submit" disabled={loading}
+          className={cn("w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors", loading ? "bg-blue-500/50 text-white/50 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-400 text-white")}>
+          {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+          {loading ? "Resetting..." : "Reset password"}
+        </button>
+      </form>
+      <p className="text-center text-sm text-neutral-400">Remember your password?{" "}<Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">Sign in</Link></p>
+    </div>
+  );
+}

apps/web/src/app/(auth)/verify-email/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Code2, Loader2, Mail } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export default function VerifyEmailPage() {
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState("");
+
+  async function handleResend() {
+    setLoading(true); setMessage(""); setError("");
+    try {
+      const res = await fetch("/api/auth/resend-verification", { method: "POST" });
+      if (!res.ok) { const data: { error?: string } = await res.json(); setError(data.error ?? "Failed to resend email"); setLoading(false); return; }
+      setMessage("Verification email sent! Check your inbox.");
+    } catch { setError("Something went wrong."); } finally { setLoading(false); }
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col items-center gap-4">
+        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20"><Code2 className="w-6 h-6 text-white" /></div>
+        <div className="text-center"><h1 className="text-2xl font-bold text-neutral-100">Check your email</h1><p className="mt-1 text-sm text-neutral-400">We sent a verification link to your inbox</p></div>
+      </div>
+      <div className="rounded-xl bg-neutral-900 border border-neutral-800 p-6 space-y-4">
+        <div className="flex items-center justify-center">
+          <div className="w-16 h-16 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center"><Mail className="w-8 h-8 text-blue-400" /></div>
+        </div>
+        <p className="text-sm text-neutral-400 text-center leading-relaxed">Click the link in the email to verify your account. The link expires in 24 hours.</p>
+      </div>
+      {message && (<div className="rounded-lg bg-blue-500/10 border border-blue-500/20 px-4 py-3"><p className="text-sm text-blue-400">{message}</p></div>)}
+      {error && (<div className="rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3"><p className="text-sm text-red-400">{error}</p></div>)}
+      <button onClick={handleResend} disabled={loading}
+        className={cn("w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors", loading ? "bg-blue-500/50 text-white/50 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-400 text-white")}>
+        {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+        {loading ? "Sending..." : "Resend verification email"}
+      </button>
+      <p className="text-center text-sm text-neutral-400">Already verified?{" "}<Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">Sign in</Link></p>
+    </div>
+  );
+}

apps/web/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from "@/auth";
+
+export const { GET, POST } = handlers;

apps/web/src/app/api/auth/forgot-password/route.ts

@@ -0,0 +1,92 @@
+import { NextResponse } from "next/server";
+import { randomBytes, createHash } from "crypto";
+import { z } from "zod";
+import { prisma } from "@/lib/prisma";
+import { sendEmail } from "@/lib/email";
+import { checkRateLimit, AUTH_RATE_LIMITS } from "@/lib/rate-limit";
+
+const forgotPasswordSchema = z.object({
+  email: z.string().email("Invalid email address"),
+});
+
+function hashToken(token: string): string {
+  return createHash("sha256").update(token).digest("hex");
+}
+
+export async function POST(request: Request) {
+  try {
+    const ip = request.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
+    const rl = await checkRateLimit(`forgot:${ip}`, AUTH_RATE_LIMITS.forgotPassword);
+    if (!rl.allowed) {
+      return NextResponse.json(
+        { error: "Too many requests. Please try again later." },
+        { status: 429, headers: { "Retry-After": String(Math.ceil((rl.resetAt - Date.now()) / 1000)) } }
+      );
+    }
+
+    const body: unknown = await request.json();
+    const parsed = forgotPasswordSchema.safeParse(body);
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: parsed.error.issues[0]?.message ?? "Invalid input" },
+        { status: 400 }
+      );
+    }
+
+    const { email } = parsed.data;
+    const normalizedEmail = email.toLowerCase();
+
+    const user = await prisma.user.findUnique({
+      where: { email: normalizedEmail },
+    });
+
+    if (!user) {
+      return NextResponse.json({ success: true });
+    }
+
+    await prisma.passwordResetToken.updateMany({
+      where: { userId: user.id, used: false },
+      data: { used: true },
+    });
+
+    const rawToken = randomBytes(32).toString("hex");
+    const tokenHash = hashToken(rawToken);
+
+    await prisma.passwordResetToken.create({
+      data: {
+        userId: user.id,
+        token: tokenHash,
+        expiresAt: new Date(Date.now() + 60 * 60 * 1000),
+      },
+    });
+
+    const resetUrl = `https://codeboard.vectry.tech/reset-password?token=${rawToken}`;
+
+    await sendEmail({
+      to: normalizedEmail,
+      subject: "Reset your CodeBoard password",
+      html: `
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px;">
+          <h2 style="color: #f5f5f5; font-size: 20px; margin-bottom: 16px;">Reset your password</h2>
+          <p style="color: #a3a3a3; font-size: 14px; line-height: 1.6; margin-bottom: 24px;">
+            You requested a password reset for your CodeBoard account. Click the button below to set a new password.
+          </p>
+          <a href="${resetUrl}" style="display: inline-block; background-color: #3b82f6; color: #fff; font-weight: 600; font-size: 14px; padding: 12px 24px; border-radius: 8px; text-decoration: none;">
+            Reset password
+          </a>
+          <p style="color: #737373; font-size: 12px; line-height: 1.5; margin-top: 32px;">
+            This link expires in 1 hour. If you did not request this, you can safely ignore this email.
+          </p>
+        </div>
+      `,
+    });
+
+    return NextResponse.json({ success: true });
+  } catch {
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

apps/web/src/app/api/auth/register/route.ts

@@ -0,0 +1,117 @@
+import { NextResponse } from "next/server";
+import { hash } from "bcryptjs";
+import crypto from "crypto";
+import { z } from "zod";
+import { prisma } from "@/lib/prisma";
+import { sendEmail } from "@/lib/email";
+import { checkRateLimit, AUTH_RATE_LIMITS } from "@/lib/rate-limit";
+
+const registerSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+  name: z.string().min(1).optional(),
+});
+
+export async function POST(request: Request) {
+  try {
+    const ip = request.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
+    const rl = await checkRateLimit(`register:${ip}`, AUTH_RATE_LIMITS.register);
+    if (!rl.allowed) {
+      return NextResponse.json(
+        { error: "Too many registration attempts. Please try again later." },
+        { status: 429, headers: { "Retry-After": String(Math.ceil((rl.resetAt - Date.now()) / 1000)) } }
+      );
+    }
+
+    const body: unknown = await request.json();
+    const parsed = registerSchema.safeParse(body);
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: parsed.error.issues[0]?.message ?? "Invalid input" },
+        { status: 400 }
+      );
+    }
+
+    const { email, password, name } = parsed.data;
+    const normalizedEmail = email.toLowerCase();
+
+    const existing = await prisma.user.findUnique({
+      where: { email: normalizedEmail },
+    });
+
+    if (existing) {
+      return NextResponse.json(
+        { message: "If this email is available, a confirmation email will be sent." },
+        { status: 200 }
+      );
+    }
+
+    const passwordHash = await hash(password, 12);
+
+    const user = await prisma.user.create({
+      data: {
+        email: normalizedEmail,
+        passwordHash,
+        name: name ?? null,
+        subscription: {
+          create: {
+            tier: "FREE",
+            generationsLimit: 15,
+          },
+        },
+      },
+      select: {
+        id: true,
+        email: true,
+        name: true,
+        createdAt: true,
+      },
+    });
+
+    try {
+      const rawToken = crypto.randomBytes(32).toString("hex");
+      const tokenHash = crypto.createHash("sha256").update(rawToken).digest("hex");
+
+      await prisma.emailVerificationToken.create({
+        data: {
+          userId: user.id,
+          token: tokenHash,
+          expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
+        },
+      });
+
+      const verifyUrl = `https://codeboard.vectry.tech/verify-email?token=${rawToken}`;
+      await sendEmail({
+        to: user.email,
+        subject: "Verify your CodeBoard email",
+        html: `
+          <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px;">
+            <h2 style="color: #e5e5e5; margin-bottom: 16px;">Verify your email</h2>
+            <p style="color: #a3a3a3; line-height: 1.6;">
+              Thanks for signing up for CodeBoard. Click the link below to verify your email address.
+            </p>
+            <a href="${verifyUrl}" style="display: inline-block; margin-top: 24px; padding: 12px 24px; background-color: #3b82f6; color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600;">
+              Verify Email
+            </a>
+            <p style="color: #737373; font-size: 13px; margin-top: 32px;">
+              This link expires in 24 hours. If you didn't create an account, you can safely ignore this email.
+            </p>
+          </div>
+        `,
+      });
+    } catch (emailError) {
+      console.error("[register] Failed to send verification email:", emailError);
+    }
+
+    return NextResponse.json(
+      { message: "If this email is available, a confirmation email will be sent." },
+      { status: 200 }
+    );
+  } catch {
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

apps/web/src/app/api/auth/resend-verification/route.ts

@@ -0,0 +1,75 @@
+import { NextResponse } from "next/server";
+import crypto from "crypto";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { sendEmail } from "@/lib/email";
+
+export async function POST() {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const user = await prisma.user.findUnique({
+    where: { id: session.user.id },
+  });
+
+  if (!user) {
+    return NextResponse.json({ error: "User not found" }, { status: 404 });
+  }
+
+  if (user.emailVerified) {
+    return NextResponse.json({ error: "Email already verified" }, { status: 400 });
+  }
+
+  const latestToken = await prisma.emailVerificationToken.findFirst({
+    where: { userId: user.id },
+    orderBy: { createdAt: "desc" },
+  });
+
+  if (latestToken && Date.now() - latestToken.createdAt.getTime() < 60_000) {
+    return NextResponse.json(
+      { error: "Please wait 60 seconds before requesting another email" },
+      { status: 429 }
+    );
+  }
+
+  await prisma.emailVerificationToken.updateMany({
+    where: { userId: user.id, used: false },
+    data: { used: true },
+  });
+
+  const rawToken = crypto.randomBytes(32).toString("hex");
+  const tokenHash = crypto.createHash("sha256").update(rawToken).digest("hex");
+
+  await prisma.emailVerificationToken.create({
+    data: {
+      userId: user.id,
+      token: tokenHash,
+      expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
+    },
+  });
+
+  const verifyUrl = `https://codeboard.vectry.tech/verify-email?token=${rawToken}`;
+  await sendEmail({
+    to: user.email,
+    subject: "Verify your CodeBoard email",
+    html: `
+      <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px;">
+        <h2 style="color: #e5e5e5; margin-bottom: 16px;">Verify your email</h2>
+        <p style="color: #a3a3a3; line-height: 1.6;">
+          Click the link below to verify your email address for CodeBoard.
+        </p>
+        <a href="${verifyUrl}" style="display: inline-block; margin-top: 24px; padding: 12px 24px; background-color: #3b82f6; color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600;">
+          Verify Email
+        </a>
+        <p style="color: #737373; font-size: 13px; margin-top: 32px;">
+          This link expires in 24 hours.
+        </p>
+      </div>
+    `,
+  });
+
+  return NextResponse.json({ success: true });
+}

apps/web/src/app/api/auth/reset-password/route.ts

@@ -0,0 +1,73 @@
+import { NextResponse } from "next/server";
+import { createHash } from "crypto";
+import { hash } from "bcryptjs";
+import { z } from "zod";
+import { prisma } from "@/lib/prisma";
+import { checkRateLimit, AUTH_RATE_LIMITS } from "@/lib/rate-limit";
+
+const resetPasswordSchema = z.object({
+  token: z.string().min(1, "Token is required"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+function hashToken(token: string): string {
+  return createHash("sha256").update(token).digest("hex");
+}
+
+export async function POST(request: Request) {
+  try {
+    const ip = request.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";
+    const rl = await checkRateLimit(`reset:${ip}`, AUTH_RATE_LIMITS.resetPassword);
+    if (!rl.allowed) {
+      return NextResponse.json(
+        { error: "Too many attempts. Please try again later." },
+        { status: 429, headers: { "Retry-After": String(Math.ceil((rl.resetAt - Date.now()) / 1000)) } }
+      );
+    }
+
+    const body: unknown = await request.json();
+    const parsed = resetPasswordSchema.safeParse(body);
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: parsed.error.issues[0]?.message ?? "Invalid input" },
+        { status: 400 }
+      );
+    }
+
+    const { token, password } = parsed.data;
+    const tokenHash = hashToken(token);
+
+    const resetToken = await prisma.passwordResetToken.findUnique({
+      where: { token: tokenHash },
+      include: { user: true },
+    });
+
+    if (!resetToken || resetToken.used || resetToken.expiresAt < new Date()) {
+      return NextResponse.json(
+        { error: "Invalid or expired reset link" },
+        { status: 400 }
+      );
+    }
+
+    const passwordHash = await hash(password, 12);
+
+    await prisma.$transaction([
+      prisma.user.update({
+        where: { id: resetToken.userId },
+        data: { passwordHash },
+      }),
+      prisma.passwordResetToken.update({
+        where: { id: resetToken.id },
+        data: { used: true },
+      }),
+    ]);
+
+    return NextResponse.json({ success: true });
+  } catch {
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

apps/web/src/app/api/auth/verify-email/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+import crypto from "crypto";
+import { prisma } from "@/lib/prisma";
+
+export async function GET(request: NextRequest) {
+  const rawToken = request.nextUrl.searchParams.get("token");
+
+  if (!rawToken) {
+    return NextResponse.redirect(new URL("/login?error=missing-token", request.url));
+  }
+
+  const tokenHash = crypto.createHash("sha256").update(rawToken).digest("hex");
+
+  const verificationToken = await prisma.emailVerificationToken.findUnique({
+    where: { token: tokenHash },
+    include: { user: true },
+  });
+
+  if (!verificationToken) {
+    return NextResponse.redirect(new URL("/login?error=invalid-token", request.url));
+  }
+
+  if (verificationToken.used) {
+    return NextResponse.redirect(new URL("/login?verified=true", request.url));
+  }
+
+  if (verificationToken.expiresAt < new Date()) {
+    return NextResponse.redirect(new URL("/login?error=token-expired", request.url));
+  }
+
+  await prisma.$transaction([
+    prisma.user.update({
+      where: { id: verificationToken.userId },
+      data: { emailVerified: true },
+    }),
+    prisma.emailVerificationToken.update({
+      where: { id: verificationToken.id },
+      data: { used: true },
+    }),
+  ]);
+
+  return NextResponse.redirect(new URL("/login?verified=true", request.url));
+}

apps/web/src/app/api/docs/[id]/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse } from "next/server";
 import { getRedis } from "@/lib/redis";
+import { prisma } from "@codeboard/database";
 
 export async function GET(
   _request: Request,
@@ -8,13 +9,34 @@ export async function GET(
   const { id } = await params;
   const redis = getRedis();
 
-  const result = await redis.get(`codeboard:result:${id}`);
+  let result = await redis.get(`codeboard:result:${id}`);
-  if (!result) {
+
+  if (result) {
+    return NextResponse.json(JSON.parse(result));
+  }
+
+  const generation = await prisma.generation.findFirst({
+    where: { id }
+  });
+
+  if (!generation || !generation.result) {
     return NextResponse.json(
       { error: "Documentation not found" },
       { status: 404 }
     );
   }
 
-  return NextResponse.json(JSON.parse(result));
+  const docs = generation.result as any;
+  docs.id = id;
+  docs.repoUrl = generation.repoUrl;
+  docs.repoName = generation.repoName;
+
+  await redis.set(
+    `codeboard:result:${id}`,
+    JSON.stringify(docs),
+    "EX",
+    86400
+  );
+
+  return NextResponse.json(docs);
 }

apps/web/src/app/api/generate/route.ts

@@ -1,10 +1,69 @@
 import { NextResponse } from "next/server";
 import { getQueue } from "@/lib/queue";
 import { getRedis } from "@/lib/redis";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { validateApiKey } from "@/lib/api-key";
 
 const GITHUB_URL_RE = /^https?:\/\/(www\.)?github\.com\/[\w.-]+\/[\w.-]+\/?$/;
 
+async function checkUsageLimit(userId: string): Promise<{ allowed: boolean; message?: string }> {
+  const subscription = await prisma.subscription.findUnique({
+    where: { userId },
+  });
+
+  if (!subscription) {
+    return { allowed: false, message: "No subscription found" };
+  }
+
+  if (subscription.tier === "FREE") {
+    const redis = getRedis();
+    const today = new Date().toISOString().slice(0, 10);
+    const key = `cb:gen:${userId}:${today}`;
+    const count = await redis.incr(key);
+    if (count === 1) await redis.expire(key, 86400);
+    if (count > subscription.generationsLimit) {
+      return { allowed: false, message: "Daily generation limit reached. Upgrade for more." };
+    }
+    return { allowed: true };
+  }
+
+  if (subscription.generationsUsed >= subscription.generationsLimit) {
+    return { allowed: false, message: "Monthly generation limit reached. Upgrade for more." };
+  }
+
+  await prisma.subscription.update({
+    where: { userId },
+    data: { generationsUsed: { increment: 1 } },
+  });
+
+  return { allowed: true };
+}
+
 export async function POST(request: Request) {
+  let userId: string | null = null;
+
+  // Try API key auth first
+  const authHeader = request.headers.get("authorization");
+  if (authHeader?.startsWith("Bearer ")) {
+    const token = authHeader.slice(7);
+    const result = await validateApiKey(token);
+    if (result) {
+      userId = result.userId;
+    }
+  }
+
+  // Fall back to session auth
+  if (!userId) {
+    const session = await auth();
+    if (session?.user?.id) {
+      userId = session.user.id;
+    }
+  }
+
+  // Allow anonymous for now but without usage tracking
+  // (public generations still work but won't be saved to user history)
+
   const body = await request.json();
   const repoUrl: string = body.repoUrl?.trim();
 
@@ -15,6 +74,17 @@ export async function POST(request: Request) {
     );
   }
 
+  // Check usage limits for authenticated users
+  if (userId) {
+    const usage = await checkUsageLimit(userId);
+    if (!usage.allowed) {
+      return NextResponse.json(
+        { error: usage.message },
+        { status: 429 }
+      );
+    }
+  }
+
   const generationId = `gen_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 
   const redis = getRedis();
@@ -26,9 +96,9 @@ export async function POST(request: Request) {
   );
 
   const queue = getQueue();
-  await queue.add("generate", { repoUrl, generationId }, {
+  await queue.add("generate", { repoUrl, generationId, userId }, {
     jobId: generationId,
-    removeOnComplete: true,
+    removeOnComplete: { age: 3600 },
     removeOnFail: false,
   });
 

apps/web/src/app/api/generations/mine/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function GET() {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const generations = await prisma.generation.findMany({
+      where: { userId: session.user.id },
+      select: {
+        id: true,
+        repoUrl: true,
+        repoName: true,
+        status: true,
+        createdAt: true,
+        duration: true,
+      },
+      orderBy: { createdAt: "desc" },
+      take: 100,
+    });
+
+    return NextResponse.json({ generations }, { status: 200 });
+  } catch (error) {
+    console.error("Error fetching user generations:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

apps/web/src/app/api/history/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@codeboard/database";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const repo = searchParams.get("repo");
+
+  if (!repo) {
+    return NextResponse.json(
+      { error: "repo parameter required" },
+      { status: 400 }
+    );
+  }
+
+  const generations = await prisma.generation.findMany({
+    where: { repoUrl: repo, status: "COMPLETED" },
+    select: {
+      id: true,
+      repoUrl: true,
+      repoName: true,
+      commitHash: true,
+      createdAt: true,
+      duration: true,
+    },
+    orderBy: { createdAt: "desc" },
+  });
+
+  return NextResponse.json(generations);
+}

apps/web/src/app/api/keys/[id]/route.ts

@@ -0,0 +1,38 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function DELETE(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id)
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+    const { id } = await params;
+
+    const apiKey = await prisma.apiKey.findFirst({
+      where: { id, userId: session.user.id, revoked: false },
+      select: { id: true },
+    });
+
+    if (!apiKey) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+
+    await prisma.apiKey.update({
+      where: { id: apiKey.id },
+      data: { revoked: true },
+    });
+
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (error) {
+    console.error("Error revoking API key:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

apps/web/src/app/api/keys/route.ts

@@ -0,0 +1,88 @@
+import { NextResponse } from "next/server";
+import { randomBytes, createHash } from "crypto";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function GET() {
+  try {
+    const session = await auth();
+    if (!session?.user?.id)
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+    const keys = await prisma.apiKey.findMany({
+      where: { userId: session.user.id, revoked: false },
+      select: {
+        id: true,
+        name: true,
+        keyPrefix: true,
+        createdAt: true,
+        lastUsedAt: true,
+      },
+      orderBy: { createdAt: "desc" },
+    });
+
+    return NextResponse.json(keys, { status: 200 });
+  } catch (error) {
+    console.error("Error listing API keys:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id)
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+    const MAX_KEYS_PER_USER = 10;
+    const keyCount = await prisma.apiKey.count({
+      where: { userId: session.user.id, revoked: false },
+    });
+    if (keyCount >= MAX_KEYS_PER_USER) {
+      return NextResponse.json(
+        { error: `Maximum of ${MAX_KEYS_PER_USER} API keys allowed. Revoke an existing key first.` },
+        { status: 400 }
+      );
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const name =
+      typeof body.name === "string" && body.name.trim()
+        ? body.name.trim()
+        : "Default";
+
+    const rawHex = randomBytes(24).toString("hex");
+    const fullKey = `cb_${rawHex}`;
+    const keyPrefix = fullKey.slice(0, 10);
+    const keyHash = createHash("sha256").update(fullKey).digest("hex");
+
+    const apiKey = await prisma.apiKey.create({
+      data: {
+        userId: session.user.id,
+        name,
+        keyHash,
+        keyPrefix,
+      },
+      select: {
+        id: true,
+        name: true,
+        keyPrefix: true,
+        createdAt: true,
+      },
+    });
+
+    return NextResponse.json(
+      { ...apiKey, key: fullKey },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error("Error creating API key:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

apps/web/src/app/api/settings/account/route.ts

@@ -0,0 +1,49 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function GET() {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const user = await prisma.user.findUnique({
+      where: { id: session.user.id },
+      select: {
+        id: true,
+        email: true,
+        name: true,
+        createdAt: true,
+        subscription: {
+          select: {
+            tier: true,
+            status: true,
+            generationsUsed: true,
+            generationsLimit: true,
+            currentPeriodStart: true,
+            currentPeriodEnd: true,
+            stripeSubscriptionId: true,
+          },
+        },
+      },
+    });
+
+    if (!user) {
+      return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+
+    return NextResponse.json({
+      ...user,
+      subscription: user.subscription
+        ? {
+            ...user.subscription,
+            hasStripeSubscription: !!user.subscription.stripeSubscriptionId,
+          }
+        : null,
+    });
+  } catch {
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

apps/web/src/app/api/settings/purge/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function POST() {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    await prisma.generation.deleteMany({
+      where: { userId: session.user.id },
+    });
+
+    return NextResponse.json({ success: true });
+  } catch {
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

apps/web/src/app/api/settings/stats/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+
+export async function GET() {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const totalGenerations = await prisma.generation.count({
+      where: { userId: session.user.id },
+    });
+
+    const completedGenerations = await prisma.generation.count({
+      where: { userId: session.user.id, status: "COMPLETED" },
+    });
+
+    const failedGenerations = await prisma.generation.count({
+      where: { userId: session.user.id, status: "FAILED" },
+    });
+
+    return NextResponse.json({
+      totalGenerations,
+      completedGenerations,
+      failedGenerations,
+    });
+  } catch {
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

apps/web/src/app/api/stripe/checkout/route.ts

@@ -0,0 +1,101 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { getStripe, TIER_CONFIG } from "@/lib/stripe";
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { priceId, tierKey } = body as {
+      priceId?: string;
+      tierKey?: string;
+    };
+
+    let resolvedPriceId = priceId;
+
+    if (!resolvedPriceId && tierKey) {
+      const tierConfig =
+        TIER_CONFIG[tierKey as keyof typeof TIER_CONFIG];
+      if (tierConfig && "priceId" in tierConfig) {
+        resolvedPriceId = tierConfig.priceId;
+      }
+    }
+
+    if (!resolvedPriceId) {
+      return NextResponse.json(
+        { error: "priceId or tierKey is required" },
+        { status: 400 }
+      );
+    }
+
+    const validPriceIds = [TIER_CONFIG.STARTER.priceId, TIER_CONFIG.PRO.priceId];
+    if (!validPriceIds.includes(resolvedPriceId)) {
+      return NextResponse.json(
+        { error: "Invalid priceId" },
+        { status: 400 }
+      );
+    }
+
+    const userId = session.user.id;
+
+    let subscription = await prisma.subscription.findUnique({
+      where: { userId },
+    });
+
+    let stripeCustomerId = subscription?.stripeCustomerId;
+
+    if (!stripeCustomerId) {
+      const customer = await getStripe().customers.create({
+        email: session.user.email,
+        name: session.user.name ?? undefined,
+        metadata: { userId },
+      });
+      stripeCustomerId = customer.id;
+
+      if (subscription) {
+        await prisma.subscription.update({
+          where: { userId },
+          data: { stripeCustomerId },
+        });
+      } else {
+        subscription = await prisma.subscription.create({
+          data: {
+            userId,
+            stripeCustomerId,
+          },
+        });
+      }
+    }
+
+    const ALLOWED_ORIGINS = [
+      "https://codeboard.vectry.tech",
+      "http://localhost:3000",
+    ];
+    const requestOrigin = request.headers.get("origin");
+    const origin = ALLOWED_ORIGINS.includes(requestOrigin ?? "")
+      ? requestOrigin!
+      : "https://codeboard.vectry.tech";
+
+    const checkoutSession = await getStripe().checkout.sessions.create({
+      customer: stripeCustomerId,
+      mode: "subscription",
+      line_items: [{ price: resolvedPriceId, quantity: 1 }],
+      success_url: `${origin}/dashboard/settings?session_id={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${origin}/dashboard/settings`,
+      metadata: { userId },
+    });
+
+    return NextResponse.json({ url: checkoutSession.url }, { status: 200 });
+  } catch (error) {
+    console.error("Error creating checkout session:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

apps/web/src/app/api/stripe/portal/route.ts

@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { getStripe } from "@/lib/stripe";
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const subscription = await prisma.subscription.findUnique({
+      where: { userId: session.user.id },
+      select: { stripeCustomerId: true },
+    });
+
+    if (!subscription?.stripeCustomerId) {
+      return NextResponse.json(
+        { error: "No active subscription to manage" },
+        { status: 400 }
+      );
+    }
+
+    const ALLOWED_ORIGINS = [
+      "https://codeboard.vectry.tech",
+      "http://localhost:3000",
+    ];
+    const requestOrigin = request.headers.get("origin");
+    const origin = ALLOWED_ORIGINS.includes(requestOrigin ?? "")
+      ? requestOrigin!
+      : "https://codeboard.vectry.tech";
+
+    const portalSession = await getStripe().billingPortal.sessions.create({
+      customer: subscription.stripeCustomerId,
+      return_url: `${origin}/dashboard/settings`,
+    });
+
+    return NextResponse.json({ url: portalSession.url }, { status: 200 });
+  } catch (error) {
+    console.error("Error creating portal session:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

apps/web/src/app/api/stripe/webhook/route.ts

@@ -0,0 +1,179 @@
+import { NextResponse } from "next/server";
+import type Stripe from "stripe";
+import { prisma } from "@/lib/prisma";
+import { getStripe, TIER_CONFIG } from "@/lib/stripe";
+
+export const runtime = "nodejs";
+
+function tierFromPriceId(priceId: string | null): "FREE" | "STARTER" | "PRO" {
+  if (priceId === TIER_CONFIG.STARTER.priceId) return "STARTER";
+  if (priceId === TIER_CONFIG.PRO.priceId) return "PRO";
+  return "FREE";
+}
+
+function generationsLimitForTier(tier: "FREE" | "STARTER" | "PRO"): number {
+  return TIER_CONFIG[tier].generationsLimit;
+}
+
+async function handleCheckoutCompleted(
+  checkoutSession: Stripe.Checkout.Session
+) {
+  const userId = checkoutSession.metadata?.userId;
+  if (!userId) return;
+
+  const subscriptionId = checkoutSession.subscription as string;
+  const customerId = checkoutSession.customer as string;
+
+  const sub = await getStripe().subscriptions.retrieve(subscriptionId);
+  const firstItem = sub.items.data[0];
+  const priceId = firstItem?.price?.id ?? null;
+  const tier = tierFromPriceId(priceId);
+  const periodStart = firstItem?.current_period_start
+    ? new Date(firstItem.current_period_start * 1000)
+    : new Date();
+  const periodEnd = firstItem?.current_period_end
+    ? new Date(firstItem.current_period_end * 1000)
+    : new Date();
+
+  await prisma.subscription.upsert({
+    where: { userId },
+    update: {
+      stripeCustomerId: customerId,
+      stripeSubscriptionId: subscriptionId,
+      stripePriceId: priceId,
+      tier,
+      generationsLimit: generationsLimitForTier(tier),
+      generationsUsed: 0,
+      status: "ACTIVE",
+      currentPeriodStart: periodStart,
+      currentPeriodEnd: periodEnd,
+    },
+    create: {
+      userId,
+      stripeCustomerId: customerId,
+      stripeSubscriptionId: subscriptionId,
+      stripePriceId: priceId,
+      tier,
+      generationsLimit: generationsLimitForTier(tier),
+      generationsUsed: 0,
+      status: "ACTIVE",
+      currentPeriodStart: periodStart,
+      currentPeriodEnd: periodEnd,
+    },
+  });
+}
+
+async function handleSubscriptionUpdated(sub: Stripe.Subscription) {
+  const firstItem = sub.items.data[0];
+  const priceId = firstItem?.price?.id ?? null;
+  const tier = tierFromPriceId(priceId);
+
+  const statusMap: Record<string, "ACTIVE" | "PAST_DUE" | "CANCELED" | "UNPAID"> = {
+    active: "ACTIVE",
+    past_due: "PAST_DUE",
+    canceled: "CANCELED",
+    unpaid: "UNPAID",
+  };
+
+  const dbStatus = statusMap[sub.status] ?? "ACTIVE";
+  const periodStart = firstItem?.current_period_start
+    ? new Date(firstItem.current_period_start * 1000)
+    : undefined;
+  const periodEnd = firstItem?.current_period_end
+    ? new Date(firstItem.current_period_end * 1000)
+    : undefined;
+
+  await prisma.subscription.updateMany({
+    where: { stripeSubscriptionId: sub.id },
+    data: {
+      tier,
+      stripePriceId: priceId,
+      generationsLimit: generationsLimitForTier(tier),
+      status: dbStatus,
+      ...(periodStart && { currentPeriodStart: periodStart }),
+      ...(periodEnd && { currentPeriodEnd: periodEnd }),
+    },
+  });
+}
+
+async function handleSubscriptionDeleted(sub: Stripe.Subscription) {
+  await prisma.subscription.updateMany({
+    where: { stripeSubscriptionId: sub.id },
+    data: {
+      status: "CANCELED",
+      tier: "FREE",
+      generationsLimit: TIER_CONFIG.FREE.generationsLimit,
+    },
+  });
+}
+
+async function handleInvoicePaid(invoice: Stripe.Invoice) {
+  const subDetail = invoice.parent?.subscription_details?.subscription;
+  const subscriptionId =
+    typeof subDetail === "string" ? subDetail : subDetail?.id;
+
+  if (!subscriptionId) return;
+
+  await prisma.subscription.updateMany({
+    where: { stripeSubscriptionId: subscriptionId },
+    data: { generationsUsed: 0 },
+  });
+}
+
+export async function POST(request: Request) {
+  const body = await request.text();
+  const sig = request.headers.get("stripe-signature");
+
+  if (!sig) {
+    return NextResponse.json(
+      { error: "Missing stripe-signature header" },
+      { status: 400 }
+    );
+  }
+
+  let event: Stripe.Event;
+  try {
+    event = getStripe().webhooks.constructEvent(
+      body,
+      sig,
+      process.env.STRIPE_WEBHOOK_SECRET!
+    );
+  } catch (err) {
+    console.error("Webhook signature verification failed");
+    return NextResponse.json(
+      { error: "Invalid signature" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    switch (event.type) {
+      case "checkout.session.completed":
+        await handleCheckoutCompleted(
+          event.data.object as Stripe.Checkout.Session
+        );
+        break;
+      case "customer.subscription.updated":
+        await handleSubscriptionUpdated(
+          event.data.object as Stripe.Subscription
+        );
+        break;
+      case "customer.subscription.deleted":
+        await handleSubscriptionDeleted(
+          event.data.object as Stripe.Subscription
+        );
+        break;
+      case "invoice.paid":
+        await handleInvoicePaid(event.data.object as Stripe.Invoice);
+        break;
+    }
+  } catch (error) {
+    console.error(`Error handling ${event.type}:`, error);
+    return NextResponse.json(
+      { error: "Webhook handler failed" },
+      { status: 500 }
+    );
+  }
+
+  return NextResponse.json({ received: true }, { status: 200 });
+}

apps/web/src/app/dashboard/keys/page.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Key, Plus, Copy, Check, Trash2, AlertTriangle, RefreshCw, Shield } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ApiKey {
+  id: string;
+  name: string;
+  keyPrefix: string;
+  createdAt: string;
+  lastUsedAt: string | null;
+}
+
+interface NewKeyResponse extends ApiKey { key: string; }
+
+export default function ApiKeysPage() {
+  const [keys, setKeys] = useState<ApiKey[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreating, setIsCreating] = useState(false);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [newlyCreatedKey, setNewlyCreatedKey] = useState<NewKeyResponse | null>(null);
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+  const [revokingId, setRevokingId] = useState<string | null>(null);
+  const [confirmRevokeId, setConfirmRevokeId] = useState<string | null>(null);
+
+  const fetchKeys = useCallback(async () => {
+    setIsLoading(true);
+    try { const res = await fetch("/api/keys", { cache: "no-store" }); if (res.ok) setKeys(await res.json()); } catch (e) { console.error("Failed to fetch:", e); } finally { setIsLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchKeys(); }, [fetchKeys]);
+
+  const copyToClipboard = async (text: string, field: string) => {
+    try { await navigator.clipboard.writeText(text); setCopiedField(field); setTimeout(() => setCopiedField(null), 2000); } catch {}
+  };
+
+  const handleCreate = async () => {
+    setIsCreating(true);
+    try {
+      const res = await fetch("/api/keys", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: newKeyName.trim() || undefined }) });
+      if (res.ok) { const data: NewKeyResponse = await res.json(); setNewlyCreatedKey(data); setShowCreateForm(false); setNewKeyName(""); fetchKeys(); }
+    } catch (e) { console.error("Failed to create:", e); } finally { setIsCreating(false); }
+  };
+
+  const handleRevoke = async (id: string) => {
+    setRevokingId(id);
+    try { const res = await fetch(`/api/keys/${id}`, { method: "DELETE" }); if (res.ok) { setConfirmRevokeId(null); fetchKeys(); } } catch (e) { console.error("Failed to revoke:", e); } finally { setRevokingId(null); }
+  };
+
+  const formatDate = (d: string) => new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+
+  return (
+    <div className="space-y-8 max-w-3xl">
+      <div className="flex items-center justify-between">
+        <div><h1 className="text-2xl font-bold text-neutral-100">API Keys</h1><p className="text-neutral-400 mt-1">Manage API keys for programmatic access</p></div>
+        <button onClick={() => { setShowCreateForm(true); setNewlyCreatedKey(null); }} className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 hover:bg-blue-400 text-white rounded-lg text-sm font-semibold transition-colors"><Plus className="w-4 h-4" /> Create New Key</button>
+      </div>
+
+      {newlyCreatedKey && (
+        <div className="bg-blue-500/5 border border-blue-500/20 rounded-xl p-6 space-y-4">
+          <div className="flex items-start gap-3">
+            <div className="w-10 h-10 rounded-lg bg-blue-500/10 border border-blue-500/20 flex items-center justify-center shrink-0"><Key className="w-5 h-5 text-blue-400" /></div>
+            <div className="flex-1 min-w-0"><h3 className="text-sm font-semibold text-blue-300">API Key Created</h3><p className="text-xs text-blue-400/60 mt-0.5">{newlyCreatedKey.name}</p></div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex-1 px-4 py-3 bg-neutral-950 border border-neutral-800 rounded-lg font-mono text-sm text-neutral-200 truncate select-all">{newlyCreatedKey.key}</div>
+            <button onClick={() => copyToClipboard(newlyCreatedKey.key, "new-key")} aria-label="Copy"
+              className={cn("p-3 rounded-lg border transition-all shrink-0", copiedField === "new-key" ? "bg-blue-500/10 border-blue-500/30 text-blue-400" : "bg-neutral-800 border-neutral-700 text-neutral-400 hover:text-neutral-200")}>
+              {copiedField === "new-key" ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+            </button>
+          </div>
+          <div className="flex items-center gap-2 px-3 py-2.5 bg-amber-500/5 border border-amber-500/20 rounded-lg"><AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" /><p className="text-xs text-amber-300/80">This key won&apos;t be shown again. Copy it now.</p></div>
+          <button onClick={() => setNewlyCreatedKey(null)} className="text-xs text-neutral-500 hover:text-neutral-300 transition-colors">Dismiss</button>
+        </div>
+      )}
+
+      {showCreateForm && !newlyCreatedKey && (
+        <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
+          <div className="flex items-center gap-2 text-neutral-300"><Plus className="w-5 h-5 text-blue-400" /><h2 className="text-sm font-semibold">Create New API Key</h2></div>
+          <div>
+            <label htmlFor="key-name" className="text-xs text-neutral-500 font-medium block mb-1.5">Key Name (optional)</label>
+            <input id="key-name" type="text" value={newKeyName} onChange={(e) => 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 />
+          </div>
+          <div className="flex items-center gap-3">
+            <button onClick={handleCreate} disabled={isCreating} className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-400 text-white rounded-lg text-sm font-semibold disabled:opacity-50 transition-colors">
+              {isCreating ? <RefreshCw className="w-4 h-4 animate-spin" /> : <Key className="w-4 h-4" />} Generate Key
+            </button>
+            <button onClick={() => { setShowCreateForm(false); setNewKeyName(""); }} className="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors">Cancel</button>
+          </div>
+        </div>
+      )}
+
+      <section className="space-y-4">
+        <div className="flex items-center gap-2 text-neutral-300"><Shield className="w-5 h-5 text-blue-400" /><h2 className="text-lg font-semibold">Active Keys</h2></div>
+        <div className="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden">
+          {isLoading ? (
+            <div className="p-6 space-y-4">{Array.from({ length: 3 }).map((_, i) => (<div key={i} className="flex items-center gap-4 animate-pulse"><div className="w-8 h-8 bg-neutral-800 rounded-lg" /><div className="flex-1 space-y-2"><div className="h-4 w-32 bg-neutral-800 rounded" /><div className="h-3 w-48 bg-neutral-800 rounded" /></div><div className="h-8 w-20 bg-neutral-800 rounded" /></div>))}</div>
+          ) : keys.length === 0 ? (
+            <div className="p-12 text-center"><div className="w-12 h-12 rounded-xl bg-neutral-800/50 border border-neutral-700/50 flex items-center justify-center mx-auto mb-4"><Key className="w-6 h-6 text-neutral-600" /></div><p className="text-sm text-neutral-400 font-medium">No API keys yet</p><p className="text-xs text-neutral-600 mt-1">Create one for programmatic access</p></div>
+          ) : (
+            <div className="divide-y divide-neutral-800">
+              {keys.map((apiKey) => (
+                <div key={apiKey.id} className="flex items-center gap-4 px-6 py-4 group transition-colors">
+                  <div className="w-9 h-9 rounded-lg bg-neutral-800/50 border border-neutral-700/50 flex items-center justify-center shrink-0"><Key className="w-4 h-4 text-neutral-500" /></div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-neutral-200 truncate">{apiKey.name}</p>
+                    <div className="flex items-center gap-3 mt-0.5">
+                      <code className="text-xs font-mono text-neutral-500">{apiKey.keyPrefix}••••••••</code>
+                      <span className="text-xs text-neutral-600">Created {formatDate(apiKey.createdAt)}</span>
+                      {apiKey.lastUsedAt && <span className="text-xs text-neutral-600">Last used {formatDate(apiKey.lastUsedAt)}</span>}
+                    </div>
+                  </div>
+                  {confirmRevokeId === apiKey.id ? (
+                    <div className="flex items-center gap-2 shrink-0">
+                      <button onClick={() => setConfirmRevokeId(null)} className="px-3 py-1.5 text-xs text-neutral-400 hover:text-neutral-200 transition-colors">Cancel</button>
+                      <button onClick={() => handleRevoke(apiKey.id)} disabled={revokingId === apiKey.id}
+                        className="flex items-center gap-1.5 px-3 py-1.5 bg-red-500/20 border border-red-500/30 text-red-400 rounded-lg text-xs font-medium hover:bg-red-500/30 disabled:opacity-50 transition-colors">
+                        {revokingId === apiKey.id ? <RefreshCw className="w-3 h-3 animate-spin" /> : <AlertTriangle className="w-3 h-3" />} Confirm
+                      </button>
+                    </div>
+                  ) : (
+                    <button onClick={() => setConfirmRevokeId(apiKey.id)}
+                      className="flex items-center gap-1.5 px-3 py-1.5 bg-neutral-800 border border-neutral-700 text-neutral-500 rounded-lg text-xs font-medium opacity-0 group-hover:opacity-100 hover:text-red-400 hover:border-red-500/30 transition-all shrink-0">
+                      <Trash2 className="w-3 h-3" /> Revoke
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}

apps/web/src/app/dashboard/layout.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useSession } from "next-auth/react";
+import {
+  Code2,
+  FileText,
+  Key,
+  Settings,
+  Menu,
+  ChevronRight,
+  X,
+  AlertTriangle,
+  Loader2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const navItems: NavItem[] = [
+  { href: "/dashboard", label: "Generations", icon: FileText },
+  { href: "/dashboard/keys", label: "API Keys", icon: Key },
+  { href: "/dashboard/settings", label: "Settings", icon: Settings },
+];
+
+function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex flex-col h-full bg-neutral-900 border-r border-neutral-800">
+      <div className="p-6 border-b border-neutral-800">
+        <Link href="/" className="flex items-center gap-3 group" onClick={onNavigate}>
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/30 transition-shadow">
+            <Code2 className="w-5 h-5 text-white" />
+          </div>
+          <div className="flex flex-col">
+            <span className="font-bold text-lg text-neutral-100">CodeBoard</span>
+            <span className="text-xs text-neutral-500">Dashboard</span>
+          </div>
+        </Link>
+      </div>
+
+      <nav className="flex-1 p-4 space-y-1">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive =
+            item.href === "/dashboard"
+              ? pathname === "/dashboard"
+              : pathname === item.href || pathname.startsWith(`${item.href}/`);
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={onNavigate}
+              className={cn(
+                "flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all duration-200",
+                isActive
+                  ? "bg-blue-500/10 text-blue-400 border border-blue-500/20"
+                  : "text-neutral-400 hover:text-neutral-100 hover:bg-neutral-800/50"
+              )}
+            >
+              <Icon className="w-5 h-5" />
+              <span className="flex-1">{item.label}</span>
+              {isActive && <ChevronRight className="w-4 h-4" />}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="p-4 border-t border-neutral-800">
+        <div className="px-4 py-3 rounded-lg bg-neutral-800/50 border border-neutral-700/50">
+          <p className="text-xs text-neutral-500">CodeBoard v0.1.0</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function VerificationBanner() {
+  const { data: session } = useSession();
+  const [dismissed, setDismissed] = useState(false);
+  const [resending, setResending] = useState(false);
+  const [sent, setSent] = useState(false);
+
+  if (dismissed || !session?.user || session.user.isEmailVerified) {
+    return null;
+  }
+
+  async function handleResend() {
+    setResending(true);
+    try {
+      const res = await fetch("/api/auth/resend-verification", { method: "POST" });
+      if (res.ok) setSent(true);
+    } catch {} finally { setResending(false); }
+  }
+
+  return (
+    <div className="bg-amber-500/10 border-b border-amber-500/20 px-4 py-3">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 min-w-0">
+          <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" />
+          <p className="text-sm text-amber-200 truncate">
+            {sent ? "Verification email sent! Check your inbox." : "Please verify your email address. Check your inbox or"}
+          </p>
+          {!sent && (
+            <button onClick={handleResend} disabled={resending}
+              className="text-sm font-medium text-amber-400 hover:text-amber-300 transition-colors whitespace-nowrap inline-flex items-center gap-1">
+              {resending && <Loader2 className="w-3 h-3 animate-spin" />}
+              {resending ? "sending..." : "click to resend."}
+            </button>
+          )}
+        </div>
+        <button onClick={() => setDismissed(true)} aria-label="Dismiss" className="p-1 rounded text-amber-400/60 hover:text-amber-300 transition-colors shrink-0">
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-neutral-950 flex">
+      <aside className="hidden lg:block w-64 h-screen sticky top-0">
+        <Sidebar />
+      </aside>
+
+      {sidebarOpen && (
+        <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setSidebarOpen(false)} />
+      )}
+
+      <aside className={cn(
+        "fixed inset-y-0 left-0 w-72 z-50 transform transition-transform duration-300 ease-in-out lg:hidden",
+        sidebarOpen ? "translate-x-0" : "-translate-x-full"
+      )}>
+        <Sidebar onNavigate={() => setSidebarOpen(false)} />
+      </aside>
+
+      <main id="main-content" className="flex-1 min-w-0">
+        <VerificationBanner />
+        <header className="lg:hidden sticky top-0 z-30 bg-neutral-950/80 backdrop-blur-md border-b border-neutral-800 px-4 py-3">
+          <div className="flex items-center justify-between">
+            <button onClick={() => setSidebarOpen(true)} aria-label="Open menu"
+              className="p-2 rounded-lg bg-neutral-900 border border-neutral-800 text-neutral-400 hover:text-neutral-100 transition-colors">
+              <Menu className="w-5 h-5" />
+            </button>
+            <Link href="/" className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
+                <Code2 className="w-4 h-4 text-white" />
+              </div>
+              <span className="font-bold text-neutral-100">CodeBoard</span>
+            </Link>
+            <div className="w-9" />
+          </div>
+        </header>
+        <div className="p-4 sm:p-6 lg:p-8">{children}</div>
+      </main>
+    </div>
+  );
+}

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<Generation[]>([]);
+  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 <CheckCircle className="w-4 h-4 text-green-400" />;
+      case "FAILED": return <XCircle className="w-4 h-4 text-red-400" />;
+      default: return <Loader2 className="w-4 h-4 text-blue-400 animate-spin" />;
+    }
+  };
+
+  return (
+    <div className="space-y-8 max-w-4xl">
+      <div>
+        <h1 className="text-2xl font-bold text-neutral-100">My Generations</h1>
+        <p className="text-neutral-400 mt-1">Your architecture diagram generation history</p>
+      </div>
+
+      <div className="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden">
+        {isLoading ? (
+          <div className="p-12 text-center">
+            <Loader2 className="w-6 h-6 text-blue-400 animate-spin mx-auto mb-3" />
+            <p className="text-sm text-neutral-500">Loading generations...</p>
+          </div>
+        ) : generations.length === 0 ? (
+          <div className="p-12 text-center">
+            <div className="w-12 h-12 rounded-xl bg-neutral-800/50 border border-neutral-700/50 flex items-center justify-center mx-auto mb-4">
+              <FileText className="w-6 h-6 text-neutral-600" />
+            </div>
+            <p className="text-sm text-neutral-400 font-medium">No generations yet</p>
+            <p className="text-xs text-neutral-600 mt-1">Generate your first architecture diagram from the <Link href="/" className="text-blue-400 hover:text-blue-300">home page</Link></p>
+          </div>
+        ) : (
+          <div className="divide-y divide-neutral-800">
+            {generations.map((gen) => (
+              <Link key={gen.id} href={`/docs/${gen.id}`} className="flex items-center gap-4 px-6 py-4 hover:bg-neutral-800/30 transition-colors group">
+                {statusIcon(gen.status)}
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-neutral-200 truncate">{gen.repoName}</p>
+                  <div className="flex items-center gap-3 mt-0.5">
+                    <span className="text-xs text-neutral-500 truncate">{gen.repoUrl}</span>
+                    {gen.duration && (
+                      <span className="text-xs text-neutral-600 flex items-center gap-1">
+                        <Clock className="w-3 h-3" /> {gen.duration}s
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <span className="text-xs text-neutral-600">{new Date(gen.createdAt).toLocaleDateString()}</span>
+                <ExternalLink className="w-4 h-4 text-neutral-600 opacity-0 group-hover:opacity-100 transition-opacity" />
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/app/dashboard/settings/page.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  Settings,
+  Key,
+  Copy,
+  Check,
+  RefreshCw,
+  Database,
+  Trash2,
+  AlertTriangle,
+  CreditCard,
+  Crown,
+  Zap,
+  ArrowUpRight,
+  User,
+  Calendar,
+  Loader2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Stats {
+  totalGenerations: number;
+  completedGenerations: number;
+  failedGenerations: number;
+}
+
+interface AccountData {
+  id: string;
+  email: string;
+  name: string | null;
+  createdAt: string;
+  subscription: {
+    tier: "FREE" | "STARTER" | "PRO";
+    status: "ACTIVE" | "PAST_DUE" | "CANCELED" | "UNPAID";
+    generationsUsed: number;
+    generationsLimit: number;
+    currentPeriodStart: string | null;
+    currentPeriodEnd: string | null;
+    hasStripeSubscription: boolean;
+  } | null;
+}
+
+const TIERS = [
+  {
+    key: "FREE" as const,
+    name: "Free",
+    price: 0,
+    period: "day",
+    generations: 15,
+    description: "For getting started",
+    features: ["15 generations per day", "Basic diagram viewing", "Community support"],
+  },
+  {
+    key: "STARTER" as const,
+    name: "Starter",
+    price: 5,
+    period: "month",
+    generations: 1000,
+    description: "For regular use",
+    features: ["1,000 generations per month", "Generation history", "Priority support"],
+  },
+  {
+    key: "PRO" as const,
+    name: "Pro",
+    price: 20,
+    period: "month",
+    generations: 100000,
+    description: "For teams & heavy use",
+    features: ["100,000 generations per month", "Full history", "Dedicated support", "API access"],
+  },
+];
+
+export default function SettingsPage() {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [account, setAccount] = useState<AccountData | null>(null);
+  const [isLoadingStats, setIsLoadingStats] = useState(true);
+  const [isLoadingAccount, setIsLoadingAccount] = useState(true);
+  const [isPurging, setIsPurging] = useState(false);
+  const [showPurgeConfirm, setShowPurgeConfirm] = useState(false);
+  const [upgradingTier, setUpgradingTier] = useState<string | null>(null);
+  const [isOpeningPortal, setIsOpeningPortal] = useState(false);
+
+  const fetchStats = useCallback(async () => {
+    setIsLoadingStats(true);
+    try {
+      const res = await fetch("/api/settings/stats", { cache: "no-store" });
+      if (res.ok) setStats(await res.json());
+    } catch (error) { console.error("Failed to fetch stats:", error); } finally { setIsLoadingStats(false); }
+  }, []);
+
+  const fetchAccount = useCallback(async () => {
+    setIsLoadingAccount(true);
+    try {
+      const res = await fetch("/api/settings/account", { cache: "no-store" });
+      if (res.ok) setAccount(await res.json());
+    } catch (error) { console.error("Failed to fetch account:", error); } finally { setIsLoadingAccount(false); }
+  }, []);
+
+  useEffect(() => { fetchStats(); fetchAccount(); }, [fetchStats, fetchAccount]);
+
+  const handlePurgeAll = async () => {
+    setIsPurging(true);
+    try {
+      const res = await fetch("/api/settings/purge", { method: "POST" });
+      if (res.ok) { setShowPurgeConfirm(false); fetchStats(); }
+    } catch (error) { console.error("Failed to purge:", error); } finally { setIsPurging(false); }
+  };
+
+  const handleUpgrade = async (tierKey: string) => {
+    setUpgradingTier(tierKey);
+    try {
+      const res = await fetch("/api/stripe/checkout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tierKey }) });
+      const data = await res.json();
+      if (data.url) window.location.href = data.url;
+    } catch (error) { console.error("Failed to create checkout:", error); } finally { setUpgradingTier(null); }
+  };
+
+  const handleManageSubscription = async () => {
+    setIsOpeningPortal(true);
+    try {
+      const res = await fetch("/api/stripe/portal", { method: "POST" });
+      const data = await res.json();
+      if (data.url) window.location.href = data.url;
+    } catch (error) { console.error("Failed to open portal:", error); } finally { setIsOpeningPortal(false); }
+  };
+
+  const currentTier = account?.subscription?.tier ?? "FREE";
+  const generationsUsed = account?.subscription?.generationsUsed ?? 0;
+  const generationsLimit = account?.subscription?.generationsLimit ?? 15;
+  const usagePercent = generationsLimit > 0 ? Math.min((generationsUsed / generationsLimit) * 100, 100) : 0;
+
+  return (
+    <div className="space-y-8 max-w-3xl">
+      <div>
+        <h1 className="text-2xl font-bold text-neutral-100">Settings</h1>
+        <p className="text-neutral-400 mt-1">Account, billing, and configuration</p>
+      </div>
+
+      {/* Account */}
+      <section className="space-y-4">
+        <div className="flex items-center gap-2 text-neutral-300">
+          <User className="w-5 h-5 text-blue-400" />
+          <h2 className="text-lg font-semibold">Account</h2>
+        </div>
+        <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-6">
+          {isLoadingAccount ? (
+            <div className="flex items-center gap-3 text-neutral-500"><Loader2 className="w-4 h-4 animate-spin" /><span className="text-sm">Loading account...</span></div>
+          ) : account ? (
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+              <div><p className="text-xs text-neutral-500 font-medium mb-1">Email</p><p className="text-sm text-neutral-200 font-medium">{account.email}</p></div>
+              <div><p className="text-xs text-neutral-500 font-medium mb-1">Name</p><p className="text-sm text-neutral-200 font-medium">{account.name ?? "\u2014"}</p></div>
+              <div><p className="text-xs text-neutral-500 font-medium mb-1">Member since</p><div className="flex items-center gap-1.5 text-sm text-neutral-200 font-medium"><Calendar className="w-3.5 h-3.5 text-neutral-500" />{new Date(account.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</div></div>
+            </div>
+          ) : (<p className="text-sm text-neutral-500">Unable to load account info</p>)}
+        </div>
+      </section>
+
+      {/* Subscription */}
+      <section className="space-y-4">
+        <div className="flex items-center gap-2 text-neutral-300">
+          <CreditCard className="w-5 h-5 text-blue-400" />
+          <h2 className="text-lg font-semibold">Subscription & Billing</h2>
+        </div>
+        <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-5">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <span className="text-sm text-neutral-400">Current plan</span>
+              <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-500/10 border border-blue-500/20 text-blue-400">
+                {currentTier === "PRO" && <Crown className="w-3 h-3" />}
+                {currentTier === "STARTER" && <Zap className="w-3 h-3" />}
+                {currentTier}
+              </span>
+            </div>
+            {currentTier !== "FREE" && account?.subscription?.hasStripeSubscription && (
+              <button onClick={handleManageSubscription} disabled={isOpeningPortal}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-400 bg-neutral-800 border border-neutral-700 rounded-lg hover:text-neutral-200 hover:border-neutral-600 transition-colors disabled:opacity-50">
+                {isOpeningPortal ? <Loader2 className="w-3 h-3 animate-spin" /> : <ArrowUpRight className="w-3 h-3" />} Manage Subscription
+              </button>
+            )}
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-neutral-400">{generationsUsed.toLocaleString()} of {generationsLimit.toLocaleString()} generations used</span>
+              <span className="text-neutral-500 text-xs">{currentTier === "FREE" ? "15 generations/day" : "This billing period"}</span>
+            </div>
+            <div className="h-2 bg-neutral-800 rounded-full overflow-hidden">
+              <div className={cn("h-full rounded-full transition-all duration-500", usagePercent > 90 ? "bg-amber-500" : "bg-blue-500")} style={{ width: `${usagePercent}%` }} />
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          {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 (
+              <div key={tier.key} className={cn("relative bg-neutral-900 border rounded-xl p-5 flex flex-col transition-colors", isCurrent ? "border-blue-500/40 shadow-[0_0_24px_-6px_rgba(59,130,246,0.12)]" : "border-neutral-800 hover:border-neutral-700")}>
+                {isCurrent && (<div className="absolute -top-2.5 left-4"><span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-blue-500 text-white">Current</span></div>)}
+                <div className="mb-4"><h3 className="text-base font-semibold text-neutral-100">{tier.name}</h3><p className="text-xs text-neutral-500 mt-0.5">{tier.description}</p></div>
+                <div className="mb-4"><span className="text-2xl font-bold text-neutral-100">${tier.price}</span><span className="text-sm text-neutral-500">/{tier.period}</span></div>
+                <ul className="space-y-2 mb-5 flex-1">
+                  {tier.features.map((f) => (<li key={f} className="flex items-start gap-2 text-xs text-neutral-400"><Check className="w-3.5 h-3.5 text-blue-500 mt-0.5 shrink-0" />{f}</li>))}
+                </ul>
+                {isCurrent ? (<div className="py-2 text-center text-xs font-medium text-blue-400 bg-blue-500/5 border border-blue-500/10 rounded-lg">Active plan</div>)
+                : isUpgrade ? (<button onClick={() => handleUpgrade(tier.key)} disabled={upgradingTier === tier.key} className="flex items-center justify-center gap-1.5 py-2 text-sm font-medium bg-blue-500 hover:bg-blue-400 text-white rounded-lg transition-colors disabled:opacity-50">{upgradingTier === tier.key ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Zap className="w-3.5 h-3.5" />} Upgrade</button>)
+                : isDowngrade ? (<button onClick={handleManageSubscription} disabled={isOpeningPortal} className="flex items-center justify-center gap-1.5 py-2 text-sm font-medium bg-neutral-800 border border-neutral-700 text-neutral-300 rounded-lg hover:text-neutral-100 transition-colors disabled:opacity-50">{isOpeningPortal && <Loader2 className="w-3.5 h-3.5 animate-spin" />} Downgrade</button>)
+                : null}
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* Data */}
+      <section className="space-y-4">
+        <div className="flex items-center gap-2 text-neutral-300">
+          <Database className="w-5 h-5 text-blue-400" />
+          <h2 className="text-lg font-semibold">Data & Storage</h2>
+        </div>
+        <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-5">
+          {isLoadingStats ? (
+            <div className="grid grid-cols-3 gap-4">{Array.from({ length: 3 }).map((_, i) => (<div key={i} className="animate-pulse"><div className="h-4 w-16 bg-neutral-800 rounded mb-2" /><div className="h-8 w-12 bg-neutral-800 rounded" /></div>))}</div>
+          ) : stats ? (
+            <div className="grid grid-cols-3 gap-4">
+              <div className="p-3 bg-neutral-800/50 rounded-lg"><p className="text-xs text-neutral-500">Total</p><p className="text-xl font-bold text-neutral-100 mt-1">{stats.totalGenerations.toLocaleString()}</p></div>
+              <div className="p-3 bg-neutral-800/50 rounded-lg"><p className="text-xs text-neutral-500">Completed</p><p className="text-xl font-bold text-neutral-100 mt-1">{stats.completedGenerations.toLocaleString()}</p></div>
+              <div className="p-3 bg-neutral-800/50 rounded-lg"><p className="text-xs text-neutral-500">Failed</p><p className="text-xl font-bold text-neutral-100 mt-1">{stats.failedGenerations.toLocaleString()}</p></div>
+            </div>
+          ) : (<p className="text-sm text-neutral-500">Unable to load statistics</p>)}
+
+          <div className="pt-4 border-t border-neutral-800 flex items-center justify-between">
+            <div><p className="text-sm text-neutral-300 font-medium">Purge All Data</p><p className="text-xs text-neutral-500 mt-0.5">Permanently delete all your generations</p></div>
+            {showPurgeConfirm ? (
+              <div className="flex items-center gap-2">
+                <button onClick={() => setShowPurgeConfirm(false)} className="px-3 py-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors">Cancel</button>
+                <button onClick={handlePurgeAll} disabled={isPurging} className="flex items-center gap-2 px-4 py-2 bg-red-500/20 border border-red-500/30 text-red-400 rounded-lg text-sm font-medium hover:bg-red-500/30 disabled:opacity-50 transition-colors">
+                  {isPurging ? <RefreshCw className="w-4 h-4 animate-spin" /> : <AlertTriangle className="w-4 h-4" />} Confirm Purge
+                </button>
+              </div>
+            ) : (
+              <button onClick={() => setShowPurgeConfirm(true)} className="flex items-center gap-2 px-4 py-2 bg-neutral-800 border border-neutral-700 text-neutral-400 rounded-lg text-sm font-medium hover:text-red-400 hover:border-red-500/30 transition-colors">
+                <Trash2 className="w-4 h-4" /> Purge
+              </button>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* About */}
+      <section className="space-y-4">
+        <div className="flex items-center gap-2 text-neutral-300">
+          <Settings className="w-5 h-5 text-blue-400" />
+          <h2 className="text-lg font-semibold">About</h2>
+        </div>
+        <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-6">
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div><p className="text-neutral-500">Version</p><p className="text-neutral-200 font-medium">0.1.0</p></div>
+            <div><p className="text-neutral-500">Service</p><p className="text-neutral-200 font-medium">CodeBoard</p></div>
+            <div><p className="text-neutral-500">Database</p><p className="text-neutral-200 font-medium">PostgreSQL</p></div>
+            <div><p className="text-neutral-500">License</p><p className="text-neutral-200 font-medium">MIT</p></div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

apps/web/src/app/docs/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { DocViewer } from "@/components/doc-viewer";
 import type { GeneratedDocs } from "@codeboard/shared";
 import { notFound } from "next/navigation";
-import { Github, ArrowLeft } from "lucide-react";
+import { Github, ArrowLeft, History } from "lucide-react";
 import Link from "next/link";
 
 async function fetchDocs(id: string): Promise<GeneratedDocs | null> {
@@ -45,15 +45,25 @@ export default async function DocsPage({
               Back to Home
             </Link>
 
-            <a
+            <div className="flex items-center gap-4">
-              href={docs.repoUrl}
+              <Link
-              target="_blank"
+                href={`/history?repo=${encodeURIComponent(docs.repoUrl)}`}
-              rel="noopener noreferrer"
+                className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
-              className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
+              >
-            >
+                <History className="w-4 h-4" />
-              <Github className="w-4 h-4" />
+                Version History
-              View on GitHub
+              </Link>
-            </a>
+
+              <a
+                href={docs.repoUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
+              >
+                <Github className="w-4 h-4" />
+                View on GitHub
+              </a>
+            </div>
           </div>
         </div>
       </div>

apps/web/src/app/globals.css

@@ -1,7 +1,8 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 :root {
-  --background: #0a0a0f;
+  --background: #0a0a0a;
   --surface: rgba(255, 255, 255, 0.03);
   --surface-hover: rgba(255, 255, 255, 0.06);
   --border: rgba(255, 255, 255, 0.08);
@@ -14,19 +15,43 @@
   --accent-blue: #3b82f6;
   --accent-indigo: #6366f1;
   --accent-purple: #9333ea;
-  --accent-cyan: #06b6d4;
   
   --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #9333ea 100%);
   --gradient-subtle: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
   
   --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.3);
-  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
+
+  /* Shared Vectry design language aliases */
+  --surface-page: var(--background);
+  --surface-card: var(--surface);
+  --surface-card-hover: var(--surface-hover);
+  --border-default: var(--border);
+  --border-subtle: rgba(255, 255, 255, 0.04);
+  --radius-card: 1rem;
+  --radius-button: 0.5rem;
+  --radius-icon: 0.75rem;
 }
 
 * {
   box-sizing: border-box;
 }
 
+:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-blue);
+  border-radius: 0.25rem;
+}
+
+a:focus-visible,
+button:focus-visible,
+[role="button"]:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-blue);
+}
+
 html {
   scroll-behavior: smooth;
 }
@@ -207,6 +232,29 @@ body {
 .stagger-4 { animation-delay: 0.4s; }
 .stagger-5 { animation-delay: 0.5s; }
 
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.bg-blue-500\/60 {
+  background-color: rgba(59, 130, 246, 0.6);
+}
+
+.bg-purple-500\/60 {
+  background-color: rgba(168, 85, 247, 0.6);
+}
+
+.bg-green-500\/60 {
+  background-color: rgba(34, 197, 94, 0.6);
+}
+
+.bg-orange-500\/60 {
+  background-color: rgba(249, 115, 22, 0.6);
+}
+
 .scrollbar-thin {
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
@@ -363,3 +411,27 @@ body {
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--border), transparent);
 }
+
+[data-animate] {
+  opacity: 0;
+  transform: translateY(32px);
+  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+}
+
+[data-animate="visible"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-animate][data-animate-delay="1"] { transition-delay: 0.1s; }
+[data-animate][data-animate-delay="2"] { transition-delay: 0.2s; }
+[data-animate][data-animate-delay="3"] { transition-delay: 0.3s; }
+[data-animate][data-animate-delay="4"] { transition-delay: 0.4s; }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-animate] {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

apps/web/src/app/history/page.tsx

@@ -0,0 +1,818 @@
+"use client";
+
+import { Suspense, useEffect, useState, useCallback } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import type { GeneratedDocs } from "@codeboard/shared";
+import { MermaidDiagram } from "@/components/mermaid-diagram";
+import { useKeyboardNav } from "@/hooks/use-keyboard-nav";
+import { KeyboardShortcutsHelp } from "@/components/keyboard-shortcuts-help";
+import {
+  ArrowLeft,
+  Clock,
+  GitCommit,
+  History,
+  CheckSquare,
+  Square,
+  GitCompare,
+  X,
+  BookOpen,
+  Layers,
+  Folder,
+  FileCode,
+} from "lucide-react";
+
+interface Generation {
+  id: string;
+  repoUrl: string;
+  repoName: string;
+  commitHash: string;
+  createdAt: string;
+  duration: number | null;
+}
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function formatDuration(seconds: number | null): string {
+  if (!seconds) return "Unknown";
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (mins > 0) {
+    return `${mins}m ${secs}s`;
+  }
+  return `${secs}s`;
+}
+
+function TechStackDiff({
+  leftStack,
+  rightStack,
+}: {
+  leftStack: string[];
+  rightStack: string[];
+}) {
+  const leftSet = new Set(leftStack.map((s) => s.toLowerCase()));
+  const rightSet = new Set(rightStack.map((s) => s.toLowerCase()));
+
+  const added = rightStack.filter((s) => !leftSet.has(s.toLowerCase()));
+  const removed = leftStack.filter((s) => !rightSet.has(s.toLowerCase()));
+  const unchanged = leftStack.filter((s) => rightSet.has(s.toLowerCase()));
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {removed.map((tech) => (
+        <span
+          key={`removed-${tech}`}
+          className="px-3 py-1 text-sm bg-red-500/10 border border-red-500/30 rounded-full text-red-300 line-through"
+          title="Removed"
+        >
+          {tech}
+        </span>
+      ))}
+      {unchanged.map((tech) => (
+        <span
+          key={tech}
+          className="px-3 py-1 text-sm bg-white/5 border border-white/10 rounded-full text-zinc-400"
+        >
+          {tech}
+        </span>
+      ))}
+      {added.map((tech) => (
+        <span
+          key={`added-${tech}`}
+          className="px-3 py-1 text-sm bg-green-500/10 border border-green-500/30 rounded-full text-green-300"
+          title="Added"
+        >
+          {tech}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function ComparisonView({
+  left,
+  right,
+  leftGen,
+  rightGen,
+  onClose,
+}: {
+  left: GeneratedDocs;
+  right: GeneratedDocs;
+  leftGen: Generation;
+  rightGen: Generation;
+  onClose: () => void;
+}) {
+  const leftOverview = left.sections.overview;
+  const rightOverview = right.sections.overview;
+
+  const filesDiff = rightOverview.keyMetrics.files - leftOverview.keyMetrics.files;
+  const modulesDiff =
+    rightOverview.keyMetrics.modules - leftOverview.keyMetrics.modules;
+  const languagesDiff =
+    rightOverview.keyMetrics.languages.length -
+    leftOverview.keyMetrics.languages.length;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-[#0a0a0a] overflow-auto">
+      <div className="sticky top-0 z-10 border-b border-white/10 bg-black/50 backdrop-blur-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <GitCompare className="w-6 h-6 text-blue-400" />
+              <h2 className="text-xl font-bold text-white">Version Comparison</h2>
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-white/5 transition-colors"
+              aria-label="Close comparison view"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Left Panel - Older */}
+          <div className="space-y-6">
+            <div className="glass rounded-xl p-4 border-l-4 border-l-zinc-500">
+              <div className="flex items-center gap-3 mb-2">
+                <GitCommit className="w-4 h-4 text-zinc-400" />
+                <code className="text-sm text-zinc-300">
+                  {leftGen.commitHash.slice(0, 7)}
+                </code>
+                <span className="text-xs text-zinc-500">•</span>
+                <span className="text-sm text-zinc-400">
+                  {formatDate(leftGen.createdAt)}
+                </span>
+              </div>
+              <p className="text-xs text-zinc-500">Older version</p>
+            </div>
+
+            <div className="glass rounded-xl p-6">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <BookOpen className="w-5 h-5 text-blue-400" />
+                Overview
+              </h3>
+              <p className="text-zinc-300 text-sm leading-relaxed mb-4">
+                {leftOverview.description}
+              </p>
+
+              <h4 className="text-sm font-medium text-zinc-400 mb-3">
+                Tech Stack
+              </h4>
+              <div className="flex flex-wrap gap-2">
+                {leftOverview.techStack.map((tech) => (
+                  <span
+                    key={tech}
+                    className="px-3 py-1 text-sm bg-white/5 border border-white/10 rounded-full text-zinc-300"
+                  >
+                    {tech}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <div className="glass rounded-xl p-6">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <Layers className="w-5 h-5 text-blue-400" />
+                Architecture
+              </h3>
+              <MermaidDiagram chart={leftOverview.architectureDiagram} />
+            </div>
+
+            <div className="grid grid-cols-3 gap-3">
+              <div className="p-4 glass rounded-lg text-center">
+                <div className="text-2xl font-bold text-white">
+                  {leftOverview.keyMetrics.files}
+                </div>
+                <div className="text-sm text-zinc-500">Files</div>
+              </div>
+              <div className="p-4 glass rounded-lg text-center">
+                <div className="text-2xl font-bold text-white">
+                  {leftOverview.keyMetrics.modules}
+                </div>
+                <div className="text-sm text-zinc-500">Modules</div>
+              </div>
+              <div className="p-4 glass rounded-lg text-center">
+                <div className="text-2xl font-bold text-white">
+                  {leftOverview.keyMetrics.languages.length}
+                </div>
+                <div className="text-sm text-zinc-500">Languages</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Panel - Newer */}
+          <div className="space-y-6">
+            <div className="glass rounded-xl p-4 border-l-4 border-l-green-500">
+              <div className="flex items-center gap-3 mb-2">
+                <GitCommit className="w-4 h-4 text-zinc-400" />
+                <code className="text-sm text-zinc-300">
+                  {rightGen.commitHash.slice(0, 7)}
+                </code>
+                <span className="text-xs text-zinc-500">•</span>
+                <span className="text-sm text-zinc-400">
+                  {formatDate(rightGen.createdAt)}
+                </span>
+              </div>
+              <p className="text-xs text-green-400">Newer version</p>
+            </div>
+
+            <div className="glass rounded-xl p-6">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <BookOpen className="w-5 h-5 text-blue-400" />
+                Overview
+              </h3>
+              <p className="text-zinc-300 text-sm leading-relaxed mb-4">
+                {rightOverview.description}
+              </p>
+
+              <h4 className="text-sm font-medium text-zinc-400 mb-3">
+                Tech Stack Changes
+              </h4>
+              <TechStackDiff
+                leftStack={leftOverview.techStack}
+                rightStack={rightOverview.techStack}
+              />
+            </div>
+
+            <div className="glass rounded-xl p-6">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <Layers className="w-5 h-5 text-blue-400" />
+                Architecture
+              </h3>
+              <MermaidDiagram chart={rightOverview.architectureDiagram} />
+            </div>
+
+            <div className="grid grid-cols-3 gap-3">
+              <div className="p-4 glass rounded-lg text-center relative overflow-hidden">
+                <div
+                  className={`text-2xl font-bold ${
+                    filesDiff > 0
+                      ? "text-green-400"
+                      : filesDiff < 0
+                        ? "text-red-400"
+                        : "text-white"
+                  }`}
+                >
+                  {rightOverview.keyMetrics.files}
+                </div>
+                <div className="text-sm text-zinc-500">Files</div>
+                {filesDiff !== 0 && (
+                  <div
+                    className={`absolute top-1 right-2 text-xs ${
+                      filesDiff > 0 ? "text-green-400" : "text-red-400"
+                    }`}
+                  >
+                    {filesDiff > 0 ? "+" : ""}
+                    {filesDiff}
+                  </div>
+                )}
+              </div>
+              <div className="p-4 glass rounded-lg text-center relative overflow-hidden">
+                <div
+                  className={`text-2xl font-bold ${
+                    modulesDiff > 0
+                      ? "text-green-400"
+                      : modulesDiff < 0
+                        ? "text-red-400"
+                        : "text-white"
+                  }`}
+                >
+                  {rightOverview.keyMetrics.modules}
+                </div>
+                <div className="text-sm text-zinc-500">Modules</div>
+                {modulesDiff !== 0 && (
+                  <div
+                    className={`absolute top-1 right-2 text-xs ${
+                      modulesDiff > 0 ? "text-green-400" : "text-red-400"
+                    }`}
+                  >
+                    {modulesDiff > 0 ? "+" : ""}
+                    {modulesDiff}
+                  </div>
+                )}
+              </div>
+              <div className="p-4 glass rounded-lg text-center relative overflow-hidden">
+                <div
+                  className={`text-2xl font-bold ${
+                    languagesDiff > 0
+                      ? "text-green-400"
+                      : languagesDiff < 0
+                        ? "text-red-400"
+                        : "text-white"
+                  }`}
+                >
+                  {rightOverview.keyMetrics.languages.length}
+                </div>
+                <div className="text-sm text-zinc-500">Languages</div>
+                {languagesDiff !== 0 && (
+                  <div
+                    className={`absolute top-1 right-2 text-xs ${
+                      languagesDiff > 0 ? "text-green-400" : "text-red-400"
+                    }`}
+                  >
+                    {languagesDiff > 0 ? "+" : ""}
+                    {languagesDiff}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Module Comparison */}
+        <div className="mt-8">
+          <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
+            <Folder className="w-6 h-6 text-blue-400" />
+            Module Breakdown Comparison
+          </h3>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div className="glass rounded-xl p-6">
+              <h4 className="font-semibold text-white mb-4 text-zinc-400">
+                Older Version ({left.sections.modules.length} modules)
+              </h4>
+              <div className="space-y-2 max-h-96 overflow-auto">
+                {left.sections.modules.map((module) => (
+                  <div
+                    key={module.name}
+                    className="flex items-center gap-3 p-3 rounded-lg bg-white/5"
+                  >
+                    <FileCode className="w-4 h-4 text-zinc-500" />
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm text-zinc-300 truncate">
+                        {module.name}
+                      </div>
+                      <div className="text-xs text-zinc-500 truncate">
+                        {module.path}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="glass rounded-xl p-6">
+              <h4 className="font-semibold text-white mb-4 text-green-400">
+                Newer Version ({right.sections.modules.length} modules)
+              </h4>
+              <div className="space-y-2 max-h-96 overflow-auto">
+                {right.sections.modules.map((module) => {
+                  const existedInLeft = left.sections.modules.some(
+                    (m) => m.name === module.name
+                  );
+                  return (
+                    <div
+                      key={module.name}
+                      className={`flex items-center gap-3 p-3 rounded-lg ${
+                        existedInLeft ? "bg-white/5" : "bg-green-500/10 border border-green-500/20"
+                      }`}
+                    >
+                      <FileCode
+                        className={`w-4 h-4 ${
+                          existedInLeft ? "text-zinc-500" : "text-green-400"
+                        }`}
+                      />
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm text-zinc-300 truncate">
+                          {module.name}
+                          {!existedInLeft && (
+                            <span className="ml-2 text-xs text-green-400">
+                              (new)
+                            </span>
+                          )}
+                        </div>
+                        <div className="text-xs text-zinc-500 truncate">
+                          {module.path}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function HistoryContent() {
+  const searchParams = useSearchParams();
+  const repo = searchParams.get("repo");
+  const router = useRouter();
+
+  const [generations, setGenerations] = useState<Generation[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [comparing, setComparing] = useState(false);
+  const [leftDoc, setLeftDoc] = useState<GeneratedDocs | null>(null);
+  const [rightDoc, setRightDoc] = useState<GeneratedDocs | null>(null);
+  const [leftGen, setLeftGen] = useState<Generation | null>(null);
+  const [rightGen, setRightGen] = useState<Generation | null>(null);
+
+  const handleKeyboardSelect = useCallback(
+    (index: number) => {
+      if (index >= 0 && index < generations.length) {
+        router.push(`/docs/${generations[index].id}`);
+      }
+    },
+    [generations, router]
+  );
+
+  const { activeIndex, showHelp, setShowHelp } = useKeyboardNav({
+    itemCount: generations.length,
+    onSelect: handleKeyboardSelect,
+    enabled: !loading && !comparing && generations.length > 1,
+  });
+
+  useEffect(() => {
+    if (!repo) {
+      setLoading(false);
+      setError("No repository URL provided");
+      return;
+    }
+
+    fetch(`/api/history?repo=${encodeURIComponent(repo)}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch history");
+        return res.json();
+      })
+      .then((data: Generation[]) => {
+        setGenerations(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [repo]);
+
+  const toggleSelection = (id: string) => {
+    const newSelected = new Set(selectedIds);
+    if (newSelected.has(id)) {
+      newSelected.delete(id);
+    } else if (newSelected.size < 2) {
+      newSelected.add(id);
+    }
+    setSelectedIds(newSelected);
+  };
+
+  const handleCompare = async () => {
+    if (selectedIds.size !== 2) return;
+
+    const ids = Array.from(selectedIds);
+    const gen1 = generations.find((g) => g.id === ids[0])!;
+    const gen2 = generations.find((g) => g.id === ids[1])!;
+
+    // Sort by date - older first
+    const [olderGen, newerGen] =
+      new Date(gen1.createdAt) < new Date(gen2.createdAt)
+        ? [gen1, gen2]
+        : [gen2, gen1];
+
+    setComparing(true);
+
+    try {
+      const [olderDocRes, newerDocRes] = await Promise.all([
+        fetch(`/api/docs/${olderGen.id}`),
+        fetch(`/api/docs/${newerGen.id}`),
+      ]);
+
+      if (!olderDocRes.ok || !newerDocRes.ok) {
+        throw new Error("Failed to fetch documentation");
+      }
+
+      const [olderDoc, newerDoc] = await Promise.all([
+        olderDocRes.json(),
+        newerDocRes.json(),
+      ]);
+
+      setLeftDoc(olderDoc);
+      setRightDoc(newerDoc);
+      setLeftGen(olderGen);
+      setRightGen(newerGen);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to compare");
+      setComparing(false);
+    }
+  };
+
+  const closeComparison = () => {
+    setLeftDoc(null);
+    setRightDoc(null);
+    setLeftGen(null);
+    setRightGen(null);
+    setComparing(false);
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="flex items-center gap-3">
+          <div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
+          <span className="text-zinc-400">Loading history...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="glass rounded-xl p-8 text-center max-w-md">
+          <div className="text-red-400 mb-2">Error</div>
+          <p className="text-zinc-400">{error}</p>
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 mt-4 text-blue-400 hover:text-blue-300"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Home
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (!repo) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="glass rounded-xl p-8 text-center max-w-md">
+          <History className="w-12 h-12 text-zinc-500 mx-auto mb-4" />
+          <h2 className="text-xl font-bold text-white mb-2">
+            No Repository Specified
+          </h2>
+          <p className="text-zinc-400 mb-4">
+            Please provide a repository URL to view its history.
+          </p>
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 btn-primary"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Home
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (generations.length === 0) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="glass rounded-xl p-8 text-center max-w-md">
+          <History className="w-12 h-12 text-zinc-500 mx-auto mb-4" />
+          <h2 className="text-xl font-bold text-white mb-2">No History Found</h2>
+          <p className="text-zinc-400 mb-4">
+            No documentation has been generated for this repository yet.
+          </p>
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 btn-primary"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Home
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (generations.length === 1) {
+    return (
+      <div className="min-h-screen">
+        <div className="border-b border-white/10 bg-black/20">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <div className="flex items-center justify-between">
+              <Link
+                href="/"
+                className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
+              >
+                <ArrowLeft className="w-4 h-4" />
+                Back to Home
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <div className="text-center mb-12">
+            <History className="w-12 h-12 text-zinc-500 mx-auto mb-4" />
+            <h1 className="text-3xl font-bold text-white mb-2">
+              Version History
+            </h1>
+            <p className="text-zinc-400">
+              {generations[0].repoName}
+            </p>
+          </div>
+
+          <div className="glass rounded-xl p-8 text-center">
+            <div className="w-16 h-16 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mx-auto mb-4">
+              <GitCommit className="w-8 h-8 text-blue-400" />
+            </div>
+            <h2 className="text-xl font-bold text-white mb-2">
+              Only One Version Exists
+            </h2>
+            <p className="text-zinc-400 max-w-md mx-auto">
+              Generate docs again after code changes to compare versions and track
+              how your architecture evolves over time.
+            </p>
+
+            <div className="mt-8 p-4 rounded-lg bg-white/5 max-w-md mx-auto text-left">
+              <div className="flex items-center gap-3 mb-2">
+                <GitCommit className="w-4 h-4 text-zinc-400" />
+                <code className="text-sm text-zinc-300">
+                  {generations[0].commitHash.slice(0, 7)}
+                </code>
+              </div>
+              <div className="flex items-center gap-3 mb-2">
+                <Clock className="w-4 h-4 text-zinc-400" />
+                <span className="text-sm text-zinc-300">
+                  {formatDate(generations[0].createdAt)}
+                </span>
+              </div>
+              <div className="flex items-center gap-3">
+                <Clock className="w-4 h-4 text-zinc-400" />
+                <span className="text-sm text-zinc-300">
+                  Generated in {formatDuration(generations[0].duration)}
+                </span>
+              </div>
+            </div>
+
+            <Link
+              href={`/docs/${generations[0].id}`}
+              className="inline-flex items-center gap-2 btn-primary mt-8"
+            >
+              <BookOpen className="w-4 h-4" />
+              View Documentation
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen">
+      <div className="border-b border-white/10 bg-black/20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <Link
+              href="/"
+              className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Back to Home
+            </Link>
+            <span className="text-sm text-zinc-500">
+              {selectedIds.size} of 2 selected
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="text-center mb-12">
+          <History className="w-12 h-12 text-zinc-500 mx-auto mb-4" />
+          <h1 className="text-3xl font-bold text-white mb-2">Version History</h1>
+          <p className="text-zinc-400">{generations[0]?.repoName}</p>
+          <p className="text-sm text-zinc-500 mt-2">
+            Select any 2 versions to compare side-by-side
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          {generations.map((gen, index) => {
+            const isSelected = selectedIds.has(gen.id);
+            const canSelect = selectedIds.size < 2 || isSelected;
+            const isKeyboardActive = activeIndex === index;
+
+            return (
+              <div
+                key={gen.id}
+                data-keyboard-index={index}
+                className={`glass rounded-xl p-4 transition-all ${
+                  isSelected
+                    ? "border-blue-500/50 bg-blue-500/5"
+                    : isKeyboardActive
+                      ? "border-blue-500/30 bg-white/[0.04] ring-1 ring-blue-500/20"
+                      : "border-white/10"
+                } ${!canSelect ? "opacity-50" : ""}`}
+              >
+                <div className="flex items-center gap-4">
+                  <button
+                    onClick={() => canSelect && toggleSelection(gen.id)}
+                    className={`flex-shrink-0 p-2 rounded-lg transition-colors ${
+                      isSelected
+                        ? "text-blue-400 hover:bg-blue-500/10"
+                        : "text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+                    } ${!canSelect ? "cursor-not-allowed" : ""}`}
+                    disabled={!canSelect}
+                    aria-label={isSelected ? `Deselect version ${gen.commitHash.slice(0, 7)}` : `Select version ${gen.commitHash.slice(0, 7)} for comparison`}
+                  >
+                    {isSelected ? (
+                      <CheckSquare className="w-5 h-5" />
+                    ) : (
+                      <Square className="w-5 h-5" />
+                    )}
+                  </button>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-3 flex-wrap">
+                      <GitCommit className="w-4 h-4 text-zinc-500" />
+                      <code className="text-sm text-zinc-300">
+                        {gen.commitHash.slice(0, 7)}
+                      </code>
+                      <span className="text-zinc-600">•</span>
+                      <span className="text-sm text-zinc-400">
+                        {formatDate(gen.createdAt)}
+                      </span>
+                      <span className="text-zinc-600">•</span>
+                      <span className="text-sm text-zinc-500">
+                        {formatDuration(gen.duration)}
+                      </span>
+                    </div>
+                  </div>
+
+                  <Link
+                    href={`/docs/${gen.id}`}
+                    className="flex-shrink-0 px-3 py-1.5 text-sm text-zinc-400 hover:text-white bg-white/5 hover:bg-white/10 rounded-lg transition-colors"
+                  >
+                    View
+                  </Link>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {selectedIds.size === 2 && (
+          <div className="mt-8 flex justify-center animate-slide-up">
+            <button
+              onClick={handleCompare}
+              disabled={comparing}
+              className="inline-flex items-center gap-2 btn-primary"
+            >
+              {comparing ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  Loading...
+                </>
+              ) : (
+                <>
+                  <GitCompare className="w-4 h-4" />
+                  Compare Selected Versions
+                </>
+              )}
+            </button>
+          </div>
+        )}
+      </div>
+
+      <KeyboardShortcutsHelp open={showHelp} onClose={() => setShowHelp(false)} />
+
+      {leftDoc && rightDoc && leftGen && rightGen && (
+        <ComparisonView
+          left={leftDoc}
+          right={rightDoc}
+          leftGen={leftGen}
+          rightGen={rightGen}
+          onClose={closeComparison}
+        />
+      )}
+    </div>
+  );
+}
+
+export default function HistoryPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="flex items-center gap-3">
+            <div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
+            <span className="text-zinc-400">Loading...</span>
+          </div>
+        </div>
+      }
+    >
+      <HistoryContent />
+    </Suspense>
+  );
+}

apps/web/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { Navbar } from "@/components/navbar";
 import { Footer } from "@/components/footer";
+import { Providers } from "@/components/providers";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -17,16 +18,51 @@ const jetbrainsMono = JetBrains_Mono({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL("https://codeboard.vectry.tech"),
   title: "CodeBoard — Understand any codebase in 5 minutes",
   description:
     "Paste a GitHub URL and get interactive onboarding documentation with architecture diagrams, module breakdowns, and getting started guides. Built by Vectry AI consultancy.",
   keywords: ["code analysis", "documentation", "github", "codebase", "AI", "developer tools"],
   authors: [{ name: "Vectry" }],
+  creator: "Vectry",
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "any" },
+      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+    ],
+    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
+  },
   openGraph: {
     title: "CodeBoard — Understand any codebase in 5 minutes",
     description:
       "Paste a GitHub URL and get interactive onboarding documentation with architecture diagrams, module breakdowns, and getting started guides.",
     type: "website",
+    url: "https://codeboard.vectry.tech",
+    siteName: "CodeBoard",
+    locale: "en_US",
+    images: [
+      {
+        url: "/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "CodeBoard — Understand any codebase in 5 minutes",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "CodeBoard — Understand any codebase in 5 minutes",
+    description:
+      "Paste a GitHub URL and get interactive onboarding documentation with architecture diagrams, module breakdowns, and getting started guides.",
+    images: ["/og-image.png"],
+  },
+  alternates: {
+    canonical: "https://codeboard.vectry.tech",
+  },
+  robots: {
+    index: true,
+    follow: true,
   },
 };
 
@@ -38,20 +74,28 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark">
       <body
-        className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased bg-[#0a0a0f] text-white min-h-screen`}
+        className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased bg-[#0a0a0a] text-white min-h-screen`}
       >
-        <div className="relative min-h-screen flex flex-col">
+        <a
-          <div className="fixed inset-0 bg-gradient-radial pointer-events-none" />
+          href="#main-content"
-          <div className="fixed inset-0 bg-grid pointer-events-none opacity-50" />
+          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[200] focus:px-4 focus:py-2 focus:rounded-lg focus:bg-[var(--accent-blue)] focus:text-white focus:text-sm focus:font-medium focus:outline-none focus:ring-2 focus:ring-white/50"
-          
+        >
-          <Navbar />
+          Skip to content
-          
+        </a>
-          <main className="flex-1 relative">
+        <Providers>
-            {children}
+          <div className="relative min-h-screen flex flex-col">
-          </main>
+            <div className="fixed inset-0 bg-gradient-radial pointer-events-none" aria-hidden="true" />
-          
+            <div className="fixed inset-0 bg-grid pointer-events-none opacity-50" aria-hidden="true" />
-          <Footer />
+            
-        </div>
+            <Navbar />
+            
+            <main id="main-content" className="flex-1 relative">
+              {children}
+            </main>
+            
+            <Footer />
+          </div>
+        </Providers>
       </body>
     </html>
   );

apps/web/src/app/page.tsx

@@ -1,15 +1,26 @@
+import Link from "next/link";
 import { RepoInput } from "@/components/repo-input";
-import { 
+import { ExampleRepoCard } from "@/components/example-repo-card";
-  Link2, 
+import { ScrollSection } from "@/components/scroll-section";
-  Code2, 
+import {
-  Sparkles, 
+  Link2,
-  FileText, 
+  Code2,
-  GitBranch, 
+  Sparkles,
-  Boxes, 
+  FileText,
-  Search, 
+  GitBranch,
+  Boxes,
+  Search,
   BookOpen,
   ArrowRight,
-  Github
+  Github,
+  Layers,
+  Workflow,
+  Terminal,
+  FileCode,
+  CheckCircle2,
+  Check,
+  Crown,
+  Zap,
 } from "lucide-react";
 
 export default function HomePage() {
@@ -67,164 +78,469 @@ export default function HomePage() {
     },
   ];
 
+  const pricingTiers = [
+    {
+      name: "Free",
+      price: 0,
+      period: "forever",
+      description: "Get started with CodeBoard",
+      generations: "15 / day",
+      features: ["15 generations per day", "Public repository support", "Interactive documentation", "Architecture diagrams"],
+      cta: "Get Started",
+      href: "/register",
+      highlighted: false,
+    },
+    {
+      name: "Starter",
+      price: 5,
+      period: "month",
+      description: "For regular use",
+      generations: "1,000 / month",
+      features: ["1,000 generations per month", "Generation history", "API key access", "Priority support"],
+      cta: "Start Free Trial",
+      href: "/register",
+      highlighted: true,
+    },
+    {
+      name: "Pro",
+      price: 20,
+      period: "month",
+      description: "For teams & power users",
+      generations: "100,000 / month",
+      features: ["100,000 generations per month", "Full generation history", "Multiple API keys", "Dedicated support", "Custom integrations"],
+      cta: "Start Free Trial",
+      href: "/register",
+      highlighted: false,
+    },
+  ];
+
+  const exampleRepos = [
+    {
+      name: "sindresorhus/p-limit",
+      description: "Elegant promise concurrency limiter with a simple API and robust error handling.",
+      language: "TypeScript",
+      languageColor: "#3178c6",
+      docId: "gen_1770661300051_y9qnjpu",
+    },
+    {
+      name: "expressjs/express",
+      description: "Fast, unopinionated web framework for Node.js with minimalistic design.",
+      language: "JavaScript",
+      languageColor: "#f1e05a",
+      docId: "gen_1770661300322_glzwj8k",
+    },
+    {
+      name: "pallets/flask",
+      description: "Lightweight Python web framework with simplicity and flexibility at its core.",
+      language: "Python",
+      languageColor: "#3572A5",
+      docId: "gen_1770661300222_ushzuqi",
+    },
+    {
+      name: "colinhacks/zod",
+      description: "TypeScript-first schema validation with static type inference.",
+      language: "TypeScript",
+      languageColor: "#3178c6",
+      docId: "gen_1770661300115_701f52c",
+    },
+    {
+      name: "tiangolo/fastapi",
+      description: "Modern, high-performance Python API framework with automatic OpenAPI docs.",
+      language: "Python",
+      languageColor: "#3572A5",
+      docId: "gen_1770661300275_p7o2e2m",
+    },
+    {
+      name: "redis/node-redis",
+      description: "High-performance Redis client for Node.js with comprehensive feature support.",
+      language: "TypeScript",
+      languageColor: "#3178c6",
+      docId: "gen_1770661300165_a8wzri6",
+    },
+  ];
+
   return (
     <div className="relative">
-      {/* Hero Section */}
       <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center">
-            {/* Badge */}
             <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8 animate-fade-in opacity-0">
               <Sparkles className="w-4 h-4 text-blue-400" />
               <span className="text-sm text-zinc-300">Powered by AI</span>
             </div>
 
-            {/* Main Headline */}
             <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tight mb-6 animate-slide-up opacity-0">
               <span className="gradient-text">Understand any codebase</span>
               <br />
-              <span className="text-white">in 5 minutes</span>
+              <span className="text-white">in minutes</span>
             </h1>
 
-            {/* Subtitle */}
             <p className="text-lg sm:text-xl text-zinc-400 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 stagger-1">
               Paste a GitHub URL. Get interactive onboarding documentation with
               architecture diagrams, module breakdowns, and getting started guides.
             </p>
 
-            {/* Repo Input */}
             <div className="max-w-xl mx-auto mb-16 animate-slide-up opacity-0 stagger-2">
               <RepoInput />
             </div>
 
-            {/* Stats */}
+            <div className="relative max-w-4xl mx-auto mb-20 animate-slide-up opacity-0 stagger-3">
-            <div className="flex flex-wrap justify-center gap-8 sm:gap-12 animate-fade-in opacity-0 stagger-3">
+              <div className="relative rounded-xl overflow-hidden border border-white/10 shadow-2xl shadow-blue-500/10">
+                <div className="flex items-center gap-2 px-4 py-3 bg-zinc-900/80 border-b border-white/10">
+                  <div className="flex items-center gap-1.5">
+                    <div className="w-3 h-3 rounded-full bg-red-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-green-500/80" />
+                  </div>
+                  <div className="flex-1 text-center">
+                    <span className="text-xs text-zinc-500 font-mono">codeboard-docs.html</span>
+                  </div>
+                  <div className="w-16" />
+                </div>
+
+                <div className="bg-[#0d0d12] p-6">
+                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <div className="lg:col-span-2 space-y-4">
+                      <div className="flex items-center gap-3 mb-4">
+                        <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-blue-500/30">
+                          <Layers className="w-5 h-5 text-blue-400" />
+                        </div>
+                        <div>
+                          <h3 className="text-white font-semibold">Architecture Overview</h3>
+                          <p className="text-xs text-zinc-500">High-level system design</p>
+                        </div>
+                      </div>
+
+                      <div className="rounded-lg border border-white/10 bg-black/40 p-4 font-mono text-xs">
+                        <div className="flex items-center gap-2 text-zinc-400 mb-3">
+                          <Workflow className="w-4 h-4" />
+                          <span>Dependency Graph</span>
+                        </div>
+                        <div className="space-y-2">
+                          <div className="flex items-center gap-2">
+                            <div className="w-3 h-3 rounded bg-blue-500/30 border border-blue-500/50" />
+                            <span className="text-blue-300">src/index.ts</span>
+                            <span className="text-zinc-600">→</span>
+                            <div className="w-3 h-3 rounded bg-purple-500/30 border border-purple-500/50" />
+                            <span className="text-purple-300">lib/core</span>
+                          </div>
+                          <div className="flex items-center gap-2 pl-6">
+                            <span className="text-zinc-600">↳</span>
+                            <div className="w-3 h-3 rounded bg-green-500/30 border border-green-500/50" />
+                            <span className="text-green-300">utils/parser</span>
+                          </div>
+                          <div className="flex items-center gap-2 pl-6">
+                            <span className="text-zinc-600">↳</span>
+                            <div className="w-3 h-3 rounded bg-orange-500/30 border border-orange-500/50" />
+                            <span className="text-orange-300">api/routes</span>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="rounded-lg border border-white/10 bg-black/40 p-4">
+                        <div className="flex items-center gap-2 text-zinc-400 mb-3 text-xs font-mono">
+                          <Terminal className="w-4 h-4" />
+                          <span>Key Metrics</span>
+                        </div>
+                        <div className="grid grid-cols-3 gap-4">
+                          <div className="text-center p-3 rounded-lg bg-white/5">
+                            <div className="text-xl font-bold text-white">24</div>
+                            <div className="text-xs text-zinc-500">Modules</div>
+                          </div>
+                          <div className="text-center p-3 rounded-lg bg-white/5">
+                            <div className="text-xl font-bold text-white">156</div>
+                            <div className="text-xs text-zinc-500">Files</div>
+                          </div>
+                          <div className="text-center p-3 rounded-lg bg-white/5">
+                            <div className="text-xl font-bold text-white">8.2k</div>
+                            <div className="text-xs text-zinc-500">Lines</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="space-y-4">
+                      <div className="flex items-center gap-2 text-zinc-400 mb-2">
+                        <FileCode className="w-4 h-4" />
+                        <span className="text-sm font-medium">Module Breakdown</span>
+                      </div>
+
+                      <div className="space-y-3">
+                        {[
+                          { name: "Core Engine", files: 12, color: "blue" },
+                          { name: "API Layer", files: 8, color: "purple" },
+                          { name: "Utilities", files: 15, color: "green" },
+                          { name: "Tests", files: 23, color: "orange" },
+                        ].map((mod) => (
+                          <div
+                            key={mod.name}
+                            className="p-3 rounded-lg bg-white/5 border border-white/5 hover:border-white/10 transition-colors"
+                          >
+                            <div className="flex items-center justify-between mb-2">
+                              <span className="text-sm text-zinc-300">{mod.name}</span>
+                              <span className="text-xs text-zinc-500">{mod.files} files</span>
+                            </div>
+                            <div className="h-1.5 rounded-full bg-white/10 overflow-hidden">
+                              <div
+                                className={`h-full rounded-full bg-${mod.color}-500/60`}
+                                style={{ width: `${Math.random() * 40 + 60}%` }}
+                              />
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+
+                      <div className="pt-4 border-t border-white/10">
+                        <div className="flex items-center gap-2 text-green-400 text-sm">
+                          <CheckCircle2 className="w-4 h-4" />
+                          <span>Docs generated in 2m 34s</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="absolute -inset-1 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-indigo-500/20 rounded-xl blur-2xl -z-10 opacity-50" />
+            </div>
+
+            <div className="flex flex-wrap justify-center gap-8 sm:gap-12 animate-fade-in opacity-0 stagger-4">
               <div className="text-center">
-                <div className="text-2xl sm:text-3xl font-bold text-white">5 min</div>
+                <div className="text-2xl sm:text-3xl font-bold text-white">~3 min</div>
                 <div className="text-sm text-zinc-500">Average generation time</div>
               </div>
               <div className="hidden sm:block w-px bg-zinc-800" />
               <div className="text-center">
-                <div className="text-2xl sm:text-3xl font-bold text-white">100%</div>
+                <div className="text-2xl sm:text-3xl font-bold text-white">Free</div>
-                <div className="text-sm text-zinc-500">Free for public repos</div>
+                <div className="text-sm text-zinc-500">tier to start</div>
               </div>
               <div className="hidden sm:block w-px bg-zinc-800" />
               <div className="text-center">
-                <div className="text-2xl sm:text-3xl font-bold text-white">AI</div>
+                <div className="text-2xl sm:text-3xl font-bold text-white">10+</div>
-                <div className="text-sm text-zinc-500">Powered insights</div>
+                <div className="text-sm text-zinc-500">Languages supported</div>
               </div>
             </div>
           </div>
         </div>
 
-        {/* Background Elements */}
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />
       </section>
 
-      {/* How It Works Section */}
       <section id="how-it-works" className="py-20 lg:py-32">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
+          <ScrollSection>
-            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+            <div className="text-center mb-16">
-              How It Works
+              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
-            </h2>
+                How It Works
-            <p className="text-zinc-400 max-w-xl mx-auto">
+              </h2>
-              Four simple steps to comprehensive codebase documentation
+              <p className="text-zinc-400 max-w-xl mx-auto">
-            </p>
+                Four simple steps to comprehensive codebase documentation
-          </div>
+              </p>
+            </div>
+          </ScrollSection>
 
           <div className="relative">
-            {/* Connection Line - Desktop */}
             <div className="hidden lg:block absolute top-24 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent" />
 
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
-              {steps.map((step, index) => (
+              {steps.map((step, i) => (
-                <div
+                <ScrollSection key={step.number} delay={i + 1}>
-                  key={step.number}
+                  <div className="relative group">
-                  className="relative group"
+                    <div className="text-center">
-                >
+                      <div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
-                  <div className="text-center">
+                        {step.number}
-                    {/* Step Number */}
+                      </div>
-                    <div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
+
-                      {step.number}
+                      <div className="relative inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6 group-hover:border-blue-500/30 transition-colors">
+                        <step.icon className="w-7 h-7 text-blue-400" />
+
+                        <div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
+                      </div>
+
+                      <h3 className="text-lg font-semibold text-white mb-2">
+                        {step.title}
+                      </h3>
+
+                      <p className="text-sm text-zinc-400 leading-relaxed">
+                        {step.description}
+                      </p>
                     </div>
-
-                    {/* Icon */}
-                    <div className="relative inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6 group-hover:border-blue-500/30 transition-colors">
-                      <step.icon className="w-7 h-7 text-blue-400" />
-                      
-                      {/* Glow effect */}
-                      <div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
-                    </div>
-
-                    {/* Title */}
-                    <h3 className="text-lg font-semibold text-white mb-2">
-                      {step.title}
-                    </h3>
-
-                    {/* Description */}
-                    <p className="text-sm text-zinc-400 leading-relaxed">
-                      {step.description}
-                    </p>
                   </div>
-                </div>
+                </ScrollSection>
               ))}
             </div>
           </div>
         </div>
       </section>
 
-      {/* Features Section */}
+      <section className="py-20 lg:py-32">
-      <section id="features" className="py-20 lg:py-32">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
+          <ScrollSection>
-            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+            <div className="text-center mb-16">
-              Everything You Need
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
-            </h2>
+                <Github className="w-4 h-4 text-blue-400" />
-            <p className="text-zinc-400 max-w-xl mx-auto">
+                <span className="text-sm text-zinc-300">Try It Out</span>
-              Comprehensive documentation generated automatically from your codebase
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {features.map((feature, index) => (
-              <div
-                key={feature.title}
-                className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1"
-              >
-                {/* Gradient border on hover */}
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
-                
-                <div className="flex items-start gap-5">
-                  <div className="flex-shrink-0">
-                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-white/10 group-hover:border-blue-500/30 transition-colors">
-                      <feature.icon className="w-6 h-6 text-blue-400" />
-                    </div>
-                  </div>
-                  
-                  <div className="flex-1">
-                    <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors">
-                      {feature.title}
-                    </h3>
-                    <p className="text-zinc-400 leading-relaxed">
-                      {feature.description}
-                    </p>
-                  </div>
-                </div>
               </div>
+              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+                Featured Examples
+              </h2>
+              <p className="text-zinc-400 max-w-xl mx-auto">
+                Pre-generated docs ready to explore — or paste any repo URL above
+              </p>
+            </div>
+          </ScrollSection>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {exampleRepos.map((repo, i) => (
+              <ScrollSection key={repo.name} delay={(i % 3) + 1}>
+                <ExampleRepoCard repo={repo} />
+              </ScrollSection>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section id="features" className="py-20 lg:py-32">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <ScrollSection>
+            <div className="text-center mb-16">
+              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+                Everything You Need
+              </h2>
+              <p className="text-zinc-400 max-w-xl mx-auto">
+                Comprehensive documentation generated automatically from your codebase
+              </p>
+            </div>
+          </ScrollSection>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {features.map((feature, i) => (
+              <ScrollSection key={feature.title} delay={(i % 2) + 1}>
+                <div className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1">
+                  <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
+
+                  <div className="flex items-start gap-5">
+                    <div className="flex-shrink-0">
+                      <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-white/10 group-hover:border-blue-500/30 transition-colors">
+                        <feature.icon className="w-6 h-6 text-blue-400" />
+                      </div>
+                    </div>
+
+                    <div className="flex-1">
+                      <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors">
+                        {feature.title}
+                      </h3>
+                      <p className="text-zinc-400 leading-relaxed">
+                        {feature.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </ScrollSection>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section id="pricing" className="py-20 lg:py-32">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <ScrollSection>
+            <div className="text-center mb-16">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
+                <Zap className="w-4 h-4 text-blue-400" />
+                <span className="text-sm text-zinc-300">Pricing</span>
+              </div>
+              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+                Simple, Transparent <span className="gradient-text">Pricing</span>
+              </h2>
+              <p className="text-zinc-400 max-w-xl mx-auto">
+                Start free, scale when you need to
+              </p>
+            </div>
+          </ScrollSection>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
+            {pricingTiers.map((tier, i) => (
+              <ScrollSection key={tier.name} delay={i + 1}>
+                <div
+                  className={`relative group h-full rounded-2xl p-8 transition-all duration-300 hover:-translate-y-1 ${
+                    tier.highlighted
+                      ? "glass-strong border-blue-500/30 shadow-lg shadow-blue-500/10"
+                      : "glass hover:bg-white/[0.05]"
+                  }`}
+                >
+                  {tier.highlighted && (
+                    <>
+                      <div className="absolute -inset-px rounded-2xl bg-gradient-to-b from-blue-500/20 via-transparent to-blue-500/10 -z-10" />
+                      <div className="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30 text-xs font-medium text-blue-300">
+                        <Crown className="w-3 h-3" />
+                        Most Popular
+                      </div>
+                    </>
+                  )}
+
+                  <div className="mb-6">
+                    <h3 className="text-lg font-semibold text-white mb-1">{tier.name}</h3>
+                    <p className="text-sm text-zinc-500">{tier.description}</p>
+                  </div>
+
+                  <div className="mb-6">
+                    <div className="flex items-baseline gap-1">
+                      {tier.price === 0 ? (
+                        <span className="text-4xl font-bold text-white">Free</span>
+                      ) : (
+                        <>
+                          <span className="text-4xl font-bold text-white">${tier.price}</span>
+                          <span className="text-zinc-500">/ {tier.period}</span>
+                        </>
+                      )}
+                    </div>
+                    <div className="mt-2 text-sm text-zinc-400">
+                      <span className="text-blue-400 font-medium">{tier.generations}</span> generations
+                    </div>
+                  </div>
+
+                  <div className="mb-8 space-y-3">
+                    {tier.features.map((feature) => (
+                      <div key={feature} className="flex items-start gap-3">
+                        <div className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${
+                          tier.highlighted
+                            ? "bg-blue-500/20 text-blue-400"
+                            : "bg-white/10 text-zinc-400"
+                        }`}>
+                          <Check className="w-3 h-3" />
+                        </div>
+                        <span className="text-sm text-zinc-300">{feature}</span>
+                      </div>
+                    ))}
+                  </div>
+
+                  <div className="mt-auto">
+                    <Link
+                      href={tier.href}
+                      className={`block w-full text-center py-3 px-6 rounded-xl text-sm font-medium transition-all duration-200 ${
+                        tier.highlighted
+                          ? "btn-primary"
+                          : "glass border border-white/10 text-white hover:bg-white/10 hover:border-white/20"
+                      }`}
+                    >
+                      {tier.cta}
+                    </Link>
+                  </div>
+                </div>
+              </ScrollSection>
             ))}
           </div>
         </div>
       </section>
 
-      {/* Built by Vectry Section */}
       <section className="py-20 lg:py-32">
         <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <ScrollSection>
           <div className="relative rounded-3xl glass-strong p-8 sm:p-12 lg:p-16 overflow-hidden">
-            {/* Background decoration */}
             <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
             <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-indigo-500/10 to-cyan-500/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />
-            
+
             <div className="relative text-center">
               <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
                 <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
@@ -245,7 +561,7 @@ export default function HomePage() {
               </p>
 
               <a
-                href="https://company.repi.fun"
+                href="https://vectry.tech"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="inline-flex items-center gap-2 btn-primary animate-pulse-glow"
@@ -257,7 +573,7 @@ export default function HomePage() {
               <div className="mt-12 pt-8 border-t border-white/10">
                 <div className="flex flex-wrap items-center justify-center gap-6 text-sm text-zinc-500">
                   <a
-                    href="https://github.com"
+                    href="https://gitea.repi.fun/repi/codeboard"
                     target="_blank"
                     rel="noopener noreferrer"
                     className="flex items-center gap-2 hover:text-white transition-colors"
@@ -268,11 +584,12 @@ export default function HomePage() {
                   <span className="hidden sm:inline">•</span>
                   <span>Free for public repositories</span>
                   <span className="hidden sm:inline">•</span>
-                  <span>No signup required</span>
+                  <span>Free tier available</span>
                 </div>
               </div>
             </div>
           </div>
+          </ScrollSection>
         </div>
       </section>
     </div>

apps/web/src/app/robots.ts

@@ -0,0 +1,20 @@
+import { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      { userAgent: "GPTBot", allow: "/" },
+      { userAgent: "ClaudeBot", allow: "/" },
+      { userAgent: "PerplexityBot", allow: "/" },
+      { userAgent: "CCBot", disallow: "/" },
+      { userAgent: "Google-Extended", disallow: "/" },
+      { userAgent: "Bytespider", disallow: "/" },
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: ["/api/"],
+      },
+    ],
+    sitemap: "https://codeboard.vectry.tech/sitemap.xml",
+  };
+}

apps/web/src/app/sitemap.ts

@@ -0,0 +1,8 @@
+import { MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = "https://codeboard.vectry.tech";
+  return [
+    { url: baseUrl, lastModified: new Date(), changeFrequency: "weekly", priority: 1.0 },
+  ];
+}

apps/web/src/auth.config.ts

@@ -0,0 +1,9 @@
+import type { NextAuthConfig } from "next-auth";
+
+export default {
+  providers: [],
+  session: { strategy: "jwt", maxAge: 7 * 24 * 60 * 60 },
+  pages: {
+    signIn: "/login",
+  },
+} satisfies NextAuthConfig;

apps/web/src/auth.ts

@@ -0,0 +1,91 @@
+import NextAuth from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+import { compare } from "bcryptjs";
+import { z } from "zod";
+import { prisma } from "@/lib/prisma";
+import { checkRateLimit, AUTH_RATE_LIMITS } from "@/lib/rate-limit";
+import authConfig from "./auth.config";
+
+declare module "next-auth" {
+  interface Session {
+    user: {
+      id: string;
+      email: string;
+      name?: string | null;
+      image?: string | null;
+      isEmailVerified: boolean;
+    };
+  }
+}
+
+declare module "@auth/core/jwt" {
+  interface JWT {
+    id: string;
+    isEmailVerified: boolean;
+  }
+}
+
+const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  ...authConfig,
+  providers: [
+    Credentials({
+      credentials: {
+        email: { label: "Email", type: "email" },
+        password: { label: "Password", type: "password" },
+      },
+      async authorize(credentials, request) {
+        const parsed = loginSchema.safeParse(credentials);
+        if (!parsed.success) return null;
+
+        const { email, password } = parsed.data;
+        const ip = (request instanceof Request
+          ? request.headers.get("x-forwarded-for")?.split(",")[0]?.trim()
+          : undefined) ?? "unknown";
+
+        const rl = await checkRateLimit(`login:${ip}`, AUTH_RATE_LIMITS.login);
+        if (!rl.allowed) return null;
+
+        const user = await prisma.user.findUnique({
+          where: { email: email.toLowerCase() },
+        });
+        if (!user) return null;
+
+        const isValid = await compare(password, user.passwordHash);
+        if (!isValid) return null;
+
+        return {
+          id: user.id,
+          email: user.email,
+          name: user.name,
+        };
+      },
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, user, trigger }) {
+      if (user) {
+        token.id = user.id as string;
+      }
+      if (trigger === "update" || user) {
+        const dbUser = await prisma.user.findUnique({
+          where: { id: token.id },
+          select: { emailVerified: true },
+        });
+        if (dbUser) {
+          token.isEmailVerified = dbUser.emailVerified;
+        }
+      }
+      return token;
+    },
+    session({ session, token }) {
+      session.user.id = token.id;
+      session.user.isEmailVerified = token.isEmailVerified;
+      return session;
+    },
+  },
+});

apps/web/src/components/code-block.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { Check, Copy } from "lucide-react";
+
+interface CodeBlockProps {
+  children: ReactNode;
+  className?: string;
+  inline?: boolean;
+}
+
+export function CodeBlock({ children, className, inline }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  if (inline) {
+    return (
+      <code className="px-1.5 py-0.5 rounded bg-white/10 text-blue-300 text-[0.85em] font-mono border border-white/5">
+        {children}
+      </code>
+    );
+  }
+
+  const codeString = String(children).replace(/\n$/, "");
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(codeString);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative group my-4">
+      <button
+        onClick={handleCopy}
+        className="absolute top-2 right-2 p-1.5 rounded-md bg-white/5 border border-white/10 text-zinc-500 hover:text-white hover:bg-white/10 transition-all opacity-0 group-hover:opacity-100 z-10"
+        aria-label="Copy code"
+      >
+        {copied ? (
+          <Check className="w-3.5 h-3.5 text-green-400" />
+        ) : (
+          <Copy className="w-3.5 h-3.5" />
+        )}
+      </button>
+      <pre className="overflow-x-auto rounded-lg bg-black/50 border border-white/10 p-4 text-sm leading-relaxed font-mono scrollbar-thin">
+        <code className={`text-zinc-300 ${className || ""}`}>{codeString}</code>
+      </pre>
+    </div>
+  );
+}

apps/web/src/components/command-palette.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Command } from "cmdk";
+import {
+  Home,
+  Sparkles,
+  History,
+  Plus,
+  Search,
+  FileText,
+  Command as CommandIcon,
+} from "lucide-react";
+
+interface RecentDiagram {
+  id: string;
+  repoName: string;
+}
+
+export function CommandPalette() {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [recentDiagrams, setRecentDiagrams] = useState<RecentDiagram[]>([]);
+  const router = useRouter();
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      fetch("/api/history")
+        .then((res) => {
+          if (!res.ok) return [];
+          return res.json();
+        })
+        .then((data) => {
+          if (Array.isArray(data)) {
+            setRecentDiagrams(
+              data.slice(0, 5).map((item: { id: string; repoName: string }) => ({
+                id: item.id,
+                repoName: item.repoName,
+              }))
+            );
+          }
+        })
+        .catch(() => {});
+    }
+  }, [open]);
+
+  const runCommand = useCallback(
+    (command: () => void) => {
+      setOpen(false);
+      setSearch("");
+      command();
+    },
+    []
+  );
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="hidden md:flex items-center gap-2 px-3 py-1.5 text-sm text-zinc-500 hover:text-zinc-300 rounded-lg border border-white/10 bg-white/[0.02] hover:bg-white/[0.05] transition-colors"
+        aria-label="Open command palette"
+      >
+        <Search className="w-3.5 h-3.5" />
+        <span>Search...</span>
+        <kbd className="ml-2 pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-white/10 bg-white/[0.05] px-1.5 font-mono text-[10px] font-medium text-zinc-400">
+          <span className="text-xs">
+            {typeof navigator !== "undefined" &&
+            navigator.userAgent.includes("Mac")
+              ? "\u2318"
+              : "Ctrl"}
+          </span>
+          K
+        </kbd>
+      </button>
+
+      {open && (
+        <div className="fixed inset-0 z-[100]">
+          <div
+            className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+            onClick={() => setOpen(false)}
+            aria-hidden="true"
+          />
+          <div className="fixed inset-0 flex items-start justify-center pt-[20vh] px-4">
+            <Command
+              label="Command palette"
+              loop
+              className="w-full max-w-lg rounded-xl border border-white/10 bg-[#111113] shadow-2xl shadow-black/50 overflow-hidden animate-scale-in"
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === "Escape") {
+                  setOpen(false);
+                }
+              }}
+            >
+              <div className="flex items-center gap-3 px-4 border-b border-white/[0.06]">
+                <Search className="w-4 h-4 text-zinc-500 flex-shrink-0" />
+                <Command.Input
+                  value={search}
+                  onValueChange={setSearch}
+                  placeholder="Type a command or search..."
+                  className="flex-1 h-12 bg-transparent text-sm text-white placeholder-zinc-500 outline-none"
+                />
+                <kbd className="flex-shrink-0 inline-flex h-5 items-center rounded border border-white/10 bg-white/[0.05] px-1.5 font-mono text-[10px] text-zinc-500">
+                  ESC
+                </kbd>
+              </div>
+
+              <Command.List className="max-h-80 overflow-y-auto scrollbar-thin p-2">
+                <Command.Empty className="py-8 text-center text-sm text-zinc-500">
+                  No results found.
+                </Command.Empty>
+
+                <Command.Group
+                  heading="Navigation"
+                  className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500"
+                >
+                  <Command.Item
+                    value="home"
+                    onSelect={() => runCommand(() => router.push("/"))}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                  >
+                    <Home className="w-4 h-4 text-zinc-500" />
+                    Home
+                  </Command.Item>
+                  <Command.Item
+                    value="generate"
+                    onSelect={() => runCommand(() => router.push("/generate"))}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                  >
+                    <Sparkles className="w-4 h-4 text-zinc-500" />
+                    Generate
+                  </Command.Item>
+                  <Command.Item
+                    value="history"
+                    onSelect={() => runCommand(() => router.push("/history"))}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                  >
+                    <History className="w-4 h-4 text-zinc-500" />
+                    History
+                  </Command.Item>
+                </Command.Group>
+
+                <Command.Separator className="my-2 h-px bg-white/[0.06]" />
+
+                <Command.Group
+                  heading="Actions"
+                  className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500"
+                >
+                  <Command.Item
+                    value="new diagram"
+                    onSelect={() => runCommand(() => router.push("/"))}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                  >
+                    <Plus className="w-4 h-4 text-zinc-500" />
+                    New Diagram
+                  </Command.Item>
+                </Command.Group>
+
+                {recentDiagrams.length > 0 && (
+                  <>
+                    <Command.Separator className="my-2 h-px bg-white/[0.06]" />
+                    <Command.Group
+                      heading="Recent Diagrams"
+                      className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500"
+                    >
+                      {recentDiagrams.map((diagram) => (
+                        <Command.Item
+                          key={diagram.id}
+                          value={diagram.repoName}
+                          onSelect={() =>
+                            runCommand(() => router.push(`/docs/${diagram.id}`))
+                          }
+                          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-zinc-300 cursor-pointer data-[selected=true]:bg-white/[0.06] data-[selected=true]:text-white transition-colors"
+                        >
+                          <FileText className="w-4 h-4 text-zinc-500" />
+                          {diagram.repoName}
+                        </Command.Item>
+                      ))}
+                    </Command.Group>
+                  </>
+                )}
+              </Command.List>
+
+              <div className="flex items-center justify-between px-4 py-2.5 border-t border-white/[0.06]">
+                <div className="flex items-center gap-3 text-xs text-zinc-500">
+                  <span className="flex items-center gap-1">
+                    <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px]">
+                      &uarr;
+                    </kbd>
+                    <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px]">
+                      &darr;
+                    </kbd>
+                    navigate
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px]">
+                      &crarr;
+                    </kbd>
+                    select
+                  </span>
+                </div>
+                <div className="flex items-center gap-1 text-xs text-zinc-600">
+                  <CommandIcon className="w-3 h-3" />
+                  <span>CodeBoard</span>
+                </div>
+              </div>
+            </Command>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

apps/web/src/components/doc-viewer.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useState, type ComponentPropsWithoutRef } from "react";
 import type { GeneratedDocs, DocsModule } from "@codeboard/shared";
 import { MermaidDiagram } from "./mermaid-diagram";
+import { CodeBlock } from "./code-block";
 import ReactMarkdown from "react-markdown";
 import {
   BookOpen,
@@ -21,6 +22,31 @@ interface DocViewerProps {
   docs: GeneratedDocs;
 }
 
+const markdownComponents = {
+  pre({ children, ...props }: ComponentPropsWithoutRef<"pre">) {
+    return <>{children}</>;
+  },
+  code({ children, className, ...props }: ComponentPropsWithoutRef<"code"> & { inline?: boolean }) {
+    const isBlock =
+      className?.startsWith("language-") ||
+      (typeof children === "string" && children.includes("\n"));
+    if (isBlock) {
+      return (
+        <CodeBlock className={className}>{children}</CodeBlock>
+      );
+    }
+    return <CodeBlock inline>{children}</CodeBlock>;
+  },
+};
+
+function Md({ children }: { children: string }) {
+  return (
+    <div className="prose prose-invert prose-sm max-w-none prose-p:text-zinc-300 prose-p:leading-relaxed prose-headings:text-white prose-strong:text-white prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline prose-li:text-zinc-300 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-transparent prose-pre:p-0">
+      <ReactMarkdown components={markdownComponents}>{children}</ReactMarkdown>
+    </div>
+  );
+}
+
 export function DocViewer({ docs }: DocViewerProps) {
   const [activeSection, setActiveSection] = useState("overview");
   const [expandedModules, setExpandedModules] = useState<Set<string>>(
@@ -116,9 +142,7 @@ export function DocViewer({ docs }: DocViewerProps) {
             <h1 className="text-3xl sm:text-4xl font-bold text-white mb-4">
               {docs.sections.overview.title}
             </h1>
-            <p className="text-lg text-zinc-400">
+            <Md>{docs.sections.overview.description}</Md>
-              {docs.sections.overview.description}
-            </p>
             <div className="flex flex-wrap gap-2 mt-4">
               {docs.sections.overview.techStack.map((tech: string) => (
                 <span
@@ -195,7 +219,9 @@ export function DocViewer({ docs }: DocViewerProps) {
 
                   {expandedModules.has(module.name) && (
                     <div className="px-5 pb-5 border-t border-white/10">
-                      <p className="text-zinc-300 mt-4 mb-4">{module.summary}</p>
+                      <div className="mt-4 mb-4">
+                        <Md>{module.summary}</Md>
+                      </div>
 
                       {module.keyFiles.length > 0 && (
                         <div className="mb-4">
@@ -211,7 +237,9 @@ export function DocViewer({ docs }: DocViewerProps) {
                                 <FileCode className="w-4 h-4 text-zinc-500 mt-0.5 flex-shrink-0" />
                                 <div>
                                   <code className="text-blue-300">{file.path}</code>
-                                  <p className="text-zinc-500">{file.purpose}</p>
+                                  {file.purpose && (
+                                    <p className="text-zinc-500">{file.purpose}</p>
+                                  )}
                                 </div>
                               </div>
                             ))}
@@ -252,11 +280,11 @@ export function DocViewer({ docs }: DocViewerProps) {
             <div className="grid gap-6 md:grid-cols-2">
               <div className="glass rounded-xl p-6">
                 <h3 className="font-semibold text-white mb-4">Coding Conventions</h3>
-                <ul className="space-y-2">
+                <ul className="space-y-3">
                   {docs.sections.patterns.conventions.map((convention: string, i: number) => (
-                    <li key={i} className="flex items-start gap-2 text-sm text-zinc-300">
+                    <li key={i} className="flex items-start gap-2 text-sm">
-                      <span className="text-blue-400 mt-1">•</span>
+                      <span className="text-blue-400 mt-1 flex-shrink-0">•</span>
-                      {convention}
+                      <Md>{convention}</Md>
                     </li>
                   ))}
                 </ul>
@@ -264,11 +292,11 @@ export function DocViewer({ docs }: DocViewerProps) {
 
               <div className="glass rounded-xl p-6">
                 <h3 className="font-semibold text-white mb-4">Design Patterns</h3>
-                <ul className="space-y-2">
+                <ul className="space-y-3">
                   {docs.sections.patterns.designPatterns.map((pattern: string, i: number) => (
-                    <li key={i} className="flex items-start gap-2 text-sm text-zinc-300">
+                    <li key={i} className="flex items-start gap-2 text-sm">
-                      <span className="text-blue-400 mt-1">•</span>
+                      <span className="text-blue-400 mt-1 flex-shrink-0">•</span>
-                      {pattern}
+                      <Md>{pattern}</Md>
                     </li>
                   ))}
                 </ul>
@@ -282,9 +310,9 @@ export function DocViewer({ docs }: DocViewerProps) {
                 </h3>
                 <ul className="space-y-3">
                   {docs.sections.patterns.architecturalDecisions.map((decision: string, i: number) => (
-                    <li key={i} className="flex items-start gap-3 text-zinc-300">
+                    <li key={i} className="flex items-start gap-3">
                       <GitBranch className="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" />
-                      {decision}
+                      <Md>{decision}</Md>
                     </li>
                   ))}
                 </ul>
@@ -303,9 +331,9 @@ export function DocViewer({ docs }: DocViewerProps) {
                 <h3 className="font-semibold text-white mb-4">Prerequisites</h3>
                 <ul className="space-y-2">
                   {docs.sections.gettingStarted.prerequisites.map((prereq: string, i: number) => (
-                    <li key={i} className="flex items-center gap-2 text-sm text-zinc-300">
+                    <li key={i} className="flex items-start gap-2 text-sm">
-                      <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+                      <span className="w-1.5 h-1.5 rounded-full bg-green-400 mt-1.5 flex-shrink-0" />
-                      {prereq}
+                      <Md>{prereq}</Md>
                     </li>
                   ))}
                 </ul>
@@ -313,25 +341,26 @@ export function DocViewer({ docs }: DocViewerProps) {
 
               <div className="glass rounded-xl p-6">
                 <h3 className="font-semibold text-white mb-4">Setup Steps</h3>
-                <ol className="space-y-4">
+                <ol className="space-y-6">
                   {docs.sections.gettingStarted.setupSteps.map((step: string, i: number) => (
                     <li key={i} className="flex gap-4">
-                      <span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-500/20 text-blue-300 text-sm flex items-center justify-center font-medium">
+                      <span className="flex-shrink-0 w-7 h-7 rounded-full bg-blue-500/20 text-blue-300 text-sm flex items-center justify-center font-medium mt-0.5">
                         {i + 1}
                       </span>
-                      <div className="prose prose-invert prose-sm max-w-none">
+                      <div className="flex-1 min-w-0">
-                        <ReactMarkdown>{step}</ReactMarkdown>
+                        <Md>{step}</Md>
                       </div>
                     </li>
                   ))}
                 </ol>
               </div>
 
-              <div className="glass rounded-xl p-6 border-blue-500/20">
+              <div className="glass rounded-xl p-6 border border-blue-500/20">
-                <h3 className="font-semibold text-white mb-3">First Task</h3>
+                <h3 className="font-semibold text-white mb-1">First Task</h3>
-                <div className="prose prose-invert prose-sm max-w-none">
+                <p className="text-sm text-zinc-500 mb-4">
-                  <ReactMarkdown>{docs.sections.gettingStarted.firstTask}</ReactMarkdown>
+                  A suggested first contribution to help you learn the codebase
-                </div>
+                </p>
+                <Md>{docs.sections.gettingStarted.firstTask}</Md>
               </div>
             </div>
           </section>

apps/web/src/components/example-repo-card.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowRight, Loader2, BookOpen } from "lucide-react";
+
+interface ExampleRepo {
+  name: string;
+  description: string;
+  language: string;
+  languageColor: string;
+  docId?: string;
+}
+
+interface ExampleRepoCardProps {
+  repo: ExampleRepo;
+}
+
+export function ExampleRepoCard({ repo }: ExampleRepoCardProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const handleClick = async () => {
+    if (repo.docId) {
+      router.push(`/docs/${repo.docId}`);
+      return;
+    }
+
+    const repoUrl = `https://github.com/${repo.name}`;
+    setIsLoading(true);
+
+    try {
+      const response = await fetch("/api/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ repoUrl }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || "Failed to start generation");
+      }
+
+      const data = await response.json();
+      router.push(`/generate?repo=${encodeURIComponent(repoUrl)}&id=${data.id}`);
+    } catch (err) {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="group relative p-6 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-blue-500/10">
+      <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />
+
+      <div className="flex items-center justify-between mb-4">
+        <div
+          className="flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium"
+          style={{
+            backgroundColor: `${repo.languageColor}20`,
+            color: repo.languageColor,
+            border: `1px solid ${repo.languageColor}40`,
+          }}
+        >
+          <span
+            className="w-2 h-2 rounded-full"
+            style={{ backgroundColor: repo.languageColor }}
+          />
+          {repo.language}
+        </div>
+        {repo.docId && (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
+            <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+            Ready
+          </span>
+        )}
+      </div>
+
+      <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors font-mono">
+        {repo.name}
+      </h3>
+
+      <p className="text-sm text-zinc-400 mb-6 leading-relaxed line-clamp-2">
+        {repo.description}
+      </p>
+
+      <button
+        onClick={handleClick}
+        disabled={isLoading}
+        className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200 
+          ${repo.docId
+            ? "bg-gradient-to-r from-green-600/20 to-emerald-600/20 hover:from-green-600 hover:to-emerald-600 border border-green-500/30 hover:border-transparent text-green-300 hover:text-white"
+            : "bg-gradient-to-r from-blue-600/20 to-indigo-600/20 hover:from-blue-600 hover:to-indigo-600 border border-blue-500/30 hover:border-transparent text-blue-300 hover:text-white"
+          }
+          disabled:opacity-50 disabled:cursor-not-allowed group/btn`}
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            <span>Starting...</span>
+          </>
+        ) : repo.docId ? (
+          <>
+            <BookOpen className="w-4 h-4" />
+            <span>View Docs</span>
+            <ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
+          </>
+        ) : (
+          <>
+            <span>Generate Docs</span>
+            <ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
+          </>
+        )}
+      </button>
+    </div>
+  );
+}

apps/web/src/components/footer.tsx

@@ -17,7 +17,7 @@ export function Footer() {
 
           <div className="flex items-center gap-6">
             <a
-              href="https://company.repi.fun"
+              href="https://vectry.tech"
               target="_blank"
               rel="noopener noreferrer"
               className="flex items-center gap-1 text-sm text-zinc-400 hover:text-white transition-colors"
@@ -27,7 +27,7 @@ export function Footer() {
             </a>
             
             <a
-              href="https://github.com"
+              href="https://gitea.repi.fun/repi/codeboard"
               target="_blank"
               rel="noopener noreferrer"
               className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
@@ -42,7 +42,7 @@ export function Footer() {
           <p className="text-sm text-zinc-500">
             © {new Date().getFullYear()} CodeBoard. Built by{" "}
             <a
-              href="https://company.repi.fun"
+              href="https://vectry.tech"
               target="_blank"
               rel="noopener noreferrer"
               className="text-zinc-400 hover:text-white transition-colors"

apps/web/src/components/keyboard-shortcuts-help.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { X } from "lucide-react";
+
+interface KeyboardShortcutsHelpProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+function Shortcut({ keys, label }: { keys: string[]; label: string }) {
+  return (
+    <div className="flex items-center justify-between py-2">
+      <span className="text-sm text-zinc-300">{label}</span>
+      <div className="flex items-center gap-1">
+        {keys.map((key) => (
+          <kbd
+            key={key}
+            className="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded border border-white/10 bg-white/[0.05] px-1.5 font-mono text-xs text-zinc-400"
+          >
+            {key}
+          </kbd>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function KeyboardShortcutsHelp({
+  open,
+  onClose,
+}: KeyboardShortcutsHelpProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "?") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[90]" ref={overlayRef}>
+      <div
+        className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="fixed inset-0 flex items-center justify-center px-4">
+        <div
+          role="dialog"
+          aria-label="Keyboard shortcuts"
+          className="w-full max-w-md rounded-xl border border-white/10 bg-[#111113] shadow-2xl shadow-black/50 animate-scale-in"
+        >
+          <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.06]">
+            <h2 className="text-base font-semibold text-white">
+              Keyboard Shortcuts
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-1.5 rounded-lg text-zinc-400 hover:text-white hover:bg-white/[0.06] transition-colors"
+              aria-label="Close shortcuts help"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+
+          <div className="px-5 py-4 space-y-4">
+            <div>
+              <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
+                Navigation
+              </h3>
+              <div className="divide-y divide-white/[0.04]">
+                <Shortcut keys={["j"]} label="Move down" />
+                <Shortcut keys={["k"]} label="Move up" />
+                <Shortcut keys={["Enter"]} label="Open selected" />
+                <Shortcut keys={["Esc"]} label="Clear selection" />
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
+                Go To
+              </h3>
+              <div className="divide-y divide-white/[0.04]">
+                <Shortcut keys={["g", "h"]} label="Go to Home" />
+                <Shortcut keys={["g", "g"]} label="Go to Generate" />
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">
+                General
+              </h3>
+              <div className="divide-y divide-white/[0.04]">
+                <Shortcut
+                  keys={["\u2318", "K"]}
+                  label="Command palette"
+                />
+                <Shortcut keys={["?"]} label="Show shortcuts" />
+              </div>
+            </div>
+          </div>
+
+          <div className="px-5 py-3 border-t border-white/[0.06]">
+            <p className="text-xs text-zinc-500 text-center">
+              Press <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px] text-zinc-400">?</kbd> or <kbd className="inline-flex h-4 items-center rounded border border-white/10 bg-white/[0.05] px-1 font-mono text-[10px] text-zinc-400">Esc</kbd> to close
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/mermaid-diagram.tsx

@@ -1,16 +1,22 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import mermaid from "mermaid";
+import { Maximize2, Minimize2, ZoomIn, ZoomOut, RotateCcw } from "lucide-react";
 
 interface MermaidDiagramProps {
   chart: string;
 }
 
 export function MermaidDiagram({ chart }: MermaidDiagramProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
   const [error, setError] = useState<string | null>(null);
   const [isReady, setIsReady] = useState(false);
+  const [svgHtml, setSvgHtml] = useState<string>("");
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [isPanning, setIsPanning] = useState(false);
+  const panStart = useRef({ x: 0, y: 0 });
 
   useEffect(() => {
     mermaid.initialize({
@@ -19,7 +25,7 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
       securityLevel: "loose",
       themeVariables: {
         darkMode: true,
-        background: "#0a0a0f",
+        background: "#0a0a0a",
         primaryColor: "#1e3a5f",
         primaryTextColor: "#ffffff",
         primaryBorderColor: "#3b82f6",
@@ -38,25 +44,85 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
   }, []);
 
   useEffect(() => {
-    if (!isReady || !containerRef.current || !chart) return;
+    if (!isReady || !chart) return;
 
     const renderChart = async () => {
       try {
         const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
         const { svg } = await mermaid.render(id, chart);
-        
+        setSvgHtml(svg);
-        if (containerRef.current) {
+        setError(null);
-          containerRef.current.innerHTML = svg;
-          setError(null);
-        }
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to render diagram");
+        setError(
+          err instanceof Error ? err.message : "Failed to render diagram"
+        );
       }
     };
 
     renderChart();
   }, [chart, isReady]);
 
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
+    setZoom((prev) => Math.min(Math.max(0.3, prev + delta), 5));
+  }, []);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.button !== 0) return;
+      setIsPanning(true);
+      panStart.current = { x: e.clientX - pan.x, y: e.clientY - pan.y };
+    },
+    [pan]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isPanning) return;
+      setPan({
+        x: e.clientX - panStart.current.x,
+        y: e.clientY - panStart.current.y,
+      });
+    },
+    [isPanning]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsPanning(false);
+  }, []);
+
+  const resetView = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+
+  const toggleFullscreen = useCallback(() => {
+    setIsFullscreen((prev) => !prev);
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsFullscreen(false);
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [isFullscreen]);
+
+  useEffect(() => {
+    if (isFullscreen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isFullscreen]);
+
   if (error) {
     return (
       <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20">
@@ -66,17 +132,114 @@ export function MermaidDiagram({ chart }: MermaidDiagramProps) {
     );
   }
 
-  return (
+  const controls = (
-    <div 
+    <div className="flex items-center gap-1">
-      ref={containerRef} 
+      <button
-      className="mermaid-diagram overflow-x-auto"
+        onClick={() => setZoom((z) => Math.min(z + 0.25, 5))}
-      style={{ minHeight: "100px" }}
+        className="p-1.5 rounded-md text-zinc-500 hover:text-white hover:bg-white/10 transition-colors"
+        title="Zoom in"
+      >
+        <ZoomIn className="w-4 h-4" />
+      </button>
+      <span className="text-xs text-zinc-500 w-12 text-center tabular-nums">
+        {Math.round(zoom * 100)}%
+      </span>
+      <button
+        onClick={() => setZoom((z) => Math.max(z - 0.25, 0.3))}
+        className="p-1.5 rounded-md text-zinc-500 hover:text-white hover:bg-white/10 transition-colors"
+        title="Zoom out"
+      >
+        <ZoomOut className="w-4 h-4" />
+      </button>
+      <div className="w-px h-4 bg-white/10 mx-1" />
+      <button
+        onClick={resetView}
+        className="p-1.5 rounded-md text-zinc-500 hover:text-white hover:bg-white/10 transition-colors"
+        title="Reset view"
+      >
+        <RotateCcw className="w-4 h-4" />
+      </button>
+      <button
+        onClick={toggleFullscreen}
+        className="p-1.5 rounded-md text-zinc-500 hover:text-white hover:bg-white/10 transition-colors"
+        title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+      >
+        {isFullscreen ? (
+          <Minimize2 className="w-4 h-4" />
+        ) : (
+          <Maximize2 className="w-4 h-4" />
+        )}
+      </button>
+    </div>
+  );
+
+  const diagramView = (fullHeight?: boolean) => (
+    <div
+      className={`overflow-hidden ${isPanning ? "cursor-grabbing" : "cursor-grab"}`}
+      onWheel={handleWheel}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      style={fullHeight ? { height: "100%" } : { minHeight: "100px" }}
     >
-      {!isReady && (
+      {svgHtml ? (
-        <div className="flex items-center justify-center py-8">
+        <div
-          <div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
+          className="mermaid-diagram flex items-center justify-center"
+          style={{
+            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+            transformOrigin: "center center",
+            transition: isPanning ? "none" : "transform 0.15s ease-out",
+            minHeight: fullHeight ? "100%" : "100px",
+          }}
+          dangerouslySetInnerHTML={{ __html: svgHtml }}
+        />
+      ) : (
+        <div
+          className="mermaid-diagram flex items-center justify-center"
+          style={{ minHeight: fullHeight ? "100%" : "100px" }}
+        >
+          {!isReady && (
+            <div className="flex items-center justify-center py-8">
+              <div className="w-6 h-6 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" />
+            </div>
+          )}
         </div>
       )}
     </div>
   );
+
+  if (isFullscreen) {
+    return (
+      <>
+        <div style={{ minHeight: "100px" }} />
+        <div className="fixed inset-0 z-50 bg-[#0a0a0a]/95 backdrop-blur-sm flex flex-col">
+          <div className="flex items-center justify-between px-6 py-3 border-b border-white/10">
+            <span className="text-sm text-zinc-400">Architecture Diagram</span>
+            {controls}
+          </div>
+          <div className="flex-1 overflow-hidden">
+            {diagramView(true)}
+          </div>
+          <div className="px-6 py-2 border-t border-white/10 text-center">
+            <span className="text-xs text-zinc-600">
+              Scroll to zoom · Drag to pan · Esc to close
+            </span>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <div className="flex items-center justify-end mb-2">{controls}</div>
+      {diagramView()}
+      <div className="mt-2 text-center">
+        <span className="text-xs text-zinc-600">
+          Scroll to zoom · Drag to pan
+        </span>
+      </div>
+    </div>
+  );
 }

apps/web/src/components/navbar.tsx

@@ -2,25 +2,34 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { Code2, Menu, X, Github } from "lucide-react";
+import Image from "next/image";
+import { Menu, X, Github, LogIn, UserCircle } from "lucide-react";
+import { useSession, signOut } from "next-auth/react";
+import { CommandPalette } from "@/components/command-palette";
 
 export function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
+  const { data: session, status } = useSession();
 
   const navLinks = [
     { href: "/#how-it-works", label: "How it Works" },
     { href: "/#features", label: "Features" },
+    { href: "/#pricing", label: "Pricing" },
   ];
 
   return (
     <header className="fixed top-0 left-0 right-0 z-50">
-      <nav className="glass border-b border-white/5">
+      <nav className="glass border-b border-white/5" aria-label="Main navigation">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <Link href="/" className="flex items-center gap-2 group">
-              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center group-hover:shadow-lg group-hover:shadow-blue-500/25 transition-shadow">
+              <Image
-                <Code2 className="w-5 h-5 text-white" />
+                src="/logo-icon.png"
-              </div>
+                alt="CodeBoard"
+                width={32}
+                height={32}
+                className="rounded-lg group-hover:shadow-lg group-hover:shadow-blue-500/25 transition-shadow"
+              />
               <span className="text-lg font-semibold text-white">
                 CodeBoard
               </span>
@@ -36,16 +45,54 @@ export function Navbar() {
                   {link.label}
                 </Link>
               ))}
+
+              <CommandPalette />
               
               <a
-                href="https://github.com"
+                href="https://gitea.repi.fun/repi/codeboard"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
               >
                 <Github className="w-4 h-4" />
-                GitHub
+                Source
               </a>
+
+              {status === "loading" ? (
+                <div className="w-24 h-8" />
+              ) : session ? (
+                <div className="flex items-center gap-6">
+                  <Link
+                    href="/dashboard"
+                    className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
+                  >
+                    <UserCircle className="w-4 h-4" />
+                    Dashboard
+                  </Link>
+                  <button
+                    onClick={() => signOut()}
+                    className="text-sm text-zinc-400 hover:text-white transition-colors"
+                  >
+                    Sign Out
+                  </button>
+                </div>
+              ) : (
+                <div className="flex items-center gap-4">
+                  <Link
+                    href="/login"
+                    className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors"
+                  >
+                    <LogIn className="w-4 h-4" />
+                    Log in
+                  </Link>
+                  <Link
+                    href="/register"
+                    className="px-4 py-2 bg-blue-500 hover:bg-blue-400 text-white rounded-lg text-sm font-semibold transition-colors"
+                  >
+                    Sign Up
+                  </Link>
+                </div>
+              )}
             </div>
 
             <button
@@ -77,14 +124,58 @@ export function Navbar() {
               ))}
               
               <a
-                href="https://github.com"
+                href="https://gitea.repi.fun/repi/codeboard"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors py-2"
               >
                 <Github className="w-4 h-4" />
-                GitHub
+                Source
               </a>
+
+              {status !== "loading" && (
+                <div className="border-t border-white/5 pt-3 mt-3 space-y-3">
+                  {session ? (
+                    <>
+                      <Link
+                        href="/dashboard"
+                        onClick={() => setIsOpen(false)}
+                        className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors py-2"
+                      >
+                        <UserCircle className="w-4 h-4" />
+                        Dashboard
+                      </Link>
+                      <button
+                        onClick={() => {
+                          signOut();
+                          setIsOpen(false);
+                        }}
+                        className="block text-sm text-zinc-400 hover:text-white transition-colors py-2"
+                      >
+                        Sign Out
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <Link
+                        href="/login"
+                        onClick={() => setIsOpen(false)}
+                        className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white transition-colors py-2"
+                      >
+                        <LogIn className="w-4 h-4" />
+                        Log in
+                      </Link>
+                      <Link
+                        href="/register"
+                        onClick={() => setIsOpen(false)}
+                        className="block text-center px-4 py-2 bg-blue-500 hover:bg-blue-400 text-white rounded-lg text-sm font-semibold transition-colors"
+                      >
+                        Sign Up
+                      </Link>
+                    </>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         )}

apps/web/src/components/providers.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from "react";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

apps/web/src/components/repo-input.tsx

@@ -52,10 +52,14 @@ export function RepoInput() {
     <form onSubmit={handleSubmit} className="w-full">
       <div className="relative flex flex-col sm:flex-row gap-3">
         <div className="relative flex-1">
-          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
+          <label htmlFor="repo-url-input" className="sr-only">
+            GitHub repository URL
+          </label>
+          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500" aria-hidden="true">
             <Github className="w-5 h-5" />
           </div>
           <input
+            id="repo-url-input"
             type="text"
             value={url}
             onChange={(e) => {

apps/web/src/components/scroll-section.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useScrollAnimate } from "@/hooks/use-scroll-animate";
+
+interface ScrollSectionProps {
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+}
+
+export function ScrollSection({
+  children,
+  className = "",
+  delay,
+}: ScrollSectionProps) {
+  const ref = useScrollAnimate<HTMLDivElement>();
+
+  return (
+    <div
+      ref={ref}
+      data-animate="hidden"
+      data-animate-delay={delay}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+}

apps/web/src/hooks/use-keyboard-nav.ts

@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useRouter } from "next/navigation";
+
+interface UseKeyboardNavOptions {
+  itemCount: number;
+  onSelect?: (index: number) => void;
+  enabled?: boolean;
+}
+
+export function useKeyboardNav({
+  itemCount,
+  onSelect,
+  enabled = true,
+}: UseKeyboardNavOptions) {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [showHelp, setShowHelp] = useState(false);
+  const router = useRouter();
+  const gPrefixRef = useRef(false);
+  const gTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearGPrefix = useCallback(() => {
+    gPrefixRef.current = false;
+    if (gTimerRef.current) {
+      clearTimeout(gTimerRef.current);
+      gTimerRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const isInputFocused = () => {
+      const tag = document.activeElement?.tagName;
+      return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+    };
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (isInputFocused()) return;
+
+      if (gPrefixRef.current) {
+        clearGPrefix();
+        if (e.key === "h") {
+          e.preventDefault();
+          router.push("/");
+          return;
+        }
+        if (e.key === "g") {
+          e.preventDefault();
+          router.push("/generate");
+          return;
+        }
+        return;
+      }
+
+      switch (e.key) {
+        case "j":
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            if (itemCount === 0) return -1;
+            return prev < itemCount - 1 ? prev + 1 : prev;
+          });
+          break;
+        case "k":
+          e.preventDefault();
+          setActiveIndex((prev) => {
+            if (itemCount === 0) return -1;
+            return prev > 0 ? prev - 1 : 0;
+          });
+          break;
+        case "Enter":
+          if (activeIndex >= 0 && onSelect) {
+            e.preventDefault();
+            onSelect(activeIndex);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setActiveIndex(-1);
+          break;
+        case "g":
+          e.preventDefault();
+          gPrefixRef.current = true;
+          gTimerRef.current = setTimeout(clearGPrefix, 1000);
+          break;
+        case "?":
+          e.preventDefault();
+          setShowHelp((prev) => !prev);
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+      clearGPrefix();
+    };
+  }, [enabled, itemCount, activeIndex, onSelect, router, clearGPrefix]);
+
+  useEffect(() => {
+    if (activeIndex >= 0) {
+      const el = document.querySelector(
+        `[data-keyboard-index="${activeIndex}"]`
+      );
+      el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [activeIndex]);
+
+  return { activeIndex, setActiveIndex, showHelp, setShowHelp };
+}

apps/web/src/hooks/use-scroll-animate.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface UseScrollAnimateOptions {
+  threshold?: number;
+  rootMargin?: string;
+  once?: boolean;
+}
+
+export function useScrollAnimate<T extends HTMLElement = HTMLDivElement>({
+  threshold = 0.1,
+  rootMargin = "0px 0px -60px 0px",
+  once = true,
+}: UseScrollAnimateOptions = {}) {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+
+    if (prefersReducedMotion) {
+      el.setAttribute("data-animate", "visible");
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.setAttribute("data-animate", "visible");
+            if (once) {
+              observer.unobserve(entry.target);
+            }
+          } else if (!once) {
+            entry.target.setAttribute("data-animate", "hidden");
+          }
+        });
+      },
+      { threshold, rootMargin }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [threshold, rootMargin, once]);
+
+  return ref;
+}

apps/web/src/lib/api-key.ts

@@ -0,0 +1,33 @@
+import { createHash } from "crypto";
+import { prisma } from "@/lib/prisma";
+
+export async function validateApiKey(bearerToken: string) {
+  const keyHash = createHash("sha256").update(bearerToken).digest("hex");
+
+  const apiKey = await prisma.apiKey.findFirst({
+    where: { keyHash, revoked: false },
+    include: {
+      user: {
+        include: {
+          subscription: true,
+        },
+      },
+    },
+  });
+
+  if (!apiKey) return null;
+
+  prisma.apiKey
+    .update({
+      where: { id: apiKey.id },
+      data: { lastUsedAt: new Date() },
+    })
+    .catch(() => {});
+
+  return {
+    userId: apiKey.userId,
+    user: apiKey.user,
+    subscription: apiKey.user.subscription,
+    apiKey,
+  };
+}

apps/web/src/lib/email.ts

@@ -0,0 +1,36 @@
+import nodemailer from "nodemailer";
+
+interface SendEmailOptions {
+  to: string;
+  subject: string;
+  html: string;
+}
+
+export async function sendEmail({ to, subject, html }: SendEmailOptions) {
+  const password = process.env.EMAIL_PASSWORD;
+
+  if (!password) {
+    console.warn(
+      "[email] EMAIL_PASSWORD not set — skipping email send to:",
+      to
+    );
+    return;
+  }
+
+  const transporter = nodemailer.createTransport({
+    host: "smtp.migadu.com",
+    port: 465,
+    secure: true,
+    auth: {
+      user: "hunter@repi.fun",
+      pass: password,
+    },
+  });
+
+  await transporter.sendMail({
+    from: "CodeBoard <hunter@repi.fun>",
+    to,
+    subject,
+    html,
+  });
+}

apps/web/src/lib/prisma.ts

@@ -0,0 +1,9 @@
+import { PrismaClient } from "@codeboard/database";
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient();
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

apps/web/src/lib/queue.ts

@@ -5,7 +5,7 @@ let queue: Queue | null = null;
 
 export function getQueue(): Queue {
   if (!queue) {
-    queue = new Queue("codeboard:generate", {
+    queue = new Queue("codeboard-generate", {
       connection: getRedis(),
     });
   }

apps/web/src/lib/rate-limit.ts

@@ -0,0 +1,53 @@
+import { getRedis } from "./redis";
+
+interface RateLimitConfig {
+  windowMs: number;
+  maxAttempts: number;
+}
+
+interface RateLimitResult {
+  allowed: boolean;
+  remaining: number;
+  resetAt: number;
+}
+
+export async function checkRateLimit(
+  key: string,
+  config: RateLimitConfig
+): Promise<RateLimitResult> {
+  const now = Date.now();
+  const windowStart = now - config.windowMs;
+  const redisKey = `rl:${key}`;
+
+  try {
+    const redis = getRedis();
+    await redis.zremrangebyscore(redisKey, 0, windowStart);
+    const count = await redis.zcard(redisKey);
+
+    if (count >= config.maxAttempts) {
+      const oldestEntry = await redis.zrange(redisKey, 0, 0, "WITHSCORES");
+      const resetAt = oldestEntry.length >= 2
+        ? parseInt(oldestEntry[1], 10) + config.windowMs
+        : now + config.windowMs;
+      return { allowed: false, remaining: 0, resetAt };
+    }
+
+    await redis.zadd(redisKey, now, `${now}:${Math.random()}`);
+    await redis.pexpire(redisKey, config.windowMs);
+
+    return {
+      allowed: true,
+      remaining: config.maxAttempts - count - 1,
+      resetAt: now + config.windowMs,
+    };
+  } catch {
+    return { allowed: true, remaining: config.maxAttempts, resetAt: now + config.windowMs };
+  }
+}
+
+export const AUTH_RATE_LIMITS = {
+  login: { windowMs: 15 * 60 * 1000, maxAttempts: 10 },
+  register: { windowMs: 60 * 60 * 1000, maxAttempts: 5 },
+  forgotPassword: { windowMs: 60 * 60 * 1000, maxAttempts: 5 },
+  resetPassword: { windowMs: 15 * 60 * 1000, maxAttempts: 5 },
+} as const;

apps/web/src/lib/stripe.ts

@@ -0,0 +1,35 @@
+import Stripe from "stripe";
+
+let _stripe: Stripe | null = null;
+
+export function getStripe(): Stripe {
+  if (!_stripe) {
+    const key = process.env.STRIPE_SECRET_KEY;
+    if (!key) throw new Error("STRIPE_SECRET_KEY is not set");
+    _stripe = new Stripe(key, { apiVersion: "2026-01-28.clover" });
+  }
+  return _stripe;
+}
+
+export const TIER_CONFIG = {
+  FREE: {
+    name: "Free",
+    generationsLimit: 15,
+    period: "day",
+    price: 0,
+  },
+  STARTER: {
+    name: "Starter",
+    priceId: process.env.STRIPE_STARTER_PRICE_ID!,
+    generationsLimit: 1000,
+    period: "month",
+    price: 5,
+  },
+  PRO: {
+    name: "Pro",
+    priceId: process.env.STRIPE_PRO_PRICE_ID!,
+    generationsLimit: 100000,
+    period: "month",
+    price: 20,
+  },
+} as const;

apps/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/web/src/middleware.ts

@@ -0,0 +1,90 @@
+import NextAuth from "next-auth";
+import { NextResponse } from "next/server";
+import authConfig from "./auth.config";
+
+const { auth } = NextAuth(authConfig);
+
+const publicPaths = [
+  "/",
+  "/docs",
+  "/generate",
+  "/history",
+  "/api/auth",
+  "/api/generate",
+  "/api/generations",
+  "/api/health",
+  "/api/stripe/webhook",
+  "/forgot-password",
+  "/reset-password",
+  "/verify-email",
+];
+
+function isPublicPath(pathname: string): boolean {
+  return publicPaths.some(
+    (p) => pathname === p || pathname.startsWith(`${p}/`)
+  );
+}
+
+const ALLOWED_ORIGINS = new Set([
+  "https://codeboard.vectry.tech",
+  "http://localhost:3000",
+]);
+
+function corsHeaders(origin: string | null): Record<string, string> {
+  const allowedOrigin = origin && ALLOWED_ORIGINS.has(origin)
+    ? origin
+    : "https://codeboard.vectry.tech";
+  return {
+    "Access-Control-Allow-Origin": allowedOrigin,
+    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    "Access-Control-Max-Age": "86400",
+  };
+}
+
+export default auth((req) => {
+  const { pathname } = req.nextUrl;
+  const isLoggedIn = !!req.auth;
+  const origin = req.headers.get("origin");
+
+  if (req.method === "OPTIONS") {
+    return new NextResponse(null, { status: 204, headers: corsHeaders(origin) });
+  }
+
+  const response = (() => {
+    if (isPublicPath(pathname)) {
+      if (isLoggedIn && (pathname === "/login" || pathname === "/register")) {
+        return NextResponse.redirect(new URL("/dashboard", req.nextUrl.origin));
+      }
+      return NextResponse.next();
+    }
+
+    if (pathname === "/login" || pathname === "/register") {
+      if (isLoggedIn) {
+        return NextResponse.redirect(new URL("/dashboard", req.nextUrl.origin));
+      }
+      return NextResponse.next();
+    }
+
+    if (pathname.startsWith("/dashboard") && !isLoggedIn) {
+      const loginUrl = new URL("/login", req.nextUrl.origin);
+      loginUrl.searchParams.set("callbackUrl", pathname);
+      return NextResponse.redirect(loginUrl);
+    }
+
+    return NextResponse.next();
+  })();
+
+  if (pathname.startsWith("/api/")) {
+    const headers = corsHeaders(origin);
+    for (const [key, value] of Object.entries(headers)) {
+      response.headers.set(key, value);
+    }
+  }
+
+  return response;
+});
+
+export const config = {
+  matcher: ["/((?!_next/static|_next/image|favicon.ico|og-image.png).*)"],
+};

apps/worker/package.json

@@ -13,6 +13,7 @@
     "@codeboard/parser": "*",
     "@codeboard/llm": "*",
     "@codeboard/diagrams": "*",
+    "@codeboard/database": "*",
     "bullmq": "^5.34.0",
     "ioredis": "^5.4.0",
     "simple-git": "^3.27.0"

apps/worker/src/index.ts

@@ -6,7 +6,7 @@ const redisUrl = process.env.REDIS_URL ?? "redis://localhost:6379";
 const connection = new IORedis(redisUrl, { maxRetriesPerRequest: null });
 
 const worker = new Worker(
-  "codeboard:generate",
+  "codeboard-generate",
   async (job) => {
     console.log(`[worker] Processing job ${job.id}: ${job.data.repoUrl}`);
     return processGenerationJob(job);
@@ -28,7 +28,7 @@ worker.on("failed", (job, err) => {
 });
 
 worker.on("ready", () => {
-  console.log("[worker] Ready and waiting for jobs on codeboard:generate");
+  console.log("[worker] Ready and waiting for jobs on codeboard-generate");
 });
 
 async function shutdown() {

apps/worker/src/processor.ts

@@ -1,5 +1,6 @@
 import type { Job } from "bullmq";
 import IORedis from "ioredis";
+import { prisma } from "@codeboard/database";
 import { cloneRepository } from "./jobs/clone.js";
 import { parseRepository } from "./jobs/parse.js";
 import { generateDocs } from "./jobs/generate.js";
@@ -7,6 +8,7 @@ import { generateDocs } from "./jobs/generate.js";
 interface GenerateJobData {
   repoUrl: string;
   generationId: string;
+  userId?: string;
 }
 
 const redis = new IORedis(process.env.REDIS_URL ?? "redis://localhost:6379");
@@ -38,6 +40,33 @@ export async function processGenerationJob(
   try {
     await updateProgress(generationId, "CLONING", 10, "Cloning repository...");
     const cloneResult = await cloneRepository(repoUrl);
+    const commitHash = cloneResult.metadata.lastCommit;
+
+    const existingGeneration = await prisma.generation.findUnique({
+      where: {
+        repoUrl_commitHash: {
+          repoUrl,
+          commitHash
+        }
+      }
+    });
+
+    if (existingGeneration && existingGeneration.result) {
+      const docs = existingGeneration.result as any;
+      docs.id = generationId;
+      docs.repoUrl = repoUrl;
+      docs.repoName = existingGeneration.repoName;
+
+      await redis.set(
+        `codeboard:result:${generationId}`,
+        JSON.stringify(docs),
+        "EX",
+        86400
+      );
+
+      await updateProgress(generationId, "COMPLETED", 100, "Using cached documentation!");
+      return { generationId, duration: 0, repoName: existingGeneration.repoName, cached: true };
+    }
 
     await updateProgress(
       generationId,
@@ -72,9 +101,23 @@ export async function processGenerationJob(
       86400
     );
 
+    await prisma.generation.create({
+      data: {
+        id: generationId,
+        repoUrl,
+        repoName: cloneResult.metadata.name,
+        commitHash,
+        status: "COMPLETED",
+        progress: 100,
+        result: docs as any,
+        duration,
+        userId: job.data.userId ?? null,
+      }
+    });
+
     await updateProgress(generationId, "COMPLETED", 100, "Done!");
 
-    return { generationId, duration, repoName: cloneResult.metadata.name };
+    return { generationId, duration, repoName: cloneResult.metadata.name, cached: false };
   } catch (err) {
     const message = err instanceof Error ? err.message : "Unknown error";
     await updateProgress(generationId, "FAILED", 0, message);

docker-compose.yml

@@ -4,14 +4,30 @@ services:
       context: .
       target: web
     ports:
-      - "3000:3000"
+      - "4100:3000"
     environment:
-      - DATABASE_URL=postgresql://codeboard:codeboard@db:5432/codeboard
       - REDIS_URL=redis://redis:6379
-      - NEXTAUTH_URL=http://localhost:3000
+      - DATABASE_URL=postgresql://codeboard:codeboard@postgres:5432/codeboard
+      - AUTH_SECRET=${AUTH_SECRET:-}
+      - AUTH_URL=https://codeboard.vectry.tech
+      - STRIPE_SECRET_KEY=${STRIPE_SECRET_KEY:-}
+      - STRIPE_WEBHOOK_SECRET=${STRIPE_WEBHOOK_SECRET:-}
+      - STRIPE_STARTER_PRICE_ID=price_1SzMQbR8i0An4Wz70Elgk5Zd
+      - STRIPE_PRO_PRICE_ID=price_1SzMQrR8i0An4Wz7UseMs0yy
+      - EMAIL_FROM=CodeBoard <noreply@vectry.tech>
+      - EMAIL_HOST=smtp.migadu.com
+      - EMAIL_PORT=465
+      - EMAIL_SECURE=true
+      - EMAIL_USER=hunter@repi.fun
+      - EMAIL_PASSWORD=${EMAIL_PASSWORD:-}
+      - NEXT_PUBLIC_APP_URL=https://codeboard.vectry.tech
     depends_on:
-      - db
+      redis:
-      - redis
+        condition: service_started
+      postgres:
+        condition: service_healthy
+      migrate:
+        condition: service_completed_successfully
     restart: always
 
   worker:
@@ -19,37 +35,54 @@ services:
       context: .
       target: worker
     environment:
-      - DATABASE_URL=postgresql://codeboard:codeboard@db:5432/codeboard
       - REDIS_URL=redis://redis:6379
+      - DATABASE_URL=postgresql://codeboard:codeboard@postgres:5432/codeboard
       - OPENAI_API_KEY=${OPENAI_API_KEY:-}
       - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY:-}
-      - LLM_MODEL=${LLM_MODEL:-}
+      - LLM_MODEL=${LLM_MODEL:-kimi-k2-turbo-preview}
-      - LLM_BASE_URL=${LLM_BASE_URL:-}
+      - LLM_BASE_URL=${LLM_BASE_URL:-https://api.moonshot.ai/v1}
     depends_on:
-      - db
+      redis:
-      - redis
+        condition: service_started
+      postgres:
+        condition: service_healthy
+      migrate:
+        condition: service_completed_successfully
     restart: always
 
-  db:
+  postgres:
     image: postgres:16-alpine
     environment:
-      POSTGRES_USER: codeboard
+      - POSTGRES_USER=codeboard
-      POSTGRES_PASSWORD: codeboard
+      - POSTGRES_PASSWORD=codeboard
-      POSTGRES_DB: codeboard
+      - POSTGRES_DB=codeboard
     volumes:
-      - postgres_data:/var/lib/postgresql/data
+      - codeboard_postgres_data:/var/lib/postgresql/data
-    ports:
+    healthcheck:
-      - "5432:5432"
+      test: ["CMD-SHELL", "pg_isready -U codeboard"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
     restart: always
 
+  migrate:
+    build:
+      context: .
+      target: builder
+    command: npx prisma migrate deploy --schema=packages/database/prisma/schema.prisma
+    environment:
+      - DATABASE_URL=postgresql://codeboard:codeboard@postgres:5432/codeboard
+    depends_on:
+      postgres:
+        condition: service_healthy
+    restart: "no"
+
   redis:
     image: redis:7-alpine
-    ports:
-      - "6379:6379"
     volumes:
-      - redis_data:/data
+      - codeboard_redis_data:/data
     restart: always
 
 volumes:
-  postgres_data:
+  codeboard_postgres_data:
-  redis_data:
+  codeboard_redis_data:

package.json

@@ -14,6 +14,8 @@
     "db:push": "turbo db:push"
   },
   "devDependencies": {
+    "simple-git": "^3.30.0",
+    "tsx": "^4.21.0",
     "turbo": "^2",
     "typescript": "^5.7"
   },

packages/database/package.json

@@ -2,13 +2,17 @@
   "name": "@codeboard/database",
   "version": "0.0.1",
   "private": true,
-  "main": "./src/client.ts",
+  "main": "./dist/client.js",
-  "types": "./src/client.ts",
+  "types": "./dist/client.d.ts",
   "exports": {
-    ".": "./src/client.ts"
+    ".": {
+      "import": "./dist/client.js",
+      "require": "./dist/client.js",
+      "types": "./dist/client.d.ts"
+    }
   },
   "scripts": {
-    "build": "echo 'database package uses prisma generate'",
+    "build": "prisma generate && tsc",
     "db:generate": "prisma generate",
     "db:push": "prisma db push",
     "db:migrate": "prisma migrate dev",

packages/database/prisma/migrations/0001_init/migration.sql

@@ -0,0 +1,49 @@
+-- CreateEnum
+CREATE TYPE "Status" AS ENUM ('QUEUED', 'CLONING', 'PARSING', 'GENERATING', 'RENDERING', 'COMPLETED', 'FAILED');
+
+-- CreateTable
+CREATE TABLE "Generation" (
+    "id" TEXT NOT NULL,
+    "repoUrl" TEXT NOT NULL,
+    "repoName" TEXT NOT NULL,
+    "commitHash" TEXT NOT NULL,
+    "status" "Status" NOT NULL DEFAULT 'QUEUED',
+    "progress" INTEGER NOT NULL DEFAULT 0,
+    "result" JSONB,
+    "error" TEXT,
+    "costUsd" DOUBLE PRECISION,
+    "duration" INTEGER,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "userId" TEXT,
+    "viewCount" INTEGER NOT NULL DEFAULT 0,
+
+    CONSTRAINT "Generation_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "githubId" TEXT NOT NULL,
+    "login" TEXT NOT NULL,
+    "email" TEXT,
+    "avatarUrl" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "Generation_repoUrl_idx" ON "Generation"("repoUrl");
+
+-- CreateIndex
+CREATE INDEX "Generation_status_idx" ON "Generation"("status");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Generation_repoUrl_commitHash_key" ON "Generation"("repoUrl", "commitHash");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_githubId_key" ON "User"("githubId");
+
+-- AddForeignKey
+ALTER TABLE "Generation" ADD CONSTRAINT "Generation_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

packages/database/prisma/migrations/0002_add_auth_billing/migration.sql

@@ -0,0 +1,121 @@
+-- CreateEnum
+CREATE TYPE "SubscriptionTier" AS ENUM ('FREE', 'STARTER', 'PRO');
+
+-- CreateEnum
+CREATE TYPE "SubscriptionStatus" AS ENUM ('ACTIVE', 'PAST_DUE', 'CANCELED', 'UNPAID');
+
+-- Drop existing foreign key on Generation
+ALTER TABLE "Generation" DROP CONSTRAINT IF EXISTS "Generation_userId_fkey";
+
+-- Drop old User table (clean migration — no real users)
+DROP TABLE IF EXISTS "User" CASCADE;
+
+-- CreateTable User (new schema with auth fields)
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "passwordHash" TEXT NOT NULL,
+    "name" TEXT,
+    "emailVerified" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable Subscription
+CREATE TABLE "Subscription" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "tier" "SubscriptionTier" NOT NULL DEFAULT 'FREE',
+    "status" "SubscriptionStatus" NOT NULL DEFAULT 'ACTIVE',
+    "stripeCustomerId" TEXT,
+    "stripeSubscriptionId" TEXT,
+    "stripePriceId" TEXT,
+    "generationsLimit" INTEGER NOT NULL DEFAULT 15,
+    "generationsUsed" INTEGER NOT NULL DEFAULT 0,
+    "currentPeriodStart" TIMESTAMP(3),
+    "currentPeriodEnd" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Subscription_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable ApiKey
+CREATE TABLE "ApiKey" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "name" TEXT NOT NULL DEFAULT 'Default',
+    "keyHash" TEXT NOT NULL,
+    "keyPrefix" TEXT NOT NULL,
+    "revoked" BOOLEAN NOT NULL DEFAULT false,
+    "lastUsedAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "ApiKey_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable PasswordResetToken
+CREATE TABLE "PasswordResetToken" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "PasswordResetToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable EmailVerificationToken
+CREATE TABLE "EmailVerificationToken" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "EmailVerificationToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_userId_key" ON "Subscription"("userId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_stripeCustomerId_key" ON "Subscription"("stripeCustomerId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_stripeSubscriptionId_key" ON "Subscription"("stripeSubscriptionId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ApiKey_keyHash_key" ON "ApiKey"("keyHash");
+
+-- CreateIndex
+CREATE INDEX "ApiKey_userId_idx" ON "ApiKey"("userId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PasswordResetToken_token_key" ON "PasswordResetToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "EmailVerificationToken_token_key" ON "EmailVerificationToken"("token");
+
+-- CreateIndex
+CREATE INDEX "Generation_userId_idx" ON "Generation"("userId");
+
+-- AddForeignKey
+ALTER TABLE "Generation" ADD CONSTRAINT "Generation_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Subscription" ADD CONSTRAINT "Subscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ApiKey" ADD CONSTRAINT "ApiKey_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PasswordResetToken" ADD CONSTRAINT "PasswordResetToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EmailVerificationToken" ADD CONSTRAINT "EmailVerificationToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/database/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

packages/database/prisma/schema.prisma

@@ -7,6 +7,112 @@ generator client {
   provider = "prisma-client-js"
 }
 
+model User {
+  id            String   @id @default(cuid())
+  email         String   @unique
+  passwordHash  String
+  name          String?
+  emailVerified Boolean  @default(false)
+  image         String?
+  stripeCustomerId String? @unique
+
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+
+  subscription              Subscription?
+  apiKeys                   ApiKey[]
+  generations               Generation[]
+  passwordResetTokens       PasswordResetToken[]
+  emailVerificationTokens   EmailVerificationToken[]
+
+  @@index([email])
+}
+
+model Subscription {
+  id                    String             @id @default(cuid())
+  userId                String             @unique
+  user                  User               @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  tier                  SubscriptionTier   @default(FREE)
+  stripeCustomerId      String?            @unique
+  stripeSubscriptionId  String?            @unique
+  stripePriceId         String?
+
+  currentPeriodStart    DateTime?
+  currentPeriodEnd      DateTime?
+
+  generationsUsed       Int                @default(0)
+  generationsLimit      Int                @default(15)
+
+  status                SubscriptionStatus @default(ACTIVE)
+
+  createdAt             DateTime           @default(now())
+  updatedAt             DateTime           @updatedAt
+
+  @@index([stripeCustomerId])
+  @@index([stripeSubscriptionId])
+}
+
+model ApiKey {
+  id          String   @id @default(cuid())
+  userId      String
+  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  name        String   @default("Default")
+  keyHash     String   @unique
+  keyPrefix   String
+  lastUsedAt  DateTime?
+
+  revoked     Boolean  @default(false)
+  createdAt   DateTime @default(now())
+
+  @@index([keyHash])
+  @@index([userId])
+}
+
+model PasswordResetToken {
+  id        String   @id @default(cuid())
+  userId    String
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  token     String   @unique
+  expiresAt DateTime
+  used      Boolean  @default(false)
+
+  createdAt DateTime @default(now())
+
+  @@index([token])
+  @@index([userId])
+}
+
+model EmailVerificationToken {
+  id        String   @id @default(cuid())
+  userId    String
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  token     String   @unique
+  expiresAt DateTime
+  used      Boolean  @default(false)
+
+  createdAt DateTime @default(now())
+
+  @@index([token])
+  @@index([userId])
+}
+
+enum SubscriptionTier {
+  FREE
+  STARTER
+  PRO
+}
+
+enum SubscriptionStatus {
+  ACTIVE
+  PAST_DUE
+  CANCELED
+  UNPAID
+}
+
 model Generation {
   id         String   @id @default(cuid())
   repoUrl    String
@@ -27,16 +133,7 @@ model Generation {
   @@unique([repoUrl, commitHash])
   @@index([repoUrl])
   @@index([status])
-}
+  @@index([userId])
-
-model User {
-  id          String       @id @default(cuid())
-  githubId    String       @unique
-  login       String
-  email       String?
-  avatarUrl   String?
-  createdAt   DateTime     @default(now())
-  generations Generation[]
 }
 
 enum Status {

packages/database/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}

packages/llm/src/chunker.ts

@@ -12,10 +12,21 @@ export function chunkCode(content: string, maxTokens: number): string[] {
   let currentLen = 0;
 
   for (const line of lines) {
-    if (currentLen + line.length > maxChars && current.length > 0) {
+    if (currentLen + line.length > maxChars) {
-      chunks.push(current.join("\n"));
+      if (current.length > 0) {
-      current = [];
+        chunks.push(current.join("\n"));
-      currentLen = 0;
+        current = [];
+        currentLen = 0;
+      }
+      if (line.length > maxChars) {
+        let remaining = line;
+        while (remaining.length > 0) {
+          const chunk = remaining.substring(0, maxChars);
+          chunks.push(chunk);
+          remaining = remaining.substring(maxChars);
+        }
+        continue;
+      }
     }
     current.push(line);
     currentLen += line.length + 1;

packages/llm/src/pipeline.ts

@@ -23,6 +23,29 @@ function parseList(text: string): string[] {
     .filter(Boolean);
 }
 
+function parseSteps(text: string): string[] {
+  const lines = text.split("\n");
+  const steps: string[] = [];
+  let current = "";
+
+  for (const line of lines) {
+    if (/^\d+\.\s/.test(line)) {
+      if (current.trim()) {
+        steps.push(current.trim());
+      }
+      current = line.replace(/^\d+\.\s*/, "");
+    } else {
+      current += "\n" + line;
+    }
+  }
+
+  if (current.trim()) {
+    steps.push(current.trim());
+  }
+
+  return steps.filter(Boolean);
+}
+
 export async function generateDocumentation(
   codeStructure: CodeStructure,
   provider: LLMProvider,
@@ -112,7 +135,7 @@ export async function generateDocumentation(
   const gsResponse = await provider.chat(gsMessages);
 
   const prerequisites = parseList(parseSection(gsResponse, "Prerequisites"));
-  const setupSteps = parseList(parseSection(gsResponse, "Setup Steps"));
+  const setupSteps = parseSteps(parseSection(gsResponse, "Setup Steps"));
   const firstTask = parseSection(gsResponse, "Your First Task");
 
   onProgress?.("complete", 100);

tests/integration-test.ts

@@ -0,0 +1,380 @@
+#!/usr/bin/env node
+
+/**
+ * Integration Test for CodeBoard Clone → Parse → Diagram Pipeline
+ *
+ * This test:
+ * 1. Clones a small public GitHub repository (p-limit)
+ * 2. Parses the repository using @codeboard/parser
+ * 3. Generates architecture and dependency diagrams
+ * 4. Validates all results
+ * 5. Cleans up temporary files
+ */
+
+import { rm, mkdir } from "node:fs/promises";
+import { join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { simpleGit } from "simple-git";
+import { analyzeRepository } from "@codeboard/parser";
+import { generateArchitectureDiagram, generateDependencyGraph } from "@codeboard/diagrams";
+import type { CodeStructure } from "@codeboard/shared";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+const TEST_REPO_URL = "https://github.com/sindresorhus/p-limit.git";
+const TEMP_DIR = resolve(__dirname, ".temp-test-repo");
+const REPO_DIR = join(TEMP_DIR, "p-limit");
+
+interface TestResult {
+  name: string;
+  passed: boolean;
+  error?: string;
+  details?: unknown;
+}
+
+const results: TestResult[] = [];
+
+function logStep(step: number, message: string): void {
+  console.log(`\n${"=".repeat(60)}`);
+  console.log(`STEP ${step}: ${message}`);
+  console.log("=".repeat(60));
+}
+
+function assert(condition: boolean, message: string, details?: unknown): void {
+  if (!condition) {
+    throw new Error(`Assertion failed: ${message}`);
+  }
+  if (details !== undefined) {
+    console.log(`  ✓ ${message}`);
+    if (typeof details === "object" && details !== null) {
+      console.log(`    ${JSON.stringify(details)}`);
+    } else {
+      console.log(`    ${details}`);
+    }
+  } else {
+    console.log(`  ✓ ${message}`);
+  }
+}
+
+function recordTest(name: string, testFn: () => void): void {
+  try {
+    testFn();
+    results.push({ name, passed: true });
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    results.push({ name, passed: false, error: errorMsg });
+    console.error(`  ✗ ${errorMsg}`);
+  }
+}
+
+function printSummary(): void {
+  console.log(`\n${"=".repeat(60)}`);
+  console.log("TEST SUMMARY");
+  console.log("=".repeat(60));
+
+  const passed = results.filter((r) => r.passed).length;
+  const total = results.length;
+
+  for (const result of results) {
+    const status = result.passed ? "✓ PASSED" : "✗ FAILED";
+    console.log(`${status}: ${result.name}`);
+    if (result.error) {
+      console.log(`  Error: ${result.error}`);
+    }
+    if (result.details) {
+      console.log(`  Details: ${JSON.stringify(result.details)}`);
+    }
+  }
+
+  console.log(`\n${"=".repeat(60)}`);
+  console.log(`TOTAL: ${passed}/${total} tests passed`);
+
+  if (passed === total) {
+    console.log("All tests passed! ✅");
+  } else {
+    console.log("Some tests failed! ❌");
+    process.exit(1);
+  }
+  console.log("=".repeat(60) + "\n");
+}
+
+async function setup(): Promise<void> {
+  console.log("Setting up test environment...");
+  try {
+    await mkdir(TEMP_DIR, { recursive: true });
+    console.log(`  ✓ Created temp directory: ${TEMP_DIR}`);
+  } catch {
+    // Directory might already exist
+  }
+}
+
+async function cleanup(): Promise<void> {
+  console.log("\nCleaning up...");
+  try {
+    await rm(TEMP_DIR, { recursive: true, force: true });
+    console.log(`  ✓ Removed temp directory: ${TEMP_DIR}`);
+  } catch (error) {
+    console.error(`  ✗ Failed to remove temp directory: ${error}`);
+  }
+}
+
+async function cloneRepo(): Promise<void> {
+  logStep(1, "Cloning Repository");
+
+  const git = simpleGit();
+  console.log(`  Cloning ${TEST_REPO_URL}...`);
+
+  try {
+    await git.clone(TEST_REPO_URL, REPO_DIR);
+    console.log(`  ✓ Repository cloned to ${REPO_DIR}`);
+
+    recordTest("Repository cloned successfully", () => {
+      assert(true, "Clone operation completed");
+    });
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    console.error(`  ✗ Clone failed: ${errorMsg}`);
+
+    console.log("\n  Attempting fallback: using local codeboard repository...");
+    const localRepo = resolve(__dirname, "..");
+    console.log(`  Using local repository at: ${localRepo}`);
+
+    recordTest("Repository cloned successfully", () => {
+      assert(true, "Using local repository as fallback");
+    });
+
+    (globalThis as unknown as { testRepoPath: string }).testRepoPath =
+      localRepo;
+    return;
+  }
+
+  (globalThis as unknown as { testRepoPath: string }).testRepoPath = REPO_DIR;
+}
+
+async function parseRepo(): Promise<void> {
+  logStep(2, "Parsing Repository");
+
+  const repoPath = (globalThis as unknown as { testRepoPath: string })
+    .testRepoPath;
+  console.log(`  Parsing repository at: ${repoPath}`);
+
+  try {
+    const structure = await analyzeRepository(repoPath);
+    (globalThis as unknown as { codeStructure: CodeStructure }).codeStructure =
+      structure;
+
+    console.log(`  ✓ Parsing complete`);
+    console.log(`    Files parsed: ${structure.files.length}`);
+    console.log(`    Modules detected: ${structure.modules.length}`);
+    console.log(`    Exports found: ${structure.exports.length}`);
+    console.log(`    Dependencies: ${structure.dependencies.length}`);
+
+    recordTest("At least 1 file parsed", () => {
+      assert(
+        structure.files.length > 0,
+        "At least 1 file parsed",
+        structure.files.length
+      );
+    });
+
+    recordTest("At least 1 function found", () => {
+      const totalFunctions = structure.files.reduce(
+        (sum, file) => sum + file.functions.length,
+        0
+      );
+      assert(totalFunctions > 0, "At least 1 function found", totalFunctions);
+    });
+
+    recordTest("Imports are valid", () => {
+      const totalImports = structure.files.reduce(
+        (sum, file) => sum + file.imports.length,
+        0
+      );
+      assert(totalImports >= 0, "Imports are valid", totalImports);
+    });
+
+    recordTest("Exports are valid", () => {
+      assert(structure.exports.length >= 0, "Exports are valid", structure.exports.length);
+    });
+
+    recordTest("Modules detected", () => {
+      assert(structure.modules.length > 0, "At least 1 module detected", structure.modules.length);
+    });
+
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    throw new Error(`Parse failed: ${errorMsg}`);
+  }
+}
+
+async function generateDiagrams(): Promise<void> {
+  logStep(3, "Generating Diagrams");
+
+  const structure = (globalThis as unknown as { codeStructure: CodeStructure })
+    .codeStructure;
+
+  console.log("  Generating architecture diagram...");
+  try {
+    const archDiagram = generateArchitectureDiagram(
+      structure.modules,
+      structure.dependencies
+    );
+    (globalThis as unknown as { archDiagram: string }).archDiagram = archDiagram;
+
+    console.log("  ✓ Architecture diagram generated");
+    const archLines = archDiagram.split("\n").length;
+    console.log(`    Diagram lines: ${archLines}`);
+
+    recordTest("Architecture diagram generated", () => {
+      assert(archDiagram.length > 0, "Diagram is not empty", archLines);
+    });
+
+    recordTest("Valid Mermaid syntax", () => {
+      assert(
+        archDiagram.startsWith("flowchart TD") ||
+          archDiagram.startsWith("graph TD") ||
+          archDiagram.includes("flowchart"),
+        "Valid Mermaid flowchart syntax",
+        archDiagram.substring(0, 50)
+      );
+    });
+
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    throw new Error(`Architecture diagram failed: ${errorMsg}`);
+  }
+
+  console.log("\n  Generating dependency graph...");
+  try {
+    const depDiagram = generateDependencyGraph(
+      structure.files,
+      structure.dependencies
+    );
+    (globalThis as unknown as { depDiagram: string }).depDiagram = depDiagram;
+
+    console.log("  ✓ Dependency graph generated");
+    const depLines = depDiagram.split("\n").length;
+    console.log(`    Diagram lines: ${depLines}`);
+
+    recordTest("Dependency graph generated", () => {
+      assert(depDiagram.length > 0, "Graph is not empty", depLines);
+    });
+
+    recordTest("Valid Mermaid syntax for dependencies", () => {
+      assert(
+        depDiagram.startsWith("graph LR") ||
+          depDiagram.includes("graph"),
+        "Valid Mermaid graph syntax",
+        depDiagram.substring(0, 50)
+      );
+    });
+
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    throw new Error(`Dependency graph failed: ${errorMsg}`);
+  }
+}
+
+async function printResults(): Promise<void> {
+  logStep(4, "Detailed Results");
+
+  const structure = (globalThis as unknown as { codeStructure: CodeStructure })
+    .codeStructure;
+  const archDiagram = (globalThis as unknown as { archDiagram: string })
+    .archDiagram;
+  const depDiagram = (globalThis as unknown as { depDiagram: string })
+    .depDiagram;
+
+  console.log("\n📊 PARSED FILES:");
+  for (const file of structure.files.slice(0, 5)) {
+    console.log(`  • ${file.path}`);
+    console.log(`    Language: ${file.language}`);
+    console.log(`    Size: ${file.size} bytes`);
+    console.log(`    Functions: ${file.functions.length}`);
+    if (file.classes.length > 0) {
+      console.log(`    Classes: ${file.classes.map((c) => c.name).join(", ")}`);
+    }
+    if (file.imports.length > 0) {
+      console.log(`    Imports: ${file.imports.slice(0, 3).map((i) => i.source).join(", ")}`);
+    }
+    if (file.exports.length > 0) {
+      console.log(`    Exports: ${file.exports.slice(0, 3).map((e) => e.name).join(", ")}`);
+    }
+  }
+  if (structure.files.length > 5) {
+    console.log(`  ... and ${structure.files.length - 5} more files`);
+  }
+
+  console.log("\n📦 MODULES:");
+  for (const mod of structure.modules) {
+    console.log(`  • ${mod.name} (${mod.path})`);
+    console.log(`    Files: ${mod.files.length}`);
+  }
+
+  console.log("\n🔗 DEPENDENCIES (sample):");
+  for (const dep of structure.dependencies.slice(0, 10)) {
+    console.log(`  ${dep.source} → ${dep.target} (${dep.type})`);
+  }
+  if (structure.dependencies.length > 10) {
+    console.log(`  ... and ${structure.dependencies.length - 10} more edges`);
+  }
+
+  console.log("\n📈 ARCHITECTURE DIAGRAM (Mermaid):");
+  console.log(archDiagram);
+
+  console.log("\n🔀 DEPENDENCY GRAPH (Mermaid):");
+  console.log(depDiagram);
+
+  console.log("\n📋 SUMMARY:");
+  const totalFunctions = structure.files.reduce(
+    (sum, file) => sum + file.functions.length,
+    0
+  );
+  const totalClasses = structure.files.reduce(
+    (sum, file) => sum + file.classes.length,
+    0
+  );
+  const totalImports = structure.files.reduce(
+    (sum, file) => sum + file.imports.length,
+    0
+  );
+
+  console.log(`  Files parsed:        ${structure.files.length}`);
+  console.log(`  Functions found:     ${totalFunctions}`);
+  console.log(`  Classes found:       ${totalClasses}`);
+  console.log(`  Imports found:       ${totalImports}`);
+  console.log(`  Modules detected:     ${structure.modules.length}`);
+  console.log(`  Entry points:        ${structure.entryPoints.length}`);
+  console.log(`  Architecture lines:   ${archDiagram.split("\n").length}`);
+  console.log(`  Dependency lines:     ${depDiagram.split("\n").length}`);
+
+  recordTest("Summary is valid", () => {
+    assert(structure.files.length > 0, "Files > 0");
+    assert(totalFunctions >= 0, "Functions >= 0");
+    assert(totalClasses >= 0, "Classes >= 0");
+  });
+}
+
+async function runTests(): Promise<void> {
+  try {
+    await setup();
+    await cloneRepo();
+    await parseRepo();
+    await generateDiagrams();
+    await printResults();
+    printSummary();
+    await cleanup();
+    process.exit(0);
+  } catch (error) {
+    console.error("\n❌ TEST FAILED UNEXPECTEDLY");
+    console.error(error);
+    printSummary();
+    await cleanup();
+    process.exit(1);
+  }
+}
+
+runTests().catch((error) => {
+  console.error("Fatal error:", error);
+  process.exit(1);
+});

tests/pipeline-test.ts

@@ -0,0 +1,589 @@
+#!/usr/bin/env node
+
+/**
+ * Integration Test for CodeBoard LLM Pipeline with Mock Provider
+ *
+ * This test validates the full generateDocumentation pipeline using a mock provider
+ * that simulates LLM responses without requiring a real API key.
+ *
+ * Tests:
+ * 1. Clones and parses p-limit repository
+ * 2. Creates a mock LLMProvider returning structured responses
+ * 3. Runs generateDocumentation pipeline
+ * 4. Validates all sections are properly populated
+ * 5. Tests each prompt builder individually
+ * 6. Tests extractSignatures and chunkCode utilities
+ * 7. Cleans up temporary files
+ */
+
+import { rm, mkdir } from "node:fs/promises";
+import { join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { simpleGit } from "simple-git";
+import { analyzeRepository } from "@codeboard/parser";
+import { generateDocumentation, chunkCode, extractSignatures, type LLMProvider } from "@codeboard/llm";
+import type { CodeStructure, FileNode, LLMMessage } from "@codeboard/shared";
+import { buildArchitecturePrompt } from "../packages/llm/src/prompts/architecture-overview.ts";
+import { buildModuleSummaryPrompt } from "../packages/llm/src/prompts/module-summary.ts";
+import { buildPatternsPrompt } from "../packages/llm/src/prompts/patterns-detection.ts";
+import { buildGettingStartedPrompt } from "../packages/llm/src/prompts/getting-started.ts";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+const TEST_REPO_URL = "https://github.com/sindresorhus/p-limit.git";
+const TEMP_DIR = resolve(__dirname, ".temp-pipeline-repo");
+const REPO_DIR = join(TEMP_DIR, "p-limit");
+
+interface TestResult {
+  name: string;
+  passed: boolean;
+  error?: string;
+  details?: unknown;
+}
+
+const results: TestResult[] = [];
+
+function logStep(step: number, message: string): void {
+  console.log(`\n${"=".repeat(60)}`);
+  console.log(`STEP ${step}: ${message}`);
+  console.log("=".repeat(60));
+}
+
+function assert(condition: boolean, message: string, details?: unknown): void {
+  if (!condition) {
+    throw new Error(`Assertion failed: ${message}`);
+  }
+  console.log(`  ✓ ${message}`);
+  if (details !== undefined && typeof details === "object" && details !== null) {
+    const detailStr = JSON.stringify(details);
+    if (detailStr && detailStr !== "{}") {
+      console.log(`    Details: ${detailStr.substring(0, 150)}${detailStr.length > 150 ? "..." : ""}`);
+    }
+  } else if (details !== undefined) {
+    console.log(`    Details: ${String(details).substring(0, 100)}`);
+  }
+}
+
+function recordTest(name: string, testFn: () => void): void {
+  try {
+    testFn();
+    results.push({ name, passed: true });
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    results.push({ name, passed: false, error: errorMsg });
+    console.error(`  ✗ ${errorMsg}`);
+  }
+}
+
+function printSummary(): void {
+  console.log(`\n${"=".repeat(60)}`);
+  console.log("TEST SUMMARY");
+  console.log("=".repeat(60));
+
+  const passed = results.filter((r) => r.passed).length;
+  const total = results.length;
+
+  for (const result of results) {
+    const status = result.passed ? "✓ PASSED" : "✗ FAILED";
+    console.log(`${status}: ${result.name}`);
+    if (result.error) {
+      console.log(`  Error: ${result.error}`);
+    }
+  }
+
+  console.log(`\n${"=".repeat(60)}`);
+  console.log(`TOTAL: ${passed}/${total} tests passed`);
+
+  if (passed === total) {
+    console.log("All tests passed! ✅");
+  } else {
+    console.log("Some tests failed! ❌");
+    process.exit(1);
+  }
+  console.log("=".repeat(60) + "\n");
+}
+
+/**
+ * Mock LLM Provider that returns structured responses based on system prompt
+ */
+class MockLLMProvider implements LLMProvider {
+  name = "Mock Provider";
+  private callCount = 0;
+
+  async chat(messages: LLMMessage[]): Promise<string> {
+    const systemPrompt = messages.find((m) => m.role === "system")?.content || "";
+    this.callCount++;
+
+    console.log(`  Mock call #${this.callCount}: Determining response type from system prompt...`);
+
+    if (systemPrompt.includes("architecture overview") || systemPrompt.includes("Mermaid flowchart")) {
+      console.log("    → Returning architecture response");
+      return this.getArchitectureResponse();
+    }
+
+    if (systemPrompt.includes("analyzing a code module") || systemPrompt.includes("Key Files")) {
+      console.log("    → Returning module summary response");
+      return this.getModuleSummaryResponse();
+    }
+
+    if (systemPrompt.includes("code reviewer identifying patterns") || systemPrompt.includes("Coding Conventions")) {
+      console.log("    → Returning patterns response");
+      return this.getPatternsResponse();
+    }
+
+    if (systemPrompt.includes("onboarding guide") || systemPrompt.includes("Prerequisites")) {
+      console.log("    → Returning getting started response");
+      return this.getGettingStartedResponse();
+    }
+
+    console.log("    → Unknown prompt type, returning generic response");
+    return "Unknown request type";
+  }
+
+  private getArchitectureResponse(): string {
+    return `## Architecture Overview
+
+p-limit is a lightweight TypeScript/JavaScript utility for managing concurrency in asynchronous operations. It provides a simple promise-based API to limit the number of concurrent operations executing at any given time. The architecture follows a queue-based design where pending promises are enqueued and executed as slots become available.
+
+The core component is a queue manager that tracks active promises and dispatches new ones when capacity permits. This design ensures efficient resource utilization and prevents overwhelming external APIs or services. The implementation uses native JavaScript promises without external dependencies, making it highly portable.
+
+## Tech Stack
+
+TypeScript, JavaScript, npm, Node.js
+
+## Mermaid Diagram
+
+\`\`\`mermaid
+flowchart TD
+    A[p-limit Module] --> B[Queue Manager]
+    B --> C[Active Promise Tracker]
+    B --> D[Executor]
+    D --> E[Promise Resolution]
+    E --> F[Next in Queue]
+    C --> D
+\`\`\``;
+  }
+
+  private getModuleSummaryResponse(): string {
+    return `## Summary
+
+This module provides the core p-limit functionality for concurrency management. It implements a promise-based queue system that limits concurrent operations while maintaining execution order.
+
+## Key Files
+
+- index.ts: Main entry point with p-limit function and queue management
+- package.json: Configuration and dependency definitions
+
+## Public API
+
+- pLimit(concurrency: number): Returns a limit function that manages concurrent promise execution
+- limit<T>(fn: () => Promise<T>): Promise<T>: Wraps a function with concurrency control`;
+  }
+
+  private getPatternsResponse(): string {
+    return `## Coding Conventions
+
+- Arrow functions preferred for callbacks
+- TypeScript interfaces for type definitions
+- Async/await pattern for asynchronous operations
+- Export default for main module function
+- Single quotes for string literals
+
+## Design Patterns
+
+- Queue Pattern: Manages concurrent operations
+- Factory Pattern: Creates limit functions with configurable concurrency
+- Promise Chaining: Handles asynchronous workflow
+
+## Architectural Decisions
+
+- Minimal external dependencies for portability
+- TypeScript for type safety with JavaScript runtime compatibility
+- Promise-based API for easy integration with async/await`;
+  }
+
+  private getGettingStartedResponse(): string {
+    return `## Prerequisites
+
+- Node.js 14 or higher
+- npm or yarn package manager
+- Basic understanding of Promises and async/await
+
+## Setup Steps
+
+1. Install the package: \`npm install p-limit\`
+2. Import in your code: \`import pLimit from 'p-limit'\`
+3. Create a limit instance: \`const limit = pLimit(2)\`
+4. Use with async operations: \`await limit(() => fetchData(url))\`
+
+## Your First Task
+
+Try limiting concurrent API calls by creating a limit instance with concurrency of 3 and fetching data from 10 different endpoints. Observe how only 3 requests execute at a time while others wait in the queue.`;
+  }
+
+  getCallCount(): number {
+    return this.callCount;
+  }
+}
+
+async function setup(): Promise<void> {
+  console.log("Setting up test environment...");
+  try {
+    await mkdir(TEMP_DIR, { recursive: true });
+    console.log(`  ✓ Created temp directory: ${TEMP_DIR}`);
+  } catch {
+    // Directory may already exist
+  }
+}
+
+async function cleanup(): Promise<void> {
+  console.log("\nCleaning up...");
+  try {
+    await rm(TEMP_DIR, { recursive: true, force: true });
+    console.log(`  ✓ Removed temp directory: ${TEMP_DIR}`);
+  } catch (error) {
+    console.error(`  ✗ Failed to remove temp directory: ${error}`);
+  }
+}
+
+async function cloneAndParseRepo(): Promise<CodeStructure> {
+  logStep(1, "Cloning and Parsing Repository");
+
+  console.log(`  Cloning ${TEST_REPO_URL}...`);
+
+  try {
+    const git = simpleGit();
+    await git.clone(TEST_REPO_URL, REPO_DIR);
+    console.log(`  ✓ Repository cloned to ${REPO_DIR}`);
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    console.error(`  ✗ Clone failed: ${errorMsg}`);
+
+    console.log("\n  Attempting fallback: using local codeboard repository...");
+    const localRepo = resolve(__dirname, "..");
+    console.log(`  Using local repository at: ${localRepo}`);
+
+    const structure = await analyzeRepository(localRepo);
+    return structure;
+  }
+
+  console.log("  Parsing repository...");
+  const structure = await analyzeRepository(REPO_DIR);
+
+  console.log(`  ✓ Parsing complete`);
+  console.log(`    Files parsed: ${structure.files.length}`);
+  console.log(`    Modules detected: ${structure.modules.length}`);
+  console.log(`    Exports found: ${structure.exports.length}`);
+  console.log(`    Dependencies: ${structure.dependencies.length}`);
+
+  return structure;
+}
+
+function testMockProvider(mockProvider: MockLLMProvider): void {
+  logStep(2, "Testing Mock LLM Provider");
+
+  recordTest("Mock provider initialized", () => {
+    assert(mockProvider.name === "Mock Provider", "Provider name is correct");
+  });
+
+  recordTest("Mock provider call count starts at 0", () => {
+    assert(mockProvider.getCallCount() === 0, "Initial call count is 0");
+  });
+}
+
+function testPromptBuilders(structure: CodeStructure): void {
+  logStep(3, "Testing Prompt Builders");
+
+  // Test architecture prompt builder
+  const archMessages = buildArchitecturePrompt(structure);
+  recordTest("Architecture prompt builder produces valid LLMMessage array", () => {
+    assert(Array.isArray(archMessages), "Architecture messages is an array");
+    assert(archMessages.length === 2, "Architecture messages has 2 elements (system + user)");
+    assert(archMessages[0].role === "system", "First message is system");
+    assert(archMessages[1].role === "user", "Second message is user");
+    assert(archMessages[0].content.includes("architecture overview"), "System prompt mentions architecture");
+    assert(archMessages[1].content.includes("FILE TREE"), "User prompt includes file tree");
+  });
+
+  // Test module summary prompt builder
+  if (structure.modules.length > 0) {
+    const module = structure.modules[0];
+    const moduleFiles = structure.files.filter((f) => module.files.includes(f.path));
+
+    if (moduleFiles.length > 0) {
+      const modMessages = buildModuleSummaryPrompt(module, moduleFiles);
+      recordTest("Module summary prompt builder produces valid LLMMessage array", () => {
+        assert(Array.isArray(modMessages), "Module messages is an array");
+        assert(modMessages.length === 2, "Module messages has 2 elements (system + user)");
+        assert(modMessages[0].role === "system", "First message is system");
+        assert(modMessages[1].role === "user", "Second message is user");
+        assert(modMessages[0].content.includes("Key Files"), "System prompt mentions key files");
+        assert(modMessages[1].content.includes(module.name), "User prompt includes module name");
+      });
+    }
+  }
+
+  // Test patterns prompt builder
+  const patternsMessages = buildPatternsPrompt(structure);
+  recordTest("Patterns prompt builder produces valid LLMMessage array", () => {
+    assert(Array.isArray(patternsMessages), "Patterns messages is an array");
+    assert(patternsMessages.length === 2, "Patterns messages has 2 elements (system + user)");
+    assert(patternsMessages[0].role === "system", "First message is system");
+    assert(patternsMessages[1].role === "user", "Second message is user");
+    assert(patternsMessages[0].content.includes("Coding Conventions"), "System prompt mentions conventions");
+  });
+
+  // Test getting started prompt builder
+  const gsMessages = buildGettingStartedPrompt(structure, "Test architecture overview");
+  recordTest("Getting started prompt builder produces valid LLMMessage array", () => {
+    assert(Array.isArray(gsMessages), "Getting started messages is an array");
+    assert(gsMessages.length === 2, "Getting started messages has 2 elements (system + user)");
+    assert(gsMessages[0].role === "system", "First message is system");
+    assert(gsMessages[1].role === "user", "Second message is user");
+    assert(gsMessages[0].content.includes("Prerequisites"), "System prompt mentions prerequisites");
+  });
+}
+
+function testUtilityFunctions(structure: CodeStructure): void {
+  logStep(4, "Testing Utility Functions");
+
+  // Test extractSignatures
+  if (structure.files.length > 0) {
+    const testFile = structure.files[0];
+    const signature = extractSignatures(testFile);
+
+    recordTest("extractSignatures returns string with file path", () => {
+      assert(typeof signature === "string", "extractSignatures returns a string");
+      assert(signature.includes(testFile.path), "Signature includes file path");
+      assert(signature.includes(testFile.language), "Signature includes language");
+    });
+
+    if (testFile.functions.length > 0) {
+      recordTest("extractSignatures includes function names", () => {
+        assert(signature.includes(testFile.functions[0].name), "Signature includes first function name");
+      });
+    }
+
+    if (testFile.imports.length > 0) {
+      recordTest("extractSignatures includes imports", () => {
+        assert(signature.includes("Imports:"), "Signature has Imports section");
+        assert(signature.includes("import"), "Signature includes import statement");
+      });
+    }
+
+    if (testFile.exports.length > 0) {
+      recordTest("extractSignatures includes exports", () => {
+        assert(signature.includes("Exports:"), "Signature has Exports section");
+      });
+    }
+
+    if (testFile.classes.length > 0) {
+      recordTest("extractSignatures includes classes", () => {
+        assert(signature.includes(testFile.classes[0].name), "Signature includes class name");
+      });
+    }
+  }
+
+  // Test chunkCode
+  const longText = "A".repeat(2500);
+  const chunks = chunkCode(longText, 500);
+
+  recordTest("chunkCode splits text > 2000 chars", () => {
+    assert(Array.isArray(chunks), "chunkCode returns array");
+    assert(chunks.length > 1, "Text split into multiple chunks");
+  });
+
+  recordTest("chunkCode respects token limit", () => {
+    for (const chunk of chunks) {
+      assert(chunk.length <= 500 * 4 + 100, `Chunk size reasonable: ${chunk.length} chars`);
+    }
+  });
+
+  const shortText = "Short text";
+  const singleChunk = chunkCode(shortText, 500);
+
+  recordTest("chunkCode returns single chunk for short text", () => {
+    assert(singleChunk.length === 1, "Short text returns single chunk");
+    assert(singleChunk[0] === shortText, "Short text unchanged");
+  });
+}
+
+async function testFullPipeline(structure: CodeStructure): Promise<void> {
+  logStep(5, "Testing Full Pipeline with Mock Provider");
+
+  const mockProvider = new MockLLMProvider();
+
+  console.log("  Running generateDocumentation pipeline...");
+
+  const docs = await generateDocumentation(structure, mockProvider);
+
+  console.log(`  ✓ Pipeline complete`);
+  console.log(`    Mock provider calls: ${mockProvider.getCallCount()}`);
+
+  // Test overview section
+  recordTest("GeneratedDocs.overview has non-empty description", () => {
+    assert(
+      docs.sections.overview.description.length > 0,
+      "Overview description is non-empty",
+      docs.sections.overview.description.length
+    );
+  });
+
+  recordTest("GeneratedDocs.overview has techStack array", () => {
+    assert(Array.isArray(docs.sections.overview.techStack), "Tech stack is an array");
+    assert(docs.sections.overview.techStack.length > 0, "Tech stack is not empty");
+  });
+
+  recordTest("GeneratedDocs.overview has architectureDiagram", () => {
+    assert(
+      typeof docs.sections.overview.architectureDiagram === "string",
+      "Architecture diagram is a string"
+    );
+    assert(
+      docs.sections.overview.architectureDiagram.length > 0,
+      "Architecture diagram is non-empty"
+    );
+  });
+
+  recordTest("GeneratedDocs.overview has keyMetrics", () => {
+    assert(typeof docs.sections.overview.keyMetrics === "object", "Key metrics is an object");
+    assert(typeof docs.sections.overview.keyMetrics.files === "number", "Files metric is a number");
+    assert(typeof docs.sections.overview.keyMetrics.modules === "number", "Modules metric is a number");
+    assert(Array.isArray(docs.sections.overview.keyMetrics.languages), "Languages is an array");
+  });
+
+  recordTest("GeneratedDocs.overview metrics match structure", () => {
+    assert(
+      docs.sections.overview.keyMetrics.files === structure.files.length,
+      "Files count matches"
+    );
+    assert(
+      docs.sections.overview.keyMetrics.modules === structure.modules.length,
+      "Modules count matches"
+    );
+  });
+
+  // Test modules section
+  const moduleLimit = Math.min(structure.modules.length, 10);
+  recordTest("GeneratedDocs.modules has entries", () => {
+    assert(Array.isArray(docs.sections.modules), "Modules is an array");
+    assert(docs.sections.modules.length === moduleLimit, `Has ${moduleLimit} module summaries`);
+  });
+
+  if (docs.sections.modules.length > 0) {
+    const firstModule = docs.sections.modules[0];
+    recordTest("First module has required fields", () => {
+      assert(typeof firstModule.name === "string", "Module has name");
+      assert(typeof firstModule.path === "string", "Module has path");
+      assert(typeof firstModule.summary === "string", "Module has summary");
+      assert(Array.isArray(firstModule.keyFiles), "Module has key files array");
+      assert(Array.isArray(firstModule.publicApi), "Module has public API array");
+      assert(Array.isArray(firstModule.dependsOn), "Module has dependsOn array");
+      assert(Array.isArray(firstModule.dependedBy), "Module has dependedBy array");
+    });
+
+    recordTest("First module summary is non-empty", () => {
+      assert(firstModule.summary.length > 0, "Module summary is non-empty");
+    });
+  }
+
+  // Test patterns section
+  recordTest("GeneratedDocs.patterns has conventions array", () => {
+    assert(Array.isArray(docs.sections.patterns.conventions), "Conventions is an array");
+    assert(docs.sections.patterns.conventions.length > 0, "Conventions is not empty");
+  });
+
+  recordTest("GeneratedDocs.patterns has designPatterns array", () => {
+    assert(Array.isArray(docs.sections.patterns.designPatterns), "Design patterns is an array");
+    assert(docs.sections.patterns.designPatterns.length > 0, "Design patterns is not empty");
+  });
+
+  recordTest("GeneratedDocs.patterns has architecturalDecisions array", () => {
+    assert(Array.isArray(docs.sections.patterns.architecturalDecisions), "Architectural decisions is an array");
+    assert(
+      docs.sections.patterns.architecturalDecisions.length > 0,
+      "Architectural decisions is not empty"
+    );
+  });
+
+  // Test gettingStarted section
+  recordTest("GeneratedDocs.gettingStarted has prerequisites array", () => {
+    assert(Array.isArray(docs.sections.gettingStarted.prerequisites), "Prerequisites is an array");
+    assert(docs.sections.gettingStarted.prerequisites.length > 0, "Prerequisites is not empty");
+  });
+
+  recordTest("GeneratedDocs.gettingStarted has setupSteps array", () => {
+    assert(Array.isArray(docs.sections.gettingStarted.setupSteps), "Setup steps is an array");
+    assert(docs.sections.gettingStarted.setupSteps.length > 0, "Setup steps is not empty");
+  });
+
+  recordTest("GeneratedDocs.gettingStarted has firstTask string", () => {
+    assert(typeof docs.sections.gettingStarted.firstTask === "string", "First task is a string");
+    assert(docs.sections.gettingStarted.firstTask.length > 0, "First task is non-empty");
+  });
+
+  // Test metadata
+  recordTest("GeneratedDocs has metadata fields", () => {
+    assert(docs.id === "", "ID is initialized as empty string");
+    assert(docs.repoUrl === "", "Repo URL is initialized as empty string");
+    assert(docs.repoName === "", "Repo name is initialized as empty string");
+    assert(typeof docs.generatedAt === "string", "Generated at is a string");
+  });
+
+  recordTest("GeneratedDocs.dependencyGraph is a string", () => {
+    assert(typeof docs.sections.dependencyGraph === "string", "Dependency graph is a string");
+    assert(docs.sections.dependencyGraph.length > 0, "Dependency graph is non-empty");
+  });
+
+  // Verify mock provider was called correctly
+  const expectedCalls = 1 + moduleLimit + 2; // architecture + modules + patterns + getting-started
+  recordTest("Mock provider called expected number of times", () => {
+    assert(
+      mockProvider.getCallCount() === expectedCalls,
+      `Provider called ${mockProvider.getCallCount()} times (expected ${expectedCalls})`
+    );
+  });
+}
+
+function printDetailedResults(docs: unknown): void {
+  logStep(6, "Detailed Results");
+
+  console.log("\n📄 GENERATED DOCUMENTATION STRUCTURE:");
+  console.log(JSON.stringify(docs, null, 2).substring(0, 2000));
+  console.log("\n... (truncated)");
+}
+
+async function runTests(): Promise<void> {
+  try {
+    await setup();
+
+    const structure = await cloneAndParseRepo();
+    (globalThis as unknown as { codeStructure: CodeStructure }).codeStructure = structure;
+
+    const mockProvider = new MockLLMProvider();
+    testMockProvider(mockProvider);
+
+    testPromptBuilders(structure);
+    testUtilityFunctions(structure);
+
+    await testFullPipeline(structure);
+
+    const docs = await generateDocumentation(structure, mockProvider);
+    printDetailedResults(docs);
+
+    printSummary();
+    await cleanup();
+    process.exit(0);
+  } catch (error) {
+    console.error("\n❌ TEST FAILED UNEXPECTEDLY");
+    console.error(error);
+    printSummary();
+    await cleanup();
+    process.exit(1);
+  }
+}
+
+runTests().catch((error) => {
+  console.error("Fatal error:", error);
+  process.exit(1);
+});

turbo.json

@@ -18,6 +18,9 @@
     "db:generate": {
       "cache": false
     },
+    "db:migrate": {
+      "cache": false
+    },
     "db:push": {
       "cache": false
     }