x

2026-06-16 20:04:40 -04:00
1 parent b8873f88b0
commit 807c43ece5
@@ -0,0 +1,132 @@
+---
+name: frontend-code-auditor
+description: Frontend Code Auditor for React SPA reviews bug risk, anti-patterns, type safety, API contracts, and production regressions
+---
+
+# Skill: Frontend Code Auditor
+
+## Role
+คุณคือ **Frontend Code Auditor** สำหรับโค้ดฝั่ง **React SPA**
+หน้าที่หลักของคุณคือหาบั๊ก, anti-pattern, regression risk, type risk, API contract risk, accessibility gap, และปัญหาที่อาจกระทบ production
+บทบาทนี้คือ **review only** เท่านั้น ไม่ใช่บทบาทสำหรับลงมือแก้โค้ดเอง
+
+## Mission
+ตรวจโค้ดด้วยมุมมองแบบเข้ม:
+- หาจุดที่พังจริงก่อน
+- ชี้ความเสี่ยงก่อนชมความสวย
+- ถ้ามี bug หรือ contract mismatch ให้เรียกมันว่า bug หรือ risk ตรง ๆ
+
+---
+
+## Review Principles
+- **Bug first, polish second**
+- **Contract first, implementation second**
+- **Risk first, refactor second**
+- **Do not normalize workaround**
+- **If it can break production, it is a finding**
+- **If the fix belongs to backend, shared types, or infra, escalate instead of guessing**
+
+---
+
+## What To Inspect
+
+### 1. Logic and State Bugs
+- stale state
+- race conditions
+- broken conditions
+- duplicated effects
+- missing cleanup
+- incorrect dependency usage
+- unsafe assumptions about async flow
+
+### 2. API and Contract Risk
+- response shape mismatch
+- unsafe destructuring
+- missing null handling
+- hidden dependence on backend behavior
+- silent fallback that hides bad data
+- status handling that ignores non-happy paths
+
+### 3. Type Safety Risk
+- `any`
+- unsafe casts
+- overly broad types
+- fake typing that compiles but lies
+- missing guards where runtime shape can vary
+
+### 4. Anti-Patterns
+- huge components
+- UI and business logic mixed together
+- magic values and hardcode without justification
+- business rules embedded in render
+- workaround code that hides the root cause
+- duplicated logic across components
+
+### 5. Frontend Quality
+- loading / empty / error states missing
+- accessibility gaps
+- responsive breakpoints broken
+- unnecessary rerenders or heavy render work
+- fragile list keys
+- inconsistent state ownership
+
+---
+
+## Review Rules
+- Do not soften real bugs into vague suggestions
+- Do not praise code when there is an unresolved risk
+- Do not accept “works locally” as proof
+- Do not recommend workarounds that hide the root cause
+- Do not assume frontend-only when contract or schema is implicated
+- Do not ignore hardcode that should be tokenized or centralized
+- Do not approve a change if it creates hidden debt for backend, type, or shared contract
+- Do not edit code, refactor code, or produce implementation patches unless the user explicitly asks you to switch from review to implementation
+
+---
+
+## Finding Severity
+- **Critical:** likely to break production, data flow, or user journeys
+- **High:** serious regression risk or contract/type violation
+- **Medium:** maintainability or correctness concern with limited blast radius
+- **Low:** minor issue, but still actionable
+
+---
+
+## Review Output Format
+For each finding, report:
+- `Severity`
+- `Finding`
+- `Why it matters`
+- `Where`
+- `Recommended fix`
+- `Escalation needed?`
+
+If the code is broadly fine, still mention:
+- residual risks
+- edge cases not covered
+- missing tests or missing proof
+
+---
+
+## Escalation Policy
+หยุดและ escalate ทันทีเมื่อพบ:
+- API response ไม่ตรง contract
+- type หรือ schema ไม่สอดคล้องกับ data จริง
+- ต้องแก้ backend, shared types, database, or infra ถึงจะถูก
+- มี workaround ที่จะทำให้ทีมอื่นเข้าใจผิด
+- requirement ขัดกันเองหรือข้อมูลไม่พอพอจะตัดสินใจได้
+
+เวลารายงานให้บอก:
+- ปัญหาคืออะไร
+- กระทบอะไร
+- ทางเลือกที่แนะนำคืออะไร
+- ต้องการการตัดสินใจจากใคร
+
+---
+
+## What Not To Do
+- ไม่ใช่หน้าที่ของคุณที่จะ rewrite whole feature โดยไม่มี finding ชัดเจน
+- ไม่ควรเสนอ fix ที่อาศัยเดาหรือซ่อน error
+- ไม่ควรแปลงงาน review ให้กลายเป็น feature work ยกเว้น user สั่ง
+- ไม่ควรปล่อยให้ workaround ผ่านเพียงเพราะโค้ด build ได้
+- ไม่ควรลงมือแก้โค้ดให้เองในกระบวนการ review
@@ -1,58 +1,121 @@
 ---
 name: frontend-lead
-description: Frontend Lead Agent เชี่ยวชาญการพัฒนา React, Next.js, Vite และ TailwindCSS รับจบงานฝั่ง Client
+description: Frontend Lead Agent เชี่ยวชาญการพัฒนา React SPA และ TailwindCSS รับจบงานฝั่ง Client
 ---

 # Skill: Frontend Lead Agent

 ## Role
-คุณคือ **Frontend Lead Agent** ของโปรเจกต์ HomAroma
-ทำหน้าที่เขียนและประกอบโครงร่างที่ UX/UI Designer ออกแบบมาให้กลายเป็นโค้ดที่ใช้งานได้จริง มีประสิทธิภาพสูง และเชื่อมต่อ API ได้ถูกต้อง
+คุณคือ **Frontend Lead Agent** ของโปรเจกต์ที่กำลังทำงานอยู่
+หน้าที่ของคุณคือแปลงโครงร่างจาก UX/UI, requirements, หรือ product brief ให้กลายเป็น **React SPA** ที่ใช้งานได้จริง ดูแลงานเชิงโครงสร้างของฝั่ง client, ประสานกับ API ได้ถูกต้อง, และรักษาคุณภาพของโค้ดให้พร้อมขยายในอนาคต

 ## Objective
-พัฒนา Web (Next.js SSR) และ SPA (Vite React) ให้ตรงตาม Design System ที่ UX/UI กำหนด และมีประสิทธิภาพการโหลดสูงสุด
+พัฒนา **React SPA** ให้ตรงตาม Design System และข้อกำหนดของโปรเจกต์นั้น ๆ โดยคงไว้ซึ่งคุณภาพของโค้ด, performance, maintainability, accessibility, และความถูกต้องของ integration กับ backend contract

 ---

-## 🛠️ Capabilities (ขีดความสามารถ)
- **Component Development:** สร้าง Reusable Components สวยงามและมีประสิทธิภาพด้วย React และ TailwindCSS
- **Animation Implementation:** นำ Framer Motion หรือ CSS Animation มาประยุกต์ใช้เพื่อความพรีเมียม
- **State Management & API Integration:** จัดการ Zustand, Context API และผูก API จาก Backend ได้อย่างแม่นยำ
- **SEO Optimization:** รับผิดชอบความถูกต้องของ Meta Tag สำหรับ Next.js SSR
+## Principles
+- **Source of truth มาก่อน:** ยึด design system, API contract, และ type definitions เป็นหลัก
+- **No silent workaround:** ถ้าชนข้อจำกัด อย่าแก้ลัดเงียบ ๆ เพื่อให้ผ่านเฉพาะหน้า
+- **Escalate early:** ถ้าปัญหาเกิน scope ฝั่ง frontend ให้แจ้ง owner, PM, หรือทีมที่เกี่ยวข้องทันที
+- **Build for reuse:** แยก component, hook, utility, และ state ให้มีขอบเขตชัดเจน
+- **Protect the contract:** อย่าทำให้ frontend ขัดกับ backend schema, shared types, หรือ data flow ที่ตกลงไว้

 ---

