fix: audit fixes — tier-quota bypass, webhook SSRF, auth hardening, pagination, a11y

Full audit (bugs/UI-UX/backend/feature-gap) turned up a money-leak AI quota
bypass, webhook SSRF, and a long tail of missing pagination/auth/a11y work.
Fixes land together since HANDOFF.md tracked them as one backlog.

- AI routes charge tier quota before generating; nutrition POST is author-only
- Webhook dispatch re-validates URL per delivery (SSRF/DNS-rebinding), treats
  redirects as failures; recipe.published now actually dispatches
- New indexes/unique constraints on recipes, meal-planning, comments FK cascade
- Recipe PUT/restore snapshot only inside the transaction, after validation
- Recipe DELETE cleans up S3 objects (recipe + review photos)
- Optimistic UI (favorite/star/follow/shopping-list) rolls back on failure
- Upload presign enforces file size cap + per-tier storage quota
- Route-level loading/error/not-found states across (app), admin, and root
- middleware.ts guards (app)/admin; requireAdmin checks DB role, not cached
  session; rate limiting applied to both session and API-key branches,
  bucketed per key; Stripe webhook dedupes by event id
- Pagination added to recipes, feed, profile, comments, pantry, admin tables
- Nav shows real avatar + profile link + dark-mode toggle; destructive actions
  standardized on AlertDialog
- Unsaved-changes guard + real ingredient/step validation on recipe form;
  canonical /recipes/[id] used in-app; next/image migration; aria-labels and
  alt text across icon buttons, avatars, recipe photos
- packages/api-types removed (zero callers, too drifted to safely rewire);
  openapi.ts and ai-keys error shape drift fixed; BYOK decrypt failures now
  surface instead of silently falling back to the platform key

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/app/(app)/recipes/[id]/loading.tsx

@@ -0,0 +1,29 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { ListRowSkeleton } from "@/components/shared/skeletons";
+
+export default function RecipeDetailLoading() {
+  return (
+    <div className="max-w-4xl mx-auto space-y-8">
+      <div className="space-y-4">
+        <Skeleton className="h-9 w-2/3" />
+        <div className="flex items-center gap-2">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-8 w-8 rounded-lg" />
+          ))}
+        </div>
+        <Skeleton className="h-4 w-full max-w-lg" />
+        <div className="flex flex-wrap items-center gap-3">
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-20" />
+          <Skeleton className="h-5 w-20" />
+        </div>
+      </div>
+      <Skeleton className="aspect-video w-full rounded-xl" />
+      <div className="space-y-4">
+        <Skeleton className="h-6 w-32" />
+        <ListRowSkeleton />
+        <ListRowSkeleton />
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/recipes/[id]/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Image from "next/image";
 import { notFound } from "next/navigation";
 import { headers } from "next/headers";
 import Link from "next/link";
