feat: batch-cook shopping list (already worked) + leftover expiry reminders

Shopping list add already worked generically for batch-cook recipes —
no code needed there.

New: mark a specific batch-cook dish as "cooked today", track its
fridge expiry (cookingHistory.batchDishId), surface a "Leftovers
expiring soon" widget on the pantry page, and send a daily push+email
reminder via a new /api/internal/cron/leftover-reminders endpoint
(mirrors the weekly-digest cron pattern; doesn't use the social
notifications table, which requires a non-null actor and isn't built
for self-reminders).

Also fixes, from user-reported bugs:
- Recipe cards showed no batch-cook badge/dish-count/prep-time in some
  views — added dishCount + prepMins/cookMins (now generated by the AI
  and persisted) to the card component and /recipes query.
- Batch-cook descriptions occasionally contained raw markdown
  (**bold**) — added explicit "plain prose only" prompt instructions
  and a stripMarkdown() defensive fallback at render time.
- Truncated/cut-off descriptions — the generateObject call had no
  maxOutputTokens set, so long structured responses could get cut off
  mid-field; now capped explicitly at 8000.
- Generate dialogs (batch-cook + the main AI dialog) could show
  buttons unreachable once the progress bar appeared mid-generation —
  restructured so the action row is pinned outside the scrollable
  content area, not affected by content height changes.
- /api/internal/* routes were being redirected to /login by middleware
  before their own CRON_SECRET check ever ran (pre-existing bug,
  affected the weekly-digest cron too) — added to PUBLIC_PATHS.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/components/pantry/expiring-leftovers.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { AlertTriangle } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+type Leftover = {
+  recipeId: string;
+  dishName: string;
+  recipeTitle: string;
+  expiresAt: string;
+  daysLeft: number;
+};
+
+export function ExpiringLeftovers({ leftovers }: { leftovers: Leftover[] }) {
+  const t = useTranslations("pantry");
+
+  if (leftovers.length === 0) return null;
+
+  return (
+    <div className="rounded-xl border p-4 space-y-3">
+      <h2 className="font-semibold flex items-center gap-2">
+        <AlertTriangle className="h-4 w-4 text-orange-500" />
+        {t("expiringLeftoversTitle")}
+      </h2>
+      <div className="space-y-2">
+        {leftovers.map((l) => (
+          <Link
+            key={`${l.recipeId}-${l.dishName}`}
+            href={`/recipes/${l.recipeId}`}
+            className="flex items-center justify-between gap-3 rounded-lg border p-2.5 hover:bg-accent transition-colors"
+          >
+            <div className="min-w-0">
+              <p className="text-sm font-medium truncate">{l.dishName}</p>
+              <p className="text-xs text-muted-foreground truncate">{l.recipeTitle}</p>
+            </div>
+            <Badge
+              variant="outline"
+              className={l.daysLeft <= 0 ? "text-destructive border-destructive shrink-0" : "text-orange-500 border-orange-500 shrink-0"}
+            >
+              {l.daysLeft <= 0
+                ? t("expiringToday")
+                : t("expiringInDays", { days: l.daysLeft })}
+            </Badge>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/components/recipe/ai-generate-dialog.tsx

@@ -216,7 +216,8 @@ export function AiGenerateDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
+      <DialogContent className="max-w-xl max-h-[85vh] flex flex-col gap-0 p-0">
+        <div className="overflow-y-auto p-4 space-y-4 min-h-0">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Sparkles className="h-5 w-5 text-primary" />
@@ -370,8 +371,9 @@ export function AiGenerateDialog({
             label={busy ? (tab === "photo" ? t("analyzePhoto") : tab === "batch" ? tBatch("generating") : t("generating")) : undefined}
           />
         </div>
+        </div>
         {/* Actions */}
-        <div className="flex gap-2 justify-end pt-1">
+        <div className="flex gap-2 justify-end p-4 border-t shrink-0">
           <Button variant="ghost" onClick={handleClose} disabled={busy}>
             {tCommon("cancel")}
           </Button>

apps/web/components/recipe/batch-cook-dishes.tsx

@@ -1,7 +1,12 @@
 "use client";
 
+import { useState } from "react";
 import { useTranslations } from "next-intl";
