Share the Draft board's swap step with Add to this week

useWeekSwap is now the one way a day is swapped: it refuses while a swap
or push of the week is pending, and leaves the week's settled swaps and
pushes behind before sending the swap. The Draft board (sheet, drop and
retry) and the dinner's Add to this week sheet and its Retry all use it,
so a swap from the dinner no longer leaves the Plan saying the earlier
plan's Supply run was made.

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

web/src/dinners/AddToWeekSheet.tsx

@@ -1,6 +1,6 @@
 import { useId, useState } from 'react'
 import { Link } from 'react-router'
-import { usePlan, useSwapDay, type PlanDinner, type Swap } from '../plan/api.ts'
+import { usePlan, useWeekSwap, type PlanDinner, type Swap } from '../plan/api.ts'
 import { cooking } from '../plan/PlanPage.tsx'
 import swapStyles from '../plan/SwapSheet.module.css'
 import { addDays, dayOfMonth, localNow, weekdayName, weekLabel, weekStart as weekOf } from '../plan/week.ts'
@@ -41,13 +41,14 @@ type WeekDaysProps = {
 }
 
 // WeekDays is the seven days of the week starting on week, each with its
-// dinner; choosing one swaps the dinner in through the Plan's own swap
-// (useSwapDay). A week with no plan offers to draft it on the Draft board:
+// dinner; choosing one swaps the dinner in as the Draft board swaps a day
+// (useWeekSwap). A week with no plan offers to draft it on the Draft board:
 // nothing here makes a plan up. A dinner already on the week can't be added
