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/message-thread.tsx

@@ -25,19 +25,50 @@ export function MessageThread({
   const t = useTranslations("messages");
   const [messages, setMessages] = useState<Message[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [content, setContent] = useState("");
   const [sending, setSending] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
 
+  // Loads the latest page of messages. On the very first load this replaces
+  // the (empty) list outright; on subsequent polls it merges in only the
+  // messages we don't already have, so it doesn't clobber older history the
+  // user paged back through via loadMore().
   const load = useCallback(async () => {
     const res = await fetch(`/api/v1/conversations/${conversationId}/messages`);
     if (res.ok) {
-      const data = (await res.json()) as { messages: Message[] };
-      setMessages(data.messages);
+      const data = (await res.json()) as { messages: Message[]; nextCursor: string | null };
+      setMessages((prev) => {
+        if (prev.length === 0) return data.messages;
+        const existingIds = new Set(prev.map((m) => m.id));
+        const fresh = data.messages.filter((m) => !existingIds.has(m.id));
+        return fresh.length > 0 ? [...prev, ...fresh] : prev;
+      });
+      setNextCursor((prev) => prev ?? data.nextCursor);
     }
     setLoading(false);
   }, [conversationId]);
 
+  // Loads an older page (before the oldest message currently loaded) and
+  // prepends it, using the server-provided cursor.
+  const loadMore = useCallback(async () => {
+    if (!nextCursor || loadingMore) return;
+    setLoadingMore(true);
+    try {
+      const res = await fetch(
+        `/api/v1/conversations/${conversationId}/messages?before=${encodeURIComponent(nextCursor)}`
+      );
+      if (res.ok) {
+        const data = (await res.json()) as { messages: Message[]; nextCursor: string | null };
+        setMessages((prev) => [...data.messages, ...prev]);
+        setNextCursor(data.nextCursor);
+      }
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [conversationId, nextCursor, loadingMore]);
+
   useEffect(() => {
     void load();
     const interval = setInterval(() => { void load(); }, 5000);
@@ -77,21 +108,35 @@ export function MessageThread({
         ) : messages.length === 0 ? (
           <p className="text-sm text-muted-foreground text-center py-8">{t("noMessagesYet")}</p>
         ) : (
-          messages.map((m) => {
-            const isOwn = m.senderId === currentUserId;
-            return (
-              <div key={m.id} className={cn("flex", isOwn ? "justify-end" : "justify-start")}>
-                <div
-                  className={cn(
-                    "max-w-[70%] rounded-2xl px-4 py-2 text-sm whitespace-pre-wrap",
-                    isOwn ? "bg-primary text-primary-foreground" : "bg-muted"
-                  )}
+          <>
+            {nextCursor && (
+              <div className="flex justify-center pb-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => { void loadMore(); }}
+                  disabled={loadingMore}
                 >
-                  {m.content}
-                </div>
+                  {loadingMore ? t("loadingOlder") : t("loadOlder")}
+                </Button>
               </div>
-            );
-          })
+            )}
+            {messages.map((m) => {
+              const isOwn = m.senderId === currentUserId;
+              return (
+                <div key={m.id} className={cn("flex", isOwn ? "justify-end" : "justify-start")}>
+                  <div
+                    className={cn(
+                      "max-w-[70%] rounded-2xl px-4 py-2 text-sm whitespace-pre-wrap",
+                      isOwn ? "bg-primary text-primary-foreground" : "bg-muted"
+                    )}
+                  >
+                    {m.content}
+                  </div>
+                </div>
+              );
+            })}
+          </>
         )}
         <div ref={bottomRef} />
       </div>
@@ -109,7 +154,12 @@ export function MessageThread({
           rows={1}
           className="resize-none"
         />
-        <Button size="icon" onClick={() => { void send(); }} disabled={!content.trim() || sending}>
+        <Button
+          size="icon"
+          aria-label={t("send")}
+          onClick={() => { void send(); }}
+          disabled={!content.trim() || sending}
+        >
           <Send className="h-4 w-4" />
         </Button>
       </div>