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/admin/users/[id]/page.tsx

@@ -72,7 +72,7 @@ export default async function AdminUserDetailPage({ params }: PageProps) {
 
       <div className="flex items-center gap-4">
         <Avatar className="h-16 w-16">
-          <AvatarImage src={user.avatarUrl ?? ""} />
+          <AvatarImage src={user.avatarUrl ?? ""} alt={user.name} />
           <AvatarFallback className="text-lg">
             {user.name.slice(0, 2).toUpperCase()}
           </AvatarFallback>

apps/web/app/admin/users/page.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { db } from "@epicure/db";
+import { db, count } from "@epicure/db";
 import { users } from "@epicure/db";
 import { desc } from "@epicure/db";
 import { Badge } from "@/components/ui/badge";
@@ -9,6 +9,12 @@ import Link from "next/link";
 
 export const metadata: Metadata = {};
 
+const PAGE_SIZE = 100;
+
+interface PageProps {
+  searchParams: Promise<{ page?: string }>;
+}
+
 const ROLE_COLORS = {
   user: "secondary",
   moderator: "outline",
@@ -20,12 +26,21 @@ const TIER_COLORS = {
   pro: "default",
 } as const;
 
-export default async function AdminUsersPage() {
-  const allUsers = await db
-    .select()
-    .from(users)
-    .orderBy(desc(users.createdAt))
-    .limit(100);
+export default async function AdminUsersPage({ searchParams }: PageProps) {
+  const { page: pageParam } = await searchParams;
+  const page = Math.max(1, parseInt(pageParam ?? "1", 10) || 1);
+  const offset = (page - 1) * PAGE_SIZE;
+
+  const [allUsers, totalRow] = await Promise.all([
+    db
+      .select()
+      .from(users)
+      .orderBy(desc(users.createdAt))
+      .limit(PAGE_SIZE)
+      .offset(offset),
+    db.select({ count: count() }).from(users),
+  ]);
+  const total = totalRow[0]?.count ?? 0;
 
   return (
     <div className="space-y-6">
@@ -33,7 +48,7 @@ export default async function AdminUsersPage() {
         <h1 className="text-2xl font-bold tracking-tight">Users</h1>
         <CreateUserDialog />
       </div>
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-x-auto">
         <table className="w-full text-sm">
           <thead className="border-b bg-muted/50">
             <tr>
@@ -49,7 +64,7 @@ export default async function AdminUsersPage() {
                 <td className="px-4 py-3">
                   <Link href={`/admin/users/${user.id}`} className="flex items-center gap-3 group">
                     <Avatar className="h-8 w-8">
-                      <AvatarImage src={user.avatarUrl ?? ""} />
+                      <AvatarImage src={user.avatarUrl ?? ""} alt={user.name} />
                       <AvatarFallback className="text-xs">
                         {user.name.slice(0, 2).toUpperCase()}
                       </AvatarFallback>
@@ -74,6 +89,25 @@ export default async function AdminUsersPage() {
           </tbody>
         </table>
       </div>
+
+      <div className="flex gap-2">
+        {page > 1 && (
+          <Link
+            href={`/admin/users?page=${page - 1}`}
+            className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
+          >
+            Previous
+          </Link>
+        )}
+        {offset + allUsers.length < total && (
+          <Link
+            href={`/admin/users?page=${page + 1}`}
+            className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
+          >
+            Next
+          </Link>
+        )}
+      </div>
     </div>
   );
 }