@warnyin/agents 0.17.0 → 0.18.0

package/src/.warnyin/template/stages/[topic]/tasks/[task-name]/spec.md

@@ -1,36 +1,36 @@
-# Spec — <ชื่อ task>
-
-> Output ของ DESIGN stage · playbook: `.warnyin/workflow/stages/design.md`
-> spec เฉพาะของ task นี้ — **ใส่เฉพาะหัวข้อที่เกี่ยวข้องกับชนิดของ task**
-
-## 1. ชนิดของ task
-`API` / `UX-UI` / `data` / `logic` / `infra` / ...
-
----
-
-## 2. API SPEC (ถ้าเป็น API — ตามมาตรฐาน)
-| | |
-|---|---|
-| Endpoint | `METHOD /path` |
-| Auth | |
-| Request | schema / body / params |
-| Response | schema + ตัวอย่าง |
-| Status / Error | 200 / 4xx / 5xx + error shape |
-
-## 3. UX/UI SPEC (ถ้าเป็นงาน UI)
-- Wireframe / Figma ref: `<ลิงก์ ถ้ามี>`
-- States: default / loading / empty / error / success
-- Responsive / accessibility:
-
-## 4. Data-flow
-> ข้อมูลไหลจากไหน → ผ่านอะไร → ไปไหน
-
-## 5. User-flow
-> ผู้ใช้เดินผ่านขั้นตอนไหนบ้าง
-
-## 6. Persona
-> task นี้ทำเพื่อใคร
-
-## 7. Test-flow
-> จะทดสอบ/ยืนยันความถูกต้องยังไง (เคสที่ต้องผ่าน, edge case)
-- [ ]
+# Spec — <ชื่อ task>
+
+> Output ของ DESIGN stage · playbook: `.warnyin/workflow/stages/design.md`
+> spec เฉพาะของ task นี้ — **ใส่เฉพาะหัวข้อที่เกี่ยวข้องกับชนิดของ task**
+
+## 1. ชนิดของ task
+`API` / `UX-UI` / `data` / `logic` / `infra` / ...
+
+---
+
+## 2. API SPEC (ถ้าเป็น API — ตามมาตรฐาน)
+| | |
+|---|---|
+| Endpoint | `METHOD /path` |
+| Auth | |
+| Request | schema / body / params |
+| Response | schema + ตัวอย่าง |
+| Status / Error | 200 / 4xx / 5xx + error shape |
+
+## 3. UX/UI SPEC (ถ้าเป็นงาน UI)
+- Wireframe / Figma ref: `<ลิงก์ ถ้ามี>`
+- States: default / loading / empty / error / success
+- Responsive / accessibility:
+
+## 4. Data-flow
+> ข้อมูลไหลจากไหน → ผ่านอะไร → ไปไหน
+
+## 5. User-flow
+> ผู้ใช้เดินผ่านขั้นตอนไหนบ้าง
+
+## 6. Persona
+> task นี้ทำเพื่อใคร
+
+## 7. Test-flow
+> จะทดสอบ/ยืนยันความถูกต้องยังไง (เคสที่ต้องผ่าน, edge case)
+- [ ]

package/src/.warnyin/template/stages/[topic]/tasks/[task-name]/standard.md

