fix(token): restore environment variable checks for DOCVER_API_KEY and DOCVER_TOKEN_SECRET

- docId of every docver operation now comes from the Bearer token: the fid
  claim (e-Court fileId) is used directly as docId; segment [docId] removed
  from URLs — POST/GET /api/documents/versions and
  GET /api/documents/versions/{versionId}/download-link
- fid is required and must be a string (trim 1-200): token issuance rejects
  missing/blank/non-string fid with 400, verify rejects fid-less tokens with 401
- parseDocId removed from lib/document-versioning.ts (dead code, no callers)
- openapi spec: paths renamed, docId path params removed, fid required + string
- PLAN-DOCVER.md / CLAUDE.md / wordaddin versioningService comment updated
- tests: fid required/string cases added, parseDocId describe removed (256 pass)

Co-Authored-By: Claude Code <noreply@anthropic.com>

.claude/rules/coordinates.md

@@ -11,7 +11,8 @@ paths:
 - ทิศทางแปลง: px → % = `÷size×100`, % → px = `×size÷100` — ครบทั้ง point/rect/path
 - `strokeWidth` เก็บเป็น % ของความกว้างหน้า; `yOffset` เก็บเป็น % ของความสูงหน้า (0–100)
 - `mergeRectsByLine(rects)`: จัดกลุ่ม rects ที่ y/height ใกล้กัน (บรรทัดเดียวกัน) → union แกน x → คืน 1 rect ต่อบรรทัด — เรียกทุกครั้ง**ก่อนบันทึก HIGHLIGHT** ลง DB
+- `rectsInSweptPath(rects, start, end)` (กรอง selection rects ตามเส้นทางลาก): บรรทัดแรก = จุดเริ่ม→ท้ายบรรทัด, บรรทัดสุดท้าย = ต้นบรรทัด→จุดจบ, **บรรทัดกลางเก็บทั้งบรรทัดเฉพาะช่วงคอลัมน์เดียวกับข้อความที่เก็บได้จริง** — ช่วงคอลัมน์ยึดจากขอบซ้าย/ขวาจริงของ rect ที่เก็บได้จากบรรทัดแรก/สุดท้าย (ไม่ใช่พิกัดจุดลากตรง ๆ — ลากชัน/ลาก margin ซ้ายก็ยังเก็บบรรทัดกลางเต็มตาม native) + ขยายริมละ 2×lineTol ให้ทน justify gap ระหว่าง rect (pad อิงความสูงบรรทัด ตาม zoom) — span ประกอบที่ห่างเกิน pad (✓ checkbox คอลัมน์ขวาสุดของฟอร์มราชการ ที่ pdf.js วางไว้ระหว่างบรรทัดข้อความพอดีจน DOM ของ native selection ครอบติดมาด้วย) ถูกตัดทิ้ง (bug report 2026-10-05 + code review ข้อ 1)
 - InkLayer: SVG **ห้ามมี `viewBox`** (ความหนาเส้นจะบิดเบี้ยวเมื่อ scale แกน x/y ไม่เท่ากัน) — render ระบบ px จริง แปลง % → px ด้วยขนาดจาก `ResizeObserver` แล้ว re-render เมื่อ resize/zoom
 - พิกัดจาก event ใช้ `getBoundingClientRect()` ของ page element เป็นฐานเสมอ และ clamp ค่า % ให้อยู่ 0–100
-- `utils/geometry.ts` (PLAN-FEAT.md F1) — pure functions บนพิกัด %: `annotationBBox` / `translateAnnotationData` / `scaleAnnotationData` / `hitTestPath` — ก่อนส่ง data ที่แปลงแล้วเข้า `updateAnnotation` ต้อง **clamp offset/scale ให้ bbox ทั้งกลุ่มอยู่ใน 0–100** เพราะ validator ปฏิเสธค่าติดลบ
+- `utils/geometry.ts` (PLAN-FEAT.md F1) — pure functions บนพิกัด %: `annotationBBox` / `translateAnnotationData` / `scaleAnnotationData` / `hitTestPath` — ก่อนส่ง data ที่แปลงแล้วเข้า `updateAnnotation` ต้อง **clamp offset/scale ให้ bbox ทั้งกลุ่มอยู่ใน 0–100** เพราะ validator ปฏิเสธค่าติดลบ — **ยกเว้น STAMP เอียง (มี `rotation`): `position` เป็นมุมกรอบ*ก่อนหมุน* ซึ่งไม่ถูกครอบโดยกรอบจริงบนจอ — เกณฑ์ความถูกต้อง (ทั้ง clamp ฝั่ง client และ validator) ใช้ **AABB ของกรอบหมุน** (`stampRect`/`rotatedRectAABB`) ตัวเดียวกันทั้งสองฝั่ง ไม่ใช่ position ตรง ๆ — ใช้คนละเกณฑ์แล้วลากถึงขอบหน้าแล้ว commit โดนปฏิเสธ เด้งกลับ (code review 2026-09-28) · ตอนตั้งมุมใหม่ (patch/ลากหมุน) และตอน patch ที่เปลี่ยนขนาดกรอบของตรายางเอียง (`stampScale`/`label` เมื่อ rotation ≠ 0) ต้องเรียก `clampStampIntoPage` เลื่อน position กลับเข้าหน้าทันที (code review 2026-09-29) · validator ฝั่ง server ยึด `stampLayoutEstimate` ขณะ client clamp ยึด measure จริงของ browser — สองตัววัดนี้คลาดกันตามฟอนต์ของเครื่อง validator จึงผ่อน tolerance ให้ AABB ติดลบได้ไม่เกิน 2% ของหน้า ไม่ใช่ปฏิเสธทันที (code review 2026-09-29)**
 - AnnotationSelectionLayer: container `pointer-events: none` เสมอ เฉพาะ handle มุม/ขอบกรอบ/แถบเครื่องมือที่ `auto` — ห้ามให้กรอบ selection บัง textLayer

.claude/rules/data-layer.md

@@ -19,5 +19,7 @@ paths:
 - `annotations.resolved` (NOT NULL default false) + `resolved_at` (NULL) — F10/A5: `setAnnotationResolved` **ใครก็ได้ toggle** (D6 คลายคืนได้ ต่างจาก delete ที่จำกัดเจ้าของ) + publish update event; ไม่เข้า history undo ของ F2
 - ตาราง `annotation_versions` (F19/A7): `annotation_id` เป็น uuid **ไม่ FK** (D8 — snapshot ตอน delete ต้องรอดจาก CASCADE ของแม่) + `file_id` FK CASCADE + `page_index` (restore ต้องรู้หน้า) + `kind` text `'update' | 'delete'` + index `(file_id)`; `updateAnnotation`/`deleteAnnotation` snapshot row เดิม **ก่อนเขียน/ลบ ใน transaction เดียวกัน**; `restoreVersion(versionId, userId)` — **เจ้าของเท่านั้น (D9)**: guard `userId` ทั้ง row ปัจจุบัน (ต้นทางยังอยู่) และ snapshot (ต้นทางถูกลบ) / ต้นทางยังอยู่ = **เขียนกลับ row เดิม** (snapshot ปัจจุบันก่อน) + publish update event / ต้นทางถูกลบ = สร้างใหม่ id ใหม่ + publish create event (ห้ามสร้างสำเนาใหม่ทุกกรณี — เคยทำให้เกิดรายการซ้ำบนหน้า)
 - ห้ามเพิ่มตาราง/column ที่ไม่มีในแผน (ดู out of scope §9) โดยไม่อัปเดต `docs/PLAN.md` ก่อน
-- `files.pdf_url` เก็บ path **รูปภาพ** (jpg/jpeg/png/tif/tiff) ใน `public/` ได้เหมือน PDF (N3) — **ไม่มี column kind**: ชนิดไฟล์ derive จาก extension ผ่าน `utils/file-kind.ts` เท่านั้น (จะเพิ่ม column ต้องแก้แผนก่อน); TIFF หลายเฟรม = `pageIndex` ต่อเฟรม (1 เฟรม = 1 หน้า)
-- Server Action `uploadFile` (`app/actions/files.ts`, N4): validate extension (whitelist `SAMPLE_FILE_EXTENSIONS`) + ≤ 100MB ก่อนเขียน — บันทึกเป็นไฟล์**ใหม่** `public/uploads/<uuid>.<ext>` เท่านั้น (ชื่อจาก randomUUID — ห้ามใช้ชื่อผู้ใช้ตกแต่ง path), insert row แล้ว `revalidatePath("/")` — ไม่ publish SSE event (รายการไฟล์ไม่ได้ sync ผ่าน SSE); seed-samples จัดการเฉพาะ `/samples/%` ไม่แตะ `/uploads/`
+- `files.pdf_url` เก็บ path **รูปภาพ** (jpg/jpeg/png/tif/tiff) ใน `public/note/` ได้เหมือน PDF (N3) — **ไม่มี column kind**: ชนิดไฟล์ derive จาก extension ผ่าน `utils/file-kind.ts` เท่านั้น (จะเพิ่ม column ต้องแก้แผนก่อน); TIFF หลายเฟรม = `pageIndex` ต่อเฟรม (1 เฟรม = 1 หน้า)
+- Server Action `uploadFile` (`app/actions/files.ts`, N4): validate extension (whitelist `SAMPLE_FILE_EXTENSIONS`) + ≤ 100MB ก่อนเขียน — ชื่อไฟล์ต้องผ่าน `decodeUploadFilename` ของ `utils/upload-name.ts` ก่อนใช้ (ทั้ง extension และ title): undici ถอด `Content-Disposition` เป็น latin1 ทำชื่อ UTF-8 เพี้ยน (ชื่อไทยกลายเป็น "คำ…" — 2026-10-05) — บันทึกเป็นไฟล์**ใหม่** `public/note/uploads/<uuid>.<ext>` เท่านั้น (ชื่อจาก randomUUID — ห้ามใช้ชื่อผู้ใช้ตกแต่ง path), insert row (รวม `type_id` จากช่องกลุ่มทางเลือกของฟอร์ม — 2026-09-23) แล้ว `revalidatePath("/note")` — ไม่ publish SSE event (รายการไฟล์ไม่ได้ sync ผ่าน SSE); seed-samples จัดการเฉพาะ `/samples/%` ไม่แตะ `/uploads/`
+- `files.type_id` (N9 — รหัสกลุ่มเอกสาร จากลิงก์ e-Court `?typeId=` หรือช่อง "กลุ่ม typeId" ของฟอร์มอัปโหลด N4): **เขียนสองที่** — (1) `registerExternalFile` ของ N8 (insert ครั้งแรก + update เมื่อลิงก์รอบใหม่ส่ง `typeId` มา — ลิงก์ไม่ส่ง = คงเดิม ห้ามเคลียร์) (2) `uploadFile` ของ N4 ช่องทางเลือกในฟอร์มอัปโหลด — insert ตอนสร้าง row ใหม่เท่านั้น ไม่มีหน้าทางแก้กลุ่มของไฟล์เดิม; normalize ผ่าน `normDocumentGroup` ของ `utils/external-file.ts` ที่เดียว (trim → ว่าง = NULL, cap 200 — responsive audit 2026-09-24 รวมจากเดิมที่เป็นสองสำเนา mirroring กัน) — N9 อ่านอย่างเดียว (หน้า `/` จัด section + `/groups/[typeId]`) ไม่มี Server Action/SSE ใหม่; กลุ่ม = ค่า distinct ของ `type_id` ณ ตอน query — ไม่มีตารางกลุ่ม
+- API ภายนอก (N10 — `app/api/note/external/documents` เส้นเดียว **POST + JSON body** `{fileId และ/หรือ typeId, filter:{type, userId, annotationTypes}}` — ส่งทั้งคู่ = AND เหลือเฉพาะเอกสารเดียวที่ตรงทั้งสองเงื่อนไข): **read-only ทั้งหมด** — ไม่เขียน DB ไม่ publish SSE event ไม่ `revalidatePath` (snapshot ณ ตอนเรียก ต่าง context กับ Server Action ใน invariant #4); auth ผ่าน `requireExternalApiKey` ของ `lib/external-api-auth.ts` เป็นอย่างแรกก่อนแตะ DB เสมอ (header `x-api-key` เทียบ env `EXTERNAL_API_KEY` แบบ timing-safe) — **env ว่าง/ไม่ตั้ง = fail closed 401 ทุก request** ไม่มี mode เปิดฟรี; ผู้เรียกคือ backend e-Court (server-to-server) จึงไม่ใส่ CORS headers; validation ของ body (`parseQueryBody`) + การ query/mapper (`loadDocumentBundles` — bulk `inArray` ทุกไฟล์ในชุด query เดียว ไม่ยิงต่อไฟล์) รวมอยู่ `lib/external-api.ts` จุดเดียว ห้ามแยกสำเนา; route ครอบ try/catch ทุก DB call — query ล้ม = log ฝั่ง server + **500 JSON ตาม contract** ของ endpoint (ไม่ปล่อยเป็น 500 ของ framework); `lib/external-api-auth.ts` ห้าม import module ที่ลาก `@/db` มา (unit test ต้องรันได้ไม่ต้องตั้ง DATABASE_URL)

.claude/rules/realtime.md

@@ -7,7 +7,7 @@ paths:
 
 # Realtime Rules (รายละเอียด: docs/PLAN.md §4)
 
-- Sync ใช้ **SSE**: hook เปิด `EventSource` ไป `withBasePath("/api/annotations/stream?fileId=<uuid>")` (basePath ตาม invariant #12) และ `es.close()` เมื่อ unmount
+- Sync ใช้ **SSE**: hook เปิด `EventSource` ไป `withBasePath("/api/note/annotations/stream?fileId=<uuid>")` (basePath ตาม invariant #12) และ `es.close()` เมื่อ unmount
 - `EventSource` ต่อใหม่อัตโนมัติเมื่อ connection ขาด — **ห้ามทำ retry logic เอง**
 - Event payload เป็น **DTO (camelCase + ISO string) จาก server ตรง ๆ** — ไม่มีการแปลง snake_case
 - Server Actions ต้อง **publish ผ่าน `lib/annotate-events.ts` หลังเขียน DB สำเร็จทุกครั้ง** (create/update/delete ของ annotations, create/delete ของ replies, create/**update**/delete ของ bookmarks — update ของ bookmarks ใช้กับแก้ชื่อ/โน้ต/ย้ายหัวข้อ และลูกที่ถูกยกขึ้น root ตอนแม่ถูกลบ, client replace by id) — ลืม publish = client อื่นไม่เห็น; คู่กันในจุดเดียวกันต้อง **`revalidatePath` หน้า viewer+summary** (`revalidateFilePages`) มิฉะนั้นกลับเข้าหน้าใหม่ (back → คลิกไฟล์) ได้ RSC payload เก่าจาก Router Cache ฝั่ง client จนต้อง hard refresh

.claude/skills/sync-db/SKILL.md

@@ -7,7 +7,7 @@ description: Sync Drizzle schema ลง PostgreSQL container judes-note-db + see
 ## ขั้นตอน
 
 1. **Push schema:** รัน `npx drizzle-kit push` (อ่าน config จาก `drizzle.config.ts`) — รายงาน output จริง ถ้าชนของเดิมให้แสดงและถามผู้ใช้ก่อน destructive ทางเลือก
-2. **Seed ตัวอย่าง (เฉพาะเมื่อตาราง `files` ว่าง):** INSERT ไฟล์จาก `public/samples/` โดย `pdf_url = '/samples/<ชื่อไฟล์>'` (ไฟล์และที่มาดูใน PLAN.md §0 ตาราง "ไฟล์ตัวอย่าง") — ใช้ SQL จาก README ถ้ามีแล้ว รันผ่าน `docker exec judes-note-db psql -U postgres -c "..."`
+2. **Seed ตัวอย่าง (เฉพาะเมื่อตาราง `files` ว่าง):** INSERT ไฟล์จาก `public/note/samples/` โดย `pdf_url = '/samples/<ชื่อไฟล์>'` (ไฟล์และที่มาดูใน PLAN.md §0 ตาราง "ไฟล์ตัวอย่าง") — ใช้ SQL จาก README ถ้ามีแล้ว รันผ่าน `docker exec judes-note-db psql -U postgres -c "..."`
 3. **รายงานผลแต่ละขั้นตามจริง** — ขั้นไหนไม่ได้ทำบอกสาเหตุ อย่าเดา
 
 ## ข้อควรระวัง

.dockerignore

@@ -9,4 +9,4 @@ npm-debug.log*
 .env.*
 !.env.example
 # ไฟล์ที่อัปโหลดระหว่าง dev ห้ามติดไปใน image (production เขียน runtime + เก็บใน volume ไม่ใช่ bake ตอน build)
-public/uploads
+public/note/uploads

.env.example

@@ -1,2 +1,29 @@
 # PostgreSQL container judes-note-db (สร้างด้วย docker run ตาม README)
 DATABASE_URL=postgresql://postgres:postgres@127.0.0.1:54322/ecourt-note
+# N8 (optional): allowlist โฮสต์ลิงก์ไฟล์รีโมต — ไม่ตั้ง = admincourt.go.th
+# EXTERNAL_FILE_HOSTS=admincourt.go.th
+# N10 (optional): API key ของ /api/external/* (backend e-Court เรียก server-to-server)
+# ไม่ตั้ง/ว่าง = ปฏิเสธทุก request (fail closed) — ตั้งค่ายาวและสุ่ม เช่น 32+ ตัวอักษร
+# EXTERNAL_API_KEY=
+
+# MinIO ของ API เอกสาร versioning (docs/PLAN-DOCVER.md §6) — ค่านี้ตรง docker-compose.yml
+# (MINIO_ENDPOINT/MINIO_ACCESS_KEY/MINIO_SECRET_KEY ไม่ตั้ง = ทุก endpoint ของกลุ่มนี้ตอบ 500)
+# หมายเหตุ: พอร์ตโฮสต์เป็น 19000 เพราะ 9000/9001 ชนกับโปรเจกต์อื่นในเครื่อง dev
+# (ใน production ตั้งเป็นพอร์ตจริงที่ deploy) และ presigned URL อ้าง endpoint นี้ตรง ๆ —
+# production ต้องเป็นโฮสต์ที่เบราว์เซอร์ของผู้ใช้เข้าถึงได้ ไม่ใช่แค่ที่ Next server เข้าถึงได้
+MINIO_ENDPOINT=127.0.0.1
+MINIO_PORT=19000
+MINIO_USE_SSL=false
+MINIO_ACCESS_KEY=minioadmin
+MINIO_SECRET_KEY=minioadmin
+# MINIO_BUCKET=docver
+# DOCVER_LINK_TTL_SECONDS=900
+
+# docver token (2026-10-22): API key ของ POST /api/documents/token (header x-api-key)
+# ไม่ตั้ง/ว่าง = ปฏิเสธทุก request (fail closed) — ตั้งค่ายาวและสุ่ม เช่น 32+ ตัวอักษร
+# (ห้าม log ค่า key ดิบ — เทียบแบบ timing-safe ทุกครั้ง)
+DOCVER_API_KEY=
+# secret เซ็น/ตรวจ JWT HS256 ของทุก endpoint /api/documents/* (Authorization: Bearer)
+# ไม่ตั้ง/ว่าง = ออก token ไม่ได้ (500) และทุก endpoint ตอบ 401 (fail closed) — ห้าม log ค่า secret
+DOCVER_TOKEN_SECRET=
+# DOCVER_TOKEN_TTL_SECONDS=3600

.gitignore

@@ -29,7 +29,16 @@ next-env.d.ts
 # Claude Code
 .claude/settings.local.json
 # N4: ไฟล์ที่ผู้ใช้อัปโหลดผ่านหน้ารายการ (รันไทม์ — ไม่เข้า repo)
-public/uploads/
+public/note/uploads/
+
+# wordaddin: Office.js runtime สร้างใหม่ได้เสมอจาก postinstall scripts/fetch-office-js.mjs
+# (ร้อยกว่าไฟล์หลาย MB — ไม่ commit เข้า repo เหมือน swagger-ui ที่มีแค่ 2 ไฟล์)
+public/wordaddin/office-js/
+
+# wordaddin: ใบรับรอง https ของ dev (สร้างเองเฉพาะเครื่อง — ดู docs/WORDADDIN-DEV.md)
+/certs/
 
 # compose ทดสอบบนเครื่อง dev (build จาก repo + DB แยก รันที่ 6704) — ไม่ใช่ของ production
 docker-compose.test.yml
+
+certificates

README.md

@@ -19,7 +19,7 @@
 | เครื่องมือ | เวอร์ชันที่ใช้พัฒนา/ทดสอบ | หมายเหตุ |
 |---|---|---|
 | Node.js | v24.3.0 | ≥ 20 น่าจะใช้ได้ |
-| Docker | 29.1.3 | ใช้รัน PostgreSQL container ตัวเดียว |
+| Docker | 29.1.3 | ใช้รัน PostgreSQL + MinIO ผ่าน `docker-compose.yml` |
 
 ## ขั้นตอน Setup จากศูนย์
 
@@ -31,25 +31,33 @@ npm install
 
 > postinstall จะคัดลอก `pdf.worker.min.mjs` จาก `node_modules/pdfjs-dist/build/` มาไว้ที่ `public/` ให้อัตโนมัติ
 
-### 2. รัน PostgreSQL container
+### 2. รัน PostgreSQL + MinIO ด้วย docker compose
 
 ```bash
-docker run -d --name judes-note-db \
-  -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=postgres \
-  -p 54322:5432 \
-  -v judes-note-db-data:/var/lib/postgresql/data \
-  postgres:17-alpine
+docker compose up -d
 ```
 
-ครั้งต่อไปแค่ `docker start judes-note-db` — ข้อมูลอยู่ใน volume `judes-note-db-data` ไม่หาย
+- `db` = PostgreSQL (`judes-note-db` พอร์ต 54322, database `ecourt-note` สร้างตอน first init) — ใช้ชื่อ container/วอลุ่มเดียวกับคำสั่ง `docker run` เดิม: ถ้ามี container เก่าจาก `docker run` อยู่ ให้ `docker rm -f judes-note-db` ก่อน (วอลุ่ม `judes-note-db-data` เดิม ข้อมูลไม่หาย — ถ้าวอลุ่มเดิม init ด้วย database `postgres` ให้สร้าง `ecourt-note` เอง: `docker exec judes-note-db psql -U postgres -c 'CREATE DATABASE "ecourt-note"'`) · จะรันแค่ MinIO ก็ได้ด้วย `docker compose up -d minio`
+- `minio` = object storage ของ API เอกสาร versioning (`judes-note-minio` — API ที่ **พอร์ตโฮสต์ 19000**, console ดูผ่าน browser ที่ http://localhost:19001; ข้างใน container ยังเป็น 9000/9001 — host เลี่ยงมา 19000/19001 เพราะ 9000/9001 มักชนกับ service อื่นในเครื่อง dev; image ดึงจาก `quay.io/minio/minio` ซึ่งเป็น registry ทางการของ MinIO) — bucket ไม่ต้องสร้างเอง app สร้างตอน first use
+
+ครั้งต่อไปแค่ `docker compose start` — ข้อมูลอยู่ใน volume `judes-note-db-data`/`judes-note-minio-data` ไม่หาย
 
 ### 3. สร้างไฟล์ `.env`
 
 ```env
 DATABASE_URL=postgresql://postgres:postgres@127.0.0.1:54322/ecourt-note
+# N10 (optional): API key ของ /api/note/external/* สำหรับ backend e-Court เรียกแบบ server-to-server
+# ไม่ตั้งหรือเว้นว่าง = API ปฏิเสธทุก request (fail closed) — ตั้งค่ายาวและสุ่ม เช่น 32+ ตัวอักษร
+# EXTERNAL_API_KEY=
+# MinIO ของ API เอกสาร versioning (ค่าตรง docker-compose.yml — ไม่ต้องแก้ถ้ารันตามขั้นตอน 2)
+MINIO_ENDPOINT=127.0.0.1
+MINIO_PORT=19000
+MINIO_USE_SSL=false
+MINIO_ACCESS_KEY=minioadmin
+MINIO_SECRET_KEY=minioadmin
 ```
 
-(เทียบกับ `.env.example` — มีแค่ตัวเดียว)
+(เทียบกับ `.env.example`)
 
 ### 4. สร้างตารางในฐานข้อมูล
 
@@ -59,13 +67,13 @@ npx drizzle-kit push
 
 ### 5. Seed ไฟล์ตัวอย่าง
 
-ไฟล์ตัวอย่างอยู่ที่ `public/samples/` แล้ว — sync ลงตาราง `files` (idempotent รันซ้ำได้) — รองรับทั้ง `.pdf` และรูปภาพ `.jpg/.jpeg/.png/.tif/.tiff` (N3):
+ไฟล์ตัวอย่างอยู่ที่ `public/note/samples/` แล้ว — sync ลงตาราง `files` (idempotent รันซ้ำได้) — รองรับทั้ง `.pdf` และรูปภาพ `.jpg/.jpeg/.png/.tif/.tiff` (N3):
 
 ```bash
 npm run seed-samples
 ```
 
-> บน production ไม่ต้องรันมือ — script เดียวกัน (`scripts/seed-samples.mjs`) รันอัตโนมัติตอน container start ต่อจาก migration ไฟล์ที่หายจาก `public/samples/` จะถูกลบ row พร้อม annotation ที่ผูกอยู่ (CASCADE)
+> บน production ไม่ต้องรันมือ — script เดียวกัน (`scripts/seed-samples.mjs`) รันอัตโนมัติตอน container start ต่อจาก migration ไฟล์ที่หายจาก `public/note/samples/` จะถูกลบ row พร้อม annotation ที่ผูกอยู่ (CASCADE)
 
 ### 6. รัน dev server
 
@@ -73,7 +81,7 @@ npm run seed-samples
 npm run dev
 ```
 
-เปิด http://localhost:3000/docedit/note — คลิกไฟล์เพื่อเข้าหน้า annotate หรืออัปโหลดไฟล์ใหม่ (PDF/รูปภาพ ≤ 100MB) ผ่านฟอร์มบนหน้ารายการ (N4 — ไฟล์เก็บที่ `public/uploads/`)
+เปิด http://localhost:3000/docedit/note — คลิกไฟล์เพื่อเข้าหน้า annotate หรืออัปโหลดไฟล์ใหม่ (PDF/รูปภาพ ≤ 100MB) ผ่านฟอร์มบนหน้ารายการ (N4 — ไฟล์เก็บที่ `public/note/uploads/`)
 
 ## การใช้งานบนหน้า annotate
 
@@ -89,18 +97,75 @@ Sidebar ซ้าย: แท็บ Bookmarks / Annotations — คลิกร
 
 ทดสอบ realtime: เปิดหน้า annotate ไฟล์เดียวกันใน 2 แท็บ แล้ววาด/comment จากแท็บหนึ่ง — อีกแท็บเห็นทันทีโดยไม่ต้อง refresh
 
+## API สำหรับระบบภายนอก (N10)
+
+Read-only API ให้ **backend ของ e-Court** เรียกแบบ server-to-server (ไม่มีหน้า UI) — endpoint เดียว `POST /api/note/external/documents` (JSON body) ตรวจสิทธิ์ด้วย API Key เดียวใน env `EXTERNAL_API_KEY` ส่งผ่าน header `x-api-key` (env ไม่ตั้ง/ว่าง = ปฏิเสธทุก request — fail closed) — คู่มือการใช้สำหรับผู้เรียก: `docs/API-DOCUMENTS.md` · สเปก/เหตุผลการออกแบบ: `docs/PLAN-API.md`
+
+```jsonc
+// POST /docedit/api/note/external/documents   (URL เต็มฝั่งผู้เรียกอยู่ใต้ basePath)
+// headers: x-api-key + content-type: application/json
+{
+  "fileId": "<fileId ของ e-Court>",     // ถามเอกสารเดียว — ส่งพร้อม typeId ได้ = กรองเฉพาะเอกสารที่ตรงทั้งสองเงื่อนไข (AND)
+  "typeId": "<typeId>",                 // ถามทุกเอกสารในกลุ่ม N9 — กลุ่มว่าง = 200 documents: []
+  "filter": {
+    "type": "bookmarks",                // optional: "bookmarks" | "annotations" — ไม่ส่ง (หรือ type เป็น "") = ทั้งสอง
+    "userId": "<userId>",               // optional: string หรือ array — กรองตามเจ้าของรายการ (ทั้ง annotations/bookmarks)
+    "annotationTypes": ["COMMENT"],     // optional: ค่าจาก HIGHLIGHT|DRAW|COMMENT|SHAPE|REDACTION|TEXTBOX|STAMP — เฉพาะ annotations
+  }
+}
+```
+
+- Response 200 เป็นรูปเดียวเสมอ: `{ "documents": [ { "id", "externalFileId", "title", "typeId", "createdAt", "annotations": [… พร้อม url + replies], "bookmarks": [… พร้อม url] } ] }` (field เอกสารอยู่ระดับเดียวกับ annotations/bookmarks) — ถามด้วย fileId ได้ array ยาว 1 ชิ้น (ไม่เคยเปิดในระบบ = 404)
+- `url` ต่อรายการ = deep link กลับมาหน้า viewer เป็น **URL เต็มพร้อมใช้ทันที** (`http://<host>/docedit/note/annotate/<fileId>?ann=<id>` สำหรับ annotation · `?page=<หน้า 1-based>` สำหรับ bookmark) — origin อ่านจาก request ที่เรียกเข้ามา (ผ่าน reverse proxy ต้องตั้งส่งต่อ `x-forwarded-proto`/`x-forwarded-host`)
+- error ทุกสถานะ (400/401/404/500) เป็น JSON `{ "error": "<ข้อความไทย>" }` รูปเดียวกันทั้ง endpoint — 500 เกิดเมื่อ query ฐานข้อมูลล้ม (log รายละเอียดฝั่ง server อย่างเดียว)
+- ตัวอย่าง:
+
+```bash
+curl -X POST -H "x-api-key: $EXTERNAL_API_KEY" -H "content-type: application/json" \
+  -d '{"fileId":"1234","filter":{"type":"bookmarks"}}' \
+  "http://localhost:3000/docedit/api/note/external/documents"
+
+curl -X POST -H "x-api-key: $EXTERNAL_API_KEY" -H "content-type: application/json" \
+  -d '{"typeId":"CASE-2569-0001"}' \
+  "http://localhost:3000/docedit/api/note/external/documents"
+```
+
+## API จัด version เอกสาร (docver — stand-alone)
+
+กลุ่ม API ให้ **Word add-in / ระบบภายนอก** เก็บเอกสารเป็น version: เอกสารเดียวต่อ `docId` (unique) แต่ละ version เก็บไฟล์ **.docx + .pdf ใน MinIO** พร้อม `userId`/`userName`/`createdAt` ของผู้อัปโหลด — **ไม่มี auth ไม่มี session** (stand-alone): ผู้เรียกบอก identity เองผ่าน field `userId`/`userName` ของ multipart · contract ตรง mock ของ wordaddin (`versioningService`) เป๊ะเพื่อวันสลับของจริง · สเปก/เหตุผล: `docs/PLAN-DOCVER.md`
+
+```bash
+# POST อัปโหลด version (เอกสารถูกสร้างแบบ implicit เมื่อเป็น version แรก)
+curl -F "file=@คำสั่งเรียก.docx" -F "pdf=@คำสั่งเรียก.pdf" \
+  -F "userId=u0001" -F "userName=ผู้พิพากษา ก." \
+  "http://localhost:3000/docedit/api/documents/CASE-2569-0001/versions"
+# → {"hasPdf":true,"versionId":"<uuid>","versionNumber":1}   (versionNumber เป็นค่าจาก server)
+
+# GET history (ใหม่ → เก่า) — docId ที่ยังไม่เคยมี version = 404
+curl "http://localhost:3000/docedit/api/documents/CASE-2569-0001/versions"
+
+# GET presigned URL อายุสั้น (default docx, ?format=pdf — version ไม่มี pdf = 404)
+curl "http://localhost:3000/docedit/api/documents/CASE-2569-0001/versions/<versionId>/download-link?format=pdf"
+```
+
+- ไฟล์แนบ `file` (.docx) บังคับ · `pdf` optional (add-in แนบ blob เปล่าได้ = ถือว่าไม่มี ดู `hasPdf`) · ทั้งคู่ ≤ 100MB + ตรวจ magic bytes · field นอก allowlist = 400 กัน typo เงียบ ๆ
+- error ทุกสถานะเป็น JSON `{ "error": "<ข้อความไทย>" }` — 400 (รูปผิด/ไม่ใช่ multipart/เนื้อไฟล์เพี้ยน) · 413 (เกิน 100MB) · 404 (ไม่มีเอกสาร/version/pdf) · 500 (MinIO env ไม่ตั้ง/ล้ม, DB ล้ม — log เต็มฝั่ง server)
+- **presigned URL อ้าง `MINIO_ENDPOINT:MINIO_PORT` ตรง ๆ** — production ต้องเป็นโฮสต์ที่เบราว์เซอร์ของผู้ใช้เข้าถึงได้ ไม่ใช่แค่ที่ Next server เข้าถึงได้
+
 ## Troubleshooting
 
 | อาการ | สาเหตุ/ทางแก้ |
 |---|---|
 | Realtime ไม่ซิงก์ | sync ใช้ pub/sub **in-memory ของ process เดียว** — ทุกแท็บต้องเข้าผ่าน dev server เดียวกัน (ถ้าวันหนึ่งรันหลาย instance ต้องเพิ่ม Redis pub/sub หรือ Postgres LISTEN/NOTIFY ก่อน) |
 | หน้าเว็บ 500 หลังรัน `next build` ระหว่างที่ dev server กำลังรัน | build เขียนทับ cache ของ dev — ปิด dev server ก่อน build หรือ restart dev server หลัง build |
-| ต่อ DB ไม่ได้ | ตรวจว่า container รันอยู่ (`docker start judes-note-db`) และพอร์ต 54322 ไม่ถูกใช้โดย container อื่น |
+| `tsc --noEmit` error ชี้ route ที่ถูกลบไปแล้ว (เช่น `app/api/external/document*` หลังรวมเป็น `query` รอบสองของ N10) | type stub ค้างใน `.next/types/` ของ dev/build รอบก่อน — ลบ `.next` หรือรัน `next build`/restart dev server หนึ่งครั้งให้ regenerate แล้วรันใหม่ |
+| ต่อ DB ไม่ได้ | ตรวจว่า container รันอยู่ (`docker compose start db` — เดิม `docker start judes-note-db`) และพอร์ต 54322 ไม่ถูกใช้โดย container อื่น |
+| API เอกสาร versioning ตอบ 500 ทุก call | ตรวจ env `MINIO_ENDPOINT`/`MINIO_ACCESS_KEY`/`MINIO_SECRET_KEY` และ container minio (`docker compose start minio`) — รายละเอียดอยู่ใน log ฝั่ง server |
 | Highlight ใช้ไม่ได้กับไฟล์คดีตัวอย่าง | ไฟล์ `01012-*.pdf` ทั้งสองเป็น**ภาพสแกนล้วน** (ไม่มี text layer) — ใช้ `dashboard-report-2026-09-03.pdf` ซึ่งเป็น text-based PDF แทน จึงจะคลุมดำได้ (DRAW/COMMENT/BOOKMARK ใช้ได้ปกติกับทุกไฟล์) |
 
 ## หมายเหตุทางเทคนิค
 
-- **Realtime = SSE + pub/sub in-process:** Server Actions (`app/actions/annotations.ts`) publish event หลังเขียน DB สำเร็จทุกครั้ง → `lib/annotate-events.ts` → SSE endpoint `app/api/annotations/stream` → hook เปิด `EventSource` รับ event (payload เป็น DTO จาก server ตรง ๆ)
+- **Realtime = SSE + pub/sub in-process:** Server Actions (`app/actions/annotations.ts`) publish event หลังเขียน DB สำเร็จทุกครั้ง → `lib/annotate-events.ts` → SSE endpoint `app/api/note/annotations/stream` → hook เปิด `EventSource` รับ event (payload เป็น DTO จาก server ตรง ๆ)
 - UI ใช้ `useOptimistic` ที่มาจาก React canary build ซึ่ง Next.js 14 vendored ไว้ให้ — หากหยิบ component ไปรันนอก Next bundling (เช่น unit test ด้วย `react` เปล่า) จะหา export นี้ไม่เจอ
 - พิกัด annotation ทุกชนิดเก็บเป็น **% ของขนาดหน้า** → render ถูกต้องทุก zoom/ขนาดจอ และ `mergeRectsByLine` รวบ rect ให้เหลือ 1 อันต่อบรรทัดก่อนบันทึก highlight
 - สถาปัตยกรรม/สเปกฉบับเต็ม: `docs/PLAN.md` · กติกาที่ต้องรักษาตอนแก้โค้ด: `CLAUDE.md` · ฟีเจอร์ต่อยอด: `docs/PLAN-FEAT.md`
@@ -111,15 +176,18 @@ Sidebar ซ้าย: แท็บ Bookmarks / Annotations — คลิกร
 db/schema.ts              ตาราง + JSONB strict union + DTO + toDTO
 db/index.ts               postgres.js + drizzle (prepare: false)
 lib/annotate-events.ts    pub/sub in-process (actions → SSE route)
+lib/document-versioning.ts  validation ล้วนของกลุ่ม /api/documents (docver)
+lib/docver-store.ts       MinIO client + tx จ่ายเลข version + query ของ docver
 utils/coordinates.ts      px ⇄ % + clamp + mergeRectsByLine
 utils/user.ts             parse/build cookie oacCase (mock login e-Court)
 hooks/useAnnotationRealtime.ts   EventSource รับ SSE event + dedupe ด้วย id
 app/actions/annotations.ts       Server Actions CRUD + publish event (ทางเขียนทางเดียว)
-app/api/annotations/stream/route.ts  SSE endpoint (GET ?fileId=)
-app/page.tsx              รายการไฟล์ + ฟอร์มอัปโหลด (N4)
-app/annotate/[id]/page.tsx  โหลด file + initial data → PDFViewer
+app/api/note/annotations/stream/route.ts  SSE endpoint (GET ?fileId=)
+app/api/documents/[docId]/versions/       API จัด version เอกสาร (POST/GET + download-link)
+app/note/page.tsx              รายการไฟล์ + ฟอร์มอัปโหลด (N4)
+app/note/annotate/[id]/page.tsx  โหลด file + initial data → PDFViewer
 components/pdf/           PDFViewer (root + virtualization), InkLayer, HighlightToolbar
 components/sidebar/       AnnotationSidebar
-public/samples/           ไฟล์ตัวอย่าง (PDF + รูปภาพ) — seed ด้วย npm run seed-samples
-public/uploads/           ไฟล์ที่อัปโหลดผ่านหน้ารายการ (N4)
+public/note/samples/      ไฟล์ตัวอย่าง (PDF + รูปภาพ) — seed ด้วย npm run seed-samples
+public/note/uploads/      ไฟล์ที่อัปโหลดผ่านหน้ารายการ (N4)
 ```

app/actions/annotations.ts

@@ -34,6 +34,7 @@ import {
   MAX_BOOKMARK_NOTE_CHARS,
   MAX_BOOKMARK_TITLE_CHARS,
 } from "@/utils/bookmark-limits";
+import { rotatedRectAABB, stampRect } from "@/utils/geometry";
 
 // ─── Input types (client ใช้ตอนเรียก action) ────────────────────────────────
 
@@ -141,6 +142,20 @@ function vPoint(v: unknown, field: string): { x: number; y: number } {
   return { x: vPercent(p.x, `${field}.x`), y: vPercent(p.y, `${field}.y`) };
 }
 
+/** vPoint แบบไม่บังคับ ≥ 0 — ใช้กับ STAMP ที่หมุน: position เป็นมุมกรอบ*ก่อนหมุน*
+ *  ซึ่งติดลบ/เกิน 100 ได้โดยกรอบจริง (AABB ของกรอบหมุน) ยังอยู่ในหน้าครบ — เกณฑ์
+ *  ความถูกต้องของพิกัดอยู่ที่ AABB ซึ่งผู้เรียกตรวจเอง (code review 2026-09-28) */
+function vPointFinite(v: unknown, field: string): { x: number; y: number } {
+  if (typeof v !== "object" || v === null) fieldError(field, "เป็น { x, y }");
+  const p = v as Record<string, unknown>;
+  for (const axis of ["x", "y"] as const) {
+    if (typeof p[axis] !== "number" || !Number.isFinite(p[axis])) {
+      fieldError(`${field}.${axis}`, "เป็นตัวเลข");
+    }
+  }
+  return { x: p.x as number, y: p.y as number };
+}
+
 function vRect(v: unknown, field: string): Rect {
   if (typeof v !== "object" || v === null) fieldError(field, "เป็น { x, y, width, height }");
   const r = v as Record<string, unknown>;
@@ -338,7 +353,9 @@ function validateAnnotationData(type: AnnotationType, v: unknown): AnnotationDat
     }
     case "STAMP": {
       const label = vString(d.label, "data.label", MAX_TEXT_CHARS);
-      const position = vPoint(d.position, "data.position");
+      // position = มุมกรอบก่อนหมุน — ติดลบได้เมื่อตรายางเอียง (ดู vPointFinite)
+      // เกณฑ์ "ไม่ติดลบ" ตรวจที่ AABB ของตรายางด้านล่างแทน position ตรง ๆ
+      const position = vPointFinite(d.position, "data.position");
       // scale เป็น % ของความกว้างหน้า — ต้องเป็นบวกจึงมีความหมาย
       if (
         typeof d.scale !== "number" ||
@@ -350,12 +367,41 @@ function validateAnnotationData(type: AnnotationType, v: unknown): AnnotationDat
       // สีตรายางเป็น optional — ไม่มี = STAMP_COLOR (แถวเดิม)
       const color = d.color !== undefined ? vString(d.color, "data.color") : undefined;
       const note = vNote(d.note);
+      // มุมเอียง (องศา −180..180 หมุนรอบกลางกรอบ) optional — ไม่มี = ไม่เอียง
+      if (
+        d.rotation !== undefined &&
+        (typeof d.rotation !== "number" ||
+          !Number.isFinite(d.rotation) ||
+          d.rotation < -180 ||
+          d.rotation > 180)
+      ) {
+        fieldError("data.rotation", "เป็นตัวเลข −180 ถึง 180");
+      }
+      // เกณฑ์พิกัดไม่ติดลบของ STAMP = AABB ของกรอบ (หมุนรอบกลางกรอบแล้ว): ตรายาง
+      // เอียงชิดขอบ มุมก่อนหมุนหลุดนอกหน้าได้โดยตัวตรายางจริงยังอยู่ในหน้าครบ —
+      // ตรวจ position ตรง ๆ แล้ว client clamp (ยึด AABB) ขัดกับ validator จนลาก
+      // ถึงขอบแล้วเด้งกลับ (code review 2026-09-28); ไม่มี rotation → AABB = rect
+      // เดิม เกณฑ์เดิมเป๊ะ — คำนวณด้วย estimate (pure ฝั่ง server ไม่มี DOM)
+      const stampAabb = rotatedRectAABB(
+        stampRect(
+          { label, position, scale: d.scale, rotation: d.rotation ?? 0 },
+          { width: 100, height: 100 },
+        ),
+      );
+      // tolerance 2% ของหน้า: clamp ฝั่ง client ยึด measure จริงของ browser
+      // (measureStampText) ขณะที่นี่ยึด stampLayoutEstimate — ฟอนต์ต่อเครื่องทำให้
+      // จำนวนบรรทัด/AABB คลาดกันนิดหน่อย ค่าที่บนจอพอดีเป๊ะต้องไม่ถูกปฏิเสธเด้งกลับ
+      // (code review 2026-09-29) — ยอมให้ AABB ยื่นเกินขอบนิดหน่อยแลกกับไม่เด้ง
+      if (stampAabb.x < -2 || stampAabb.y < -2) {
+        fieldError("data.position", "เป็นพิกัดที่ตรายางยังอยู่ในหน้า (ไม่ติดลบ)");
+      }
       return {
         label,
         position,
         scale: d.scale,
         ...(color ? { color } : {}),
         ...(note !== undefined ? { note } : {}),
+        ...(d.rotation !== undefined ? { rotation: d.rotation } : {}),
       } satisfies StampData;
     }
     case "SHAPE": {
@@ -399,8 +445,8 @@ function validateAnnotationData(type: AnnotationType, v: unknown): AnnotationDat
  * hard refresh ถึงเห็น (force-dynamic ปิดแค่ cache ฝั่ง server เท่านั้น)
  */
 function revalidateFilePages(fileId: string) {
-  revalidatePath(`/annotate/${fileId}`);
-  revalidatePath(`/annotate/${fileId}/summary`);
+  revalidatePath(`/note/annotate/${fileId}`);
+  revalidatePath(`/note/annotate/${fileId}/summary`);
 }
 
 export async function createAnnotation(input: CreateAnnotationInput): Promise<AnnotationDTO> {

app/actions/auth.ts

@@ -36,6 +36,6 @@ export async function logout(): Promise<void> {
   // ลบ cookie ด้วย path "/" เท่านั้น (ตรงกับตอน set) ไม่งั้น browser ไม่ลบให้
   cookies().set(OAC_CASE_COOKIE, "", { path: "/", maxAge: 0 });
   // redirect ใน action เอง — ให้ Next จัดการ navigation กลไกเดียว
-  // (ถ้าให้ client router.replace เอง จะชนกับ re-render ของหน้า "/" ที่เพิ่งเสีย session จน navigation ไม่เกิด)
-  redirect("/login");
+  // (ถ้าให้ client router.replace เอง จะชนกับ re-render ของหน้ารายการที่เพิ่งเสีย session จน navigation ไม่เกิด)
+  redirect("/note/login");
 }

app/actions/files.ts

@@ -1,8 +1,8 @@
 "use server";
 
 // N4 — อัปโหลดไฟล์เอกสารแบบง่าย (PDF/jpg/jpeg/png/tif/tiff) ผ่านหน้ารายการ
-// เขียนไฟล์**ใหม่**ที่ public/uploads/<uuid>.<ext> เท่านั้น (ชื่อจาก randomUUID — กันชนกัน/กัน path traversal)
-// ไม่มี SSE event: รายการไฟล์ไม่ได้ sync ผ่าน SSE — revalidatePath("/") พอ (สเปก PLAN-FEAT.md §7 N4)
+// เขียนไฟล์**ใหม่**ที่ public/note/uploads/<uuid>.<ext> เท่านั้น (ชื่อจาก randomUUID — กันชนกัน/กัน path traversal)
+// ไม่มี SSE event: รายการไฟล์ไม่ได้ sync ผ่าน SSE — revalidatePath("/note") พอ (สเปก PLAN-FEAT.md §7 N4)
 import { randomUUID } from "node:crypto";
 import { mkdir, unlink, writeFile } from "node:fs/promises";
 import path from "node:path";
@@ -11,10 +11,12 @@ import { revalidatePath } from "next/cache";
 
 import { db } from "@/db";
 import { files } from "@/db/schema";
+import { normDocumentGroup } from "@/utils/external-file";
 import { SAMPLE_FILE_EXTENSIONS } from "@/utils/file-kind";
+import { decodeUploadFilename } from "@/utils/upload-name";
 
 const MAX_UPLOAD_BYTES = 100 * 1024 * 1024; // 100MB (ตาม bodySizeLimit ใน next.config.mjs)
-const UPLOAD_DIR = path.join(process.cwd(), "public", "uploads");
+const UPLOAD_DIR = path.join(process.cwd(), "public", "note", "uploads");
 
 export type UploadFileResult =
   | { ok: true; fileId: string; title: string }
@@ -66,7 +68,10 @@ export async function uploadFile(formData: FormData): Promise<UploadFileResult>
   if (file.size === 0) {
     return { ok: false, error: "ไฟล์ว่าง (0 ไบต์) — เลือกไฟล์ที่สมบูรณ์" };
   }
-  const ext = allowedExt(file.name);
+  // ชื่อไฟล์ที่ browser ส่งมาโดน undici ถอดรหัสเป็น latin1 (ชื่อไทยเพี้ยน) —
+  // ถอดกลับก่อนใช้ทั้งตรวจ extension และตั้ง title
+  const fileName = decodeUploadFilename(file.name);
+  const ext = allowedExt(fileName);
   if (!ext) {
     return {
       ok: false,
@@ -92,16 +97,17 @@ export async function uploadFile(formData: FormData): Promise<UploadFileResult>
   const diskPath = path.join(UPLOAD_DIR, diskName);
   await writeFile(diskPath, bytes);
 
-  const title = sanitizeTitle(file.name);
+  const title = sanitizeTitle(fileName);
   const pdfUrl = `/uploads/${diskName}`;
+  const typeId = normDocumentGroup(formData.get("typeId"));
   try {
-    await db.insert(files).values({ id, title, pdfUrl });
+    await db.insert(files).values({ id, title, pdfUrl, typeId });
   } catch (err) {
     // DB fail หลังเขียนไฟล์ — เก็บกวาดไฟล์ก่อนโยนต่อ กันไฟล์กำพร้าไม่มี row ชี้ (ไม่มีกลไกเก็บอื่น)
     await unlink(diskPath).catch(() => undefined);
     throw err;
   }
 
-  revalidatePath("/");
+  revalidatePath("/note");
   return { ok: true, fileId: id, title };
 }

app/annotate/[id]/summary/page.tsx

@@ -1,469 +0,0 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { asc, eq } from "drizzle-orm";
-import { notFound } from "next/navigation";
-import {
-  ArrowLeft,
-  Bookmark,
-  Braces,
-  ChevronDown,
-  ChevronRight,
-  ClipboardList,
-  FileDown,
-  StickyNote,
-} from "lucide-react";
-
-import { AnnotationTypeIcon } from "@/components/AnnotationTypeIcon";
-import CollapsibleBlock from "@/components/summary/CollapsibleBlock";
-import { db } from "@/db";
-import {
-  annotations,
-  bookmarks,
-  files,
-  toAnnotationDTO,
-  toBookmarkDTO,
-  type AnnotationDTO,
-  type AnnotationType,
-  type BookmarkDTO,
-} from "@/db/schema";
-import {
-  annotationNote,
-  annotationPreviewText,
-  annotationTypeLabel,
-} from "@/utils/annotation-display";
-import { withBasePath } from "@/utils/base-path";
-
-// หน้าสรุปหมายเหตุ (F15/D2) — server component รวม annotation (ทุกผู้ใช้) + bookmark
-// จัดกลุ่มตามหน้า แต่ละแถวกระโดดเป็น deep link `/annotate/<id>?ann=` / `?page=` (F12)
-// — design "แฟ้มสำนวน" 2026-09-17: แถบหัวกระดาษน้ำเงิน (สืบต่อจาก tile JN ของแบรนด์) +
-// รายการตามหน้าจุดไข่ปลา + การ์ดรายหน้า 1 หน้า 1 การ์ด (คำขอผู้ใช้ 2026-09-17 แทนแผ่น
-// กระดาษแผ่นเดียวคั่นเส้น) แต่ละการ์ดมีขอบ folio เลขหน้าใหญ่; รายการตามหน้าเป็น anchor
-// link (#page-N) ล้วน — desktop เป็น sticky aside แบบการ์ด ส่วนมือถือ (< lg) เป็น
-// <details> แบบการ์ด ไม่มี JS / client component เดียวของหน้าคือ CollapsibleBlock
-// (หุบ/กางกลุ่ม Bookmark/Annotation)
-
-const UUID_RE =
-  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-
-/** ชื่อย่อต่อชนิดสำหรับบรรทัดสรุปของแต่ละหน้า (ชื่อเต็มอยู่ที่ annotationTypeLabel) */
-const TYPE_SHORT: Record<AnnotationType, string> = {
-  HIGHLIGHT: "ไฮไลต์",
-  DRAW: "เส้นวาด",
-  COMMENT: "คอมเมนต์",
-  SHAPE: "รูปทรง",
-  REDACTION: "ปิดพราง",
-  TEXTBOX: "กล่องข้อความ",
-  STAMP: "ตรายาง",
-};
-
-/** ลำดับชนิดในบรรทัดสรุป — ตามลำดับ enum ให้ deterministic ไม่ขึ้นกับลำดับสร้างรายการ */
-const TYPE_ORDER = Object.keys(TYPE_SHORT) as AnnotationType[];
-
-type PageBucket = {
-  anns: AnnotationDTO[];
-  bms: BookmarkDTO[];
-  typeCounts: Partial<Record<AnnotationType, number>>;
-  resolvedCount: number;
-  participants: Set<string>;
-};
-
-/** บรรทัดสรุปของหน้า: "ไฮไลต์ 1 · คอมเมนต์ 1 (จัดการแล้ว 1) · โดย ผู้พิพากษา ก., เลขานุการ ข."
- *  (หน้าที่มีแต่ที่คั่นหน้า = "โดย …" อย่างเดียว) */
-function pageSummaryLine(b: PageBucket): string {
-  const parts: string[] = [];
-  for (const t of TYPE_ORDER) {
-    const n = b.typeCounts[t];
-    if (!n) continue;
-    if (t === "COMMENT" && b.resolvedCount > 0)
-      parts.push(`คอมเมนต์ ${n} (จัดการแล้ว ${b.resolvedCount})`);
-    else parts.push(`${TYPE_SHORT[t]} ${n}`);
-  }
-  const who = Array.from(b.participants).sort((x, y) => x.localeCompare(y, "th"));
-  const shown = who.slice(0, 3).join(", ");
-  const whoLabel = who.length > 3 ? `${shown} และอีก ${who.length - 3} คน` : shown;
-  return parts.length > 0 ? `${parts.join(" · ")} · โดย ${whoLabel}` : `โดย ${whoLabel}`;
-}
-
-/** focus ring ร่วมของทุกลิงก์ในหน้า — จอสัมผัสได้ 44px อัตโนมัติจากกฎ
- *  `main.summary-page a`/`button` ใน globals.css (ห้ามถอด class summary-page
- *  ของ <main>) */
-const RING_CLS =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1";
-
-export const dynamic = "force-dynamic";
-
-// design review 2026-09-17 M5: ชื่อแท็บ browser ระบุคดี — เลขานุการเปิดหลายคดี
-// หลายแท็บพร้อมกัน (เดิมทุกแท็บชื่อ "Judge's Note" เหมือนกันหมดแยกไม่ออก)
-export async function generateMetadata({
-  params,
-}: {
-  params: { id: string };
-}): Promise<Metadata> {
-  const { id } = params;
-  if (!UUID_RE.test(id)) return { title: "สรุปหมายเหตุ | Judge's Note" };
-  const [file] = await db
-    .select({ title: files.title })
-    .from(files)
-    .where(eq(files.id, id));
-  return {
-    title: `สรุปหมายเหตุ — ${file?.title ?? "ไม่พบไฟล์"} | Judge's Note`,
-  };
-}
-
-export default async function SummaryPage({
-  params,
-}: {
-  params: { id: string };
-}) {
-  const { id } = params;
-  if (!UUID_RE.test(id)) notFound();
-
-  const [file] = await db.select().from(files).where(eq(files.id, id));
-  if (!file) notFound();
-
-  const annRows = await db
-    .select()
-    .from(annotations)
-    .where(eq(annotations.fileId, id))
-    .orderBy(asc(annotations.pageIndex), asc(annotations.createdAt));
-  const dtos = annRows.map(toAnnotationDTO);
-
-  // bookmark เรียงตามหน้า → ตำแหน่งบนหน้า → เวลาสร้าง (N5 เหมือน sidebar)
-  const bmRows = await db
-    .select()
-    .from(bookmarks)
-    .where(eq(bookmarks.fileId, id))
-    .orderBy(
-      asc(bookmarks.pageIndex),
-      asc(bookmarks.yOffset),
-      asc(bookmarks.createdAt),
-    );
-  const bmDtos = bmRows.map(toBookmarkDTO);
-  const bookmarkById = new Map(bmDtos.map((b) => [b.id, b] as const));
-
-  // จัดกลุ่มตามหน้าแบบ union — หน้าปรากฏเมื่อมี annotation หรือ bookmark ≥ 1 รายการ
-  const pageMap = new Map<number, PageBucket>();
-  const bucketOf = (pageIndex: number): PageBucket => {
-    let b = pageMap.get(pageIndex);
-    if (!b) {
-      b = { anns: [], bms: [], typeCounts: {}, resolvedCount: 0, participants: new Set() };
-      pageMap.set(pageIndex, b);
-    }
-    return b;
-  };
-  for (const a of dtos) {
-    const b = bucketOf(a.pageIndex);
-    b.anns.push(a);
-    b.typeCounts[a.type] = (b.typeCounts[a.type] ?? 0) + 1;
-    if (a.type === "COMMENT" && a.resolved) b.resolvedCount += 1;
-    b.participants.add(a.userName);
-  }
-  for (const b of bmDtos) {
-    const bucket = bucketOf(b.pageIndex);
-    bucket.bms.push(b);
-    bucket.participants.add(b.userName || "ไม่ทราบชื่อ");
-  }
-  const pages = Array.from(pageMap.entries()).sort((x, y) => x[0] - y[0]);
-
-  // ภาพรวมระดับไฟล์สำหรับรายการตามหน้า desktop (sticky aside) + มือถือ (<details>)
-  const allParticipants = Array.from(
-    new Set([
-      ...dtos.map((a) => a.userName),
-      ...bmDtos.map((b) => b.userName || "ไม่ทราบชื่อ"),
-    ]),
-  ).sort((x, y) => x.localeCompare(y, "th"));
-
-  return (
-    <main className="summary-page mx-auto max-w-3xl px-4 py-6 lg:max-w-6xl lg:px-8">
-      {/* หัวกระดาษสำนวน — แถบน้ำเงินสืบต่อจาก tile JN ของแบรนด์ (หน้ารายการ/login):
-          ชื่อรายงาน + ชื่อแฟ้ม + สถิติในที่เดียว แล้วปิดท้ายด้วยเส้นคั่นบาง */}
-      <header className="rounded-xl bg-primary px-5 py-4 text-white shadow-sm sm:px-6">
-        <h1 className="text-lg font-semibold leading-snug">สรุปหมายเหตุ</h1>
-        <p className="mt-0.5 break-words text-sm text-white/85">{file.title}</p>
-        {pages.length > 0 && (
-          <p className="mt-2 text-xs tabular-nums text-white/70">
-            Annotation {dtos.length} รายการ · Bookmark {bmDtos.length} รายการ ·{" "}
-            {pages.length} หน้า
-          </p>
-        )}
-      </header>
-
-      {/* แถบ action — ghost button ขาวมีขอบ ภาษาเดียวกับการ์ดของหน้า (คำขอผู้ใช้
-          2026-09-17 แทนลิงก์ข้อความเปล่า — เห็นเป็นปุ่มชัดขึ้น; จอสัมผัสได้ 44px
-          จากกฎ coarse; ตอนพิมพ์ซ่อนทิ้ง — ปุ่มกลับ/export ไม่มีความหมายบนกระดาษ) */}
-      <div className="mt-3 flex flex-wrap items-center justify-between gap-x-2 gap-y-1 print:hidden">
-        <Link
-          href={`/annotate/${id}`}
-          className={`inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-sm hover:border-slate-300 hover:bg-slate-50 ${RING_CLS}`}
-        >
-          <ArrowLeft aria-hidden className="h-3.5 w-3.5" />
-          กลับหน้าอ่าน
-        </Link>
-        <div className="flex items-center gap-2">
-          {/* F16/D3: export สรุปเป็น CSV (UTF-8 BOM) */}
-          <a
-            href={withBasePath(`/api/annotations/export-csv?fileId=${id}`)}
-            className={`flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-sm hover:border-slate-300 hover:bg-slate-50 ${RING_CLS}`}
-          >
-            <FileDown aria-hidden className="h-3.5 w-3.5" />
-            ส่งออกสรุป (CSV)
-          </a>
-          {/* N7: ส่งออก Bookmark ทั้งหมดเป็น JSON (label บอกขอบเขตเอง — คู่กับ
-              "ส่งออกสรุป (CSV)" ข้างบน ไม่ต้องพึ่ง title tooltip ที่จอสัมผัสใช้ไม่ได้) */}
-          <a
-            href={withBasePath(`/api/bookmarks/export?fileId=${id}`)}
-            className={`flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-sm hover:border-slate-300 hover:bg-slate-50 ${RING_CLS}`}
-          >
-            <Braces aria-hidden className="h-3.5 w-3.5" />
-            ส่งออก Bookmark (JSON)
-          </a>
-        </div>
-      </div>
-
-      {pages.length === 0 ? (
-        <div className="mt-5 rounded-xl border border-dashed border-slate-300 bg-white/70 p-10 text-center">
-          <ClipboardList aria-hidden className="mx-auto h-8 w-8 text-slate-300" />
-          <p className="mt-3 text-sm font-medium text-slate-600">
-            ยังไม่มี Annotation หรือ Bookmark ในไฟล์นี้
-          </p>
-          <p className="mt-1 text-xs text-slate-500">
-            เปิดหน้าอ่านเพื่อมาร์กข้อความ วาดเส้น ใส่คอมเมนต์ หรือคั่นหน้า
-          </p>
-          <Link
-            href={`/annotate/${id}`}
-            className={`mt-4 inline-flex rounded-md bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90 ${RING_CLS}`}
-          >
-            เปิดหน้าอ่าน
-          </Link>
-        </div>
-      ) : (
-        <div className="mt-5 lg:grid lg:grid-cols-[220px_minmax(0,1fr)] lg:items-start lg:gap-8">
-          {/* รายการตามหน้ามือถือ (จอ < lg) — design review 2026-09-17 H2: คืน navigation ที่หาย
-              ไปบนมือถือ (aside ด้านล่างแสดงเฉพาะ lg) ใช้ <details> ได้หุบ/กาง + keyboard
-              โดยไม่มี JS เพิ่ม — จุดไข่ปลา + ผู้ร่วมทำ ภาษาเดียวกับ desktop (จอ lg กับ
-              ตอนพิมพ์ซ่อน — display:none ไม่กินช่องของกริด) */}
-          <details className="group rounded-xl border border-slate-200 bg-white shadow-sm lg:hidden print:hidden">
-            <summary className="flex cursor-pointer list-none items-center justify-between rounded-md px-4 py-3 text-sm font-semibold text-slate-800 hover:text-primary [&::-webkit-details-marker]:hidden">
-              รายการตามหน้าและผู้ร่วมทำ
-              <ChevronDown
-                aria-hidden
-                className="h-4 w-4 shrink-0 text-slate-400 transition-transform group-open:rotate-180 motion-reduce:transition-none"
-              />
-            </summary>
-            <nav
-              aria-label="รายการตามหน้า"
-              className="flex flex-col gap-0.5 border-t border-slate-100 px-2 pb-2 pt-2"
-            >
-              {pages.map(([pi, b]) => (
-                <a
-                  key={pi}
-                  href={`#page-${pi + 1}`}
-                  aria-label={`หน้า ${pi + 1}, ${b.anns.length + b.bms.length} รายการ`}
-                  className={`flex items-end gap-1.5 rounded-md px-2 py-2 text-sm text-slate-600 hover:text-primary ${RING_CLS}`}
-                >
-                  <span className="leading-5">หน้า {pi + 1}</span>
-                  <span
-                    aria-hidden
-                    className="mb-1.5 min-w-4 flex-1 border-b border-dotted border-slate-400"
-                  />
-                  <span className="leading-5 tabular-nums text-slate-500">
-                    {b.anns.length + b.bms.length}
-                  </span>
-                </a>
-              ))}
-            </nav>
-            <p className="border-t border-slate-100 px-4 py-3 text-xs leading-relaxed text-slate-600">
-              ผู้ร่วมทำ: {allParticipants.join(" · ")}
-            </p>
-          </details>
-
-          {/* รายการตามหน้า (จอ ≥ lg) — จุดไข่ปลาแบบสารบัญของเอกสารราชการ anchor ล้วนไม่มี JS
-              เป็นการ์ดชุดเดียวกับ <details> มือถือและการ์ดรายหน้า (แสดงเฉพาะหน้าที่มี
-              รายการ ≥ 1 ตามหลัก minimize choices; max-h กันเอกสารหลายสิบหน้าสูงเกินจอ
-              — ครึ่งล่างของ sticky กดไม่ได้ตลอดกาล) */}
-          <aside className="hidden rounded-xl border border-slate-200 bg-white p-4 shadow-sm lg:sticky lg:top-6 lg:block lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto">
-            <h2 className="text-sm font-semibold text-slate-800">รายการตามหน้า</h2>
-            <nav aria-label="รายการตามหน้า" className="mt-2 flex flex-col gap-1">
-              {pages.map(([pi, b]) => (
-                <a
-                  key={pi}
-                  href={`#page-${pi + 1}`}
-                  aria-label={`หน้า ${pi + 1}, ${b.anns.length + b.bms.length} รายการ`}
-                  className={`flex items-end gap-1.5 rounded-md px-1 text-sm text-slate-600 hover:text-primary ${RING_CLS}`}
-                >
-                  <span className="leading-5">หน้า {pi + 1}</span>
-                  <span
-                    aria-hidden
-                    className="mb-1.5 min-w-4 flex-1 border-b border-dotted border-slate-400"
-                  />
-                  <span className="leading-5 tabular-nums text-slate-500">
-                    {b.anns.length + b.bms.length}
-                  </span>
-                </a>
-              ))}
-            </nav>
-
-            <h2 className="mt-6 border-t border-slate-300/60 pt-4 text-sm font-semibold text-slate-800">
-              ผู้ร่วมทำ
-            </h2>
-            <p className="mt-1.5 px-1 text-xs leading-relaxed text-slate-600">
-              {allParticipants.join(" · ")}
-            </p>
-          </aside>
-
-          {/* การ์ดรายหน้า — 1 หน้า 1 การ์ด เรียงลงมาแยกด้วยช่องว่าง (คำขอผู้ใช้
-              2026-09-17 แทนแผ่นกระดาษแผ่นเดียวคั่นเส้น); แต่ละการ์ดมีขอบ folio:
-              เลขหน้าใหญ่ + เส้นดิ่ง แบบเลขหน้าบนขอบกระดาษ (mt-5 lg:mt-0 — ระยะจาก
-              รายการตามหน้า <details> บนมือถือ; จอ lg กริดจัดให้) */}
-          <div className="mt-5 flex flex-col gap-4 lg:mt-0">
-            {pages.map(([pi, b]) => {
-              return (
-                <section
-                  key={pi}
-                  id={`page-${pi + 1}`}
-                  aria-labelledby={`page-${pi + 1}-title`}
-                  className="scroll-mt-6 grid grid-cols-[2.75rem_1fr] rounded-xl border border-slate-200 bg-white shadow-sm sm:grid-cols-[3.75rem_1fr]"
-                >
-                  {/* ขอบ folio — "หน้า" เล็ก + เลขใหญ่ชิดเส้นดิ่ง */}
-                  <div className="border-r border-slate-100 py-4 pl-3 pr-2 text-right sm:pl-4">
-                    <h2 id={`page-${pi + 1}-title`} className="tabular-nums">
-                      <span className="block text-[11px] leading-none text-slate-500">
-                        หน้า
-                      </span>
-                      <span className="mt-1 block text-2xl font-semibold leading-none text-primary">
-                        {pi + 1}
-                      </span>
-                    </h2>
-                  </div>
-
-                  {/* เนื้อหาของหน้า — บรรทัดสรุปหน้า (ไม่มีหัวข้อคำอธิบาย) /
-                      Bookmark / Annotation (หุบ-กางได้, รายการเยื้องจากหัวข้อ) */}
-                  <div className="min-w-0 py-3 pl-3 pr-3 sm:pl-4 sm:pr-5 sm:py-4">
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="min-w-0">
-                        <p className="text-sm leading-relaxed text-slate-600">
-                          {pageSummaryLine(b)}
-                        </p>
-                      </div>
-                      <Link
-                        href={`/annotate/${id}?page=${pi + 1}`}
-                        className={`inline-flex shrink-0 items-center gap-0.5 text-xs text-primary hover:underline ${RING_CLS}`}
-                      >
-                        เปิดหน้านี้
-                        <ChevronRight aria-hidden className="h-3 w-3" />
-                      </Link>
-                    </div>
-
-                    {/* ที่คั่นหน้าของหน้านี้ทั้งหมด (root + sub) เรียงตาม yOffset */}
-                    {b.bms.length > 0 && (
-                      <div className="mt-2">
-                        <CollapsibleBlock kind="bookmark" count={b.bms.length}>
-                        <ul className="divide-y divide-slate-100">
-                          {b.bms.map((bm) => {
-                            const parent = bm.parentId
-                              ? bookmarkById.get(bm.parentId)
-                              : undefined;
-                            return (
-                              <li key={bm.id} className="ml-4">
-                                <Link
-                                  href={`/annotate/${id}?page=${pi + 1}`}
-                                  className={`group -mx-2 flex items-start gap-2 rounded-lg px-2 py-2.5 transition hover:bg-slate-50 ${RING_CLS}`}
-                                >
-                                  <Bookmark
-                                    aria-hidden
-                                    className="mt-1 h-4 w-4 shrink-0 text-amber-500"
-                                  />
-                                  <span className="min-w-0 flex-1">
-                                    <span className="block whitespace-pre-wrap break-words text-sm font-medium leading-snug text-slate-800">
-                                      {bm.title}
-                                    </span>
-                                    <span className="mt-0.5 block truncate text-xs text-slate-500">
-                                      โดย {bm.userName || "ไม่ทราบชื่อ"}
-                                      {parent ? ` · ใน: ${parent.title}` : ""}
-                                    </span>
-                                    {bm.note && (
-                                      <span className="mt-0.5 flex items-start gap-1 text-xs leading-relaxed text-slate-500">
-                                        <StickyNote
-                                          aria-hidden
-                                          className="mt-0.5 h-3 w-3 shrink-0 text-amber-400"
-                                        />
-                                        <span className="line-clamp-2 whitespace-pre-wrap break-words">
-                                          {bm.note}
-                                        </span>
-                                      </span>
-                                    )}
-                                  </span>
-                                  <ChevronRight
-                                    aria-hidden
-                                    className="mt-1.5 h-4 w-4 shrink-0 text-slate-300 group-hover:text-slate-400"
-                                  />
-                                </Link>
-                              </li>
-                            );
-                          })}
-                        </ul>
-                        </CollapsibleBlock>
-                      </div>
-                    )}
-
-                    {/* หมายเหตุของหน้านี้ — แถวคลิกได้ทั้งแถว (เป้าใหญ่บนจอสัมผัส) */}
-                    {b.anns.length > 0 && (
-                      <div className={b.bms.length > 0 ? "mt-3" : "mt-2"}>
-                        <CollapsibleBlock kind="annotation" count={b.anns.length}>
-                        <ul className="divide-y divide-slate-100">
-                          {b.anns.map((a) => (
-                            <li key={a.id} className="ml-4">
-                              <Link
-                                href={`/annotate/${id}?ann=${a.id}`}
-                                className={`group -mx-2 flex items-start gap-2 rounded-lg px-2 py-2.5 transition hover:bg-slate-50 ${RING_CLS}`}
-                              >
-                                <AnnotationTypeIcon
-                                  type={a.type}
-                                  data={a.data}
-                                  className="mt-1 h-4 w-4 shrink-0 text-slate-500"
-                                />
-                                <span className="min-w-0 flex-1">
-                                  <span className="block whitespace-pre-wrap break-words text-sm leading-snug text-slate-800">
-                                    {annotationPreviewText(a)}
-                                    {a.type === "COMMENT" && a.resolved && (
-                                      <span className="ml-1.5 whitespace-nowrap rounded border border-emerald-600/50 bg-emerald-50 px-1.5 py-0.5 text-xs text-emerald-700">
-                                        จัดการแล้ว
-                                      </span>
-                                    )}
-                                  </span>
-                                  <span className="mt-0.5 block text-xs text-slate-500">
-                                    {annotationTypeLabel(a)} · โดย {a.userName}
-                                  </span>
-                                  {annotationNote(a) && (
-                                    <span className="mt-0.5 flex items-start gap-1 text-xs leading-relaxed text-slate-500">
-                                      <StickyNote
-                                        aria-hidden
-                                        className="mt-0.5 h-3 w-3 shrink-0 text-amber-400"
-                                      />
-                                      <span className="line-clamp-2 whitespace-pre-wrap break-words">
-                                        {annotationNote(a)}
-                                      </span>
-                                    </span>
-                                  )}
-                                </span>
-                                <ChevronRight
-                                  aria-hidden
-                                  className="mt-1.5 h-4 w-4 shrink-0 text-slate-300 group-hover:text-slate-400"
-                                />
-                              </Link>
-                            </li>
-                          ))}
-                        </ul>
-                        </CollapsibleBlock>
-                      </div>
-                    )}
-                  </div>
-                </section>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </main>
-  );
-}

app/api/annotations/export-csv/route.ts

@@ -1,55 +0,0 @@
-import { asc, eq } from "drizzle-orm";
-
-import { db } from "@/db";
-import { annotations, files, toAnnotationDTO } from "@/db/schema";
-import { annotationNote, annotationPreviewText, annotationTypeLabel } from "@/utils/annotation-display";
-import { csvField } from "@/utils/csv";
-import { encodeRFC5987 } from "@/utils/pdf-export";
-
-// Export สรุปหมายเหตุเป็น CSV (F16/D3) — ข้อมูลเดียวกับหน้าสรุป (F15)
-// ขึ้นต้นด้วย UTF-8 BOM เพื่อให้ Excel ภาษาไทยอ่านถูกต้อง (RFC 4180: ครอบ field
-// ด้วย double quote, ขึ้นบรรทัดใหม่ด้วย CRLF)
-
-const UUID_RE =
-  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-
-export async function GET(req: Request) {
-  const fileId = new URL(req.url).searchParams.get("fileId") ?? "";
-  if (!UUID_RE.test(fileId)) {
-    return new Response("fileId ไม่ถูกต้อง", { status: 400 });
-  }
-
-  const [file] = await db.select().from(files).where(eq(files.id, fileId));
-  if (!file) return new Response("ไม่พบไฟล์นี้", { status: 404 });
-
-  const rows = await db
-    .select()
-    .from(annotations)
-    .where(eq(annotations.fileId, fileId))
-    .orderBy(asc(annotations.pageIndex), asc(annotations.createdAt));
-
-  const header = ["หน้า", "ชนิด", "ผู้เขียน", "ข้อความ", "โน้ต", "สร้างเมื่อ"];
-  const lines = rows.map((row) => {
-    const a = toAnnotationDTO(row);
-    return [
-      String(a.pageIndex + 1),
-      annotationTypeLabel(a),
-      a.userName,
-      annotationPreviewText(a),
-      annotationNote(a),
-      new Date(a.createdAt).toLocaleString("th-TH", { timeZone: "Asia/Bangkok" }),
-    ]
-      .map(csvField)
-      .join(",");
-  });
-  //  = UTF-8 BOM — ต้องเป็นตัวแรกสุดของไฟล์เสมอ
-  const csv = `${[header.map(csvField).join(","), ...lines].join("\r\n")}\r\n`;
-
-  const filename = encodeRFC5987(`${file.title}-summary.csv`);
-  return new Response(csv, {
-    headers: {
-      "content-type": "text/csv; charset=utf-8",
-      "content-disposition": `attachment; filename="summary.csv"; filename*=UTF-8''${filename}`,
-    },
-  });
-}

app/api/bookmarks/export/route.ts

@@ -1,52 +0,0 @@
-import { asc, eq } from "drizzle-orm";
-
-import { db } from "@/db";
-import { bookmarks, files, toBookmarkDTO } from "@/db/schema";
-import { encodeRFC5987 } from "@/utils/pdf-export";
-
-// ส่งออกรายการ bookmark เป็น JSON (N7 — เดิมเป็นรายงาน PDF ตาม requirement 5.3.15
-// เปลี่ยนตามคำขอผู้ใช้ 2026-09-17)
-// - ข้อมูลล้วนจาก DB ไม่โหลดไฟล์เอกสารต้นฉบับเลย (invariant #1)
-// - array flat เก็บ parentId ครบ (lossless) เรียงตามลำดับ N5 เหมือน sidebar
-//   ต้นไม้ reconstruct จาก parentId ได้เอง จึงไม่ต้อง build tree/cycle guard
-// - read-only: ไม่ publish event ไม่ revalidatePath (ไม่เขียน DB)
-
-const UUID_RE =
-  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-
-export async function GET(req: Request) {
-  const fileId = new URL(req.url).searchParams.get("fileId") ?? "";
-  if (!UUID_RE.test(fileId)) {
-    return new Response("fileId ไม่ถูกต้อง", { status: 400 });
-  }
-
-  const [file] = await db.select().from(files).where(eq(files.id, fileId));
-  if (!file) return new Response("ไม่พบไฟล์นี้", { status: 404 });
-
-  const rows = await db
-    .select()
-    .from(bookmarks)
-    .where(eq(bookmarks.fileId, fileId))
-    .orderBy(
-      asc(bookmarks.pageIndex),
-      asc(bookmarks.yOffset),
-      asc(bookmarks.createdAt),
-    );
-
-  // item เป็น BookmarkDTO ตรง ๆ (camelCase + ISO string — invariant #5)
-  const payload = {
-    fileId: file.id,
-    title: file.title,
-    exportedAt: new Date().toISOString(),
-    bookmarks: rows.map(toBookmarkDTO),
-  };
-
-  const filename = encodeRFC5987(`${file.title}-bookmarks.json`);
-  return new Response(JSON.stringify(payload, null, 2) + "\n", {
-    headers: {
-      "content-type": "application/json; charset=utf-8",
-      // filename เป็น ASCII fallback + filename* UTF-8 สำหรับชื่อไทย (pattern F8/F16)
-      "content-disposition": `attachment; filename="bookmarks.json"; filename*=UTF-8''${filename}`,
-    },
-  });
-}

app/api/documents/token/route.ts

@@ -0,0 +1,51 @@
+// PLAN-DOCVER.md §auth — POST /api/documents/token ออก access_token ของกลุ่ม docver
+// ยืนยันด้วย header "x-api-key" เทียบ env DOCVER_API_KEY (fail closed เมื่อ env ไม่
+// ตั้ง/ว่าง) — token เป็น JWT HS256 เซ็นด้วย env DOCVER_TOKEN_SECRET อายุตาม env
+// DOCVER_TOKEN_TTL_SECONDS (default 3600) แล้วนำไปแนบ Authorization: Bearer กับ
+// endpoint อื่นของกลุ่ม (lib/docver-token.ts) · segment คงที่ "token" ไม่ชน [docId]
+// (Next ให้ static ชนะ) และ middleware ยกเว้น api/documents/* อยู่แล้ว
+import { docverError } from "@/lib/document-versioning";
+import {
+  issueDocverToken,
+  parseTokenRequestBody,
+  requireDocverApiKey,
+} from "@/lib/docver-token";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function POST(request: Request) {
+  const apiKeyFail = requireDocverApiKey(request);
+  if (apiKeyFail !== null) return apiKeyFail;
+
+  let raw: unknown;
+  try {
+    raw = await request.json();
+  } catch {
+    return docverError("body ต้องเป็น JSON", 400);
+  }
+  const parsed = parseTokenRequestBody(raw);
+  if (!parsed.ok) return docverError(parsed.error, 400);
+
+  // ความผิด config ฝั่ง server ไม่ใช่ความผิดของผู้เรียก — ไม่ตั้ง = 500 (ห้าม log ค่า secret)
+  const secret = process.env.DOCVER_TOKEN_SECRET?.trim();
+  // const secret =
+  //   "487023dd1c1c4d6a07475e96b1cc300fec1e68ac9c2dd7d5ac9b1bf75da1053e";
+
+  if (secret === undefined || secret === "") {
+    return docverError("DOCVER_TOKEN_SECRET ยังไม่ถูกตั้งค่า", 500);
+  }
+  const ttlRaw = Number(process.env.DOCVER_TOKEN_TTL_SECONDS);
+  const ttlSeconds =
+    Number.isFinite(ttlRaw) && ttlRaw > 0 ? Math.floor(ttlRaw) : 3600;
+
+  const accessToken = issueDocverToken(parsed.claims, secret, ttlSeconds);
+  return new Response(
+    JSON.stringify({
+      access_token: accessToken,
+      token_type: "Bearer",
+      expires_in: ttlSeconds,
+    }),
+    { headers: { "content-type": "application/json; charset=utf-8" } },
+  );
+}

app/api/documents/versions/[versionId]/download-link/route.ts

@@ -0,0 +1,52 @@
+// PLAN-DOCVER.md §1 — GET /api/documents/versions/{versionId}/download-link?format=docx|pdf
+// คืน presigned URL อายุสั้น (env DOCVER_LINK_TTL_SECONDS) ให้ UI เปิดในเบราว์เซอร์จริง
+// ของผู้ใช้ — เช็ค docId (จาก fid ใน token) กับ versionId คู่กันกันโยน id ข้ามเอกสาร
+// auth: Authorization: Bearer (access_token จาก POST /api/documents/token — ทุก endpoint ของกลุ่ม)
+import {
+  docverError,
+  parseDownloadFormat,
+  parseVersionIdParam,
+} from "@/lib/document-versioning";
+import { requireDocverBearer } from "@/lib/docver-token";
+import { findVersionForDoc, presignVersionUrl } from "@/lib/docver-store";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { versionId: string } },
+) {
+  const auth = requireDocverBearer(request);
+  if (!auth.ok) return auth.response;
+
+  // docId มาจาก fid ใน token — claim ถูกบังคับเป็น string ไม่ว่างตั้งแต่ขอ token + verify
+  const docId = auth.claims.fid;
+  const versionId = parseVersionIdParam(params.versionId);
+  if (!versionId.ok) return docverError(versionId.error, 400);
+  let format: string | null = null;
+  try {
+    format = new URL(request.url).searchParams.get("format");
+  } catch {
+    return docverError("URL ของ request ไม่ถูกต้อง", 400);
+  }
+  const parsedFormat = parseDownloadFormat(format);
+  if (!parsedFormat.ok) return docverError(parsedFormat.error, 400);
+
+  try {
+    const row = await findVersionForDoc(docId, versionId.versionId);
+    if (!row) {
+      return docverError("ไม่พบ version นี้ของเอกสาร", 404);
+    }
+    if (parsedFormat.format === "pdf" && row.pdfObjectKey === null) {
+      return docverError("version นี้ไม่มีสำเนา PDF", 404);
+    }
+    const link = await presignVersionUrl(row.id, parsedFormat.format);
+    return new Response(JSON.stringify(link), {
+      headers: { "content-type": "application/json; charset=utf-8" },
+    });
+  } catch (err) {
+    console.error("docver: สร้าง download link ล้ม", err);
+    return docverError("เกิดข้อผิดพลาดของระบบ โปรดลองใหม่อีกครั้ง", 500);
+  }
+}

app/api/documents/versions/route.ts

@@ -0,0 +1,170 @@
+// PLAN-DOCVER.md §1 — POST อัปโหลด version ใหม่ + GET history ของ /api/documents/versions
+// กลุ่ม API stand-alone ไม่มี session — auth ด้วย access_token ของกลุ่มนี้: ขอที่
+// POST /api/documents/token (ยืนยัน x-api-key กับ env DOCVER_API_KEY) แล้วแนบ
+// Authorization: Bearer ทุก request — identity (userid/username), templateId และ
+// docId (= fid — fileId ของ e-Court, string) แกะจาก claims ของ token ทั้งหมด
+// ไม่รับจาก URL/form อีก (lib/docver-token.ts)
+import { createHash, randomUUID } from "node:crypto";
+
+import { toDocumentVersionDTO } from "@/db/schema";
+import {
+  docverError,
+  DOCVER_MAX_UPLOAD_BYTES,
+  DOCX_CONTENT_TYPE,
+  isDocxBytes,
+  isPdfBytes,
+  parseVersionUploadForm,
+  sanitizeFilePartName,
+} from "@/lib/document-versioning";
+import { requireDocverBearer } from "@/lib/docver-token";
+import {
+  findDocumentByDocId,
+  insertVersionRecord,
+  listVersionsByDocId,
+  putVersionObjects,
+  removeVersionObjects,
+  versionObjectKeys,
+} from "@/lib/docver-store";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/** POST — อัปโหลด version ใหม่ (เอกสารสร้างแบบ implicit ถ้าเป็น version แรก)
+ *  ลำดับ: Bearer token → validate text field ก่อนแตะไฟล์ → cap ขนาดก่อน buffer → magic bytes →
+ *  putObject MinIO → insert DB (tx) — DB ล้ม = เก็บกวาด object (pattern N4)
+ *  response = UploadVersionResult เป๊ะ โดย versionNumber เป็นค่า authoritative
+ *  จาก server (client เดา latest+1 แล้วแก้เองเมื่ออัปโหลดชนกัน) */
+export async function POST(request: Request) {
+  const auth = requireDocverBearer(request);
+  if (!auth.ok) return auth.response;
+
+  // docId มาจาก fid ใน token — claim ถูกบังคับเป็น string ไม่ว่างตั้งแต่ขอ token + verify
+  const docId = auth.claims.fid;
+
+  let form: FormData;
+  try {
+    form = await request.formData();
+  } catch {
+    return docverError("body ต้องเป็น multipart/form-data", 400);
+  }
+
+  const parsed = parseVersionUploadForm(form);
+  if (!parsed.ok) return docverError(parsed.error, 400);
+
+  const file = form.get("file");
+  if (!(file instanceof File)) {
+    return docverError('ต้องแนบไฟล์ .docx ใน field "file"', 400);
+  }
+  if (file.size === 0) {
+    return docverError('ไฟล์ใน field "file" ว่าง (0 ไบต์)', 400);
+  }
+  // route handler ไม่ได้รับเคราะห์ bodySizeLimit ของ Server Actions — ต้องเช็คเองก่อน buffer
+  if (file.size > DOCVER_MAX_UPLOAD_BYTES) {
+    return docverError('ไฟล์ใน field "file" ใหญ่เกิน 100MB', 413);
+  }
+  if (file.type !== DOCX_CONTENT_TYPE && !file.name.toLowerCase().endsWith(".docx")) {
+    return docverError('field "file" ต้องเป็นไฟล์ .docx', 400);
+  }
+
+  // add-in อาจแนบ pdf เป็น blob เปล่าตอน capture ไม่สำเร็จ — ถือว่าไม่มี pdf (best-effort)
+  const rawPdf = form.get("pdf");
+  let pdf: File | null = null;
+  if (rawPdf instanceof File && rawPdf.size > 0) {
+    if (rawPdf.size > DOCVER_MAX_UPLOAD_BYTES) {
+      return docverError('ไฟล์ใน field "pdf" ใหญ่เกิน 100MB', 413);
+    }
+    pdf = rawPdf;
+  }
+
+  let docxBytes: Buffer;
+  let pdfBytes: Buffer | null = null;
+  try {
+    docxBytes = Buffer.from(await file.arrayBuffer());
+    pdfBytes = pdf ? Buffer.from(await pdf.arrayBuffer()) : null;
+  } catch (err) {
+    console.error("docver: อ่านไฟล์แนบเข้าหน่วยความจำไม่สำเร็จ", err);
+    return docverError("เกิดข้อผิดพลาดของระบบ โปรดลองใหม่อีกครั้ง", 500);
+  }
+  if (!isDocxBytes(docxBytes)) {
+    return docverError("เนื้อไฟล์ .docx ไม่ถูกต้อง (ไม่ใช่ OOXML/ZIP)", 400);
+  }
+  if (pdfBytes && !isPdfBytes(pdfBytes)) {
+    return docverError("เนื้อไฟล์ .pdf ไม่ถูกต้อง", 400);
+  }
+
+  const contentHash = createHash("sha256").update(docxBytes).digest("hex");
+  const versionId = randomUUID();
+  // ชื่อแสดงผลตอนดาวน์โหลด: field "fileName" ของผู้เรียก (add-in ส่งมาเอง) →
+  // ไม่ส่งค่อยใช้ชื่อของ File (ผ่าน decodeUploadFilename — undici ถอดชื่อไทยเป็น latin1)
+  const docxDisplayName =
+    parsed.form.fileName ?? sanitizeFilePartName(file.name);
+
+  try {
+    await putVersionObjects({
+      versionId,
+      docx: { bytes: docxBytes, fileName: docxDisplayName },
+      pdf: pdf ? { bytes: pdfBytes!, fileName: sanitizeFilePartName(pdf.name) } : undefined,
+    });
+  } catch (err) {
+    console.error("docver: เขียน object ลง MinIO ไม่สำเร็จ", err);
+    return docverError("เกิดข้อผิดพลาดของระบบ โปรดลองใหม่อีกครั้ง", 500);
+  }
+
+  const keys = versionObjectKeys(versionId);
+  let row;
+  try {
+    row = await insertVersionRecord({
+      versionId,
+      docId,
+      clientVersionId: parsed.form.clientVersionId,
+      contentHash,
+      message: parsed.form.message,
+      fields: parsed.form.fields,
+      templateId: auth.claims.template,
+      fileName: docxDisplayName,
+      docxObjectKey: keys.docx,
+      pdfObjectKey: pdfBytes ? keys.pdf : null,
+      docxSize: docxBytes.length,
+      pdfSize: pdfBytes?.length ?? null,
+      userId: auth.claims.userid,
+      userName: auth.claims.username,
+    });
+  } catch (err) {
+    // DB ล้มหลังเขียน object — เก็บกวาดก่อนตอบ กัน object กำพร้าไม่มี row ชี้
+    console.error("docver: insert version ล้ม — เก็บกวาด object ที่เขียนไปแล้ว", err);
+    await removeVersionObjects(versionId, pdfBytes !== null);
+    return docverError("เกิดข้อผิดพลาดของระบบ โปรดลองใหม่อีกครั้ง", 500);
+  }
+
+  return new Response(
+    JSON.stringify({
+      hasPdf: pdfBytes !== null,
+      versionId: row.id,
+      versionNumber: row.versionNumber,
+    }),
+    { headers: { "content-type": "application/json; charset=utf-8" } },
+  );
+}
+
+/** GET — history ของเอกสาร (ใหม่ → เก่า) · docId ที่ยังไม่เคยมี version = 404
+ *  (สัญญาณ REST ตรง ๆ แบบ N10 — UI ฝั่ง add-in แสดง error + ปุ่มลองใหม่ ไม่พัง) */
+export async function GET(request: Request) {
+  const auth = requireDocverBearer(request);
+  if (!auth.ok) return auth.response;
+
+  const docId = auth.claims.fid;
+
+  try {
+    const doc = await findDocumentByDocId(docId);
+    if (!doc) {
+      return docverError("ไม่พบเอกสารนี้ในระบบ (ยังไม่เคยอัปโหลด version)", 404);
+    }
+    const rows = await listVersionsByDocId(doc.id);
+    return new Response(JSON.stringify(rows.map(toDocumentVersionDTO)), {
+      headers: { "content-type": "application/json; charset=utf-8" },
+    });
+  } catch (err) {
+    console.error("docver: โหลด version history ล้ม", err);
+    return docverError("เกิดข้อผิดพลาดของระบบ โปรดลองใหม่อีกครั้ง", 500);
+  }
+}

app/api/note/annotations/export/route.ts

@@ -8,16 +8,18 @@ import {
   PDFName,
   PDFString,
   LineCapStyle,
+  degrees,
   rgb,
   type PDFFont,
   type PDFDict,
   type PDFPage,
   type PDFRef,
 } from "pdf-lib";
-import { asc, eq, inArray } from "drizzle-orm";
+import { and, asc, eq, inArray } from "drizzle-orm";
 
 import { db } from "@/db";
 import { PdfPathError, readPublicPdf } from "@/lib/server-pdf";
+import { fetchSourceBytes, isRemoteSource, RemoteFileError } from "@/lib/remote-file";
 import {
   annotationReplies,
   annotations,
@@ -50,15 +52,16 @@ import { toPx, type Point, type Size } from "@/utils/coordinates";
 import { fileKindFromUrl } from "@/utils/file-kind";
 import { imageDocFromBytes } from "@/utils/image-to-pdf";
 import {
-  STAMP_HEIGHT_RATIO,
   annotationBBox,
+  rotatePoint,
+  stampBoxHeight,
+  stampLayout,
   textboxMaxWidthPct,
 } from "@/utils/geometry";
 import {
   STAMP_COLOR,
   annotationNote,
   effectiveDrawOpacity,
-  stampFitFontSize,
 } from "@/utils/annotation-display";
 
 // Export PDF ฝัง annotation + bookmarks (F8/C1 — PLAN-FEAT.md §3)
@@ -219,14 +222,24 @@ export async function GET(req: Request) {
   if (!file) return new Response("ไม่พบไฟล์นี้", { status: 404 });
 
   // Guard path traversal: pdfUrl จาก DB ต้อง resolve แล้วอยู่ใน public/ เท่านั้น (§5)
+  // N8: pdf_url เป็นรีโมต (ลิงก์ e-Court) → ดึงสดจาก allowlist แทนการอ่านดิสก์
   let srcBytes: Buffer;
-  try {
-    srcBytes = readPublicPdf(file.pdfUrl);
-  } catch (err) {
-    if (err instanceof PdfPathError) {
-      return new Response("เส้นทางไฟล์ไม่ถูกต้อง", { status: 403 });
+  if (isRemoteSource(file.pdfUrl)) {
+    try {
+      srcBytes = await fetchSourceBytes(file.pdfUrl);
+    } catch (err) {
+      if (err instanceof RemoteFileError) return new Response(err.message, { status: 502 });
+      throw err;
+    }
+  } else {
+    try {
+      srcBytes = readPublicPdf(file.pdfUrl);
+    } catch (err) {
+      if (err instanceof PdfPathError) {
+        return new Response("เส้นทางไฟล์ไม่ถูกต้อง", { status: 403 });
+      }
+      return new Response("อ่านไฟล์ PDF ต้นฉบับไม่ได้", { status: 404 });
     }
-    return new Response("อ่านไฟล์ PDF ต้นฉบับไม่ได้", { status: 404 });
   }
 
   // N3: ไฟล์รูปภาพ — สร้าง PDF ใหม่ที่ฝังรูปเต็มหน้า (embedJpg/embedPng + EXIF rotate)
@@ -274,9 +287,21 @@ export async function GET(req: Request) {
     .from(annotations)
     .where(eq(annotations.fileId, fileId))
     .orderBy(asc(annotations.createdAt));
+  // F4: export ตาม filter รายคนที่กำลังดู (?user=<userId> จาก sidebar — ไม่ส่ง = ทั้งหมด)
+  // REDACTION ติดไปเสมอแม้กรองคนอื่น (D4 — กล่องดำหายไป = เนื้อหาที่ปิดกั้นกลับมาอ่านได้)
+  const userParam = url.searchParams.get("user");
+  const filteredRows = userParam
+    ? rows.filter((r) => r.userId === userParam || r.type === "REDACTION")
+    : rows;
+  // ชื่อผู้ใช้เติมท้ายชื่อไฟล์ (mirror ในตาราง — ไม่รับ text จาก client) — กรองแล้ว
+  // ผู้นั้นยังไม่มีรายการเลย = ใช้ userId ตรง ๆ
+  const filterName = userParam
+    ? (rows.find((r) => r.userId === userParam && r.userName)?.userName ??
+      userParam)
+    : null;
   // sort แยกตามชนิดก่อนวาด (stable ภายในชนิดด้วย createdAt) — กัน REDACTION เก่าโดน
   // HIGHLIGHT/DRAW ที่สร้างทีหลังทับจนข้อความง้ำกลับมาอ่านได้ (D4)
-  const dtos = rows
+  const dtos = filteredRows
     .map(toAnnotationDTO)
     .sort((a, b) => TYPE_ORDER[a.type] - TYPE_ORDER[b.type]);
 
@@ -573,42 +598,65 @@ export async function GET(req: Request) {
         const { r, g, b } = hexToRgb01(d.color ?? STAMP_COLOR);
         const stampRgb = rgb(r, g, b);
         const w = px(d.scale, display.width);
+        // จัดวางข้อความแบบเดียวกับบนจอ (stampLayout): คำสั้น 1 บรรทัด, คำยาวพอดี ๆ
+        // ย่อฟอนต์ให้บรรทัดเดียวก่อน (จนถึง floor 10%), ยาวเกินค่อย wrap หลายบรรทัด
+        // กรอบสูงขึ้นตาม — measure ของฝั่งนี้คือ pdf-lib font (2026-09-28)
+        const lay = thaiFont
+          ? stampLayout(d.label, w, (s, size) => thaiFont.widthOfTextAtSize(s, size))
+          : null;
         const rect = displayRectToPdf(
           {
             x: px(d.position.x, display.width),
             y: px(d.position.y, display.height),
             width: w,
-            height: w * STAMP_HEIGHT_RATIO,
+            height: lay ? stampBoxHeight(lay, w) : w * 0.4,
           },
           size,
           rotation,
         );
+        // มุมเอียงของตรายาง: จอหมุนรอบ**กลางกรอบ** ส่วน pdf-lib หมุนรอบ anchor มุม
+        // ล่างซ้ายของ object — จึงต้อง (1) ใช้มุมลบ (แกน y ของ PDF ชี้ขึ้น ส่วน CSS
+        // rotate วัดบนจอที่ y ชี้ลง) และ (2) เลื่อน anchor ไปตำแหน่งมุมล่างซ้าย*หลัง
+        // หมุน* ให้ pdf-lib หมุนต่อรอบมัน ผลลัพธ์กลับมาตรงตำแหน่งเดียวกับบนจอ
+        const rot = d.rotation ?? 0;
+        const pdfRot = -rot;
+        const ctr = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+        const anchor = rot
+          ? rotatePoint({ x: rect.x, y: rect.y }, ctr, pdfRot)
+          : { x: rect.x, y: rect.y };
+        const rotateOpt = rot ? { rotate: degrees(pdfRot) } : undefined;
         page.drawRectangle({
-          x: rect.x,
-          y: rect.y,
+          x: anchor.x,
+          y: anchor.y,
           width: rect.width,
           height: rect.height,
           borderColor: stampRgb,
           borderWidth: Math.max(w * 0.02, 1),
+          ...rotateOpt,
         });
-        if (thaiFont) {
+        if (lay && thaiFont) {
           const font = thaiFont;
-          // ย่อฟอนต์ให้ label อยู่บรรทัดเดียวพอดีกรอบ — เหมือนที่ render บนจอ
-          // (ไม่ย่อ label ยาวอย่าง "ตรวจสอบแล้ว" จะ wrap 2 บรรทัดแล้วล้นกรอบ)
-          const fontSize = stampFitFontSize(
-            d.label,
-            w,
-            (s, size) => font.widthOfTextAtSize(s, size),
-          );
-          const textW = font.widthOfTextAtSize(d.label, fontSize);
-          const lineH = fontSize * 1.2; // กึ่งกลางแนวตั้งตาม lineHeight บนจอ
-          page.drawText(d.label, {
-            x: rect.x + (rect.width - textW) / 2,
-            y: rect.y + (rect.height - lineH) / 2 + lineH - fontSize,
-            size: fontSize,
-            font,
-            color: stampRgb,
-          });
+          // วาดทีละบรรทัดจากกึ่งกลางแนวตั้งของกรอบ (pdf y ชี้ขึ้นจากล่าง) — จุดวาด
+          // คำนวณในพิกัดกรอบ*ก่อนหมุน* แล้วหมุนรอบกลางกรอบเหมือนจอก่อนส่ง drawText
+          const lineStep = lay.fontSize * lay.lineHeight;
+          const totalH = lay.lines.length * lineStep;
+          let baseline = rect.y + rect.height / 2 + totalH / 2 - lay.fontSize;
+          for (const ln of lay.lines) {
+            const textW = font.widthOfTextAtSize(ln, lay.fontSize);
+            const tx = rect.x + (rect.width - textW) / 2;
+            const p = rot
+              ? rotatePoint({ x: tx, y: baseline }, ctr, pdfRot)
+              : { x: tx, y: baseline };
+            page.drawText(ln, {
+              x: p.x,
+              y: p.y,
+              size: lay.fontSize,
+              font,
+              color: stampRgb,
+              ...rotateOpt,
+            });
+            baseline -= lineStep;
+          }
         }
         break;
       }
@@ -619,8 +667,15 @@ export async function GET(req: Request) {
     if (a.type !== "COMMENT") {
       const note = annotationNote(a);
       if (note) {
-        // annotationBBox คืน pt ของ "หน้าบนจอ" อยู่แล้ว — แปลงตรงเข้าพิกัด PDF
-        const bbox = annotationBBox(a, display);
+        // annotationBBox คืน pt ของ "หน้าบนจอ" อยู่แล้ว — แปลงตรงเข้าพิกัด PDF — ส่ง
+        // measure ของ pdf-lib font เดียวกับตอนวาดกรอบ STAMP ด้วย ให้มุมเกาะ sticky
+        // note ตรงกรอบที่วาดจริง (ไม่ส่ง = stampLayoutEstimate คลาดจากกรอบจริงเล็กน้อย
+        // — code review 2026-09-29)
+        const bbox = annotationBBox(
+          a,
+          display,
+          thaiFont ? (s, size) => thaiFont.widthOfTextAtSize(s, size) : undefined,
+        );
         attachNoteSticky(
           doc,
           page,
@@ -634,10 +689,16 @@ export async function GET(req: Request) {
 
   // bookmarks → PDF outline (แผง Bookmarks ของ reader กดกระโดดไปหน้า + yOffset)
   // เรียงตามลำดับหน้าเหมือน sidebar (byPageOrder ของ N5: หน้า → ตำแหน่งบนหน้า → เวลาสร้าง)
+  // กรองตามรายคนเหมือน annotation (คำขอผู้ใช้ 2026-09-22) — หัวข้อแม่โดนกรองแต่ลูกยังอยู่
+  // ลูกขึ้น root (buildOutline จัดการ parent หายเคสนี้อยู่แล้ว)
   const bookmarkRows = await db
     .select()
     .from(bookmarks)
-    .where(eq(bookmarks.fileId, fileId))
+    .where(
+      userParam
+        ? and(eq(bookmarks.fileId, fileId), eq(bookmarks.userId, userParam))
+        : eq(bookmarks.fileId, fileId),
+    )
     .orderBy(
       asc(bookmarks.pageIndex),
       asc(bookmarks.yOffset),
@@ -646,7 +707,9 @@ export async function GET(req: Request) {
   buildOutline(doc, bookmarkRows);
 
   const out = await doc.save();
-  const filename = encodeRFC5987(`${file.title}-annotated.pdf`);
+  const filename = encodeRFC5987(
+    `${file.title}-annotated${filterName ? `-${filterName}` : ""}.pdf`,
+  );
   return new Response(new Uint8Array(out), {
     headers: {
       "content-type": "application/pdf",

app/api/note/external/documents/route.ts

@@ -0,0 +1,86 @@
+import { and, asc, eq } from "drizzle-orm";
+
+import { db } from "@/db";
+import { files } from "@/db/schema";
+import { externalApiError, requireExternalApiKey } from "@/lib/external-api-auth";
+import { loadDocumentBundles, parseQueryBody } from "@/lib/external-api";
+import { requestOrigin } from "@/utils/request-origin";
+
+// N10 (PLAN-API.md D2) — POST /api/note/external/documents
+// (เดิมชื่อ /api/external/query ถึงรอบสาม — เปลี่ยนชื่อตาม resource ที่คืน 2026-09-25)
+// เส้นเดียวถามด้วย JSON body { fileId และ/หรือ typeId, filter } — response
+// รูปเดียวเสมอ { documents: [bundle…] } (bundle ยุบชั้น — field เอกสารอยู่
+// ระดับเดียวกับ annotations/bookmarks): ถาม fileId = ยาว 1 ชิ้น (ไม่เคยเปิด
+// ในระบบ = 404 — ไฟล์ url: fallback ของ N8 ค้นด้วย ecourt: prefix ไม่ได้ =
+// 404 ตามสัญญาลิงก์), ถาม typeId = ทุกไฟล์ในกลุ่ม N9 (กลุ่มว่าง = documents: []),
+// ส่งทั้งคู่ = AND เหลือเฉพาะเอกสารเดียวที่ตรงทั้งสองเงื่อนไข (2026-09-25 —
+// รอบเดียวกันเคยเป็น OR รวมผลแล้วเปลี่ยนหลังทดสอบจริง: ผู้เรียกต้องการเอกสาร
+// เดียวตามที่ส่งมา ไม่ใช่ทั้งกลุ่ม)
+// read-only: ไม่ publish SSE ไม่ revalidatePath — snapshot ณ ตอนเรียก
+
+const JSON_HEADERS = { "content-type": "application/json; charset=utf-8" };
+
+// origin เต็มของ request สำหรับ url เต็มใน response — ถอดเป็น helper ร่วม
+// (utils/request-origin.ts) ให้ route manifest ของ wordaddin ใช้เหมือนกัน (2026-10-16)
+
+export async function POST(req: Request) {
+  const unauthorized = requireExternalApiKey(req);
+  if (unauthorized) return unauthorized;
+
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return externalApiError("body ต้องเป็น JSON ที่ถูกต้อง", 400);
+  }
+
+  const query = parseQueryBody(body);
+  if (!query.ok) return externalApiError(query.error, 400);
+
+  const origin = requestOrigin(req);
+
+  // ครอบทุก DB call (code review 2026-09-25) — ล้มไม่ว่าเหตุใด (connection
+  // หลุด/timeout/table มีปัญหา) ต้องได้ 500 JSON ตาม contract เดียวกับ error
+  // อื่นของ endpoint นี้ ไม่ใช่ 500 ของ framework ที่ format ต่างออกไป; log
+  // รายละเอียดฝั่ง server อย่างเดียว — ข้อความตอบกลาง ๆ กัน leak SQL/path
+  try {
+    if (query.mode === "file") {
+      // ส่งทั้งคู่ = AND กรองทั้ง externalId และกลุ่มใน query เดียว เหลือเอกสารเดียว
+      // (external_id unique — match ได้มากสุด 1 ฉบับ) ไม่ตรง = 404 โดยแยกสาเหตุ:
+      // ไม่เคยเปิดในระบบ หรืออยู่คนละกลุ่มกับ typeId ที่ระบุ
+      const [file] = await db
+        .select()
+        .from(files)
+        .where(
+          query.typeId
+            ? and(
+                eq(files.externalId, `ecourt:${query.fileId}`),
+                eq(files.typeId, query.typeId),
+              )
+            : eq(files.externalId, `ecourt:${query.fileId}`),
+        )
+        .limit(1);
+      if (!file) {
+        return externalApiError(
+          query.typeId
+            ? "ไม่พบเอกสารนี้ในระบบ (ยังไม่เคยเปิด หรือไม่ได้อยู่ในกลุ่ม typeId ที่ระบุ)"
+            : "ไม่พบเอกสารนี้ในระบบ (ยังไม่เคยเปิด)",
+          404,
+        );
+      }
+      const documents = await loadDocumentBundles([file], query.parts, origin);
+      return new Response(JSON.stringify({ documents }), { headers: JSON_HEADERS });
+    }
+
+    const fileRows = await db
+      .select()
+      .from(files)
+      .where(eq(files.typeId, query.typeId))
+      .orderBy(asc(files.createdAt));
+    const documents = await loadDocumentBundles(fileRows, query.parts, origin);
+    return new Response(JSON.stringify({ documents }), { headers: JSON_HEADERS });
+  } catch (err) {
+    console.error("external/documents: query ฐานข้อมูลล้ม", err);
+    return externalApiError("เกิดข้อผิดพลาดของระบบ โปรดลองใหม่อีกครั้ง", 500);
+  }
+}

app/api/note/pdf/route.ts

@@ -3,6 +3,7 @@ import { eq } from "drizzle-orm";
 import { db } from "@/db";
 import { files } from "@/db/schema";
 import { fixPdfActualText } from "@/lib/pdf-actual-text";
+import { fetchSourceBytes, isRemoteSource, RemoteFileError } from "@/lib/remote-file";
 import { PdfPathError, readPublicPdf } from "@/lib/server-pdf";
 import { fileKindFromUrl, imageContentTypeFromUrl } from "@/utils/file-kind";
 
@@ -25,12 +26,22 @@ export async function GET(req: Request) {
   if (!file) return new Response("ไม่พบไฟล์นี้", { status: 404 });
 
   // Guard path traversal: pdfUrl จาก DB ต้อง resolve แล้วอยู่ใน public/ เท่านั้น (§5)
+  // N8: pdf_url เป็นรีโมต (ลิงก์ e-Court) → ดึงสดจาก allowlist แทนการอ่านดิสก์
   let srcBytes: Buffer;
-  try {
-    srcBytes = readPublicPdf(file.pdfUrl);
-  } catch (err) {
-    if (err instanceof PdfPathError) return new Response(err.message, { status: 400 });
-    throw err;
+  if (isRemoteSource(file.pdfUrl)) {
+    try {
+      srcBytes = await fetchSourceBytes(file.pdfUrl);
+    } catch (err) {
+      if (err instanceof RemoteFileError) return new Response(err.message, { status: 502 });
+      throw err;
+    }
+  } else {
+    try {
+      srcBytes = readPublicPdf(file.pdfUrl);
+    } catch (err) {
+      if (err instanceof PdfPathError) return new Response(err.message, { status: 400 });
+      throw err;
+    }
   }
 
   // N3: ไฟล์รูปภาพไม่มี ToUnicode ให้ซ่อม — คืน bytes ดิบ + content-type ถูกต้อง

app/api/swagger/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+
+import { openApiSpec } from "@/lib/openapi";
+import { withBasePath } from "@/utils/base-path";
+
+// GET /api/swagger — หน้า Swagger UI ของ API ทั้งหมด (กลุ่ม template + N10)
+// (asset สำหรับ intranet: postinstall scripts/copy-swagger-ui.mjs คัดลอก
+// swagger-ui-dist ไป public/note/swagger-ui/ — pattern เดียวกับ pdf.worker)
+// spec inline จาก lib/openapi.ts ตรง ๆ ไม่มี endpoint spec แยก
+export const runtime = "nodejs";
+
+// กัน </script> ใน JSON ตัดสคริปต์ขาย (spec เป็นของเราเองทั้งหมด แค่กันกรณี
+// ข้อความ example มี < ในอนาคต)
+const SPEC_JSON = JSON.stringify(openApiSpec).replace(/</g, "\\u003c");
+
+const HTML = `<!doctype html>
+<html lang="th">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Swagger UI — Judge's Note API</title>
+<link rel="stylesheet" href="${withBasePath("/swagger-ui/swagger-ui.css")}">
+</head>
+<body>
+<div id="swagger-ui"></div>
+<script src="${withBasePath("/swagger-ui/swagger-ui-bundle.js")}"></script>
+<script>
+window.onload = function () {
+  window.ui = SwaggerUIBundle({
+    spec: ${SPEC_JSON},
+    dom_id: "#swagger-ui",
+    deepLinking: true,
+    persistAuthorization: true
+  });
+};
+</script>
+</body>
+</html>`;
+
+export async function GET() {
+  return new NextResponse(HTML, {
+    headers: { "content-type": "text/html; charset=utf-8" },
+  });
+}

app/api/template/extract/route.ts

@@ -0,0 +1,102 @@
+import { NextResponse } from "next/server";
+import { extractContentControls, extractBookmark, templateContentControls, setCustomDocProps, getDocProps,templateDynamicContents } from "@/lib/lib-tmpl";
+import { verifyDataEd25519, verifyHmacSha256 } from "@/lib/lib-utils";
+
+export const runtime = "nodejs";
+
+const DOCX_CONTENT_TYPE =
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+
+// cap เดียวกับ N4 (app/actions/files.ts) — route นี้เปิดกว้างให้ภายนอกยิงได้
+// ต้องเช็คขนาดก่อนอ่านเข้าหน่วยความจำ กัน DoS (bodySizeLimit ครอบเฉพาะ Server Actions)
+const MAX_UPLOAD_BYTES = 100 * 1024 * 1024; // 100MB
+
+export async function POST(request: Request) {
+  try {
+    const formData = await request.formData();
+    const file = formData.get("file");
+    const TEST_SECRET = String(formData.get("secret"))??"";
+    const TEST_PUBLIC_KEY_HEX = String(formData.get("public_key"))??"";
+
+
+    if (!(file instanceof File)) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Missing DOCX file in field "file".',
+        },
+        { status: 400 },
+      );
+    }
+
+    if (
+      file.type !== DOCX_CONTENT_TYPE &&
+      !file.name.toLowerCase().endsWith(".docx")
+    ) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Field "file" must be a .docx file.',
+        },
+        { status: 400 },
+      );
+    }
+
+    if (file.size > MAX_UPLOAD_BYTES) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Field "file" exceeds the 100MB size limit.',
+        },
+        { status: 400 },
+      );
+    }
+
+    // File → Buffer
+    const buffer = Buffer.from(await file.arrayBuffer());
+
+    // ใช้ lib-tmpl.ts เดิม
+    // const data = extractContentControls(buffer);
+
+    const cc = extractContentControls(buffer);
+    const bookmark = extractBookmark(buffer)
+    const properties = getDocProps(buffer)
+    let verify: Record<string, unknown> ={}
+    const ticket_data = String(properties?.custom?.ticket_data)
+    const HmacSha256 = String(properties?.custom?.HmacSha256)
+    const Ed25519 = String(properties?.custom?.Ed25519)
+
+    if(ticket_data){
+      const ticketDataObj= JSON.parse(ticket_data)
+      const unix_timestamp = Number(ticketDataObj.exp)*1000
+      if(unix_timestamp){
+        verify['exp'] = new Date(unix_timestamp).toLocaleString("th-TH", { timeZone: "Asia/Bangkok" })
+      }
+      if(TEST_SECRET && HmacSha256){
+        verify['verifyHmacSha256'] = verifyHmacSha256(ticket_data,TEST_SECRET,HmacSha256)
+      }
+      if(TEST_PUBLIC_KEY_HEX&& Ed25519){
+        verify["Ed25519"]=verifyDataEd25519(ticket_data,Ed25519,TEST_PUBLIC_KEY_HEX)
+      }
+    }
+    let returnData : Record<string, unknown> = {
+      success: true,
+      cc,bookmark,properties,verify
+    }
+
+    return NextResponse.json(returnData);
+  } catch (error) {
+    console.error(error);
+
+    return NextResponse.json(
+      {
+        success: false,
+        error:
+          error instanceof Error
+            ? error.message
+            : "Internal Server Error",
+      },
+      { status: 500 },
+    );
+  }
+}

app/api/template/lib-tmpl.ts

@@ -0,0 +1,518 @@
+import PizzaZip from "pizzip";
+import {
+  DOMParser,
+  XMLSerializer,
+  type Document as XmlDocument,
+  type Element as XmlElement,
+  type Node as XmlNode,
+  type Attr as XmlAttr,
+} from "@xmldom/xmldom";
+import xpath from "xpath";
+
+export interface ExtractedData {
+  [tagName: string]: string;
+}
+
+const W_NS =
+  "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
+
+const asXpathNode = (node: XmlNode): globalThis.Node =>
+  node as unknown as globalThis.Node;
+
+function createSelector() {
+  return xpath.useNamespaces({ w: W_NS });
+}
+
+/**
+ * อ่าน Content Control (w:sdt) จาก DOCX Buffer
+ * ปัจจุบันอ่านจาก word/document.xml ตาม logic ของโค้ดต้นฉบับ
+ */
+export function extractContentControls(
+  docxBuffer: Buffer,
+): ExtractedData {
+  const zip = new PizzaZip(docxBuffer);
+  const docXmlFile = zip.file("word/document.xml");
+
+  if (!docXmlFile) {
+    throw new Error("Invalid docx file: word/document.xml not found.");
+  }
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(docXmlFile.asText(), "text/xml");
+  const select = createSelector();
+  const result: ExtractedData = {};
+
+  const sdtNodes = select(
+    "//w:sdt",
+    asXpathNode(doc),
+  ) as unknown as XmlElement[];
+
+  sdtNodes.forEach((sdt) => {
+    const tagAttr = select(
+      "./w:sdtPr/w:tag/@w:val",
+      asXpathNode(sdt),
+      true,
+    ) as unknown as XmlAttr | undefined;
+
+    const tagName = tagAttr?.value;
+
+    if (!tagName) return;
+
+    const sdtContent = select(
+      "./w:sdtContent",
+      asXpathNode(sdt),
+      true,
+    ) as unknown as XmlElement | undefined;
+
+    if (!sdtContent) {
+      result[tagName] = "";
+      return;
+    }
+
+    const nodes = select(
+      ".//w:p | .//w:t | .//w:tab | .//w:br | .//w:noBreakHyphen | .//w:softHyphen | .//w:sym",
+      asXpathNode(sdtContent),
+    ) as unknown as XmlElement[];
+
+    let extractedText = "";
+
+    nodes.forEach((node) => {
+      switch (node.nodeName) {
+        case "w:p":
+          if (
+            extractedText.length > 0 &&
+            !extractedText.endsWith("\n")
+          ) {
+            extractedText += "\n";
+          }
+          break;
+
+        case "w:t":
+          extractedText += node.textContent || "";
+          break;
+
+        case "w:tab":
+          extractedText += "\t";
+          break;
+
+        case "w:br":
+          extractedText += "\n";
+          break;
+
+        case "w:noBreakHyphen":
+          extractedText += "\u2011";
+          break;
+
+        case "w:softHyphen":
+          extractedText += "\u00ad";
+          break;
+
+        case "w:sym": {
+          const charAttr = node.getAttribute("w:char");
+          if (charAttr) {
+            const charCode = Number.parseInt(charAttr, 16);
+            extractedText += String.fromCharCode(charCode);
+          }
+          break;
+        }
+      }
+    });
+
+    result[tagName] = extractedText;
+  });
+
+  return result;
+}
+
+type SdtControlType = "plain" | "rich" | "other";
+type SdtStructure = "block" | "inline";
+
+function detectSdtControlType(
+  sdt: XmlElement,
+  select: xpath.XPathSelect,
+): { type: SdtControlType; multiLine: boolean } {
+  const sdtPr = select(
+    "./w:sdtPr",
+    asXpathNode(sdt),
+    true,
+  ) as unknown as XmlElement | undefined;
+
+  if (!sdtPr) {
+    return { type: "other", multiLine: false };
+  }
+
+  const textEl = select(
+    "./w:text",
+    asXpathNode(sdtPr),
+    true,
+  ) as unknown as XmlElement | undefined;
+
+  if (textEl) {
+    const multiLineAttr = select(
+      "./@w:multiLine",
+      asXpathNode(textEl),
+      true,
+    ) as unknown as XmlAttr | undefined;
+
+    return {
+      type: "plain",
+      multiLine:
+        multiLineAttr?.value === "1" ||
+        multiLineAttr?.value === "true",
+    };
+  }
+
+  const richTextEl = select(
+    "./w:richText",
+    asXpathNode(sdtPr),
+    true,
+  ) as unknown as XmlElement | undefined;
+
+  if (richTextEl) {
+    return { type: "rich", multiLine: true };
+  }
+
+  const otherTypeTags = [
+    "w:date",
+    "w:dropDownList",
+    "w:comboBox",
+    "w:checkbox",
+    "w:citation",
+    "w:group",
+    "w:docPartObj",
+    "w:docPartList",
+  ];
+
+  for (const tag of otherTypeTags) {
+    const found = select(
+      `./${tag}`,
+      asXpathNode(sdtPr),
+      true,
+    ) as unknown as XmlElement | undefined;
+
+    if (found) {
+      return { type: "other", multiLine: false };
+    }
+  }
+
+  return { type: "rich", multiLine: true };
+}
+
+function detectSdtStructure(
+  sdtContent: XmlElement,
+  select: xpath.XPathSelect,
+): SdtStructure {
+  const directP = select(
+    "./w:p",
+    asXpathNode(sdtContent),
+  ) as unknown as XmlElement[];
+
+  return directP.length > 0 ? "block" : "inline";
+}
+
+function buildRunChildren(
+  doc: XmlDocument,
+  text: string,
+): XmlElement[] {
+  const nodes: XmlElement[] = [];
+  const tokens = text.split(/(\t|\n)/);
+
+  tokens.forEach((token) => {
+    if (token === "") return;
+
+    if (token === "\t") {
+      nodes.push(doc.createElementNS(W_NS, "w:tab"));
+    } else if (token === "\n") {
+      nodes.push(doc.createElementNS(W_NS, "w:br"));
+    } else {
+      const t = doc.createElementNS(W_NS, "w:t");
+      t.setAttribute("xml:space", "preserve");
+      t.textContent = token;
+      nodes.push(t);
+    }
+  });
+
+  if (nodes.length === 0) {
+    const t = doc.createElementNS(W_NS, "w:t");
+    t.setAttribute("xml:space", "preserve");
+    t.textContent = "";
+    nodes.push(t);
+  }
+
+  return nodes;
+}
+
+function buildRun(
+  doc: XmlDocument,
+  text: string,
+  rPr?: XmlElement,
+): XmlElement {
+  const run = doc.createElementNS(W_NS, "w:r");
+
+  if (rPr) {
+    run.appendChild(rPr.cloneNode(true));
+  }
+
+  buildRunChildren(doc, text).forEach((node) =>
+    run.appendChild(node),
+  );
+
+  return run;
+}
+
+function insertInlineContent(
+  doc: XmlDocument,
+  sdtContent: XmlElement,
+  select: xpath.XPathSelect,
+  text: string,
+  allowLineBreak: boolean,
+): void {
+  const safeText = allowLineBreak
+    ? text
+    : text.replace(/\n/g, " ");
+
+  const existingRuns = select(
+    "./w:r",
+    asXpathNode(sdtContent),
+  ) as unknown as XmlElement[];
+
+  const firstRPr =
+    existingRuns.length > 0
+      ? (select(
+          "./w:rPr",
+          asXpathNode(existingRuns[0]),
+          true,
+        ) as unknown as XmlElement | undefined)
+      : undefined;
+
+  existingRuns.forEach((r) => {
+    if (r.parentNode) r.parentNode.removeChild(r);
+  });
+
+  sdtContent.appendChild(
+    buildRun(doc, safeText, firstRPr),
+  );
+}
+
+function insertBlockContent(
+  doc: XmlDocument,
+  sdtContent: XmlElement,
+  select: xpath.XPathSelect,
+  text: string,
+  allowMultiParagraph: boolean,
+): void {
+  const allParagraphs = select(
+    "./w:p",
+    asXpathNode(sdtContent),
+  ) as unknown as XmlElement[];
+
+  if (allParagraphs.length === 0) {
+    // ป้องกัน template ที่มีโครงสร้างผิดปกติ
+    const p = doc.createElementNS(W_NS, "w:p");
+    sdtContent.appendChild(p);
+    allParagraphs.push(p);
+  }
+
+  const firstP = allParagraphs[0];
+
+  const firstPPr = select(
+    "./w:pPr",
+    asXpathNode(firstP),
+    true,
+  ) as unknown as XmlElement | undefined;
+
+  const firstRun = select(
+    "./w:r",
+    asXpathNode(firstP),
+    true,
+  ) as unknown as XmlElement | undefined;
+
+  const firstRPr = firstRun
+    ? (select(
+        "./w:rPr",
+        asXpathNode(firstRun),
+        true,
+      ) as unknown as XmlElement | undefined)
+    : undefined;
+
+  allParagraphs.forEach((p) => {
+    if (p !== firstP && p.parentNode) {
+      p.parentNode.removeChild(p);
+    }
+  });
+
+  const existingRuns = select(
+    "./w:r",
+    asXpathNode(firstP),
+  ) as unknown as XmlElement[];
+
+  existingRuns.forEach((r) => {
+    if (r.parentNode) r.parentNode.removeChild(r);
+  });
+
+  if (!allowMultiParagraph) {
+    firstP.appendChild(buildRun(doc, text, firstRPr));
+    return;
+  }
+
+  text.split("\n").forEach((line, index) => {
+    let targetP: XmlElement;
+
+    if (index === 0) {
+      targetP = firstP;
+    } else {
+      targetP = doc.createElementNS(W_NS, "w:p");
+
+      if (firstPPr) {
+        targetP.appendChild(firstPPr.cloneNode(true));
+      }
+
+      sdtContent.appendChild(targetP);
+    }
+
+    const run = doc.createElementNS(W_NS, "w:r");
+
+    if (firstRPr) {
+      run.appendChild(firstRPr.cloneNode(true));
+    }
+
+    buildRunChildren(doc, line).forEach((node) =>
+      run.appendChild(node),
+    );
+
+    targetP.appendChild(run);
+  });
+}
+
+function insertFallbackContent(
+  sdtContent: XmlElement,
+  select: xpath.XPathSelect,
+  text: string,
+): void {
+  const textNodes = select(
+    ".//w:t",
+    asXpathNode(sdtContent),
+  ) as unknown as XmlElement[];
+
+  if (textNodes.length === 0) return;
+
+  textNodes[0].textContent = text;
+
+  for (let i = 1; i < textNodes.length; i++) {
+    textNodes[i].textContent = "";
+  }
+}
+
+export type TemplateData = Record<string, unknown>;
+
+function normalizeValue(value: unknown): string {
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  if (
+    typeof value === "number" ||
+    typeof value === "boolean" ||
+    typeof value === "bigint"
+  ) {
+    return String(value);
+  }
+
+  // รองรับ JSON ที่ส่ง array/object มา แต่ Content Control ต้องการ text
+  return JSON.stringify(value);
+}
+
+/**
+ * นำ JSON data ไปแทนค่า Content Control ใน DOCX template
+ * คืนค่าเป็น Buffer ของ DOCX ที่สร้างเสร็จแล้ว
+ */
+export function templateContentControls(
+  templateBuffer: Buffer,
+  data: TemplateData,
+): Buffer {
+  const zip = new PizzaZip(templateBuffer);
+  const docXmlFile = zip.file("word/document.xml");
+
+  if (!docXmlFile) {
+    throw new Error("Invalid docx file: word/document.xml not found.");
+  }
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(docXmlFile.asText(), "text/xml");
+  const select = createSelector();
+
+  const sdtNodes = select(
+    "//w:sdt",
+    asXpathNode(doc),
+  ) as unknown as XmlElement[];
+
+  sdtNodes.forEach((sdt) => {
+    const tagAttr = select(
+      "./w:sdtPr/w:tag/@w:val",
+      asXpathNode(sdt),
+      true,
+    ) as unknown as XmlAttr | undefined;
+
+    const tagName = tagAttr?.value;
+
+    if (!tagName || !Object.prototype.hasOwnProperty.call(data, tagName)) {
+      return;
+    }
+
+    const newValue = normalizeValue(data[tagName]);
+
+    const sdtContent = select(
+      "./w:sdtContent",
+      asXpathNode(sdt),
+      true,
+    ) as unknown as XmlElement | undefined;
+
+    if (!sdtContent) return;
+
+    const { type: controlType, multiLine } =
+      detectSdtControlType(sdt, select);
+
+    const structure = detectSdtStructure(sdtContent, select);
+
+    if (controlType === "other") {
+      insertFallbackContent(sdtContent, select, newValue);
+      return;
+    }
+
+    if (structure === "inline") {
+      const allowLineBreak =
+        controlType === "plain" ? multiLine : true;
+
+      insertInlineContent(
+        doc,
+        sdtContent,
+        select,
+        newValue,
+        allowLineBreak,
+      );
+    } else {
+      insertBlockContent(
+        doc,
+        sdtContent,
+        select,
+        newValue,
+        controlType === "rich",
+      );
+    }
+  });
+
+  const serializer = new XMLSerializer();
+  zip.file(
+    "word/document.xml",
+    serializer.serializeToString(doc),
+  );
+
+  return zip.generate({
+    type: "nodebuffer",
+    compression: "DEFLATE",
+  });
+}

app/api/template/render/route.ts

@@ -0,0 +1,208 @@
+import { NextResponse } from "next/server";
+import { DocumentTemplate, templateContentControls, setCustomDocProps, getDocProps, templateDynamicContents } from "@/lib/lib-tmpl";
+import { generateHmacSha256, verifyHmacSha256, signDataEd25519, verifyDataEd25519, sortObjectKeys } from '@/lib/lib-utils';
+
+export const runtime = "nodejs";
+
+const DOCX_CONTENT_TYPE =
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+
+// cap เดียวกับ N4 (app/actions/files.ts) — route นี้เปิดกว้างให้ภายนอกยิงได้
+// ต้องเช็คขนาดก่อนอ่านเข้าหน่วยความจำ กัน DoS (bodySizeLimit ครอบเฉพาะ Server Actions)
+const MAX_UPLOAD_BYTES = 100 * 1024 * 1024; // 100MB
+
+export async function POST(request: Request) {
+  try {
+    const formData = await request.formData();
+
+    const template = formData.get("template");
+    const dataFile = formData.get("data");
+    const dataJson = formData.get("dataJson");
+    const TEST_SECRET = (typeof formData.get("secret") === "string") ?
+      String(formData.get("secret")) : "super_secret";
+    const TEST_PRIVATE_KEY_HEX = (typeof formData.get("private_key") === "string") ?
+      String(formData.get("private_key")) : "8f2077b57b39399b6a7828f35da03a63ade8e3a36a6bf437b091a8bdb3d18ee1";
+
+    console.log(`secret:${TEST_SECRET}`)
+    console.log(`private:${TEST_PRIVATE_KEY_HEX}`)
+    // -----------------------------
+    // ตรวจสอบ Template
+    // -----------------------------
+
+    if (!(template instanceof File)) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Missing DOCX file in field "template".',
+        },
+        { status: 400 },
+      );
+    }
+
+    if (
+      template.type !== DOCX_CONTENT_TYPE &&
+      !template.name.toLowerCase().endsWith(".docx")
+    ) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Field "template" must be a .docx file.',
+        },
+        { status: 400 },
+      );
+    }
+
+    if (template.size > MAX_UPLOAD_BYTES) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Field "template" exceeds the 100MB size limit.',
+        },
+        { status: 400 },
+      );
+    }
+
+    // -----------------------------
+    // อ่าน JSON
+    // -----------------------------
+
+    let templateData: DocumentTemplate;
+
+    // JSON ผิด syntax เป็นความผิดของฝั่งผู้เรียก — คืน 400 ไม่ใช่ 500
+    // (catch กลางท้ายฟังก์ชันสงวนไว้ให้ error ของระบบเท่านั้น)
+    try {
+      if (typeof dataJson === "string" && dataJson.length > 0) {
+        // กรณีส่ง JSON ผ่าน form field
+        templateData = JSON.parse(dataJson) as DocumentTemplate;
+      } else if (dataFile instanceof File) {
+        if (dataFile.size > MAX_UPLOAD_BYTES) {
+          return NextResponse.json(
+            {
+              success: false,
+              error: 'Field "data" exceeds the 100MB size limit.',
+            },
+            { status: 400 },
+          );
+        }
+
+        // กรณี upload data.json
+        const text = await dataFile.text();
+
+        templateData = JSON.parse(text) as DocumentTemplate;
+      } else {
+        return NextResponse.json(
+          {
+            success: false,
+            error:
+              'Missing JSON data. Send either "data" file or "dataJson" field.',
+          },
+          { status: 400 },
+        );
+      }
+    } catch (error) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: `Invalid JSON data (${error instanceof Error ? error.message : "parse error"
+            }).`,
+        },
+        { status: 400 },
+      );
+    }
+
+    // JSON ต้องเป็น object
+    if (
+      templateData === null ||
+      typeof templateData !== "object" ||
+      Array.isArray(templateData)
+    ) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: "JSON data must be an object.",
+        },
+        { status: 400 },
+      );
+    }
+
+    // -----------------------------
+    // Template File → Buffer
+    // -----------------------------
+
+    let templateBuffer: Buffer = Buffer.from(
+      await template.arrayBuffer(),
+    );
+
+    //Calculate hash
+    const originalTicket_data = templateData?.info?.ticket_data //expect valid json string
+    // console.log("templateData",templateData?.info?.ticket_data)
+    if (originalTicket_data && typeof originalTicket_data === 'string') {
+      try {
+
+        const ttlSeconds: number = 300
+        const originalTicketObj = JSON.parse(originalTicket_data)//sort and add expire to ticket data
+        if (originalTicketObj && typeof originalTicketObj === 'object') {
+          console.log("Found valid ticket data: hash it")
+          // คำนวณค่า expire (ปัจจุบัน + จำนวนวินาทีที่ต้องการให้หมดอายุ)
+          // หาร 1000 เพราะต้องการหน่วยวินาที (sec) ไม่ใช่มิลลิวินาที (ms)
+          const expireTimestamp = Math.floor(Date.now() / 1000) + ttlSeconds;
+          const fullObj = { ...originalTicketObj, exp: expireTimestamp };
+          const sortedObj = sortObjectKeys(fullObj);
+
+          // แปลงกลับเป็น JSON string เพื่อนำไปใช้ส่งและทำ Hash
+          const ticket_data = JSON.stringify(sortedObj);
+          // console.log("check secret:",TEST_SECRET,TEST_PRIVATE_KEY_HEX,ticket_data)
+          const HmacSha256 = generateHmacSha256(ticket_data, TEST_SECRET)
+
+          const Ed25519  = signDataEd25519(ticket_data, TEST_PRIVATE_KEY_HEX)
+          templateBuffer = setCustomDocProps(templateBuffer, { ticket_data, HmacSha256, Ed25519 })
+        }
+      } catch (error) {
+        console.error("Set custom property fail",error);
+        
+      }
+    }
+
+    // Apply Dynamic Content
+    if (templateData?.dc && typeof templateData?.dc === "object") {
+      console.log("Apply Dynamic Content")
+      templateBuffer = Buffer.from(await templateDynamicContents(templateBuffer, templateData.dc))
+    }
+    // Apply Content Control
+    if (templateData?.cc && typeof templateData?.cc === "object") {
+      console.log("Apply Content Control")
+      templateBuffer = templateContentControls(templateBuffer, templateData.cc);
+    }
+
+    const output = templateBuffer;
+
+    // -----------------------------
+    // ส่ง DOCX กลับ
+    // -----------------------------
+
+    return new NextResponse(output as BodyInit, {
+      status: 200,
+      headers: {
+        "Content-Type": DOCX_CONTENT_TYPE,
+
+        "Content-Disposition":
+          'attachment; filename="generated-document.docx"',
+
+        "Content-Length": String(output.length),
+      },
+    });
+  } catch (error) {
+    console.error(error);
+
+    return NextResponse.json(
+      {
+        success: false,
+        error:
+          error instanceof Error
+            ? error.message
+            : "Internal Server Error",
+      },
+      { status: 500 },
+    );
+  }
+}

app/api/template/test/T2.json

@@ -0,0 +1,29 @@
+{
+  "notname": "คำสั่งเรียก ให้ทำคำให้การ",
+  "nottype": "(ต. ๑)",
+  "blackno": "คดีหมายเลขดำที่",
+  "blackyear": "๑๐/๒๕๖๙",
+  "redno": "คดีหมายเลขแดงที่",
+  "redyear": "",
+  "court": "ศาลปกครองสุพรรณบุรี",
+  "curdate": "วันที่ ๗ เดือน สิงหาคม พุทธศักราช ๒๕๖๙",
+  "accuser": "นายธัญวิสิษฐ์ ศรแก้ว",
+  "acc1": "ผู้ฟ้องคดี",
+  "accused": "เจ้าคุณมด ที่ ๑ กับพวกรวม ๓ คน",
+  "acc2": "ผู้ถูกฟ้องคดี",
+  "nottitle": "คำสั่งถึง",
+  "commto": "เจ้าคุณมด",
+  "groupname": "ผู้ถูกฟ้องคดีที่ ๑",
+  "detail1": "ด้วยผู้ฟ้องคดีได้ยื่นฟ้องผู้ถูกฟ้องคดีต่อศาล มีข้อความตามที่ปรากฏ ในระบบงานคดีปกครองอิเล็กทรอนิกส์\nฉะนั้น ให้ ท่านทำคำให้การแก้คำฟ้อง พร้อมด้วยพยานหลักฐาน ๑ ชุด ต่อศาลภายใน ๓๐ วัน นับแต่วันที่ได้รับคำสั่งนี้",
+  "pname": "นางนพเก้า เถื่อนชัย",
+  "courtname": "ศาลปกครองสุพรรณบุรี",
+  "courtno": "๓๓๓ หมู่ ๖ ตำบลสนามชัย อำเภอเมืองสุพรรณบุรี",
+  "courttam": "จังหวัดสุพรรณบุรี ๗๒๐๐๐",
+  "courttel": "กลุ่มออกหมาย โทรศัพท์ ๐๓๕ ๔๓๒ ๓๓๓ ต่อ ๑๐๐๑,๒๒๐๓",
+  "courttel2": "สอบถามติดตามคดี ขอคำปรึกษาแนะนำ โทรสายด่วน “๑๓๕๕”",
+  "sendto": "เจ้าคุณมด",
+  "addrno": "เลขที่ - หมู่ที่ - ตรอก/ซอย - ถนน - ตำบล/แขวง - อำเภอ/เขต - จังหวัด - โทรศัพท์ -",
+  "remarkhead": "",
+  "remark": "",
+  "warning": "หากผู้ถูกฟ้องคดีไม่ปฏิบัติตามคำสั่งศาลภายในระยะเวลาที่กำหนด ศาลจะถือว่าผู้ถูกฟ้องคดียอมรับข้อเท็จจริงตามข้อหาของผู้ฟ้องคดี"
+}

app/api/template/test/make-protected.mjs

@@ -0,0 +1,298 @@
+// ทดลอง: เปิด Restrict Edit (readOnly + enforcement) และฝัง custom properties
+// (token / primary-key / owner) ลงไฟล์ docx — ตามแนวทาง Token-Based ใน note.md
+//
+// ใช้: node app/api/template/test/make-protected.mjs [in.docx] [out.docx]
+//   ไม่ส่ง argument = อ่านและเขียนทับ output-T3.docx (ผล render ล่าสุด)
+//
+// สิ่งที่แก้ในไฟล์ docx:
+//   1. word/settings.xml      — w:documentProtection edit="readOnly" enforcement="1"
+//      (เอกสารทั้งฉบับอ่านอย่างเดียว — ทดสอบแล้ว: readOnly ล็อค CC ด้วย
+//       จึงต้องคู่กับข้อ 2 ถึงจะแก้ใน CC ได้)
+//   2. word/document.xml ฯลฯ  — ครอบ w:sdt ทุกตัวที่มี w:tag ด้วย
+//      w:permStart(w:edGrp="everyone") / w:permEnd — กลไก "Exceptions: Everyone"
+//      ของแผง Restrict Editing ใน Word (บริเวณใน perm แก้ได้ นอกนั้นล็อค)
+//      พร้อมเติม w:lock="sdtLocked" ให้ CC ที่ยังไม่มี กันลบช่องตอนอยู่ในโหมดนี้
+//   3. docProps/custom.xml    — สร้างใหม่ เก็บค่า custom properties แบบ vt:lpwstr
+//   4. [Content_Types].xml    — เพิ่ม Override สำหรับ custom.xml
+//   5. _rels/.rels            — เพิ่ม Relationship ชี้ docProps/custom.xml
+import PizzaZip from "pizzip";
+import { DOMParser, XMLSerializer } from "@xmldom/xmldom";
+import xpath from "xpath";
+import { readFileSync, writeFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const inPath = process.argv[2] ?? join(__dirname, "output-T3.docx");
+const outPath = process.argv[3] ?? inPath;
+
+// ตัวอย่างข้อมูลที่จะฝัง (ใน production จะมาจาก backend ตอน render เอกสาร)
+const CUSTOM_PROPS = {
+  token: "eyJhbGciOiJIUzI1NiJ9.eyJ1aWQiOiJ1MTAwMSIsImZpZCI6IkRPTi0yMDI2LTAwMDEyMyIsImV4cCI6MTc5NjI0NzIwMH0.demo",
+  "primary-key": "DOC-2026-000123",
+  owner: "u1001",
+};
+
+const W_NS = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
+const CUSTOM_NS =
+  "http://schemas.openxmlformats.org/officeDocument/2006/custom-properties";
+const VT_NS =
+  "http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes";
+const REL_CUSTOM =
+  "http://schemas.openxmlformats.org/officeDocument/2006/relationships/custom-properties";
+const CT_CUSTOM =
+  "application/vnd.openxmlformats-officedocument.custom-properties+xml";
+const FMTID = "{D5CDD505-2E9C-101B-9397-08002B2CF9AE}";
+
+const parser = new DOMParser();
+const serializer = new XMLSerializer();
+
+const parseXml = (text) => parser.parseFromString(text, "text/xml");
+
+// xmldom serializer อาจคง xml declaration ไว้แล้ว — เติมเฉพาะเมื่อยังไม่มี
+// (ถ้า prepend ซ้ำจะได้ declaration สองอัน ไฟล์ XML invalid)
+const serialize = (doc) => {
+  const text = serializer.serializeToString(doc);
+  return text.startsWith("<?xml")
+    ? text
+    : '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\r\n' + text;
+};
+
+// ครอบ w:sdt ที่มี w:tag ทุกตัวด้วย w:permStart/w:permEnd (edGrp="everyone")
+// และเติม w:lock="sdtLocked" ให้ CC ที่ยังไม่มี — คืนจำนวน CC ที่ครอบ
+function unlockContentControls(zip) {
+  const select = xpath.useNamespaces({ w: W_NS });
+  const asNode = (n) => n;
+  const parts = Object.keys(zip.files).filter((n) =>
+    /^word\/(document|header\d*|footer\d*)\.xml$/.test(n),
+  );
+
+  // id ของ perm ต้องไม่ซ้ำในเอกสาร — เริ่มสูงกว่าค่าสูงสุดที่มีอยู่ (จากทุก part)
+  let nextId = 999;
+  for (const part of parts) {
+    const ids = select(
+      "//w:permStart/@w:id | //w:permEnd/@w:id",
+      asNode(parseXml(zip.file(part).asText())),
+    );
+    for (const id of ids) {
+      const n = Number.parseInt(id.value, 10);
+      if (Number.isFinite(n) && n >= nextId) nextId = n;
+    }
+  }
+
+  let wrapped = 0;
+  let locked = 0;
+  for (const part of parts) {
+    const doc = parseXml(zip.file(part).asText());
+
+    // เฉพาะ sdt ระดับบนสุด (ไม่อยู่ใน sdt อื่น) มี w:tag = ช่องข้อมูลของ template
+    // และยังไม่ถูกครอบด้วย permStart อยู่แล้ว (กัน double-wrap ตอนรันซ้ำ)
+    const sdts = select(
+      "//w:sdt[./w:sdtPr/w:tag][not(ancestor::w:sdt)][not(preceding-sibling::*[1][self::w:permStart])]",
+      asNode(doc),
+    );
+    if (sdts.length === 0) continue;
+
+    for (const sdt of sdts) {
+      // เติม lock ให้ CC ที่ยังไม่มี — กันลบช่องตอนเปิดช่องให้แก้ผ่าน permission
+      const sdtPr = select("./w:sdtPr", sdt)[0];
+      const hasLock = select("./w:lock", sdtPr).length > 0;
+      if (!hasLock) {
+        const lock = doc.createElementNS(W_NS, "w:lock");
+        lock.setAttribute("w:val", "sdtLocked");
+        // w:lock ต้องอยู่หลัง w:id ตามลำดับ schema ของ sdtPr
+        const idEl = select("./w:id", sdtPr)[0];
+        if (idEl && idEl.nextSibling) {
+          sdtPr.insertBefore(lock, idEl.nextSibling);
+        } else {
+          sdtPr.appendChild(lock);
+        }
+        locked++;
+      }
+
+      const start = doc.createElementNS(W_NS, "w:permStart");
+      start.setAttribute("w:id", String(nextId));
+      start.setAttribute("w:edGrp", "everyone");
+      const end = doc.createElementNS(W_NS, "w:permEnd");
+      end.setAttribute("w:id", String(nextId));
+      nextId++;
+
+      sdt.parentNode.insertBefore(start, sdt);
+      sdt.parentNode.insertBefore(end, sdt.nextSibling);
+      wrapped++;
+    }
+
+    zip.file(part, serialize(doc));
+  }
+  return { wrapped, locked };
+}
+
+function enableReadOnlyProtection(zip) {
+  const file = zip.file("word/settings.xml");
+  if (!file) throw new Error("word/settings.xml not found");
+
+  const doc = parseXml(file.asText());
+  const prots = doc.getElementsByTagNameNS(W_NS, "documentProtection");
+  const prot = prots.length > 0 ? prots[0] : null;
+
+  if (prot) {
+    prot.setAttribute("w:edit", "readOnly");
+    prot.setAttribute("w:enforcement", "1");
+  } else {
+    // T3 มี element นี้อยู่แล้ว แต่รองรับไฟล์ที่ไม่มี: แทรกเป็น child แรกของ w:settings
+    const el = doc.createElementNS(W_NS, "w:documentProtection");
+    el.setAttribute("w:edit", "readOnly");
+    el.setAttribute("w:enforcement", "1");
+    doc.documentElement.insertBefore(el, doc.documentElement.firstChild);
+  }
+
+  zip.file("word/settings.xml", serialize(doc));
+}
+
+function setCustomProperties(zip, props) {
+  // --- 1. docProps/custom.xml : สร้างใหม่ หรือ merge กับของเดิม ---
+  const existing = zip.file("docProps/custom.xml");
+  let doc;
+  if (existing) {
+    doc = parseXml(existing.asText());
+    // ลบ property ชื่อซ้ำออกก่อน (เขียนทับค่าใหม่)
+    const all = Array.from(doc.getElementsByTagNameNS(CUSTOM_NS, "property"));
+    for (const p of all) {
+      if (Object.prototype.hasOwnProperty.call(props, p.getAttribute("name"))) {
+        p.parentNode.removeChild(p);
+      }
+    }
+  } else {
+    doc = parseXml(
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>` +
+        `<Properties xmlns="${CUSTOM_NS}" xmlns:vt="${VT_NS}"/>`,
+    );
+  }
+
+  // pid ต้อง >= 2 และไม่ซ้ำ — เริ่มจากค่าสูงสุดที่มีอยู่ +1
+  const usedPids = Array.from(
+    doc.getElementsByTagNameNS(CUSTOM_NS, "property"),
+  ).map((p) => Number.parseInt(p.getAttribute("pid"), 10) || 1);
+  let nextPid = Math.max(1, ...usedPids) + 1;
+
+  for (const [name, value] of Object.entries(props)) {
+    const prop = doc.createElementNS(CUSTOM_NS, "property");
+    prop.setAttribute("fmtid", FMTID);
+    prop.setAttribute("pid", String(nextPid++));
+    prop.setAttribute("name", name);
+    const val = doc.createElementNS(VT_NS, "vt:lpwstr");
+    val.textContent = value;
+    prop.appendChild(val);
+    doc.documentElement.appendChild(prop);
+  }
+  zip.file("docProps/custom.xml", serialize(doc));
+
+  // --- 2. [Content_Types].xml : เพิ่ม Override (ครั้งเดียว) ---
+  const ct = parseXml(zip.file("[Content_Types].xml").asText());
+  const hasCt = Array.from(ct.getElementsByTagName("Override")).some(
+    (o) => o.getAttribute("PartName") === "/docProps/custom.xml",
+  );
+  if (!hasCt) {
+    const el = ct.createElement("Override");
+    el.setAttribute("PartName", "/docProps/custom.xml");
+    el.setAttribute("ContentType", CT_CUSTOM);
+    ct.documentElement.appendChild(el);
+    zip.file("[Content_Types].xml", serialize(ct));
+  }
+
+  // --- 3. _rels/.rels : เพิ่ม Relationship (ครั้งเดียว) ---
+  const rels = parseXml(zip.file("_rels/.rels").asText());
+  const relNodes = Array.from(rels.getElementsByTagName("Relationship"));
+  if (!relNodes.some((r) => r.getAttribute("Type") === REL_CUSTOM)) {
+    const usedIds = new Set(relNodes.map((r) => r.getAttribute("Id")));
+    let n = 1;
+    while (usedIds.has(`rId${n}`)) n++;
+    const el = rels.createElement("Relationship");
+    el.setAttribute("Id", `rId${n}`);
+    el.setAttribute("Type", REL_CUSTOM);
+    el.setAttribute("Target", "docProps/custom.xml");
+    rels.documentElement.appendChild(el);
+    zip.file("_rels/.rels", serialize(rels));
+  }
+}
+
+// อ่านกลับมาตรวจทุกอย่างหลังเขียนไฟล์
+function verify(path) {
+  const zip = new PizzaZip(readFileSync(path));
+
+  const settings = zip.file("word/settings.xml")?.asText() ?? "";
+  const prot = settings.match(/<w:documentProtection[^>]*\/>/)?.[0];
+  const enforced =
+    prot?.includes('w:edit="readOnly"') && prot?.includes('w:enforcement="1"');
+
+  const customXml = zip.file("docProps/custom.xml")?.asText();
+  const propsBack = {};
+  if (customXml) {
+    const doc = parseXml(customXml);
+    for (const p of Array.from(
+      doc.getElementsByTagNameNS(CUSTOM_NS, "property"),
+    )) {
+      propsBack[p.getAttribute("name")] = p.textContent;
+    }
+  }
+
+  const rels = zip.file("_rels/.rels")?.asText() ?? "";
+  const ct = zip.file("[Content_Types].xml")?.asText() ?? "";
+
+  const docXml = zip.file("word/document.xml")?.asText() ?? "";
+  const sdtPrs = docXml.match(/<w:sdtPr>[\s\S]*?<\/w:sdtPr>/g) ?? [];
+  const plain = sdtPrs.filter((p) => /<w:text\b/.test(p)).length;
+  const rich = sdtPrs.length - plain;
+  const tagged = sdtPrs.filter((p) => /<w:tag w:val="/.test(p)).length;
+  const permStarts = (docXml.match(/<w:permStart /g) ?? []).length;
+  const permEnds = (docXml.match(/<w:permEnd /g) ?? []).length;
+  const missingLock = sdtPrs.filter(
+    (p) => /<w:tag w:val="/.test(p) && !/<w:lock /.test(p),
+  ).length;
+
+  console.log("-- verify (อ่านไฟล์กลับหลังเขียน) --");
+  console.log(`documentProtection : ${prot ?? "(ไม่พบ!)"} ${enforced ? "✓" : "✗ ไม่ถูกเปิดใช้"}`);
+  console.log(`docProps/custom.xml: ${customXml ? "มี ✓" : "ไม่พบ ✗"}`);
+  console.log(
+    "custom properties  :",
+    Object.entries(propsBack)
+      .map(([k, v]) => `${k}="${v.length > 40 ? v.slice(0, 40) + "…" : v}"`)
+      .join(", ") || "(ว่าง)",
+  );
+  console.log(
+    `relationship      : ${rels.includes(REL_CUSTOM) ? "✓" : "✗ ไม่พบ"} | content-type override: ${ct.includes(CT_CUSTOM) ? "✓" : "✗ ไม่พบ"}`,
+  );
+  console.log(`content controls   : ${sdtPrs.length} ตัว (plain=${plain}, rich=${rich}, มี tag=${tagged})`);
+  console.log(
+    `permission ranges  : permStart=${permStarts} / permEnd=${permEnds} (ต้องเท่ากับมี tag=${tagged}) ` +
+      (permStarts === tagged && permEnds === tagged ? "✓" : "✗"),
+  );
+  console.log(
+    `CC ไม่มี lock      : ${missingLock} ตัว (ต้องเป็น 0 — กันลบช่อง) ${missingLock === 0 ? "✓" : "✗"}`,
+  );
+
+  return (
+    enforced &&
+    !!customXml &&
+    permStarts === tagged &&
+    permEnds === tagged &&
+    missingLock === 0
+  );
+}
+
+const zip = new PizzaZip(readFileSync(inPath));
+enableReadOnlyProtection(zip);
+const { wrapped, locked } = unlockContentControls(zip);
+setCustomProperties(zip, CUSTOM_PROPS);
+
+if (locked > 0) {
+  console.log(`เติม w:lock="sdtLocked" ให้ CC อีก ${locked} ตัวที่ยังไม่มี`);
+}
+console.log(`ครอบ CC ด้วย permission range: ${wrapped} ตัว`);
+
+const out = zip.generate({ type: "nodebuffer", compression: "DEFLATE" });
+writeFileSync(outPath, out);
+console.log(`เขียนไฟล์แล้ว: ${outPath} (${out.length.toLocaleString()} bytes)`);
+
+const ok = verify(outPath);
+process.exit(ok ? 0 : 1);

app/api/template/test/note.md

@@ -0,0 +1,127 @@
+# Docx Template
+lib-tmpl.ts เป็นแชร์ไลบารีสำหรับการทำ Template ใช้ Content Control ใน MS Word
+## วิธีการใช้ API
+```sh
+## Swagger UI — เปิดในเบราว์เซอร์ (ลองยิงจริงผ่านปุ่ม Try it out ได้เลย ไม่ต้อง login)
+http://localhost:3000/docedit/api/swagger
+
+## template/test ไว้ทดสอบเท่านั้น
+curl.exe http://localhost:3000/docedit/api/template/test
+
+## extract ค่าออกมาจาก content control
+curl.exe -X POST http://localhost:3000/docedit/api/template/extract -F "file=@./output-T3.docx"
+
+## render เอกสาร (docx) = template(docx)+data(json)  
+### อาจจะเพิ่มการเอา template จาก url และ file(local) ยังไม่รู้ว่าทางนั้นจะส่งไฟล์แบบไหนมาให้ เอาแค่นี้ไว้ทดสอบก่อน  
+curl.exe -X POST http://localhost:3000/docedit/api/template/render -F "template=@./T3.docx" -F "data=@./T2.json" -o output.docx
+### data เอาจาก string
+curl -X POST http://localhost:3000/docedit/api/template/render \
+  -F "template=@template.docx" \
+  -F 'dataJson={"member_name":"นายสมชาย","member_id":"123456"}' \
+  -o generated-document.docx
+
+```
+data(json) ตอนนี้อยู่ในรูปแบบ 
+```json
+{
+  "notname": "คำสั่งเรียก ให้ทำคำให้การ",
+  "nottype": "(ต. ๑)",
+  "blackno": "คดีหมายเลขดำที่",
+  "blackyear": "๑๐/๒๕๖๙",
+  ...
+}
+```
+data(json)น่าจะปรับเป็นแบบนี้เพื่อรองรับการทำ Token-Based Seamless Integration
+หลักผ่าน API 
+- ส่วนของ cc จะไปกรอกใน Content Control 
+- uid,uname,fid,ott,expire สร้างเป็น token ฝังใน custom property ของเอกสาร 
+```json
+{
+  "uid":"id ผู้มีสิทธิ์แก้ไขเอกสาร",
+  "uname": "ชื่อผู้มีสิทธิ์แก้ไขเอกสาร สำหรับแสดงผล",
+  "fid":"file id จะได้เซฟข้อมูลกลับไปที่ Oracle ถูกตารางและหน่วยงาน",
+  "ott":"อายุของ one time token แบบระยะสั้น",
+  "expire": "อายุเอกสารแบบระยะยาวหลังเอา ott ไปแลก (optional)",
+  cc:{
+    "notname": "คำสั่งเรียก ให้ทำคำให้การ",
+    "nottype": "(ต. ๑)",
+    "blackno": "คดีหมายเลขดำที่",
+    "blackyear": "๑๐/๒๕๖๙",
+    ...
+  }
+}
+```
+ที่ต้องทำเพิ่ม
+- render ปัจจุบันมีไว้ให้ทางศาลทดสอบ อันที่ใช้จริงหลังกดสร้าง Template เพื่อ Download จะสร้างเอกสารเวอร์ชั่นแรกใน object storage หรือถ้ามีอยู่แล้ว จะเป็นการอัปเดต
+- Backend จัดการ version
+- อัปเดตข้อมูลและเอกสารกลับระบบเดิม ส่วนนี้ยังไม่ชัดเจนอาจจะทำ mock api เตรียมไว้ก่อน
+
+# ทดลอง Restrict Edit + Custom Properties (2026-10-07)
+
+สคริปต์ `make-protected.mjs` — อ่าน docx → เปิด protection + ฝัง custom properties → เขียนไฟล์ → อ่านกลับ verify ทุกครั้ง
+
+```sh
+node app/api/template/test/make-protected.mjs [in.docx] [out.docx]
+# ไม่ส่ง argument = อ่านและเขียนทับ output-T3.docx (ค่าตัวอย่างฝังอยู่ในตัวสคริปต์ CUSTOM_PROPS)
+```
+
+## Restrict Edit (เปิดผ่านโค้ด)
+
+- อยู่ที่ `word/settings.xml` → `<w:documentProtection w:edit="readOnly" w:enforcement="1"/>`
+- T3.docx มี element นี้อยู่เดิมแต่เป็น `w:enforcement="0"` (ตั้งค่าไว้ใน Word แต่ไม่ได้กดบังคับใช้) — สคริปต์แค่พลิกเป็น 1 ไม่ต้องแทรก element ใหม่
+- **บทเรียนจากทดสอบใน Word จริง (2026-10-07): `readOnly` + enforcement ล็อคทั้งเอกสารรวมถึง Content Control ด้วย** — CC ไม่ได้ถูกยกเว้นให้แก้อัตโนมัติ ต้องคู่กับข้อถัดไป
+- **กลไกที่ถูกต้อง: ครอบ `w:sdt` ทุกตัวที่มี `w:tag` ด้วย `<w:permStart w:id="N" w:edGrp="everyone"/>` … `<w:permEnd w:id="N"/>`** — คือกลไก "Exceptions (optional): Everyone" ที่แผง Restrict Editing ของ Word ใช้เวลาเราเลือกบริเวณแล้วติ๊ก Everyone (บริเวณใน permission range แก้ได้ นอกนั้นล็อค) — แทรกที่ระดับเดียวกับ sdt (inline ใน `w:p` หรือ block ใน `w:body` ก็ valid ตาม grammar)
+- สคริปต์เติม `w:lock="sdtLocked"` ให้ CC ที่ยังไม่มีด้วย (T3 ขาด acc1, nottitle) — พอช่องถูกเปิดให้แก้ผ่าน permission แล้ว ช่องที่ไม่มี lock จะถูก**ลบ**ได้ตามไปด้วย
+- ไม่ใส่ password → ผู้ใช้ปลดเองได้จาก Review → Restrict Editing → Stop Protection — ตั้งใจไว้แบบนี้เพราะ concept คือ token ใน custom property เป็นตัวกำกับสิทธิ์จริง ส่วน protection เป็นแค่เกราะกันแก้พลาด (ถ้าจะใส่ password ต้องคำนวณ legacy hash: SHA-1 ของ password+salt วนตาม `w:cryptSpinCount` ตาม ECMA-376 — ยังไม่ทำ)
+
+## ฝังข้อมูลใน Property เอกสาร (token / primary-key / owner)
+
+ทางเลือกที่ศึกษา:
+1. **`docProps/custom.xml` (custom properties) — ที่เลือกใช้** เห็นได้ใน Word: File → Info → Properties → Advanced Properties → แท็บ Custom; add-in ฝั่ง Word (Office.js) อ่าน/เขียนได้ผ่าน `Document.properties.customProperties` (WordApi 1.3+)
+   - ไฟล์ที่ไม่มี part นี้อยู่ (กรณีปกติของ docx) ต้องทำครบ 3 อย่างพร้อมกัน ไม่งั้น Word ถือว่าไฟล์เสีย:
+     1. สร้าง `docProps/custom.xml` — property แต่ละตัว: `fmtid="{D5CDD505-2E9C-101B-9397-08002B2CF9AE}"` คงที่ + `pid` ≥ 2 ไม่ซ้ำ + `name` + ค่า string ใน `vt:lpwstr`
+     2. `[Content_Types].xml` เพิ่ม `<Override PartName="/docProps/custom.xml" ContentType="application/vnd.openxmlformats-officedocument.custom-properties+xml"/>`
+     3. `_rels/.rels` เพิ่ม Relationship ชนิด `.../relationships/custom-properties` Target `docProps/custom.xml`
+2. `docProps/core.xml` (core properties: title/subject/creator/description) — แก้ง่าย เห็นในหน้า Properties ปกติ เหมาะกับข้อมูลที่แสดงต่อผู้ใช้ ไม่ใช่ token
+3. `w:docVar` ใน `word/settings.xml` (document variables) — ไม่โผล่ใน UI เลย อ่านได้ผ่าน VBA/VSTO (`Document.Variables`) แต่ Word JS API ไม่มีทางตรง — ไม่เลือก
+
+gotcha ที่เจอ: `XMLSerializer` ของ @xmldom/xmldom คง `<?xml ...?>` declaration ไว้ในผลลัพธ์อยู่แล้ว — ห้าม prepend เพิ่มเอง จะได้ declaration ซ้อนเป็น XML invalid (Word/node อ่านไม่ได้)
+
+## extract บอก alignment รายช่อง — key `<tag>@align` (2026-10-07) — **ถอดออกแล้วตามคำขอ (ยังไม่เอา)**
+
+- เคย implement ใน `lib-tmpl.ts` + spec `lib/openapi.ts` แล้ว**ถอดกลับสถานะเดิม** — extract ปัจจุบันคืนแค่ `{ tag: text }` เหมือนเดิม
+- แนวทางที่พิสูจน์แล้วว่าใช้ได้ (เผื่อกลับมาทำภายหลัง): คืน key `<tag>@align` (ค่า w:jc เช่น `thaiDistribute`) เฉพาะช่องที่ต่างจาก default ของเอกสาร โดย resolve: `w:pPr/w:jc` ตรงของย่อหน้า → style ที่ใช้ (ไล่ `w:pStyle` → `w:basedOn`) → `docDefaults` ("left"/"start" นับเป็นไม่ตั้ง) — บริบทย่อหน้าของช่อง: CC block = `w:p` แรกใน `w:sdtContent` / CC inline = `w:p` ที่ครอบ sdt
+- ผลทดสอบตอน implement: direct pPr ชนะ style ✓ inline/block จับได้ทั้งคู่ ✓ และ T3 จัดช่อง 8 ตัวผ่าน style อยู่แล้ว (nottype/blackyear/redyear/acc1/acc2/groupname/detail1/pname — ชิดขวา/กลาง) — ช่องเหล่านี้จะโผล่ `@align` ตามจริง
+
+## จัด paragraph แบบ Thai Distributed — ตัดสินใจ: จัดเองใน Word ตอนทำ template (2026-10-07)
+
+- ค่า OOXML คือ `<w:jc w:val="thaiDistribute"/>` ใน `w:pPr` (ใน Word UI: Paragraph → Alignment → Thai Distributed, ทางลัด Ctrl+Shift+J) — ต่างจาก `distribute` ธรรมดาตรงที่จัดกระจายช่องว่างระหว่างคำเป็นหลัก ไม่บีบยืดตัวอักษร/สระ-วรรณยุกต์
+- **ไม่ตั้งผ่านโค้ด** — ผู้ออกแบบ template จัดเองใน Word ตอนทำ template ทางเดียวกับที่ตั้งฟอนต์/ย่อหน้าอื่น ๆ (เคยทดลองตั้ง default ทั้งเอกสารผ่าน `styles.xml` → `w:docDefaults/w:pPrDefault/w:pPr` แล้วถอดออกตามคำขอ)
+- วิธีจัดเองใน Word:
+  - รายย่อหน้า/ราย CC: คลิกในย่อหน้า → `Ctrl+Shift+J` หรือ Home → Paragraph launcher → Alignment เลือก Thai Distributed
+  - ทั้งเอกสาร: คลิกขวา style Normal → Modify → Format → Paragraph → Thai Distributed
+  - จัด "เฉพาะช่อง CC" ได้เฉพาะ CC แบบ block (มี `w:p` ใน `w:sdtContent` ของตัวเอง เช่น `detail1`) — CC แบบ inline อยู่ในบรรทัดเดียวกับข้อความอื่น การจัดมีผลทั้งบรรทัด
+- จุดสำคัญต่อ render pipeline: `insertBlockContent` ของ lib-tmpl clone `w:pPr` ของย่อหน้าแรกให้ทุกบรรทัดที่แทนค่า — จัดไว้ใน CC ตั้งแต่ต้นค่าจะสืบทอดไปทุกบรรทัดที่ render ใส่ข้อมูลอัตโนมัติ ไม่ต้องทำอะไรฝั่ง render
+- (อ้างอิงเชิงเทคนิคกรณีต้องตั้งผ่านโค้ดภายหลัง: `w:jc` ใน `w:pPr` เป็น fixed sequence — ต้องอยู่หลัง `w:autoSpaceDN`/`w:spacing`/`w:ind` และก่อน `w:textDirection`/`w:rPr`/`w:sectPr`)
+
+## ผล verify (อัตโนมัติทุกครั้งที่รันสคริปต์)
+
+- `documentProtection` เปิดใช้ (readOnly + enforcement=1) ✓
+- `docProps/custom.xml` มี + relationship + content-type override ครบ ✓
+- Content Control 27 ตัวครบเดิม (plain 26 = มี `w:text`, rich 1 = `detail1`) ✓
+- permission ranges: permStart/permEnd ครบตามจำนวน CC ที่มี tag (27/27) ✓
+- ทุก CC มี `w:lock="sdtLocked"` (กันลบช่อง) ✓
+- `extractContentControls` (lib-tmpl) อ่านคืนได้ทุก tag ตรงกับ output.docx ก่อน protect 100% ✓
+
+## ผลทดสอบใน Word จริง (2026-10-07 รอบ 1)
+
+- ✅ แถบเหลือง protection ขึ้น / แก้นอก CC ไม่ได้ / ลบ CC ไม่ได้
+- ❌ B5: **CC แก้ไม่ได้** เพราะ readOnly ล็อคทั้งเอกสาร → แก้ด้วย permStart/permEnd ตามด้านบนแล้ว (รอบ 2)
+- ✅ custom properties ครบ / ปลด protection ได้แบบไม่มี password
+
+## เหลือตรวจใน Word จริง (รอบ 2)
+
+- เปิด `output-T3.docx` → พิมพ์/แก้ในช่อง CC ต้องได้แล้ว (B5)
+- ลบ CC ต้องไม่ได้ทุกตัว (รวม acc1, nottitle ที่เติม lock ให้)
+- ขั้น E เดิม: F12 เซฟสำเนา → เปิดใหม่ → properties ยังอยู่ครบ
+- (ผ่านแล้วทั้งหมด → ย้าย logic ไปเป็นฟังก์ชันใน lib-tmpl.ts แล้วต่อเข้า render pipeline)

app/api/template/test/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+
+export async function GET() {
+  return NextResponse.json({
+    ok: true,
+    service: "docx-template-api",
+  });
+}

app/api/template/test/test.http

@@ -0,0 +1,43 @@
+@baseUrl = http://localhost:3000/docedit/api
+
+### 1. Extract Template
+POST {{baseUrl}}/template/extract
+Content-Type: multipart/form-data; boundary=WebAppBoundary
+
+--WebAppBoundary
+Content-Disposition: form-data; name="file"; filename="output-T3.docx"
+Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document
+
+< ./output-T3.docx
+--WebAppBoundary--
+
+### 2. Render Template with JSON File
+POST {{baseUrl}}/template/render
+Content-Type: multipart/form-data; boundary=WebAppBoundary
+
+--WebAppBoundary
+Content-Disposition: form-data; name="template"; filename="T3.docx"
+Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document
+
+< ./T3.docx
+--WebAppBoundary
+Content-Disposition: form-data; name="data"; filename="T2.json"
+Content-Type: application/json
+
+< ./T2.json
+--WebAppBoundary--
+
+### 3. Render Template with Raw JSON String
+POST {{baseUrl}}/template/render
+Content-Type: multipart/form-data; boundary=WebAppBoundary
+
+--WebAppBoundary
+Content-Disposition: form-data; name="template"; filename="template.docx"
+Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document
+
+< ./T3.docx
+--WebAppBoundary
+Content-Disposition: form-data; name="dataJson"
+
+{"notname": "คำสั่งเรียก ให้ทำคำให้การ","nottype": "(ต. ๑)","blackno": "คดีหมายเลขดำที่","blackyear": "๑๐/๒๕๖๙","redno": "คดีหมายเลขแดงที่","redyear": "","court": "ศาลปกครองสุพรรณบุรี","curdate": "วันที่ ๗ เดือน สิงหาคม พุทธศักราช ๒๕๖๙","accuser": "นายธัญวิสิษฐ์ ศรแก้ว","acc1": "ผู้ฟ้องคดี","accused": "เจ้าคุณมด ที่ ๑ กับพวกรวม ๓ คน","acc2": "ผู้ถูกฟ้องคดี","nottitle": "คำสั่งถึง","commto": "เจ้าคุณมด","groupname": "ผู้ถูกฟ้องคดีที่ ๑","detail1": "ด้วยผู้ฟ้องคดีได้ยื่นฟ้องผู้ถูกฟ้องคดีต่อศาล มีข้อความตามที่ปรากฏ ในระบบงานคดีปกครองอิเล็กทรอนิกส์\nฉะนั้น ให้ ท่านทำคำให้การแก้คำฟ้อง พร้อมด้วยพยานหลักฐาน ๑ ชุด ต่อศาลภายใน ๓๐ วัน นับแต่วันที่ได้รับคำสั่งนี้","pname": "นางนพเก้า เถื่อนชัย","courtname": "ศาลปกครองสุพรรณบุรี","courtno": "๓๓๓ หมู่ ๖ ตำบลสนามชัย อำเภอเมืองสุพรรณบุรี","courttam": "จังหวัดสุพรรณบุรี ๗๒๐๐๐","courttel": "กลุ่มออกหมาย โทรศัพท์ ๐๓๕ ๔๓๒ ๓๓๓ ต่อ ๑๐๐๑,๒๒๐๓","courttel2": "สอบถามติดตามคดี ขอคำปรึกษาแนะนำ โทรสายด่วน “๑๓๕๕”","sendto": "เจ้าคุณมด","addrno": "เลขที่ - หมู่ที่ - ตรอก/ซอย - ถนน - ตำบล/แขวง - อำเภอ/เขต - จังหวัด - โทรศัพท์ -","remarkhead": "","remark": "","warning": "หากผู้ถูกฟ้องคดีไม่ปฏิบัติตามคำสั่งศาลภายในระยะเวลาที่กำหนด ศาลจะถือว่าผู้ถูกฟ้องคดียอมรับข้อเท็จจริงตามข้อหาของผู้ฟ้องคดี"}
+--WebAppBoundary--

app/globals.css

@@ -2,6 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ─── Genesis utilities (docs/DESIGN.md 2026-09-23) ────────────────────────
+   focus indicator = outline น้ำเงินทึบ 2px + offset 2px ของ design system — แยกเป็น
+   class ร่วมเพื่อใช้ซ้ำทุกปุ่ม/ลิงก์; input ใช้ .genesis-input (ขอบน้ำเงิน + outline ตอน
+   :focus ตาม spec Inputs) — ครอบด้วย @layer components ให้ Tailwind utilities ทับได้
+   (UX review M3 2026-09-23: halo alpha 0.12 ของ spec เดิม blend บนขาวแล้ว ~1.2:1
+   ต่ำกว่าเกณฑ์ 3:1 ของ WCAG 1.4.11 — alpha 0.25–0.35 ก็ยังไม่ผ่าน จึงเปลี่ยนเป็น
+   outline ทึบเป็นตัวชี้วัด + offset คั่นไม่ให้จมกับพื้นปุ่ม primary) */
+@layer components {
+  .focus-ring {
+    @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+  }
+  .genesis-input {
+    @apply rounded-md border border-line bg-white px-3.5 py-2 text-sm text-ink placeholder:text-ink-faint focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary;
+  }
+}
+
 /* ─── TextLayer ของ pdfjs v4 ─────────────────────────────────────────────────
    คัดมาจาก node_modules/pdfjs-dist/web/pdf_viewer.css (ส่วนที่จำเป็น)
    ใช้กับ pdfjs.TextLayer ที่ render ลง div.textLayer ใน PDFViewer */
@@ -136,10 +152,15 @@
     inset: -4px;
   }
 
-  /* ปุ่ม bookmark/ลบในแผง selection (20×20) + swatch สีในแผง (16×16) */
+  /* ปุ่ม bookmark/ลบในแผง selection (20×20) + swatch สีในแผง (16×16) —
+     sel-panel-btn ใส่ centering แบบ .coarse-36 กันผู้ใช้ class ไม่ได้เอา flex
+     มาเอง (ไอคอนลอยชิดบนในกล่อง 36px); ปุ่มที่ใช้อยู่มี flex แล้ว ผลลัพธ์ไม่เปลี่ยน */
   .sel-panel-btn {
     min-height: 2.25rem;
     min-width: 2.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
   .sel-panel .color-swatches button,
   .sel-panel .color-swatches label {
@@ -166,6 +187,28 @@
     justify-content: center;
   }
 
+  /* ─── ยกเว้น chevron หุบ/กางของต้นไม้ bookmark (bug report 2026-09-22) ──────
+     คอลัมน์นี้เป็น "ตาราง" ของต้นไม้ ต้องกว้างเท่าไอคอน 14px เท่ากับ spacer
+     (w-3.5) ของแถวลูกเสมอ — ถ้าปล่อย min-width 32px ดันไอคอน bookmark ของ
+     หัวข้อแม่ไปชนแนวพอดีกับของหัวข้อลูก (indent 16px/ระดับโดนกิน) ลำดับ
+     ชั้นมองไม่เห็น และ root มีลูก (chevron) กับไม่มีลูก (spacer) ก็เพี้ยน
+     ไม่ตรงแนวกันเอง — จึงคงขนาดจริง 14px แล้วขยาย hit area ด้วย ::after
+     แบบเดียวกับ sel-handle (จิ้มสบาย 32px เท่าเดิม โดยไม่จอง layout) */
+  aside[data-sidebar] button.bm-toggle {
+    min-height: 0;
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+  aside[data-sidebar] button.bm-toggle::after {
+    content: "";
+    position: absolute;
+    /* ขยาย hit รอบไอคอน 14px เป็น 32px (±9px) โดยไม่กว้างขึ้นจริง */
+    inset: -0.5625rem;
+  }
+
   /* M6: ตัด double-tap zoom ของ browser เมื่อแตะปุ่มรัว ๆ (ยัง pinch ได้ตามปกติ —
      handle ของกรอบ selection เป็น div + touch-none อยู่แล้ว ไม่โดน rule นี้) */
   button,
@@ -198,12 +241,66 @@
     align-items: center;
   }
 
-  /* design review 2026-09-17 H1: ปุ่มหุบ/กางของ CollapsibleBlock เป็น <button>
-     ไม่ใช่ <a> จึงหลุดจากกฎข้างบน (สูงจริง ~29px) — ปุ่มเป็น flex w-full
-     text-left อยู่แล้ว ใส่แค่ min-height (ไม่ต้อง display/justify แบบกฎ <a>) */
+  /* ปุ่มที่ไม่ใช่ <a> (แถวตัวกรองในแผง explorer ของหน้าสรุป, ปุ่มล้างตัวกรอง)
+     หลุดจากกฎข้างบน — ใส่แค่ min-height (ปุ่มเป็น flex w-full text-left อยู่แล้ว
+     ไม่ต้อง display/justify แบบกฎ <a>; เดิมเป็นปุ่มหุบ/กางของ CollapsibleBlock
+     design review 2026-09-17 H1 ก่อนหน้าถูกแทนด้วยตัวกรอง explorer 2026-09-24) */
   main.summary-page button {
     min-height: 2.75rem;
   }
+
+  /* UX review M5 2026-09-23: ช่องกรอกทุกชนิด ≥16px บนจอสัมผัส — iOS Safari ซูมทั้ง
+     หน้าทุกครั้งที่แตะโฟกัสช่องที่ตัวอักษรเล็กกว่า 16px (ทีมตั้งกติกาเดียวกันไว้
+     หน้า login แล้ว — ขยายครบทุกช่องของแอปเฉพาะอุปกรณ์จอสัมผัส; !important จำเป็น
+     เพราะช่องส่วนใหญ่กำหนดขนาดด้วย text-xs/text-[11px] ที่ specificity สูงกว่า)
+     responsive audit 2026-09-24: ครอบ contentEditable ของ TEXTBOX editor ด้วย —
+     fontSize default 2.5% ≈ 15px ทำ Safari ซูม viewport ตอนแตะเข้าโหมดแก้ไข
+     (ตัวอักษรขยายเป็น 16px เฉพาะช่วงพิมพ์ ต่างจากผลลัพธ์ ~7% — trade-off มาตรฐาน
+     ของ editor บน iOS เพราะ maximum-scale กัน focus-zoom ไม่ได้) */
+  input,
+  textarea,
+  select,
+  [contenteditable]:not([contenteditable="false"]) {
+    font-size: 1rem !important;
+  }
+}
+
+/* UX review M7 2026-09-23: ปุ่มหลักของหน้ารายการ/กลุ่ม (Annotate h-8, ลิงก์กลุ่ม,
+   ออกจากระบบ) สูง 32px ต่ำกว่ามาตรฐาน touch 44px ที่ viewer/หน้าสรุปได้แล้ว —
+   หน้าที่ผู้ใช้ iPad แตะบ่อยที่สุดก่อนเปิดเอกสารต้องได้เป้าเท่ากัน (ครอบ a/button
+   ของ <main class="listing-page"> + header ของ AppNav; select/summary เป็น
+   native control/มี flex อยู่แล้ว ใส่แค่ min-height)
+   ครอบด้วย @layer components ให้ Tailwind utilities (flex/items-*) ทับได้ —
+   กฎ unlayered ชนะทุก layer จนบังคับ align-items:center ทับ items-start ของ
+   แถวลิงก์ในการ์ดกลุ่ม กลายเป็นไอคอนลอยกลางแถว 2–3 บรรทัด (code review 2026-09-23)
+   + justify-content:center คืนค่า default ของปุ่ม (text-align:center ของ UA
+   หมดผลเมื่อเป็น flex) ไม่งั้นปุ่ม w-full เช่น "เปิดเอกสาร"/อัปโหลด ข้อความชิดซ้าย
+   (คำขอผู้ใช้ 2026-09-23)
+   responsive audit 2026-09-24: @layer ต้องครอบ @media จากด้านนอกเท่านั้น — ซ้อนกลับกัน
+   (@media { @layer {…} }) แล้ว Tailwind v3 ยกเนื้อหา @layer ออกไปวางที่ components
+   section โดยทิ้ง media wrapper กฎจึงหลุดไป apply บน desktop ด้วย (ยืนยันด้วยการ
+   build จริง: ปุ่มหน้ารายการได้ min-height 44px + flex บนจอ desktop) */
+@layer components {
+  @media (pointer: coarse) {
+    main.listing-page a,
+    main.listing-page button {
+      min-height: 2.75rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    main.listing-page select,
+    main.listing-page summary {
+      min-height: 2.75rem;
+    }
+    header.appnav a,
+    header.appnav button {
+      min-height: 2.75rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }
 
 /* ─── Print (หน้าสรุป) — design review 2026-09-17 L4 ───────────────────────
@@ -212,7 +309,10 @@
    แปลงเป็นกรอบเส้นน้ำเงิน + ตัวอักษรน้ำเงินแทน (อ่านได้บนเครื่องพิมพ์ขาวดำ
    ประหยัดหมึก) และไม่ผ่าหน้ากระดาษกลาง section ของหน้าเอกสาร (หน้าที่ยาวเกิน
    กระดาษเดียว browser เลื่อนทั้งก้อนขึ้นหน้าถัดไปเอง — break-inside เป็นคำ
-   แนะนำ ไม่ใช่กฎเหล็ก) / แถบ action กับรายการตามหน้ามือถือซ่อนด้วย print:hidden ใน JSX */
+   แนะนำ ไม่ใช่กฎเหล็ก) / แถบ action กับแผงตัวกรอง (ทั้ง <details> มือถือและ
+   aside desktop) ซ่อนด้วย print:hidden ใน JSX — รายการบนกระดาษเป็นฉบับเต็ม
+   เสมอไม่สนตัวกรองที่ตั้งค้างไว้ (redesign explorer 2026-09-24: SummaryList
+   render ชุดเต็มแยกไว้เป็น hidden print:block) */
 @media print {
   main.summary-page header {
     background: #fff;
@@ -225,18 +325,28 @@
   main.summary-page section {
     break-inside: avoid-page;
   }
+  /* แถวรายการของหน้าเดียวกันไม่ถูกผ่ากลางระหว่างหน้ากระดาษ */
+  main.summary-page section > ul > li {
+    break-inside: avoid-page;
+  }
+  /* หัวการ์ดรายหน้าเป็น sticky บนจอ — กลับเป็นตำแหน่งปกติบนกระดาษ */
+  main.summary-page .page-head {
+    position: static;
+  }
 }
 
-/* UX review 2026-09-14 H2 → typography audit 2026-09-16 (T1 + Option B): webfont
-   Sarabun (next/font จาก layout.tsx — variable มี adjusted fallback ของ next/font
-   ในตัวแล้ว) นำหน้า stack เพื่อแสดงผลเหมือนกันทุกอุปกรณ์; ที่เหลือเป็น fallback
-   ตอนฟอนต์ยังไม่ถึง (display:swap)/โหลดไม่ได้ — เรียงแบบ Latin-first ตาม T1:
-   Latin/ตัวเลขได้ UI font ของ OS (Segoe UI/SF) ส่วนไทยได้ Leelawadee UI
-   (Windows) / Thonburi (iPad) / Noto Sans Thai (Android/Linux) */
+/* UX review 2026-09-14 H2 → typography audit 2026-09-16 (T1 + Option B) →
+   Genesis 2026-09-23: DM Sans (next/font ตัวแปร Latin) นำหน้า stack ให้ตัว
+   Latin/ตัวเลขได้บุคลิก body ของ design system ก่อน จากนั้น webfont Sarabun
+   (next/font — มี adjusted fallback ของ next/font ในตัว) รับ glyph ไทยโดยเฉพาะ
+   แสดงผลเหมือนกันทุกอุปกรณ์; ที่เหลือเป็น fallback ตอนฟอนต์ยังไม่ถึง
+   (display:swap)/โหลดไม่ได้ — ไทยได้ Leelawadee UI (Windows) / Thonburi (iPad)
+   / Noto Sans Thai (Android/Linux) / heading ใช้คลาส font-display ที่นำ
+   General Sans มาก่อน Sarabun ด้วยหลักการเดียวกัน */
 body {
-  font-family: var(--font-sarabun, "Sarabun"), -apple-system, "Segoe UI",
-    "Helvetica Neue", Arial, "Leelawadee UI", "Thonburi", "Noto Sans Thai",
-    sans-serif;
+  font-family: var(--font-dm-sans, "DM Sans"), var(--font-sarabun, "Sarabun"),
+    -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Leelawadee UI",
+    "Thonburi", "Noto Sans Thai", sans-serif;
 }
 
 /* M6: touch hygiene — ตัดแถบเทากระพริบของ iOS ทุกครั้งที่แตะปุ่ม และกัน
@@ -247,6 +357,16 @@ html {
   overscroll-behavior-y: contain;
 }
 
+/* 2026-09-22: <main> ของ viewer เป็น scroll container เดียวของหน้า (แนวตั้ง +
+   แนวนอน — ซูมจนหน้ากว้างเกินจอแล้วปัดเลื่อนดูส่วนที่เกินได้) — จำกัด gesture
+   สัมผัสให้เป็นการแพนของกรอบนี้เท่านั้น ไม่ปล่อยให้ browser pinch-zoom/double-tap
+   zoom ทั้งหน้าเว็บ (อาการซูมแล้ว header/sidebar โต้ตามไปด้วย); ปุ่มซูม ± เป็น
+   ทางเลือก single-pointer ตาม WCAG 2.5.1 — ต้องอยู่ก่อน .pdf-custom-select
+   เพื่อให้โหมดมาร์กข้อความ (touch-action:none) ยังชนะตอนเปิดใช้ */
+.pdf-scroll-main {
+  touch-action: pan-x pan-y;
+}
+
 /* custom selection ของ tool highlight บนจอสัมผัส (hooks/useCustomSelection) —
    ปิด native selection/callout ของ OS และยึด gesture ลากเป็นของเราทั้งหมด
    (touch-action:none กัน browser ยึดไปเป็น scroll → pointercancel)
@@ -274,12 +394,13 @@ html {
 }
 
 /* เส้นคั่นบางระหว่างแถวตั้งค่า (PanelRow) ที่ต่อกันในเมนู tool/แผง selection —
-   ระยะ/เส้นเท่ากับแทรก <div class="my-1.5 border-t border-slate-100"> ไว้ระหว่างแถว
-   ทุกจุด (แถวแรกของกลุ่มไม่มีเส้น — ไม่ซ้ำกับ divider ที่เมนูใส่ไว้เองแล้ว) */
+   ระยะ/เส้นเท่ากับแทรก <div class="my-1.5 border-t border-line"> ไว้ระหว่างแถว
+   ทุกจุด (แถวแรกของกลุ่มไม่มีเส้น — ไม่ซ้ำกับ divider ที่เมนูใส่ไว้เองแล้ว)
+   (#E8E8EC = token line — เดิม #f1f5f9 เป็น slate-100 หลงเหลือก่อน Genesis) */
 .panel-row + .panel-row {
   margin-top: 0.375rem;
   padding-top: 0.625rem;
-  border-top: 1px solid #f1f5f9;
+  border-top: 1px solid #e8e8ec;
 }
 
 /* M6: safe-area — defensive (ค่าเป็น 0 จนกว่าจะใส่ viewport-fit=cover ใน meta
@@ -293,7 +414,9 @@ header {
 
 /* UX audit 2026-09-16 L7: เคารพ prefers-reduced-motion — ตัด transition ของ
    sidebar, animation กระพริบของปุ่ม export และ smooth scroll ทุกจุด
-   (scrollToBelowHeader ฝั่ง JS เช็ค media query เดียวกันตอนเลือก behavior) */
+   (scrollToBelowHeader ฝั่ง JS เช็ค media query เดียวกันตอนเลือก behavior)
+   UX review m7 2026-09-23: เพิ่ม blanket rule ครอบ transition/animation ที่เหลือ
+   (hover-lift ของการ์ด, scale ของสวอตช์สี ฯลฯ) — ยก motion ทั้งหน้าให้จบทันที */
 @media (prefers-reduced-motion: reduce) {
   aside[data-sidebar] {
     transition: none;
@@ -301,7 +424,12 @@ header {
   .animate-pulse {
     animation: none;
   }
-  * {
+  *,
+  ::before,
+  ::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
     scroll-behavior: auto !important;
   }
 }

app/layout.tsx

@@ -1,17 +1,39 @@
 import type { Metadata } from "next";
-import { Sarabun } from "next/font/google";
+import { DM_Sans, Sarabun } from "next/font/google";
+import localFont from "next/font/local";
 
 import "./globals.css";
 
-/** typography audit 2026-09-16 (Option B): Sarabun — ฟอนต์ตระกูลมาตรฐานเอกสาร
- *  ราชการไทย (TH Sarabun) เจ้าหน้าที่คุ้นเคยที่สุด / next/font self-host ตอน build:
- *  ไฟล์ฟอนต์ serve จาก origin เดียวกับแอป ไม่พึ่ง Google ตอนรัน จึงใช้ใน intranet
- *  ได้ (แต่เครื่อง build ต้องเห็นอินเทอร์เน็ต) — โหลดเฉพาะ 2 weights ตามแผน
- *  ~100-160KB แลกกับการแสดงผลเหมือนกันทุกอุปกรณ์ รวมกล่อง TEXTBOX ที่ผูก
- *  stack นี้ (T1-C: wrap ข้อความตรงกันข้ามอุปกรณ์จริง) */
+/* typography audit 2026-09-16 (Option B): Sarabun — ฟอนต์ตระกูลมาตรฐานเอกสาร
+ * ราชการไทย (TH Sarabun) เจ้าหน้าที่คุ้นเคยที่สุด / next/font self-host ตอน build:
+ * ไฟล์ฟอนต์ serve จาก origin เดียวกับแอป ไม่พึ่ง Google ตอนรัน จึงใช้ใน intranet
+ * ได้ (แต่เครื่อง build ต้องเห็นอินเทอร์เน็ต)
+ *
+ * Genesis (docs/DESIGN.md 2026-09-23): เพิ่ม General Sans (display/heading) จาก
+ * Fontshare เป็น variable woff2 ไฟล์เดียว self-host ผ่าน next/font/local + DM Sans
+ * (body) จาก Google — ทั้งคู่เป็น Latin เท่านั้น ไม่มี glyph ไทย จึงวาง Sarabun
+ * ต่อท้ายใน stack (globals.css / tailwind fontFamily): ตัว Latin/ตัวเลขได้บุคลิก
+ * Genesis ส่วนข้อความไทยคง Sarabun เดิม — Sarabun เพิ่ม weight 700 ให้ heading
+ * ไทย (fallback ของ General Sans bold) */
+const generalSans = localFont({
+  src: "./fonts/GeneralSans-Variable.woff2",
+  // ประกาศช่วง wght จริงของ variable font (Fontshare: 200–700) — ไม่ใส่แล้ว
+  // @font-face ที่ next/font generate ไม่มี descriptor font-weight → cover แค่ 400
+  // และ font-bold/700 กลายเป็น synthetic bold จาก instance 400 (UX review C1 2026-09-23)
+  weight: "200 700",
+  display: "swap",
+  variable: "--font-general-sans",
+});
+
+const dmSans = DM_Sans({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-dm-sans",
+});
+
 const sarabun = Sarabun({
   subsets: ["thai", "latin"],
-  weight: ["400", "600"],
+  weight: ["400", "600", "700"],
   display: "swap",
   variable: "--font-sarabun",
 });
@@ -27,8 +49,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="th" className={sarabun.variable}>
-      <body className="bg-slate-100 text-slate-900 antialiased">{children}</body>
+    <html
+      lang="th"
+      className={`${generalSans.variable} ${dmSans.variable} ${sarabun.variable}`}
+    >
+      <body className="bg-canvas font-body text-ink antialiased">{children}</body>
     </html>
   );
 }

app/login/page.tsx

@@ -1,21 +0,0 @@
-import type { Metadata } from "next";
-import { redirect } from "next/navigation";
-
-import LoginForm from "@/components/LoginForm";
-import { getSessionUser } from "@/lib/session";
-
-export const dynamic = "force-dynamic";
-
-export const metadata: Metadata = { title: "เข้าสู่ระบบ | Judge's Note" };
-
-export default function LoginPage() {
-  // เข้าสู่ระบบอยู่แล้ว (cookie ครบ) → ไม่ต้องเห็นฟอร์มอีก
-  const user = getSessionUser();
-  if (user) redirect("/");
-
-  return (
-    <main className="flex min-h-dvh items-center justify-center px-4 py-10">
-      <LoginForm />
-    </main>
-  );
-}

app/note/annotate/[id]/page.tsx

@@ -30,7 +30,7 @@ export default async function AnnotatePage({
 
   // defense ซ้อน middleware — identity จาก cookie oacCase ส่งเข้า viewer ตั้งแต่ first paint
   const user = getSessionUser();
-  if (!user) redirect("/login");
+  if (!user) redirect("/note/login");
 
   const [file] = await db.select().from(files).where(eq(files.id, id));
   if (!file) notFound();

app/note/annotate/[id]/summary/page.tsx

@@ -0,0 +1,168 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { asc, eq } from "drizzle-orm";
+import { notFound } from "next/navigation";
+import { ArrowLeft, ClipboardList } from "lucide-react";
+
+import type { ExplorerItem } from "@/components/explorer/FacetFilterPanel";
+import { SummaryExplorer } from "@/components/summary/SummaryExplorer";
+import { db } from "@/db";
+import {
+  annotations,
+  bookmarks,
+  files,
+  toAnnotationDTO,
+  toBookmarkDTO,
+} from "@/db/schema";
+
+// หน้าสรุปหมายเหตุ (F15/D2) — server component รวม annotation (ทุกผู้ใช้) + bookmark
+// แต่ละแถวกระโดดเป็น deep link `/note/annotate/<id>?ann=` / `?page=` (F12)
+// — design "แฟ้มสำนวน" 2026-09-17 (แถบหัวน้ำเงิน + การ์ดรายหน้าขอบ folio +
+// รายการตามหน้าจุดไข่ปลา) → redesign 2026-09-24 ตามคำขอผู้ใช้เป็น explorer
+// 2 คอลัมน์แบบหน้ากลุ่ม N9: ตัวกรองฝั่งซ้าย (หน้า/ชนิดรายการ/ชนิดของ
+// Annotation/ผู้บันทึก) + การ์ดรายหน้าหัว sticky — แถบหัวน้ำเงิน + action bar +
+// empty state คงเดิม; query ทั้งหมดทำที่นี่แล้วส่ง `ExplorerItem[]` ให้
+// SummaryExplorer กรองใน memory ฝั่ง client (read-only snapshot ไม่มี SSE)
+
+const UUID_RE =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+/** focus ring ร่วมของทุกลิงก์ในหน้า — Genesis .focus-ring (outline น้ำเงินทึบ 2px
+ *  + offset ตาม spec Elevation); จอสัมผัสได้ 44px อัตโนมัติจากกฎ
+ *  `main.summary-page a`/`button` ใน globals.css (ห้ามถอด class summary-page ของ <main>) */
+const RING_CLS = "focus-ring";
+
+export const dynamic = "force-dynamic";
+
+// design review 2026-09-17 M5: ชื่อแท็บ browser ระบุคดี — เลขานุการเปิดหลายคดี
+// หลายแท็บพร้อมกัน (เดิมทุกแท็บชื่อ "Judge's Note" เหมือนกันหมดแยกไม่ออก)
+export async function generateMetadata({
+  params,
+}: {
+  params: { id: string };
+}): Promise<Metadata> {
+  const { id } = params;
+  if (!UUID_RE.test(id)) return { title: "สรุปหมายเหตุ | Judge's Note" };
+  const [file] = await db
+    .select({ title: files.title })
+    .from(files)
+    .where(eq(files.id, id));
+  return {
+    title: `สรุปหมายเหตุ — ${file?.title ?? "ไม่พบไฟล์"} | Judge's Note`,
+  };
+}
+
+export default async function SummaryPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const { id } = params;
+  if (!UUID_RE.test(id)) notFound();
+
+  const [file] = await db.select().from(files).where(eq(files.id, id));
+  if (!file) notFound();
+
+  const annRows = await db
+    .select()
+    .from(annotations)
+    .where(eq(annotations.fileId, id))
+    .orderBy(asc(annotations.pageIndex), asc(annotations.createdAt));
+  const dtos = annRows.map(toAnnotationDTO);
+
+  // bookmark เรียงตามหน้า → ตำแหน่งบนหน้า → เวลาสร้าง (N5 เหมือน sidebar)
+  const bmRows = await db
+    .select()
+    .from(bookmarks)
+    .where(eq(bookmarks.fileId, id))
+    .orderBy(
+      asc(bookmarks.pageIndex),
+      asc(bookmarks.yOffset),
+      asc(bookmarks.createdAt),
+    );
+  const bmDtos = bmRows.map(toBookmarkDTO);
+  const bookmarkById = new Map(bmDtos.map((b) => [b.id, b] as const));
+
+  // list เดียวรวมทั้งไฟล์ไล่ตามลำดับอ่าน: หน้า → หน้าเดียวกันให้ที่คั่นหน้าก่อน
+  // หมายเหตุ → ในหน้าเดียวกัน bookmark เรียงตามตำแหน่งบนหน้า (N5 เหมือน query/
+  // sidebar — code review 2026-09-24 คืนจาก createdAt ที่เคยแทนที่โดยไม่ตั้งใจ)
+  // ส่วน annotation ตาม createdAt (sort ครั้งเดียวบน server — ฝั่ง client กรอง
+  // เป็น pure predicate ไม่ sort ซ้ำ)
+  const items: ExplorerItem[] = [
+    ...bmDtos.map((dto) => ({
+      kind: "bm" as const,
+      pageIndex: dto.pageIndex,
+      dto,
+      parentTitle: dto.parentId
+        ? bookmarkById.get(dto.parentId)?.title ?? null
+        : null,
+    })),
+    ...dtos.map((dto) => ({ kind: "ann" as const, pageIndex: dto.pageIndex, dto })),
+  ].sort(
+    (a, x) =>
+      a.pageIndex - x.pageIndex ||
+      (a.kind === x.kind ? 0 : a.kind === "bm" ? -1 : 1) ||
+      (a.kind === "bm" && x.kind === "bm"
+        ? a.dto.yOffset - x.dto.yOffset
+        : new Date(a.dto.createdAt).getTime() -
+          new Date(x.dto.createdAt).getTime()),
+  );
+
+  // จำนวนหน้าที่มีรายการ ≥1 สำหรับสถิติแถบหัว
+  const pageCount = new Set(items.map((it) => it.pageIndex)).size;
+
+  return (
+    <main className="summary-page mx-auto max-w-3xl px-4 py-6 lg:max-w-6xl lg:px-8">
+      {/* หัวกระดาษสำนวน — แถบน้ำเงินสืบต่อจาก tile JN ของแบรนด์ (หน้ารายการ/login):
+          ชื่อรายงาน + ชื่อแฟ้ม + สถิติในที่เดียว แล้วปิดท้ายด้วยเส้นคั่นบาง
+          (ตอนพิมพ์เป็นกรอบเส้นน้ำเงินตามกฎ @media print ของ summary-page) */}
+      <header className="rounded-xl bg-primary px-5 py-4 text-white sm:px-6">
+        <h1 className="text-lg font-semibold leading-snug">สรุปหมายเหตุ</h1>
+        <p className="mt-0.5 break-words text-sm text-white/85">{file.title}</p>
+        {items.length > 0 && (
+          <p className="mt-2 text-xs tabular-nums text-white/70">
+            Annotation {dtos.length} รายการ · Bookmark {bmDtos.length} รายการ ·{" "}
+            {pageCount} หน้า
+          </p>
+        )}
+      </header>
+
+      {/* แถบ action — ghost button ขาวมีขอบ ภาษาเดียวกับการ์ดของหน้า (คำขอผู้ใช้
+          2026-09-17 แทนลิงก์ข้อความเปล่า — เห็นเป็นปุ่มชัดขึ้น; จอสัมผัสได้ 44px
+          จากกฎ coarse; ตอนพิมพ์ซ่อนทิ้ง — ปุ่มกลับไม่มีความหมายบนกระดาษ)
+          ปุ่มส่งออก CSV (F16) / Bookmark JSON (N7) ถูกถอด 2026-09-25 ตามคำขอผู้ใช้
+          — ระบบภายนอกดึงข้อมูลผ่าน N10 API แทนทั้งหมดแล้ว */}
+      <div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 print:hidden">
+        <Link
+          href={`/note/annotate/${id}`}
+          className={`inline-flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink hover:border-ink-faint hover:bg-ink/[0.03] ${RING_CLS}`}
+        >
+          <ArrowLeft aria-hidden className="h-3.5 w-3.5" />
+          กลับหน้าอ่าน
+        </Link>
+      </div>
+
+      {items.length === 0 ? (
+        /* ไฟล์ว่าง = ไม่ mount explorer เลย — แผงกรองของข้อมูลว่างไม่มีความหมาย
+           (minimize choices) ทางเข้าเอกสารคือปุ่ม "เปิดหน้าอ่าน" */
+        <div className="mt-5 rounded-xl border border-dashed border-line bg-white/70 p-10 text-center">
+          <ClipboardList aria-hidden className="mx-auto h-8 w-8 text-ink-faint" />
+          <p className="mt-3 text-sm font-medium text-ink-soft">
+            ยังไม่มี Annotation หรือ Bookmark ในไฟล์นี้
+          </p>
+          <p className="mt-1 text-xs text-ink-soft">
+            เปิดหน้าอ่านเพื่อมาร์กข้อความ วาดเส้น ใส่คอมเมนต์ หรือคั่นหน้า
+          </p>
+          <Link
+            href={`/note/annotate/${id}`}
+            className={`mt-4 inline-flex rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow ${RING_CLS}`}
+          >
+            เปิดหน้าอ่าน
+          </Link>
+        </div>
+      ) : (
+        <SummaryExplorer fileId={id} items={items} />
+      )}
+    </main>
+  );
+}

app/note/annotate/page.tsx

@@ -0,0 +1,63 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+import { registerExternalFile } from "@/lib/external-import";
+import { firstSearchParam } from "@/utils/external-file";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * N8 entry point ที่สอง (ตามคำขอผู้ใช้ 2026-09-22): เข้า `/note/annotate?fileUrl=&fileId=&typeId=`
+ * โดยตรง — ลงทะเบียนเอกสารแล้ว redirect ต่อไป `/note/annotate/<id>` ของตัว viewer จริง
+ * (entry เดิมที่หน้า "/note" ยังใช้ได้คู่กัน — สัญญาลิงก์รับทั้ง /note?fileUrl= และ /note/annotate?fileUrl=)
+ */
+export default async function AnnotateEntryPage({
+  searchParams,
+}: {
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
+  const fileUrl = firstSearchParam(searchParams.fileUrl);
+  if (fileUrl) {
+    const result = await registerExternalFile(
+      fileUrl,
+      firstSearchParam(searchParams.fileId),
+      firstSearchParam(searchParams.typeId),
+    );
+    // redirect โยน NEXT_REDIRECT — เรียกนอก try/catch เสมอ
+    if (result.ok) redirect(`/note/annotate/${result.fileId}`);
+    return (
+      <main className="mx-auto max-w-2xl px-4 py-10 sm:px-8">
+        <div
+          role="alert"
+          className="rounded-lg border border-error/30 bg-error/10 p-4 text-sm text-error-ink"
+        >
+          เปิดเอกสารจากลิงก์ไม่สำเร็จ: {result.error}
+        </div>
+        <Link
+          href="/note"
+          className="focus-ring mt-4 inline-block rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow"
+        >
+          กลับหน้ารายการ
+        </Link>
+      </main>
+    );
+  }
+
+  // ไม่มี fileUrl เลย — ไม่มีอะไรให้เปิด (route จริงของ viewer อยู่ที่ /note/annotate/[id])
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-10 sm:px-8">
+      <div className="rounded-xl border border-line bg-white p-6 text-sm text-ink-soft">
+        ไม่ได้ระบุลิงก์เอกสาร — ใช้ <code className="rounded bg-ink/[0.05] px-1">
+          /annotate?fileUrl=…&fileId=…&typeId=…
+        </code>{" "}
+        หรือเลือกไฟล์จากหน้ารายการ
+      </div>
+      <Link
+        href="/note"
+        className="focus-ring mt-4 inline-block rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow"
+      >
+        กลับหน้ารายการ
+      </Link>
+    </main>
+  );
+}

app/note/groups/[typeId]/page.tsx

@@ -0,0 +1,161 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { asc, eq, inArray } from "drizzle-orm";
+import { ArrowLeft, Folder } from "lucide-react";
+
+import {
+  GroupExplorer,
+  type GroupFileSummary,
+  type GroupListItem,
+} from "@/components/groups/GroupExplorer";
+import { db } from "@/db";
+import {
+  annotations,
+  bookmarks,
+  files,
+  toAnnotationDTO,
+  toBookmarkDTO,
+  type AnnotationDTO,
+  type BookmarkDTO,
+} from "@/db/schema";
+import { imageFormatFromUrl } from "@/utils/file-kind";
+
+// N9 (PLAN-DOCSET.md D3) — หน้ารวมเอกสารของกลุ่ม (type_id จากลิงก์ e-Court)
+// server component force-dynamic — login ถูกบังคับโดย middleware.ts อยู่แล้ว
+// snapshot ณ ตอนโหลดเหมือนหน้าสรุป F15 (ไม่มี SSE) — กลุ่มไม่มีไฟล์เลย = 404
+// เพราะไม่มีตารางกลุ่ม: กลุ่มมีชีวิตตามข้อมูลจริงใน files ณ ตอน query
+//
+// redesign 2026-09-24 ตามคำขอผู้ใช้: ไม่มี navbar — explorer 2 คอลัมน์ ตัวกรอง
+// ฝั่งซ้าย + list เดียวรวม bookmark+annotation ทั้งกลุ่มไม่แยกไฟล์ (เคยเป็นการ์ด
+// ต่อไฟล์ + <details>) — query ทั้งหมดทำที่นี่แล้วส่งข้อมูลพร้อมใช้ให้ GroupExplorer
+// กรองใน memory ฝั่ง client
+
+type FileBucket = { anns: AnnotationDTO[]; bms: BookmarkDTO[] };
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { typeId: string };
+}): Promise<Metadata> {
+  return { title: `กลุ่มเอกสาร ${params.typeId} | Judge's Note` };
+}
+
+export default async function GroupPage({
+  params,
+}: {
+  params: { typeId: string };
+}) {
+  const { typeId } = params;
+
+  const rows = await db
+    .select()
+    .from(files)
+    .where(eq(files.typeId, typeId))
+    .orderBy(asc(files.createdAt));
+  if (rows.length === 0) notFound();
+
+  // bookmark+annotation ทั้งกลุ่ม 2 query แยก (ไม่ join หนัก) แล้วจัดตามไฟล์ใน JS
+  const ids = rows.map((f) => f.id);
+  const [annRows, bmRows] = await Promise.all([
+    db
+      .select()
+      .from(annotations)
+      .where(inArray(annotations.fileId, ids))
+      .orderBy(asc(annotations.pageIndex), asc(annotations.createdAt)),
+    db
+      .select()
+      .from(bookmarks)
+      .where(inArray(bookmarks.fileId, ids))
+      .orderBy(
+        asc(bookmarks.pageIndex),
+        asc(bookmarks.yOffset),
+        asc(bookmarks.createdAt),
+      ),
+  ]);
+  const annDtos = annRows.map(toAnnotationDTO);
+  const bmDtos = bmRows.map(toBookmarkDTO);
+
+  const byFile = new Map<string, FileBucket>();
+  const bucketOf = (fileId: string): FileBucket => {
+    let b = byFile.get(fileId);
+    if (!b) {
+      b = { anns: [], bms: [] };
+      byFile.set(fileId, b);
+    }
+    return b;
+  };
+  for (const d of annDtos) bucketOf(d.fileId).anns.push(d);
+  for (const d of bmDtos) bucketOf(d.fileId).bms.push(d);
+  // หา parent ของ sub bookmark แสดง "ใน: …" — id unique ทั้งตาราง ใช้ map เดียวร่วมทั้งกลุ่ม
+  const bookmarkById = new Map(bmDtos.map((b) => [b.id, b] as const));
+
+  const fileSummaries: GroupFileSummary[] = rows.map((f) => ({
+    id: f.id,
+    title: f.title,
+    isImage: Boolean(imageFormatFromUrl(f.pdfUrl)),
+  }));
+
+  // list เดียวรวมทั้งกลุ่มไล่ตามลำดับอ่านสำนวน: ไฟล์ตาม createdAt (rows เรียงแล้ว)
+  // → หน้า → หน้าเดียวกันให้ที่คั่นหน้าก่อนหมายเหตุ → createdAt เป็น tiebreak
+  // (sort ครั้งเดียวบน server — ฝั่ง client กรองเป็น pure predicate ไม่ sort ซ้ำ)
+  const items: GroupListItem[] = rows.flatMap((f) => {
+    const bucket = byFile.get(f.id) ?? { anns: [], bms: [] };
+    return [
+      ...bucket.bms.map((dto) => {
+        const parent = dto.parentId ? bookmarkById.get(dto.parentId) : undefined;
+        return {
+          kind: "bm" as const,
+          pageIndex: dto.pageIndex,
+          dto,
+          parentTitle: parent?.title ?? null,
+        };
+      }),
+      ...bucket.anns.map((dto) => ({
+        kind: "ann" as const,
+        pageIndex: dto.pageIndex,
+        dto,
+      })),
+    ].sort(
+      (a, x) =>
+        a.pageIndex - x.pageIndex ||
+        (a.kind === x.kind ? 0 : a.kind === "bm" ? -1 : 1) ||
+        new Date(a.dto.createdAt).getTime() - new Date(x.dto.createdAt).getTime(),
+    );
+  });
+
+  return (
+    // listing-page: hook ของกฎ coarse 44px ใน globals.css (อย่าถอด)
+    <main className="listing-page mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:max-w-6xl lg:px-8">
+      <Link
+        href="/note"
+        className="focus-ring inline-flex items-center gap-1.5 rounded-md text-sm text-ink-soft transition hover:text-ink"
+      >
+        <ArrowLeft aria-hidden className="h-4 w-4" />
+        หน้ารายการ
+      </Link>
+
+      <header className="mt-4 flex items-center gap-3">
+        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-ink/[0.04]">
+          <Folder aria-hidden className="h-5 w-5 text-ink-soft" />
+        </div>
+        <div className="min-w-0">
+          <h1 className="font-display break-all text-section-title text-ink">
+            {typeId}
+          </h1>
+          <p className="mt-0.5 text-sm text-ink-soft">
+            {rows.length} เอกสาร · {items.length} รายการ
+          </p>
+        </div>
+      </header>
+
+      {/* หมายเหตุ "แสดงเฉพาะเอกสารที่เคยเปิดในระบบนี้" (แผน N9 D3 เดิม) ถูกถอดออก
+          ตามคำขอผู้ใช้ 2026-09-24 — ระบบรู้จักเฉพาะเอกสารที่เคยเปิดผ่านลิงก์ e-Court
+          รายการครบทั้งคดีอยู่ใน e-Court ไม่ใช่ระบบนี้ */}
+
+      <GroupExplorer files={fileSummaries} items={items} />
+    </main>
+  );
+}

app/note/login/page.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+import DotGrid from "@/components/DotGrid";
+import LoginForm from "@/components/LoginForm";
+import { getSessionUser } from "@/lib/session";
+import { firstSearchParam, sanitizeNextPath } from "@/utils/external-file";
+
+export const dynamic = "force-dynamic";
+
+export const metadata: Metadata = { title: "เข้าสู่ระบบ | Judge's Note" };
+
+export default function LoginPage({
+  searchParams,
+}: {
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
+  // N8 D5: path วนกลับหลัง login (middleware แนบมาตอน redirect เข้าหน้านี้) —
+  // ค่ามาจาก query ที่ใครก็แก้ได้ ต้อง sanitize กัน open-redirect ก่อนใช้เสมอ
+  const rawNext = firstSearchParam(searchParams.next);
+  const next = rawNext !== undefined ? sanitizeNextPath(rawNext) : null;
+
+  // เข้าสู่ระบบอยู่แล้ว (cookie ครบ) → ไม่ต้องเห็นฟอร์มอีก
+  const user = getSessionUser();
+  if (user) redirect(next ?? "/note");
+
+  return (
+    // Genesis: กริดจุดอันตรกิริยา ( decorative element ชิ้นเดียวที่อนุญาต) เป็นพื้นหลัง
+    // หน้า login — DotGrid อยู่ก่อนการ์ดใน DOM จึงถูกทับโดยการ์ดเอง ไม่ต้องเล่น z-index
+    <main className="relative flex min-h-dvh items-center justify-center px-4 py-10">
+      <DotGrid />
+      <LoginForm next={next} />
+    </main>
+  );
+}

app/note/page.tsx

@@ -0,0 +1,236 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { asc } from "drizzle-orm";
+import { FileImage, FileText, Folder } from "lucide-react";
+
+import { db } from "@/db";
+import { files } from "@/db/schema";
+import AppNav from "@/components/AppNav";
+import EcourtLinkForm from "@/components/EcourtLinkForm";
+import UploadFileForm from "@/components/UploadFileForm";
+import { imageFormatFromUrl } from "@/utils/file-kind";
+import { formatThaiDate } from "@/utils/date-format";
+import { getSessionUser } from "@/lib/session";
+import { registerExternalFile } from "@/lib/external-import";
+import { firstSearchParam } from "@/utils/external-file";
+
+export const dynamic = "force-dynamic";
+
+type FileRow = typeof files.$inferSelect;
+
+/** badge ชนิดไฟล์ต่อรายการ (N3) */
+function kindBadge(pdfUrl: string): string {
+  switch (imageFormatFromUrl(pdfUrl)) {
+    case "jpeg":
+      return "JPG";
+    case "png":
+      return "PNG";
+    case "tiff":
+      return "TIFF";
+    default:
+      return "PDF";
+  }
+}
+
+/** การ์ดไฟล์ของหน้ารายการ (Genesis kit-card: surface 12px radius ขอบ line ไม่มีเงา
+ *  static — hover ยก -2px + shadow-card-hover; tile ไอคอนเป็นกลาง น้ำเงินสงวนให้ของ
+ *  interactive ตาม Do&Don't ของ design system) ใช้ร่วมทุก section (N9) */
+function FileCard({ file }: { file: FileRow }) {
+  return (
+    <li className="flex flex-col rounded-xl border border-line bg-white p-5 transition duration-200 hover:-translate-y-0.5 hover:shadow-card-hover">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-ink/[0.04]">
+          {imageFormatFromUrl(file.pdfUrl) ? (
+            <FileImage aria-hidden className="h-5 w-5 text-ink-soft" />
+          ) : (
+            <FileText aria-hidden className="h-5 w-5 text-ink-soft" />
+          )}
+        </div>
+        <span className="rounded bg-ink/[0.05] px-1.5 py-0.5 text-[11px] font-medium text-ink-soft">
+          {kindBadge(file.pdfUrl)}
+        </span>
+      </div>
+      <span className="mt-4 block break-all line-clamp-2 text-body font-medium text-ink">
+        {file.title}
+      </span>
+      {/* วันที่เป็นข้อมูลที่ผู้ใช้อ่านจริง — ink-soft (ผ่าน 4.5:1); ink-faint เก็บไว้
+          ให้ placeholder/disabled เท่านั้น (UX review M2 2026-09-23) */}
+      <span className="mt-1 block text-caption text-ink-soft">
+        {formatThaiDate(file.createdAt, true)}
+      </span>
+      {/* ปุ่มเข้า annotate แทนลิงก์กางเต็มการ์ด (M4) ตาม feedback — เป็น secondary
+          (หนึ่ง primary ต่อ section ตาม Genesis; การ์ดทั้งกริดคือ passive surface) */}
+      <div className="mt-5 flex flex-1 items-end justify-end">
+        <Link
+          href={`/note/annotate/${file.id}`}
+          className="focus-ring inline-flex h-8 items-center rounded-md border border-line px-3 text-sm font-medium text-ink transition hover:-translate-y-px hover:border-ink-faint"
+        >
+          Annotate
+        </Link>
+      </div>
+    </li>
+  );
+}
+
+export default async function HomePage({
+  searchParams,
+}: {
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
+  // defense ซ้อน middleware — หน้านี้อ่าน cookie อยู่ดีจึงกันซ้ำไม่ให้ render รายการให้คนไม่มี session
+  const user = getSessionUser();
+  if (!user) redirect("/note/login");
+
+  // N8: เข้าจากลิงก์ e-Court ?fileUrl=&fileId=&typeId= — ลงทะเบียนเอกสาร (metadata-only
+  // dedupe ด้วย external_id) แล้วพาเข้า viewer เลย — redirect() โยน NEXT_REDIRECT
+  // ต้องเรียกนอก try/catch เสมอ; หน้านี้ force-dynamic จึงไม่ต้อง revalidatePath
+  // (entry ที่สองอยู่ที่ /note/annotate?fileUrl=… — app/note/annotate/page.tsx)
+  let registerError: string | null = null;
+  const fileUrl = firstSearchParam(searchParams.fileUrl);
+  if (fileUrl) {
+    const result = await registerExternalFile(
+      fileUrl,
+      firstSearchParam(searchParams.fileId),
+      firstSearchParam(searchParams.typeId),
+    );
+    if (result.ok) redirect(`/note/annotate/${result.fileId}`);
+    registerError = result.error;
+  }
+
+  const rows = await db.select().from(files).orderBy(asc(files.createdAt));
+
+  // N9: จัดกลุ่มตาม type_id — การ์ดในกลุ่มเรียง createdAt เหมือนเดิม (ตาม query ที่ asc)
+  // ส่วนลำดับกลุ่มเรียงตาม createdAt ของไฟล์ล่าสุดในกลุ่ม (กลุ่มที่มี activity ใหม่อยู่บน)
+  // ไฟล์ type_id NULL (seed/อัปโหลด N4/ลิงก์ไม่มี typeId) = section "ไม่มีกลุ่ม" ท้ายสุด
+  const grouped = new Map<string, FileRow[]>();
+  const ungrouped: FileRow[] = [];
+  for (const f of rows) {
+    if (f.typeId) {
+      const list = grouped.get(f.typeId);
+      if (list) list.push(f);
+      else grouped.set(f.typeId, [f]);
+    } else {
+      ungrouped.push(f);
+    }
+  }
+  const sections = Array.from(grouped.entries()).sort(
+    (a, b) =>
+      b[1][b[1].length - 1].createdAt.getTime() -
+      a[1][a[1].length - 1].createdAt.getTime(),
+  );
+
+  return (
+    <>
+      <AppNav userName={user.userName} />
+      {/* listing-page: hook ของกฎ coarse 44px ใน globals.css (อย่าถอด — เหมือน
+          summary-page ของหน้าสรุป) */}
+      <main className="listing-page mx-auto max-w-7xl px-4 pb-16 pt-10 sm:px-6">
+        {/* ชื่อระบบ Latin ล้วน → General Sans tracking แน่นตาม Genesis display type */}
+        <h1 className="font-display text-4xl tracking-tight text-ink sm:text-headline">
+          Judge&apos;s Note
+        </h1>
+        <p className="mt-2 text-body text-ink-soft">
+          ระบบ PDF Annotation สำหรับ e-Court
+        </p>
+
+        {registerError && (
+          <div
+            role="alert"
+            className="mt-6 rounded-lg border border-error/25 bg-error/5 p-4 text-sm text-error-ink"
+          >
+            เปิดเอกสารจากลิงก์ไม่สำเร็จ: {registerError}
+          </div>
+        )}
+
+        {/* การ์ดจำลองลิงก์ e-Court (N8) อยู่เหนือรายการเอกสาร — เป็นทางเข้าเปิดเอกสาร
+            จากระบบ e-Court ไม่ใช่การเพิ่มไฟล์เข้ารายการ (คุมความกว้างเดียวกับ
+            ฟอร์มอัปโหลด) */}
+        <section className="mt-12">
+          <div className="border-b border-line pb-3">
+            <h2 className="font-display text-section-title text-ink">
+              เปิดเอกสารจากลิงก์ e-Court
+            </h2>
+          </div>
+          <div className="mt-5 max-w-xl">
+            <EcourtLinkForm />
+          </div>
+        </section>
+
+        <section className="mt-12">
+          <div className="flex items-baseline justify-between gap-3 border-b border-line pb-3">
+            <h2 className="font-display text-section-title text-ink">เอกสาร</h2>
+            {rows.length > 0 && (
+              <span className="text-caption tabular-nums text-ink-soft">
+                {rows.length} ไฟล์
+              </span>
+            )}
+          </div>
+
+          {/* อัปโหลดไฟล์ (N4) อยู่กับรายการเอกสาร — ไฟล์ที่อัปโหลดเข้ารายการนี้เอง
+              (คุมความกว้างไม่ให้ฟอร์มกินเต็มความกว้างของกริดรายการ) */}
+          <div className="mt-5 max-w-xl">
+            <UploadFileForm />
+          </div>
+
+          {rows.length === 0 ? (
+            <div className="mt-5 rounded-xl border border-dashed border-line bg-white/60 p-12 text-center">
+              <FileText aria-hidden className="mx-auto h-8 w-8 text-ink-faint" />
+              <p className="mt-3 text-sm font-medium text-ink-soft">
+                ยังไม่มีไฟล์ในระบบ
+              </p>
+              <p className="mt-1 text-xs text-ink-soft">
+                รัน /sync-db เพื่อ seed ไฟล์ตัวอย่าง
+              </p>
+            </div>
+          ) : (
+            <>
+              {sections.map(([typeId, list]) => (
+                <section key={typeId} className="mt-8">
+                  <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
+                    <Folder
+                      aria-hidden
+                      className="h-4 w-4 shrink-0 text-ink-soft"
+                    />
+                    <h3 className="font-display min-w-0 break-all text-subhead text-ink">
+                      {typeId}
+                    </h3>
+                    <span className="text-caption tabular-nums text-ink-soft">
+                      {list.length} ไฟล์
+                    </span>
+                    {/* Next Link เติม basePath ให้เอง (invariant #12) */}
+                    <Link
+                      href={`/note/groups/${encodeURIComponent(typeId)}`}
+                      className="focus-ring ml-auto shrink-0 rounded text-sm font-medium text-primary hover:underline"
+                    >
+                      เอกสารในกลุ่ม
+                    </Link>
+                  </div>
+                  <ul className="mt-4 grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
+                    {list.map((f) => (
+                      <FileCard key={f.id} file={f} />
+                    ))}
+                  </ul>
+                </section>
+              ))}
+              {ungrouped.length > 0 && (
+                <section className="mt-8">
+                  <div className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
+                    <h3 className="font-display text-subhead text-ink">ไม่มีกลุ่ม</h3>
+                    <span className="text-caption tabular-nums text-ink-soft">
+                      {ungrouped.length} ไฟล์
+                    </span>
+                  </div>
+                  <ul className="mt-4 grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
+                    {ungrouped.map((f) => (
+                      <FileCard key={f.id} file={f} />
+                    ))}
+                  </ul>
+                </section>
+              )}
+            </>
+          )}
+        </section>
+      </main>
+    </>
+  );
+}

app/note/uploads/[name]/route.ts

@@ -7,13 +7,13 @@ import {
 } from "@/utils/file-kind";
 import { PdfPathError, resolvePublicPdfPath } from "@/lib/server-pdf";
 
-// N4 — เสิร์ฟไฟล์ที่อัปโหลด (`public/uploads/<uuid>.<ext>`) ผ่าน route handler
+// N4 — เสิร์ฟไฟล์ที่อัปโหลด (`public/note/uploads/<uuid>.<ext>`) ผ่าน route handler
 // ไม่ใช่ static file ของ Next: production server (next start / standalone) จะไล่
 // รายชื่อไฟล์ใน public/ เก็บไว้ใน Set **ครั้งเดียวตอน startup** เท่านั้น
 // (next/dist/server/lib/router-utils/filesystem.js — setupFsCheck) ไฟล์ที่ action
-// เขียนลง public/uploads/ หลัง server รันแล้วจึง GET ตรง ๆ ไม่ได้ (404)
+// เขียนลง public/note/uploads/ หลัง server รันแล้วจึง GET ตรง ๆ ไม่ได้ (404)
 // ฝั่ง next dev ไม่ผ่าน branch นั้น เลยทำงานได้ — อาการคลาสสิก "local ได้ production พัง"
-// อ่านอย่างเดียว (invariant #1) + path guard ของ lib/server-pdf เหมือน /api/pdf (§5)
+// อ่านอย่างเดียว (invariant #1) + path guard ของ lib/server-pdf เหมือน /api/note/pdf (§5)
 
 // ชื่อไฟล์ต้องเป็น uuid + extension ใน whitelist เท่านั้น (ตรงรูปที่ uploadFile เขียน)
 // — ชื่ออื่น 404 กลับไป ไม่รู้จักก็ไม่เปิด (กัน path traversal โดยแบบชื่อเอง: อักขระ

app/page.tsx

@@ -1,115 +1,33 @@
-import Link from "next/link";
 import { redirect } from "next/navigation";
-import { asc } from "drizzle-orm";
-import { FileImage, FileText } from "lucide-react";
 
-import { db } from "@/db";
-import { files } from "@/db/schema";
-import SessionBar from "@/components/SessionBar";
-import UploadFileForm from "@/components/UploadFileForm";
-import { imageFormatFromUrl } from "@/utils/file-kind";
-import { formatThaiDate } from "@/utils/date-format";
-import { getSessionUser } from "@/lib/session";
+// หน้า root (/docedit) — แทน redirects() เดิมใน next.config.mjs (ถอดออกลด hop
+// ที่ Next สั่งเองตอน deploy หลัง IIS/proxy)
+// ตามคำขอผู้ใช้ 2026-10-14: เปิด /docedit เปล่า ๆ → เข้า taskpane ของ wordaddin
+// เลย (/wordaddin — middleware ไม่บังคับ login ที่ root) ยกเว้น**ลิงก์ e-Court**
+// /docedit/?fileUrl=&fileId=&typeId= (N8) ที่ยังส่งต่อให้ /note เหมือนเดิม —
+// redirect() ไม่แนบ searchParams ให้อัตโนมัติเหมือน redirects() จึงต้องส่งต่อเอง
+// (redirect ของ next/navigation เติม basePath ให้เอง — invariant #12)
+const ECOURT_PARAM_KEYS = ["fileUrl", "fileId", "typeId"] as const;
 
-export const dynamic = "force-dynamic";
-
-/** badge ชนิดไฟล์ต่อรายการ (N3) */
-function kindBadge(pdfUrl: string): string {
-  switch (imageFormatFromUrl(pdfUrl)) {
-    case "jpeg":
-      return "JPG";
-    case "png":
-      return "PNG";
-    case "tiff":
-      return "TIFF";
-    default:
-      return "PDF";
-  }
-}
-
-export default async function HomePage() {
-  // defense ซ้อน middleware — หน้านี้อ่าน cookie อยู่ดีจึงกันซ้ำไม่ให้ render รายการให้คนไม่มี session
-  const user = getSessionUser();
-  if (!user) redirect("/login");
-
-  const rows = await db.select().from(files).orderBy(asc(files.createdAt));
-
-  return (
-    <main className="mx-auto max-w-2xl px-4 py-10 sm:px-8">
-      <header className="flex items-center gap-3">
-        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary text-base font-bold text-white shadow-sm">
-          JN
-        </div>
-        <div>
-          <h1 className="text-2xl font-bold leading-tight text-primary">
-            Judge&apos;s Note
-          </h1>
-          <p className="text-sm text-slate-500">
-            ระบบ PDF Annotation สำหรับ e-Court
-          </p>
-        </div>
-      </header>
-
-      <SessionBar userName={user.userName} />
-
-      <section className="mt-8">
-        <h2 className="text-sm font-semibold text-slate-700">เพิ่มเอกสาร</h2>
-        <UploadFileForm />
-      </section>
-
-      <div className="mt-8 flex items-baseline justify-between">
-        <h2 className="text-sm font-semibold text-slate-700">เอกสาร</h2>
-        {rows.length > 0 && (
-          <span className="text-xs tabular-nums text-slate-500">{rows.length} ไฟล์</span>
-        )}
-      </div>
-
-      {rows.length === 0 ? (
-        <div className="mt-3 rounded-xl border border-dashed border-slate-300 bg-white/60 p-10 text-center">
-          <FileText className="mx-auto h-8 w-8 text-slate-300" />
-          <p className="mt-3 text-sm font-medium text-slate-500">
-            ยังไม่มีไฟล์ในระบบ
-          </p>
-          <p className="mt-1 text-xs text-slate-500">
-            รัน /sync-db เพื่อ seed ไฟล์ตัวอย่าง
-          </p>
-        </div>
-      ) : (
-        <ul className="mt-3 space-y-3">
-          {rows.map((f) => (
-            <li
-              key={f.id}
-              className="group flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-primary/30 hover:shadow-md"
-            >
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-                {imageFormatFromUrl(f.pdfUrl) ? (
-                  <FileImage className="h-5 w-5 text-primary" />
-                ) : (
-                  <FileText className="h-5 w-5 text-primary" />
-                )}
-              </div>
-              <span className="min-w-0 flex-1">
-                <span className="block break-all line-clamp-2 text-sm font-medium text-slate-900">
-                  {f.title}
-                </span>
-                <span className="mt-0.5 block text-xs text-slate-500">
-                  <span className="mr-1.5 rounded bg-slate-100 px-1 py-0.5 font-medium text-slate-500">
-                    {kindBadge(f.pdfUrl)}
-                  </span>
-                  {formatThaiDate(f.createdAt, true)}
-                </span>
-              </span>
-              {/* ปุ่มเข้า annotate แทนลิงก์กางเต็มการ์ด (M4) ตาม feedback — เป้าจิ้ม 36px (H4) */}
-              <Link
-                href={`/annotate/${f.id}`}
-                className="shrink-0 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
-              >
-                Annotate
-              </Link>
-            </li>
-          ))}
-        </ul>
-      )}
-    </main>
+export default function RootPage({
+  searchParams,
+}: {
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
+  const entries = Object.entries(searchParams);
+  const isEcourtLink = entries.some(([key]) =>
+    (ECOURT_PARAM_KEYS as readonly string[]).includes(key),
   );
+  if (!isEcourtLink) {
+    redirect("/wordaddin");
+  }
+  const qs = new URLSearchParams();
+  for (const [key, value] of entries) {
+    if (typeof value === "string") {
+      qs.set(key, value);
+    } else if (Array.isArray(value)) {
+      for (const v of value) qs.append(key, v);
+    }
+  }
+  redirect(`/note?${qs.toString()}`);
 }

app/wordaddin/layout.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+
+/** nested layout แรกของ repo — override ชื่อแท็บ browser ของ taskpane (ส่วนอื่นสืบทอดจาก root layout) */
+export const metadata: Metadata = {
+  title: "e-Court Documents Versioning",
+};
+
+export default function WordAddinLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

app/wordaddin/manifest.xml/route.ts

@@ -0,0 +1,33 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import { requestOrigin } from "@/utils/request-origin";
+
+// GET /wordaddin/manifest.xml — manifest ของ Word add-in สำหรับ sideload
+//
+// URL ใน manifest เป็น absolute https ตามข้อบังคับของ Office แต่ต้องต่างกันตาม
+// environment — เดิมใช้ไฟล์ static ใน public/ ค่า dev (localhost:3000) แล้วให้ผู้
+// deploy rewrite มือเองทุกครั้ง (docs/WORDADDIN-DEV.md) ตอนนี้ serve ผ่าน route
+// แทน: อ่าน template (public/wordaddin/manifest.template.xml — ค่า dev) แล้ว
+// เขียนทับ origin ให้ตรงโฮสต์ที่ขอไฟล์ (dev/UAT/production ใช้ template
+// เดียวกัน — โหลดจาก environment ไหน manifest ก็ชี้ environment นั้น)
+//
+// อ่านจาก public/ เพราะเป็นที่เดียวที่การันตีว่ามีใน standalone ของ Docker
+// (runner stage COPY public — ไฟล์ app/ ต้นฉบับไม่ถูกก๊อปเข้า image)
+
+/** origin dev ที่ฝังใน template — สตริงเดียวที่ถูกแทนที่ทั้งไฟล์ (6 จุด) */
+const DEV_ORIGIN = "https://localhost:3000";
+
+const TEMPLATE = path.join(process.cwd(), "public", "wordaddin", "manifest.template.xml");
+
+export function GET(req: Request): Response {
+  const template = fs.readFileSync(TEMPLATE, "utf8");
+  const manifest = template.replaceAll(DEV_ORIGIN, requestOrigin(req));
+  return new Response(manifest, {
+    headers: {
+      "content-type": "application/xml; charset=utf-8",
+      // origin ขึ้นกับ header ของผู้ขอ — ห้ามแคกลามผู้ใช้เกินครั้งเดียวต่อ download
+      "cache-control": "no-store",
+    },
+  });
+}

app/wordaddin/page.tsx

@@ -0,0 +1,7 @@
+import WordAddinGate from "@/components/wordaddin/WordAddinGate";
+
+/** Taskpane ของ Word add-in (URL /docedit/wordaddin) — server component บาง ๆ ทั้งหมดอยู่ฝั่ง client
+ *  auth/API เป็น mock ของ wordaddin เอง (ไม่ใช้ cookie oacCase — middleware ยกเว้น path นี้) */
+export default function WordAddinPage() {
+  return <WordAddinGate />;
+}

components/AnnotationTypeIcon.tsx

@@ -26,7 +26,7 @@ import type {
 export function AnnotationTypeIcon({
   type,
   data,
-  className = "h-4 w-4 shrink-0 text-slate-500",
+  className = "h-4 w-4 shrink-0 text-ink-soft",
 }: {
   type: AnnotationDTO["type"];
   data: AnnotationDTO["data"];

components/AppNav.tsx

@@ -0,0 +1,37 @@
+// Genesis (docs/DESIGN.md) Navigation: sticky แถบบน 56px + backdrop-blur + เส้นแบ่ง
+// ล่าง 1px — โลโก้ซ้าย / ผู้ใช้ + ออกจากระบบ ขวา (แอปหน้าเดียวต่อ context จึงไม่มี
+// ลิงก์กลางจอ) ใช้เฉพาะหน้ารายการ /note — หน้ากลุ่ม /note/groups/[typeId] เลิกใช้ตาม
+// redesign 2026-09-24 (ไม่มี navbar เหลือ back link) — แทน SessionBar เดิมที่แยก
+// เป็นแถบของตัวเองกลางหน้า
+import Link from "next/link";
+
+import LogoutButton from "./LogoutButton";
+
+export default function AppNav({ userName }: { userName: string }) {
+  return (
+    // appnav: hook ของกฎ coarse 44px ให้ปุ่มในแถบนี้ (globals.css — อย่าถอด)
+    <header className="appnav sticky top-0 z-40 h-14 border-b border-line bg-white/80 backdrop-blur">
+      <div className="mx-auto flex h-full max-w-7xl items-center justify-between gap-3 px-4 sm:px-6">
+        {/* ชื่อแบรนด์เป็น ink ตามกฎ "น้ำเงินเฉพาะของ interactive" — tile JN น้ำเงินคือ
+            แบรนด์มาร์ก (สืบต่อจากหน้าสรุป/login ดั้งเดิม) ทั้งแถบเป็นลิงก์กลับหน้ารายการ */}
+        <Link
+          href="/note"
+          className="focus-ring flex min-w-0 items-center gap-2.5 rounded-md"
+        >
+          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-xs font-bold text-white">
+            JN
+          </span>
+          <span className="font-display truncate text-[15px] font-bold tracking-tight text-ink">
+            Judge&apos;s Note
+          </span>
+        </Link>
+        <div className="flex min-w-0 items-center gap-3">
+          <p className="hidden min-w-0 truncate text-sm text-ink-soft sm:block">
+            {userName}
+          </p>
+          <LogoutButton />
+        </div>
+      </div>
+    </header>
+  );
+}

components/DebugConsole.tsx

@@ -6,7 +6,7 @@ import { useEffect } from "react";
  *  หน้าพร้อม ?debug ไว้อ่าน console.warn ของ log [debug] บน iPad จริง (ไม่มี Mac
  *  ต่อ Safari Web Inspector) — โหลดสคริปต์จาก CDN เท่านั้น ไม่แตะ dependencies
  *  ของ project — เคลียร์ debug เสร็จ = ลบไฟล์นี้ + บรรทัด import/render ใน
- *  app/annotate/[id]/page.tsx */
+ *  app/note/annotate/[id]/page.tsx */
 export default function DebugConsole() {
   useEffect(() => {
     if (!new URLSearchParams(window.location.search).has("debug")) return;

components/DotGrid.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+// Genesis (docs/DESIGN.md) — กริดจุดอันตรกิริยา: ลวดลายตกแต่งชิ้นเดียวที่ design
+// system อนุญาต ("the interactive dot grid is the only decorative element") ใช้เป็น
+// พื้นหลังหน้า login — จุดเทาถี่ 24px + ไฮไลต์น้ำเงินจางตามตำแหน่ง pointer
+// ⚠️ ต้องเป็น pointer-events-none เสมอ: ตัว layer เป็น absolute inset-0 ครอบพื้นที่
+// ทั้งหน้า ส่วนการ์ด login เป็น static element — ตัว positioned จะชนะ hit-test ทับ
+// การ์ดจนคลิก/focus ช่องกรอกไม่ได้ (bug report 2026-09-23) จึงฟัง pointermove ที่
+// window แทนของตัวเอง — ไฮไลต์ยังตามเมาส์ได้แม้อยู่เหนือการ์ด + อัปเดตผ่าน CSS
+// variable บน style ตรง ๆ ไม่ setState กัน re-render ทุก mousemove
+// mask ไล่จางขอบให้กลืนกับพื้น canvas แทนการตัดเส้นชัด
+import { useEffect, useRef } from "react";
+
+export default function DotGrid() {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onPointerMove = (e: PointerEvent) => {
+      const el = ref.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      el.style.setProperty("--dot-mx", `${e.clientX - rect.left}px`);
+      el.style.setProperty("--dot-my", `${e.clientY - rect.top}px`);
+    };
+    window.addEventListener("pointermove", onPointerMove, { passive: true });
+    return () => window.removeEventListener("pointermove", onPointerMove);
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      aria-hidden
+      className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle,rgba(10,10,10,0.10)_1px,transparent_1px)] [background-size:24px_24px] [-webkit-mask-image:radial-gradient(72%_58%_at_50%_42%,black,transparent)] [mask-image:radial-gradient(72%_58%_at_50%_42%,black,transparent)]"
+    >
+      <div className="absolute inset-0 [background-image:radial-gradient(280px_circle_at_var(--dot-mx,50%)_var(--dot-my,36%),rgba(0,51,161,0.07),transparent_72%)]" />
+    </div>
+  );
+}

components/EcourtLinkForm.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+// N8 — การ์ดจำลองลิงก์ e-Court บนหน้ารายการ: กรอก fileUrl (+ fileId + typeId) แล้วกด
+// "เปิดเอกสาร" จะพาไป /annotate?fileUrl=&fileId=&typeId= ซึ่งลงทะเบียนเอกสาร
+// (metadata-only) แล้ว redirect เข้าหน้า viewer ให้เอง — ใช้ทดสอบในเครื่องก่อนมี
+// ลิงก์จริงจาก e-Court (รับทั้ง path ในระบบเช่น /samples/… และ URL ของโฮสต์ที่อนุญาต
+// — ไม่มี scheme นำหน้าระบบเติม https:// ให้)
+// แถบลิงก์เต็มข้างล่างแสดง URL จริงที่ปุ่มจะพาไป (absolute — copy ไปเปิด/ส่งต่อได้) ตามที่พิมพ์สด ๆ
+// Genesis: การ์ด surface 12px radius ขอบ line ใน section "เปิดเอกสารจากลิงก์ e-Court"
+// (แยกจากส่วนเอกสาร) / ปุ่มเป็น secondary ขอบฟ้า / input ผ่าน .genesis-input
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { withBasePath } from "@/utils/base-path";
+
+const inputClass =
+  "genesis-input mt-1 w-full text-base transition aria-invalid:border-error";
+
+export default function EcourtLinkForm() {
+  const router = useRouter();
+  const [fileUrl, setFileUrl] = useState("");
+  const [fileId, setFileId] = useState("");
+  const [typeId, setTypeId] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  // origin เอาตอน client mount เท่านั้น — SSR ไม่มี window (กัน hydration mismatch)
+  const [origin, setOrigin] = useState("");
+
+  useEffect(() => {
+    setOrigin(window.location.origin);
+  }, []);
+
+  // query ชุดเดียวกันทั้ง preview และตอนกดปุ่ม — สิ่งที่เห็นคือสิ่งที่ถูกเปิดเป๊ะ
+  const params = new URLSearchParams();
+  if (fileUrl.trim()) params.set("fileUrl", fileUrl.trim());
+  if (fileId.trim()) params.set("fileId", fileId.trim());
+  if (typeId.trim()) params.set("typeId", typeId.trim());
+  const queryString = params.toString();
+  const fullLink = origin
+    ? `${origin}${withBasePath("/annotate")}${queryString ? `?${queryString}` : ""}`
+    : "";
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!fileUrl.trim()) {
+      setError("กรอกลิงก์ไฟล์ก่อน");
+      return;
+    }
+    setError(null);
+    // router.push เติม basePath ให้เอง (invariant #12 — ต่างจาก fetch/plain href)
+    router.push(`/note/annotate?${queryString}`);
+  };
+
+  return (
+    <form onSubmit={onSubmit} className="flex flex-col rounded-xl border border-line bg-white p-5">
+      {/* ไม่มีหัวการ์ดซ้ำ — h2 "เปิดเอกสารจากลิงก์ e-Court" ของ section ในหน้ารายการ
+          เป็นหัวเดียวพอแล้ว (responsive audit 2026-09-24: เดิมซ้ำสองชั้นติดกัน) */}
+      <div className="grid gap-x-4 gap-y-3 sm:grid-cols-2">
+        <div className="sm:col-span-2">
+          <label htmlFor="ecourt-file-url" className="block text-sm font-medium text-ink">
+            ลิงก์ไฟล์
+          </label>
+          <input
+            type="text"
+            id="ecourt-file-url"
+            name="fileUrl"
+            required
+            value={fileUrl}
+            onChange={(e) => setFileUrl(e.target.value)}
+            placeholder="เช่น /samples/ชื่อไฟล์.pdf หรือ https://…"
+            className={inputClass}
+          />
+        </div>
+        <div>
+          <label htmlFor="ecourt-file-id" className="block text-sm font-medium text-ink">
+            รหัสเอกสาร fileId
+          </label>
+          <input
+            type="text"
+            id="ecourt-file-id"
+            name="fileId"
+            value={fileId}
+            onChange={(e) => setFileId(e.target.value)}
+            className={inputClass}
+          />
+        </div>
+        <div>
+          <label htmlFor="ecourt-type-id" className="block text-sm font-medium text-ink">
+            กลุ่ม typeId
+          </label>
+          <input
+            type="text"
+            id="ecourt-type-id"
+            name="typeId"
+            value={typeId}
+            onChange={(e) => setTypeId(e.target.value)}
+            placeholder="เช่น 1"
+            className={inputClass}
+          />
+        </div>
+      </div>
+      <button
+        type="submit"
+        className="focus-ring mt-4 w-full rounded-md border border-primary/30 px-4 py-2 text-sm font-medium text-primary transition hover:-translate-y-px hover:border-primary hover:bg-primary/5"
+      >
+        เปิดเอกสาร
+      </button>
+      <p className="mt-3 text-xs leading-relaxed text-ink-soft">
+        กดแล้วระบบลงทะเบียนเอกสาร (ถ้ายังไม่มี) แล้วพาเข้าหน้าอ่าน/มาร์กเอกสารทันที —
+        ไฟล์รีโมตรับเฉพาะ https ของโฮสต์ที่อนุญาต
+      </p>
+      <p className="mt-3 break-all rounded-lg bg-ink/[0.04] px-3 py-2.5 text-xs text-ink-soft">
+        <span className="font-medium text-ink">ลิงก์เต็ม: </span>
+        {fullLink || "…"}
+      </p>
+      {error && <p className="mt-2 text-xs text-error-ink">{error}</p>}
+    </form>
+  );
+}

components/LoginForm.tsx

@@ -1,7 +1,10 @@
 "use client";
 
-// ฟอร์ม login (mock e-Court) — เรียก server action login แล้ว router.replace("/")
+// ฟอร์ม login (mock e-Court) — เรียก server action login แล้ว router.replace(next ?? "/note")
 // (pattern ตาม UploadFileForm: useTransition + error state + ข้อความ fallback ตอน transport fail)
+// next = path วนกลับหลัง login (N8 D5 — ผ่าน sanitizeNextPath จากหน้า login มาแล้ว)
+// Genesis (docs/DESIGN.md): การ์ด surface 12px radius ขอบ line ไม่มีเงาระดับ static /
+// input ผ่าน .genesis-input / ปุ่ม primary hover ขึ้น 1px + glow ฟ้า (shadow-btn-glow)
 import { useRef, useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 
@@ -10,13 +13,14 @@ import Select from "@/components/Select";
 import { MOCK_USERS } from "@/utils/user";
 
 // text input ของแอป — text-base (16px) เสมอ: กัน iOS auto-zoom ตอน focus บน iPad
+// (ทับ text-sm ของ .genesis-input — utility อยู่หลัง @layer components ชนะเสมอ)
+// error ตาม spec Inputs: ขอบเปลี่ยนเป็นแดง (ring ยังเป็นฟ้าตาม focus ring หลัก)
 const INPUT_CLASS =
-  "mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-base text-slate-900 placeholder:text-slate-400 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 disabled:cursor-not-allowed disabled:bg-slate-50 aria-invalid:border-red-600 aria-invalid:focus:ring-red-600/30";
+  "genesis-input mt-1 block w-full text-base transition aria-invalid:border-error";
 // dropdown ผู้ใช้ — เหมือน INPUT_CLASS แต่ไม่มี mt-1 (Select ครอบ div.relative: มาร์จินที่ wrapper ข้างนอกแทน)
-const SELECT_CLASS =
-  "block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-base text-slate-900 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30 disabled:cursor-not-allowed disabled:bg-slate-50";
+const SELECT_CLASS = "genesis-input block w-full text-base transition";
 
-export default function LoginForm() {
+export default function LoginForm({ next }: { next: string | null }) {
   const router = useRouter();
   const passwordRef = useRef<HTMLInputElement | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -32,7 +36,7 @@ export default function LoginForm() {
       try {
         const result = await login(usernameInput.value, passwordInput.value);
         if (result.ok) {
-          router.replace("/");
+          router.replace(next ?? "/note");
         } else {
           setError(result.error);
           // คง username ไว้ (โอกาสพลาดอยู่ที่ password) — ล้างแล้วโฟกัสให้พิมพ์ทับได้ทันที
@@ -47,23 +51,29 @@ export default function LoginForm() {
   };
 
   return (
-    <div className="w-full max-w-sm rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-      {/* brand lockup เดียวกับ header หน้ารายการ (ลดขนาดตัวอักษรให้พอการ์ดแคบ) */}
+    <div className="w-full max-w-sm rounded-xl border border-line bg-white p-8">
+      {/* brand lockup เดียวกับ nav หน้ารายการ — tile JN น้ำเงินคือแบรนด์มาร์กของระบบ
+          (หน้าสรุปแถบน้ำเงิน 2026-09-17 สืบต่อจาก tile นี้) ชื่อแบรนด์เป็น ink ตามกฎ
+          "blue เฉพาะของ interactive" ของ Genesis */}
       <div className="flex items-center gap-3">
-        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary text-base font-bold text-white shadow-sm">
+        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-primary text-base font-bold text-white">
           JN
         </div>
-        <div>
-          <p className="text-lg font-bold leading-tight text-primary">Judge&apos;s Note</p>
-          <p className="text-xs text-slate-500">ระบบ PDF Annotation สำหรับ e-Court</p>
+        <div className="min-w-0">
+          <p className="font-display text-lg font-bold leading-tight text-ink">
+            Judge&apos;s Note
+          </p>
+          <p className="mt-0.5 text-xs text-ink-soft">
+            ระบบ PDF Annotation สำหรับ e-Court
+          </p>
         </div>
       </div>
 
-      <h1 className="mt-6 text-lg font-semibold text-slate-900">เข้าสู่ระบบ</h1>
+      <h1 className="font-display mt-8 text-subhead text-ink">เข้าสู่ระบบ</h1>
 
-      <form onSubmit={onSubmit} className="mt-4">
+      <form onSubmit={onSubmit} className="mt-5">
         <div>
-          <label htmlFor="username" className="text-sm font-semibold text-slate-700">
+          <label htmlFor="username" className="block text-sm font-medium text-ink">
             ชื่อผู้ใช้
           </label>
           <div className="mt-1">
@@ -91,7 +101,7 @@ export default function LoginForm() {
         </div>
 
         <div className="mt-4">
-          <label htmlFor="password" className="text-sm font-semibold text-slate-700">
+          <label htmlFor="password" className="block text-sm font-medium text-ink">
             รหัสผ่าน
           </label>
           <input
@@ -110,19 +120,20 @@ export default function LoginForm() {
         <button
           type="submit"
           disabled={pending}
-          className="mt-6 w-full rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
+          className="focus-ring mt-6 w-full rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow disabled:pointer-events-none disabled:opacity-50"
         >
           {pending ? "กำลังตรวจสอบ…" : "เข้าสู่ระบบ"}
         </button>
 
-        {/* รหัสผ่านทดสอบ — รายชื่อเห็นใน dropdown แล้ว เหลือบอกแค่รหัสผ่าน (mock ไม่มีระบบสมัคร) */}
-        <p className="mt-5 rounded-md bg-slate-50 px-3 py-2 text-xs text-slate-500">
+        {/* รหัสผ่านทดสอบ — รายชื่อเห็นใน dropdown แล้ว เหลือบอกแค่รหัสผ่าน (mock ไม่มีระบบสมัคร)
+            กล่อง metadata 8px radius ตาม Genesis (พื้นเทาโปร่งจาง ไม่ใช่การเน้น) */}
+        <p className="mt-5 rounded-lg bg-ink/[0.04] px-3 py-2.5 text-xs leading-relaxed text-ink-soft">
           รหัสผ่านทดสอบ:{" "}
-          <span className="font-semibold text-slate-700">Demo1234</span>
+          <span className="font-semibold text-ink">Demo1234</span>
         </p>
 
         {error && (
-          <p role="alert" className="mt-3 text-xs text-red-600">
+          <p role="alert" className="mt-3 text-xs text-error-ink">
             {error}
           </p>
         )}

components/LogoutButton.tsx

@@ -20,7 +20,7 @@ export default function LogoutButton() {
       type="button"
       onClick={onLogout}
       disabled={pending}
-      className="flex shrink-0 items-center gap-1.5 rounded-md border border-slate-300 px-3 py-2 text-xs font-medium text-slate-600 transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 disabled:opacity-50"
+      className="focus-ring flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-line px-3 text-xs font-medium text-ink-soft transition hover:-translate-y-px hover:border-ink-faint hover:text-ink disabled:pointer-events-none disabled:opacity-50"
     >
       <LogOut className="h-3.5 w-3.5" aria-hidden />
       {pending ? "กำลังออก…" : "ออกจากระบบ"}

components/Select.tsx

@@ -13,7 +13,7 @@ export default function Select({
   return (
     <div className="relative">
       <select {...props} className={`appearance-none pr-7 ${className}`} />
-      <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
+      <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-ink-faint" />
     </div>
   );
 }

components/SessionBar.tsx

@@ -1,15 +0,0 @@
-// แถบแสดงผู้ใช้ที่เข้าสู่ระบบบนหน้ารายการ (แทน UserPicker เดิม) — server component
-// รับค่าจาก cookie ผ่าน props จากหน้า (middleware การันตีว่ามี session ก่อนถึงหน้านี้)
-import LogoutButton from "./LogoutButton";
-
-export default function SessionBar({ userName }: { userName: string }) {
-  return (
-    <div className="mt-6 flex flex-wrap items-center justify-between gap-x-3 gap-y-2 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
-      <p className="min-w-0 text-sm text-slate-600">
-        เข้าสู่ระบบเป็น{" "}
-        <span className="font-semibold text-slate-900">{userName}</span>
-      </p>
-      <LogoutButton />
-    </div>
-  );
-}

components/UploadFileForm.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 // N4 — ฟอร์มอัปโหลดไฟล์เอกสารแบบง่ายบนหน้ารายการ (PDF/รูป รับพร้อมกัน)
-// เสร็จแล้วรายการโผล่เองจาก revalidatePath("/") ของ action
+// เสร็จแล้วรายการโผล่เองจาก revalidatePath("/note") ของ action
+// Genesis: หน้าตาเป็นการ์ด surface 12px radius ขอบ line (ใต้หัวข้อของ section
+// "เอกสาร" — ไฟล์ที่อัปโหลดเข้ารายการนั้น) + ปุ่ม primary เดียวของ section
 import { useState, useTransition } from "react";
+import { Upload } from "lucide-react";
 
 import { uploadFile } from "@/app/actions/files";
 
@@ -43,29 +46,43 @@ export default function UploadFileForm() {
   };
 
   return (
-    <form
-      onSubmit={onSubmit}
-      className="mt-3 flex flex-wrap items-center gap-2 rounded-xl border border-dashed border-slate-300 bg-white/60 p-4"
-    >
+    <form onSubmit={onSubmit} className="flex flex-col rounded-xl border border-line bg-white p-5">
+      <div className="flex items-center gap-2">
+        <Upload aria-hidden className="h-4 w-4 shrink-0 text-ink-faint" />
+        <p className="text-sm font-semibold text-ink">อัปโหลดไฟล์</p>
+      </div>
       <input
         type="file"
         name="file"
         accept={ACCEPT}
         required
         disabled={pending}
-        className="block w-full max-w-xs text-sm text-slate-600 file:mr-3 file:cursor-pointer file:rounded-md file:border-0 file:bg-primary/10 file:px-4 file:py-2 file:text-sm file:font-medium file:text-primary"
+        className="mt-4 block w-full text-sm text-ink-soft file:mr-3 file:cursor-pointer file:rounded-md file:border-0 file:bg-ink/[0.05] file:px-4 file:py-2 file:text-sm file:font-medium file:text-ink"
+      />
+      {/* กลุ่ม typeId ทางเลือก (N9) — ช่องเดียวกับลิงก์ e-Court, ไม่กรอก = "ไม่มีกลุ่ม";
+          uncontrolled ส่งไปกับ FormData เหมือนช่องไฟล์ (normalize ที่ action) */}
+      <label htmlFor="upload-type-id" className="mt-3 block text-sm font-medium text-ink">
+        กลุ่ม typeId
+      </label>
+      <input
+        type="text"
+        id="upload-type-id"
+        name="typeId"
+        disabled={pending}
+        placeholder="ไม่กรอก = ไม่มีกลุ่ม"
+        className="genesis-input mt-1 w-full text-base"
       />
       <button
         type="submit"
         disabled={pending}
-        className="ml-auto shrink-0 rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-white transition hover:opacity-90 disabled:opacity-50"
+        className="focus-ring mt-4 w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow disabled:pointer-events-none disabled:opacity-50"
       >
         {pending ? "กำลังอัปโหลด…" : "อัปโหลด"}
       </button>
-      <p className="w-full text-xs text-slate-500">
+      <p className="mt-3 text-xs leading-relaxed text-ink-soft">
         รองรับ PDF, JPG, PNG, TIFF — ไม่เกิน 100MB ต่อไฟล์
       </p>
-      {error && <p className="w-full text-xs text-red-600">{error}</p>}
+      {error && <p className="mt-2 text-xs text-error-ink">{error}</p>}
     </form>
   );
 }

components/explorer/FacetFilterPanel.tsx

@@ -0,0 +1,354 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  Bookmark,
+  Check,
+  ChevronRight,
+  FileText,
+  Layers,
+  PenLine,
+  Shapes,
+  Users,
+} from "lucide-react";
+
+import { AnnotationTypeIcon } from "@/components/AnnotationTypeIcon";
+import type {
+  AnnotationData,
+  AnnotationDTO,
+  AnnotationType,
+  BookmarkDTO,
+} from "@/db/schema";
+import { TYPE_ORDER, TYPE_SHORT } from "@/utils/annotation-display";
+
+// แผงตัวกรอง facet กลาง — tree menu 2 ระดับสไตล์ Quasar docs q-tree--dense
+// no-connectors (design 2026-09-24 ตามคำขอผู้ใช้: ธีม Genesis พื้นสว่าง + dense
+// บน desktop แต่เป้าแตะ ≥44px บนจอสัมผัส) — ย้ายมาจาก FilterControls ของหน้า
+// กลุ่ม (2026-09-24) เพื่อใช้ร่วมกับหน้าสรุป: มิติแรก (ไฟล์/หน้า) ส่งเข้ามาทาง
+// prop `firstGroup` ส่วนอีก 3 กลุ่ม (ชนิดรายการ/ชนิดของ Annotation/ผู้บันทึก)
+// เหมือนกันทุกหน้า — parent = <details> หุบ/กางอิสระ (chevron หมุน 90°),
+// leaf = <button> dense ไอคอน + ชื่อ + badge pill เลือก button แทน label+input
+// เพราะโดนกฎ coarse 44px ของ `main.listing-page`/`main.summary-page` ใน
+// globals.css พอดี (สรุปเป็น desktop-dense / touch-44 โดยไม่ต้องเพิ่ม CSS)
+
+/** รายการรวมของ explorer — server เรียงตามลำดับอ่านเอกสารให้แล้ว
+ *  (หน้า → หน้าเดียวกัน bookmark ก่อน annotation → createdAt) */
+export type ExplorerItem =
+  | { kind: "bm"; pageIndex: number; dto: BookmarkDTO; parentTitle: string | null }
+  | { kind: "ann"; pageIndex: number; dto: AnnotationDTO };
+
+/** state ตัวกรองกลาง — มิติแรก (`first`) เป็นไฟล์ id (หน้ากลุ่ม) หรือเลขหน้า
+ *  (หน้าสรุป); null/Set ว่าง = default "แสดงทั้งหมด" ทุกช่อง */
+export type FacetFilterState = {
+  first: string | number | null;
+  /** ชนิดรายการที่สนใจ — **ว่าง = แสดงทั้งหมด** (default), ติ๊กอะไรเห็นเฉพาะ
+   *  สิ่งนั้น (direct selection — คำขอผู้ใช้ 2026-09-24 แทนแบบเดิมที่เปิดครบ
+   *  ทั้งคู่ไว้แล้วต้องปิดเอง) */
+  kinds: Set<"bm" | "ann">;
+  /** ชนิดของ Annotation ที่สนใจ — กติกาเดียวกับ kinds: **ว่าง = ทุกชนิด** */
+  types: Set<AnnotationType>;
+  userId: string | null;
+};
+
+/** สร้างใหม่ทุกครั้ง — ห้ามแชร์ object default เดียว (Set ถูก mutate ข้าม
+ *  หน้า/ข้าม render ได้) */
+export function createDefaultFacets(): FacetFilterState {
+  return { first: null, kinds: new Set(), types: new Set(), userId: null };
+}
+
+export type UserOption = { userId: string; label: string };
+
+/** facet count แบบ static จากข้อมูลทั้งหมด (ไม่หดตามตัวกรองอื่น — กันเข้าใจ
+ *  ผิดว่าตัวเลือกหายไปตอนไล่กรอง); มิติแรกไม่มีในนี้ — นับไว้ใน options ของ
+ *  แต่ละตัวเลือกเอง */
+export type FacetCounts = {
+  total: number;
+  bm: number;
+  ann: number;
+  type: Partial<Record<AnnotationType, number>>;
+  user: Record<string, number>;
+};
+
+/** ตัวเลือกของมิติแรก (ไฟล์/หน้า) — icon ส่งเข้ามาเอง (ไฟล์ = FileText/
+ *  FileImage, หน้า = spacer ให้เลขชิดซ้ายตรงแนวกลุ่มผู้บันทึก) */
+export type FirstDimensionOption = {
+  key: string | number;
+  label: string;
+  icon?: ReactNode;
+  count: number;
+};
+
+export type FirstDimensionGroup = {
+  label: string;
+  parentIcon: ReactNode;
+  allLabel: string;
+  allIcon?: ReactNode;
+  options: FirstDimensionOption[];
+  /** true = ตัวเลือกเยอะ (เช่น "หน้า" หลายสิบแถว) — ครอบด้วย max-h + scroll
+   *  ภายในกลุ่มกันกลุ่มอื่นถูกดันออกนอกจอ (facet หลักต้องเห็นใน first
+   *  viewport ของแผง) */
+  optionsScroll?: boolean;
+};
+
+/** data ตัวแทน (ค่าว่างทั้งหมด — เอาไว้เลือกไอคอนเท่านั้น ไม่เคยเข้าถึงจริง)
+ *  เพื่อ reuse AnnotationTypeIcon ในแถวกรองโดยไม่ต้องคอป map ไอคอนซ้ำ */
+const TYPE_ICON_DATA: Record<AnnotationType, AnnotationData> = {
+  HIGHLIGHT: { text: "", color: "", rects: [], style: "highlight" },
+  DRAW: { strokeColor: "", strokeWidth: 0, paths: [], pen: "pencil" },
+  COMMENT: { position: { x: 0, y: 0 }, message: "" },
+  SHAPE: {
+    shape: "rect",
+    rect: { x: 0, y: 0, width: 0, height: 0 },
+    strokeColor: "",
+    strokeWidth: 0,
+  },
+  REDACTION: { rect: { x: 0, y: 0, width: 0, height: 0 } },
+  TEXTBOX: { position: { x: 0, y: 0 }, text: "", color: "", fontSize: 0 },
+  STAMP: { label: "", position: { x: 0, y: 0 }, scale: 0 },
+};
+
+const PARENT_ICON_CLS = "h-4 w-4 shrink-0 text-ink-soft";
+const LEAF_ICON_CLS = "h-4 w-4 shrink-0 text-ink-soft";
+
+/** parent node — หุบ/กางอิสระ (default กาง) pattern bm-toggle ของต้นไม้ bookmark N2
+ *  disabled = กลุ่มใช้ไม่ได้: หรี่ + หุบ + แถวข้างในล็อก (สรุปยังกางดูได้ —
+ *  open เป็น prop เฉพาะ transition false↔true เท่านั้นที่เขียน DOM การหุบ/กาง
+ *  ด้วยมือของผู้ใช้จึงไม่ถูก render ถัดไปเขียนทับ) */
+function FilterGroup({
+  icon,
+  label,
+  open = true,
+  disabled = false,
+  children,
+}: {
+  icon: ReactNode;
+  label: string;
+  open?: boolean;
+  disabled?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <details open={open} className="group">
+      <summary
+        aria-disabled={disabled}
+        className={`focus-ring flex cursor-pointer list-none items-center gap-1.5 rounded px-1.5 py-1.5 text-sm font-semibold text-ink transition hover:bg-ink/[0.03] hover:text-primary [&::-webkit-details-marker]:hidden ${
+          disabled ? "opacity-50" : ""
+        }`}
+      >
+        <ChevronRight
+          aria-hidden
+          className="h-3.5 w-3.5 shrink-0 text-ink-faint transition-transform group-open:rotate-90 motion-reduce:transition-none"
+        />
+        {icon}
+        <span className="min-w-0 flex-1 truncate">{label}</span>
+      </summary>
+      <div className="mt-0.5">{children}</div>
+    </details>
+  );
+}
+
+/** leaf row — single-select มี highlight แถวเดียว, multi-select (multi) เพิ่ม ✓
+ *  border-l-2 โปร่งคงไว้ทุกแถว เปลี่ยนเป็นน้ำเงินเฉพาะ active กัน layout shift
+ *  ไอคอนแรกต่อแนวใต้ chevron ของ parent พอดี 26px = border-l-2 (2) + pl-6 (24)
+ *  = px-1.5 (6) + chevron 14 + gap-1.5 (6) — ต้องนับ border เข้าไปด้วย อย่าแยกออก
+ *  (responsive review 2026-09-24 เคยอ่านเป็น 24px แล้วเข้าใจผิดว่าเพี้ยน) */
+function LeafRow({
+  active,
+  multi = false,
+  disabled = false,
+  icon,
+  label,
+  count,
+  onClick,
+}: {
+  active: boolean;
+  multi?: boolean;
+  disabled?: boolean;
+  icon: ReactNode;
+  label: string;
+  count: number;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={active}
+      disabled={disabled}
+      onClick={onClick}
+      title={label}
+      className="focus-ring flex w-full items-center gap-1.5 rounded border-l-2 border-transparent py-1 pl-6 pr-1.5 text-left text-sm text-ink transition hover:bg-ink/[0.03] aria-pressed:border-l-primary aria-pressed:bg-primary/[0.08] aria-pressed:text-primary disabled:pointer-events-none disabled:opacity-50"
+    >
+      {/* กลุ่ม multi มีกล่อง checkbox visual หน้าไอคอน (facet-filter convention —
+          คำขอผู้ใช้ 2026-09-24): ปกติกรอบเทาโปร่งใน, เลือก = พื้นน้ำเงิน + ✓ ขาว
+          เป็น visual ของ button เดิม ไม่ใช่ native input (กฎ coarse 44px ยังครบ) */}
+      {multi && (
+        <span
+          aria-hidden
+          className={`flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border transition-colors ${
+            active ? "border-primary bg-primary text-white" : "border-ink-faint"
+          }`}
+        >
+          {active && <Check className="h-3 w-3" />}
+        </span>
+      )}
+      {icon}
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      <span className="shrink-0 rounded-full bg-ink/[0.05] px-1.5 text-[11px] leading-4 tabular-nums text-ink-soft">
+        {count}
+      </span>
+    </button>
+  );
+}
+
+export function FacetFilterPanel({
+  state,
+  onChange,
+  firstGroup,
+  users,
+  counts,
+}: {
+  state: FacetFilterState;
+  onChange: (next: FacetFilterState) => void;
+  firstGroup: FirstDimensionGroup;
+  users: UserOption[];
+  counts: FacetCounts;
+}) {
+  const toggleKind = (k: "bm" | "ann", on: boolean) => {
+    const kinds = new Set(state.kinds);
+    if (on) kinds.add(k);
+    else kinds.delete(k);
+    // เลิกเลือก Annotation = ไม่ได้ดู annotation แล้ว → ล้างชนิดที่ติ๊กค้างไว้
+    // ให้เริ่มใหม่ตาม default ตอนกลับมาติ๊ก Annotation (คำขอผู้ใช้ 2026-09-24)
+    const types = !on && k === "ann" ? new Set<AnnotationType>() : state.types;
+    onChange({ ...state, kinds, types });
+  };
+
+  const toggleType = (t: AnnotationType, on: boolean) => {
+    const types = new Set(state.types);
+    if (on) types.add(t);
+    else types.delete(t);
+    // ติ๊กชนิดของ Annotation = ตั้งใจดู annotation → เลือก Annotation ให้อัตโนมัติ
+    // (คำขอผู้ใช้ 2026-09-24 — ก่อนหน้านี้ bookmark ยังปนอยู่ใน list) — ไม่ถอด
+    // อัตโนมัติตอนเลิกติ๊ก เพราะผู้ใช้อาจตั้งใจอยู่มุมมอง annotation แล้ว
+    const kinds = new Set(state.kinds);
+    if (on) kinds.add("ann");
+    onChange({ ...state, kinds, types });
+  };
+
+  const firstOptions = firstGroup.options.map((o) => (
+    <LeafRow
+      key={o.key}
+      active={state.first === o.key}
+      icon={o.icon ?? <FileText aria-hidden className={LEAF_ICON_CLS} />}
+      label={o.label}
+      count={o.count}
+      onClick={() => onChange({ ...state, first: o.key })}
+    />
+  ));
+
+  return (
+    <div className="space-y-2">
+      {/* มิติแรก (ไฟล์/หน้า) — ตัวเลือก + count ส่งมาจากหน้าผ่าน firstGroup;
+          optionsScroll ครอบด้วยกล่อง scroll เฉพาะกรณีตัวเลือกเยอะ */}
+      <FilterGroup icon={firstGroup.parentIcon} label={firstGroup.label}>
+        <LeafRow
+          active={state.first === null}
+          icon={firstGroup.allIcon ?? <FileText aria-hidden className={LEAF_ICON_CLS} />}
+          label={firstGroup.allLabel}
+          count={counts.total}
+          onClick={() => onChange({ ...state, first: null })}
+        />
+        {firstGroup.optionsScroll ? (
+          <div className="max-h-64 overflow-y-auto overscroll-contain scroll-pb-1 scroll-pt-1">
+            {firstOptions}
+          </div>
+        ) : (
+          firstOptions
+        )}
+      </FilterGroup>
+
+      {/* ไม่เลือก = แสดงทั้งหมด (default) — ติ๊กอะไรเห็นเฉพาะสิ่งนั้น */}
+      <FilterGroup
+        icon={<Layers aria-hidden className={PARENT_ICON_CLS} />}
+        label="ชนิดรายการ"
+      >
+        <LeafRow
+          multi
+          active={state.kinds.has("bm")}
+          icon={
+            <Bookmark aria-hidden className="h-4 w-4 shrink-0 text-warning-ink" />
+          }
+          label="Bookmark"
+          count={counts.bm}
+          onClick={() => toggleKind("bm", !state.kinds.has("bm"))}
+        />
+        <LeafRow
+          multi
+          active={state.kinds.has("ann")}
+          icon={<PenLine aria-hidden className={LEAF_ICON_CLS} />}
+          label="Annotation"
+          count={counts.ann}
+          onClick={() => toggleKind("ann", !state.kinds.has("ann"))}
+        />
+      </FilterGroup>
+
+      {/* กติกาเดียวกับชนิดรายการ: ไม่เลือก = ทุกชนิด (default) ติ๊กอะไรเห็นเฉพาะ
+          ชนิดนั้น + แสดงเฉพาะชนิดที่มี ≥1 รายการ (กดแล้วได้ list ว่าง = ไม่เสนอ) —
+          **ไม่ได้ติ๊ก Annotation = กลุ่มนี้ disabled + หุบ** (คำขอผู้ใช้ 2026-09-24:
+          กรองชนิดมีความหมายเฉพาะเมื่อกำลังดู annotation — ติ๊ก Annotation แล้ว
+          กลุ่มกลับมาใช้ได้ + กางให้อัตโนมัติ) */}
+      {counts.ann > 0 && (
+        <FilterGroup
+          icon={<Shapes aria-hidden className={PARENT_ICON_CLS} />}
+          label="ชนิดของ Annotation"
+          open={state.kinds.has("ann")}
+          disabled={!state.kinds.has("ann")}
+        >
+          {TYPE_ORDER.filter((t) => (counts.type[t] ?? 0) > 0).map((t) => (
+            <LeafRow
+              key={t}
+              multi
+              disabled={!state.kinds.has("ann")}
+              active={state.types.has(t)}
+              icon={
+                <AnnotationTypeIcon
+                  type={t}
+                  data={TYPE_ICON_DATA[t]}
+                  className={LEAF_ICON_CLS}
+                />
+              }
+              label={TYPE_SHORT[t]}
+              count={counts.type[t] ?? 0}
+              onClick={() => toggleType(t, !state.types.has(t))}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      <FilterGroup
+        icon={<Users aria-hidden className={PARENT_ICON_CLS} />}
+        label="ผู้บันทึก"
+      >
+        {/* ไอคอนคนซ้ำ N แถวเป็น noise — spacer คง indentation แทน (pattern เดียวกับ
+            leaf ของต้นไม้ bookmark ใน sidebar) */}
+        <LeafRow
+          active={state.userId === null}
+          icon={<span aria-hidden className="w-4 shrink-0" />}
+          label="ทุกคน"
+          count={counts.total}
+          onClick={() => onChange({ ...state, userId: null })}
+        />
+        {users.map((u) => (
+          <LeafRow
+            key={u.userId}
+            active={state.userId === u.userId}
+            icon={<span aria-hidden className="w-4 shrink-0" />}
+            label={u.label}
+            count={counts.user[u.userId] ?? 0}
+            onClick={() => onChange({ ...state, userId: u.userId })}
+          />
+        ))}
+      </FilterGroup>
+    </div>
+  );
+}

components/groups/GroupExplorer.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { ChevronDown, FileImage, FileText, Folder } from "lucide-react";
+
+import {
+  FacetFilterPanel,
+  createDefaultFacets,
+  type ExplorerItem,
+  type FacetFilterState,
+} from "@/components/explorer/FacetFilterPanel";
+import type { AnnotationType } from "@/db/schema";
+
+import { GroupList } from "./GroupList";
+
+// N9 หน้ากลุ่ม (redesign 2026-09-24 ตามคำขอผู้ใช้): explorer 2 คอลัมน์ — ซ้ายเป็น
+// ตัวกรอง (ไฟล์/ชนิดรายการ/ชนิด annotation/ผู้บันทึก) ขวาเป็น list เดียวรวม
+// bookmark+annotation ทั้งกลุ่มไม่แยกไฟล์ — ข้อมูลทั้งหมด query ฝั่ง server ส่งมา
+// ครั้งเดียวแล้วกรองใน memory (read-only snapshot เหมือนเดิม ไม่มี SSE)
+// แผงตัวกรองเป็น component กลาง `components/explorer/FacetFilterPanel` (2026-09-24
+// — เดิม FilterControls เป็นของหน้านี้) ใช้ร่วมกับหน้าสรุปที่มิติแรกเป็น "หน้า"
+
+/** ไฟล์ในกลุ่มแบบย่อ — เอาเฉพาะ field ที่ filter/list ใช้ (ไม่ส่ง row เต็มข้าม wire) */
+export type GroupFileSummary = {
+  id: string;
+  title: string;
+  isImage: boolean;
+};
+
+/** รายการเดียวรวมทั้งกลุ่ม — server เรียงตามลำดับอ่านเอกสารให้แล้ว (ไฟล์ตาม
+ *  createdAt → หน้า → หน้าเดียวกัน bookmark ก่อน annotation → createdAt) */
+export type GroupListItem = ExplorerItem;
+
+export function GroupExplorer({
+  files,
+  items,
+}: {
+  files: GroupFileSummary[];
+  items: GroupListItem[];
+}) {
+  const [filters, setFilters] = useState<FacetFilterState>(createDefaultFacets);
+
+  // facet count เป็น static จากข้อมูลทั้งกลุ่ม (ไม่หดตามตัวกรองอื่น — กันเข้าใจ
+  // ผิดว่าตัวเลือกหายไปตอนไล่กรอง)
+  const counts = useMemo(() => {
+    let bm = 0;
+    let ann = 0;
+    const file: Record<string, number> = {};
+    const type: Partial<Record<AnnotationType, number>> = {};
+    const user: Record<string, number> = {};
+    for (const it of items) {
+      file[it.dto.fileId] = (file[it.dto.fileId] ?? 0) + 1;
+      user[it.dto.userId] = (user[it.dto.userId] ?? 0) + 1;
+      if (it.kind === "bm") bm++;
+      else {
+        ann++;
+        type[it.dto.type] = (type[it.dto.type] ?? 0) + 1;
+      }
+    }
+    return { total: items.length, bm, ann, file, type, user };
+  }, [items]);
+
+  // รายชื่อผู้บันทึกที่มีรายการจริง เรียงชื่อไทย (คนละไฟล์รวมเป็นคนเดียว)
+  const users = useMemo(() => {
+    const labelById = new Map<string, string>();
+    for (const it of items) {
+      if (!labelById.has(it.dto.userId)) {
+        labelById.set(it.dto.userId, it.dto.userName || "ไม่ทราบชื่อ");
+      }
+    }
+    const out: { userId: string; label: string }[] = [];
+    labelById.forEach((label, userId) => out.push({ userId, label }));
+    return out.sort((a, b) => a.label.localeCompare(b.label, "th"));
+  }, [items]);
+
+  // มิติแรกของหน้ากลุ่ม = ไฟล์ (count รายไฟล์ฝังใน options ของ firstGroup)
+  const firstGroup = {
+    label: "ไฟล์",
+    parentIcon: <Folder aria-hidden className="h-4 w-4 shrink-0 text-ink-soft" />,
+    allLabel: "ทุกไฟล์",
+    options: files.map((f) => ({
+      key: f.id,
+      label: f.title,
+      count: counts.file[f.id] ?? 0,
+      icon: f.isImage ? (
+        <FileImage aria-hidden className="h-4 w-4 shrink-0 text-ink-soft" />
+      ) : (
+        <FileText aria-hidden className="h-4 w-4 shrink-0 text-ink-soft" />
+      ),
+    })),
+  };
+
+  const filtered = useMemo(
+    () =>
+      items.filter(
+        (it) =>
+          (!filters.first || it.dto.fileId === filters.first) &&
+          (filters.kinds.size === 0 || filters.kinds.has(it.kind)) &&
+          (it.kind === "ann"
+            ? filters.types.size === 0 || filters.types.has(it.dto.type)
+            : true) &&
+          (!filters.userId || it.dto.userId === filters.userId),
+      ),
+    [items, filters],
+  );
+
+  const selectedFile = filters.first
+    ? files.find((f) => f.id === filters.first) ?? null
+    : null;
+
+  // จำนวนตัวกรองที่ ≠ default — โชว์ที่ summary มือถือ (กัน "กรองเก่ากรองเงียบ")
+  // และเป็นเงื่อนไขปุ่ม "ล้างตัวกรอง"
+  const activeCount =
+    (filters.first !== null ? 1 : 0) +
+    (filters.kinds.size > 0 ? 1 : 0) +
+    (filters.types.size > 0 ? 1 : 0) +
+    (filters.userId !== null ? 1 : 0);
+
+  const resetFilters = () => setFilters(createDefaultFacets());
+
+  return (
+    <div className="mt-6 lg:grid lg:grid-cols-[15rem_minmax(0,1fr)] lg:items-start lg:gap-8">
+      {/* มือถือ (< lg): ตัวกรองหุบ/กางเป็น <details> แบบเดียวกับหน้าสรุป —
+          จอ lg ถูก display:none เอาออกจาก grid — ใช้ named group `group/filters`
+          ไม่ใช่ `group` เปล่า: `group-open:` ของ parent tree ข้างใน match ทุก
+          ancestor ที่มี .group[open] ใช้ชื่อซ้ำแล้ว chevron ของทุกกลุ่มหมุนตลอด
+          ตอนกางแผงนี้ (responsive review 2026-09-24) */}
+      <details className="group/filters rounded-xl border border-line bg-white lg:hidden">
+        <summary className="focus-ring flex cursor-pointer list-none items-center justify-between rounded-md px-4 py-3 text-sm font-semibold text-ink transition hover:text-primary [&::-webkit-details-marker]:hidden">
+          ตัวกรอง{activeCount > 0 ? ` (${activeCount})` : ""}
+          <ChevronDown
+            aria-hidden
+            className="h-4 w-4 shrink-0 text-ink-faint transition-transform group-open/filters:rotate-180 motion-reduce:transition-none"
+          />
+        </summary>
+        {/* cap 70dvh + scroll ภายใน: กลุ่ม "ไฟล์"/"ผู้บันทึก" เยอะ ๆ ต้องไม่ดัน
+            "พบ N รายการ"/list ลงไกลจนมองไม่เห็น (responsive review 2026-09-24) */}
+        <div className="max-h-[70dvh] overscroll-contain overflow-y-auto border-t border-line/70 px-2.5 pb-3 pt-1">
+          <FacetFilterPanel
+            state={filters}
+            onChange={setFilters}
+            firstGroup={firstGroup}
+            users={users}
+            counts={counts}
+          />
+        </div>
+      </details>
+
+      {/* desktop: แผงตัวกรอง sticky — หน้าไม่มี navbar จึง top-6 พอ ไฟล์เยอะ scroll ภายในแผงเอง
+          (p-3 กระชับตามความ dense ของ tree — design 2026-09-24) — h2 "ตัวกรอง (N)"
+          ให้ parity กับ summary มือถือ, scroll-pt/pb กัน focus ring โดนขอบ scroll
+          ตัด, max-h เป็น dvh ตาม pattern h-dvh ของ viewer (responsive review 2026-09-24) */}
+      <aside
+        aria-label="ตัวกรองรายการ"
+        className="hidden rounded-xl border border-line bg-white p-3 lg:sticky lg:top-6 lg:block lg:max-h-[calc(100dvh-3rem)] lg:scroll-pb-1 lg:scroll-pt-1 lg:overflow-y-auto"
+      >
+        <h2 className="px-1.5 text-sm font-semibold text-ink">
+          ตัวกรอง{activeCount > 0 ? ` (${activeCount})` : ""}
+        </h2>
+        <div className="mt-3">
+          <FacetFilterPanel
+            state={filters}
+            onChange={setFilters}
+            firstGroup={firstGroup}
+            users={users}
+            counts={counts}
+          />
+        </div>
+      </aside>
+
+      <section className="mt-5 lg:mt-0">
+        <GroupList
+          items={filtered}
+          files={files}
+          totalCount={counts.total}
+          selectedFile={selectedFile}
+          selectedFileTotal={
+            selectedFile ? counts.file[selectedFile.id] ?? 0 : null
+          }
+          activeCount={activeCount}
+          onReset={resetFilters}
+        />
+      </section>
+    </div>
+  );
+}

components/groups/GroupList.tsx

@@ -0,0 +1,293 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo } from "react";
+import {
+  Bookmark,
+  ClipboardList,
+  FileImage,
+  FileText,
+  ListFilter,
+  StickyNote,
+} from "lucide-react";
+
+import { AnnotationTypeIcon } from "@/components/AnnotationTypeIcon";
+import {
+  annotationNote,
+  annotationPreviewText,
+  annotationTypeLabel,
+} from "@/utils/annotation-display";
+import { formatThaiDate } from "@/utils/date-format";
+
+import type { GroupFileSummary, GroupListItem } from "./GroupExplorer";
+
+// คอลัมน์ content ของหน้ากลุ่ม (design 2026-09-24) — list เดียวรวมทั้งกลุ่ม
+// ไม่แยกไฟล์ (ตัวกรองฝั่งซ้ายทำหน้าที่แยกให้แล้ว) แต่ละแถวบอกไฟล์ที่มาที่
+// ต้น meta line — แถวเป็น passive surface จุดคลิกเดียวคือปุ่ม "View" ท้ายแถว
+// (deep link ?ann= / ?page= เดียวกับหน้าสรุป — คำขอผู้ใช้ 2026-09-24 ไม่กดทั้งแถว
+// ทำให้พ้นข้อจำกัด interactive ซ้อน <a> เดิม และกฎ coarse ของ listing-page ที่
+// display:inline-flex ชนะ utility flex ก็ไม่กระทบแถวอีกต่อไป — เหลือแค่ปุ่ม)
+
+/** จุดคั่น "·" ของ meta line */
+function Sep() {
+  return <span aria-hidden className="text-ink-faint">·</span>;
+}
+
+/** meta line: ไฟล์ที่มา (truncate เฉพาะ span ของตัวเอง — ไม่งั้นชื่อยาวกินบรรทัด
+ *  จนตัด หน้า/ผู้บันทึก/วันที่ ทิ้ง) → หน้า → บริบทกลาง → ผู้บันทึก → วันที่
+ *  flex-wrap ให้วันที่เต็มรูปแบบไทยตกบรรทัดใหม่บนมือถืออย่างสง่า — บริบทกลาง
+ *  ("ใน: …" ของ sub bookmark — ชื่อ parent มาจากข้อความที่คลุม ยาวไม่มีขอบเขต)
+ *  กับ "โดย …" ต้อง min-w-0+truncate ด้วย: whitespace-nowrap เปล่า ๆ หดไม่ได้
+ *  ล้นการ์ดแล้วโดน overflow-hidden ตัดดื้อ ๆ ไม่มี ellipsis (review 2026-09-24) */
+function RowMeta({
+  file,
+  pageIndex,
+  middle,
+  user,
+  date,
+}: {
+  file: GroupFileSummary;
+  pageIndex: number;
+  /** ชื่อชนิดของ annotation หรือ "ใน: …" ของ sub bookmark */
+  middle?: string;
+  user: string;
+  date: string;
+}) {
+  return (
+    <span className="mt-0.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs text-ink-soft">
+      <span className="inline-flex min-w-0 max-w-[12rem] items-center gap-1 sm:max-w-[16rem]">
+        {file.isImage ? (
+          <FileImage aria-hidden className="h-3 w-3 shrink-0" />
+        ) : (
+          <FileText aria-hidden className="h-3 w-3 shrink-0" />
+        )}
+        <span className="truncate" title={file.title}>
+          {file.title}
+        </span>
+      </span>
+      <Sep />
+      <span className="whitespace-nowrap">หน้า {pageIndex + 1}</span>
+      {middle && (
+        <>
+          <Sep />
+          <span className="min-w-0 max-w-full truncate" title={middle}>
+            {middle}
+          </span>
+        </>
+      )}
+      <Sep />
+      <span className="min-w-0 max-w-full truncate">โดย {user}</span>
+      <Sep />
+      {/* formatThaiDate แปลงตาม timezone เครื่องที่ render — SSR/server กับ
+          hydration/ผู้ใช้อาจต่างกัน ใส่ suppressHydrationWarning ตาม convention
+          (เดียวกับ AnnotationSidebar/PDFViewer) */}
+      <span className="whitespace-nowrap" suppressHydrationWarning>
+        {date}
+      </span>
+    </span>
+  );
+}
+
+/** โน้ตคำอธิบาย (N1) / โน้ตย่อยของ bookmark (N2) — 2 บรรทัดพอ */
+function RowNote({ text }: { text: string }) {
+  return (
+    <span className="mt-0.5 flex items-start gap-1 text-xs leading-relaxed text-ink-soft">
+      <StickyNote aria-hidden className="mt-0.5 h-3 w-3 shrink-0 text-warning-ink" />
+      <span className="line-clamp-2 whitespace-pre-wrap break-words">{text}</span>
+    </span>
+  );
+}
+
+/** ปุ่ม secondary "เปิดเอกสารนี้" — ทางเข้าไฟล์ที่ยังไม่มีรายการใด ๆ
+ *  (หน้าเดิมมีปุ่ม Annotate ทุกการ์ด — เก็บไว้ตามคำตัดสินใจผู้ใช้ 2026-09-24) */
+function OpenFileButton({ file }: { file: GroupFileSummary }) {
+  return (
+    <Link
+      href={`/note/annotate/${file.id}`}
+      className="focus-ring inline-flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm font-medium text-ink transition hover:-translate-y-px hover:border-ink-faint"
+    >
+      {file.isImage ? (
+        <FileImage aria-hidden className="h-3.5 w-3.5" />
+      ) : (
+        <FileText aria-hidden className="h-3.5 w-3.5" />
+      )}
+      เปิดเอกสารนี้
+    </Link>
+  );
+}
+
+export function GroupList({
+  items,
+  files,
+  totalCount,
+  selectedFile,
+  selectedFileTotal,
+  activeCount,
+  onReset,
+}: {
+  /** ผ่านตัวกรองแล้ว (เรียงลำดับจาก server คงเดิม) */
+  items: GroupListItem[];
+  files: GroupFileSummary[];
+  totalCount: number;
+  selectedFile: GroupFileSummary | null;
+  /** จำนวนรายการทั้งหมดของไฟล์ที่เลือก (ก่อนกรอง) — null = ไม่ได้เลือกไฟล์เดี่ยว */
+  selectedFileTotal: number | null;
+  activeCount: number;
+  onReset: () => void;
+}) {
+  const fileById = useMemo(
+    () => new Map(files.map((f) => [f.id, f] as const)),
+    [files],
+  );
+
+  return (
+    <>
+      {/* จำนวนผลลัพธ์อยู่ต้นคอลัมน์ content (ที่เห็นผลของตัวกรอง) ไม่ใช่ในแผง */}
+      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5 px-1 pb-2.5">
+        <p className="text-sm text-ink-soft">
+          พบ{" "}
+          <span className="font-semibold tabular-nums text-ink">
+            {items.length}
+          </span>{" "}
+          รายการ
+        </p>
+        <div className="flex items-center gap-2.5">
+          {selectedFile && <OpenFileButton file={selectedFile} />}
+          {activeCount > 0 && (
+            <button
+              type="button"
+              onClick={onReset}
+              className="focus-ring rounded-md px-1.5 text-sm text-primary transition hover:underline"
+            >
+              ล้างตัวกรอง
+            </button>
+          )}
+        </div>
+      </div>
+
+      {items.length > 0 ? (
+        <div className="overflow-hidden rounded-xl border border-line bg-white">
+          <ul className="divide-y divide-line/70">
+            {items.map((item) => {
+              // items สร้างจาก files ชุดเดียวกันตอน build ที่ server — หาได้เสมอ
+              const file = fileById.get(item.dto.fileId)!;
+              // ปลายทาง + คำบอกตำแหน่งต่อชนิดรายการ (title tooltip + aria-label
+              // ของปุ่ม View — แถวเดียวกันหลายสิบปุ่มชื่อเหมือนกัน ต้องรู้จักแยก)
+              const isBm = item.kind === "bm";
+              const where = isBm
+                ? `ไปที่หน้า ${item.pageIndex + 1}`
+                : `ดู${annotationTypeLabel(item.dto)}ที่หน้า ${item.pageIndex + 1}`;
+              const href = isBm
+                ? `/note/annotate/${item.dto.fileId}?page=${item.pageIndex + 1}`
+                : `/note/annotate/${item.dto.fileId}?ann=${item.dto.id}`;
+              return (
+                // แถวเป็น passive surface — จุดคลิกเดียวคือปุ่ม "View" ท้ายแถว
+                // (คำขอผู้ใช้ 2026-09-24: ไม่ต้องกดทั้งแถว) จึงไม่มี hover bg ที่แถว
+                <li
+                  key={item.dto.id}
+                  className="flex items-start gap-2.5 px-3 py-3 sm:px-4"
+                >
+                  {isBm ? (
+                    <>
+                      <Bookmark
+                        aria-hidden
+                        className="mt-1 h-4 w-4 shrink-0 text-warning-ink"
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span className="block whitespace-pre-wrap break-words text-sm font-medium leading-snug text-ink">
+                          {item.dto.title}
+                        </span>
+                        <RowMeta
+                          file={file}
+                          pageIndex={item.pageIndex}
+                          middle={
+                            item.parentTitle
+                              ? `ใน: ${item.parentTitle}`
+                              : undefined
+                          }
+                          user={item.dto.userName || "ไม่ทราบชื่อ"}
+                          date={formatThaiDate(item.dto.createdAt, true)}
+                        />
+                        {item.dto.note && <RowNote text={item.dto.note} />}
+                      </span>
+                    </>
+                  ) : (
+                    <>
+                      <AnnotationTypeIcon
+                        type={item.dto.type}
+                        data={item.dto.data}
+                        className="mt-1 h-4 w-4 shrink-0 text-ink-soft"
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span className="block whitespace-pre-wrap break-words text-sm leading-snug text-ink">
+                          {annotationPreviewText(item.dto)}
+                          {item.dto.type === "COMMENT" && item.dto.resolved && (
+                            <span className="ml-1.5 whitespace-nowrap rounded border border-success/40 bg-success/10 px-1.5 py-0.5 text-xs font-medium text-success-ink">
+                              จัดการแล้ว
+                            </span>
+                          )}
+                        </span>
+                        <RowMeta
+                          file={file}
+                          pageIndex={item.pageIndex}
+                          middle={annotationTypeLabel(item.dto)}
+                          user={item.dto.userName}
+                          date={formatThaiDate(item.dto.createdAt, true)}
+                        />
+                        {annotationNote(item.dto) && (
+                          <RowNote text={annotationNote(item.dto)} />
+                        )}
+                      </span>
+                    </>
+                  )}
+                  <Link
+                    href={href}
+                    title={`${where} ใน "${file.title}"`}
+                    aria-label={`View — ${where} ใน "${file.title}"`}
+                    className="focus-ring mt-0.5 inline-flex h-8 shrink-0 items-center rounded-md border border-line bg-white px-3 text-sm font-medium text-ink transition hover:-translate-y-px hover:border-primary hover:text-primary"
+                  >
+                    View
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ) : totalCount === 0 ? (
+        <div className="rounded-xl border border-dashed border-line bg-white/70 p-10 text-center">
+          <ClipboardList aria-hidden className="mx-auto h-8 w-8 text-ink-faint" />
+          <p className="mt-3 text-sm font-medium text-ink-soft">
+            ยังไม่มี Annotation หรือ Bookmark ในกลุ่มนี้
+          </p>
+          <p className="mt-1 text-xs text-ink-soft">
+            เปิดเอกสารในกลุ่มเพื่อมาร์กข้อความ วาดเส้น ใส่คอมเมนต์ หรือคั่นหน้า
+          </p>
+        </div>
+      ) : selectedFile && selectedFileTotal === 0 ? (
+        <div className="rounded-xl border border-dashed border-line bg-white/70 p-10 text-center">
+          <ClipboardList aria-hidden className="mx-auto h-8 w-8 text-ink-faint" />
+          <p className="mt-3 text-sm font-medium text-ink-soft">
+            ไฟล์นี้ยังไม่มี Annotation หรือ Bookmark
+          </p>
+          <div className="mt-4">
+            <OpenFileButton file={selectedFile} />
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-xl border border-dashed border-line bg-white/70 p-10 text-center">
+          <ListFilter aria-hidden className="mx-auto h-8 w-8 text-ink-faint" />
+          <p className="mt-3 text-sm font-medium text-ink-soft">
+            ไม่มีรายการตรงตามตัวกรอง
+          </p>
+          <button
+            type="button"
+            onClick={onReset}
+            className="focus-ring mt-4 inline-flex rounded-md border border-line bg-white px-4 py-2 text-sm font-medium text-ink transition hover:-translate-y-px hover:border-ink-faint"
+          >
+            ล้างตัวกรองทั้งหมด
+          </button>
+        </div>
+      )}
+    </>
+  );
+}

components/pdf/AnnotationSelectionLayer.tsx

@@ -6,29 +6,83 @@ import {
   useState,
   type PointerEvent as ReactPointerEvent,
 } from "react";
-import { AlignCenter, AlignLeft, AlignRight, BookmarkPlus, Pencil, Trash2 } from "lucide-react";
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  BookmarkPlus,
+  Pencil,
+  RotateCw,
+  Trash2,
+} from "lucide-react";
 
 import type {
   AnnotationData,
   AnnotationDTO,
+  CommentData,
   HighlightData,
   HighlightStyle,
   TextboxData,
+  TextboxSegment,
 } from "@/db/schema";
 import {
+  COMMENT_PIN_COARSE_SIZE_PX,
+  COMMENT_PIN_SIZE_PX,
   TEXTBOX_MAX_WIDTH_PCT,
   annotationBBox,
+  clampStampIntoPage,
+  commentPinBoxPct,
+  commentPinBoxPx,
+  rotatePoint,
   scaleAnnotationData,
+  stampRect,
   translateAnnotationData,
 } from "@/utils/geometry";
-import { clamp, getPointerPercent, type Point, type Rect, type Size } from "@/utils/coordinates";
-import { STAMP_COLOR } from "@/utils/annotation-display";
+import {
+  clamp,
+  getPointerPercent,
+  type Point,
+  type Rect,
+  type Size,
+} from "@/utils/coordinates";
+import {
+  annotationTypeLabel,
+  measureStampText,
+  STAMP_COLOR,
+} from "@/utils/annotation-display";
 import { ColorSwatches, HIGHLIGHT_STYLE_BTNS, NumberCombo, PanelRow } from "./ToolControls";
 
+/** Patch ของตัวควบคุมเล็กในแผง selection / editor ข้อความ — ส่งเฉพาะ field ที่แตะ
+ *  ให้ viewer ผสานเข้ากับ data ล่าสุด**ตอนถึงคิว update** ไม่ใช่ snapshot ของ render
+ *  นี้ — คอมมิตแบบ full object จาก base เก่าจะทับค่าที่เพิ่งเปลี่ยน (จอสัมผัส:
+ *  blur-commit ข้อความใน editor แล้วแตะสี/ขนาดในแผงต่อทันทีก่อน React render
+ *  optimistic row — code review 2026-09-28 รอบสอง) */
+export type AnnotationPatch =
+  /** สี — ชื่อ field ตามชนิด: HIGHLIGHT/STAMP = `color`, DRAW/SHAPE = `strokeColor` */
+  | { kind: "color"; color: string }
+  /** ความหนา — DRAW สเกล `widths` ต่อจุดตามอัตราส่วนตอนผสาน (เหมือนเดิม) */
+  | { kind: "strokeWidth"; strokeWidth: number }
+  | { kind: "highlightStyle"; style: HighlightStyle }
+  /** ความทึบของ HIGHLIGHT — 100 = ถอด field `opacity` ทิ้งเหมือนตอนสร้างใหม่ */
+  | { kind: "highlightOpacity"; opacityPct: number }
+  | { kind: "stampScale"; scale: number }
+  /** STAMP — มุมเอียง (องศา −180..180 หมุนรอบกลางกรอบ; 0 = ถอด field เหมือนแถวเดิม) */
+  | { kind: "stampRotation"; rotation: number }
+  | {
+      kind: "textbox";
+      fields: Partial<
+        Pick<TextboxData, "color" | "fontSize" | "opacity" | "bold" | "align">
+      >;
+    }
+  /** StampEditor — แก้คำตรายาง */
+  | { kind: "label"; label: string }
+  /** TextboxEditor — แก้ข้อความกล่องข้อความ (segments null = เคลียร์ตัวหนาทั้งก้อน) */
+  | { kind: "textboxText"; text: string; segments: TextboxSegment[] | null };
+
 /** UX audit 2026-09-16: focus ring คีย์บอร์ด — ค่าเดียวกับ FOCUS_RING_CLS ของ
  *  PDFViewer/AnnotationSidebar (ประกาศแยกที่นี่กัน circular import) */
 const FOCUS_RING_CLS =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1";
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
 
 // กรอบ selection + handles ของ annotation ที่เลือก (PLAN-FEAT.md §3 F1)
 // - container เป็น z-4 เหมือน comment pins และ pointer-events: none **เสมอ**
@@ -39,20 +93,29 @@ const FOCUS_RING_CLS =
 
 const HANDLE_PX = 10; // ขนาดมุมจับ (scale)
 const STRIP_PX = 8; // ความหนาขอบกรอบ (translate)
+const ROT_HANDLE_PX = 18; // จุดจับหมุนตรายาง (STAMP) — วงกลมเหนือกึ่งกลางขอบบน
+const ROT_HANDLE_GAP_PX = 20; // ระยะแนวฉากจากขอบบนกรอบถึงจุดจับหมุน
 const MIN_BOX_PCT = 0.5; // bbox เล็กสุด (% ของหน้า) กันกรอบหาย
 const EPS = 1e-6;
 
+// COMMENT: ขนาด pin px + bbox px/% ของ pin ย้ายไป utils/geometry.ts แล้ว (ใช้ร่วมกับ
+// goToAnnotation ของ PDFViewer — single source ตาม responsive audit 2026-09-24)
+
 type DragState = {
   // wleft/wright = TEXTBOX กว้างคงที่: ลากขอบซ้าย/ขวาปรับความกว้าง (ฟอนต์คงขนาด)
-  mode: "move" | "scale" | "wleft" | "wright";
+  mode: "move" | "scale" | "wleft" | "wright" | "rotate";
   /** ตำแหน่ง pointer ตอนเริ่มลาก (% ของหน้า) */
   startPct: Point;
   /** data ก่อนเริ่มลาก — ต้นทางของการคำนวณทุก move (ไม่สะสมจาก preview) */
   origData: AnnotationData;
-  /** bbox ก่อนเริ่มลาก (% ของหน้า) */
+  /** bbox ก่อนเริ่มลาก (% ของหน้า) — STAMP เอียง = AABB ของกรอบหมุนแล้ว (ครอบกรอบจริง) */
   origBoxPct: Rect;
-  /** mode "scale" เท่านั้น — มุมตรงข้ามของ handle (% ของหน้า) */
+  /** mode "scale" เท่านั้น — มุมตรงข้ามของ handle (% ของหน้า ตำแหน่งจริงบนจอ) */
   anchorPct: Point;
+  /** STAMP เอียงเท่านั้น — มุมกรอบตอนเริ่มลาก (องศา): คำนวณ k ของ scale ต้อง
+   *  แปลง pointer เข้า frame ของกรอบ (ย้อนหมุนรอบ center) ก่อน ไม่งั้นลากมุมของ
+   *  กรอบเอียงแล้วสัดส่วนแกน x/y ผิดจากสายตา */
+  rot?: number;
 };
 
 /** จำกัดตัวคูณ scale แกนเดียว ให้กรอบผลลัพธ์ยังอยู่ใน 0–100 และไม่เล็กกว่าขั้นต่ำ */
@@ -89,6 +152,7 @@ export default function AnnotationSelectionLayer({
   onDelete,
   onBookmark,
   onStartEdit,
+  onPatch,
 }: {
   annotation: AnnotationDTO;
   /** ขนาด px ของหน้า (จาก width/height ที่คำนวณจาก scale) */
@@ -110,14 +174,87 @@ export default function AnnotationSelectionLayer({
   /** M1: ปุ่ม "แก้ไขข้อความ" ของ TEXTBOX — เข้าโหมดแก้ไขโดยไม่ต้อง double-click
    *  (จอสัมผัสไม่มี dblclick ที่เชื่อถือได้: iOS double-tap = zoom หน้า) */
   onStartEdit?: (id: string) => void;
+  /** ตัวควบคุมเล็กของแผง (สี/ความหนา/ขนาด/รูปแบบ/ทึบ/patch กล่องข้อความ) commit เป็น
+   *  patch — viewer ผสานกับ data ล่าสุดตอนถึงคิว update กัน stale base ทับค่าที่เพิ่ง
+   *  เปลี่ยน (ดู AnnotationPatch) */
+  onPatch: (id: string, patch: AnnotationPatch) => void;
 }) {
   const rootRef = useRef<HTMLDivElement>(null);
   const dragRef = useRef<DragState | null>(null);
   const movedRef = useRef(false);
   const latestRef = useRef<AnnotationData | null>(null);
+  // rAF ของ preview ระหว่างลาก — ยิง onPreview ≤1 ครั้ง/เฟรม (pattern เดียวกับ FIX-8
+  // ของ InkLayer): pointermove ยิงถี่กว่าเฟรมได้ ทุก event ยังคำนวณ+เก็บค่าล่าสุดใน
+  // latestRef เสมอ (ค่าตอน commit ต้องล่าสุดสุด) เฉพาะการ render ที่จัดคิวตามเฟรม
+  const previewRafRef = useRef<number | null>(null);
 
-  const boxPx = annotationBBox(annotation, size);
-  const boxPct = annotationBBox(annotation, { width: 100, height: 100 });
+  /** ยกเลิก rAF preview ที่ค้าง — เรียกก่อนเคลียร์ preview ทุกทางออกของ drag (ไม่งั้น
+   *  callback ยิงตามหลัง ดัน preview เก่ากลับมาตอน dragRef เคลียร์ไปแล้ว) */
+  function cancelPreviewRaf() {
+    if (previewRafRef.current === null) return;
+    cancelAnimationFrame(previewRafRef.current);
+    previewRafRef.current = null;
+  }
+
+  // เลิกลากกลางคันแล้ว unmount — ยกเลิก rAF ที่ค้างอยู่ด้วย (เหมือน InkLayer)
+  useEffect(
+    () => () => {
+      cancelPreviewRaf();
+    },
+    [],
+  );
+
+  // อุปกรณ์จอสัมผัส (pointer หลัก coarse) — คำนวณครั้งเดียวตอน mount เหมือน
+  // coarseTouch ของ PDFViewer: .coarse-36 ขยายปุ่ม pin เป็น 36px บนพวกนี้
+  const [coarseTouch] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia("(pointer: coarse)").matches,
+  );
+
+  // COMMENT ใช้กล่องครอบ pin จริง (px คงที่ตามอุปกรณ์) — ชนิดอื่นคือ bbox ตามขนาดหน้า
+  // boxPct ก็ใช้มาตราฐานเดียวกัน (% จาก px จริง): move-clamp กับปุ่ม bookmark ของ pin
+  // ต้องเห็น pin ตามที่ render ไม่ใช่ COMMENT_PIN_BOX_PCT ประมาณ (audit 2026-09-24)
+  const isCommentPin = annotation.type === "COMMENT";
+  const pinPx = coarseTouch ? COMMENT_PIN_COARSE_SIZE_PX : COMMENT_PIN_SIZE_PX;
+  // bbox ของ STAMP ส่ง measureStampText ให้ความสูงตรงกับที่ StampItem render จริง
+  // (ประมาณแล้วขอบล่างกรอบเกินตรายาง — bug 2026-09-28)
+  const boxPx = isCommentPin
+    ? commentPinBoxPx(annotation.data as CommentData, size, pinPx)
+    : annotationBBox(annotation, size, measureStampText);
+  const boxPct = isCommentPin
+    ? commentPinBoxPct(annotation.data as CommentData, size, pinPx)
+    : annotationBBox(annotation, { width: 100, height: 100 }, measureStampText);
+
+  // STAMP เอียง (rotation ≠ 0) — กรอบ+handles วาดที่ตำแหน่งกรอบ*ก่อนหมุน* แล้วหมุน
+  // ทั้งชุดด้วย CSS transform รอบกลางกรอบ (ตรงกับที่ StampItem render) ส่วน boxPx/
+  // boxPct ด้านบนเป็น AABB ของกรอบหมุนแล้ว ใช้กับ clamp ย้าย/แผงเครื่องมือ/ป้ายชื่อ
+  // stampData narrow ด้วย "label" in ตรงนี้แล้วส่งเข้า stampRect ตรง ๆ — ไม่ as-cast
+  // (cast พังเงียบถ้าเงื่อนไขแวดข้างเปลี่ยน — code review 2026-09-29)
+  const stampData = "label" in annotation.data ? annotation.data : null;
+  const stampRot = stampData?.rotation ?? 0;
+  const isRotStamp = stampRot !== 0;
+  const framePx =
+    stampData && isRotStamp ? stampRect(stampData, size, measureStampText) : boxPx;
+  const framePct =
+    stampData && isRotStamp
+      ? stampRect(stampData, { width: 100, height: 100 }, measureStampText)
+      : boxPct;
+  // transform หมุนทั้งชุดกรอบ — origin เป็น**กลางกรอบในพิกัดของ element นั้น ๆ** (CSS
+  // transform-origin วัดจากมุมซ้ายบนของ element เอง ไม่ใช่ของ page — จุดกลางกรอบ
+  // ในพิกัด page ลบด้วย left/top ของ element จึงได้ origin ที่ทุก div หมุนไปตรงจุด
+  // เดียวกัน ตามตัวตรายาง — bug "กรอบไม่ตรงตัวเมื่อเอียง" 2026-09-28)
+  const rotC = {
+    x: framePx.x + framePx.width / 2,
+    y: framePx.y + framePx.height / 2,
+  };
+  const rotOn = (elLeft: number, elTop: number) =>
+    isRotStamp
+      ? {
+          transform: `rotate(${stampRot}deg)`,
+          transformOrigin: `${rotC.x - elLeft}px ${rotC.y - elTop}px`,
+        }
+      : undefined;
 
   // FIX-9: เอา non-null ! ออก — handler ยิงได้แค่ตอน DOM mount แล้ว
   // ref จึงไม่ควรเป็น null (คืน 0,0 เผื่อไว้เฉย ๆ ให้ type ชัด)
@@ -129,7 +266,7 @@ export default function AnnotationSelectionLayer({
 
   function beginDrag(
     e: ReactPointerEvent<HTMLElement>,
-    mode: "move" | "scale" | "wleft" | "wright",
+    mode: "move" | "scale" | "wleft" | "wright" | "rotate",
     anchorPct: Point,
   ) {
     if (!editable || e.button !== 0) return;
@@ -142,6 +279,7 @@ export default function AnnotationSelectionLayer({
       origData: annotation.data,
       origBoxPct: boxPct,
       anchorPct,
+      ...(stampRot !== 0 ? { rot: stampRot } : null),
     };
     movedRef.current = false;
     latestRef.current = null;
@@ -153,7 +291,30 @@ export default function AnnotationSelectionLayer({
     e.stopPropagation();
     const cur = pointerPct(e);
     let next: AnnotationData;
-    if (st.mode === "move") {
+    if (st.mode === "rotate") {
+      // STAMP — ลากหมุน: มุมใหม่ = มุมเดิม + มุมที่ pointer กวาดรอบ**กลางกรอบ**
+      // (atan2 ในพิกัดจอ y ลง = ทิศเดียวกับ CSS rotate) — snap ดูดเข้าทวีคูณ 15°
+      // เมื่อใกล้ ≤4° ให้ตั้ง 0/±45/±90 เร็ว แล้ว wrap เข้า (−180, 180] เก็บ 1 ทศนิยม
+      // (0° ถอด field เหมือน patch ของแผง — anchorPct = กลางกรอบจาก AABB)
+      const ctr = st.anchorPct;
+      const a0 = Math.atan2(st.startPct.y - ctr.y, st.startPct.x - ctr.x);
+      const a1 = Math.atan2(cur.y - ctr.y, cur.x - ctr.x);
+      let deg = (st.rot ?? 0) + ((a1 - a0) * 180) / Math.PI;
+      const snap = Math.round(deg / 15) * 15;
+      if (Math.abs(deg - snap) <= 4) deg = snap;
+      deg = Number(((((deg + 180) % 360) + 360) % 360 - 180).toFixed(1));
+      if ("label" in st.origData) {
+        const { rotation: _prev, ...rest } = st.origData;
+        // หมุนจนกรอบยื่นเกินขอบหน้า = เลื่อนกลับเข้าหน้าทันทีระหว่างลาก (เดียวกับ
+        // patch ของแผง — validator ตรวจ AABB ไม่ติดลบ, code review 2026-09-28)
+        next =
+          deg === 0
+            ? rest
+            : { ...rest, rotation: deg, position: clampStampIntoPage({ ...rest, rotation: deg }) };
+      } else {
+        next = st.origData;
+      }
+    } else if (st.mode === "move") {
       // clamp offset ให้ bbox ทั้งกลุ่มยังอยู่ในหน้า (พิกัด % ติดลบโดน action ปฏิเสธ)
       const dx = clamp(
         cur.x - st.startPct.x,
@@ -197,12 +358,29 @@ export default function AnnotationSelectionLayer({
         next = { ...d, width: w, position: { ...d.position, x: left } };
       }
     } else if ("scale" in st.origData) {
-      // STAMP — สัดส่วนกว้าง:สูงตายตัว (สูง = STAMP_HEIGHT_RATIO × กว้าง) แยกสเกล
-      // สองแกนไม่ได้ จึงใช้ตัวคูณ uniform เดียว: เฉลี่ยอัตราส่วนของ pointer สองแกน
+      // STAMP — ความกว้างมีมาจาก scale เพียงตัวเดียว (สูงตามจำนวนบรรทัดของ label,
+      // stampLayout) จึงขยายด้วยตัวคูณ uniform เดียว: เฉลี่ยอัตราส่วนของ pointer สองแกน
       // แล้ว clamp รายแกนซ้อนกัน (x แล้ว y) ให้กรอบผลลัพธ์ยังอยู่ในหน้าทั้งสองแกนพร้อมกัน
+      // · STAMP เอียง: อัตราส่วนต้องวัดในแกนของ*กรอบ* — ย้อนหมุน pointer รอบกลางกรอบ
+      // ก่อน (แกน x/y ของสูตรคือแกนกรอบ ไม่ใช่แกนจอ) ส่วน clamp กับ scaleAnnotationData
+      // ใช้พิกัดจอ: มุมกรอบหมุนทั้งชุดโดย scale-uniform รอบ anchor จริง ๆ (AABB ของ
+      // กรอบหมุน scale ตาม k รอบ anchor เช่นกัน) clamp ด้วยขอบ AABB จึงยังถูกต้อง
+      const rot = st.rot ?? 0;
+      let curL = cur;
+      let startL = st.startPct;
+      let anchorL = st.anchorPct;
+      if (rot) {
+        const ctr = {
+          x: st.origBoxPct.x + st.origBoxPct.width / 2,
+          y: st.origBoxPct.y + st.origBoxPct.height / 2,
+        };
+        curL = rotatePoint(cur, ctr, -rot);
+        startL = rotatePoint(st.startPct, ctr, -rot);
+        anchorL = rotatePoint(st.anchorPct, ctr, -rot);
+      }
       const rawK =
-        ((cur.x - st.anchorPct.x) / (st.startPct.x - st.anchorPct.x || EPS) +
-          (cur.y - st.anchorPct.y) / (st.startPct.y - st.anchorPct.y || EPS)) /
+        ((curL.x - anchorL.x) / (startL.x - anchorL.x || EPS) +
+          (curL.y - anchorL.y) / (startL.y - anchorL.y || EPS)) /
         2;
       const k = clampAxisScale(
         clampAxisScale(
@@ -237,7 +415,14 @@ export default function AnnotationSelectionLayer({
     }
     movedRef.current = true;
     latestRef.current = next;
-    onPreview(next);
+    // render preview ครั้งเดียวต่อ animation frame — callback อ่าน latestRef ตอนเฟรม
+    // ยิงจริง ๆ เพื่อให้ได้ค่าใหม่สุดเสมอแม้ event ถี่ (แก้ลากไม่ smooth 2026-09-29)
+    if (previewRafRef.current === null) {
+      previewRafRef.current = requestAnimationFrame(() => {
+        previewRafRef.current = null;
+        if (dragRef.current && latestRef.current) onPreview(latestRef.current);
+      });
+    }
   }
 
   function endDrag(e: ReactPointerEvent<HTMLElement>) {
@@ -245,6 +430,7 @@ export default function AnnotationSelectionLayer({
     if (!st) return;
     e.stopPropagation();
     dragRef.current = null;
+    cancelPreviewRaf();
     onPreview(null);
     if (movedRef.current && latestRef.current) onCommit(annotation.id, latestRef.current);
     movedRef.current = false;
@@ -254,59 +440,40 @@ export default function AnnotationSelectionLayer({
   function cancelDrag() {
     if (!dragRef.current) return;
     dragRef.current = null;
+    cancelPreviewRaf();
     movedRef.current = false;
     latestRef.current = null;
     onPreview(null);
   }
 
-  /** ปุ่มสี/ความหนาบนกรอบ — ใช้ onCommit เดียวกับการลาก */
+  /** ปุ่มสี/ความหนาบนกรอบ — ส่ง patch ให้ viewer ผสานกับ data ล่าสุด (ชื่อ field ตาม
+   *  ชนิด: HIGHLIGHT/STAMP = color, DRAW/SHAPE = strokeColor — ตัดสินตอนผสาน) */
   function commitColor(color: string) {
-    const d = annotation.data;
-    if ("rects" in d) onCommit(annotation.id, { ...d, color });
-    else if ("paths" in d || "shape" in d) onCommit(annotation.id, { ...d, strokeColor: color });
-    // STAMP ("label") — แก้สีหลังสร้างได้ (TEXTBOX แก้ผ่านการพิมพ์ inline แทน)
-    else if ("label" in d) onCommit(annotation.id, { ...d, color });
+    onPatch(annotation.id, { kind: "color", color });
   }
 
   function commitStrokeWidth(w: number) {
-    const d = annotation.data;
-    if ("paths" in d) {
-      // F7: เส้นปากกามี widths ต่อจุด — scale ตามอัตราส่วนพร้อม strokeWidth หลัก (PLAN-FEAT.md §5)
-      onCommit(annotation.id, {
-        ...d,
-        strokeWidth: w,
-        ...(d.widths
-          ? { widths: d.widths.map((pw) => (pw / d.strokeWidth) * w) }
-          : {}),
-      });
-    } else if ("shape" in d) {
-      onCommit(annotation.id, { ...d, strokeWidth: w });
-    }
+    onPatch(annotation.id, { kind: "strokeWidth", strokeWidth: w });
   }
 
   /** HIGHLIGHT — เปลี่ยนรูปแบบมาร์กหลังสร้าง (ไฮไลต์/เส้นใต้/ขีดฆ่า/ขยุกขยิก) */
   function commitHighlightStyle(style: HighlightStyle) {
-    const d = annotation.data;
-    if (!("rects" in d)) return;
-    onCommit(annotation.id, { ...d, style });
+    onPatch(annotation.id, { kind: "highlightStyle", style });
   }
 
-  /** HIGHLIGHT — ปรับความทึบหลังสร้าง (100% = ทึบเต็ม = ไม่เก็บ field เหมือนตอนสร้างใหม่) */
+  /** HIGHLIGHT — ปรับความทึบหลังสร้าง (100% = ทึบเต็ม = ถอด field opacity ตอนผสาน) */
   function commitHighlightOpacity(opacityPct: number) {
-    const d = annotation.data;
-    if (!("rects" in d)) return;
-    const { opacity: _prev, ...rest } = d;
-    onCommit(annotation.id, {
-      ...rest,
-      ...(opacityPct < 100 ? { opacity: opacityPct / 100 } : {}),
-    });
+    onPatch(annotation.id, { kind: "highlightOpacity", opacityPct });
   }
 
   /** STAMP — ปรับขนาดตรายางหลังสร้าง */
   function commitStampScale(scale: number) {
-    const d = annotation.data;
-    if (!("label" in d)) return;
-    onCommit(annotation.id, { ...d, scale });
+    onPatch(annotation.id, { kind: "stampScale", scale });
+  }
+
+  /** STAMP — ปรับมุมเอียงหลังสร้าง (องศา −180..180 หมุนรอบกลางกรอบ) */
+  function commitStampRotation(rotation: number) {
+    onPatch(annotation.id, { kind: "stampRotation", rotation });
   }
 
   /** TEXTBOX — แก้ค่าทั้งกล่องหลังสร้าง (สี/ขนาด/ทึบ/หนา/จัดแนว) เหมือน dropdown ของ tool */
@@ -314,7 +481,7 @@ export default function AnnotationSelectionLayer({
     patch: Partial<Pick<TextboxData, "color" | "fontSize" | "opacity" | "bold" | "align">>,
   ) {
     if (!textboxData) return;
-    onCommit(annotation.id, { ...textboxData, ...patch });
+    onPatch(annotation.id, { kind: "textbox", fields: patch });
   }
 
   // ตัวควบคุมในแผงตรวจตามชนิดด้วยการเช็ค field ใน data ตรง ๆ (rects = HIGHLIGHT,
@@ -325,8 +492,10 @@ export default function AnnotationSelectionLayer({
   const highlightData: HighlightData | null =
     "rects" in annotation.data ? annotation.data : null;
   const strokeData =
-    "paths" in annotation.data || "shape" in annotation.data ? annotation.data : null;
-  const stampData = "label" in annotation.data ? annotation.data : null;
+    "paths" in annotation.data || "shape" in annotation.data
+      ? annotation.data
+      : null;
+  // (stampData ย้ายไปขึ้นบน — ใช้ร่วมกับ stampRot/framePx ของตรายางเอียง)
   const textboxData: TextboxData | null =
     "fontSize" in annotation.data ? annotation.data : null;
   // TEXTBOX กว้างคงที่ (มี width) — ขอบซ้าย/ขวาเป็น handle ปรับความกว้างแทนการย้าย
@@ -337,36 +506,48 @@ export default function AnnotationSelectionLayer({
   // กรณีหลังหุบเป็น w-fit ไม่คั่นเส้น และปุ่มติดกันแทน justify-between
   const hasStyleControls = !!(highlightData || strokeData || stampData || textboxData);
 
-  // มุมทั้ง 4 — ตำแหน่งวางเป็น px, anchor มุมตรงข้ามเป็น % ตรง ๆ จาก boxPct
-  // (พิกัด % คำนวณผ่าน utils/coordinates เท่านั้น — invariant #2)
+  // มุมทั้ง 4 — ตำแหน่งวางเป็น px ของกรอบ*ก่อนหมุน* (STAMP เอียง: div ทั้งชุดถูกหมุน
+  // ทีหลังผ่าน rotStyle), anchor มุมตรงข้ามเป็น % **ตำแหน่งจริงบนจอ** — STAMP เอียง
+  // ต้องหมุนมุมกลับออกมาก่อน (พิกัด % คำนวณผ่าน utils/coordinates เท่านั้น — invariant #2)
+  const frameCtrPct = isRotStamp
+    ? {
+        x: framePct.x + framePct.width / 2,
+        y: framePct.y + framePct.height / 2,
+      }
+    : null;
+  const anchorOnScreen = (p: Point): Point =>
+    frameCtrPct ? rotatePoint(p, frameCtrPct, stampRot) : p;
   const corners: { key: string; x: number; y: number; cursor: string; anchor: Point }[] = [
     {
       key: "nw",
-      x: boxPx.x,
-      y: boxPx.y,
+      x: framePx.x,
+      y: framePx.y,
       cursor: "nwse-resize",
-      anchor: { x: boxPct.x + boxPct.width, y: boxPct.y + boxPct.height },
+      anchor: anchorOnScreen({
+        x: framePct.x + framePct.width,
+        y: framePct.y + framePct.height,
+      }),
     },
     {
       key: "ne",
-      x: boxPx.x + boxPx.width,
-      y: boxPx.y,
+      x: framePx.x + framePx.width,
+      y: framePx.y,
       cursor: "nesw-resize",
-      anchor: { x: boxPct.x, y: boxPct.y + boxPct.height },
+      anchor: anchorOnScreen({ x: framePct.x, y: framePct.y + framePct.height }),
     },
     {
       key: "sw",
-      x: boxPx.x,
-      y: boxPx.y + boxPx.height,
+      x: framePx.x,
+      y: framePx.y + framePx.height,
       cursor: "nesw-resize",
-      anchor: { x: boxPct.x + boxPct.width, y: boxPct.y },
+      anchor: anchorOnScreen({ x: framePct.x + framePct.width, y: framePct.y }),
     },
     {
       key: "se",
-      x: boxPx.x + boxPx.width,
-      y: boxPx.y + boxPx.height,
+      x: framePx.x + framePx.width,
+      y: framePx.y + framePx.height,
       cursor: "nwse-resize",
-      anchor: { x: boxPct.x, y: boxPct.y },
+      anchor: anchorOnScreen({ x: framePct.x, y: framePct.y }),
     },
   ];
 
@@ -396,14 +577,16 @@ export default function AnnotationSelectionLayer({
       style={{ pointerEvents: "none" }}
       onClick={(e) => e.stopPropagation()} // คลิกบน handle/toolbar ไม่ให้ bubble ไป deselect ที่ page
     >
-      {/* กรอบ bbox — ตัวกรอบเอง pointer-events none ผ่านไป textLayer ได้ */}
+      {/* กรอบ bbox — ตัวกรอบเอง pointer-events none ผ่านไป textLayer ได้ · STAMP เอียง
+          วาดที่กรอบก่อนหมุนแล้วหมุนทั้งชุด (กรอบ+handles) รอบกลางกรอบเหมือน StampItem */}
       <div
         className="absolute border-2 border-dashed border-primary"
         style={{
-          left: boxPx.x,
-          top: boxPx.y,
-          width: boxPx.width,
-          height: boxPx.height,
+          left: framePx.x,
+          top: framePx.y,
+          width: framePx.width,
+          height: framePx.height,
+          ...rotOn(framePx.x, framePx.y),
         }}
       />
 
@@ -416,11 +599,12 @@ export default function AnnotationSelectionLayer({
           <div
             className="absolute cursor-move touch-none sel-strip"
             style={{
-              left: boxPx.x - STRIP_PX / 2,
-              top: boxPx.y - STRIP_PX / 2,
-              width: boxPx.width + STRIP_PX,
+              left: framePx.x - STRIP_PX / 2,
+              top: framePx.y - STRIP_PX / 2,
+              width: framePx.width + STRIP_PX,
               height: STRIP_PX,
               pointerEvents: "auto",
+              ...rotOn(framePx.x - STRIP_PX / 2, framePx.y - STRIP_PX / 2),
             }}
             onPointerDown={(e) => beginDrag(e, "move", { x: 0, y: 0 })}
             onPointerMove={moveDrag}
@@ -430,11 +614,12 @@ export default function AnnotationSelectionLayer({
           <div
             className="absolute cursor-move touch-none sel-strip"
             style={{
-              left: boxPx.x - STRIP_PX / 2,
-              top: boxPx.y + boxPx.height - STRIP_PX / 2,
-              width: boxPx.width + STRIP_PX,
+              left: framePx.x - STRIP_PX / 2,
+              top: framePx.y + framePx.height - STRIP_PX / 2,
+              width: framePx.width + STRIP_PX,
               height: STRIP_PX,
               pointerEvents: "auto",
+              ...rotOn(framePx.x - STRIP_PX / 2, framePx.y + framePx.height - STRIP_PX / 2),
             }}
             onPointerDown={(e) => beginDrag(e, "move", { x: 0, y: 0 })}
             onPointerMove={moveDrag}
@@ -444,11 +629,12 @@ export default function AnnotationSelectionLayer({
           <div
             className={`absolute touch-none sel-strip ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
             style={{
-              left: boxPx.x - STRIP_PX / 2,
-              top: boxPx.y,
+              left: framePx.x - STRIP_PX / 2,
+              top: framePx.y,
               width: STRIP_PX,
-              height: boxPx.height,
+              height: framePx.height,
               pointerEvents: "auto",
+              ...rotOn(framePx.x - STRIP_PX / 2, framePx.y),
             }}
             onPointerDown={(e) =>
               beginDrag(e, isFixedTextbox ? "wleft" : "move", { x: 0, y: 0 })
@@ -460,11 +646,12 @@ export default function AnnotationSelectionLayer({
           <div
             className={`absolute touch-none sel-strip ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
             style={{
-              left: boxPx.x + boxPx.width - STRIP_PX / 2,
-              top: boxPx.y,
+              left: framePx.x + framePx.width - STRIP_PX / 2,
+              top: framePx.y,
               width: STRIP_PX,
-              height: boxPx.height,
+              height: framePx.height,
               pointerEvents: "auto",
+              ...rotOn(framePx.x + framePx.width - STRIP_PX / 2, framePx.y),
             }}
             onPointerDown={(e) =>
               beginDrag(e, isFixedTextbox ? "wright" : "move", { x: 0, y: 0 })
@@ -475,8 +662,10 @@ export default function AnnotationSelectionLayer({
           />
 
           {/* มุมทั้ง 4 — ลาก = scale รอบ anchor มุมตรงข้าม (TEXTBOX กว้างคงที่ไม่มีมุม —
-              ปรับความกว้างที่ขอบซ้าย/ขวาแทน ส่วนสูงตามจำนวนบรรทัดอัตโนมัติ) */}
-          {!isFixedTextbox && corners.map((c) => (
+              ปรับความกว้างที่ขอบซ้าย/ขวาแทน ส่วนสูงตามจำนวนบรรทัดอัตโนมัติ; COMMENT ไม่
+              มีมุมเช่นกัน — pin ไม่มี field ขนาด scale จึงไร้ความหมาย และ anchor จาก boxPct
+              (% รอบจุด) กับ handle บนกล่อง pin คนละกล่องทำให้ลากแล้วเหลื่อมจากนิ้ว) */}
+          {!isFixedTextbox && !isCommentPin && corners.map((c) => (
             <div
               key={c.key}
               className="absolute touch-none sel-handle rounded-sm border border-primary bg-primary/50"
@@ -487,6 +676,7 @@ export default function AnnotationSelectionLayer({
                 height: HANDLE_PX,
                 cursor: c.cursor,
                 pointerEvents: "auto",
+                ...rotOn(c.x - HANDLE_PX / 2, c.y - HANDLE_PX / 2),
               }}
               onPointerDown={(e) => beginDrag(e, "scale", c.anchor)}
               onPointerMove={moveDrag}
@@ -495,9 +685,59 @@ export default function AnnotationSelectionLayer({
             />
           ))}
 
+          {/* STAMP — จุดจับหมุนเหนือกึ่งกลางขอบบนของกรอบ (หมุนตามกรอบผ่าน rotOn):
+              ลากวนรอบกลางกรอบ = ปรับมุมเอียงแทนการพิมพ์ในแผงอย่างเดียว (คำขอผู้ใช้
+              2026-09-28) — anchor ของ mode "rotate" = กลางกรอบ (% จาก AABB) */}
+          {stampData && (
+            <div
+              className="absolute flex touch-none sel-handle cursor-grab items-center justify-center rounded-full border border-primary bg-white text-primary shadow-lg"
+              style={{
+                left: rotC.x - ROT_HANDLE_PX / 2,
+                top: framePx.y - ROT_HANDLE_GAP_PX - ROT_HANDLE_PX / 2,
+                width: ROT_HANDLE_PX,
+                height: ROT_HANDLE_PX,
+                pointerEvents: "auto",
+                ...rotOn(
+                  rotC.x - ROT_HANDLE_PX / 2,
+                  framePx.y - ROT_HANDLE_GAP_PX - ROT_HANDLE_PX / 2,
+                ),
+              }}
+              title="ลากเพื่อหมุนตรายาง"
+              aria-label="ลากเพื่อหมุนตรายาง"
+              onPointerDown={(e) =>
+                beginDrag(e, "rotate", {
+                  x: boxPct.x + boxPct.width / 2,
+                  y: boxPct.y + boxPct.height / 2,
+                })
+              }
+              onPointerMove={moveDrag}
+              onPointerUp={endDrag}
+              onPointerCancel={cancelDrag}
+            >
+              <RotateCw className="h-3 w-3" />
+            </div>
+          )}
+
         </>
       )}
 
+      {/* Responsive audit 2026-09-24: รายการของผู้อื่นที่เลือกอยู่ — ป้าย "ชนิด · ผู้ทำ" ลอย
+          เหนือกรอบ (จอสัมผัสไม่มี hover tooltip N1 ให้ดูว่าใครทำ เดิมต้องเปิด sidebar
+          อย่างเดียว) — read-only pointer-events:none ตามกติกา container ของ layer นี้
+          ไม่บัง textLayer; ชิดหัวหน้าเกินก็ห้อยใต้กรอบแทน */}
+      {!editable && (
+        <div
+          className="absolute z-10 max-w-[200px] truncate rounded-md border border-line bg-white px-1.5 py-0.5 text-[11px] text-ink-soft shadow-lg"
+          style={{
+            left: Math.max(0, Math.min(boxPx.x, size.width - 204)),
+            top: boxPx.y - 24 < 0 ? boxPx.y + boxPx.height + 4 : boxPx.y - 24,
+            pointerEvents: "none",
+          }}
+        >
+          {annotationTypeLabel(annotation)} · {annotation.userName || "ไม่ทราบชื่อ"}
+        </div>
+      )}
+
       {/* แผงเครื่องมือของรายการที่เลือก — ตัวควบคุมเดียวกับ dropdown ของ tool ผู้สร้าง
           (สี/ความหนา/ขนาด/รูปแบบตามชนิด) + ปุ่มลบท้ายแผง — แสดงทุกชนิดรวม HIGHLIGHT
           (ไม่มี handle ย้าย/ขยาย แต่เปลี่ยนสี/รูปแบบ/ลบได้) — เฉพาะรายการของตัวเอง
@@ -507,7 +747,7 @@ export default function AnnotationSelectionLayer({
       {editable && !disabled && (
         <div
           ref={panelRef}
-          className={`absolute ${hasStyleControls ? "w-60" : "w-fit"} sel-panel rounded-lg border border-slate-200 bg-white p-1.5 shadow-lg`}
+          className={`absolute ${hasStyleControls ? "w-60" : "w-fit"} sel-panel rounded-lg border border-line bg-white p-1.5 shadow-lg`}
           style={{
             left: Math.max(0, Math.min(boxPx.x, size.width - 240 - 4)),
             top: openAbove ? boxPx.y - 6 : boxPx.y + boxPx.height + 4,
@@ -532,7 +772,7 @@ export default function AnnotationSelectionLayer({
                       className={`flex h-6 w-6 items-center justify-center rounded-md transition ${FOCUS_RING_CLS} ${
                         (highlightData.style ?? "highlight") === key
                           ? "bg-primary text-white"
-                          : "text-slate-500 hover:bg-slate-100"
+                          : "text-ink-soft hover:bg-ink/[0.05]"
                       }`}
                       onClick={() => commitHighlightStyle(key)}
                     >
@@ -573,6 +813,20 @@ export default function AnnotationSelectionLayer({
           )}
           {stampData && (
             <>
+              {/* ทางเข้า StampEditor (แก้คำตรายางหลังวาง — เหมือนปุ่มเดียวกันของ TEXTBOX):
+                  แผงโผล่เฉพาะของตัวเองอยู่แล้ว (editable) จึงไม่ต้องเช็ค userId ซ้ำ /
+                  root มี stopPropagation คลิกไม่หลุดไป deselect · sel-panel-btn ขยาย
+                  hit 36px บนจอสัมผัสเหมือนปุ่มอื่นของแผง (UX audit 2026-09-28) */}
+              <PanelRow label="ข้อความ">
+                <button
+                  type="button"
+                  className={`sel-panel-btn flex flex-1 items-center justify-center gap-1 rounded-md border border-line px-2 py-1 text-[11px] font-medium text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
+                  onClick={() => onStartEdit?.(annotation.id)}
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                  แก้ไขข้อความ
+                </button>
+              </PanelRow>
               <PanelRow>
                 <ColorSwatches
                   value={stampData.color ?? STAMP_COLOR}
@@ -590,16 +844,28 @@ export default function AnnotationSelectionLayer({
                   onChange={commitStampScale}
                 />
               </PanelRow>
+              <PanelRow label="มุมเอียง">
+                <NumberCombo
+                  value={stampData.rotation ?? 0}
+                  options={[-45, -15, 0, 15, 45]}
+                  min={-180}
+                  max={180}
+                  step={1}
+                  suffix="°"
+                  onChange={commitStampRotation}
+                />
+              </PanelRow>
             </>
           )}
           {textboxData && (
             <>
               {/* M1: ทางเข้า editor นอกจาก double-click — แผงโผล่เฉพาะของตัวเองอยู่แล้ว
-                  (editable) จึงไม่ต้องเช็ค userId ซ้ำ / root มี stopPropagation คลิกไม่หลุดไป deselect */}
+                  (editable) จึงไม่ต้องเช็ค userId ซ้ำ / root มี stopPropagation คลิกไม่หลุดไป deselect
+                  · sel-panel-btn ขยาย hit 36px บนจอสัมผัสเหมือนปุ่มอื่นของแผง (UX audit 2026-09-28) */}
               <PanelRow label="ข้อความ">
                 <button
                   type="button"
-                  className={`flex flex-1 items-center justify-center gap-1 rounded-md border border-slate-300 px-2 py-1 text-[11px] font-medium text-slate-600 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+                  className={`sel-panel-btn flex flex-1 items-center justify-center gap-1 rounded-md border border-line px-2 py-1 text-[11px] font-medium text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
                   onClick={() => onStartEdit?.(annotation.id)}
                 >
                   <Pencil className="h-3.5 w-3.5" />
@@ -643,7 +909,7 @@ export default function AnnotationSelectionLayer({
                   className={`flex h-6 w-6 items-center justify-center rounded-md border transition ${FOCUS_RING_CLS} ${
                     textboxData.bold
                       ? "border-primary bg-primary text-white"
-                      : "border-slate-300 bg-white text-slate-500 hover:bg-slate-100"
+                      : "border-line bg-white text-ink-soft hover:bg-ink/[0.05]"
                   }`}
                   onClick={() => commitTextboxPatch({ bold: !textboxData.bold })}
                 >
@@ -654,7 +920,7 @@ export default function AnnotationSelectionLayer({
                 </button>
               </PanelRow>
               <PanelRow label="จัดแนว">
-                <div className="flex overflow-hidden rounded-md border border-slate-300">
+                <div className="flex overflow-hidden rounded-md border border-line">
                   {(
                     [
                       ["left", AlignLeft, "ชิดซ้าย"],
@@ -670,7 +936,7 @@ export default function AnnotationSelectionLayer({
                       className={`px-2 py-1 transition ${FOCUS_RING_CLS} ${
                         (textboxData.align ?? "left") === a
                           ? "bg-primary text-white"
-                          : "text-slate-500 hover:bg-slate-100"
+                          : "text-ink-soft hover:bg-ink/[0.05]"
                       }`}
                       onClick={() => commitTextboxPatch({ align: a })}
                     >
@@ -681,27 +947,29 @@ export default function AnnotationSelectionLayer({
               </PanelRow>
             </>
           )}
-          {hasStyleControls && <div className="my-1 border-t border-slate-100" />}
+          {hasStyleControls && <div className="my-1 border-t border-line/60" />}
           <div className={hasStyleControls ? "flex items-center justify-between" : "flex items-center"}>
             {/* N2: bookmark ตำแหน่งของรายการนี้ — เปิด popup ตั้งชื่อ/โน้ต/เลือกหัวข้อต่อ */}
+            {/* hover เป็นกลางแบบปุ่มจิ๋วอื่นในแผง (เดิม copy มาจากปุ่มลบข้าง ๆ จน hover
+                แดง = สัญญาณอันตรายเท็จกับการ "บันทึก" — UX review M4 2026-09-23) */}
             <button
               type="button"
               aria-label="บันทึก bookmark ตำแหน่งรายการนี้"
               title="Bookmark ตำแหน่งนี้"
-              className={`flex h-5 w-5 sel-panel-btn items-center justify-center rounded text-slate-400 hover:bg-amber-50 hover:text-amber-500 ${FOCUS_RING_CLS}`}
+              className={`flex h-5 w-5 sel-panel-btn items-center justify-center rounded text-ink-faint hover:bg-ink/[0.05] hover:text-ink ${FOCUS_RING_CLS}`}
               onClick={() => onBookmark(boxPct.y)}
             >
               <BookmarkPlus className="h-3.5 w-3.5" />
             </button>
             {/* เส้นคั่นแนวตั้ง — เฉพาะกรณีปุ่มติดกัน (แผงไม่มี row สไตล์): แยก bookmark ออกจากปุ่มลบ */}
             {!hasStyleControls && (
-              <span aria-hidden="true" className="mx-1 h-3.5 w-px bg-slate-200" />
+              <span aria-hidden="true" className="mx-1 h-3.5 w-px bg-line" />
             )}
             <button
               type="button"
               aria-label="ลบรายการนี้"
               title="ลบ"
-              className={`flex h-5 w-5 sel-panel-btn items-center justify-center rounded text-red-500 hover:bg-red-50 ${FOCUS_RING_CLS}`}
+              className={`flex h-5 w-5 sel-panel-btn items-center justify-center rounded text-error-ink hover:bg-error/10 ${FOCUS_RING_CLS}`}
               onClick={() => onDelete(annotation.id)}
             >
               <Trash2 className="h-3.5 w-3.5" />

components/pdf/InkLayer.tsx

@@ -20,6 +20,7 @@ import {
   type Rect,
   type Size,
 } from "@/utils/coordinates";
+import { measureStampText } from "@/utils/annotation-display";
 import { annotationBBox, hitTestPath, hitTestShape } from "@/utils/geometry";
 import type { InkStamp } from "./TextboxStampLayer";
 
@@ -303,7 +304,7 @@ export default function InkLayer({
     // (bbox = สูตรเดียวกับ render และกรอบ selection — annotationBBox)
     for (const s of stamps) {
       if (s.userId !== ownUserId) continue;
-      const b = annotationBBox({ type: "STAMP", data: s.data }, measured);
+      const b = annotationBBox({ type: "STAMP", data: s.data }, measured, measureStampText);
       if (
         lp.x >= b.x - pad &&
         lp.x <= b.x + b.width + pad &&

components/pdf/TextboxStampLayer.tsx

@@ -1,17 +1,26 @@
 "use client";
 
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import type { StampData, TextboxData, TextboxSegment } from "@/db/schema";
 import { toPx, type Point, type Size } from "@/utils/coordinates";
-import { STAMP_HEIGHT_RATIO, textboxMaxWidthPct } from "@/utils/geometry";
-import { STAMP_COLOR, stampFitFontSize } from "@/utils/annotation-display";
+import { textboxMaxWidthPct } from "@/utils/geometry";
+import { segmentsToHtml, serializeEditor } from "@/utils/textbox-editor";
+import {
+  measureStampText,
+  STAMP_COLOR,
+  stampBoxHeight,
+  STAMP_FONT_STACK,
+  stampLayout,
+  STAMP_MAX_LABEL_CHARS,
+} from "@/utils/annotation-display";
 
 // TEXTBOX + STAMP overlay (F17/B2, F18/B5) — HTML overlay (z-4 กลุ่มเดียวกับ comment pins)
 // - container `pointer-events: none` เสมอ เฉพาะรายการของตัวเองที่ `auto`
 //   (เหมือน comment pins — ไม่บังการ select ข้อความของ textLayer เมื่อปิด tool)
 // - คลิก = เลือกรายการ (กรอบ selection ของ F1), double-click TEXTBOX ของตัวเอง
 //   = แก้ไขข้อความผ่าน textarea วางแทนที่ตำแหน่งเดิม (บันทึกผ่าน updateAnnotation — pattern F13)
+//   ส่วน STAMP แก้ข้อความผ่านปุ่ม "แก้ไขข้อความ" ในแผง selection (editingId ใช้ร่วมกับ TEXTBOX)
 // - composer = textarea ระหว่างสร้างกล่องข้อความใหม่ วางที่ตำแหน่งที่คลิกบนหน้า
 
 /** กล่องข้อความจาก DB — พิกัด % ทั้งหมด */
@@ -20,9 +29,8 @@ export type InkTextbox = { id: string; userId: string; data: TextboxData };
 /** ตรายางจาก DB (F18/B5) — พิกัด % ทั้งหมด */
 export type InkStamp = { id: string; userId: string; data: StampData };
 
-// ฟอนต์ตรายางบนจอ — ตั้งชัดทั้งตอนวัด (canvas) และตอน render เพื่อให้ความกว้าง
-// ที่ stampFitFontSize คำนวณตรงกับที่แสดงจริง (ตัวหนา 700 เหมือน class font-bold)
-const STAMP_FONT_STACK = "system-ui, sans-serif";
+// ฟอนต์ตรายางบนจอ + canvas measure ย้ายไป utils/annotation-display.ts แล้ว
+// (2026-09-28) ให้ preview ในเมนูของ tool ใช้ตัววัดเดียวกันกับตอน render จริง
 
 /** typography audit 2026-09-16 (T4.4 + Option B): ฟอนต์กล่องข้อความบนจอ — pin ชัดทั้ง
  *  editor และ render ไม่สืบทอดจาก body: กล่องกว้างเป็น % คงที่ ฟอนต์เปลี่ยนตามเครื่อง
@@ -30,55 +38,6 @@ const STAMP_FONT_STACK = "system-ui, sans-serif";
  *  ตรงกันทุกอุปกรณ์จริง (T1-C) พร้อม system ไทยเดิมเป็น fallback ตอนโหลดไม่ได้ */
 const TEXTBOX_FONT_STACK =
   "var(--font-sarabun, 'Sarabun'), 'Leelawadee UI', 'Thonburi', sans-serif";
-let stampMeasureCtx: CanvasRenderingContext2D | null = null;
-
-/** วัดความกว้างข้อความตรายางบนจอ — ไม่มี document (SSR) คืน 0 ให้ใช้ขนาด base */
-function measureStampText(text: string, fontSize: number): number {
-  if (typeof document === "undefined") return 0;
-  stampMeasureCtx ??= document.createElement("canvas").getContext("2d");
-  if (!stampMeasureCtx) return 0;
-  stampMeasureCtx.font = `bold ${fontSize}px ${STAMP_FONT_STACK}`;
-  return stampMeasureCtx.measureText(text).width;
-}
-
-/** แปลงข้อความ/segments → HTML สำหรับ contentEditable (escape + <b> + <br>) */
-function segmentsToHtml(text: string, segments?: TextboxSegment[]): string {
-  const esc = (s: string) =>
-    s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  const runs = segments?.length ? segments : [{ text }];
-  return runs
-    .map((s) => (s.bold ? `<b>${esc(s.text)}</b>` : esc(s.text)))
-    .join("")
-    .replace(/\n/g, "<br>");
-}
-
-/** อ่าน DOM ของ contentEditable กลับเป็น text รวม + segments แยกตามตัวหนา/ปกติ */
-function serializeEditor(root: HTMLElement): { text: string; segments: TextboxSegment[] } {
-  const segs: TextboxSegment[] = [];
-  const push = (text: string, bold: boolean) => {
-    if (!text) return;
-    const last = segs[segs.length - 1];
-    if (last && !!last.bold === bold) last.text += text;
-    else segs.push({ text, ...(bold ? { bold: true } : {}) });
-  };
-  const walk = (node: Node, bold: boolean) => {
-    if (node.nodeType === Node.TEXT_NODE) {
-      push(node.nodeValue ?? "", bold);
-    } else if (node.nodeName === "BR") {
-      push("\n", bold);
-    } else {
-      const b = bold || node.nodeName === "B" || node.nodeName === "STRONG";
-      const kids = Array.from(node.childNodes);
-      kids.forEach((c, i) => {
-        walk(c, b);
-        // DIV/P sibling จากการกด Enter = คั่นขึ้นบรรทัดใหม่
-        if (i < kids.length - 1 && /^(DIV|P)$/.test(c.nodeName)) push("\n", b);
-      });
-    }
-  };
-  walk(root, false);
-  return { text: segs.map((s) => s.text).join(""), segments: segs };
-}
 
 /** กล่องแก้ไข/สร้างข้อความแบบ inline rich text — เลือกข้อความแล้วกด Ctrl/Cmd+B
  *  ทำตัวหนาเฉพาะส่วนที่เลือกได้ (สไตล์ทั้งกล่องจากตัวตั้งค่าของ tool/ของกล่อง) */
@@ -115,12 +74,23 @@ function TextboxEditor({
   onCancel: () => void;
 }) {
   const ref = useRef<HTMLDivElement | null>(null);
-  // initial HTML คำนวณ/คืน object เดิมจนกว่า annotation จะเปลี่ยน — editor เป็น
-  // uncontrolled (พิมพ์ใน DOM ตรง ๆ) React จึงไม่ยุ่งกับ innerHTML ระหว่างพิมพ์
-  const initialHtml = useMemo(
-    () => ({ __html: segmentsToHtml(initialText, initialSegments) }),
-    [initialText, initialSegments],
-  );
+  // จบ editor ได้ครั้งเดียว — blur (บันทึกอัตโนมัติ), Escape, unmount แต่ละทางเรียก
+  // ต่างกันและคำสั่งที่สอง (blur ตามหลัง Escape/Enter ตอน element ถูกถอด, Enter ซ้ำ
+  // จาก double-tap บนจอสัมผัสก่อน React ถอด editor) ต้องเงียบ — ไม่งั้น onSave ยิง
+  // ซ้ำจน composer สร้างกล่องซ้ำ / update เดียวกันกลายเป็น 2 version ในประวัติ F19
+  const doneRef = useRef(false);
+  const finish = (fn: () => void) => {
+    if (doneRef.current) return;
+    doneRef.current = true;
+    fn();
+  };
+  // initial HTML freeze ตอน mount (useState initializer) — editor เป็น uncontrolled
+  // (พิมพ์ใน DOM ตรง ๆ) ค่าเริ่มต้นต้องไม่เปลี่ยนตาม props กลางทาง: realtime update
+  // แก้กล่องเดียวกัน (อีกแท็บ/อีกคน) แล้ว useMemo คืน __html ใหม่จะ reset innerHTML
+  // เผลอข้อความที่ผู้ใช้กำลังพิมพ์
+  const [initialHtml] = useState(() => ({
+    __html: segmentsToHtml(initialText, initialSegments),
+  }));
 
   // focus + วาง caret ท้ายข้อความตอนเปิด editor
   useEffect(() => {
@@ -139,9 +109,11 @@ function TextboxEditor({
   const submit = () => {
     const el = ref.current;
     if (!el) return;
-    const { text, segments } = serializeEditor(el);
-    if (text.trim()) onSave(text, segments);
-    else onCancel();
+    finish(() => {
+      const { text, segments } = serializeEditor(el);
+      if (text.trim()) onSave(text, segments);
+      else onCancel();
+    });
   };
 
   return (
@@ -172,17 +144,32 @@ function TextboxEditor({
         onBlur={submit}
         onKeyDown={(e) => {
           e.stopPropagation(); // ไม่ให้ปุ่มในกล่องข้อความชนคีย์ลัดของ viewer
+          // Enter ระหว่าง IME compose (คีย์บอร์ดเสมือนของ iPad/Android, IME ภาษาอื่น)
+          // = ยืนยันคำที่กำลังพิมพ์ ไม่ใช่คำสั่งของ editor
+          if (e.nativeEvent.isComposing) return;
           if (e.key === "Escape") {
             e.preventDefault();
-            onCancel();
+            finish(onCancel);
+            return;
           }
-          // เลือกข้อความแล้วกด Ctrl/Cmd+B = ทำตัวหนาเฉพาะส่วนที่เลือก
+          // Enter = ขึ้นบรรทัดใหม่เป็น <br> ล้วนเสมอ — ปล่อย browser สร้าง <div> ต่อ
+          // บรรทัดเอง (Chrome) แล้ว serializeEditor ต้องเดา newline จากรอยต่อ block
+          // จน "abc<div>def</div>" กลายเป็น "abcdef" (รายงาน review ข้อ 2, 2026-09-28)
+          if (e.key === "Enter") {
+            e.preventDefault();
+            document.execCommand("insertLineBreak");
+            return;
+          }
+          // เลือกข้อความแล้วกด Ctrl/Cmd+B = ทำตัวหนาเฉพาะส่วนที่เลือก — ปิดเมื่อกล่อง
+          // หนาทั้งกล่อง: execCommand("bold") จะ toggle ออกเป็น span font-weight:normal
+          // ที่ serialize ไม่เก็บ และตอน render segment ก็ inherit 700 ของกล่องอยู่ดี
+          // (อยากปรับเป็นปกติ = ปิดตัวหนาทั้งกล่องที่แผง selection ก่อน)
           // FIX-12: document.execCommand ถูก mark deprecated แต่
           // ยังทำงานทุก browser ปัจจุบัน และไม่มี replacement ตรง ๆ ของ contentEditable
-          // (bold/insertText ตรงนี้และใน onPaste ด้านล่าง) — ใช้ต่อโดยรับความเสี่ยงไว้
+          // (bold/insertLineBreak/insertText ตรงนี้และใน onPaste ด้านล่าง) — ใช้ต่อโดยรับความเสี่ยงไว้
           if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "b") {
             e.preventDefault();
-            document.execCommand("bold");
+            if (!bold) document.execCommand("bold");
           }
         }}
         onPaste={(e) => {
@@ -194,7 +181,9 @@ function TextboxEditor({
             e.clipboardData.getData("text/plain"),
           );
         }}
-        className="min-h-[1.5em] w-full whitespace-pre-wrap break-words rounded border border-dashed border-slate-500/70 bg-transparent p-0 caret-current focus:outline-none"
+        // ขอบประใช้ outline (ไม่กิน layout): border 1px ใน border-box ทำให้พื้นที่ข้อความ
+        // แคบกว่าตอน render จริง 2px จนตัดบรรทัดต่างจากที่จะบันทึก (review ข้อ 3)
+        className="min-h-[1.5em] w-full whitespace-pre-wrap break-words rounded outline-1 outline-dashed outline-ink-faint/70 bg-transparent p-0 caret-current"
         style={{
           fontFamily: TEXTBOX_FONT_STACK,
           fontSize: toPx(fontSizePct, size.width),
@@ -209,6 +198,174 @@ function TextboxEditor({
   );
 }
 
+/** แก้ข้อความตรายางในที่ (ปุ่ม "แก้ไขข้อความ" ในแผง selection) — กรอบ/สี/ฟอนต์/การ
+ *  จัดวาง (ย่อฟอนต์/wrap หลายบรรทัด) เหมือนตอน render จริงทุกอย่าง (WYSIWYG)
+ *  ยกเว้น**มุมเอียง**: editor แสดงตรง (0°) เสมอ — textarea เอียงพิมพ์ลำบากและ
+ *  กรอบครอบตำแหน่งเดิมอยู่แล้ว ปิด editor แล้วตรายางกลับไปเอียงตามค่าเดิมทันที ·
+ *  พิมพ์ยาวขึ้น = ฟอนต์ย่อจนถึง floor แล้วค่อยขึ้นบรรทัดใหม่ กรอบสูงขึ้นตาม
+ *  stampLayout ทันที — blur/Enter = บันทึก (ข้อความว่าง = ยกเลิก), Escape = ยกเลิก ·
+ *  Enter ไม่ใช้ขึ้นบรรทัด (ตรายางจัดบรรทัดอัตโนมัติล้วน ให้ตรงกับ preview/ตอนวางเสมอ) */
+function StampEditor({
+  size,
+  data,
+  enabled,
+  onSave,
+  onCancel,
+}: {
+  size: Size;
+  data: StampData;
+  enabled: boolean;
+  onSave: (label: string) => void;
+  onCancel: () => void;
+}) {
+  const [label, setLabel] = useState(data.label);
+  // จบ editor ได้ครั้งเดียว — Enter ซ้ำจาก double-tap บนจอสัมผัส (ก่อน React ถอด
+  // editor) หรือ blur ตามหลัง Enter ต้องเงียบ ไม่งั้น update เดียวกันกลายเป็น
+  // 2 version ในประวัติ F19 (เหตุผลเดียวกับ doneRef ของ TextboxEditor)
+  const doneRef = useRef(false);
+  const finish = (fn: () => void) => {
+    if (doneRef.current) return;
+    doneRef.current = true;
+    fn();
+  };
+  const w = toPx(data.scale, size.width);
+  const c = data.color ?? STAMP_COLOR;
+  const lay = useMemo(() => stampLayout(label, w, measureStampText), [label, w]);
+  const commit = () =>
+    finish(() => {
+      const t = label.trim();
+      if (t) onSave(t);
+      else onCancel();
+    });
+  return (
+    <div
+      className="absolute flex items-center justify-center overflow-hidden"
+      style={{
+        left: toPx(data.position.x, size.width),
+        top: toPx(data.position.y, size.height),
+        width: w,
+        height: stampBoxHeight(lay, w),
+        border: `${Math.max(w * 0.02, 1)}px solid ${c}`,
+        borderRadius: Math.max(w * 0.04, 2),
+        pointerEvents: enabled ? "auto" : "none",
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <textarea
+        autoFocus
+        aria-label="แก้ไขข้อความตรายาง"
+        value={label}
+        maxLength={STAMP_MAX_LABEL_CHARS}
+        rows={lay.lines.length}
+        spellCheck={false}
+        onChange={(e) => setLabel(e.target.value.replace(/\n/g, ""))}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          e.stopPropagation(); // ไม่ให้ปุ่มในช่องข้อความชนคีย์ลัดของ viewer
+          // Enter ระหว่าง IME compose = ยืนยันคำ ไม่ใช่บันทึก (เหตุผลเดียวกับ TextboxEditor)
+          if (e.nativeEvent.isComposing) return;
+          if (e.key === "Escape") {
+            e.preventDefault();
+            finish(onCancel);
+            return;
+          }
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit();
+          }
+        }}
+        // ไม่ใส่ padding แนวนอน: พื้นที่พิมพ์ = w − border (≈0.96w) กว้างกว่า maxW
+        // ของ stampLayout (0.9w) เสมอ ข้อความที่ย่อจนพอดี 0.9w เป๊ะ จึงไม่ wrap ใน
+        // editor ทั้งที่ผลหลังบันทึกเป็นบรรทัดเดียว (WYSIWYG — code review 2026-09-28)
+        className="w-full resize-none bg-transparent text-center font-bold focus:outline-none"
+        style={{
+          color: c,
+          fontFamily: STAMP_FONT_STACK,
+          fontSize: lay.fontSize,
+          lineHeight: lay.lineHeight,
+        }}
+      />
+    </div>
+  );
+}
+
+/** ตรายางหนึ่งดวง — stampLayout (canvas measure ทีละบรรทัดหลายรอบตามจำนวนบรรทัด
+ *  ที่ลอง wrap) ถูก useMemo ไว้ dep primitive [label, w] จึงคำนวณใหม่เฉพาะเมื่อ
+ *  label/ความกว้างจริงเปลี่ยน ไม่ตาม re-render เพราะเหตุอื่น (annotation ตัวอื่น
+ *  เพิ่ม/ลบ, selectedId, SSE event) — memo ระดับ component ไม่ช่วยเพราะ props
+ *  (s/size object) เป็น reference ใหม่ทุก render ของ parent (code review
+ *  2026-09-28) · ฟอนต์ที่วัดเป็น system-ui (STAMP_FONT_STACK) มีพร้อมตั้งแต่
+ *  browser เปิด จึงไม่ต้องรอ document.fonts.ready แล้ววัดซ้ำ (review ข้อ 7) */
+function StampItem({
+  s,
+  size,
+  enabled,
+  onSelect,
+}: {
+  s: InkStamp;
+  size: Size;
+  /** tool ที่ไม่ใช้ pointer บน layer นี้ → ปิด pointer-events/โฟกัสของทุกรายการ */
+  enabled: boolean;
+  onSelect: (id: string) => void;
+}) {
+  const w = toPx(s.data.scale, size.width);
+  const c = s.data.color ?? STAMP_COLOR; // แถวเดิมไม่มี color = สีตรายาง default
+  // จัดวางข้อความแบบเดียวกับ preview/export: คำสั้น 1 บรรทัดฟอนต์เต็ม, คำยาวพอดี ๆ
+  // ย่อฟอนต์ให้อยู่บรรทัดเดียวก่อน (จนถึง floor 10%), คำยาวจริงเกิน floor ค่อย wrap
+  // ≤3 บรรทัด กรอบสูงขึ้นตามจำนวนบรรทัด (2026-09-28 รอบสอง — ตาม stampLayout)
+  const lay = useMemo(
+    () => stampLayout(s.data.label, w, measureStampText),
+    [s.data.label, w],
+  );
+  return (
+    <div
+      role="button"
+      tabIndex={enabled ? 0 : -1}
+      aria-label={`ตรายาง: ${s.data.label}`}
+      className="absolute flex flex-col items-center justify-center overflow-hidden text-center font-bold"
+      style={{
+        left: toPx(s.data.position.x, size.width),
+        top: toPx(s.data.position.y, size.height),
+        width: w,
+        height: stampBoxHeight(lay, w),
+        // มุมเอียง (−180..180) หมุนรอบ**กลางกรอบ** — left/top ยังเป็นมุมซ้ายบนของ
+        // กรอบ*ก่อนหมุน*เสมอ (bbox = AABB ของกรอบหมุน คำนวณใน geometry)
+        ...(s.data.rotation
+          ? { transform: `rotate(${s.data.rotation}deg)`, transformOrigin: "center" }
+          : null),
+        border: `${Math.max(w * 0.02, 1)}px solid ${c}`,
+        borderRadius: Math.max(w * 0.04, 2),
+        color: c,
+        fontFamily: STAMP_FONT_STACK,
+        fontSize: lay.fontSize,
+        lineHeight: lay.lineHeight,
+        pointerEvents: enabled ? "auto" : "none",
+        cursor: enabled ? "pointer" : "default",
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (enabled) onSelect(s.id);
+      }}
+      onKeyDown={(e) => {
+        if (!enabled) return;
+        // กลืนเฉพาะคีย์ที่เราจัดการเอง — คีย์อื่น (DEL/Escape/H/D/C/B ของ viewer
+        // ที่ฟังที่ window) ต้อง bubble ต่อ เหตุผลเดียวกับ div กล่องข้อความด้านบน
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          onSelect(s.id);
+        }
+      }}
+    >
+      {lay.lines.map((ln, i) => (
+        // บรรทัดว่างจาก wrap ใช้ nbsp กัน div ยุบ — ตัวอักษรใน quotes เป็น U+00A0 จริง ๆ
+        // (มองเหมือน space ปกติ — ห้ามลบหรือแทนด้วย space)
+        <div key={i}>{ln || " "}</div>
+      ))}
+    </div>
+  );
+}
+
 export default function TextboxStampLayer({
   size,
   textboxes,
@@ -275,6 +432,10 @@ export default function TextboxStampLayer({
           <div
             key={t.id}
             title={t.userId === ownUserId ? "ดับเบิลคลิกเพื่อแก้ไขข้อความ" : undefined}
+            // a11y: กล่องคลิกเลือกได้ = ปุ่ม — ใช้คีย์บอร์ด (Tab/Enter/Space) เลือกได้ด้วย
+            role="button"
+            tabIndex={enabled ? 0 : -1}
+            aria-label={`กล่องข้อความ${t.data.text ? `: ${t.data.text.slice(0, 40)}` : ""}`}
             className="absolute whitespace-pre-wrap break-words"
             style={{
               left: toPx(t.data.position.x, size.width),
@@ -293,11 +454,22 @@ export default function TextboxStampLayer({
               pointerEvents: enabled ? "auto" : "none",
               cursor: enabled ? "text" : "default",
             }}
-
             onClick={(e) => {
               e.stopPropagation();
               if (enabled) onSelect(t.id);
             }}
+            onKeyDown={(e) => {
+              if (!enabled) return;
+              // กลืนเฉพาะคีย์ที่เราจัดการเอง (Enter/Space เลือกรายการ) — คีย์อื่น
+              // (DEL/Backspace ลบ, Escape deselect, H/D/C/B ของ viewer ที่ฟังที่
+              // window) ต้อง bubble ต่อ: focus ค้างบน item หลังคลิกเลือก (tabIndex)
+              // แล้วกลืนทุกคีย์ = ปุ่มลบ/ยกเลิกตายหมด (code review 2026-09-28)
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                onSelect(t.id);
+              }
+            }}
             onDoubleClick={(e) => {
               e.stopPropagation();
               if (enabled && t.userId === ownUserId) onStartEdit(t.id);
@@ -329,39 +501,24 @@ export default function TextboxStampLayer({
           onCancel={onCancelComposer}
         />
       )}
-      {/* STAMP (F18/B5) — กรอบข้อความสไตล์ตรายาง: กว้าง = scale% ของหน้า สูง = 0.4 เท่า (§5)
-          ฟอนต์ย่อให้ label อยู่บรรทัดเดียวเสมอ (ยาวอย่าง "ตรวจสอบแล้ว" ไม่ wrap/ถูกตัด) */}
-      {stamps.map((s) => {
-        const w = toPx(s.data.scale, size.width);
-        const c = s.data.color ?? STAMP_COLOR; // แถวเดิมไม่มี color = สีตรายาง default
-        return (
-          <div
+      {/* STAMP (F18/B5) — กรอบข้อความสไตล์ตรายาง กว้าง = scale% ของหน้า สูง 0.4 เท่า
+          (§5): คำสั้นอยู่บรรทัดเดียว คำยาว wrap ≤3 บรรทัด (2026-09-28) — ตัว render
+          อยู่ใน StampItem (memo), โหมดแก้ข้อความ (ปุ่ม "แก้ไขข้อความ" ในแผง selection)
+          = StampEditor แทนกรอบเดิม */}
+      {stamps.map((s) =>
+        editingId === s.id ? (
+          <StampEditor
             key={s.id}
-            className="absolute flex items-center justify-center overflow-hidden text-center font-bold"
-            style={{
-              left: toPx(s.data.position.x, size.width),
-              top: toPx(s.data.position.y, size.height),
-              width: w,
-              height: w * STAMP_HEIGHT_RATIO,
-              border: `${Math.max(w * 0.02, 1)}px solid ${c}`,
-              borderRadius: Math.max(w * 0.04, 2),
-              color: c,
-              fontFamily: STAMP_FONT_STACK,
-              fontSize: stampFitFontSize(s.data.label, w, measureStampText),
-              lineHeight: 1.2,
-              whiteSpace: "nowrap",
-              pointerEvents: enabled ? "auto" : "none",
-              cursor: enabled ? "pointer" : "default",
-            }}
-            onClick={(e) => {
-              e.stopPropagation();
-              if (enabled) onSelect(s.id);
-            }}
-          >
-            {s.data.label}
-          </div>
-        );
-      })}
+            size={size}
+            data={s.data}
+            enabled={enabled}
+            onSave={(label) => onCommitEdit(s.id, label)}
+            onCancel={() => onStartEdit(null)}
+          />
+        ) : (
+          <StampItem key={s.id} s={s} size={size} enabled={enabled} onSelect={onSelect} />
+        ),
+      )}
     </div>
   );
 }

components/pdf/ToolControls.tsx

@@ -5,6 +5,8 @@ import { Check, ChevronDown, ChevronUp, Highlighter, Strikethrough, Underline }
 
 import type { HighlightStyle } from "@/db/schema";
 
+import { colorName } from "@/utils/annotation-display";
+
 // ตัวควบคุมที่ใช้ร่วมระหว่าง dropdown บนปุ่ม tool (PDFViewer) กับแผงเครื่องมือ
 // บนกรอบ selection (AnnotationSelectionLayer) — หน้าตา/พฤติกรรมเดียวกันทั้งสองที่
 
@@ -12,7 +14,7 @@ import type { HighlightStyle } from "@/db/schema";
  *  PDFViewer/AnnotationSidebar (ประกาศแยกที่นี่เพราะ PDFViewer import ไฟล์นี้
  *  อยู่แล้ว ห้ามวนกลับ) */
 const FOCUS_RING_CLS =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1";
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
 
 /** สี preset ให้เลือก (ทุก tool ที่ปรับสีได้: draw/shape/highlight/textbox/stamp)
  *  สีอื่นนอกรายการเลือกได้ผ่านปุ่มสีรุ้ง (input type="color") ท้ายแถว */
@@ -36,7 +38,7 @@ export function PanelRow({ label, children }: { label?: string; children: ReactN
   return (
     <div className="panel-row flex items-start gap-2 px-1 py-1">
       {label ? (
-        <span className="w-11 shrink-0 pt-1 text-[11px] font-medium text-slate-500">{label}</span>
+        <span className="w-11 shrink-0 pt-1 text-[11px] font-medium text-ink-soft">{label}</span>
       ) : null}
       {children}
     </div>
@@ -53,9 +55,9 @@ export function ColorSwatches({ value, onChange }: { value: string; onChange: (c
         <button
           key={c}
           type="button"
-          aria-label={`เลือกสี ${c}`}
-          title={c}
-          className={`aspect-square max-w-8 w-full justify-self-center rounded-full border border-slate-300 transition ${FOCUS_RING_CLS} ${
+          aria-label={`เลือกสี ${colorName(c)}`}
+          title={colorName(c)}
+          className={`aspect-square max-w-8 w-full justify-self-center rounded-full border border-line transition ${FOCUS_RING_CLS} ${
             value === c ? "ring-2 ring-primary ring-offset-1" : "hover:scale-110"
           }`}
           style={{ backgroundColor: c }}
@@ -64,7 +66,7 @@ export function ColorSwatches({ value, onChange }: { value: string; onChange: (c
       ))}
       <label
         title="เลือกสีอื่น"
-        className={`relative aspect-square max-w-8 w-full cursor-pointer justify-self-center rounded-full border border-slate-300 transition has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary has-[:focus-visible]:ring-offset-1 ${
+        className={`relative aspect-square max-w-8 w-full cursor-pointer justify-self-center rounded-full border border-line transition has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary ${
           INK_COLORS.includes(value) ? "hover:scale-110" : "ring-2 ring-primary ring-offset-1"
         }`}
         style={{
@@ -177,7 +179,7 @@ export function NumberCombo({
         }
       }}
     >
-      <div className="flex items-stretch overflow-hidden rounded-md border border-slate-300 bg-white">
+      <div className="flex items-stretch overflow-hidden rounded-md border border-line bg-white">
         <input
           type="number"
           value={draft}
@@ -194,16 +196,16 @@ export function NumberCombo({
             if (e.key !== "Escape") e.stopPropagation(); // พิมพ์ในช่องต้องไม่ชนคีย์ลัด F3 (Esc ปล่อยไหลไปปิดเมนู)
             if (e.key === "Enter") commitDraft(); // ยืนยันครั้งเดียวตรงนี้ ไม่ต้องรอ blur
           }}
-          className="min-w-0 flex-1 border-0 px-1.5 py-1.5 text-[11px] text-slate-700 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-slate-400 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+          className="min-w-0 flex-1 border-0 px-1.5 py-1.5 text-[11px] text-ink focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         />
-        <div className="flex flex-col border-l border-slate-300">
+        <div className="flex flex-col border-l border-line">
           {/* combo-step: ปุ่ม ▲▼ ซ้อนแนวตั้ง 2 ชั้น — ต้องหลุดจาก rule touch 36px
               ของ dropdown (globals.css) ไม่งั้นคอลัมน์สูง 72px ดึงทั้งแถวบวมตาม */}
           <button
             type="button"
             aria-label="เพิ่มค่า"
             onMouseDown={(e) => e.preventDefault()} // ไม่แย่ง focus จาก input (dropdown ไม่กระพริบ)
-            className={`combo-step flex flex-1 items-center justify-center rounded-sm px-1.5 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+            className={`combo-step flex flex-1 items-center justify-center rounded-sm px-1.5 text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
             onClick={() => stepValue(1)}
           >
             <ChevronUp className="h-3 w-3" />
@@ -212,7 +214,7 @@ export function NumberCombo({
             type="button"
             aria-label="ลดค่า"
             onMouseDown={(e) => e.preventDefault()}
-            className={`combo-step flex flex-1 items-center justify-center rounded-sm border-t border-slate-300 px-1.5 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+            className={`combo-step flex flex-1 items-center justify-center rounded-sm border-t border-line px-1.5 text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
             onClick={() => stepValue(-1)}
           >
             <ChevronDown className="h-3 w-3" />
@@ -225,7 +227,7 @@ export function NumberCombo({
           // L2 (UX audit 2026-09-16): เปิด "ขึ้นบน" (bottom-full) เสมอ — แถวท้ายเมนู
           // tool (ความทึบ/ความหนา) เปิดลงจะล้นเขต scroll ของเมนู ต้องเลื่อนเมนูจึงเห็น
           // ครบ / ทุกจุดใช้งานมีแถวอื่นอยู่ข้างบนเสมอ จึงไม่หลุดขอบบนของเมนูเช่นกัน
-          className="absolute bottom-full right-0 z-[60] mb-1 w-full overflow-hidden rounded-md border border-slate-200 bg-white py-0.5 shadow-lg"
+          className="absolute bottom-full right-0 z-[60] mb-1 w-full overflow-hidden rounded-md border border-line bg-white py-0.5 shadow-lg"
         >
           {options.map((opt) => (
             <button
@@ -236,8 +238,8 @@ export function NumberCombo({
               onMouseDown={(e) => e.preventDefault()} // ไม่แย่ง focus จาก input ก่อนคลิก
               className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs font-medium transition ${FOCUS_RING_CLS} ${
                 value === opt
-                  ? "bg-slate-100 text-slate-900"
-                  : "text-slate-600 hover:bg-slate-100"
+                  ? "bg-primary/10 text-primary"
+                  : "text-ink-soft hover:bg-ink/[0.05]"
               }`}
               onClick={() => {
                 onChange(opt);

components/pdf/toolbar-tools.ts

@@ -0,0 +1,108 @@
+// pure module ของแถบ tool หน้า annotate — ย้ายจาก PDFViewer.tsx แบบ
+// behavior-preserving (PLAN-TOOLBAR.md ขั้น 1) ไม่มี React/state เพื่อ unit
+// test ได้ (tests/components/toolbar-tools.test.ts)
+import {
+  Eraser,
+  EyeOff,
+  Hand,
+  Highlighter,
+  MessageSquarePlus,
+  MousePointer2,
+  Pencil,
+  Shapes,
+  Stamp,
+  Type,
+  type LucideIcon,
+} from "lucide-react";
+
+export type Tool =
+  | "select"
+  | "pan"
+  | "highlight"
+  | "draw"
+  | "comment"
+  | "shape"
+  | "erase"
+  | "redact"
+  | "textbox"
+  | "stamp";
+
+export type ToolEntry = { key: Tool; label: string; text: string; Icon: LucideIcon };
+
+/** label = ชื่อเต็มสำหรับ title/aria-label (พร้อมคีย์ลัด/คำอังกฤษประกอบ) —
+ *  text = คำสั้น ๆ แสดงเป็นข้อความหลังไอคอนบนปุ่ม (คำขอผู้ใช้ 2026-09-21: ผู้ใช้ศาล
+ *  ไม่คุ้นไอคอนล้วน โดยเฉพาะจอสัมผัสที่ hover อ่าน title ไม่ได้ — แทน span ชื่อ
+ *  tool-active ของ H3 ที่ถอดออก) — สำหรับปุ่ม dropdown ที่มีตัวเลือกย่อย (มาร์ก
+ *  ข้อความ/วาดเส้น/รูปทรง/ตรายาง) เคยแสดงชื่อตัวเลือกล่าสุดแทน text ตลอด (คำขอผู้ใช้
+ *  2026-09-23) แต่ทำให้ชื่อ tool หายไปจากแถบ ("วาดเส้น" เห็นเป็น "ปากกา" ตั้งแต่
+ *  ยังไม่ได้เลือกอะไร) — 2026-09-29 จึงแสดงค่าล่าสุด**เฉพาะตอน tool active**
+ *  (ค่าที่จะใช้จริงเมื่อวาด) ไม่ active กลับมาแสดง text ชื่อ tool เหมือนปุ่มอื่น */
+export const TOOLS: ToolEntry[] = [
+  { key: "select", label: "เลือก", text: "เลือก", Icon: MousePointer2 },
+  { key: "pan", label: "เลื่อนหน้า (pan)", text: "เลื่อนหน้า", Icon: Hand },
+  { key: "highlight", label: "มาร์กข้อความ (H)", text: "มาร์กข้อความ", Icon: Highlighter },
+  { key: "draw", label: "วาดเส้น (D)", text: "วาดเส้น", Icon: Pencil },
+  { key: "comment", label: "คอมเมนต์ (C)", text: "คอมเมนต์", Icon: MessageSquarePlus },
+  { key: "shape", label: "รูปทรง", text: "รูปทรง", Icon: Shapes },
+  { key: "erase", label: "ยางลบ (เส้น/รูปทรง/ตรายางของตัวเอง)", text: "ยางลบ", Icon: Eraser },
+  { key: "redact", label: "ปิดพราง (redaction)", text: "ปิดพราง", Icon: EyeOff },
+  { key: "textbox", label: "กล่องข้อความ", text: "กล่องข้อความ", Icon: Type },
+  { key: "stamp", label: "ตรายาง (stamp)", text: "ตรายาง", Icon: Stamp },
+];
+
+/** N3 ไฟล์ภาพ + PDF สแกนล้วน: ไม่มีข้อความให้คลุม — ซ่อน tool มาร์กข้อความ
+ *  (HIGHLIGHT) ทั้งปุ่มและเมนูรูปแบบ (hideHighlightTool ของ PDFViewer) */
+export function visibleToolsFor(hideHighlight: boolean): ToolEntry[] {
+  return hideHighlight ? TOOLS.filter((t) => t.key !== "highlight") : TOOLS;
+}
+
+/** ไฟล์ภาพ/ไฟล์สแกนล้วน: มาร์กข้อความใช้ไม่ได้ (ไม่มีข้อความให้คลุม) — ปุ่มถูกซ่อน
+ *  ไปแล้ว เหลือทางเข้า tool นี้คือคีย์ลัด H จึงกันที่ switchTool ให้จบ (สลับ tool
+ *  อื่นไม่กระทบ) */
+export function canSwitchTo(t: Tool, hideHighlight: boolean): boolean {
+  return !(t === "highlight" && hideHighlight);
+}
+
+/** หน้าตาปุ่ม tool dropdown ที่มีค่าย่อย (มาร์กข้อความ/วาดเส้น/รูปทรง/ตรายาง) —
+ *  ไม่ active → text ชื่อ tool + title = label เหมือนปุ่มเดี่ยวอื่น;
+ *  active + มีค่า (ค่าที่จะใช้จริงเมื่อวาด เช่น ชื่อปากกา/preset ตรายาง "กำหนดเอง")
+ *  → text = ค่า + title = "label — ค่า" ตาม pattern เดิม;
+ *  ไม่ส่งค่า (textbox ไม่มีค่าย่อย) → ชื่อ tool แม้ active */
+export function toolButtonFace(
+  active: boolean,
+  tool: Pick<ToolEntry, "label" | "text">,
+  value?: string | null,
+): { text: string; title: string } {
+  const showValue = active && value != null;
+  return {
+    text: showValue ? value : tool.text,
+    title: showValue ? `${tool.label} — ${value}` : tool.label,
+  };
+}
+
+/** จำ intent เปิด/พับเมนูของปุ่ม dropdown ก่อนเรียก switchTool (ซึ่งปิดเมนูทุกตัว):
+ *  กดปุ่มจาก tool อื่น = เปิดเมนูของ tool ที่เพิ่ง active, tool เดิม+เมนูปิด = เปิด,
+ *  tool เดิม+เมนูเปิด = พับ (toggle) */
+export function menuIntentAfterClick(current: Tool, key: Tool, menuOpen: boolean): boolean {
+  return current !== key || !menuOpen;
+}
+
+/** tool ที่ปุ่มเป็น dropdown มีเมนูของตัวเอง — ทุกจุดที่ "ปิดเมนูทั้งชุด" (switchTool/
+ *  outside-click/resize/auto-select/เปิด popup bookmark/reset tool ตรง) ต้องวนจากชุด
+ *  ค่านี้จุดเดียว: แต่ก่อน enumerate setter ด้วยมือ 6 แห่ง จนเมนูใหม่/พฤติกรรมใหม่ลืม
+ *  แห่งเดียว = drift เงียบ (เคยเกิดจริง: effect เลื่อนปุ่ม active หาปุ่มไม่เจอเงียบ ๆ
+ *  ตั้งแต่ 2026-09-23) — ฝั่ง PDFViewer ผูก setter/ref เป็น Record<MenuTool,…> ให้
+ *  ลืมแถว = compile error, ฝั่งนี้ test cross-check กับ TOOLS */
+export const TOOL_MENU_KEYS = ["highlight", "draw", "shape", "textbox", "stamp"] as const satisfies readonly Tool[];
+export type MenuTool = (typeof TOOL_MENU_KEYS)[number];
+
+/** คีย์ลัดสลับ tool (F3) — จับคู่ด้วย `e.code` (ตำแหน่งกายภาพของปุ่มตาม layout
+ *  สหรัฐ) ไม่ใช่ `e.key` (ตัวอักษรที่ layout ปัจจุบันจะพิมพ์): ผู้ใช้ศาลส่วนใหญ่สลับ
+ *  keyboard เป็นภาษาไทย ซึ่งปุ่มเดียวกันให้ e.key = "ภ" ไม่ใช่ "h" — เช็ค e.key
+ *  ทำให้คีย์ลัดทั้งชุดใช้ไม่ได้เลยบน layout ไทย (PLAN-TOOLBAR.md finding #1,
+ *  2026-09-29) */
+export const TOOL_SHORTCUTS: Readonly<Record<string, Tool>> = {
+  KeyH: "highlight",
+  KeyD: "draw",
+  KeyC: "comment",
+};

components/sidebar/AnnotationSidebar.tsx

@@ -4,7 +4,6 @@ import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } fro
 import { createPortal } from "react-dom";
 import {
   Bookmark,
-  Braces,
   Check,
   ChevronDown,
   ChevronRight,
@@ -54,7 +53,7 @@ import { formatThaiDate } from "@/utils/date-format";
  *  ของ PDFViewer.tsx (ห้าม import ข้ามไฟล์: PDFViewer → sidebar → PDFViewer เป็น
  *  circular import — แก้ต้องแก้ทั้งสองที่พร้อมกัน) */
 const FOCUS_RING_CLS =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:z-10";
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary focus-visible:z-10";
 
 /** ใส่/ล้างโน้ตคำอธิบายใน data ของ annotation (ทุกชนิดยกเว้น COMMENT — message ทำหน้าที่นี้แล้ว) */
 function withNote(data: Exclude<AnnotationData, CommentData>, note: string): AnnotationData {
@@ -139,7 +138,7 @@ function ViewSwitch<T extends string>({
   onChange: (v: T) => void;
 }) {
   return (
-    <div className="flex rounded-md bg-slate-100 p-0.5">
+    <div className="flex rounded-md bg-ink/[0.05] p-0.5">
       {options.map((o) => (
         <button
           key={o.key}
@@ -147,8 +146,8 @@ function ViewSwitch<T extends string>({
           aria-pressed={value === o.key}
           className={`flex-1 rounded px-2 py-1 text-[11px] font-medium transition ${FOCUS_RING_CLS} ${
             value === o.key
-              ? "bg-white text-slate-900 shadow-sm"
-              : "text-slate-500 hover:text-slate-600"
+              ? "bg-white text-ink ring-1 ring-line"
+              : "text-ink-soft hover:text-ink"
           }`}
           onClick={() => onChange(o.key)}
         >
@@ -178,7 +177,7 @@ function MenuItem({
       type="button"
       role="menuitem"
       className={`flex w-full items-start gap-2 rounded px-2 py-1.5 text-left text-xs transition ${FOCUS_RING_CLS} ${
-        danger ? "text-red-600 hover:bg-red-50" : "text-slate-600 hover:bg-slate-100"
+        danger ? "text-error-ink hover:bg-error/10" : "text-ink-soft hover:bg-ink/[0.05]"
       }`}
       onClick={onClick}
     >
@@ -204,17 +203,17 @@ function PageGroupHeader({
     <button
       type="button"
       aria-label={collapsed ? `กางหน้า ${pageIndex + 1}` : `หุบหน้า ${pageIndex + 1}`}
-      className={`flex w-full items-center gap-1.5 rounded px-1 py-1 text-left hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+      className={`flex w-full items-center gap-1.5 rounded px-1 py-1 text-left hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
       onClick={onToggle}
     >
       {collapsed ? (
-        <ChevronRight className="h-3.5 w-3.5 shrink-0 text-slate-500" />
+        <ChevronRight className="h-3.5 w-3.5 shrink-0 text-ink-soft" />
       ) : (
-        <ChevronDown className="h-3.5 w-3.5 shrink-0 text-slate-500" />
+        <ChevronDown className="h-3.5 w-3.5 shrink-0 text-ink-soft" />
       )}
-      <span className="text-xs font-medium text-slate-700">
+      <span className="text-xs font-medium text-ink">
         หน้า {pageIndex + 1}
-        <span className="ml-1 font-normal text-slate-500">({count})</span>
+        <span className="ml-1 font-normal text-ink-soft">({count})</span>
       </span>
     </button>
   );
@@ -374,13 +373,14 @@ export default function AnnotationSidebar({
   }
 
   /** ผลการค้นหา F14 หลังกรองตามเจ้าของหมายเหตุ (F4) ฝั่ง client — searchAnnotations
-   *  ไม่รับ userId และห้ามแต้ server action: สูตรเดียวกับ visibleAnnotations ของ
-   *  PDFViewer — เปลี่ยนตัวกรองหลังค้นแล้ว ผลกรองทันทีไม่ต้องค้นใหม่ */
+   *  ไม่รับ userId และห้ามแต้ server action: สูตรเดียวกันกับ visibleAnnotations ของ
+   *  PDFViewer (รวม REDACTION ของทุกคนไว้เสมอ — D4) — เปลี่ยนตัวกรองหลังค้นแล้ว
+   *  ผลกรองทันทีไม่ต้องค้นใหม่ */
   const visibleSearchResults = useMemo(() => {
     if (searchResults === null) return null;
     if (userFilter === "all") return searchResults;
     const target = userFilter === "mine" ? userId : userFilter;
-    return searchResults.filter((a) => a.userId === target);
+    return searchResults.filter((a) => a.userId === target || a.type === "REDACTION");
   }, [searchResults, userFilter, userId]);
 
   // ─── F19/A7: ประวัติ/กู้คืน — dialog ต่อรายการ (แสดงเฉพาะรายการของตัวเอง) ─────
@@ -435,9 +435,25 @@ export default function AnnotationSidebar({
   const pendingItems = annotations.filter((a) => a.type !== "COMMENT" || !a.resolved);
   const resolvedItems = annotations.filter((a) => a.type === "COMMENT" && a.resolved);
 
+  // F4: bookmarks ที่แสดง กรองตามเจ้าของหมายเหตุเหมือน annotation (คำขอผู้ใช้
+  // 2026-09-22 ให้ตรงกับ export ที่กรอง PDF outline ตามผู้บันทึก) — หัวข้อแม่โดนกรอง
+  // แต่ลูกยังอยู่ ลูกขึ้น root (พฤติกรรมเดียวกับ buildOutline ของ export) — ใช้เฉพาะจุด
+  // แสดงผล (ต้นไม้/กลุ่มหน้า/ตัวเลขแท็บ): popup ย้ายหัวข้อ (movableTo) กับ bookmarkById
+  // ยังเห็นต้นไม้เต็ม ย้ายไปใต้หัวข้อของคนอื่นได้ตามเดิม
+  const keptBookmarks =
+    userFilter === "all"
+      ? bookmarks
+      : bookmarks.filter(
+          (b) => b.userId === (userFilter === "mine" ? userId : userFilter),
+        );
+  const keptIds = new Set(keptBookmarks.map((b) => b.id));
+  const visibleBookmarks = keptBookmarks.map((b) =>
+    b.parentId && !keptIds.has(b.parentId) ? { ...b, parentId: null } : b,
+  );
+
   // มุมมอง "ตามหน้า": จัดกลุ่มตามหน้า เรียงน้อย→มาก — bookmark เอาเฉพาะ root
   // (sub ดูในต้นไม้ "ตามหัวข้อ") / annotation เก็บลำดับเดิมตามเวลาสร้าง
-  const bmRootPages = groupByPage(bookmarks.filter((b) => !b.parentId).sort(byPageOrder));
+  const bmRootPages = groupByPage(visibleBookmarks.filter((b) => !b.parentId).sort(byPageOrder));
   const annPages = groupByPage(annotations);
 
   // F12/C4: คัดลอก deep link ไปยัง annotation นี้ (?page= + ?ann=)
@@ -715,7 +731,7 @@ export default function AnnotationSidebar({
   }
 
   const renderBookmarkNode = (b: BookmarkDTO, depth: number) => {
-    const children = bookmarks.filter((x) => x.parentId === b.id).sort(byPageOrder);
+    const children = visibleBookmarks.filter((x) => x.parentId === b.id).sort(byPageOrder);
     const hasChildren = children.length > 0;
     const collapsed = collapsedIds.has(b.id);
     const editing = editBookmark?.id === b.id;
@@ -757,7 +773,7 @@ export default function AnnotationSidebar({
                 if (e.key === "Escape") setEditBookmark(null);
               }}
               placeholder="ชื่อหัวข้อ"
-              className="w-full rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
+              className="w-full rounded-md border border-line px-1.5 py-1 text-xs focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
             />
             <textarea
               rows={2}
@@ -770,16 +786,16 @@ export default function AnnotationSidebar({
                 if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) saveBookmarkEdit(b);
               }}
               placeholder="โน้ต (ไม่บังคับ)"
-              className="mt-1 w-full resize-none rounded border border-slate-300 p-1.5 text-[11px] focus:outline-none focus:ring-1 focus:ring-slate-400"
+              className="mt-1 w-full resize-none rounded-md border border-line p-1.5 text-[11px] focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
             />
-            <p className="mt-1 text-[11px] text-slate-500">วางที่</p>
+            <p className="mt-1 text-[11px] text-ink-soft">วางที่</p>
             <Select
               value={eb.parentId ?? ""}
               onChange={(e) =>
                 setEditBookmark({ ...eb, parentId: e.target.value || null })
               }
               onKeyDown={(e) => e.stopPropagation()}
-              className="mt-0.5 w-full rounded border border-slate-300 bg-white px-1.5 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-slate-400"
+              className="mt-0.5 w-full rounded-md border border-line bg-white px-1.5 py-1 text-[11px] focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
             >
               <option value="">ระดับบนสุด (หมุดหัวข้อใหญ่)</option>
               {movableTo.map((h) => (
@@ -791,14 +807,14 @@ export default function AnnotationSidebar({
             <div className="mt-1.5 flex justify-end gap-1.5 text-[11px]">
               <button
                 type="button"
-                className={`rounded px-2 py-0.5 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+                className={`rounded-md px-2 py-0.5 text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
                 onClick={() => setEditBookmark(null)}
               >
                 ยกเลิก
               </button>
               <button
                 type="button"
-                className={`rounded bg-primary px-2 py-0.5 font-medium text-white ${FOCUS_RING_CLS}`}
+                className={`rounded-md bg-primary px-2 py-0.5 font-medium text-white ${FOCUS_RING_CLS}`}
                 onClick={() => saveBookmarkEdit(b)}
               >
                 บันทึก
@@ -806,12 +822,16 @@ export default function AnnotationSidebar({
             </div>
           </div>
         ) : (
-          <div className={`group flex items-center gap-1.5 rounded py-1 hover:bg-slate-100 ${pad}`}>
+          <div className={`group flex items-center gap-1.5 rounded py-1 hover:bg-ink/[0.05] ${pad}`}>
             {hasChildren ? (
+              // bm-toggle: คอลัมน์นี้เป็น "ตาราง" ของต้นไม้ ต้องกว้าง 14px เท่า spacer
+              // ของแถวลูกเสมอ — บนจอสัมผัส rule coarse ที่ขยายปุ่มเป็น 32px จะดันไอคอน
+              // ของแม่ไปชนแนวของลูก (indent 16px หาย) จึงยกเว้นผ่าน class + hit area
+              // ขยายด้วย ::after แทน (ดู globals.css)
               <button
                 type="button"
                 aria-label={collapsed ? `กางหัวข้อ ${b.title}` : `หุบหัวข้อ ${b.title}`}
-                className={`shrink-0 text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`}
+                className={`shrink-0 bm-toggle text-ink-soft hover:text-ink ${FOCUS_RING_CLS}`}
                 onClick={() => toggleCollapsed(b.id)}
               >
                 {collapsed ? (
@@ -829,26 +849,25 @@ export default function AnnotationSidebar({
               className={`flex min-w-0 flex-1 items-start gap-1.5 text-left ${FOCUS_RING_CLS}`}
               onClick={() => onGoToBookmark(b)}
             >
-              <Bookmark
-                className={`h-3.5 w-3.5 shrink-0 ${
-                  depth === 1 ? "text-amber-500" : "text-amber-300"
-                }`}
-              />
+              {/* ไอคอน bookmark สีเดียวทุกระดับ (warning-ink ผ่าน 5:1 บนขาว — เดิมแยก
+                  root/ลูกด้วย amber-500/300 แต่ตัว 300 จาง 1.6:1 แทบมองไม่เห็น;
+                  ลำดับชั้นของต้นไม้สื่อด้วย font-semibold + indent อยู่แล้ว) */}
+              <Bookmark className="h-3.5 w-3.5 shrink-0 text-warning-ink" />
               <span className="min-w-0">
                 <span
                   className={`block truncate text-[13px] leading-snug ${
-                    depth === 1 ? "font-semibold text-slate-700" : ""
+                    depth === 1 ? "font-semibold text-ink" : ""
                   }`}
                 >
                   {b.title}
                 </span>
                 {/* แสดงผู้บันทึกด้วย — เหมือนแถวผลการค้นหา (N6) และแถวหมายเหตุ
                     (แถวเดิมมีแค่ "หน้า N" ไม่รู้ว่าใครเป็นคนคั่นไว้) */}
-                <span className="block text-xs text-slate-500">
+                <span className="block text-xs text-ink-soft">
                   หน้า {b.pageIndex + 1} · {b.userName || "ไม่ทราบชื่อ"}
                 </span>
                 {b.note && (
-                  <span className="mt-0.5 block line-clamp-2 whitespace-pre-wrap break-words text-[11px] text-slate-500">
+                  <span className="mt-0.5 block line-clamp-2 whitespace-pre-wrap break-words text-[11px] text-ink-soft">
                     {b.note}
                   </span>
                 )}
@@ -856,7 +875,7 @@ export default function AnnotationSidebar({
             </button>
             {/* จำนวนหมุดย่อย — badge ขวาสุด (UX audit: แยกจากชื่อ ไม่ปนตอนอ่านไว) */}
             {hasChildren && (
-              <span className="shrink-0 self-center rounded-full bg-slate-100 px-1.5 text-[10px] tabular-nums leading-4 text-slate-500">
+              <span className="shrink-0 self-center rounded-full bg-ink/[0.05] px-1.5 text-[10px] tabular-nums leading-4 text-ink-soft">
                 {children.length}
               </span>
             )}
@@ -867,7 +886,7 @@ export default function AnnotationSidebar({
                 aria-label="จัดการหัวข้อนี้"
                 aria-haspopup="menu"
                 aria-expanded={menuFor?.kind === "bookmark" && menuFor.id === b.id}
-                className={`shrink-0 text-slate-500 hover:text-slate-600 group-hover:text-slate-600 ${FOCUS_RING_CLS}`}
+                className={`shrink-0 text-ink-soft hover:text-ink group-hover:text-ink-soft ${FOCUS_RING_CLS}`}
                 onClick={(e) => {
                   if (menuFor?.kind === "bookmark" && menuFor.id === b.id) closeRowMenu();
                   else openRowMenu(e.currentTarget, { kind: "bookmark", id: b.id });
@@ -881,7 +900,7 @@ export default function AnnotationSidebar({
         {hasChildren && !collapsed && (
           // เส้น guide แนวตั้งนำสายตากลับหา parent แบบ file tree (indent ~17px/ระดับ
           // ≈ ของเดิม 16px — spacer/chevron w-3.5 คงเดิมจึงตรงแนวกันทุกระดับ)
-          <ul className="ml-3 space-y-0.5 border-l border-slate-200 pl-1">
+          <ul className="ml-3 space-y-0.5 border-l border-line pl-1">
             {children.map((c) => renderBookmarkNode(c, depth + 1))}
           </ul>
         )}
@@ -899,7 +918,7 @@ export default function AnnotationSidebar({
       className={`group rounded px-2 py-1.5 ${
         a.id === selectedId
           ? "bg-primary/10 ring-1 ring-inset ring-primary/30"
-          : "hover:bg-slate-100"
+          : "hover:bg-ink/[0.05]"
       } ${a.resolved ? "opacity-60" : ""}`}
     >
       <div className="flex items-center gap-2">
@@ -917,7 +936,7 @@ export default function AnnotationSidebar({
                     {/* UX audit: อักษรไทยมีสระ/วรรณยุกต์ซ้อนหลายชั้น — ข้อความหลักต้อง 13px
                         จึงอ่านได้สบาย (บรรทัดรอง/โน้ตคง 11px) */}
                     <span className="block truncate text-[13px] leading-snug">{annotationPreviewText(a)}</span>
-                    <span className="block text-xs text-slate-500">
+                    <span className="block text-xs text-ink-soft">
                       หน้า {a.pageIndex + 1} · {a.userName}
                       {a.type === "COMMENT" && (replyCounts[a.id] ?? 0) > 0
                         ? ` · ตอบ ${replyCounts[a.id]}`
@@ -936,10 +955,10 @@ export default function AnnotationSidebar({
         title={copyFailedId === a.id ? "คัดลอกไม่ได้ (เบราว์เซอร์บล็อกคลิปบอร์ด)" : "จัดการหมายเหตุนี้"}
         className={`shrink-0 ${FOCUS_RING_CLS} ${
           copiedId === a.id
-            ? "text-emerald-500"
+            ? "text-success-ink"
             : copyFailedId === a.id
-              ? "text-red-500"
-              : "text-slate-500 hover:text-slate-600 group-hover:text-slate-600"
+              ? "text-error-ink"
+              : "text-ink-soft hover:text-ink group-hover:text-ink-soft"
         }`}
         onClick={(e) => {
           if (menuFor?.kind === "annotation" && menuFor.id === a.id) closeRowMenu();
@@ -968,19 +987,19 @@ export default function AnnotationSidebar({
               if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) saveNote(a);
             }}
             placeholder="โน้ต เช่น เหตุผลที่ทำรายการนี้…"
-            className="w-full resize-none rounded border border-slate-300 p-1.5 text-[11px] focus:outline-none focus:ring-1 focus:ring-slate-400"
+            className="w-full resize-none rounded-md border border-line p-1.5 text-[11px] focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
           />
           <div className="mt-1 flex justify-end gap-1.5 text-[11px]">
             <button
               type="button"
-              className={`rounded px-2 py-0.5 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+              className={`rounded-md px-2 py-0.5 text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
               onClick={() => setNoteFor(null)}
             >
               ยกเลิก
             </button>
             <button
               type="button"
-              className={`rounded bg-primary px-2 py-0.5 font-medium text-white ${FOCUS_RING_CLS}`}
+              className={`rounded-md bg-primary px-2 py-0.5 font-medium text-white ${FOCUS_RING_CLS}`}
               onClick={() => saveNote(a)}
             >
               บันทึก
@@ -989,8 +1008,8 @@ export default function AnnotationSidebar({
         </div>
       ) : (
         note && (
-          <p className="mt-0.5 flex items-start gap-1 pl-6 text-[11px] text-slate-500">
-            <StickyNote className="mt-0.5 h-3 w-3 shrink-0 text-amber-400" />
+          <p className="mt-0.5 flex items-start gap-1 pl-6 text-[11px] text-ink-soft">
+            <StickyNote className="mt-0.5 h-3 w-3 shrink-0 text-warning-ink" />
             <span className="line-clamp-2 whitespace-pre-wrap break-words">{note}</span>
           </p>
         )
@@ -1002,10 +1021,10 @@ export default function AnnotationSidebar({
   return (
     <div className="flex h-full flex-col">
       {/* F4: กรองแสดง annotation ตามผู้เขียน (viewer + sidebar พร้อมกัน) */}
-      <div className="shrink-0 border-b border-slate-200 p-2">
+      <div className="shrink-0 border-b border-line p-2">
         <Select
           aria-label="เลือกเจ้าของหมายเหตุที่แสดง"
-          className="w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-xs text-slate-600 focus:outline-none focus:ring-2 focus:ring-slate-400"
+          className="w-full rounded-md border border-line bg-white px-2 py-1.5 text-xs text-ink-soft focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
           value={userFilter}
           onChange={(e) => onUserFilterChange(e.target.value)}
         >
@@ -1020,10 +1039,10 @@ export default function AnnotationSidebar({
       </div>
 
       {/* แท็บหลัก — tablist/tab semantics ให้ screen reader ประกาศว่าเป็นแท็บ */}
-      <div role="tablist" aria-label="รายการในแผงข้าง" className="flex shrink-0 border-b border-slate-200">
+      <div role="tablist" aria-label="รายการในแผงข้าง" className="flex shrink-0 border-b border-line">
         {(
           [
-            ["bookmarks", `Bookmark (${bookmarks.length})`],
+            ["bookmarks", `Bookmark (${visibleBookmarks.length})`],
             ["annotations", `Annotation (${annotations.length})`],
           ] as const
         ).map(([key, label]) => (
@@ -1034,8 +1053,8 @@ export default function AnnotationSidebar({
             aria-selected={tab === key}
             className={`flex-1 px-2 py-2 text-xs font-medium tabular-nums transition ${FOCUS_RING_CLS} ${
               tab === key
-                ? "border-b-2 border-primary text-slate-900"
-                : "text-slate-500 hover:text-slate-600"
+                ? "border-b-2 border-primary text-ink"
+                : "text-ink-soft hover:text-ink"
             }`}
             onClick={() => setTab(key)}
           >
@@ -1047,25 +1066,25 @@ export default function AnnotationSidebar({
       {/* N6: ค้นหา bookmark พร้อมเงื่อนไข — เฉพาะแท็บที่คั่นหน้า
           (แยกจากช่อง F14 ที่ค้นหมายเหตุ ซึ่งอยู่เหนือแท็บ) */}
       {tab === "bookmarks" && (
-        <div className="shrink-0 space-y-1.5 border-b border-slate-200 p-2">
+        <div className="shrink-0 space-y-1.5 border-b border-line p-2">
           {/* แถวคำค้น — โครงเดียวกับ F14 ของแท็บหมายเหตุ: input เต็มกว้าง + ปุ่มเดียว
               (เดิมปุ่ม "เงื่อนไข"+badge แย่งแถวเดียวกันจน input เหลือพื้นที่ข้อความ
               ~80px ≈ 6–7 ตัวอักษรไทย พิมพ์คำค้นจริงไม่พอ) */}
           <form className="flex gap-1" onSubmit={(e) => void runBookmarkSearch(e)}>
             <div className="relative min-w-0 flex-1">
-              <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
+              <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-ink-soft" />
               <input
                 value={bmQuery}
                 onChange={(e) => setBmQuery(e.target.value)}
                 onKeyDown={(e) => e.stopPropagation()} // ไม่ให้ปุ่มในช่องค้นหาชนคีย์ลัดของ viewer
                 placeholder="ชื่อ หรือ โน้ต…"
-                className="w-full rounded-md border border-slate-300 py-1.5 pl-7 pr-2 text-xs focus:outline-none focus:ring-2 focus:ring-slate-400"
+                className="w-full rounded-md border border-line py-1.5 pl-7 pr-2 text-xs focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
               />
             </div>
             <button
               type="submit"
               disabled={activeConditionCount === 0 || bmSearching}
-              className={`shrink-0 rounded-md border border-slate-300 px-2 py-1.5 text-xs text-slate-600 hover:bg-slate-100 disabled:opacity-40 ${FOCUS_RING_CLS}`}
+              className={`shrink-0 rounded-md border border-line px-2 py-1.5 text-xs text-ink-soft hover:bg-ink/[0.05] disabled:opacity-40 ${FOCUS_RING_CLS}`}
             >
               {bmSearching ? "…" : "หา"}
             </button>
@@ -1078,8 +1097,8 @@ export default function AnnotationSidebar({
               type="button"
               aria-expanded={bmShowConditions}
               onClick={() => setBmShowConditions((v) => !v)}
-              className={`flex min-w-0 flex-1 items-center gap-1.5 rounded px-1.5 py-1 text-[11px] hover:bg-slate-100 ${FOCUS_RING_CLS} ${
-                hasBmConditionValues ? "text-primary" : "text-slate-500"
+              className={`flex min-w-0 flex-1 items-center gap-1.5 rounded px-1.5 py-1 text-[11px] hover:bg-ink/[0.05] ${FOCUS_RING_CLS} ${
+                hasBmConditionValues ? "text-primary" : "text-ink-soft"
               }`}
             >
               <SlidersHorizontal className="h-3 w-3 shrink-0" />
@@ -1092,22 +1111,14 @@ export default function AnnotationSidebar({
                 <ChevronRight className="h-3 w-3 shrink-0" />
               )}
             </button>
-            {/* N7: ส่งออกรายการ bookmark เป็น JSON — ลิงก์ธรรมดา pattern Export CSV (F16)
-                ส่งออกทุกรายการของไฟล์เสมอ ไม่ผูกกับเงื่อนไขค้นหาที่ตั้งไว้ */}
-            <a
-              href={withBasePath(`/api/bookmarks/export?fileId=${fileId}`)}
-              title="ส่งออกทุกที่คั่นหน้าของไฟล์นี้เป็น JSON"
-              aria-label="ส่งออกทุกที่คั่นหน้าของไฟล์นี้เป็น JSON"
-              className={`coarse-36 shrink-0 rounded-md p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700 ${FOCUS_RING_CLS}`}
-            >
-              <Braces className="h-3.5 w-3.5" />
-            </a>
+            {/* ปุ่มส่งออก JSON (N7) ถูกถอด 2026-09-25 ตามคำขอผู้ใช้ — ระบบภายนอก
+                ดึงข้อมูลผ่าน N10 API แทน (ปุ่มเดียวที่เหลือคือ toggle เงื่อนไขค้นหา) */}
           </div>
           {bmShowConditions && (
             // จังหวะเดียวทุกแถว: label บนบรรทัด + คู่ input แบ่งความกว้าง grid 1fr–1fr
             // (เดิม label inline 2 แถว + label บน 1 แถว อ่านไม่เป็นระเบียบ ขอบ input
             //  ไม่ตรงแนวกัน และคู่ date ในแถว inline ล้น 288px จนต้องหนีขึ้นบรรทัดบน)
-            <div className="space-y-1.5 text-[11px] text-slate-600">
+            <div className="space-y-1.5 text-[11px] text-ink-soft">
               <div>
                 <span className="block pb-0.5">หน้า</span>
                 <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-1">
@@ -1122,9 +1133,9 @@ export default function AnnotationSidebar({
                     }
                     onKeyDown={(e) => e.stopPropagation()}
                     placeholder="จาก"
-                    className="w-full min-w-0 rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
+                    className="w-full min-w-0 rounded-md border border-line px-1.5 py-1 text-xs focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
                   />
-                  <span className="text-slate-400">–</span>
+                  <span className="text-ink-faint">–</span>
                   <input
                     type="number"
                     min={1}
@@ -1136,7 +1147,7 @@ export default function AnnotationSidebar({
                     }
                     onKeyDown={(e) => e.stopPropagation()}
                     placeholder="ถึง"
-                    className="w-full min-w-0 rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
+                    className="w-full min-w-0 rounded-md border border-line px-1.5 py-1 text-xs focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
                   />
                 </div>
               </div>
@@ -1149,7 +1160,7 @@ export default function AnnotationSidebar({
                     setBmConditions({ ...bmConditions, userId: e.target.value })
                   }
                   onKeyDown={(e) => e.stopPropagation()}
-                  className="w-full rounded border border-slate-300 bg-white px-1.5 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-slate-400"
+                  className="w-full rounded-md border border-line bg-white px-1.5 py-1 text-[11px] focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
                 >
                   <option value="">ทุกคน</option>
                   {bookmarkAuthors.map((u) => (
@@ -1161,7 +1172,11 @@ export default function AnnotationSidebar({
               </div>
               <div>
                 <span className="block pb-0.5">บันทึกวันที่</span>
-                <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-1">
+                {/* เรียง 2 แถวเต็มกว้าง (ไม่ใช่คู่แนวนอน + "–" คั่น): คอลัมน์คู่แคบ
+                    ~122px ของ sidebar ใส่ค่า "23 ก.ย. 2026" ที่ 16px (rule จอสัมผัส
+                    กัน iOS zoom-on-focus) + icon ปฏิทินไม่พอ ปีโดนตัด (code review
+                    2026-09-23) — aria-label กำกับช่วงเริ่ม/สุดท้ายอยู่แล้ว */}
+                <div className="grid gap-1">
                   <input
                     type="date"
                     aria-label="วันที่เริ่ม"
@@ -1170,9 +1185,8 @@ export default function AnnotationSidebar({
                       setBmConditions({ ...bmConditions, dateFrom: e.target.value })
                     }
                     onKeyDown={(e) => e.stopPropagation()}
-                    className="w-full min-w-0 rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
+                    className="w-full min-w-0 rounded-md border border-line px-1.5 py-1 text-xs focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
                   />
-                  <span className="text-slate-400">–</span>
                   <input
                     type="date"
                     aria-label="วันที่สุดท้าย"
@@ -1181,14 +1195,14 @@ export default function AnnotationSidebar({
                       setBmConditions({ ...bmConditions, dateTo: e.target.value })
                     }
                     onKeyDown={(e) => e.stopPropagation()}
-                    className="w-full min-w-0 rounded border border-slate-300 px-1.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400"
+                    className="w-full min-w-0 rounded-md border border-line px-1.5 py-1 text-xs focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
                   />
                 </div>
               </div>
               <div className="flex justify-end">
                 <button
                   type="button"
-                  className={`rounded px-1.5 py-1 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+                  className={`rounded-md px-1.5 py-1 text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
                   onClick={() => {
                     // UX audit: ล้างให้สิ้นเชิง — คำค้น + เงื่อนไข + ผลที่แสดง พร้อมกัน
                     setBmConditions(EMPTY_BM_CONDITIONS);
@@ -1204,12 +1218,12 @@ export default function AnnotationSidebar({
           {/* error กับ hint เป็นคำเตือนคนละเรื่อง (ฟอร์มผิด vs ผลเป็นของเงื่อนไขเก่า)
               — มี error แสดงเดี่ยว ไม่ซ้อนสองข้อความพร้อมกัน */}
           {bmSearchError ? (
-            <p className="px-1 text-[11px] text-red-600">{bmSearchError}</p>
+            <p className="px-1 text-[11px] text-error-ink">{bmSearchError}</p>
           ) : (
             bmResults !== null &&
             bmSearchedSig !== null &&
             bmSearchedSig !== JSON.stringify([bmQuery.trim(), bmConditions]) && (
-              <p className="px-1 text-[11px] text-amber-600">
+              <p className="px-1 text-[11px] text-warning-ink">
                 เงื่อนไขเปลี่ยนแล้ว กด &quot;หา&quot; เพื่อค้นใหม่
               </p>
             )
@@ -1222,23 +1236,23 @@ export default function AnnotationSidebar({
           เนื้อหาใน list ด้านล่าง คลิกแถว = กระโดดไปตำแหน่ง + เลือก */}
       {tab === "annotations" && (
         <form
-          className="flex shrink-0 gap-1 border-b border-slate-200 p-2"
+          className="flex shrink-0 gap-1 border-b border-line p-2"
           onSubmit={(e) => void runSearch(e)}
         >
           <div className="relative min-w-0 flex-1">
-            <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
+            <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-ink-soft" />
             <input
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               onKeyDown={(e) => e.stopPropagation()} // ไม่ให้ปุ่มในช่องค้นหาชนคีย์ลัดของ viewer
               placeholder="ค้นหาในหมายเหตุ…"
-              className="w-full rounded-md border border-slate-300 py-1.5 pl-7 pr-2 text-xs focus:outline-none focus:ring-2 focus:ring-slate-400"
+              className="w-full rounded-md border border-line py-1.5 pl-7 pr-2 text-xs focus:border-primary focus:outline focus:outline-2 focus:outline-offset-1 focus:outline-primary"
             />
           </div>
           <button
             type="submit"
             disabled={!searchQuery.trim() || searching}
-            className={`shrink-0 rounded-md border border-slate-300 px-2 py-1.5 text-xs text-slate-600 hover:bg-slate-100 disabled:opacity-40 ${FOCUS_RING_CLS}`}
+            className={`shrink-0 rounded-md border border-line px-2 py-1.5 text-xs text-ink-soft hover:bg-ink/[0.05] disabled:opacity-40 ${FOCUS_RING_CLS}`}
           >
             {searching ? "…" : "หา"}
           </button>
@@ -1250,14 +1264,14 @@ export default function AnnotationSidebar({
           bmResults !== null ? (
             <div>
               <div className="flex items-center justify-between px-1 pb-1">
-                <p className="text-[11px] font-semibold tabular-nums text-slate-500">
+                <p className="text-[11px] font-semibold tabular-nums text-ink-soft">
                   ผลการค้นหา ({bmResults.length})
                 </p>
                 <button
                   type="button"
                   aria-label="ปิดผลการค้นหา"
                   title="กลับไปรายการที่คั่นหน้า"
-                  className={`text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`}
+                  className={`text-ink-soft hover:text-ink ${FOCUS_RING_CLS}`}
                   onClick={() => setBmResults(null)}
                 >
                   <X className="h-3.5 w-3.5" />
@@ -1267,14 +1281,14 @@ export default function AnnotationSidebar({
                   แชร์จอให้คนอื่นดู (แก้ฟอร์มหลังค้นบรรทัดนี้ไม่เปลี่ยน จนกด "หา" ใหม่) */}
               {bmSearchedSummary && (
                 <p
-                  className="truncate px-1 pb-1 text-[11px] text-slate-500"
+                  className="truncate px-1 pb-1 text-[11px] text-ink-soft"
                   title={bmSearchedSummary}
                 >
                   ค้นด้วย: {bmSearchedSummary}
                 </p>
               )}
               {bmResults.length === 0 ? (
-                <p className="px-1 pb-1 text-xs text-slate-500">ไม่พบ</p>
+                <p className="px-1 pb-1 text-xs text-ink-soft">ไม่พบ</p>
               ) : (
                 <ul className="space-y-0.5">
                   {bmResults.map((b) => {
@@ -1283,22 +1297,22 @@ export default function AnnotationSidebar({
                       <li key={b.id}>
                         <button
                           type="button"
-                          className={`flex w-full items-start gap-1.5 rounded px-1 py-1 text-left hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+                          className={`flex w-full items-start gap-1.5 rounded px-1 py-1 text-left hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
                           onClick={() => onGoToBookmark(b)}
                         >
-                          <Bookmark className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />
+                          <Bookmark className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning-ink" />
                           <span className="min-w-0">
                             <span className="block truncate text-[13px] leading-snug">{b.title}</span>
-                            <span className="block text-xs text-slate-500">
+                            <span className="block text-xs text-ink-soft">
                               หน้า {b.pageIndex + 1} · {b.userName || "ไม่ทราบชื่อ"}
                             </span>
                             {parent && (
-                              <span className="block truncate text-[11px] text-slate-500">
+                              <span className="block truncate text-[11px] text-ink-soft">
                                 ใน: {parent.title}
                               </span>
                             )}
                             {b.note && (
-                              <span className="mt-0.5 block line-clamp-2 whitespace-pre-wrap break-words text-[11px] text-slate-500">
+                              <span className="mt-0.5 block line-clamp-2 whitespace-pre-wrap break-words text-[11px] text-ink-soft">
                                 {b.note}
                               </span>
                             )}
@@ -1311,9 +1325,13 @@ export default function AnnotationSidebar({
               )}
             </div>
           ) : bookmarks.length === 0 ? (
-            <p className="p-4 text-center text-xs text-slate-500">
+            <p className="p-4 text-center text-xs text-ink-soft">
               ยังไม่มีที่คั่นหน้า — กดปุ่มคั่นหน้าบนแถบเครื่องมือเพื่อเพิ่ม
             </p>
+          ) : visibleBookmarks.length === 0 ? (
+            <p className="p-4 text-center text-xs text-ink-soft">
+              ไม่มีที่คั่นหน้าของเจ้าของหมายเหตุที่เลือก
+            </p>
           ) : (
             <>
               {/* สลับมุมมองแท็บนี้: ต้นไม้หัวข้อ ↔ root แยกตามหน้า */}
@@ -1341,34 +1359,34 @@ export default function AnnotationSidebar({
                       {!collapsed && (
                         <ul className="space-y-0.5">
                           {roots.map((b) => {
-                            const childCount = bookmarks.filter(
+                            const childCount = visibleBookmarks.filter(
                               (x) => x.parentId === b.id,
                             ).length;
                             return (
                               <li key={b.id}>
                                 <button
                                   type="button"
-                                  className="flex w-full items-start gap-1.5 rounded py-1 pl-5 pr-1 text-left hover:bg-slate-100"
+                                  className={`flex w-full items-start gap-1.5 rounded py-1 pl-5 pr-1 text-left hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
                                   onClick={() => onGoToBookmark(b)}
                                 >
-                                  <Bookmark className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />
+                                  <Bookmark className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning-ink" />
                                   <span className="min-w-0 flex-1">
-                                    <span className="block truncate text-[13px] leading-snug font-medium text-slate-700">
+                                    <span className="block truncate text-[13px] leading-snug font-medium text-ink">
                                       {b.title}
                                     </span>
                                     {/* ผู้บันทึกเหมือนแถวผลการค้นหา — ไม่ใส่ "หน้า N"
                                         เพราะหัวกลุ่มของมุมมองนี้บอกหน้าอยู่แล้ว */}
-                                    <span className="block text-xs text-slate-500">
+                                    <span className="block text-xs text-ink-soft">
                                       {b.userName || "ไม่ทราบชื่อ"}
                                     </span>
                                     {b.note && (
-                                      <span className="mt-0.5 block line-clamp-2 whitespace-pre-wrap break-words text-[11px] text-slate-500">
+                                      <span className="mt-0.5 block line-clamp-2 whitespace-pre-wrap break-words text-[11px] text-ink-soft">
                                         {b.note}
                                       </span>
                                     )}
                                   </span>
                                   {childCount > 0 && (
-                                    <span className="ml-auto shrink-0 self-center rounded-full bg-slate-100 px-1.5 text-[10px] tabular-nums leading-4 text-slate-500">
+                                    <span className="ml-auto shrink-0 self-center rounded-full bg-ink/[0.05] px-1.5 text-[10px] tabular-nums leading-4 text-ink-soft">
                                       {childCount}
                                     </span>
                                   )}
@@ -1384,7 +1402,7 @@ export default function AnnotationSidebar({
               ) : (
                 <ul className="space-y-0.5">
                   {/* N2: root = หมุดหัวข้อใหญ่ เรียงตามลำดับหน้า (N5) — sub render ซ้อนใต้ผ่าน renderBookmarkNode */}
-                  {bookmarks
+                  {visibleBookmarks
                     .filter((b) => !b.parentId)
                     .sort(byPageOrder)
                     .map((b) => renderBookmarkNode(b, 1))}
@@ -1395,29 +1413,29 @@ export default function AnnotationSidebar({
         ) : visibleSearchResults !== null ? (
           <div>
             <div className="flex items-center justify-between px-1 pb-1">
-              <p className="text-[11px] font-semibold tabular-nums text-slate-500">
+              <p className="text-[11px] font-semibold tabular-nums text-ink-soft">
                 ผลการค้นหา ({visibleSearchResults.length})
               </p>
               <button
                 type="button"
                 aria-label="ปิดผลการค้นหา"
                 title="กลับไปรายการหมายเหตุ"
-                className={`text-slate-500 hover:text-slate-600 ${FOCUS_RING_CLS}`}
+                className={`text-ink-soft hover:text-ink ${FOCUS_RING_CLS}`}
                 onClick={() => setSearchResults(null)}
               >
                 <X className="h-3.5 w-3.5" />
               </button>
             </div>
             {visibleSearchResults.length === 0 ? (
-              <p className="px-1 pb-1 text-xs text-slate-500">ไม่พบ</p>
+              <p className="px-1 pb-1 text-xs text-ink-soft">ไม่พบ</p>
             ) : (
               // reuse แถวเดิม — li มี data-ann-id ให้ effect scrollIntoView หาเจอ
               <ul className="space-y-1">{visibleSearchResults.map(renderAnnotationRow)}</ul>
             )}
           </div>
         ) : annotations.length === 0 ? (
-          <p className="p-4 text-center text-xs text-slate-500">
-            ยังไม่มีหมายเหตุ — คลุมข้อความ / วาดเส้น / คลิกวางคอมเมนต์บนหน้าเอกสาร
+          <p className="p-4 text-center text-xs text-ink-soft">
+            ยังไม่มีหมายเหตุ — คลุมข้อความ / วาดเส้น / คอมเมนต์บนหน้าเอกสาร
             <span className="mt-1 block text-[11px]">
               คีย์ลัด: H มาร์ก · D วาด · C comment · B คั่นหน้า · Ctrl+Z ย้อน
             </span>
@@ -1456,7 +1474,7 @@ export default function AnnotationSidebar({
               <>
                 {pendingItems.length > 0 && (
                   <section>
-                    <p className="px-2 pb-1 pt-2 text-[11px] font-semibold text-slate-500">
+                    <p className="px-2 pb-1 pt-2 text-[11px] font-semibold text-ink-soft">
                       ค้างดำเนินการ
                     </p>
                     <ul className="space-y-1">{pendingItems.map(renderAnnotationRow)}</ul>
@@ -1464,7 +1482,7 @@ export default function AnnotationSidebar({
                 )}
                 {resolvedItems.length > 0 && (
                   <section>
-                    <p className="px-2 pb-1 pt-3 text-[11px] font-semibold text-emerald-500">
+                    <p className="px-2 pb-1 pt-3 text-[11px] font-semibold text-success-ink">
                       จัดการแล้ว
                     </p>
                     <ul className="space-y-1">{resolvedItems.map(renderAnnotationRow)}</ul>
@@ -1486,35 +1504,35 @@ export default function AnnotationSidebar({
       {/* F19/A7: dialog ประวัติ — รายการ version (เวลา + ชนิดการเปลี่ยนแปลง) + ปุ่มกู้คืน */}
       {historyFor && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4"
           onClick={() => setHistoryFor(null)}
         >
           <div
             role="dialog"
             aria-modal="true"
             aria-label="ประวัติการเปลี่ยนแปลง"
-            className="w-96 max-w-full rounded-lg border border-slate-200 bg-white p-4 shadow-xl"
+            className="w-96 max-w-full rounded-lg border border-line bg-white p-4 shadow-xl"
             onClick={(e) => e.stopPropagation()}
           >
             <p className="text-sm font-semibold">ประวัติการเปลี่ยนแปลง</p>
-            <p className="mt-0.5 truncate text-[11px] text-slate-500">
+            <p className="mt-0.5 truncate text-[11px] text-ink-soft">
               {annotationPreviewText(historyFor)}
             </p>
             {historyError && (
-              <p className="mt-2 rounded bg-red-50 px-2 py-1 text-[11px] text-red-600">
+              <p className="mt-2 rounded bg-error/10 px-2 py-1 text-[11px] text-error-ink">
                 {historyError}
               </p>
             )}
             {versions === null && !historyError && (
-              <p className="mt-3 text-xs text-slate-500">กำลังโหลด…</p>
+              <p className="mt-3 text-xs text-ink-soft">กำลังโหลด…</p>
             )}
             {versions !== null && versions.length === 0 && (
-              <p className="mt-3 text-xs text-slate-500">
+              <p className="mt-3 text-xs text-ink-soft">
                 ยังไม่มีบันทึกการเปลี่ยนแปลง (เกิดขึ้นเมื่อแก้ไขหรือลบรายการนี้)
               </p>
             )}
             {versions !== null && versions.length > 0 && (
-              <ul className="mt-3 max-h-[60vh] divide-y divide-slate-100 overflow-y-auto">
+              <ul className="mt-3 max-h-[60vh] divide-y divide-line/60 overflow-y-auto">
                 {versions.map((v, i) => {
                   // สิ่งที่เปลี่ยนของรอบนี้ = snapshot ก่อนแก้ (v.data) เทียบ state
                   // ถัดไป: snapshot ของรอบแก้ที่ใหม่กว่าถัดไป (i-1) หรือค่าปัจจุบัน
@@ -1534,11 +1552,11 @@ export default function AnnotationSidebar({
                         <span className="block text-xs font-medium">
                           {v.kind === "delete" ? "ถูกลบ" : "ถูกแก้ไข"}
                         </span>
-                        <span className="block text-[11px] text-slate-500" suppressHydrationWarning>
+                        <span className="block text-[11px] text-ink-soft" suppressHydrationWarning>
                           {formatThaiDate(v.createdAt, true)} · โดย {v.userName}
                         </span>
                         {changes.map((c) => (
-                          <span key={c} className="mt-0.5 block text-[11px] text-slate-600">
+                          <span key={c} className="mt-0.5 block text-[11px] text-ink-soft">
                             {c}
                           </span>
                         ))}
@@ -1546,7 +1564,7 @@ export default function AnnotationSidebar({
                       <button
                         type="button"
                         disabled={restoringId !== null}
-                        className={`mt-0.5 shrink-0 rounded border border-slate-300 px-2 py-1 text-[11px] text-slate-600 hover:bg-slate-100 disabled:opacity-40 ${FOCUS_RING_CLS}`}
+                        className={`mt-0.5 shrink-0 rounded-md border border-line px-2 py-1 text-[11px] text-ink-soft hover:bg-ink/[0.05] disabled:opacity-40 ${FOCUS_RING_CLS}`}
                         onClick={() => void handleRestore(v.id)}
                       >
                         {restoringId === v.id ? "กำลังกู้คืน…" : "กู้คืน"}
@@ -1560,7 +1578,7 @@ export default function AnnotationSidebar({
               <button
                 type="button"
                 autoFocus
-                className={`rounded px-3 py-1.5 text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+                className={`rounded-md px-3 py-1.5 text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
                 onClick={() => setHistoryFor(null)}
               >
                 ปิด
@@ -1580,7 +1598,7 @@ export default function AnnotationSidebar({
           data-tool-menu=""
           role="menu"
           aria-label={menuFor.kind === "annotation" ? "จัดการหมายเหตุ" : "จัดการหัวข้อ"}
-          className="w-60 rounded-lg border border-slate-200 bg-white p-1.5 shadow-lg"
+          className="w-60 rounded-lg border border-line bg-white p-1.5 shadow-lg"
           style={{
             position: "fixed",
             left: menuPos.left,
@@ -1594,20 +1612,20 @@ export default function AnnotationSidebar({
         >
           {menuConfirmDelete ? (
             <div className="p-1">
-              <p className="px-1 text-xs text-slate-700">
+              <p className="px-1 text-xs text-ink">
                 ลบ{menuFor.kind === "annotation" ? "รายการ" : "หัวข้อ"}นี้?
               </p>
               <div className="mt-1.5 flex justify-end gap-1.5">
                 <button
                   type="button"
-                  className={`rounded px-2 py-1 text-xs text-slate-500 hover:bg-slate-100 ${FOCUS_RING_CLS}`}
+                  className={`rounded-md px-2 py-1 text-xs text-ink-soft hover:bg-ink/[0.05] ${FOCUS_RING_CLS}`}
                   onClick={closeRowMenu}
                 >
                   ยกเลิก
                 </button>
                 <button
                   type="button"
-                  className={`rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700 ${FOCUS_RING_CLS}`}
+                  className={`rounded-md border border-error px-2 py-1 text-xs font-medium text-error-ink hover:bg-error/10 ${FOCUS_RING_CLS}`}
                   onClick={() => {
                     // อ่าน kind/id ก่อน close — setMenuFor(null) แล้วเงื่อนไขเดิมหาย
                     if (menuFor.kind === "annotation") onDeleteAnnotation(menuFor.id);
@@ -1653,7 +1671,7 @@ export default function AnnotationSidebar({
               )}
               {menuAnn.userId === userId && (
                 <>
-                  <div className="my-1 border-t border-slate-100" />
+                  <div className="my-1 border-t border-line/60" />
                   <MenuItem
                     danger
                     Icon={Trash2}
@@ -1688,7 +1706,7 @@ export default function AnnotationSidebar({
               )}
               {menuBm.userId === userId && (
                 <>
-                  <div className="my-1 border-t border-slate-100" />
+                  <div className="my-1 border-t border-line/60" />
                   <MenuItem
                     danger
                     Icon={Trash2}

components/summary/CollapsibleBlock.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { useId, useState, type ReactNode } from "react";
-import { Bookmark, ChevronDown, ChevronRight, PenLine } from "lucide-react";
-
-/** หุบ/กางกลุ่มรายการ (Bookmark/Annotation) ในหน้าสรุป — client component ตัวเดียว
- *  ของหน้า: เก็บแค่ state หุบ/กางต่อบล็อก เริ่มกางไว้เสมอ (เปิดหน้าสรุปครั้งแรกเห็น
- *  ครบ ผู้ใช้พับเฉพาะกลุ่มที่ไม่สนใจ) — รายการ (children) ส่งมาจาก server component
- *  ได้ตรง ๆ และเยื้องเข้า (pl-5) ให้หัวข้อกับรายการไม่ชิดเส้นซ้ายเดียวกัน */
-const HEADS = {
-  bookmark: { label: "Bookmark", Icon: Bookmark, iconCls: "text-amber-500" },
-  annotation: { label: "Annotation", Icon: PenLine, iconCls: "text-slate-400" },
-} as const;
-
-export default function CollapsibleBlock({
-  kind,
-  count,
-  children,
-}: {
-  kind: keyof typeof HEADS;
-  count: number;
-  children: ReactNode;
-}) {
-  const [open, setOpen] = useState(true);
-  // design review 2026-09-17 L2: aria-controls ชี้ id ของก้อนเนื้อหา (useId
-  // กันชนกันระหว่างหลายหน้าเอกสารที่ render บล็อกนี้ซ้ำ)
-  const contentId = useId();
-  const { label, Icon, iconCls } = HEADS[kind];
-  return (
-    <div>
-      {/* h3 ครอบ button = disclosure pattern มาตรฐาน (heading level คงเดิม) */}
-      <h3>
-        <button
-          type="button"
-          aria-expanded={open}
-          aria-controls={contentId}
-          onClick={() => setOpen((v) => !v)}
-          className="flex w-full items-center gap-1.5 rounded-md py-1.5 text-left text-xs font-semibold text-slate-500 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
-        >
-          {open ? (
-            <ChevronDown aria-hidden className="h-3.5 w-3.5 shrink-0 text-slate-400" />
-          ) : (
-            <ChevronRight aria-hidden className="h-3.5 w-3.5 shrink-0 text-slate-400" />
-          )}
-          <Icon aria-hidden className={`h-3.5 w-3.5 shrink-0 ${iconCls}`} />
-          {label}
-          <span className="font-normal tabular-nums">({count})</span>
-          <span aria-hidden className="ml-1 h-px min-w-4 flex-1 bg-slate-100" />
-        </button>
-      </h3>
-      {open && (
-        <div id={contentId} className="pl-5">
-          {children}
-        </div>
-      )}
-    </div>
-  );
-}

components/summary/SummaryExplorer.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { ChevronDown, FileStack } from "lucide-react";
+
+import {
+  FacetFilterPanel,
+  createDefaultFacets,
+  type ExplorerItem,
+  type FacetFilterState,
+} from "@/components/explorer/FacetFilterPanel";
+import type { AnnotationType } from "@/db/schema";
+
+import { SummaryList } from "./SummaryList";
+
+// หน้าสรุปหมายเหตุ (F15/D2) redesign 2026-09-24 ตามคำขอผู้ใช้ — explorer 2 คอลัมน์
+// แบบหน้ากลุ่ม N9 โดยมิติแรกของตัวกรองเป็น "หน้า" แทน "ไฟล์" (ไฟล์เดียวทั้งหน้า):
+// ซ้าย = แผงตัวกรองกลาง FacetFilterPanel (หน้า/ชนิดรายการ/ชนิดของ Annotation/
+// ผู้บันทึก) ขวา = SummaryList การ์ดรายหน้า — ข้อมูล query ฝั่ง server ส่งมา
+// ครั้งเดียวแล้วกรองใน memory (read-only snapshot ไม่มี SSE เหมือนเดิม)
+
+export function SummaryExplorer({
+  fileId,
+  items,
+}: {
+  fileId: string;
+  items: ExplorerItem[];
+}) {
+  const [filters, setFilters] = useState<FacetFilterState>(createDefaultFacets);
+
+  // facet count เป็น static จากข้อมูลทั้งไฟล์ (ไม่หดตามตัวกรองอื่น — เหตุผลเดียว
+  // กับหน้ากลุ่ม)
+  const counts = useMemo(() => {
+    let bm = 0;
+    let ann = 0;
+    const type: Partial<Record<AnnotationType, number>> = {};
+    const user: Record<string, number> = {};
+    for (const it of items) {
+      user[it.dto.userId] = (user[it.dto.userId] ?? 0) + 1;
+      if (it.kind === "bm") bm++;
+      else {
+        ann++;
+        type[it.dto.type] = (type[it.dto.type] ?? 0) + 1;
+      }
+    }
+    return { total: items.length, bm, ann, type, user };
+  }, [items]);
+
+  // รายชื่อผู้บันทึกที่มีรายการจริง เรียงชื่อไทย — แทนบล็อก "ผู้ร่วมทำ" แบบอ่านอย่าง
+  // เดียวของหน้าเดิม (กรองตามคนได้ + เห็น count) — localeCompare "th" รันทั้ง
+  // SSR/hydration หลังย้ายมา client: CLDR สมัยใหม่ของ Node/browser ใกล้กันพอ
+  // รับความเสี่ยง mismatch ต่ำไว้ (code review 2026-09-24 — ถ้าเจอ hydration
+  // warning จริง ให้ย้าย sort นี้ไปฝั่ง server แล้วส่งเป็น prop)
+  const users = useMemo(() => {
+    const labelById = new Map<string, string>();
+    for (const it of items) {
+      if (!labelById.has(it.dto.userId)) {
+        labelById.set(it.dto.userId, it.dto.userName || "ไม่ทราบชื่อ");
+      }
+    }
+    const out: { userId: string; label: string }[] = [];
+    labelById.forEach((label, userId) => out.push({ userId, label }));
+    return out.sort((a, b) => a.label.localeCompare(b.label, "th"));
+  }, [items]);
+
+  // มิติ "หน้า": เฉพาะหน้าที่มีรายการ ≥1 เรียงน้อย→มาก (ทางเข้าหน้าแทนรายการตาม
+  // หน้าจุดไข่ปลาของหน้าเดิม — เห็น count ก่อนกระโดดดีกว่า) — ไอคอนเป็น spacer
+  // ให้เลขชิดซ้ายตรงแนวกลุ่มผู้บันทึก; หน้าเยอะเป็นสิบ ๆ รายการใช้ optionsScroll
+  // ให้ scroll ภายในกลุ่ม (max-h-64) กันกลุ่มอื่นถูกดันออกนอกจอ
+  const pageOptions = useMemo(() => {
+    const perPage = new Map<number, number>();
+    for (const it of items) {
+      perPage.set(it.pageIndex, (perPage.get(it.pageIndex) ?? 0) + 1);
+    }
+    return Array.from(perPage.entries())
+      .sort((a, b) => a[0] - b[0])
+      .map(([pi, n]) => ({
+        key: pi,
+        label: `หน้า ${pi + 1}`,
+        count: n,
+        icon: <span aria-hidden className="w-4 shrink-0" />,
+      }));
+  }, [items]);
+
+  const firstGroup = {
+    label: "หน้า",
+    parentIcon: (
+      <FileStack aria-hidden className="h-4 w-4 shrink-0 text-ink-soft" />
+    ),
+    allLabel: "ทุกหน้า",
+    options: pageOptions,
+    optionsScroll: true,
+  };
+
+  // pure predicate — ห้าม sort ซ้ำ (server เรียงลำดับอ่านให้แล้ว)
+  const filtered = useMemo(
+    () =>
+      items.filter(
+        (it) =>
+          (filters.first === null || it.pageIndex === filters.first) &&
+          (filters.kinds.size === 0 || filters.kinds.has(it.kind)) &&
+          (it.kind === "ann"
+            ? filters.types.size === 0 || filters.types.has(it.dto.type)
+            : true) &&
+          (filters.userId === null || it.dto.userId === filters.userId),
+      ),
+    [items, filters],
+  );
+
+  // จำนวนตัวกรองที่ ≠ default — โชว์ที่ summary มือถือ (กัน "กรองเก่ากรองเงียบ")
+  // และเป็นเงื่อนไขปุ่ม "ล้างตัวกรอง"/ชุดพิมพ์ฉบับเต็ม
+  const activeCount =
+    (filters.first !== null ? 1 : 0) +
+    (filters.kinds.size > 0 ? 1 : 0) +
+    (filters.types.size > 0 ? 1 : 0) +
+    (filters.userId !== null ? 1 : 0);
+
+  const resetFilters = () => setFilters(createDefaultFacets());
+
+  return (
+    <div className="mt-6 lg:grid lg:grid-cols-[15rem_minmax(0,1fr)] lg:items-start lg:gap-8">
+      {/* มือถือ (< lg): ตัวกรองหุบ/กางเป็น <details> — named group `group/filters`
+          กัน `group-open:` match ancestor ซ้ำชื่อ (pattern ของหน้ากลุ่ม); ตอนพิมพ์
+          ซ่อนทั้งสอง shell — กระดาษได้ฉบับเต็มจาก SummaryList เสมอ */}
+      <details className="group/filters rounded-xl border border-line bg-white lg:hidden print:hidden">
+        <summary className="focus-ring flex cursor-pointer list-none items-center justify-between rounded-md px-4 py-3 text-sm font-semibold text-ink transition hover:text-primary [&::-webkit-details-marker]:hidden">
+          ตัวกรอง{activeCount > 0 ? ` (${activeCount})` : ""}
+          <ChevronDown
+            aria-hidden
+            className="h-4 w-4 shrink-0 text-ink-faint transition-transform group-open/filters:rotate-180 motion-reduce:transition-none"
+          />
+        </summary>
+        <div className="max-h-[70dvh] overscroll-contain overflow-y-auto border-t border-line/70 px-2.5 pb-3 pt-1">
+          <FacetFilterPanel
+            state={filters}
+            onChange={setFilters}
+            firstGroup={firstGroup}
+            users={users}
+            counts={counts}
+          />
+        </div>
+      </details>
+
+      {/* desktop: แผงตัวกรอง sticky — หน้าไม่มี navbar จึง top-6 พอ (เหมือนหน้ากลุ่ม) */}
+      <aside
+        aria-label="ตัวกรองรายการ"
+        className="hidden rounded-xl border border-line bg-white p-3 lg:sticky lg:top-6 lg:block lg:max-h-[calc(100dvh-3rem)] lg:scroll-pb-1 lg:scroll-pt-1 lg:overflow-y-auto print:hidden"
+      >
+        <h2 className="px-1.5 text-sm font-semibold text-ink">
+          ตัวกรอง{activeCount > 0 ? ` (${activeCount})` : ""}
+        </h2>
+        <div className="mt-3">
+          <FacetFilterPanel
+            state={filters}
+            onChange={setFilters}
+            firstGroup={firstGroup}
+            users={users}
+            counts={counts}
+          />
+        </div>
+      </aside>
+
+      {/* div ไม่ใช่ section — กฎ print `main.summary-page section` (break-inside
+          avoid-page) มุ่งที่การ์ดรายหน้าข้างใน ห้ามครอบทั้ง list กลายเป็นก้อนเดียว */}
+      <div className="mt-5 lg:mt-0">
+        <SummaryList
+          fileId={fileId}
+          items={filtered}
+          allItems={items}
+          activeCount={activeCount}
+          onReset={resetFilters}
+        />
+      </div>
+    </div>
+  );
+}

components/summary/SummaryList.tsx

@@ -0,0 +1,334 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo } from "react";
+import {
+  Bookmark,
+  ChevronRight,
+  ListFilter,
+  StickyNote,
+} from "lucide-react";
+
+import { AnnotationTypeIcon } from "@/components/AnnotationTypeIcon";
+import type { ExplorerItem } from "@/components/explorer/FacetFilterPanel";
+import type { AnnotationType } from "@/db/schema";
+import {
+  TYPE_ORDER,
+  TYPE_SHORT,
+  annotationNote,
+  annotationPreviewText,
+  annotationTypeLabel,
+} from "@/utils/annotation-display";
+import { formatThaiDate } from "@/utils/date-format";
+
+// คอลัมน์ content ของหน้าสรุป (redesign 2026-09-24) — คงหลัก "1 หน้า 1 การ์ด"
+// ของหน้าเดิมแต่ผิวบางลง: หัวการ์ด sticky (เลขหน้า + บรรทัดสรุป + เปิดหน้านี้)
+// แทนขอบ folio เต็ม ส่วนแถวรายการเป็น passive surface จุดคลิกเดียวคือปุ่ม
+// "View" ท้ายแถวเหมือน GroupList ของหน้ากลุ่ม (คำขอผู้ใช้ 2026-09-24) — deep
+// link ?ann= / ?page= เดิม; meta line ไม่มี segment ไฟล์ (ไฟล์เดียวทั้งหน้า)
+
+/** บรรทัดสรุปของหน้า จากรายการที่มองเห็นจริงหลังกรอง (ย้ายจาก server 2026-09-24 —
+ *  กรองเหลือแต่เส้นวาดของใครคนหนึ่ง บรรทัดสรุปต้องเล่าเรื่องนั้น ไม่ใช่ยอดดิบ):
+ *  "ไฮไลต์ 1 · คอมเมนต์ 1 (จัดการแล้ว 1) · โดย ผู้พิพากษา ก., เลขานุการ ข."
+ *  (หน้าที่เหลือแต่ที่คั่นหน้า = "โดย …" อย่างเดียว) */
+function pageSummaryLine(items: ExplorerItem[]): string {
+  const typeCounts: Partial<Record<AnnotationType, number>> = {};
+  let resolvedCount = 0;
+  const participants = new Set<string>();
+  for (const it of items) {
+    if (it.kind === "ann") {
+      typeCounts[it.dto.type] = (typeCounts[it.dto.type] ?? 0) + 1;
+      if (it.dto.type === "COMMENT" && it.dto.resolved) resolvedCount += 1;
+      participants.add(it.dto.userName);
+    } else {
+      participants.add(it.dto.userName || "ไม่ทราบชื่อ");
+    }
+  }
+  const parts: string[] = [];
+  for (const t of TYPE_ORDER) {
+    const n = typeCounts[t];
+    if (!n) continue;
+    if (t === "COMMENT" && resolvedCount > 0)
+      parts.push(`คอมเมนต์ ${n} (จัดการแล้ว ${resolvedCount})`);
+    else parts.push(`${TYPE_SHORT[t]} ${n}`);
+  }
+  // localeCompare "th" ทั้ง SSR/hydration — รับความเสี่ยง mismatch ต่ำไว้เหมือน
+  // users ของ SummaryExplorer (code review 2026-09-24)
+  const who = Array.from(participants).sort((x, y) => x.localeCompare(y, "th"));
+  const shown = who.slice(0, 3).join(", ");
+  const whoLabel = who.length > 3 ? `${shown} และอีก ${who.length - 3} คน` : shown;
+  return parts.length > 0 ? `${parts.join(" · ")} · โดย ${whoLabel}` : `โดย ${whoLabel}`;
+}
+
+/** จุดคั่น "·" ของ meta line */
+function Sep() {
+  return <span aria-hidden className="text-ink-faint">·</span>;
+}
+
+/** meta line ของแถวสรุป: บริบทกลาง ("ใน: …" ของ sub bookmark / ชื่อชนิดของ
+ *  annotation) → ผู้บันทึก → วันที่ — ต่างจาก GroupList ตรงไม่มี segment ไฟล์
+ *  (ไฟล์เดียว ชื่ออยู่แถบหัวของหน้าเองแล้ว) */
+function RowMeta({
+  middle,
+  user,
+  date,
+}: {
+  middle?: string;
+  user: string;
+  date: string;
+}) {
+  return (
+    <span className="mt-0.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs text-ink-soft">
+      {middle && (
+        <>
+          <span className="min-w-0 max-w-full truncate" title={middle}>
+            {middle}
+          </span>
+          <Sep />
+        </>
+      )}
+      <span className="min-w-0 max-w-full truncate">โดย {user}</span>
+      <Sep />
+      {/* formatThaiDate แปลงตาม timezone เคื่องที่ render — SSR/server กับ
+          hydration/ผู้ใช้อาจต่างกัน ใส่ suppressHydrationWarning ตาม convention
+          (เดียวกับ GroupList/AnnotationSidebar) */}
+      <span className="whitespace-nowrap" suppressHydrationWarning>
+        {date}
+      </span>
+    </span>
+  );
+}
+
+/** โน้ตคำอธิบาย (N1) / โน้ตย่อยของ bookmark (N2) — 2 บรรทัดพอ */
+function RowNote({ text }: { text: string }) {
+  return (
+    <span className="mt-0.5 flex items-start gap-1 text-xs leading-relaxed text-ink-soft">
+      <StickyNote aria-hidden className="mt-0.5 h-3 w-3 shrink-0 text-warning-ink" />
+      <span className="line-clamp-2 whitespace-pre-wrap break-words">{text}</span>
+    </span>
+  );
+}
+
+/** การ์ดรายหน้าตามจำนวนที่ได้เห็น — anchorIds เฉพาะชุดบนจอ (ชุดพิมพ์ฉบับเต็ม
+ *  ที่ render คู่กันตอนกรองอยู่ต้องไม่มี id ซ้ำ) */
+function PageSections({
+  fileId,
+  items,
+  anchorIds,
+}: {
+  fileId: string;
+  items: ExplorerItem[];
+  anchorIds: boolean;
+}) {
+  // จัดกลุ่มตามหน้า — Map เรียงตาม insertion = หน้าน้อย→มาก (items เรียงจาก server)
+  const pages = useMemo(() => {
+    const byPage = new Map<number, ExplorerItem[]>();
+    for (const it of items) {
+      let arr = byPage.get(it.pageIndex);
+      if (!arr) {
+        arr = [];
+        byPage.set(it.pageIndex, arr);
+      }
+      arr.push(it);
+    }
+    return Array.from(byPage.entries());
+  }, [items]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {pages.map(([pi, pageItems]) => (
+        // ห้ามใส่ overflow-hidden — ฆ่า position:sticky ของหัวการ์ด (sticky ไม่
+        // ทำงานใน ancestor ที่ overflow:hidden; มุมโค้งไม่มีสีหลุดมุมเพราะหัวการ์ด
+        // ขาวบนการ์ดขาว) — id page-N คงจากหน้าเดิมให้ลิงก์เก่ายังใช้ได้
+        <section
+          key={pi}
+          id={anchorIds ? `page-${pi + 1}` : undefined}
+          aria-labelledby={anchorIds ? `page-${pi + 1}-title` : undefined}
+          className="scroll-mt-6 rounded-xl border border-line bg-white"
+        >
+          {/* หัวการ์ด sticky ระดับ viewport — ไต่ list ยาวแล้วยังรู้ว่าอยู่หน้าไหน
+              (รับช่วง orientation จากรายการตามหน้าจุดไข่ปลาที่ถอดออก; บนกระดาษ
+              กลับเป็นตำแหน่งปกติผ่านกฎ .page-head ใน globals.css) */}
+          <div className="page-head sticky top-0 z-10 flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-line bg-white px-3 py-2.5 sm:px-4">
+            <h2
+              id={anchorIds ? `page-${pi + 1}-title` : undefined}
+              className="flex items-baseline gap-1 tabular-nums"
+            >
+              <span className="text-[11px] font-medium text-ink-soft">หน้า</span>
+              {/* เลขหน้าเป็น ink ไม่ใช่ primary — Genesis "น้ำเงินเฉพาะของ
+                  interactive" ความเด่นมาจาก font-display semibold */}
+              <span className="font-display text-lg font-semibold leading-none text-ink">
+                {pi + 1}
+              </span>
+            </h2>
+            <p className="min-w-0 flex-1 text-xs leading-relaxed text-ink-soft">
+              {pageSummaryLine(pageItems)}
+            </p>
+            <Link
+              href={`/note/annotate/${fileId}?page=${pi + 1}`}
+              className="focus-ring inline-flex shrink-0 items-center gap-0.5 text-xs text-primary hover:underline"
+            >
+              เปิดหน้านี้
+              <ChevronRight aria-hidden className="h-3 w-3" />
+            </Link>
+          </div>
+
+          <ul className="divide-y divide-line/70">
+            {pageItems.map((item) => {
+              const isBm = item.kind === "bm";
+              // ปลายทาง + คำบอกตำแหน่งต่อชนิดรายการ (title tooltip + aria-label
+              // ของปุ่ม View — ปุ่มชื่อเหมือนกันทั้ง list ต้องรู้จักแยก) ไม่ต่อ
+              // ชื่อไฟล์เหมือนหน้ากลุ่ม (ไฟล์เดียว ชื่ออยู่แถบหัวแล้ว)
+              const where = isBm
+                ? `ไปที่หน้า ${item.pageIndex + 1}`
+                : `ดู${annotationTypeLabel(item.dto)}ที่หน้า ${item.pageIndex + 1}`;
+              const href = isBm
+                ? `/note/annotate/${fileId}?page=${item.pageIndex + 1}`
+                : `/note/annotate/${fileId}?ann=${item.dto.id}`;
+              return (
+                // แถวเป็น passive surface — จุดคลิกเดียวคือปุ่ม "View" ท้ายแถว
+                // (คำขอผู้ใช้ 2026-09-24 เหมือนหน้ากลุ่ม) จึงไม่มี hover bg ที่แถว
+                <li
+                  key={item.dto.id}
+                  className="flex items-start gap-2.5 px-3 py-3 sm:px-4"
+                >
+                  {isBm ? (
+                    <>
+                      <Bookmark
+                        aria-hidden
+                        className="mt-1 h-4 w-4 shrink-0 text-warning-ink"
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span className="block whitespace-pre-wrap break-words text-sm font-medium leading-snug text-ink">
+                          {item.dto.title}
+                        </span>
+                        <RowMeta
+                          middle={
+                            item.parentTitle
+                              ? `ใน: ${item.parentTitle}`
+                              : undefined
+                          }
+                          user={item.dto.userName || "ไม่ทราบชื่อ"}
+                          date={formatThaiDate(item.dto.createdAt, true)}
+                        />
+                        {item.dto.note && <RowNote text={item.dto.note} />}
+                      </span>
+                    </>
+                  ) : (
+                    <>
+                      <AnnotationTypeIcon
+                        type={item.dto.type}
+                        data={item.dto.data}
+                        className="mt-1 h-4 w-4 shrink-0 text-ink-soft"
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span className="block whitespace-pre-wrap break-words text-sm leading-snug text-ink">
+                          {annotationPreviewText(item.dto)}
+                          {item.dto.type === "COMMENT" && item.dto.resolved && (
+                            <span className="ml-1.5 whitespace-nowrap rounded border border-success/40 bg-success/10 px-1.5 py-0.5 text-xs font-medium text-success-ink">
+                              จัดการแล้ว
+                            </span>
+                          )}
+                        </span>
+                        <RowMeta
+                          middle={annotationTypeLabel(item.dto)}
+                          user={item.dto.userName}
+                          date={formatThaiDate(item.dto.createdAt, true)}
+                        />
+                        {annotationNote(item.dto) && (
+                          <RowNote text={annotationNote(item.dto)} />
+                        )}
+                      </span>
+                    </>
+                  )}
+                  {/* scroll-mt-12: โฟกัสผ่าน Tab แล้วปุ่มไม่จมใต้หัวการ์ด sticky
+                      (~41px) — WCAG 2.4.11 Focus not obscured */}
+                  <Link
+                    href={href}
+                    title={where}
+                    aria-label={`View — ${where}`}
+                    className="focus-ring mt-0.5 inline-flex h-8 shrink-0 scroll-mt-12 items-center rounded-md border border-line bg-white px-3 text-sm font-medium text-ink transition hover:-translate-y-px hover:border-primary hover:text-primary"
+                  >
+                    View
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </section>
+      ))}
+    </div>
+  );
+}
+
+export function SummaryList({
+  fileId,
+  items,
+  allItems,
+  activeCount,
+  onReset,
+}: {
+  fileId: string;
+  /** ผ่านตัวกรองแล้ว (เรียงลำดับจาก server คงเดิม) */
+  items: ExplorerItem[];
+  /** ข้อมูลทั้งหมดก่อนกรอง — ใช้เป็นชุดพิมพ์ฉบับเต็มตอนกรองอยู่ */
+  allItems: ExplorerItem[];
+  activeCount: number;
+  onReset: () => void;
+}) {
+  return (
+    <>
+      {/* จำนวนผลลัพธ์อยู่ต้นคอลัมน์ content (ที่เห็นผลของตัวกรอง) ไม่ใช่ในแผง —
+          aria-live ให้ screen reader ได้รับแจ้งผลกรองทันทีที่ toggle */}
+      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5 px-1 pb-2.5 print:hidden">
+        <p className="text-sm text-ink-soft" aria-live="polite">
+          พบ{" "}
+          <span className="font-semibold tabular-nums text-ink">
+            {items.length}
+          </span>{" "}
+          รายการ
+        </p>
+        {activeCount > 0 && (
+          <button
+            type="button"
+            onClick={onReset}
+            className="focus-ring rounded-md px-1.5 text-sm text-primary transition hover:underline"
+          >
+            ล้างตัวกรอง
+          </button>
+        )}
+      </div>
+
+      {items.length > 0 && (
+        <div className={activeCount > 0 ? "print:hidden" : undefined}>
+          <PageSections fileId={fileId} items={items} anchorIds />
+        </div>
+      )}
+
+      {items.length === 0 && (
+        <div className="rounded-xl border border-dashed border-line bg-white/70 p-10 text-center print:hidden">
+          <ListFilter aria-hidden className="mx-auto h-8 w-8 text-ink-faint" />
+          <p className="mt-3 text-sm font-medium text-ink-soft">
+            ไม่มีรายการตรงตามตัวกรอง
+          </p>
+          <button
+            type="button"
+            onClick={onReset}
+            className="focus-ring mt-4 inline-flex rounded-md border border-line bg-white px-4 py-2 text-sm font-medium text-ink transition hover:-translate-y-px hover:border-ink-faint"
+          >
+            ล้างตัวกรองทั้งหมด
+          </button>
+        </div>
+      )}
+
+      {/* ตอนพิมพ์แสดงฉบับเต็มเสมอ — ตัวกรองที่ตั้งค้างไว้ต้องไม่ตัดรายการออกเงียบ ๆ
+          บนกระดาษ (หน้าสรุปมีโอกาสถูกพิมพ์แนบสำนวน ความครบถ้วนสำคัญกว่า subset —
+          ต้องการ subset มี export CSV อยู่แล้ว); ไม่กรอง = DOM ชุดเดียวไม่ซ้ำ */}
+      {activeCount > 0 && (
+        <div className="hidden print:block">
+          <PageSections fileId={fileId} items={allItems} anchorIds={false} />
+        </div>
+      )}
+    </>
+  );
+}

components/wordaddin/ConfirmVersionDialog.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import { Spinner } from "./Spinner";
+
+/**
+ * FR-2 ขั้นตอนที่ 1 — dialog ยืนยัน "สร้าง version ใหม่ของเอกสารนี้หรือไม่?" พร้อมชื่อ commit
+ * message ทางเลือก (FR-13) — ใช้ร่วมกับทั้ง Save & Version และ Start Versioning
+ * FR-18 — มี onConfirmClose = มีปุ่มที่สอง [บันทึกเวอร์ชันและปิดเอกสาร] เป็น primary ตัวเดียว
+ * (ปุ่มยืนยันหลักกลายเป็น secondary) ส่งเฉพาะ platform ที่ปิดเอกสารได้
+ * พอร์ตจาก ConfirmVersionDialog.tsx ต้นฉบับ — แทน Dialog ของ Fluent ด้วย portal + Genesis
+ * (pattern overlay เดียวกับ AnnotationSidebar)
+ */
+
+const DEFAULT_TITLE = "สร้าง version ใหม่?";
+const DEFAULT_DESCRIPTION = "ระบบจะบันทึกไฟล์ปัจจุบันและอัปโหลดเป็น version ถัดไปของเอกสารนี้";
+const DEFAULT_CONFIRM_LABEL = "สร้าง version";
+
+const BTN_SECONDARY =
+  "focus-ring rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink transition hover:border-primary hover:text-primary disabled:pointer-events-none disabled:opacity-50";
+const BTN_PRIMARY =
+  "focus-ring rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow disabled:pointer-events-none disabled:opacity-50";
+
+export function ConfirmVersionDialog({
+  open,
+  busy,
+  title,
+  description,
+  confirmLabel,
+  onConfirm,
+  onConfirmClose,
+  onDismiss,
+}: {
+  open: boolean;
+  /** กำลังอยู่ระหว่าง flow หลังกดยืนยันแล้ว — ปุ่มทั้งหมด disable + แสดง spinner + ปิดไม่ได้ */
+  busy: boolean;
+  /** ปรับข้อความตอน reuse กับ flow อื่น (FR-13 — Start Versioning ใช้ dialog ตัวเดียวกัน) */
+  title?: string;
+  description?: ReactNode;
+  confirmLabel?: string;
+  /** ได้รับ commit message ที่ผู้ใช้พิมพ์ (FR-13) — ว่างได้ */
+  onConfirm: (message: string) => void;
+  /** FR-18 — submit ที่สอง "บันทึกเวอร์ชันและปิดเอกสาร" */
+  onConfirmClose?: (message: string) => void;
+  onDismiss: () => void;
+}) {
+  const [message, setMessage] = useState("");
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // component ถูก mount ค้างไว้ตลอด (TaskpaneApp render ไว้นอก phase branch) — ต้องเคลียร์ค่าตอนปิด
+  // ไม่ใช่ตอน unmount ไม่งั้นข้อความรอบก่อนหลุดมารอบถัดไป
+  useEffect(() => {
+    if (!open) {
+      setMessage("");
+    }
+  }, [open]);
+
+  // ESC = ยกเลิก (เฉพาะไม่กำลัง busy — ตอน busy ห้ามปิดได้ทุกทางตาม spec)
+  // Tab กักไว้ใน dialog — สิ่งที่ Fluent Dialog เคยทำให้อัตโนมัติ (WCAG 2.1.2/2.4.3)
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !busy) onDismiss();
+      if (event.key === "Tab") {
+        const focusables = dialogRef.current?.querySelectorAll<HTMLElement>(
+          "button:not([disabled]), textarea:not([disabled]), [href], input, select, [tabindex]:not([tabindex='-1'])",
+        );
+        const first = focusables?.item(0);
+        const last = focusables?.item((focusables?.length ?? 0) - 1);
+        if (!first || !last) return;
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, busy, onDismiss]);
+
+  // โฟกัสเข้า dialog ตอนเปิด + คืน focus ให้ trigger เดิมตอนปิด (อีกส่วนที่ Fluent เคยทำให้)
+  useEffect(() => {
+    if (!open) return;
+    const previous = document.activeElement as HTMLElement | null;
+    dialogRef.current?.focus();
+    return () => {
+      previous?.focus();
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4"
+      onClick={() => !busy && onDismiss()}
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title ?? DEFAULT_TITLE}
+        tabIndex={-1}
+        className="w-full max-w-sm rounded-xl border border-line bg-white p-4 shadow-lg focus:outline-none"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <h2 className="font-display text-base font-semibold text-ink">{title ?? DEFAULT_TITLE}</h2>
+        <p className="mt-1 text-sm text-ink-soft">{description ?? DEFAULT_DESCRIPTION}</p>
+        <label className="mt-3 block text-sm font-medium text-ink" htmlFor="wordaddin-version-message">
+          คำอธิบาย version (ไม่บังคับ)
+        </label>
+        <textarea
+          id="wordaddin-version-message"
+          className="genesis-input mt-1 block w-full resize-y"
+          value={message}
+          onChange={(event) => setMessage(event.target.value)}
+          placeholder="เช่น แก้ไขข้อ 3 สัญญาจ้าง"
+          maxLength={2048}
+          rows={3}
+          disabled={busy}
+          aria-label="คำอธิบาย version"
+        />
+        {busy ? (
+          <div className="mt-3">
+            <Spinner label="กำลังดำเนินการ…" />
+          </div>
+        ) : null}
+        {/* จอแคบ: 3 ปุ่มในบรรทัดเดียว wrap ไม่มีแบบแผน (ปุ่ม primary ตกบรรทัดเดี่ยวเป็นเศษ)
+            → จัดเป็น 2 แถวโดยตั้งใจ — คู่ ยกเลิก/ยืนยัน บน + ปุ่ม primary เต็มความกว้างล่าง */}
+        <div className="mt-4 flex flex-col gap-2">
+          <div className="flex justify-end gap-2">
+            <button type="button" className={BTN_SECONDARY} disabled={busy} onClick={onDismiss}>
+              ยกเลิก
+            </button>
+            <button
+              type="button"
+              className={onConfirmClose ? BTN_SECONDARY : BTN_PRIMARY}
+              disabled={busy}
+              onClick={() => onConfirm(message)}
+            >
+              {confirmLabel ?? DEFAULT_CONFIRM_LABEL}
+            </button>
+          </div>
+          {onConfirmClose ? (
+            <button
+              type="button"
+              className={`${BTN_PRIMARY} w-full`}
+              disabled={busy}
+              onClick={() => onConfirmClose(message)}
+            >
+              บันทึกเวอร์ชันและปิดเอกสาร
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export default ConfirmVersionDialog;

components/wordaddin/MessageBar.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import { CircleAlert, CircleCheck, TriangleAlert } from "lucide-react";
+
+/**
+ * Genesis MessageBar ของ wordaddin — แทน MessageBar ของ Fluent UI v9 ต้นฉบับ
+ * intent error = ข้อความ/ไอคอนใช้เฉด -ink (contrast ≥5:1 ตาม DESIGN.md), พื้น tint จาง
+ * มี icon นำตามระดับ — แยกด้วยรูปทรง ไม่ใช่สีอย่างเดียว (WCAG 1.4.1) + role ให้ screen
+ * reader ประกาศ (error = alert, ที่เหลือ = status polite — WCAG 4.1.3) + w-full ให้ทุก
+ * แถบกว้างเท่ากันทั้งคอลัมน์
+ * prop action = ปุ่มเสริมในแถบ (เช่น "ลองใหม่" ของ bootError/history error)
+ */
+
+const ICONS = {
+  error: CircleAlert,
+  warning: TriangleAlert,
+  success: CircleCheck,
+} as const;
+
+export function MessageBar({
+  intent,
+  children,
+  action,
+}: {
+  intent: "error" | "warning" | "success";
+  children: ReactNode;
+  action?: ReactNode;
+}) {
+  const Icon = ICONS[intent];
+  const tone =
+    intent === "error"
+      ? "border-error/30 bg-error/10 text-error-ink"
+      : intent === "warning"
+        ? "border-warning/30 bg-warning/15 text-warning-ink"
+        : "border-success/30 bg-success/10 text-success-ink";
+  return (
+    <div
+      role={intent === "error" ? "alert" : "status"}
+      className={`flex w-full items-start gap-2 rounded-lg border px-3 py-2 text-sm ${tone}`}
+    >
+      <Icon className="mt-0.5 size-4 shrink-0" aria-hidden />
+      <div className="min-w-0 flex-1 break-words">{children}</div>
+      {action ? <div className="shrink-0">{action}</div> : null}
+    </div>
+  );
+}

components/wordaddin/SaveControls.tsx

@@ -0,0 +1,65 @@
+import { CircleCheck, Save, X } from "lucide-react";
+
+import { MessageBar } from "./MessageBar";
+import { Spinner } from "./Spinner";
+
+/**
+ * FR-17/FR-18 — ปุ่ม [บันทึก] / [บันทึกและปิดเอกสาร] + สถานะการบันทึก (ใช้ทุก phase ตาม spec v10)
+ * banner autoSaveError ย้ายไปอยู่เหนือ toggle แท็บของ TaskpaneApp (2026-10-20) — ให้เห็นทั้งสองแท็บ
+ * พอร์ตจาก SaveControls ใน App.tsx ต้นฉบับ (D:\word-addin-poc\addin) — logic เดิม เปลี่ยนแค่ชั้นภาพ
+ */
+export function SaveControls({
+  disabled,
+  busy,
+  status,
+  error,
+  closeSupported,
+  onSave,
+  onSaveAndClose,
+}: {
+  /** กำลังอยู่ใน flow อื่น (versioning) — ปิดปุ่มกันกดซ้อน */
+  disabled: boolean;
+  busy: boolean;
+  status: "saving" | "saved" | null;
+  error: string | null;
+  closeSupported: boolean;
+  onSave: () => void;
+  onSaveAndClose: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          className="focus-ring inline-flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink transition hover:border-primary hover:text-primary disabled:pointer-events-none disabled:opacity-50"
+          disabled={disabled || busy}
+          onClick={onSave}
+        >
+          <Save className="size-4" aria-hidden />
+          บันทึก
+        </button>
+        {closeSupported ? (
+          <button
+            type="button"
+            className="focus-ring inline-flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink transition hover:border-primary hover:text-primary disabled:pointer-events-none disabled:opacity-50"
+            disabled={disabled || busy}
+            onClick={onSaveAndClose}
+          >
+            <X className="size-4" aria-hidden />
+            บันทึกและปิดเอกสาร
+          </button>
+        ) : null}
+      </div>
+      {busy && status === "saving" ? <Spinner label="กำลังบันทึก…" /> : null}
+      {!busy && status === "saved" ? (
+        <p className="inline-flex items-center gap-1.5 text-sm text-ink-soft">
+          <CircleCheck className="size-4 text-success-ink" aria-hidden />
+          บันทึกแล้ว
+        </p>
+      ) : null}
+      {error ? <MessageBar intent="error">{error}</MessageBar> : null}
+    </div>
+  );
+}
+
+export default SaveControls;

components/wordaddin/Spinner.tsx

@@ -0,0 +1,13 @@
+import { LoaderCircle } from "lucide-react";
+
+/** Genesis Spinner — แทน Spinner ของ Fluent UI v9 ต้นฉบับ (ใช้ไอคอนหมุนของ lucide)
+ *  role="status" ให้ progressMessage ที่เปลี่ยนตลอด flow ถูกประกาศแบบ polite (WCAG 4.1.3) */
+export function Spinner({ label, className = "" }: { label?: string; className?: string }) {
+  return (
+    <span role="status" className={`inline-flex items-center gap-2 text-sm text-ink-soft ${className}`}>
+      <LoaderCircle className="size-4 animate-spin" aria-hidden />
+      {label ? <span>{label}</span> : null}
+      {!label ? <span className="sr-only">กำลังโหลด…</span> : null}
+    </span>
+  );
+}

components/wordaddin/TaskpaneApp.tsx

@@ -0,0 +1,646 @@
+/* global Office */
+
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { FileUp, GitCommitHorizontal, LogOut } from "lucide-react";
+
+import { autoSaveService } from "@/wordaddin/services/autoSaveService";
+import * as authService from "@/wordaddin/services/authService";
+import { AuthRequiredError } from "@/wordaddin/services/apiClient";
+import * as documentService from "@/wordaddin/services/documentService";
+import { getErrorMessage } from "@/wordaddin/services/errors";
+import * as metadataService from "@/wordaddin/services/metadataService";
+import { getDownloadLink, getVersions } from "@/wordaddin/services/versioningService";
+import { saveAndVersion, startVersioning, VersionSavedButCloseFailedError } from "@/wordaddin/services/versionFlow";
+import { VersionRecord } from "@/wordaddin/models/versionRecord";
+
+import ConfirmVersionDialog from "./ConfirmVersionDialog";
+import { MessageBar } from "./MessageBar";
+import SaveControls from "./SaveControls";
+import { Spinner } from "./Spinner";
+import TemplateToolsPanel from "./TemplateToolsPanel";
+import VersionHistoryPanel from "./VersionHistoryPanel";
+
+/**
+ * Task pane หลัก — state machine ตาม Phase 5:
+ *   checking → (ไม่มี token) signed-out
+ *           → (มี token + ไม่ใช่ tracked document) untracked
+ *           → (มี token + tracked document) tracking
+ * พอร์ตจาก App.tsx ต้นฉบับ (D:\word-addin-poc\addin) — state/handlers คงเดิมทุกตัว
+ * เปลี่ยนเฉพาะ: import path, JSX → Genesis/Tailwind, ถอด FluentProvider/makeStyles,
+ * เพิ่ม prop demo (โหมด ?addindemo ของ WordAddinGate — ตั้ง phase ตรง ไม่ detect จริง)
+ *
+ * กติกา: ทุก async ต้อง catch — AuthRequiredError → กลับ signed-out อย่างเนียน (AC-9)
+ * error อื่นแสดง MessageBar ไม่ปล่อย unhandled rejection
+ *
+ * FR-17 — auto-save (local เท่านั้น) เริ่มตอน mount ไม่รอ sign-in; FR-3 reminder
+ * กลายเป็น flag `uncommittedSinceVersion` ที่ periodic tick ของ autoSaveService ตั้งค่า
+ */
+
+type Phase = "checking" | "signed-out" | "untracked" | "tracking";
+
+/** แท็บของ taskpane — versioning คือทุกอย่างเดิม, template คือเครื่องมือจัดการ Content Controls
+ *  (Office.js ล้วน ไม่ยิง backend จึงใช้ได้ทั้ง untracked และ tracking) */
+type Tab = "versioning" | "template";
+
+/** ปุ่ม toggle แท็บ — กลุ่มปุ่ม + aria-pressed ตามแบบแผน FacetFilterPanel (ไม่ใช่ role="tablist"
+ *  เพราะไม่ทำ arrow-key navigation ของ tablist จริง — ทำครึ่ง ๆ ผิด spec กว่าไม่ทำ)
+ *  active เป็น tint น้ำเงินอ่อน ไม่ใช่พื้นทึบ เพื่อไม่แย่งน้ำหนักกับ CTA primary ตัวจริง (Save & Version) */
+const tabButtonClass = (active: boolean) =>
+  `focus-ring flex-1 rounded-md px-2 py-1.5 text-sm transition disabled:pointer-events-none disabled:opacity-50 ${
+    active ? "bg-primary/[0.08] font-medium text-primary" : "text-ink-soft hover:text-primary"
+  }`;
+
+const BTN_PRIMARY =
+  "focus-ring inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow disabled:pointer-events-none disabled:opacity-50";
+
+/** demo mode — version ตัวอย่าง 3 รายการ (ใหม่ → เก่า) ให้ history panel มีของโชว์ทันที */
+function demoVersions(now: number): VersionRecord[] {
+  return [
+    {
+      versionId: "demo-v3",
+      versionNumber: 3,
+      createdAt: new Date(now - 3_600_000).toISOString(),
+      createdByUserId: authService.getUsername() ?? "tester01",
+      contentHash: "demo",
+      message: "ปรับคำร้องตามคำแนะนำอัยการ",
+      hasPdf: true,
+      fields: null,
+    },
+    {
+      versionId: "demo-v2",
+      versionNumber: 2,
+      createdAt: new Date(now - 86_400_000).toISOString(),
+      createdByUserId: authService.getUsername() ?? "tester01",
+      contentHash: "demo",
+      message: null,
+      hasPdf: true,
+      fields: null,
+    },
+    {
+      versionId: "demo-v1",
+      versionNumber: 1,
+      createdAt: new Date(now - 172_800_000).toISOString(),
+      createdByUserId: authService.getUsername() ?? "tester01",
+      contentHash: "demo",
+      message: "สร้างเอกสารครั้งแรก",
+      hasPdf: false,
+      fields: null,
+    },
+  ];
+}
+
+const TaskpaneApp: React.FC<{ demo?: "untracked" | "tracking" }> = ({ demo }) => {
+  const [phase, setPhase] = useState<Phase>(demo === "untracked" ? "untracked" : demo ? "tracking" : "checking");
+  const [activeTab, setActiveTab] = useState<Tab>("versioning");
+  /** operation ของแท็บ template กำลังเขียนเอกสารอยู่ (panel รายงานผ่าน onBusyChange) —
+   *  ปิด toggle กันสลับแท็บกลาง operation แล้ว flow versioning มา stamp/capture ซ้อน */
+  const [templateBusy, setTemplateBusy] = useState(false);
+  const handleTemplateBusyChange = useCallback((busy: boolean) => setTemplateBusy(busy), []);
+  const [bootError, setBootError] = useState<string | null>(null);
+  const [username, setUsername] = useState<string | null>(demo ? (authService.getUsername() ?? null) : null);
+
+  const [documentId, setDocumentId] = useState<string | null>(demo ? "00000000-0000-0000-0000-00000000demo" : null);
+  /** FR-16 — template ต้นทางของไฟล์ร่าง (มีเฉพาะไฟล์ที่เว็บสร้างแบบ draft และยังไม่ได้ track) */
+  const [documentTemplateId, setDocumentTemplateId] = useState<string | null>(null);
+  const [versions, setVersions] = useState<VersionRecord[]>(demo ? demoVersions(Date.now()) : []);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [historyError, setHistoryError] = useState<string | null>(null);
+
+  const [signingIn, setSigningIn] = useState(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
+
+  const [starting, setStarting] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [progressMessage, setProgressMessage] = useState<string | null>(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [startConfirmOpen, setStartConfirmOpen] = useState(false);
+  const [flowError, setFlowError] = useState<string | null>(null);
+  const [flowWarning, setFlowWarning] = useState<string | null>(null);
+  const [downloadingPdfVersionId, setDownloadingPdfVersionId] = useState<string | null>(null);
+  const [flowSuccess, setFlowSuccess] = useState<string | null>(null);
+
+  const [downloadingVersionId, setDownloadingVersionId] = useState<string | null>(null);
+
+  /** FR-18 — platform นี้ปิดเอกสารจาก add-in ได้ไหม (Word on the web ใช้ close() ไม่ได้ → ซ่อนปุ่มทุกแบบ)
+   *  นอก Word (SSR/browser ธรรมดา) canCloseDocument catch คืน false เสมอ */
+  const [closeSupported] = useState(() => documentService.canCloseDocument());
+  /** FR-18 — สถานะของปุ่ม [บันทึก] / [บันทึกและปิดเอกสาร] (แยกจาก flow versioning) */
+  const [saveBusy, setSaveBusy] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<"saving" | "saved" | null>(null);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  /** FR-17 — banner เตือนเมื่อ auto-save ล้ม (ไม่บล็อก แต่ไม่ปล่อยเงียบ) */
+  const [autoSaveError, setAutoSaveError] = useState<string | null>(null);
+  /** FR-3 — periodic tick เห็นการแก้ไขหลัง version ล่าสุด (แสดงเฉพาะตอน tracking) */
+  const [hasUncommitted, setHasUncommitted] = useState(false);
+
+  /** 401 ที่ refresh ไม่ช่วย → กลับหน้า sign-in อย่างเนียน (AC-9) */
+  const handleAuthRequired = useCallback((error: unknown): boolean => {
+    if (error instanceof AuthRequiredError) {
+      setPhase("signed-out");
+      setActiveTab("versioning");
+      setDocumentId(null);
+      setDocumentTemplateId(null);
+      setVersions([]);
+      setLoginError("เซสชันหมดอายุ — กรุณา login ใหม่");
+      return true;
+    }
+    return false;
+  }, []);
+
+  const refreshHistory = useCallback(
+    async (id: string) => {
+      setHistoryLoading(true);
+      setHistoryError(null);
+      try {
+        setVersions(await getVersions(id));
+      } catch (error) {
+        if (!handleAuthRequired(error)) {
+          setHistoryError(getErrorMessage(error, "โหลด version history ไม่สำเร็จ"));
+        }
+      } finally {
+        setHistoryLoading(false);
+      }
+    },
+    [handleAuthRequired],
+  );
+
+  /** ตรวจตอนเปิด task pane (FR-1): token → SavedByAddIn → history
+   *  FR-16 — อ่าน properties ครั้งเดียวทั้งชุดแล้ว derive tracked เอง เพราะไฟล์ร่าง (untracked)
+   *  ต้องได้อ่าน TemplateId ไปใช้ตอน Start Versioning ด้วย (ข้ามทั้งหมดในโหมด demo)
+   *  e-Court pass-through — ยังไม่มี session แต่ไฟล์ stamp token/owner มา = ผ่านเข้าเลยไม่ต้องกด login */
+  const detect = useCallback(async () => {
+    setPhase("checking");
+    setBootError(null);
+    try {
+      let properties: metadataService.TrackedDocumentProperties | null = null;
+      if (!(await authService.getAccessToken())) {
+        // e-Court pass-through — อ่านไฟล์ก่อนตัดสิน: ไฟล์ที่ stamp token/owner มา = ผ่านเลยไม่ต้องกด login
+        // (นอก Word เช่น browser ธรรมดา → อ่านไม่ได้ = ไป signed-out ตามเดิม)
+        try {
+          properties = await metadataService.readTrackedProperties();
+        } catch {
+          properties = null;
+        }
+        if (
+          !properties ||
+          !authService.signInFromDocument({ token: properties.ecourtToken, owner: properties.ecourtOwner })
+        ) {
+          setPhase("signed-out");
+          return;
+        }
+      }
+      authService.startAutoRefresh();
+      setUsername(authService.getUsername() ?? null);
+
+      properties ??= await metadataService.readTrackedProperties();
+      const tracked = properties.savedByAddIn === metadataService.ADDIN_SIGNATURE_GUID;
+      const id = tracked ? properties.documentTrackingId : undefined;
+      if (!id) {
+        // ไม่เคย track / track แต่ไม่มี id (ไฟล์เสียหาย) — ไฟล์ร่างจาก template อยู่กลุ่มนี้ (FR-16)
+        setDocumentTemplateId(properties.templateId ?? null);
+        setPhase("untracked");
+        return;
+      }
+      setDocumentId(id);
+      setDocumentTemplateId(null);
+      setPhase("tracking");
+      await refreshHistory(id);
+    } catch (error) {
+      setBootError(getErrorMessage(error, "ตรวจสอบเอกสารไม่สำเร็จ"));
+    }
+  }, [refreshHistory]);
+
+  useEffect(() => {
+    if (demo) return; // ?addindemo — ตั้ง phase จาก prop แล้ว ไม่ตรวจไฟล์จริง
+    void detect();
+  }, [demo, detect]);
+
+  /** FR-17 — เริ่ม auto-save ตั้งแต่ mount ไม่รอ sign-in (ข้ามใน demo กัน error banner จาก Word ที่ไม่มี)
+   *  ผูก listener ให้ React state: error → banner, dirty→save → flag FR-3 */
+  useEffect(() => {
+    autoSaveService.onError = (error) =>
+      setAutoSaveError(getErrorMessage(error, "บันทึกอัตโนมัติไม่สำเร็จ — ลองกด \"บันทึก\" ด้วยตนเอง"));
+    autoSaveService.onSaved = () => setAutoSaveError(null);
+    autoSaveService.onStateChange = () => setHasUncommitted(autoSaveService.hasUncommittedSinceVersion);
+    if (!demo) {
+      autoSaveService.start();
+    }
+    return () => {
+      autoSaveService.stop();
+      autoSaveService.onError = undefined;
+      autoSaveService.onSaved = undefined;
+      autoSaveService.onStateChange = undefined;
+    };
+  }, [demo]);
+
+  const handleSignIn = async () => {
+    setSigningIn(true);
+    setLoginError(null);
+    try {
+      const result = await authService.login();
+      if (result.ok) {
+        await detect();
+      } else {
+        setLoginError(result.error);
+      }
+    } catch (error) {
+      setLoginError(getErrorMessage(error, "เข้าสู่ระบบไม่สำเร็จ"));
+    } finally {
+      setSigningIn(false);
+    }
+  };
+
+  const handleSignOut = () => {
+    authService.signOut();
+    setUsername(null);
+    setDocumentId(null);
+    setDocumentTemplateId(null);
+    setVersions([]);
+    setLoginError(null);
+    setPhase("signed-out");
+    setActiveTab("versioning");
+  };
+
+  /** FR-18 [บันทึก] — local save เดี่ยวผ่าน lock ของ autoSaveService (ไม่ stamp metadata อะไร) */
+  const handleSaveOnly = async () => {
+    setSaveBusy(true);
+    setSaveStatus("saving");
+    setSaveError(null);
+    setAutoSaveError(null);
+    try {
+      await autoSaveService.save();
+      setSaveStatus("saved");
+    } catch (error) {
+      setSaveStatus(null);
+      setSaveError(getErrorMessage(error, "บันทึกไม่สำเร็จ กรุณาลองอีกครั้ง"));
+    } finally {
+      setSaveBusy(false);
+    }
+  };
+
+  /** FR-18 [บันทึกและปิดเอกสาร] — ลำดับตาม spec: suspend → forceSave → close(Save) → resume
+   *  save ล้ม = ไม่ปิด (AC-21) · ปิดสำเร็จแล้ว task pane จะปิดตามเอกสารเอง ไม่มี toast ท้าย */
+  const handleSaveAndClose = async () => {
+    setSaveBusy(true);
+    setSaveStatus("saving");
+    setSaveError(null);
+    setAutoSaveError(null);
+    try {
+      await autoSaveService.suspend();
+      try {
+        await autoSaveService.forceSave();
+        await documentService.closeDocument(documentService.DocumentCloseMode.Save);
+      } finally {
+        autoSaveService.resume();
+      }
+    } catch (error) {
+      setSaveStatus(null);
+      setSaveError(getErrorMessage(error, "บันทึก/ปิดเอกสารไม่สำเร็จ กรุณาลองอีกครั้ง"));
+    } finally {
+      setSaveBusy(false);
+    }
+  };
+
+  /** Start Versioning — stamp รอบแรก + upload v1 (FR-1/AC-5) · message คือ commit message จาก dialog (FR-13)
+   *  FR-16 — ไฟล์ร่าง: แนบ templateId ไปให้ backend ผูก Document กับ template ต้นทาง */
+  const handleStartVersioning = async (message: string) => {
+    setStarting(true);
+    setFlowError(null);
+    setFlowSuccess(null);
+    setFlowWarning(null);
+    try {
+      const result = await startVersioning(message, documentTemplateId ?? undefined, setProgressMessage);
+      setDocumentId(result.documentId);
+      setDocumentTemplateId(null);
+      setPhase("tracking");
+      setFlowSuccess(`เริ่มติดตามเอกสารนี้แล้ว — สร้างเป็น version 1`);
+      if (!result.hasPdf)
+        setFlowWarning(
+          "บันทึกแล้ว แต่สร้าง PDF ไม่สำเร็จ — version นี้ไม่มีสำเนา PDF (กด Save & Version อีกครั้งเพื่อสร้าง version ใหม่ที่มี PDF)",
+        );
+      await refreshHistory(result.documentId);
+    } catch (error) {
+      if (!handleAuthRequired(error)) {
+        setFlowError(getErrorMessage(error, "เริ่มติดตามเอกสารไม่สำเร็จ"));
+      }
+    } finally {
+      setProgressMessage(null);
+      setStarting(false);
+    }
+  };
+
+  /** Save & Version (FR-2) — ตามลำดับ spec: confirm → stamp → XML → save → file+fields → upload
+   *  message คือ commit message จาก dialog (FR-13)
+   *  FR-18 — closeAfter=true มาจาก submit ที่สองของ dialog: version สำเร็จ → ปิดเอกสารตาม */
+  const handleSaveAndVersion = async (message: string, closeAfter = false) => {
+    if (!documentId) {
+      return;
+    }
+    setSaving(true);
+    setFlowError(null);
+    setFlowSuccess(null);
+    setFlowWarning(null);
+    try {
+      const latestVersionNumber = versions[0]?.versionNumber ?? 0;
+      const result = await saveAndVersion(documentId, latestVersionNumber, message, setProgressMessage, closeAfter);
+      if (closeAfter) {
+        // ปิดเอกสารสำเร็จแล้ว — task pane จะปิดตามเอกสาร ไม่ต้อง refresh อะไรต่อ
+        return;
+      }
+      setFlowSuccess(`สร้าง version ${result.versionNumber} เรียบร้อย`);
+      if (!result.hasPdf)
+        setFlowWarning(
+          "บันทึกแล้ว แต่สร้าง PDF ไม่สำเร็จ — version นี้ไม่มีสำเนา PDF (กด Save & Version อีกครั้งเพื่อสร้าง version ใหม่ที่มี PDF)",
+        );
+      await refreshHistory(documentId);
+    } catch (error) {
+      if (error instanceof VersionSavedButCloseFailedError) {
+        // version ปลอดภัยบน backend แล้ว — เอกสารยังเปิด แจ้งเป็น warning ไม่ใช่ error ของ version
+        setFlowWarning(error.message);
+        await refreshHistory(documentId);
+        return;
+      }
+      if (!handleAuthRequired(error)) {
+        setFlowError(getErrorMessage(error, "สร้าง version ไม่สำเร็จ"));
+      }
+    } finally {
+      setProgressMessage(null);
+      setSaving(false);
+    }
+  };
+
+  /**
+   * FR-4 — ดาวน์โหลด version ที่เลือก: ขอ presigned URL อายุสั้นจาก backend แล้วเปิดใน
+   * เบราว์เซอร์ของเครื่อง (webview ของ Word — โดยเฉพาะ WKWebView บน Mac — ทิ้ง blob download
+   * แบบเงียบๆ ไฟล์ไม่เคยถูกเขียนที่ไหนเลย)
+   */
+  const handleDownload = async (version: VersionRecord, format: "docx" | "pdf" = "docx") => {
+    if (!documentId) {
+      return;
+    }
+    const setDownloading = format === "pdf" ? setDownloadingPdfVersionId : setDownloadingVersionId;
+    setDownloading(version.versionId);
+    setFlowError(null);
+    try {
+      const link = await getDownloadLink(documentId, version.versionId, format);
+      if (typeof Office.context.ui.openBrowserWindow === "function") {
+        Office.context.ui.openBrowserWindow(link.url);
+        setFlowSuccess(
+          format === "pdf"
+            ? `กำลังเปิด PDF ของ v${version.versionNumber} ในเบราว์เซอร์ของคุณ`
+            : `กำลังดาวน์โหลด v${version.versionNumber} ผ่านเบราว์เซอร์ของคุณ — ดูไฟล์ที่โฟลเดอร์ Downloads`,
+        );
+      } else {
+        throw new Error("Word นี้ไม่รองรับการเปิดเบราว์เซอร์ กรุณาเปิดไฟล์จาก Web Portal");
+      }
+    } catch (error) {
+      if (!handleAuthRequired(error)) {
+        setFlowError(getErrorMessage(error, "ดาวน์โหลด version ไม่สำเร็จ"));
+      }
+    } finally {
+      setDownloading(null);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col gap-2 p-4">
+      <div className="flex items-center justify-between gap-2 border-b border-line pb-2">
+        <span className="font-display text-sm font-semibold leading-tight text-ink">e-Court Documents Versioning</span>
+        {phase !== "signed-out" && phase !== "checking" && username ? (
+          /* จอแคบ: username ย้ายไป title/aria-label — ไม่กินพื้นที่แถบหัวจนตัวชื่อแอป wrap 3-4 บรรทัด */
+          <button
+            type="button"
+            className="focus-ring inline-flex shrink-0 items-center gap-1 rounded-md px-2 py-1.5 text-xs text-ink-soft transition hover:text-primary"
+            onClick={handleSignOut}
+            aria-label={`ออกจากระบบ (${username})`}
+            title={`${username} — ออกจากระบบ`}
+          >
+            <LogOut className="size-3.5" aria-hidden />
+            ออกจากระบบ
+          </button>
+        ) : null}
+      </div>
+
+      {/* FR-17 — banner auto-save error ยกไว้เหนือ toggle (เดิมซ่อนอยู่ใน SaveControls ของแท็บ
+          versioning): auto-save รันทุกแท็บ การเขียนค่าทดสอบของแท็บ template ก็ทำให้ dirty ได้
+          จึงต้องเห็น error แม้อยู่อีกแท็บ */}
+      {(phase === "untracked" || phase === "tracking") && autoSaveError ? (
+        <MessageBar intent="warning">{autoSaveError}</MessageBar>
+      ) : null}
+
+      {/* toggle แท็บ — แสดงเฉพาะ phase ที่เข้าถึงเอกสารแล้ว (checking/signed-out ยังไม่มีอะไรให้จัดการ)
+          ปิดทั้งสองปุ่มระหว่าง flow ที่เขียนเอกสาร: saving/starting ของ versioning (กัน progress หาย
+          กลาง flow — handler อยู่ที่ component นี้ flow ยังรันจนจบ แค่หน้าตา), saveBusy ของบันทึก
+          local/ปิดเอกสาร และ templateBusy ที่ panel รายงานผ่าน onBusyChange — กันเครื่องมือ template
+          แข่งแก้เอกสารกลาง stamp/capture ของ versionFlow หรือกลับกัน (panel unmount แล้ว promise
+          ของ service ก็ยังเขียนเอกสารต่อ ต้องปิดทางสลับตั้งแต่ต้น) */}
+      {(phase === "untracked" || phase === "tracking") && (
+        <div className="mt-2 flex gap-1 rounded-lg border border-line p-1" role="group" aria-label="ส่วนการทำงาน">
+          <button
+            type="button"
+            aria-pressed={activeTab === "versioning"}
+            className={tabButtonClass(activeTab === "versioning")}
+            disabled={saving || starting || saveBusy || templateBusy}
+            onClick={() => setActiveTab("versioning")}
+          >
+            Versioning
+          </button>
+          <button
+            type="button"
+            aria-pressed={activeTab === "template"}
+            className={tabButtonClass(activeTab === "template")}
+            disabled={saving || starting || saveBusy || templateBusy}
+            onClick={() => setActiveTab("template")}
+          >
+            เครื่องมือ Template
+          </button>
+        </div>
+      )}
+
+      {phase === "checking" ? (
+        <div className="flex flex-col items-center gap-4 pt-10">
+          <Spinner label="กำลังตรวจสอบเอกสาร…" />
+          {bootError ? (
+            <MessageBar
+              intent="error"
+              action={
+                <button
+                  type="button"
+                  className="focus-ring rounded-md border border-error/40 bg-white px-2 py-1.5 text-xs text-error-ink"
+                  onClick={() => void detect()}
+                >
+                  ลองใหม่
+                </button>
+              }
+            >
+              {bootError}
+            </MessageBar>
+          ) : null}
+        </div>
+      ) : null}
+
+      {phase === "signed-out" ? (
+        <div className="flex flex-col gap-2 pt-4">
+          <p className="text-base text-ink">เข้าสู่ระบบเพื่อเริ่มใช้งาน versioning</p>
+          <p className="text-sm text-ink-soft">
+            ใช้บัญชีของ realm <code>word-versioning</code> — หน้าต่าง login จะเปิดแยกต่างหาก
+          </p>
+          <button
+            type="button"
+            className={`${BTN_PRIMARY} mt-2 w-full justify-center`}
+            disabled={signingIn}
+            onClick={() => void handleSignIn()}
+          >
+            {signingIn ? "กำลังเข้าสู่ระบบ…" : "เข้าสู่ระบบ"}
+          </button>
+          {loginError ? <MessageBar intent="warning">{loginError}</MessageBar> : null}
+        </div>
+      ) : null}
+
+      {phase === "untracked" && activeTab === "versioning" ? (
+        <div className="flex flex-col gap-2 pt-4">
+          <p className="text-base text-ink">เอกสารนี้ยังไม่ได้ติดตาม version</p>
+          <p className="text-sm text-ink-soft">
+            กดปุ่มด้านล่างเพื่อเริ่ม track — ระบบจะ stamp metadata ลงไฟล์และอัปโหลดเป็น version 1
+            (ไฟล์ที่สร้างจากเว็บ portal จะถูกตรวจพบและข้ามขั้นตอนนี้อัตโนมัติ)
+          </p>
+          {documentTemplateId ? (
+            <p className="text-sm text-ink-soft">
+              ไฟล์นี้เป็นไฟล์ร่างจาก template — กดเริ่มติดตามแล้วระบบจะผูกเอกสารกับ template ต้นทาง
+              และ sync ค่า fields ให้อัตโนมัติ
+            </p>
+          ) : null}
+          <button
+            type="button"
+            className={`${BTN_PRIMARY} mt-2 w-full justify-center`}
+            disabled={starting}
+            onClick={() => setStartConfirmOpen(true)}
+          >
+            <FileUp className="size-4" aria-hidden />
+            {starting ? "กำลังเริ่มติดตาม…" : "Start Versioning This Document"}
+          </button>
+          <SaveControls
+            disabled={starting}
+            busy={saveBusy}
+            status={saveStatus}
+            error={saveError}
+            closeSupported={closeSupported}
+            onSave={() => void handleSaveOnly()}
+            onSaveAndClose={() => void handleSaveAndClose()}
+          />
+          {starting && progressMessage ? <Spinner label={progressMessage} /> : null}
+          {flowError ? <MessageBar intent="error">{flowError}</MessageBar> : null}
+        </div>
+      ) : null}
+
+      {phase === "tracking" && activeTab === "versioning" ? (
+        /* ห้ามใส่ items-start — ลูกทุกตัวจะหดตามเนื้อหา (MessageBar/history list ไม่เต็มความกว้าง pane) */
+        <div className="flex flex-col gap-2 pt-4">
+          {/* กลุ่มข้อความสถานะ */}
+          {hasUncommitted ? (
+            <MessageBar intent="warning">
+              มีการแก้ไขที่ยังไม่ถูกบันทึกเป็นเวอร์ชันใหม่ — กด Save &amp; Version เพื่อบันทึกเป็น version ใหม่
+            </MessageBar>
+          ) : null}
+
+          {flowWarning ? <MessageBar intent="warning">{flowWarning}</MessageBar> : null}
+          {flowSuccess ? <MessageBar intent="success">{flowSuccess}</MessageBar> : null}
+          {flowError ? <MessageBar intent="error">{flowError}</MessageBar> : null}
+
+          {/* กลุ่ม action บันทึก — ปุ่มหลักเต็มความกว้างแถบ (action เด่นที่สุดของทั้งแอป) + progress + local save
+              icon ใช้ commit ไม่ใช่ floppy — แยกจากปุ่ม "บันทึก" (local save) ที่ความหมายต่างกัน */}
+          <div className="flex flex-col gap-2 pt-2">
+            <button
+              type="button"
+              className={`${BTN_PRIMARY} w-full justify-center px-5 py-3`}
+              disabled={saving}
+              onClick={() => setConfirmOpen(true)}
+            >
+              <GitCommitHorizontal className="size-4" aria-hidden />
+              Save &amp; Version
+            </button>
+            {saving && progressMessage ? <Spinner label={progressMessage} /> : null}
+            <SaveControls
+              disabled={saving}
+              busy={saveBusy}
+              status={saveStatus}
+              error={saveError}
+              closeSupported={closeSupported}
+              onSave={() => void handleSaveOnly()}
+              onSaveAndClose={() => void handleSaveAndClose()}
+            />
+          </div>
+
+          {/* ink-soft (ไม่ใช่ ink-faint 2.6:1) — tracking id คือ identifier ที่ผู้ใช้อาจต้องอ่าน/คัดลอกตอนแจ้งปัญหา */}
+          <p className="pt-2 text-xs text-ink-soft">tracking id: {documentId?.slice(0, 8)}…</p>
+
+          <VersionHistoryPanel
+            versions={versions}
+            loading={historyLoading}
+            error={historyError}
+            downloadingVersionId={downloadingVersionId}
+            downloadingPdfVersionId={downloadingPdfVersionId}
+            onDownloadPdf={(version) => void handleDownload(version, "pdf")}
+            onDownload={(version) => void handleDownload(version)}
+            onRetry={() => documentId && void refreshHistory(documentId)}
+          />
+        </div>
+      ) : null}
+
+      {/* แท็บเครื่องมือ Template — state ทั้งหมดอยู่ใน panel เอง (snapshot ชั่วคราวของเอกสาร
+          สลับแท็บแล้ว unmount = ทิ้งค่าทิ้งโดยตั้งใจ) */}
+      {(phase === "untracked" || phase === "tracking") && activeTab === "template" ? (
+        <TemplateToolsPanel onBusyChange={handleTemplateBusyChange} />
+      ) : null}
+
+      {/* dialog ทั้งสองเป็นของ flow versioning — render เฉพาะแท็บ versioning (ตอน dialog เปิด
+          overlay fixed inset-0 + Tab trap อยู่แล้ว ปุ่ม toggle แตะไม่ได้ จึงไม่มี path ที่ dialog
+          เปิดค้างขณะสลับแท็บ) */}
+      {(phase === "untracked" || phase === "tracking") && activeTab === "versioning" ? (
+        <>
+          {/* กดยืนยันแล้วปิด dialog ทันที — progress/ผลลัพธ์แสดงที่ pane (dialog ค้าง = บังผลลัพธ์
+              + เสี่ยงกดยืนยันซ้ำสร้าง version ซ้ำ; busy ใน dialog เหลือเป็น defense ชั่วขณะก่อน re-render) */}
+          <ConfirmVersionDialog
+            open={confirmOpen}
+            busy={saving}
+            onConfirm={(message) => {
+              setConfirmOpen(false);
+              void handleSaveAndVersion(message);
+            }}
+            {...(closeSupported
+              ? {
+                  onConfirmClose: (message: string) => {
+                    setConfirmOpen(false);
+                    void handleSaveAndVersion(message, true);
+                  },
+                }
+              : {})}
+            onDismiss={() => setConfirmOpen(false)}
+          />
+
+          {/* FR-13 — Start Versioning ใช้ dialog เดียวกัน: ยืนยัน + พิมพ์ commit message ของ v1 ก่อนเริ่ม track */}
+          <ConfirmVersionDialog
+            open={startConfirmOpen}
+            busy={starting}
+            title="เริ่มติดตามเอกสารนี้?"
+            description={
+              documentTemplateId
+                ? "ระบบจะ stamp metadata ลงไฟล์ บันทึกไฟล์ปัจจุบันเป็น version 1 และผูกเอกสารกับ template ต้นทาง (ไฟล์ร่าง)"
+                : "ระบบจะ stamp metadata ลงไฟล์และบันทึกไฟล์ปัจจุบันเป็น version 1 ของเอกสารนี้"
+            }
+            confirmLabel="เริ่มติดตาม (version 1)"
+            onConfirm={(message) => {
+              setStartConfirmOpen(false);
+              void handleStartVersioning(message);
+            }}
+            onDismiss={() => setStartConfirmOpen(false)}
+          />
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export default TaskpaneApp;

components/wordaddin/TemplateToolsPanel.tsx

@@ -0,0 +1,411 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { CornerDownLeft, Crosshair, FilePlus, LoaderCircle, PenLine, ScanSearch, WrapText } from "lucide-react";
+
+import {
+  applyTestValues,
+  insertBreakAtSelection,
+  insertParagraphAtSelection,
+  listContentControls,
+  selectContentControl,
+  supportsAllContentControlTypes,
+  type ScannedField,
+} from "@/wordaddin/services/templateService";
+import { getErrorMessage } from "@/wordaddin/services/errors";
+
+import { MessageBar } from "./MessageBar";
+
+/**
+ * แท็บ "เครื่องมือ Template" (แท็บที่สองของ taskpane) — เครื่องมือช่วยทำ template
+ * สำหรับคนออกแบบเอกสาร ใช้ได้ทั้ง phase untracked และ tracking เพราะไม่แตะ backend/tracking:
+ *  1. สแกน Content Controls ทั้งเอกสาร + เตือน tag ว่าง/ซ้ำ + กระโดดไปเลือกช่อง
+ *  2. กรอกค่าทดสอบทุกช่องแล้วเขียนกลับเข้าเอกสารจริง (ดูผลจัดหน้า/ตัดบรรทัดทันที
+ *     โดยไม่ต้อง render ผ่าน /api/template/render)
+ *  3. แทรกย่อหน้า/ตัวแบ่งบรรทัด/ตัวแบ่งหน้าที่ cursor ตอนจัดโครงสร้าง
+ *
+ * state ทั้งหมดถือภายใน — เป็น snapshot ชั่วคราวของเอกสาร: สลับแท็บแล้ว unmount = ทิ้ง
+ * ค่าทิ้งโดยตั้งใจ (เก็บไว้ก็ stale เสียเองเมื่อผู้ใช้แก้เอกสารระหว่างนั้น)
+ */
+
+const BTN_PRIMARY =
+  "focus-ring inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow disabled:pointer-events-none disabled:opacity-50";
+const BTN_SECONDARY =
+  "focus-ring inline-flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink transition hover:border-primary hover:text-primary disabled:pointer-events-none disabled:opacity-50";
+/** px-2 py-1.5 + text-xs ≈ สูง 30px — พ้นเกณฑ์ touch target 24px (WCAG 2.5.8) เหมือน VersionHistoryPanel */
+const BTN_ACTION =
+  "focus-ring inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs text-ink-soft transition hover:bg-primary/[0.06] hover:text-primary disabled:pointer-events-none disabled:opacity-50";
+
+/** ปุ่มแทรกองค์ประกอบ (ย่อหน้า/ตัวแบ่ง) — icon บน label ล่าง 3 ปุ่มต่อแถว */
+const BTN_INSERT =
+  "focus-ring flex flex-col items-center gap-1 rounded-md border border-line bg-white px-1 py-2 text-xs text-ink transition hover:border-primary hover:text-primary disabled:pointer-events-none disabled:opacity-50";
+
+function TemplateToolsPanel({ onBusyChange }: { onBusyChange?: (busy: boolean) => void }) {
+  /** null = ยังไม่เคยสแกน (empty state ต่างจาก [] = สแกนแล้วไม่มีช่อง) */
+  const [fields, setFields] = useState<ScannedField[] | null>(null);
+  const [scanning, setScanning] = useState(false);
+  const [applying, setApplying] = useState(false);
+  const [insertingParagraph, setInsertingParagraph] = useState(false);
+  const [insertingBreak, setInsertingBreak] = useState<"line" | "page" | null>(null);
+  /** ค่าฟอร์มต่อ tag — key คือ tag ที่ trim แล้วไม่ว่างและไม่ซ้ำ */
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [error, setError] = useState<string | null>(null);
+  const [warning, setWarning] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  /** คำเตือนความสามารถของ host (WordApi <1.5 เห็นเฉพาะ rich text CC) — แยก state จาก warning
+   *  ผลลัพธ์ของ operation เพราะเป็นข้อจำกัดของ host ตลอด session ห้ามโดน banner อื่นล้าง/ทับ */
+  const [capabilityWarning, setCapabilityWarning] = useState<string | null>(null);
+
+  const busy = scanning || applying || insertingParagraph || insertingBreak !== null;
+
+  /** รายงาน busy ให้ TaskpaneApp ปิด toggle แท็บระหว่าง operation ที่เขียนเอกสาร — กันสลับไปแท็บ
+   *  Versioning กด Save & Version แล้ว stamp/capture ซ้อน operation ที่ยังรันอยู่ (panel unmount
+   *  แล้ว promise ของ service ก็ยังเขียนเอกสารต่อ) · cleanup ส่ง false ตอน unmount กันปุ่มค้าง disabled */
+  useEffect(() => {
+    onBusyChange?.(busy);
+    return () => onBusyChange?.(false);
+  }, [busy, onBusyChange]);
+
+  /** tag ที่ไม่ว่างไม่ซ้ำ (เอาตัวแรกของ tag ซ้ำ) — เป็น key ของฟอร์มค่าทดสอบ */
+  const uniqueTags = useMemo(() => {
+    if (!fields) return [];
+    const seen = new Set<string>();
+    const tags: string[] = [];
+    for (const field of fields) {
+      const tag = field.tag.trim();
+      if (tag === "" || seen.has(tag)) continue;
+      seen.add(tag);
+      tags.push(tag);
+    }
+    return tags;
+  }, [fields]);
+
+  const emptyTagCount = useMemo(
+    () => (fields ? fields.filter((field) => field.tag.trim() === "").length : 0),
+    [fields],
+  );
+
+  /** tag ที่มีมากกว่า 1 ช่อง (เทียบหลัง trim) — render pipeline อ่านค่าเฉพาะช่องแรกของ tag จึงต้องเตือน */
+  const duplicateTags = useMemo(() => {
+    if (!fields) return [];
+    const counts = new Map<string, number>();
+    for (const field of fields) {
+      const tag = field.tag.trim();
+      if (tag === "") continue;
+      counts.set(tag, (counts.get(tag) ?? 0) + 1);
+    }
+    return Array.from(counts.entries())
+      .filter(([, count]) => count > 1)
+      .map(([tag]) => tag);
+  }, [fields]);
+
+  /** มีอย่างน้อยหนึ่งช่องที่กรอกค่า — กันกดเขียนตอนฟอร์มว่างทั้งหมด (service จะไม่แตะอะไรเลย
+   *  แล้ว UI ไปตีความ appliedCount 0 ว่า "ช่องถูกลบไป" ซึ่งเข้าใจผิด) */
+  const hasFilledValue = useMemo(
+    () => uniqueTags.some((tag) => (values[tag] ?? "").trim() !== ""),
+    [uniqueTags, values],
+  );
+
+  /**
+   * สแกนเอกสาร + เติมค่าฟอร์ม
+   * - merge=false (กดปุ่มสแกนเอง): seed ฟอร์มใหม่ทั้งหมดจากค่าปัจจุบันของช่องแรกของแต่ละ tag
+   *    พร้อมรีเซ็ต success/warning เดิม (ผลลัพธ์รอบก่อนไม่เกี่ยวกับ list รอบใหม่แล้ว)
+   * - merge=true (หลังเขียนค่า): คงค่าที่ผู้ใช้พิมพ์ค้างไว้ เติมเฉพาะ tag ใหม่ที่ยังไม่มีในฟอร์ม
+   *    และตัด tag ที่หายไปจากเอกสารทิ้ง — ทั้งสองอยู่บนผลสแกนรอบใหม่เสมอ
+   *    **ไม่แตะ success/warning** เพราะ handler ที่เรียกจัด banner ผลลัพธ์ของตัวเองอยู่
+   *    (คำเตือนความสามารถของ host แยก state ต่างหาก จึงไม่ทับกัน)
+   */
+  const runScan = async (merge: boolean) => {
+    setScanning(true);
+    setError(null);
+    if (!merge) {
+      setSuccess(null);
+      setWarning(null);
+    }
+    try {
+      const scanned = await listContentControls();
+      setFields(scanned);
+      // Word ต่ำกว่า WordApi 1.5 (เช่น Office 2019) มองเห็นเฉพาะ rich text CC — template ของศาล
+      // ส่วนใหญ่เป็น plain text CC; เป็นข้อจำกัดของ host ตลอด session จึงเช็คให้ทุกรอบสแกน
+      setCapabilityWarning(
+        supportsAllContentControlTypes()
+          ? null
+          : "Word รุ่นนี้มองเห็นเฉพาะช่องแบบ rich text — ช่องแบบ plain text ต้องใช้ Word ที่รองรับ WordApi 1.5 (เช่น Microsoft 365) จึงแสดงและเขียนค่าได้",
+      );
+      setValues((previous) => {
+        // สร้างใหม่จาก tag ของผลสแกนรอบนี้เท่านั้น — merge เอาแค่ค่าเดิมของ tag ที่ยังอยู่
+        // (tag ที่ถูกลบจากเอกสารตัดทิ้ง ไม่ให้ค้างไปโดน missingTags รอบเขียนถัด ๆ ไป)
+        const next: Record<string, string> = {};
+        const seen = new Set<string>();
+        for (const field of scanned) {
+          const tag = field.tag.trim();
+          if (tag === "" || seen.has(tag)) continue;
+          seen.add(tag);
+          next[tag] = merge && tag in previous ? previous[tag] : field.text;
+        }
+        return next;
+      });
+    } catch (scanError) {
+      setError(getErrorMessage(scanError, "สแกนช่องในเอกสารไม่สำเร็จ"));
+    } finally {
+      setScanning(false);
+    }
+  };
+
+  const handleView = async (id: number) => {
+    setError(null);
+    try {
+      await selectContentControl(id);
+    } catch (viewError) {
+      setError(getErrorMessage(viewError, "เลือกช่องไม่สำเร็จ"));
+    }
+  };
+
+  /** แทรกย่อหน้าว่างที่ cursor — เห็นผลในเอกสารทันทีจึงไม่ต้องแจ้ง success รบกวน */
+  const handleInsertParagraph = async () => {
+    setInsertingParagraph(true);
+    setError(null);
+    try {
+      await insertParagraphAtSelection();
+    } catch (insertError) {
+      setError(getErrorMessage(insertError, "แทรกย่อหน้าไม่สำเร็จ"));
+    } finally {
+      setInsertingParagraph(false);
+    }
+  };
+
+  const handleInsertBreak = async (breakKind: "line" | "page") => {
+    setInsertingBreak(breakKind);
+    setError(null);
+    try {
+      await insertBreakAtSelection(breakKind);
+    } catch (insertError) {
+      setError(
+        getErrorMessage(insertError, breakKind === "page" ? "แทรกตัวแบ่งหน้าไม่สำเร็จ" : "แทรกตัวแบ่งบรรทัดไม่สำเร็จ"),
+      );
+    } finally {
+      setInsertingBreak(null);
+    }
+  };
+
+  const handleApply = async () => {
+    setApplying(true);
+    setError(null);
+    setSuccess(null);
+    setWarning(null);
+    try {
+      const result = await applyTestValues(values);
+      if (result.appliedCount === 0 && result.failures.length === 0) {
+        setWarning("ไม่พบช่องที่ตรงกับค่าที่กรอก (อาจถูกลบไปหลังสแกน) — กดสแกนใหม่");
+      } else {
+        if (result.appliedCount > 0) {
+          setSuccess(`เขียนค่าทดสอบลงแล้ว ${result.appliedCount} ช่อง`);
+        }
+        const problems: string[] = [];
+        if (result.missingTags.length > 0) {
+          problems.push(`ไม่พบช่อง tag: ${result.missingTags.join(", ")}`);
+        }
+        if (result.failures.length > 0) {
+          const first = result.failures[0];
+          problems.push(
+            `เขียนไม่สำเร็จ ${result.failures.length} tag (${result.failures
+              .map((failure) => failure.tag)
+              .join(", ")}) — ${first.reason}`,
+          );
+        }
+        if (problems.length > 0) {
+          setWarning(
+            `${problems.join(" · ")} — ถ้าเอกสารนี้ถูกล็อค (Review → Restrict Editing) ให้ปลดก่อนจึงเขียนค่าได้`,
+          );
+        }
+      }
+      // สแกนใหม่ให้ค่าย่อใน list ตรงเอกสารจริง — คงค่าฟอร์มไว้ให้แก้ต่อ
+      await runScan(true);
+    } catch (applyError) {
+      setError(getErrorMessage(applyError, "เขียนค่าลงเอกสารไม่สำเร็จ"));
+    } finally {
+      setApplying(false);
+    }
+  };
+
+  return (
+    /* ห้ามใส่ items-start — ลูกทุกตัวจะหดตามเนื้อหา (เหมือน branch tracking ของ TaskpaneApp) */
+    <div className="flex flex-col gap-2 pt-4">
+      {error ? <MessageBar intent="error">{error}</MessageBar> : null}
+      {warning ? <MessageBar intent="warning">{warning}</MessageBar> : null}
+      {success ? <MessageBar intent="success">{success}</MessageBar> : null}
+      {capabilityWarning ? <MessageBar intent="warning">{capabilityWarning}</MessageBar> : null}
+
+      {/* §1 ตรวจสอบ Content Controls */}
+      <div className="mt-2 flex items-baseline justify-between gap-2">
+        <h3 className="font-display text-sm font-semibold text-ink">ตรวจสอบ Content Controls</h3>
+        {fields ? <span className="text-xs text-ink-soft">{fields.length} ช่อง</span> : null}
+      </div>
+      <button
+        type="button"
+        className={`${BTN_SECONDARY} w-full justify-center`}
+        disabled={busy}
+        aria-busy={scanning}
+        onClick={() => void runScan(false)}
+      >
+        {scanning ? (
+          <LoaderCircle className="size-4 animate-spin" aria-hidden />
+        ) : (
+          <ScanSearch className="size-4" aria-hidden />
+        )}
+        สแกนช่องในเอกสาร
+      </button>
+
+      {fields && (emptyTagCount > 0 || duplicateTags.length > 0) ? (
+        <MessageBar intent="warning">
+          {emptyTagCount > 0 ? `มี ${emptyTagCount} ช่องที่ยังไม่ได้ตั้ง tag` : ""}
+          {emptyTagCount > 0 && duplicateTags.length > 0 ? " · " : ""}
+          {duplicateTags.length > 0
+            ? `tag ซ้ำ: ${duplicateTags.join(", ")} — ตอน render ระบบอ่านเฉพาะช่องแรกของ tag`
+            : ""}
+        </MessageBar>
+      ) : null}
+
+      {!fields && !scanning ? (
+        <p className="text-sm text-ink-soft">กดสแกนเพื่อดูรายการช่องในเอกสาร</p>
+      ) : null}
+      {fields && fields.length === 0 && !scanning ? (
+        <p className="text-sm text-ink-soft">ไม่พบ content control ในเอกสาร</p>
+      ) : null}
+
+      {fields && fields.length > 0 ? (
+        <ol className="relative">
+          {fields.length > 1 ? <span className="absolute bottom-2 left-[3.5px] top-2 w-px bg-line" aria-hidden /> : null}
+          {fields.map((field, index) => (
+            <li className="relative pb-3 pl-4 last:pb-0" key={field.id}>
+              <span
+                className={`absolute left-0 top-[5px] size-2 rounded-full ${
+                  field.tag.trim() === "" ? "border border-warning bg-canvas" : "bg-ink"
+                }`}
+                aria-hidden
+              />
+              <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                <span className="text-xs text-ink-faint">{index + 1}.</span>
+                <span
+                  className="break-all text-sm font-medium text-ink"
+                  title={`tag: ${field.tag || "—"} · title: ${field.title || "—"} · type: ${field.type}`}
+                >
+                  {field.tag.trim() === "" ? "(ไม่มี tag)" : field.tag.trim()}
+                </span>
+                <span className="rounded-full bg-ink/[0.06] px-1.5 py-px text-[11px] text-ink-soft">
+                  {field.kind === "inline" ? "ในบรรทัด" : "บล็อก"}
+                </span>
+                <span className="ml-auto">
+                  <button
+                    type="button"
+                    className={BTN_ACTION}
+                    disabled={busy}
+                    onClick={() => void handleView(field.id)}
+                  >
+                    <Crosshair className="size-3.5" aria-hidden />
+                    ดูช่อง
+                  </button>
+                </span>
+              </div>
+              <p className="mt-0.5 truncate text-xs text-ink-soft" title={field.text}>
+                {field.text.trim() === "" ? "(ว่าง)" : field.text}
+              </p>
+            </li>
+          ))}
+        </ol>
+      ) : null}
+
+      {/* §2 กรอกค่าทดสอบ */}
+      {uniqueTags.length > 0 ? (
+        <>
+          <h3 className="mt-4 font-display text-sm font-semibold text-ink">กรอกค่าทดสอบ</h3>
+          <p className="text-sm text-ink-soft">
+            แก้ค่าแล้วกดเขียนลงเอกสารเพื่อดูผลจัดหน้าจริง — ช่องที่เว้นว่างจะไม่ถูกแตะ
+          </p>
+          <div className="flex flex-col gap-2" aria-busy={applying}>
+            {uniqueTags.map((tag, index) => (
+              <div key={tag} className="flex flex-col gap-1">
+                <label className="text-sm font-medium text-ink break-all" htmlFor={`wordaddin-template-value-${index}`}>
+                  {tag}
+                </label>
+                <input
+                  id={`wordaddin-template-value-${index}`}
+                  className="genesis-input block w-full"
+                  value={values[tag] ?? ""}
+                  onChange={(event) => setValues((previous) => ({ ...previous, [tag]: event.target.value }))}
+                  disabled={busy}
+                />
+              </div>
+            ))}
+          </div>
+          <button
+            type="button"
+            className={`${BTN_PRIMARY} w-full justify-center`}
+            disabled={busy || !hasFilledValue}
+            onClick={() => void handleApply()}
+          >
+            <PenLine className="size-4" aria-hidden />
+            {applying ? "กำลังเขียนค่า…" : "เขียนค่าลงเอกสาร"}
+          </button>
+        </>
+      ) : fields ? (
+        <p className="mt-4 text-sm text-ink-soft">ไม่มีช่องที่ตั้ง tag ไว้ — สแกนก่อนจึงจะกรอกค่าทดสอบได้</p>
+      ) : (
+        <p className="mt-4 text-sm text-ink-soft">สแกนก่อนเพื่อกรอกค่าทดสอบ</p>
+      )}
+
+      {/* §3 ปุ่มแทรกองค์ประกอบหน้า — เสริมตอนจัดโครงสร้าง template (ตรวจด้วย formatting marks ตามปกติ:
+          Ctrl+Shift+8 — สลับผ่าน add-in ไม่ได้เพราะ Office.js ไม่มี API) */}
+      <h3 className="mt-4 font-display text-sm font-semibold text-ink">แทรกย่อหน้า / ตัวแบ่ง</h3>
+      <div className="grid grid-cols-3 gap-1">
+        <button
+          type="button"
+          className={BTN_INSERT}
+          disabled={busy}
+          aria-busy={insertingParagraph}
+          title="แทรกย่อหน้าว่างที่ตำแหน่ง cursor (เหมือนกด Enter)"
+          onClick={() => void handleInsertParagraph()}
+        >
+          {insertingParagraph ? (
+            <LoaderCircle className="size-4 animate-spin" aria-hidden />
+          ) : (
+            <CornerDownLeft className="size-4" aria-hidden />
+          )}
+          ย่อหน้า
+        </button>
+        <button
+          type="button"
+          className={BTN_INSERT}
+          disabled={busy}
+          aria-busy={insertingBreak === "line"}
+          title="ขึ้นบรรทัดใหม่ในย่อหน้าเดิม (Shift+Enter)"
+          onClick={() => void handleInsertBreak("line")}
+        >
+          {insertingBreak === "line" ? (
+            <LoaderCircle className="size-4 animate-spin" aria-hidden />
+          ) : (
+            <WrapText className="size-4" aria-hidden />
+          )}
+          แบ่งบรรทัด
+        </button>
+        <button
+          type="button"
+          className={BTN_INSERT}
+          disabled={busy}
+          aria-busy={insertingBreak === "page"}
+          title="ขึ้นหน้าใหม่ (Ctrl+Enter)"
+          onClick={() => void handleInsertBreak("page")}
+        >
+          {insertingBreak === "page" ? (
+            <LoaderCircle className="size-4 animate-spin" aria-hidden />
+          ) : (
+            <FilePlus className="size-4" aria-hidden />
+          )}
+          แบ่งหน้า
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default TemplateToolsPanel;

components/wordaddin/VersionHistoryPanel.tsx

@@ -0,0 +1,149 @@
+import { Download, FileText, LoaderCircle } from "lucide-react";
+
+import { VersionRecord } from "@/wordaddin/models/versionRecord";
+
+import { MessageBar } from "./MessageBar";
+import { Spinner } from "./Spinner";
+
+/**
+ * FR-4 — แสดง version history (เลข version / เวลา / ผู้สร้าง) + ปุ่มดาวน์โหลด version นั้น
+ * ชั้นภาพ: timeline แนวตั้ง — จุดโหนดเท่าทึบคือเวอร์ชันล่าสุด จุดกลวงคือเก่ากว่า
+ * (เลข version เป็น static → ใช้ ink ตามกฎ "blue เฉพาะ interactive" ของ DESIGN.md)
+ */
+
+function formatTimestamp(iso: string): string {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime())
+    ? iso
+    : date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+}
+
+/** px-2 py-1.5 + text-xs ≈ สูง 30px — พ้นเกณฑ์ touch target 24px ของ WCAG 2.5.8 โดยยัง dense พอสำหรับ list */
+const BTN_ACTION =
+  "focus-ring inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs text-ink-soft transition hover:bg-primary/[0.06] hover:text-primary disabled:pointer-events-none disabled:opacity-50";
+
+export function VersionHistoryPanel({
+  versions,
+  loading,
+  error,
+  downloadingVersionId,
+  downloadingPdfVersionId,
+  onDownloadPdf,
+  onDownload,
+  onRetry,
+}: {
+  versions: VersionRecord[];
+  loading: boolean;
+  error: string | null;
+  /** versionId ของ version ที่กำลังดาวน์โหลดอยู่ (แสดง spinner ที่ปุ่ม) */
+  downloadingVersionId: string | null;
+  downloadingPdfVersionId: string | null;
+  onDownloadPdf: (version: VersionRecord) => void;
+  onDownload: (version: VersionRecord) => void;
+  onRetry: () => void;
+}) {
+  const anyDownloading = downloadingVersionId !== null || downloadingPdfVersionId !== null;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="mt-4 mb-2 flex items-baseline justify-between">
+        <h3 className="font-display text-sm font-semibold text-ink">Version history</h3>
+        {versions.length > 0 ? <span className="text-xs text-ink-soft">{versions.length} เวอร์ชัน</span> : null}
+      </div>
+
+      {loading ? <Spinner label="กำลังโหลด…" /> : null}
+
+      {error ? (
+        <MessageBar
+          intent="error"
+          action={
+            <button
+              type="button"
+              className="focus-ring rounded-md border border-error/40 bg-white px-2 py-1.5 text-xs text-error-ink"
+              onClick={onRetry}
+            >
+              ลองใหม่
+            </button>
+          }
+        >
+          {error}
+        </MessageBar>
+      ) : null}
+
+      {!loading && !error && versions.length === 0 ? (
+        <p className="text-sm text-ink-soft">ยังไม่มี version ในระบบ</p>
+      ) : null}
+
+      {versions.length > 0 ? (
+        <ol className="relative">
+          {/* ราง timeline — วาดครั้งเดียวระดับรายการ (เวอร์ชันเดียวไม่ต้องมีเส้น) */}
+          {versions.length > 1 ? (
+            <span className="absolute bottom-2 left-[3.5px] top-2 w-px bg-line" aria-hidden />
+          ) : null}
+          {versions.map((version, index) => {
+            const isLatest = index === 0;
+            return (
+              <li className="relative pb-3 pl-4 last:pb-0" key={version.versionId}>
+                <span
+                  className={`absolute left-0 top-[5px] size-2 rounded-full ${
+                    isLatest ? "bg-ink" : "border border-ink-faint bg-canvas"
+                  }`}
+                  aria-hidden
+                />
+                <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                  <span className="font-display text-sm font-semibold text-ink">v{version.versionNumber}</span>
+                  {isLatest ? (
+                    <span className="rounded-full bg-ink/[0.06] px-1.5 py-px text-[11px] text-ink-soft">ล่าสุด</span>
+                  ) : null}
+                  <span className="ml-auto flex items-center gap-1">
+                    <button
+                      type="button"
+                      className={BTN_ACTION}
+                      disabled={anyDownloading}
+                      aria-busy={downloadingVersionId === version.versionId}
+                      onClick={() => onDownload(version)}
+                    >
+                      {/* คง label เดิม + สลับเป็น spinner — label ยาว "กำลังดาวน์โหลด…" ทำแถว wrap กระโดด */}
+                      {downloadingVersionId === version.versionId ? (
+                        <LoaderCircle className="size-3.5 animate-spin" aria-hidden />
+                      ) : (
+                        <Download className="size-3.5" aria-hidden />
+                      )}
+                      ดาวน์โหลด
+                    </button>
+                    {version.hasPdf ? (
+                      <button
+                        type="button"
+                        className={BTN_ACTION}
+                        disabled={anyDownloading}
+                        aria-busy={downloadingPdfVersionId === version.versionId}
+                        onClick={() => onDownloadPdf(version)}
+                      >
+                        {downloadingPdfVersionId === version.versionId ? (
+                          <LoaderCircle className="size-3.5 animate-spin" aria-hidden />
+                        ) : (
+                          <FileText className="size-3.5" aria-hidden />
+                        )}
+                        PDF
+                      </button>
+                    ) : null}
+                  </span>
+                </div>
+                {version.message ? (
+                  <p className="mt-0.5 whitespace-pre-wrap [overflow-wrap:anywhere] text-xs text-ink">
+                    {version.message}
+                  </p>
+                ) : null}
+                <p className="mt-0.5 text-xs text-ink-soft">
+                  {formatTimestamp(version.createdAt)} · โดย {version.createdByUserId}
+                </p>
+              </li>
+            );
+          })}
+        </ol>
+      ) : null}
+    </div>
+  );
+}
+
+export default VersionHistoryPanel;

components/wordaddin/WordAddinGate.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { withBasePath } from "@/utils/base-path";
+import { signInForDemo } from "@/wordaddin/services/authService";
+
+import { MessageBar } from "./MessageBar";
+import { Spinner } from "./Spinner";
+import TaskpaneApp from "./TaskpaneApp";
+
+/**
+ * Gate ของ taskpane ใน App Router — ทำหน้าที่แทน Office.onReady ก่อน render ของ webpack
+ * ต้นฉบับ: Office.js โหลดใน <head> ของ taskpane.html แล้ว Office.onReady ก่อน createRoot
+ * (บริบท Next: ฉีด <script> self-host หลัง hydration แทน — ไฟล์ services ทั้งหมดไม่สัมผัส
+ *  Office ที่ module top-level จึงปลอดภัย)
+ *
+ * โหมด ?addindemo=untracked|tracking (เฉพาะ dev) — ข้าม office.js ทั้งหมด + sign in mock
+ * ทันที เพื่อดู UI ทุก phase ใน browser ธรรมดา (mock versioningService ทำงานได้เอง
+ * แต่ flow ที่แตะ Word จริงจะจบที่ error ตาม expected — ดู docs/WORDADDIN-DEV.md)
+ */
+
+/** office.js self-host จาก postinstall scripts/fetch-office-js.mjs (intranet ไม่ใช้ CDN) */
+const OFFICE_JS_SRC = withBasePath("/wordaddin/office-js/office.js");
+/** Office.onReady callback ไม่ยิงภายใน 5 วิหลังฉีด script ก็ proceed (กัน webview แปลก ๆ — โหลดสำเร็จแต่ onReady เงียบ) */
+const ONREADY_FALLBACK_MS = 5_000;
+
+/**
+ * โหลด office.js ครั้งเดียวต่อ page เป็น singleton promise ระดับ module —
+ * ห้ามฉีด <script> ซ้ำ: React StrictMode รัน effect สองรอบใน dev และ guard
+ * `typeof Office !== "undefined"` ไม่ครอบช่วงที่ตัวแรกยังโหลดไม่เสร็จ
+ * (โหลดซ้ำ = evaluate ซ้ำ = "Cannot redefine property: context" เพราะ office.js
+ *  define `Microsoft.Office.WebExtension.context` แบบ configurable:false)
+ * error → คืน promise ใหม่ครั้งหน้า (ลบ script เก่าทิ้งให้ inject ใหม่ได้)
+ */
+let officeReadyPromise: Promise<boolean> | null = null;
+
+function ensureOfficeJs(): Promise<boolean> {
+  if (!officeReadyPromise) {
+    officeReadyPromise = new Promise<boolean>((resolve) => {
+      if (typeof Office !== "undefined") {
+        void Office.onReady(() => resolve(true));
+        return;
+      }
+      const script = document.createElement("script");
+      const fallbackTimer = setTimeout(() => resolve(true), ONREADY_FALLBACK_MS);
+      const onReady = () => {
+        // เคลียร์ timer เฉพาะเมื่อ callback ของ Office.onReady ยิงจริง — ถ้าเคลียร์ตั้งแต่ onload
+        // แล้ว onReady เงียบ fallback จะตายไปก่อนทำหน้าที่ (ค้าง loading ตลอดไป)
+        void Office.onReady(() => {
+          clearTimeout(fallbackTimer);
+          resolve(true);
+        });
+      };
+      script.onload = onReady;
+      script.onerror = () => {
+        clearTimeout(fallbackTimer);
+        officeReadyPromise = null;
+        script.remove();
+        resolve(false);
+      };
+      script.src = OFFICE_JS_SRC;
+      script.async = false; // ให้ script นี้ได้ทำงานตามลำดับก่อนโค้ดที่แตะ Office
+      script.id = "office-js";
+      document.head.appendChild(script);
+    });
+  }
+  return officeReadyPromise;
+}
+
+type GateStatus = "loading" | "ready" | "error";
+
+export function WordAddinGate() {
+  const [status, setStatus] = useState<GateStatus>("loading");
+  const [demo, setDemo] = useState<"untracked" | "tracking" | null>(null);
+
+  useEffect(() => {
+    const demoParam = new URLSearchParams(window.location.search).get("addindemo");
+    if (process.env.NODE_ENV !== "production" && (demoParam === "untracked" || demoParam === "tracking")) {
+      signInForDemo();
+      setDemo(demoParam);
+      setStatus("ready");
+      return;
+    }
+
+    let cancelled = false;
+    void ensureOfficeJs()
+      .then((ok) => {
+        if (!cancelled) setStatus(ok ? "ready" : "error");
+      })
+      .catch(() => {
+        // Office.onReady throw sync ใน executor กลายเป็น rejection — ไป error screen แทนค้าง loading
+        if (!cancelled) setStatus("error");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (status === "loading") {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Spinner label="กำลังเริ่มต้น…" className="text-ink-soft" />
+      </div>
+    );
+  }
+  if (status === "error") {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <MessageBar
+          intent="error"
+          action={
+            <button
+              type="button"
+              className="focus-ring rounded-md border border-error/40 bg-white px-2 py-1.5 text-xs text-error-ink"
+              onClick={() => window.location.reload()}
+            >
+              ลองใหม่
+            </button>
+          }
+        >
+          โหลด Office.js ไม่สำเร็จ — เช็คว่า dev server รันอยู่และไฟล์ public/wordaddin/office-js/office.js
+          ถูกสร้างแล้ว (npm install รัน postinstall scripts/fetch-office-js.mjs)
+        </MessageBar>
+      </div>
+    );
+  }
+  return <TaskpaneApp demo={demo ?? undefined} />;
+}
+
+export default WordAddinGate;

db/schema.ts

@@ -8,6 +8,7 @@ import {
   pgTable,
   text,
   timestamp,
+  uniqueIndex,
   uuid,
 } from "drizzle-orm/pg-core";
 
@@ -110,7 +111,16 @@ export type TextboxData = {
 
 /** ตรายาง preset (F18/B5, D7) — scale เป็น % ของความกว้างหน้า (ความกว้างกรอบตรายาง)
  *  color เป็น optional — ไม่มี = STAMP_COLOR (แถวเดิมก่อนมีตัวเลือกสี) */
-export type StampData = { label: string; position: Point; scale: number; color?: string; note?: string };
+/** rotation = มุมเอียงของตรายางเป็นองศา (−180..180, หมุนรอบ**กลางกรอบ** — ลบ =
+ * ทวนเข็มนาฬิกา) ไม่มี field = ไม่เอียง (0°) — แถวเดิมไม่มี ใช้ร่วมกันได้ */
+export type StampData = {
+  label: string;
+  position: Point;
+  scale: number;
+  color?: string;
+  note?: string;
+  rotation?: number;
+};
 
 /** เลือกตาม column `type` (discriminated โดย enum) — ห้าม loosen เป็น any */
 export type AnnotationData =
@@ -124,15 +134,28 @@ export type AnnotationData =
 
 // ─── Tables ──────────────────────────────────────────────────────────────────
 
-export const files = pgTable("files", {
-  id: uuid("id").primaryKey().defaultRandom(),
-  title: text("title").notNull(),
-  description: text("description"),
-  pdfUrl: text("pdf_url").notNull(),
-  createdAt: timestamp("created_at", { withTimezone: true })
-    .defaultNow()
-    .notNull(),
-});
+export const files = pgTable(
+  "files",
+  {
+    id: uuid("id").primaryKey().defaultRandom(),
+    title: text("title").notNull(),
+    description: text("description"),
+    pdfUrl: text("pdf_url").notNull(),
+    /** N8: dedupe key เอกสารนำเข้าจากลิงก์ e-Court ("ecourt:<fileId>" / "url:<href>") — NULL = ไฟล์ seed/อัปโหลด */
+    externalId: text("external_id"),
+    /** N9: รหัสกลุ่มเอกสารที่เกี่ยวเนื่องกัน เช่น คดีเดียวกัน (จากลิงก์ e-Court `?typeId=` หรือช่องกลุ่มของฟอร์มอัปโหลด N4 — NULL = ไม่มีกลุ่ม)
+     *  ไม่มีคอลัมน์ชื่อกลุ่ม — แสดงผลด้วยรหัสกลุ่มโดยตรง (ถอด type_name ตามคำขอผู้ใช้ 2026-09-22) */
+    typeId: text("type_id"),
+    createdAt: timestamp("created_at", { withTimezone: true })
+      .defaultNow()
+      .notNull(),
+  },
+  (t) => [
+    index("files_type_id_idx").on(t.typeId),
+    // unique บน nullable ยอมหลาย NULL → row seed/อัปโหลดเดิม (external_id = NULL) ไม่ชนกัน
+    uniqueIndex("files_external_id_key").on(t.externalId),
+  ],
+);
 
 export const annotations = pgTable(
   "annotations",
@@ -230,12 +253,76 @@ export const annotationVersions = pgTable(
   (t) => [index("annotation_versions_file_idx").on(t.fileId)],
 );
 
+// ─── e-Court Documents Versioning (docs/PLAN-DOCVER.md) ──────────────────────
+
+/** เอกสารหนึ่งชิ้นต่อ docId ที่ผู้เรียกกำหนด — สร้าง implicitly ตอน upload version แรก
+ *  (ไม่มี endpoint/หน้าจอบริหารแยก) · **ไม่เกี่ยวกับตาราง files ของแอป note** —
+ *  ไม่มี FK ไม่มี field ร่วม ไม่มีหน้า note ใดอ่าน (ของกลุ่ม /api/documents ล้วน ๆ) */
+export const documents = pgTable(
+  "documents",
+  {
+    id: uuid("id").primaryKey().defaultRandom(),
+    /** รหัสเอกสารจากผู้เรียก (add-in ใช้ GUID DocumentTrackingId / e-Court ใช้รหัสของตัวเอง)
+     *  — unique ทั้งระบบ: เอกสารเดียวมี row เดียว (ห้ามซ้ำ) */
+    docId: text("doc_id").notNull(),
+    createdAt: timestamp("created_at", { withTimezone: true })
+      .defaultNow()
+      .notNull(),
+  },
+  (t) => [uniqueIndex("documents_doc_id_key").on(t.docId)],
+);
+
+/** version ของเอกสาร — ไฟล์จริงอยู่ใน MinIO ตาม object key (docx + pdf ต่อ version)
+ *  · pdf เป็น optional ตาม contract ของ add-in (best-effort — NULL = version นี้ไม่มี pdf)
+ *  · object key เป็น uuid ล้วน `docver/<versionId>/document.{docx,pdf}` ไม่มี input ผู้ใช้ */
+export const documentVersions = pgTable(
+  "document_versions",
+  {
+    id: uuid("id").primaryKey().defaultRandom(),
+    documentId: uuid("document_id")
+      .notNull()
+      .references(() => documents.id, { onDelete: "cascade" }),
+    versionNumber: integer("version_number").notNull(),
+    /** GUID ที่ client generate ก่อน upload — เก็บไว้เทียบ/สืบสวน ไม่ใช้เป็น identity
+     *  (ไม่มี idempotency — retry ของผู้เรียกเกิด version ใหม่ ตามแผน §4) */
+    clientVersionId: text("client_version_id"),
+    /** SHA-256 hex ของไบต์ docx — คำนวณฝั่ง server เสมอ (NOT NULL เพราะ buffer ก่อน insert ทุกครั้ง) */
+    contentHash: text("content_hash").notNull(),
+    /** commit message (FR-13) — trim แล้วว่าง = NULL */
+    message: text("message"),
+    /** snapshot ตอน upload: map ดิบ `{ [sdtTag]: text }` จาก content controls
+     *  (รูปแบบ {value,missing} ของเอกสารผูก template ยังไม่มีผู้ส่ง — วันหน้ามีค่อยขยาย $type) */
+    fields: jsonb("fields").$type<Record<string, string>>(),
+    templateId: text("template_id"),
+    /** ชื่อไฟล์ดั้งเดิมที่ browser ส่ง (ผ่าน decodeUploadFilename + strip path แล้ว) —
+     *  ใช้ตั้ง Content-Disposition ของ object ไม่ใช่ชื่อ object */
+    fileName: text("file_name"),
+    docxObjectKey: text("docx_object_key").notNull(),
+    pdfObjectKey: text("pdf_object_key"),
+    docxSize: integer("docx_size").notNull(),
+    pdfSize: integer("pdf_size"),
+    /** ผู้อัปโหลด — endpoint รับมาแบบ plain field เพราะระบบ stand-alone ไม่มี session */
+    userId: text("user_id").notNull(),
+    userName: text("user_name").notNull(),
+    createdAt: timestamp("created_at", { withTimezone: true })
+      .defaultNow()
+      .notNull(),
+  },
+  (t) => [
+    // safety net ของการจ่ายเลข max+1 ภายใต้ FOR UPDATE (PLAN-DOCVER.md §3)
+    uniqueIndex("document_versions_document_number_key").on(t.documentId, t.versionNumber),
+    index("document_versions_document_created_idx").on(t.documentId, t.createdAt),
+  ],
+);
+
 // ─── DTO (timestamp เป็น ISO string เสมอ — ห้ามส่ง Date ข้าม server→client) ──
 
 export type AnnotationRow = typeof annotations.$inferSelect;
 export type BookmarkRow = typeof bookmarks.$inferSelect;
 export type ReplyRow = typeof annotationReplies.$inferSelect;
 export type AnnotationVersionRow = typeof annotationVersions.$inferSelect;
+export type DocumentRow = typeof documents.$inferSelect;
+export type DocumentVersionRow = typeof documentVersions.$inferSelect;
 
 export type AnnotationDTO = {
   id: string;
@@ -348,3 +435,33 @@ export function toVersionDTO(row: AnnotationVersionRow): AnnotationVersionDTO {
     createdAt: row.createdAt.toISOString(),
   };
 }
+
+/** item ของ GET /api/documents/{docId}/versions — surface ตรง VersionRecord ของ
+ *  wordaddin/models/versionRecord.ts (คัดลอกมา define เอง — ห้าม import จาก wordaddin/
+ *  ซึ่งเป็น client-only zone) + createdByUserName เป็นส่วนเสริม (field เพิ่มไม่ทำ
+ *  UI ฝั่ง client พัง) · hasPdf derive จาก pdfObjectKey !== null ตัวเดียว (PLAN-DOCVER.md §1) */
+export type DocumentVersionDTO = {
+  versionId: string;
+  versionNumber: number;
+  createdAt: string;
+  createdByUserId: string;
+  createdByUserName: string;
+  contentHash: string;
+  fields: Record<string, string> | null;
+  message: string | null;
+  hasPdf: boolean;
+};
+
+export function toDocumentVersionDTO(row: DocumentVersionRow): DocumentVersionDTO {
+  return {
+    versionId: row.id,
+    versionNumber: row.versionNumber,
+    createdAt: row.createdAt.toISOString(),
+    createdByUserId: row.userId,
+    createdByUserName: row.userName,
+    contentHash: row.contentHash,
+    fields: row.fields,
+    message: row.message,
+    hasPdf: row.pdfObjectKey !== null,
+  };
+}

docker-compose.yml

@@ -0,0 +1,58 @@
+# Dev dependencies ของ judes-note — รันด้วย `docker compose up -d` (ทั้งคู่)
+# หรือ `docker compose up -d minio` (ถ้าจะรัน DB แบบเดิมด้วย docker run)
+#
+# service `db` ใช้ชื่อ container/วอลุ่มเดียวกับคำสั่ง docker run เดิมใน README
+# (วอลุ่ม pin ชื่อไม่มี prefix ของ compose ผ่าน `name:` ด้านล่าง) — ถ้ามี container
+# judes-note-db เก่ารันอยู่ (สร้างด้วย docker run) ให้ `docker rm -f judes-note-db`
+# ก่อน แล้ว compose จะต่อวอลุ่ม judes-note-db-data เดิมได้เลย ข้อมูลไม่หาย
+services:
+  db:
+    image: postgres:17-alpine
+    container_name: judes-note-db
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      # ชื่อ database ตรง DATABASE_URL ใน .env (สร้างตอน first init ของวอลุ่มเท่านั้น
+      # — วอลุ่มเดิมจาก docker run ที่ init ด้วย postgres ต้องสร้างเอง:
+      # docker exec judes-note-db psql -U postgres -c 'CREATE DATABASE "ecourt-note"')
+      POSTGRES_DB: ecourt-note
+    ports:
+      - "54322:5432"
+    volumes:
+      - judes-note-db-data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d postgres"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+  # Object storage ของกลุ่ม API เอกสาร versioning (docs/PLAN-DOCVER.md §6) —
+  # bucket docver ไม่ต้องสร้างเอง: app สร้างตอน first use ผ่าน ensureBucket
+  # (ใช้ registry ทางการของ MinIO ที่ quay.io + pin RELEASE — Docker Hub
+  # ของ minio/minio เจอ rate limit/เข้าไม่ได้บ่อย)
+  minio:
+    image: quay.io/minio/minio:RELEASE.2025-09-07T16-13-09Z
+    container_name: judes-note-minio
+    command: server /data --console-address ":9001"
+    environment:
+      MINIO_ROOT_USER: minioadmin
+      MINIO_ROOT_PASSWORD: minioadmin
+    ports:
+      # โฮสต์ใช้ 19000/19001 เพราะ 9000/9001 ชนกับ container ของโปรเจกต์อื่นในเครื่องนี้
+      # (ข้างใน container ยังเป็น 9000/9001 ตาม default ของ MinIO)
+      - "19000:9000" # S3 API (MINIO_ENDPOINT/MINIO_PORT)
+      - "19001:9001" # console ดู bucket/object ผ่าน browser
+    volumes:
+      - judes-note-minio-data:/data
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+volumes:
+  # pin ชื่อจริงไม่มี prefix <project>_ ของ compose ให้ตรงชื่อวอลุ่มจาก docker run เดิม
+  judes-note-db-data:
+    name: judes-note-db-data
+  judes-note-minio-data:
+    name: judes-note-minio-data

docker/web.Dockerfile

@@ -2,8 +2,11 @@
 FROM node:24-alpine AS deps
 WORKDIR /app
 COPY package.json package-lock.json ./
-# postinstall เขียน public/pdf.worker.min.mjs — ต้องมีโฟลเดอร์ public/ ก่อน ไม่งั้น npm ci ล้ม
-RUN mkdir -p public && npm ci
+# postinstall รัน scripts/patch-pdf-worker.mjs + copy-swagger-ui.mjs + fetch-office-js.mjs ตอน npm ci — คัดลอกเข้ามาก่อน ไม่งั้นหาไฟล์ไม่เจอ
+# (fetch-office-js ดาวน์โหลด Office.js runtime จาก appsforoffice.microsoft.com — build stage ต้องออกอินเทอร์เน็ตถึง CDN นี้ได้)
+COPY scripts/patch-pdf-worker.mjs scripts/copy-swagger-ui.mjs scripts/fetch-office-js.mjs scripts/
+# postinstall เขียน public/note/pdf.worker.min.mjs (script สร้าง dir ปลายทางเอง)
+RUN npm ci
 
 # ─── Stage 2: build Next.js (output: standalone) ───
 FROM node:24-alpine AS builder
@@ -11,14 +14,29 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 # ประกันว่า pdf.worker.min.mjs ตรงกับเวอร์ชัน pdfjs-dist ใน node_modules เสมอ
-# (postinstall รันใน stage deps ซึ่งยังไม่มี public/ ของ repo)
-RUN node -e "require('fs').copyFileSync('node_modules/pdfjs-dist/build/pdf.worker.min.mjs','public/pdf.worker.min.mjs')"
+# (postinstall รันใน stage deps ซึ่งยังไม่มี public/ ของ repo) — ต้องใช้ตัว patch ด้วย
+# ไม่ใช่ copyFileSync เปล่า ๆ ไม่งั้น worker ที่ patch fake-space ไทยถูกเขียนทับด้วยตัวดิบ
+# + คัดลอก asset Swagger UI (public/note/swagger-ui/) ให้ตรงเวอร์ชันเช่นกัน
+# + ดาวน์โหลด Office.js runtime ล่าสุด (public/wordaddin/office-js/) ของ taskpane wordaddin
+RUN node scripts/patch-pdf-worker.mjs && node scripts/copy-swagger-ui.mjs && node scripts/fetch-office-js.mjs
 ENV NEXT_TELEMETRY_DISABLED=1
 # db/index.ts throw ถ้าไม่มี DATABASE_URL ตอน next build เก็บ page data —
 # ใส่ค่า dummy (postgres.js เชื่อมแบบ lazy ไม่มี query ตอน build) ตัวจริงฉีดตอน docker run
 ENV DATABASE_URL=postgresql://placeholder:placeholder@127.0.0.1:5432/placeholder
+ENV MINIO_ENDPOINT=127.0.0.1
+ENV MINIO_PORT=19000
+ENV MINIO_USE_SSL=false
+ENV MINIO_ACCESS_KEY=minioadmin
+ENV MINIO_SECRET_KEY=minioadmin
+ENV DOCVER_API_KEY=2d9b76d49a4f5311f6a0dacf759ecec53f34b6d102f24c696890a4052c99cf54
+ENV DOCVER_TOKEN_SECRET=487023dd1c1c4d6a07475e96b1cc300fec1e68ac9c2dd7d5ac9b1bf75da1053e
+ENV DOCVER_TOKEN_TTL_SECONDS=604800
+ENV MINIO_BUCKET=docver
+ENV DOCVER_LINK_TTL_SECONDS=900
+
 RUN npm run build
 
+
 # ─── Stage 3: runtime ตัวเบา (แค่ standalone + public/) ───
 FROM node:24-alpine AS runner
 WORKDIR /app
@@ -27,10 +45,14 @@ ENV NODE_ENV=production \
     PORT=3000 \
     HOSTNAME=0.0.0.0
 RUN addgroup -S nodejs && adduser -S nextjs -G nodejs
-# Next 14.2 รวม public/ (pdf.worker, ฟอนต์ Sarabun, samples PDF) ไว้ใน standalone แล้ว
-# แต่ไม่รวม .next/static (JS chunks) — ต้องคัดลอกเพิ่ม ไม่งั้นหน้าเว็บไม่มี JS
+# Next 14.2 standalone **ไม่รวม public/ และ .next/static เอง** — ต้องคัดลอกเองทั้งคู่
+# (ก่อนหน้านี้เข้าใจผิดว่า Next รวม public/ ให้: จริง ๆ มันหลุดเข้ามาแค่บางส่วนผ่าน output
+#  file tracing ที่ตาม fs.readFile ของ server code (public/note จาก lib/server-pdf.ts,
+#  ฟอนต์ Sarabun จาก export route) — public/wordaddin/office-js ไม่มีใครอ่านผ่าน fs
+#  จึงไม่ถูกดึงมา แล้ว taskpane พังใน production 2026-10-16)
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 # migration: ไฟล์ SQL (drizzle-kit generate) + runner — รันตอน container start
 COPY --from=builder --chown=nextjs:nodejs /app/drizzle ./drizzle
 COPY --from=builder --chown=nextjs:nodejs /app/scripts ./scripts
@@ -40,10 +62,10 @@ COPY --from=deps --chown=nextjs:nodejs /app/node_modules/postgres ./node_modules
 # สร้างโฟลเดอร์ uploads ให้ user nextjs เป็นเจ้าของ — named volume ที่ compose mount ทับ
 # (เก็บไฟล์อัปโหลดข้าม redeploy) จะได้ ownership จาก image ตอน init:
 # ไม่มี dir นี้ใน image = volume ถูกสร้างโดย root แล้ว action เขียนไฟล์ไม่ได้ (EACCES)
-RUN mkdir -p public/uploads && chown nextjs:nodejs public/uploads
+RUN mkdir -p public/note/uploads && chown nextjs:nodejs public/note/uploads
 USER nextjs
 EXPOSE 3000
 # DATABASE_URL ฉีดตอนรันผ่าน env ของ container (อย่าฝังใน image)
 # migrate สร้าง database ถ้ายังไม่มี + apply ไฟล์ที่ยังไม่ได้ apply (idempotent)
-# seed-samples sync ตาราง files กับ public/samples/ ที่ bake อยู่ใน image (idempotent)
+# seed-samples sync ตาราง files กับ public/note/samples/ ที่ bake อยู่ใน image (idempotent)
 CMD ["sh", "-c", "node scripts/migrate.mjs && node scripts/seed-samples.mjs && exec node server.js"]

docs/API-DOCUMENTS.md

@@ -0,0 +1,291 @@
+# คู่มือการใช้ Documents API (N10)
+
+> สำหรับ: ทีม backend ของ e-Court ที่จะเรียก API นี้แบบ **server-to-server** (ไม่มี browser/หน้า UI)
+> ใช้กับโค้ดเวอร์ชัน 2026-09-25 · สเปกฉบับเต็ม/เหตุผลการออกแบบ: [`docs/PLAN-API.md`](./PLAN-API.md)
+
+## 1. API นี้ทำอะไรให้
+
+ดึงข้อมูลที่เกิดในระบบ Judge's Note กลับไปใช้ต่อ โดยถามได้ 2 แบบจาก **endpoint เดียว**:
+
+| ต้องการ | ส่งอะไร | ได้อะไร |
+|---|---|---|
+| เอกสารเดียว | `fileId` (id ของ e-Court) | `documents` ยาว 1 ชิ้น พร้อม annotation + bookmark ของไฟล์นั้น |
+| ทุกเอกสารในกลุ่ม | `typeId` | `documents` ทุกไฟล์ในกลุ่ม เรียงตามวันที่เปิดเข้าระบบ |
+| เอกสารเดียว (ยืนยันกลุ่มด้วย) | `fileId` + `typeId` พร้อมกัน | เหลือเฉพาะเอกสารเดียวที่ตรง**ทั้งสอง**เงื่อนไข (AND) — ไม่ตรงคู่ = 404 |
+
+เป็น **read-only** ทั้งหมด — ข้อมูลที่ได้เป็น snapshot ณ ตอนเรียก ไม่มี webhook/event push แจ้งเมื่อมีรายการใหม่ (ต้องยิงซ้ำเองตามความจำเป็น)
+
+## 2. สิ่งที่ต้องมีก่อนเรียก
+
+| สิ่งที่ต้องมี | ค่า |
+|---|---|
+| URL | `https://<host>/docedit/api/note/external/documents` (API อยู่ใต้ `app/api/note/**` ของ basePath `/docedit` — ต่างจากหน้า UI ที่อยู่ใต้ `/docedit/note/…`) |
+| Method | `POST` (อ่านอย่างเดียว แต่ใช้ POST เพราะถามด้วย JSON body — GET ที่แนบ body ไม่เป็นมาตรฐาน) |
+| API Key | ขอจากผู้ดูแลระบบ Judge's Note — เก็บเป็น secret ฝั่ง backend e-Court อย่าใส่ใน log/URL |
+| Content-Type | `application/json` |
+
+## 3. Authentication
+
+ส่ง API Key ผ่าน header **`x-api-key`** ทุก request:
+
+```http
+POST /docedit/api/note/external/documents HTTP/1.1
+Host: <host>
+x-api-key: <API Key ที่ได้รับ>
+content-type: application/json
+```
+
+- ไม่ใส่ header หรือ key ผิด → **401** พร้อมข้อความเดียวกันทั้งสองกรณี (`{"error":"API key ไม่ถูกต้อง"}`)
+- Key นี้เชื่อถือได้ระดับ **backend e-Court เท่านั้น** — ห้ามส่งต่อให้ browser/แอปฝั่งผู้ใช้ (API ไม่ได้ใส่ CORS headers เพราะออกแบบให้เรียกจาก server เท่านั้น)
+- ผลลัพธ์รวมตำแหน่งกล่องปิดพราง (REDACTION) ด้วย — กล่าวคือผู้ถือ key เห็นว่ามีการปิดพรางตรงไหนของหน้า (เห็นเฉพาะพิกัด เนื้อหาใต้กล่องไม่ได้)
+
+## 4. Request body
+
+```jsonc
+{
+  "fileId": "<fileId ของ e-Court>",              // ถามเอกสารเดียว
+  "typeId": "<typeId ของกลุ่ม>",                  // ถามทุกเอกสารในกลุ่ม
+  "filter": {                                      // optional ทั้งก้อน
+    "type": "bookmarks",                           // "bookmarks" | "annotations" — ไม่ส่ง = ทั้งสอง
+    "userId": "<userId ของระบบนี้>",               // หรือ array — กรองตามเจ้าของรายการ
+    "annotationTypes": ["COMMENT", "HIGHLIGHT"]    // หรือค่าเดียว — กรองชนิดของ annotation
+  }
+}
+```
+
+### 4.1 field ระดับบนสุด
+
+| field | ชนิด | ค่าเริ่มต้น | คำอธิบาย |
+|---|---|---|---|
+| `fileId` | string | — | id ของเอกสาร **ตามที่ e-Court ส่งมาในลิงก์** (`?fileId=`) ไม่ใช่ UUID ของระบบนี้ |
+| `typeId` | string | — | รหัสกลุ่มเอกสาร ตามที่ส่งมาในลิงก์ (`?typeId=`) |
+| `filter` | object | ไม่กรอง | ดู §4.2 |
+
+กติกา:
+
+- ต้องมี `fileId` **หรือ** `typeId` อย่างน้อยหนึ่งอย่าง — ขาดทั้งคู่ = 400
+- ส่ง**ทั้งคู่**ได้ = AND กรองเฉพาะเอกสารเดียวที่ตรงทั้งสองเงื่อนไข (เช่น กันเข้าผิดกลุ่ม) — ไม่ตรงคู่ = 404
+- ค่า string จะถูก trim — ส่งมาเป็นค่าว่าง/whitespace ล้วน = ถือว่าไม่ได้ส่ง field นั้น
+- รับเฉพาะ 3 field นี้ — field อื่น (พิมพ์ผิด เช่น `fileID`, `filters`) = 400 บอกชื่อ field ที่ไม่รู้จัก
+
+### 4.2 `filter`
+
+| field | ชนิด | ค่าเริ่มต้น | คำอธิบาย |
+|---|---|---|---|
+| `type` | `"bookmarks"` \| `"annotations"` | ทั้งสอง | เลือกเอาเฉพาะส่วน — ส่วนที่ไม่เลือกคืนเป็น array ว่าง ไม่ใช่หายไปจาก response |
+| `userId` | string หรือ array ของ string | ทุกคน | กรองตาม**เจ้าของรายการ**ทั้ง annotations และ bookmarks (`userId` ระบบนี้ = `u_userid` ที่เห็นใน DTO) — ไม่กรองตามผู้ตอบ reply (reply ตามมาครบกับ annotation ที่ผ่านตัวกรอง) |
+| `annotationTypes` | string หรือ array ของ enum | ทุกชนิด | กรองชนิดของ annotation — มีผลเฉพาะเมื่อผลลัพธ์รวม annotations (เลือก `type:"bookmarks"` อย่างเดียว = เพิกเฉยเงียบ ๆ ไม่ใช่ 400) |
+
+ค่า enum ของ `annotationTypes`: `HIGHLIGHT` `DRAW` `COMMENT` `SHAPE` `REDACTION` `TEXTBOX` `STAMP` — ค่าอื่น = 400
+
+`filter` รับเฉพาะ 3 field นี้เช่นกัน (`type`/`userId`/`annotationTypes`) — field อื่น = 400
+
+## 5. Response 200
+
+รูปเดียวเสมอ (ไม่ว่าถามแบบไหน): `{ "documents": [ … ] }` — `documents` เป็น array ยาว 1 ตอนถามด้วย `fileId`, หลายชิ้นตอนถามด้วย `typeId` (กลุ่มว่าง = array ว่าง ไม่ใช่ error)
+
+### 5.1 field ของแต่ละเอกสาร
+
+| field | ชนิด | คำอธิบาย |
+|---|---|---|
+| `id` | string | UUID ของไฟล์ในระบบนี้ (ใช้ประกอบ `url` — ไม่ต้องจำ) |
+| `externalFileId` | string \| null | `fileId` ของ e-Court ตามที่ส่งมาในลิงก์ — **null** ได้: ไฟล์ในกลุ่มที่มาโดยไม่ผ่าน fileId (เข้าจากลิงก์ไม่มี fileId หรืออัปโหลดในระบบนี้) |
+| `title` | string | ชื่อเอกสาร |
+| `typeId` | string \| null | กลุ่ม — null = ไม่มีกลุ่ม |
+| `createdAt` | string | ISO 8601 (วันที่เปิดเข้าระบบครั้งแรก) |
+| `annotations` | array | ดู §5.2 — เรียง `(pageIndex, createdAt)` |
+| `bookmarks` | array | ดู §5.3 — เรียง `pageIndex → yOffset → createdAt` |
+
+ลำดับ `documents` เมื่อถามด้วย `typeId`: ตาม `createdAt` ของไฟล์ (เก่า → ใหม่)
+
+### 5.2 annotation แต่ละรายการ
+
+| field | ชนิด | คำอธิบาย |
+|---|---|---|
+| `id` | string | UUID ของรายการ |
+| `fileId` | string | UUID ของไฟล์ |
+| `pageIndex` | number | **0-based** — หน้า 1 ของเอกสาร = `0` |
+| `userId` / `userName` | string | ผู้สร้างรายการ (`userName` = `u_userlogin` ของ e-Court) |
+| `type` | string | หนึ่งใน 7 enum ด้านบน |
+| `data` | object | รายละเอียดตามชนิด — ดูตาราง §5.4 |
+| `createdAt` / `updatedAt` | string | ISO 8601 |
+| `resolved` | boolean | สถานะ "จัดการแล้ว" (F10) |
+| `resolvedAt` | string \| null | ISO 8601 / null |
+| `url` | string | deep link กลับมาหน้าอ่านเอกสารของระบบนี้ ไปตรงรายการนี้ (`…/annotate/<id>?ann=<annotationId>`) — เป็น **URL เต็ม** ใช้ได้ทันที |
+| `replies` | array | คำตอบในเธรดของ comment — ดู §5.5 — เรียง `createdAt` |
+
+รวม annotation **ทุกสถานะ** (ดู `resolved`) และ**ทุกผู้ใช้** (เว้นแต่กรองด้วย `filter.userId`)
+
+### 5.3 bookmark แต่ละรายการ
+
+| field | ชนิด | คำอธิบาย |
+|---|---|---|
+| `id` | string | UUID ของรายการ |
+| `fileId` | string | UUID ของไฟล์ |
+| `pageIndex` | number | **0-based** เช่นเดียวกับ annotation |
+| `userId` / `userName` | string | ผู้สร้าง (`userName` อาจเป็น `""` สำหรับรายการเก่า = ไม่ทราบชื่อ) |
+| `title` | string | ชื่อหัวข้อ bookmark |
+| `parentId` | string \| null | โครงสร้าง 3 ระดับ — null = ระดับบนสุด, มีค่า = เป็นหัวข้อย่อยของ bookmark นั้น |
+| `note` | string \| null | โน้ตย่อยของ bookmark |
+| `yOffset` | number | ตำแหน่งบนหน้า เป็น % ของความสูงหน้า (0–100) |
+| `createdAt` | string | ISO 8601 |
+| `url` | string | deep link กลับมาหน้าอ่าน (`…/annotate/<id>?page=<หน้า>` เป็น **1-based** — `?page=1` = `pageIndex` 0) |
+
+### 5.4 field `data` ของ annotation ตามชนิด
+
+พิกัดทุกค่าเป็น **% ของขนาดหน้า** (ไม่ใช่ pixel — วาดทับตำแหน่งเดิมได้ทุกขนาดจอ): `Rect` = `{x, y, width, height}`, `Point` = `{x, y}`
+
+| `type` | field ใน `data` | หมายเหตุ |
+|---|---|---|
+| `HIGHLIGHT` | `text`, `color`, `rects[]`, `style?`, `opacity?`, `note?` | `text` = ข้อความที่คลุม, `rects` = 1 rect ต่อบรรทัด, `style` = `highlight`\|`underline`\|`strikethrough`\|`squiggle` (ไม่มี = ไฮไลต์ทึบ) |
+| `DRAW` | `strokeColor`, `strokeWidth`, `paths[]`, `pen?`, `widths?`, `opacity?`, `note?` | เส้นวาดมือ — `strokeWidth` เป็น % ของความกว้างหน้า, `pen` = `pencil`\|`highlighter`, `widths` = ความหนาต่อจุดจากสไตลัส (ยาวเท่า `paths`) |
+| `COMMENT` | `position`, `message` | sticky note — `position` = ตำแหน่ง pin |
+| `SHAPE` | `shape`, `strokeColor`, `strokeWidth`, `note?` + `rect` (rect/ellipse) **หรือ** `from`/`to` (line/arrow) | `shape` = `rect`\|`ellipse`\|`line`\|`arrow` |
+| `REDACTION` | `rect`, `note?` | กล่องปิดพราง — เห็นเฉพาะตำแหน่ง ไม่มีเนื้อหาใต้กล่องใน DB |
+| `TEXTBOX` | `position`, `text`, `color`, `fontSize`, `bold?`, `opacity?`, `align?`, `segments?`, `width?`, `note?` | `position` = มุมซ้ายบนของกล่อง, `fontSize` = % ของความกว้างหน้า, `text` เก็บข้อความรวมเสมอ (แม้มี `segments` ตัวหนาเฉพาะส่วน) |
+| `STAMP` | `label`, `position`, `scale`, `color?`, `note?` | ตรายางข้อความ preset — `scale` = ความกว้างกรอบ % ของความกว้างหน้า |
+
+`note` (optional ทุกชนิด) = โน้ตคำอธิบายของรายการ เช่น เหตุผลที่ไฮไลต์
+
+### 5.5 reply แต่ละรายการ (ใน `replies` ของ annotation)
+
+| field | ชนิด | คำอธิบาย |
+|---|---|---|
+| `id` | string | UUID ของคำตอบ |
+| `annotationId` | string | UUID ของ annotation แม่ |
+| `userId` / `userName` | string | ผู้ตอบ |
+| `message` | string | ข้อความ |
+| `createdAt` | string | ISO 8601 |
+
+## 6. Error
+
+error ทุกสถานะเป็น JSON รูปเดียวกัน: `{ "error": "<ข้อความไทย>" }`
+
+| สถานะ | เมื่อไร | ข้อความ |
+|---|---|---|
+| 400 | body ไม่ใช่ JSON ที่ถูกต้อง | `body ต้องเป็น JSON ที่ถูกต้อง` |
+| 400 | body ไม่ใช่ object | `body ต้องเป็น JSON object` |
+| 400 | มี field ที่ไม่รู้จัก | `ไม่รู้จัก field '<field>' (รับเฉพาะ fileId, typeId, filter)` |
+| 400 | `fileId`/`typeId` ไม่ใช่ string | `fileId ต้องเป็น string` / `typeId ต้องเป็น string` |
+| 400 | ไม่มีทั้ง `fileId` และ `typeId` | `ต้องระบุ fileId หรือ typeId อย่างน้อยหนึ่งอย่าง` |
+| 400 | `filter` ไม่ใช่ object / มี field อื่น | `filter ต้องเป็น object เช่น { "type": "bookmarks" }` / `filter รับเฉพาะ field 'type', 'userId', 'annotationTypes'` |
+| 400 | `filter.type` ค่าไม่รู้จัก (รวมเอกพจน์ `annotation`/`bookmark`) | `filter.type รับค่า bookmarks หรือ annotations เท่านั้น` |
+| 400 | `filter.userId` ไม่ใช่ string/array ของ string | `filter.userId ต้องเป็น string หรือ array ของ string` |
+| 400 | `filter.annotationTypes` ค่านอก enum | `filter.annotationTypes รับค่า HIGHLIGHT, DRAW, COMMENT, SHAPE, REDACTION, TEXTBOX, STAMP เท่านั้น` |
+| 401 | ไม่ใส่ `x-api-key` หรือ key ผิด | `API key ไม่ถูกต้อง` (ข้อความเดียวกันกัน enumeration) |
+| 401 | ฝั่ง server ยังไม่ตั้ง key | `API ยังไม่ได้ตั้งค่าคีย์` |
+| 404 | ถาม `fileId` ที่ไม่เคยเปิดในระบบ | `ไม่พบเอกสารนี้ในระบบ (ยังไม่เคยเปิด)` |
+| 404 | ส่งคู่ `fileId`+`typeId` แต่ไม่ตรงคู่ | `ไม่พบเอกสารนี้ในระบบ (ยังไม่เคยเปิด หรือไม่ได้อยู่ในกลุ่ม typeId ที่ระบุ)` |
+| 500 | ระบบนี้มีปัญหาฐานข้อมูล ณ ตอนนั้น | `เกิดข้อผิดพลาดของระบบ โปรดลองใหม่อีกครั้ง` (รายละเอียดอยู่ใน log ฝั่ง server อย่างเดียว) |
+
+การแยก "ไม่มีข้อมูล" ออกจาก "ผิดพลาด":
+
+- เอกสารเคยเปิดแต่ไม่มีรายการ → **200** พร้อม `annotations: []` / `bookmarks: []`
+- กลุ่มไม่มีเอกสารเลย → **200** พร้อม `documents: []`
+- `filter.userId` ไม่ตรงกับผู้ใช้ใดในระบบ → **200** รายการว่าง (ไม่ใช่ 400)
+
+## 7. ตัวอย่างการเรียก
+
+### 7.1 เอกสารเดียว เอาทุกอย่าง
+
+```bash
+curl -X POST -H "x-api-key: $EXTERNAL_API_KEY" -H "content-type: application/json" \
+  -d '{"fileId":"1234"}' \
+  "http://localhost:3000/docedit/api/note/external/documents"
+```
+
+Response (ตัดย่อ):
+
+```jsonc
+{
+  "documents": [
+    {
+      "id": "3f2a9c1e-8b7d-4e2a-9f10-11a2b3c4d5e6",
+      "externalFileId": "1234",
+      "title": "คำพิพากษา ผบ.123/2569",
+      "typeId": "CASE-2569-0001",
+      "createdAt": "2026-09-24T09:15:33.120Z",
+      "annotations": [
+        {
+          "id": "7c1d2e3f-4a5b-6c7d-8e9f-0a1b2c3d4e5f",
+          "fileId": "3f2a9c1e-8b7d-4e2a-9f10-11a2b3c4d5e6",
+          "pageIndex": 0,
+          "userId": "u_1234",
+          "userName": "somchai.j",
+          "type": "COMMENT",
+          "data": { "position": { "x": 41.2, "y": 37.8 }, "message": "ข้อเท็จจริงตรงนี้ขัดกับคำให้การ ร.2" },
+          "createdAt": "2026-09-24T10:02:11.530Z",
+          "updatedAt": "2026-09-24T10:02:11.530Z",
+          "resolved": false,
+          "resolvedAt": null,
+          "url": "http://localhost:3000/docedit/note/annotate/3f2a9c1e-…?ann=7c1d2e3f-…",
+          "replies": [
+            {
+              "id": "9e8f0a1b-2c3d-4e5f-6a7b-8c9d0e1f2a3b",
+              "annotationId": "7c1d2e3f-4a5b-6c7d-8e9f-0a1b2c3d4e5f",
+              "userId": "u_2200",
+              "userName": "somsri.k",
+              "message": "บันทึกไว้ก่อน ค่อยถามผู้เบิกความวันพรุ่งนี้",
+              "createdAt": "2026-09-25T08:44:02.310Z"
+            }
+          ]
+        }
+      ],
+      "bookmarks": [
+        {
+          "id": "1a2b3c4d-5e6f-7a8b-9c0d-1e2f3a4b5c6d",
+          "fileId": "3f2a9c1e-8b7d-4e2a-9f10-11a2b3c4d5e6",
+          "pageIndex": 2,
+          "userId": "u_1234",
+          "userName": "somchai.j",
+          "title": "บทวินิจฉัย",
+          "parentId": null,
+          "note": null,
+          "yOffset": 12.4,
+          "createdAt": "2026-09-24T10:05:47.900Z",
+          "url": "http://localhost:3000/docedit/note/annotate/3f2a9c1e-…?page=3"
+        }
+      ]
+    }
+  ]
+}
+```
+
+### 7.2 เอกสารเดียว เฉพาะ bookmark ของผู้ใช้หนึ่ง
+
+```bash
+curl -X POST -H "x-api-key: $EXTERNAL_API_KEY" -H "content-type: application/json" \
+  -d '{"fileId":"1234","filter":{"type":"bookmarks","userId":"u_1234"}}' \
+  "http://localhost:3000/docedit/api/note/external/documents"
+```
+
+(`userId` เป็นค่าของระบบนี้ — เก็บ collect จาก response ก่อนหน้า หรือดึงมาทั้งหมดแล้วกรองฝั่งผู้เรียกเองก็ได้)
+
+### 7.3 ทุกเอกสารในกลุ่ม เฉพาะ COMMENT และ HIGHLIGHT
+
+```bash
+curl -X POST -H "x-api-key: $EXTERNAL_API_KEY" -H "content-type: application/json" \
+  -d '{"typeId":"CASE-2569-0001","filter":{"annotationTypes":["COMMENT","HIGHLIGHT"]}}' \
+  "http://localhost:3000/docedit/api/note/external/documents"
+```
+
+ได้ `documents` หลายชิ้นเรียงตามวันที่เปิดเข้าระบบ — ไฟล์ที่มาโดยไม่ผ่าน fileId (อัปโหลดในระบบนี้) ก็รวมอยู่ในกลุ่ม โดย `externalFileId: null`
+
+### 7.4 fileId + typeId พร้อมกัน (AND)
+
+```bash
+curl -X POST -H "x-api-key: $EXTERNAL_API_KEY" -H "content-type: application/json" \
+  -d '{"fileId":"1234","typeId":"CASE-2569-0001"}' \
+  "http://localhost:3000/docedit/api/note/external/documents"
+```
+
+ได้เฉพาะเอกสารเดียวที่ตรงทั้งคู่ — ไฟล์นี้ไม่เคยเปิดหรืออยู่คนละกลุ่มกับ typeId ที่ระบุ = 404
+
+## 8. ข้อควรรู้/ข้อจำกัด
+
+1. **เอกสารต้องเคยเปิดผ่านลิงก์ e-Court ก่อนอย่างน้อยหนึ่งครั้ง** — ระบบนี้ลงทะเบียนเอกสาร (metadata-only) เมื่อมีผู้เปิดจากลิงก์ `?fileId=&fileUrl=&typeId=` ครั้งแรกเท่านั้น ยังไม่เคยเปิด = 404 (ไม่ใช่ error ฝั่ง e-Court) · ลิงก์ที่ไม่มี `fileId` (ส่งแต่ `fileUrl`) จะค้นด้วยวิธีนี้ไม่ได้
+2. **`pageIndex` เป็น 0-based ส่วน `?page=` ใน url เป็น 1-based** — `pageIndex: 0` กับ `?page=1` คือหน้าเดียวกัน
+3. **`url` อ่าน origin จาก request ของผู้เรียก** — ถ้าระบบนี้ deploy หลัง reverse proxy ต้องตั้งให้ proxy ส่งต่อ `x-forwarded-proto`/`x-forwarded-host` ให้ถูกต้อง ไม่งั้นลิงก์จะชี้ origin ของ proxy แทน public URL
+4. **timestamp เป็น ISO 8601 (UTC) ทุกจุด**
+5. ไม่มี pagination/rate limiting/caching — กลุ่มใหญ่ได้ response ยาวตามจำนวนรายการจริง
+6. ไม่มี API ฝั่งเขียน (สร้าง/แก้ annotation ผ่าน API) และไม่มีการดึงไฟล์ PDF/bytes ผ่าน endpoint นี้ — ข้อมูลที่ได้มีเฉพาะ metadata + พิกัด + ข้อความของ annotation/bookmark

docs/DESIGN.md

@@ -0,0 +1,78 @@
+# Genesis
+
+## Overview
+An editorial precision interface for **Judge's Note** — a Thai court PDF annotation app (judes-note) used daily by judges on desktops and iPads. The aesthetic is quietly confident — bold display typography, generous spacing, and gallery-frame card surfaces. The mood is professional and modern without being sterile. High information density balanced by breathing room. (Text is primarily Thai; Latin display type carries the brand voice in headings and numbers.)
+
+## Colors
+- **Primary** (rgb(0 51 161 / <alpha-value>) / #0033A1): CTAs, active states, links, focus indicators, interactive highlights — royal blue
+- **Primary Hover** (#002780): Darker blue for hover states on primary elements
+- **Neutral** (#9C9C9C): Placeholders, disabled states — decorative metadata only (see `ink` families for readable text)
+- **Background** (#FAFAFA): Page background, light warm gray
+- **Surface** (#FFFFFF): Cards, panels, modals, nav backdrop
+- **Text Primary** (#0A0A0A): Headings, body text, primary labels — near-black
+- **Text Secondary** (#6B6B6B): Descriptions, metadata, secondary labels — passes 4.5:1 on white; use for meaningful small text (dates, counts, authors)
+- **Border** (#E8E8EC): Card borders, dividers, input borders — subtle and recessive
+- **Success** (#10B981): Positive status — borders and tinted backgrounds (`success/10`–`/15`)
+- **Warning** (#F59E0B): Pending status, caution — borders and tinted backgrounds (`warning/10`–`/15`)
+- **Error** (#EF4444): Destructive actions, validation errors — borders and tinted backgrounds (`error/10`–`/15`)
+- **Success Ink** (#047857), **Warning Ink** (#B45309), **Error Ink** (#B91C1C): Text- and icon-safe variants of the status colors (≥5:1 on white). Any status *text or icon* on a light surface uses the `-ink` token; the base 500 tokens are for fills, borders, and tints only. Never reach for raw Tailwind `amber-*`/`emerald-*`/`red-*` shades.
+
+Note: the template's Secondary green (#20970B) has no role in this app and is not registered as a token. Code font (JetBrains Mono) is likewise unused — no code UI in this app.
+
+## Typography
+- **Display Font**: General Sans — loaded from Fontshare
+- **Body Font**: DM Sans — loaded from Google Fonts
+- **Code Font**: JetBrains Mono — loaded from Google Fonts
+
+Display and heading text uses General Sans at bold weight with tight letter spacing (-0.03em to -0.04em). Body and UI text uses DM Sans at regular and medium weights. The contrast between the geometric display font and the humanist body font creates a refined editorial feel. Code blocks, API keys, and CLI commands use JetBrains Mono at regular weight.
+
+Type scale: Display 72px, Headline 60px, Section heading 32px, Subhead 24px, Body 15px, Small 13px, Caption 12px, Overline 11px uppercase.
+
+## Elevation
+This design uses minimal shadows. Cards rest flat with a 1px border and gain a subtle shadow on hover (0 8px 30px rgba(0,0,0,0.08)) combined with a -2px vertical lift. Primary buttons gain a tinted glow shadow on hover (0 4px 12px rgba(0,51,161,0.35)). The nav uses backdrop-blur rather than a shadow to convey elevation. Dropdowns and popovers use shadow-lg. Focus indicators use a 2px solid royal-blue outline with a 2px offset (≥3:1 against adjacent surfaces, WCAG 1.4.11/2.4.13) — a translucent halo alone is too faint to qualify.
+
+## Components
+- **Buttons**: Primary uses blue fill with white text, 6px radius, medium weight. Secondary uses transparent bg with 1px border, same radius. Ghost has no border or bg, just text color change on hover. Destructive uses red text with red border. All buttons shift up 1px on hover. Sizes: small (32px), medium (38px), large (44px).
+- **Cards**: White surface, 1px subtle border, 12px radius, overflow hidden. Content cards (file cards, form cards) stack a content area with title, metadata, and actions. Hover lifts the card 2px and increases shadow. Transition duration 200ms.
+- **Inputs**: 1px subtle border, surface background, 6px radius, 8px vertical and 14px horizontal padding, 14px font size (16px on touch devices — iOS zooms on focus below 16px). Focus: border turns blue with the 2px outlined focus indicator. Error: border turns red. Placeholder text uses muted color.
+- **Chips**: Tag chips use rounded-full (pill shape), gray-100 background, gray-600 text, 4px vertical and 12px horizontal padding, 12px font size. Active state: blue background with white text. Status chips follow the same shape but use semantic colors (green for published, yellow for pending, red for rejected).
+- **Lists**: Stacked rows with 1px dividers between items. Each row is flex with space-between, 12px vertical and 16px horizontal padding. Hover: subtle background change.
+- **Checkboxes**: 20px size, rounded-full, gray-200 unchecked, blue checked with white checkmark. Used as toggle switches for preferences.
+- **Tooltips**: Native browser tooltips via title attributes. No custom tooltip component currently.
+- **Navigation**: Sticky top nav with backdrop-blur, 56px height, 1px bottom border. Logo left, links center (desktop) or hamburger drawer (mobile), user avatar dropdown right. Nav links: 14px medium weight, hover shows bg-alt background.
+- **Search**: Global search triggered by ⌘K. Rendered as a rounded-xl bar with magnifying glass icon and keyboard shortcut badge.
+
+## Spacing
+- Base unit: 4px
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px
+- Component padding: small 8×12, medium 10×16, large 12×24
+- Section spacing: 32px mobile, 48px tablet, 64px desktop
+- Container max width: 1280px with 24px horizontal padding
+- Card grid gap: 20-24px
+
+## Border Radius
+- 4px: Tags, chips, badges, inline code — and menu/list rows inside dropdowns, panels, and popovers (a row belongs to its container, not a standalone button)
+- 6px: Buttons, inputs, selects — including small action buttons inside popups, composers, and dialogs; a cancel/save pair must always share the same radius
+- 8px: Metadata cards, dropdowns, panels
+- 12px: Kit preview cards, search bar, featured sections
+- 9999px: Avatars, status dots, pill badges
+
+## Do's and Don'ts
+- Do use blue (rgb(0 51 161 / <alpha-value>)) only for interactive elements — never for decoration or static text. Exceptions (brand marks, agreed 2026-09-23): the JN logo tile, and the blue header band of the summary page. Static numbers (e.g. folio numbers) use `ink`.
+- Do maintain the 4px spacing grid for all padding, margins, and gaps
+- Do use General Sans for headings and DM Sans for body — never swap them
+- Do keep kit cards at 12px radius and buttons/inputs at 6px — don't mix these values
+- Do provide sufficient contrast in both light and dark modes — test both
+- Do use the `-ink` status tokens for status text/icons and the 500 tokens for fills, borders, and tints
+- Don't use raw Tailwind palette shades (slate, amber, emerald, red…) — only the tokens registered in tailwind.config.ts
+- Don't use pure black (#000000) or pure white (#FFFFFF) for text — use the defined palette values
+- Don't add decorative gradients or illustrations — the interactive dot grid is the only decorative element
+- Don't use shadows on static elements — reserve shadow elevation for hover and focus states (floating layers and document pins excepted — see App-specific exceptions)
+- Don't use more than two font weights on a single screen (dense working-surface screens such as the document viewer are excepted — see App-specific exceptions)
+- Don't place more than one primary (filled blue) button in the same view section
+
+## App-specific exceptions
+- The document viewer header is a solid white bar (not the nav's backdrop-blur): it hosts a dense tool row where blur would smear the scrolled document beneath. Only the site nav (AppNav) blurs.
+- Comment pins on the document page carry a small static shadow: they are floating markers that must lift off the paper layer, in the same spirit as dropdown/popover elevation (agreed 2026-09-24).
+- The document viewer (working surface) uses three font weights on one screen — 400 body, 500 labels/buttons, 600 panel/file titles. The two-weight rule still holds for content pages (agreed 2026-09-24).
+- The text-selection preview in the viewer (drag-preview tint of the select/comment/textbox/stamp tools) is a translucent tint of primary (`rgb(0 51 161 / 0.3)`), keeping every blue on the screen in the brand hue (agreed 2026-09-24).

docs/PLAN-API.md

@@ -0,0 +1,141 @@
+# แผน N10 — API ดึงข้อมูลเอกสาร/กลุ่มให้ระบบภายนอก (API Key)
+
+> สถานะ: **implement แล้ว 2026-09-24** (รันผ่าน `/implement-feat N10`) — เสนอ 2026-09-22 ตามคำขอผู้ใช้: "เพิ่ม API ดึงข้อมูลเอกสารทีละรายการ หรือทุกเอกสารที่อยู่ในกลุ่มเดียวกัน เอาทั้งหมดหรือเฉพาะ bookmark ใช้ API Key ในการ Authentication"
+> Dependency: **N8** (`docs/PLAN-ECOURT.md` — `external_id` สำหรับค้นด้วย fileId ของ e-Court) + **N9** (`docs/PLAN-DOCSET.md` — `files.type_id` สำหรับค้นตามกลุ่ม)
+> ตาม governance ของโปรเจกต์: implement ต้องเขียนสเปกลง `docs/PLAN-FEAT.md` §7 (**N10**) + ขยาย whitelist ใน `CLAUDE.md` ก่อน — เป็น task แรกของแผน แล้วรันผ่าน `/implement-feat N10`
+
+## Context
+
+- ผู้เรียกคือ **backend ของ e-Court** (server-to-server — ไม่มี browser ไม่มีหน้า UI) ต้องการดึงข้อมูลที่เกิดในระบบเรากลับไปใช้ต่อ: annotation/bookmark ของเอกสารหนึ่งฉบับ หรือของทุกเอกสารในกลุ่ม (`typeId`) เดียวกัน
+- ระบบเราเป็นฝ่ายถูกเรียกเท่านั้นในแผนนี้ (read-only) — ทิศทาง "เราเรียก e-Court" ไม่มี
+- `middleware.ts` ยกเว้น `/api/*` อยู่แล้ว (ไม่บังคับ login แบบ oacCase) — จึงตรวจ API Key ในตัว route เอง ไม่ชนกับระบบ login เดิม
+
+## การตัดสินใจ (ยืนยันกับผู้ใช้แล้ว 2026-09-22 · ปรับรอบสอง 2026-09-24 · รอบสาม 2026-09-25 · รอบสี่ 2026-09-25 · รอบห้า 2026-09-25 · รอบหก 2026-09-25 · รอบเจ็ด 2026-09-25 · รอบแปด 2026-09-25 · รอบเก้า 2026-09-25)
+
+1. **API Key เดียวใน env** `EXTERNAL_API_KEY` — ผู้เรียกคือ backend e-Court ตัวเดียว เปลี่ยน key = แก้ env แล้ว redeploy (ไม่ทำตาราง key ใน DB / UI จัดการ key)
+2. **ระบุเอกสารด้วย fileId ของ e-Court** (ค้น `external_id = "ecourt:<fileId>"`) — ผู้เรียกรู้จัก id ของตัวเอง ไม่ต้องรู้ UUID ของเรา
+3. **POST เส้นเดียว + JSON body** `POST /api/external/documents` — รอบแรกเป็น 2 endpoints แบบ GET query-param (ตาม pattern ของบ้าน), **รอบสอง 2026-09-24 ตามคำขอผู้ใช้รวมเป็นเส้นเดียวถามด้วย body** `{fileId | typeId, filter}` — GET ที่แนบ body ไม่ standard จึงใช้ POST (ยัง read-only เหมือนเดิม) · response รูปเดียวเสมอ (`{documents: [...]}`) ผู้เรียกจัดการ contract เดียว · **รอบสาม 2026-09-25 ตามคำขอผู้ใช้: ส่ง `fileId`+`typeId` พร้อมกันได้ = รวมผล OR** (เดิม 400 กำกวม) และ**ยุบชั้น `document` ใน response** ให้ field เอกสารอยู่ระดับเดียวกับ `annotations`/`bookmarks` (ดูง่ายขึ้น) · **รอบสี่ 2026-09-25 ตามคำขอผู้ใช้: เปลี่ยนชื่อ endpoint เป็น `documents`** (เดิม `query` — ตั้งชื่อตาม resource ที่คืน ตรงกับ response `{documents}`) · **รอบห้า 2026-09-25 ตามคำขอผู้ใช้: ส่ง `fileId`+`typeId` พร้อมกัน = AND** เหลือเฉพาะเอกสารเดียวที่ตรงทั้งสองเงื่อนไข (แทน OR รวมผลของรอบสาม — ทดสอบจริงแล้ว OR คืนทั้งกลุ่ม ไม่ใช่สิ่งที่ผู้เรียกต้องการ) · ยังไม่มีผู้เรียกจริงจึงแทนที่ขาด (ถอด GET เดิมทั้งสองออก)
+4. **`filter.type` เลือกส่วนที่เอา**: `"bookmarks"` | `"annotations"` — ไม่ส่ง `filter` หรือ `type` เป็นค่าว่าง = ทั้งสอง ("เอาทั้งหมด" — กฎเดียวกับ fileId ว่าง = ไม่ได้ส่ง, คำขอผู้ใช้ 2026-09-24) — ส่วนที่ไม่เลือกคืนเป็น array ว่าง (contract คงที่ ง่ายต่อผู้บริโภค) · **รอบหก 2026-09-25 เพิ่มมิติตัวกรอง**: `filter.userId` (กรองตามเจ้าของรายการ) + `filter.annotationTypes` (ชนิดของ annotation — เดิมชื่อ `types` เปลี่ยนรอบแปด) — ดู D2
+
+## Design
+
+### D1 — Auth (`lib/external-api-auth.ts` ใหม่)
+
+- `requireExternalApiKey(req: Request): Response | null` — คืน `null` เมื่อผ่าน / คืน `Response` 401 เมื่อไม่ผ่าน (body JSON `{ "error": "<ข้อความไทย>" }` + `content-type: application/json; charset=utf-8`)
+- อ่าน header **`x-api-key`** → เทียบกับ env `EXTERNAL_API_KEY` ด้วย SHA-256 ทั้งสองค่าแล้ว `crypto.timingSafeEqual` (ทั้งสองยาวเท่ากันหลัง hash — กัน timing + length leak; ค่า env ตั้งให้ยาวและสุ่ม เช่น 32+ ตัวอักษร; เทียบกับค่า **trim แล้ว** — กัน trailing newline จาก K8s secret / docker env_file ทำ 401 ทั้งระบบทั้งที่ผู้เรียกส่ง key ถูก — code review 2026-09-24)
+- **env ไม่ตั้งหรือว่าง = ปฏิเสธทุก request** (fail closed — 401 "API ยังไม่ได้ตั้งค่าคีย์") ไม่มี mode เปิดฟรี
+- ห้าม log ค่า key / header ดิบ (error log บอกแค่ "auth failed")
+
+### D2 — Endpoint เดียว (POST + JSON body)
+
+URL เต็มฝั่งผู้เรียกอยู่ใต้ basePath: `https://<host>/docedit/note/api/external/documents`
+
+**`POST /api/external/documents`** — header `x-api-key` + `content-type: application/json`, body:
+
+```jsonc
+{
+  "fileId": "<fileId ของ e-Court>",      // ถามเอกสารเดียว — ส่งพร้อม typeId ได้ = กรองเฉพาะเอกสารที่ตรงทั้งสองเงื่อนไข (AND)
+  "typeId": "<typeId>",                  // ถามทุกเอกสารในกลุ่ม N9
+  "filter": {
+    "type": "bookmarks",                 // optional — "bookmarks" | "annotations", ไม่ส่ง = ทั้งสอง
+    "userId": "<userId ของเรา>",         // optional — string หรือ array, กรองตามเจ้าของรายการ (ทั้ง annotations/bookmarks)
+    "annotationTypes": ["COMMENT", "HIGHLIGHT"],  // optional — ค่าจาก enum annotation_type, มีผลเฉพาะ annotations
+  }
+}
+```
+
+Response 200 เป็นรูปเดียวเสมอ (bundle ยุบชั้น — ไม่มี object `document` ซ้อน, 2026-09-25):
+
+```jsonc
+{
+  "documents": [                          // ถามด้วย fileId = ยาว 1 ชิ้น (ไม่เคยเปิดในระบบ = 404) · ถามด้วย typeId = ทุกไฟล์ในกลุ่มเรียง files.createdAt (กลุ่มว่าง = []) · ส่งทั้งคู่ = เฉพาะเอกสารเดียวที่ตรงทั้งสองเงื่อนไข (ยาว 1 ชิ้น เช่นเดียวกับถาม fileId)
+    {
+      "id": "<uuid ของเรา>",
+      "externalFileId": "<fileId ของ e-Court>",  // null ได้ — เอกสารในกลุ่มที่ไม่มี fileId ของ e-Court (url: fallback ของ N8 / อัปโหลด N4 พร้อมช่องกลุ่ม — mirror กฎ typeId: null)
+      "title": "…",
+      "typeId": "…",                      // null ได้ (ไม่มีกลุ่ม)
+      "createdAt": "<ISO string>",
+      "annotations": [ AnnotationDTO ตาม db/schema.ts พร้อม "url" + "replies": ReplyDTO[] ต่อรายการ ],
+      "bookmarks":   [ BookmarkDTO ตาม db/schema.ts พร้อม "url" ต่อรายการ ]
+    }
+  ]
+}
+```
+
+- **`url` ต่อรายการ = deep link กลับมาหน้า viewer ของเรา** (F12 — เพิ่ม 2026-09-25 ตามคำขอผู้ใช้): annotation → `…/annotate/<fileId>?ann=<annotationId>` (ไปรายการ) · bookmark → `…/annotate/<fileId>?page=<หน้า 1-based>` (ไปหน้า — เลขเดียวกับลิงก์ View ของหน้าสรุป/กลุ่ม) — เป็น **URL เต็ม (absolute)** เช่น `https://<host>/docedit/note/annotate/<fileId>?ann=…`: origin อ่านจาก request ที่เรียกเข้ามา (route เชื่อ header `x-forwarded-proto`/`x-forwarded-host` ของ reverse proxy ก่อน — หลายชั้นส่ง comma list ใช้ค่าแรก — แล้ว fallback host/protocol ของ request ตรง ๆ) + basePath ผ่าน `withBasePath` (เดิมเป็น relative path ให้ผู้เรียกเติม origin เอง — เปลี่ยนตามคำขอผู้ใช้ 2026-09-25)
+
+- **body validation (strict กัน typo เงียบ ๆ):** ต้องเป็น JSON object · รับเฉพาะ 3 field `fileId`/`typeId`/`filter` (field อื่น = 400 บอกชื่อ field) · `fileId`/`typeId` ต้องเป็น string (ชนิดอื่น = 400; trim แล้วว่าง = ถือว่าไม่ได้ส่ง field นั้น) · ต้องมี `fileId` หรือ `typeId` **อย่างน้อยหนึ่งอย่าง** — ขาดทั้งคู่ = 400; **ส่งพร้อมกันได้ = AND** กรองเฉพาะเอกสารที่ตรงทั้งสองเงื่อนไข เหลือยาว 1 ชิ้น (รอบห้า 2026-09-25 · รอบสามเคยเป็น OR รวมผล · เดิมส่งพร้อมกัน = 400 กำกวม — ยังไม่มีผู้เรียกจริงจึงเปลี่ยนกติกาได้ขาด) · `filter` ถ้าส่งต้องเป็น object ที่มีเฉพาะ field `type`/`userId`/`annotationTypes` (field อื่นใน filter = 400) — `type` ค่า `"bookmarks"`/`"annotations"` — ค่าว่าง (หลัง trim) หรือไม่มี = ไม่ได้กรอง เอาทั้งสอง ส่วนค่าอื่น = 400 บอกค่าที่รับ · **`userId`** string หรือ array ของ string (trim แล้วค่าว่างทั้งคู่ = ไม่ได้กรอง) กรองตาม**เจ้าของรายการ**ทั้ง annotations/bookmarks — ไม่ใช่ผู้ตอบ (replies ตามมาครบกับ annotation ที่ผ่านตัวกรอง) · **`annotationTypes`** string หรือ array ค่าจาก enum `annotation_type` (`HIGHLIGHT`/`DRAW`/`COMMENT`/`SHAPE`/`REDACTION`/`TEXTBOX`/`STAMP` — ค่าอื่น = 400 บอกค่าที่รับกัน typo เงียบ) มีผลเฉพาะเมื่อรวม annotations (รอบหก 2026-09-25 · เดิมชื่อ field `types` เปลี่ยนรอบแปด)
+- **ไม่มีเอกสารในกลุ่ม = 200 + `documents: []`** (ต่างจากหน้า UI `/groups/[typeId]` ที่ 404 — API คืน empty เป็นผลลัพธ์สมเหตุสมผลสำหรับ integration)
+- โค้ดกลางของ route: `lib/external-api.ts` — `parseQueryBody` (validate body ตามข้อบน คืน discriminated 2 กรณี: `mode: "file"` มี fileId + typeId อาจมาด้วยสำหรับ AND / `mode: "type"` typeId เดี่ยว) + `loadDocumentBundles(fileRows, parts)` (**bulk**: query รวมชุดเดียวด้วย `inArray` ต่อทุกไฟล์ — annotations/bookmarks คู่ขนาน + replies ตามหลัง = 3 query ต่อ request ไม่ว่ากลุ่มจะกี่ไฟล์ แทนยิง 3 query ต่อไฟล์พร้อมกันทั้งกลุ่มด้วย Promise.all ที่กด connection pool เมื่อกลุ่มใหญ่ — code review 2026-09-25) แล้วจัดกลุ่มรายไฟล์ใน memory (push ตามลำดับ query จึงรักษาลำดับเดิมในไฟล์เดียวกัน) map เป็น DTO — สอง mode ใช้ function เดียวกัน (เอกสารเดียว = array ยาว 1) ได้รูปร่าง bundle ตรงกันเป๊ะ; route กรองเงื่อนไขคู่ (`externalId` + `typeId`) ใน query เดียว และ**ครอบ try/catch ทุก DB call** — ล้ม = log ฝั่ง server + **500 JSON ตาม contract** ไม่ปล่อยเป็น 500 ของ framework ที่ format ต่าง
+- ลำดับ: `documents` ตาม `files.createdAt` (เหมือนหน้า `/groups/[typeId]`) · `annotations` ตาม `(pageIndex, createdAt)` เหมือนหน้าสรุป F15 · `bookmarks` ตาม N5 (`pageIndex → yOffset → createdAt`)
+- timestamp เป็น ISO string ทั้งหมด (ผ่าน mapper `toDTO` ที่มีอยู่ — invariant #5), `data` คือ JSONB ตาม discriminated union เดิม
+- error ทุกอันเป็น JSON `{ "error": "<ไทย>" }`: 400 (body ไม่ใช่ JSON / object ผิดสัญญา / เงื่อนไข fileId–typeId / `filter` ค่าไม่รู้จัก), 401 (key), 404 (ถามด้วย fileId ที่ไม่เคยลงทะเบียน), **500 (query ฐานข้อมูลล้ม — ข้อความกลาง ๆ ไม่แนบรายละเอียด กัน leak SQL/path, log stack ฝั่ง server อย่างเดียว · เพิ่ม code review 2026-09-25)**
+
+### D3 — การ query / สิทธิ์ / ความปลอดภัย
+
+- read-only ทั้งหมด: **ไม่เขียน DB ไม่ publish SSE ไม่ `revalidatePath`** — snapshot ณ ตอนเรียก (คนละ context กับ Server Action ใน invariant #4)
+- ไม่ใส่ CORS headers (server-to-server — browser ไม่ควรเรียก; ไม่เปิด `Access-Control-Allow-Origin`)
+- ค้น `fileId`: `where eq(files.externalId, "ecourt:" + fileId)` — ไฟล์ที่ลงทะเบียนแบบ fallback `"url:<href>"` (ลิงก์ไม่มี fileId) ค้นด้วยวิธีนี้ไม่ได้ = 404 (ยอมรับ — สัญญาลิงก์ N8 แนะนำให้ส่ง fileId เสมอ)
+- **REDACTION รวมใน `annotations` เมื่อเลือก include** — ผู้ถือ key เห็นตำแหน่งกล่องปิดพราง (DB เก็บแค่พิกัด ไม่มีเนื้อหาใต้กล่อง) — ระบุไว้ในสเปกว่า key นี้เชื่อถือได้ระดับ backend e-Court เท่านั้น
+- annotation ทุกสถานะรวมหมด (resolved ดูจาก field `resolved` ได้) ทุกผู้ใช้ (userId/userName อยู่ใน DTO)
+- route เรียก `requireExternalApiKey` เป็นอย่างแรกก่อนแตะ DB
+
+## Docs/rules sync (plan-first — ทำเป็น task แรก ก่อนแตะโค้ด)
+
+| ไฟล์ | สิ่งที่แก้ |
+|---|---|
+| `docs/PLAN-FEAT.md` §7 | หัวข้อใหม่ **N10 · API ดึงข้อมูลเอกสาร/กลุ่ม (API Key)** (format ตาม N5–N7 + อ้างแผนฉบับเต็ม `docs/PLAN-API.md`) |
+| `CLAUDE.md` | whitelist เพิ่ม N10 + โครงสร้างไฟล์เพิ่ม `lib/external-api-auth.ts`, `lib/external-api.ts`, `app/api/external/documents/route.ts` + บันทึก env `EXTERNAL_API_KEY` (README `.env.example` ถ้ามี) |
+| `.claude/rules/data-layer.md` | เพิ่ม: routes ของ N10 เป็น read-only ไม่ publish SSE/`revalidatePath`; env `EXTERNAL_API_KEY` ว่าง = fail closed |
+| `README.md` | สารบัญ env เพิ่ม `EXTERNAL_API_KEY` + ตัวอย่างการเรียก (curl) |
+
+## ลำดับ task + verify (ทุก task: `npx tsc --noEmit` ผ่าน)
+
+| # | งาน | ไฟล์หลัก | Verify เพิ่มเติม |
+|---|---|---|---|
+| 1 | Docs sync N10 | ตารางด้านบน | สเปก §7 ครบตาม format; README มี env + ตัวอย่าง |
+| 2 | Auth helper | `lib/external-api-auth.ts` | unit test (vitest): ไม่ใส่ header / key ผิด / env ว่าง = 401; key ถูก = ผ่าน — ไม่มีข้อความบอกว่าขาดอะไร |
+| 3 | Route เอกสารเดียว | `app/api/external/document/route.ts` | curl: 200 รูปร่างตาม D2 (replies ใน annotation, ISO timestamps), `include=bookmarks` → `annotations: []`, fileId ไม่รู้จัก = 404, `include=foo` = 400 |
+| 4 | Route กลุ่ม | `app/api/external/documents/route.ts` | curl: หลายไฟล์เรียง `createdAt`, typeId ไม่มี = `documents: []`, รูปร่าง document เหมือน endpoint 1 เป๊ะ |
+| 5 | ปิดงาน | — | plan-reviewer + code-reviewer + vitest + `tsc`; ทดสอบร่วมกับ N8/N9 ด้วยข้อมูลจริงจากลิงก์ e-Court |
+
+> **รอบสอง (2026-09-24 ตามคำขอผู้ใช้):** task 3+4 ถูกแทนที่ — รวม 2 GET เป็น **`POST /api/external/query` เส้นเดียว** (route `app/api/external/query/route.ts` + `parseQueryBody` ใน `lib/external-api.ts` แทน `parseInclude`; ถอด `app/api/external/document/` กับ `app/api/external/documents/` ออก — ยังไม่มีผู้เรียกจริง) ตาม D2 ฉบับใหม่
+>
+> **รอบสาม (2026-09-25 ตามคำขอผู้ใช้):** (1) รับ `fileId`+`typeId` **พร้อมกัน** = รวมผล OR dedupe เรียง `files.createdAt` (ถอดกติกาเดิม "ส่งพร้อมกัน = 400 กำกวม") (2) ยุบชั้น `document` ออกจาก response — field เอกสาร (`id`/`externalFileId`/`title`/`typeId`/`createdAt`) ขึ้นมาอยู่ระดับเดียวกับ `annotations`/`bookmarks` ให้อ่านง่ายขึ้น (3) เพิ่ม `url` deep link กลับมาหน้า `/annotate/[id]` ต่อ annotation/bookmark
+>
+> **รอบสี่ (2026-09-25 ตามคำขอผู้ใช้):** เปลี่ยนชื่อ endpoint `POST /api/external/query` → **`POST /api/external/documents`** (ย้าย route เป็น `app/api/external/documents/route.ts`) — ตั้งชื่อตาม resource ที่คืน ตรงกับ response `{documents}` · ยังไม่มีผู้เรียกจริงจึงเปลี่ยนได้ขาด ไม่ต้องเก็บ path เดิม
+>
+> **รอบห้า (2026-09-25 ตามคำขอผู้ใช้):** เปลี่ยน semantics ของการส่ง `fileId`+`typeId` พร้อมกันจาก **OR รวมผล** (รอบสาม) เป็น **AND กรองเฉพาะเอกสารเดียวที่ตรงทั้งสองเงื่อนไข** — ทดสอบจริงแล้ว OR คืนทั้งกลุ่ม ผู้เรียกต้องการเฉพาะเอกสารตามที่ส่งมา; ไม่ตรงคู่ (ไม่เคยเปิด / คนละกลุ่ม) = 404 แยกสาเหตุในข้อความ · ถอด Map dedupe + sort ที่จำเป็นแค่ตอน OR ออก (เหลือ query เงื่อนไขคู่ในคำสั่งเดียว)
+>
+> **รอบหก (2026-09-25 ตามคำขอผู้ใช้):** เพิ่มมิติตัวกรองใน `filter` — **`userId`** (string หรือ array — กรองตามเจ้าของรายการทั้ง annotations/bookmarks; replies ตามมาครบกับ annotation ที่ผ่านตัวกรอง ไม่กรองตามผู้ตอบ) + **`types`** (ค่า enum `annotation_type` — มีผลเฉพาะ annotations) ทั้งคู่ค่าว่าง = ไม่ได้กรองตามกฎเดิม · `since` (ดึง incremental) ที่เสนอด้วยถูกตัด — นิยาม "สร้างหลังจาก X" ไม่ครอบคลุมรายการเก่าที่ถูกแก้ไขภายหลัง ถ้าจะมีวันนั้นต้องออกแบบเป็น change feed เต็มรูปแบบ
+>
+> **รอบเจ็ด (2026-09-25 ตาม code review ของผู้ใช้):** (1) route **ครอบ try/catch ทุก DB call** — ก่อนหน้า query ล้มจะหลุดเป็น unhandled exception กลายเป็น 500 ของ framework ที่ format ต่างจาก JSON error contract ของ endpoint นี้ทั้งหมด (2) **ถอด fan-out ต่อไฟล์** — `loadDocumentBundle` ต่อไฟล์ + `Promise.all` ทั้งกลุ่ม (3 query ต่อไฟล์พร้อมกัน กด connection pool เมื่อกลุ่มใหญ่) เปลี่ยนเป็น `loadDocumentBundles` bulk: `inArray` ทุกไฟล์ในชุด query เดียว = 3 query ต่อ request ไม่ว่ากลุ่มจะกี่ไฟล์ (ดีกว่า batching เป็นกลุ่มเล็กที่ยังยิง N รอบ)
+>
+> **รอบแปด (2026-09-25 ตามคำขอผู้ใช้):** เปลี่ยนชื่อ field `filter.types` → **`filter.annotationTypes`** — ชื่อเดิมสั้นจนชนกับ `filter.type` (การเลือก bookmarks/annotations) อ่านสับสน; ยังไม่มีผู้เรียกจริงจึงเปลี่ยนขาด ไม่ต้องรับชื่อเดิม
+>
+> **รอบเก้า (2026-09-25 ตามคำขอผู้ใช้):** `url` เปลี่ยนจาก relative path เป็น **URL เต็ม** — route อ่าน origin จาก request ของผู้เรียก (`x-forwarded-proto`/`x-forwarded-host` ก่อน แล้ว fallback host/protocol ของ request) ส่งเข้า `loadDocumentBundles` เป็น parameter `origin` — ผู้เรียกใช้ลิงก์ได้ทันทีไม่ต้องประกอบเอง; ข้อควรระวัง: deploy ผ่าน reverse proxy ต้องส่ง header forward ให้ถูกต้อง ไม่งั้น origin จะเป็นของ proxy แทนที่จะเป็น public URL
+
+## Edge cases (ออกแบบไว้ล่วงหน้า)
+
+1. **env `EXTERNAL_API_KEY` ไม่ตั้ง/ว่าง** → 401 ทุก request (fail closed) — deploy ต้องตั้งก่อนเปิดใช้
+2. **key ผิด** → 401 ข้อความเดียวกับไม่ใส่ key (ไม่บอกว่าขาดอะไร — กัน enumerate)
+3. **fileId ที่ e-Court ไม่เคยลิงก์มา** → 404 "ไม่พบเอกสารนี้ในระบบ (ยังไม่เคยเปิด)" — ไม่ใช่ 500
+4. **ไฟล์ลงทะเบียนแบบ `"url:<href>"`** (ลิงก์ไม่มี fileId) → ค้นไม่ได้ = 404 — เอกสารนี้ต้องเข้าผ่านลิงก์ที่มี fileId ก่อน
+5. **`filter.type` ค่าไม่รู้จัก** (รวมเอกพจน์ "annotation"/"bookmark") → 400 บอกค่าที่รับ · **`type` ค่าว่าง/whitespace ล้วน หรือไม่มี (`filter: {}`)** → ไม่ได้กรอง เอาทั้งสอง (กฎเดียวกับ fileId ว่าง — คำขอผู้ใช้ 2026-09-24 ตอนทดลองยิง `"type": ""` เจอ 400) — เดิมรอบแรกเป็น query-param `include` แบบ comma (trim + dedupe) เปลี่ยนมาเป็น `filter.type` ตามรอบสอง
+6. **ไม่มีทั้ง `fileId` และ `typeId`** (ไม่ส่งเลย หรือส่งมาแต่ค่าว่าง/whitespace ล้วนจนไม่เหลือ) → 400 ข้อความไทย (ต้องระบุอย่างน้อยหนึ่งอย่าง)
+7. **ส่งทั้ง `fileId` และ `typeId` พร้อมกัน** → AND เหลือเฉพาะเอกสารเดียวที่ตรงทั้งสองเงื่อนไข (รอบห้า 2026-09-25 · รอบสามเคยเป็น OR รวมผล · เดิม = 400 กำกวม) · **ไม่ตรงคู่ = 404** — ไฟล์ไม่เคยเปิดในระบบ หรืออยู่คนละกลุ่มกับ `typeId` ที่ระบุ (แยกสาเหตุในข้อความ) · **field นอกเหนือ `fileId`/`typeId`/`filter`** → 400 บอกชื่อ field (กัน typo เช่น `fileID` เงียบ ๆ) · **`filter` ผิดสัญญา** (ไม่ใช่ object / มี field อื่นนอกจาก `type` / ไม่มี `type`) → 400
+8. **เอกสารไม่มี annotation/bookmark เลย** → arrays ว่าง ไม่ใช่ 404 (ไฟล์เคยเปิด = ข้อมูลเอกสารมีค่าเสมอ)
+9. **ไฟล์ไม่มีกลุ่ม** → `document.typeId: null` (ไม่ใช่ string ว่าง)
+10. **คนละรอบเรียกพร้อมกัน** → read-only ไม่มีสถานะแชร์ — ไม่มี race (pool `prepare: false` ตาม invariant #11)
+11. **เอกสารในกลุ่มที่ไม่มี fileId ของ e-Court** (ลงทะเบียนแบบ `"url:<href>"` ของ N8 หรืออัปโหลดผ่าน N4 พร้อมช่องกลุ่ม) → endpoint กลุ่มยังรวมไฟล์เหล่านี้ แต่ `document.externalFileId: null` — mirror กฎ `typeId: null` ของข้อ 9 (endpoint เดียวไม่กระทบ — ค้นด้วย `ecourt:` prefix เจอเฉพาะไฟล์ที่มี fileId เสมอ)
+12. **`filter.userId` ที่ไม่มีในระบบ** → ไม่ใช่ 400 — ได้ `annotations: []`/`bookmarks: []` ตาม contract (ตัวเอกสารยังคืนถ้าเคยเปิด) เพราะไม่ validate กับ DB (ผู้ใช้เพิ่ม/เปลี่ยนได้ตลอด ตรวจก็เสีย query เปล่า) · **`filter.annotationTypes` เมื่อเลือก `type: "bookmarks"` อย่างเดียว** → เพิกเฉยเงียบ ๆ ไม่ใช่ 400 (ไม่มี annotation ให้กรองอยู่แล้ว — ค่า annotationTypes ยังถูก validate ตามปกติก่อนถึงขั้นนั้น)
+13. **query ฐานข้อมูลล้มกลางคัน** (connection หลุด / timeout / table มีปัญหา) → **500 JSON ตาม contract** ผ่าน `externalApiError` ไม่ใช่ 500 ของ framework ที่ format ต่าง — try/catch ที่ route ครอบทุก DB call (code review 2026-09-25) · log stack ฝั่ง server อย่างเดียว ข้อความตอบเป็นกลาง ๆ ไม่แนบ error ดิบ · ไม่ retry ฝั่งเรา (read-only snapshot — ผู้เรียกตัดสินใจเรียกซ้ำเอง)
+
+## Out of scope (ไม่ทำในแผนนี้)
+
+- หลาย key / ตาราง key ใน DB / เพิกถอนราย key / UI จัดการ key
+- rate limiting / pagination / caching ของ response
+- write API (สร้าง/แก้ annotation ผ่าน API) — ระบบยังเขียนผ่าน Server Actions + login เท่านั้น
+- ดึงไฟล์ PDF/bytes เอกสารผ่าน API นี้ (`/api/pdf` มีอยู่แล้วแต่ไม่มี key — ความเสี่ยงที่รับไว้ตามข้อ 3 ของ plan-reviewer ใน PLAN-ECOURT.md)
+- webhook/event push แจ้งเตือนเมื่อมี annotation ใหม่, API รูปแบบอื่น (XML/CSV)
+- auth จริงเทียบระบบ e-Court (ยัง out of scope ของโปรเจกต์)

docs/PLAN-BOOKMARK-PDF.md

@@ -1,6 +1,8 @@
 # แผน 5.3.15 — รายงานรายการ bookmark เป็น PDF (N7)
 
 > **อัปเดต 2026-09-17:** ผู้ใช้ขอเปลี่ยน deliverable ของ N7 เป็น**ส่งออก JSON** แทนรายงาน PDF — route เดิม (`app/api/bookmarks/export/route.ts`) ถูกเขียนใหม่เป็น JSON (flat array `BookmarkDTO` เรียง N5 + envelope `{ fileId, title, exportedAt, bookmarks }`) โค้ด PDF ในแผนนี้จึงเป็น **historical record** — สเปกปัจจุบันอยู่ที่ `docs/PLAN-FEAT.md` §7 N7 (ถอด: build tree/cycle guard/ฟอนต์/layout ทั้งหมด)
+>
+> **อัปเดต 2026-09-25:** N7 ถูก**ถอดออกจากโค้ดทั้งหมด**ตามคำขอผู้ใช้ (route + ปุ่มใน sidebar/หน้าสรุป) — ระบบภายนอกดึงข้อมูล bookmark ผ่าน **N10 API** (`POST /api/external/documents`, แผน `docs/PLAN-API.md`) แทน; ทั้งแผนนี้และ §7 N7 ของ PLAN-FEAT.md เป็น historical record ทั้งคู่แล้ว
 
 > สถานะ: **implement เสร็จสมบูรณ์** (2026-09-16) — ครบ 4 task, `tsc` ผ่าน, vitest 120/120, plan-reviewer + code-reviewer ผ่าน (findings ทั้งหมดแก้แล้ว: **บรรทัดแรกของหน้าใหม่ถูกวาดกลับลงหน้าเก่า** — `page.drawText({ y: advanceLine(...) })` ประเมิน base ของ method call ก่อน arguments ตาม spec ทำให้ซ้อนบรรทัดบนสุดของหน้าเก่า → ต้อง advance ก่อนแล้วอ่าน `page` ทีหลัง, **cycle guard ซ้ำ/หาย** — seen set ต่อ root ทำให้วงจรล้วนซ้ำ 2 เท่าและวงจรปน root หายเงียบ → seen ร่วมทุก root + เติมโหนดที่ไม่ถูกเดินเป็นระดับ 1, **ชื่อไฟล์ในหัวรายงานไม่ wrap** — title ยาวถึง 200 ตัวล้นขอบขวา → wrap ด้วย `wrapTextByWidth` เหมือนรายการ) — re-verify หลังแก้ด้วยไฟล์ทดสอบ (40 รายการ + วงจรปน root + title ยาว 200): 4 หน้า **ไม่มีข้อความซ้อนทับเลย** ทุกหน้ามีเนื้อหาจริง วงจรโผล่ครบระดับ 1 · ไฟล์วงจรล้วน 2 รายการ = แบนระดับ 1 ทั้งคู่ · ทดสอบเดิมผ่านครบ: ไฟล์จริง 7 bookmarks ต้นไม้ 2 ระดับ indent x48↔x62 ลำดับ N5 ถูก, 40 รายการ = 5 หน้า + footer ทุกหน้า, 0 bookmark = "ยังไม่มีรายการ…", invalid id = 400, ไม่มีไฟล์ = 404, ฟอนต์ไทย render ถูก (ยืนยันสระผสม "คำสั่ง" ผ่าน render PNG + vision OCR — "คำา" ใน text extraction เป็น artifact ของ ToUnicode ตอน subset ไม่กระทบการแสดงผล), ปุ่มโผล่ใน SSR ของหน้า annotate พร้อม href/aria-label ถูก
 > อ้างอิง: requirement 5.3.15 (gap analysis `docs/requirement/gap-analysis.md` **กลุ่ม B** — ข้อสุดท้ายที่เหลือ: 5.3.11 = N5 ✅, 5.3.12 = N6 ✅)

docs/PLAN-DOCVER.md

@@ -0,0 +1,222 @@
+# PLAN-DOCVER — Document Versioning API (stand-alone)
+
+> วันที่ตกลงแผน: 2026-10-20 · เพิ่ม auth ด้วย access_token: 2026-10-22 · สถานะ: implement
+> รอบแรก (API ก่อน — ยังไม่ต่อ wordaddin)
+
+## 0. บริบท/เป้าหมาย
+
+ทำ backend จริงของฟีเจอร์ **"e-Court Documents Versioning"** (ตอนนี้ wordaddin ใช้ mock ใน
+`wordaddin/services/versioningService.ts`):
+
+- ตารางเอกสารคีย์ด้วย `docId` **ห้ามซ้ำ** (unique index) — **`docId` = claim `fid`
+  (string) จาก Bearer token ตรง ๆ** (2026-10-26 ถอด path param `{docId}` ออกจาก URL ทุก
+  endpoint — fileId ของ e-Court ใน token เป็นที่มาเดียวของรหัสเอกสาร)
+- แต่ละ version อ้าง **object ใน MinIO** — เก็บทั้ง `.docx` และ `.pdf` (pdf เป็น
+  optional/best-effort ตาม contract ของ add-in — `pdf.size === 0` = ไม่มี, มี `hasPdf` บอกใน
+  response)
+- เก็บ `userId`, `userName`, `createdAt` ต่อ version เพื่อรู้ว่าใครอัปโหลด
+- **identity (`userId`/`userName`/`templateId`) และ `docId` แกะจาก Bearer token** (2026-10-22
+  — เดิมส่ง plain field ใน multipart): ขอ token ที่ `POST /api/documents/token` ด้วย header
+  `x-api-key` แล้วแนบ `Authorization: Bearer <token>` กับทุก request — ระบบ stand-alone
+  ไม่มี session ร่วมกับใคร (ผู้เรียกคือ add-in ใน Word หรือระบบภายนอก) token จึงเป็น
+  พาหะ identity เดียว
+- **auth ทุก endpoint ของกลุ่มนี้** = Bearer JWT HS256 เซ็นด้วย `DOCVER_TOKEN_SECRET`
+  (ออก token ผ่าน `x-api-key` เทียบ env `DOCVER_API_KEY` — pattern `lib/external-api-auth.ts`
+  ของ N10) · ไม่มี CORS
+
+ข้อตกลงกับผู้ใช้ (2026-10-20): ทำ API ก่อน **ไม่แต้ wordaddin รอบนี้** — contract ตรง surface
+ที่ mock คงไว้เป๊ะ วันหน้าสลับของจริงแค่ตั้ง `NEXT_PUBLIC_ADDIN_API_BASE_URL` แล้วก้อบ body
+ของต้นฉบับกลับมา (ดู `docs/WORDADDIN-DEV.md`) · MinIO dev รันผ่าน `docker-compose.yml`
+(ผู้เรียกอัปโหลดทั้ง docx+pdf — ฝั่ง add-in ใช้ Office.js แปลง Word→PDF เอง)
+
+Contract อ้างอิง: `docs/addin-ui-flow.md` §7 + `wordaddin/services/versioningService.ts` +
+`wordaddin/models/versionRecord.ts` — **โค้ด server ห้าม import จาก `wordaddin/`**
+(client-only zone) type define เองใน `db/schema.ts`/`lib`
+
+## 1. Endpoint (URL เต็ม = `/docedit/api/documents/…` — prefix ใหม่ ได้รับยกเว้นจาก
+middleware เหมือน `api/template`)
+
+### `POST /api/documents/token` — ขอ access_token (2026-10-22)
+
+auth: header `x-api-key` เทียบ env `DOCVER_API_KEY` (ไม่ตั้ง/ว่าง = 401 fail closed ·
+ไม่ใส่/ผิด = 401 ข้อความเดียวกันเป๊ะ กัน enumerate) — ตรวจก่อนอ่าน body เสมอ
+
+JSON body (allowlist — key อื่น = 400 กัน typo):
+
+| field | type | หมายเหตุ |
+|---|---|---|
+| `userid` | string | บังคับ — trim 1–100 (claim `userid` → column `user_id`) |
+| `username` | string | บังคับ — trim 1–200 (claim `username` → column `user_name`) |
+| `fid` | string | **บังคับ** — trim 1–200 · **fileId ของ e-Court** เป็น `docId` ของทุก operation ตรง ๆ · verify ไม่รับ token ที่ไม่มี fid |
+| `template` | string | optional ≤100 (claim `template` → column `template_id` ตอน upload) |
+
+- env `DOCVER_TOKEN_SECRET` ไม่ตั้ง/ว่าง = **500** "DOCVER_TOKEN_SECRET ยังไม่ได้ตั้งค่า"
+  (ความผิด config ฝั่ง server ไม่ใช่ความผิดของผู้เรียก — และห้าม log ค่า secret)
+- response 200: `{ "access_token": string, "token_type": "Bearer", "expires_in": number }`
+  — JWT HS256 stateless มี `iat`/`exp` (TTL env `DOCVER_TOKEN_TTL_SECONDS` default 3600)
+  · verify บังคับ alg=HS256 (กัน alg-confusion) และเทียบ signature แบบ timing-safe
+- **endpoint อื่นของกลุ่มนี้ทั้งหมดต้องแนบ `Authorization: Bearer <access_token>`** —
+  ไม่มี header / รูปผิด / signature ผิด / หมดอายุ / secret ไม่ตั้ง = 401 ข้อความไทย
+  เดียวกันทุกกรณี (ไม่เปิดให้ใช้ endpoint เป็น oracle รู้สาเหตุ)
+
+### `POST /api/documents/versions` — อัปโหลด version ใหม่
+
+auth: `Authorization: Bearer` (ดู /token ด้านบน) — identity/templateId ของ row ใหม่และ
+`docId` (= `fid` — string) มาจาก claims ของ token ทั้งหมด ไม่รับจาก URL/form อีกต่อไป
+
+multipart/form-data:
+
+| field | type | หมายเหตุ |
+|---|---|---|
+| `file` | File (.docx) | บังคับ — ≤ 100MB, magic bytes `PK\x03\x04` |
+| `pdf` | File (.pdf) | optional — `size === 0` = ถือว่าไม่มี (add-in แนบ blob เปล่าได้) |
+| `clientVersionId` | string | optional ≤100 — GUID ที่ client generate เอง |
+| `fields` | string (JSON) | optional — map `{ [sdtTag]: text }` (≤100 keys, value ≤10,000) |
+| `message` | string | optional — commit message ≤2048 (trim ว่าง = NULL) |
+| `fileName` | string | optional — ชื่อไฟล์ดั้งเดิม (ผ่าน `decodeUploadFilename` แล้ว) |
+
+- field ที่ไม่อยู่ในตาราง = **400 กัน typo เงียบ ๆ** (pattern `parseQueryBody` ของ N10) —
+  **breaking change 2026-10-22:** `userId`/`userName`/`templateId` ถอดออกจาก form แล้ว
+  (ส่งมา = 400) identity/template มาจาก Bearer token ของ request นั้นแทน
+- เอกสาร (`documents` row) สร้าง **แบบ implicit** ตอน upload version แรก — ไม่มี endpoint
+  "สร้างเอกสาร" แยก (เอกสารถูกระบุที่ fid ใน token ตั้งแต่ขอ token)
+- response 200: `{ "hasPdf": boolean, "versionId": string, "versionNumber": number }`
+  (= `UploadVersionResult` เป๊ะ) — `versionNumber` เป็นค่า **authoritative จาก server**
+  (client เดา `latest+1` แล้วแก้ XML part ตัวเองเมื่อไม่ตรง — กรณีอัปโหลดชนกัน)
+
+### `GET /api/documents/versions` — history (ของเอกสาร fid ใน token)
+
+response: `DocumentVersionDTO[]` เรียง **ใหม่ → เก่า** (ตาม `VersionRecord[]` ของ add-in +
+ส่วนเสริม `createdByUserName`):
+
+```ts
+{
+  versionId: string;          // = id ของ row (uuid)
+  versionNumber: number;
+  createdAt: string;          // ISO-8601
+  createdByUserId: string;    // = user_id
+  createdByUserName: string;  // = user_name (ส่วนเสริมนอก contract เดิม)
+  contentHash: string;        // SHA-256 hex ของ docx (คำนวณฝั่ง server)
+  fields: Record<string, string> | null;
+  message: string | null;
+  hasPdf: boolean;            // derive จาก pdf_object_key !== null ตัวเดียว
+}
+```
+
+- `docId` (จาก fid ใน token) ไม่รู้จัก (ยังไม่เคยมี version) = **404** (สัญญาณ REST ตรง ๆ แบบ
+  N10 — UI ของ add-in แสดง error + ปุ่มลองใหม่ ไม่พัง)
+
+### `GET /api/documents/versions/{versionId}/download-link?format=docx|pdf`
+
+- format ไม่ส่ง/"" = `docx` · ค่าอื่น = 400
+- query version row **เช็ค docId (จาก fid ใน token) กับ versionId พร้อมกัน** (กันโยน id
+  ข้ามเอกสาร) — ไม่เจอ = 404
+- `format=pdf` แต่ version นั้นไม่มี pdf = 404 "version นี้ไม่มีสำเนา PDF"
+- response 200: `{ "url": string, "expiresAt": string }` — url เป็น **MinIO presigned GET**
+  (อายุตาม env `DOCVER_LINK_TTL_SECONDS` default 900 วิ) ให้ UI เปิดในเบราว์เซอร์จริงของ
+  ผู้ใช้ (webview ของ Word ทิ้ง blob download เงียบ ๆ — เหตุผลเดียวกับแผน add-in เดิม)
+- URL อ้าง `MINIO_ENDPOINT:MINIO_PORT` โดยตรง — **โฮสต์นี้ต้องเข้าถึงได้จากเบราว์เซอร์
+  ของผู้ใช้** ไม่ใช่แค่จาก Next server (หมายเหตุนี้อยู่ใน `.env.example`/README ด้วย)
+
+### ตาราง error
+
+| เหตุ | สถานะ |
+|---|---|
+| รูป versionId/format ผิด · field ไม่รู้จัก (รวม userId/userName/templateId เก่า) · ไม่ใช่ multipart · magic bytes ผิด · body ขอ /token ผิดกติกา (รวมขาด fid) | 400 |
+| `x-api-key` ไม่ตั้ง/ไม่ใส่/ผิด (ที่ /token) · Bearer ขาด/เน่า/หมดอายุ/secret ไม่ตั้ง (ทุก endpoint อื่น) | 401 |
+| ไฟล์เกิน 100MB (เช็ค `file.size` ก่อน buffer เสมอ — route ไม่มี `bodySizeLimit` คุม) | 413 |
+| เอกสาร/version ไม่มี · ขอ pdf ที่ version ไม่มี | 404 |
+| MinIO env ไม่ตั้ง/ล้ม · DB ล้ม (หลังเก็บกวาด object กำพร้า) · `DOCVER_TOKEN_SECRET` ไม่ตั้ง (ที่ /token) | 500 (log เต็มฝั่ง server + ข้อความกลาง ๆ ไทย) |
+
+## 2. ตาราง (db/schema.ts)
+
+```
+documents          — id uuid PK · doc_id text UNIQUE NOT NULL · created_at timestamptz
+document_versions  — id uuid PK · document_id uuid FK→documents CASCADE
+                   · version_number int NOT NULL (+ UNIQUE(document_id, version_number))
+                   · client_version_id · content_hash NOT NULL · message · fields jsonb
+                   · template_id · file_name · docx_object_key NOT NULL · pdf_object_key
+                   · docx_size int NOT NULL · pdf_size int · user_id NOT NULL
+                   · user_name NOT NULL · created_at
+                   + index (document_id, created_at)
+```
+
+- **`documents` ≠ `files`** ของแอป note — ไม่มี FK ไม่มี field ร่วม ไม่มีหน้า note ไหนอ่าน
+  (ชื่อคล้ายกันแต่คนละโดเมน: ตารางนี้เป็นของกลุ่ม API นี้ล้วน ๆ)
+- `content_hash`/`docx_size` เป็น NOT NULL เพราะ server buffer ไฟล์และคำนวณทั้งคู่ก่อน
+  insert เสมอ · `hasPdf` **ไม่มี column** — derive จาก `pdf_object_key !== null`
+- object key ใน MinIO: `docver/<versionId>/document.docx` / `document.pdf` — **uuid ล้วน**
+  ไม่มี input ผู้ใช้ (เหตุผลเดียวกับ N4 ที่ห้ามชื่อผู้ใช้ตกแต่ง path) · `versionId` สร้าง
+  ด้วย `randomUUID()` ฝั่ง server แล้วส่งเป็น `id` ตอน insert (object เขียนไปก่อนแล้ว)
+
+## 3. จ่ายเลข version ปลอดภัยเรียกคู่ขนาน
+
+เลือก: **insert-on-conflict + `SELECT … FOR UPDATE` ใน transaction เดียว** (ใช้ `.for("update")`
+ที่ repo ใช้อยู่แล้วใน `app/actions/annotations.ts`):
+
+1. `INSERT INTO documents (doc_id) VALUES (…) ON CONFLICT DO NOTHING` — สร้างเอกสารถ้ายังไม่มี
+2. `SELECT id FROM documents WHERE doc_id = … FOR UPDATE` — serialize ผู้จ่ายเลขรายเอกสาร
+   (unique `doc_id` → ได้ row เดียวเสมอ ไม่มี deadlock ข้ามเอกสาร)
+3. `SELECT max(version_number) + 1` แล้ว insert row version
+
+ทางเลือกที่ตัดทิ้ง: retry-on-23505 (ต้องเก็บกวาด object ซ้ำทุกรอบ ไม่มี ordering) ·
+`pg_advisory_xact_lock` (ได้แต่ต้อง raw SQL และซ้ำซ้อนกับ row lock) — UNIQUE
+`(document_id, version_number)` เก็บไว้เป็น safety net
+
+## 4. ลำดับงานต่อ request (POST) + เก็บกวาด object กำพร้า
+
+validate (text field ก่อนแตะไฟล์) → cap ขนาด → buffer → magic bytes → sha256 → `versionId`
+→ **putObject MinIO** (docx ก่อน pdf; pdf ล้ม = ลบ docx ทิ้ง) → **insert DB (tx §3)** —
+ล้ม = `removeObject` ทั้งคู่แล้วโยนต่อ (pattern เดียวกับ `unlink` + rethrow ของ N4)
+
+- crash ระหว่าง putObject↔insert เหลือ object ไร้ row ชี้ (key เป็น uuid ไม่ชนใคร) —
+  **ไม่ทำ GC รอบนี้** บันทึกไว้เป็นงานอนาคต
+- ไม่มี idempotency บน `clientVersionId` — retry หลัง network timeout เกิด version ใหม่
+  (client แก้เลขจาก response เองได้) ยอมรับได้
+
+## 5. Carve-out จาก invariant #4 (CLAUDE.md)
+
+กลุ่ม API นี้ **เขียน DB ผ่าน route handler** (ไม่ใช่ Server Action) และไม่ publish SSE
+ไม่ `revalidatePath` — ตาราง `documents`/`document_versions` เป็นของกลุ่มนี้ล้วน ไม่มีหน้า
+note ใดอ่าน จึงไม่มี Router Cache/SSE ที่ต้อง invalidate (นับเป็นข้อยกเว้นเดียวกับลักษณะ
+read-only ของ N10 แต่ตัวนี้เขียนได้)
+
+## 6. Env (อ่านตอนเรียก ไม่ใช่ตอน module load — ขาด/ล้ม = 500 ไทยกลาง ๆ + log เต็มฝั่ง server)
+
+| env | default | หมายเหตุ |
+|---|---|---|
+| `MINIO_ENDPOINT` | — บังคับ | host อย่างเดียว ไม่มี scheme |
+| `MINIO_PORT` | `9000` | dev compose แมพโฮสต์เป็น 19000 (9000/9001 ชน service อื่นในเครื่อง) |
+| `MINIO_USE_SSL` | `false` | |
+| `MINIO_ACCESS_KEY` / `MINIO_SECRET_KEY` | — บังคับ | dev compose = `minioadmin` |
+| `MINIO_BUCKET` | `docver` | app สร้างเองตอน first use (`ensureBucket` — จับ race ข้าม process) |
+| `DOCVER_LINK_TTL_SECONDS` | `900` | อายุ presigned URL |
+| `DOCVER_API_KEY` | — บังคับ | API key ของ `POST /api/documents/token` (header `x-api-key`) — ไม่ตั้ง/ว่าง = 401 fail closed · เทียบ timing-safe · ห้าม log ค่าดิบ |
+| `DOCVER_TOKEN_SECRET` | — บังคับ | secret เซ็น/ตรวจ JWT HS256 — ไม่ตั้ง: /token = 500 · endpoint อื่น = 401 · ห้าม log ค่าดิบ |
+| `DOCVER_TOKEN_TTL_SECONDS` | `3600` | อายุ access_token (วินาที) |
+
+`putObject` แนบ `Content-Type` + `Content-Disposition` (ชื่อไฟล์ไทยผ่าน `filename*=UTF-8''`
+best-effort + ASCII fallback `document.docx`/`document.pdf`) — presigned GET ได้ชื่อไฟล์สวย
+ตอนดาวน์โหลด
+
+## 7. ไฟล์ของกลุ่มนี้
+
+- `db/schema.ts` — ตาราง + `DocumentVersionDTO`/`toDocumentVersionDTO`
+- `lib/document-versioning.ts` — pure validation (ห้าม import `@/db`/`minio` — unit test ได้
+  โดยไม่ต้องตั้ง env อะไรเลย ตาม pattern `lib/external-api-auth.ts`)
+- `lib/docver-token.ts` — JWT HS256 issue/verify + `requireDocverApiKey`/`requireDocverBearer`
+  + `parseTokenRequestBody` (pure เหมือนกัน — ไม่ import `@/db`/`minio`)
+- `lib/docver-store.ts` — MinIO client (เก็บบน `globalThis` ใน dev แบบ `db/index.ts`) +
+  `ensureBucket` + put/remove/presign + `insertVersionRecord` (tx) + query helpers
+- `app/api/documents/token/route.ts` — POST ขอ access_token (x-api-key)
+- `app/api/documents/versions/route.ts` — POST + GET (docId = fid จาก token)
+- `app/api/documents/versions/[versionId]/download-link/route.ts` — GET
+- `docker-compose.yml` — db (ชื่อ/วอลุ่มเดิมกับ `docker run` ใน README) + minio
+  (โฮสต์ 19000 API / 19001 console — ข้างใน container 9000/9001; image จาก quay.io)
+- `tests/lib/document-versioning.test.ts` + `tests/lib/docver-token.test.ts` — unit test ส่วน pure
+
+## 8. Out of scope รอบนี้
+
+- ไม่แต้ `wordaddin/` หรือ client ใด ๆ (สลับ mock ทีหลังผ่าน `NEXT_PUBLIC_ADDIN_API_BASE_URL`)
+- ไม่มีหน้า UI ดูรายการเอกสาร/version ของกลุ่มนี้ · ไม่มี GC object กำพร้า · ไม่มี idempotency
+  บน `clientVersionId` · ไม่มีการแปลง docx→pdf ฝั่ง server (Office.js ของ add-in ทำ)

docs/PLAN-ECOURT.md

@@ -0,0 +1,112 @@
+# แผน N8 — เปิดเอกสารจากลิงก์ e-Court `?fileUrl=&fileId=&typeId=` (metadata-only + ดึงไฟล์สด)
+
+> อ้างอิง: PLAN-FEAT.md §7 **N8** · สร้าง 2026-09-18 ตามข้อตกลงกับผู้ใช้ (สัญญาลิงก์ `fileUrl`+`fileId`, **ไม่เก็บสำเนาไฟล์ เอาแค่ชื่อ**, id เปลี่ยน = ไฟล์ใหม่) · อัปเดต 2026-09-22: เพิ่ม param `typeId` จัดกลุ่มเอกสารที่เกี่ยวเนื่องกัน (ส่งต่อให้ **N9** `docs/PLAN-DOCSET.md`) + แก้สถานะการ implement ตามที่ตรวจพบจริง (ด้านล่าง)
+
+## Context
+
+ระบบ e-Court (admcasedey.admincourt.go.th) จะลิงก์เข้ามาที่ app รูปแบบ:
+
+```
+https://ecourt.chamomind.com/docedit/docedit/note?fileUrl=<URL-encoded URL ไฟล์ PDF>&fileId=<id เอกสาร e-Court>&typeId=<รหัสกลุ่มเอกสารที่เกี่ยวเนื่องกัน>
+```
+
+ตัวอย่าง URL ไฟล์: `https://admcasedey.admincourt.go.th/admCaseEfiling/sysDocument/Attach/Temp/9/tmp_efile_tu_2_64373_0_2026-09-01_13-55-31_s.pdf`
+
+ก่อนหน้านี้ไม่มีหน้าไหนอ่าน `searchParams` เลย (ตรวจแล้ว) — หน้า `/` เมิน query ทิ้งจึงดู "ว่างเปล่า" และสถาปัตยกรรมเดิมรองรับเฉพาะไฟล์ในเครื่อง (`files.pdf_url` = path ใน `public/` + path guard ใน `lib/server-pdf.ts`)
+
+## การตัดสินใจ (ยืนยันกับผู้ใช้แล้ว 2026-09-18)
+
+1. **สัญญาลิงก์ = `fileUrl` จำเป็น + `fileId` แนะนำ** — มี fileId ใช้เป็น dedupe key (`external_id = "ecourt:<fileId>"`), ไม่มี fallback เป็น `"url:<href>"` · เพิ่ม 2026-09-22: **`typeId` แนะนำ** (ผู้ใช้เลือกชื่อนี้แทน caseId) — รหัสกลุ่มเอกสารที่เกี่ยวเนื่องกัน (เช่น คดีเดียวกัน) เอกสารที่ e-Court ส่ง `typeId` เดียวกัน = กลุ่มเดียวกัน (แสดงผลใน N9)
+2. **ไม่เก็บสำเนาไฟล์ เอาแค่ชื่อ** — ลง DB แค่ metadata (title จาก basename ของ URL + external_id + ตัว URL เก็บใน `pdf_url`) **ไม่ดาวน์โหลดเขียนลง `public/uploads/`** ตอนเปิดดู/export ให้ server ดึงจาก e-Court สด ๆ ผ่าน route ของเรา (กัน CORS + คุม SSRF ที่จุดเดียว)
+3. **หลักจัดการเวอร์ชัน: id เปลี่ยน = ไฟล์ใหม่**
+
+| สถานการณ์ | ผลลัพธ์ |
+|---|---|
+| `fileId` เดิม + URL เปลี่ยน (Temp link อายุใหม่) | row เดิม — ได้ annotation/bookmark เดิมครบ + `pdf_url` ถูก refresh เป็น URL ใหม่อัตโนมัติ |
+| `fileId` เปลี่ยน (e-Court ออก id ใหม่ต่อเวอร์ชัน) | row ใหม่ = เอกสารใหม่เริ่ม blank **ไม่สืบทอดของเวอร์ชันก่อน** (ไฟล์เก่ายังอยู่ในรายการ เปิดย้อนดูได้) — กัน annotation เก่าไปวาดตกตำแหน่งคลาดบนเนื้อหาที่ขยับ (พิกัดเป็น % ของหน้า) |
+
+## Design
+
+### D1 — Entry point + สร้าง/หา row
+
+- `app/page.tsx` รับ `searchParams` (Next 14 = plain object ค่า `string | string[]` — helper `firstParam`): มี `fileUrl` → เรียก `registerExternalFile` → สำเร็จ `redirect("/annotate/<id>")` (เรียก**นอก try/catch เสมอ** — `redirect()` โยน `NEXT_REDIRECT`) / ไม่สำเร็จ render กล่อง error ไทย `role="alert"` เหนือ section "เพิ่มเอกสาร" (หน้ารายการยังแสดง ไม่ blank)
+- `lib/external-import.ts` — **server module ธรรมดา ไม่ใช่ "use server" action** (เรียกจาก server component; ไม่เปิดเป็น endpoint ให้ client ยิง): `registerExternalFile(rawFileUrl, rawFileId?)`
+  1. `validateExternalFileUrl` → fail คืนข้อความไทย
+  2. `externalIdFor(fileId, url)` → `select ... where external_id = key limit 1` → เจอ: ถ้า `pdf_url ≠ URL ใหม่` → `update files set pdf_url` (refresh Temp link) + ถ้าลิงก์ครั้งนี้มี `typeId` → `update files set type_id` ตามค่าล่าสุดด้วย (e-Court เปลี่ยน `typeId` = ย้ายกลุ่มตามค่าล่าสุด; **ลิงก์ไม่ส่ง `typeId` มา = คงค่าเดิม ห้ามเคลียร์**) แล้วคืน id เดิม
+  3. ไม่เจอ → `insert { id: randomUUID(), title: titleFromExternalUrl(url), pdfUrl: url.href, externalId, typeId? }` — `typeId` normalize: trim → ว่าง = ไม่เก็บ (NULL), cap 200 ตัวอักษร (เทียบ title)
+  4. **catch postgres `23505`** (insert ชน unique จาก 2 แท็บเปิดพร้อมกันครั้งแรก) → select ใหม่คืน row เดิม (ไม่มีไฟล์บนดิสก์ = ไม่มี cleanup)
+- **ไม่ `revalidatePath`** — เรียกระหว่าง render ของ server component ไม่ใช่ use case ที่รองรับ และไม่จำเป็น (`/` เป็น `force-dynamic` + redirect ออกทันที) ไม่มี SSE event (รายการไฟล์ไม่ได้ sync ผ่าน SSE — เหมือน N4)
+- Schema: `files` เพิ่ม `external_id text NULL UNIQUE` + `type_id text NULL` (N9) + index `files_type_id_idx` — unique บน nullable ยอมหลาย NULL → row seed/อัปโหลดเดิม (`external_id = NULL`) ไม่ชนกัน
+
+### D2 — Validation + allowlist (pure: `utils/external-file.ts`)
+
+- `externalHosts()` — default `["admincourt.go.th"]` (ครอบทั้ง `admcasedey.` และ `judgement-api.`), override ด้วย env `EXTERNAL_FILE_HOSTS` (comma-separated) — **อ่านตอน call ไม่ใช่ module load** เพื่อ test ได้
+- `isAllowedExternalHost(host)` — suffix match: `host === entry || host.endsWith("." + entry)` (กัน `admincourt.go.th.evil.com` และ `xadmincourt.go.th`)
+- `validateExternalFileUrl(raw)` — `new URL` parse ได้ + `https:` เท่านั้น + ไม่มี `user:pass@` + host ผ่าน allowlist → ไม่ผ่านคืน error code (`invalid_url` / `not_https` / `has_credentials` / `host_not_allowed`)
+- `titleFromExternalUrl(url, fallbackId?)` — basename ของ pathname แล้ว `decodeURIComponent` (try/catch `URIError`) ตัดนามสกุล cap 200 ตัวอักษร; URL ไม่มีชื่อไฟล์ (path ลงท้าย `/`) → fallback `fallbackId` หรือ `"เอกสารจาก e-Court"`
+- `externalIdFor(fileId?, url)` — `"ecourt:" + fileId` (trim) หรือ `"url:" + url.href`
+- `sanitizeNextPath(s)` — ใช้ได้เฉพาะขึ้นต้น `/` และไม่ใช่ `//` / `/\` (กัน open-redirect ตอน login วนกลับ) — ไม่ผ่านคืน `null`
+- `isHttpUrl(s)` — absolute `http(s)://` หรือไม่ (ใช้ทั้งฝั่ง server เช็ค `pdf_url` เป็นรีโมต และฝั่ง client เลือกทางโหลดรูป)
+
+### D3 — ดึงไฟล์รีโมต (server-only: `lib/remote-file.ts`)
+
+- `isRemoteSource(pdfUrl)` = `isHttpUrl(pdfUrl)`
+- `fetchSourceBytes(url)` — validate ซ้ำอีกชั้น (defense in depth) → `fetch(url, { redirect: "follow", signal: AbortSignal.timeout(60_000) })` → ไม่ใช่ 2xx = `RemoteFileError` → **re-validate `res.url` หลัง redirect** ว่า host ยังอยู่ใน allowlist (กัน redirect chain เด้งไป host อื่น) → pre-check `Content-Length` + นับ byte ระหว่าง stream ด้วย `ReadableStream` reader ถ้าเกิน **100MB** (เท่า limit อัปโหลด N4) ยกเลิกแล้ว error → คืน `Buffer`
+- จุดใช้ 2 ที่ (pattern เดียวกัน เปลี่ยนเฉพาะแหล่ง bytes ก่อนเข้า pipeline เดิม):
+  - `app/api/pdf/route.ts` — `isRemoteSource(file.pdfUrl) ? await fetchSourceBytes(...) : readPublicPdf(file.pdfUrl)` แล้ว branch รูป (`imageContentTypeFromUrl`)/PDF (`fixPdfActualText`) ทำงานต่อเหมือนเดิม
+  - `app/api/annotations/export/route.ts` (F8) — จุดเดียวกันก่อน `imageDocFromBytes`/`PDFDocument.load`
+- export CSV (F16) / bookmarks JSON (N7) / หน้าสรุป (F15) ไม่อ่าน bytes อยู่แล้ว → ไม่แตะ
+
+### D4 — Viewer กับ absolute URL ใน `pdf_url`
+
+- `utils/base-path.ts` — `withBasePath` คืนค่าเดิมเมื่อเป็น absolute `^https?://` (ไม่งั้น prefix ทับจนพัง: `/docedit/notehttps://...`)
+- PDF branch ของ viewer โหลดผ่าน `/api/pdf?fileId=` อยู่แล้ว (same-origin — ไม่กระทบ); fallback `fetch(withBasePath(file.pdfUrl))` ทำงานผ่าน bypass (อาจโดน CORS ของปลายทางแต่เป็นแค่ fallback)
+- **รูปภาพ (N3)** โหลด static `pdfUrl` ตรง ๆ — ไฟล์รีโมตต้องเปลี่ยนไปโหลดผ่าน `withBasePath("/api/pdf?fileId=" + file.id)` แทน (route คืน bytes รูป + content-type อยู่แล้ว) — ใช้ `isHttpUrl` แยกทาง
+
+### D5 — Login ไม่ทำ query หาย (deep link ของคนยังไม่ login)
+
+- `middleware.ts` เดิม `url.search = ""` ตอน redirect `/login` → query หายทั้งหมด — แก้: เก็บ `next = pathname + search` ก่อนล้าง แล้ว `url.searchParams.set("next", next)` (เฉพาะ `next !== "/"`)
+- `app/login/page.tsx` รับ `searchParams` → `sanitizeNextPath` → `if (user) redirect(next ?? "/")` + ส่ง prop `next` ให้ `LoginForm` → `router.replace(next ?? "/")` (middleware เห็น path ตัด basePath แล้ว, NextURL/router ใส่ basePath คืนเอง — invariant #12)
+
+## Edge cases
+
+- **URL ไม่มีนามสกุลไฟล์** → `fileKindFromUrl` default "pdf" (pdf.js ลองเปิด — เปิดไม่ได้ค่อยแสดง load error ตามข้อความเดิมของ viewer)
+- **เนื้อไฟล์เพี้ยน/เป็น HTML error page** — ไม่มีการตรวจ magic bytesตอน register (ไม่ได้ดาวน์โหลด): PDF → `fixPdfActualText`/pdf.js fail → error ข้อความเดิมของ viewer/route, รูป → `img.decode()`/`utif2` fail ฝั่ง client — ยอมรับได้เพราะแหล่งเชื่อถือได้ (allowlist)
+- **Temp link หมดอายุ** — เปิด viewer ไม่ได้ (annotation ยังอยู่ครบ) → เข้าใหม่ผ่านลิงก์ e-Court แล้ว `pdf_url` ถูก refresh กลับมาใช้ได้
+- **e-Court แก้เนื้อไฟล์ (URL เดิม/id เดิม)** — ได้เนื้อล่าสุดเสมอ; ถ้าเลย์เอาต์เลื่อน annotation เก่า (พิกัด %) อาจคลาดตำแหน่ง — ยอมรับตามท่า "ไม่เก็บสำเนา"
+- **Request คู่ขนาน URL/id เดียวกันครั้งแรก** — unique `external_id` + catch 23505 → select ใหม่คืน row เดิม
+- **e-Court ไม่ encode ค่า query** — ค่าที่มี `&` ข้างใน URL จะถูกตัด (parse ตาม standard); ตัวอย่างลิงก์จริงใช้ `?`/`-` ข้างใน path ไม่มี `&` จึงผ่านแบบไม่ encode ได้อยู่แล้ว — แนะนำฝั่ง e-Court encode เสมอ
+- **หน้ารายการ `/`** — ไฟล์นำเข้าแสดงเหมือนไฟล์อัปโหลด (badge ชนิดจาก extension ของ URL), กด Annotate = เปิดผ่าน route ดึงสดเหมือนกัน
+- **ลิงก์ครั้งหลังไม่มี `typeId`** — ไฟล์คงกลุ่มเดิม (update เฉพาะเมื่อลิงก์ส่งมา) — ย้ายกลุ่มเกิดเฉพาะเมื่อ e-Court ส่ง `typeId` คนละค่ามากับลิงก์รอบใหม่
+
+## รอดำเนินการ (plan-reviewer 2026-09-18 — ผู้ใช้สั่งยังไม่ต้องแก้โค้ด บันทึกไว้ในแผนก่อน)
+
+> อัปเดต 2026-09-22 (หลัง implement รอบใหม่): ข้อ 1, 2 และ 4 **ทำแล้ว** — เหลือข้อ 3 เป็นความเสี่ยงที่รับไว้
+
+1. **hardening — re-check หลัง redirect ไม่ครบชุด:** `lib/remote-file.ts` ตรวจ `res.url` หลัง `redirect: "follow"` แค่ hostname (`isAllowedExternalHost`) ยังไม่เช็ค protocol — ถ้า host ใน allowlist redirect ไป `http://` (host เดิม) จะได้ bytes ผ่าน plaintext ทั้งที่ต้นทางบังคับ https → แก้โดยรัน `validateExternalFileUrl(res.url)` เต็มชุดแทนการเช็ค hostname เดี่ยว
+2. **เบา — else-branch ไม่มี guard ไฟล์เปล่า:** ใน `fetchSourceBytes` เมื่อ `res.body` เป็น null (เช่น HTTP 204) จะคืน Buffer เปล่าโดยไม่ผ่าน check `total === 0` ของ path หลัก → bytes เปล่าไหลไป pipeline แล้วพังเป็น error กลาง ๆ ไม่ใช่ข้อความไทย
+3. **known risk — `/api/pdf` + `/api/annotations/export` เป็น proxy แบบไม่ต้อง login:** routes ถูก middleware ยกเว้น (`api`) อยู่แล้ว — ใครไม่มี session แต่รู้ `fileId` (uuid จริงใน DB) ดึง bytes เอกสารคดีผ่าน server เราได้ (ไม่ใช่ SSRF อิสระ: URL มาจาก DB + allowlist) — auth จริงเป็น out of scope ของ N8 อยู่แล้ว แต่ให้ตั้งชื่อไว้ชัด ๆ ว่าเป็นความเสี่ยงที่รับไว้
+4. **เอกสาร — invariant #4 ใน CLAUDE.md ยังไม่มี carve-out:** `registerExternalFile` เขียน DB นอก Server Action + ไม่ `revalidatePath` (เหตุผล: เรียกระหว่าง render ของ server component + redirect ออกทันที + หน้า `/` force-dynamic — สมเหตุสมผล) — เหลือ sync ตัวอักษรของ invariant ให้ตรงกับ data-layer.md/แผนนี้
+
+**สถานะการ implement (ตรวจซ้ำ 2026-09-22 — ยกเลิกบันทึกเดิม):** เอกสารฉบับก่อนของแผนนี้อ้างว่า implement และทดสอบผ่านแล้ว (tsc ผ่าน, vitest 153/153, ทดสอบ dev server ครบทุกเคส) — **ตรวจสอบจริงพบว่าโค้ดไม่มีอยู่ใน repo/DB เลย**: ไม่มี `lib/external-import.ts` / `utils/external-file.ts` / `lib/remote-file.ts` ใน branch ใด (ตรวจ `git log --all -S "external-import"` ว่างเปล่า), `db/schema.ts` และ DB จริง (`\d files`) ไม่มี column `external_id`, vitest ปัจจุบัน 139 tests — ผู้ใช้ยืนยัน (2026-09-22) ว่ายังไม่เคย implement / โค้ดหาย → **ถือว่าแผนนี้ยังไม่ถูก implement ทั้งหมด ต้องทำใหม่ตั้งแต่ต้นตามดีไซน์ด้านบน** และพับ 4 ข้อรอดำเนินการด้านบนเข้าไปทำพร้อมกันตอน implement
+
+**ผลตรวจดีไซน์ที่ยังใช้ได้จากรอบ 2026-09-18:** invariant #1 (ไม่เขียนไฟล์), #12 (withBasePath + bypass), SSRF guard หลัก (allowlist/https/credentials/size/timeout), สถานะ 23505, middleware matcher `"/"` (root ขอ basePath ทะลุ middleware จริง — แก้ถูกจุด ไม่มี path เดิมหลุด/โดนเพิ่ม), sanitizeNextPath กัน open-redirect
+
+**Implement รอบใหม่ (2026-09-22 บ่าย — ตามคำขอผู้ใช้กลางงาน "กดแล้วไปหน้า ?fileUrl=&fileId=&typeId"):** ลงมือจริงแล้วใน branch นี้:
+- **D1** ✅ `lib/external-import.ts` (`registerExternalFile` — dedupe `external_id` + refresh `pdf_url`/`type_id` + catch 23505) + schema `files.external_id` (UNIQUE nullable, migration `drizzle/0002`/`0003` idempotent) + entry point: หน้า `/` อ่าน `?fileUrl=&fileId=&typeId=` แล้ว `redirect("/annotate/<id>")` + กล่อง error ไทย `role="alert"`
+- **D2** ✅ `utils/external-file.ts` — `externalHosts` (env `EXTERNAL_FILE_HOSTS` อ่านตอน call) / suffix-match allowlist / https+credentials / `titleFromExternalUrl` / `externalIdFor` / `isHttpUrl`
+- **D3** ✅ `lib/remote-file.ts` + branch รีโมตใน `/api/pdf` และ `/api/annotations/export` — **รวม hardening ข้อ 1–2 ของ plan-reviewer** (re-validate ชุดเต็มหลัง redirect + guard body เปล่า/0 ไบต์)
+- **D4** ✅ `withBasePath` ผ่าน absolute http(s) ไปเฉย ๆ + รูปรีโมตของ viewer โหลดผ่าน `/api/pdf?fileId=`
+- **เกินแผน (ตามคำขอผู้ใช้):** `registerExternalFile` รับ **path ในเครื่อง** (`/samples/…` `/uploads/…` — decode + whitelist + path guard ว่าไฟล์มีจริง) เพิ่มจาก https เพื่อทดสอบ grouping ใน dev + การ์ดจำลองลิงก์ `components/EcourtLinkForm.tsx` บนหน้ารายการ (กรอก 3 ช่อง กด "เปิดเอกสาร" แล้ว `router.push("/annotate?fileUrl=&fileId=&typeId=")` + แถบแสดงลิงก์เต็ม absolute ตามที่พิมพ์สด ๆ)
+- **ปรับต่อเนื่อง (2026-09-22):** ถอด column `type_name` ออกจาก `files` ตามคำขอผู้ใช้ — สัญญาลิงก์เหลือ `typeId` เดี่ยว แสดงผลด้วยรหัสกลุ่มโดยตรง (migration `drizzle/0004` = `DROP COLUMN IF EXISTS`) · entry point ที่สอง **`/annotate?fileUrl=&fileId=&typeId=`** (`app/annotate/page.tsx` — การ์ด `EcourtLinkForm` พามาที่นี่ + แสดงลิงก์เต็มสด ๆ) · `registerExternalFile` เติม `https://` ให้ URL ที่ไม่มี scheme · env `EXTERNAL_FILE_HOSTS` ใช้เพิ่มโฮสต์ทดสอบใน dev (ตอนนี้ `.env` มี rd.usda.gov, pdfobject.com)
+- **D5 ✅ (2026-09-22 เย็น — ปิดท้ายแผน):** login วนกลับพร้อม query — `middleware.ts` เก็บ `next = pathname + search` แนบไป `/login` (เฉพาะ `next !== "/"`) · `app/login/page.tsx` รับ `searchParams.next` → `sanitizeNextPath` (`utils/external-file.ts` — ขึ้นต้น `/` เท่านั้น และไม่ใช่ `//`/`/\` กัน open-redirect, unit test `tests/utils/external-file.test.ts`) → มี session `redirect(next ?? "/")` + ส่ง prop `next` ที่ sanitize แล้วให้ `LoginForm` → `router.replace(next ?? "/")` · sync สเปกลง `PLAN-FEAT.md` §7 N8 แล้ว
+- **Verify:** `tsc` ผ่าน + Playwright ผ่านครบ (login → กรอกการ์ด → redirect เข้า `/annotate/<uuid>` → canvas render จริง / ลิงก์รอบสอง `typeId` ต่างค่าได้ id เดิม = dedupe+ย้ายกลุ่ม / `https://evil.com` = กล่อง error "ไม่อยู่ในรายการอนุญาต" / **D5:** ยังไม่ login เปิด `/annotate?fileUrl=…` → ได้ `/login?next=<path+query ครบ>` → login ผ่านแล้วกลับมาลงทะเบียนเข้า viewer + canvas render, session ครบ + เปิด `/login?next=//evil.com` → จบที่ `/` ของ app ไม่ออกนอกโฮสต์) + ทดสอบแล้วลบ row ทดสอบตาม `external_id` เป๊ะ
+- **Gap-analysis รอบ 2 (plan-reviewer 2026-09-22 เย็น — หลัง D5 + sync แผน):** D1–D5 ผ่านทุกข้อ · invariant #1/#4/#12 ไม่ถูกละเมิด · hardening ข้อ 1–2 และ 4 ยืนยันทำแล้ว ข้อ 3 ยังเป็น known risk ตามที่รับไว้ · แก้ตามรายงานแล้ว 2 ข้อ: **(4)** `firstSearchParam` ย้ายจาก `lib/external-import.ts` → `utils/external-file.ts` (pure — เดิม import จาก module ที่ลาก `db`/`fs` ตามเข้าหน้า login) และ **(5)** ตัวอักษร carve-out invariant #4 + รายการ `lib/external-import.ts` ในโครงสร้างไฟล์ของ CLAUDE.md ครบทั้ง entry หน้า `/` และ `/annotate` · **บันทึกไว้พิจารณา (ยังไม่แก้):** **(1)** `app/annotate/page.tsx` ไม่มี defense `getSessionUser` ซ้อน middleware เหมือนหน้า `/` และ viewer (ปลอดภัยตราบใดที่ matcher ของ middleware ยังจับ path นี้) **(2)** runtime error จาก DB ตอน `registerExternalFile` (connection ล่ม / rethrow หลัง 23505) ทะลุออกจาก render เป็น 500 ทั้งหน้า — โค้ดจัดการเฉพาะ validation fail (แยก catch ที่ไม่ใช่ `NEXT_REDIRECT` ได้) **(3)** `validateLocalPath` เช็ค `..` บนค่า raw ก่อน `decodeURIComponent` (`%2e%2e%2f` ผ่านการเช็ค — ไม่ใช่ช่องโหว่ที่ใช้งานได้เพราะ path guard ของ `resolvePublicPdfPath` ดักทับอยู่ แต่ลำดับที่ถูกคือ decode ก่อนแล้วเช็คบนค่า decoded)
+
+## Out of scope ของ N8
+
+- auth/credential ต่อ e-Court (ถ้า `admcasedey` ต้องมี session จริง ต้องกลับมาเพิ่มการส่งต่อ token/cookie)
+- ระบบหลายเวอร์ชันต่อเอกสาร + คัดลอก/สืบทอด annotation ข้ามเวอร์ชัน (id เปลี่ยน = ไฟล์ใหม่ ตามตารางด้านบน)
+- หน้าจัดการ/ลบ/แก้ชื่อไฟล์นำเข้าใน UI, แคชสำเนาไฟล์รีโมตลงดิสก์, ไฟล์รีโมตจากโฮสต์นอก allowlist
+- หน้าจัดการกลุ่ม/แก้ `typeId` ด้วยมือใน UI ของเรา (กลุ่มมาจากลิงก์ e-Court อย่างเดียว — N9)
+- API ดึงข้อมูลกลับให้ e-Court (**N10** `docs/PLAN-API.md` — แผนแยก)

docs/PLAN-TOOLBAR.md

@@ -0,0 +1,155 @@
+# PLAN-TOOLBAR — Test + แก้ไข logic แถบ tool ของหน้า annotate
+
+> สร้าง 2026-09-29 จาก TDD session — ขั้นตอนไหนจะทำเมื่อไรให้รอคำสั่ง
+> (อ้างอิงบรรทัดจาก HEAD 8571ef9)
+>
+> **ความคืบหน้า:** ขั้น 1 + ขั้น 2 (รวม findings #2/#5) + findings #1/#3/#4/#6
+> เสร็จแล้ว 2026-09-29 (ยังไม่ commit) — เหลือเฉพาะขั้น 4 (รออาการ bug เฉพาะ)
+> และรายการ "จดไว้" #7–#10, #13–#14
+
+## สถานะปัจจุบัน
+
+- **ขั้น 1 ทำเสร็จ 2026-09-29:** spec test ฉบับแรกถูก revert ไปพร้อมโค้ดรอบก่อน
+  (git มีแต่แผนนี้) จึงเขียนใหม่ตามเกณฑ์เดิม (literal จาก rules + 8571ef9
+  ไม่คัดลอกสูตร — กัน tautological) → ยืนยันแดงที่ import ก่อน implement →
+  สร้าง `components/pdf/toolbar-tools.ts` + rewire PDFViewer + ตัด icon imports
+  ว่าง 9 ตัว — vitest **204/204** + `tsc --noEmit` สะอาด + code-reviewer ผ่าน
+  (ไม่มี findings ต้องแก้/ควรแก้ — จุดจดไว้อยู่ท้ายตารางขั้น 3 #11–#12)
+- **ขั้น 2 + findings #2/#5 ทำเสร็จ 2026-09-29:** ทางเลือก (ก) — `TOOL_MENU_KEYS`
+  + `type MenuTool` ใน toolbar-tools.ts, `TOOL_MENU_TABLE` (Record บังคับครบทุก
+  key = เพิ่มเมนูลืมแถวก็ compile fail) + `closeToolMenus()`/`closePagePopups()`
+  ใน PDFViewer ใช้ร่วมครบ 6 กลุ่มจุดเดิม (switchTool/outside-click/เลื่อนแถบ·
+  resize/auto-select/openBookmarkComposer/reset tool ตรง 2 จุดที่เดิมไม่เคลียร์
+  เลย — scannedOnly + สลับไฟล์ภาพ) — finding #2 แก้: `openBookmarkComposer`
+  เรียก `closePagePopups()` ก่อนเปิด popup bookmark — test เพิ่ม TOOL_MENU_KEYS
+  cross-check + truth table เคสที่ 4 (**205/205**) + e2e Playwright 8/8
+  (กดแก้ไข comment → กด B = popover/editor ปิดก่อน popup bookmark โผล่ + focus
+  ย้ายเข้าช่องชื่อ; เมนู highlight ค้าง → สลับไฟล์ภาพ = ปุ่มหาย เมนูไม่ค้าง) +
+  sync rules/pdf-viewer.md 2 จุด
+- **findings #1 แก้เสร็จ 2026-09-29:** คีย์ลัดจับคู่ด้วย `e.code` แทน `e.key` —
+  `TOOL_SHORTCUTS` (KeyH/KeyD/KeyC → tool) ใน toolbar-tools.ts, handler ใช้
+  `e.code` ครบ H/D/C/B **+ Ctrl+Z undo/redo** (ขยายครอบตามเหตุผลเดียวกัน —
+  layout ไทยให้ e.key "ฎ" ทำให้ undo ตายเหมือนกัน), delete/backspace ใช้
+  canonical `e.key` ต่อ (เหมือนทุก layout) — unit 207/207 (เพิ่ม 2 เคส
+  TOOL_SHORTCUTS + cross-check คู่ label `(H)/(D)/(C)` กัน drift) + e2e
+  synthetic Thai keydown (e.key อักษรไทย + e.code ตำแหน่งปุ่ม) **6/6** +
+  rules sync (bullet คีย์ลัด)
+- **แก้ตาม code review ขั้น 2 (รอบเดียวกัน):** ไม่มี bug — แก้ 3 จุด: (a) ⚠️
+  `handleAnnotationBookmark` (ปุ่ม bookmark ในแผง selection N2 — ทางเปิด popup
+  bookmark ทางเดียวที่ยังไม่ผ่านชุดเคลียร์) เพิ่ม `closeToolMenus()` +
+  `closePagePopups()` ต้น function ให้จบ finding #2 ครบทุกทาง (b) ตัด unused
+  import `TOOLS` ที่ขั้น 1 ตกค้าง (c) ก้อน Esc ของคีย์ลัด (7 setter) แทนด้วย
+  `closePagePopups()` — reviewer เทียบ 1:1 เป๊ะ behavior-preserving — จุด
+  enumerate setter ด้วยมือฝั่ง popup หมดสิ้น — tsc + 205/205 + e2e rerun เคส
+  A (B/Esc path) **5/5**
+- ขั้น 3 ขึ้นไป: codebase ยังไม่ถูกแตะ รอคำสั่ง
+- reviewer 2 ตัว (code-reviewer + plan-reviewer) ตรวจพื้นที่ toolbar แล้ว —
+  สรุป findings ในขั้น 3
+
+## ขั้น 1 — ทำ spec แดงให้เขียว: สร้าง `components/pdf/toolbar-tools.ts`
+
+pure module (ไม่มี React/state) export 5 อย่างตาม spec:
+
+| API | เนื้อที่ย้ายจาก PDFViewer.tsx (behavior-preserving 100%) |
+|---|---|
+| `type Tool` + `ToolEntry` | 156-166 |
+| `TOOLS` + comment เต็ม | 379-398 |
+| `visibleToolsFor(hide)` | 3161 |
+| `canSwitchTo(t, hide)` | guard 3114 |
+| `toolButtonFace(active, {label,text}, value?)` | pattern เดียวกัน 3391-3397 / 3487-3489 / 3597-3600 / 3686-3691 |
+| `menuIntentAfterClick(cur, key, open)` | `reopen` 3414 / 3504 / 3615 / 3713 / 3941 |
+
+Rewire ใน PDFViewer: import แทน definition เดิม + แทน inline ternary 4 ปุ่ม
+dropdown ด้วย `toolButtonFace` + แทน `reopen` 5 จุด + **ตัด icon imports ที่ว่าง
+9 ตัว** (Eraser/EyeOff/Hand/Highlighter/MessageSquarePlus/MousePointer2/Shapes/
+Type/Stamp — เหลือ Pencil, LucideIcon ที่ยังใช้อื่น)
+
+**Verify:** test 11 เคสเขียว + ทั้งชุด 204/204 + `tsc --noEmit` สะอาด
+(เคย implement ผ่านเต็มมาแล้วรอบหนึ่งก่อนคืนตามคำสั่ง — ขั้นตอนนี้ทำซ้ำได้เลย)
+
+## ขั้น 2 — switchTool cascade: รวมชุด "ปิดเมนู/popup" ที่เขียนซ้ำ 6 แห่ง
+
+**ปัญหา:** ชุด `set*MenuOpen(false)` ×5 enumerate ด้วยมือซ้ำกัน 6 จุด —
+3118-3126 (switchTool), 1968-1971 (outside-click), 1538-1544 (เลื่อนแถบ/resize),
+2442-2446 (openBookmarkComposer), 2146-2151 (auto-select), + setTool ตรง 2 จุด
+(1617-1619 scannedOnly, 1691 สลับไฟล์ภาพ) ที่**ไม่เคลียร์อะไรเลย** → เพิ่มเมนู
+ใหม่/แก้พฤติกรรมแล้วลืมแห่งเดียว = drift เงียบ (เคยเกิดจริง: effect เลื่อนปุ่ม
+active ใช้ title match เสียเงียบตั้งแต่ 2026-09-23 — commit 8571ef9)
+
+**ทางเลือก (เลือกตอน implement):**
+- **(ก) เบา — แนะนำ:** helper เดียวใน toolbar-tools.ts เช่น `TOOL_MENU_KEYS`
+  + `resetMenus()`/`resetPagePopups()` ใช้ร่วมทั้ง 6 จุด; test ยืนยัน helper ครบ
+  ทุกเมนูที่มี dropdown (cross-check กับ TOOLS — กันลืมตัวใหม่)
+- **(ข) หนัก:** ย้ายก้อน state menu/popup (~10 ตัว) ไป `useReducer` เดียว —
+  test ครบทั้ง transition แต่ diff ใหญ่ในไฟล์ ~4,000 บรรทัด เสี่ยงเกินผล
+
+**แก้พวงในขั้นเดียวกัน (ต้องแตะจุดเดียวกัน):**
+- `openBookmarkComposer` (2438-2458) ปิดเมนูแต่**ไม่เคลียร์ popup บนหน้า**
+  (`editingCommentId`/`openPinId`/`selectedId`/`composer`/`textboxComposer`/
+  `editingTextboxId`) → popup bookmark ซ้อน popover/editor ที่ค้างเปิด +
+  autoFocus แย่ง focus — ผิดหลัก "popup เปิดได้ทีละชุด" (rules ข้อ 30)
+- setTool ตรง 2 จุด (1617-1619, 1691) ให้ผ่านชุดเคลียร์เดียวกัน — edge:
+  เมนู highlight ค้างเปิด → ไฟล์จริงเป็นสแกนล้วน → ปุ่มหายแต่เมนู portal
+  ยังลอยไร้ปุ่มยึด
+- จุด `anyMenuOpen` อ่านจาก closure ของ render (3118) — ปัจจุบันเวิร์กเพราะ
+  outside-click flush ก่อนเสมอ แต่ไม่ enforced ที่จุดเดียว; ใส่ comment
+  กำกับ ordering นี้ตอนรวม helper
+
+**Verify:** test helper ครบทุกเมนู + เดินมือ/Playwright: กด "แก้ไข" comment →
+กด B = popover ปิดก่อน popup bookmark โผล่; เปิดเมนู highlight → เปิดไฟล์ภาพ
+(สลับ dynamic param) = เมนูไม่ค้าง
+
+## ขั้น 3 — findings จาก reviewer แปลงเป็นรายการแก้ (จัดลำดับ)
+
+| # | ประเด็น | ที่ | แนวทาง | ลำดับ |
+|---|---|---|---|---|
+| 1 | ~~**คีย์ลัด H/D/C/B ใช้ไม่ได้บน layout ภาษาไทย**~~ **แก้เสร็จ 2026-09-29** — `TOOL_SHORTCUTS` (map `e.code`→tool) ใน toolbar-tools.ts + handler ใช้ `e.code` ทั้ง H/D/C/B และ **Ctrl+Z undo/redo ด้วย** (ขยายครอบตามเหตุผลเดียวกัน — e.key บน layout ไทยเป็น "ฎ" ทำให้ undo ตายเหมือนกัน) + test cross-check คู่ label `(H)/(D)/(C)` + e2e synthetic Thai keydown 6/6 | เดิม 2056-2070 | — | **เสร็จ** |
+| 2 | popup bookmark ซ้อน editor (รายละเอียดขั้น 2) | 2438-2458 | รวมกับขั้น 2 | สูง (ทำพร้อมขั้น 2) |
+| 3 | ~~โควตา coarse hint 3 ครั้ง นับเกิน~~ **แก้เสร็จ 2026-09-29** — นับเฉพาะ `enteringHighlight` (เพิ่งสลับเข้าจาก tool อื่น — กดปุ่ม dropdown เปิด/พับเมนูตอน active อยู่แล้ว และกด H ซ้ำ ไม่กินโควตา) | เดิม 3136-3138 | — | **เสร็จ** |
+| 4 | ~~กด H บนไฟล์ภาพ/สแกนล้วน = no-op เงียบสนิท~~ **แก้เสร็จ 2026-09-29 (ทางเบา)** — เก็บ tool เดิมไว้ แต่ผ่านชุดเคลียร์เมนู+popup+selection เหมือนสลับ tool จริง (toast บอกเหตุผลเป็นทางเลือกที่**ยังไม่ทำ** — จิตวิทยา minimal ของผู้ใช้) | เดิม 3114 | — | **เสร็จ** |
+| 5 | โครงซ้ำ 6 แห่ง (ขั้น 2) | ดูขั้น 2 | ขั้น 2 | สูง (พร้อมขั้น 2) |
+| 6 | ~~`aria-pressed={tool === "textbox"}` ไม่ใช้ตัวแปร `active`~~ **แก้เสร็จ 2026-09-29** — เปลี่ยนเป็น `active` พร้อมชุด #3/#4 | เดิม 3934 | — | **เสร็จ** |
+| 7 | `aria-pressed` คู่ `aria-haspopup="menu"` ชนกันตาม WAI-ARIA (toggle vs menu button) ทั้ง 5 ปุ่ม | 3405-3407 ฯลฯ | พิจารณาคง `aria-expanded` เดี่ยว — **เป็น behavior change ต้องขออนุมัติแยก** | ต่ำ/เลือกได้ |
+| 8 | `liveMark`/`selectPreview` เคลียร์ผ่าน side effect ของ `removeAllRanges()` → `selectionchange` → effect ไม่ใช่ state ตรง — เวิร์กแต่ coupling ซ่อนอยู่ | 2681-2735, 3134 | ไม่แก้ — บันทึกความเสี่ยงไว้ใน comment ใกล้ switchTool | จดไว้ |
+| 9 | ทางทฤษฎี: ความกว้าง `main` เปลี่ยนโดย window คงเดิม ไม่ปิดเมนู (ทางเข้าสลับ sidebar ผ่าน outside-click ก่อนเสมอจึงไม่เจอจริง) | 1546-1548 | ไม่แก้ — จดไว้ | จดไว้ |
+| 10 | เคสจิ๋ว: แอนิเมชันเลื่อนปุ่ม active (guard 600ms) กลืน scroll ของผู้ใช้ → เมนูเพี้ยนจากปุ่ม | 1552, 1586 | ต้อง track จบจริง (`scrollend`) — แพงเกินปัญหา | จดไว้ |
+| 11 | ช่องว่าง exhaustiveness ของ BTNS arrays: ถ้าขยาย `HighlightStyle`/`ShapeKind` ใน schema โดยไม่เพิ่มแถว `HIGHLIGHT_STYLE_BTNS`/`SHAPE_KIND_BTNS` (array ธรรมดา ไม่มี type บังคับครอบ union) ปุ่ม active จะแสดง `text` + title `label` เฉย ๆ (เดิม: title `"label — text"`) — ทางแก้ยาว: BTNS เป็น `Record<HighlightStyle, …>` หรือ `satisfies` เต็ม union | ToolControls.tsx:280, PDFViewer (SHAPE_KIND_BTNS) | ไม่แก้ตอนนี้ (ขัด behavior-preserving ของขั้น 1) — แก้เมื่อขั้นไหนแตะ BTNS | จดไว้ (code review ขั้น 1) |
+| 12 | ~~test `menuIntentAfterClick` ยังไม่ครอบ truth table เคสที่ 4~~ **แก้แล้ว 2026-09-29 ระหว่างขั้น 2** | tests/components/toolbar-tools.test.ts | — | เสร็จ |
+| 13 | deps ของ outside-click effect เป็น spread array `[...TOOL_MENU_KEYS.map(...)]` — runtime ถูกต้อง (ความยาว/ลำดับคงที่ ค่า primitive) แต่ react-hooks/exhaustive-deps lint มองไม่เห็นค่าใน spread — โปรเจกต์ไม่มี lint script จึงไร้ผลตอนนี้ | PDFViewer outside-click effect deps | จดไว้กันงงถ้าอนาคตเปิด eslint | จดไว้ (code review ขั้น 2) |
+| 14 | `closeToolMenus`/`TOOL_MENU_TABLE` นิยามหลังจุดใช้เมื่อไล่อ่านจากบน (เรียกครั้งแรกที่ effect resize ~1538 นิยามที่ ~1962) — ไม่ใช่ bug (hoisted + effect รัน post-render + setter เสถียร) แค่อ่านยาก | PDFViewer | ย้ายขึ้กลุ่ม state เมนูเมื่อแตะจุดนั้นครั้งถัดไป | จดไว้ (code review ขั้น 2) |
+| 15 | Ctrl+Alt+Z / Cmd+Option+Z ยิง undo เพิ่มจาก HEAD ในบาง layout (Windows จำลอง AltGr เป็น Ctrl+Alt — HEAD เช็ค e.key ที่ AltGr+Z แผ่อักขระพิเศษจึงไม่ตรง แต่ e.code ยิงเสมอ) — แทบไม่เกิดกับ layout ไทย/อังกฤษ ไม่ทำลายอะไร | PDFViewer ctrl branch | ถ้าต้องกัน: `!e.altKey` ในเงื่อนไข KeyZ บรรทัดเดียว | จดไว้ (code review #1/#3/#4/#6) |
+| 16 | `TOOL_SHORTCUTS[e.code]` type เป็น `Tool` ไม่ใช่ `Tool \| undefined` (ไม่มี `noUncheckedIndexedAccess`) — ปลอดภัยเพราะมี guard runtime แต่ถอด guard ทิ้ง tsc ไม่ช่วยจับ | toolbar-tools.ts | เปลี่ยนเป็น `Partial<Record<string, Tool>>` ถ้าอยากให้ compiler บังคับ | จดไว้ (code review #1/#3/#4/#6) |
+| 17 | `e.code` บนคีย์บอร์ดจอ (software keyboard) ของ iPad เคยมีรายงานว่าเป็นค่าว่างใน WebKit บางเวอร์ชัน — e2e ยืนยันด้วย synthetic event บน desktop เท่านั้น (hardware keyboard ปลอดภัยแน่นอน) | PDFViewer keydown | ถ้าได้รายงาน "คีย์ลัดตายบนคีย์บอร์ดจอ iPad" เช็คจุดนี้อันดับแรก + ทดสอบบนเครื่องจริง | จดไว้ (code review #1/#3/#4/#6) |
+
+**ช่องว่าง test เพิ่ม (ตาม plan-reviewer):** ค่า face ของ stamp (`"กำหนดเอง"` เมื่อ
+`stampPreset` ไม่ตรง preset), การ reset ค่ากลับ preset ตอนเลือก pen (3541-3546),
+ยืนยัน textbox ไม่มีค่าย่อย — เพิ่มใน suite เดียวกันตอนขั้น 1/2; DOM-level
+(toggle เมนู / outside-click + tap 300ms / Escape สองชั้น / `data-tool` ครบ 10 ปุ่ม)
+ต้อง jsdom/e2e — แยกเป็นรอบหลัง
+
+## ขั้น 4 — อาการเฉพาะจากผู้ใช้
+
+**รอระบุ** — ผู้ใช้เลือกไว้ว่ามีอาการ bug เฉพาะที่เจอเอง แต่ยังไม่ได้บอกรายละเอียด
+เมื่อได้อาการแล้ว: เพิ่มเป็นหัวข้อ "เคส F" พร้อม test reproduce ก่อนแก้ตามลูป TDD
+
+## Carve-outs ที่ห้าม "แก้ให้ตรงกติกา" (จาก plan-reviewer — ทำลายได้ถ้ารวมเช่นเดียวกัน)
+
+1. แถวเดี่ยวเลือกจบ 4 เมนู (3451-3455, 3541-3549, 3650-3654, 3869-3873) +
+   `finishCustom` (3695-3698) **ปิดเมนูไม่ผ่าน `markMenuClosed` โดยเจตนา** —
+   tap ถัดไปต้องวางรายการได้ทันที (กลืน tap 300ms จะฆ่า flow วางตรายาง)
+2. คีย์ B ปิดเมนูไม่ mark — คีย์บอร์ดไม่มี click หลงเหลือ
+3. Escape สองชั้น (1973-1979 มี stopPropagation) — ครั้งแรกปิดเมนูอย่างเดียว
+4. ลำดับ guard ของ `handlePageClick` (2916-2988): isCollapsed → 300ms → ปิด
+   bookmark/pin → deselect → branch ตาม tool — ห้ามสลับ
+5. `menuOpenWRef` ตั้ง 2 ทาง (openToolMenu + positionBookmarkPopup) — resize
+   เฉพาะความกว้างครอบ popup bookmark ด้วย
+6. `selfScrollUntilRef` ต้องไม่ trigger การปิดเมนู (1529, 1586)
+7. `stampCustomMode` reset เฉพาะตอนเปิดเมนูใหม่ผ่านปุ่ม (3717)
+8. `scannedOnly` เป็น latch ของ `pageSpanCount` — ไม่ลบตอน virtualization unmount
+
+## ลำดับการทำเมื่ออนุมัติ
+
+1. ขั้น 1 (test เขียว) → 2. ขั้น 2 + findings #2/#5 → 3. findings #1 (คีย์ลัด
+ไทย — แจ้ง behavior change ก่อน) → #3 → #4 → #6 → 4. ขั้น 4 เมื่อได้อาการ
+ทุกขั้นจบด้วย: `tsc --noEmit` สะอาด + vitest ทั้งชุดผ่าน + sync
+`.claude/rules/pdf-viewer.md` ถ้าพฤติกรรมเปลี่ยน + code review

docs/PLAN.md

@@ -92,8 +92,12 @@ Percent (จาก DB)  ──×size÷100──▶  Pixel (render ลง SVG/div
 | title | text NOT NULL | |
 | description | text | nullable |
 | pdf_url | text NOT NULL | |
+| external_id | text | nullable UNIQUE — N8 dedupe key เอกสารจากลิงก์ e-Court (`"ecourt:<fileId>"` / `"url:<href>"`); NULL = ไฟล์ seed/อัปโหลด |
+| type_id | text | nullable — N9 รหัสกลุ่มเอกสารที่เกี่ยวเนื่องกันจากลิงก์ e-Court `?typeId=` (เขียนที่ `registerExternalFile` ของ N8 เท่านั้น); NULL = ไม่มีกลุ่ม |
 | created_at | timestamptz `defaultNow()` | |
 
+Index: `files_type_id_idx` (type_id) · UNIQUE (external_id — unique บน nullable ยอมหลาย NULL)
+
 ### Enum `annotation_type` = `'HIGHLIGHT' | 'DRAW' | 'COMMENT'`
 
 ### ตาราง `annotations`

docs/WORDADDIN-DEV.md

@@ -0,0 +1,75 @@
+# Word Add-in (wordaddin) — คู่มือ dev และการทดสอบ
+
+Taskpane ของ Word add-in "e-Court Documents Versioning" พอร์ตมาเป็น route ของ Next.js ที่ **`/docedit/wordaddin`** (ต้นฉบับ webpack + Fluent UI: `D:\word-addin-poc\addin`) — spec พฤติกรรม UI ทั้งหมดอยู่ที่ [`docs/addin-ui-flow.md`](./addin-ui-flow.md)
+
+**ทางเข้า:** เปิด `/docedit` เปล่า ๆ จะ redirect มาที่ taskpane ทันที (ไม่ผ่าน login — คำขอผู้ใช้ 2026-10-14) ยกเว้นลิงก์ e-Court `/docedit/?fileUrl=&fileId=&typeId=` ที่ยังส่งต่อให้ `/note` ตามสัญญา N8 · manifest ชี้ `/docedit/wordaddin` ตรง ๆ (ไม่ว่าผ่าน root เพื่อลด hop ใน webview)
+
+สถานะช่วงนี้: **auth และ API เป็น mock** (login ทันที + version store เก็บ metadata ค้างข้าม session ใน localStorage ของ taskpane เพื่อทดสอบวงปิดเอกสาร→เปิดใหม่ — สลับกลับของจริงด้วยการลบ `wordaddin-mock-versions` หรือเคลียร์ storage ของ origin) รอ backend/auth จริง — ดูหัว "การสลับกลับของจริง" ด้านล่าง
+
+## ไฟล์หลัก
+
+| ที่ | คือ |
+|---|---|
+| `app/wordaddin/page.tsx` + `components/wordaddin/WordAddinGate.tsx` | gate โหลด Office.js (self-host) → `Office.onReady` → mount `TaskpaneApp` |
+| `app/wordaddin/manifest.xml/route.ts` | serve manifest พร้อม **rewrite origin ตามโฮสต์ที่ขอ** (อ่าน `x-forwarded-proto`/`x-forwarded-host` ก่อนแล้ว fallback host ตรง ผ่าน `utils/request-origin.ts` ที่แชร์กับ origin ของ deep link N10 — โฮสต์ที่ไม่ใช่ localhost บังคับ https เพราะ Office รับ https เท่านั้น) |
+| `components/wordaddin/TaskpaneApp.tsx` | state machine `checking/signed-out/untracked/tracking` + ทุก handler |
+| `wordaddin/services/*` | ชั้น Office.js พอร์ตดิบจากต้นฉบับ + `authService`/`versioningService` เป็น mock |
+| `public/wordaddin/manifest.template.xml` | template ของ manifest (ค่า default dev `https://localhost:3000`) — serve ผ่าน route ด้านบนเท่านั้น ไม่ได้ใช้ตรง ๆ |
+| `public/wordaddin/office-js/` | Office.js runtime — สร้างโดย postinstall `scripts/fetch-office-js.mjs` ดาวน์โหลดฉบับล่าสุดจาก CDN ของ Microsoft (**gitignore** — รัน `npm install` ทุกครั้งหลัง clone เครื่องต้องออกอินเทอร์เน็ตตอนติดตั้ง ส่วนตัวระบบ deploy ใช้ intranet ล้วน) |
+| `wordaddin/config.ts` | env `NEXT_PUBLIC_ADDIN_*` (ตารางด้านล่าง) |
+
+## Env
+
+| ตัวแปร | default | ใช้เมื่อไหร่ |
+|---|---|---|
+| `NEXT_PUBLIC_ADDIN_API_BASE_URL` | `""` (ว่าง) | ปลด mock ต่อ backend จริง (ต้องเป็น HTTPS) |
+| `NEXT_PUBLIC_ADDIN_MOCK_USERNAME` | `"tester01"` | ชื่อผู้ใช้ของ mock — แสดง header + เป็น `createdByUserId` |
+
+## รัน dev ด้วย HTTPS (จำเป็นสำหรับ sideload ใน Word)
+
+manifest ต้องชี้ https — 2 ทางเลือก:
+
+1. **self-signed ของ Next (ง่ายสุด):** `npm run dev:https` → https://localhost:3000 — Word อาจเตือน certificate ครั้งแรก (เปิด URL ใน browser กดผ่านก่อน 1 ครั้ง)
+2. **ใบรับรอง trusted (แนะนำ ไม่มี warning):** รัน `npx office-addin-dev-certs install` ครั้งเดียว แล้ว copy `%USERPROFILE%\.office-addin-dev-certs\localhost.crt` + `localhost.key` มาที่ `certs/` (gitignore แล้ว) แล้วใช้ `npm run dev:https:cert`
+
+## Sideload ใน Word Desktop (Windows)
+
+เครื่อง dev ที่มี repo (แนะนำ — ไม่ต้องดาวน์โหลด/คัดลอกอะไรเลย):
+
+1. Word: **File > Options > Trust Center > Trust Center Settings > Trusted Add-in Catalogs** เพิ่มโฟลเดอร์ `public/wordaddin` ของ repo (เช่น `D:\dms\judes-note\public\wordaddin`) > restart Word
+2. **Insert > My Add-ins > SHARED FOLDER** > เปิด "e-Court Documents Versioning"
+3. ชื่อไฟล์ไม่สำคัญ — Word สแกน `*.xml` ทุกไฟล์ในโฟลเดอร์ โดย `manifest.template.xml` คือ dev manifest อยู่แล้ว (URL localhost:3000) และเนื้อไฟล์อัปเดตตาม branch ที่ checkout อยู่เสมอ — **ห้ามวาง xml manifest อื่นเพิ่มในโฟลเดอร์นี้** (GUID เดียวกันสองไฟล์ = Word สับสน)
+
+เครื่องที่ไม่มี repo (production/เครื่องผู้ใช้):
+
+1. ดาวน์โหลด manifest จาก environment นั้น: `https://<โฮสต์>/docedit/wordaddin/manifest.xml`
+2. เอาไฟล์ไว้โฟลเดอร์ใดโฟลเดอร์หนึ่ง เช่น `%USERPROFILE%\Documents\wordaddin-manifest\`
+3. ทำขั้น Trust Center ข้างบนด้วยโฟลเดอร์นั้น > restart Word > **Insert > My Add-ins > SHARED FOLDER** > เปิด "e-Court Documents Versioning"
+
+Deploy จริง (intranet): **ไม่ต้อง rewrite อะไรแล้ว** — manifest serve ผ่าน `app/wordaddin/manifest.xml/route.ts` ซึ่งเขียนทับ origin ให้ตรงโฮสต์ที่ขอไฟล์อัตโนมัติ ดาวน์โหลด `https://<โฮสต์>/docedit/wordaddin/manifest.xml` แล้วใช้ sideload ได้ทันทีทุก environment (dev/UAT/production) · proxy ฝั่งหน้าควรส่ง `X-Forwarded-Host`/`X-Forwarded-Proto` ตามมาตรฐาน — ถ้าไม่ส่ง route ก็ยังใช้ Host ของ request และบังคับ https ให้โฮสต์ที่ไม่ใช่ localhost อยู่ดี
+
+รุ่น Office ที่รองรับ: manifest กำหนด WordApi **1.3** เป็นค่าต่ำสุด (customXmlParts คือ API สูงสุดที่ใช้ประจำ) — Microsoft 365 / Office 2021+ ใช้ได้ครบทุกฟีเจอร์ · **Office 2019 โหลดได้ แต่ปุ่ม "…และปิดเอกสาร" ถูกซ่อนอัตโนมัติ** เพราะ `document.close()` ต้องการ WordApi 1.4/1.5 (Microsoft 365 เท่านั้น) — `canCloseDocument()` เช็ค `isSetSupported` ตอน runtime แล้วซ่อน พฤติกรรมเดียวกับ Word on the web · Office 2016 (WordApi 1.1) โหลดไม่ขึ้น (เดิมเคยตั้ง 1.5 ทำให้ Office 2019 โหลดไม่ขึ้นด้วย — แก้ 2026-10-16)
+
+## ทดสอบใน browser ธรรมดา (ไม่ต้องเปิด Word)
+
+- **`/docedit/wordaddin`** — เส้นทางจริง: Office.js โหลดได้แม่นนอก host (host เป็น null) → เห็น `signed-out` → กด Sign in (mock ผ่านทันที) → detect พังที่ `Word.run` → `bootError` + ปุ่มลองใหม่ (ตรวจ state machine/handler ได้ครบ)
+- **`/docedit/wordaddin?addindemo=untracked`** / **`?addindemo=tracking`** — dev-only: ข้าม Office.js + sign in mock ทันที + ตั้ง phase ตามค่า (tracking มี history ตัวอย่าง 3 รายการ) — ทุกปุ่มกดได้ แต่ flow ที่แตะ Word จริง (Start Versioning / Save & Version / บันทึก) จะจบที่ error ตาม expected
+- หมายเหตุ: ใน browser ปกติ (ไม่ใช่ demo) banner "บันทึกอัตโนมัติไม่สำเร็จ" จะโผล่หลัง ~30 วิ เพราะ auto-save (FR-17) พยายาม save ทุก 30 วิแต่ไม่มี Word — ถือว่าถูกต้อง
+
+## ทดสอบ e-Court pass-through (ข้าม login)
+
+ไฟล์ที่ e-Court stamp custom properties `token` และ/หรือ `owner` ไว้ จะเข้าใช้ได้เลยโดยไม่ต้องกด Sign in — `detect()` อ่านค่าทั้งสองตอนเปิด task pane แล้วเรียก `authService.signInFromDocument()` (username ได้จาก `owner` → ถอด `uid` ใน JWT payload → `NEXT_PUBLIC_ADDIN_MOCK_USERNAME`, token จากไฟล์เก็บใน memory ให้ `getAccessToken()` ใช้ต่อ)
+
+ทดสอบเองใน Word โดยไม่ต้องรอ e-Court: เปิดไฟล์ → **File → Info → Properties → Advanced Properties → แท็บ Custom** → เพิ่ม property ชื่อ `token` (ค่า JWT ตัวอย่าง `eyJ...` — payload มี `uid` ก็แสดงเป็นชื่อผู้ใช้ได้) และ/หรือ `owner` (เช่น `u1001`) → เปิด task pane ใหม่ → ต้องเข้าเฟส untracked/tracking ทันทีไม่ผ่านหน้า login
+
+## การสลับกลับของจริง (วันหน้า)
+
+- **Auth:** `wordaddin/services/authService.ts` เป็น mock คง surface เดิมครบ (`login/getAccessToken/refreshAccessToken/getUsername/signOut/startAutoRefresh/...`) — เขียน implementation จริงทับ (ต้นฉบับ Keycloak PKCE + Office Dialog API อยู่ที่ `D:\word-addin-poc\addin\src\services\authService.ts`; ถ้าใช้ ต้องเพิม DialogAPI กลับเข้า manifest + หน้า auth-start/auth-callback) · `signInFromDocument` (pass-through จาก token/owner ในไฟล์) เป็น mock-only — วันหน้า token ในไฟล์ควรเป็นแค่ตัวจับคู่เอกสาร ส่วนสิทธิ์ผู้ใช้พิสูจน์ตอน runtime
+- **API:** `wordaddin/services/versioningService.ts` เก็บชื่อ/ลายเซ็นเหมือนต้นฉบับเป๊ะ — ก้อบ body เดิม (multipart POST ผ่าน `apiClient` ซึ่งพอร์ตไว้แล้ว) กลับมา + ตั้ง `NEXT_PUBLIC_ADDIN_API_BASE_URL`
+- ชุด unit test ของ services (jest → vitest) ยังไม่พอร์ต — ต้นฉบับอยู่ที่ `D:\word-addin-poc\addin\src\services\*.test.ts` + mock ที่ `src/test/`
+
+## Docker
+
+ไม่ต้องทำอะไรเพิ่ม — `docker/web.Dockerfile` รัน `scripts/fetch-office-js.mjs` ใน build อยู่แล้ว (build stage ต้องออกอินเทอร์เน็ตถึง `appsforoffice.microsoft.com` ได้) และ runner stage คัดลอก `public/` เข้า image เอง (`COPY /app/public ./public` — **Next 14.2 standalone ไม่รวม `public/` ให้อัตโนมัติ** ต้อง copy เองตามเอกสาร deploy ของ Next; เคยเข้าใจผิดว่า Next รวมให้ เพราะบางไฟล์หลุดเข้า image ผ่าน output file tracing ของ Next ที่ตาม `fs.readFile` ใน server code — แต่ `public/wordaddin/office-js` ไม่มีใครอ่านผ่าน fs จึงไม่ถูกดึงมา แล้ว taskpane พังใน production 2026-10-16)
+
+> ทำไมต้องเป็นฉบับ CDN ล่าสุด: แพ็กเกจ npm `@microsoft/office-js` เลิกอัปเดตที่ 1.1.110 (~2018) ก่อน WordApi 1.4/1.5 — runtime ตัวนั้นไม่มี `Document.close` (ปุ่ม "บันทึกเวอร์ชันและปิดเอกสาร" พัง: `context.document.close is not a function`) และไม่มี enum `Word.CloseBehavior`/`SaveBehavior` ทับ ๆ กับ `@types/office-js` ฉบับใหม่ที่ใช้ compile

docs/addin-ui-flow.md

@@ -0,0 +1,317 @@
+# Add-in UI Flow — คู่มือสร้าง UI ในโปรเจกต์ใหม่ (รอ API จริง)
+
+เอกสารนี้สรุป **เฉพาะฝั่ง UI/flow ของ Word add-in** (`/addin`) ตัดส่วนที่เป็น Office.js mechanics ออกให้เหลือแต่สิ่งที่หน้าตา/พฤติกรรม UI ต้องมี เพื่อเอาไปสร้าง UI ในโปรเจกต์ใหม่แล้ว mock API รอ backend จริง
+
+ต้นฉบับอ้างอิง (repo เดิมที่ `D:\word-addin-poc\addin`): `src/taskpane/components/App.tsx`, `ConfirmVersionDialog.tsx`, `VersionHistoryPanel.tsx`, `src/services/versionFlow.ts`, `versioningService.ts`, `metadataService.ts`, `autoSaveService.ts`, `src/models/versionRecord.ts`
+
+---
+
+## 1. State machine หลัก
+
+Task pane ทั้งหมดเป็น state machine เดียว **ไม่มี routing** — component เดียว (`App`) สลับหน้าตาตาม `phase`:
+
+ตั้งแต่ 2026-10-19 taskpane มี **2 แท็บ** (toggle กลุ่มปุ่ม `aria-pressed` ใต้ header — แสดงเฉพาะ phase `untracked`/`tracking`): **Versioning** คือทุกอย่างในเอกสารนี้ตามเดิม ส่วน **เครื่องมือ Template** (ดูหัวข้อ 10) คือเครื่องมือจัดการ Content Controls ฝั่ง Office.js ล้วน ไม่ยิง backend จึงใช้ได้ทั้งสอง phase ปุ่ม toggle **ทั้งสองปิดระหว่าง flow ที่เขียนเอกสาร** — `saving || starting` (versioning), `saveBusy` (บันทึก local/ปิดเอกสาร), `templateBusy` (operation ของแท็บ template รายงานผ่าน `onBusyChange` — กันสลับกลาง operation แล้ว flow versioning มา stamp/capture ซ้อน หรือกลับกัน; code review 2026-10-20) · สถานะแท็บรีเซ็ตกลับ `versioning` ตอน sign out / AuthRequiredError กัน surprise หลัง login ใหม่ · banner auto-save error (FR-17) ยกไว้เหนือ toggle ให้เห็นทั้งสองแท็บ
+
+```
+checking ──(ไม่มี token)──────────────→ signed-out
+   │
+   ├─(มี token + ไม่ใช่ tracked doc)──→ untracked
+   └─(มี token + tracked doc)────────→ tracking
+```
+
+การเปลี่ยน phase อื่นๆ:
+
+- `signed-out` → (sign in สำเร็จ) → `checking` → ตัดสินใหม่ตามไฟล์ปัจจุบัน
+- `untracked` → (Start Versioning สำเร็จ) → `tracking`
+- ทุก phase → (401 ที่ refresh token ไม่ช่วย / กดออกจากระบบ) → `signed-out`
+- ปุ่ม "ลองใหม่" มีจริงแค่ 2 จุด: `bootError` ใน `checking` และ history error ใน `VersionHistoryPanel` — `untracked`/`tracking` **ไม่มี**ปุ่มลองใหม่แยกต่างหาก (เริ่ม flow ใหม่ด้วยการกดปุ่ม flow ซ้ำ) · กลไกเดียวที่วิ่งกลับมา `checking` คือ sign-in สำเร็จ
+
+State ที่ UI ถือนอกเหนือจาก phase:
+
+| State | ความหมาย |
+|---|---|
+| `activeTab` | แท็บที่เปิดอยู่ `versioning` (default) / `template` — ดูหัวข้อ 10 |
+| `username` | ชื่อผู้ใช้จาก token (แสดงใน header) |
+| `documentId` | tracking id ของเอกสาร (มีเฉพาะ `tracking`) |
+| `documentTemplateId` | template ต้นทางของ**ไฟล์ร่าง** (มีเฉพาะ `untracked` ที่เป็นไฟล์ร่าง — FR-16) |
+| `versions` + `historyLoading` + `historyError` | version history ของ `documentId` |
+| `signingIn`, `loginError` | สถานะหน้า sign-in |
+| `starting`, `saving`, `progressMessage` | busy + ข้อความ progress ของ flow Start Versioning / Save & Version |
+| `confirmOpen`, `startConfirmOpen` | เปิด dialog ยืนยันของ flow ไหน |
+| `flowError`, `flowWarning`, `flowSuccess` | MessageBar 3 แบบของ flow หลัก (แสดงเฉพาะ `tracking`) |
+| `downloadingVersionId`, `downloadingPdfVersionId` | versionId ที่กำลังโหลด docx/pdf (spinner ที่ปุ่ม) |
+| `closeSupported` | platform นี้ปิดเอกสารจาก add-in ได้ไหม — **คุมการแสดงปุ่มปิดเอกสารทุกจุด** (FR-18) |
+| `saveBusy`, `saveStatus`, `saveError` | สถานะชุดปุ่ม [บันทึก] / [บันทึกและปิดเอกสาร] (แยกจาก flow versioning) |
+| `autoSaveError` | banner เตือนเมื่อ auto-save ล้ม (FR-17) |
+| `hasUncommitted` | เคยเห็นการแก้ไขหลัง version ล่าสุด → banner เตือน (FR-3) |
+| `bootError` | error ของการ detect ตอนเปิด task pane (แสดงเฉพาะ `checking` — MessageBar error + ปุ่ม "ลองใหม่" รัน detect ใหม่) |
+
+---
+
+## 2. UI แต่ละ phase
+
+### Header (ทุก phase)
+
+- ชื่อแอป: **e-Court Documents Versioning** (semibold)
+- ฝั่งขวา (เมื่อ login แล้วและไม่ใช่ `checking`/`signed-out`): ปุ่มเล็ก icon + `ออกจากระบบ` — username อยู่ใน `title`/`aria-label` (จอแคบ ไม่กินพื้นที่แถบหัว) — กดแล้ว sign out + กลับ `signed-out`
+
+### `checking`
+
+- `Spinner "กำลังตรวจสอบเอกสาร…"` ตรงกลาง
+- ถ้า detect พัง (`bootError`): MessageBar **error** + ปุ่ม `ลองใหม่` ข้างใน bar (รัน detect ใหม่)
+
+### `signed-out`
+
+- ข้อความ: "เข้าสู่ระบบเพื่อเริ่มใช้งาน versioning"
+- คำอธิบายจางๆ: "ใช้บัญชีของ realm `word-versioning` — หน้าต่าง login จะเปิดแยกต่างหาก"
+- ปุ่ม primary `เข้าสู่ระบบ` → ระหว่างรันเปลี่ยนเป็น `กำลังเข้าสู่ระบบ…` + disable
+- ถ้า login พัง: MessageBar **warning** (`loginError`) — เช่น "เซสชันหมดอายุ — กรุณา login ใหม่" ตอนโดน 401 กลาง flow
+
+> ใน project จริง login เปิดหน้าต่างแยกผ่าน Office Dialog API (ห้าม redirect iframe ไป Keycloak ตรงๆ) — ถ้าโปรเจกต์ใหม่ยังไม่มี auth ให้ mock `login()` คืน `{ ok: true }` ไปก่อน
+
+### `untracked`
+
+เรียงจากบนลงล่าง:
+
+1. ข้อความ: "เอกสารนี้ยังไม่ได้ติดตาม version"
+2. คำอธิบายจางๆ: "กดปุ่มด้านล่างเพื่อเริ่ม track — ระบบจะ stamp metadata ลงไฟล์และอัปโหลดเป็น version 1 (ไฟล์ที่สร้างจากเว็บ portal จะถูกตรวจพบและข้ามขั้นตอนนี้อัตโนมัติ)"
+3. **เฉพาะไฟล์ร่าง** (`documentTemplateId` มีค่า): ข้อความจางๆ เพิ่ม — "ไฟล์นี้เป็นไฟล์ร่างจาก template — กดเริ่มติดตามแล้วระบบจะผูกเอกสารกับ template ต้นทาง และ sync ค่า fields ให้อัตโนมัติ"
+4. ปุ่ม primary `Start Versioning This Document` → ระหว่างรัน: `กำลังเริ่มติดตาม…` + disable
+5. ชุดปุ่มบันทึก `SaveControls` (ดูหัวข้อ 3) — `disabled` เมื่อ `starting`
+6. progress: spinner เล็ก + `progressMessage` (เฉพาะตอน `starting`)
+7. `flowError` → MessageBar **error**
+
+### `tracking`
+
+เรียงจากบนลงล่าง:
+
+1. **เฉพาะ `hasUncommitted`**: MessageBar **warning** — "มีการแก้ไขที่ยังไม่ถูกบันทึกเป็นเวอร์ชันใหม่ — กด Save & Version เพื่อบันทึกเป็น version ใหม่" (FR-3)
+2. `flowWarning` → MessageBar **warning** (เช่น PDF ไม่สำเร็จ / version สำเร็จแต่ปิดเอกสารไม่สำเร็จ)
+3. `flowSuccess` → MessageBar **success** (เช่น "สร้าง version 3 เรียบร้อย")
+4. `flowError` → MessageBar **error**
+5. ปุ่ม primary **ขนาดใหญ่** `Save & Version` — disable เมื่อ `saving`
+6. progress: spinner เล็ก + `progressMessage` (เฉพาะตอน `saving`)
+7. ชุดปุ่มบันทึก `SaveControls` — `disabled` เมื่อ `saving`
+8. บรรทัดจางๆ: `tracking id: {documentId 8 ตัวแรก}…`
+9. `VersionHistoryPanel` (ดูหัวข้อ 5)
+
+---
+
+## 3. ชุดปุ่มบันทึก `SaveControls` (FR-17/FR-18)
+
+Component ใช้ร่วมทั้ง `untracked` และ `tracking` — อยู่นอก flow versioning:
+
+- ปุ่ม `บันทึก` — local save เดี่ยว ไม่แตะ metadata ไม่สร้าง version
+- ปุ่ม `บันทึกและปิดเอกสาร` — **เรนเดอร์เฉพาะ `closeSupported === true`** (Word on the web เรียก `close()` ไม่ได้ → ซ่อนทุกแบบ)
+- สถานะตามลำดับ:
+  - `saveBusy && status === "saving"` → `Spinner "กำลังบันทึก…"`
+  - `!saveBusy && status === "saved"` → text จางๆ `บันทึกแล้ว` — ค้างไว้จนกดบันทึกรอบใหม่ (ไม่ reset เมื่อแก้ไขเอกสาร ไม่มี timeout)
+  - `saveError` → MessageBar **error**
+  - `autoSaveError` → MessageBar **warning** (default: "บันทึกอัตโนมัติไม่สำเร็จ — ลองกด \"บันทึก\" ด้วยตนเอง") — **ย้ายไป render เหนือ toggle แท็บใน TaskpaneApp (2026-10-20)** ให้เห็นทั้งแท็บ Versioning และ Template ไม่มาใน SaveControls แล้ว
+- ทั้งสองปุ่ม `disabled` เมื่อ `disabled` (flow versioning กำลังรัน) **หรือ** `saveBusy`
+
+พฤติกรรมปุ่ม:
+
+| ปุ่ม | Flow |
+|---|---|
+| `บันทึก` | save → สำเร็จตั้ง `saved`, พังโชว์ `saveError` |
+| `บันทึกและปิดเอกสาร` | save → **สำเร็จเท่านั้นจึงปิดเอกสาร** · save พัง = ไม่ปิด + `saveError` (AC-21) · ปิดสำเร็จแล้ว task pane จะปิดตามเอกสารเอง — ไม่มี toast ท้าย flow |
+
+---
+
+## 4. Dialog ยืนยัน `ConfirmVersionDialog` (FR-2 + FR-13 + FR-18)
+
+Dialog เดียวใช้ 2 flow (ปรับข้อความด้วย props):
+
+| Prop | Save & Version | Start Versioning |
+|---|---|---|
+| title | "สร้าง version ใหม่?" | "เริ่มติดตามเอกสารนี้?" |
+| description | "ระบบจะบันทึกไฟล์ปัจจุบันและอัปโหลดเป็น version ถัดไปของเอกสารนี้" | ปกติ: "ระบบจะ stamp metadata ลงไฟล์และบันทึกไฟล์ปัจจุบันเป็น version 1 ของเอกสารนี้" · ไฟล์ร่าง: "ระบบจะ stamp metadata ลงไฟล์ บันทึกไฟล์ปัจจุบันเป็น version 1 และผูกเอกสารกับ template ต้นทาง (ไฟล์ร่าง)" |
+| ปุ่มยืนยันหลัก | "สร้าง version" | "เริ่มติดตาม (version 1)" |
+
+ภายใน dialog:
+
+- ปุ่ม `ยกเลิก` (secondary) มีเสมอ
+- เมื่อมีปุ่มที่สอง ("บันทึกเวอร์ชันและปิดเอกสาร") → ปุ่มนั้นเป็น primary ตัวเดียว และปุ่มยืนยันหลัก ("สร้าง version"/"เริ่มติดตาม") กลายเป็น secondary
+- ช่อง **"คำอธิบาย version (ไม่บังคับ)"** — textarea, `maxLength 2048`, 3 แถว, resize vertical, placeholder "เช่น แก้ไขข้อ 3 สัญญาจ้าง" — ค่าว่างได้ ส่งเป็น optional
+- ปุ่มที่สอง **"บันทึกเวอร์ชันและปิดเอกสาร"** (primary) — เรนเดอร์เฉพาะเมื่อ `closeSupported` **และเฉพาะ flow Save & Version** (Start Versioning ไม่มี)
+- ตอน `busy`: ทุกปุ่ม disable + spinner `กำลังดำเนินการ…` + ปิด dialog ไม่ได้ (ปุ่มยกเลิก/คลิกนอก/ESC ไม่ทำงาน) — สถานะนี้เป็น defense ชั่วขณะก่อน re-render เท่านั้น
+- **กดปุ่มยืนยัน (ตัวใดก็ตาม) → dialog ปิดทันที** แล้ว progress/ผลลัพธ์ (spinner + progressMessage + flow messages) แสดงที่ pane — ไม่ปล่อย dialog ค้างบังผลลัพธ์ (กันกดยืนยันซ้ำสร้าง version ซ้ำ)
+- focus: ตอนเปิดโฟกัสเข้าตัว dialog (container) + Tab ถูกกักไว้ใน dialog + ตอนปิดคืน focus ให้ปุ่ม trigger เดิม
+- เคลียร์ช่อง message ทุกครั้งที่ dialog ปิด (component mount ค้างไว้ตลอด — ต้อง reset ตอน `open` เปลี่ยนเป็น false ไม่ใช่ตอน unmount)
+
+---
+
+## 5. `VersionHistoryPanel` (FR-4)
+
+- Header: icon history + "Version history" (semibold)
+- สถานะ: `loading` → `Spinner "กำลังโหลด…"` · `error` → MessageBar **error** + ปุ่ม `ลองใหม่` · ว่าง (ไม่ loading ไม่ error และไม่มี version) → text จางๆ "ยังไม่มี version ในระบบ"
+- รายการ version เรียง **ใหม่ → เก่า** แต่ละแถว (hover มีพื้นหลัง):
+  - `Badge v{versionNumber}` (สี brand)
+  - timestamp รูปแบบ medium date + short time ตาม locale
+  - `โดย {createdByUserId}`
+  - commit message (ถ้ามี) — text 2 สี, `white-space: pre-wrap`, `overflow-wrap: anywhere`
+- ปุ่มขวาแต่ละแถว (เรียงเป็นคอลัมน์):
+  - `ดาวน์โหลด` (icon download) → ตอนโหลด **label คงเดิม** สลับ icon เป็น spinner + `aria-busy` (label ยาว "กำลังดาวน์โหลด…" ทำแถว wrap กระโดด)
+  - `PDF` (icon pdf) — **แสดงเฉพาะ `hasPdf === true`** → ตอนโหลด label คงเดิม + spinner + `aria-busy`
+  - ระหว่างมี version ใดกำลังโหลด → ปุ่มโหลดของ**ทุกแถว** (ทั้ง `ดาวน์โหลด` และ `PDF`) disable กันกดซ้อน
+
+---
+
+## 6. Flow หลักพร้อมข้อความ progress
+
+ข้อความ flow (`flowSuccess`/`flowWarning`/`flowError`) ถูกเคลียร์เป็น null ทุกครั้งที่**เริ่ม** flow ใหม่ (Start Versioning / Save & Version / ดาวน์โหลด — ไม่ใช่ตอนจบ ไม่มี timeout)
+
+### Detect (FR-1) — ตอนเปิด task pane / หลัง login / กดลองใหม่
+
+1. ตรวจ token — ไม่มี → `signed-out`
+2. อ่าน custom properties ครั้งเดียวทั้งชุด: `SavedByAddIn`, `DocumentTrackingId`, `LastVersionId`, `LastVersionTimestamp`, `TemplateId`
+3. `tracked = (SavedByAddIn === GUID ของ add-in)`:
+   - tracked **และมี** `DocumentTrackingId` → `tracking` + โหลด history
+   - ไม่ track หรือ track แต่ id หาย → `untracked` (เก็บ `TemplateId` ไว้ใช้ตอน Start Versioning — ไฟล์ร่างอยู่กลุ่มนี้)
+
+### Start Versioning (FR-1) — จาก `untracked`
+
+dialog ยืนยัน → ข้อความ progress ตามลำดับ:
+
+1. `กำลังบันทึก metadata ของเอกสาร…`
+2. `กำลังอัปเดต version history ในไฟล์…`
+3. `กำลังบันทึกไฟล์…`
+4. `กำลังอ่านค่า fields จากเอกสาร…`
+5. `กำลังอัปโหลด version 1…`
+6. `กำลังสร้างสำเนา PDF…` (best-effort — ล้มได้ไม่พัง flow)
+7. `กำลังอัปโหลด version…`
+
+> ขั้น 5 กับ 7 ไม่ใช่การอัปโหลดสองครั้ง — ขั้น 5 เป็น marker เข้าสู่ช่วง upload ระหว่างนั้นขั้น 6 ค่อย capture PDF (best-effort) แล้วขั้น 7 คือ POST จริง**ครั้งเดียว**พร้อมแนบ `pdf` ใน multipart เดียวกัน (ตาม `uploadCurrentFile` ของ versionFlow.ts)
+
+สำเร็จ → `tracking` + `flowSuccess` = "เริ่มติดตามเอกสารนี้แล้ว — สร้างเป็น version 1" + refresh history · ถ้า `hasPdf === false` → `flowWarning` = "บันทึกแล้ว แต่สร้าง PDF ไม่สำเร็จ — version นี้ไม่มีสำเนา PDF (กด Save & Version อีกครั้งเพื่อสร้าง version ใหม่ที่มี PDF)" · พัง → `flowError` = "เริ่มติดตามเอกสารไม่สำเร็จ"
+
+### Save & Version (FR-2) — จาก `tracking`
+
+dialog ยืนยัน → progress ทั้ง 7 ขั้นลำดับเดียวกัน ต่างจาก Start Versioning แค่ **2 ข้อความ**: ขั้น 1 `กำลังบันทึก metadata ของ version ใหม่…` (เดิม "…metadata ของเอกสาร…") และขั้น 5 `กำลังอัปโหลด version ใหม่…` (เดิม "…version 1…") — ขั้น 2/3/4/6/7 ใช้ข้อความเดียวกันกับ Start Versioning เป๊ะ
+
+หลัง upload สำเร็จ: ถ้าเลข version จริงจาก backend ต่างจากที่ client เดา (มี client อื่นแทรก) → แก้ XML part ในไฟล์ให้ตรง (best-effort ล้มได้เงียบๆ ไม่พัง flow)
+
+สำเร็จ → `flowSuccess` = "สร้าง version {N} เรียบร้อย" + refresh history · `hasPdf === false` → warning เดียวกับด้านบน · กดปุ่มที่สอง (บันทึกเวอร์ชันและปิดเอกสาร) → version สำเร็จแล้วจึงปิดเอกสาร — ปิดสำเร็จ UI จบเลย (task pane ปิดตาม) · **ปิดไม่สำเร็จ** → แสดงเป็น **warning ไม่ใช่ error** ("บันทึก version N เรียบร้อย แต่ปิดเอกสารไม่สำเร็จ: … — ปิดเอกสารเองได้เลย") + refresh history ตาม เพราะ version ปลอดภัยบน backend แล้ว · พังก่อน upload → `flowError` = "สร้าง version ไม่สำเร็จ"
+
+### Download version (FR-4/FR-7)
+
+ปุ่มต่อแถวใน history → ขอ download-link → เปิดใน**เบราว์เซอร์ของเครื่อง** (ห้าม blob download ใน webview ของ Word — ถูกทิ้งเงียบๆ) → `flowSuccess` = "กำลังดาวน์โหลด v{N} ผ่านเบราว์เซอร์ของคุณ — ดูไฟล์ที่โฟลเดอร์ Downloads" หรือ (pdf) "กำลังเปิด PDF ของ v{N} ในเบราว์เซอร์ของคุณ" · พัง → `flowError` = "ดาวน์โหลด version ไม่สำเร็จ"
+
+### Auto-save (FR-17)
+
+- เริ่มตั้งแต่ mount **ไม่รอ sign-in**
+- periodic ทุก 30 วิ: ไฟล์ dirty → save + ตั้ง flag `hasUncommitted`; สะอาด → ข้าม
+- save ล้ม → `autoSaveError` (warning bar); สำเร็จครั้งถัดไป → เคลียร์ bar
+- ทุก flow versioning ต้อง **suspend** auto-save ตอนเริ่มและ **resume** ตอนจบ (กัน save แทรกกลาง stamp/capture)
+- สร้าง version สำเร็จ → เคลียร์ `hasUncommitted`
+
+---
+
+## 7. API contract ที่ UI เรียก (จุด mock รอ API จริง)
+
+Base URL มาจาก config (dev: `https://localhost:7232`) · ทุก request แนบ `Authorization: Bearer {token}` · backend serialize camelCase
+
+### `POST /api/documents/{documentId}/versions` — อัปโหลด version
+
+multipart/form-data:
+
+| field | type | หมายเหตุ |
+|---|---|---|
+| `file` | Blob (.docx) | ชื่อไฟล์ดึงจาก URL ของ document ถ้าได้ (desktop มักเป็น path จริง — เติม `.docx` ถ้ายังไม่มี) · ดึงไม่ได้ = ไม่ส่งชื่อ ให้ backend ตั้งเอง |
+| `clientVersionId` | string (GUID) | client generate เองก่อน upload |
+| `pdf` | Blob | optional — แนบเมื่อ capture PDF สำเร็จ |
+| `fields` | string (JSON) | optional — map `{ [sdtTag]: text }` จาก content controls |
+| `message` | string | optional — commit message (trim แล้วว่าง = ไม่ส่ง, ≤2048) |
+| `templateId` | string (GUID) | optional — เฉพาะ Start Versioning ของไฟล์ร่าง (FR-16) |
+
+response: `{ hasPdf: boolean, versionId: string, versionNumber: number }`
+
+### `GET /api/documents/{documentId}/versions` — history
+
+response: `VersionRecord[]` เรียงใหม่ → เก่า:
+
+```ts
+interface VersionRecord {
+  versionId: string;
+  versionNumber: number;
+  createdAt: string;          // ISO-8601
+  createdByUserId: string;
+  contentHash: string;        // SHA256 hex
+  message: string | null;     // commit message (FR-13)
+  hasPdf?: boolean;
+  fields: FieldsSnapshot | null;
+}
+// fields เก็บ 2 รูปแบบ: เอกสารผูก template → { [key]: { value, missing } }
+//                        ไม่ผูก template → { [tag]: text } ดิบๆ — UI ต้องทนทั้งคู่
+// (UI ปัจจุบันไม่ได้แสดง fields — type + helper readSnapshotField เตรียมไว้ใช้ภายหลัง)
+```
+
+### `GET /api/documents/{documentId}/versions/{versionId}/download-link[?format=pdf|docx]` — ขอ URL อายุสั้น
+
+response: `{ url: string, expiresAt: string }` — UI เปิด `url` ในเบราว์เซอร์เครื่องผู้ใช้เท่านั้น
+
+### Auth — OIDC PKCE ผ่าน Office Dialog API
+
+`displayDialogAsync` เปิดหน้า login แยก → `messageParent` ส่งผลกลับ task pane · token เก็บ **ใน memory เท่านั้น** (ห้าม localStorage) · refresh token auto-refresh เงียบๆ จน 401 → สถานะ `AuthRequiredError` · mock ช่วงรอ: `login()` คืน `{ ok: true }`, `getAccessToken()` คืน token ปลอม, `getUsername()` คืนชื่อ test
+
+> **หมายเหตุสถานะปัจจุบัน (2026-10-14):** UI นี้ถูก implement แล้วใน repo นี้ที่ route `/docedit/wordaddin` (ดู `components/wordaddin/` + `wordaddin/`) — ทั้ง auth (แทนด้วย mock `wordaddin/services/authService.ts`) และ API ทั้งสามข้างบน (แทนด้วย in-memory mock `wordaddin/services/versioningService.ts`) · วิธีสลับกลับของจริง: `docs/WORDADDIN-DEV.md`
+
+---
+
+## 8. กติกา error ที่ UI ต้องรองรับ
+
+1. **`AuthRequiredError` (401 ที่ refresh ไม่ช่วย)** — ทุก flow ต้อง catch แล้ว: กลับ `signed-out` + เคลียร์ `documentId`/`documentTemplateId`/`versions` + ตั้ง `loginError` = "เซสชันหมดอายุ — กรุณา login ใหม่" — **ไม่ throw ต่อ ไม่โชว์ error ทับ phase**
+2. error อื่น → MessageBar ณ จุดที่เกิด (login/history/flow/download แยกกัน) — ห้ามปล่อย unhandled rejection
+3. แยก error ของ "ตัว version" ออกจาก "ปิดเอกสารไม่สำเร็จ" — อันหลังเป็น warning เพราะข้อมูลปลอดภัยแล้ว
+4. PDF เป็น best-effort เสมอ — ล้มแค่เตือน ไม่ fail flow
+
+---
+
+## 9. ข้อควรระวังที่กระทบหน้าตา UI
+
+1. `closeSupported` เป็น flag เดียวที่คุมปุ่ม "บันทึกและปิดเอกสาร" (SaveControls) **และ** ปุ่มที่สองใน ConfirmVersionDialog — Word on the web = false
+2. disable กันกดซ้อน: ปุ่ม flow หนึ่งรัน → ปุ่ม flow อื่น + SaveControls disable ด้วย (แต่ `saveBusy` กับ `saving` แยกกัน — จะไม่ปิดกันเองระหว่าง local save)
+3. ของเดิมใช้ Fluent UI v9 (`@fluentui/react-components` + `@fluentui/react-icons`) — mapping ไป library อื่น: Button / Dialog / MessageBar / Spinner / Badge / Textarea / Text
+4. UI ทั้งหมดภาษาไทย — ข้อความสำเนาได้จากไฟล์ต้นฉบับที่อ้างด้านบน
+5. Task pane แคบ (side panel) — layout เป็นคอลัมน์เดียว ปุ่ม/actions ต้องรองรับความกว้างจำกัด
+6. id ของ Content Control **ไม่เสถียรข้าม session/coauthor** (docstring ของ Office.js เอง) — เครื่องมือ Template ใช้ id เฉพาะภายในอายุผลสแกนรอบเดียว ห้ามเก็บไปใช้ภายหลัง
+7. **การมองเห็นช่องตามรุ่นของ Word**: collection `contentControls` ธรรมดาเห็น**เฉพาะ rich text CC** (docstring ของ `Body.contentControls`) — เครื่องมือ Template จึง feature-detect `WordApi 1.5` (`isSetSupported`) แล้วใช้ `Document.getContentControls()` ที่เห็นทุกชนิด (รวม plain text ซึ่งเป็นส่วนใหญ่ของ template ศาล — เคสจริง: T3 มี plain 26 + rich 1 สแกนเห็นเฉพาะ `detail1`) บน Word ต่ำกว่า 1.5 (เช่น Office 2019 = 1.3 ตาม manifest) มองเห็น/เขียนได้เฉพาะ rich text พร้อม warning แจ้งผู้ใช้ · **ห้ามยก MinVersion ของ manifest** เพื่อปลดข้อจำกัดนี้ (Office 2019 จะโหลด add-in ไม่ขึ้น — บทเรียน 2026-10-16)
+
+---
+
+## 10. แท็บ "เครื่องมือ Template" (2026-10-19)
+
+เครื่องมือช่วยทำ template สำหรับคนออกแบบเอกสาร — `TemplateToolsPanel` (state ภายในทั้งหมด มีแค่ prop `onBusyChange` รายงาน busy ให้ TaskpaneApp ปิด toggle แท็บ) + service `wordaddin/services/templateService.ts` — **Office.js ล้วน ไม่ยิง backend** (ส่วนใหญ่ WordApi 1.1 · `getByIdOrNullObject` 1.3 · `Document.getContentControls()` 1.5 ผ่าน feature-detect — ดู §9 ข้อ 7) ใช้ได้ทั้ง phase `untracked`/`tracking` · ไม่ auto-scan ตอนเปิดแท็บ (กดปุ่มเท่านั้น) · สลับแท็บแล้ว panel unmount = **ทิ้ง state ทิ้งโดยตั้งใจ** (snapshot เก่าเก็บไว้ก็ stale เสียเอง) · ปุ่มทั้ง panel disable ด้วย `busy` กันกดซ้อน
+
+### §1 ตรวจสอบ Content Controls
+
+- ปุ่ม `สแกนช่องในเอกสาร` (icon ScanSearch → spinner + `aria-busy` ตอนรัน) → list timeline แบบ VersionHistoryPanel: ลำดับ · tag (`break-all` + `title` แสดง tag/title/type ดิบ · ช่องไม่มี tag แสดง "(ไม่มี tag)" และจุดโหนดเป็นวงกลมขอบเหลือง) · badge ชนิด "ในบรรทัด"/"บล็อก" (heuristics: enum type ลงท้าย "Inline") · ค่าย่อ truncate 1 บรรทัด + `title` เต็ม · ปุ่ม `ดูช่อง` (icon Crosshair) → `cc.select()` ให้ Word เลื่อนไปเลือกช่อง
+- สรุปหัวกลุ่ม: "N ช่อง"
+- warning ใต้ปุ่มเมื่อพบปัญหา: "มี N ช่องที่ยังไม่ได้ตั้ง tag" / "tag ซ้ำ: a, b — ตอน render ระบบอ่านเฉพาะช่องแรกของ tag"
+- empty 2 แบบ: ยังไม่สแกน ("กดสแกนเพื่อดูรายการช่องในเอกสาร") กับสแกนแล้วว่าง ("ไม่พบ content control ในเอกสาร")
+
+### §2 กรอกค่าทดสอบ
+
+- แสดงเฉพาะมีช่องที่ตั้ง tag ≥1 ช่อง (จากผลสแกน): ฟอร์ม label+input ต่อ tag (id `wordaddin-template-value-<index>`) ค่าเริ่ม = ค่าปัจจุบันของช่องแรกของ tag นั้น + ปุ่ม primary `เขียนค่าลงเอกสาร` (icon PenLine → "กำลังเขียนค่า…" ตอนรัน)
+- **ช่องที่เว้นว่าง = ไม่ถูกแตะ** (กันเผลอล้างค่าจริง) · เขียนทุก CC ที่ tag ตรง (tag ซ้ำหลายช่อง = เขียนทุกช่องแบบ mail merge) · อ่าน id+tag สดรอบเดียวแล้วเขียน**แยก Word.run ราย tag** — tag ที่ Word ปฏิเสธ fail เฉพาะตัว เหลืออื่นยังเขียนได้ (ผลลัพธ์: `appliedCount` = จำนวนช่องที่เขียนจริง + `missingTags` ไม่พบช่อง + `failures` พร้อม code/errorLocation จาก OfficeExtension.Error) · UI รวมเป็น warning พร้อมชี้นำ "ถ้าเอกสารถูกล็อค (Review → Restrict Editing) ให้ปลดก่อน" — เคสจริงที่เจอ: error `0x800A16C6` บนเอกสารที่ `make-protected.mjs` ล็อคไว้ (readOnly + enforcement)
+- ผลลัพธ์: success "เขียนค่าทดสอบลงแล้ว N ช่อง" (N = จำนวนช่องที่เขียนจริง — tag ซ้ำหลายช่องนับทุกช่อง) + warning missingTags ถ้ามี → **สแกนใหม่โดยคงค่าฟอร์ม** (เฉพาะ tag ที่ยังอยู่ในเอกสาร — tag ที่ถูกลบไปตัดทิ้ง) ให้แก้ต่อ · ปุ่ม disabled เมื่อยังไม่มีช่องที่กรอกค่าเลย · หลังเขียนสำเร็จ `notifyDocumentChanged()` ตั้ง debounce auto-save 3 วิ ส่วน banner FR-3 ตั้งเมื่อ periodic tick ถัดไปของ autoSaveService เห็น document dirty (พฤติกรรมเดิมของ service — ไม่ใช่ทันที)
+
+### §3 แทรกย่อหน้า / ตัวแบ่ง (2026-10-19)
+
+- 3 ปุ่มแนวตั้ง (icon บน label ล่าง, grid 3 คอลัมน์, `title` อธิบายเต็ม): **ย่อหน้า** (CornerDownLeft — `insertParagraph("", "After")` เหมือนกด Enter) · **แบ่งบรรทัด** (WrapText — `insertBreak("Line", "After")` เหมือน Shift+Enter จัดที่อยู่/รายการในย่อหน้าเดิม) · **แบ่งหน้า** (FilePlus — เหมือน Ctrl+Enter เอกสารหลายหน้า: `insertBreak("Page", "After")` ก่อน ถ้า host ปฏิเสธ E_FAIL 0x80004005 (บางบริบท เช่น cursor ในตาราง — เคสจริงบน T3 2026-10-19) สลับไป `insertOoxml` แบบ w:p สมบูรณ์ครอบ `<w:br w:type="page"/>` — fragment ต้องเป็น block-level เต็มตัว ใช้ run เดี่ยวก็ยัง E_FAIL)
+- กดแล้วทำที่ cursor ทันที (ไม่มี success message — เห็นผลในเอกสารเลย) · icon สลับเป็น spinner ตอนรันตัวนั้น · ทุกปุ่ม disable ด้วย `busy` ร่วมกับเครื่องมืออื่น · fallback error: "แทรกย่อหน้าไม่สำเร็จ" / "แทรกตัวแบ่งบรรทัดไม่สำเร็จ" / "แทรกตัวแบ่งหน้าไม่สำเร็จ"
+
+### หมายเหตุ: ไม่มีปุ่มสลับ formatting marks (และไม่มีชุดแทรกอักขระพิเศษ)
+
+- **Office.js ไม่มี API สลับแสดง/ซ่อน formatting marks** (¶ ท้ายย่อหน้า/จุดช่องว่าง) — เป็น application setting ของ Word ที่ WordApi ไม่เปิดให้ add-in แตะ ผู้ใช้กด **Ctrl+Shift+8** หรือปุ่ม **¶ บนแท็บ Home** ของ Word เอง (workflow จริงของผู้ใช้: แทรกย่อหน้าเพิ่ม → เปิด marks ตรวจ → ซ่อนกลับ — จึงมีปุ่มแทรกย่อหน้าให้ ส่วน marks ใช้ของ Word)
+- เคยมีชุด "แทรกอักขระพิเศษ" (เลขไทย ๐–๙ + สัญลักษณ์) ต่อท้าย panel แล้ว**ถอดออก 2026-10-19** ตามคำขอผู้ใช้ — ที่ต้องการจริงคือ formatting marks ซึ่งทำผ่าน add-in ไม่ได้ (อ่านบันทึกเต็มใน git history รอบนั้น)
+- เคยมีเครื่องมือ **"สร้างช่องจากข้อความที่เลือก"** (dialog ตั้ง tag + `insertContentControl` ครอบ selection + `validateTag` + `TagInputDialog` + unit test ของ validateTag) แล้ว**ถอดออกทั้งเส้น 2026-10-19** ตามคำขอผู้ใช้ — การสร้างช่องใหม่ทำใน Word ด้วย Developer tab แทน
+
+### ข้อความ error กลางของ panel (MessageBar intent error)
+
+- สแกนพัง: fallback "สแกนช่องในเอกสารไม่สำเร็จ" · ดูช่องพัง: "ไม่พบช่องนี้ในเอกสาร (อาจถูกลบไปแล้ว) — กดสแกนใหม่" / fallback "เลือกช่องไม่สำเร็จ" · เขียนค่าพัง: fallback "เขียนค่าลงเอกสารไม่สำเร็จ" · แทรกพัง: fallback "แทรกย่อหน้าไม่สำเร็จ" / "แทรกตัวแบ่งบรรทัดไม่สำเร็จ" / "แทรกตัวแบ่งหน้าไม่สำเร็จ" (แบ่งหน้าที่พังทั้งสองวิธีจะรวมสาเหตุของทั้ง insertBreak และ OOXML fallback ในข้อความเดียว)
+
+### พฤติกรรมใน browser ธรรมดา / `?addindemo`
+
+ทุกปุ่มที่แตะเอกสาร (`สแกน`/`ดูช่อง`/`เขียนค่า`/`ย่อหน้า`/`แบ่งบรรทัด`/`แบ่งหน้า`) จบที่ error MessageBar ("Word is not defined") — ตามปรัชญา demo ของ repo เหมือนปุ่ม Save & Version ส่วน toggle/สลับแท็บ/ฟอร์มค่าทดสอบ ทดสอบได้ครบใน browser

docs/requirement/gap-analysis.md

@@ -2,7 +2,7 @@
 
 - **วันที่ตรวจสอบ:** 2026-09-14
 - **อัปเดตล่าสุด:** 2026-09-17 — ปิด gap 4 ข้อ: 5.3.11 ✅ (N5), 5.3.12 ✅ (N6), 5.3.14 ✅ (API ส่งออก bookmark เป็น JSON), 5.3.15 ✅ (export PDF ของ F8 มี bookmark ติดไป) · 2026-09-15 — แก้ไขข้อความข้อ 5.3.18–5.3.25 ตามที่เจ้าของเอกสารยืนยันใหม่
-- **เอกสาร requirement ต้นทาง:** `docs/requirement/1.png`, `docs/requirement/2.png` (ข้อกำหนดระบบบันทึกความเห็นของกรรมการ — Judges' Notes System)
+- **เอกสาร requirement ต้นทาง:** ~~`docs/requirement/1.png`, `docs/requirement/2.png`~~ (ข้อกำหนดระบบบันทึกความเห็นของกรรมการ — Judges' Notes System — รูปทั้งสองถูกถอดออกจาก repo 2026-09-25 ตามคำขอผู้ใช้ ดูต่อได้จาก git history ก่อนหน้านี้)
 - **โค้ดที่ใช้เทียบ:** branch `forgejo-dev` — ข้อ 5.3.11–5.3.15 อัปเดตตามโค้ดล่าสุด 2026-09-17 (รวม N5–N6 commit `a020e96` และ N7 → JSON export) · ตรวจครั้งแรก ณ commit `b3b884c` (implement ครบตาม PLAN.md + PLAN-FEAT.md แล้ว ยกเว้น F11 ที่ถูกถอดออก)
 - **ช่วงเลขข้อ (ยืนยันโดยเจ้าของเอกสาร):** ภาพที่ 1 = ข้อ **5.3.1–5.3.6** / ภาพที่ 2 = ข้อ **5.3.7–5.3.25**
 
@@ -44,11 +44,11 @@
 | **5.3.7** เพิ่ม แก้ไข ลบ ข้อความที่เขียนหรือวาดได้ เช่น สีหรือขนาด | ✅ | ครบทั้งวงจร: สร้าง annotation ทุกชนิด (HIGHLIGHT/DRAW/SHAPE/TEXTBOX/STAMP) + **แก้ไขสี/ความหนา/ขนาด** ผ่านแผง selection (F1 — `AnnotationSelectionLayer`: แถบสี + ความหนา, TEXTBOX ปรับ fontSize ได้) + ย้าย/ปรับขนาด + F13 แก้ไขข้อความ + ลบของตัวเอง + F19 version history |
 | **5.3.8** ข้อมูลบันทึก bookmark ต้องอ้างถึงไฟล์เอกสาร หน้าเอกสาร วันที่บันทึก และผู้บันทึก | ✅ | ตาราง `bookmarks` มีครบทั้ง 4: `file_id` (FK → ไฟล์เอกสาร), `page_index` (หน้าเอกสาร), `created_at` (วันที่บันทึก), `user_id` (ผู้บันทึก) — นำมาแสดงในแท็บ Bookmarks, หน้าสรุป F15 และ export |
 | **5.3.9** กำหนดความเป็นส่วนตัวของ bookmark: ส่วนบุคคล (Private) / กลุ่ม (Group) | ❌ | ไม่มี Private/Group visibility — ทุกคนเห็นทุกรายการ (ไม่มี auth/roles โดยเจตนา) |
-| **5.3.10** แสดง bookmark ของเอกสารแต่ละไฟล์ หรือชุดของเอกสารได้ | ⚠️ | รายไฟล์ ✅ — แท็บ Bookmarks ใน sidebar แสดง bookmark ทั้งหมดของไฟล์ที่เปิด (ผูก `file_id`) + หน้าสรุป F15 / แต่**ชุดของเอกสาร** ❌ — ไม่มี concept การจัดกลุ่มไฟล์ (document set) และไม่มีหน้าแสดง bookmark รวมข้ามหลายไฟล์ |
+| **5.3.10** แสดง bookmark ของเอกสารแต่ละไฟล์ หรือชุดของเอกสารได้ | ✅ | ครบทั้งสองแบบ — รายไฟล์: แท็บ Bookmarks ใน sidebar (ผูก `file_id`) + หน้าสรุป F15; ชุดของเอกสาร: กลุ่มตาม `type_id` จากลิงก์ e-Court (N9) — หน้า `/groups/[typeId]` การ์ดแต่ละไฟล์หุบ/กางดู bookmark+annotation ทั้งไฟล์รวมทุกไฟล์ในกลุ่ม เรียงตามหน้า กดแถวเด้งไปตำแหน่งนั้น (2026-09-23) |
 | **5.3.11** แสดง bookmark ตามลำดับหน้าได้ | ✅ | ทำแล้ว (2026-09-16, N5): แท็บ "ที่คั่นหน้า" เรียงตาม **หน้า → ตำแหน่งบนหน้า (yOffset) → เวลาสร้าง** ทั้ง root ของต้นไม้และลูกในแม่เดียวกัน — ลำดับเดียวกันใช้ทุกที่: PDF outline ตอน export (F8), ผลค้นหา (N6), ส่งออก JSON (N7) |
 | **5.3.12** สามารถกำหนดเงื่อนไขการค้นหา bookmarks ได้ | ✅ | ทำแล้ว (2026-09-16, N6): block ค้นหาเฉพาะแท็บ "ที่คั่นหน้า" — คำค้น (ชื่อ+โน้ต) + เงื่อนไข **ช่วงหน้า / ผู้บันทึก / ช่วงวันที่บันทึก** ผสมกันได้ + ปุ่มล้างเงื่อนไข (Server Action `searchBookmarks` — แผน `docs/PLAN-BOOKMARK.md`) |
 | **5.3.13** แสดงผลรายการหน้าของเอกสารที่ bookmark ไว้ | ✅ | แท็บ Bookmarks ใน sidebar + หน้าสรุป (F15) |
-| **5.3.14** จัดทำชุด API ดึงข้อมูล bookmark สำหรับเชื่อมต่อระบบอื่น | ✅ | ทำแล้ว (2026-09-17): GET `/api/bookmarks/export?fileId=` คืน **JSON** ข้อมูล bookmark ทั้งไฟล์ (envelope `fileId`/`title`/`exportedAt` + `BookmarkDTO[]` ครบทุก field รวม `parentId` โครงสร้างต้นไม้ เรียงตามลำดับหน้า) — ระบบอื่นดึงข้อมูลไปใช้ต่อได้ทันที (read-only, ยังไม่มี auth ตามขอบเขตเฟสแรก) |
+| **5.3.14** จัดทำชุด API ดึงข้อมูล bookmark สำหรับเชื่อมต่อระบบอื่น | ✅ | ปัจจุบันตอบด้วย **N10 API** (2026-09-25): `POST /api/external/documents` (auth API Key `x-api-key`) คืน bookmark พร้อม annotation ทั้งเอกสาร/ทั้งกลุ่ม พร้อม filter ผู้บันทึก/ชนิด — เดิมเคยเป็น GET `/api/bookmarks/export?fileId=` (2026-09-17) แล้ว**ถูกถอด 2026-09-25** ตามคำขอผู้ใช้ เพราะ N10 ครอบคลุมข้อมูลชุดเดียวกันพร้อม auth |
 | **5.3.15** ส่งออก (Export) รายการ bookmark เป็น PDF | ✅ | export PDF ของ F8 (`app/api/annotations/export/route.ts`) ฝัง bookmark เป็น **PDF outline** ติดไปกับไฟล์ (ต้นไม้ 3 ระดับ เรียงตามหน้า) — เจ้าของเอกสารยืนยัน (2026-09-17) ถือว่าตอบข้อนี้แล้ว · หมายเหตุ: รายงาน PDF แยกต่างหากของ N7 เคยทำแล้วถูกเปลี่ยนเป็น**ส่งออก JSON** ตามคำขอผู้ใช้ (2026-09-17) |
 | **5.3.16** หน้าจอเชื่อมต่อกับระบบอื่น (Integrate) เป็น modal หรือ iframe | ❌ | เป็น standalone Next.js app — ไม่มีโหมด embed |
 | **5.3.17** รองรับ Web Browser: Google Chrome, Microsoft Edge, Safari | ✅ | Web app มาตรฐาน — ทดสอบ desktop + iOS/Android แล้ว |
@@ -70,7 +70,7 @@
 
 - Authentication ผู้ใช้งาน + สิทธิการใช้งานตามระบบปกครอง (5.3.22, 5.3.23)
 - Private/Group visibility ของ bookmark (5.3.9)
-- ~~ชุด API สำหรับระบบภายนอก (5.3.14)~~ — **ปิดแล้ว (2026-09-17)**: GET `/api/bookmarks/export` คืน JSON ข้อมูล bookmark ทั้งไฟล์ ระบบอื่นดึงไปใช้ได้ (ดูตาราง 5.3.14)
+- ~~ชุด API สำหรับระบบภายนอก (5.3.14)~~ — **ปิดแล้ว**: ปัจจุบันตอบด้วย **N10 API** `POST /api/external/documents` (API Key) ครอบทั้ง bookmark+annotation+replies — เดิม GET `/api/bookmarks/export` (2026-09-17) ถูกถอด 2026-09-25 (ดูตาราง 5.3.14)
 - โหมด Integrate แบบ modal/iframe (5.3.16)
 - เชื่อมโยงกับระบบงานคดีปกครอง — ทั้งเรียกเอกสารโดยตรงและเชื่อมต่อระบบ (5.3.1, 5.3.25)
 
@@ -83,7 +83,7 @@
 
 ### กลุ่ม C — ของใหม่ที่ไม่เคยอยู่ในแผน
 - ~~**รองรับไฟล์รูปภาพ jpg/jpeg/png/tif** (5.3.4)~~ — **ทำแล้ว (2026-09-15, N3 + N4 ตามแผน `docs/PLAN-IMAGE.md`)**: รูปคือ "หน้าเอกสาร" (layers เดิมซ้อนบน `<img>` พิกัด % ใช้ของเดิมได้ทันที) + TIFF หลายเฟรม + EXIF orientation + export PDF ฝังรูป + อัปโหลดผ่านหน้ารายการ
-- **ชุดของเอกสาร (document set) + แสดง bookmark รวมหลายไฟล์** (5.3.10) — ต้องเพิ่ม data model จัดกลุ่มไฟล์ + หน้ารวม bookmark ข้ามไฟล์ (ตอนนี้ไฟล์เป็นลิสต์แบนหน้าเดียว)
+- ~~**ชุดของเอกสาร (document set) + แสดง bookmark รวมหลายไฟล์** (5.3.10)~~ — **ทำแล้ว (2026-09-23, N9 ตามแผน `docs/PLAN-DOCSET.md`)**: กลุ่มตาม `files.type_id` จากลิงก์ e-Court (ไม่มีตารางกลุ่ม — จัดใน UI) + หน้า `/groups/[typeId]` กางดู bookmark+annotation รวมทุกไฟล์ของกลุ่ม
 
 ### กลุ่ม D — infrastructure (ระยะยาว)
 - On-Premise/Cloud packaging (5.3.24) — รวมถึงเตรียม multi-instance สำหรับ SSE