Refetch Rotation checks when a notification focuses Home already open (Feature 21)

A notification tap that focuses a window already at its url does not
navigate, so Home does not remount and a recently read empty list stays
within the query client's staleTime. The service worker now posts that
window NotificationOpened, and useRotationReviews refetches on it, so the
Keep it in rotation card shows without a remount.

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

web/src/App.test.tsx

@@ -88,7 +88,7 @@ describe('App routes', () => {
 
   it('/ renders the Home screen inside the shell', async () => {
     mockViewport(390)
-    stubFetchByPath({ ...SIGNED_IN, '/api/v1/home': () => jsonResponse(200, HOME) })
+    stubFetchByPath({ ...SIGNED_IN, '/api/v1/home': () => jsonResponse(200, HOME), '/api/v1/rotation-reviews': () => jsonResponse(200, { reviews: [] }) })
     renderAt('/')
     const heading = await screen.findByRole('heading', { level: 1, name: "Tonight's quest" })
     expect(screen.getByRole('main')).toContainElement(heading)
@@ -273,7 +273,13 @@ describe('App bootstrap', () => {
 
   it('reports a /me failure with a retry instead of rendering the routes', async () => {
     mockViewport(390)
-    stubFetch(errorResponse(500, 'internal'), jsonResponse(200, ME), jsonResponse(200, HOUSEHOLD_SETTINGS), jsonResponse(200, HOME))
+    const mes = [errorResponse(500, 'internal'), jsonResponse(200, ME)]
+    stubFetchByPath({
+      ...SIGNED_IN,
+      '/api/v1/me': () => mes.shift()!,
+      '/api/v1/home': () => jsonResponse(200, HOME),
+      '/api/v1/rotation-reviews': () => jsonResponse(200, { reviews: [] }),
+    })
     renderAt('/')
 
     expect(await screen.findByRole('alert')).toHaveTextContent('MealQuest could not load: internal message')
@@ -294,7 +300,7 @@ describe('App offline bootstrap', () => {
   // visitOnline is an earlier online visit on this device: /me answers with a
   // member, then the app is closed.
   async function visitOnline() {
-    stubFetchByPath({ ...SIGNED_IN, '/api/v1/home': () => jsonResponse(200, HOME) })
+    stubFetchByPath({ ...SIGNED_IN, '/api/v1/home': () => jsonResponse(200, HOME), '/api/v1/rotation-reviews': () => jsonResponse(200, { reviews: [] }) })
     const { unmount } = renderAt('/')
     expect(await screen.findByRole('heading', { name: 'Pizza night' })).toBeInTheDocument()
     unmount()

web/src/home/HomePage.test.tsx

@@ -3,10 +3,11 @@ import { createMemoryRouter, RouterProvider, useLocation } from 'react-router'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { ApiProviders, HOME } from '../test/ApiProviders.tsx'
 import { declaredStyle } from '../test/cssRules.ts'
-import { errorResponse, jsonResponse, stubFetch, stubFetchByPath } from '../test/fetchStub.ts'
+import { errorResponse, jsonResponse, stubFetchByPath } from '../test/fetchStub.ts'
 import { expectMinHitArea } from '../test/hitArea.ts'
 import { HOME_PATH } from './api.ts'
 import { HomePage } from './HomePage.tsx'
+import { ROTATION_REVIEWS_PATH } from './rotation.ts'
 
 // NOTHING_YET is the home of a household with no plan, no Side quests, no
 // Supply run and nothing unread.
@@ -29,7 +30,7 @@ function Where() {
 }
 
 function renderHome(body: unknown) {
-  stubFetchByPath({ [HOME_PATH]: () => jsonResponse(200, body) })
+  stubFetchByPath({ [HOME_PATH]: () => jsonResponse(200, body), [ROTATION_REVIEWS_PATH]: () => jsonResponse(200, { reviews: [] }) })
   return renderRouter()
 }
 
@@ -198,7 +199,11 @@ describe('HomePage', () => {
   })
 
   it('reports a failure with Retry, and no made-up content', async () => {
-    stubFetch(errorResponse(500, 'internal'), jsonResponse(200, HOME))
+    const homes = [errorResponse(500, 'internal'), jsonResponse(200, HOME)]
+    stubFetchByPath({
+      [HOME_PATH]: () => homes.shift()!,
+      [ROTATION_REVIEWS_PATH]: () => jsonResponse(200, { reviews: [] }),
+    })
     renderRouter()
 
     expect(await screen.findByRole('alert')).toHaveTextContent("Couldn't load tonight's quest. internal message")

web/src/home/HomePage.tsx

@@ -12,6 +12,7 @@ import { Photo } from '../ui/Photo.tsx'
 import { Skeleton } from '../ui/Skeleton.tsx'
 import { useHome, type Home, type Origin, type Tonight } from './api.ts'
 import styles from './HomePage.module.css'
+import { RotationCheck } from './RotationCheck.tsx'
 import { UpdatesSheet } from './UpdatesSheet.tsx'
 
 const ORIGIN_LABEL: Record<Origin, string> = { regular: 'Regular', side_quest: 'Side quest' }
@@ -108,7 +109,8 @@ function Tiles() {
 // HomePage is mock 1g, Home: today's date over "Tonight's quest" and the
 // Recent updates bell, the Tonight card (or the way to plan the week), the
 // Quick dinner and Cook from what I have tiles, and the status rows, all
-// from GET /api/v1/home.
+// from GET /api/v1/home. Above the tiles is the Rotation check, "Keep it in
+// rotation?", while a tried dinner waits for the household's answer.
 //
 // The bell carries a grape dot while there are unread updates and opens the
 // Recent updates sheet, which marks them seen.
@@ -141,6 +143,7 @@ export function HomePage() {
         <ErrorBanner onRetry={() => void home.refetch()}>Couldn't load tonight's quest. {home.error.message}</ErrorBanner>
       )}
       {data !== undefined && (data.tonight === null ? <NoPlan /> : <TonightCard tonight={data.tonight} />)}
+      <RotationCheck />
       <Tiles />
       {home.isPending && (
         <div className={styles.statuses} aria-hidden="true">

web/src/home/RotationCheck.module.css

@@ -0,0 +1,79 @@
+/* The Rotation check on Home: "Keep it in rotation?" above the tiles. */
+.card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 32px;
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.photo {
+  height: 120px;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 18px 12px;
+}
+
+.kicker {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-neutral-700);
+}
+
+.question {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 1.1;
+}
+
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 6px;
+}
+
+/* "We didn't make it": a text link at the 44 px tap minimum. */
+.notMade {
+  align-self: center;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 4px;
+  border: 0;
+  background: transparent;
+  color: var(--color-accent-700);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.notMade:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.notMade:focus-visible {
+  outline: 3px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.confirmation {
+  margin: 0;
+  padding: 12px 14px;
+  border-radius: 20px;
+  background: var(--color-accent-2-300);
+  color: var(--color-accent-2-900);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 700;
+}

web/src/home/RotationCheck.test.tsx

@@ -0,0 +1,281 @@
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { createMemoryRouter, RouterProvider } from 'react-router'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { clickPath, openNotification, parsePushPayload, type ClickWindow } from '../push/notification.ts'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ApiProvider, createApiClient, createQueryClient, createVerifiedSession, ME_PATH } from '../api/index.ts'
+import { createNetworkStatus } from '../pwa/networkStatus.ts'
+import { HOME } from '../test/ApiProviders.tsx'
+import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { HOME_PATH } from './api.ts'
+import { HomePage } from './HomePage.tsx'
+import { rotationReviewPath, ROTATION_REVIEWS_PATH } from './rotation.ts'
+
+// SHAKSHUKA and RAMEN are pending Rotation checks, oldest first, as GET
+// /api/v1/rotation-reviews sends them.
+const SHAKSHUKA = { dinner: { id: 'd7', name: 'Shakshuka', photo: '/media/photos/p7-400.jpg' }, plan_date: '2026-10-01' }
+const RAMEN = { dinner: { id: 'd8', name: 'Miso ramen', photo: null }, plan_date: '2026-10-02' }
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  Reflect.deleteProperty(navigator, 'serviceWorker')
+})
+
+type Deferred = { resolve: (response: Response) => void; path: string; body: unknown }
+
+// stubApi answers Home's reads like the server: the pending Rotation checks
+// are reviews, and each POST /api/v1/dinners/{id}/rotation-review waits in
+// decisions until the test answers it; a 200 answer takes the check off the
+// server's list, as the server does.
+function stubApi(reviews: (typeof SHAKSHUKA | typeof RAMEN)[]) {
+  const server = [...reviews]
+  const decisions: Deferred[] = []
+  const fetchMock = vi.fn<typeof fetch>((input, init) => {
+    const path = String(input)
+    if (path === ME_PATH) return Promise.resolve(jsonResponse(200, ME))
+    if (path === HOME_PATH) return Promise.resolve(jsonResponse(200, HOME))
+    if (path === ROTATION_REVIEWS_PATH) return Promise.resolve(jsonResponse(200, { reviews: server }))
+    const review = server.find((r) => rotationReviewPath(r.dinner.id) === path)
+    if (init?.method === 'POST' && review !== undefined) {
+      expect(new Headers(init.headers).get('X-MealQuest-CSRF')).toBe(ME.csrfToken)
+      const body: unknown = JSON.parse(String(init.body))
+      return new Promise<Response>((resolve) =>
+        decisions.push({
+          path,
+          body,
+          resolve: (response) => {
+            if (response.ok) server.splice(server.indexOf(review), 1)
+            resolve(response)
+          },
+        }),
+      )
+    }
+    throw new Error(`unexpected fetch: ${init?.method ?? 'GET'} ${path}`)
+  })
+  vi.stubGlobal('fetch', fetchMock)
+  return { fetchMock, decisions, server }
+}
+
+// decided is the server's answer to a decision on review.
+function decided(review: typeof SHAKSHUKA | typeof RAMEN, decision: string, dinnerStatus: string) {
+  return jsonResponse(200, {
+    dinner: review.dinner,
+    plan_date: review.plan_date,
+    decision,
+    dinner_status: dinnerStatus,
+    decided_at: '2026-10-02T13:00:00Z',
+    updated_by: 'sub-1',
+  })
+}
+
+// renderHome loads /me (for the CSRF token an answer needs) and renders Home
+// at path.
+async function renderHome(path = '/') {
+  const api = createApiClient(fakeLocation(path), createNetworkStatus(window), createVerifiedSession(localStorage))
+  await api.loadMe()
+  const router = createMemoryRouter([{ path: '/', element: <HomePage /> }], { initialEntries: [path] })
+  render(
+    <ApiProvider client={api}>
+      <QueryClientProvider client={createQueryClient()}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
+    </ApiProvider>,
+  )
+}
+
+const card = () => screen.findByRole('region', { name: 'Keep it in rotation?' })
+const posts = (fetchMock: ReturnType<typeof stubApi>['fetchMock']) =>
+  fetchMock.mock.calls.filter(([, init]) => init?.method === 'POST')
+
+describe('RotationCheck', () => {
+  it('shows no card when nothing waits for an answer', async () => {
+    const { fetchMock } = stubApi([])
+    await renderHome()
+
+    expect(await screen.findByRole('heading', { name: 'Pizza night' })).toBeInTheDocument()
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledWith(ROTATION_REVIEWS_PATH, expect.anything()))
+    expect(screen.queryByRole('region', { name: 'Keep it in rotation?' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Quick dinner' })).toBeInTheDocument()
+  })
+
+  it('asks about the oldest pending check above the tiles, and decides nothing by itself', async () => {
+    const { fetchMock } = stubApi([SHAKSHUKA, RAMEN])
+    await renderHome()
+
+    const check = await card()
+    expect(within(check).getByText('Last night: Shakshuka')).toBeInTheDocument()
+    expect(within(check).getByRole('heading', { level: 2, name: 'Keep it in rotation?' })).toBeInTheDocument()
+    expect(within(check).getByRole('img', { name: 'Shakshuka' })).toHaveAttribute('src', '/media/photos/p7-400.jpg')
+    expect(screen.queryByText('Last night: Miso ramen')).not.toBeInTheDocument()
+
+    const keep = within(check).getByRole('button', { name: 'Keep it' })
+    const drop = within(check).getByRole('button', { name: 'Not for us' })
+    const notMade = within(check).getByRole('button', { name: "We didn't make it" })
+    expect(keep.className).toMatch(/primary/)
+    expect(drop.className).toMatch(/outline/)
+    expect(notMade.className).toMatch(/notMade/)
+    for (const button of [keep, drop, notMade]) expectMinHitArea(button)
+
+    const tiles = screen.getByRole('link', { name: 'Quick dinner' })
+    expect(check.compareDocumentPosition(tiles) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(screen.getByRole('region', { name: 'Tonight' }).compareDocumentPosition(check) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+
+    // The card waits for the household: nothing is sent unasked.
+    await act(() => new Promise((resolve) => setTimeout(resolve, 50)))
+    expect(posts(fetchMock)).toHaveLength(0)
+    expect(await card()).toBeInTheDocument()
+  })
+
+  it.each([
+    ['Keep it', 'keep', 'regular', 'Added to your Regulars'],
+    ['Not for us', 'drop', 'archived', "Got it — we won't suggest it again"],
+    ["We didn't make it", 'not_made', 'quest_log', 'Back in your Quest log'],
+  ])('"%s" sends %s at once and confirms "%s"', async (label, decision, status, confirmation) => {
+    const { fetchMock, decisions } = stubApi([SHAKSHUKA])
+    await renderHome()
+
+    fireEvent.click(within(await card()).getByRole('button', { name: label }))
+
+    // Applied before the server answers.
+    expect(await screen.findByRole('status')).toHaveTextContent(confirmation)
+    expect(screen.queryByRole('region', { name: 'Keep it in rotation?' })).not.toBeInTheDocument()
+    await waitFor(() => expect(decisions).toHaveLength(1))
+    expect(decisions[0]).toMatchObject({ path: '/api/v1/dinners/d7/rotation-review', body: { decision } })
+    expect(posts(fetchMock)).toHaveLength(1)
+
+    act(() => decisions[0]!.resolve(decided(SHAKSHUKA, decision, status)))
+    // Rotation checks are read again once saved; none is left.
+    await waitFor(() =>
+      expect(fetchMock.mock.calls.filter(([path]) => path === ROTATION_REVIEWS_PATH).length).toBeGreaterThanOrEqual(2),
+    )
+    expect(screen.getByRole('status')).toHaveTextContent(confirmation)
+    expect(screen.queryByRole('region', { name: 'Keep it in rotation?' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
+  it('reveals the next pending check at once, its answers locked until the first is saved', async () => {
+    const { decisions } = stubApi([SHAKSHUKA, RAMEN])
+    await renderHome()
+
+    fireEvent.click(within(await card()).getByRole('button', { name: 'Keep it' }))
+
+    expect(await screen.findByText('Last night: Miso ramen')).toBeInTheDocument()
+    const next = await card()
+    expect(within(next).getByRole('img', { name: 'Miso ramen' })).toHaveTextContent('dish photo')
+    expect(screen.getByRole('status')).toHaveTextContent('Added to your Regulars')
+    for (const button of within(next).getAllByRole('button')) expect(button).toBeDisabled()
+
+    await waitFor(() => expect(decisions).toHaveLength(1))
+    act(() => decisions[0]!.resolve(decided(SHAKSHUKA, 'keep', 'regular')))
+    await waitFor(() => expect(within(next).getByRole('button', { name: 'Not for us' })).toBeEnabled())
+
+    fireEvent.click(within(next).getByRole('button', { name: 'Not for us' }))
+    expect(await screen.findByRole('status')).toHaveTextContent("Got it — we won't suggest it again")
+    await waitFor(() => expect(decisions).toHaveLength(2))
+    expect(decisions[1]).toMatchObject({ path: '/api/v1/dinners/d8/rotation-review', body: { decision: 'drop' } })
+    act(() => decisions[1]!.resolve(decided(RAMEN, 'drop', 'archived')))
+    await waitFor(() => expect(screen.queryByRole('region', { name: 'Keep it in rotation?' })).not.toBeInTheDocument())
+    expect(screen.queryByText(/Last night:/)).not.toBeInTheDocument()
+  })
+
+  it('puts the check back with an ErrorBanner when the answer fails', async () => {
+    const { decisions } = stubApi([SHAKSHUKA, RAMEN])
+    await renderHome()
+
+    fireEvent.click(within(await card()).getByRole('button', { name: 'Keep it' }))
+    expect(await screen.findByText('Last night: Miso ramen')).toBeInTheDocument()
+    await waitFor(() => expect(decisions).toHaveLength(1))
+
+    act(() => decisions[0]!.resolve(errorResponse(500, 'internal')))
+
+    expect(await screen.findByRole('alert')).toHaveTextContent("Couldn't save that answer. internal message")
+    const check = await card()
+    expect(within(check).getByText('Last night: Shakshuka')).toBeInTheDocument()
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+    expect(within(check).getByRole('button', { name: 'Keep it' })).toBeEnabled()
+  })
+
+  it('reports an answer that is not that check decided that way, and shows what the server has', async () => {
+    const { decisions } = stubApi([SHAKSHUKA])
+    await renderHome()
+
+    fireEvent.click(within(await card()).getByRole('button', { name: 'Keep it' }))
+    await waitFor(() => expect(decisions).toHaveLength(1))
+    act(() => decisions[0]!.resolve(decided(SHAKSHUKA, 'drop', 'archived')))
+
+    expect(await screen.findByRole('alert')).toHaveTextContent('response is not the Rotation check decided keep')
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+    // The server closed the check, so the list read again has none.
+    await waitFor(() => expect(screen.queryByRole('region', { name: 'Keep it in rotation?' })).not.toBeInTheDocument())
+  })
+
+  it('reports Rotation checks it cannot load, with Retry', async () => {
+    const answers = [errorResponse(500, 'internal'), jsonResponse(200, { reviews: [SHAKSHUKA] })]
+    vi.stubGlobal(
+      'fetch',
+      vi.fn<typeof fetch>((input) =>
+        Promise.resolve(
+          String(input) === ME_PATH
+            ? jsonResponse(200, ME)
+            : String(input) === HOME_PATH
+              ? jsonResponse(200, HOME)
+              : answers.shift()!,
+        ),
+      ),
+    )
+    await renderHome()
+
+    expect(await screen.findByRole('alert')).toHaveTextContent("Couldn't load the Rotation check. internal message")
+    fireEvent.click(screen.getByRole('button', { name: 'Retry' }))
+    expect(within(await card()).getByText('Last night: Shakshuka')).toBeInTheDocument()
+  })
+
+  it('opens Home with the card from a rotation_review push notification', async () => {
+    stubApi([SHAKSHUKA])
+    const origin = 'https://mealquest.test'
+    const { notice } = parsePushPayload(
+      JSON.stringify({ event: 'rotation_review', title: 'Keep it in rotation?', body: 'How was Shakshuka?', url: '/' }),
+      origin,
+    )
+    const path = clickPath({ url: notice.url }, origin)
+    expect(path).toBe('/')
+
+    await renderHome(path)
+    expect(within(await card()).getByText('Last night: Shakshuka')).toBeInTheDocument()
+  })
+
+  it('shows the card when a rotation_review notification focuses Home already open, without a remount', async () => {
+    // navigator.serviceWorker is where the worker's postMessage to this
+    // window arrives.
+    const container = new EventTarget()
+    Object.defineProperty(navigator, 'serviceWorker', { configurable: true, value: container })
+    const { fetchMock, server } = stubApi([])
+    const reads = () => fetchMock.mock.calls.filter(([path]) => path === ROTATION_REVIEWS_PATH).length
+    await renderHome('/')
+    const home = await screen.findByRole('heading', { name: 'Pizza night' })
+    await waitFor(() => expect(reads()).toBe(1))
+    expect(screen.queryByRole('region', { name: 'Keep it in rotation?' })).not.toBeInTheDocument()
+
+    // Within the cached list's staleTime the Rotation check comes due and
+    // its notification is tapped while Home is open at /.
+    server.push(SHAKSHUKA)
+    const origin = 'https://mealquest.test'
+    const win = {
+      url: `${origin}/`,
+      focused: true,
+      focus: vi.fn(async () => {}),
+      navigate: vi.fn(async () => {}),
+      postMessage: (message) => container.dispatchEvent(new MessageEvent('message', { data: message })),
+    } satisfies ClickWindow
+    await act(() =>
+      openNotification({ url: '/' }, { matchAll: async () => [win], openWindow: vi.fn(async () => null) }, origin),
+    )
+
+    expect(win.navigate).not.toHaveBeenCalled()
+    expect(within(await card()).getByText('Last night: Shakshuka')).toBeInTheDocument()
+    expect(reads()).toBe(2)
+    expect(screen.getByRole('heading', { name: 'Pizza night' })).toBe(home)
+  })
+})

web/src/home/RotationCheck.tsx

@@ -0,0 +1,79 @@
+import { Button } from '../ui/Button.tsx'
+import { ErrorBanner } from '../ui/ErrorBanner.tsx'
+import { Photo } from '../ui/Photo.tsx'
+import { useDecideRotationReview, useRotationReviews, type Decision, type RotationReview } from './rotation.ts'
+import styles from './RotationCheck.module.css'
+
+// CONFIRMATION is what Home says once the household has answered.
+const CONFIRMATION: Record<Decision, string> = {
+  keep: 'Added to your Regulars',
+  drop: "Got it — we won't suggest it again",
+  not_made: 'Back in your Quest log',
+}
+
+type RotationCardProps = { review: RotationReview; disabled: boolean; onDecide: (decision: Decision) => void }
+
+// RotationCard asks "Keep it in rotation?" about a tried dinner: its washed
+// photo, "Last night: {dinner}", and the three answers.
+function RotationCard({ review, disabled, onDecide }: RotationCardProps) {
+  const { dinner } = review
+  return (
+    <section aria-label="Keep it in rotation?" className={styles.card}>
+      <Photo id={dinner.photo_id} name={dinner.name} inset="10px" sizes="400px" className={styles.photo} />
+      <div className={styles.body}>
+        <p className={styles.kicker}>Last night: {dinner.name}</p>
+        <h2 className={styles.question}>Keep it in rotation?</h2>
+        <div className={styles.actions}>
+          <Button disabled={disabled} onClick={() => onDecide('keep')}>
+            Keep it
+          </Button>
+          <Button variant="outline" disabled={disabled} onClick={() => onDecide('drop')}>
+            Not for us
+          </Button>
+        </div>
+        <button type="button" className={styles.notMade} disabled={disabled} onClick={() => onDecide('not_made')}>
+          We didn't make it
+        </button>
+      </div>
+    </section>
+  )
+}
+
+// RotationCheck is the Rotation check on Home: the card for the oldest
+// pending check (GET /api/v1/rotation-reviews), which stays until the
+// household answers it — nothing is decided for them. An answer is applied
+// at once: Home confirms it and shows the next pending check, if any, while
+// the answer is saved; the answers are locked until it settles. A failed
+// answer puts its check back with an ErrorBanner.
+export function RotationCheck() {
+  const reviews = useRotationReviews()
+  const decide = useDecideRotationReview()
+  if (reviews.isError) {
+    return (
+      <ErrorBanner onRetry={() => void reviews.refetch()}>
+        Couldn't load the Rotation check. {reviews.error.message}
+      </ErrorBanner>
+    )
+  }
+  const deciding = decide.isPending ? decide.variables.review.dinner.id : null
+  const next = reviews.data?.find((review) => review.dinner.id !== deciding)
+  const answered = decide.isPending || decide.isSuccess ? decide.variables : undefined
+  return (
+    <>
+      {answered !== undefined && (
+        <p role="status" className={styles.confirmation}>
+          {CONFIRMATION[answered.decision]}
+        </p>
+      )}
+      {decide.isError && <ErrorBanner>Couldn't save that answer. {decide.error.message}</ErrorBanner>}
+      {next !== undefined && (
+        <RotationCard
+          key={next.dinner.id}
+          review={next}
+          disabled={decide.isPending}
+          onDecide={(decision) => decide.mutate({ review: next, decision })}
+        />
+      )}
+    </>
+  )
+}

web/src/home/UpdatesSheet.test.tsx

@@ -7,6 +7,7 @@ import { createNetworkStatus } from '../pwa/networkStatus.ts'
 import { HOME } from '../test/ApiProviders.tsx'
 import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
 import { HOME_KEY, HOME_PATH, UPDATES_PATH, UPDATES_SEEN_PATH } from './api.ts'
+import { ROTATION_REVIEWS_PATH } from './rotation.ts'
 import { HomePage } from './HomePage.tsx'
 
 afterEach(() => {
@@ -52,6 +53,7 @@ function stubServer(responders: Record<string, Responder> = {}) {
     'GET /api/v1/me': () => jsonResponse(200, ME),
     [`GET ${HOME_PATH}`]: () => jsonResponse(200, { ...HOME, recentUpdates: { unread: !seen } }),
     [`GET ${UPDATES_PATH}`]: () => jsonResponse(200, UPDATES),
+    [`GET ${ROTATION_REVIEWS_PATH}`]: () => jsonResponse(200, { reviews: [] }),
     [`POST ${UPDATES_SEEN_PATH}`]: () => {
       seen = true
       return new Response(null, { status: 204 })

web/src/home/rotation.ts

@@ -0,0 +1,107 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { useApi } from '../api/index.ts'
+import { isRecord } from '../api/errors.ts'
+import { photoId } from '../dinners/api.ts'
+import { isNotificationOpened } from '../push/notification.ts'
+
+export const ROTATION_REVIEWS_PATH = '/api/v1/rotation-reviews'
+export const ROTATION_REVIEWS_KEY = ['rotation-reviews'] as const
+const DINNERS_KEY = ['dinners'] as const
+
+// rotationReviewPath is where the household answers "Keep it in rotation?"
+// for a tried dinner.
+export function rotationReviewPath(dinnerId: string): string {
+  return `/api/v1/dinners/${encodeURIComponent(dinnerId)}/rotation-review`
+}
+
+// Rotation check answers: keep makes the tried dinner a Regular, drop ("Not
+// for us") archives it so it is never suggested again, and not_made ("We
+// didn't make it") returns it to the Quest log. Keep is the only way a tried
+// dinner becomes a Regular; nothing decides one automatically.
+export const DECISIONS = ['keep', 'drop', 'not_made'] as const
+export type Decision = (typeof DECISIONS)[number]
+
+// RotationReview is a pending Rotation check: the dinner tried, photo_id its
+// stored photo's id, and the household-local plan date, YYYY-MM-DD, it was
+// planned on.
+export type RotationReview = { dinner: { id: string; name: string; photo_id: string | undefined }; plan_date: string }
+
+function parseReview(where: string, body: unknown): RotationReview {
+  if (!isRecord(body) || typeof body.plan_date !== 'string') throw new Error(`${where}: a review is not a Rotation check`)
+  const dinner = body.dinner
+  if (!isRecord(dinner) || typeof dinner.id !== 'string' || typeof dinner.name !== 'string') {
+    throw new Error(`${where}: a Rotation check has no dinner`)
+  }
+  return { dinner: { id: dinner.id, name: dinner.name, photo_id: photoId(where, dinner.photo) }, plan_date: body.plan_date }
+}
+
+// parseRotationReviews checks a GET /api/v1/rotation-reviews body: the
+// pending Rotation checks, oldest plan date first.
+export function parseRotationReviews(where: string, body: unknown): RotationReview[] {
+  if (!isRecord(body) || !Array.isArray(body.reviews)) throw new Error(`${where}: response is not the Rotation checks`)
+  return body.reviews.map((review) => parseReview(where, review))
+}
+
+// useRotationReviews is the pending Rotation checks (GET
+// /api/v1/rotation-reviews), oldest plan date first. Each mount of Home
+// reads them afresh, and so does a notification tap that focuses Home
+// already open (the service worker's NotificationOpened), so Home opened
+// from a rotation_review notification shows the check it is about.
+export function useRotationReviews() {
+  const { apiFetch } = useApi()
+  const query = useQuery({
+    queryKey: ROTATION_REVIEWS_KEY,
+    queryFn: async () =>
+      parseRotationReviews(`GET ${ROTATION_REVIEWS_PATH}`, await apiFetch<unknown>(ROTATION_REVIEWS_PATH)),
+    refetchOnMount: 'always',
+  })
+  const { refetch } = query
+  useEffect(() => {
+    // Without a service worker there are no notifications to tap.
+    if (!('serviceWorker' in navigator)) return
+    const container = navigator.serviceWorker
+    const onMessage = (event: MessageEvent<unknown>) => {
+      if (isNotificationOpened(event.data)) void refetch()
+    }
+    container.addEventListener('message', onMessage)
+    return () => container.removeEventListener('message', onMessage)
+  }, [refetch])
+  return query
+}
+
+// useDecideRotationReview answers "Keep it in rotation?" for a pending
+// Rotation check (POST /api/v1/dinners/{id}/rotation-review). The answer
+// must be that dinner, decided that way.
+//
+// Home leaves the check out while its answer is pending (the mutation's
+// variables say which), so the next one shows at once; a read in flight is
+// stopped so it cannot bring the check back meanwhile. Once saved, the check
+// leaves the cached list; once failed, it is shown again as the list has it.
+// Either way the Rotation checks and the dinners lists (the Regulars and the
+// Quest log the answer moved it to) are read again.
+export function useDecideRotationReview() {
+  const { apiFetch } = useApi()
+  const queryClient = useQueryClient()
+  return useMutation<void, Error, { review: RotationReview; decision: Decision }>({
+    mutationFn: async ({ review, decision }) => {
+      const path = rotationReviewPath(review.dinner.id)
+      const body = await apiFetch<unknown>(path, { method: 'POST', body: { decision } })
+      if (!isRecord(body) || !isRecord(body.dinner) || body.dinner.id !== review.dinner.id || body.decision !== decision) {
+        throw new Error(`POST ${path}: response is not the Rotation check decided ${decision}`)
+      }
+    },
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: ROTATION_REVIEWS_KEY })
+    },
+    onSuccess: (_data, { review }) => {
+      queryClient.setQueryData<RotationReview[]>(ROTATION_REVIEWS_KEY, (reviews) =>
+        reviews?.filter((r) => r.dinner.id !== review.dinner.id),
+      )
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: ROTATION_REVIEWS_KEY })
+      void queryClient.invalidateQueries({ queryKey: DINNERS_KEY })
+    },
+  })
+}

web/src/push/notification.test.ts

@@ -5,6 +5,7 @@ import {
   GENERIC_NOTICE,
   appPath,
   clickPath,
+  isNotificationOpened,
   openNotification,
   parsePushPayload,
   planClick,
@@ -178,6 +179,7 @@ describe('openNotification', () => {
       focused,
       focus: vi.fn(async () => {}),
       navigate: vi.fn(async () => {}),
+      postMessage: vi.fn(),
     } satisfies ClickWindow
   }
 
@@ -193,6 +195,18 @@ describe('openNotification', () => {
     expect(win.focus).toHaveBeenCalled()
     expect(win.navigate).toHaveBeenCalledWith(`${origin}/plan/shopping`)
     expect(win.focus.mock.invocationCallOrder[0]).toBeLessThan(win.navigate.mock.invocationCallOrder[0]!)
+    expect(win.postMessage).not.toHaveBeenCalled()
+    expect(all.openWindow).not.toHaveBeenCalled()
+  })
+
+  it('focuses a window already at the url and tells it NotificationOpened instead of navigating', async () => {
+    const win = window('/', true)
+    const all = clients([win])
+    await openNotification({ url: '/' }, all, origin)
+    expect(win.focus).toHaveBeenCalled()
+    expect(win.navigate).not.toHaveBeenCalled()
+    expect(win.postMessage).toHaveBeenCalledWith({ type: 'NOTIFICATION_OPENED', url: `${origin}/` })
+    expect(isNotificationOpened(win.postMessage.mock.calls[0]![0])).toBe(true)
     expect(all.openWindow).not.toHaveBeenCalled()
   })
 

web/src/push/notification.ts

@@ -150,6 +150,18 @@ export function planClick<W extends AppWindow>(windows: readonly W[], path: stri
 export type ClickWindow = AppWindow & {
   focus(): Promise<unknown>
   navigate(url: string): Promise<unknown>
+  postMessage(message: NotificationOpened): void
+}
+
+// NotificationOpened is the message a tap posts to an open window it focuses
+// without navigating, because the window is already at url: nothing remounts
+// there, so the screen reads afresh what the notification is about.
+export type NotificationOpened = { type: 'NOTIFICATION_OPENED'; url: string }
+
+// isNotificationOpened reports whether a message from the service worker is
+// NotificationOpened.
+export function isNotificationOpened(message: unknown): message is NotificationOpened {
+  return isRecord(message) && message.type === 'NOTIFICATION_OPENED' && typeof message.url === 'string'
 }
 
 export type ClickClients<W extends ClickWindow> = {
@@ -158,7 +170,8 @@ export type ClickClients<W extends ClickWindow> = {
 }
 
 // openNotification carries out a tap on a notification with data: focus
-// first, while the tap still allows it, then navigate.
+// first, while the tap still allows it, then navigate; a window already at
+// the url is told NotificationOpened instead.
 export async function openNotification<W extends ClickWindow>(
   data: unknown,
   clients: ClickClients<W>,
@@ -171,4 +184,5 @@ export async function openNotification<W extends ClickWindow>(
   }
   await plan.window.focus()
   if (plan.navigate) await plan.window.navigate(plan.url)
+  else plan.window.postMessage({ type: 'NOTIFICATION_OPENED', url: plan.url })
 }