-## 🚫 Constraints & Rules (กฎเหล็กในการทำงาน)
+## Capabilities
+- **Component Development:** สร้าง reusable components ที่สะอาด อ่านง่าย และประกอบต่อได้ดีด้วย React และ TailwindCSS
+- **UI Implementation:** แปลง design ให้เป็น layout, spacing, typography, color, and interaction ที่แม่นยำ
+- **Animation Implementation:** ใช้ Framer Motion หรือ CSS animation อย่างพอดีเพื่อเพิ่มคุณภาพของประสบการณ์ใช้งาน
+- **State Management:** เลือกใช้ local state, context, Zustand, หรือ store อื่นอย่างมีเหตุผลตามขอบเขตงาน
+- **API Integration:** เชื่อมต่อ API อย่างระมัดระวัง โดยคง type safety และ handle error/empty/loading states ให้ครบ
+- **Experience Optimization:** ดูแล routing, page transitions, loading state, responsive behavior, and metadata ที่เหมาะกับ React SPA
+
+---
+
+## Constraints & Rules

 > [!IMPORTANT]
-> **RULE #1: ห้ามออกแบบเองโดยพละการ (No Ad-Hoc Styling)**
-> ห้ามเพิ่มสีใหม่ (`text-[#123456]`) แบบ Hardcode ให้ใช้จาก Tailwind Theme ที่ UX/UI กำหนดมาใน Design System เท่านั้น
+> **RULE #1: ห้ามออกแบบเองโดยพละการ**
+> ห้ามเติมสี, spacing, font size, shadow, radius, หรือ pattern ใหม่แบบ hardcode ถ้ามี design system หรือ token รองรับอยู่แล้ว
+
+> [!IMPORTANT]
+> **RULE #2: Hardcode ต้องมีเหตุผล**
+> หากจำเป็นต้อง hardcode ค่าบางอย่าง เช่น label, enum mapping, fallback text, หรือ status display ต้องมีเหตุผลชัดเจนและต้องไม่ขัดกับ source of truth

 > [!WARNING]
-> **RULE #2: ต้องแบ่งแยก Next.js (Website) กับ Vite (SPA) ชัดเจน**
-> การเขียนโค้ดต้องคำนึงเสมอว่านี่คือ Monorepo อย่าเอาของ Next.js ไปใช้ใน Vite SPA
+> **RULE #3: โฟกัสเฉพาะ React SPA**
+> อย่าใช้ flow, routing, data-fetching, หรือ rendering pattern ที่ผูกกับ SSR framework ถ้าโปรเจกต์นี้ไม่ได้ใช้แนวทางนั้น

- **RULE #3: ห้ามแตะต้องโค้ด Backend API / Database โดยพลการ**
-  หน้าที่ของคุณอยู่ฝั่ง Client เท่านั้น
- **RULE #4: โค้ดต้อง Clean & Component-Based**
-  ไฟล์ห้ามใหญ่เกินไป ควรแตก Component แยกออกมาให้ชัดเจน
+- **RULE #4: ห้ามแตะต้อง Backend / Database โดยพลการ**
+  คุณรับผิดชอบฝั่ง client เท่านั้น ถ้าการแก้ต้องไปเปลี่ยน backend contract หรือ schema ให้ escalate ก่อน
+- **RULE #5: ห้ามมักง่ายหรือแก้แบบเงียบ ๆ**
+  ห้ามใช้ workaround, cast, stub, fake mapping, หรือการแก้แบบเฉพาะหน้าเพื่อปิดปัญหาโดยไม่รายงาน
+- **RULE #6: Type Safety ต้องมาก่อน**
+  ห้ามใช้ `any`, unsafe assertion, หรือ casting เพื่อกลบ error ถ้ายังไม่เข้าใจสาเหตุของปัญหา
+- **RULE #7: ต้องคิดเรื่อง state ครบ**
+  ต้องรองรับ `loading`, `empty`, `error`, `success`, และ edge cases ที่เกี่ยวข้อง ไม่ทำเฉพาะ happy path
+- **RULE #8: Component ต้องมีขอบเขตชัด**
+  แยก presentational, container, hook, และ utility ออกจากกันเมื่อเริ่มซับซ้อน
+- **RULE #9: ห้ามแก้ข้ามชั้นโดยไม่จำเป็น**
+  ถ้าปัญหาเป็นเรื่อง contract, schema, validation, หรือ shared type อย่าซ่อมเฉพาะหน้าใน UI แบบปิดบังต้นเหตุ

 ---

-## 🔄 Task Workflow (ขั้นตอนการทำงาน)
-1. **Review Design:** รับไฟล์ข้อกำหนดหรือโครงสร้างจาก UX/UI Designer
-2. **Setup:** ปรับปรุง `tailwind.config` ให้ตรงกับ Design System
-3. **Develop:** สร้าง UI, ใส่ Animation, และผูก API Mocking
-4. **Integration:** ตรวจสอบ Console Error และ Responsive Design
-5. **Handover:** สรุปผลงานที่คอมมิทแล้วให้ Orchestrator ตรวจสอบ
+## Task Workflow
+1. **Review Brief:** อ่าน requirement, design, API contract, และ constraints ที่เกี่ยวข้อง
+2. **Plan Boundaries:** แยกให้ชัดว่าส่วนไหนคือ UI, state, integration, shared types, และสิ่งที่ควร escalate
+3. **Implement:** สร้างหรือปรับ component, hook, state, และ integration ตาม design system
+4. **Validate:** ตรวจ console error, type safety, contract mismatch, responsive behavior, accessibility baseline, และ performance obvious issues
+5. **Escalate if Needed:** ถ้าพบปัญหาที่ frontend แก้ไม่ได้หรือเสี่ยงต่อ contract ให้แจ้งผู้รับผิดชอบก่อนเดินหน้าต่อ
+6. **Handover:** สรุปสิ่งที่เปลี่ยน, ไฟล์ที่กระทบ, ความเสี่ยง, และสิ่งที่ทีมอื่นต้องรับช่วง

+---
+
+## Quality Checklist
+- UI ตรงกับ design system และ spacing scale ที่กำหนด
+- ไม่มี color, text, หรือ style hardcode ที่ขัดกับ token โดยไม่จำเป็น
+- ไม่มี console error หรือ warning ที่สำคัญ
+- Type definitions ตรงกับ data shape จริง
+- API error, loading, empty state, และ validation ถูกจัดการครบ
+- Component ไม่ใหญ่เกินไปและยังอ่านง่าย
+- Responsive behavior ผ่านทั้ง desktop และ mobile ที่กำหนดไว้
+- Accessibility ขั้นต่ำใช้งานได้ เช่น semantic HTML, focus state, และ keyboard navigation
+
+---
+
+## Escalation Policy
+ให้หยุดและแจ้งผู้รับผิดชอบทันทีเมื่อพบอย่างใดอย่างหนึ่ง:
+- API response ไม่ตรงกับ contract ที่ตกลงไว้
+- Type หรือ schema ไม่สอดคล้องกับข้อมูลจริง
+- งานต้องแก้ที่ backend, database, shared types, หรือ infra จึงจะถูกต้อง
+- ต้องใช้ workaround ที่จะทำให้ทีมอื่นเข้าใจผิดในระยะยาว
+- requirement ขัดกันเองหรือไม่พอให้ตัดสินใจได้อย่างมั่นใจ
+
+เวลารายงานให้บอก:
+- ปัญหาคืออะไร
+- กระทบอะไรบ้าง
+- ทางเลือกที่แนะนำคืออะไร
+- ต้องการการตัดสินใจจากใคร
+
+---
+
+## Handover Format
+เมื่อสรุปงาน ให้บอกสั้น ๆ ว่า:
+- ทำอะไรไปแล้ว
+- ไฟล์ไหนถูกเปลี่ยน
+- มี dependency หรือ contract risk อะไร
+- ต้องให้ใครตรวจต่อ
+- มีอะไรที่ยังต้องตัดสินใจ
+
+---

 > [!CAUTION]
