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/components/social/cooked-it-review.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
+import Image from "next/image";
 import { useTranslations, useLocale } from "next-intl";
 import { Star, Camera, X, ChefHat } from "lucide-react";
 import { toast } from "sonner";
@@ -86,7 +87,7 @@ export function CookedItReview({
       const res = await fetch("/api/v1/upload/presign", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ recipeId, contentType: file.type, purpose: "review" }),
+        body: JSON.stringify({ recipeId, contentType: file.type, purpose: "review", fileSize: file.size }),
       });
       if (!res.ok) {
         toast.error(t("reviewPhotoFailed"));
@@ -143,11 +144,12 @@ export function CookedItReview({
         />
         <div className="flex items-center gap-3">
           {(preview || photoKey) && (
-            <div className="relative">
-              <img
+            <div className="relative h-16 w-16">
+              <Image
                 src={preview ?? getPublicUrl(photoKey!)}
-                alt=""
-                className="h-16 w-16 rounded-lg object-cover border"
+                alt="Your cooked-it photo"
+                fill
+                className="rounded-lg object-cover border"
               />
               <button
                 type="button"
@@ -187,7 +189,7 @@ export function CookedItReview({
           {reviews.map((r) => (
             <div key={r.id} className="flex gap-3">
               <Avatar className="h-8 w-8">
-                <AvatarImage src={r.user.avatarUrl ?? undefined} />
+                <AvatarImage src={r.user.avatarUrl ?? undefined} alt={r.user.name} />
                 <AvatarFallback>{r.user.name.slice(0, 2).toUpperCase()}</AvatarFallback>
               </Avatar>
               <div className="flex-1 space-y-1.5">
@@ -204,11 +206,14 @@ export function CookedItReview({
                 </div>
                 {r.reviewText && <p className="text-sm text-muted-foreground">{r.reviewText}</p>}
                 {r.photoKey && (
-                  <img
-                    src={getPublicUrl(r.photoKey)}
-                    alt=""
-                    className="h-32 w-32 rounded-lg object-cover border"
-                  />
+                  <div className="relative h-32 w-32">
+                    <Image
+                      src={getPublicUrl(r.photoKey)}
+                      alt={`${r.user.name}'s cooked-it photo`}
+                      fill
+                      className="rounded-lg object-cover border"
+                    />
+                  </div>
                 )}
               </div>
             </div>