@@ -1,21 +1,21 @@
-# Standard — <ชื่อ task>
-
-> Output ของ DESIGN stage · playbook: `.warnyin/workflow/stages/design.md`
-> pattern การเขียนโค้ด / shared component ที่ task นี้ต้องยึด
-> **อิงจาก** `docs/techstack/<component>/standard.md` — เพิ่มเติมเฉพาะ task ได้
-
-## 1. Standard กลางที่ยึด (จาก techstack)
-> อ้างอิง `docs/techstack/<component>/standard.md` — ข้อไหนเกี่ยวกับ task นี้
--
-
-## 2. Pattern การเขียนโค้ดของ task นี้
-- โครงสร้าง/naming:
-- error handling:
-- การจัดการ state/data:
-
-## 3. Shared component / utility ที่ต้องใช้ (อย่าเขียนซ้ำ)
-- component/hook/helper ที่มีอยู่แล้ว:
-
-## 4. เพิ่มเติมเฉพาะ task (ถ้ามี)
-> pattern ใหม่ที่ task นี้แนะนำ — ถ้าควรเป็นมาตรฐานกลาง ให้ note ใน `rule.md` (รอ SHIP อัปเดต standard กลาง)
--
+# Standard — <ชื่อ task>
+
+> Output ของ DESIGN stage · playbook: `.warnyin/workflow/stages/design.md`
+> pattern การเขียนโค้ด / shared component ที่ task นี้ต้องยึด
+> **อิงจาก** `docs/techstack/<component>/standard.md` — เพิ่มเติมเฉพาะ task ได้
+
+## 1. Standard กลางที่ยึด (จาก techstack)
+> อ้างอิง `docs/techstack/<component>/standard.md` — ข้อไหนเกี่ยวกับ task นี้
+-
+
+## 2. Pattern การเขียนโค้ดของ task นี้
+- โครงสร้าง/naming:
+- error handling:
+- การจัดการ state/data:
+
+## 3. Shared component / utility ที่ต้องใช้ (อย่าเขียนซ้ำ)
+- component/hook/helper ที่มีอยู่แล้ว:
+
+## 4. เพิ่มเติมเฉพาะ task (ถ้ามี)
+> pattern ใหม่ที่ task นี้แนะนำ — ถ้าควรเป็นมาตรฐานกลาง ให้ note ใน `rule.md` (รอ SHIP อัปเดต standard กลาง)
+-

package/src/.warnyin/template/stages/[topic]/tasks/[task-name]/task.md

@@ -1,40 +1,40 @@
-# Task — <ชื่อ task>
-
-> Output ของ DESIGN stage · playbook: `.warnyin/workflow/stages/design.md`
-> หน่วยที่ **โยนให้ sub-agent ทำใน BUILD ได้** — self-contained แต่เชื่อมกับ task อื่นผ่าน dependency
-
-| | |
-|---|---|
-| **Task** | `<kebab-case>` |
-| **Slice อ้างอิง** | `design.md` slice #__ |
-| **Component** | `admin-console` / `api-service` / ... |
-| **Model tier** | `cheap` / `balanced` / `deepest` _(optional; ไม่ระบุ = `balanced` — ดู `contexts/README.md` §"Model tier")_ |
-| **สถานะ** | `รอ build` / `กำลังทำ` / `เสร็จ` |
-
-## 1. เป้าหมายของ task (vertical slice)
-> task นี้ส่งมอบคุณค่า end-to-end อะไร
-
-## 2. Dependency (เชื่อมต่อกับ task อื่น)
-- ต้องทำหลัง: `tasks/<...>` (เพราะ ...)
-- ปลดล็อกให้: `tasks/<...>`
-- ส่ง output อะไรต่อให้ task ถัดไป:
-
-## 3. Sub-tasks (แตกย่อยถ้าซับซ้อน)
-> sub-task ต้องเชื่อมต่อกัน — ระบุลำดับ/สิ่งที่ส่งต่อกัน
-
-- [ ] 1. <sub-task> — _ผลลัพธ์:_
-- [ ] 2. <sub-task> — _ขึ้นกับ 1:_
-- [ ] 3. <sub-task>
-
-## 4. ขอบเขตไฟล์/โค้ดที่จะแตะ
-- ไฟล์/โมดูล:
-
-## 5. Acceptance criteria (เกณฑ์ว่า task เสร็จ)
-- [ ]
-- [ ] ผ่าน test ตาม `spec.md` (test-flow)
-- [ ] ทำตาม `rule.md` และ `standard.md`
-
-## 6. อ้างอิงในโฟลเดอร์ task นี้
-- Spec: `./spec.md`
-- Standard (pattern โค้ด): `./standard.md`
-- Rule ที่ต้อง follow: `./rule.md`
+# Task — <ชื่อ task>
+
+> Output ของ DESIGN stage · playbook: `.warnyin/workflow/stages/design.md`
+> หน่วยที่ **โยนให้ sub-agent ทำใน BUILD ได้** — self-contained แต่เชื่อมกับ task อื่นผ่าน dependency
+
+| | |
+|---|---|
+| **Task** | `<kebab-case>` |
+| **Slice อ้างอิง** | `design.md` slice #__ |
+| **Component** | `admin-console` / `api-service` / ... |
+| **Model tier** | `cheap` / `balanced` / `deepest` _(optional; ไม่ระบุ = `balanced` — ดู `contexts/README.md` §"Model tier")_ |
+| **สถานะ** | `รอ build` / `กำลังทำ` / `เสร็จ` |
+
+## 1. เป้าหมายของ task (vertical slice)
+> task นี้ส่งมอบคุณค่า end-to-end อะไร
+
+## 2. Dependency (เชื่อมต่อกับ task อื่น)
+- ต้องทำหลัง: `tasks/<...>` (เพราะ ...)
+- ปลดล็อกให้: `tasks/<...>`
+- ส่ง output อะไรต่อให้ task ถัดไป:
+
+## 3. Sub-tasks (แตกย่อยถ้าซับซ้อน)
+> sub-task ต้องเชื่อมต่อกัน — ระบุลำดับ/สิ่งที่ส่งต่อกัน
+
+- [ ] 1. <sub-task> — _ผลลัพธ์:_
+- [ ] 2. <sub-task> — _ขึ้นกับ 1:_
+- [ ] 3. <sub-task>
+
+## 4. ขอบเขตไฟล์/โค้ดที่จะแตะ
+- ไฟล์/โมดูล:
+
+## 5. Acceptance criteria (เกณฑ์ว่า task เสร็จ)
+- [ ]
+- [ ] ผ่าน test ตาม `spec.md` (test-flow)
+- [ ] ทำตาม `rule.md` และ `standard.md`
+
+## 6. อ้างอิงในโฟลเดอร์ task นี้
+- Spec: `./spec.md`
+- Standard (pattern โค้ด): `./standard.md`
+- Rule ที่ต้อง follow: `./rule.md`