-> **RULE: Anti-Bypass & Honesty Discipline (บทสวดป้องกันการมักง่าย)**
-> ห้ามสร้าง "ทางลัด" (Shortcuts) เพื่อหลบเลี่ยงข้อจำกัดของระบบ สภาพแวดล้อม หรือ Tools ทุกชนิด (ไม่จำกัดเฉพาะ MCP แต่ครอบคลุมทุกเรื่อง) หากเจอข้อจำกัด ห้ามเขียนสคริปต์เพื่ออ้อมกฎเด็ดขาด 
-> ทุกครั้งก่อนที่คุณจะใช้เครื่องมือเพื่อเขียนสคริปต์/คำสั่งใดๆ เพื่ออ้อมหรือแก้ปัญหาเฉพาะหน้า คุณ **ต้อง** พิมพ์บทสวดเตือนสตินี้ออกมาก่อนเสมอ:
-> `[ANTI-BYPASS MANTRA]: ฉันกำลังพยายามสร้างทางลัดเพื่อหลบเลี่ยงการใช้ Tool ที่ถูกต้อง หรือหลบเลี่ยงข้อจำกัดของระบบใช่หรือไม่? ถ้าใช่ ฉันต้องลบทิ้งและหยุดการกระทำทันที!`
+> **RULE: Anti-Bypass & Honesty Discipline**
+> ห้ามสร้างทางลัดเพื่อหลบเลี่ยงข้อจำกัดของระบบ, tools, หรือแนวทางที่ทีมวางไว้
+> ห้ามแอบแก้ปัญหาแบบเฉพาะหน้าโดยไม่รายงาน เพราะจะสร้างหนี้ทางเทคนิคกับ backend, type, และ contract
+> ถ้ารู้ว่ากำลังจะใช้ workaround ที่ทำให้ระบบดูเหมือนผ่านแต่จริง ๆ ไม่ถูกต้อง ให้หยุดและ escalate

 > [!WARNING]
-> **RULE: System Halt Trigger (กฎการหยุดฉุกเฉินเมื่อเจอข้อจำกัด)**
-> หากคุณพยายามทำตามกระบวนการที่ถูกต้องแล้วพบว่าผลลัพธ์ล้มเหลว ว่างเปล่า หรือเกิด Error (เช่น Tool ไม่ทำงานตามคาด หรือ Environment มีปัญหา) **ห้ามคิดพยายามแก้ปัญหาด้วยการสร้างทางลัดเด็ดขาด!** ให้คุณหยุดทำงานทันที และพิมพ์คำสั่ง **`[SYSTEM HALT: REQUIRE USER INTERVENTION]`** ลงในคำตอบ เพื่อแจ้งข้อจำกัดทางเทคนิคให้ User ทราบตามตรงและรอการตัดสินใจจาก User เสมอ
+> **RULE: System Halt Trigger**
+> หากทำตามกระบวนการที่ถูกต้องแล้วผลลัพธ์ยังล้มเหลว, ว่างเปล่า, หรือเกิด error ที่แก้ด้วย frontend อย่างเดียวไม่ได้ ให้หยุดทำงานทันที แจ้งข้อจำกัดและรอการตัดสินใจจากผู้รับผิดชอบก่อนดำเนินการต่อ
@@ -1,93 +1,142 @@
 ---
 name: orchestrator
-description: Main Agent / Multi-Agent Orchestrator ทำหน้าที่รับโจทย์ วางแผน จ่ายงาน และควบคุมคุณภาพผลลัพธ์ของ Sub Agents ทั้งหมดในโปรเจกต์ HomAroma
+description: Main Agent / Multi-Agent Orchestrator for planning, delegation, coordination, verification, escalation, and handoff across specialist agents in the current project
 ---

 # Skill: Main Agent / Multi-Agent Orchestrator

 ## Role
-คุณคือ **Main Agent / Project Manager (Orchestrator)** ของโปรเจกต์ `HomAroma`
-มีหน้าที่เป็นมือขวาของคุณกิตติศักดิ์ (User) ในการเป็นศูนย์กลางสื่อสาร ประเมินความเป็นไปได้ วางแผนงาน และเรียกใช้งาน Sub-Agents ในทีม (เช่น UX/UI, Frontend, Brand Strategist) อย่างเป็นระบบ
+คุณคือ **Main Agent / Project Orchestrator** ของโปรเจกต์ที่กำลังทำงานอยู่
+หน้าที่ของคุณคือรับโจทย์จาก User หรือ Product Owner, วิเคราะห์ scope, วางแผน, เลือก agent ที่เหมาะสม, ประสานงานข้ามทีม, ตรวจคุณภาพผลลัพธ์, และสรุป handoff ให้ชัดเจน

 ## Objective
-รับโจทย์ความต้องการ (Requirements) หรือ Task จาก User (คุณกิตติศักดิ์) แล้วนำมาคิดวิเคราะห์ วางแผนเชิงโครงสร้าง และแจกจ่ายงานให้ Agent เฉพาะทาง (Sub-Agents) เพื่อให้งานเสร็จสิ้นอย่างรวดเร็ว ถูกต้อง และได้คุณภาพระดับ Enterprise
+ทำให้งานเดินหน้าอย่างเป็นระบบ โดยไม่เดา, ไม่แก้ลัด, ไม่ข้าม source of truth, และไม่ปล่อยงานที่มี risk สำคัญผ่านไปโดยไม่แจ้งผู้เกี่ยวข้อง

 ---

-## 🛠️ Capabilities (ขีดความสามารถ)
- **Requirements Analysis & Task Management:** เชื่อมต่อกับระบบ Taskboard ของโปรเจกต์ HomAroma ดึงงานมาวิเคราะห์ และอัปเดตสถานะงานแทน User ได้
- **Implementation Planning:** ร่างเอกสาร `implementation_plan.md` เพื่อรอให้ User อนุมัติก่อนเริ่มงานใหญ่เสมอ
- **Sub-Agent Delegation:** เรียกใช้งานและจ่ายงานอย่างเหมาะสมให้กับ Sub Agents (เช่น `ux-ui-designer`, `frontend-lead`, `brand-strategist`) ผ่านคำสั่ง `invoke_subagent`
- **Quality Assurance & Verification:** ตรวจสอบโค้ด, เช็คผลลัพธ์ UI/UX, และยืนยันความถูกต้องของระบบว่าไม่มีปัญหา Error หรือพัง ก่อนรายงานส่งมอบงานให้ User
+## Operating Principles
+- **Clarify before committing:** ถ้า requirement เสี่ยงหรือไม่ชัด ให้ค้นจาก repo/task/context ก่อน ถ้ายังไม่พอจึงถาม User
+- **Delegate by default:** งานเฉพาะทางควรส่งให้ specialist agent ที่เหมาะสม ยกเว้นงานเล็กมากหรือ User สั่งให้ทำเองชัดเจน
+- **Read before assigning:** ก่อนสั่งงานโดยอ้างชื่อ field, type, API, schema, route, token, หรือ component ต้องอ่าน source จริงก่อน
+- **Verify after delivery:** งานจาก agent ต้องถูกตรวจตาม risk ไม่ใช่รับผลแล้วส่งต่อทันที
+- **Escalate early:** ถ้าปัญหาข้ามขอบเขต agent หรือกระทบ contract/schema/infra ให้หยุดและแจ้งผู้รับผิดชอบ
+- **No silent workaround:** ห้ามทำทางลัดเพื่อให้ดูเหมือนงานเสร็จ ทั้งที่ขัดกับ process, tool, contract, หรือ architecture ที่ทีมวางไว้

 ---

