# Execution Plan: Premium Mega Menu ## Step 1: E2E Testing Track (M1) - Target: Spawn an E2E testing sub-orchestrator to write requirement-driven E2E tests for the 3-image layout Mega Menu. - Verification: Tests cover: - Root Image on the left. - Column Image inside grid next to/above column title. - Hovering links displaying the correct link image on the right. - Lazy loading of hover images. - Responsive layout (mobile drawer hides complex image layouts gracefully). ## Step 2: Database & Backend Updates (M2) - Target: Spawn database and backend lead agents to: - Add optional `rootImage` to `Menu`, and `columnImage`, `hoverImage` to `MenuItem` in `apps/backend/prisma/schema.prisma`. - Create and run migration. - Update `packages/types/index.ts` to include the three image fields. - Update Elysia route body validation schemas and database saving logic in `apps/backend/src/routes/menus.ts`. - Update `apps/mcp-server/menu-tools.ts` and `menu-toolkit.ts` if needed. - Verification: Monorepo compiles successfully (`npm run typecheck` and builds pass). ## Step 3: Storefront & Admin UI (M3) - Target: Spawn frontend lead and Next.js SEO architect agents to: - Update the admin builder `apps/admin/src/pages/MenuManagerPage.tsx` to support configuring `rootImage`, `columnImage`, and `hoverImage` inside the tree node editor. - Update `apps/spa/src/store/menuStore.ts` and `apps/spa/src/components/DesktopMegaMenu.tsx` / `MobileDrawer.tsx` to use the new fields. - Update `apps/website/src/components/navigation/menuTypes.ts` and `apps/website/src/components/navigation/DesktopMegaMenu.tsx` / `MobileDrawer.tsx` to implement the 3-image layout using `next/image` with lazy loading and fade-in animations. - Verification: No typecheck errors and UI renders correctly based on configured values. ## Step 4: E2E & Adversarial Hardening (M4) - Target: Run E2E tests, add white-box/adversarial tests (Phase 2), and run the Forensic Auditor to audit code integrity. - Verification: All tests pass, Forensic Auditor gives a CLEAN verdict.