package/src/.warnyin/template/stages/[topic]/test.md

@@ -1,46 +1,46 @@
-# Test Plan — <ชื่อ change>
-
-> Output ของ VERIFY stage · playbook: `.warnyin/workflow/stages/verify.md`
-> แผน/วิธีเทสของ topic นี้ — ตอน **SHIP** จะ merge เข้า `docs/techstack/<component>/test.md`
-> อิง guideline จาก `docs/techstack/<component>/test.md` (ถ้าไม่มี = เสนอวิธีใหม่ที่นี่)
-
-| | |
-|---|---|
-| **Slug** | `<kebab-case>` |
-| **Component** | `api-service` / `admin-console` |
-| **จุดประสงค์ที่ต้อง verify** | (สรุปจาก spec/tasks) |
-
-## 1. ขอบเขตการเทส (ตามจุดประสงค์ topic)
-- สิ่งที่ต้องยืนยันว่าทำงานถูก:
-
-## 2. ชนิดการเทส
-- [ ] Functional (ตาม test-flow ใน `tasks/*/spec.md`)
-- [ ] E2E smoke — เครื่องมือ: `playwright-cli` (ถ้าเป็น FE)
-- [ ] Integration / API
-- [ ] UX/UI verify (ถ้าเป็น FE)
-- [ ] อื่นๆ:
-
-## 3. Local env ที่ต้องรัน (จาก `docs/infra.md`)
-| Service | คำสั่งรัน | port / หมายเหตุ |
-|---|---|---|
-| | | |
-
-## 4. Test cases
-| # | สถานการณ์ (อิงจุดประสงค์) | ขั้นตอน | ผลที่คาดหวัง |
-|---|---|---|---|
-| 1 | | | |
-
-## 5. E2E smoke (FE)
-- flow ที่ smoke:
-- คำสั่ง playwright-cli:
-
-## 6. UX/UI checklist (FE)
-- [ ] layout ตรงตาม spec/wireframe
-- [ ] states: loading / empty / error / success
-- [ ] responsive
-- [ ] interaction / user-flow ลื่นไหล
-
-## 7. วิธีรันเทส (reproducible)
-```
-<คำสั่ง / ขั้นตอน>
-```
+# Test Plan — <ชื่อ change>
+
+> Output ของ VERIFY stage · playbook: `.warnyin/workflow/stages/verify.md`
+> แผน/วิธีเทสของ topic นี้ — ตอน **SHIP** จะ merge เข้า `docs/techstack/<component>/test.md`
+> อิง guideline จาก `docs/techstack/<component>/test.md` (ถ้าไม่มี = เสนอวิธีใหม่ที่นี่)
+
+| | |
+|---|---|
+| **Slug** | `<kebab-case>` |
+| **Component** | `api-service` / `admin-console` |
+| **จุดประสงค์ที่ต้อง verify** | (สรุปจาก spec/tasks) |
+
+## 1. ขอบเขตการเทส (ตามจุดประสงค์ topic)
+- สิ่งที่ต้องยืนยันว่าทำงานถูก:
+
+## 2. ชนิดการเทส
+- [ ] Functional (ตาม test-flow ใน `tasks/*/spec.md`)
+- [ ] E2E smoke — เครื่องมือ: `playwright-cli` (ถ้าเป็น FE)
+- [ ] Integration / API
+- [ ] UX/UI verify (ถ้าเป็น FE)
+- [ ] อื่นๆ:
+
+## 3. Local env ที่ต้องรัน (จาก `docs/infra.md`)
+| Service | คำสั่งรัน | port / หมายเหตุ |
+|---|---|---|
+| | | |
+
+## 4. Test cases
+| # | สถานการณ์ (อิงจุดประสงค์) | ขั้นตอน | ผลที่คาดหวัง |
+|---|---|---|---|
+| 1 | | | |
+
+## 5. E2E smoke (FE)
+- flow ที่ smoke:
+- คำสั่ง playwright-cli:
+
+## 6. UX/UI checklist (FE)
+- [ ] layout ตรงตาม spec/wireframe
+- [ ] states: loading / empty / error / success
+- [ ] responsive
+- [ ] interaction / user-flow ลื่นไหล
+
+## 7. วิธีรันเทส (reproducible)
+```
+<คำสั่ง / ขั้นตอน>
+```