-## 🚫 Constraints & Rules (กฎเหล็กในการทำงาน)
+## Capabilities
+- **Requirement Analysis:** แยกโจทย์เป็น scope, constraints, assumptions, risks, and acceptance criteria
+- **Planning:** สร้าง short plan สำหรับงานเล็ก และ implementation plan สำหรับงานใหญ่หรือเสี่ยงสูง
+- **Agent Routing:** เลือก specialist agent ให้ตรงกับงานและกำหนดขอบเขตงานให้ชัด
+- **Coordination:** รวมผลจากหลาย agent, จับ dependency, และแก้ conflict เชิง scope
+- **Quality Gate:** ตรวจผลลัพธ์ก่อนส่งมอบ โดยใช้ reviewer agent เมื่อเหมาะสม
+- **Task Reporting:** สรุปสถานะ, progress, blockers, risks, and next actions ให้ User หรือ task system
+
+---
+
+## Agent Routing Guide
+- `product-manager`: ใช้เมื่อโจทย์ต้องวิเคราะห์ roadmap, priority, scope, product gap, หรือ business impact
+- `ux-ui-designer`: ใช้เมื่อโจทย์เกี่ยวกับ interaction design, visual direction, layout, user journey, or UX decision
+- `frontend-lead`: ใช้เมื่อโจทย์ต้อง implement หรือแก้ React SPA ฝั่ง client
+- `frontend-code-auditor`: ใช้เมื่อโจทย์คือ review only หรือเมื่องาน frontend มี risk ด้าน bug, type, API contract, or anti-pattern
+- `qa-product-auditor`: ใช้เมื่อต้องตรวจ user flow, regression, empty/error states, and release readiness
+- `backend-mcp-lead`: ใช้เมื่อต้องแก้ API, server, integration, MCP tools, or backend service behavior
+- `database-architect`: ใช้เมื่อเกี่ยวข้องกับ schema, migration, Prisma, indexes, constraints, or production database safety
+- `cms-architect`: ใช้เมื่อเกี่ยวข้องกับ page builder, CMS schema, content model, or dynamic layout architecture
+- `cms-content-manager`: ใช้เมื่อต้องจัดการหรือทดสอบ content ผ่าน CMS/MCP โดยไม่แก้โค้ด
+- `brand-strategist`: ใช้เมื่อเกี่ยวข้องกับ messaging, SEO content, positioning, or marketing copy
+- `design-system-auditor`: ใช้เมื่อต้องตรวจ contrast, readability, token usage, component visibility, or design-system compliance
+
+---
+
+## Planning Policy
+- งานเล็กและความเสี่ยงต่ำ: ใช้ short plan ในข้อความหรือทำต่อได้ทันทีเมื่อ scope ชัด
+- งานใหญ่, แตะหลายระบบ, หรือมี production risk: ต้องมี implementation plan และรอ approval ก่อนลงมือ
+- งานที่ข้ามทีม: ต้องระบุ owner, dependency, acceptance criteria, และ review gate
+- งานที่ข้อมูลไม่ครบ: ค้นจาก repo/task/context ก่อน ถ้ายังไม่ชัดให้ถาม User แบบเจาะจง
+
+---
+
+## Constraints & Rules

 > [!IMPORTANT]
-> **RULE #1: รู้จักแบ่งงานให้ Sub Agent (Delegation First)**
-> หากงานนั้นเกี่ยวข้องกับดีไซน์ ให้เรียก `ux-ui-designer` หากเป็นงานโค้ดหน้าบ้าน ให้เรียก `frontend-lead` หากมีการแก้ไขตารางฐานข้อมูล หรือเพิ่มฟิลด์ใน Prisma Schema ต้องโยนงานให้ `database-architect` อย่าพยายามทำเองทุกอย่าง (เว้นแต่งานนั้นเล็กน้อยเกินกว่าจะตั้งวงคุย)
+> **RULE #1: อ่าน source จริงก่อนสั่งงาน**
+> ห้ามเดาชื่อ field, enum, route, type, table, component, token, หรือ API shape จากความน่าจะเป็น ต้องค้นหาและอ้างอิงจากไฟล์หรือเอกสารจริงก่อน
+
+> [!IMPORTANT]
+> **RULE #2: ใช้ specialist agent ให้ถูกงาน**
+> อย่าทำงานเฉพาะทางเองถ้ามี agent ที่รับผิดชอบชัดเจน ยกเว้นงานเล็กมาก, ไม่มีเครื่องมือ delegate พร้อมใช้, หรือ User สั่งให้ลงมือเอง

 > [!WARNING]
-> **RULE #2: ต้องอ่าน `SKILL.md` ของ Sub Agent เสมอ**
-> ทุกครั้งก่อนจ่ายงานให้ Sub Agent หรือตรวจสอบงานที่เสร็จ ต้องใช้คำสั่ง `view_file` เพื่อเปิดอ่าน `SKILL.md` ของ Sub Agent ตัวนั้นเพื่อย้ำเตือนข้อจำกัดในการทำงาน
-
- **RULE #3: ห้ามส่งโค้ดที่มีข้อผิดพลาดขึ้น Server**
-  ต้องตรวจสอบเสมอว่า Sub Agent ปฏิบัติตามกฎเรื่องโค้ด (เช่น ห้าม Hardcode โดเมน irelax, การใช้ Tailwind Class ที่ถูกต้อง)
- **RULE #4: รายงานความคืบหน้าให้ User เป็นระยะ**
-  ไม่หายเงียบไปนานๆ เมื่อสั่งงาน Sub Agent หรือรัน Task ยาวๆ ควรรายงานสถานะให้คุณกิตติศักดิ์ทราบ
-
-> [!CAUTION]
-> **RULE #5: ห้ามมักง่าย ทำทางลัด หรือเบี่ยงเบนเป้าหมายเด็ดขาด (No Shortcuts & No Bypassing)**
-> หาก User สั่งให้ทำงานผ่านเครื่องมือใด (เช่น สั่งให้ทดสอบการใช้ MCP Tool) **ต้องใช้เครื่องมือนั้นจริงๆ ตามที่ถูกออกแบบมาเท่านั้น** ห้ามมักง่ายเขียนสคริปต์ยิง API ตรงเพื่อเลี่ยงการใช้ Tool (Bypass), ห้ามคิดอ้อม และต้องโฟกัสที่เป้าหมายที่ User กำหนดไว้อย่างเคร่งครัด หาก Tool มีปัญหา ให้หาวิธีแก้ไขที่ต้นตอของ Tool ไม่ใช่หาทางลัดเพื่อทำงานให้เสร็จไปเฉยๆ
-
-> [!IMPORTANT]
-> **RULE #6: ห้ามคาดเดาเองเด็ดขาดเมื่อข้อมูลไม่เพียงพอ (Ask, Don't Guess)**
-> หากได้รับโจทย์แล้วรู้สึกว่ามีข้อมูล บริบท หรือ Requirements ไม่ครบถ้วนชัดเจน **ห้ามคิดไปเอง หรือเดาสุ่มเด็ดขาด** ให้หยุดทำงานนั้นทันที แล้วสอบถามข้อมูลเพิ่มเติมหรือขอคำชี้แจงจาก User ทันที เพื่อป้องกันการพัฒนาระบบไปผิดทาง
-
-> [!TIP]
-> **RULE #7: กระบวนการอัปเดต Taskboard (Taskboard Updates & Closures)**
-> หาก User สั่งให้ "อัปเดต Taskboard" หรือคำสั่งที่มีความหมายทำนองเดียวกัน ให้เข้าใจตรงกันว่า:
-> 1. คุณต้องสรุปผลงานที่ทำไปอย่างเข้าใจง่าย
-> 2. นำไปสร้างหรืออัปเดตเป็น Main Task ใหม่ตามความเหมาะสมผ่าน Taskboard MCP
-> 3. ทำการปิด (Complete) Task ที่เสร็จสิ้นแล้วผ่านเครื่องมือ Taskboard MCP ของโปรเจกต์ `homaroma` เสมอ
-
-> [!CAUTION]
-> **RULE #8: Anti-Bypass Mantra (บทสวดป้องกันการมักง่าย)**
-> ทุกครั้งก่อนที่คุณจะใช้เครื่องมือ `run_command` หรือ `write_to_file` เพื่อเขียนสคริปต์/คำสั่งใดๆ ที่เกี่ยวข้องกับการเชื่อมต่อ Database, ยิง API ตรง หรือเขียนโค้ดเพื่ออ้อมข้อจำกัดของระบบ คุณ **ต้อง** พิมพ์บทสวดเตือนสตินี้ออกมาก่อนเสมอ:
-> `[ANTI-BYPASS MANTRA]: ฉันกำลังจะเขียนสคริปต์หรือรันคำสั่ง นี่คือการพยายามสร้างทางลัดเพื่อหลบเลี่ยงการใช้ MCP Tool ที่ถูกต้องใช่หรือไม่? ถ้าใช่ ฉันต้องลบทิ้งและหยุดการกระทำทันที!`
-> ห้ามรันคำสั่งเด็ดขาดหากพบว่ามันคือการ Bypass เพื่อเลี่ยงปัญหา
+> **RULE #3: ห้าม bypass process หรือ tool**
+> ถ้า User สั่งให้ใช้ tool, workflow, หรือ process เฉพาะ ต้องใช้ตามนั้นจริง หาก tool มีปัญหาให้ report และแก้ที่ต้นเหตุ ไม่สร้างทางลัดที่ทำให้ผลลัพธ์ดูเหมือนผ่าน

 > [!WARNING]
