Integration fix: Feature 12 feature-review findings F1-F8 (#95)

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

web/src/dinners/names.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+import cases from '../../../internal/ai/harness/testdata/dedupe_cases.json'
+import { normalizeName, similarNames } from './names.ts'
+
+// The cases internal/ai/harness's tests run against Normalize and Similar.
+describe('dinner names, as the server compares them', () => {
+  it('has cases to run', () => {
+    expect(cases.normalize.length).toBeGreaterThan(0)
+    expect(cases.similar.length).toBeGreaterThan(0)
+  })
+
+  it.each(cases.normalize)('normalizes "$name" to "$want"', ({ name, want }) => {
+    expect(normalizeName(name)).toBe(want)
+  })
+
+  it.each(cases.similar)('"$a" and "$b" similar: $want', ({ a, b, want }) => {
+    expect(similarNames(a, b)).toBe(want)
+    expect(similarNames(b, a)).toBe(want)
+  })
+})

web/src/dinners/names.ts

@@ -0,0 +1,58 @@
+// The PWA's copy of the server's dinner-name rules (internal/ai/harness
+// Normalize and Similar), so a screen can tell beforehand that the dinners
+// API would refuse a name as a duplicate. The server still decides.
+// internal/ai/harness/testdata/dedupe_cases.json is run against both.
+
+import folds from './letterFolds.json'
+
+// SIMILAR_THRESHOLD is harness.SimilarThreshold.
+const SIMILAR_THRESHOLD = 0.85
+
+// fillerWords is harness's fillerWords.
+const fillerWords = new Set(['easy', 'best', 'homemade', 'quick', 'simple', 'the', 'a', 'recipe', 'classic'])
+
+// letterFolds is harness's letterFolds: gen_folds.py writes both tables,
+// and harness's TestLetterFoldsMatchPWA fails when they differ.
+const letterFolds: Record<string, string> = folds
+
+const combiningMark = /\p{Mn}/u
+const wordChar = /[\p{L}\p{Nd}]/u
+
+// normalizeName is harness.Normalize: lowercased, accents dropped, letters
+// folded, apostrophes removed, other punctuation turned into spaces and
+// filler words dropped. "Easy Chicken Tikka-Masala!" is
+// "chicken tikka masala".
+export function normalizeName(name: string): string {
+  let out = ''
+  // Lowercased letter by letter, as Go's strings.ToLower does, so no
+  // letter is lowered by its context (a final Σ is σ, not ς).
+  for (const letter of name) {
+    for (const ch of letter.toLowerCase()) {
+      if (combiningMark.test(ch) || ch === "'" || ch === '’') continue
+      const fold = letterFolds[ch]
+      if (fold !== undefined) out += fold
+      else if (wordChar.test(ch)) out += ch
+      else out += ' '
+    }
+  }
+  return out
+    .split(' ')
+    .filter((word) => word !== '' && !fillerWords.has(word))
+    .join(' ')
+}
+
+function words(name: string): Set<string> {
+  const normalized = normalizeName(name)
+  return new Set(normalized === '' ? [] : normalized.split(' '))
+}
+
+// similarNames is harness.Similar: whether a and b name the same dinner, by
+// the share of the words of their normalized forms they have in common.
+export function similarNames(a: string, b: string): boolean {
+  const left = words(a)
+  const right = words(b)
+  if (left.size === 0 || right.size === 0) return false
+  let shared = 0
+  for (const word of left) if (right.has(word)) shared++
+  return shared / (left.size + right.size - shared) >= SIMILAR_THRESHOLD
+}

web/src/onboarding/NotificationsStep.test.tsx

@@ -100,6 +100,7 @@ async function renderStep(enableNotifications?: EnableNotifications) {
               element={<NotificationsStep enableNotifications={enableNotifications} />}
             />
             <Route path="/" element={<h1>Home</h1>} />
+            <Route path="/onboarding/regulars" element={<h1>Regulars step</h1>} />
           </Routes>
         </AuthBootstrap>
       </ApiProviders>
@@ -257,6 +258,41 @@ describe('onboarding step 3', () => {
   })
 })
 
