fix: webhook signature verification, theme provider lint, add deployment configs

Author: Auto-Co

README.md

@@ -1,36 +1,67 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# DocuCraft — AI Documentation from Your GitHub Repos
 
-## Getting Started
+DocuCraft automatically generates PR descriptions, changelogs, and documentation from your GitHub repositories.
+
+## Phase 0: PR Pilot
+
+The initial release ("PR Pilot") focuses on two core features:
+- **Auto PR Descriptions** — Every pull request gets a clear, well-structured description generated from code changes
+- **Changelog Generation** — Generate release notes from merged PRs with one click
+
+## Tech Stack
+
+- **Frontend:** Next.js 16, React 19, Tailwind CSS v4, shadcn/ui
+- **Backend:** Next.js API routes (serverless)
+- **Database:** Supabase (Postgres)
+- **AI:** OpenAI (GPT-4o-mini)
+- **Auth:** GitHub App OAuth
+- **Deployment:** Vercel (frontend + API), Railway (background tasks), Supabase (DB)
 
-First, run the development server:
+## Getting Started
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+# Copy environment variables
+cp .env.example .env.local
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+# Fill in your credentials:
+# - Supabase project URL and keys
+# - GitHub App credentials
+# - OpenAI API key
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+# Run development server
+npm run dev
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+## Environment Variables
 
