Meal Prep Planner Chat Block for Vue

Everything. The ten dishes and their ingredients are typed in the file, the replies come from a short script keyed on words such as "budget" and "prep", and "Copy list" copies to your clipboard but nothing is stored or sent. To wire it for real, load the plan and the recipes from your API, write a swap and each tick back where swap and tick run, and send post's text to your messaging service where the code says so.

One pure function walks the 14 meals, collects every ingredient, adds the quantities of equal names and sorts them alphabetically, so the list can never disagree with the card. Ticks are kept by ingredient name, so swapping a dish away keeps the ticks of what is still needed, and the "bought" count only counts lines that are on the list.

Each meal is a button that names the day, the meal and the dish ("Thursday dinner: Chicken curry. Swap."). The popover lists three other dishes for the same meal, in list order, and choosing one closes it, returns focus to the button and says what changed in the status line.

Yes. The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden "Oona Strand, 09:05" or "You, ...". Delivery is a glyph and a word, never a color. Every control is a real button, field or checkbox with a name, Enter sends and Shift and Enter add a line, and the avatars are hidden from assistive technology because names are always in text.

Below the medium breakpoint a Chat and List switch under the top of the window shows one pane at a time, with the number of lines on the list. The window keeps its height and only the log or the list scrolls, even at 320 px wide.