-> **RULE #9: System Halt Trigger (กฎการหยุดฉุกเฉิน)**
-> หากคุณพยายามเรียกใช้ MCP Tool แล้วพบว่าผลลัพธ์ตีกลับมาเป็นว่างเปล่า (`[]`) หรือเกิด Error ที่ผิดปกติ (โดยเฉพาะหลังจากเพิ่งแก้ไขโค้ด MCP Server) **ห้ามคิดพยายามแก้ปัญหาด้วยการสร้างทางลัดหรือรันสคริปต์แก้ไขเด็ดขาด!** ให้คุณหยุดทำงานทันที และพิมพ์คำสั่ง **`[SYSTEM HALT: REQUIRE MCP RESTART]`** ลงในคำตอบ เพื่อแจ้งให้ User ทราบทันทีว่ากระบวนการ MCP Server ค้างอยู่และต้องการการรีสตาร์ทเพื่อโหลด Schema ใหม่
+> **RULE #4: ห้ามส่งงานที่ยังมี risk สำคัญ**
+> ถ้าพบ bug, failing test, type error, contract mismatch, data loss risk, security risk, or production regression ต้องแจ้งก่อนส่งมอบ

-> [!IMPORTANT]
-> **RULE #10: ห้ามเขียนหรือแก้ไขโค้ดเองเด็ดขาด (Strict Code Delegation)**
-> หากมีงานที่เกี่ยวข้องกับการเขียน แก้ไข หรือลบโค้ด ห้ามคุณเข้าไปยุ่งกับโค้ดด้วยตัวเองเด็ดขาด! คุณต้องมีหน้าที่เพียงวางแผนและเรียกใช้ (Invoke) Sub Agent ที่ตรงสายงาน (เช่น `frontend-lead` หรือ `backend-mcp-lead`) ให้ทำงานแทนเสมอ หน้าที่ของคุณคือการจ่ายงานและตรวจสอบความเรียบร้อยของผลลัพธ์เท่านั้น
-
-> [!IMPORTANT]
-> **RULE #11: Read-before-Write Discipline (ตรวจสอบก่อนสั่งงานเสมอ ป้องกันอาการหลอน)**
-> หากต้องสั่งงาน Sub Agent โดยอ้างอิงถึง รายชื่อตัวแปร, โครงสร้างข้อมูล, Types, หรือชื่อฟิลด์ต่างๆ (เช่น ชื่อ Section Type) **ห้ามใช้ความน่าจะเป็น ห้ามเดา หรือสร้างชื่อสมมติขึ้นมาเองเด็ดขาด (No Hallucination)**
-> คุณ **ต้อง** ใช้เครื่องมือ `view_file` หรือ `grep_search` เพื่อเปิดดูไฟล์ต้นฉบับ (เช่น `schema.prisma` หรือ `index.ts`) **เพื่อดึงค่าจริงๆ มาใช้งาน 100% เสมอ** ก่อนที่จะร่างคำสั่งให้ Sub Agent นำไปทำงานต่อ
+- **RULE #5: Progress ต้องไม่เงียบ**
+  เมื่องานยาวหรือมีหลายขั้น ให้รายงานสถานะเป็นระยะพร้อมสิ่งที่พบและขั้นถัดไป
+- **RULE #6: Review gate ต้องสัมพันธ์กับความเสี่ยง**
+  งาน frontend ที่มี logic/API/type risk ควรให้ `frontend-code-auditor` review ก่อนส่งมอบ งาน release flow ควรให้ `qa-product-auditor` ตรวจ
+- **RULE #7: Task update ต้องมีสาระ**
+  เมื่ออัปเดต task system ให้สรุป outcome, files/areas changed, verification, risks, blockers, and next action ไม่ใช่แค่บอกว่าเสร็จแล้ว

 ---

-## 🔄 Task Delegation Workflow (ขั้นตอนการทำงาน)
+## Anti-Bypass Discipline
+ก่อนใช้คำสั่ง, script, direct API call, database operation, หรือ manual workaround เพื่อข้าม process ให้หยุดและถามตัวเอง:

-```mermaid
-graph TD
-    A[รับงานจาก User] --> B[เปิดอ่าน Taskboard หรือ Requirement]
-    B --> C[ตรวจสอบข้อมูลให้ชัดเจนด้วยคำสั่งค้นหา/อ่านไฟล์ (Read-before-Write)]
-    C --> D[สร้าง Implementation Plan]
-    D --> E[เรียกใช้งาน Sub-Agent]
-    E --> F[รอผลลัพธ์และทำ QA Code Review]
-    F --> G[สรุปรายงานความคืบหน้าให้ User]
+```text
+[ANTI-BYPASS CHECK]: สิ่งที่กำลังจะทำคือการหลบเลี่ยง tool, workflow, source of truth, หรือข้อจำกัดที่ทีมตั้งไว้หรือไม่? ถ้าใช่ ให้หยุด รายงานข้อจำกัด และขอการตัดสินใจจากผู้รับผิดชอบ
 ```

-1. **Analyze:** ทำความเข้าใจ Requirement หรือ Task (ถ้ามี)
-2. **Verify Truth:** ใช้คำสั่งสืบค้นเพื่อหาค่าตัวแปรจริง ห้ามเดามั่ว (RULE #11)
-3. **Plan:** สร้างแผนงานใน `implementation_plan.md` และรอ Approval
-4. **Delegate:** สั่งงานผ่าน `invoke_subagent` พร้อมแนบบทบาทจาก `SKILL.md` ของคนรับงาน
-5. **Review & Verify:** เมื่อ Sub Agent ส่งงานคืน ตรวจความเรียบร้อยของโค้ดให้ครบถ้วนตามแผนงาน
-6. **Update Task & Report:** หากเสร็จสมบูรณ์ ให้ไปอัปเดต Taskboard ให้เป็น `COMPLETED` แล้วรายงานผู้ใช้งาน
+ห้ามใช้ workaround เพื่อซ่อนปัญหาต่อไปนี้:
+- tool หรือ MCP ทำงานผิดปกติ
+- API contract ไม่ตรง
+- type/schema ไม่ตรงกับข้อมูลจริง
+- requirement ขัดกันเอง
+- process ต้องการ approval แต่ยังไม่ได้รับ
+
+---
+
+## Delegation Workflow
+1. **Analyze:** ทำความเข้าใจ requirement, context, constraints, and expected outcome
+2. **Verify Truth:** อ่านไฟล์, task, schema, API contract, or docs ที่เกี่ยวข้องก่อนสรุป assumptions
+3. **Plan:** เลือก short plan หรือ implementation plan ตาม risk
+4. **Route:** เลือก agent ตาม Agent Routing Guide และระบุ scope, files, constraints, and acceptance criteria
+5. **Review:** ตรวจผลลัพธ์ตาม risk และเรียก reviewer agent เมื่อจำเป็น
+6. **Escalate:** ถ้ามี blocker หรือ cross-team issue ให้สรุปปัญหา, impact, options, and owner ที่ต้องตัดสินใจ
+7. **Report:** ส่งมอบด้วย summary, verification, risk, and next action
+
+---
+
+## Verification Checklist
+- Requirement ถูกตีความตรงกับ User หรือ task
+- Source of truth ถูกอ่านแล้ว ไม่ได้เดา
+- Agent ที่เลือกตรงกับประเภทงาน
+- มี acceptance criteria หรือ expected outcome ชัดเจน
+- มีการตรวจ test/type/lint/UI/API ตามความเสี่ยงของงาน
+- มี review gate สำหรับงานที่เสี่ยง
+- ไม่มี workaround ที่ซ่อน root cause
+- มีรายงาน blocker และ risk ที่ยังเหลือ
+
+---
+
+## Handoff Format
+เมื่อส่งมอบงาน ให้สรุป:
+- ทำอะไรไปแล้ว
+- ใครหรือ agent ไหนทำส่วนใด
+- ตรวจสอบอะไรแล้ว
+- มีไฟล์หรือพื้นที่ใดถูกกระทบ
+- มี risk, blocker, หรือ decision ที่ต้องตามต่อไหม
+- task หรือ owner ถัดไปคือใคร
+
+---
+
+## System Halt Policy
+หาก tool, MCP, task system, หรือ environment ให้ผลลัพธ์ผิดปกติซ้ำ ๆ เช่น error, empty response, stale schema, หรือข้อมูลไม่ตรงกับ source of truth:
+- หยุดทำ workaround ที่ข้ามระบบ
+- รายงานอาการและขั้นตอนที่ลองแล้ว
+- ระบุว่าต้องการ restart, permission, owner decision, or tool fix หรือไม่
+- รอการตัดสินใจถ้าการเดินหน้าต่อมี risk ต่อข้อมูลหรือ production
@@ -0,0 +1,37 @@
+# Agent Bootstrap
+
+When working in this repository, read this file first.
+
+## Start Here
+1. Read `.agents/skills/orchestrator/SKILL.md` before planning or editing.
+2. Use the orchestrator routing rules to choose any specialist skill needed for the task.
+3. Read the selected specialist `SKILL.md` before making decisions, writing code, or reviewing output.
+
+## Default Skill Routing
+- Project planning, coordination, delegation, or handoff: `.agents/skills/orchestrator/SKILL.md`
+- React SPA implementation: `.agents/skills/frontend-lead/SKILL.md`
+- React SPA review only: `.agents/skills/frontend-code-auditor/SKILL.md`
+- Backend, API, server, or MCP tools: `.agents/skills/backend-mcp-lead/SKILL.md`
+- Database, Prisma, migrations, schema, indexes, or constraints: `.agents/skills/database-architect/SKILL.md`
+- CMS architecture, page builder, or content model: `.agents/skills/cms-architect/SKILL.md`
+- CMS content management or MCP endpoint testing without code edits: `.agents/skills/cms-content-manager/SKILL.md`
+- Product scope, roadmap, priority, or product gaps: `.agents/skills/product-manager/SKILL.md`
+- UX/UI design, interaction, layout, or visual direction: `.agents/skills/ux-ui-designer/SKILL.md`
+- QA, user flow, regression, empty/error states, or release readiness: `.agents/skills/qa-product-auditor/SKILL.md`
+- Brand, SEO, positioning, or marketing copy: `.agents/skills/brand-strategist/SKILL.md`
+- Design system, color contrast, readability, or token compliance: `.agents/skills/design-system-auditor/SKILL.md`
+
+## Operating Rules
+- Do not guess field names, API contracts, routes, schema, design tokens, or component names.
+- Read source files, docs, schema, or task context before planning or editing.
+- Do not use silent workarounds to hide contract, type, tool, or schema problems.
+- Escalate blockers when the correct fix belongs to another owner, team, tool, or system layer.
+- For risky frontend work, use `frontend-code-auditor` as a review gate before handoff.
+
+## Handoff Expectations
+Every final handoff should summarize:
+- what changed
+- what was verified
+- what files or areas were affected
+- remaining risks or blockers
+- next owner or decision needed
@@ -9,11 +9,15 @@ import axios from "axios";
 import FormData from "form-data";
 import { PAGE_SECTION_TYPES } from "@homaroma/types";

-function getChildrenArray(node: any): any[] {
+function getChildrenArray(node: any, isRoot?: boolean): any[] {
  if (Array.isArray(node.columns)) return node.columns;
  if (Array.isArray(node.links)) return node.links;
  if (Array.isArray(node.items)) return node.items;
  if (Array.isArray(node.children)) return node.children;
+  if (isRoot) {
+    node.columns = [];
+    return node.columns;
+  }
  node.links = [];
  return node.links;
 }
@@ -956,7 +960,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
          if (!found) {
            throw new Error(`Parent node ${parentId} not found`);
          }
-          const children = getChildrenArray(found.node);
+          const children = getChildrenArray(found.node, found.parent === null);
          children.push(nodeData);
        }
        
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import type { MegaMenuPayload } from '../store/menuStore';
 import { useTranslation } from 'react-i18next';
@@ -15,57 +15,97 @@ const getLocalizedText = (textObj: Record<string, string> | string | undefined,

 export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
  const [openId, setOpenId] = useState<string | null>(null);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const { i18n } = useTranslation();
  const lang = i18n.language ? i18n.language.substring(0, 2) : 'en';

+  // Open: cancel any pending close, then open this menu
+  const handleOpen = (id: string) => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    setOpenId(id);
+  };
+
+  // Close: wait 150ms — if mouse enters the dropdown in time, the close is cancelled
+  const handleClose = () => {
+    closeTimer.current = setTimeout(() => setOpenId(null), 150);
+  };
+
  return (
    <div className="hidden md:flex space-x-7 text-sm font-medium tracking-wide uppercase">
-      {items.map((item) => (
-        <div 
-          key={item.id} 
-          className="relative group"
-          onMouseEnter={() => setOpenId(item.id)}
-          onMouseLeave={() => setOpenId(null)}
-        >
-          <Link 
-            to={item.url || '#'} 
-            className="flex items-center gap-1 text-spa-stone hover:text-spa-forest transition-colors py-2"
+      {items.map((item) => {
+        const uniqueId = item.nodeId || item.id || `menu-${item.url}`;
+        const isOpen = openId === uniqueId;
+        const hasColumns = item.columns && item.columns.length > 0;
+
+        return (
+          <div
+            key={uniqueId}
+            className="relative"
+            onMouseEnter={() => handleOpen(uniqueId)}
+            onMouseLeave={handleClose}
          >
-            {getLocalizedText(item.label, lang)}
-            {item.columns && item.columns.length > 0 && (
-              <svg className="w-3 h-3 opacity-50 transition-transform duration-300 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-            )}
-          </Link>
-          
-          {item.columns && item.columns.length > 0 && openId === item.id && (
-            <div className="absolute top-full left-1/2 -translate-x-1/2 pt-4 w-auto min-w-[320px] opacity-100 pointer-events-auto transition-all duration-300 z-50">
-              <div className="bg-white/95 backdrop-blur-xl border border-black/5 rounded-xl overflow-hidden shadow-2xl p-5 flex gap-8">
-                {item.columns.map((col, idx) => (
-                  <div key={idx} className="flex-1 min-w-[140px]">
-                    <h4 className="text-[10px] uppercase tracking-widest text-spa-stone/60 font-semibold mb-3">
-                      {getLocalizedText(col.title, lang)}
-                    </h4>
-                    <ul className="space-y-1">
-                      {col.links.map((link, lIdx) => (
-                        <li key={lIdx}>
-                          <Link 
-                            to={link.url || '#'}
-                            className="text-xs uppercase tracking-widest text-spa-stone hover:text-spa-forest hover:bg-spa-sage px-3 py-2 rounded-lg block transition-colors"
-                          >
-                            {getLocalizedText(link.label, lang)}
-                          </Link>
-                        </li>
-                      ))}
-                    </ul>
+            {/* Nav trigger */}
+            <Link
+              to={item.url || '#'}
+              className={`flex items-center gap-1 transition-colors py-2 border-b ${
+                isOpen
+                  ? 'text-spa-forest border-spa-forest'
+                  : 'text-spa-stone border-transparent hover:text-spa-forest hover:border-spa-forest'
+              }`}
+            >
+              {getLocalizedText(item.label, lang)}
+              {hasColumns && (
+                <svg
+                  className={`w-3 h-3 opacity-50 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              )}
+            </Link>
+
+            {/* Dropdown panel — fixed, full-width.
+                It handles its own onMouseEnter/Leave so the delay timer is
+                cancelled the moment the mouse enters the panel. */}
+            {hasColumns && (
+              <div
+                className={`fixed left-0 right-0 z-50 transition-opacity duration-200 ${
+                  isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
+                }`}
+                style={{ top: 'var(--navbar-bottom, 56px)' }}
+                onMouseEnter={() => handleOpen(uniqueId)}
+                onMouseLeave={handleClose}
+              >
+                <div className="w-full bg-[#F9F8F5] border-b border-black/5 shadow-sm cursor-default">
+                  <div className="flex justify-center gap-16 py-10 max-w-7xl mx-auto px-6">
+                    {item.columns!.map((col, idx) => (
+                      <div key={idx} className="flex flex-col min-w-[140px] text-left">
+                        <h4 className="text-[10px] uppercase tracking-widest text-spa-stone font-bold mb-4">
+                          {getLocalizedText(col.title, lang)}
+                        </h4>
+                        <ul className="space-y-3">
+                          {col.links.map((link, lIdx) => (
+                            <li key={lIdx}>
+                              <Link
+                                to={link.url || '#'}
+                                className="text-sm font-normal normal-case tracking-normal text-spa-stone hover:text-spa-forest hover:opacity-80 block transition-colors"
+                              >
+                                {getLocalizedText(link.label, lang)}
+                              </Link>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ))}
                  </div>
-                ))}
+                </div>
              </div>
-            </div>
-          )}
-        </div>
-      ))}
+            )}
+          </div>
+        );
+      })}
    </div>
  );
 }
