# Template-Locked Interactive QA Report Generator เอกสารนี้ใช้สร้าง Interactive HTML QA Report ได้ด้วยตัวเอง ผู้ใช้ส่งเพียง `generate_report.md` พร้อมข้อมูลโปรเจกต์ ไม่จำเป็นต้องส่ง HTML ต้นฉบับหรือมีโครงสร้างโฟลเดอร์เหมือนผู้จัดทำ ### Portable template — ใช้ได้บนเครื่องอื่น - Default: ใช้ `Embedded Template Capsule v1` ในส่วน `5.8` ร่วมกับ `Proven Report Experience — Dual Reference DNA` ที่อยู่ใน Markdown นี้ - ชื่อ Auto Item และ Auto CN R3 ในเอกสารระบุที่มาของ Design pattern เท่านั้น ไม่ใช่ไฟล์ที่ผู้ใช้ต้องหาให้ครบ - ห้ามค้นหาพาธเครื่องผู้จัดทำ, เดาชื่อบัญชี Windows, ค้นทั้งเครื่อง หรือหยุดงานเพื่อขอ HTML ต้นฉบับ - ใช้ External Reference เฉพาะไฟล์ที่ผู้ใช้ระบุเป็น Template หรือแนบมาอย่างชัดเจน หากมีไฟล์ต้นแบบชื่อข้างต้นอยู่ข้าง Markdown อยู่แล้ว สามารถใช้ได้โดยไม่ต้องถาม - ตรวจเฉพาะไฟล์ที่เข้าถึงได้ใน Source/Workspace ที่ผู้ใช้ให้ หากไม่พบ Reference ให้ใช้ Capsule ต่อทันที ไม่ถือเป็น Missing input - หากพบทั้งสองต้นแบบให้ใช้แบบ Dual Reference; หากพบเพียงไฟล์เดียวให้ใช้ไฟล์นั้นร่วมกับ Capsule สำหรับ Pattern ที่ขาด - พาธตัวอย่าง เช่น `C:\Project ABC\` เป็นเพียงตัวอย่าง ต้องใช้ตำแหน่งจริงที่ผู้ใช้ให้หรือ Workspace ปัจจุบัน ห้ามนำพาธตัวอย่างไปเปิดตรง ๆ - ใน Chat ที่อ่านไฟล์ในเครื่องไม่ได้ ให้ใช้ไฟล์ที่แนบมา หากขาดข้อมูลโปรเจกต์จึงขอให้แนบ Source ที่จำเป็น ไม่ขอ Reference HTML - Capsule mode ต้องคงโครงและ Interaction ตามข้อกำหนดภายในนี้ แต่ห้ามอ้างว่าเทียบหน้าตากับ HTML ต้นฉบับแล้ว หากไม่ได้เข้าถึงและ Render ต้นฉบับจริง AI ต้องระบุแหล่ง Template ใน Internal Blueprint, Manifest และ Handoff เป็นค่าใดค่าหนึ่ง: - `Dual External Reference — Auto CN R3 narrative + Auto Item explorer` - `Single External Reference HTML — Full fidelity mode` - `Embedded Template Capsule v1 — Standalone mode` ไฟล์อ้างอิงเป็น **ข้อกำหนดการออกแบบและการทำงานของ Template** ไม่ใช่เพียงแรงบันดาลใจ โดยต้องรักษา Page Shell, Header, Tab Navigation, Layout, Visual Hierarchy, Component Pattern, Evidence Viewer และ Interaction ให้ใกล้เคียงต้นฉบับมากที่สุด แล้วเปลี่ยนเฉพาะข้อมูลและโครงเรื่องที่เป็นของโปรเจกต์ใหม่ ห้ามคัดลอกข้อมูลเฉพาะของ Auto Item หรือ Auto CN R3 ไปใช้กับโปรเจกต์ใหม่ เว้นแต่ผู้ใช้ระบุให้ใช้ข้อมูลนั้นโดยตรง --- ## Quick Start — Autopilot v3 (Default and Highest Priority) ส่วนนี้เป็นกติกาที่มีลำดับความสำคัญสูงกว่าส่วนอื่นในเอกสาร หากข้อความส่วนอื่นขัดกับส่วนนี้ ให้ยึด **Autopilot v3** โดยคำสั่งล่าสุดของผู้ใช้ยังมาก่อนเสมอ ### เริ่มจาก .md ไฟล์เดียว — ถามให้ได้ข้อมูล แล้วช่วยทำต่อ การแนบ Markdown นี้หรือสั่งว่า “ใช้ไฟล์นี้ทำ Report” คือการเริ่มบทสนทนาได้แล้ว ผู้ใช้ไม่ต้องเขียน prompt เต็ม ไม่ต้องรู้ชื่อ Template หรือวิธี Embed รูป 1. ตรวจไฟล์แนบและ Workspace ที่ผู้ใช้ให้เข้าถึงก่อน เฉพาะขอบเขตงานนี้ ห้ามค้นทั้งเครื่องหรือใช้ path ตัวอย่างเป็น path จริง 2. แยก **ข้อมูลโครงการจริง**, **ภาพ/หลักฐาน**, **Template อ้างอิง** และ **ข้อมูลฝึก** ให้ชัด R3, Capsule และ `practice/` ไม่ใช่ผลทดสอบของผู้ใช้ การมีไฟล์เหล่านี้อย่างเดียวจึงยังไม่ถือว่ามี Source 3. ถ้ายังไม่มี Source ให้ถามเรื่องแหล่งข้อมูลก่อนเสมอ ไม่สร้างผลทดสอบหรือ Report ฉบับสมบูรณ์จากการคาดเดา ไม่รับคำตอบ “ใช้ค่าที่แนะนำ” แทนข้อมูลจริงที่ยังไม่มี 4. ถ้ามีข้อมูลพร้อม ให้สรุปสิ่งที่จะทำสั้น ๆ แล้วสร้างต่อทันที ไม่ถามซ้ำเรื่องที่ผู้ใช้ตอบแล้ว ไม่ถาม permission เพียงเพราะต้องเลือกชื่อไฟล์ สี ลำดับแท็บ หรือ Embed รูป 5. ถ้าผู้ใช้ยังไม่แน่ใจว่าจะเล่าอะไร ชวนเลือกหนึ่งประเด็นจากงานจริง เช่น “มีเรื่องไหนที่อยากให้ทีมอื่นเข้าใจหรือตัดสินใจหลังดู Report นี้?” เสนอ Story จาก Source ได้ แต่ระบุว่าเป็นข้อเสนอจนกว่าข้อมูลจะรองรับ ข้อความเริ่มต้นเมื่อได้เพียง .md และไม่มี Source: > ได้ครับ ผมจะใช้รูปแบบในไฟล์นี้ให้ ช่วยส่ง path โฟลเดอร์ข้อมูลหรือแนบ Test Result / สรุปงานที่ต้องการเล่ามาก่อนได้ไหมครับ? ถ้ามีรูปหลักฐาน แนบมาด้วยหรือบอกโฟลเดอร์รูปได้เลย ผมจะฝังลง HTML ให้โดยอัตโนมัติ > > Report นี้อยากเล่าให้ใครฟัง และมีประเด็นไหนที่อยากให้เขาเข้าใจหรือตัดสินใจเป็นพิเศษครับ? ถ้ายังไม่แน่ใจ ผมช่วยเสนอจากข้อมูลที่ส่งมาได้ ถามไม่เกิน 2 ข้อต่อรอบ รวม path ของข้อมูลและรูปไว้ในข้อเดียว ถ้าอ่านไฟล์ในเครื่องไม่ได้ ให้ขอไฟล์แนบหรือข้อความแทน แจ้งตามจริงว่าเปิดอะไรได้แล้ว/ยังไม่ได้ ห้ามอ้างว่าได้อ่านจาก path ที่เข้าถึงไม่ได้ ### เลือกทางให้ตามสิ่งที่ผู้ใช้มี | สถานการณ์ | สิ่งที่ AI ทำให้ | ถามเพิ่มเมื่อใด | | --- | --- | --- | | มีเฉพาะ .md | ใช้ Capsule เป็นโครง พร้อมถาม Source และเรื่องที่จะเล่า | ยังไม่มีข้อมูลโครงการจริง | | มี ZIP ชุดนี้ | ใช้ `reference/` เป็นต้นแบบ และแยก `practice/` เป็นข้อมูลฝึก | ยังไม่มี Source ของงานใหม่; ถ้าผู้ใช้ขอฝึก ให้ระบุข้อมูลจำลอง | | มีโฟลเดอร์งาน/ไฟล์ Excel/Doc/CSV/JSON | อ่านแหล่งที่เกี่ยวข้อง เสนอ key takeaway ก่อนรายละเอียด และบอกขอบเขตที่อ่านได้ | ไฟล์เปิดไม่ได้ มีหลายรุ่นที่ตัดสิน Source of Truth ไม่ได้ หรือยอดขัดกัน | | มีรูปในไฟล์แนบหรือโฟลเดอร์ Source | สำรวจรูปที่เกี่ยวข้อง จับคู่จาก TC ID / ชื่อไฟล์ / caption แล้ว Embed อัตโนมัติ | รูปจับคู่ได้หลายเคส หรือไม่ทราบว่าภาพพิสูจน์อะไร | | มีรูปอย่างเดียว | ทำแกลเลอรีหลักฐานและเสนอเรื่องจากสิ่งที่เห็น โดยไม่อนุมาน Pass/Fail | ขอผลที่ยืนยันแล้วและบริบทเคสก่อนสรุปสถานะ | | มี HTML เดิม | แก้สำเนา รักษาโครงและ interaction เดิม แล้วเติมเฉพาะข้อมูลที่มี | เป้าหมายแก้ไขยังไม่ชัดหรือข้อมูลใหม่ขัดกับของเดิม | | มีลิงก์ที่ต้องล็อกอิน | ใช้ connector ที่ได้รับอนุญาต หรือขอ export/แนบไฟล์ | เข้าถึงไม่ได้; ห้ามขอรหัสผ่านหรืออ้างว่าอ่านแล้ว | | ต้องส่งไฟล์ไปเปิดที่อื่น | สร้าง HTML ที่รวม CSS/JS และรูปที่จำเป็นไว้ในไฟล์เดียว | มีข้อจำกัดขนาดหรือข้อห้ามฝังไฟล์ที่ผู้ใช้ระบุ | ### รูปพร้อมใช้ ไม่ต้องสั่ง Embed ซ้ำ - Default คือ Embed **รูปที่เกี่ยวข้องกับ Report และผู้ใช้ให้เข้าถึงในขอบเขตงาน** เป็น `data:` URI ที่มี MIME ถูกต้อง พร้อม caption, alt และ Evidence Viewer ไม่ว่าผู้ใช้จะพูดคำว่า offline หรือไม่ ห้ามกวาดรูปอื่นในเครื่องเข้ารายงาน - รวมรูปที่ดึงออกจากเอกสารได้ด้วย หากเครื่องมือดึงไม่ได้ ให้บอกข้อจำกัดและขอภาพต้นฉบับเฉพาะที่จำเป็น - จับคู่ด้วยรหัสเคส/ชื่อไฟล์/ข้อความประกอบที่ยืนยันได้ ภาพที่กำกวมให้แยก “รอระบุเคส” ไม่ผูกเข้าผลทดสอบเอง ถามรวมเฉพาะจุดกำกวม ไม่ถามทีละภาพ - เก็บสัดส่วนและข้อความสำคัญให้ชัด ไม่ครอปหลักฐาน ไม่แก้ภาพต้นฉบับโดยเงียบ ๆ ค่าเริ่มต้นฝังภาพต้นฉบับ; ถ้าทำ Lite ให้ทำสำเนาแยก ตรวจความอ่านออกและแจ้งรายการที่ย่อ ห้ามทิ้งภาพเพื่อให้ไฟล์เล็กโดยไม่บอก - ห้ามฝัง `file:///`, path เครื่องผู้สร้าง หรือ URL ชั่วคราวแทนข้อมูลภาพจริง ตรวจภาพโหลดได้หลังย้าย HTML ออกจากโฟลเดอร์ Source และปิดเครือข่าย ถ้าทดสอบไม่ได้ให้ระบุ “ยังไม่ได้ทดสอบ” - ภาพหลักฐานใช้แสดงสิ่งที่เกิดขึ้นจริงเท่านั้น ภาพสร้าง/ภาพประกอบต้องติดป้ายแยก ไม่เปลี่ยนสถานะเคสเป็นผ่านเพราะมีภาพ ### ให้ใกล้ต้นแบบโดยไม่ยกข้อมูลของต้นแบบมาใช้ ใช้ R3 ใน `reference/` ข้าง .md โดยอัตโนมัติเมื่อมี หรือไฟล์ที่ผู้ใช้ระบุเป็น Template ชัดเจน ตรวจโครง, tokens, spacing, tabs, typography, summary cards, explorer, lightbox, zoom, keyboard และ responsive ตามส่วน 5 แล้วคงองค์ประกอบที่เข้ากับเรื่องใหม่ เปลี่ยนเฉพาะข้อมูลและ Story ไม่ออกแบบหน้าตาใหม่โดยไม่มีเหตุผล ถ้ามีแค่ .md ใช้ Embedded Template Capsule ส่วน 5.8 ต่อได้ทันที ไม่บังคับหา R3 มาเพิ่ม ระบุว่าความเหมือนอ้างอิงจาก Capsule และยังไม่ได้เทียบภาพกับ R3 จริง ห้ามรับประกัน pixel-perfect หากยังไม่ได้ render เทียบ หลังสร้าง ให้ส่งลิงก์/ไฟล์ HTML ที่เปิดได้จริง พร้อม 1) แหล่งข้อมูลที่ใช้ 2) จำนวนภาพที่ฝังและภาพที่ยังจับคู่ไม่ได้ 3) ข้อสรุปที่ยังต้องยืนยัน 4) ผลตรวจ interaction/offline ที่ทำจริง และแนะนำคำสั่งสั้น ๆ สำหรับแก้รอบถัดไป เช่น “ใช้ข้อมูลชุดใหม่จาก [path] อัปเดต Report นี้ โดยคงหน้าตาเดิม” ### สิ่งที่ผู้ใช้ต้องให้ขั้นต่ำ ผู้ใช้ให้เพียงอย่างใดอย่างหนึ่งก็เริ่มงานได้: - พาธโฟลเดอร์โปรเจกต์ - ไฟล์โปรเจกต์ที่แนบมา - Workspace ปัจจุบันที่มี Source อยู่แล้ว คำสั่งสั้นที่สุดเมื่อ `generate_report.md` อยู่ในโฟลเดอร์เดียวกับข้อมูล: ```text อ่าน generate_report.md และสร้าง QA Report จากข้อมูลในโฟลเดอร์นี้ ใช้ Autopilot ``` หรือเมื่อข้อมูลอยู่คนละตำแหน่ง: ```text อ่าน generate_report.md และสร้าง QA Report Project Source: <พาธโฟลเดอร์หรือไฟล์ที่แนบ> ใช้ Autopilot และถามเฉพาะตัวบล็อกจริง ``` ### Default execution behavior 1. สำรวจ Source แบบ Read-only ให้ครบก่อนถาม 2. อนุมาน Project Name, Phase, Audience, Purpose, Story, Tabs, Metrics, Evidence mapping, Branding, Output filename และ Full/Lite จาก Source 3. แสดง `Execution Brief` ภาษาไทยไม่เกิน 10 บรรทัด โดยสรุปสิ่งที่จะสร้างและ Assumption ที่มีผลสูง 4. หากไม่มี Blocking item ให้เริ่ม Implement ต่อในรอบเดียวกันทันที **ไม่ต้องรอผู้ใช้ยืนยัน Blueprint** 5. หากมี Blocking item ให้ถามไม่เกิน **2 ข้อ** แต่ละข้อมีคำตอบแนะนำ ผู้ใช้ตอบเพียง `ใช้ค่าที่แนะนำ` ได้ 6. ใช้ Blueprint แบบละเอียดเป็น Internal working artifact; แสดง Blueprint เต็มเฉพาะเมื่อผู้ใช้ขอ `ขอดู Blueprint ก่อน`, `Review before implement` หรือคำสั่งที่มีความหมายเทียบเท่า 7. หากข้อมูลบางส่วนไม่กระทบความถูกต้อง ให้ใส่ `To be confirmed` ใน Manifest หรือ Handoff แล้วทำต่อ ห้ามหยุดทั้งงาน ### Do not ask by default ห้ามถามผู้ใช้เกี่ยวกับรายการต่อไปนี้ หาก Source พอให้อนุมานได้: - Audience และ Purpose - จำนวน ชื่อ หรือลำดับ Tab - Theme, สี, Layout หรือ Component - Caption style และลำดับภาพ - Output filename และ output folder - Full/Lite version - จะ Embed รูปหรือไม่ - ต้องการ Progress, Explorer, Workflow, Toolkit หรือไม่ - ต้องการให้ Report เป็นภาษาอะไร ค่า Default คือ Report ภาษาอังกฤษ, สนทนาภาษาไทย, Template-Locked, Embed ภาพสำคัญ, Evidence กดขยายได้ และเลือก Tab/Component อัตโนมัติจาก Source ### Automatic source-of-truth routing หากผู้ใช้ไม่ได้ระบุ Priority ให้ใช้ลำดับนี้และบันทึกไว้ใน Manifest: 1. คำสั่งหรือการยืนยันล่าสุดของผู้ใช้ใน Scope เดียวกัน 2. Actual status/result: Test Result ล่าสุด > Test Summary ล่าสุด > Report เดิม 3. Expected behavior/requirement: PRD/BRD ล่าสุด > TCM/Test Case ล่าสุด > Report เดิม 4. TC title, role, precondition: TCM/Test Case ล่าสุด 5. Aggregate metrics: Test Summary ล่าสุด โดย Reconcile กับ Test Result ก่อนใช้ 6. Evidence: Exact TC ID > Request No. > Scenario/Folder ที่ยืนยันความสัมพันธ์ได้; Timestamp proximity ใช้เป็นเบาะแสค้นหาเท่านั้น ห้ามใช้จับคู่หลักฐานโดยไม่มีข้อมูลยืนยัน 7. Branding: Asset ใน Project Source > Embedded Template Capsule หาก Source ขัดกันแต่ยังระบุ Latest/Authoritative ได้ ให้เลือกอัตโนมัติและแจ้ง Assumption; ถ้าความขัดแย้งทำให้ตัวเลขหรือ Evidence เปลี่ยนอย่างมีนัยสำคัญจึงถือเป็น Blocking ### Automatic output routing - Default output: `\outputs\_QA_Test_Coverage_Dashboard.html` - หาก Source เป็นไฟล์แนบหรือเขียนโฟลเดอร์นั้นไม่ได้ ให้ใช้ `\outputs\...` - สร้าง Full version เป็นหลัก - หากประเมินว่าไฟล์เกิน 35 MB, มีภาพจำนวนมาก หรืออาจเปิดผ่าน Teams/เครื่องทั่วไปได้ช้า ให้สร้าง Lite version เพิ่มโดยอัตโนมัติและเก็บ Full versionไว้ - Excel/PDF ขนาดใหญ่ให้แสดง Lightweight preview พร้อม Exact source link; ห้ามฝังทั้งไฟล์จนหน้า Report ค้าง ### Execution Brief format ```text พบ Source: <สรุปไฟล์หลัก> Project: <ค่าที่อนุมาน> Report goal: <ค่าที่แนะนำ> Story: <ลำดับเรื่องแบบสั้น> Tabs: <รายชื่อ Tab> Evidence strategy: Output: Assumptions: <เฉพาะข้อที่มีผลสูง หรือ None> กำลังสร้าง Report ต่อด้วย Autopilot ``` --- ## Proven Report Experience — Dual Reference DNA ใช้ Reference ที่ผ่านการ Review แล้วสองชุดโดยแบ่งหน้าที่ชัดเจน: 1. `SIT Result Summary for Auto CN R3.html` — ต้นแบบ **ระดับรายงาน**: executive summary, narrative order, coverage/rule explanation, workflow, E2E, post-change summary และ toolkit 2. `Auto_Item_Visual_Scenario_Explorer_Preview.html` — ต้นแบบ **ระดับการสำรวจหลักฐาน**: scenario selector, TC context, evidence carousel/lightbox, section/result explorer และ resubmit/overwrite workbench เมื่อพบไฟล์ใดให้ตรวจ HTML/CSS/JavaScript จริงก่อน Implement; เมื่อไม่พบให้ใช้ Capsule ในเอกสารนี้ ห้ามขอ Reference เพิ่ม ห้ามคัดลอก Project data, Metrics, TC, Link, Query หรือข้อความเฉพาะของ Auto CN R3/Auto Item ไปยัง Report ใหม่ ### Narrative grammar เลือกเฉพาะช่วงที่ Source รองรับ และเรียงจากภาพใหญ่ไปหลักฐาน: `Executive progress → Coverage and business rules → Scenario/result evidence → Workflow and notification → E2E/output validation → Post-change or risk summary → Toolkit and references` หลักการเล่าเรื่อง: - เปิดด้วยสถานะรวมที่ผู้บริหารหรือ Business อ่านแล้วเข้าใจภายในหนึ่งหน้าจอ - แต่ละ Tab ต้องตอบคำถามหลักเพียงหนึ่งเรื่อง และชื่อ Tab ต้องบอกผลลัพธ์ที่ผู้ชมจะเห็น - ภายใน Tab ใช้จังหวะ `Summary → Selector/Flow → Evidence → What it proves → Source link` - วาง Evidence ใกล้ Claim ที่มันพิสูจน์ ไม่รวมภาพทุกอย่างไว้ท้าย Report - Caption ต้องบอก Step, Expected behavior และสิ่งที่เห็นจริง ห้ามใช้เพียงชื่อไฟล์หรือคำกว้าง ๆ - แสดงข้อมูลสำคัญทันที; ใช้ Progressive disclosure เฉพาะ Detail จำนวนมาก ห้ามซ่อนสาระสำคัญไว้หลังปุ่ม `Open Full Detail` - ตัด Tab หรือ Component ที่ไม่มี Source รองรับ ห้ามสร้าง Placeholder เพื่อให้ครบจำนวน ### Component router | Source signal | Component ที่ต้องเลือกอัตโนมัติ | วิธีใช้ | |---|---|---| | Execution totals, pass rate, status, issues | Executive progress | Split hero + KPI + status/issue breakdown + source note | | Coverage หลายมิติ | Coverage matrix | ใช้ Table/Matrix เปรียบเทียบ ไม่แตกเป็น Card ซ้ำ ๆ | | Scenario หรือ TC จำนวนมาก | Scenario explorer | Selector ด้านซ้าย + Evidence กลาง + Context/Rule ด้านขวา | | Status, lifecycle, approval หรือ sequence | Step flow | ใช้เส้นทางและ Status chip; แยก Alternate/Reject path ให้ชัด | | หลายภาพในหนึ่ง Scenario | Evidence carousel | Prev/Next, thumbnail/step label, counter, keyboard และ lightbox | | Before/after, reject/resubmit/overwrite | Workflow workbench | แสดง Trigger → Actor → Action → Next status → Evidence | | Post-UAT, CR, issue remediation | Change summary | Category/status summary + reference link | | Query, configuration, document registry | QA toolkit | Search/filter/copy/link โดยแยกจาก Narrative หลัก | | Excel/PDF หรือ Evidence ภายนอกขนาดใหญ่ | Preview + exact link | Preview เฉพาะส่วนที่ช่วยตัดสินใจ และลิงก์ไปไฟล์/โฟลเดอร์ที่ตรงเคส | ### Visual and interaction DNA - Deep navy/CP blue shell, yellow accent, white surface และ light neutral background - Compact top header พร้อม Logo, Report title, badge และ baseline/update date - Sticky numbered tabs ที่ชื่อสั้น อ่านง่าย และแสดง Active state ชัด - Content container กว้างพอสำหรับ Matrix/Evidence แต่ไม่ทำให้ข้อความยาวเต็มจอ - ใช้ Status chips, KPI, flow, table และ explorer ตามชนิดข้อมูล ไม่ใช้ Card แบบเดียวครอบทุกอย่าง - Embed Logo และ presentation-critical images เป็น Data URI - รูปทุกภาพต้องรักษา Aspect ratio, กดขยายได้, Zoom/Pan ได้ และเลื่อนภาพชุดเดียวกันได้ - Full-page capture ต้องมี Fit-to-width/Fit-to-height ที่อ่าน Section ได้ ไม่แสดงเป็นเส้นยาวเล็กกลางจอ - Responsive: Desktop ใช้ workbench หลายคอลัมน์; Mobile/หน้าต่างแคบเปลี่ยนเป็น single column โดยไม่ซ่อนข้อมูล - Print mode แสดงทุก Tab ต่อกัน และไม่พิมพ์ Navigation/Lightbox - Interaction ต้องใช้ Vanilla JavaScript และเปิดจากไฟล์ `.html` แบบ Offline ได้ --- ## 0. Operating Mode — Template-Locked by Default การทำงานตามเอกสารนี้มี 2 Mode: 1. **Template-Locked Mode — Default** ใช้หน้าตา โครงสร้าง Component และ Interaction จาก External Reference HTML เมื่อพบไฟล์ หรือใช้ `Embedded Template Capsule v1` เมื่อได้รับเพียง Markdown แล้วแทนที่ข้อมูลด้วยข้อมูลของโปรเจกต์ใหม่ 2. **Fresh Design Mode — Explicit opt-in only** ออกแบบใหม่ได้เมื่อผู้ใช้บอกชัดเจนว่า `ออกแบบใหม่`, `ไม่ต้องเหมือนต้นฉบับ` หรือ `Fresh Design Mode` หากผู้ใช้ไม่ได้ระบุ Mode ให้ใช้ **Template-Locked Mode เสมอ** ใน Template-Locked Mode: - ห้ามเลือก Theme, Macrostructure, Dashboard Shell หรือ Design System ใหม่ - ห้ามเปลี่ยนเป็น Workbench, Bento, SaaS Dashboard, Editorial Dashboard หรือ Hallmark Theme อื่น - ห้ามตีความคำว่า `modern`, `clean`, `ดูดี` เป็นสิทธิ์ในการเปลี่ยน Template - หากใช้ Hallmark หรือ Design Skill ให้ใช้โหมด `audit` เพื่อตรวจความเรียบร้อยภายใน Template เดิมหลัง Implement เท่านั้น ห้ามเข้าสู่ Default/Fresh Design flow, ห้ามถาม Audience/Use case/Tone ซ้ำตาม Design interview และห้ามให้ Skill เปลี่ยนโครงหรือ Theme - เมื่อพบ External Reference ต้องอ่าน HTML ต้นฉบับจริง รวม CSS และ JavaScript ที่เกี่ยวข้อง ก่อนเสนอ Blueprint - เมื่อไม่พบ External Reference ให้ใช้ Capsule โดยตรง ห้ามสร้าง Template จากความจำ ห้ามขอ Reference เพิ่ม เว้นแต่ผู้ใช้ร้องขอ Full fidelity comparison - ต้องรักษาความเหมือนเชิงโครงสร้างเป็นหลัก ส่วน Content และจำนวน Tab เปลี่ยนได้ตามโปรเจกต์ใหม่ ### Template fidelity priority เมื่อข้อกำหนดขัดกัน ให้เรียงลำดับดังนี้: 1. ความถูกต้องของข้อมูลและ Evidence 2. ความปลอดภัยและการปิดบังข้อมูล 3. โครงสร้างและ Interaction จาก Template ต้นฉบับ 4. Storytelling และ Tab Mapping ที่ AI เลือกจาก Source หรือผู้ใช้ Override 5. การตกแต่งเพิ่มเติม ห้ามลด Template fidelity เพื่อให้สร้างงานได้เร็วขึ้น --- ## 0.0 Conversation Language — Thai by Default ภาษาสำหรับการสนทนากับผู้ใช้และภาษาภายใน Report เป็นคนละค่าและห้ามนำมาปะปนกัน ### User-facing conversation - AI ต้องสื่อสารกับผู้ใช้เป็น **ภาษาไทยโดย Default** ตั้งแต่ข้อความแรกจนจบงาน - คำถาม Discovery, Recommended answer, Blueprint, Assumption, Warning, Progress update, Verification result, Handoff และคำแนะนำการแก้ไขรอบถัดไปต้องเป็นภาษาไทย - ใช้คำเทคนิคภาษาอังกฤษได้เมื่อเป็นชื่อเฉพาะ เช่น `Test Case`, `Evidence`, `Blueprint`, `Pass Rate`, `API` และ `Template Mapping` แต่ประโยคอธิบายต้องเป็นภาษาไทย - ห้ามเปลี่ยนไปถามเป็นภาษาอังกฤษเพียงเพราะ Source, ชื่อไฟล์, Template หรือเนื้อหาใน Report เป็นภาษาอังกฤษ - เปลี่ยนภาษาสนทนาได้เฉพาะเมื่อผู้ใช้สั่งชัดเจน เช่น `ตอบเป็นภาษาอังกฤษ` หรือ `Ask me in English` - หากผู้ใช้พิมพ์คำสั่งสั้น ๆ เป็นภาษาอังกฤษ แต่ไม่ได้ขอเปลี่ยนภาษา ให้ยังคงตอบและถามเป็นภาษาไทย ตัวอย่างรูปแบบคำถามที่ถูกต้อง: > **ผมพบ Test Result สองชุดที่มีตัวเลขไม่ตรงกันครับ** > **ค่าที่แนะนำ:** ใช้ไฟล์ที่แก้ไขล่าสุดเป็น Source of Truth > ต้องการให้ใช้ค่าที่แนะนำ หรือให้ยึดอีกไฟล์หนึ่งครับ? ### Report content language - ข้อความที่แสดงภายใน HTML Report ต้องเป็น **ภาษาอังกฤษ (English-first)** โดย Default - Header, Tab name, KPI, Chart/Table label, Status, Description, Caption, Note, Tooltip, Button, Empty state, Warning และ Footer ต้องเขียนเป็นภาษาอังกฤษที่กระชับและเป็นธรรมชาติ - คงชื่อเฉพาะ ชื่อระบบ รหัส Test Case, API, Database field และข้อความที่จำเป็นต้องตรงกับ Source ตามรูปเดิมได้ - Source ภาษาไทยต้องสรุปหรือแปลเป็นภาษาอังกฤษสำหรับแสดงใน Report โดยรักษาความหมายเดิม ห้ามแปล Identifier หรือสร้างข้อเท็จจริงเพิ่ม - ไม่ต้องถามหรือเสนอภาษา Report ใน Blueprint เพราะค่า Default ถูกกำหนดเป็นภาษาอังกฤษแล้ว - ใช้ภาษาไทยหรือ Bilingual ภายใน Report ได้เฉพาะเมื่อผู้ใช้สั่งชัดเจนเท่านั้น - ภาษา Report ไม่เปลี่ยนกติกาการสนทนา: AI ยังคงถาม อัปเดต และส่ง Handoff กับผู้ใช้เป็นภาษาไทย --- ## 0.1 Zero-Friction Discovery — AI Recommends First เป้าหมายของ Discovery คือให้ผู้ใช้ตอบให้น้อยที่สุด ไม่ใช่ให้ผู้ใช้กรอกแบบฟอร์มให้ครบทุกช่อง ก่อนถามคำถาม AI ต้องสำรวจข้อมูลที่เข้าถึงได้แบบ Read-only ให้ครบก่อน ได้แก่ Workspace, ชื่อโฟลเดอร์, ชื่อไฟล์, Reference HTML, Report เดิม, PRD/BRD, TCM, Test Summary, Test Result, Evidence folder และ Link ที่ผู้ใช้ให้มา แล้วจัดข้อมูลเป็น 3 กลุ่ม: 1. **Confirmed** — พบจาก Source ที่เชื่อถือได้และนำไปใช้ได้ทันที 2. **Recommended** — AI เสนอค่าที่เหมาะสมจากข้อมูลที่พบ พร้อมเหตุผลสั้น ๆ 3. **Blocking** — ข้อมูลที่ไม่สามารถอนุมานได้อย่างปลอดภัยและมีผลให้ตัวเลข, Evidence mapping, Privacy หรือโครง Report ผิด ### Default behavior - ห้ามส่งแบบฟอร์ม Discovery เต็มชุดเป็นข้อความแรก - ห้ามถามข้อมูลที่ AI หาได้จากชื่อไฟล์, Metadata, เนื้อหาเอกสาร หรือ Report เดิม - ห้ามถามผู้ใช้ให้เลือก Tab, Metrics หรือ Story จากหน้าเปล่า ให้ AI เลือกค่าที่แนะนำและสรุปใน Execution Brief - ใช้ค่า Default จาก Template และ Source ที่พบได้ทันที โดยติด Label `Recommended` หรือ `Assumption to confirm` - ถ้าไม่มี Blocking question ให้แสดง Execution Brief สั้น ๆ แล้ว Implement ต่อทันที - ถ้ามี Blocking question ให้ถามครั้งแรกไม่เกิน **2 ข้อ** และรวมคำถามที่เกี่ยวข้องไว้ด้วยกัน - แต่ละคำถามต้องมีคำตอบที่ AI แนะนำไว้ก่อนเสมอ ผู้ใช้สามารถตอบเพียง `ใช้ค่าที่แนะนำ` ได้ - ข้อมูลที่ไม่สำคัญต่อการเริ่มทำ Report ให้ใช้ `To be confirmed` แล้วทำต่อ ห้ามหยุดทั้งงาน ### What counts as a blocking question ถามผู้ใช้เฉพาะเมื่ออย่างน้อยหนึ่งเงื่อนไขนี้เป็นจริง: - ไม่ทราบ Project Name หรือเลือกผิดแล้วจะทำให้ Report เป็นคนละโปรเจกต์ - มี Source หลายชุดขัดกันและไม่สามารถพิสูจน์ลำดับ Source of Truth ได้ - สูตร Metrics หรือ Denominator มีได้หลายความหมายและทำให้ตัวเลข Summary เปลี่ยน - Evidence จับคู่ได้มากกว่าหนึ่ง TC/Request หรือเสี่ยงใช้ภาพผิดเคส - ต้องตัดสินใจเปิดเผยข้อมูลส่วนบุคคล, Internal URL หรือข้อมูลอ่อนไหว - การเปลี่ยน Tab/Theme/Interaction จะออกนอก Template-Locked contract เรื่อง Audience, Storytelling, Tab order, Caption style, Full/Lite และ Output filename **ไม่ใช่ Blocking โดยอัตโนมัติ** หาก AI สามารถเสนอค่าที่เหมาะสมจาก Source และ Template ได้ ส่วนภาษาของ Report ให้ใช้ภาษาอังกฤษตาม Default โดยไม่ต้องถาม ### Confidence rule AI ต้องระบุความมั่นใจเฉพาะค่าที่มีผลสูง: - `High` — มี Source ชัดเจนอย่างน้อยหนึ่งแหล่งและไม่มีข้อมูลขัดกัน - `Medium` — อนุมานจากหลาย Signal ที่สอดคล้องกัน แต่ไม่มีการระบุโดยตรง - `Low` — มีทางเลือกมากกว่าหนึ่งแบบหรือ Source ไม่ครบ; ถามเฉพาะเมื่อมีผลต่อความถูกต้อง ตัวเลข Evidence หรือ Privacy ค่า `High` และ `Medium` ใช้ต่อได้เลยพร้อมบันทึก Assumption; ค่า `Low` ที่มีผลต่อความถูกต้องจึงค่อยถามเป็น Blocking question ### Optional review-mode approval phrases ใช้ส่วนนี้เฉพาะเมื่อผู้ใช้ขอ Review-before-implement; ใน Autopilot ไม่ต้องรอข้อความยืนยัน: - `ใช้ค่าที่แนะนำและทำต่อได้เลย` - `Approve recommended blueprint` - `จัดการตามที่เสนอได้เลย` - `go ahead with defaults` หากผู้ใช้แก้เพียงบางค่า ให้ถือว่าค่าอื่นใน Blueprint ได้รับการยืนยันตาม Recommended value ไม่ต้องถามซ้ำ ### Recommendation engine เมื่อผู้ใช้ยังไม่ได้กำหนด Story หรือ Tab ให้ AI เสนอจาก Signal ที่พบโดยใช้หลักต่อไปนี้: | Signal ที่พบ | Recommended report element | Reference pattern | |---|---|---| | Test Summary, execution totals หรือ status counts | Overall/API/E2E Progress | Progress Tab | | Coverage แยก Module, Feature, Item Type, Role หรือ Channel | Coverage breakdown ภายใน Progress หรือ Explorer | Progress + Breakdown | | TC/Scenario จำนวนมากพร้อมภาพ | Result/Scenario Explorer | Result Section Explorer | | Reject, Resubmit, Overwrite, Retry หรือ Approval หลายเส้นทาง | Exception/Workflow Tab | Resubmit & Overwrite | | Issue tracker หรือ Defect summary | Issue block ใน Progress Tab ก่อนสร้าง Tab ใหม่ | Progress issue pattern | | Evidence links แต่ไม่มีภาพ Offline | Link card ใกล้ Scenario พร้อม `Evidence not embedded` | Evidence source/link pattern | | ภาพจำนวนมากหรือไฟล์อาจหนัก | Full + Lite output recommendation | Existing responsive/lazy pattern | Default Story เมื่อ Source รองรับคือ: `Current progress → Coverage and gaps → Scenario-level result and evidence → Exception/approval flow → References` ให้ตัด Tab ที่ไม่มีข้อมูลรองรับออก ห้ามสร้าง Tab เปล่าเพียงเพื่อให้จำนวน Tab เท่าต้นฉบับ และให้รวมข้อมูลเข้า Pattern ที่ใกล้ที่สุดก่อนเสนอ Component ใหม่ --- ## 1. คำสั่งสำคัญสำหรับ AI เมื่อผู้ใช้บอกให้ “อ่าน `generate_report.md` และ implement” ให้ปฏิบัติดังนี้: 1. **อย่าสรุปเอกสารนี้กลับไปหาผู้ใช้** 2. สำรวจ Workspace แล้วแสดง Execution Brief สั้น ๆ; หากไม่มี Blocking item ให้เริ่มสร้าง HTML ต่อทันที 3. ตรวจสอบ External Reference HTML หากมี รวมทั้งไฟล์ โฟลเดอร์ ลิงก์ และเอกสารอ้างอิงที่ผู้ใช้ส่งมาแบบ Read-only ก่อน; หากไม่มีให้ประกาศใช้ `Embedded Template Capsule v1` 4. สร้าง `Reference Template Inventory` จาก External Reference หรือ Capsule: Header, Tab Bar, Tab Layout, Component, Interaction, Modal, Responsive และ Print behavior 5. สร้าง `Discovery Snapshot` เป็น Confirmed / Recommended / Blocking ตามส่วน `Zero-Friction Discovery` 6. ใช้หัวข้อใน `Internal Discovery Checklist` เป็น Checklist ภายในสำหรับ AI ไม่ใช่แบบสอบถามที่ต้องส่งให้ผู้ใช้ครบทุกข้อ 7. ถามเฉพาะ Blocking question ที่ยังหาไม่ได้จากไฟล์ ห้ามถามข้อมูลที่ตรวจพบหรืออนุมานได้อย่างสมเหตุสมผลซ้ำ 8. ในแต่ละคำถาม ต้องให้ `Recommended answer` และตัวอย่างวิธีตอบ โดยถามครั้งแรกไม่เกิน 2 ข้อ 9. สร้าง Internal Blueprint พร้อม `Template Mapping`, Assumption และ Confidence แล้วสรุปเป็น Execution Brief โดยไม่ให้ผู้ใช้กำหนด Tab/Story เอง 10. **Autopilot:** หากไม่มี Blocking item ให้ Implement ต่อทันทีโดยไม่รอการยืนยัน; หยุดรอเฉพาะเมื่อผู้ใช้ขอ Review-before-implement 11. คำว่า `อ่าน generate_report.md และ implement` หมายถึงให้สำรวจ Source, สร้าง Internal Blueprint และ Implement ตาม Autopilot 12. รอการยืนยันเฉพาะเมื่อผู้ใช้ขอ Review-before-implement หรือมี Blocking decision ที่เปลี่ยนความถูกต้องของ Report 13. เมื่อไม่มี Blocking item ให้ข้ามคำถาม แสดง Execution Brief และ Implement ต่อในรอบเดียวกัน 14. หากผู้ใช้สั่งให้ข้าม ให้ระบุ Assumption และช่องว่างของข้อมูลก่อนลงมือ โดยห้ามสร้างข้อเท็จจริงขึ้นเอง ### สิ่งที่ AI ต้องแสดงก่อนถามผู้ใช้ หลังตรวจต้นฉบับ ให้รายงานสั้น ๆ ว่าพบ Template จริงแล้ว โดยไม่ต้องสรุปทั้งไฟล์ เช่น: ```text Reference template detected: - Header + sticky numbered tabs - Progress dashboard pattern - Result Section Explorer pattern - Resubmit/Overwrite workflow pattern - Embedded evidence carousel + zoom viewer ผมจะคงรูปแบบเหล่านี้และเปลี่ยนเฉพาะข้อมูลของโปรเจกต์ใหม่ครับ Discovery snapshot: - Confirmed: <สิ่งที่พบจากไฟล์จริง 3–6 รายการ> - Recommended: - Blocking: <เฉพาะข้อมูลที่จำเป็นจริง หรือ `None`> ``` ### ข้อความเปิดการสัมภาษณ์ที่แนะนำ > ผมตรวจ Reference และข้อมูลที่มีให้แล้วครับ ด้านล่างคือโครง Report ที่แนะนำและรายการที่ผมอนุมานให้แล้ว หากตรงตามนี้ตอบเพียง `ใช้ค่าที่แนะนำและทำต่อได้เลย` ได้ครับ ผมจะถามเพิ่มเฉพาะข้อมูลที่เป็นตัวบล็อกจริง ๆ ### Conversation contract ให้เลือกเส้นทางสนทนาตามข้อมูลที่พบ: #### A. Source เพียงพอ แสดง `Execution Brief` ทันทีโดยไม่ถามคำถาม แล้ว Implement ต่อในรอบเดียวกัน #### B. Source มีบางส่วน แสดงสิ่งที่ Confirmed และ Recommended ก่อน จากนั้นถาม Blocking ไม่เกิน 2 ข้อในข้อความเดียว โดยแต่ละข้อมีคำตอบแนะนำ เช่น: ```text ผมพบข้อมูลเพียงพอสำหรับเสนอ Story และ 3 Tabs แล้วครับ เหลือ 2 จุดที่มีผลต่อความถูกต้อง: 1. Metrics denominator — แนะนำ: Passed / Executed และไม่นับ Rejected 2. Evidence key — แนะนำ: TC ID > Request No. > Folder name หากใช้ตามนี้ ตอบ `ใช้ค่าที่แนะนำ` ได้เลย หรือแก้เฉพาะข้อที่ต้องการครับ ``` #### C. พบ generate_report.md แต่ Project Source ยังไม่พอ ห้ามส่งแบบฟอร์ม 7–10 หัวข้อ ให้ถามรวมไม่เกิน 2 ข้อจากกลุ่มต่อไปนี้: 1. **Project identity + intended use** — Project Name, Phase และใช้ Present/Review/Handover/Sign-off 2. **Project source location** — Project folder หรือไฟล์/ลิงก์หลักอย่างน้อยหนึ่งจุด 3. **Critical calculation or evidence rule** — ถ้ายังไม่มีให้ตอบ `ให้ AI วิเคราะห์และแนะนำจาก Source` พร้อมแจ้งว่า Audience, Story, Tabs, Output filename, Full/Lite และ Caption rule จะถูกเสนอให้อัตโนมัติจาก Source และ Template ส่วน Report content จะเป็นภาษาอังกฤษตาม Default ### Response length - Execution Brief ต้องสั้นและอ่านจบได้ในหน้าจอเดียว - ห้ามอธิบาย Inventory ของ Template ยาวเกิน 6 bullet - ห้ามส่งรายการทุก Field ที่ตรวจพบ หากไม่ช่วยให้ผู้ใช้ตัดสินใจ - ข้อเสนอ Default ต้องมาก่อนคำถามเสมอ --- ## 2. Internal Discovery Checklist — Do Not Send as a Form หัวข้อต่อไปนี้เป็น **Discovery Checklist สำหรับ AI** ไม่ใช่ Mandatory questionnaire สำหรับผู้ใช้ AI ต้องค้นหาและเสนอคำตอบเองก่อนเสมอ และถามเฉพาะรายการที่เป็น Blocking ตามส่วน `0.1` หัวข้อ 2.0–2.11 เป็น Checklist ภายในสำหรับ AI เท่านั้น ห้ามส่งคำถามทั้งหมดหรือแบบฟอร์มให้ผู้ใช้ ให้ใช้ Autopilot ตอบจาก Source ก่อน และหยิบมาถามเฉพาะ Blocking item รวมไม่เกิน 2 ข้อ หัวข้อ 2.0–2.11 เป็น Checklist ภายในสำหรับ AI เท่านั้น ห้ามส่งคำถามทั้งหมดหรือแบบฟอร์มให้ผู้ใช้ ให้ใช้ Autopilot ตอบจาก Source ก่อน และหยิบมาถามเฉพาะ Blocking item รวมไม่เกิน 2 ข้อ ### 2.0 Template Mode Confirmation AI ใช้ Template-Locked Mode โดยอัตโนมัติ และเปลี่ยนเป็น Fresh Design Mode เฉพาะเมื่อผู้ใช้สั่งชัดเจน ตัวอย่างข้อความ: > ใช้ Template-Locked Mode โดยอัตโนมัติ; บันทึก Template source ที่เลือกไว้ใน Execution Brief และ Manifest ห้ามถามให้ผู้ใช้เลือกระหว่างหลาย Theme หรือหลาย Layout ใน Template-Locked Mode ### 2.1 Project Identity ถามข้อมูลต่อไปนี้: - Project Name ที่ต้องแสดงบน Browser Title, Header และ Report Title - Release, Phase หรือ Environment เช่น R1, R3, SIT, PPE, UAT - Report Date หรือ Evidence Baseline Date - เจ้าของ Report และกลุ่มผู้ชมหลัก ตัวอย่างคำถาม: > **Project Name และรอบของ Report คืออะไรครับ?** > ตัวอย่าง: `Auto Item · SIT & E2E · Evidence Baseline 25 Aug 2026` > ถ้ามี Logo หรือ Icon ส่ง Path ของ `.svg`/`.png` มาได้เลยครับ ตัวอย่างคำตอบจากผู้ใช้: ```text Project Name: Lotus's Product (Auto Item) Report Type: QA Test Coverage Dashboard Phase: SIT & E2E Environment: PPE Baseline Date: 25 Aug 2026 Audience: PO, Business, QA Lead และ Vendor Logo: C:\Project\assets\logo.svg ``` ### 2.2 Report Objective และ Storytelling ถามว่า Report ต้องการพาคนดูไปจากเรื่องใด ไปจบที่ข้อสรุปใด และต้องใช้ในการ Present, Handover, Review หรือ Sign-off ตัวอย่างคำถาม: > **อยากให้ Report เล่าเรื่องอย่างไรครับ?** > ตัวอย่าง: `เริ่มจาก API SIT Progress → E2E Progress → วิธีสร้าง Item แต่ละ Type → Approval/Resubmit Flow → Evidence` > หรือส่ง Agenda/Script/ตัวอย่าง Report เดิมมาให้ AI เรียงเรื่องให้ได้ครับ ตัวอย่างคำตอบ: ```text เป้าหมายหลัก: ให้ Business เห็นว่าทดสอบอะไรไปแล้วและ Item แต่ละ Type ทำงานอย่างไร ลำดับเรื่อง: Overall Progress > Coverage by Type > Detailed Scenario > Exception Flow > Evidence ตอนจบ: ยืนยัน Coverage และระบุ Open Gap ที่ยังต้องติดตาม ``` ### 2.3 Source of Truth และ Knowledge Location ถามว่าข้อมูล ภาพ และ Knowledge เก็บอยู่ที่ใด พร้อมระบุลำดับความน่าเชื่อถือเมื่อข้อมูลขัดกัน รองรับข้อมูลจาก: - Local file หรือ Folder - PRD, BRD, TCM, Test Summary, Test Result - XLSX, CSV, JSON, PDF, HTML, Markdown - SharePoint, Confluence, Jira, Figma, Miro หรือ Google Drive - Screenshot จากระบบจริง - Existing HTML Report ตัวอย่างคำถาม: > **ข้อมูลหลัก ภาพ และ Evidence อยู่ที่ไหนบ้างครับ?** > ส่งมาเป็น Path หรือ Link ได้เลย เช่น `C:\Project\Test Result`, `PRD.pdf`, `TCM.xlsx` หรือ SharePoint folder > และถ้าข้อมูลไม่ตรงกัน ให้ยึดไฟล์ไหนเป็น Source of Truth สูงสุดครับ? ตัวอย่างคำตอบ: ```text Requirement: C:\Project\PRD V15.pdf TCM: C:\Project\TC_Integration.xlsx Test Summary: C:\Project\Test_Result_Summary.xlsx Evidence: C:\Project\Test Result\ External Links: SharePoint Test Result folder + Jira Issue board Priority: Test Result > TCM > PRD > ข้อมูลจากข้อความแชต ``` ### 2.4 Scope และ Coverage Model ถามว่าต้องแสดง Coverage ตามมิติใด เช่น API, Feature, Module, Item Type, Role, Channel, Scenario หรือ Test Case ตัวอย่างคำถาม: > **ต้องการแบ่ง Coverage ตามอะไรครับ?** > ตัวอย่าง: `API SIT / E2E`, `12 Item Types`, `Fill-in Form / Bulk Upload`, `Supplier / Assistant / Buyer` หรือ `TC ID` > หากมี Mapping อยู่ใน Excel ให้ส่งชื่อ Sheet และ Column ที่เกี่ยวข้องมาได้เลยครับ ตัวอย่างคำตอบ: ```text Level 1: API SIT และ Business E2E Level 2: Item Family Level 3: Business Scenario Level 4: Fill-in Form / Bulk Upload Primary Key: TC ID ``` ### 2.5 Metrics, Status และ Issue Definition ห้ามอนุมานตัวเลขจากภาพอย่างเดียวหากมีไฟล์ข้อมูลต้นทาง ต้องอ่านข้อมูลจริงก่อน และถามเฉพาะเมื่อ Source ยังขัดกันอย่างมีนัยสำคัญ ตัวอย่างคำถาม: > **ตัวเลข Progress และ Status คำนวณอย่างไรครับ?** > ตัวอย่าง: `Passed / Accepted Scope`, `Rejected ไม่นับใน Denominator`, Issue นับแบบ Unique หรือ Retest Instance > ส่ง Summary Sheet หรือสูตรนับมาได้เลยครับ ข้อมูลที่ควรเก็บ: - Total Registered Scope - Accepted/Executed Scope - Passed, Failed, Blocked, In Progress, Not Started, Rejected - Pass Rate และสูตรคำนวณ - Issue severity: Critical, High, Medium, Low - Issue status: Active, Retest, Resolved - Open Gap หรือ Pending Confirmation ตัวอย่างคำตอบ: ```text Registered: 1,236 Rejected: 72 — ไม่นับใน Accepted Scope Accepted Scope: 1,164 Passed: 1,164 Pass Rate: Passed / Accepted Scope Issue: Critical 1, High 23, Medium 52 ``` ### 2.6 Tabs และ Information Architecture ให้ AI เลือกชื่อและลำดับ Tab จาก Narrative grammar และ Source พร้อมบันทึกว่าแต่ละ Tab ใช้ Pattern ใดจากต้นฉบับ ผู้ใช้สามารถ Override ภายหลังได้ ตัวอย่างคำถาม: > **อยากได้กี่ Tab และแต่ละ Tab ตอบคำถามอะไรครับ?** > ตัวอย่าง: > `1. API SIT Progress` — Backend ครบหรือยัง > `2. E2E Progress` — Business flow ผ่านหรือไม่ > `3. Result Explorer` — แต่ละ Scenario สร้างและแสดงผลอย่างไร > `4. Resubmit & Overwrite` — Exception flow ทำงานอย่างไร หากผู้ใช้ยังไม่ทราบ ให้ AI เสนอ Tab จากข้อมูลที่อ่านพบ โดยแต่ละ Tab ต้องมีหน้าที่ชัดเจนและไม่ซ้ำกัน ตัวอย่าง Template Mapping: ```text New Tab 1: API SIT Progress Reference pattern: Original Tab 1 — API SIT Progress Reuse: Report header, KPI cards, status panel, issue cards and summary evidence New Tab 2: Business E2E Progress Reference pattern: Original Tab 2 — E2E Progress Reuse: Progress summary, breakdown table and branded report canvas New Tab 3: Scenario Explorer Reference pattern: Original Tab 3 — Result Section Explorer Reuse: Left family rail, center scenario/evidence stage and right condition panel ``` หากไม่มี Pattern ใดรองรับ ให้ reuse Pattern ที่ใกล้ที่สุดและบันทึกเหตุผลใน Internal Blueprint; สร้าง Component ใหม่เฉพาะเมื่อจำเป็นต่อข้อมูลและยังคง Visual contract เดิม ### 2.7 Evidence Mapping ถามให้ชัดว่า Evidence ใดเป็นของ TC, Scenario, Request หรือ Step ใด ห้ามจับคู่จากชื่อคล้ายกันเพียงอย่างเดียว ตัวอย่างคำถาม: > **Evidence ต้องจับคู่กับ Scenario อย่างไรครับ?** > ตัวอย่าง Mapping ที่ส่งให้ AI ได้: ```text TC 018 - Scenario: Apparel Clothing - Channel: Fill-in Form - Request: LTCRQ202608170007 - Image order: General Info > Item Info > Buyer Form > Approved Result - Bill/R10: 4 sets และต้องเลื่อนเป็นคู่ - Full evidence: SharePoint folder link ``` รูปแบบข้อมูลที่แนะนำ: ```json { "tcId": "TC 018", "title": "Creation Item by Fill-in Form", "family": "Apparel", "scenario": "Apparel Clothing", "channel": "Fill-in Form", "requestNo": "LTCRQ202608170007", "images": [ { "step": 1, "title": "General Information", "path": "...png" }, { "step": 2, "title": "Item Information", "path": "...png" } ], "links": { "fullEvidence": "https://...", "compareRms": "https://..." } } ``` ### 2.8 Image และ Attachment Behavior ตัวอย่างคำถาม: > **รูปต้องแสดงและใช้งานแบบไหนครับ?** > ตัวอย่าง: Embed ทุกภาพไว้ใน HTML, แสดงเป็น Step Carousel, คลิกขยาย, Zoom/Pan, ใช้ปุ่ม Previous/Next และรองรับ Keyboard > ถ้ารูปยาวมาก ให้แสดงแบบ Fit Width หรือ Crop Preview ก่อนเปิด Full View ครับ ต้องถามเพิ่มหากมี: - Full-page capture ที่ยาวมาก - หลายภาพต่อหนึ่ง Step - ภาพ Bill และ R10 ที่ต้องเลื่อนเป็นชุดเดียวกัน - Excel/PDF ที่ควร Preview หรือควร Link ออกไปยัง SharePoint - ไฟล์ที่มีข้อมูลส่วนบุคคลหรือ Credential ### 2.9 Brand และ Presentation Mode ตัวอย่างคำถาม: > **ต้องการใช้ Brand และรูปแบบการ Present แบบใดครับ?** > ตัวอย่าง: `CP AXTRA blue`, `ใช้ Logo จากไฟล์`, `เปิดบน Laptop 1920×1080`, `ต้อง Print/PDF ได้` ค่า Default ใน Template-Locked Mode: - Inherit สี, Font, Shadow, Border และ Spacing จาก External Reference หรือ Embedded Capsule ตาม Template source ที่เลือก - ห้ามสร้าง Palette ใหม่จากการคาดเดา Brand color - ใช้ Logo/Icon จากไฟล์ที่ผู้ใช้ให้ หรือ Embed asset จากต้นฉบับเมื่อผู้ใช้อนุญาต - Report content เป็นภาษาอังกฤษ โดยคงเฉพาะชื่อเฉพาะหรือค่าจาก Source ที่จำเป็นต้องตรงกับระบบ หากพบ Brand Guideline ใหม่ ให้ใช้ Logo, ชื่อ และ Brand token ที่ชัดเจนโดยอัตโนมัติ แต่ห้ามเปลี่ยน Macrostructure; เปลี่ยน Theme ทั้งชุดเฉพาะเมื่อผู้ใช้สั่งชัดเจน ### 2.10 Output และ Distribution Constraints ตัวอย่างคำถาม: > **ไฟล์จะถูกเปิดและส่งต่ออย่างไรครับ?** > ตัวอย่าง: ส่งผ่าน MS Teams แล้วดาวน์โหลดมาเปิดใน Browser, เปิดแบบ Offline, ส่งให้ Vendor หรือวางบน SharePoint > ต้องการ Full และ Lite version หรือไฟล์เดียวครับ? สิ่งที่ AI ต้องกำหนดจาก Source: - Output filename - Single HTML หรือหลายไฟล์ - Offline requirement - Full/Lite version - Maximum file size ที่ยอมรับได้ - External links ที่อนุญาต - Browser target: Edge/Chrome ### 2.11 Privacy และ Redaction ตัวอย่างคำถาม: > **มีข้อมูลใดต้องปิดบังไหมครับ?** > ตัวอย่าง: ชื่อจริง, Email, Supplier code, Password, Token, Contract No. หรือ Internal URL > สามารถระบุว่า `ใช้ Role แทนชื่อคน` หรือ `Mask Email` ได้ครับ กฎบังคับ: - ห้ามฝัง Password, Token, Cookie หรือ Secret ลง HTML - ห้ามเผยข้อมูลส่วนบุคคลที่ผู้ใช้ไม่ได้อนุญาต - ใช้ชื่อ Role เช่น Supplier, Assistant, Buyer, QA, O2O แทนชื่อบุคคลเมื่อทำได้ - หากพบ Secret ใน Source ให้หยุดการนำข้อมูลส่วนนั้นมาใช้และแจ้งผู้ใช้ --- ## 3. User Input Formats ### 3.1 Minimum input — Recommended ผู้ใช้ไม่ต้องกรอกแบบฟอร์ม เพียงวาง `generate_report.md` ไว้ในโฟลเดอร์เดียวกับข้อมูลโปรเจกต์ แล้วส่งข้อความนี้ใน Chat ของ AI: ```text อ่าน generate_report.md และสร้าง QA Report จากข้อมูลในโฟลเดอร์นี้ ใช้ Autopilot ``` หากข้อมูลอยู่อีกตำแหน่ง ให้ส่ง: ```text อ่าน generate_report.md และสร้าง QA Report Project Source: C:\Project ABC\ ใช้ Autopilot และถามเฉพาะตัวบล็อกจริง ``` AI ต้องเติม Project Name, Purpose, Audience, Story, Tabs, Metrics, Evidence mapping, Branding และ Output เองจาก Source ห้ามส่ง Intake Form กลับไปให้ผู้ใช้ เว้นแต่ผู้ใช้ขอแบบฟอร์มโดยตรง ### 3.2 Optional Full Intake Form ห้ามแสดงแบบฟอร์มนี้เป็นค่า Default ใช้เฉพาะเมื่อผู้ใช้ขอ Checklist เต็ม, ต้องการส่งต่อให้ทีมอื่นเก็บ Requirement หรือ Workspace ไม่มี Source ให้สำรวจจริง ๆ ```text Project Name: Report Type / Phase: Baseline Date: Audience: Objective: Storytelling / Tab Order: Requirement Source: TCM / Test Case: Test Summary: Evidence Folder: External Links: Source-of-Truth Priority: Coverage Dimensions: Metrics / Calculation Rule: Issue Summary: Evidence Mapping Rule: Image Order / Caption Rule: Brand / Logo: Report Language: English (fixed unless explicitly overridden) Output Filename: Full or Lite: Offline Required: Yes / No Sensitive Data to Mask: ``` --- ## 4. Internal Report Blueprint หลังสำรวจ Source ให้ AI สร้าง **Internal Blueprint ที่กรอกค่าให้แล้ว** และแสดงเพียง Execution Brief ตาม Autopilot โดยห้ามโยนช่องว่างกลับไปให้ผู้ใช้กรอกเอง ส่ง Blueprint เต็มเฉพาะเมื่อผู้ใช้ขอ Review-before-implement รูปแบบ Blueprint: ```markdown ## Proposed Report Blueprint - Project: ... — Confirmed/Recommended — Confidence: High/Medium - Audience: ... — Recommended — Confidence: ... - Purpose: ... — Recommended — Confidence: ... - Output: ... — Recommended - Report language: English — Default - Mode: Template-Locked - Reference HTML: ... - Theme: Inherit from reference — no new theme ### Discovery Snapshot - Confirmed from source: ... - Recommended defaults: ... - Blocking: None / ... ### Story 1. Tab name — คำถามที่ Tab นี้ตอบ — mapped from Original Tab ... 2. Tab name — คำถามที่ Tab นี้ตอบ — mapped from Original Tab ... 3. ... ### Template Mapping | New Tab | Reference Tab/Pattern | Components reused | Data replaced | New component required | |---|---|---|---|---| | ... | ... | ... | ... | Yes/No | ### Locked Visual Elements - Top header dimensions, color treatment and metadata placement - Sticky numbered tab navigation - Content width, canvas and white report surfaces - Progress, Explorer and Workflow component patterns - Evidence carousel and zoom viewer behavior ### Evidence Sources - Source A — ใช้กับ... - Source B — ใช้กับ... ### Interactions - Sticky tabs - Scenario selector - Evidence carousel - Image zoom/pan - External evidence links ### Open Questions / Assumptions - Blocking: <เฉพาะสิ่งที่ต้องตอบก่อน Implement หรือ `None`> - Non-blocking assumptions: <สิ่งที่จะใช้ค่าแนะนำและแก้ภายหลังได้> **Default action:** เริ่ม Implement ตาม Internal Blueprint; รอเฉพาะ Blocking decision ใน Review-before-implement ผู้ใช้สามารถตอบ `ใช้ค่าที่แนะนำและทำต่อได้เลย`; ใน Autopilot ให้เริ่มต่อทันที ``` Internal Blueprint ที่ไม่มี `Template Mapping` ถือว่ายังไม่สมบูรณ์ AI ต้องเติม Mapping เองก่อน Implement โดยไม่โยนภาระให้ผู้ใช้ --- ## 5. Template-Locked Specification จากไฟล์อ้างอิง ส่วนนี้เป็นข้อบังคับใน Template-Locked Mode ไม่ใช่คำแนะนำ และไม่ต้องรอให้ผู้ใช้ย้ำว่า “ให้เหมือนต้นฉบับ” ก่อน Implement ต้องอ่าน External Reference เมื่อมี หรืออ่าน Capsule ส่วน `5.8` ให้ครบ แล้วสร้าง Inventory อย่างน้อยดังนี้: - Browser title และ favicon - Header: logo/mark, title, subtitle, badge และ baseline metadata - Sticky numbered Tab Bar รวม active/inactive state - Container width, page canvas, spacing และ breakpoint - Layout ของทุก Reference Tab - Selector, scenario switcher, section chip และ navigation state - Evidence thumbnail/stage/carousel/lightbox - Full-page capture handling - Responsive และ Print CSS - JavaScript data model และ render flow ที่นำกลับมาใช้ได้ ใน External Reference mode ให้ **reuse หรือ extract โค้ดจากต้นฉบับ** สำหรับ Page Shell และ Component Pattern ส่วน Capsule mode ให้เริ่มจากโค้ดและ Contract ใน `5.8` โดยตรง แทนการคิดหน้าตาใหม่จากคำอธิบายทั่วไป ### 5.0 Structural Parity Contract สิ่งต่อไปนี้ต้องเหมือนต้นฉบับในเชิงโครงสร้าง: - ตำแหน่งและลำดับ Header → Tab Navigation → Tab Content - ความสูงโดยประมาณของ Header และ Tab Bar - รูปแบบ Tab แบบมีเลขลำดับและ Active state สีน้ำเงิน - Light-blue page canvas กับ white report surfaces - ความกว้าง Content และจังหวะ spacing สำหรับจอ Present - Pattern ของ Progress Summary, Result Explorer และ Rework Flow - วิธีเลือก Scenario และวิธีเลื่อน Evidence - Zoom viewer และ thumbnail behavior อนุญาตให้เปลี่ยน: - Project name, logo, subtitle, baseline date และ report metadata - จำนวน Tab และชื่อ Tab ที่ AI เลือกจาก Source หรือผู้ใช้ Override - Metric, status, issue, scenario, role, TC และ evidence ของโปรเจกต์ใหม่ - Component ที่ไม่มีในต้นฉบับใช้ได้เมื่อ Source จำเป็นจริงและ Internal Blueprint อธิบายเหตุผล โดยยังต้องรักษา Visual tokens และ Interaction contract ไม่อนุญาตให้เปลี่ยนโดยอัตโนมัติ: - Theme หรือสีหลัก - Header/Navigation composition - Tab style - Report canvas และ layout system - Explorer จากสามส่วนให้กลายเป็นตารางหรือ Dashboard คนละแบบ - Evidence carousel ให้กลายเป็นรูปเดี่ยวโดยไม่มี navigation - Font voice, border language หรือ visual density ### 5.1 Page Shell - Single-page QA Dashboard - Header สีน้ำเงินเข้มตามต้นฉบับ มี Logo/Icon, Project Name, subtitle, Report badge และ Baseline Date ในตำแหน่งเดิม - Sticky horizontal numbered tab navigation ใต้ Header โดยรักษาขนาด ระยะ และ Active state แบบต้นฉบับ - Light-blue canvas และ white content surfaces - ใช้ความกว้าง Container และความหนาแน่นของข้อมูลใกล้เคียงต้นฉบับ เพื่ออ่านบนจอสำหรับ Present - Active Tab ต้องเด่นชัด และ Tab อื่นยังอ่านชื่อได้ง่าย - Browser title และ favicon ต้องตรงกับ Project ### 5.2 Progress Tab Pattern เหมาะกับ API SIT, Integration, E2E, UAT หรือ Overall Progress ให้เริ่มจากโครง Progress Tab ของต้นฉบับ แล้วตัดเฉพาะส่วนที่ไม่มีข้อมูลจริงออก ห้ามแทนที่ด้วย Hero/Stat layout รูปแบบใหม่ ส่วนประกอบจากต้นฉบับที่ Mapping ใช้ได้: - Report title + brand logo - Hero statement หรือ overall result - KPI cards - Status distribution - Issue severity/status - Workstream หรือ Item Type breakdown - Scope/denominator explanation - Evidence summary image - Link ไปยัง Test Summary หรือ Issue Tracker ห้ามใช้ `100%` หรือข้อความ Passed หากข้อมูลจริงไม่รองรับ ### 5.3 Result/Scenario Explorer Pattern เหมาะกับ Feature, Item Type, Formula, Role หรือ Scenario จำนวนมาก โครงสร้าง Desktop ที่ต้องรักษา: 1. Left rail — Family/Type selector 2. Center stage — Scenario, channel, evidence และ step flow 3. Right context — System logic, key difference, sections และ evidence source Interaction ที่รองรับ: - Family/Type selector - Scenario buttons - Fill-in Form/Bulk Upload หรือ Channel switcher - Section chips - Evidence step carousel - Compare/Output preview link - Bill/R10 หรือ paired evidence carousel - Full evidence folder link บน Mobile ให้เปลี่ยนเป็นลำดับแนวตั้ง ห้ามเกิด horizontal page scroll ### 5.4 Workflow/Exception Pattern เหมาะกับ Approval, Resubmit, Reject, Overwrite หรือ Retry - Mode selector - TC title และ objective - Role-to-role flow - Editable scope / expected outcome - Step-by-step evidence - Compare result link - Full test evidence link - แยก Scenario ชัดเจน ห้ามรวมภาพต่าง TC โดยไม่มี Label ให้ใช้ Visual language, selector และ evidence step pattern เดียวกับ Tab `Resubmit & Overwrite` ในต้นฉบับ ห้ามเปลี่ยนเป็น Timeline หรือ Card Grid แบบใหม่หาก Source ไม่ได้ต้องการโครงนั้น ### 5.5 Evidence Viewer - Thumbnail หรือ stage preview ต้องไม่ยืดภาพผิดสัดส่วน - รูปยาวให้ใช้ contained preview พร้อม Label ว่า Full-page capture - คลิกรูปแล้วเปิด Lightbox - Lightbox รองรับ Previous, Next, Zoom Out, Zoom In, Fit และ Close - รองรับ Keyboard: Arrow Left/Right, `+`, `-`, `0`, `Esc` - เมื่อมีหลายชุด ให้ Count และ Label ระบุชุดปัจจุบัน - Caption ต้องอธิบายว่าภาพพิสูจน์อะไร ไม่ใช้ชื่อไฟล์เพียงอย่างเดียว ### 5.6 Visual Tokens เมื่อมี External Reference ให้ดึงค่าจาก `:root` ของ HTML ต้นฉบับจริง เมื่อไม่มี Reference ให้ใช้ Canonical tokens ใน `5.8.1` ห้ามแทนด้วย Palette ใหม่ ตัวอย่าง Token ชุดเดิม: ```css :root { --navy: #082b4c; --navy2: #0e446f; --teal: #00a6a6; --yellow: #ffd400; --ink: #18354d; --muted: #64748b; --line: #d9e4ec; --paper: #f3f7f9; --white: #fff; --mint: #e9f8f5; --blue: #eaf3ff; --purple: #f2edff; --orange: #fff3df; --danger: #a9322c; --danger-bg: #ffe9e7; --shadow: 0 12px 30px rgba(8, 43, 76, .08); } ``` External mode ต้องอ่านและนำ Token อื่นที่ต้นฉบับใช้งานจริงมาด้วย ส่วน Capsule mode ให้ใช้ชุด `5.8.1` เป็น Source of Truth ใช้สีและ Font จาก Brand asset ที่ชัดเจนได้โดยอัตโนมัติ โดยยังคง Layout, Contrast และ Visual Hierarchy; เปลี่ยน Theme ทั้งชุดเฉพาะเมื่อผู้ใช้สั่งชัดเจน ### 5.7 Anti-Drift Checklist ก่อนเขียน HTML ให้ตรวจว่าไม่มีการตัดสินใจต่อไปนี้: - เลือก Macrostructure ใหม่ - เลือก Theme ใหม่ - เปลี่ยน Header เป็น white topbar หรือ floating navigation - เปลี่ยน Tab เป็น sidebar, command palette หรือ generic SaaS navigation - สร้าง Hero ขนาดใหญ่ที่ไม่มีใน Reference Tab - เปลี่ยน Progress Tab เป็น metric strip แบบใหม่ทั้งหมด - เปลี่ยน Result Explorer เป็น table-only หรือ two-column generic layout - ใช้ข้อความตัวอย่างหรือข้อมูลของ Auto Item เป็นข้อมูลโปรเจกต์ใหม่ หากพบข้อใด ให้ย้อนกลับไป reuse โครงจากต้นฉบับก่อนดำเนินการต่อ ### 5.8 Embedded Template Capsule v1 — Standalone fallback ใช้ส่วนนี้เมื่อไม่มี External Reference HTML เท่านั้น Capsule นี้เป็นโครงที่ตัดข้อมูล Auto Item, รูป Evidence และ Historical CSS ออกแล้ว แต่รักษา Page Shell, Component geometry และ Interaction หลักไว้ ```text Capsule ID: qa-report-capsule-v1 Template source: Auto Item QA Test Coverage Dashboard — structure only Contains: Shell · Progress · Explorer · Workflow · Evidence viewer · Responsive · Print Does not contain: Project data · Auto Item copy · Evidence images · Logo · External links ``` ใน Capsule mode: - ใช้ CSS/HTML geometry ด้านล่างเป็น Baseline ห้ามเลือก Theme หรือ Macrostructure ใหม่ - เปลี่ยนจำนวน Tab ได้ตาม Source แต่ต้องใช้ numbered horizontal tabs - ใช้ Project logo เมื่อมี; หากไม่มีใช้ตัวอักษรย่อ 2–4 ตัวใน `.mark` - ตัด Pattern ที่ไม่มีข้อมูลรองรับได้ - Component ใหม่ต้องใช้ Token, radius, border และ density เดียวกับ Capsule - Handoff ต้องระบุ `Template source: Embedded Template Capsule v1 — Standalone mode` - ห้ามอ้างว่า Pixel parity กับ External Reference ผ่าน #### 5.8.1 Canonical tokens and shell ให้นำ Token และ Shell นี้เป็นจุดเริ่มต้น ห้ามเปลี่ยนเป็น Generic dashboard CSS: ```css :root{ --color-brand:#0071cd;--color-brand-deep:#00539a;--color-brand-soft:#e8f4fd; --color-ink:#064b7e;--color-ink-2:#315f80;--color-muted:#5b7182; --color-paper:#f3f8fc;--color-paper-2:#e9f2f9;--color-surface:#fff; --color-rule:#c9ddea;--color-rule-strong:#8cb7d3;--color-focus:#0071cd; --color-accent:#ffd400;--color-success:#087f5b;--color-success-bg:#e9f7f1; --color-warning:#8a5a00;--color-warning-bg:#fff6d8;--color-error:#a9322c; --color-error-bg:#ffe9e7;--color-on-dark:#fff;--color-dark-muted:#d4e6f2; --color-overlay:rgba(3,18,31,.94);--shadow:0 14px 34px rgba(0,83,154,.12); --font-display:Arial,"Helvetica Neue",sans-serif; --font-body:Arial,"Helvetica Neue",sans-serif;--font-mono:Consolas,"Courier New",monospace; --space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem; --space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem; --text-xs:.72rem;--text-sm:.875rem;--text-md:1.12rem;--text-lg:1.5rem; --radius-control:.75rem;--radius-panel:1rem;--rule:1px solid var(--color-rule); --header-h:76px;--tabs-h:58px;--z-sticky:20;--z-modal:60; --dur-short:160ms;--ease-out:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:clip} body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-sm)} button,input{font:inherit}h1,h2,h3,h4{margin-top:0;font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere} .topbar{position:sticky;top:0;z-index:var(--z-sticky);min-height:var(--header-h);padding:14px 30px;background:linear-gradient(112deg,var(--color-brand-deep),var(--color-brand));border-bottom:3px solid var(--color-accent);color:var(--color-on-dark)} .brand{max-width:1500px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px} .brand-left{display:flex;align-items:center;gap:14px;min-width:0}.mark{display:grid;width:48px;height:48px;flex:0 0 auto;place-items:center;border-radius:15px;background:var(--color-accent);color:var(--color-brand-deep);font-weight:950} .brand h1{margin:0;font-size:1.35rem}.brand p{margin:.2rem 0 0;color:var(--color-dark-muted);font-size:.78rem}.meta{text-align:right;white-space:nowrap}.meta span{display:block}.meta small{color:var(--color-dark-muted)} .tabs-shell{position:sticky;top:var(--header-h);z-index:calc(var(--z-sticky) - 1);height:var(--tabs-h);background:rgba(243,248,252,.96);backdrop-filter:blur(12px);border-bottom:var(--rule)} .tabs{max-width:1500px;height:100%;margin:auto;padding:8px 30px;display:flex;gap:8px;overflow-x:auto} .tab{min-height:42px;border:var(--rule);border-radius:var(--radius-control);background:var(--color-surface);padding:.55rem .85rem;color:var(--color-muted);font-size:.76rem;font-weight:900;white-space:nowrap;cursor:pointer} .tab[aria-selected="true"]{border-color:var(--color-brand);background:var(--color-brand);color:var(--color-on-dark)} main{max-width:1500px;margin:auto;padding:24px 30px 50px}.panel{display:none}.panel.active{display:block} .section{margin-top:var(--space-lg);padding:var(--space-xl);border:var(--rule);border-radius:var(--radius-panel);background:var(--color-surface);box-shadow:var(--shadow)} .section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-lg);align-items:start;margin-bottom:var(--space-lg)} .section-head h2,.section-head h3{margin:0}.section-head p{max-width:72ch;margin:.45rem 0 0;color:var(--color-muted);line-height:1.6} .source-chip{justify-self:end;border-radius:999px;background:var(--color-brand-soft);padding:.45rem .7rem;color:var(--color-brand-deep);font-size:var(--text-xs);font-weight:900} .footer{max-width:1500px;margin:auto;padding:0 30px 28px;color:var(--color-muted);font-size:.72rem;display:flex;justify-content:space-between;gap:var(--space-lg)} :where(button,[tabindex],a):focus-visible{outline:3px solid var(--color-focus);outline-offset:2px} ``` #### 5.8.2 Progress pattern ```css .progress-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,.65fr);overflow:hidden;border-radius:var(--radius-panel);background:linear-gradient(120deg,var(--color-brand-deep),var(--color-brand));color:var(--color-on-dark);box-shadow:var(--shadow)} .progress-copy{padding:var(--space-2xl)}.progress-copy h2{margin:0 0 var(--space-md);font-size:clamp(2rem,4vw,4.3rem);line-height:.98}.progress-copy p{max-width:68ch;margin:0;color:var(--color-dark-muted);line-height:1.65} .progress-side{display:grid;place-items:center;padding:var(--space-xl);background:color-mix(in srgb,var(--color-brand-deep) 72%,transparent);text-align:center} .progress-ring{display:grid;width:min(14rem,60vw);aspect-ratio:1;place-items:center;border-radius:50%;background:conic-gradient(var(--color-success) var(--progress-value,0%),var(--color-paper-2) 0);box-shadow:inset 0 0 0 1rem rgba(0,83,154,.75)} .progress-ring>span{display:grid;width:78%;aspect-ratio:1;place-items:center;border-radius:50%;background:var(--color-surface);color:var(--color-ink);font-size:clamp(2.2rem,5vw,3.7rem);font-weight:950} .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-lg)} .kpi{min-width:0;padding:var(--space-lg);border:var(--rule);border-top:4px solid var(--color-brand);border-radius:var(--radius-panel);background:var(--color-surface)} .kpi span,.kpi small{display:block;color:var(--color-muted)}.kpi strong{display:block;margin:.35rem 0;font-size:clamp(1.8rem,3vw,3rem);font-variant-numeric:tabular-nums} .breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));border:var(--rule);border-radius:var(--radius-panel);overflow:hidden}.breakdown article{padding:var(--space-lg);border-right:var(--rule)}.breakdown article:last-child{border-right:0} ``` Progress Tab ต้องประกอบเป็น `progress-hero → kpi-grid → section ที่อธิบาย denominator/source conflict → coverage breakdown/table` และตัดส่วนที่ไม่มีข้อมูลจริงออก #### 5.8.3 Explorer and Workflow pattern ```css .explorer-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(15rem,.7fr);gap:var(--space-lg);align-items:start;margin-bottom:var(--space-lg)} .explorer-intro h2{margin:0;font-size:clamp(1.8rem,4vw,3.3rem)}.explorer-intro p{margin:.55rem 0 0;color:var(--color-muted);line-height:1.6} .present-note{padding:var(--space-lg);background:var(--color-paper-2);border-top:4px solid var(--color-accent);line-height:1.55} .workbench{display:grid;grid-template-columns:240px minmax(0,1.3fr) minmax(17rem,.7fr);gap:var(--space-lg);align-items:start} .rail,.evidence-panel,.context-panel{min-width:0;border:var(--rule);border-radius:var(--radius-panel);background:var(--color-surface);box-shadow:var(--shadow);overflow:hidden} .rail-head,.evidence-head,.context-head{padding:var(--space-lg);border-bottom:var(--rule);background:var(--color-paper-2)} .selector-list{display:grid;gap:.4rem;padding:var(--space-sm)}.selector-btn,.mode-btn{width:100%;border:var(--rule);border-radius:var(--radius-control);background:var(--color-surface);padding:.75rem;text-align:left;cursor:pointer} .selector-btn[aria-pressed="true"],.mode-btn[aria-selected="true"]{border-color:var(--color-brand);background:var(--color-brand);color:var(--color-on-dark)} .mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;padding:var(--space-sm);border-bottom:var(--rule)}.mode-btn{text-align:center;font-weight:900;white-space:nowrap} .evidence-body{padding:var(--space-lg)}.evidence-stage{display:grid;min-height:25rem;margin-top:var(--space-lg);place-items:center;border:var(--rule);background:var(--color-paper-2);overflow:hidden} .evidence-open{display:grid;width:100%;min-height:25rem;place-items:center;border:0;background:var(--color-paper-2);padding:var(--space-md);cursor:zoom-in}.evidence-open img{display:block;max-width:100%;max-height:34rem;object-fit:contain} .carousel-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-sm);align-items:center;margin-top:var(--space-sm)}.carousel-btn{min-height:42px;border:var(--rule);border-radius:var(--radius-control);background:var(--color-surface);padding:.55rem .8rem;font-weight:900;white-space:nowrap}.carousel-count{text-align:center;font-variant-numeric:tabular-nums;font-weight:900} .fact{padding:var(--space-md);border-bottom:var(--rule)}.fact span{display:block;color:var(--color-muted);font-size:.68rem;font-weight:900;text-transform:uppercase}.fact strong,.fact p{display:block;margin:.3rem 0 0;line-height:1.55} .role-flow{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.role-step{padding:.65rem .8rem;border:var(--rule);border-radius:var(--radius-control);background:var(--color-paper-2);font-weight:900}.role-arrow{color:var(--color-brand);font-weight:950} ``` Explorer ใช้ Left rail = Family/Scenario, Center = Evidence/Result, Right = Context/Logic ส่วน Workflow ใช้โครงเดียวกันแต่ Left rail เป็น Mode/TC, Center เป็น Flow + Evidence และ Right เป็น Editable scope/Expected outcome #### 5.8.4 Canonical HTML shell ```html