-import { Snowflake, Refrigerator, ChefHat } from "lucide-react";
+import { toast } from "sonner";
+import { Snowflake, Refrigerator, ChefHat, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useLocale } from "@/lib/i18n/provider";
+import { stripMarkdown } from "@/lib/utils";
 
 type Dish = {
   id: string;
@@ -11,10 +16,40 @@ type Dish = {
   freezerFriendly: boolean;
   freezerNote: string | null;
   dayOfInstructions: string;
+  cookedAt: string | null;
 };
 
-export function BatchCookDishes({ dishes }: { dishes: Dish[] }) {
+function expiresOn(cookedAt: string, fridgeDays: number): Date {
+  const d = new Date(cookedAt);
+  d.setDate(d.getDate() + fridgeDays);
+  return d;
+}
+
+export function BatchCookDishes({ recipeId, dishes: initialDishes }: { recipeId: string; dishes: Dish[] }) {
   const t = useTranslations("recipe");
+  const { locale } = useLocale();
+  const [dishes, setDishes] = useState(initialDishes);
+  const [markingId, setMarkingId] = useState<string | null>(null);
+
+  async function markCooked(dishId: string) {
+    setMarkingId(dishId);
+    try {
+      const res = await fetch(`/api/v1/recipes/${recipeId}/cooked`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ batchDishId: dishId, deductFromPantry: false }),
+      });
+      if (!res.ok) {
+        toast.error(t("batchCookMarkFailed"));
+        return;
+      }
+      const now = new Date().toISOString();
+      setDishes((prev) => prev.map((d) => (d.id === dishId ? { ...d, cookedAt: now } : d)));
+      toast.success(t("batchCookMarkSuccess"));
+    } finally {
+      setMarkingId(null);
+    }
+  }
 
   return (
     <div className="space-y-4">
@@ -24,7 +59,7 @@ export function BatchCookDishes({ dishes }: { dishes: Dish[] }) {
           <div key={dish.id} className="rounded-xl border p-4 space-y-3">
             <div>
               <h3 className="font-semibold">{dish.name}</h3>
-              {dish.description && <p className="text-sm text-muted-foreground mt-0.5">{dish.description}</p>}
+              {dish.description && <p className="text-sm text-muted-foreground mt-0.5">{stripMarkdown(dish.description)}</p>}
             </div>
 
             <div className="flex flex-wrap gap-2 text-xs">
@@ -47,9 +82,29 @@ export function BatchCookDishes({ dishes }: { dishes: Dish[] }) {
               <ChefHat className="h-4 w-4 text-primary shrink-0 mt-0.5" />
               <div>
                 <p className="text-xs font-medium">{t("batchCookDayOf")}</p>
-                <p className="text-sm text-muted-foreground mt-0.5">{dish.dayOfInstructions}</p>
+                <p className="text-sm text-muted-foreground mt-0.5">{stripMarkdown(dish.dayOfInstructions)}</p>
               </div>
             </div>
+
+            {dish.cookedAt ? (
+              <p className="text-xs text-muted-foreground flex items-center gap-1.5">
+                <Check className="h-3.5 w-3.5 text-primary" />
+                {t("batchCookExpiresOn", {
+                  date: expiresOn(dish.cookedAt, dish.fridgeDays).toLocaleDateString(locale, { month: "short", day: "numeric" }),
+                })}
+              </p>
+            ) : (
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-full"
+                disabled={markingId === dish.id}
+                onClick={() => { void markCooked(dish.id); }}
+              >
+                <ChefHat className="h-3.5 w-3.5" />
+                {t("batchCookMarkCooked")}
+              </Button>
+            )}
           </div>
         ))}
       </div>

apps/web/components/recipe/batch-cook-generate-dialog.tsx

@@ -73,22 +73,24 @@ export function BatchCookGenerateDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="max-w-md max-h-[85vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <ChefHat className="h-5 w-5 text-primary" />
-            {t("wizardTitle")}
-          </DialogTitle>
-          <DialogDescription>{t("wizardDescription")}</DialogDescription>
-        </DialogHeader>
+      <DialogContent className="max-w-md max-h-[85vh] flex flex-col gap-0 p-0">
+        <div className="overflow-y-auto p-4 space-y-4 min-h-0">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <ChefHat className="h-5 w-5 text-primary" />
+              {t("wizardTitle")}
+            </DialogTitle>
+            <DialogDescription>{t("wizardDescription")}</DialogDescription>
+          </DialogHeader>
 
-        <BatchCookFields state={fields} onChange={setFields} disabled={busy} />
+          <BatchCookFields state={fields} onChange={setFields} disabled={busy} />
 
-        <div className="min-h-[26px]">
-          <FakeProgressBar active={busy} durationMs={20000} label={busy ? t("generating") : undefined} />
+          <div className="min-h-[26px]">
+            <FakeProgressBar active={busy} durationMs={20000} label={busy ? t("generating") : undefined} />
+          </div>
         </div>
 
-        <div className="flex gap-2 justify-end pt-1">
+        <div className="flex gap-2 justify-end p-4 border-t shrink-0">
           <Button variant="ghost" onClick={handleClose} disabled={busy}>
             {tCommon("cancel")}
           </Button>