package/src/.warnyin/template/stages/[topic]/troubleshooting.md

@@ -1,34 +1,34 @@
-# Troubleshooting — <ชื่อ change>
-
-> Log ปัญหา **ยาก/ซ้ำ** ที่เจอระหว่างทำงาน topic นี้ (ส่วนใหญ่ตอน BUILD) แล้วแก้สำเร็จ
-> ตอน **SHIP** จะยกรายการที่มีค่าขึ้นไปรวมที่ KB กลาง `docs/troubleshooting.md`
-> เจอปัญหาใหม่ → อ่าน `docs/troubleshooting.md` ก่อนเสมอ เผื่อเคยแก้แล้ว
-
----
-
-## วิธีบันทึก
-บันทึกเฉพาะปัญหาที่ **ยากจะแก้** หรือ **เจอซ้ำ** (ไม่ใช่ทุก error เล็กน้อย) — หนึ่งปัญหา = หนึ่ง entry
-
----
-
-### TS-1: <ชื่อปัญหาสั้นๆ>
-| | |
-|---|---|
-| **วันที่** | `YYYY-MM-DD` |
-| **Component / Task** | `api-service` / `tasks/<task>` |
-| **ความถี่** | เจอครั้งเดียว (ยากมาก) / เจอซ้ำ __ ครั้ง |
-| **ยกขึ้น KB กลางตอน SHIP?** | ✅ / ❌ |
-
-- **อาการ / error message:**
-  ```
-  <paste error>
-  ```
-- **บริบทที่ทำให้เกิด (trigger):**
-- **สาเหตุที่แท้จริง (root cause):**
-- **วิธีแก้ที่ได้ผล (solution):**
-- **วิธีสังเกต/ป้องกันไม่ให้เกิดซ้ำ:**
-
----
-
-### TS-2: <...>
-> (คัดลอกบล็อกด้านบน)
+# Troubleshooting — <ชื่อ change>
+
+> Log ปัญหา **ยาก/ซ้ำ** ที่เจอระหว่างทำงาน topic นี้ (ส่วนใหญ่ตอน BUILD) แล้วแก้สำเร็จ
+> ตอน **SHIP** จะยกรายการที่มีค่าขึ้นไปรวมที่ KB กลาง `docs/troubleshooting.md`
+> เจอปัญหาใหม่ → อ่าน `docs/troubleshooting.md` ก่อนเสมอ เผื่อเคยแก้แล้ว
+
+---
+
+## วิธีบันทึก
+บันทึกเฉพาะปัญหาที่ **ยากจะแก้** หรือ **เจอซ้ำ** (ไม่ใช่ทุก error เล็กน้อย) — หนึ่งปัญหา = หนึ่ง entry
+
+---
+
+### TS-1: <ชื่อปัญหาสั้นๆ>
+| | |
+|---|---|
+| **วันที่** | `YYYY-MM-DD` |
+| **Component / Task** | `api-service` / `tasks/<task>` |
+| **ความถี่** | เจอครั้งเดียว (ยากมาก) / เจอซ้ำ __ ครั้ง |
+| **ยกขึ้น KB กลางตอน SHIP?** | ✅ / ❌ |
+
+- **อาการ / error message:**
+  ```
+  <paste error>
+  ```
+- **บริบทที่ทำให้เกิด (trigger):**
+- **สาเหตุที่แท้จริง (root cause):**
+- **วิธีแก้ที่ได้ผล (solution):**
+- **วิธีสังเกต/ป้องกันไม่ให้เกิดซ้ำ:**
+
+---
+
+### TS-2: <...>
+> (คัดลอกบล็อกด้านบน)

