Add the Regular dinners settings screen

/settings/regulars lists the household's Regulars with photo, name,
"method · minutes", the favorite heart and a grounding badge ("Finding
recipe…", "Recipe found", "Needs a recipe"). The add field takes a name
or a pasted recipe link. Tapping a Regular opens an edit sheet (rename,
method, minutes, difficulty, remove with confirmation); a Regular that
needs a recipe opens "Fix recipe": pick one of up to three candidates,
paste a link, or type the ingredients and steps in. The list is read
again every 3 seconds while any Regular is still finding its recipe.

The dinners client now parses the full dinner and adds edit, favorite,
ground and recipe-candidate calls; onboarding shares its refusal
tracking through useRefusals.

Maestro task: fa8f88ae-5ade-430e-a069-274aec112f26

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/ARCHITECTURE.md

@@ -500,6 +500,19 @@ wires Web Push, "Turn on notifications" asks for nothing. Offline on the saved p
 settings cannot be read (the service worker never caches `/api/v1/settings`),
 so the saved pages open as they are.
 
+Regular dinners (`/settings/regulars`) lists the Regulars from
+`GET /api/v1/dinners?status=regular`, each with its photo, "method ·
+minutes", favorite heart and grounding badge ("Finding recipe…" while
+`pending`, "Recipe found" when `grounded` or `manual`, "Needs a recipe" when
+`failed`). The add field takes a name or a pasted `https://` recipe link.
+Tapping a Regular opens an edit sheet (name, method, minutes, difficulty;
+remove archives it after a confirmation); tapping one that needs a recipe
+opens "Fix recipe" (pick one of the recipe candidates, paste a link or type
+the ingredients and steps in). Adds, removals and the heart show at once and
+are undone if the server refuses them. While any Regular is `pending`, the
+list is read again every 3 seconds (not while a change is in flight), and
+polling stops once none is.
+
 ## Boundaries and gotchas
 
 - **Secrets never reach the client** — API keys, OAuth tokens and the Chat

web/src/App.test.tsx