apps/web/components/recipe/recipes-grid.tsx

@@ -28,9 +28,9 @@ import { toast } from "sonner";
 import { getPublicUrl } from "@/lib/storage";
 import { useLocale } from "@/lib/i18n/provider";
 import { Badge } from "@/components/ui/badge";
-import { Clock, Users } from "lucide-react";
+import { Clock, Users, Utensils } from "lucide-react";
 import Link from "next/link";
-import { cn } from "@/lib/utils";
+import { cn, stripMarkdown } from "@/lib/utils";
 
 type Recipe = {
   id: string;
@@ -46,6 +46,7 @@ type Recipe = {
   photos?: Array<{ storageKey: string; isCover: boolean }>;
   isFavorited?: boolean;
   isBatchCook?: boolean;
+  dishCount?: number;
 };
 
 /** Stops the click from bubbling to the card's own Link/select handler. */
@@ -98,6 +99,7 @@ function RecipeThumb({ recipe, selectMode, selected, className }: { recipe: Reci
 
 function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected: boolean; selectMode: boolean }) {
   const t = useTranslations("recipe");
+  const tBatch = useTranslations("batchCooking");
   const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
   const VisibilityIcon = VISIBILITY_ICON[recipe.visibility];
 
@@ -122,7 +124,9 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
           {recipe.isBatchCook && <ChefHat className="h-3.5 w-3.5 text-primary shrink-0" />}
         </div>
         {recipe.description && (
-          <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{recipe.description}</p>
+          <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
+            {recipe.isBatchCook ? stripMarkdown(recipe.description) : recipe.description}
+          </p>
         )}
         {recipe.tags.length > 0 && (
           <div className="flex flex-wrap gap-1 mt-1">
@@ -139,7 +143,11 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
       </div>
       <div className="px-3 pb-3 flex items-center justify-between text-xs text-muted-foreground">
         <div className="flex items-center gap-2.5">
-          <span className="flex items-center gap-1"><Users className="h-3 w-3" />{recipe.baseServings}</span>
+          {recipe.isBatchCook && recipe.dishCount ? (
+            <span className="flex items-center gap-1"><Utensils className="h-3 w-3" />{tBatch("dishCount", { count: recipe.dishCount })}</span>
+          ) : (
+            <span className="flex items-center gap-1"><Users className="h-3 w-3" />{recipe.baseServings}</span>
+          )}
           {totalMins > 0 && <span className="flex items-center gap-1"><Clock className="h-3 w-3" />{t("total", { mins: totalMins })}</span>}
           {recipe.difficulty && (
             <Badge variant={DIFFICULTY_COLOR[recipe.difficulty]} className="text-xs h-4 px-1.5">{t(`difficulty.${recipe.difficulty}`)}</Badge>
@@ -160,6 +168,7 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
 
 function ListRow({ recipe, selected, selectMode }: { recipe: Recipe; selected: boolean; selectMode: boolean }) {
   const t = useTranslations("recipe");
+  const tBatch = useTranslations("batchCooking");
   const { locale } = useLocale();
   const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
   const VisibilityIcon = VISIBILITY_ICON[recipe.visibility];
@@ -188,9 +197,13 @@ function ListRow({ recipe, selected, selectMode }: { recipe: Recipe; selected: b
             <VisibilityIcon className="h-3.5 w-3.5 text-muted-foreground" />
           </div>
         </div>
-        {recipe.description && <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{recipe.description}</p>}
+        {recipe.description && <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{recipe.isBatchCook ? stripMarkdown(recipe.description) : recipe.description}</p>}
         <div className="flex items-center gap-2.5 text-xs text-muted-foreground mt-auto flex-wrap">
-          <span className="flex items-center gap-1"><Users className="h-3 w-3" />{recipe.baseServings}</span>
+          {recipe.isBatchCook && recipe.dishCount ? (
+            <span className="flex items-center gap-1"><Utensils className="h-3 w-3" />{tBatch("dishCount", { count: recipe.dishCount })}</span>
+          ) : (
+            <span className="flex items-center gap-1"><Users className="h-3 w-3" />{recipe.baseServings}</span>
+          )}
           {totalMins > 0 && <span className="flex items-center gap-1"><Clock className="h-3 w-3" />{t("total", { mins: totalMins })}</span>}
           {recipe.difficulty && <Badge variant={DIFFICULTY_COLOR[recipe.difficulty]} className="text-xs h-4 px-1.5">{t(`difficulty.${recipe.difficulty}`)}</Badge>}
           {recipe.tags.slice(0, 2).map((tag) => (