@@ -287,11 +288,12 @@ export default async function RecipePage({ params }: Params) {
 
       {/* Cover photo */}
       {cover && (
-        <div className="aspect-video overflow-hidden rounded-xl bg-muted">
-          <img
+        <div className="relative aspect-video overflow-hidden rounded-xl bg-muted">
+          <Image
             src={getPublicUrl(cover.storageKey)}
             alt={recipe.title}
-            className="w-full h-full object-cover"
+            fill
+            className="object-cover"
           />
         </div>
       )}
@@ -373,9 +375,14 @@ export default async function RecipePage({ params }: Params) {
           <div className="space-y-3">
             <h2 className="text-xl font-semibold">Photos</h2>
             <div className="grid grid-cols-3 gap-3">
-              {recipe.photos.map((photo) => (
-                <div key={photo.id} className="aspect-square rounded-lg overflow-hidden bg-muted">
-                  <img src={getPublicUrl(photo.storageKey)} alt="" className="w-full h-full object-cover" />
+              {recipe.photos.map((photo, i) => (
+                <div key={photo.id} className="relative aspect-square rounded-lg overflow-hidden bg-muted">
+                  <Image
+                    src={getPublicUrl(photo.storageKey)}
+                    alt={`${recipe.title} photo ${i + 1}`}
+                    fill
+                    className="object-cover"
+                  />
                 </div>
               ))}
             </div>

apps/web/app/(app)/recipes/loading.tsx

@@ -0,0 +1,10 @@
+import { PageHeaderSkeleton, RecipeCardGridSkeleton } from "@/components/shared/skeletons";
+
+export default function RecipesLoading() {
+  return (
+    <div className="space-y-6">
+      <PageHeaderSkeleton actions={2} subtitle />
+      <RecipeCardGridSkeleton />
+    </div>
+  );
+}

apps/web/app/(app)/recipes/page.tsx

@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
 import { headers } from "next/headers";
+import Link from "next/link";
 import { auth } from "@/lib/auth/server";
-import { db, recipes, sql } from "@epicure/db";
+import { db, recipes, sql, count } from "@epicure/db";
 import { eq, desc, asc, and, ilike, or } from "@epicure/db";
 import { RecipesHeader } from "@/components/recipe/recipes-header";
 import { RecipesEmptyState } from "@/components/recipe/recipes-empty-state";
@@ -9,12 +10,15 @@ import { RecipesGrid } from "@/components/recipe/recipes-grid";
 
 export const metadata: Metadata = {};
 
+const PAGE_SIZE = 24;
+
 type SearchParams = Promise<{
   q?: string;
   sort?: string;
   visibility?: string;
   difficulty?: string;
   tag?: string;
+  page?: string;
 }>;
 
 const SORT_MAP = {
@@ -32,10 +36,12 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return null;
 
-  const { q, sort, visibility, difficulty, tag } = await searchParams;
+  const { q, sort, visibility, difficulty, tag, page: pageParam } = await searchParams;
   const query = (q ?? "").trim().slice(0, 200);
   const sortKey: SortKey = (sort && sort in SORT_MAP ? sort : "updated_desc") as SortKey;
   const tagFilter = tag?.trim().slice(0, 50) || undefined;
+  const page = Math.max(1, parseInt(pageParam ?? "1", 10) || 1);
+  const offset = (page - 1) * PAGE_SIZE;
 
   const visibilityFilter = visibility && ["private", "unlisted", "public"].includes(visibility)
     ? (visibility as "private" | "unlisted" | "public")
@@ -44,32 +50,72 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
     ? (difficulty as "easy" | "medium" | "hard")
     : undefined;
 
-  const userRecipes = await db.query.recipes.findMany({
-    where: and(
-      eq(recipes.authorId, session.user.id),
-      query
-        ? or(ilike(recipes.title, `%${query}%`), ilike(recipes.description, `%${query}%`))
-        : undefined,
-      visibilityFilter ? eq(recipes.visibility, visibilityFilter) : undefined,
-      difficultyFilter ? eq(recipes.difficulty, difficultyFilter) : undefined,
-      tagFilter ? sql`${recipes.tags} @> ARRAY[${tagFilter}]::text[]` : undefined,
-    ),
-    orderBy: SORT_MAP[sortKey],
-    with: { photos: true },
-  });
+  const where = and(
+    eq(recipes.authorId, session.user.id),
+    query
+      ? or(ilike(recipes.title, `%${query}%`), ilike(recipes.description, `%${query}%`))
+      : undefined,
+    visibilityFilter ? eq(recipes.visibility, visibilityFilter) : undefined,
+    difficultyFilter ? eq(recipes.difficulty, difficultyFilter) : undefined,
+    tagFilter ? sql`${recipes.tags} @> ARRAY[${tagFilter}]::text[]` : undefined,
+  );
+
+  const [userRecipes, totalRow] = await Promise.all([
+    db.query.recipes.findMany({
+      where,
+      orderBy: SORT_MAP[sortKey],
+      with: { photos: true },
+      limit: PAGE_SIZE,
+      offset,
+    }),
+    db.select({ count: count() }).from(recipes).where(where),
+  ]);
+
+  const total = totalRow[0]?.count ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  const pageHref = (p: number) => {
+    const params = new URLSearchParams();
+    if (query) params.set("q", query);
+    if (sortKey !== "updated_desc") params.set("sort", sortKey);
+    if (visibilityFilter) params.set("visibility", visibilityFilter);
+    if (difficultyFilter) params.set("difficulty", difficultyFilter);
+    if (tagFilter) params.set("tag", tagFilter);
+    if (p > 1) params.set("page", String(p));
+    const qs = params.toString();
+    return qs ? `/recipes?${qs}` : "/recipes";
+  };
 
   return (
     <div className="space-y-6">
       <RecipesHeader
-        count={userRecipes.length}
+        count={total}
         initialQuery={query}
         initialSort={sortKey}
         initialVisibility={visibilityFilter ?? ""}
         initialDifficulty={difficultyFilter ?? ""}
         initialTag={tagFilter ?? ""}
       />
-      <RecipesEmptyState query={query} count={userRecipes.length} />
-      <RecipesGrid key={`${query}-${sortKey}-${visibilityFilter}-${difficultyFilter}-${tagFilter}`} recipes={userRecipes} />
+      <RecipesEmptyState query={query} count={total} />
+      <RecipesGrid key={`${query}-${sortKey}-${visibilityFilter}-${difficultyFilter}-${tagFilter}-${page}`} recipes={userRecipes} />
+
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2 pt-2">
+          {page > 1 && (
+            <Link href={pageHref(page - 1)} className="rounded-md border px-3 py-1.5 text-sm hover:bg-accent">
+              Previous
+            </Link>
+          )}
+          <span className="text-sm text-muted-foreground px-2">
+            Page {page} of {totalPages}
+          </span>
+          {page < totalPages && (
+            <Link href={pageHref(page + 1)} className="rounded-md border px-3 py-1.5 text-sm hover:bg-accent">
+              Next
+            </Link>
+          )}
+        </div>
+      )}
     </div>
   );
 }