-// again, nor can one while a change to the week is still being saved.
+// again, nor can one while a swap of the week is still being saved or the
+// week is being pushed to Calendar.
 function WeekDays({ dinner, week, which, onAdd }: WeekDaysProps) {
   const plan = usePlan(week)
-  const swap = useSwapDay(week)
+  const { swap, push, refused, swapIn } = useWeekSwap(week)
 
   if (plan.isError) {
     return <ErrorBanner onRetry={() => void plan.refetch()}>Couldn't load {weekNames[which]}'s plan. {plan.error.message}</ErrorBanner>
@@ -74,10 +75,10 @@ function WeekDays({ dinner, week, which, onAdd }: WeekDaysProps) {
 
   const days = plan.data.days
   const planned = days.find((day) => day.dinner.id === dinner.id)
-  const choosable = planned === undefined && !swap.pending
+  const choosable = planned === undefined && !refused
   function add(date: string) {
     const chosen: Swap = { date, dinner: planDinner(dinner), fromQuestLog: dinner.status === 'quest_log' }
-    swap.mutate(chosen)
+    swapIn(chosen)
     onAdd({ week, which, swap: chosen })
   }
   return (
@@ -86,8 +87,10 @@ function WeekDays({ dinner, week, which, onAdd }: WeekDaysProps) {
         <p className={swapStyles.empty}>
           {dinner.name} is already on {weekdayName(planned.date)} {weekNames[which]}.
         </p>
+      ) : swap.pending ? (
+        <p className={swapStyles.empty}>A change to {weekNames[which]} is still being saved.</p>
       ) : (
-        swap.pending && <p className={swapStyles.empty}>A change to {weekNames[which]} is still being saved.</p>
+        push.pending && <p className={swapStyles.empty}>The plan for {weekNames[which]} is being pushed to Calendar.</p>
       )}
       <ul aria-label={`Days of ${weekNames[which]}`} className={swapStyles.rows}>
         {days.map((day) => (

web/src/dinners/DinnerDetailActions.test.tsx

@@ -7,6 +7,7 @@ import { createNetworkStatus } from '../pwa/networkStatus.ts'
 import { HOUSEHOLD_SETTINGS } from '../test/ApiProviders.tsx'
 import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
 import { mockViewport } from '../test/matchMedia.ts'
+import { PlanPage } from '../plan/PlanPage.tsx'
 import { DinnerDetailPage } from './DinnerDetailPage.tsx'
 
 const DINNER = '/api/v1/dinners/d1'
@@ -66,7 +67,7 @@ function planBody(weekStart: string, names: string[], ids = names.map((_, i) =>
     week_start: weekStart,
     status: 'draft',
     ai_note: null,
-    calendar_synced_at: null,
+    calendar_synced_at: null as string | null,
     days: names.map((name, i) => ({
       date: new Date(start + i * 86_400_000).toISOString().slice(0, 10),
       dinner: { id: ids[i], name, photo: null, minutes: 30, method: 'stovetop' },
@@ -127,14 +128,15 @@ function deferred() {
 }
 
 // renderPage loads /me (for the CSRF token every write needs) and renders
-// the bowls' detail screen, with a probe for the Plan.
-async function renderPage() {
+// the bowls' detail screen, with plan for the Plan: a probe unless told
+// otherwise. It answers with the router.
+async function renderPage(plan = <h1>Plan probe</h1>) {
   const api = createApiClient(fakeLocation('/dinner/d1'), createNetworkStatus(window), createVerifiedSession(localStorage))
   await api.loadMe()
   const router = createMemoryRouter(
     [
       { path: '/dinner/:id', element: <DinnerDetailPage /> },
-      { path: '/plan', element: <h1>Plan probe</h1> },
+      { path: '/plan', element: plan },
     ],
     { initialEntries: ['/dinner/d1'] },
   )
@@ -146,6 +148,7 @@ async function renderPage() {
     </ApiProvider>,
   )
   await screen.findByRole('heading', { level: 1, name: 'Korean beef bowls' })
+  return router
 }
 
 // openSheet opens Add to this week and waits for the week's days.
@@ -289,6 +292,70 @@ describe('Add to this week', () => {
     expect(screen.queryByRole('alert')).not.toBeInTheDocument()
     expect(sent(fetchMock, 'PUT')).toEqual([`${THURSDAY} {"dinner_id":"d1"}`, `${THURSDAY} {"dinner_id":"d1"}`])
   })
+
+  it("leaves a push's Supply run outcome behind on the Plan, as a swap on the Draft board does", async () => {
+    let plan = planBody('2026-10-05', THIS_NAMES)
+    const fetchMock = stubServer({
+      [`GET ${THIS_WEEK}`]: () => jsonResponse(200, plan),
+      [`POST ${THIS_WEEK}/push-calendar`]: () => {
+        plan = { ...plan, status: 'synced', calendar_synced_at: '2026-10-07T16:00:00Z' }
+        return jsonResponse(200, { ...plan, supply_run: { status: 'generated', error: null } })
+      },
+      [`PUT ${THURSDAY}`]: () => {
+        plan = { ...thursdaySwapped(), status: 'changed', calendar_synced_at: '2026-10-07T16:00:00Z' }
+        return jsonResponse(200, plan)
+      },
+      'GET /api/v1/shopping/2026-10-05': () => errorResponse(404, 'not_found'),
+    })
+    const router = await renderPage(<PlanPage />)
+
+    // The week is pushed on the Plan, which says its Supply run was made.
+    await act(() => router.navigate('/plan'))
+    fireEvent.click(await screen.findByRole('button', { name: 'Looks good — push to Calendar' }))
+    expect(await screen.findByRole('status')).toHaveTextContent("Made this week's Supply run from the plan.")
+    // Coming back from the dinner with nothing swapped, it still says so.
+    await act(() => router.navigate('/dinner/d1'))
+    await screen.findByRole('heading', { level: 1, name: 'Korean beef bowls' })
+    await act(() => router.navigate('/plan'))
+    expect(await screen.findByRole('status')).toHaveTextContent("Made this week's Supply run from the plan.")
+
+    // Thursday is swapped from the dinner's Add to this week.
+    await act(() => router.navigate('/dinner/d1'))
+    await screen.findByRole('heading', { level: 1, name: 'Korean beef bowls' })
+    const { days } = await openSheet()
+    fireEvent.click(within(days).getByRole('button', { name: /Thursday 8/ }))
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Added to Thursday this week.'))
+
+    // The Plan shows the swapped plan, not changed since its push, and no
+    // longer says the earlier plan's Supply run was made.
+    await act(() => router.navigate('/plan'))
+    expect(await screen.findByText('Changes not pushed to Google Calendar')).toBeInTheDocument()
+    expect(screen.getByText('Korean beef bowls')).toBeInTheDocument()
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+    expect(screen.queryByText("Made this week's Supply run from the plan.")).not.toBeInTheDocument()
+    expect(sent(fetchMock, 'POST')).toEqual([`${THIS_WEEK}/push-calendar undefined`])
+    expect(sent(fetchMock, 'PUT')).toEqual([`${THURSDAY} {"dinner_id":"d1"}`])
+  })
+
+  it('refuses a swap while the week is being pushed to Calendar', async () => {
+    const push = deferred()
+    const fetchMock = stubServer({
+      [`GET ${THIS_WEEK}`]: () => jsonResponse(200, planBody('2026-10-05', THIS_NAMES)),
+      [`POST ${THIS_WEEK}/push-calendar`]: () => push.response,
+      'GET /api/v1/shopping/2026-10-05': () => errorResponse(404, 'not_found'),
+    })
+    const router = await renderPage(<PlanPage />)
+    await act(() => router.navigate('/plan'))
+    fireEvent.click(await screen.findByRole('button', { name: 'Looks good — push to Calendar' }))
+    await waitFor(() => expect(sent(fetchMock, 'POST')).toHaveLength(1))
+
+    await act(() => router.navigate('/dinner/d1'))
+    await screen.findByRole('heading', { level: 1, name: 'Korean beef bowls' })
+    const { sheet, days } = await openSheet()
+    expect(within(sheet).getByText('The plan for this week is being pushed to Calendar.')).toBeInTheDocument()
+    expect(within(days).queryAllByRole('button')).toHaveLength(0)
+    expect(sent(fetchMock, 'PUT')).toEqual([])
+  })
 })
 
 describe('the favorite heart', () => {

web/src/dinners/DinnerDetailPage.tsx

@@ -3,7 +3,7 @@ import { ChevronLeft, Heart } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router'
 import { ApiError } from '../api/errors.ts'
-import { planKey, usePlan, useSwapDay } from '../plan/api.ts'
+import { planKey, usePlan, useWeekSwap } from '../plan/api.ts'
 import { duration } from '../plan/PlanPage.tsx'
 import { weekdayName } from '../plan/week.ts'
 import { useBreakpoint } from '../shell/useBreakpoint.ts'
@@ -128,13 +128,14 @@ function Recipe({ dinner }: { dinner: DinnerDetail }) {
 }
 
 // AddedStatus says what became of a dinner added to a day: being saved,
-// added, or why it couldn't be, with Retry, which sends the same swap again.
-// The week's plan stays read while it shows, so a retry finds the day to
-// swap; once added, the plan is read again from the server.
+// added, or why it couldn't be, with Retry, which sends the same swap again
+// as the Draft board would (useWeekSwap), and is not offered while that is
+// refused. The week's plan stays read while it shows, so a retry finds the
+// day to swap; once added, the plan is read again from the server.
 function AddedStatus({ added }: { added: Added }) {
   const queryClient = useQueryClient()
   usePlan(added.week)
-  const swap = useSwapDay(added.week)
+  const { swap, refused, swapIn } = useWeekSwap(added.week)
   const { date } = added.swap
   const done = swap.succeeded === added.swap
   const failed = swap.failed?.swap === added.swap ? swap.failed.error : null
@@ -145,7 +146,7 @@ function AddedStatus({ added }: { added: Added }) {
   if (failed !== null) {
     return (
       <div className={styles.status}>
-        <ErrorBanner onRetry={() => swap.mutate(added.swap)}>
+        <ErrorBanner onRetry={refused ? undefined : () => swapIn(added.swap)}>
           Couldn't add it to {weekdayName(date)} {weekNames[added.which]}. {failed.message}
         </ErrorBanner>
       </div>

web/src/plan/PlanPage.tsx

@@ -23,9 +23,8 @@ import {
   parseDraftResult,
   planKey,
   usePlan,
-  usePushToCalendar,
   useStartDraft,
-  useSwapDay,
+  useWeekSwap,
   type DraftResult,
   type Plan,
   type PlanDay,
@@ -266,8 +265,7 @@ function WeekBoard({
   const [jobId, setJobId] = useState<string | null>(null)
   const job = useJob<unknown>(DRAFT_JOB_KIND, jobId)
   const [confirming, setConfirming] = useState(false)
-  const swap = useSwapDay(weekStart)
-  const push = usePushToCalendar(weekStart)
+  const { swap, push, refused, swapIn: sendSwap } = useWeekSwap(weekStart)
   const run = useSupplyRun(weekStart)
   // Makes the week's Supply run again after a push could not make it.
   const generate = useGenerateSupplyRun(weekStart)
@@ -431,25 +429,18 @@ function WeekBoard({
     <ErrorBanner onRetry={() => void run.refetch()}>Couldn't load this week's shopping list. {run.error.message}</ErrorBanner>
   )
 
-  // swapIn sends the swap chosen in the sheet and closes it.
+  // swapIn sends the swap chosen in the sheet, dropped on a day or retried
+  // (useWeekSwap) and closes the sheet. The Supply run made again on the
+  // Plan after a push is left behind with the push.
   function swapIn(chosen: Swap) {
     setSwappingDate(null)
-    push.reset()
     generate.reset()
-    swap.mutate(chosen)
+    sendSwap(chosen)
   }
-  // dropIn swaps in a dinner dragged onto a day. A drag is not picked up,
-  // nor dropped, while a swap of the week is pending.
-  function dropIn(chosen: Swap) {
-    swap.dismiss()
-    swapIn(chosen)
-  }
-  // openSwap opens the swap sheet on a day. One swap of the week is sent at
-  // a time, even across leaving the week and coming back: the plan the
-  // server answers it with must not overwrite another still pending. Nor is
-  // one sent while the week is being pushed to Calendar.
+  // openSwap opens the swap sheet on a day, unless a swap is refused now
+  // (useWeekSwap). A drag is not picked up, nor dropped, then either.
   function openSwap(date: string) {
-    if (swap.pending || pushing) return
+    if (refused) return
     swap.dismiss()
     setSwappingDate(date)
   }
@@ -488,7 +479,7 @@ function WeekBoard({
     body =
       layout !== 'mobile' ? (
         <>
-          <DropBoard days={days} pending={swap.pending || pushing} drop={dropIn} />
+          <DropBoard days={days} pending={refused} drop={swapIn} />
           <ul className={`${styles.week} ${styles[layout]}`} aria-label="Dinners this week">
             {days.map((day) => (
               <DayColumn

web/src/plan/api.ts

@@ -532,6 +532,37 @@ export function usePushToCalendar(weekStart: string): PushToCalendar {
   }
 }
 
+// WeekSwap is the one way a day of a week is swapped, wherever the swap is
+// chosen: the week's swaps and pushes, whether a swap is refused now, and
+// swapIn to send one.
+export type WeekSwap = {
+  swap: SwapDay
+  push: PushToCalendar
+  refused: boolean
+  swapIn: (chosen: Swap) => void
+}
+
+// useWeekSwap swaps a day of the week starting on weekStart, from the Draft
+// board or a dinner's Add to this week. One swap of the week is sent at a
+// time, even across leaving the week and coming back: the plan the server
+// answers it with must not overwrite another still pending. Nor is one sent
+// while the week is being pushed to Calendar: refused says so, and swapIn
+// then throws. A swap leaves the week's settled swaps behind, and its
+// pushes: what a push said of Calendar and the Supply run was said of the
+// plan before the swap, not the one swapped.
+export function useWeekSwap(weekStart: string): WeekSwap {
+  const swap = useSwapDay(weekStart)
+  const push = usePushToCalendar(weekStart)
+  const refused = swap.pending || push.pending
+  function swapIn(chosen: Swap) {
+    if (refused) throw new Error(`The week of ${weekStart} has a swap or push pending, so ${chosen.date} cannot be swapped.`)
+    swap.dismiss()
+    push.reset()
+    swap.mutate(chosen)
+  }
+  return { swap, push, refused, swapIn }
+}
+
 // settleUnmadePushes is called as the Supply run of the week starting on
 // weekStart starts being made, from the Plan or the Supply run screen
 // (useGenerateSupplyRun). The function it answers with is called once the