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]/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>