Keep food logging beside products and prevent premature search timeouts

[xrpbanks]

Selecting Log Food currently opens portion controls below the entire results list, separating confirmation from the chosen product. The embedded app also uses the CalorieToken wallpaper instead of the requested CalorieApp mark.

This places portion controls inside the selected FoodCard. Product name, brand, percentage and scaled nutrition stay next to Add to food log. The card reveals and focuses the controls, restores focus on cancel, and keeps save feedback and sign-in/error messages beside the result. A new search clears an unfinished selection; pending saves block switching and duplicate submissions. A generation guard prevents late responses from restoring feedback after logout.

The screenshot audit also exposed a concrete search deadline mismatch: the existing backend primary/fallback attempts could outlast the proxy's 18 seconds and the browser's 20 seconds. Only food search now uses a 45-second proxy limit and 50-second browser limit, with clear waiting, 429 and timeout messages. Existing provider attempt/rate limits and all identity deadlines remain unchanged; no automatic search retry is added. A virtual-clock test runs the real proxy and browser helper together and completes one 26-second search response. This demonstrates the timing defect; the screenshot itself lacks a trace proving its exact cause.

The app now loads frontend/public/calorieapp-background.png through its existing global background rules. The muted repeating wallpaper uses the original CalorieApp phone-and-cutlery motif, with pale grey/blue tones and the existing light appearance. WordPress's outer background remains as it is.

Background source and edit:

• Reference 1: the existing app frontend/public/background.png, Git blob 992a76238ce68adbafe61c6777e677d9ed1a61fa. Drive also contains a same-named 350,765-byte source file; the inspected reference bytes came from the app repository.
• Reference 2: the original transparent CalorieApp vector mark previously extracted from Drive's calorieappdraft3.ai, rendered as a PNG reference.
• Image generation mode: reference-image edit. Prompt: replace every circular CalorieToken motif with the CalorieApp phone-and-cutlery mark; preserve the wide repeating arrangement, approximate sizes, rotations, density, pale grey/subtly blue colours and very low contrast white finish; no text, checkerboard, gradients, vignette or new shadows.
• The generated wallpaper was visually inspected and copied byte-for-byte into the app. Asset: 1,870 × 841 px, 1,023,960 bytes, Git blob 7961fe8ec2727e58f5175697392ee45e510d4101.

Validation and review:

• Current head: c1f8915e4103cf1c30842c392ff8c1eb4b3222c0, based on app main 4baea3acaeaa14dacc602ae8d6154ab4c7e97836.
• Copilot reviewed 35a933d452bff83d3e75b01fb7f506d717b233f4 and identified one suppressed finding in review 5134578220: starting an inline save cleared the unrelated Logged Foods error/sign-in message.
• The follow-up removes that single state reset. Portion errors remain local to the selected product; the log section changes when its own refresh or authentication result changes.
• A new behavior test failed before the fix and passes after it. It holds the save in flight, checks both a sign-in prompt and a failed log load, rejects a transient empty summary, and verifies subsequent 401 handling or successful refresh.
• All 12 current food-logging and search behavior tests pass locally. The earlier head also passed the four unchanged logout-proxy cases and full CI 34144787108. Full CI 34152034973 passed on this follow-up head, including all four jobs (frontend lint/build, backend tests, repository boundaries and WordPress release checks).
• Search tests cover a successful 26-second response through both request layers, a finite 45-second deadline, the unchanged ordinary 18-second deadline, and a forwarded 429/Retry-After with one upstream call.
• Both earlier inline review threads remain resolved. The latest finding was in the review summary, so there is no new inline thread to resolve. Copilot's COMMENTED state is not approval.
• Native mobile/desktop rendering inside WordPress and one live search after inactivity remain pending.
• Search evidence and limits.

This is the CalorieApp part of the user's first bundled refinement cycle. The user has now installed WordPress Bridge 0.3.27; public Home, Richlist and CalorieApp HTML references that version. This app-only follow-up needs no replacement WordPress ZIP. No merge or app deployment has been performed.

[Copilot]

🟡 Changes recommended

There is a confirmed duplicated/ inconsistent validation error path for invalid custom portions that can surface redundant UI and should be corrected before approval.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR improves the “Log Food” UX by embedding the portion/confirmation controls inside the selected search result card, keeping the selected product visible and keeping feedback (success, sign-in prompts, and errors) colocated with the selected item.

Changes:

• Move portion controls from a global section into the selected FoodCard, and add per-card inline feedback plus selection-generation guarding for late responses/logout.
• Add FoodCard expand/focus behavior (reveal once, preserve focus intent, restore keyboard focus on cancel).
• Add new UI behavior tests and run them in CI.

File summaries

File	Description
tools/tests/food_logging_ui.test.mjs	Adds behavior tests covering selection, scaling, blocking during save, error states, late responses, and focus behavior.
frontend/components/FoodSearchPlaceholder.tsx	Embeds portion controls within the selected result card; introduces per-selection feedback/error handling and blocks interactions while saving.
frontend/components/FoodCard.tsx	Adds expandable region support for embedded controls, focus management, disabled states, and inline feedback rendering.
.github/workflows/ci.yml	Includes the new UI test in the CI test invocation list.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟡 Changes recommended

There is an unrelated global background image change included that isn’t explained in the PR description and should be confirmed as intentional or removed.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

• Files reviewed: 5/6 changed files
• Comments generated: 1
• Review effort level: Lite

[Copilot]

🔵 Needs a closer look

The updated food logging flow clears logError during log submission, which can incorrectly hide the sign-in/logs error state and cause UI flicker while a save is in flight.

Review details

Suppressed comments (1)

Previously missed (1) — in code that hasn't changed since the last review.

frontend/components/FoodSearchPlaceholder.tsx:493

• confirmPortionLogging() clears logError (used for the Logged Foods section) even though portion/logging errors are now handled via portionError/logFeedback. This can temporarily hide the sign-in prompt or any existing log loading error while a log-food request is in flight (and then reappear on 401), causing UI flicker and coupling unrelated state.

• Files reviewed: 9/10 changed files
• Comments generated: 0 new
• Review effort level: Lite