Integration fix 3: keep recipe_url out of dinner responses (Feature 12 review F1) (#97)

Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>

web/src/dinners/api.ts

@@ -33,8 +33,10 @@ export type Regular = {
   pending?: true
 }
 
-// NewRegular is a POST /api/v1/dinners body: a name or a recipe link.
-export type NewRegular = { name: string } | { recipe_url: string }
+// NewRegular is a POST /api/v1/dinners body: the household's name for the
+// dinner, with the recipe link to ground it in when one was pasted. A
+// dinner is never named from its link, which may carry private details.
+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 }>
@@ -195,10 +197,9 @@ function settle(queryClient: QueryClient) {
 
 let pendingIds = 0
 
-// 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.
+// useAddRegular adds a Regular by name, with or without a recipe link (POST
+// /api/v1/dinners). It shows in the list at once under its name and is
+// taken out again if the server refuses it.
 export function useAddRegular() {
   const { apiFetch } = useApi()
   const queryClient = useQueryClient()
@@ -210,7 +211,7 @@ export function useAddRegular() {
       const id = `pending-${++pendingIds}`
       const optimistic: CachedRegular = {
         id,
-        name: 'name' in add ? add.name : add.recipe_url,
+        name: add.name,
         method: null,
         minutes_total: null,
         difficulty: null,

web/src/settings/RegularsSettingsPage.module.css

@@ -43,6 +43,13 @@
   font-weight: 700;
 }
 
+/* The add form: the add row, then the name field a pasted link needs. */
+.addForm {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 /* The add field: the input fills the row beside the grape + button. */
 .add {
   display: flex;

web/src/settings/RegularsSettingsPage.test.tsx

@@ -192,21 +192,33 @@ describe('RegularsSettingsPage', () => {
     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/'
+  it('adds a Regular from a pasted recipe link under the name the household gives it', async () => {
+    const link = 'https://example.com/recipes/stew-key-abcdefghijklmno'
     const server = stubServer([], {
-      'POST /api/v1/dinners': () => {
-        const created = dinnerBody('d9', 'Beef stew', { grounding_status: 'pending', recipe_url: link })
+      'POST /api/v1/dinners': (body) => {
+        const created = dinnerBody('d9', (body as { name: string }).name, { grounding_status: 'pending' })
         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()
+    fireEvent.change(addField(), { target: { value: ` ${link} ` } })
+    // A link alone cannot be added: it never names a dinner.
+    expect(screen.getByRole('button', { name: 'Add Regular' })).toBeDisabled()
+    const name = screen.getByRole('textbox', { name: 'Dinner name' })
+    expect(name).toHaveAccessibleDescription(/never names a dinner/)
+    fireEvent.change(name, { target: { value: ' Sunday stew ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add Regular' }))
+
+    expect(addField()).toHaveValue('')
+    expect(screen.queryByRole('textbox', { name: 'Dinner name' })).not.toBeInTheDocument()
+    expect(await screen.findByText('Sunday stew')).toBeInTheDocument()
+    expect(sent(server.fetchMock)).toEqual([
+      { request: 'POST /api/v1/dinners', body: { name: 'Sunday stew', recipe_url: link } },
+    ])
+    expect(within(row('Sunday stew')).getByText('Finding recipe…')).toBeInTheDocument()
+    expect(document.body).not.toHaveTextContent(/example\.com|abcdefghijklmno|key/i)
   })
 
   it('takes back an add the server refuses and says why', async () => {

web/src/settings/RegularsSettingsPage.tsx

@@ -49,12 +49,14 @@ export const methodLabels: Record<Method, string> = {
 
 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.
+// A pasted link is added as a recipe link under a name the household gives;
+// 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
+// field at the top adds one by name, or by pasted recipe link with a name
+// the household gives it; tapping one
 // edits or removes it, or fixes its recipe when none was found.
 export function RegularsSettingsPage() {
   const navigate = useNavigate()
@@ -85,19 +87,24 @@ function RegularsManager() {
   const favorite = useToggleFavorite()
   const { refusals, track } = useRefusals()
   const [draft, setDraft] = useState('')
+  const [linkName, setLinkName] = useState('')
   const [open, setOpen] = useState<Open>(null)
   const headingId = useId()
+  const linkHintId = useId()
+  const isLink = LINK.test(draft.trim())
+  const ready = draft.trim() !== '' && (!isLink || linkName.trim() !== '')
   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()
+    if (!ready) return
     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))
+    const body: NewRegular = isLink ? { name: linkName.trim(), recipe_url: text } : { name: text }
+    track(`add:${body.name.toLowerCase()}`, `add ${body.name}`, add.mutateAsync(body))
     setDraft('')
+    setLinkName('')
   }
 
   function onRemove(regular: Regular) {
@@ -111,20 +118,38 @@ function RegularsManager() {
 
   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 className={styles.addForm} onSubmit={onSubmit}>
+        <div className={styles.add}>
+          <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={!ready}>
+            <Icon icon={Plus} size="nav" />
+          </IconButton>
+        </div>
+        {isLink && (
+          <>
+            <TextInput
+              label="Dinner name"
+              placeholder="What do you call this dinner?"
+              autoComplete="off"
+              enterKeyHint="done"
+              aria-describedby={linkHintId}
+              value={linkName}
+              onChange={(event) => setLinkName(event.target.value)}
+            />
+            <p id={linkHintId} className={styles.hint}>
+              Name it yourself: a link can carry private details, so it never names a dinner.
+            </p>
+          </>
+        )}
       </form>
       {refusals.map((refusal) => (
         <p key={refusal.key} role="alert" className={styles.problem}>

web/src/sw.test.ts

@@ -0,0 +1,47 @@
+// Runs the service worker's activate handler against mocked Cache Storage,
+// with the Workbox precache and router stubbed out. tsconfig.sw.json checks
+// this file with the worker's types, like src/sw.ts itself.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('workbox-precaching', () => ({
+  PrecacheFallbackPlugin: class {},
+  matchPrecache: vi.fn(),
+  precacheAndRoute: vi.fn(),
+}))
+vi.mock('workbox-routing', () => ({ registerRoute: vi.fn() }))
+
+describe('service worker activation', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('deletes the v1 API cache and keeps the precache, photo and font caches', async () => {
+    // A household on the v1 worker: its API cache held dinners with the
+    // pasted recipe_url; its photos and fonts are not in the precache.
+    const names = [
+      'mealquest-precache-v1',
+      'mealquest-api-v1',
+      'mealquest-media-v1',
+      'mealquest-fonts-v1',
+      'other-app-cache',
+    ]
+    const cacheStorage = {
+      keys: vi.fn(async () => names),
+      delete: vi.fn(async () => true),
+    }
+    vi.stubGlobal('caches', cacheStorage)
+    vi.stubGlobal('__WB_MANIFEST', [])
+    await import('./sw')
+
+    const pending: Promise<unknown>[] = []
+    const activate = Object.assign(new Event('activate'), {
+      waitUntil: (promise: Promise<unknown>) => pending.push(promise),
+    })
+    self.dispatchEvent(activate)
+    await Promise.all(pending)
+
+    expect(pending).toHaveLength(1)
+    expect(cacheStorage.delete).toHaveBeenCalledWith('mealquest-api-v1')
+    expect(cacheStorage.delete).toHaveBeenCalledTimes(1)
+  })
+})

web/src/sw.ts

@@ -18,7 +18,7 @@ import { CacheFirst, NetworkOnly, type Strategy } from 'workbox-strategies'
 import { createApiStrategy } from './sw/apiStrategy'
 import {
   cacheNames,
-  cacheVersion,
+  cacheVersions,
   routeFor,
   staleCaches,
   type Route,
@@ -29,7 +29,7 @@ declare const self: ServiceWorkerGlobalScope & {
 }
 
 // The precache becomes mealquest-precache-v1.
-setCacheNameDetails({ prefix: 'mealquest', precache: 'precache', suffix: cacheVersion })
+setCacheNameDetails({ prefix: 'mealquest', precache: 'precache', suffix: cacheVersions.precache })
 
 const day = 24 * 60 * 60
 

web/src/sw/routes.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { cacheFallbackHeader, cacheNames, markCacheFallback, routeFor, staleCaches, type Route } from './routes'
+import { cacheFallbackHeader, cacheNames, cacheVersions, markCacheFallback, routeFor, staleCaches, type Route } from './routes'
 
 const origin = 'https://mealquest.test'
 
@@ -146,6 +146,18 @@ describe('cache names', () => {
   it('all start with mealquest-', () => {
     for (const name of Object.values(cacheNames)) expect(name).toMatch(/^mealquest-/)
   })
+
+  it('retire only the v1 API cache', () => {
+    // v1 API responses held dinners with the pasted recipe_url, which can
+    // carry a personal token; offline, the worker would still serve them.
+    // The precache, photos and fonts keep their v1 caches.
+    expect(cacheNames).toEqual({
+      api: 'mealquest-api-v2',
+      media: 'mealquest-media-v1',
+      fonts: 'mealquest-fonts-v1',
+    })
+    expect(cacheVersions.precache).toBe('v1')
+  })
 })
 
 describe('staleCaches', () => {

web/src/sw/routes.ts

@@ -24,14 +24,23 @@ export interface RouteRequest {
   mode: RequestMode
 }
 
-// Bumping the version renames every cache; activate then deletes the old ones.
-export const cacheVersion = 'v1'
+// Each cache carries its own version. Bumping one renames only that cache;
+// activate then deletes its old name and keeps every other cache, so saved
+// photos and fonts stay available offline.
+export const cacheVersions = {
+  precache: 'v1',
+  // v2 retires the v1 API cache, whose dinner responses still carried the
+  // pasted recipe_url.
+  api: 'v2',
+  media: 'v1',
+  fonts: 'v1',
+} as const
 export const cachePrefix = 'mealquest-'
 
 export const cacheNames = {
-  api: `${cachePrefix}api-${cacheVersion}`,
-  media: `${cachePrefix}media-${cacheVersion}`,
-  fonts: `${cachePrefix}fonts-${cacheVersion}`,
+  api: `${cachePrefix}api-${cacheVersions.api}`,
+  media: `${cachePrefix}media-${cacheVersions.media}`,
+  fonts: `${cachePrefix}fonts-${cacheVersions.fonts}`,
 } as const
 
 export const networkTimeoutSeconds = 3

web/src/sw/worker.test.ts

@@ -2,6 +2,7 @@
 // source: they pin the parts routes.ts cannot express — the API cache's
 // strategy, the font strategy's expiration, the font route's place ahead of
 // the precache route and network-only requests left to the browser.
+// src/sw.test.ts runs the worker's activation against mocked Cache Storage.
 import { describe, expect, it } from 'vitest'
 import source from '../sw.ts?raw'
 

web/src/test/dinners.ts

@@ -10,7 +10,6 @@ export type DinnerBody = {
   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
@@ -33,7 +32,6 @@ export function dinnerBody(id: string, name: string, overrides: Partial<DinnerBo
     cuisine: null,
     is_favorite: false,
     recipe_id: null,
-    recipe_url: null,
     photo_url: null,
     grounding_status: 'grounded',
     grounding_error: null,

web/tsconfig.json

@@ -19,5 +19,5 @@
     "noEmit": true
   },
   "include": ["src", "vite.config.ts", "manifest.json"],
-  "exclude": ["src/sw.ts"]
+  "exclude": ["src/sw.ts", "src/sw.test.ts"]
 }

web/tsconfig.sw.json

@@ -4,6 +4,6 @@
     "lib": ["ES2022", "WebWorker"],
     "types": []
   },
-  "include": ["src/sw.ts"],
+  "include": ["src/sw.ts", "src/sw.test.ts"],
   "exclude": []
 }