+describe('onboarding step 3 with too few Regulars', () => {
+  it('says why and offers a way back to add Regulars', async () => {
+    const server = await renderStep()
+    fireEvent.click(later())
+    await vi.waitFor(() => expect(server.held).toHaveLength(1))
+    server.held[0]!.answer(
+      jsonResponse(400, {
+        error: {
+          code: 'invalid_settings',
+          message: 'invalid household settings: onboarding_completed: add at least 3 Regulars first (have 2)',
+          retryable: false,
+        },
+      }),
+    )
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      'Could not finish setting up: invalid household settings: onboarding_completed: add at least 3 Regulars first (have 2)',
+    )
+    const addRegulars = screen.getByRole('button', { name: 'Add Regulars' })
+    expectMinHitArea(addRegulars)
+    fireEvent.click(addRegulars)
+    expect(await screen.findByRole('heading', { level: 1, name: 'Regulars step' })).toBeInTheDocument()
+  })
+
+  it('offers no way back for any other refusal', async () => {
+    const server = await renderStep()
+    fireEvent.click(later())
+    await vi.waitFor(() => expect(server.held).toHaveLength(1))
+    server.held[0]!.answer(errorResponse(500, 'internal'))
+
+    expect(await screen.findByRole('alert')).toHaveTextContent('Could not finish setting up: internal message')
+    expect(screen.queryByRole('button', { name: 'Add Regulars' })).not.toBeInTheDocument()
+  })
+})
+
 describe('notificationsUnavailable', () => {
   it('answers "unavailable" without asking for permission', async () => {
     await expect(notificationsUnavailable()).resolves.toBe('unavailable')

web/src/onboarding/NotificationsStep.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { CalendarDays, ShoppingBasket, Sparkles, UtensilsCrossed, type LucideIcon } from 'lucide-react'
 import { useNavigate } from 'react-router'
 import { InstallHint } from '../pwa/InstallHint.tsx'
-import { useCompleteOnboarding } from '../settings/api.ts'
+import { needsMoreRegulars, useCompleteOnboarding } from '../settings/api.ts'
 import { Button } from '../ui/Button.tsx'
 import { Icon } from '../ui/Icon.tsx'
 import { OnboardingStep } from './OnboardingStep.tsx'
@@ -50,12 +50,15 @@ export type NotificationsStepProps = {
 
 // NotificationsStep is onboarding step 3: what MealQuest notifies about, the
 // iOS install hint, and finishing onboarding. Either button records that
-// onboarding is finished and goes Home.
+// onboarding is finished and goes Home. When the server refuses because the
+// household has fewer than three Regulars, the reason shows with a way back
+// to step 2 to add them.
 export function NotificationsStep({ enableNotifications = notificationsUnavailable }: NotificationsStepProps) {
   const navigate = useNavigate()
   const complete = useCompleteOnboarding()
   const [enabling, setEnabling] = useState(false)
   const [problem, setProblem] = useState<string | null>(null)
+  const [fewRegulars, setFewRegulars] = useState(false)
   const busy = enabling || complete.isPending
 
   async function finish() {
@@ -63,13 +66,19 @@ export function NotificationsStep({ enableNotifications = notificationsUnavailab
       await complete.mutateAsync()
     } catch (error) {
       setProblem(`Could not finish setting up: ${(error as Error).message}`)
+      setFewRegulars(needsMoreRegulars(error as Error))
       return
     }
     void navigate('/', { replace: true })
   }
 
-  async function turnOn() {
+  function clearProblem() {
     setProblem(null)
+    setFewRegulars(false)
+  }
+
+  async function turnOn() {
+    clearProblem()
     setEnabling(true)
     try {
       await enableNotifications()
@@ -83,7 +92,7 @@ export function NotificationsStep({ enableNotifications = notificationsUnavailab
   }
 
   function later() {
-    setProblem(null)
+    clearProblem()
     void finish()
   }
 
@@ -124,6 +133,11 @@ export function NotificationsStep({ enableNotifications = notificationsUnavailab
           {problem}
         </p>
       )}
+      {fewRegulars && (
+        <Button variant="outline" className={styles.recover} onClick={() => void navigate('/onboarding/regulars')}>
+          Add Regulars
+        </Button>
+      )}
     </OnboardingStep>
   )
 }

web/src/onboarding/Onboarding.module.css

@@ -229,6 +229,11 @@
   color: var(--color-accent-700);
 }
 
+/* Step 3: back to step 2 when the server wants more Regulars. */
+.recover {
+  margin-top: var(--space-3);
+}
+
 .status {
   margin-top: 10px;
 }

web/src/onboarding/OnboardingPage.test.tsx

@@ -146,6 +146,14 @@ describe('onboarding step 2 (mock 1h)', () => {
     expect(declaredStyle(pills[0]!).height).toBe('6px')
   })
 
+  it('does not offer a common pick the server would refuse as a duplicate of a Regular', async () => {
+    await regularsStep([dinnerBody('d1', 'Homemade chili'), dinnerBody('d2', 'Easy Chicken Stir Fry')])
+
+    expect(screen.queryByRole('button', { name: 'Add Chili' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Add Chicken stir-fry' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Add Beef tacos' })).toBeInTheDocument()
+  })
+
   it('sizes the input pill, "+" button, picks and Next as the mock does', async () => {
     await regularsStep()
     expect(hitArea(input()).height).toBe(48)

web/src/onboarding/RegularsStep.tsx

@@ -2,6 +2,7 @@ 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 { similarNames } from '../dinners/names.ts'
 import { useRefusals } from '../dinners/useRefusals.ts'
 import { Button } from '../ui/Button.tsx'
 import { Chip } from '../ui/Chip.tsx'
@@ -16,7 +17,8 @@ import styles from './Onboarding.module.css'
 // household moves on.
 export const MIN_REGULARS = 3
 
-// commonPicks are offered as one-tap Regulars until the household has them.
+// commonPicks are offered as one-tap Regulars until the household has them,
+// or a Regular the server would count as the same dinner.
 export const commonPicks = [
   'Beef tacos',
   'Spaghetti bolognese',
@@ -28,10 +30,6 @@ export const commonPicks = [
   'Fried rice',
 ]
 
-function sameName(a: string, b: string): boolean {
-  return a.trim().toLowerCase() === b.trim().toLowerCase()
-}
-
 // 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.
@@ -43,7 +41,7 @@ export function RegularsStep() {
   const [draft, setDraft] = useState('')
   const { refusals, track } = useRefusals()
   const list = regulars.data ?? []
-  const picks = commonPicks.filter((pick) => !list.some((regular) => sameName(regular.name, pick)))
+  const picks = commonPicks.filter((pick) => !list.some((regular) => similarNames(regular.name, pick)))
   // Next waits for every add to be answered, so a refused add's error shows
   // here and an add the server takes back never counts towards the three.
   const adding = list.some((regular) => regular.pending)

web/src/settings/api.ts

@@ -441,6 +441,18 @@ export function householdSettingsProblems(error: Error): HouseholdSettingsProble
   return problems
 }
 
+// needsMoreRegulars reports whether error is the server refusing to finish
+// onboarding because the household has fewer than three Regulars
+// (internal/household MinRegulars) — the only refusal of
+// {"onboarding_completed": true}.
+export function needsMoreRegulars(error: Error): boolean {
+  return (
+    error instanceof ApiError &&
+    error.code === 'invalid_settings' &&
+    error.message.startsWith(`${invalidHouseholdPrefix}onboarding_completed: `)
+  )
+}
+
 // aiStatus is the AI assistant row's status line: the provider and the
 // model's display name, or that no model is chosen yet (the seed).
 export function aiStatus(settings: Pick<AISettings, 'provider' | 'model'>): string {