package/src/.warnyin/template/stages/[topic]/verify.md

@@ -1,44 +1,44 @@
-# Verify Report — <ชื่อ change>
-
-> Output ของ VERIFY stage · playbook: `.warnyin/workflow/stages/verify.md`
-> สรุปผลการ verify ตามจุดประสงค์ของ topic + การแก้ไขที่เกิดขึ้น
-
-| | |
-|---|---|
-| **Slug** | `<kebab-case>` |
-| **วันที่** | `YYYY-MM-DD` |
-| **ผลรวม** | ผ่าน / ไม่ผ่าน |
-| **จำนวนรอบการแก้ไข (fix iterations)** | __ รอบ |
-| **จำนวนจุดที่แก้** | __ จุด |
-
-## 1. จุดประสงค์ที่ verify (จาก spec/tasks)
--
-
-## 2. ผลการเทส
-| # | Test case / flow | ชนิด | ผล | หมายเหตุ |
-|---|---|---|---|---|
-| 1 | | functional / e2e / uxui | ✅ / ❌→✅ (แก้แล้ว) | |
-
-## 3. UX/UI verify (ถ้าเป็น FE)
-- [ ] layout / states / responsive / user-flow — ผล:
-
-## 4. รายการแก้ไข (สรุปการแก้ระหว่าง verify)
-> นับรวมเป็น "จำนวนการแก้ไข" ด้านบน
-
-| รอบ | ปัญหาที่เจอ | วิธีแก้ | ไฟล์ที่แก้ |
-|---|---|---|---|
-| 1 | | | |
-
-## 5. ปัญหายาก/ซ้ำ → troubleshooting
-- บันทึกไว้ที่ `./troubleshooting.md` (SHIP ยกขึ้น `docs/troubleshooting.md`): มี/ไม่มี
-
-## 6. หมายเหตุถึง user (ถ้าถามระหว่างทาง)
-> กรณีวนแก้นาน/หลายรอบ แล้วถาม user — สรุปคำถาม/คำตอบ/การตัดสินใจ
--
-
-## ✅ Gate → SHIP (ดู `.warnyin/workflow/stages/verify.md` ข้อ 6)
-- [ ] เทสตามจุดประสงค์ครบ (functional)
-- [ ] FE: UX/UI verify ผ่าน
-- [ ] ทุกข้อที่ไม่ผ่านถูกแก้จนผ่าน
-- [ ] test.md + verify.md เขียนครบ
-- [ ] ปัญหายากบันทึก troubleshooting.md แล้ว
+# Verify Report — <ชื่อ change>
+
+> Output ของ VERIFY stage · playbook: `.warnyin/workflow/stages/verify.md`
+> สรุปผลการ verify ตามจุดประสงค์ของ topic + การแก้ไขที่เกิดขึ้น
+
+| | |
+|---|---|
+| **Slug** | `<kebab-case>` |
+| **วันที่** | `YYYY-MM-DD` |
+| **ผลรวม** | ผ่าน / ไม่ผ่าน |
+| **จำนวนรอบการแก้ไข (fix iterations)** | __ รอบ |
+| **จำนวนจุดที่แก้** | __ จุด |
+
+## 1. จุดประสงค์ที่ verify (จาก spec/tasks)
+-
+
+## 2. ผลการเทส
+| # | Test case / flow | ชนิด | ผล | หมายเหตุ |
+|---|---|---|---|---|
+| 1 | | functional / e2e / uxui | ✅ / ❌→✅ (แก้แล้ว) | |
+
+## 3. UX/UI verify (ถ้าเป็น FE)
+- [ ] layout / states / responsive / user-flow — ผล:
+
+## 4. รายการแก้ไข (สรุปการแก้ระหว่าง verify)
+> นับรวมเป็น "จำนวนการแก้ไข" ด้านบน
+
+| รอบ | ปัญหาที่เจอ | วิธีแก้ | ไฟล์ที่แก้ |
+|---|---|---|---|
+| 1 | | | |
+
+## 5. ปัญหายาก/ซ้ำ → troubleshooting
+- บันทึกไว้ที่ `./troubleshooting.md` (SHIP ยกขึ้น `docs/troubleshooting.md`): มี/ไม่มี
+
+## 6. หมายเหตุถึง user (ถ้าถามระหว่างทาง)
+> กรณีวนแก้นาน/หลายรอบ แล้วถาม user — สรุปคำถาม/คำตอบ/การตัดสินใจ
+-
+
+## ✅ Gate → SHIP (ดู `.warnyin/workflow/stages/verify.md` ข้อ 6)
+- [ ] เทสตามจุดประสงค์ครบ (functional)
+- [ ] FE: UX/UI verify ผ่าน
+- [ ] ทุกข้อที่ไม่ผ่านถูกแก้จนผ่าน
+- [ ] test.md + verify.md เขียนครบ
+- [ ] ปัญหายากบันทึก troubleshooting.md แล้ว