-## Learn More
+| Variable | Description |
+|----------|-------------|
+| `NEXT_PUBLIC_SUPABASE_URL` | Supabase project URL |
+| `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Supabase anonymous key |
+| `SUPABASE_SERVICE_ROLE_KEY` | Supabase service role key |
+| `GITHUB_APP_ID` | GitHub App ID |
+| `GITHUB_APP_CLIENT_ID` | GitHub App client ID |
+| `GITHUB_APP_CLIENT_SECRET` | GitHub App client secret |
+| `GITHUB_APP_PRIVATE_KEY` | GitHub App private key |
+| `GITHUB_APP_WEBHOOK_SECRET` | GitHub App webhook secret |
+| `OPENAI_API_KEY` | OpenAI API key |
+| `OPENAI_MODEL` | OpenAI model (default: gpt-4o-mini) |
+| `NEXT_PUBLIC_APP_URL` | App URL (http://localhost:3000 for dev) |
 
-To learn more about Next.js, take a look at the following resources:
+## Architecture
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+1. **GitHub App** receives `pull_request` webhook events
+2. **Webhook handler** fetches PR diff, generates AI description via OpenAI
+3. **AI description** posted as PR comment and stored in Supabase
+4. **Dashboard** displays repos, PRs, and generated changelogs
+5. **Changelog generation** groups merged PRs and generates release notes
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Pricing
 
-## Deploy on Vercel
+- **Free** — Open source repos
+- **$29/mo Pro** — Individual developers, private repos
+- **$79/mo Team** — Small teams, multiple installations
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+MIT

package-lock.json

@@ -21,6 +21,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "shadcn": "^4.11.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },

package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://railway.app/railway.schema.json",
+  "build": {
+    "builder": "nixpacks",
+    "buildCommand": "npm run build",
+    "watchPatterns": ["src/**"]
+  },
+  "deploy": {
+    "numReplicas": 1,
+    "restartPolicyType": "on-failure",
+    "restartPolicyMaxRetries": 3,
+    "healthcheckPath": "/",
+    "healthcheckTimeout": 60
+  }
+}

railway.json

@@ -3,17 +3,27 @@ import { createAdminClient } from "@/lib/supabase/admin";
 import { getPRDiff, getPRFiles, postPRComment } from "@/lib/github/api";
 import { getInstallationToken } from "@/lib/github/token";
 import { generatePRDescription } from "@/lib/ai/generate";
+import { verifyWebhookSignature } from "@/lib/github/webhook";
 
 export async function POST(request: NextRequest) {
-  const payload = await request.json();
+  const payloadText = await request.text();
+  const payload = JSON.parse(payloadText);
 
   const event = request.headers.get("x-github-event");
   const deliveryId = request.headers.get("x-github-delivery");
+  const signature = request.headers.get("x-hub-signature-256");
 
   if (!event || !deliveryId) {
     return NextResponse.json({ error: "Missing headers" }, { status: 400 });
   }
 
+  const webhookSecret = process.env.GITHUB_APP_WEBHOOK_SECRET;
+  if (webhookSecret && signature) {
+    if (!verifyWebhookSignature(payloadText, signature, webhookSecret)) {
+      return NextResponse.json({ error: "Invalid signature" }, { status: 401 });
+    }
+  }
+
   if (event !== "pull_request") {
     return NextResponse.json({ ok: true, message: "Ignored event type" });
   }

src/app/api/github/webhook/route.ts

@@ -39,13 +39,18 @@ export default function Dashboard() {
   }, []);
 
   useEffect(() => {
-    if (!selectedRepo) return;
+    const repoId = selectedRepo;
+    if (!repoId) return;
 
     async function loadPRs() {
       try {
-        const res = await fetch(`/api/prs?repo_id=${selectedRepo}`);
+        const res = await fetch(`/api/prs?repo_id=${repoId}`);
         const data = await res.json();
-        setPrs((prev) => ({ ...prev, [selectedRepo]: data.prs || [] }));
+        setPrs((prev) => {
+          const next = { ...prev };
+          next[repoId as number] = data.prs || [];
+          return next;
+        });
       } catch (error) {
         console.error("Failed to load PRs:", error);
       }

src/app/dashboard/page.tsx

@@ -19,20 +19,21 @@ const ThemeProviderContext = React.createContext<ThemeProviderState | undefined>
   undefined
 );
 
+function getInitialTheme(storageKey: string, defaultTheme: Theme): Theme {
+  if (typeof window === "undefined") return defaultTheme;
+  const stored = localStorage.getItem(storageKey) as Theme | null;
+  return stored || defaultTheme;
+}
+
 export function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "docucraft-theme",
   ...props
 }: ThemeProviderProps) {
-  const [theme, setTheme] = React.useState<Theme>(defaultTheme);
-
-  React.useEffect(() => {
-    const stored = localStorage.getItem(storageKey) as Theme | null;
-    if (stored) {
-      setTheme(stored);
-    }
-  }, [storageKey]);
+  const [theme, setTheme] = React.useState<Theme>(
+    getInitialTheme(storageKey, defaultTheme)
+  );
 
   React.useEffect(() => {
     const root = document.documentElement;
@@ -49,6 +50,19 @@ export function ThemeProvider({
     }
   }, [theme]);
 
+  React.useEffect(() => {
+    const onSystemChange = (e: MediaQueryListEvent) => {
+      if (theme === "system") {
+        root.classList.remove("light", "dark");
+        root.classList.add(e.matches ? "dark" : "light");
+      }
+    };
+    const root = document.documentElement;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener("change", onSystemChange);
+    return () => mq.removeEventListener("change", onSystemChange);
+  }, [theme]);
+
   const value = React.useMemo(
     () => ({
       theme,

src/components/theme-provider.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useTheme } from "next-themes"
+import { useTheme } from "@/components/theme-provider"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
 

src/components/ui/sonner.tsx

@@ -1,8 +1,10 @@
 import OpenAI from "openai";
 
-const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY,
-});
+function getOpenAI() {
+  return new OpenAI({
+    apiKey: process.env.OPENAI_API_KEY,
+  });
+}
 
 export async function generatePRDescription(params: {
   title: string;
@@ -32,7 +34,7 @@ Generate a PR description with:
 
 Keep it professional and concise. Use markdown.`;
 
-  const response = await openai.chat.completions.create({
+  const response = await getOpenAI().chat.completions.create({
     model: process.env.OPENAI_MODEL || "gpt-4o-mini",
     messages: [{ role: "user", content: prompt }],
     temperature: 0.3,
@@ -64,7 +66,7 @@ Generate a changelog with:
 
 Keep it professional and user-focused. Use markdown.`;
 
-  const response = await openai.chat.completions.create({
+  const response = await getOpenAI().chat.completions.create({
     model: process.env.OPENAI_MODEL || "gpt-4o-mini",
     messages: [{ role: "user", content: prompt }],
     temperature: 0.3,

src/lib/ai/generate.ts

@@ -0,0 +1,19 @@
+[project]
+name = "docucraft"
+plan = "free"
+
+[auth]
+enabled = true
+sites_url = "http://localhost:3000"
+additional_redirect_urls = ["https://docucraft.dev/**"]
+
+[api]
+enabled = true
+port = 54321
+schemas = ["public", "graphql_public"]
+
+[db]
+migration_dir = "supabase/migrations"
+
+[storage]
+enabled = false