Coffee 2

Update the React application UI in src/App.tsx (and the smallest relevant existing component or stylesheet files if needed) to render a visible, enabled button whose accessible name and displayed text are exactly "Button". Use the project's existing Button primitive and visual conventions when available; otherwise use a semantic native <button type="button"> with a clearly visible focus state. Place it in the main app content without removing or disrupting the coffee menu, customization, cart, persistence, or review-order behavior. Add or update a focused React Testing Library test under tests/ that locates the control with getByRole('button', { name: 'Button' }), verifies it is visible and enabled, and confirms existing app rendering still works.

Update the React application UI in src/App.tsx and only the smallest relevant existing component or stylesheet files needed to render a visible, enabled button whose displayed text and accessible name are exactly "Button". Use the project's existing Button primitive and visual conventions when available; otherwise use a semantic native <button type="button"> with a clearly visible keyboard focus state. Place the control in the main application content without removing or disrupting the coffee menu, customization, cart, persistence, or review-order behavior. Add or update a focused React Testing Library test under tests/ that locates the control with getByRole('button', { name: 'Button' }), verifies it is visible and enabled, and confirms the surrounding app still renders.

Create docs/product-spec.md containing the final information architecture, user flow, copy deck, and interaction rules for Daily Grind. Specify at least six distinct drinks with customer-facing names and descriptions; size, milk, sweetness, and quantity choices; empty-cart, storage-recovery, and review-order copy; USD pricing rules; line-merging identity rules; keyboard behavior; semantic labels; cart live-announcement behavior; responsive expectations at 375px and 1280px; and explicit exclusions for checkout, payment, login, and network submission. Do not create application source files.

Create the project foundation in the current workspace: package.json and lockfile, Vite React TypeScript configuration, tsconfig files, ESLint configuration, index.html, src/main.tsx, src/vite-env.d.ts, and a minimal src/App.tsx. Configure npm scripts named dev, build, preview, lint, typecheck, test, and test:e2e. Add and configure Vitest with jsdom, React Testing Library, jest-axe, and Playwright with Chromium projects for 375x812 mobile and 1280x800 desktop. Add tests/setup.ts and Playwright webServer configuration. Keep App.tsx intentionally minimal so later feature work owns the product UI. Verify dependency installation, npm run typecheck, and npm run build.

Verify the new app control by running the focused React test that asserts a visible, enabled button with the exact accessible name "Button", then run the repository's lint, typecheck, complete unit/integration test suite, and production build commands. If browser tests are configured and runnable, run the relevant app smoke test or full end-to-end suite and confirm the button is visible and keyboard-focusable without regressing the coffee ordering experience. Fix only issues caused by this amendment and report the exact commands and outcomes as completion evidence.

Run the focused React Testing Library test for the new control, then run the repository's lint, typecheck, unit test, and production build commands. Verify that the app exposes exactly one visible and enabled semantic button with displayed text and accessible name "Button", that it is keyboard focusable with a visible focus indicator, and that existing coffee ordering behavior still renders without regression. Fix only defects directly caused by this branch and rerun every affected check; do not weaken existing tests.

Using docs/product-spec.md, create src/styles/tokens.css, src/styles/global.css, src/styles/components.css, and reusable presentation primitives in src/components/ui/Button.tsx, IconButton.tsx, QuantityStepper.tsx, and Modal.tsx. Implement a warm coffee-shop visual system with system-font fallbacks, strong contrast, visible :focus-visible states, 44px minimum interactive targets, mobile-first layouts without horizontal overflow, desktop layout helpers, and prefers-reduced-motion rules. Ensure Modal has labelled dialog semantics, Escape handling, initial focus, focus containment, and focus restoration. Add tests/components/ui-accessibility.test.tsx for keyboard behavior, accessible names, modal focus lifecycle, and jest-axe checks. Do not edit App.tsx, domain, or cart files.

Using docs/product-spec.md and imports from src/domain/types.ts and src/domain/lineIdentity.ts, create src/cart/cartReducer.ts, src/cart/storage.ts, and src/cart/CartProvider.tsx. Implement typed add, update quantity, remove, and clear actions; merge only lines with identical product customizations; hydrate once from a versioned localStorage payload; persist subsequent changes; and safely recover to an empty cart when JSON, schema, quantity, or storage access is invalid. Expose state and actions through a guarded React hook. Add tests/cart/cartReducer.test.ts and tests/cart/storage.test.ts covering every transition, merging, non-merging, hydration, malformed data, version mismatch, and thrown storage operations. Do not edit App.tsx or CSS files.

Using docs/product-spec.md, create src/domain/types.ts, src/domain/catalog.ts, src/domain/pricing.ts, and src/domain/lineIdentity.ts. Define immutable typed data for at least six drinks and all size, milk, sweetness, and quantity options. Represent money as integer cents; implement pure functions for customization adjustments, quantity-aware line totals, aggregate cart totals, USD formatting, and stable customized-line identity. Reject or normalize invalid quantities at the domain boundary. Add tests/domain/pricing.test.ts and tests/domain/lineIdentity.test.ts with table-driven coverage of all adjustments, quantities, totals, formatting, and identity distinctions. Do not edit App.tsx or cart state files.

Re-run the acceptance suite against the produced artifact; fail if any test fails.

Implement the complete app by editing src/main.tsx and src/App.tsx and creating src/components/Header.tsx, MenuGrid.tsx, CoffeeCard.tsx, DrinkCustomizer.tsx, CartPanel.tsx, CartLine.tsx, OrderReview.tsx, and CartAnnouncer.tsx. Compose the catalog, pricing functions, CartProvider, and UI primitives into one responsive page. Show at least six menu cards; allow size, milk, sweetness, and quantity customization with live computed price; add customized lines; update quantity; remove and clear lines; display item count and exact USD totals; preserve cart through reload; announce cart changes in a polite live region; and show a non-destructive Review Order summary with every option and total. Provide meaningful empty state and recovery-safe behavior. Do not add login, payment, network calls, or order submission. Add tests/App.test.tsx covering rendering, customization, cart manipulation, review summary, accessible names, keyboard usage, and serious/critical jest-axe results.

Re-run the acceptance suite against the produced artifact; fail if any test fails.

Re-run the acceptance suite against the produced artifact; fail if any test fails.

Re-run the acceptance suite against the produced artifact; fail if any test fails.

Create e2e/ordering.spec.ts and e2e/persistence.spec.ts. In Playwright, verify at least six complete menu cards; customize a drink with a non-default size, milk, sweetness, and quantity; assert its exact line price and total; add a differently customized copy as a separate line; update quantity; remove a line; clear the cart; and verify the empty state. Add a reload scenario that confirms customized contents and total persist. Use role- and label-based locators, deterministic storage cleanup, and assertions that work in both configured mobile and desktop projects.

Create e2e/quality.spec.ts and install/configure a Playwright-compatible axe scanner if not already present. Test the empty-cart, open-customizer, populated-cart, and review-order states for zero serious or critical accessibility violations. Verify keyboard-only customization and modal dismissal/focus restoration; confirm Review Order contains every selected option and total but no payment, authentication, or submission control; assert no horizontal overflow at 375px and 1280px; and save stable screenshots for those two viewports under the Playwright snapshot convention. Honor reduced-motion emulation in a focused assertion.

Re-run the acceptance suite against the produced artifact; fail if any test fails.