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)/u/[username]/loading.tsx

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { SquareTileSkeleton } from "@/components/shared/skeletons";
+
+export default function UserProfileLoading() {
+  return (
+    <div className="max-w-4xl mx-auto space-y-10">
+      <div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center">
+        <Skeleton className="h-24 w-24 shrink-0 rounded-full" />
+        <div className="flex-1 space-y-3">
+          <div className="space-y-2">
+            <Skeleton className="h-7 w-40" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+          <Skeleton className="h-4 w-64" />
+          <div className="flex flex-wrap gap-2">
+            <Skeleton className="h-6 w-20 rounded-full" />
+            <Skeleton className="h-6 w-24 rounded-full" />
+            <Skeleton className="h-6 w-24 rounded-full" />
+          </div>
+        </div>
+      </div>
+      <div className="space-y-4">
+        <Skeleton className="h-6 w-24" />
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <SquareTileSkeleton key={i} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/u/[username]/page.tsx

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import { headers } from "next/headers";
 import Link from "next/link";
+import Image from "next/image";
 import { auth } from "@/lib/auth/server";
 import {
   db,
@@ -20,7 +21,12 @@ import { BlockButton } from "@/components/social/block-button";
 import { MessageButton } from "@/components/social/message-button";
 import { getPublicUrl } from "@/lib/storage";
 
-type Params = { params: Promise<{ username: string }> };
+const PAGE_SIZE = 24;
+
+type Params = {
+  params: Promise<{ username: string }>;
+  searchParams: Promise<{ page?: string }>;
+};
 
 export async function generateMetadata({ params }: Params) {
   const { username } = await params;
@@ -28,8 +34,11 @@ export async function generateMetadata({ params }: Params) {
   return { title: user ? `${user.name} (@${user.username})` : "Profile" };
 }
 
-export default async function UserProfilePage({ params }: Params) {
+export default async function UserProfilePage({ params, searchParams }: Params) {
   const { username } = await params;
+  const { page: pageParam } = await searchParams;
+  const page = Math.max(1, parseInt(pageParam ?? "1", 10) || 1);
+  const offset = (page - 1) * PAGE_SIZE;
 
   const session = await auth.api.getSession({ headers: await headers() });
 
@@ -52,7 +61,8 @@ export default async function UserProfilePage({ params }: Params) {
     db.query.recipes.findMany({
       where: and(eq(recipes.authorId, user.id), eq(recipes.visibility, "public")),
       orderBy: desc(recipes.createdAt),
-      limit: 24,
+      limit: PAGE_SIZE,
+      offset,
       with: {
         photos: { orderBy: (t, { asc }) => asc(t.order), limit: 1 },
       },
@@ -62,6 +72,7 @@ export default async function UserProfilePage({ params }: Params) {
   const followerCount = followerCountRow[0]?.count ?? 0;
   const followingCount = followingCountRow[0]?.count ?? 0;
   const recipeCount = recipeCountRow[0]?.count ?? 0;
+  const totalPages = Math.max(1, Math.ceil(recipeCount / PAGE_SIZE));
 
   let isFollowing = false;
   let isBlocked = false;
@@ -148,15 +159,17 @@ export default async function UserProfilePage({ params }: Params) {
               return (
                 <Link
                   key={recipe.id}
-                  href={`/r/${recipe.id}`}
+                  href={`/recipes/${recipe.id}`}
                   className="group block rounded-xl overflow-hidden border bg-card hover:shadow-md transition-shadow"
                 >
-                  <div className="aspect-square bg-muted overflow-hidden">
+                  <div className="relative aspect-square bg-muted overflow-hidden">
                     {cover ? (
-                      <img
+                      <Image
                         src={getPublicUrl(cover.storageKey)}
                         alt={recipe.title}
-                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                        fill
+                        sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, 25vw"
+                        className="object-cover group-hover:scale-105 transition-transform duration-200"
                       />
                     ) : (
                       <div className="w-full h-full flex items-center justify-center text-muted-foreground text-3xl">
@@ -171,6 +184,30 @@ export default async function UserProfilePage({ params }: Params) {
               );
             })}
           </div>
+
+          {totalPages > 1 && (
+            <div className="flex items-center justify-center gap-2 pt-2">
+              {page > 1 && (
+                <Link
+                  href={`/u/${username}${page - 1 > 1 ? `?page=${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={`/u/${username}?page=${page + 1}`}
+                  className="rounded-md border px-3 py-1.5 text-sm hover:bg-accent"
+                >
+                  Next
+                </Link>
+              )}
+            </div>
+          )}
         </div>
       ) : (
         <div className="text-center py-16 text-muted-foreground">