package/src/.warnyin/template/stages/[topic]/wireframe.md

@@ -0,0 +1,104 @@
+# Wireframe — <ชื่อ change / กลุ่มหน้าจอ>
+
+> Output ของ DESIGN stage · playbook: `.warnyin/workflow/stages/design.md`
+> **low-fidelity wireframe** ของ change ที่มี UI surface — วาดก่อนเขียน technical design (`design.md` §5 UI layer) แล้วแตก task
+> วาดโดย role/agent `warnyin-ux` (read-only generator) หรือ AI หลักสวม lens `.warnyin/workflow/roles/ux.md` (fallback) — main loop เขียนไฟล์นี้
+
+| | |
+|---|---|
+| **Slug** | `<kebab-case ของ topic — ตรงกับ docs/stages/<slug>/>` |
+| **วันที่** | `YYYY-MM-DD` |
+| **Status** | `draft` / `approved` _(★ approve gate — user ต้องยืนยันให้เป็น `approved` ก่อนแตก task)_ |
+
+<!--
+วิธีกรอกไฟล์นี้ (อ่านก่อนเริ่ม):
+- wireframe เป็น low-fidelity เท่านั้น — กล่อง/label generic พอให้เห็นโครงหน้าจอ ไม่ต้องสวย ไม่ใช่ pixel-perfect
+- ★ privacy: ใช้ placeholder generic — ห้ามใส่ secret/token/credential/internal path/PII จริงลงในภาพ (ไฟล์นี้ commit ลง repo)
+- แทนที่ทุก <...> และ [LABEL] ด้วยของจริงของ change นี้ แล้วลบ comment <!-- ... --> ที่เป็นคำสั่งกรอกออก
+- 4 section ด้านล่าง (§1-§4) ชื่อตายตัวตาม contract — design.md/task อ้างชื่อนี้ ห้ามเปลี่ยนชื่อ/ลบ section
+-->
+
+## 1. User flow
+
+> เส้นทาง screen-to-screen — ผู้ใช้เดินจากจอไหนไปจอไหน (ทำอะไร → เห็นอะไร)
+> วาดเป็น ASCII arrow flow; แตกแขนง (branch) ได้ตาม action/เงื่อนไข
+
+```
+<!-- ตัวอย่าง — แทนที่ด้วย flow จริงของ change นี้ -->
+[Entry / Landing]
+      │ กดปุ่มหลัก
+      ▼
+[Form / Input screen] ──ใส่ข้อมูลไม่ครบ──▶ [Validation error inline]
+      │ submit สำเร็จ
+      ▼
+[Result / Success screen]
+      │ กดย้อนกลับ
+      ▼
+[Entry / Landing]
+```
+
+## 2. Wireframe ต่อ screen
+
+> ASCII box หนึ่งกล่องต่อหนึ่ง screen — low-fidelity (กล่อง + label generic)
+> ★ **ทำซ้ำ block "### Screen: ..." ด้านล่างได้หลายอัน** — หนึ่ง block ต่อหนึ่งหน้าจอใน user flow §1
+
+### Screen: <ชื่อจอ A — เช่น Landing>
+
+```
+┌─────────────────────────────────────────┐
+│  [LOGO]                      [User menu] │  <- header / nav
+├─────────────────────────────────────────┤
+│                                          │
+│   <หัวข้อจอ / คำอธิบายสั้น>               │
+│                                          │
+│   ┌─────────────────────────────────┐    │
+│   │  [Primary content / list item]  │    │
+│   │  [Primary content / list item]  │    │
+│   └─────────────────────────────────┘    │
+│                                          │
+│                     [ ปุ่มหลัก / CTA ]    │  <- action
+│                                          │
+└─────────────────────────────────────────┘
+```
+
+### Screen: <ชื่อจอ B — เช่น Form>
+
+<!-- ทำซ้ำ block นี้ต่อหนึ่งหน้าจอ; ลบ block ตัวอย่างที่ไม่ใช้ออก -->
+
+```
+┌─────────────────────────────────────────┐
+│  ◀ กลับ            <หัวข้อจอ>            │
+├─────────────────────────────────────────┤
+│                                          │
+│   <Field 1 label>                        │
+│   [____________________________]         │  <- input
+│                                          │
+│   <Field 2 label>                        │
+│   [____________________________]         │
+│   ( ) ตัวเลือก A   ( ) ตัวเลือก B         │  <- radio/option
+│                                          │
+│              [ ยกเลิก ]   [ ยืนยัน ]       │
+│                                          │
+└─────────────────────────────────────────┘
+```
+
+## 3. Screen states
+
+> ต่อหนึ่ง screen ใน §2 ระบุหน้าตาแต่ละ state — empty / loading / error / success
+> state ไหนไม่มีจริงสำหรับจอนั้น ใส่ `N/A` พร้อมเหตุผลสั้น
+
+| Screen | empty | loading | error | success |
+|---|---|---|---|---|
+| `<ชื่อจอ A>` | `<ไม่มี item — แสดงอะไร>` | `<skeleton / spinner>` | `<โหลด list ไม่ได้ — แสดงอะไร>` | `<มี item — แสดงอะไร>` |
+| `<ชื่อจอ B>` | `N/A (form ไม่มี empty)` | `<ขณะ submit — disable ปุ่ม>` | `<validation/server error inline>` | `<submit สำเร็จ → ไปจอไหน>` |
+
+## 4. Design-honor note
+
+> สิ่งที่ `design.md` (§5 UI layer) + task ใน BUILD **ต้องทำตาม** wireframe นี้ — กัน implementation หลุดจากที่ user approve
+> เขียนเป็นข้อผูกมัด (constraint) ที่ตรวจได้ ไม่ใช่คำอธิบายลอย ๆ
+
+- [ ] design.md §5 (UI layer) **อ้าง wireframe นี้** + ทุก screen ใน §2 มี task รองรับ
+- [ ] ลำดับ screen ใน task ตรงกับ user flow §1 (entry → ... → result)
+- [ ] ทุก screen implement ครบ 4 state ตาม §3 (ไม่ข้าม error/empty)
+- [ ] `<constraint เฉพาะ change นี้ — เช่น "ปุ่ม CTA ต้องอยู่ขวาล่างเสมอ", "field บังคับมี inline validation">`
+- [ ] เปลี่ยน layout/flow จาก wireframe นี้ → ต้อง rerun approve gate (กลับ status เป็น `draft` แล้วให้ user ยืนยันใหม่)