Project QA Report

Scope · Phase · Environment

QA ReportEvidence Baseline · DD MMM YYYY
Project QA Report · Scope summarySources · Baseline
``` ข้อความใน Shell เป็น Placeholder เชิงโครงสร้างเท่านั้น ต้องแทนด้วยข้อมูล Project ใหม่ทั้งหมด #### 5.8.5 Interaction contract AI ต้อง Implement JavaScript ตาม Contract นี้ โดยเก็บ Data แยกจาก Render logic: ```javascript // Tabs // - click changes aria-selected, active panel and hidden state // - Home/End and ArrowLeft/ArrowRight move focus within the tablist // - opening a tab scrolls to the top of report content, not the browser page unexpectedly // Explorer / Workflow // - selector changes only the mapped scenario/TC // - reset evidence index when scenario changes // - preserve Family/Mode state while moving between evidence steps // Evidence // - Previous/Next disabled correctly at first/last item // - image uses object-fit:contain and never stretches // - missing/restricted evidence renders an honest labelled state, not a dummy screenshot // Lightbox // - Prev, Next, Zoom Out, Zoom In, Fit and Close // - ArrowLeft/ArrowRight, +, -, 0 and Escape // - wheel zoom and pointer drag only when zoomed // - focus trap and focus return to the image trigger ``` #### 5.8.6 Responsive, lightbox and print completion ```css .lightbox{position:fixed;inset:0;z-index:var(--z-modal);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--space-sm);padding:var(--space-lg);background:var(--color-overlay);color:var(--color-on-dark)}.lightbox[hidden]{display:none} .lightbox-bar{display:flex;justify-content:space-between;gap:var(--space-md);align-items:center}.lightbox-tools{display:flex;gap:.4rem;flex-wrap:wrap}.lightbox-tools button{min-height:42px;border:var(--rule);border-radius:var(--radius-control);background:var(--color-surface);padding:.5rem .75rem;color:var(--color-ink);font-weight:900;white-space:nowrap} .lightbox-viewport{position:relative;display:grid;min-width:0;min-height:0;place-items:center;overflow:hidden;border:1px solid var(--color-rule-strong);background:var(--color-ink);touch-action:none}.lightbox-viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translate3d(var(--image-x,0),var(--image-y,0),0) scale(var(--image-scale,1));transform-origin:center} @media(max-width:70rem){.progress-hero,.explorer-intro{grid-template-columns:minmax(0,1fr)}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workbench{grid-template-columns:220px minmax(0,1fr)}.context-panel{grid-column:1/-1}} @media(max-width:48rem){.topbar{position:relative;padding:13px 16px}.meta{display:none}.tabs-shell{top:0}.tabs{padding:8px 14px}main{padding:16px 14px 40px}.kpi-grid,.workbench{grid-template-columns:minmax(0,1fr)}.context-panel{grid-column:auto}.section{padding:var(--space-lg)}.section-head{grid-template-columns:minmax(0,1fr)}.source-chip{justify-self:start}.evidence-stage,.evidence-open{min-height:18rem}.footer,.lightbox-bar{align-items:flex-start;flex-direction:column}.lightbox-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}} @media(pointer:coarse){button{min-height:48px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}} @media print{body{background:var(--color-surface)}.topbar{position:relative}.tabs-shell{display:none}main{max-width:none;padding:10px}.panel{display:block!important;break-before:page}.panel:first-child{break-before:auto}.section,.progress-hero,.rail,.context-panel,.evidence-panel{box-shadow:none;break-inside:avoid}.workbench{grid-template-columns:minmax(0,1fr)}.rail{display:none}.lightbox{display:none!important}.footer{border-top:var(--rule)}} ``` #### 5.8.7 Capsule fidelity checklist ก่อนส่ง Capsule-mode output ต้องยืนยัน: - Header → numbered sticky tabs → report content → quiet footer ตามลำดับ - Header และ Tab ใช้ CPExtra blue + yellow accent ตาม Token - Progress ใช้ Split hero + KPI + source/coverage detail ไม่ใช่ generic card grid อย่างเดียว - Explorer/Workflow เป็น 3-part workbench บน Desktop และ single column บน Mobile - Evidence viewer, Lightbox, keyboard, zoom และ print behavior ทำงาน - ไม่มี Fake browser/device chrome, Dummy screenshot หรือ Auto Item copy หลงเหลือ - `reportManifest.templateReference = "Embedded Template Capsule v1"` --- ## 6. Implementation Contract ### 6.1 Output ค่า Default คือไฟล์: ```text _QA_Test_Coverage_Dashboard.html ``` โดยต้อง: - เป็น HTML แบบ Self-contained - External mode ให้เริ่มจากสำเนา Page Shell/CSS/JavaScript Component ของ HTML ต้นฉบับ; Capsule mode ให้เริ่มจาก Canonical tokens, shell และ component contract ใน `5.8` ห้ามเริ่มจาก Generic dashboard หน้าเปล่า - รักษาชื่อ Class หรือแยกเป็น Component ใหม่ได้เมื่อ Behavior และ Visual output ยังตรงกับต้นฉบับ - Inline CSS และ JavaScript - ไม่พึ่ง CDN, External font หรือ JavaScript library - Embed Logo และรูปภาพเป็น Data URI - External URL ใช้สำหรับ Evidence/Reference link ได้ - เปิดผ่าน `file:///` บน Edge และ Chrome ได้ - ใช้งาน Tab และ JavaScript ได้หลังดาวน์โหลดจาก MS Teams - มี `