@@ -7,6 +7,7 @@ import { errorResponse, fakeLocation, jsonResponse, ME, request, stubFetch, stub
 import App, { routes } from './App.tsx'
 import { AI_SETTINGS, HOUSEHOLD_SETTINGS, RECIPE_SEARCH_SETTINGS, SETTINGS_API } from './test/ApiProviders.tsx'
 import { InDataRouter } from './test/dataRouter.tsx'
+import { dinnerBody } from './test/dinners.ts'
 
 afterEach(() => {
   Reflect.deleteProperty(window, 'matchMedia')
@@ -27,7 +28,13 @@ function renderAppAt(path: string, location = fakeLocation(path)) {
 }
 
 // The routes that render a built screen rather than a placeholder page.
-const SCREENS = { '/onboarding': true, '/settings': true, '/settings/ai': true, '/settings/household': true }
+const SCREENS = {
+  '/onboarding': true,
+  '/settings': true,
+  '/settings/ai': true,
+  '/settings/household': true,
+  '/settings/regulars': true,
+}
 
 // SIGNED_IN answers what every route reads first: the session, then the
 // household settings, onboarding finished.
@@ -103,6 +110,18 @@ describe('App routes', () => {
     expect(screen.getByRole('main')).toContainElement(heading)
     expect(await screen.findByLabelText('Dinner time')).toHaveValue('17:30')
   })
+
+  it('/settings/regulars renders the Regular dinners screen inside the shell', async () => {
+    mockViewport(390)
+    stubFetchByPath({
+      ...SIGNED_IN,
+      '/api/v1/dinners?status=regular': () => jsonResponse(200, { dinners: [dinnerBody('d1', 'Beef tacos')] }),
+    })
+    renderAt('/settings/regulars')
+    const heading = await screen.findByRole('heading', { level: 1, name: 'Regular dinners' })
+    expect(screen.getByRole('main')).toContainElement(heading)
+    expect(await screen.findByText('Beef tacos')).toBeInTheDocument()
+  })
 })
 
 describe('App first-run redirect', () => {

web/src/App.tsx

@@ -10,6 +10,7 @@ import { OfflinePill } from './pwa/OfflinePill.tsx'
 import { UpdatePrompt, type UpdateContainer } from './pwa/UpdatePrompt.tsx'
 import { AISettingsPage } from './settings/AISettingsPage.tsx'
 import { HouseholdSettingsPage } from './settings/HouseholdSettingsPage.tsx'
+import { RegularsSettingsPage } from './settings/RegularsSettingsPage.tsx'
 import { SettingsPage } from './settings/SettingsPage.tsx'
 import { AppShell } from './shell/AppShell.tsx'
 
@@ -37,6 +38,7 @@ const screens: Partial<Record<(typeof routes)[number]['path'], ReactNode>> = {
   '/settings': <SettingsPage />,
   '/settings/ai': <AISettingsPage />,
   '/settings/household': <HouseholdSettingsPage />,
+  '/settings/regulars': <RegularsSettingsPage />,
 }
 
 // AppRoutes is the shell and its pages, shown once /api/v1/me has loaded.

web/src/dinners/api.ts

@@ -5,9 +5,55 @@ import { isRecord } from '../api/errors.ts'
 export const DINNERS_PATH = '/api/v1/dinners'
 export const REGULARS_PATH = `${DINNERS_PATH}?status=regular`
 
-// Regular is the part of a dinner the Regulars list reads. pending is true
-// while an optimistic add waits for the server; its id is not the server's.
-export type Regular = { id: string; name: string; pending?: true }
+// GROUNDING_POLL_MS is how often the Regulars are read again while any of
+// them is still finding its recipe.
+export const GROUNDING_POLL_MS = 3000
+
+// Methods and Difficulties are the values the dinners API allows.
+export const METHODS = ['stovetop', 'oven', 'crockpot', 'grill', 'other'] as const
+export const DIFFICULTIES = ['easy', 'medium', 'hard'] as const
+const GROUNDING_STATUSES = ['pending', 'grounded', 'failed', 'manual'] as const
+
+export type Method = (typeof METHODS)[number]
+export type Difficulty = (typeof DIFFICULTIES)[number]
+export type GroundingStatus = (typeof GROUNDING_STATUSES)[number]
+
+// Regular is the part of a dinner the Regulars screens read. photo_id is
+// the stored photo's id, from photo_url. pending is true while an
+// optimistic add waits for the server; its id is not the server's.
+export type Regular = {
+  id: string
+  name: string
+  method: Method | null
+  minutes_total: number | null
+  difficulty: Difficulty | null
+  is_favorite: boolean
+  photo_id: string | undefined
+  grounding_status: GroundingStatus
+  pending?: true
+}
+
+// NewRegular is a POST /api/v1/dinners body: a name or a recipe link.
+export type NewRegular = { name: string } | { recipe_url: string }
+
+// RegularPatch is a PATCH /api/v1/dinners/{id} body; every field is optional.
+export type RegularPatch = Partial<{ name: string; method: Method; minutes_total: number; difficulty: Difficulty }>
+
+// ManualRecipe is a recipe the household types in.
+export type ManualRecipe = { ingredients: string[]; steps: string[]; minutes?: number; method?: Method }
+
+// RecipeFix is a POST /api/v1/dinners/{id}/ground body: exactly one way to
+// ground the dinner.
+export type RecipeFix = { candidate_id: string } | { recipe_url: string } | { manual: ManualRecipe }
+
+// RecipeCandidate is one recipe page a dinner could be grounded in.
+export type RecipeCandidate = {
+  candidate_id: string
+  title: string
+  site_name: string
+  photo_id: string | undefined
+  minutes: number | null
+}
 
 // CachedRegular is a Regular as the cache holds it. removing is true while
 // an optimistic removal waits for the server: the entry keeps its place, so
@@ -18,22 +64,91 @@ function shown(list: CachedRegular[]): Regular[] {
   return list.filter((regular) => !regular.removing)
 }
 
+function restored(regular: CachedRegular): CachedRegular {
+  const copy = { ...regular }
+  delete copy.removing
+  return copy
+}
+
 // REGULARS_KEY prefixes every Regulars query, so a change refreshes them all
 // (the settings home's count included).
 export const REGULARS_KEY = ['dinners', 'regular'] as const
 const REGULARS_LIST_KEY = [...REGULARS_KEY, 'list'] as const
 const REGULARS_MUTATION_KEY = ['dinners', 'regular', 'change'] as const
 
+function oneOf<T extends string>(where: string, field: string, values: readonly T[], value: unknown): T {
+  if (typeof value !== 'string' || !(values as readonly string[]).includes(value)) {
+    throw new Error(`${where}: ${field} ${JSON.stringify(value)} is not one of ${values.join(', ')}`)
+  }
+  return value as T
+}
+
+function nullable<T>(value: unknown, parse: (value: unknown) => T): T | null {
+  return value === null ? null : parse(value)
+}
+
+function wholeNumber(where: string, field: string, value: unknown): number {
+  if (typeof value !== 'number' || !Number.isInteger(value)) throw new Error(`${where}: ${field} is not a whole number`)
+  return value
+}
+
+const PHOTO_URL = /^\/media\/photos\/([^/]+)-400\.jpg$/
+
+// photoId reads the photo id out of a photo_url, which the server always
+// sends as /media/photos/{id}-400.jpg or null.
+function photoId(where: string, value: unknown): string | undefined {
+  if (value === null) return undefined
+  const match = typeof value === 'string' ? PHOTO_URL.exec(value) : null
+  if (!match?.[1]) throw new Error(`${where}: photo_url ${JSON.stringify(value)} is not a stored photo`)
+  return decodeURIComponent(match[1])
+}
+
 function parseDinner(where: string, body: unknown): Regular {
   if (!isRecord(body) || typeof body.id !== 'string' || typeof body.name !== 'string') {
     throw new Error(`${where}: response is not a dinner`)
   }
-  return { id: body.id, name: body.name }
+  if (typeof body.is_favorite !== 'boolean') throw new Error(`${where}: is_favorite is not a boolean`)
+  return {
+    id: body.id,
+    name: body.name,
+    method: nullable(body.method, (v) => oneOf(where, 'method', METHODS, v)),
+    minutes_total: nullable(body.minutes_total, (v) => wholeNumber(where, 'minutes_total', v)),
+    difficulty: nullable(body.difficulty, (v) => oneOf(where, 'difficulty', DIFFICULTIES, v)),
+    is_favorite: body.is_favorite,
+    photo_id: photoId(where, body.photo_url),
+    grounding_status: oneOf(where, 'grounding_status', GROUNDING_STATUSES, body.grounding_status),
+  }
 }
 
-// useRegulars is the household's Regulars, in the server's order.
+function parseCandidate(where: string, body: unknown): RecipeCandidate {
+  if (
+    !isRecord(body) ||
+    typeof body.candidate_id !== 'string' ||
+    typeof body.title !== 'string' ||
+    typeof body.site_name !== 'string'
+  ) {
+    throw new Error(`${where}: response is not a recipe candidate`)
+  }
+  return {
+    candidate_id: body.candidate_id,
+    title: body.title,
+    site_name: body.site_name,
+    photo_id: photoId(where, body.photo_url),
+    minutes: nullable(body.minutes, (v) => wholeNumber(where, 'minutes', v)),
+  }
+}
+
+function dinnerPath(id: string): string {
+  return `${DINNERS_PATH}/${encodeURIComponent(id)}`
+}
+
+// useRegulars is the household's Regulars, in the server's order. While any
+// of them is still finding its recipe it is read again every
+// GROUNDING_POLL_MS, except while a change is in flight (whose settling
+// reads it again anyway), so a poll never overwrites an optimistic change.
 export function useRegulars() {
   const { apiFetch } = useApi()
+  const queryClient = useQueryClient()
   return useQuery({
     queryKey: REGULARS_LIST_KEY,
     queryFn: async () => {
@@ -43,6 +158,11 @@ export function useRegulars() {
       return body.dinners.map((dinner): CachedRegular => parseDinner(where, dinner))
     },
     select: shown,
+    refetchInterval: (query) => {
+      const list = query.state.data
+      if (list === undefined || queryClient.isMutating({ mutationKey: REGULARS_MUTATION_KEY }) > 0) return false
+      return list.some((regular) => regular.grounding_status === 'pending') ? GROUNDING_POLL_MS : false
+    },
   })
 }
 
@@ -57,6 +177,11 @@ function setRegulars(queryClient: QueryClient, change: (list: CachedRegular[]) =
   queryClient.setQueryData<CachedRegular[]>(REGULARS_LIST_KEY, (list) => change(list ?? []))
 }
 
+// replace puts the server's answer for a dinner in its place in the list.
+function replace(queryClient: QueryClient, dinner: Regular) {
+  setRegulars(queryClient, (list) => list.map((regular) => (regular.id === dinner.id ? dinner : regular)))
+}
+
 // settle refetches the Regulars once the last change in flight is done, so
 // an earlier change's refetch never drops a later change's optimistic entry.
 function settle(queryClient: QueryClient) {
@@ -67,24 +192,37 @@ function settle(queryClient: QueryClient) {
 
 let pendingIds = 0
 
-// useAddRegular adds a Regular by name (POST /api/v1/dinners). It shows in
-// the list at once and is taken out again if the server refuses it.
+// useAddRegular adds a Regular by name or recipe link (POST
+// /api/v1/dinners). It shows in the list at once — a link under the link
+// itself until the server names it — and is taken out again if the server
+// refuses it.
 export function useAddRegular() {
   const { apiFetch } = useApi()
   const queryClient = useQueryClient()
   return useMutation({
     mutationKey: REGULARS_MUTATION_KEY,
-    mutationFn: async (name: string) =>
-      parseDinner(`POST ${DINNERS_PATH}`, await apiFetch<unknown>(DINNERS_PATH, { method: 'POST', body: { name } })),
-    onMutate: async (name) => {
+    mutationFn: async (add: NewRegular) =>
+      parseDinner(`POST ${DINNERS_PATH}`, await apiFetch<unknown>(DINNERS_PATH, { method: 'POST', body: add })),
+    onMutate: async (add) => {
       const id = `pending-${++pendingIds}`
-      await changeOptimistically(queryClient, (list) => [...list, { id, name, pending: true }])
+      const optimistic: CachedRegular = {
+        id,
+        name: 'name' in add ? add.name : add.recipe_url,
+        method: null,
+        minutes_total: null,
+        difficulty: null,
+        is_favorite: false,
+        photo_id: undefined,
+        grounding_status: 'pending',
+        pending: true,
+      }
+      await changeOptimistically(queryClient, (list) => [...list, optimistic])
       return { id }
     },
-    onSuccess: (dinner, _name, context) => {
+    onSuccess: (dinner, _add, context) => {
       setRegulars(queryClient, (list) => list.map((regular) => (regular.id === context.id ? dinner : regular)))
     },
-    onError: (_error, _name, context) => {
+    onError: (_error, _add, context) => {
       if (context === undefined) return
       setRegulars(queryClient, (list) => list.filter((regular) => regular.id !== context.id))
     },
@@ -101,7 +239,7 @@ export function useRemoveRegular() {
   return useMutation({
     mutationKey: REGULARS_MUTATION_KEY,
     mutationFn: async (regular: Regular) => {
-      await apiFetch<unknown>(`${DINNERS_PATH}/${encodeURIComponent(regular.id)}`, { method: 'DELETE' })
+      await apiFetch<unknown>(dinnerPath(regular.id), { method: 'DELETE' })
     },
     onMutate: async (regular) => {
       await changeOptimistically(queryClient, (list) =>
@@ -112,8 +250,82 @@ export function useRemoveRegular() {
       setRegulars(queryClient, (list) => list.filter((r) => r.id !== regular.id))
     },
     onError: (_error, regular) => {
-      setRegulars(queryClient, (list) => list.map((r) => (r.id === regular.id ? { id: r.id, name: r.name } : r)))
+      setRegulars(queryClient, (list) => list.map((r) => (r.id === regular.id ? restored(r) : r)))
     },
     onSettled: () => settle(queryClient),
   })
 }
+
+// useEditRegular saves changes to a Regular (PATCH /api/v1/dinners/{id})
+// and shows the server's answer once it is saved.
+export function useEditRegular() {
+  const { apiFetch } = useApi()
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationKey: REGULARS_MUTATION_KEY,
+    mutationFn: async ({ id, patch }: { id: string; patch: RegularPatch }) =>
+      parseDinner(`PATCH ${DINNERS_PATH}/{id}`, await apiFetch<unknown>(dinnerPath(id), { method: 'PATCH', body: patch })),
+    onSuccess: (dinner) => replace(queryClient, dinner),
+    onSettled: () => settle(queryClient),
+  })
+}
+
+// useToggleFavorite toggles a Regular's favorite heart (POST
+// /api/v1/dinners/{id}/favorite). The heart changes at once and changes
+// back if the server refuses.
+export function useToggleFavorite() {
+  const { apiFetch } = useApi()
+  const queryClient = useQueryClient()
+  const set = (id: string, is_favorite: boolean) =>
+    setRegulars(queryClient, (list) => list.map((r) => (r.id === id ? { ...r, is_favorite } : r)))
+  return useMutation({
+    mutationKey: REGULARS_MUTATION_KEY,
+    mutationFn: async (regular: Regular) =>
+      parseDinner(
+        `POST ${DINNERS_PATH}/{id}/favorite`,
+        await apiFetch<unknown>(`${dinnerPath(regular.id)}/favorite`, { method: 'POST' }),
+      ),
+    onMutate: async (regular) => {
+      await changeOptimistically(queryClient, (list) =>
+        list.map((r) => (r.id === regular.id ? { ...r, is_favorite: !regular.is_favorite } : r)),
+      )
+    },
+    onSuccess: (dinner) => replace(queryClient, dinner),
+    onError: (_error, regular) => set(regular.id, regular.is_favorite),
+    onSettled: () => settle(queryClient),
+  })
+}
+
+// useGroundRegular fixes a Regular's recipe (POST /api/v1/dinners/{id}/ground)
+// with a candidate, a pasted link or a recipe typed in. A candidate or link
+// is read in the request, which can take up to a minute and a half.
+export function useGroundRegular() {
+  const { apiFetch } = useApi()
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationKey: REGULARS_MUTATION_KEY,
+    mutationFn: async ({ id, fix }: { id: string; fix: RecipeFix }) =>
+      parseDinner(
+        `POST ${DINNERS_PATH}/{id}/ground`,
+        await apiFetch<unknown>(`${dinnerPath(id)}/ground`, { method: 'POST', body: fix }),
+      ),
+    onSuccess: (dinner) => replace(queryClient, dinner),
+    onSettled: () => settle(queryClient),
+  })
+}
+
+// useRecipeCandidates is up to three recipe pages the dinner could be
+// grounded in, best first (GET /api/v1/dinners/{id}/recipe-candidates).
+export function useRecipeCandidates(id: string) {
+  const { apiFetch } = useApi()
+  return useQuery({
+    queryKey: ['dinners', 'candidates', id],
+    queryFn: async () => {
+      const path = `${dinnerPath(id)}/recipe-candidates`
+      const where = `GET ${DINNERS_PATH}/{id}/recipe-candidates`
+      const body = await apiFetch<unknown>(path)
+      if (!isRecord(body) || !Array.isArray(body.candidates)) throw new Error(`${where}: response has no candidates list`)
+      return body.candidates.map((candidate) => parseCandidate(where, candidate))
+    },
+  })
+}

web/src/dinners/useRefusals.ts

@@ -0,0 +1,26 @@
+import { useRef, useState } from 'react'
+
+// Refusal is one change the server turned down. key is unique to that
+// attempt, so two attempts of the same change in flight each keep their own
+// refusal. change names what was tried, so trying it again once it has been
+// refused clears the earlier refusal and no other.
+export type Refusal = { key: number; change: string; text: string }
+
+// useRefusals keeps each change's own refusal: the mutation hooks only
+// report their latest change, which would hide a refusal while another
+// change is in flight. track(change, what, answer) clears change's earlier
+// refusal and records "Could not {what}: …" if answer rejects.
+export function useRefusals() {
+  const [refusals, setRefusals] = useState<Refusal[]>([])
+  const attempts = useRef(0)
+
+  function track(change: string, what: string, answer: Promise<unknown>) {
+    const key = ++attempts.current
+    setRefusals((all) => all.filter((refusal) => refusal.change !== change))
+    answer.catch((error: Error) => {
+      setRefusals((all) => [...all, { key, change, text: `Could not ${what}: ${error.message}` }])
+    })
+  }
+
+  return { refusals, track }
+}

web/src/onboarding/OnboardingPage.test.tsx

@@ -5,6 +5,7 @@ import App from '../App.tsx'
 import { createNetworkStatus } from '../pwa/networkStatus.ts'
 import { HOUSEHOLD_SETTINGS } from '../test/ApiProviders.tsx'
 import { declaredStyle } from '../test/cssRules.ts'
+import { dinnerBody, type DinnerBody } from '../test/dinners.ts'
 import { InDataRouter } from '../test/dataRouter.tsx'
 import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
 import { expectMinHitArea, hitArea } from '../test/hitArea.ts'
@@ -14,7 +15,7 @@ afterEach(() => {
   vi.unstubAllGlobals()
 })
 
-type Dinner = { id: string; name: string }
+type Dinner = DinnerBody
 
 // A request the fake server holds until the test answers it.
 type Held = { method: string; path: string; body: unknown; answer: (response: Response) => void }
@@ -53,8 +54,8 @@ function stubDinnersServer(regulars: Dinner[] = []) {
 // Regular to the list later GETs read.
 function created(server: ReturnType<typeof stubDinnersServer>, request: Held, id: string) {
   const { name } = request.body as { name: string }
-  server.regulars.push({ id, name })
-  request.answer(jsonResponse(201, { id, name, status: 'regular', grounding_status: 'pending', grounding_job_id: 'job-1' }))
+  server.regulars.push(dinnerBody(id, name))
+  request.answer(jsonResponse(201, { ...dinnerBody(id, name, { grounding_status: 'pending' }), grounding_job_id: 'job-1' }))
 }
 
 // renderAt renders the whole app, so /me supplies the CSRF token every
@@ -125,7 +126,7 @@ describe('onboarding step 1', () => {
 
 describe('onboarding step 2 (mock 1h)', () => {
   it('shows the step as the mock does', async () => {
-    await regularsStep([{ id: 'd1', name: 'Beef tacos' }])
+    await regularsStep([dinnerBody('d1', 'Beef tacos')])
 
     expect(screen.getByText('Step 2 of 3')).toBeInTheDocument()
     expect(screen.getByRole('heading', { level: 1, name: "What's on your usual rotation?" })).toBeInTheDocument()
@@ -198,7 +199,7 @@ describe('onboarding step 2 (mock 1h)', () => {
   })
 
   it('takes an add back out and says why when the server refuses it', async () => {
-    const server = await regularsStep([{ id: 'd1', name: 'Chili' }])
+    const server = await regularsStep([dinnerBody('d1', 'Chili')])
     fireEvent.change(input(), { target: { value: 'chili' } })
     fireEvent.submit(input())
     await vi.waitFor(() => expect(regularNames()).toEqual(['Chili', 'chili']))
@@ -273,8 +274,8 @@ describe('onboarding step 2 (mock 1h)', () => {
 
   it('removes a Regular at once and archives it on the server', async () => {
     const server = await regularsStep([
-      { id: 'd1', name: 'Beef tacos' },
-      { id: 'd2', name: 'Pizza night' },
+      dinnerBody('d1', 'Beef tacos'),
+      dinnerBody('d2', 'Pizza night'),
     ])
     fireEvent.click(screen.getByRole('button', { name: 'Remove Beef tacos' }))
 
@@ -288,8 +289,8 @@ describe('onboarding step 2 (mock 1h)', () => {
 
   it('puts a removed Regular back in its place when the server refuses', async () => {
     const server = await regularsStep([
-      { id: 'd1', name: 'Beef tacos' },
-      { id: 'd2', name: 'Pizza night' },
+      dinnerBody('d1', 'Beef tacos'),
+      dinnerBody('d2', 'Pizza night'),
     ])
     fireEvent.click(screen.getByRole('button', { name: 'Remove Beef tacos' }))
     await vi.waitFor(() => expect(server.held).toHaveLength(1))
@@ -301,9 +302,9 @@ describe('onboarding step 2 (mock 1h)', () => {
 
   it('puts a refused removal back and says why while another removal is still unanswered', async () => {
     const server = await regularsStep([
-      { id: 'd1', name: 'Beef tacos' },
-      { id: 'd2', name: 'Pizza night' },
-      { id: 'd3', name: 'Chili' },
+      dinnerBody('d1', 'Beef tacos'),
+      dinnerBody('d2', 'Pizza night'),
+      dinnerBody('d3', 'Chili'),
     ])
     fireEvent.click(screen.getByRole('button', { name: 'Remove Beef tacos' }))
     await vi.waitFor(() => expect(server.held).toHaveLength(1))
@@ -325,9 +326,9 @@ describe('onboarding step 2 (mock 1h)', () => {
 
   it('puts two refused removals back in their places without rereading the list', async () => {
     const server = await regularsStep([
-      { id: 'd1', name: 'Beef tacos' },
-      { id: 'd2', name: 'Pizza night' },
-      { id: 'd3', name: 'Chili' },
+      dinnerBody('d1', 'Beef tacos'),
+      dinnerBody('d2', 'Pizza night'),
+      dinnerBody('d3', 'Chili'),
     ])
     server.reads.fail = true
     fireEvent.click(screen.getByRole('button', { name: 'Remove Beef tacos' }))
@@ -351,8 +352,8 @@ describe('onboarding step 2 (mock 1h)', () => {
 
   it('enables "Next: notifications" once the server has saved 3 Regulars', async () => {
     const server = await regularsStep([
-      { id: 'd1', name: 'Beef tacos' },
-      { id: 'd2', name: 'Pizza night' },
+      dinnerBody('d1', 'Beef tacos'),
+      dinnerBody('d2', 'Pizza night'),
     ])
     expect(next()).toBeDisabled()
 
@@ -377,8 +378,8 @@ describe('onboarding step 2 (mock 1h)', () => {
 
   it('keeps "Next: notifications" disabled when the third add is refused', async () => {
     const server = await regularsStep([
-      { id: 'd1', name: 'Beef tacos' },
-      { id: 'd2', name: 'Pizza night' },
+      dinnerBody('d1', 'Beef tacos'),
+      dinnerBody('d2', 'Pizza night'),
     ])
     fireEvent.click(screen.getByRole('button', { name: 'Add Burgers' }))
     await screen.findByRole('heading', { level: 2, name: 'Your regulars · 3' })
@@ -393,9 +394,9 @@ describe('onboarding step 2 (mock 1h)', () => {
 
   it('keeps "Next: notifications" disabled while a fourth add is unanswered', async () => {
     const server = await regularsStep([
-      { id: 'd1', name: 'Beef tacos' },
-      { id: 'd2', name: 'Pizza night' },
-      { id: 'd3', name: 'Chili' },
+      dinnerBody('d1', 'Beef tacos'),
+      dinnerBody('d2', 'Pizza night'),
+      dinnerBody('d3', 'Chili'),
     ])
     expect(next()).toBeEnabled()
 

web/src/onboarding/RegularsStep.tsx

@@ -1,7 +1,8 @@
-import { useRef, useState, type FormEvent } from 'react'
+import { useState, type FormEvent } from 'react'
 import { Plus } from 'lucide-react'
 import { useNavigate } from 'react-router'
 import { useAddRegular, useRegulars, useRemoveRegular, type Regular } from '../dinners/api.ts'
+import { useRefusals } from '../dinners/useRefusals.ts'
 import { Button } from '../ui/Button.tsx'
 import { Chip } from '../ui/Chip.tsx'
 import { ErrorBanner } from '../ui/ErrorBanner.tsx'
@@ -31,12 +32,6 @@ function sameName(a: string, b: string): boolean {
   return a.trim().toLowerCase() === b.trim().toLowerCase()
 }
 
-// Refusal is one add or removal the server turned down. key is unique to
-// that attempt, so two attempts of the same change in flight each keep their
-// own refusal. change names what was tried, so trying it again once it has
-// been refused clears the earlier refusal and no other.
-type Refusal = { key: number; change: string; text: string }
-
 // RegularsStep is onboarding step 2, handoff mock 1h: the household adds
 // the dinners it makes on repeat. Each add and remove shows at once and is
 // undone if the server refuses it.
@@ -46,11 +41,7 @@ export function RegularsStep() {
   const add = useAddRegular()
   const remove = useRemoveRegular()
   const [draft, setDraft] = useState('')
-  // Each change keeps its own refusal: the mutation hooks only report their
-  // latest change, which would hide a refusal while another change is in
-  // flight.
-  const [refusals, setRefusals] = useState<Refusal[]>([])
-  const attempts = useRef(0)
+  const { refusals, track } = useRefusals()
   const list = regulars.data ?? []
   const picks = commonPicks.filter((pick) => !list.some((regular) => sameName(regular.name, pick)))
   // Next waits for every add to be answered, so a refused add's error shows
@@ -58,16 +49,8 @@ export function RegularsStep() {
   const adding = list.some((regular) => regular.pending)
   const saved = list.filter((regular) => !regular.pending).length
 
-  function track(change: string, what: string, answer: Promise<unknown>) {
-    const key = ++attempts.current
-    setRefusals((all) => all.filter((refusal) => refusal.change !== change))
-    answer.catch((error: Error) => {
-      setRefusals((all) => [...all, { key, change, text: `Could not ${what}: ${error.message}` }])
-    })
-  }
-
   function addRegular(name: string) {
-    track(`add:${name.toLowerCase()}`, `add ${name}`, add.mutateAsync(name))
+    track(`add:${name.toLowerCase()}`, `add ${name}`, add.mutateAsync({ name }))
   }
 
   function removeRegular(regular: Regular) {

web/src/settings/RegularsSettingsPage.module.css

@@ -0,0 +1,295 @@
+/* Settings · Regular dinners. */
+.page {
+  box-sizing: border-box;
+  min-height: 100%;
+  max-width: 560px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding-top: 6px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.kicker {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-accent-700);
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 28px;
+  font-weight: 400;
+}
+
+.shared {
+  margin: 0;
+  padding: 14px 16px;
+  border-radius: 26px;
+  background: var(--color-accent-2-100);
+  color: var(--color-accent-2-900);
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+/* The add field: the input fills the row beside the grape + button. */
+.add {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.add > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.add .addInput {
+  width: 100%;
+}
+
+.loading {
+  height: 320px;
+  border-radius: 26px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.groupLabel {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--color-neutral-700);
+}
+
+.card {
+  padding: 6px;
+  border: 1px solid var(--color-neutral-300);
+}
+
+.rows {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item + .item {
+  border-top: 1px solid var(--color-divider);
+}
+
+.pending {
+  opacity: 0.6;
+}
+
+.photo {
+  width: 48px;
+  height: 48px;
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin-top: 4px;
+}
+
+/* Beat the Tag's own tones whatever order the sheets load in. */
+.meta .finding {
+  background: var(--color-neutral-200);
+  color: var(--color-neutral-700);
+}
+
+.meta .found {
+  background: var(--color-accent-2-200);
+  color: var(--color-accent-2-800);
+}
+
+.meta .needs {
+  background: var(--color-accent-100);
+  color: var(--color-accent-800);
+}
+
+.filled {
+  color: var(--color-accent);
+  fill: currentColor;
+}
+
+.hint,
+.problem,
+.status {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.hint {
+  color: var(--color-neutral-700);
+}
+
+.problem {
+  font-weight: 700;
+  color: var(--color-accent-700);
+}
+
+.status {
+  color: var(--color-accent-2-800);
+}
+
+.status:empty {
+  display: none;
+}
+
+.sheet {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.sheetTitle {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 22px;
+  font-weight: 400;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 10px;
+  align-items: end;
+}
+
+/* Beside a dropdown, a minutes field matches its height. */
+.columns .paired {
+  width: 100%;
+  height: 56px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.label {
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--color-neutral-700);
+}
+
+.textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 120px;
+  padding: 14px 18px;
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 22px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-family: var(--font-body);
+  font-size: 15px;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+.actions {
+  display: grid;
+  gap: 10px;
+}
+
+.actions > button {
+  min-height: 52px;
+}
+
+.candidatesLoading {
+  height: 200px;
+  border-radius: 22px;
+}
+
+.candidates {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.candidate {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-width: 44px;
+  min-height: 72px;
+  padding: 8px 16px 8px 8px;
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 22px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  text-align: start;
+  cursor: pointer;
+}
+
+.candidate:hover {
+  background: var(--color-neutral-200);
+}
+
+.candidatePhoto {
+  flex: none;
+  width: 56px;
+  height: 56px;
+}
+
+.candidateBody {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.candidateTitle {
+  font-family: var(--font-body);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.candidateSite {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-neutral-700);
+}
+
+/* A form locked while its save is pending. It lays out as if it were not
+   there. */
+.lock {
+  display: contents;
+}

web/src/settings/RegularsSettingsPage.test.tsx

@@ -0,0 +1,490 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { Route, Routes } from 'react-router'
+import { afterEach, describe, expect, it, vi, type Mock } from 'vitest'
+import { ApiProvider, createApiClient, createQueryClient, createVerifiedSession } from '../api/index.ts'
+import { GROUNDING_POLL_MS } from '../dinners/api.ts'
+import { createNetworkStatus } from '../pwa/networkStatus.ts'
+import { InDataRouter } from '../test/dataRouter.tsx'
+import { dinnerBody, type DinnerBody } from '../test/dinners.ts'
+import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { RegularsSettingsPage } from './RegularsSettingsPage.tsx'
+
+const REGULARS = '/api/v1/dinners?status=regular'
+
+type Responder = (body: unknown) => Response | Promise<Response>
+
+// stubServer stands in for the dinners API: GET of the Regulars answers
+// the current server.regulars, so a test changes what the next read sees;
+// every other request is answered by responders, keyed "METHOD path" and
+// called with the request's decoded JSON body. Any other request fails the
+// test.
+function stubServer(regulars: DinnerBody[], responders: Record<string, Responder> = {}) {
+  const server = { regulars, fetchMock: undefined as unknown as Mock<typeof fetch> }
+  const all: Record<string, Responder> = {
+    'GET /api/v1/me': () => jsonResponse(200, ME),
+    [`GET ${REGULARS}`]: () => jsonResponse(200, { dinners: server.regulars }),
+    ...responders,
+  }
+  server.fetchMock = vi.fn<typeof fetch>((input, init) => {
+    const key = `${init?.method ?? 'GET'} ${String(input)}`
+    const respond = Object.hasOwn(all, key) ? all[key] : undefined
+    if (respond === undefined) throw new Error(`unexpected fetch: ${key}`)
+    const body = typeof init?.body === 'string' ? (JSON.parse(init.body) as unknown) : undefined
+    return Promise.resolve(respond(body))
+  })
+  vi.stubGlobal('fetch', server.fetchMock)
+  return server
+}
+
+// sent lists the requests other than GETs, as "METHOD path" and body.
+function sent(fetchMock: Mock<typeof fetch>) {
+  return fetchMock.mock.calls
+    .filter(([, init]) => (init?.method ?? 'GET') !== 'GET')
+    .map(([input, init]) => ({
+      request: `${init?.method} ${String(input)}`,
+      body: typeof init?.body === 'string' ? (JSON.parse(init.body) as unknown) : undefined,
+    }))
+}
+
+function reads(fetchMock: Mock<typeof fetch>) {
+  return fetchMock.mock.calls.filter(([input, init]) => (init?.method ?? 'GET') === 'GET' && String(input) === REGULARS)
+    .length
+}
+
+afterEach(() => {
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+// renderPage loads /me (for the CSRF token every write needs) and renders
+// the page at /settings/regulars once its Regulars have loaded.
+async function renderPage() {
+  const api = createApiClient(fakeLocation('/settings/regulars'), createNetworkStatus(window), createVerifiedSession(localStorage))
+  await api.loadMe()
+  render(
+    <ApiProvider client={api}>
+      <QueryClientProvider client={createQueryClient()}>
+        <InDataRouter path="/settings/regulars">
+          <Routes>
+            <Route path="/settings/regulars" element={<RegularsSettingsPage />} />
+          </Routes>
+        </InDataRouter>
+      </QueryClientProvider>
+    </ApiProvider>,
+  )
+  await screen.findByRole('heading', { level: 2, name: /^On rotation/ })
+}
+
+const TACOS = dinnerBody('d1', 'Beef tacos', {
+  method: 'stovetop',
+  minutes_total: 40,
+  difficulty: 'easy',
+  is_favorite: true,
+  photo_url: '/media/photos/p1-400.jpg',
+})
+const CHILI = dinnerBody('d2', 'Chili', { method: 'crockpot', minutes_total: 480, grounding_status: 'pending' })
+const PIZZA = dinnerBody('d3', 'Pizza night', { grounding_status: 'failed', grounding_error: 'no_recipe_found' })
+const ROAST = dinnerBody('d4', 'Pot roast', { method: 'oven', grounding_status: 'manual' })
+
+function rows() {
+  return within(screen.getByRole('list', { name: 'Regulars' })).queryAllByRole('listitem')
+}
+
+function row(name: string) {
+  const item = rows().find((li) => within(li).queryByText(name) !== null)
+  if (item === undefined) throw new Error(`no Regular row named ${name}`)
+  return item
+}
+
+function addField() {
+  return screen.getByRole('textbox', { name: 'Add a Regular' })
+}
+
+function add(text: string) {
+  fireEvent.change(addField(), { target: { value: text } })
+  fireEvent.click(screen.getByRole('button', { name: 'Add Regular' }))
+}
+
+function openRow(name: string) {
+  fireEvent.click(within(row(name)).getByRole('button', { name: new RegExp(`^${name}`) }))
+}
+
+describe('RegularsSettingsPage', () => {
+  it('lists each Regular with its photo, method and minutes, favorite heart and grounding badge', async () => {
+    stubServer([TACOS, CHILI, PIZZA, ROAST])
+    await renderPage()
+
+    expect(screen.getByRole('heading', { level: 1, name: 'Regular dinners' })).toBeInTheDocument()
+    expect(screen.getByRole('heading', { level: 2, name: 'On rotation · 4' })).toBeInTheDocument()
+    expect(rows()).toHaveLength(4)
+
+    const tacos = within(row('Beef tacos'))
+    expect(tacos.getByRole('img', { name: 'Beef tacos' })).toHaveAttribute('src', '/media/photos/p1-400.jpg')
+    expect(tacos.getByText('Stovetop · 40 min')).toBeInTheDocument()
+    expect(tacos.getByText('Recipe found')).toBeInTheDocument()
+    expect(tacos.getByRole('button', { name: 'Favorite Beef tacos' })).toHaveAttribute('aria-pressed', 'true')
+
+    const chili = within(row('Chili'))
+    expect(chili.getByText('Crock pot · 480 min')).toBeInTheDocument()
+    expect(chili.getByText('Finding recipe…')).toBeInTheDocument()
+    expect(chili.getByRole('button', { name: 'Favorite Chili' })).toHaveAttribute('aria-pressed', 'false')
+
+    const pizza = within(row('Pizza night'))
+    // No photo yet: the striped placeholder stands in.
+    expect(pizza.getByRole('img', { name: 'Pizza night' })).toHaveTextContent('dish photo')
+    expect(pizza.getByText('Needs a recipe')).toBeInTheDocument()
+
+    expect(within(row('Pot roast')).getByText('Oven')).toBeInTheDocument()
+    expect(within(row('Pot roast')).getByText('Recipe found')).toBeInTheDocument()
+  })
+
+  it('keeps every control at least 44 px', async () => {
+    stubServer([TACOS])
+    await renderPage()
+    expectMinHitArea(screen.getByRole('button', { name: 'Add Regular' }))
+    expectMinHitArea(screen.getByRole('button', { name: 'Favorite Beef tacos' }))
+    expectMinHitArea(within(row('Beef tacos')).getByRole('button', { name: /^Beef tacos/ }))
+    expectMinHitArea(screen.getByRole('button', { name: 'Back to Settings' }))
+  })
+
+  it('says so when there are no Regulars yet', async () => {
+    stubServer([])
+    await renderPage()
+    expect(screen.getByRole('heading', { level: 2, name: 'On rotation · 0' })).toBeInTheDocument()
+    expect(screen.getByText(/No Regulars yet/)).toBeInTheDocument()
+  })
+
+  it('reports Regulars that could not load, and retries', async () => {
+    const server = stubServer([], { [`GET ${REGULARS}`]: () => errorResponse(500, 'internal') })
+    const api = createApiClient(fakeLocation('/settings/regulars'), createNetworkStatus(window), createVerifiedSession(localStorage))
+    render(
+      <ApiProvider client={api}>
+        <QueryClientProvider client={createQueryClient()}>
+          <InDataRouter path="/settings/regulars">
+            <RegularsSettingsPage />
+          </InDataRouter>
+        </QueryClientProvider>
+      </ApiProvider>,
+    )
+    expect(await screen.findByRole('alert')).toHaveTextContent('Your Regulars could not load: internal message')
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }))
+    await waitFor(() => expect(reads(server.fetchMock)).toBe(2))
+  })
+
+  it('adds a Regular by name, showing it at once and finding its recipe', async () => {
+    const server = stubServer([TACOS], {
+      'POST /api/v1/dinners': (body) => {
+        const created = dinnerBody('d9', (body as { name: string }).name, { grounding_status: 'pending' })
+        server.regulars = [...server.regulars, created]
+        return jsonResponse(201, { ...created, grounding_job_id: 'job-1' })
+      },
+    })
+    await renderPage()
+
+    add('  Chicken enchiladas ')
+    expect(addField()).toHaveValue('')
+    expect(await screen.findByText('Chicken enchiladas')).toBeInTheDocument()
+    expect(within(row('Chicken enchiladas')).getByText('Finding recipe…')).toBeInTheDocument()
+    expect(sent(server.fetchMock)).toEqual([{ request: 'POST /api/v1/dinners', body: { name: 'Chicken enchiladas' } }])
+    await waitFor(() => expect(row('Chicken enchiladas')).not.toHaveAttribute('aria-busy'))
+    expect(screen.getByRole('heading', { level: 2, name: 'On rotation · 2' })).toBeInTheDocument()
+  })
+
+  it('adds a Regular from a pasted recipe link', async () => {
+    const link = 'https://example.com/recipes/12345/beef-stew/'
+    const server = stubServer([], {
+      'POST /api/v1/dinners': () => {
+        const created = dinnerBody('d9', 'Beef stew', { grounding_status: 'pending', recipe_url: link })
+        server.regulars = [created]
+        return jsonResponse(201, { ...created, grounding_job_id: 'job-1' })
+      },
+    })
+    await renderPage()
+
+    add(link)
+    expect(await screen.findByText('Beef stew')).toBeInTheDocument()
+    expect(sent(server.fetchMock)).toEqual([{ request: 'POST /api/v1/dinners', body: { recipe_url: link } }])
+    expect(within(row('Beef stew')).getByText('Finding recipe…')).toBeInTheDocument()
+  })
+
+  it('takes back an add the server refuses and says why', async () => {
+    stubServer([TACOS], { 'POST /api/v1/dinners': () => errorResponse(409, 'duplicate_dinner') })
+    await renderPage()
+
+    add('Beef tacos!')
+    expect(await screen.findByRole('alert')).toHaveTextContent('Could not add Beef tacos!: duplicate_dinner message')
+    expect(rows()).toHaveLength(1)
+  })
+
+  it('toggles the favorite heart', async () => {
+    const server = stubServer([TACOS], {
+      'POST /api/v1/dinners/d1/favorite': () => {
+        server.regulars = [{ ...TACOS, is_favorite: false }]
+        return jsonResponse(200, server.regulars[0])
+      },
+    })
+    await renderPage()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Favorite Beef tacos' }))
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Favorite Beef tacos' })).toHaveAttribute('aria-pressed', 'false'),
+    )
+    expect(sent(server.fetchMock)).toEqual([{ request: 'POST /api/v1/dinners/d1/favorite', body: undefined }])
+    await waitFor(() => expect(reads(server.fetchMock)).toBe(2))
+    expect(screen.getByRole('button', { name: 'Favorite Beef tacos' })).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  it('edits a Regular: name, method, minutes and difficulty', async () => {
+    const server = stubServer([TACOS], {
+      'PATCH /api/v1/dinners/d1': (body) => {
+        const edited = { ...TACOS, ...(body as object) }
+        server.regulars = [edited]
+        return jsonResponse(200, edited)
+      },
+    })
+    await renderPage()
+
+    openRow('Beef tacos')
+    const sheet = within(screen.getByRole('dialog', { name: 'Edit Beef tacos' }))
+    expect(sheet.getByLabelText('Name')).toHaveValue('Beef tacos')
+    expect(sheet.getByLabelText('Method')).toHaveValue('stovetop')
+    expect(sheet.getByLabelText('Minutes')).toHaveValue(40)
+    expect(sheet.getByLabelText('Difficulty')).toHaveValue('easy')
+    expect(sheet.getByRole('button', { name: 'Save changes' })).toBeDisabled()
+
+    fireEvent.change(sheet.getByLabelText('Name'), { target: { value: 'Fish tacos' } })
+    fireEvent.change(sheet.getByLabelText('Method'), { target: { value: 'grill' } })
+    fireEvent.change(sheet.getByLabelText('Minutes'), { target: { value: '25' } })
+    fireEvent.change(sheet.getByLabelText('Difficulty'), { target: { value: 'medium' } })
+    fireEvent.click(sheet.getByRole('button', { name: 'Save changes' }))
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+    expect(sent(server.fetchMock)).toEqual([
+      {
+        request: 'PATCH /api/v1/dinners/d1',
+        body: { name: 'Fish tacos', method: 'grill', minutes_total: 25, difficulty: 'medium' },
+      },
+    ])
+    expect(within(row('Fish tacos')).getByText('Grill · 25 min')).toBeInTheDocument()
+  })
+
+  it('sends only the changed fields, refuses bad minutes and shows a refused edit', async () => {
+    const server = stubServer([TACOS], { 'PATCH /api/v1/dinners/d1': () => errorResponse(400, 'invalid_dinner') })
+    await renderPage()
+
+    openRow('Beef tacos')
+    const sheet = within(screen.getByRole('dialog', { name: 'Edit Beef tacos' }))
+    fireEvent.change(sheet.getByLabelText('Minutes'), { target: { value: '0' } })
+    expect(sheet.getByText('Minutes must be a whole number from 1 to 1440.')).toBeInTheDocument()
+    expect(sheet.getByRole('button', { name: 'Save changes' })).toBeDisabled()
+
+    fireEvent.change(sheet.getByLabelText('Minutes'), { target: { value: '45' } })
+    fireEvent.click(sheet.getByRole('button', { name: 'Save changes' }))
+    expect(await sheet.findByRole('alert')).toHaveTextContent('Not saved: invalid_dinner message')
+    expect(sent(server.fetchMock)).toEqual([{ request: 'PATCH /api/v1/dinners/d1', body: { minutes_total: 45 } }])
+  })
+
+  it('removes a Regular only once confirmed', async () => {
+    const server = stubServer([TACOS, ROAST], {
+      'DELETE /api/v1/dinners/d1': () => {
+        server.regulars = [ROAST]
+        return jsonResponse(200, { ...TACOS, status: 'archived' })
+      },
+    })
+    await renderPage()
+
+    openRow('Beef tacos')
+    fireEvent.click(screen.getByRole('button', { name: 'Remove from Regulars' }))
+    const confirm = within(screen.getByRole('dialog', { name: 'Remove Beef tacos?' }))
+    fireEvent.click(confirm.getByRole('button', { name: 'Keep it' }))
+    expect(screen.getByRole('dialog', { name: 'Edit Beef tacos' })).toBeInTheDocument()
+    expect(sent(server.fetchMock)).toEqual([])
+
+    fireEvent.click(screen.getByRole('button', { name: 'Remove from Regulars' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Remove' }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    await waitFor(() => expect(rows()).toHaveLength(1))
+    expect(within(rows()[0]!).getByText('Pot roast')).toBeInTheDocument()
+    expect(sent(server.fetchMock)).toEqual([{ request: 'DELETE /api/v1/dinners/d1', body: undefined }])
+  })
+
+  it('puts a refused removal back and says why', async () => {
+    stubServer([TACOS], { 'DELETE /api/v1/dinners/d1': () => errorResponse(500, 'internal') })
+    await renderPage()
+
+    openRow('Beef tacos')
+    fireEvent.click(screen.getByRole('button', { name: 'Remove from Regulars' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Remove' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent('Could not remove Beef tacos: internal message')
+    expect(rows()).toHaveLength(1)
+  })
+
+  describe('Fix recipe', () => {
+    const CANDIDATES = {
+      candidates: [
+        {
+          candidate_id: 'https://example.com/pizza',
+          title: 'Weeknight pizza',
+          site_name: 'Example Kitchen',
+          photo_url: '/media/photos/p7-400.jpg',
+          minutes: 45,
+        },
+        { candidate_id: 'https://cook.test/pizza', title: 'Sheet-pan pizza', site_name: 'Cook Test', photo_url: null, minutes: null },
+        { candidate_id: 'https://food.test/p', title: 'Pizza margherita', site_name: 'Food Test', photo_url: null, minutes: 30 },
+      ],
+    }
+
+    function grounded(server: { regulars: DinnerBody[] }, overrides: Partial<DinnerBody>) {
+      const fixed = { ...PIZZA, grounding_error: null, ...overrides }
+      server.regulars = [fixed]
+      return jsonResponse(200, fixed)
+    }
+
+    function fixSheet() {
+      return within(screen.getByRole('dialog', { name: 'Fix recipe' }))
+    }
+
+    it('opens from a Needs a recipe row and picks one of up to three matches', async () => {
+      const server = stubServer([PIZZA], {
+        'GET /api/v1/dinners/d3/recipe-candidates': () => jsonResponse(200, CANDIDATES),
+        'POST /api/v1/dinners/d3/ground': () =>
+          grounded(server, { grounding_status: 'grounded', photo_url: '/media/photos/p7-400.jpg', method: 'oven', minutes_total: 45 }),
+      })
+      await renderPage()
+
+      openRow('Pizza night')
+      const matches = within(await fixSheet().findByRole('list', { name: 'Recipe matches' }))
+      const options = matches.getAllByRole('button')
+      expect(options.map((option) => option.getAttribute('aria-label'))).toEqual([
+        'Use Weeknight pizza from Example Kitchen',
+        'Use Sheet-pan pizza from Cook Test',
+        'Use Pizza margherita from Food Test',
+      ])
+      expect(within(options[0]!).getByRole('img', { name: 'Weeknight pizza' })).toHaveAttribute('src', '/media/photos/p7-400.jpg')
+      expect(within(options[0]!).getByText('Example Kitchen')).toBeInTheDocument()
+      expectMinHitArea(options[0]!)
+
+      fireEvent.click(options[0]!)
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+      expect(sent(server.fetchMock)).toEqual([
+        { request: 'POST /api/v1/dinners/d3/ground', body: { candidate_id: 'https://example.com/pizza' } },
+      ])
+      expect(within(row('Pizza night')).getByText('Recipe found')).toBeInTheDocument()
+      expect(within(row('Pizza night')).getByText('Oven · 45 min')).toBeInTheDocument()
+    })
+
+    it('says so when no match was found', async () => {
+      stubServer([PIZZA], { 'GET /api/v1/dinners/d3/recipe-candidates': () => jsonResponse(200, { candidates: [] }) })
+      await renderPage()
+      openRow('Pizza night')
+      expect(await fixSheet().findByText('No matches were found. Paste a recipe link or type it in.')).toBeInTheDocument()
+    })
+
+    it('grounds a pasted recipe link, and says why a link was refused', async () => {
+      let answers = 0
+      const server = stubServer([PIZZA], {
+        'GET /api/v1/dinners/d3/recipe-candidates': () => jsonResponse(200, CANDIDATES),
+        'POST /api/v1/dinners/d3/ground': () =>
+          ++answers === 1 ? errorResponse(422, 'ungroundable') : grounded(server, { grounding_status: 'grounded' }),
+      })
+      await renderPage()
+
+      openRow('Pizza night')
+      fireEvent.click(fixSheet().getByRole('radio', { name: 'Paste a link' }))
+      fireEvent.change(fixSheet().getByLabelText('Recipe link'), { target: { value: ' https://example.com/blog/pizza ' } })
+      fireEvent.click(fixSheet().getByRole('button', { name: 'Use this recipe' }))
+      expect(await fixSheet().findByRole('alert')).toHaveTextContent('Not fixed: ungroundable message')
+
+      fireEvent.change(fixSheet().getByLabelText('Recipe link'), { target: { value: 'https://example.com/pizza-2' } })
+      fireEvent.click(fixSheet().getByRole('button', { name: 'Use this recipe' }))
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+      expect(sent(server.fetchMock)).toEqual([
+        { request: 'POST /api/v1/dinners/d3/ground', body: { recipe_url: 'https://example.com/blog/pizza' } },
+        { request: 'POST /api/v1/dinners/d3/ground', body: { recipe_url: 'https://example.com/pizza-2' } },
+      ])
+      expect(within(row('Pizza night')).getByText('Recipe found')).toBeInTheDocument()
+    })
+
+    it('saves ingredients and steps typed in', async () => {
+      const server = stubServer([PIZZA], {
+        'GET /api/v1/dinners/d3/recipe-candidates': () => jsonResponse(200, CANDIDATES),
+        'POST /api/v1/dinners/d3/ground': () =>
+          grounded(server, { grounding_status: 'manual', method: 'oven', minutes_total: 35 }),
+      })
+      await renderPage()
+
+      openRow('Pizza night')
+      fireEvent.click(fixSheet().getByRole('radio', { name: 'Type it in' }))
+      const save = fixSheet().getByRole('button', { name: 'Save recipe' })
+      expect(save).toBeDisabled()
+      fireEvent.change(fixSheet().getByLabelText('Ingredients, one per line'), {
+        target: { value: '1 pizza dough\n\n 1 cup tomato sauce \n2 cups mozzarella' },
+      })
+      fireEvent.change(fixSheet().getByLabelText('Steps, one per line'), {
+        target: { value: 'Heat the oven to 250°C.\nTop the dough and bake 12 minutes.\n' },
+      })
+      fireEvent.change(fixSheet().getByLabelText('Method'), { target: { value: 'oven' } })
+      fireEvent.change(fixSheet().getByLabelText('Minutes'), { target: { value: '35' } })
+      fireEvent.click(save)
+
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+      expect(sent(server.fetchMock)).toEqual([
+        {
+          request: 'POST /api/v1/dinners/d3/ground',
+          body: {
+            manual: {
+              ingredients: ['1 pizza dough', '1 cup tomato sauce', '2 cups mozzarella'],
+              steps: ['Heat the oven to 250°C.', 'Top the dough and bake 12 minutes.'],
+              minutes: 35,
+              method: 'oven',
+            },
+          },
+        },
+      ])
+      expect(within(row('Pizza night')).getByText('Recipe found')).toBeInTheDocument()
+      expect(within(row('Pizza night')).getByText('Oven · 35 min')).toBeInTheDocument()
+    })
+
+    it('switches to editing the Regular', async () => {
+      stubServer([PIZZA], { 'GET /api/v1/dinners/d3/recipe-candidates': () => jsonResponse(200, CANDIDATES) })
+      await renderPage()
+      openRow('Pizza night')
+      fireEvent.click(fixSheet().getByRole('button', { name: 'Edit or remove Pizza night' }))
+      expect(screen.getByRole('dialog', { name: 'Edit Pizza night' })).toBeInTheDocument()
+    })
+  })
+
+  it('refreshes grounding status while any Regular is finding its recipe, then stops', async () => {
+    // Only intervals are faked: TanStack Query polls with setInterval, and
+    // Testing Library's waits keep their real timers.
+    vi.useFakeTimers({ toFake: ['setInterval', 'clearInterval'] })
+    const server = stubServer([TACOS, CHILI])
+    await renderPage()
+    expect(within(row('Chili')).getByText('Finding recipe…')).toBeInTheDocument()
+    expect(reads(server.fetchMock)).toBe(1)
+
+    await act(() => vi.advanceTimersByTimeAsync(GROUNDING_POLL_MS))
+    await waitFor(() => expect(reads(server.fetchMock)).toBe(2))
+    expect(within(row('Chili')).getByText('Finding recipe…')).toBeInTheDocument()
+
+    server.regulars = [TACOS, { ...CHILI, grounding_status: 'grounded', photo_url: '/media/photos/p2-400.jpg' }]
+    await act(() => vi.advanceTimersByTimeAsync(GROUNDING_POLL_MS))
+    expect(await within(row('Chili')).findByText('Recipe found')).toBeInTheDocument()
+    expect(within(row('Chili')).getByRole('img', { name: 'Chili' })).toHaveAttribute('src', '/media/photos/p2-400.jpg')
+    expect(reads(server.fetchMock)).toBe(3)
+
+    // Nothing is pending any more, so nothing is read again.
+    await act(() => vi.advanceTimersByTimeAsync(GROUNDING_POLL_MS * 3))
+    expect(reads(server.fetchMock)).toBe(3)
+  })
+
+  it('does not poll when no Regular is finding its recipe', async () => {
+    vi.useFakeTimers({ toFake: ['setInterval', 'clearInterval'] })
+    const server = stubServer([TACOS, PIZZA])
+    await renderPage()
+    await act(() => vi.advanceTimersByTimeAsync(GROUNDING_POLL_MS * 3))
+    expect(reads(server.fetchMock)).toBe(1)
+  })
+})

web/src/settings/RegularsSettingsPage.tsx

@@ -0,0 +1,617 @@
+import { ChevronLeft, Heart, Plus } from 'lucide-react'
+import { useId, useState, type FormEvent, type ReactNode } from 'react'
+import { useNavigate } from 'react-router'
+import {
+  DIFFICULTIES,
+  METHODS,
+  useAddRegular,
+  useEditRegular,
+  useGroundRegular,
+  useRecipeCandidates,
+  useRegulars,
+  useRemoveRegular,
+  useToggleFavorite,
+  type Difficulty,
+  type GroundingStatus,
+  type ManualRecipe,
+  type Method,
+  type NewRegular,
+  type RecipeFix,
+  type Regular,
+  type RegularPatch,
+} from '../dinners/api.ts'
+import { useRefusals } from '../dinners/useRefusals.ts'
+import { Button } from '../ui/Button.tsx'
+import { Card } from '../ui/Card.tsx'
+import { ErrorBanner } from '../ui/ErrorBanner.tsx'
+import { Icon } from '../ui/Icon.tsx'
+import { IconButton } from '../ui/IconButton.tsx'
+import { ListRow } from '../ui/ListRow.tsx'
+import { Photo } from '../ui/Photo.tsx'
+import { Segmented } from '../ui/Segmented.tsx'
+import { Select } from '../ui/Select.tsx'
+import { Sheet } from '../ui/Sheet.tsx'
+import { Skeleton } from '../ui/Skeleton.tsx'
+import { Tag } from '../ui/Tag.tsx'
+import { TextInput } from '../ui/TextInput.tsx'
+import styles from './RegularsSettingsPage.module.css'
+
+// The most minutes a dinner may take, as the dinners API allows: a day.
+const MAX_MINUTES = 1440
+
+export const methodLabels: Record<Method, string> = {
+  stovetop: 'Stovetop',
+  oven: 'Oven',
+  crockpot: 'Crock pot',
+  grill: 'Grill',
+  other: 'Other',
+}
+
+const difficultyLabels: Record<Difficulty, string> = { easy: 'Easy', medium: 'Medium', hard: 'Hard' }
+
+// A pasted link is added as a recipe link; anything else is a dinner name.
+const LINK = /^https?:\/\//i
+
+// Settings · Regular dinners: the household's Regulars, each with its photo,
+// method and minutes, favorite heart and whether its recipe was found. The
+// field at the top adds one by name or pasted recipe link; tapping one
+// edits or removes it, or fixes its recipe when none was found.
+export function RegularsSettingsPage() {
+  const navigate = useNavigate()
+  return (
+    <div className={styles.page}>
+      <header className={styles.header}>
+        <IconButton label="Back to Settings" onClick={() => void navigate('/settings')}>
+          <Icon icon={ChevronLeft} size="nav" />
+        </IconButton>
+        <div>
+          <p className={styles.kicker}>Settings</p>
+          <h1 className={styles.title}>Regular dinners</h1>
+        </div>
+      </header>
+      <p className={styles.shared}>Changes apply to everyone in the household.</p>
+      <RegularsManager />
+    </div>
+  )
+}
+
+// Which sheet is open, for which Regular.
+type Open = { sheet: 'edit' | 'fix'; id: string } | null
+
+function RegularsManager() {
+  const regulars = useRegulars()
+  const add = useAddRegular()
+  const remove = useRemoveRegular()
+  const favorite = useToggleFavorite()
+  const { refusals, track } = useRefusals()
+  const [draft, setDraft] = useState('')
+  const [open, setOpen] = useState<Open>(null)
+  const headingId = useId()
+  const list = regulars.data ?? []
+  // A Regular removed meanwhile closes its sheet.
+  const opened = open && list.find((regular) => regular.id === open.id && !regular.pending)
+
+  function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const text = draft.trim()
+    if (text === '') return
+    const body: NewRegular = LINK.test(text) ? { recipe_url: text } : { name: text }
+    track(`add:${text.toLowerCase()}`, `add ${text}`, add.mutateAsync(body))
+    setDraft('')
+  }
+
+  function onRemove(regular: Regular) {
+    setOpen(null)
+    track(`remove:${regular.id}`, `remove ${regular.name}`, remove.mutateAsync(regular))
+  }
+
+  function onFavorite(regular: Regular) {
+    track(`favorite:${regular.id}`, `change the favorite heart on ${regular.name}`, favorite.mutateAsync(regular))
+  }
+
+  return (
+    <>
+      <form className={styles.add} onSubmit={onSubmit}>
+        <TextInput
+          label="Add a Regular"
+          labelHidden
+          className={styles.addInput}
+          placeholder="Dinner name or recipe link"
+          autoComplete="off"
+          enterKeyHint="done"
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+        />
+        <IconButton type="submit" label="Add Regular" tone="accent" disabled={draft.trim() === ''}>
+          <Icon icon={Plus} size="nav" />
+        </IconButton>
+      </form>
+      {refusals.map((refusal) => (
+        <p key={refusal.key} role="alert" className={styles.problem}>
+          {refusal.text}
+        </p>
+      ))}
+
+      {regulars.isPending && <Skeleton className={styles.loading} />}
+      {regulars.isError && (
+        <ErrorBanner onRetry={() => void regulars.refetch()}>
+          Your Regulars could not load: {regulars.error.message}
+        </ErrorBanner>
+      )}
+      {regulars.isSuccess && (
+        <section aria-labelledby={headingId} className={styles.section}>
+          <h2 id={headingId} className={styles.groupLabel}>
+            On rotation · {list.length}
+          </h2>
+          {list.length === 0 ? (
+            <p className={styles.hint}>No Regulars yet. Add the dinners your household makes on repeat.</p>
+          ) : (
+            <Card className={styles.card}>
+              <ul className={styles.rows} aria-label="Regulars">
+                {list.map((regular) => (
+                  <RegularRow
+                    key={regular.id}
+                    regular={regular}
+                    onOpen={() =>
+                      setOpen({ sheet: regular.grounding_status === 'failed' ? 'fix' : 'edit', id: regular.id })
+                    }
+                    onFavorite={() => onFavorite(regular)}
+                  />
+                ))}
+              </ul>
+            </Card>
+          )}
+        </section>
+      )}
+
+      {opened && open.sheet === 'edit' && (
+        <EditRegularSheet
+          key={opened.id}
+          regular={opened}
+          onClose={() => setOpen(null)}
+          onRemove={() => onRemove(opened)}
+        />
+      )}
+      {opened && open.sheet === 'fix' && (
+        <FixRecipeSheet
+          key={opened.id}
+          regular={opened}
+          onClose={() => setOpen(null)}
+          onEdit={() => setOpen({ sheet: 'edit', id: opened.id })}
+        />
+      )}
+    </>
+  )
+}
+
+// details is a Regular's "method · minutes" line, or null when neither is
+// known yet.
+export function details(regular: Regular): string | null {
+  const parts = [
+    regular.method && methodLabels[regular.method],
+    regular.minutes_total !== null && `${regular.minutes_total} min`,
+  ].filter((part): part is string => typeof part === 'string')
+  return parts.length === 0 ? null : parts.join(' · ')
+}
+
+const badges: Record<GroundingStatus, { text: string; className: string | undefined }> = {
+  pending: { text: 'Finding recipe…', className: styles.finding },
+  grounded: { text: 'Recipe found', className: styles.found },
+  manual: { text: 'Recipe found', className: styles.found },
+  failed: { text: 'Needs a recipe', className: styles.needs },
+}
+
+function GroundingBadge({ status }: { status: GroundingStatus }) {
+  const badge = badges[status]
+  return <Tag className={`${styles.badge} ${badge.className}`}>{badge.text}</Tag>
+}
+
+type RegularRowProps = {
+  regular: Regular
+  onOpen: () => void
+  onFavorite: () => void
+}
+
+function RegularRow({ regular, onOpen, onFavorite }: RegularRowProps) {
+  const line = details(regular)
+  return (
+    <li className={styles.item} aria-busy={regular.pending}>
+      <ListRow
+        className={regular.pending && styles.pending}
+        leading={<Photo id={regular.photo_id} name={regular.name} radius="14px" sizes="48px" className={styles.photo} />}
+        title={regular.name}
+        meta={
+          <span className={styles.meta}>
+            {line && <span>{line}</span>}
+            <GroundingBadge status={regular.grounding_status} />
+          </span>
+        }
+        onClick={regular.pending ? undefined : onOpen}
+        trailing={
+          <IconButton
+            label={`Favorite ${regular.name}`}
+            aria-pressed={regular.is_favorite}
+            disabled={regular.pending}
+            onClick={onFavorite}
+          >
+            <Icon icon={Heart} size="nav" className={regular.is_favorite ? styles.filled : undefined} />
+          </IconButton>
+        }
+      />
+    </li>
+  )
+}
+
+type SheetFrameProps = {
+  title: string
+  onClose: () => void
+  children: ReactNode
+}
+
+function SheetFrame({ title, onClose, children }: SheetFrameProps) {
+  const titleId = useId()
+  return (
+    <Sheet open onClose={onClose} aria-labelledby={titleId}>
+      <div className={styles.sheet}>
+        <h2 id={titleId} className={styles.sheetTitle}>
+          {title}
+        </h2>
+        {children}
+      </div>
+    </Sheet>
+  )
+}
+
+// minutesProblem is why a typed minutes value cannot be saved, or null.
+function minutesProblem(text: string): string | null {
+  if (text === '') return null
+  const minutes = Number(text)
+  if (!Number.isInteger(minutes) || minutes < 1 || minutes > MAX_MINUTES) {
+    return `Minutes must be a whole number from 1 to ${MAX_MINUTES}.`
+  }
+  return null
+}
+
+type Draft = { name: string; method: Method | ''; minutes: string; difficulty: Difficulty | '' }
+
+function draftOf(regular: Regular): Draft {
+  return {
+    name: regular.name,
+    method: regular.method ?? '',
+    minutes: regular.minutes_total === null ? '' : String(regular.minutes_total),
+    difficulty: regular.difficulty ?? '',
+  }
+}
+
+// patchOf is the PATCH body for the fields draft changes. A field the
+// Regular has no value for stays unset until one is chosen.
+function patchOf(regular: Regular, draft: Draft): RegularPatch {
+  const saved = draftOf(regular)
+  const patch: RegularPatch = {}
+  if (draft.name.trim() !== saved.name) patch.name = draft.name.trim()
+  if (draft.method !== saved.method && draft.method !== '') patch.method = draft.method
+  if (draft.minutes !== saved.minutes && draft.minutes !== '') patch.minutes_total = Number(draft.minutes)
+  if (draft.difficulty !== saved.difficulty && draft.difficulty !== '') patch.difficulty = draft.difficulty
+  return patch
+}
+
+type EditRegularSheetProps = {
+  regular: Regular
+  onClose: () => void
+  onRemove: () => void
+}
+
+// EditRegularSheet renames a Regular and sets its method, minutes and
+// difficulty, or removes it from the rotation once confirmed.
+function EditRegularSheet({ regular, onClose, onRemove }: EditRegularSheetProps) {
+  const [draft, setDraft] = useState(() => draftOf(regular))
+  const [confirming, setConfirming] = useState(false)
+  const edit = useEditRegular()
+  const patch = patchOf(regular, draft)
+  const minutesError = minutesProblem(draft.minutes)
+  const nameError = draft.name.trim() === '' ? 'A Regular needs a name.' : null
+  const canSave = Object.keys(patch).length > 0 && minutesError === null && nameError === null
+
+  function change(next: Partial<Draft>) {
+    edit.reset()
+    setDraft((current) => ({ ...current, ...next }))
+  }
+
+  function onSave(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (!canSave) return
+    edit.mutate({ id: regular.id, patch }, { onSuccess: onClose })
+  }
+
+  if (confirming) {
+    return (
+      <SheetFrame title={`Remove ${regular.name}?`} onClose={onClose}>
+        <p className={styles.hint}>
+          It leaves your Regulars, so suggestions and plans stop using it. You can add it again later.
+        </p>
+        <div className={styles.actions}>
+          <Button onClick={onRemove}>Remove</Button>
+          <Button variant="outline" onClick={() => setConfirming(false)}>
+            Keep it
+          </Button>
+        </div>
+      </SheetFrame>
+    )
+  }
+
+  return (
+    <SheetFrame title={`Edit ${regular.name}`} onClose={onClose}>
+      <form className={styles.form} onSubmit={onSave}>
+        <fieldset className={styles.lock} disabled={edit.isPending}>
+          <TextInput
+            label="Name"
+            value={draft.name}
+            autoComplete="off"
+            aria-invalid={nameError !== null}
+            onChange={(event) => change({ name: event.target.value })}
+          />
+          {nameError && <p className={styles.problem}>{nameError}</p>}
+          <div className={styles.columns}>
+            <Select label="Method" value={draft.method} onChange={(event) => change({ method: event.target.value as Method })}>
+              {regular.method === null && (
+                <option value="" disabled>
+                  Not set
+                </option>
+              )}
+              {METHODS.map((method) => (
+                <option key={method} value={method}>
+                  {methodLabels[method]}
+                </option>
+              ))}
+            </Select>
+            <TextInput
+              label="Minutes"
+              className={styles.paired}
+              type="number"
+              inputMode="numeric"
+              min={1}
+              max={MAX_MINUTES}
+              value={draft.minutes}
+              aria-invalid={minutesError !== null}
+              onChange={(event) => change({ minutes: event.target.value })}
+            />
+          </div>
+          {minutesError && <p className={styles.problem}>{minutesError}</p>}
+          <Select
+            label="Difficulty"
+            value={draft.difficulty}
+            onChange={(event) => change({ difficulty: event.target.value as Difficulty })}
+          >
+            {regular.difficulty === null && (
+              <option value="" disabled>
+                Not set
+              </option>
+            )}
+            {DIFFICULTIES.map((difficulty) => (
+              <option key={difficulty} value={difficulty}>
+                {difficultyLabels[difficulty]}
+              </option>
+            ))}
+          </Select>
+          {edit.isError && (
+            <p role="alert" className={styles.problem}>
+              Not saved: {edit.error.message}
+            </p>
+          )}
+          <div className={styles.actions}>
+            <Button type="submit" disabled={!canSave}>
+              {edit.isPending ? 'Saving…' : 'Save changes'}
+            </Button>
+            <Button variant="outline" onClick={() => setConfirming(true)}>
+              Remove from Regulars
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </SheetFrame>
+  )
+}
+
+type FixPath = 'pick' | 'link' | 'manual'
+
+const fixPaths = [
+  { value: 'pick', label: 'Pick one' },
+  { value: 'link', label: 'Paste a link' },
+  { value: 'manual', label: 'Type it in' },
+] as const
+
+type FixRecipeSheetProps = {
+  regular: Regular
+  onClose: () => void
+  onEdit: () => void
+}
+
+// lines is text split into its non-blank lines, trimmed.
+function lines(text: string): string[] {
+  return text
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line !== '')
+}
+
+// FixRecipeSheet grounds a Regular whose recipe was not found: in one of
+// up to three recipe pages found for its name, in a pasted recipe link, or
+// in ingredients and steps typed in.
+function FixRecipeSheet({ regular, onClose, onEdit }: FixRecipeSheetProps) {
+  const [path, setPath] = useState<FixPath>('pick')
+  const ground = useGroundRegular()
+
+  function fix(body: RecipeFix) {
+    ground.mutate({ id: regular.id, fix: body }, { onSuccess: onClose })
+  }
+
+  return (
+    <SheetFrame title="Fix recipe" onClose={onClose}>
+      <p className={styles.hint}>
+        We couldn&apos;t find a recipe for {regular.name}. Pick a match below, paste a recipe link or type it in.
+      </p>
+      <Segmented
+        label="How to fix the recipe"
+        options={fixPaths}
+        value={path}
+        onValueChange={(next) => {
+          ground.reset()
+          setPath(next)
+        }}
+      />
+      <fieldset className={styles.lock} disabled={ground.isPending}>
+        {path === 'pick' && <PickCandidate id={regular.id} onPick={(candidate_id) => fix({ candidate_id })} />}
+        {path === 'link' && <PasteLink onSubmit={(recipe_url) => fix({ recipe_url })} />}
+        {path === 'manual' && <ManualEntry onSubmit={(manual) => fix({ manual })} />}
+      </fieldset>
+      <p role="status" className={styles.status}>
+        {ground.isPending && 'Finding recipe… this can take a minute.'}
+      </p>
+      {ground.isError && (
+        <p role="alert" className={styles.problem}>
+          Not fixed: {ground.error.message}
+        </p>
+      )}
+      <Button variant="outline" disabled={ground.isPending} onClick={onEdit}>
+        Edit or remove {regular.name}
+      </Button>
+    </SheetFrame>
+  )
+}
+
+function PickCandidate({ id, onPick }: { id: string; onPick: (candidateId: string) => void }) {
+  const candidates = useRecipeCandidates(id)
+  if (candidates.isPending) return <Skeleton className={styles.candidatesLoading} />
+  if (candidates.isError) {
+    return (
+      <ErrorBanner onRetry={() => void candidates.refetch()}>
+        Recipe matches could not load: {candidates.error.message}
+      </ErrorBanner>
+    )
+  }
+  if (candidates.data.length === 0) {
+    return <p className={styles.hint}>No matches were found. Paste a recipe link or type it in.</p>
+  }
+  return (
+    <ul className={styles.candidates} aria-label="Recipe matches">
+      {candidates.data.map((candidate) => (
+        <li key={candidate.candidate_id}>
+          <button
+            type="button"
+            className={styles.candidate}
+            aria-label={`Use ${candidate.title} from ${candidate.site_name}`}
+            onClick={() => onPick(candidate.candidate_id)}
+          >
+            <Photo id={candidate.photo_id} name={candidate.title} radius="14px" sizes="56px" className={styles.candidatePhoto} />
+            <span className={styles.candidateBody}>
+              <span className={styles.candidateTitle}>{candidate.title}</span>
+              <span className={styles.candidateSite}>{candidate.site_name}</span>
+            </span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function PasteLink({ onSubmit }: { onSubmit: (recipeUrl: string) => void }) {
+  const [link, setLink] = useState('')
+  const url = link.trim()
+  return (
+    <form
+      className={styles.form}
+      onSubmit={(event) => {
+        event.preventDefault()
+        if (url !== '') onSubmit(url)
+      }}
+    >
+      <TextInput
+        label="Recipe link"
+        type="url"
+        inputMode="url"
+        placeholder="https://"
+        autoComplete="off"
+        value={link}
+        onChange={(event) => setLink(event.target.value)}
+      />
+      <Button type="submit" disabled={url === ''}>
+        Use this recipe
+      </Button>
+    </form>
+  )
+}
+
+function ManualEntry({ onSubmit }: { onSubmit: (manual: ManualRecipe) => void }) {
+  const [ingredients, setIngredients] = useState('')
+  const [steps, setSteps] = useState('')
+  const [minutes, setMinutes] = useState('')
+  const [method, setMethod] = useState<Method | ''>('')
+  const ingredientsId = useId()
+  const stepsId = useId()
+  const minutesError = minutesProblem(minutes)
+  const ingredientLines = lines(ingredients)
+  const canSave = ingredientLines.length > 0 && minutesError === null
+
+  function onSave(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (!canSave) return
+    const manual: ManualRecipe = { ingredients: ingredientLines, steps: lines(steps) }
+    if (minutes !== '') manual.minutes = Number(minutes)
+    if (method !== '') manual.method = method
+    onSubmit(manual)
+  }
+
+  return (
+    <form className={styles.form} onSubmit={onSave}>
+      <div className={styles.field}>
+        <label htmlFor={ingredientsId} className={styles.label}>
+          Ingredients, one per line
+        </label>
+        <textarea
+          id={ingredientsId}
+          className={styles.textarea}
+          rows={5}
+          value={ingredients}
+          onChange={(event) => setIngredients(event.target.value)}
+        />
+      </div>
+      <div className={styles.field}>
+        <label htmlFor={stepsId} className={styles.label}>
+          Steps, one per line
+        </label>
+        <textarea
+          id={stepsId}
+          className={styles.textarea}
+          rows={5}
+          value={steps}
+          onChange={(event) => setSteps(event.target.value)}
+        />
+      </div>
+      <div className={styles.columns}>
+        <Select label="Method" value={method} onChange={(event) => setMethod(event.target.value as Method | '')}>
+          <option value="">Not set</option>
+          {METHODS.map((m) => (
+            <option key={m} value={m}>
+              {methodLabels[m]}
+            </option>
+          ))}
+        </Select>
+        <TextInput
+          label="Minutes"
+          className={styles.paired}
+          type="number"
+          inputMode="numeric"
+          min={1}
+          max={MAX_MINUTES}
+          value={minutes}
+          aria-invalid={minutesError !== null}
+          onChange={(event) => setMinutes(event.target.value)}
+        />
+      </div>
+      {minutesError && <p className={styles.problem}>{minutesError}</p>}
+      <Button type="submit" disabled={!canSave}>
+        Save recipe
+      </Button>
+    </form>
+  )
+}

web/src/test/dinners.ts

@@ -0,0 +1,45 @@
+// DinnerBody is a dinner as the dinners API sends it.
+export type DinnerBody = {
+  id: string
+  name: string
+  status: string
+  origin: string
+  method: string | null
+  minutes_total: number | null
+  difficulty: string | null
+  cuisine: string | null
+  is_favorite: boolean
+  recipe_id: string | null
+  recipe_url: string | null
+  photo_url: string | null
+  grounding_status: string
+  grounding_error: string | null
+  updated_by: string | null
+  created_at: string
+  updated_at: string
+}
+
+// dinnerBody is a Regular as the server sends it: grounded with no photo,
+// method or minutes unless overrides set them.
+export function dinnerBody(id: string, name: string, overrides: Partial<DinnerBody> = {}): DinnerBody {
+  return {
+    id,
+    name,
+    status: 'regular',
+    origin: 'regular',
+    method: null,
+    minutes_total: null,
+    difficulty: null,
+    cuisine: null,
+    is_favorite: false,
+    recipe_id: null,
+    recipe_url: null,
+    photo_url: null,
+    grounding_status: 'grounded',
+    grounding_error: null,
+    updated_by: null,
+    created_at: '2026-10-01T15:00:00.000Z',
+    updated_at: '2026-10-01T15:00:00.000Z',
+    ...overrides,
+  }
+}