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/comments-section.tsx

@@ -9,6 +9,16 @@ import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Separator } from "@/components/ui/separator";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { CommentReactions } from "@/components/social/comment-reactions";
 import { ReportButton } from "@/components/social/report-button";
 import { cn } from "@/lib/utils";
@@ -24,6 +34,15 @@ type Comment = {
   userAvatarUrl: string | null;
 };
 
+const COMMENTS_PAGE_SIZE = 20;
+
+type CommentsResponse = {
+  data: Comment[];
+  total: number;
+  limit: number;
+  offset: number;
+};
+
 const MAX_VISUAL_INDENT = 4;
 const MENTION_REGEX = /@([a-z0-9_-]{3,30})/gi;
 
@@ -125,6 +144,7 @@ function CommentItem({
   onRefresh: () => void;
 }) {
   const [showReply, setShowReply] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
   const isOwn = comment.userId === currentUserId;
   const t = useTranslations("social");
   const tCommon = useTranslations("common");
@@ -141,7 +161,7 @@ function CommentItem({
     <div className={cn("space-y-3", indented && "ml-10 border-l pl-4")}>
       <div className="flex gap-3">
         <Avatar className={cn("shrink-0 mt-0.5", depth === 0 ? "h-7 w-7" : "h-6 w-6")}>
-          <AvatarImage src={comment.userAvatarUrl ?? ""} />
+          <AvatarImage src={comment.userAvatarUrl ?? ""} alt={comment.userName} />
           <AvatarFallback className="text-xs">{comment.userName.slice(0, 2).toUpperCase()}</AvatarFallback>
         </Avatar>
         <div className="flex-1 min-w-0 space-y-1">
@@ -165,13 +185,30 @@ function CommentItem({
             )}
             {isOwn && (
               <button
-                onClick={deleteComment}
+                onClick={() => setConfirmOpen(true)}
                 className="text-xs text-muted-foreground hover:text-destructive flex items-center gap-1"
               >
                 <Trash2 className="h-3 w-3" /> {tCommon("delete")}
               </button>
             )}
           </div>
+          <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>{t("deleteCommentTitle")}</AlertDialogTitle>
+                <AlertDialogDescription>{t("deleteCommentDescription")}</AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={() => { void deleteComment(); }}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                >
+                  {tCommon("delete")}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
           {showReply && (
             <CommentForm
               recipeId={recipeId}
@@ -212,15 +249,40 @@ export function CommentsSection({
 }) {
   const [comments, setComments] = useState<Comment[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [topLevelOffset, setTopLevelOffset] = useState(0);
+  const [topLevelTotal, setTopLevelTotal] = useState(0);
   const t = useTranslations("social");
   const tCommon = useTranslations("common");
 
+  // Full reload from the first page — used on mount and after any mutation (post/reply/delete)
+  // so the thread stays consistent rather than trying to patch pagination state in place.
   const load = useCallback(async () => {
-    const res = await fetch(`/api/v1/recipes/${recipeId}/comments`);
-    if (res.ok) setComments(await res.json() as Comment[]);
+    const res = await fetch(`/api/v1/recipes/${recipeId}/comments?limit=${COMMENTS_PAGE_SIZE}&offset=0`);
+    if (res.ok) {
+      const json = await res.json() as CommentsResponse;
+      setComments(json.data);
+      setTopLevelTotal(json.total);
+      setTopLevelOffset(json.data.filter((c) => !c.parentId).length);
+    }
     setLoading(false);
   }, [recipeId]);
 
+  const loadMore = useCallback(async () => {
+    setLoadingMore(true);
+    try {
+      const res = await fetch(`/api/v1/recipes/${recipeId}/comments?limit=${COMMENTS_PAGE_SIZE}&offset=${topLevelOffset}`);
+      if (res.ok) {
+        const json = await res.json() as CommentsResponse;
+        setComments((prev) => [...prev, ...json.data]);
+        setTopLevelTotal(json.total);
+        setTopLevelOffset((prev) => prev + json.data.filter((c) => !c.parentId).length);
+      }
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [recipeId, topLevelOffset]);
+
   useEffect(() => { void load(); }, [load]);
 
   const { topLevel, childrenByParent } = useMemo(() => {
@@ -269,6 +331,13 @@ export function CommentsSection({
               />
             </div>
           ))}
+          {topLevelOffset < topLevelTotal && (
+            <div className="flex justify-center pt-2">
+              <Button size="sm" variant="outline" onClick={() => void loadMore()} disabled={loadingMore}>
+                {loadingMore ? t("loadingMoreComments") : t("loadMoreComments")}
+              </Button>
+            </div>
+          )}
         </div>
       )}
     </div>