@@ -1,5 +1,5 @@
 import { Link, useNavigate } from 'react-router-dom'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { type Category } from '../types'
 import { ShoppingBag, Menu as MenuIcon, X, Heart, Globe, Check } from 'lucide-react'
 import { useCartStore } from '../store/cartStore'
@@ -35,6 +35,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
  const { t, i18n } = useTranslation()
  
  const { megaMenu, fetchMegaMenu } = useMenuStore()
+  const navRef = useRef<HTMLElement>(null)

  const LANGUAGES = [
    { code: 'th', label: 'ไทย', short: 'TH' },
@@ -73,6 +74,23 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
    }
  }, [fetchMegaMenu])

+  // Keep --navbar-bottom in sync so the fixed mega-menu dropdown sits flush below the navbar
+  useEffect(() => {
+    const updateNavBottom = () => {
+      if (navRef.current) {
+        const bottom = navRef.current.getBoundingClientRect().bottom
+        document.documentElement.style.setProperty('--navbar-bottom', `${bottom}px`)
+      }
+    }
+    updateNavBottom()
+    window.addEventListener('scroll', updateNavBottom, { passive: true })
+    window.addEventListener('resize', updateNavBottom)
+    return () => {
+      window.removeEventListener('scroll', updateNavBottom)
+      window.removeEventListener('resize', updateNavBottom)
+    }
+  }, [])
+
  useEffect(() => { setMobileOpen(false) }, [navigate])
  useEffect(() => {
    document.body.style.overflow = (searchOpen || mobileOpen || langSheetOpen) ? 'hidden' : ''
@@ -98,131 +116,145 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
  return (
    <>
      <nav
-        className={`fixed ${finalTopClassName} w-full z-50 transition-all duration-300 px-4 md:px-6 py-3.5 md:py-4 flex justify-between items-center bg-white/80 backdrop-blur-xl border-b border-black/5 ${
+        ref={navRef}
+        className={`fixed ${finalTopClassName} w-full z-50 transition-all duration-300 border-b border-black/5 ${
          scrolled ? 'shadow-lg shadow-black/5' : 'shadow-none'
-        }`}
+        } bg-white/80 backdrop-blur-xl md:bg-[#F9F8F5] md:backdrop-blur-none px-4 md:px-6 py-3.5 md:py-4`}
      >
-        <Link to="/" onClick={() => setMobileOpen(false)} className="text-xl md:text-2xl font-bold tracking-widest text-spa-forest uppercase italic shrink-0">
-          HomAroma <span className="hidden md:inline text-spa-stone text-xs md:text-sm not-italic font-light ml-1">Essential</span>
-        </Link>
+        {/* Single-row layout: Logo (left) | Menu (center, desktop) | Actions (right) */}
+        <div className="w-full flex items-center justify-between gap-4">

-        {isDesktop && <DesktopMegaMenu items={megaMenu} />}
-
-        {/* ── ACTIONS ── */}
-        <div className="flex items-center gap-1.5 md:gap-3">
-          <button
-            onClick={() => { setSearchOpen(true); setMobileOpen(false); }}
-            className="p-1.5 md:p-2.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
-            aria-label="Search"
-          >
-            <svg className="w-4 h-4 md:w-4 md:h-4 group-hover:text-spa-forest transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-          </button>
-          
-          <Link 
-            to="/wishlist"
-            onClick={() => setMobileOpen(false)}
-            className="relative p-1.5 md:p-2.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
-            aria-label="Wishlist"
-          >
-            <Heart className="w-4 h-4 group-hover:text-rose-500 transition-colors" />
-            {wishlistCount > 0 && (
-              <span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
-                {wishlistCount}
-              </span>
-            )}
-          </Link>
-
-          <button 
-            onClick={() => { toggleCart(true); setMobileOpen(false); }}
-            className="relative p-1.5 md:p-2.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
-            aria-label="Cart"
-          >
-            <ShoppingBag className="w-4 h-4 group-hover:text-spa-forest transition-colors" />
-            {cartCount > 0 && (
-              <span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
-                {cartCount}
-              </span>
-            )}
-          </button>
+          {/* Left: Logo */}
+          <div className="flex items-center shrink-0">
+            <Link to="/" onClick={() => setMobileOpen(false)} className="text-xl md:text-2xl font-bold tracking-widest text-spa-forest uppercase italic shrink-0">
+              HomAroma <span className="hidden md:inline text-spa-stone text-xs md:text-sm not-italic font-light ml-1">Essential</span>
+            </Link>
+          </div>

+          {/* Center: Desktop mega menu */}
          {isDesktop && (
-            <>
-              <div className="relative group flex items-center">
-                <button className="px-3 py-2 rounded-full text-[10px] font-bold transition-all text-spa-forest border border-spa-forest/30 hover:bg-spa-sage bg-white flex items-center gap-1.5 uppercase tracking-wider">
-                  <Globe className="w-3.5 h-3.5" strokeWidth={1.5} />
-                  {LANGUAGES.find(l => i18n.language.startsWith(l.code))?.short || 'TH'}
-                </button>
-                <div className="absolute top-full right-0 pt-2 w-36 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300">
-                  <div className="bg-white/95 backdrop-blur-xl border border-spa-stone/10 rounded-xl overflow-hidden shadow-2xl p-1.5 space-y-0.5">
-                    {LANGUAGES.map(lang => {
-                      const isActive = i18n.language.startsWith(lang.code)
-                      return (
-                        <button
-                          key={lang.code}
-                          onClick={() => changeLanguage(lang.code)}
-                          className={`w-full flex items-center justify-between px-3 py-2.5 text-xs rounded-lg transition-colors font-medium ${isActive ? 'text-spa-forest bg-spa-sage/60 font-bold' : 'text-spa-stone hover:bg-spa-light hover:text-spa-forest'}`}
-                        >
-                          <span>{lang.label}</span>
-                          {isActive && <Check className="w-3.5 h-3.5" />}
-                        </button>
-                      )
-                    })}
-                  </div>
-                </div>
-              </div>
+            <div className="flex-1 flex justify-center">
+              <DesktopMegaMenu items={megaMenu} />
+            </div>
+          )}

-              {customer ? (
-                <div className="relative group flex items-center ml-1">
-                  <Link to="/profile">
-                    <img 
-                      src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`} 
-                      alt="Profile" 
-                      className="w-9 h-9 rounded-full border-2 border-spa-forest/30 cursor-pointer object-cover animate-fade-in" 
-                    />
-                  </Link>
-                  <div className="absolute top-full right-0 pt-3 w-36 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300">
-                    <div className="bg-white/95 backdrop-blur-xl border border-spa-stone/10 rounded-xl overflow-hidden shadow-xl p-1">
-                      <div className="px-3 py-2 border-b border-spa-stone/10 mb-1">
-                        <p className="text-[10px] text-spa-stone/60 uppercase tracking-widest leading-tight truncate">{t('nav.signedInAs', 'Signed in as')}</p>
-                        <p className="text-xs text-spa-forest font-bold truncate">{customer.displayName}</p>
-                      </div>
-                      <Link 
-                        to="/profile" 
-                        className="block px-3 py-2 text-xs uppercase tracking-widest text-spa-stone hover:text-spa-forest hover:bg-spa-light rounded-lg transition-colors font-bold"
-                      >
-                        My Profile
-                      </Link>
-                      <button 
-                        onClick={logoutLiff} 
-                        className="w-full text-left px-3 py-2 text-xs uppercase tracking-widest text-rose-500 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors font-bold"
-                      >
-                        {t('nav.logout', 'Logout')}
-                      </button>
+          {/* Right: Actions */}
+          <div className="flex items-center gap-1.5 md:gap-2 shrink-0">
+            {/* Search — desktop & mobile */}
+            <button
+              onClick={() => { setSearchOpen(true); setMobileOpen(false); }}
+              className="p-1.5 md:p-2 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
+              aria-label="Search"
+            >
+              <svg className="w-4 h-4 group-hover:text-spa-forest transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            </button>
+
+            <Link
+              to="/wishlist"
+              onClick={() => setMobileOpen(false)}
+              className="relative p-1.5 md:p-2 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
+              aria-label="Wishlist"
+            >
+              <Heart className="w-4 h-4 group-hover:text-rose-500 transition-colors" />
+              {wishlistCount > 0 && (
+                <span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
+                  {wishlistCount}
+                </span>
+              )}
+            </Link>
+
+            <button
+              onClick={() => { toggleCart(true); setMobileOpen(false); }}
+              className="relative p-1.5 md:p-2 rounded-full text-spa-stone hover:bg-spa-sage transition-all group"
+              aria-label="Cart"
+            >
+              <ShoppingBag className="w-4 h-4 group-hover:text-spa-forest transition-colors" />
+              {cartCount > 0 && (
+                <span className="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
+                  {cartCount}
+                </span>
+              )}
+            </button>
+
+            {isDesktop && (
+              <>
+                <div className="relative group flex items-center">
+                  <button className="px-3 py-2 rounded-full text-[10px] font-bold transition-all text-spa-forest border border-spa-forest/30 hover:bg-spa-sage bg-white flex items-center gap-1.5 uppercase tracking-wider">
+                    <Globe className="w-3.5 h-3.5" strokeWidth={1.5} />
+                    {LANGUAGES.find(l => i18n.language.startsWith(l.code))?.short || 'TH'}
+                  </button>
+                  <div className="absolute top-full right-0 pt-2 w-36 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300">
+                    <div className="bg-white/95 backdrop-blur-xl border border-spa-stone/10 rounded-xl overflow-hidden shadow-2xl p-1.5 space-y-0.5">
+                      {LANGUAGES.map(lang => {
+                        const isActive = i18n.language.startsWith(lang.code)
+                        return (
+                          <button
+                            key={lang.code}
+                            onClick={() => changeLanguage(lang.code)}
+                            className={`w-full flex items-center justify-between px-3 py-2.5 text-xs rounded-lg transition-colors font-medium ${isActive ? 'text-spa-forest bg-spa-sage/60 font-bold' : 'text-spa-stone hover:bg-spa-light hover:text-spa-forest'}`}
+                          >
+                            <span>{lang.label}</span>
+                            {isActive && <Check className="w-3.5 h-3.5" />}
+                          </button>
+                        )
+                      })}
                    </div>
                  </div>
                </div>
-              ) : (
-                <button 
-                  onClick={loginLiff}
-                  className="ml-2 px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest bg-[#00B900] text-white hover:bg-[#009900] transition-all duration-300 shadow-sm"
-                >
-                  {t('nav.login', 'LINE Login')}
-                </button>
-              )}
-            </>
-          )}

-          {!isDesktop && (
-            <button
-              onClick={() => setMobileOpen(prev => !prev)}
-              className="p-1.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all"
-              aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
-            >
-              {mobileOpen ? <X className="w-5 h-5" /> : <MenuIcon className="w-5 h-5" />}
-            </button>
-          )}
+                {customer ? (
+                  <div className="relative group flex items-center ml-1">
+                    <Link to="/profile">
+                      <img
+                        src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`}
+                        alt="Profile"
+                        className="w-9 h-9 rounded-full border-2 border-spa-forest/30 cursor-pointer object-cover animate-fade-in"
+                      />
+                    </Link>
+                    <div className="absolute top-full right-0 pt-3 w-36 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300">
+                      <div className="bg-white/95 backdrop-blur-xl border border-spa-stone/10 rounded-xl overflow-hidden shadow-xl p-1">
+                        <div className="px-3 py-2 border-b border-spa-stone/10 mb-1">
+                          <p className="text-[10px] text-spa-stone/60 uppercase tracking-widest leading-tight truncate">{t('nav.signedInAs', 'Signed in as')}</p>
+                          <p className="text-xs text-spa-forest font-bold truncate">{customer.displayName}</p>
+                        </div>
+                        <Link
+                          to="/profile"
+                          className="block px-3 py-2 text-xs uppercase tracking-widest text-spa-stone hover:text-spa-forest hover:bg-spa-light rounded-lg transition-colors font-bold"
+                        >
+                          My Profile
+                        </Link>
+                        <button
+                          onClick={logoutLiff}
+                          className="w-full text-left px-3 py-2 text-xs uppercase tracking-widest text-rose-500 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors font-bold"
+                        >
+                          {t('nav.logout', 'Logout')}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <button
+                    onClick={loginLiff}
+                    className="ml-2 px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest bg-[#00B900] text-white hover:bg-[#009900] transition-all duration-300 shadow-sm"
+                  >
+                    {t('nav.login', 'LINE Login')}
+                  </button>
+                )}
+              </>
+            )}
+
+            {!isDesktop && (
+              <button
+                onClick={() => setMobileOpen(prev => !prev)}
+                className="p-1.5 rounded-full text-spa-stone hover:bg-spa-sage transition-all"
+                aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
+              >
+                {mobileOpen ? <X className="w-5 h-5" /> : <MenuIcon className="w-5 h-5" />}
+              </button>
+            )}
+          </div>
        </div>
      </nav>

@@ -13,7 +13,8 @@ export interface MenuColumn {
 }

 export interface MegaMenuPayload {
-  id: string;
+  id?: string;
+  nodeId?: string;
  label: Record<string, string>;
  url?: string;
  columns?: MenuColumn[];
@@ -1 +1,8 @@
-console.log('hello ts')
+const tree = [{ nodeId: "root1" }, { nodeId: "root2", links: [] }];
+function findNodeAndParent(tree: any[], targetId: string, parent: any = null, list: any[] = tree): any {
+  for (let i = 0; i < tree.length; i++) {
+    if (tree[i].nodeId === targetId) return { node: tree[i], parent, list, index: i };
+  }
+  return null;
+}
+console.log(findNodeAndParent(tree, "root1").parent === null);