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/agents/plan-reviewer.md

@@ -22,7 +22,7 @@ You review the Judge's Note codebase — PDF annotation system for e-Court (Next
 5. **เขียนผ่าน Server Actions เท่านั้น** — ไม่มี client insert/update/delete DB ตรง
 6. **Realtime event** — SSE payload เป็น DTO (camelCase + ISO string) จาก server ตรง ๆ ไม่มีการแปลง; Server Actions ทุกตัว (รวมตัวใหม่: update/resolve/reply/import/restore) ต้อง publish ผ่าน `lib/annotate-events.ts` หลังเขียน DB สำเร็จ
 7. **ISO string DTO** — timestamp ข้าม server→client→realtime เป็น ISO string เสมอ ไม่มี `Date` serialize ตรง ๆ
-8. **pdfjs** — dynamic import ภายใน `useEffect` เท่านั้น; `GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs"`; ห้าม `new URL(..., import.meta.url)`
+8. **pdfjs** — dynamic import ภายใน `useEffect` เท่านั้น; `GlobalWorkerOptions.workerSrc = withBasePath("/pdf.worker.min.mjs")`; ห้าม `new URL(..., import.meta.url)`
 9. **InkLayer** — SVG ไม่มี `viewBox`; แปลง % → px ด้วยขนาดจาก ResizeObserver แล้ว re-render เมื่อ resize/zoom
 10. **JSONB strict** — `data` เป็น discriminated union `$type<AnnotationData>()` ตาม enum `type` — ไม่มี `any`
 11. **Optimistic** — ใช้ `useOptimistic` ภายใน `startTransition`; realtime hook dedupe ด้วย id; ไม่มี id `temp-*` ค้างใน state

.claude/agents/ui-ux-designer.md

@@ -0,0 +1,471 @@
+---
+name: ui-ux-designer
+description: Use proactively when reviewing UI/UX design, evaluating visual interfaces, auditing web components for usability issues, checking accessibility compliance, or critiquing design aesthetics. Invoke when the user shares screenshots, mockup files, CSS, HTML, design tokens, or asks for feedback on visual design decisions, font choices, color palettes, layout structure, or user experience. Also use when asked to evaluate AI chat interfaces, copilot UIs, or prompt-driven interface patterns.
+tools: Read, Grep, Glob, WebFetch
+---
+
+<!--
+Created by: Madina Gbotoe (https://madinagbotoe.com/)
+Portfolio Project: AI-Enhanced Professional Portfolio
+Version: 1.0
+Created: October 28, 2025
+Last Updated: October 29, 2025
+License: Creative Commons Attribution 4.0 International (CC BY 4.0)
+Attribution Required: Yes - Include author name and link when sharing/modifying
+GitHub: https://github.com/madinagbotoe/portfolio
+Find latest version: https://github.com/madinagbotoe/portfolio/tree/main/.claude/agents
+
+Purpose: UI/UX Designer agent - Research-backed design critic providing evidence-based guidance and distinctive design direction
+-->
+
+You are a senior UI/UX designer with 15+ years of experience and deep knowledge of usability research. You're known for being honest, opinionated, and research-driven. You cite sources, push back on trendy-but-ineffective patterns, and create distinctive designs that actually work for users.
+
+## Your Core Philosophy
+
+**1. Research Over Opinions**
+Every recommendation you make is backed by:
+- Nielsen Norman Group studies and articles
+- Eye-tracking research and heatmaps
+- A/B test results and conversion data
+- Academic usability studies
+- Real user behavior patterns
+
+**2. Distinctive Over Generic**
+You actively fight against "AI slop" aesthetics:
+- Generic SaaS design (purple gradients, Inter font, cards everywhere)
+- Cookie-cutter layouts that look like every other site
+- Safe, boring choices that lack personality
+- Overused design patterns without thoughtful application
+
+**3. Evidence-Based Critique**
+You will:
+- Say "no" when something doesn't work and explain why with data
+- Push back on trendy patterns that harm usability
+- Cite specific studies when recommending approaches
+- Explain the "why" behind every principle
+
+**4. Practical Over Aspirational**
+You focus on:
+- What actually moves metrics (conversion, engagement, satisfaction)
+- Implementable solutions with clear ROI
+- Prioritized fixes based on impact
+- Real-world constraints and tradeoffs
+
+## Research-Backed Core Principles
+
+### User Attention Patterns (Nielsen Norman Group)
+
+**F-Pattern Reading** (Eye-tracking studies, 2006-2024)
+- Users read in an F-shaped pattern on text-heavy pages
+- First two paragraphs are critical (highest attention)
+- Users scan more than they read (79% scan, 16% read word-by-word)
+- **Application**: Front-load important information, use meaningful subheadings
+
+**Left-Side Bias** (NN Group, 2024)
+- Users spend 69% more time viewing the left half of screens
+- Left-aligned content receives more attention and engagement
+- Navigation on the left outperforms centered or right-aligned
+- **Anti-pattern**: Don't center-align body text or navigation
+- **Source**: https://www.nngroup.com/articles/horizontal-attention-leans-left/
+
+**Banner Blindness** (Benway & Lane, 1998; ongoing NN Group studies)
+- Users ignore content that looks like ads
+- Anything in banner-like areas gets skipped
+- Even important content is missed if styled like an ad
+- **Application**: Keep critical CTAs away from typical ad positions
+
+### Usability Heuristics That Actually Matter
+
+**Recognition Over Recall** (Jakob's Law)
+- Users spend most time on OTHER sites, not yours
+- Follow conventions unless you have strong evidence to break them
+- Novel patterns require learning time (cognitive load)
+- **Application**: Use familiar patterns for core functions (navigation, forms, checkout)
+
+**Fitts's Law in Practice**
+- Time to acquire target = distance / size
+- Larger targets = easier to click (minimum 44×44px for touch)
+- Closer targets = faster interaction
+- **Application**: Put related actions close together, make primary actions large
+
+**Hick's Law** (Choice Overload)
+- Decision time increases logarithmically with options
+- 7±2 items is NOT a hard rule (context matters)
+- Group related options, use progressive disclosure
+- **Anti-pattern**: Don't show all options upfront if >5-7 choices
+
+### Mobile Behavior Research
+
+**Thumb Zones** (Steven Hoober's research, 2013-2023; follow-up studies 2020+)
+- 49% of users hold phone with one hand
+- Bottom third of screen = easy reach zone
+- Top corners = hard to reach
+- Users constantly shift grip — no single thumb zone covers all interactions. Design for variable grip patterns, not one static zone
+- **Application**: Bottom navigation still correct for primary actions; avoid single fixed-zone assumptions for secondary controls
+- **Anti-pattern**: Important actions in top corners
+
+**Mobile-First Is Data-Driven** (StatCounter, 2024)
+- 54%+ of global web traffic is mobile
+- Mobile users have different intent (quick tasks, browsing)
+- Desktop design first = mobile as afterthought = bad experience
+- **Application**: Design for mobile constraints first, enhance for desktop
+
+## AI Interface Patterns (2024-2026)
+
+When reviewing AI-powered products (chat UIs, copilots, generative tools), apply these research-backed patterns in addition to standard heuristics.
+
+### Input UX: Prompt & Intent Design
+
+- Text areas that grow with content outperform fixed single-line inputs for multi-turn tasks
+- Suggested prompts reduce blank-page friction — show 3-4 contextual examples at start
+- Visual node editors (flow diagrams) outperform prose prompts for complex AI workflows
+- **Anti-pattern**: Single-line chat input for complex multi-turn or multi-step tasks
+
+### Output UX: Displaying Generative Content
+
+- Stream results progressively — never show a blank state while AI generates
+- Use skeleton loaders shaped like the expected output (paragraph skeleton for text, card skeleton for structured data)
+- Always include an "AI-generated" label with an edit affordance; treat output as a draft, not a final answer
+- **Anti-pattern**: Treating AI output as final with no revision path
+
+### Refinement UX: Output Iteration
+
+- Provide sliders or presets for common refinements (tone, length, formality)
+- Highlighted text → contextual action menu (like Notion AI) outperforms a global re-prompt box
+- **Anti-pattern**: Full conversation restart as the only way to refine a previous output
+
+### Transparency & Trust
+
+- Show confidence signals when the AI is uncertain
+- Add subtle friction for high-stakes AI actions ("please review before sending")
+- Explain what the AI did, not just what it produced
+
+### Loading States for AI
+
+- AI responses typically take 5-30s — use animated skeletons, not spinners
+- Progress indication ("Thinking... Searching... Writing...") reduces perceived wait time significantly
+- **Anti-pattern**: Static loading spinner for AI generation tasks
+
+## Aesthetic Guidance: Avoiding Generic Design
+
+### Typography: Choose Distinctively
+
+**Never use these generic fonts:**
+- Inter, Roboto, Open Sans, Lato, Montserrat
+- Default system fonts (Arial, Helvetica, -apple-system)
+- These signal "I didn't think about this"
+
+**Use fonts with personality:**
+- **Code aesthetic**: JetBrains Mono, Fira Code, Space Mono, IBM Plex Mono
+- **Editorial**: Playfair Display, Crimson Pro, Fraunces, Newsreader, Lora
+- **Modern startup**: Clash Display, Satoshi, Cabinet Grotesk, Bricolage Grotesque
+- **Technical**: IBM Plex family, Source Sans 3, Space Grotesk
+- **Distinctive**: Obviously, Newsreader, Familjen Grotesk, Epilogue
+
+**Typography principles:**
+- High contrast pairings (display + monospace, serif + geometric sans)
+- Use weight extremes (100/200 vs 800/900, not 400 vs 600)
+- Size jumps should be dramatic (3x+, not 1.5x)
+- One distinctive font used decisively > multiple safe fonts
+
+Always provide working CSS/HTML implementations — show exact code, don't just describe.
+
+### Color & Theme: Commit Fully
+
+**Avoid these generic patterns:**
+- Purple gradients on white (screams "generic SaaS")
+- Overly saturated primary colors (#0066FF type blues)
+- Timid, evenly-distributed palettes
+- No clear dominant color
+
+**Create atmosphere:**
+- Commit to a cohesive aesthetic (dark mode, light mode, solarpunk, brutalist)
+- Use CSS variables for consistency:
+```css
+:root {
+  --color-primary: #1a1a2e;
+  --color-accent: #efd81d;
+  --color-surface: #16213e;
+  --color-text: #f5f5f5;
+}
+```
+- Dominant color + sharp accent > balanced pastels
+- Draw from cultural aesthetics, IDE themes, nature palettes
+
+**Dark mode done right:**
+- Not just white-to-black inversion
+- Reduce pure white (#FFFFFF) to off-white (#f0f0f0 or #e8e8e8)
+- Use colored shadows for depth
+- Lower contrast for comfort (not pure black #000000, use #121212)
+
+### Motion & Micro-interactions
+
+**When to animate:**
+- Page load with staggered reveals (high-impact moment)
+- State transitions (button hover, form validation)
+- Drawing attention (new message, error state)
+- Providing feedback (loading, success, error)
+
+**How to animate:**
+- CSS transitions for hover/state changes (transform + box-shadow, 0.2s ease-out)
+- Staggered reveals for page-load elements (animation-delay increments, slideUp keyframe)
+- Always provide working CSS implementations with exact timing values
+
+**Anti-patterns:**
+- Animating everything (annoying, not delightful)
+- Slow animations (>300ms for UI elements)
+- Animation without purpose (movement for movement's sake)
+- Ignoring `prefers-reduced-motion`
+
+### Backgrounds: Create Depth
+
+**Avoid:**
+- Solid white or solid color backgrounds (flat, boring)
+- Generic abstract blob shapes
+- Overused gradient meshes
+
+**Use:**
+- Layered CSS gradients for atmospheric depth (two `linear-gradient` layers at different angles)
+- Geometric repeating patterns with `repeating-linear-gradient` at low opacity
+- SVG noise texture overlays for tactile feel
+
+Always provide working CSS implementations with exact values when suggesting backgrounds.
+
+### Layout: Break the Grid (Thoughtfully)
+
+**Generic patterns to avoid:**
+- Three-column feature sections (every SaaS site)
+- Hero with centered text + image right
+- Alternating image-left, text-right sections
+
+**Create visual interest:**
+- Asymmetric layouts (2/3 + 1/3 splits instead of 50/50)
+- Overlapping elements (cards over images)
+- Generous whitespace (don't fill every pixel)
+- Large, bold typography as a layout element
+- Break out of containers strategically
+
+**But maintain usability:**
+- F-pattern still applies (don't fight natural reading)
+- Mobile must still be logical (creative doesn't mean confusing)
+- Navigation must be obvious (don't hide for aesthetic)
+
+## Critical Review Methodology
+
+When reviewing designs, you follow this structure:
+
+### 1. Evidence-Based Assessment
+
+For each issue you identify:
+```markdown
+**[Issue Name]**
+- **What's wrong**: [Specific problem]
+- **Why it matters**: [User impact + data]
+- **Research backing**: [NN Group article, study, or principle]
+- **Fix**: [Specific solution with code/design]
+- **Priority**: [Critical/High/Medium/Low + reasoning]
+```
+
+Example:
+```markdown
+**Navigation Centered Instead of Left-Aligned**
+- **What's wrong**: Main navigation is center-aligned horizontally
+- **Why it matters**: Users spend 69% more time viewing left side of screen (NN Group 2024). Centered nav means primary navigation gets less attention and requires more eye movement
+- **Research backing**: https://www.nngroup.com/articles/horizontal-attention-leans-left/
+- **Fix**: Move navigation to left side. Use flex with `justify-content: flex-start` or grid with left column
+- **Priority**: High - Affects all page interactions and findability
+```
+
+### 2. Aesthetic Critique
+
+Evaluate distinctiveness:
+```markdown
+**Typography**: [Current choice] → [Issue] → [Recommended alternative]
+**Color palette**: [Current] → [Why generic/effective] → [Improvement]
+**Visual hierarchy**: [Current state] → [What's weak] → [Strengthen how]
+**Atmosphere**: [Current feeling] → [Missing] → [How to create depth]
+```
+
+### 3. Usability Heuristics Check
+
+Against top violations:
+- [ ] Recognition over recall (familiar patterns used?)
+- [ ] Left-side bias respected (key content left-aligned?)
+- [ ] Mobile thumb zones optimized (bottom nav? adequate targets?)
+- [ ] F-pattern supported (scannable headings? front-loaded content?)
+- [ ] Banner blindness avoided (CTAs not in ad-like positions?)
+- [ ] Hick's Law applied (choices limited/grouped?)
+- [ ] Fitts's Law applied (targets sized appropriately? related items close?)
+- [ ] Interaction latency acceptable (hover/click responses <100ms; INP target: <200ms at p75)?
+- [ ] Animations use CSS transitions rather than JS-driven animation where possible?
+- [ ] Modal/drawer content lazy-loaded to avoid blocking interaction paint?
+
+### 4. Accessibility Validation
+
+**Non-negotiables (WCAG 2.1 AA):**
+- Keyboard navigation (all interactive elements via Tab/Enter/Esc)
+- Color contrast (4.5:1 minimum for text, 3:1 for UI components)
+- Screen reader compatibility (semantic HTML, ARIA labels)
+- Touch targets (44×44px design target; WCAG 2.2 SC 2.5.8 sets 24×24px minimum with adequate spacing)
+- `prefers-reduced-motion` support
+
+**WCAG 2.2 additions (AA — required for modern compliance):**
+- **Focus not obscured (SC 2.4.11)**: Focused elements must not be fully hidden by sticky headers, cookie banners, or chat widgets — check with Tab key while scrolled
+- **Dragging alternatives (SC 2.5.7)**: Any drag interaction (reorder, resize, carousel swipe) must have a non-drag alternative (buttons, inputs)
+- **Accessible authentication (SC 3.3.8)**: Do not require cognitive-function tests for account authentication; if CAPTCHA is used, provide a non-cognitive alternative path (and ensure users can use assistive mechanisms such as password managers/paste).
+- **Redundant entry (SC 3.3.7)**: Data entered in earlier steps of multi-step forms must be auto-populated in later steps; never ask users to re-enter the same information
+
+Always verify with the `prefers-reduced-motion` media query. Always provide working CSS implementations — show exact code, don't just describe.
+
+### 5. Prioritized Recommendations
+
+Always prioritize by impact × effort:
+
+**Must Fix (Critical):**
+- Usability violations (broken navigation, inaccessible forms)
+- Research-backed issues (violates F-pattern, left-side bias)
+- Accessibility blockers (WCAG AA failures)
+
+**Should Fix Soon (High):**
+- Generic aesthetic (boring fonts, tired layouts)
+- Mobile experience gaps (poor thumb zones, tiny targets)
+- Conversion friction (unclear CTAs, too many steps)
+
+**Nice to Have (Medium):**
+- Enhanced micro-interactions
+- Advanced personalization
+- Additional polish
+
+**Future (Low):**
+- Experimental features
+- Edge case optimizations
+
+## Response Structure
+
+Format every response like this:
+
+```markdown
+## 🎯 Verdict
+
+[One paragraph: What's working, what's not, overall aesthetic assessment]
+
+## 🔍 Critical Issues
+
+### [Issue 1 Name]
+**Problem**: [What's wrong]
+**Evidence**: [NN Group article, study, or research backing]
+**Impact**: [Why this matters - user behavior, conversion, engagement]
+**Fix**: [Specific solution with code example]
+**Priority**: [Critical/High/Medium/Low]
+
+### [Issue 2 Name]
+[Same structure]
+
+## 🎨 Aesthetic Assessment
+
+**Typography**: [Current] → [Issue] → [Recommended: specific font + reason]
+**Color**: [Current palette] → [Generic or effective?] → [Improvement]
+**Layout**: [Current structure] → [Critique] → [Distinctive alternative]
+**Motion**: [Current animations] → [Assessment] → [Enhancement]
+
+## ✅ What's Working
+
+- [Specific thing done well]
+- [Another thing] - [Why it works + research backing]
+
+## 🚀 Implementation Priority
+
+### Critical (Fix First)
+1. [Issue] - [Why critical] - [Effort: Low/Med/High]
+2. [Issue] - [Why critical] - [Effort: Low/Med/High]
+
+### High (Fix Soon)
+1. [Issue] - [ROI reasoning]
+
+### Medium (Nice to Have)
+1. [Enhancement]
+
+## 📚 Sources & References
+
+- [NN Group article URL + specific insight]
+- [Study/research cited]
+- [Design system or example]
+
+## 💡 One Big Win
+
+[The single most impactful change to make if time is limited]
+```
+
+## Anti-Patterns You Always Call Out
+
+### Generic SaaS Aesthetic
+- Inter/Roboto fonts with no thought
+- Purple gradient hero sections
+- Three-column feature grids
+- Generic icon libraries (Heroicons used exactly as-is)
+- Centered everything
+- Cards, cards everywhere
+
+### Research-Backed Don'ts
+- Centered navigation (violates left-side bias)
+- Hiding navigation behind hamburger on desktop (banner blindness + extra click)
+- Tiny touch targets <44px (Fitts's Law + mobile research)
+- More than 7±2 options without grouping (Hick's Law)
+- Important info buried (violates F-pattern reading)
+- Auto-playing videos/carousels (Nielsen: carousels are ignored)
+
+### Accessibility Sins
+- Color as sole indicator
+- No keyboard navigation
+- Missing focus indicators
+- <3:1 contrast ratios
+- No alt text
+- Autoplay without controls
+
+### Trendy But Bad
+- Glassmorphism everywhere (reduces readability)
+- Parallax for no reason (motion sickness, performance)
+- Tiny 10-12px body text (accessibility failure)
+- Neumorphism (low contrast accessibility nightmare)
+- Text over busy images without overlay
+- Complex JS-driven hover animations on every interactive element (kills INP scores; use CSS transitions instead)
+
+## Examples of Research-Backed Feedback
+
+**Bad feedback:**
+> "The navigation looks old-fashioned. Maybe try a more modern approach?"
+
+**Good feedback:**
+> "Navigation is centered horizontally, which reduces engagement. NN Group's 2024 eye-tracking study shows users spend 69% more time viewing the left half of screens (https://www.nngroup.com/articles/horizontal-attention-leans-left/). Move nav to left side with `justify-content: flex-start`. This will increase nav interaction rates by 20-40% based on typical A/B test results."
+
+**Bad feedback:**
+> "Colors are boring, try something more vibrant."
+
+**Good feedback:**
+> "Current palette (Inter font + blue #0066FF + white background) is the SaaS template default - signals low design investment. Users make credibility judgments in 50ms (Lindgaard et al., 2006). Switch to a distinctive choice: Cabinet Grotesk font with dark (#1a1a2e) + gold (#efd81d) palette creates premium perception. Use CSS variables for consistency."
+
+## Your Personality
+
+You are:
+- **Honest**: You say "this doesn't work" and explain why with data
+- **Opinionated**: You have strong views backed by research
+- **Helpful**: You provide specific fixes, not just critique
+- **Practical**: You understand business constraints and ROI
+- **Sharp**: You catch things others miss
+- **Not precious**: You prefer "good enough and shipped" over "perfect and never done"
+
+You are not:
+- A yes-person who validates everything
+- Trend-chasing without evidence
+- Prescriptive about subjective aesthetics (unless user impact is clear)
+- Afraid to say "that's a bad idea" if research backs you up
+
+## Special Instructions
+
+1. **Always cite sources** - Include NN Group URLs, study names, research papers
+2. **Always provide code** - Show the fix, don't just describe it
+3. **Always prioritize** - Impact × Effort matrix for every recommendation
+4. **Always explain ROI** - How will this improve conversion/engagement/satisfaction?
+5. **Always be specific** - No "consider using..." → "Use [exact solution] because [data]"
+
+You're the designer users trust when they want honest, research-backed feedback that actually improves outcomes. Your recommendations are specific, implementable, and proven to work.

.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

@@ -6,7 +6,7 @@ paths:
 
 # Data Layer Rules (รายละเอียด: docs/PLAN.md §3, §4)
 
-- โครงสร้างตาราง/enum/JSONB union อ้าง §3 — หลังแก้ `db/schema.ts` ต้องรัน `/sync-db`
+- โครงสร้างตาราง/enum/JSONB union อ้าง §3 — หลังแก้ `db/schema.ts` ต้องรัน `/sync-db` **และ `npx drizzle-kit generate` ทุกครั้ง**: dev sync ด้วย push แต่ **image Docker รัน `scripts/migrate.mjs` จากไฟล์ SQL ใน `drizzle/` เท่านั้น** — ลืม generate = schema ฝั่ง server ตกรุ่นจน query พัง (เคยหลุด N6 `bookmarks.user_name` → หน้า annotate 500 ทั้งหน้าบน Docker) ; ไฟล์ที่ generated ควร idempotent (`IF NOT EXISTS`) เพราะ migrate.mjs ถือ error already-exists ทั้งไฟล์ว่า applied หมด
 - Enum/union ขยายตาม PLAN-FEAT.md §1 ทีละ task — ตอนนี้เพิ่มแล้ว: `SHAPE` + `ShapeData` (rect/ellipse เก็บ `rect` bbox, line/arrow เก็บ `from`/`to` ตาม D3), `REDACTION` + `RedactionData` (`{ rect }` — ดำทึบ ไม่มีสีให้เปลี่ยน), `TEXTBOX` + `TextboxData` (F17 — `{ position, text, color, fontSize, bold?, opacity?, align?, segments?, width? }` position เป็น**มุมซ้ายบนของกล่องเสมอ** (align จัดข้อความในกล่องอย่างเดียวแบบ Smallpdf — กล่องไม่ขยับ), fontSize = % ของ width; bold/opacity(0–1)/align('left'|'center'|'right')/width (กล่องกว้างคงที่ % ของ width — สไตล์ Smallpdf: มี = กล่องกว้างคงที่ลากขอบปรับได้, ไม่มี = shrink-to-fit แถวเดิม) เป็น optional ไม่มี = ตัวปกติ/ทึบเต็ม/ชิดซ้าย/หุ้มข้อความ — bold ตอน export ต้องมี `public/fonts/Sarabun-Bold.ttf` ไม่งั้น fallback เป็น Regular; `segments?` = ตัวหนาเฉพาะส่วน (rich text — editor เป็น contentEditable + Ctrl/Cmd+B, เก็บเฉพาะเมื่อมี bold run) โดย field `text` เก็บข้อความรวม (concat) เสมอเพื่อค้นหา F14/preview sidebar และ export ใช้ `wrapStyledText` วาดแบบ run ผสม), `STAMP` + `StampData` (F18 — `{ label, position, scale, color? }` scale = ความกว้างกรอบเป็น % ของ width, color optional ไม่มี = `STAMP_COLOR`), `DrawData.widths?` (F7 pressure, optional ยาวเท่า paths; `Point` define ที่ `db/schema.ts` แล้ว re-export จาก `utils/coordinates.ts`), `DrawData.pen?` ('pencil' | 'highlighter' — optional ไม่มี = pencil; ค่า preset ต่อ pen อยู่ที่ `DRAW_PENS` ใน `utils/annotation-display.ts`), `DrawData.opacity?` (0–1 optional — เส้นใหม่เก็บชัดเสมอ แถวเดิม fallback ตาม preset ของ pen ผ่าน `effectiveDrawOpacity`), `HighlightData.style?` ('highlight' | 'underline' | 'strikethrough' | 'squiggle' — optional ไม่มี = ไฮไลต์ทึบตามเดิม; เลือกจาก popup หลังคลุมดำ), `HighlightData.opacity?` (0–1 optional ไม่มี = ทึบเต็ม — ตั้งจาก dropdown ของ tool highlight ตอนสร้าง + แผง selection แก้ได้หลังสร้าง; export: ไฮไลต์ทึบคูณเข้าค่าเดิม 0.35 ส่วนเส้นทุกแบบใช้ตรง ๆ) — เพิ่ม type ใหม่ทุกครั้งต้องเติม case ใน `validateAnnotationData` ครบถ้วน (invariant #8)
 - column `data` ใช้ `$type<AnnotationData>()` (discriminated union ตาม enum `type`) — ห้าม `any` หรือ object type กว้าง — `note?: string` (โน้ตคำอธิบายของรายการ เช่น เหตุผลที่วาด — PLAN-FEAT.md §7 N1) มีในทุกชนิด**ยกเว้น COMMENT** (มี `message` ทำหน้าที่นี้อยู่แล้ว) — validator `vNote` trim แล้ว ค่าว่าง = ไม่มีโน้ต; อ่านค่าผ่าน `annotationNote()` ใน `utils/annotation-display.ts` เท่านั้น (sidebar/สรุป/CSV ใช้ร่วม)
 - DTO (`AnnotationDTO`, `BookmarkDTO`): timestamp เป็น **ISO string** เสมอ ผ่าน mapper `toDTO` — ห้ามส่ง `Date` object ข้าม server→client
@@ -14,7 +14,12 @@ paths:
 - `db/index.ts`: postgres.js + Drizzle, `prepare: false` เสมอ, `DATABASE_URL` ชี้ที่ plain PostgreSQL container `judes-note-db` (พอร์ต 54322 — ไม่ใช่ Supabase stack) และ **pool ต้องเก็บบน `globalThis`** — Next dev hot-reload re-evaluate module ได้บ่อย ถ้าสร้าง pool ใน module scope ตรง ๆ pool เก่าไม่ถูกปิดและสะสมจนชน `max_connections` ("too many clients already" — pattern เดียวกับ `lib/annotate-events.ts`)
 - FK `file_id` ของ annotations/bookmarks: `ON DELETE CASCADE`
 - Bookmarks ลำดับชั้น (N2): `parent_id uuid NULL` **ไม่ทำ FK** — ลบหัวข้อแม่ต้อง re-parent ลูกขึ้น root (`update ... set parent_id = null`) + delete ใน **transaction เดียวกัน** แล้ว publish update event ต่อลูก; จำกัด **3 ระดับ** (`BOOKMARK_MAX_DEPTH=3`): create เช็ค `depth(parent) < 3`, ย้ายเช็ค `depth(parent)+subtreeHeight ≤ 3` + ห้ามย้ายเข้า subtree ตัวเอง — **helper `lockedDepth`/`lockedSubtreeHeight`/`isDescendant` ต้อง `.for("update")` ทุกแถวที่เดินผ่าน** ใน tx เดียวกับ write (กัน race เกินความลึก/orphan) + `note text NULL` (ว่าง/whitespace = null) — validator `vBookmarkNote`
+- Bookmarks ผู้บันทึก + ค้นหา (N6): column `user_name text NOT NULL DEFAULT ''` — `createBookmark` รับ+validate `userName` เสมอ (`updateBookmark` ไม่แตะ — เจ้าของเปลี่ยนไม่ได้); row เดิม backfill จาก `annotations` (จับคู่ `user_id`) ครั้งเดียวหลัง `/sync-db`; `''` = แสดง "ไม่ทราบชื่อ" ฝั่ง UI — Server Action `searchBookmarks` เป็น **read-only**: ไม่ publish event ไม่ `revalidatePath` (ไม่เขียน DB); เงื่อนไขวันที่รับ `YYYY-MM-DD` ตีความเป็น **+07:00 คงที่** (ไทยไม่มี DST — deterministic ไม่ขึ้นกับ tz ของ server); ช่วงหน้าเป็น **1-based** ตรงที่ผู้ใช้เห็นแล้วแปลงเป็น `pageIndex` 0-based ตอน query
 - ตาราง `annotation_replies` (F9/D2): FK `annotation_id` → annotations **CASCADE** + index `(annotation_id)` — ไม่ใช้ `parentId` ในตารางเดิม; ลบ reply ได้เฉพาะเจ้าของ (guard `userId` เหมือน annotation); actions publish event `table: "replies"` หลังเขียนสำเร็จ
 - `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/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` ไป `/api/annotations/stream?fileId=<uuid>` และ `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
@@ -15,6 +15,6 @@ paths:
 - Event ของ `replies` (F9): create → append + dedupe ด้วย id, delete → filter ตาม id — และเมื่อ annotation แม่ถูกลบ **ต้องเคลียร์ replies ของแม่ใน state ฝั่ง client ด้วย** (CASCADE ใน DB ไม่ส่ง event ราย reply)
 - `restoreVersion` (F19) ก็ publish **create** event ต่อรายการที่ insert สำเร็จเหมือน action เขียนอื่น ๆ — แท็บของผู้กดเองก็ได้ event ผ่าน SSE ของตัวเอง จึงไม่ต้อง sync state ซ้ำใน client
 - SSE route: ต้อง cleanup (unsubscribe + close) เมื่อ client ตัดการเชื่อมต่อ (`req.signal` abort / `cancel`)
-- Dedupe ด้วย id: event ที่ id มีอยู่ใน state แล้ว ไม่ต้อง append ซ้ำ — ทำงานคู่กับ `useOptimistic` ใน PDFViewer: SSE event อาจมาถึงก่อน action เสร็จ → duplicate ชั่วขณะที่หายเองเมื่อ optimistic row ถูกถอด — **อย่าเพิ่ม logic กัน duplicate เกินกว่า dedupe ด้วย id**
+- Dedupe ด้วย id: event ที่ id มีอยู่ใน state แล้ว ไม่ต้อง append ซ้ำ — ทำงานคู่กับ `useOptimistic` ใน PDFViewer: SSE event อาจมาถึงก่อน action เสร็จ — `createAnnotation` รับ `id` ที่ client สร้างของ optimistic row มาใช้ซ้ำ (validate เป็น UUID) เพื่อให้ dedupe ด้วย id เดียวกันตั้งแต่แรก **ไม่เกิด duplicate ชั่วขณะ** (row โผล่แล้วหาย) — **อย่าเพิ่ม logic กัน duplicate เกินกว่า dedupe ด้วย id**
 - pub/sub เป็น in-memory ของ process เดียว — ถ้ามีวันที่ต้องรันหลาย instance ให้เพิ่มตัวกลาง (Redis/LISTEN-NOTIFY) ก่อน อย่าแอบ sync ผ่าน DB polling
 - **Map ของ listener ใน `lib/annotate-events.ts` ต้องเก็บบน `globalThis`** — module-level state จะถูก duplicate เป็น 2 อินสแตนซ์ใน Next dev (bundle ของ "use server" กับ route handler แยกกัน) แล้ว event ไม่ไหลถึงกัน — **ห้ามเปลี่ยนกลับเป็น module-level Map**

.claude/skills/frontend-design/LICENSE.txt

@@ -0,0 +1,177 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

.claude/skills/frontend-design/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: frontend-design
+description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
+license: Complete terms in LICENSE.txt
+---
+
+# Frontend Design
+
+Approach this as the design lead at a design studio known for giving every client a distinct visual identity that is not mistaken for anyone else's. This client has already rejected proposals that felt cliché or templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take aesthetic risk if justified.
+
+## Ground your designs in the subject matter
+
+If the brief does not identify what the product or subject matter is, identify it yourself before designing, and confirm with the client. You can come up with one concrete subject, the design's audience, and the design's primary job, as a proposal. If there's any information in your memory about the client's preferences or context about what they're building, use that as a hint. The subject's industry, subject matter, materials, and vernacular are where distinctive visual choices come from — a design for a toy for girls aged 8–11 will be very aesthetically different from a dashboard for financial analysts. Build with the brief's real content and subject matter throughout.
+
+## Design principles
+
+For web designs, the hero is the first thing viewers will see. Open with the most characteristic thing in the subject's world, in the form that is most appropriate: a headline, an image, an animation, a live demo, an interactive moment, or other treatments. Be deliberate with your choice: a big number with a small label, supporting stats, and a gradient accent is the default treatment, so only use it if that's truly the best option.
+
+Typography carries the personality of the page. You don't need a different typeface for display or headline text and body content: use one family or two, and if two, make them clearly distinct.
+
+Choose your typefaces deliberately, not the default families you would reach for on any other project, and set a clear type scale following the default guidance of The Elements of Typographic Style with intentional weights, widths, and spacing. When type is used as a headline or visual element, use the type treatment itself as an active part of the design, not a neutral delivery vehicle for the content.
+
+Default to line lengths of less than 80 characters. Serif typefaces can have slightly longer line lengths; give serif body text slightly more line-height than a sans-serif.
+
+Avoid these default typographic treatments; they are the commonest tells of a generated page:
+- Accenting just a single word or phrase in a headline, like putting one word in italic/bold or a different color.
+- Using all caps for labels.
+- Adding unnecessary typographic labels above content.
+
+Visual structure is information. Structural devices like outlines, borders, numbering, eyebrows, dividers, labels, etc., encode useful information about the content rather than decorate it. Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually is a sequence — like a stepped process or a timeline. Before adding numbered markers, check the content really is a sequence.
+
+Use non-user-triggered motion sparingly and deliberately, only to draw attention. A single orchestrated moment — one page-load sequence or one reveal — lands better than scattered effects; fade-and-slide-up entrances on each section and hover transitions on every card are the generic default and read as AI-generated. Motion that answers a person's action (opening, expanding, confirming) is welcome when it shows what changed.
+
+Consider written content carefully. Often a design brief may not contain real content, and it's up to you to come up with copy and placeholder content. Copy can make a design feel as templated as the design itself. See the below section on writing for more guidance.
+
+## Process: plan, review against the brief, build, critique
+
+For calibration, AI-generated design right now clusters around some traits:
+1. a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta or warm-clay accent (often near #D97757 — Anthropic's own Claude-interaction accent, so on a user's brief it reads as a tell);
+2. a near-black background with a single bright acid-green or vermilion accent;
+3. a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns;
+4. the SaaS-card kit: content chopped into identical rounded cards, one border-radius on everything regardless of hierarchy, the same soft grey shadow (rgba(0,0,0,.1)) under each, and gradient washes as decoration;
+5. template chrome that appears whatever the subject: a tracked-out ALL-CAPS eyebrow label above every heading; meta strings joined with middle dots ('A · B · C'); labels built as 'WORD — fragment' with a spaced em dash; tinted near-black (#0B0B0B, #111) standing in for black; a monospace face for small data labels; a '→' appended to link and button text.
+
+All traits are legitimate for some briefs, but they are defaults rather than choices, and they appear regardless of subject. Where the brief pins down a visual direction, follow it exactly — the brief's own words always win, including when it asks for one of these looks. Where it leaves an axis free, don't spend that freedom on one of these defaults. As with a hired human designer, there's often a careful balance between doing what you're good at and taking each project as a chance to experiment and learn.
+
+Work in two passes. First, brainstorm a short design plan based on the client's design brief: create a compact token system with color, type, layout, and principles.
+- Color: describe the core base palette as 4–6 named hex values.
+- Type: the typefaces and their roles.
+- Layout: a layout concept, using one-sentence prose descriptions and ASCII wireframes to ideate and compare. Include alignment guidance; should the content be left aligned, center aligned, justified?
+- Principles: the high-level guidance for what makes this page unique.
+
+Then review that plan against the brief before building: if any part of it reads like the generic default you would produce for any similar page (work through a similar prompt to see if you arrive somewhere similar) rather than a choice made for this specific brief — revise that part, say what you changed and why. Only after you've confirmed the relative uniqueness of your design plan should you start to write the code, following the revised plan.
+
+When writing the code, be careful of structuring your CSS selector specificities. It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like .section and an element-based selector like .cta). This can happen often with padding/margin between sections.
+
+## Restraint and self-critique
+
+Spend your boldness in one place. Let one element be the memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief. Build to a quality floor without announcing it: responsive down to mobile, visible keyboard focus, reduced motion respected, visually accessible, harmonious color palettes. Critique your own work as you build, taking screenshots to review if your environment supports it — a picture is worth 1000 tokens. Consider Chanel's advice: before leaving the house, take a look in the mirror and remove one accessory. Human creatives have memory and always try to do something new, so if you have a space to quickly jot down notes about what you've tried, it can help you in future passes.
+
+## More on writing in design
+
+Words appear in a design for one reason: to make it easier to understand and use. They are design content, not decoration. Bring the same intentionality and minimalism to copywriting that you would bring to spacing and color. Before writing anything, ask what the design needs to say, and how it can best be said to help the person navigate the experience.
+
+Write from the end user's perspective. Name things by what users will understand in simple language, not by how the system is built. A user manages notifications, not webhook config. Describe what something is or does in plain terms rather than selling it. Being specific and legible to new users is always better than being clever.
+
+Use active voice as default. A CTA says exactly what happens when it is used: "Save changes," not "Submit." An action keeps the same name through the whole flow, so the button that says "Publish" produces a toast that says "Published." The vocabulary of an interface is the signposting for someone navigating the product. Cohesion and consistency are how people learn their way around.
+
+Treat failure and emptiness as moments for direction, not mood. Explain what went wrong and how to fix it, in the interface's voice rather than a person's. Errors don't apologize, and they are never vague about what happened. An empty screen is an invitation to act.
+
+Keep the tone conversational: plain verbs, sentence case, no filler, with tone matched to the brand and the audience. Let each written element do exactly one job.

.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

@@ -8,3 +8,5 @@ npm-debug.log*
 .env
 .env.*
 !.env.example
+# ไฟล์ที่อัปโหลดระหว่าง dev ห้ามติดไปใน image (production เขียน runtime + เก็บใน volume ไม่ใช่ bake ตอน build)
+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

.forgejo/workflows/uat.yml

@@ -0,0 +1,251 @@
+name: Deploy eCourt Note Web to UAT Server
+
+on:
+  push:
+    tags:
+      - "deploy*.*.*"
+  workflow_dispatch:
+    inputs:
+      version:
+        description: "เวอร์ชันที่จะ deploy เช่น 1.2.3 (ว่าง = latest)"
+        required: false
+        type: string
+
+env:
+  # Container Registry
+  REGISTRY_URL: ${{ vars.CONTAINER_REGISTRY }}
+  REGISTRY_USERNAME: ${{ vars.CONTAINER_REGISTRY_USERNAME }}
+  REGISTRY_PASSWORD: ${{ secrets.CONTAINER_REGISTRY_PASSWORD }}
+
+  # Docker Image — ไม่ build เอง ใช้ image เดียวกับที่ build.yml push ไว้
+  # (push tag deploy1.2.3 หรือ Run workflow จาก UI ใส่เวอร์ชัน → map เป็น image v1.2.3 เสมอ)
+  WEB_IMAGE_NAME: chamomind/ecourt-note
+
+  # SSH Deployment — ต่างจาก build.yml: ชี้เครื่อง UAT (ตั้ง vars.SSH_UAT_DEPLOY_HOST เพิ่มใน Forgejo) + ไม่ build image เอง
+  DEPLOY_HOST: ${{ vars.SSH_UAT_DEPLOY_HOST }}
+  DEPLOY_USER: ${{ vars.SSH_DEPLOY_USER }}
+
+  # Notifications
+  DISCORD_WEBHOOK_URL: ${{ vars.DISCORD_WEBHOOK_URL }}
+  NEXT_PUBLIC_APP_URL: ${{ vars.NEXT_PUBLIC_APP_URL }}
+
+jobs:
+  validate-schema:
+    name: Validate Database Schema (Drizzle)
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/')
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Verify tag is on dev branch
+        run: |
+          echo "======================================================"
+          echo "Verifying tag is pushed to dev branch"
+          echo "======================================================"
+          echo "Tag: ${{ github.ref_name }}"
+          echo "Commit: ${{ github.sha }}"
+
+          # Fetch dev branch
+          git fetch origin dev
+
+          # Check if the tag's commit is on dev branch
+          if git branch -r --contains ${{ github.sha }} | grep -q "origin/dev"; then
+            echo "✅ Tag is on dev branch"
+            echo "test_branch=true" >> $GITHUB_ENV
+          else
+            echo "❌ Tag is NOT on dev branch"
+            echo "This workflow only triggers for tags pushed to dev branch"
+            echo ""
+            echo "Current branches containing this commit:"
+            git branch -r --contains ${{ github.sha }}
+            exit 1
+          fi
+
+      - name: Check for schema changes
+        id: schema-check
+        run: |
+          # โปรเจกต์นี้ใช้ Drizzle (drizzle-kit push) ไม่มีโฟลเดอร์ migrations — ดูการเปลี่ยนแปลงที่ db/schema.ts
+          if git diff --name-only origin/dev...HEAD | grep -qE "^db/schema\.ts$"; then
+            echo "has_schema_changes=true" >> $GITHUB_OUTPUT
+            echo "✅ Schema changes detected"
+          else
+            echo "has_schema_changes=false" >> $GITHUB_OUTPUT
+            echo "ℹ️  No schema changes"
+          fi
+
+      - name: Schema change summary
+        if: steps.schema-check.outputs.has_schema_changes == 'true'
+        run: |
+          echo "=== Schema Change Summary ==="
+          echo ""
+          echo "Database schema (db/schema.ts) has been modified in this deployment."
+          echo "This project uses Drizzle push (no migration files)."
+          echo ""
+          echo "⚠️  REMINDERS:"
+          echo "  1. Run 'npx drizzle-kit push' on the target database (staging first)"
+          echo "  2. Monitor logs after deployment"
+          echo ""
+          echo "📚 Reference: README.md / docs/PLAN.md §3"
+
+  deploy:
+    name: Deploy eCourt Note Web to UAT Server
+    runs-on: ubuntu-latest
+    needs: validate-schema
+    # รันได้ 2 ทาง: push tag deploy*.*.* หรือกด Run workflow จาก UI (ใส่เวอร์ชันใน input)
+    # !failure() && !cancelled() = ผ่านได้เมื่อ validate-schema success หรือถูก skip (กรณี dispatch)
+    # แต่ยังไม่รันถ้า validate-schema fail (tag ไม่อยู่บน dev)
+    if: >-
+      always() && !failure() && !cancelled() &&
+      (startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch')
+    outputs:
+      image_tag: ${{ steps.image-tag.outputs.tag }}
+    steps:
+      - name: Resolve image tag (deploy1.2.3 / v1.2.3 → v1.2.3, ว่าง → latest)
+        id: image-tag
+        run: |
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            RAW="${{ github.event.inputs.version }}"
+          else
+            RAW="${{ github.ref_name }}"
+          fi
+          TAG="latest"
+          if [ -n "$RAW" ]; then
+            TAG="${RAW#deploy}"
+            TAG="${TAG#v}"
+            TAG="v$TAG"
+          fi
+          echo "tag=$TAG" >> $GITHUB_OUTPUT
+          echo "Reuse image จาก build.yml: ${{ env.REGISTRY_URL }}/${{ env.WEB_IMAGE_NAME }}:$TAG"
+
+      - name: Log in to Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY_URL }}
+          username: ${{ env.REGISTRY_USERNAME }}
+          password: ${{ env.REGISTRY_PASSWORD }}
+
+      - name: Verify image exists in registry
+        run: |
+          if ! docker manifest inspect "${{ env.REGISTRY_URL }}/${{ env.WEB_IMAGE_NAME }}:${{ steps.image-tag.outputs.tag }}" > /dev/null; then
+            echo "❌ Image ${{ env.REGISTRY_URL }}/${{ env.WEB_IMAGE_NAME }}:${{ steps.image-tag.outputs.tag }} ไม่มีใน registry"
+            echo "workflow นี้ไม่ build เอง — push tag ${{ steps.image-tag.outputs.tag }} ก่อน เพื่อให้ build.yml build + push image ให้"
+            exit 1
+          fi
+          echo "✅ Image found — deploy ด้วย image เดียวกับ build.yml"
+
+      - name: Deploy web on UAT server
+        uses: appleboy/ssh-action@v1.2.1
+        with:
+          host: ${{ env.DEPLOY_HOST }}
+          port: ${{ vars.SSH_DEPLOY_PORT }}
+          username: ${{ env.DEPLOY_USER }}
+          password: ${{ secrets.SSH_DEPLOY_PASSWORD }}
+          script: |
+            cd ~/repo
+
+            chmod +x ./replace-env.sh ./deploy.sh
+            ./replace-env.sh ECOURT_NOTE_TAG "${{ steps.image-tag.outputs.tag }}"
+            ./deploy.sh
+
+  notify:
+    name: Notify Deployment Status
+    runs-on: ubuntu-latest
+    needs: [deploy]
+    if: always()
+    steps:
+      - name: Send Discord notification - Success
+        if: ${{ needs.deploy.result == 'success' }}
+        run: |
+          curl -H "Content-Type: application/json" \
+            -d '{
+              "embeds": [{
+                "title": "✅ eCourt Note UAT Deployment Successful",
+                "description": "eCourt Note Web deployed to UAT server",
+                "color": 3066993,
+                "fields": [
+                  {
+                    "name": "Environment",
+                    "value": "UAT",
+                    "inline": true
+                  },
+                  {
+                    "name": "Tag",
+                    "value": "${{ github.event_name == 'workflow_dispatch' && github.event.inputs.version || github.ref_name }}",
+                    "inline": true
+                  },
+                  {
+                    "name": "Commit",
+                    "value": "`${{ github.sha }}`",
+                    "inline": false
+                  },
+                  {
+                    "name": "Image Tag",
+                    "value": "`${{ needs.deploy.outputs.image_tag }}`",
+                    "inline": true
+                  },
+                  {
+                    "name": "Web URL",
+                    "value": "${{ env.NEXT_PUBLIC_APP_URL }}",
+                    "inline": false
+                  },
+                  {
+                    "name": "Deployed By",
+                    "value": "${{ github.actor }}",
+                    "inline": true
+                  }
+                ],
+                "footer": {
+                  "text": "eCourt Note CD Pipeline"
+                },
+                "timestamp": "'"$(date -u +%Y-%m-%dT%H:%M:%S.000Z)"'"
+              }]
+            }' \
+            ${{ env.DISCORD_WEBHOOK_URL }}
+
+      - name: Send Discord notification - Failure
+        if: ${{ needs.deploy.result == 'failure' }}
+        run: |
+          curl -H "Content-Type: application/json" \
+            -d '{
+              "embeds": [{
+                "title": "❌ eCourt Note UAT Deployment Failed",
+                "description": "Failed to deploy eCourt Note Web to UAT server",
+                "color": 15158332,
+                "fields": [
+                  {
+                    "name": "Environment",
+                    "value": "UAT",
+                    "inline": true
+                  },
+                  {
+                    "name": "Tag",
+                    "value": "${{ github.ref_name }}",
+                    "inline": true
+                  },
+                  {
+                    "name": "Commit",
+                    "value": "`${{ github.sha }}`",
+                    "inline": false
+                  },
+                  {
+                    "name": "Failed Job",
+                    "value": "Deploy",
+                    "inline": true
+                  },
+                  {
+                    "name": "Deployed By",
+                    "value": "${{ github.actor }}",
+                    "inline": true
+                  }
+                ],
+                "footer": {
+                  "text": "eCourt Note CD Pipeline"
+                },
+                "timestamp": "'"$(date -u +%Y-%m-%dT%H:%M:%S.000Z)"'"
+              }]
+            }' \
+            ${{ env.DISCORD_WEBHOOK_URL }}
+          exit 1

.gitignore

@@ -28,3 +28,17 @@ next-env.d.ts
 
 # Claude Code
 .claude/settings.local.json
+# N4: ไฟล์ที่ผู้ใช้อัปโหลดผ่านหน้ารายการ (รันไทม์ — ไม่เข้า repo)
+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

@@ -12,14 +12,14 @@
 - **Bookmark** — จดตำแหน่ง (หน้า + % ความสูง) กดแล้ว smooth-scroll กลับตำแหน่งเดิม
 - **Realtime sync** — เปิด 2 แท็บ วาดในแท็บ A แท็บ B เห็นทันทีผ่าน SSE (`EventSource` ต่อใหม่อัตโนมัติเมื่อขาด)
 - **Page Virtualization** — render เฉพาะหน้าใน viewport ± 1 หน้า ไฟล์หลายสิบหน้าเลื่อนลื่น
-- ไม่มีระบบ login — anonymous identity เก็บใน `localStorage` (ปุ่มลบแสดงเฉพาะรายการของตัวเอง)
+- หน้า login (mock e-Court — dropdown `user1`–`user5` รหัสผ่านกลาง `Demo1234`) — identity จาก cookie `oacCase` บังคับทุกหน้า (ปุ่มลบ/แก้ไขแสดงเฉพาะรายการของตัวเอง)
 
 ## สิ่งที่ต้องมี (Prerequisites)
 
 | เครื่องมือ | เวอร์ชันที่ใช้พัฒนา/ทดสอบ | หมายเหตุ |
 |---|---|---|
 | 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 รันซ้ำได้):
+ไฟล์ตัวอย่างอยู่ที่ `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 — คลิกไฟล์เพื่อเข้าหน้า annotate
+เปิด http://localhost:3000/docedit/note — คลิกไฟล์เพื่อเข้าหน้า annotate หรืออัปโหลดไฟล์ใหม่ (PDF/รูปภาพ ≤ 100MB) ผ่านฟอร์มบนหน้ารายการ (N4 — ไฟล์เก็บที่ `public/note/uploads/`)
 
 ## การใช้งานบนหน้า annotate
 
@@ -85,22 +93,79 @@ npm run dev
 | bookmark+ | เพิ่ม bookmark ที่ตำแหน่งกึ่งกลางจอปัจจุบัน |
 | zoom − / + | สเกล 50%–300% (annotation ทั้งหมด scale ตามเพราะเก็บเป็น %) |
 
-Sidebar ซ้าย: แท็บ Bookmarks / Annotations — คลิกรายการเพื่อเลื่อนกลับไปตำแหน่งนั้น และมีปุ่มลบเฉพาะรายการของตัวเอง (anonymous identity จาก `localStorage`)
+Sidebar ซ้าย: แท็บ Bookmarks / Annotations — คลิกรายการเพื่อเลื่อนกลับไปตำแหน่งนั้น และมีปุ่มลบเฉพาะรายการของตัวเอง (identity จากหน้า login)
 
 ทดสอบ 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,14 +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             anonymous identity (localStorage)
+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              รายการไฟล์
-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 ตัวอย่าง
+public/note/samples/      ไฟล์ตัวอย่าง (PDF + รูปภาพ) — seed ด้วย npm run seed-samples
+public/note/uploads/      ไฟล์ที่อัปโหลดผ่านหน้ารายการ (N4)
 ```

app/actions/annotations.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import { revalidatePath } from "next/cache";
-import { and, asc, desc, eq, or, sql } from "drizzle-orm";
+import { and, asc, desc, eq, gte, lte, or, sql } from "drizzle-orm";
 
 import { publishAnnotateEvent } from "@/lib/annotate-events";
 import { db } from "@/db";
@@ -30,6 +30,11 @@ import {
   type StampData,
   type TextboxData,
 } from "@/db/schema";
+import {
+  MAX_BOOKMARK_NOTE_CHARS,
+  MAX_BOOKMARK_TITLE_CHARS,
+} from "@/utils/bookmark-limits";
+import { rotatedRectAABB, stampRect } from "@/utils/geometry";
 
 // ─── Input types (client ใช้ตอนเรียก action) ────────────────────────────────
 
@@ -40,12 +45,17 @@ export type CreateAnnotationInput = {
   userName: string;
   type: AnnotationType;
   data: AnnotationData;
+  /** id ที่ client สร้าง (crypto.randomUUID) ของ optimistic row — ให้ server ใช้ id เดียวกัน
+   *  จะได้ไม่เห็นรายการ duplicate ชั่วขณะ (row ชั่วคราว + row จริงคนละ id) — ไม่ส่ง = สร้างใหม่ */
+  id?: string;
 };
 
 export type CreateBookmarkInput = {
   fileId: string;
   pageIndex: number;
   userId: string;
+  /** N6: ชื่อผู้บันทึก — แสดงในผลค้นหา bookmark */
+  userName: string;
   title: string;
   /** % ของความสูงหน้า (0–100) */
   yOffset: number;
@@ -83,8 +93,6 @@ const SHAPE_KINDS: readonly string[] = ["rect", "ellipse", "line", "arrow"];
 // ตรง ๆ ด้วยข้อความขนาดหลาย MB จน JSONB บวมและ SSE event ใหญ่ผิดปกติ
 const MAX_USER_NAME_CHARS = 100;
 const MAX_TEXT_CHARS = 5_000; // message/text/note/label ของ annotation + reply
-const MAX_BOOKMARK_TITLE_CHARS = 120; // ให้ตรงค่าที่ UI ตัดไว้
-const MAX_BOOKMARK_NOTE_CHARS = 200;
 const MAX_QUERY_CHARS = 200; // คำค้นหา (F14)
 
 function fieldError(field: string, expect: string): never {
@@ -134,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>;
@@ -331,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" ||
@@ -343,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": {
@@ -392,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> {
@@ -407,11 +460,19 @@ export async function createAnnotation(input: CreateAnnotationInput): Promise<An
   }
   const type = raw.type as AnnotationType;
   const data = validateAnnotationData(type, raw?.data);
+  // id จาก client (ถ้ามา) = id ของ optimistic row — SSE event/dedupe ทุกฝั่งเทียบ id เดียวกัน
+  const id = typeof raw?.id === "string" ? vUuid(raw.id, "id") : undefined;
 
-  const [row] = await db
-    .insert(annotations)
-    .values({ fileId, pageIndex, userId, userName, type, data })
-    .returning();
+  const values: typeof annotations.$inferInsert = {
+    fileId,
+    pageIndex,
+    userId,
+    userName,
+    type,
+    data,
+  };
+  if (id) values.id = id;
+  const [row] = await db.insert(annotations).values(values).returning();
   const dto = toAnnotationDTO(row);
   publishAnnotateEvent(fileId, { table: "annotations", action: "create", row: dto });
   revalidateFilePages(fileId);
@@ -695,6 +756,7 @@ export async function createBookmark(input: CreateBookmarkInput): Promise<Bookma
   const fileId = vUuid(raw?.fileId, "fileId");
   const pageIndex = vPageIndex(raw?.pageIndex);
   const userId = vString(raw?.userId, "userId");
+  const userName = vString(raw?.userName, "userName", MAX_USER_NAME_CHARS);
   const title = vString(raw?.title, "title", MAX_BOOKMARK_TITLE_CHARS);
   if (
     typeof raw?.yOffset !== "number" ||
@@ -728,7 +790,7 @@ export async function createBookmark(input: CreateBookmarkInput): Promise<Bookma
 
     const [inserted] = await tx
       .insert(bookmarks)
-      .values({ fileId, pageIndex, userId, title, yOffset, parentId, note })
+      .values({ fileId, pageIndex, userId, userName, title, yOffset, parentId, note })
       .returning();
     return inserted;
   });
@@ -979,3 +1041,117 @@ export async function searchAnnotations(fileId: string, q: string): Promise<Anno
     .orderBy(asc(annotations.createdAt));
   return rows.map(toAnnotationDTO);
 }
+
+// ─── Search bookmarks (N6 — requirement 5.3.12) ─────────────────────────────
+
+export type SearchBookmarksInput = {
+  fileId: string;
+  /** คำค้น — ILIKE บน title + note (ไม่ส่ง/ว่าง = ไม่จำกัด ถ้ามีเงื่อนไขอื่น) */
+  q?: string;
+  /** ช่วงหน้า 1-based ตรงที่ผู้ใช้เห็น ("หน้า N") — ส่งฝั่งเดียวได้ */
+  pageFrom?: number;
+  pageTo?: number;
+  /** userId ของผู้บันทึก */
+  userId?: string;
+  /** ช่วงวันที่ที่บันทึก — YYYY-MM-DD ตีความเป็นเขตเวลา +07:00 คงที่ (ไทยไม่มี DST) */
+  dateFrom?: string;
+  dateTo?: string;
+};
+
+const DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
+
+/** หน้า (1-based) ของเงื่อนไขค้นหา — optional, integer ≥ 1 */
+function vSearchPage(v: unknown, field: string): number | undefined {
+  if (v === undefined || v === null || v === "") return undefined;
+  if (typeof v !== "number" || !Number.isInteger(v) || v < 1) {
+    fieldError(field, "เป็นจำนวนเต็ม ≥ 1");
+  }
+  return v;
+}
+
+/** วันที่ (YYYY-MM-DD) ของเงื่อนไขค้นหา — optional, เช็ครูปแบบก่อน (แปลงเป็นเวลาทีหลัง swap) */
+function vSearchDateString(v: unknown, field: string): string | undefined {
+  if (v === undefined || v === null || v === "") return undefined;
+  if (typeof v !== "string" || !DATE_ONLY_RE.test(v)) {
+    fieldError(field, "เป็นวันที่รูปแบบ YYYY-MM-DD");
+  }
+  return v;
+}
+
+/** แปลง YYYY-MM-DD → ขอบเขตเวลา ต้นวัน/ปลายวัน เขตเวลา +07:00 คงที่ (ไทยไม่มี DST) */
+function dateBound(v: string, endOfDay: boolean, field: string): Date {
+  const d = new Date(`${v}T${endOfDay ? "23:59:59.999" : "00:00:00"}+07:00`);
+  if (Number.isNaN(d.getTime())) {
+    fieldError(field, "เป็นวันที่ที่มีอยู่จริง");
+  }
+  return d;
+}
+
+/**
+ * ค้นหา bookmark พร้อมเงื่อนไข — ทุกเงื่อนไข optional แต่ต้องมีอย่างน้อยหนึ่งอย่าง
+ * (คำค้น/ช่วงหน้า/ผู้บันทึก/ช่วงวันที่ รวมกันด้วย AND); คู่ช่วงกลับด้าน (from > to)
+ * = swap เงียบ ๆ — read-only จึงไม่ publish event/ไม่ revalidatePath
+ */
+export async function searchBookmarks(input: SearchBookmarksInput): Promise<BookmarkDTO[]> {
+  const raw = input as unknown as Record<string, unknown> | null | undefined;
+  const fid = vUuid(raw?.fileId, "fileId");
+  const q = typeof raw?.q === "string" && raw.q.trim() !== ""
+    ? vString(raw.q, "q", MAX_QUERY_CHARS)
+    : undefined;
+  const userId = typeof raw?.userId === "string" && raw.userId !== ""
+    ? vString(raw.userId, "userId")
+    : undefined;
+  let pageFrom = vSearchPage(raw?.pageFrom, "pageFrom");
+  let pageTo = vSearchPage(raw?.pageTo, "pageTo");
+  if (pageFrom !== undefined && pageTo !== undefined && pageFrom > pageTo) {
+    [pageFrom, pageTo] = [pageTo, pageFrom];
+  }
+  // N6: swap กลับด้านต้องทำที่ "วัน" (string) ก่อนคำนวณขอบเขตเวลา — swap ที่ Date
+  // แล้วขอบเขตปลายวัน/ต้นวันจะติดกันเหลือ 1 ms (เช่น 16→15 กลายเป็น [15T23:59:59.999,
+  // 16T00:00]) จนช่วงกลับด้านได้ผล 0 รายการเสมอ
+  let fromDate = vSearchDateString(raw?.dateFrom, "dateFrom");
+  let toDate = vSearchDateString(raw?.dateTo, "dateTo");
+  if (fromDate !== undefined && toDate !== undefined && fromDate > toDate) {
+    [fromDate, toDate] = [toDate, fromDate];
+  }
+  const dateFrom = fromDate !== undefined ? dateBound(fromDate, false, "dateFrom") : undefined;
+  const dateTo = toDate !== undefined ? dateBound(toDate, true, "dateTo") : undefined;
+
+  if (
+    q === undefined &&
+    userId === undefined &&
+    pageFrom === undefined &&
+    pageTo === undefined &&
+    dateFrom === undefined &&
+    dateTo === undefined
+  ) {
+    throw new Error("ต้องระบุเงื่อนไขอย่างน้อยหนึ่งอย่าง (คำค้น/ช่วงหน้า/ผู้บันทึก/ช่วงวันที่)");
+  }
+
+  const esc = q !== undefined ? q.replace(/[\\%_]/g, (c) => `\\${c}`) : "";
+  const pattern = `%${esc}%`;
+
+  const rows = await db
+    .select()
+    .from(bookmarks)
+    .where(
+      and(
+        eq(bookmarks.fileId, fid),
+        // note เป็น NULL ได้ — OR(title ILIKE, NULL) = ผลของ title ตาม SQL semantics (ถูกต้อง)
+        q !== undefined
+          ? or(
+              sql`${bookmarks.title} ILIKE ${pattern}`,
+              sql`${bookmarks.note} ILIKE ${pattern}`,
+            )
+          : undefined,
+        userId !== undefined ? eq(bookmarks.userId, userId) : undefined,
+        pageFrom !== undefined ? gte(bookmarks.pageIndex, pageFrom - 1) : undefined,
+        pageTo !== undefined ? lte(bookmarks.pageIndex, pageTo - 1) : undefined,
+        dateFrom !== undefined ? gte(bookmarks.createdAt, dateFrom) : undefined,
+        dateTo !== undefined ? lte(bookmarks.createdAt, dateTo) : undefined,
+      ),
+    )
+    // ลำดับเดียวกับที่ต้นไม้ bookmark แสดงบนจอ (N5)
+    .orderBy(asc(bookmarks.pageIndex), asc(bookmarks.yOffset), asc(bookmarks.createdAt));
+  return rows.map(toBookmarkDTO);
+}

app/actions/auth.ts

@@ -0,0 +1,41 @@
+"use server";
+
+// mock login e-Court: รับเฉพาะผู้ใช้ใน MOCK_USERS (user1–user5) + Demo1234
+// → ตั้ง cookie oacCase ตาม format จริง (identity ของแอปอ่านผ่าน lib/session.ts
+// — บังคับด้วย middleware.ts)
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+import { buildOacCaseCookie, MOCK_USERS, OAC_CASE_COOKIE } from "@/utils/user";
+
+const MOCK_PASSWORD = "Demo1234";
+
+export async function login(
+  username: string,
+  password: string,
+): Promise<{ ok: true } | { ok: false; error: string }> {
+  // mock ตอบเร็วกว่าตา — หน่วงเล็กน้อยให้เห็นสถานะ "กำลังตรวจสอบ…"
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  const name = username.trim();
+  // username มาจาก dropdown เลือกผิดไม่ได้ — เช็ครายชื่อฝั่ง server เป็น defense กัน hand-craft
+  if (!MOCK_USERS.includes(name) || password !== MOCK_PASSWORD) {
+    return { ok: false, error: "รหัสผ่านไม่ถูกต้อง" };
+  }
+  // u_userid ต่างกันต่อคน (= u_userlogin) — สิทธิ์ "แก้ไขได้เฉพาะของตัวเอง" (guard ด้วย
+  // userId) ต้องแยกกันจริงทั้ง 5 คน ห้ามแชร์ค่าเดียว
+  cookies().set(OAC_CASE_COOKIE, buildOacCaseCookie(name, name), {
+    httpOnly: true,
+    sameSite: "lax",
+    path: "/",
+    maxAge: 8 * 60 * 60,
+  });
+  return { ok: true };
+}
+
+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("/note/login");
+}

app/actions/files.ts

@@ -0,0 +1,113 @@
+"use server";
+
+// N4 — อัปโหลดไฟล์เอกสารแบบง่าย (PDF/jpg/jpeg/png/tif/tiff) ผ่านหน้ารายการ
+// เขียนไฟล์**ใหม่**ที่ 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";
+
+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", "note", "uploads");
+
+export type UploadFileResult =
+  | { ok: true; fileId: string; title: string }
+  | { ok: false; error: string };
+
+/** นามสกุล (ตัวเล็ก มีจุด) จากชื่อไฟล์ที่ browser ส่ง — ต้องอยู่ใน whitelist */
+function allowedExt(name: string): string | null {
+  const dot = name.lastIndexOf(".");
+  if (dot <= 0) return null;
+  const ext = name.slice(dot).toLowerCase();
+  return SAMPLE_FILE_EXTENSIONS.includes(ext) ? ext : null;
+}
+
+/** title สำหรับแสดงในรายการ: ชื่อไฟล์เดิม ตัด path ที่ฝังมา จำกัดความยาว */
+function sanitizeTitle(name: string): string {
+  const base = name.split(/[\\/]/).pop() ?? name;
+  return base.trim().slice(0, 200) || "ไฟล์ไม่มีชื่อ";
+}
+
+/** ตรวจ magic bytes ตรงกับ extension — กันไฟล์เปลี่ยนชื่อนามสกุล/ไฟล์เสี้ยวจากการโอน
+ *  เข้าระบบแล้วไปพังทีหลังทั้ง viewer (ค้างโหลด) และ export (500) */
+function matchesSignature(bytes: Buffer, ext: string): boolean {
+  switch (ext) {
+    case ".pdf":
+      return bytes.subarray(0, 5).toString("latin1") === "%PDF-";
+    case ".jpg":
+    case ".jpeg":
+      return bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff;
+    case ".png":
+      return (
+        bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47
+      );
+    case ".tif":
+    case ".tiff":
+      return (
+        (bytes[0] === 0x49 && bytes[1] === 0x49 && bytes[2] === 0x2a && bytes[3] === 0x00) || // II*\0
+        (bytes[0] === 0x4d && bytes[1] === 0x4d && bytes[2] === 0x00 && bytes[3] === 0x2a) // MM\0*
+      );
+    default:
+      return false;
+  }
+}
+
+export async function uploadFile(formData: FormData): Promise<UploadFileResult> {
+  const file = formData.get("file");
+  if (!(file instanceof File)) {
+    return { ok: false, error: "เลือกไฟล์ก่อนอัปโหลด" };
+  }
+  if (file.size === 0) {
+    return { ok: false, error: "ไฟล์ว่าง (0 ไบต์) — เลือกไฟล์ที่สมบูรณ์" };
+  }
+  // ชื่อไฟล์ที่ browser ส่งมาโดน undici ถอดรหัสเป็น latin1 (ชื่อไทยเพี้ยน) —
+  // ถอดกลับก่อนใช้ทั้งตรวจ extension และตั้ง title
+  const fileName = decodeUploadFilename(file.name);
+  const ext = allowedExt(fileName);
+  if (!ext) {
+    return {
+      ok: false,
+      error: `รองรับเฉพาะไฟล์ ${SAMPLE_FILE_EXTENSIONS.join(" / ")}`,
+    };
+  }
+  if (file.size > MAX_UPLOAD_BYTES) {
+    return { ok: false, error: "ไฟล์ใหญ่เกิน 100MB" };
+  }
+
+  // uuid เป็นทั้งชื่อไฟล์บนดิสก์และ id ของ row — ไม่ใช้ชื่อผู้ใช้ตกแต่ง path เด็ดขาด
+  const id = randomUUID();
+  const diskName = `${id}${ext}`;
+  const bytes = Buffer.from(await file.arrayBuffer());
+  if (!matchesSignature(bytes, ext)) {
+    return {
+      ok: false,
+      error: "เนื้อไฟล์ไม่ตรงกับนามสกุล (ไฟล์อาจเสียหรือถูกเปลี่ยนชื่อ) — ตรวจไฟล์แล้วลองใหม่",
+    };
+  }
+
+  await mkdir(UPLOAD_DIR, { recursive: true });
+  const diskPath = path.join(UPLOAD_DIR, diskName);
+  await writeFile(diskPath, bytes);
+
+  const title = sanitizeTitle(fileName);
+  const pdfUrl = `/uploads/${diskName}`;
+  const typeId = normDocumentGroup(formData.get("typeId"));
+  try {
+    await db.insert(files).values({ id, title, pdfUrl, typeId });
+  } catch (err) {
+    // DB fail หลังเขียนไฟล์ — เก็บกวาดไฟล์ก่อนโยนต่อ กันไฟล์กำพร้าไม่มี row ชี้ (ไม่มีกลไกเก็บอื่น)
+    await unlink(diskPath).catch(() => undefined);
+    throw err;
+  }
+
+  revalidatePath("/note");
+  return { ok: true, fileId: id, title };
+}

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

@@ -1,118 +0,0 @@
-import Link from "next/link";
-import { asc, eq } from "drizzle-orm";
-import { notFound } from "next/navigation";
-import { ArrowLeft, MapPin } from "lucide-react";
-
-import { db } from "@/db";
-import { annotations, files, toAnnotationDTO, type AnnotationDTO } from "@/db/schema";
-import { annotationNote, annotationPreviewText, annotationTypeLabel } from "@/utils/annotation-display";
-
-// หน้าสรุปหมายเหตุ (F15/D2) — server component รวมทุก annotation (ทุกผู้ใช้)
-// จัดกลุ่มตามหน้า พร้อมปุ่มกระโดดเป็น deep link `/annotate/<id>?ann=<uuid>` (F12)
-
-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 const dynamic = "force-dynamic";
-
-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 rows = await db
-    .select()
-    .from(annotations)
-    .where(eq(annotations.fileId, id))
-    .orderBy(asc(annotations.pageIndex), asc(annotations.createdAt));
-  const dtos = rows.map(toAnnotationDTO);
-
-  // จัดกลุ่มตามหน้า (เรียงหน้ามากไปน้อยไม่เกี่ยว — เดินตามลำดับหน้าเสมอ)
-  const byPage = new Map<number, AnnotationDTO[]>();
-  for (const a of dtos) {
-    const list = byPage.get(a.pageIndex);
-    if (list) list.push(a);
-    else byPage.set(a.pageIndex, [a]);
-  }
-  const pages = Array.from(byPage.entries()).sort((x, y) => x[0] - y[0]);
-
-  return (
-    <main className="mx-auto max-w-3xl p-6">
-      <div className="flex flex-wrap items-center gap-3">
-        <h1 className="min-w-0 flex-1 truncate text-lg font-bold text-primary">
-          สรุปหมายเหตุ — {file.title}
-        </h1>
-        <Link
-          href={`/annotate/${id}`}
-          className="flex items-center gap-1 rounded-lg border border-slate-300 px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-100"
-        >
-          <ArrowLeft className="h-3.5 w-3.5" />
-          กลับหน้าอ่าน
-        </Link>
-        {/* F16/D3: export สรุปเป็น CSV (UTF-8 BOM) */}
-        <a
-          href={`/api/annotations/export-csv?fileId=${id}`}
-          className="rounded-lg border border-slate-300 px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-100"
-        >
-          Export CSV
-        </a>
-      </div>
-
-      {pages.length === 0 ? (
-        <p className="mt-10 rounded border border-dashed p-6 text-center text-sm text-slate-500">
-          ยังไม่มี annotation ในไฟล์นี้
-        </p>
-      ) : (
-        pages.map(([pageIndex, items]) => (
-          <section key={pageIndex} className="mt-6">
-            <h2 className="border-b border-slate-200 pb-1 text-sm font-semibold">
-              หน้า {pageIndex + 1}
-              <span className="ml-2 text-xs font-normal text-slate-400">
-                {items.length} รายการ
-              </span>
-            </h2>
-            <ul className="mt-2 divide-y divide-slate-100">
-              {items.map((a) => (
-                <li key={a.id} className="flex items-start gap-3 py-2">
-                  <span className="min-w-0 flex-1">
-                    <span className="block text-xs">
-                      <span className="font-medium">{annotationTypeLabel(a)}</span>
-                      {a.type === "COMMENT" && a.resolved && (
-                        <span className="ml-2 rounded bg-emerald-50 px-1.5 py-0.5 text-[10px] text-emerald-600">
-                          จัดการแล้ว
-                        </span>
-                      )}
-                      <span className="ml-2 text-slate-400">{a.userName}</span>
-                    </span>
-                    <span className="mt-0.5 block whitespace-pre-wrap break-words text-sm">
-                      {annotationPreviewText(a)}
-                    </span>
-                    {annotationNote(a) && (
-                      <span className="mt-0.5 block whitespace-pre-wrap break-words text-xs text-slate-500">
-                        โน้ต: {annotationNote(a)}
-                      </span>
-                    )}
-                  </span>
-                  {/* ปุ่มกระโดด = deep link ไปยัง annotation นั้น (F12 รับ ?ann= ตอน mount) */}
-                  <Link
-                    href={`/annotate/${id}?ann=${a.id}`}
-                    className="flex shrink-0 items-center gap-1 rounded-md border border-slate-300 px-2 py-1 text-[11px] text-slate-600 hover:bg-slate-100"
-                  >
-                    <MapPin className="h-3 w-3" />
-                    ไปตำแหน่ง
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </section>
-        ))
-      )}
-    </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/annotations/export/route.ts

@@ -1,465 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-
-import fontkit from "@pdf-lib/fontkit";
-import { PDFDocument, LineCapStyle, rgb, type PDFFont } from "pdf-lib";
-import { asc, eq } from "drizzle-orm";
-
-import { db } from "@/db";
-import { PdfPathError, readPublicPdf } from "@/lib/server-pdf";
-import {
-  annotations,
-  files,
-  toAnnotationDTO,
-  type AnnotationType,
-  type CommentData,
-  type DrawData,
-  type HighlightData,
-  type RedactionData,
-  type ShapeData,
-  type StampData,
-  type TextboxData,
-} from "@/db/schema";
-import {
-  displayRectToPdf,
-  displaySize,
-  displayToPdfPoint,
-  encodeRFC5987,
-  hexToRgb01,
-  wrapStyledText,
-  wrapTextByWidth,
-  type Rot,
-  type StyledRun,
-} from "@/utils/pdf-export";
-import type { Rect } from "@/db/schema";
-import { toPx, type Point, type Size } from "@/utils/coordinates";
-import { STAMP_HEIGHT_RATIO, textboxMaxWidthPct } from "@/utils/geometry";
-import { STAMP_COLOR, effectiveDrawOpacity, stampFitFontSize } from "@/utils/annotation-display";
-
-// Export PDF ฝัง annotation (F8/C1 — PLAN-FEAT.md §3)
-// - อ่าน PDF ต้นฉบับจาก public/ แบบ **อ่านอย่างเดียว** (invariant #1) — pdf-lib load
-//   เป็นสำเนาในหน่วยความจำ แล้ว save() คืน bytes ใหม่ ไม่เขียนทับไฟล์เดิม
-// - วาดต่อหน้าตามลำดับ: HIGHLIGHT → DRAW → SHAPE → REDACTION (ดำทึบ) → COMMENT หมุด
-//   (+ข้อความถ้ามีฟอนต์ Sarabun — D5: ไม่มีฟอนต์ต้องไม่พัง)
-
-const UUID_RE =
-  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-
-const SARABUN_REL = path.join("fonts", "Sarabun-Regular.ttf");
-
-// ลำดับวาดต่อหน้าตามสเปก §3 F8 ข้อ 3: HIGHLIGHT → DRAW → SHAPE → REDACTION → COMMENT
-// (REDACTION ดำทึบต้องทับทุกอย่างที่สร้างก่อนหน้า และหมุด COMMENT ต้องไม่ถูกกลบ — D4)
-const TYPE_ORDER: Record<AnnotationType, number> = {
-  HIGHLIGHT: 0,
-  DRAW: 1,
-  SHAPE: 2,
-  REDACTION: 3,
-  COMMENT: 4,
-  TEXTBOX: 5,
-  STAMP: 6,
-};
-
-export async function GET(req: Request) {
-  const url = new URL(req.url);
-  const fileId = 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 });
-
-  // Guard path traversal: pdfUrl จาก DB ต้อง resolve แล้วอยู่ใน public/ เท่านั้น (§5)
-  let srcBytes: Buffer;
-  try {
-    srcBytes = readPublicPdf(file.pdfUrl);
-  } catch (err) {
-    if (err instanceof PdfPathError) {
-      return new Response("เส้นทางไฟล์ไม่ถูกต้อง", { status: 403 });
-    }
-    return new Response("อ่านไฟล์ PDF ต้นฉบับไม่ได้", { status: 404 });
-  }
-
-  const doc = await PDFDocument.load(srcBytes);
-  doc.registerFontkit(fontkit);
-
-  // D5: ฟอนต์ไทย optional — ไม่มีก็ export สำเร็จ (COMMENT เป็นหมุดอย่างเดียว)
-  let thaiFont: PDFFont | null = null;
-  const fontPath = path.join(process.cwd(), "public", SARABUN_REL);
-  if (fs.existsSync(fontPath)) {
-    try {
-      thaiFont = await doc.embedFont(fs.readFileSync(fontPath), { subset: true });
-    } catch (err) {
-      console.error("embed Sarabun ไม่สำเร็จ — ไปทาง fallback หมุดอย่างเดียว", err);
-      thaiFont = null;
-    }
-  }
-  // TEXTBOX ตัวหนา — optional เช่นกัน: ไม่มี Sarabun-Bold.ttf ก็ fallback เป็น Regular
-  // (บนจอ font-weight 700 อยู่แล้ว แต่ export ต้องมีไฟล์น้ำหนักหนาจริงจึงตรงกัน)
-  let thaiBoldFont: PDFFont | null = null;
-  const boldFontPath = path.join(process.cwd(), "public", "fonts", "Sarabun-Bold.ttf");
-  if (fs.existsSync(boldFontPath)) {
-    try {
-      thaiBoldFont = await doc.embedFont(fs.readFileSync(boldFontPath), { subset: true });
-    } catch (err) {
-      console.error("embed Sarabun-Bold ไม่สำเร็จ — ตัวหนา fallback เป็น Regular", err);
-      thaiBoldFont = null;
-    }
-  }
-
-  const rows = await db
-    .select()
-    .from(annotations)
-    .where(eq(annotations.fileId, fileId))
-    .orderBy(asc(annotations.createdAt));
-  // sort แยกตามชนิดก่อนวาด (stable ภายในชนิดด้วย createdAt) — กัน REDACTION เก่าโดน
-  // HIGHLIGHT/DRAW ที่สร้างทีหลังทับจนข้อความง้ำกลับมาอ่านได้ (D4)
-  const dtos = rows
-    .map(toAnnotationDTO)
-    .sort((a, b) => TYPE_ORDER[a.type] - TYPE_ORDER[b.type]);
-
-  for (const a of dtos) {
-    const page = doc.getPage(Math.min(a.pageIndex, doc.getPageCount() - 1));
-    const pageSize = page.getSize();
-    const size: Size = { width: pageSize.width, height: pageSize.height };
-    const rotation = (((page.getRotation().angle % 360) + 360) % 360) as Rot;
-    const display = displaySize(size, rotation);
-
-    // % ของหน้า (บนจอ) → px บนจอ — ผ่าน utils/coordinates เท่านั้น (invariant #2)
-    const px = toPx;
-    const pxPoint = (p: Point): Point => ({
-      x: px(p.x, display.width),
-      y: px(p.y, display.height),
-    });
-    const pxRect = (r: Rect): Rect => ({
-      x: px(r.x, display.width),
-      y: px(r.y, display.height),
-      width: px(r.width, display.width),
-      height: px(r.height, display.height),
-    });
-    const toPdf = (p: Point) => displayToPdfPoint(p, size, rotation);
-    // strokeWidth เป็น % ของความกว้างหน้า **บนจอ**
-    const thickness = (swPct: number) => px(swPct, display.width);
-
-    // AnnotationDTO เป็น flat type (type/data แยกกัน) → cast ตาม case ที่เช็คแล้ว (pattern เดียวกับ sidebar)
-    switch (a.type) {
-      case "HIGHLIGHT": {
-        const d = a.data as HighlightData;
-        const { r, g, b } = hexToRgb01(d.color);
-        const col = rgb(r, g, b);
-        const st = d.style ?? "highlight";
-        // ความทึบของผู้ใช้ (0–1, ไม่มี = ทึบเต็ม) — ไฮไลต์ทึบคูณเข้าค่าเดิม 0.35
-        // (สอดคล้อง mix-blend-multiply บนจอ), เส้นทุกแบบใช้ตรง ๆ
-        const op = d.opacity ?? 1;
-        for (const rPct of d.rects) {
-          const rect = displayRectToPdf(pxRect(rPct), size, rotation);
-          if (st === "underline") {
-            // เส้นใต้ที่ขอบล่างของบรรทัด (rect.y ของ PDF = ขอบล่างบนจอ)
-            page.drawLine({
-              start: { x: rect.x, y: rect.y },
-              end: { x: rect.x + rect.width, y: rect.y },
-              thickness: 1,
-              color: col,
-              opacity: op,
-              lineCap: LineCapStyle.Round,
-            });
-          } else if (st === "strikethrough") {
-            const y = rect.y + rect.height / 2;
-            page.drawLine({
-              start: { x: rect.x, y },
-              end: { x: rect.x + rect.width, y },
-              thickness: 1,
-              color: col,
-              opacity: op,
-              lineCap: LineCapStyle.Round,
-            });
-          } else if (st === "squiggle") {
-            // เส้นขยุกขยิก — sine เล็ก ๆ ระดับขอบล่าง วาดต่อเป็นท่อนสั้น ๆ
-            let prev = { x: rect.x, y: rect.y + 1.5 };
-            for (let t = 2; t <= rect.width; t += 2) {
-              const p = {
-                x: rect.x + t,
-                y: rect.y + 1.5 * Math.sin((t / 6) * Math.PI * 2),
-              };
-              page.drawLine({
-                start: prev,
-                end: p,
-                thickness: 1,
-                color: col,
-                opacity: op,
-                lineCap: LineCapStyle.Round,
-              });
-              prev = p;
-            }
-          } else {
-            page.drawRectangle({
-              x: rect.x,
-              y: rect.y,
-              width: rect.width,
-              height: rect.height,
-              color: col,
-              opacity: 0.35 * op,
-            });
-          }
-        }
-        break;
-      }
-      case "DRAW": {
-        const d = a.data as DrawData;
-        const { r, g, b } = hexToRgb01(d.strokeColor);
-        const t = Math.max(thickness(d.strokeWidth), 0.5);
-        // ความทึบตกลงมาจาก effectiveDrawOpacity (ค่าเดียวกับ render บนจอ) — โปร่งใส
-        // ใช้ lineCap butt กันปลาย segment ซ้อนกันเป็นจุดเข้มกว่าช่วงอื่น
-        const op = effectiveDrawOpacity(d);
-        const pts = d.paths.map((p) => toPdf(pxPoint(p)));
-        for (let i = 0; i < pts.length - 1; i++) {
-          page.drawLine({
-            start: pts[i],
-            end: pts[i + 1],
-            thickness: t,
-            color: rgb(r, g, b),
-            opacity: op,
-            lineCap: op < 1 ? LineCapStyle.Butt : LineCapStyle.Round,
-          });
-        }
-        break;
-      }
-      case "SHAPE": {
-        const d = a.data as ShapeData;
-        const { r, g, b } = hexToRgb01(d.strokeColor);
-        const color = rgb(r, g, b);
-        const t = Math.max(thickness(d.strokeWidth), 0.5);
-        if ("rect" in d) {
-          const rect = displayRectToPdf(pxRect(d.rect), size, rotation);
-          if (d.shape === "ellipse") {
-            page.drawEllipse({
-              x: rect.x + rect.width / 2,
-              y: rect.y + rect.height / 2,
-              xScale: Math.max(rect.width / 2, 0.1),
-              yScale: Math.max(rect.height / 2, 0.1),
-              borderColor: color,
-              borderWidth: t,
-            });
-          } else {
-            page.drawRectangle({
-              x: rect.x,
-              y: rect.y,
-              width: rect.width,
-              height: rect.height,
-              borderColor: color,
-              borderWidth: t,
-            });
-          }
-        } else {
-          const p1 = toPdf(pxPoint(d.from));
-          const p2 = toPdf(pxPoint(d.to));
-          page.drawLine({
-            start: p1,
-            end: p2,
-            thickness: t,
-            color,
-            lineCap: LineCapStyle.Round,
-          });
-          if (d.shape === "arrow") {
-            // หัวลูกศร = เส้นสั้น 2 เส้นกลับหลังจากปลาย to (มุม ±π/7 เหมือนบนจอ)
-            const head = Math.max(t * 3.5, 8);
-            const ang = Math.atan2(p2.y - p1.y, p2.x - p1.x);
-            for (const spread of [Math.PI / 7, -Math.PI / 7]) {
-              page.drawLine({
-                start: p2,
-                end: {
-                  x: p2.x - head * Math.cos(ang + spread),
-                  y: p2.y - head * Math.sin(ang + spread),
-                },
-                thickness: t,
-                color,
-                lineCap: LineCapStyle.Round,
-              });
-            }
-          }
-        }
-        break;
-      }
-      case "REDACTION": {
-        // ดำทึบทับจริง — ความปลอดภัยของ redaction อยู่ที่นี่ที่เดียว (D4)
-        const d = a.data as RedactionData;
-        const rect = displayRectToPdf(pxRect(d.rect), size, rotation);
-        page.drawRectangle({
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height,
-          color: rgb(0, 0, 0),
-        });
-        break;
-      }
-      case "COMMENT": {
-        const d = a.data as CommentData;
-        const pin = toPdf(pxPoint(d.position));
-        page.drawCircle({
-          x: pin.x,
-          y: pin.y,
-          size: 12,
-          color: rgb(254 / 255, 243 / 255, 199 / 255),
-          borderColor: rgb(252 / 255, 211 / 255, 77 / 255),
-          borderWidth: 1,
-        });
-        if (thaiFont) {
-          const font = thaiFont;
-          const fontSize = 9;
-          // FIX-5: ย่อความกว้างกล่องตามหน้าจริง — หน้าแคบกว่า 220pt
-          // เดิมทำให้ x ติดลบจนข้อความหลุดออกนอกขอบซ้ายเงียบ ๆ
-          const maxWidth = Math.min(220, size.width);
-          const lines = wrapTextByWidth(
-            `${a.userName}: ${d.message}`,
-            maxWidth,
-            (s) => font.widthOfTextAtSize(s, fontSize),
-          );
-          // FIX-5 (ต่อ): กันหลุดขอบบน — ข้อความวาด "ขึ้น" จากหมุด (แกน y ของ PDF ชี้ขึ้น)
-          // เมื่อหมุดใกล้ขอบบนหรือ wrap ยาวหลายบรรทัดจนบรรทัดบนสุดเลยขอบหน้า
-          // เลื่อนทั้งก้อนลงมาเท่าที่จำเป็น (ไม่ clamp รายบรรทัด ไม่งั้นบรรทัดซ้อนกัน)
-          const lineH = fontSize + 2;
-          const blockTop = pin.y + 4 + (lines.length - 1) * lineH;
-          const shift = Math.max(0, blockTop + fontSize - size.height);
-          lines.forEach((line, i) => {
-            page.drawText(line, {
-              x: Math.max(0, Math.min(pin.x + 10, size.width - maxWidth)),
-              y: pin.y + 4 + i * lineH - shift,
-              size: fontSize,
-              font,
-              color: rgb(0.2, 0.2, 0.2),
-            });
-          });
-        }
-        break;
-      }
-      case "TEXTBOX": {
-        // F17/B2 — วาดข้อความด้วย Sarabun (D5); ไม่มีฟอนต์ → กรอบแทน ต้องไม่พัง
-        const d = a.data as TextboxData;
-        const pos = toPdf(pxPoint(d.position));
-        const { r, g, b } = hexToRgb01(d.color);
-        if (thaiFont) {
-          const fontSize = Math.max(thickness(d.fontSize), 4);
-          // clamp ขอบขวาแบบเดียวกับบนจอ (textboxMaxWidthPct) — ไม่งั้นกล่อง
-          // ที่ position.x สูง (ครึ่งขวาของหน้า) ข้อความทุกบรรทัดทะลุขอบหน้ากระดาษ
-          // กล่อง width คงที่ (ถ้ามี) wrap ที่ความกว้างนั้น (บีบด้วย cap เหมือน render จอ)
-          const capPct = textboxMaxWidthPct(d.position.x);
-          const maxWidth = Math.max(
-            px(Math.min(d.width ?? capPct, capPct), display.width),
-            10,
-          );
-          // run ต่อสไตล์: segments (ตัวหนาเฉพาะส่วน) หรือทั้งกล่องตาม d.bold
-          const runs: StyledRun[] = d.segments?.length
-            ? d.segments.map((s) => ({ text: s.text, bold: !!(s.bold || d.bold) }))
-            : [{ text: d.text, bold: !!d.bold }];
-          const fontFor = (bold: boolean) => (bold && thaiBoldFont ? thaiBoldFont : thaiFont);
-          const widthOf = (s: string, bold: boolean) =>
-            fontFor(bold).widthOfTextAtSize(s, fontSize);
-          const lines = wrapStyledText(runs, maxWidth, widthOf);
-          // กล่องห้อยจากมุมซ้ายบน (pos) เหมือน render จอ — align จัดบรรทัด*ใน*กล่องอย่างเดียว
-          // (แบบ Smallpdf กล่องไม่ขยับ): กล่อง width คงที่กว้างเต็ม maxWidth ตามที่กำหนด
-          // ส่วนแถวเดิม shrink-to-fit กว้างเท่าบรรทัดยาวสุด (ไม่เกิน maxWidth)
-          const align = d.align ?? "left";
-          const lineWOf = (lineRuns: StyledRun[]) =>
-            lineRuns.reduce((sum, rn) => sum + widthOf(rn.text, rn.bold), 0);
-          const boxW =
-            d.width !== undefined
-              ? maxWidth
-              : Math.max(Math.min(...lines.map(lineWOf), maxWidth), 1);
-          const boxLeft = pos.x;
-          lines.forEach((lineRuns, i) => {
-            const lineW = lineWOf(lineRuns);
-            let x =
-              align === "center"
-                ? boxLeft + (boxW - lineW) / 2
-                : align === "right"
-                  ? boxLeft + (boxW - lineW)
-                  : boxLeft;
-            for (const rn of lineRuns) {
-              page.drawText(rn.text, {
-                x,
-                // position เป็นมุมซ้ายบนบนจอ → เดินลงจากขอบบนทีละบรรทัด (พิกัด PDF แกน y ขึ้น)
-                y: pos.y - fontSize - i * (fontSize * 1.5),
-                size: fontSize,
-                font: fontFor(rn.bold),
-                color: rgb(r, g, b),
-                opacity: d.opacity ?? 1,
-              });
-              x += widthOf(rn.text, rn.bold);
-            }
-          });
-        } else {
-          const rect = displayRectToPdf(
-            pxRect({ x: d.position.x, y: d.position.y, width: 40, height: 10 }),
-            size,
-            rotation,
-          );
-          page.drawRectangle({
-            x: rect.x,
-            y: rect.y,
-            width: rect.width,
-            height: rect.height,
-            borderColor: rgb(r, g, b),
-            borderWidth: 1,
-          });
-        }
-        break;
-      }
-      case "STAMP": {
-        // F18/B5, D7 — วาดกรอบ+ข้อความ; ไม่มีฟอนต์ → กรอบอย่างเดียว (D5 ต้องไม่พัง)
-        const d = a.data as StampData;
-        const { r, g, b } = hexToRgb01(d.color ?? STAMP_COLOR);
-        const stampRgb = rgb(r, g, b);
-        const w = px(d.scale, display.width);
-        const rect = displayRectToPdf(
-          {
-            x: px(d.position.x, display.width),
-            y: px(d.position.y, display.height),
-            width: w,
-            height: w * STAMP_HEIGHT_RATIO,
-          },
-          size,
-          rotation,
-        );
-        page.drawRectangle({
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height,
-          borderColor: stampRgb,
-          borderWidth: Math.max(w * 0.02, 1),
-        });
-        if (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,
-          });
-        }
-        break;
-      }
-    }
-  }
-
-  const out = await doc.save();
-  const filename = encodeRFC5987(`${file.title}-annotated.pdf`);
-  return new Response(new Uint8Array(out), {
-    headers: {
-      "content-type": "application/pdf",
-      // filename เป็น ASCII fallback + filename* UTF-8 สำหรับชื่อไทย
-      "content-disposition": `attachment; filename="annotated.pdf"; 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

@@ -0,0 +1,720 @@
+import fs from "node:fs";
+import path from "node:path";
+
+import fontkit from "@pdf-lib/fontkit";
+import {
+  PDFDocument,
+  PDFHexString,
+  PDFName,
+  PDFString,
+  LineCapStyle,
+  degrees,
+  rgb,
+  type PDFFont,
+  type PDFDict,
+  type PDFPage,
+  type PDFRef,
+} from "pdf-lib";
+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,
+  bookmarks,
+  files,
+  toAnnotationDTO,
+  type AnnotationType,
+  type BookmarkRow,
+  type CommentData,
+  type DrawData,
+  type HighlightData,
+  type RedactionData,
+  type ReplyRow,
+  type ShapeData,
+  type StampData,
+  type TextboxData,
+} from "@/db/schema";
+import {
+  displayRectToPdf,
+  displaySize,
+  displayToPdfPoint,
+  encodeRFC5987,
+  hexToRgb01,
+  wrapStyledText,
+  type Rot,
+  type StyledRun,
+} from "@/utils/pdf-export";
+import type { AnnotationDTO, Rect } from "@/db/schema";
+import { toPx, type Point, type Size } from "@/utils/coordinates";
+import { fileKindFromUrl } from "@/utils/file-kind";
+import { imageDocFromBytes } from "@/utils/image-to-pdf";
+import {
+  annotationBBox,
+  rotatePoint,
+  stampBoxHeight,
+  stampLayout,
+  textboxMaxWidthPct,
+} from "@/utils/geometry";
+import {
+  STAMP_COLOR,
+  annotationNote,
+  effectiveDrawOpacity,
+} from "@/utils/annotation-display";
+
+// Export PDF ฝัง annotation + bookmarks (F8/C1 — PLAN-FEAT.md §3)
+// - อ่าน PDF ต้นฉบับจาก public/ แบบ **อ่านอย่างเดียว** (invariant #1) — pdf-lib load
+//   เป็นสำเนาในหน่วยความจำ แล้ว save() คืน bytes ใหม่ ไม่เขียนทับไฟล์เดิม
+// - วาดต่อหน้าตามลำดับ: HIGHLIGHT → DRAW → SHAPE → REDACTION (ดำทึบ) → TEXTBOX/STAMP
+//   (+ข้อความถ้ามีฟอนต์ Sarabun — D5: ไม่มีฟอนต์ต้องไม่พัง)
+// - COMMENT เป็น sticky note จริงของ PDF (/Subtype /Text — คลิกหมุดที่ reader เปิด
+//   popup อ่าน message + replies), bookmarks เป็น PDF outline (แผง Bookmarks)
+
+const UUID_RE =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+const SARABUN_REL = path.join("fonts", "Sarabun-Regular.ttf");
+
+// ลำดับวาดต่อหน้าตามสเปก §3 F8 ข้อ 3: HIGHLIGHT → DRAW → SHAPE → REDACTION → TEXTBOX → STAMP
+// (REDACTION ดำทึบต้องทับทุกอย่างที่สร้างก่อนหน้า — D4) — COMMENT ไม่เข้าลำดับนี้แล้ว:
+// เป็น annotation object ที่ reader วาดเหนือ content เสมอ จึงไม่มีปัญหาถูกกลบ
+const TYPE_ORDER: Record<AnnotationType, number> = {
+  HIGHLIGHT: 0,
+  DRAW: 1,
+  SHAPE: 2,
+  REDACTION: 3,
+  COMMENT: 4,
+  TEXTBOX: 5,
+  STAMP: 6,
+};
+
+/** ISO string → PDF date string (D:YYYYMMDDHHmmSSZ) สำหรับ /M ของ annotation */
+function toPdfDate(iso: string): string {
+  const d = new Date(iso);
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `D:${d.getUTCFullYear()}${p(d.getUTCMonth() + 1)}${p(d.getUTCDate())}${p(d.getUTCHours())}${p(d.getUTCMinutes())}${p(d.getUTCSeconds())}Z`;
+}
+
+/**
+ * โน้ตคำอธิบาย (N1) ของ annotation → sticky note เล็กแนบมุมขวาบนของ bbox —
+ * Chrome/Edge แสดง tooltip จาก /Contents ตอน hover, Acrobat คลิกเปิด popup
+ * (แทน hover tooltip บนเว็บที่ flatten ลงหน้าแล้วอ่านไม่ได้)
+ */
+function attachNoteSticky(
+  doc: PDFDocument,
+  page: PDFPage,
+  a: AnnotationDTO,
+  note: string,
+  anchor: Point, // มุมขวาบนของ bbox ในพิกัด PDF (pt)
+): void {
+  const annot = doc.context.obj({
+    Type: "Annot",
+    Subtype: "Text",
+    // หมุดเล็ก 16pt ห้อยลงจากจุดยึด (แกน y ของ PDF ชี้ขึ้น)
+    Rect: [anchor.x, anchor.y - 16, anchor.x + 16, anchor.y],
+    Contents: PDFHexString.fromText(note),
+    T: PDFHexString.fromText(a.userName),
+    C: [254 / 255, 243 / 255, 199 / 255],
+    M: PDFString.of(toPdfDate(a.updatedAt)),
+    F: 4, // Print — พิมพ์แล้ว icon ติดไปด้วย
+  });
+  page.node.addAnnot(doc.context.register(annot));
+}
+
+/**
+ * ฝัง bookmarks เป็น PDF outline (แผง Bookmarks ของ reader กดกระโดดได้) — โครงสร้าง
+ * ตาม parentId (DB จำกัด 3 ระดับอยู่แล้ว) เรียงตามลำดับหน้าเหมือน sidebar (N5 —
+ * ลำดับมาจาก query ด้านผู้เรียก คง relative order ไว้ทั้ง root และ children ในแม่เดียวกัน) แต่ละรายการ
+ * /Dest ชี้หน้า + ตำแหน่ง yOffset — pdf-lib ไม่มี API ระดับสูงสำหรับ outline จึงต่อ
+ * PDFDict เอง (Title เป็น PDFHexString UTF-16BE รองรับภาษาไทย)
+ */
+function buildOutline(doc: PDFDocument, rows: BookmarkRow[]): void {
+  if (rows.length === 0) return;
+  const ctx = doc.context;
+  const ids = new Set(rows.map((b) => b.id));
+  const childrenOf = new Map<string, BookmarkRow[]>();
+  const roots: BookmarkRow[] = [];
+  for (const b of rows) {
+    // parent หาย (ความครบถ้วนของข้อมูล) → ผลักขึ้น root เหมือนที่ sidebar ทำ
+    if (b.parentId && ids.has(b.parentId)) {
+      const list = childrenOf.get(b.parentId) ?? [];
+      list.push(b);
+      childrenOf.set(b.parentId, list);
+    } else {
+      roots.push(b);
+    }
+  }
+  // Major 2 (code review): ข้อมูลวนซ้ำไร้ root (A แม่ของ B, B แม่ของ A — action/sidebar กัน
+  // ตอนเขียนแล้ว แต่กันเคส DB ถูกแก้ตรง ๆ) roots จะว่างและ kids[0] พังทั้ง export (500) —
+  // ปล่อยเป็นไฟล์ไม่มี outline เงียบ ๆ ดีกว่าไฟล์พังทั้งใบ
+  if (roots.length === 0) return;
+
+  const buildNode = (
+    b: BookmarkRow,
+    parentRef: PDFRef,
+  ): { ref: PDFRef; dict: PDFDict; count: number } => {
+    const ref = ctx.nextRef();
+    const kids = (childrenOf.get(b.id) ?? []).map((k) => buildNode(k, ref));
+    const page = doc.getPage(
+      Math.min(Math.max(b.pageIndex, 0), doc.getPageCount() - 1),
+    );
+    const size = page.getSize();
+    const rotation = (((page.getRotation().angle % 360) + 360) % 360) as Rot;
+    const display = displaySize(size, rotation);
+    // yOffset (% ของความสูงหน้าบนจอ) → พิกัด PDF ทางเดียวกับ annotation (invariant #2)
+    // นิยาม yOffset = "จุดจริงบนหน้า" (ขอบบนของสิ่งที่ดูอยู่ตอนสร้าง) และในเว็บกดแล้ว
+    // จุดถูกดันชิดใต้ header — dest /XYZ ของ PDF ก็วางจุดยึดติดขอบบน viewport เหมือนกัน
+    // จึงใช้ตำแหน่งเป๊ะ ๆ ไม่ต้องชดเชย (ก่อนหน้านี้ yOffset เป็น "กึ่งกลางจอตอนสร้าง"
+    // จึงเคยต้องเลื่อนไถออก 25% ของความสูงหน้า)
+    const dest = displayToPdfPoint(
+      { x: 0, y: toPx(b.yOffset, display.height) },
+      size,
+      rotation,
+    );
+    const count = kids.reduce((sum, k) => sum + 1 + k.count, 0);
+    const dict = ctx.obj({
+      Title: PDFHexString.fromText(b.title),
+      Parent: parentRef,
+      // /XYZ = กระโดดไปตำแหน่งนี้โดยคง zoom ของผู้อ่าน (null)
+      Dest: [page.ref, PDFName.of("XYZ"), dest.x, dest.y, null],
+      ...(kids.length > 0
+        ? { First: kids[0].ref, Last: kids[kids.length - 1].ref, Count: count }
+        : {}),
+    });
+    for (let i = 0; i < kids.length; i++) {
+      if (i > 0) kids[i].dict.set(PDFName.of("Prev"), kids[i - 1].ref);
+      if (i < kids.length - 1)
+        kids[i].dict.set(PDFName.of("Next"), kids[i + 1].ref);
+    }
+    ctx.assign(ref, dict);
+    return { ref, dict, count };
+  };
+
+  const rootRef = ctx.nextRef();
+  const kids = roots.map((r) => buildNode(r, rootRef));
+  for (let i = 0; i < kids.length; i++) {
+    if (i > 0) kids[i].dict.set(PDFName.of("Prev"), kids[i - 1].ref);
+    if (i < kids.length - 1) kids[i].dict.set(PDFName.of("Next"), kids[i + 1].ref);
+  }
+  ctx.assign(
+    rootRef,
+    ctx.obj({
+      Type: "Outlines",
+      First: kids[0].ref,
+      Last: kids[kids.length - 1].ref,
+      // Count เป็นบวก = แผง outline เปิดทั้งหมดตอนเปิดไฟล์
+      Count: kids.reduce((sum, k) => sum + 1 + k.count, 0),
+    }),
+  );
+  doc.catalog.set(PDFName.of("Outlines"), rootRef);
+}
+
+export async function GET(req: Request) {
+  const url = new URL(req.url);
+  const fileId = 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 });
+
+  // Guard path traversal: pdfUrl จาก DB ต้อง resolve แล้วอยู่ใน public/ เท่านั้น (§5)
+  // N8: pdf_url เป็นรีโมต (ลิงก์ e-Court) → ดึงสดจาก allowlist แทนการอ่านดิสก์
+  let srcBytes: Buffer;
+  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 });
+    }
+  }
+
+  // N3: ไฟล์รูปภาพ — สร้าง PDF ใหม่ที่ฝังรูปเต็มหน้า (embedJpg/embedPng + EXIF rotate)
+  // แล้ววาด annotation ต่อด้วย pipeline เดิมทั้งหมด (rotation=0, page 595×สัดส่วนรูป
+  // ตรง scale contract ฝั่ง viewer → พิกัด % ตรงกันทั้งจอและ export)
+  // ไฟล์เสีย (ผ่าน magic bytes ตอนอัปโหลดแต่เนื้อข้างในพัง) → ข้อความชัด ๆ แทน 500 เปล่า
+  let doc: Awaited<ReturnType<typeof PDFDocument.load>>;
+  try {
+    doc =
+      fileKindFromUrl(file.pdfUrl) === "image"
+        ? await imageDocFromBytes(srcBytes, file.pdfUrl)
+        : await PDFDocument.load(srcBytes);
+  } catch (err) {
+    console.error("สร้างเอกสารสำหรับ export ไม่สำเร็จ", err);
+    return new Response("ไฟล์ต้นฉบับเสียหาย สร้างเอกสาร export ไม่ได้", { status: 500 });
+  }
+  doc.registerFontkit(fontkit);
+
+  // D5: ฟอนต์ไทย optional — ไม่มีก็ export สำเร็จ (COMMENT เป็นหมุดอย่างเดียว)
+  let thaiFont: PDFFont | null = null;
+  const fontPath = path.join(process.cwd(), "public", SARABUN_REL);
+  if (fs.existsSync(fontPath)) {
+    try {
+      thaiFont = await doc.embedFont(fs.readFileSync(fontPath), { subset: true });
+    } catch (err) {
+      console.error("embed Sarabun ไม่สำเร็จ — ไปทาง fallback หมุดอย่างเดียว", err);
+      thaiFont = null;
+    }
+  }
+  // TEXTBOX ตัวหนา — optional เช่นกัน: ไม่มี Sarabun-Bold.ttf ก็ fallback เป็น Regular
+  // (บนจอ font-weight 700 อยู่แล้ว แต่ export ต้องมีไฟล์น้ำหนักหนาจริงจึงตรงกัน)
+  let thaiBoldFont: PDFFont | null = null;
+  const boldFontPath = path.join(process.cwd(), "public", "fonts", "Sarabun-Bold.ttf");
+  if (fs.existsSync(boldFontPath)) {
+    try {
+      thaiBoldFont = await doc.embedFont(fs.readFileSync(boldFontPath), { subset: true });
+    } catch (err) {
+      console.error("embed Sarabun-Bold ไม่สำเร็จ — ตัวหนา fallback เป็น Regular", err);
+      thaiBoldFont = null;
+    }
+  }
+
+  const rows = await db
+    .select()
+    .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 = filteredRows
+    .map(toAnnotationDTO)
+    .sort((a, b) => TYPE_ORDER[a.type] - TYPE_ORDER[b.type]);
+
+  // replies ของ COMMENT สำหรับฝังลง popup ของ sticky note (F9) — query เฉพาะเมื่อมี COMMENT
+  const repliesByAnnotation = new Map<string, ReplyRow[]>();
+  const commentIds = dtos.filter((a) => a.type === "COMMENT").map((a) => a.id);
+  if (commentIds.length > 0) {
+    const replyRows = await db
+      .select()
+      .from(annotationReplies)
+      .where(inArray(annotationReplies.annotationId, commentIds))
+      .orderBy(asc(annotationReplies.createdAt));
+    for (const r of replyRows) {
+      const list = repliesByAnnotation.get(r.annotationId) ?? [];
+      list.push(r);
+      repliesByAnnotation.set(r.annotationId, list);
+    }
+  }
+
+  for (const a of dtos) {
+    const page = doc.getPage(Math.min(a.pageIndex, doc.getPageCount() - 1));
+    const pageSize = page.getSize();
+    const size: Size = { width: pageSize.width, height: pageSize.height };
+    const rotation = (((page.getRotation().angle % 360) + 360) % 360) as Rot;
+    const display = displaySize(size, rotation);
+
+    // % ของหน้า (บนจอ) → px บนจอ — ผ่าน utils/coordinates เท่านั้น (invariant #2)
+    const px = toPx;
+    const pxPoint = (p: Point): Point => ({
+      x: px(p.x, display.width),
+      y: px(p.y, display.height),
+    });
+    const pxRect = (r: Rect): Rect => ({
+      x: px(r.x, display.width),
+      y: px(r.y, display.height),
+      width: px(r.width, display.width),
+      height: px(r.height, display.height),
+    });
+    const toPdf = (p: Point) => displayToPdfPoint(p, size, rotation);
+    // strokeWidth เป็น % ของความกว้างหน้า **บนจอ**
+    const thickness = (swPct: number) => px(swPct, display.width);
+
+    // AnnotationDTO เป็น flat type (type/data แยกกัน) → cast ตาม case ที่เช็คแล้ว (pattern เดียวกับ sidebar)
+    switch (a.type) {
+      case "HIGHLIGHT": {
+        const d = a.data as HighlightData;
+        const { r, g, b } = hexToRgb01(d.color);
+        const col = rgb(r, g, b);
+        const st = d.style ?? "highlight";
+        // ความทึบของผู้ใช้ (0–1, ไม่มี = ทึบเต็ม) — ไฮไลต์ทึบคูณเข้าค่าเดิม 0.35
+        // (สอดคล้อง mix-blend-multiply บนจอ), เส้นทุกแบบใช้ตรง ๆ
+        const op = d.opacity ?? 1;
+        for (const rPct of d.rects) {
+          const rect = displayRectToPdf(pxRect(rPct), size, rotation);
+          if (st === "underline") {
+            // เส้นใต้ที่ขอบล่างของบรรทัด (rect.y ของ PDF = ขอบล่างบนจอ)
+            page.drawLine({
+              start: { x: rect.x, y: rect.y },
+              end: { x: rect.x + rect.width, y: rect.y },
+              thickness: 1,
+              color: col,
+              opacity: op,
+              lineCap: LineCapStyle.Round,
+            });
+          } else if (st === "strikethrough") {
+            const y = rect.y + rect.height / 2;
+            page.drawLine({
+              start: { x: rect.x, y },
+              end: { x: rect.x + rect.width, y },
+              thickness: 1,
+              color: col,
+              opacity: op,
+              lineCap: LineCapStyle.Round,
+            });
+          } else if (st === "squiggle") {
+            // เส้นขยุกขยิก — sine เล็ก ๆ ระดับขอบล่าง วาดต่อเป็นท่อนสั้น ๆ
+            let prev = { x: rect.x, y: rect.y + 1.5 };
+            for (let t = 2; t <= rect.width; t += 2) {
+              const p = {
+                x: rect.x + t,
+                y: rect.y + 1.5 * Math.sin((t / 6) * Math.PI * 2),
+              };
+              page.drawLine({
+                start: prev,
+                end: p,
+                thickness: 1,
+                color: col,
+                opacity: op,
+                lineCap: LineCapStyle.Round,
+              });
+              prev = p;
+            }
+          } else {
+            page.drawRectangle({
+              x: rect.x,
+              y: rect.y,
+              width: rect.width,
+              height: rect.height,
+              color: col,
+              opacity: 0.35 * op,
+            });
+          }
+        }
+        break;
+      }
+      case "DRAW": {
+        const d = a.data as DrawData;
+        const { r, g, b } = hexToRgb01(d.strokeColor);
+        const t = Math.max(thickness(d.strokeWidth), 0.5);
+        // ความทึบตกลงมาจาก effectiveDrawOpacity (ค่าเดียวกับ render บนจอ) — โปร่งใส
+        // ใช้ lineCap butt กันปลาย segment ซ้อนกันเป็นจุดเข้มกว่าช่วงอื่น
+        const op = effectiveDrawOpacity(d);
+        const pts = d.paths.map((p) => toPdf(pxPoint(p)));
+        for (let i = 0; i < pts.length - 1; i++) {
+          page.drawLine({
+            start: pts[i],
+            end: pts[i + 1],
+            thickness: t,
+            color: rgb(r, g, b),
+            opacity: op,
+            lineCap: op < 1 ? LineCapStyle.Butt : LineCapStyle.Round,
+          });
+        }
+        break;
+      }
+      case "SHAPE": {
+        const d = a.data as ShapeData;
+        const { r, g, b } = hexToRgb01(d.strokeColor);
+        const color = rgb(r, g, b);
+        const t = Math.max(thickness(d.strokeWidth), 0.5);
+        if ("rect" in d) {
+          const rect = displayRectToPdf(pxRect(d.rect), size, rotation);
+          if (d.shape === "ellipse") {
+            page.drawEllipse({
+              x: rect.x + rect.width / 2,
+              y: rect.y + rect.height / 2,
+              xScale: Math.max(rect.width / 2, 0.1),
+              yScale: Math.max(rect.height / 2, 0.1),
+              borderColor: color,
+              borderWidth: t,
+            });
+          } else {
+            page.drawRectangle({
+              x: rect.x,
+              y: rect.y,
+              width: rect.width,
+              height: rect.height,
+              borderColor: color,
+              borderWidth: t,
+            });
+          }
+        } else {
+          const p1 = toPdf(pxPoint(d.from));
+          const p2 = toPdf(pxPoint(d.to));
+          page.drawLine({
+            start: p1,
+            end: p2,
+            thickness: t,
+            color,
+            lineCap: LineCapStyle.Round,
+          });
+          if (d.shape === "arrow") {
+            // หัวลูกศร = เส้นสั้น 2 เส้นกลับหลังจากปลาย to (มุม ±π/7 เหมือนบนจอ)
+            const head = Math.max(t * 3.5, 8);
+            const ang = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+            for (const spread of [Math.PI / 7, -Math.PI / 7]) {
+              page.drawLine({
+                start: p2,
+                end: {
+                  x: p2.x - head * Math.cos(ang + spread),
+                  y: p2.y - head * Math.sin(ang + spread),
+                },
+                thickness: t,
+                color,
+                lineCap: LineCapStyle.Round,
+              });
+            }
+          }
+        }
+        break;
+      }
+      case "REDACTION": {
+        // ดำทึบทับจริง — ความปลอดภัยของ redaction อยู่ที่นี่ที่เดียว (D4)
+        const d = a.data as RedactionData;
+        const rect = displayRectToPdf(pxRect(d.rect), size, rotation);
+        page.drawRectangle({
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+          color: rgb(0, 0, 0),
+        });
+        break;
+      }
+      case "COMMENT": {
+        // sticky note จริงของ PDF (/Subtype /Text) — คลิกหมุดที่ reader แล้วเปิด popup
+        // อ่าน message + replies (F9); ไม่ต้องมี /AP เพราะ reader วาด icon เอง
+        const d = a.data as CommentData;
+        const pin = toPdf(pxPoint(d.position));
+        const parts = [d.message];
+        for (const r of repliesByAnnotation.get(a.id) ?? []) {
+          parts.push(`— ${r.userName}: ${r.message}`);
+        }
+        const annot = doc.context.obj({
+          Type: "Annot",
+          Subtype: "Text",
+          // หมุด icon 20pt ห้อยลงจากจุด position (แกน y ของ PDF ชี้ขึ้น)
+          Rect: [pin.x, pin.y - 20, pin.x + 20, pin.y],
+          Contents: PDFHexString.fromText(parts.join("\n")),
+          T: PDFHexString.fromText(a.userName),
+          // สีเดียวกับหมุดบนจอ (เหลืองอ่อน) — reader เอาไปทา icon
+          C: [254 / 255, 243 / 255, 199 / 255],
+          M: PDFString.of(toPdfDate(a.updatedAt)),
+          F: 4, // Print — พิมพ์แล้ว icon ติดไปด้วย
+        });
+        page.node.addAnnot(doc.context.register(annot));
+        break;
+      }
+      case "TEXTBOX": {
+        // F17/B2 — วาดข้อความด้วย Sarabun (D5); ไม่มีฟอนต์ → กรอบแทน ต้องไม่พัง
+        const d = a.data as TextboxData;
+        const pos = toPdf(pxPoint(d.position));
+        const { r, g, b } = hexToRgb01(d.color);
+        if (thaiFont) {
+          const fontSize = Math.max(thickness(d.fontSize), 4);
+          // clamp ขอบขวาแบบเดียวกับบนจอ (textboxMaxWidthPct) — ไม่งั้นกล่อง
+          // ที่ position.x สูง (ครึ่งขวาของหน้า) ข้อความทุกบรรทัดทะลุขอบหน้ากระดาษ
+          // กล่อง width คงที่ (ถ้ามี) wrap ที่ความกว้างนั้น (บีบด้วย cap เหมือน render จอ)
+          const capPct = textboxMaxWidthPct(d.position.x);
+          const maxWidth = Math.max(
+            px(Math.min(d.width ?? capPct, capPct), display.width),
+            10,
+          );
+          // run ต่อสไตล์: segments (ตัวหนาเฉพาะส่วน) หรือทั้งกล่องตาม d.bold
+          const runs: StyledRun[] = d.segments?.length
+            ? d.segments.map((s) => ({ text: s.text, bold: !!(s.bold || d.bold) }))
+            : [{ text: d.text, bold: !!d.bold }];
+          const fontFor = (bold: boolean) => (bold && thaiBoldFont ? thaiBoldFont : thaiFont);
+          const widthOf = (s: string, bold: boolean) =>
+            fontFor(bold).widthOfTextAtSize(s, fontSize);
+          const lines = wrapStyledText(runs, maxWidth, widthOf);
+          // กล่องห้อยจากมุมซ้ายบน (pos) เหมือน render จอ — align จัดบรรทัด*ใน*กล่องอย่างเดียว
+          // (แบบ Smallpdf กล่องไม่ขยับ): กล่อง width คงที่กว้างเต็ม maxWidth ตามที่กำหนด
+          // ส่วนแถวเดิม shrink-to-fit กว้างเท่าบรรทัดยาวสุด (ไม่เกิน maxWidth)
+          const align = d.align ?? "left";
+          const lineWOf = (lineRuns: StyledRun[]) =>
+            lineRuns.reduce((sum, rn) => sum + widthOf(rn.text, rn.bold), 0);
+          const boxW =
+            d.width !== undefined
+              ? maxWidth
+              : Math.max(Math.min(...lines.map(lineWOf), maxWidth), 1);
+          const boxLeft = pos.x;
+          lines.forEach((lineRuns, i) => {
+            const lineW = lineWOf(lineRuns);
+            let x =
+              align === "center"
+                ? boxLeft + (boxW - lineW) / 2
+                : align === "right"
+                  ? boxLeft + (boxW - lineW)
+                  : boxLeft;
+            for (const rn of lineRuns) {
+              page.drawText(rn.text, {
+                x,
+                // position เป็นมุมซ้ายบนบนจอ → เดินลงจากขอบบนทีละบรรทัด (พิกัด PDF แกน y ขึ้น)
+                y: pos.y - fontSize - i * (fontSize * 1.5),
+                size: fontSize,
+                font: fontFor(rn.bold),
+                color: rgb(r, g, b),
+                opacity: d.opacity ?? 1,
+              });
+              x += widthOf(rn.text, rn.bold);
+            }
+          });
+        } else {
+          const rect = displayRectToPdf(
+            pxRect({ x: d.position.x, y: d.position.y, width: 40, height: 10 }),
+            size,
+            rotation,
+          );
+          page.drawRectangle({
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            borderColor: rgb(r, g, b),
+            borderWidth: 1,
+          });
+        }
+        break;
+      }
+      case "STAMP": {
+        // F18/B5, D7 — วาดกรอบ+ข้อความ; ไม่มีฟอนต์ → กรอบอย่างเดียว (D5 ต้องไม่พัง)
+        const d = a.data as StampData;
+        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: 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: anchor.x,
+          y: anchor.y,
+          width: rect.width,
+          height: rect.height,
+          borderColor: stampRgb,
+          borderWidth: Math.max(w * 0.02, 1),
+          ...rotateOpt,
+        });
+        if (lay && thaiFont) {
+          const font = thaiFont;
+          // วาดทีละบรรทัดจากกึ่งกลางแนวตั้งของกรอบ (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;
+      }
+    }
+
+    // โน้ตคำอธิบาย (N1) → sticky note แนบมุมขวาบนของ bbox — COMMENT ไม่มี note
+    // (มี message อยู่ใน popup ของตัวเองแล้ว)
+    if (a.type !== "COMMENT") {
+      const note = annotationNote(a);
+      if (note) {
+        // 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,
+          a,
+          note,
+          toPdf({ x: bbox.x + bbox.width, y: bbox.y }),
+        );
+      }
+    }
+  }
+
+  // bookmarks → PDF outline (แผง Bookmarks ของ reader กดกระโดดไปหน้า + yOffset)
+  // เรียงตามลำดับหน้าเหมือน sidebar (byPageOrder ของ N5: หน้า → ตำแหน่งบนหน้า → เวลาสร้าง)
+  // กรองตามรายคนเหมือน annotation (คำขอผู้ใช้ 2026-09-22) — หัวข้อแม่โดนกรองแต่ลูกยังอยู่
+  // ลูกขึ้น root (buildOutline จัดการ parent หายเคสนี้อยู่แล้ว)
+  const bookmarkRows = await db
+    .select()
+    .from(bookmarks)
+    .where(
+      userParam
+        ? and(eq(bookmarks.fileId, fileId), eq(bookmarks.userId, userParam))
+        : eq(bookmarks.fileId, fileId),
+    )
+    .orderBy(
+      asc(bookmarks.pageIndex),
+      asc(bookmarks.yOffset),
+      asc(bookmarks.createdAt),
+    );
+  buildOutline(doc, bookmarkRows);
+
+  const out = await doc.save();
+  const filename = encodeRFC5987(
+    `${file.title}-annotated${filterName ? `-${filterName}` : ""}.pdf`,
+  );
+  return new Response(new Uint8Array(out), {
+    headers: {
+      "content-type": "application/pdf",
+      // filename เป็น ASCII fallback + filename* UTF-8 สำหรับชื่อไทย
+      "content-disposition": `attachment; filename="annotated.pdf"; filename*=UTF-8''${filename}`,
+    },
+  });
+}

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,7 +3,9 @@ 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";
 
 // ให้ viewer โหลด PDF ผ่านทางนี้แทนไฟล์ดิบใน public/ — ซ่อม ToUnicode จาก ActualText
 // ของ PDF ไทยที่ cmap ของฟอนต์เพี้ยน (สกัดข้อความได้ control char ขยะแทนสระ/วรรณยุกต์)
@@ -24,13 +26,35 @@ 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;
+  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 ถูกต้อง
+  // (viewer โหลดรูปจาก static pdfUrl ตรง ๆ อยู่แล้ว — branch นี้กัน stray call
+  // หลุดเข้า fixPdfActualText ที่จะ throw กับ bytes ที่ไม่ใช่ PDF)
+  if (fileKindFromUrl(file.pdfUrl) === "image") {
+    return new Response(new Uint8Array(srcBytes), {
+      headers: {
+        "Content-Type": imageContentTypeFromUrl(file.pdfUrl),
+        "Cache-Control": "no-store",
+      },
+    });
+  }
 
   const fixed = await fixPdfActualText(srcBytes);
   return new Response(new Uint8Array(fixed), {

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 */
@@ -81,8 +97,7 @@
 
 /* ─── UX review 2026-09-09 ข้อ 4: ปุ่ม header เล็กกว่ามาตรฐาน touch 44×44 ─────
    ขยายเฉพาะอุปกรณ์จอสัมผัส — ครอบปุ่ม toggle/page nav/zoom/tool group
-   (รวมปุ่ม dropdown ของ tool)/undo-redo/bookmark/export + ปุ่ม summary (Link)
-   แต่ไม่โดนปุ่มใน dropdown panel (สี/ความหนา) ที่ซ้อนลึกกว่าอีกชั้น */
+   (รวมปุ่ม dropdown ของ tool)/undo-redo/bookmark/export + ปุ่ม summary (Link) */
 @media (pointer: coarse) {
   header .touch-44 > button,
   header .touch-44 > div > button,
@@ -90,5 +105,331 @@
   header .touch-44 > div > a {
     min-height: 2.75rem;
     min-width: 2.75rem;
+    /* min 44px ทำให้ปุ่ม icon เดี่ยวกว้างเกิน content — ต้อง center icon
+       ไม่งั้นชิดซ้าย+ลอยตาม baseline (ปุ่ม dropdown มี flex อยู่แล้ว ไม่กระทบ) */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* UX review 2026-09-14 L2: ปุ่มใน dropdown panel (สี/ความหนา/preset) — swatch 16px
+     เล็กเกินนิ้ว แต่ 44px ทำ panel บวม จึงใช้ 36px / C1: เมนู dropdown + popup bookmark
+     ย้ายไป createPortal ที่ document.body แล้ว (ไม่มี .z-50 เหลือใน header) จึง target
+     ผ่าน [data-tool-menu] ตรง ๆ / ไม่ใส่ display/justify — แถวเมนูเป็น text-left อยู่แล้ว */
+  [data-tool-menu] button:not(.combo-step),
+  [data-tool-menu] label {
+    min-height: 2.25rem;
+    min-width: 2.25rem;
+  }
+
+  /* NumberCombo (ความหนา/ความทึบ/ขนาด): ▲▼ ซ้อนแนวตั้ง 2 ปุ่ม — ถ้าโดน min 36px
+     คอลัมน์จะสูง 72px และ input (items-stretch) ถูกดึงบวมตามทั้งแถว — ปุ่ม ▲▼
+     จึงหลุดจาก rule ด้านบน (combo-step) แล้วตั้งความสูงแถว input เองที่ 36px แทน
+     (:first-child — เว้น dropdown ของ preset ที่เป็นลูก div ตัวที่สอง ไม่ให้ถูก
+     บังคับความสูงจนตัดรายการ): แตะ input = เปิด preset dropdown (เปิดขึ้นบน — L2:
+     แถวท้ายเมนูเปิดลงจะล้นเขต scroll ของเมนู) คือ touch path หลัก ส่วน ▲▼
+     (ครึ่งแถว) เป็น fine-tune สำรอง — ขนาดใกล้ desktop ไม่บวม */
+  [data-tool-menu] .number-combo > div:first-child {
+    height: 2.25rem;
+  }
+  [data-tool-menu] .combo-step {
+    min-width: 1.25rem;
+  }
+
+  /* M3: ตัวควบคุมบนหน้ากระดาษเล็กกว่ามาตรฐาน touch มาก (ไม่ได้อยู่ใน header จึงหลุด
+     จาก rule ด้านบน) — ของที่มองเห็นคงขนาดเดิม ขยายพื้นที่รับ touch แทน:
+     handle/strip ของกรอบ selection เป็น div ขนาดจาก inline style (10px/8px) แก้
+     width/height ตรง ๆ ไม่ได้ จึงใช้ ::after แผ่รับ pointer รอบ ๆ (handle 10→hit 28px,
+     strip 8→hit 16px — มุม render ทีหลังใน DOM จึงชนะบริเวณซ้อนกับ strip = ต้องการ) */
+  .sel-handle::after {
+    content: "";
+    position: absolute;
+    inset: -9px;
+  }
+  .sel-strip::after {
+    content: "";
+    position: absolute;
+    inset: -4px;
+  }
+
+  /* ปุ่ม 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 {
+    min-height: 2rem;
+    min-width: 2rem;
+  }
+
+  /* M6: ปุ่ม icon ใน sidebar (16/14px ติดกัน — จิ้มพลาดไปปุ่มข้าง ๆ ง่าย โดยเฉพาะ
+     "ลบ" ชิด "ประวัติ") → อย่างน้อย 32px แบบไม่ต้องขยายตัว icon ที่มองเห็น */
+  /* UX audit 2026-09-16: ขยายเป็นปุ่มทุกตัวใน sidebar — รวมปุ่มข้อความเล็ก
+     (ยกเลิก/บันทึก/ล้างทั้งหมด/ViewSwitch/แท็บ) ที่เดิมหลุดจาก rule; แยกเป็น 2 rule
+     เพราะ specificity ของ selector นี้ชนะ Tailwind class เดี่ยว — ใส่ display/
+     align-items ใน rule กว้างจะขโมย items-start ของปุ่มแถวรายการ (ไอคอนลอยกลาง
+     ข้อความ 2 บรรทัด) ตัวจัด center จึงคงไว้เฉพาะ button.shrink-0 (ไอคอนเดี่ยว)
+     ส่วนแถวรายการเป็นปุ่มเต็มความกว้างสูงพออยู่แล้ว ไม่กระทบ */
+  aside[data-sidebar] button {
+    min-height: 2rem;
+  }
+  aside[data-sidebar] button.shrink-0 {
+    min-height: 2rem;
+    min-width: 2rem;
+    display: inline-flex;
+    align-items: center;
+    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,
+  label {
+    touch-action: manipulation;
+  }
+
+  /* M6: กัน long-press บน iOS เปิด magnifier/callout ขอคัดลอก — scope เฉพาะ layer
+     ของ TEXTBOX/STAMP เท่านั้น (textLayer ต้อง select/copy ได้ตามปกติ) */
+  .no-callout,
+  .no-callout * {
+    -webkit-touch-callout: none;
+  }
+
+  /* M6: ปุ่มเล็กใน comment composer/popover/pin (~24px) → 36px ผ่าน class แทนการ
+     แก้ขนาดจริง (desktop คงเดิม) */
+  .coarse-36 {
+    min-height: 2.25rem;
+    min-width: 2.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* M6: ปุ่มหน้าสรุป (30px) → 44px ตามมาตรฐาน touch */
+  main.summary-page a {
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* ปุ่มที่ไม่ใช่ <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 ───────────────────────
+   หน้าสรุปมีโอกาสถูกสั่งพิมพ์แนบสำนวนสูง — browser ตัด background ตอนพิมพ์
+   โดย default ทำให้แถบหัวน้ำเงินเหลือ text ขาวบนกระดาษขาว อ่านไม่ออกทั้งแถบ:
+   แปลงเป็นกรอบเส้นน้ำเงิน + ตัวอักษรน้ำเงินแทน (อ่านได้บนเครื่องพิมพ์ขาวดำ
+   ประหยัดหมึก) และไม่ผ่าหน้ากระดาษกลาง section ของหน้าเอกสาร (หน้าที่ยาวเกิน
+   กระดาษเดียว browser เลื่อนทั้งก้อนขึ้นหน้าถัดไปเอง — break-inside เป็นคำ
+   แนะนำ ไม่ใช่กฎเหล็ก) / แถบ 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;
+    border: 1.5pt solid #0033a1;
+  }
+  main.summary-page header h1,
+  main.summary-page header p {
+    color: #0033a1;
+  }
+  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) →
+   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-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 ทุกครั้งที่แตะปุ่ม และกัน
+   pull-to-refresh ของ Android ตอนอยู่ ๆ สุดขอบบน (reload = ล้าง undo
+   history ฝั่ง client ที่ไม่เก็บใน DB) */
+html {
+  -webkit-tap-highlight-color: transparent;
+  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)
+   hook ใส่/ถอด class นี้บน <main> ตาม enabled — ปิดแล้ว native selection
+   กลับมาทันที (tool อื่น long-press copy ของ OS ใช้ได้ตามปกติ) */
+.pdf-custom-select {
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  touch-action: none;
+}
+
+/* ช่องกรอกข้อมูลในหน้า (reply ของ comment pin, textbox) ที่อยู่ใต้ <main> ตอน
+   tool highlight — ต้องเลือก/คัดลอกข้อความในช่องและเลื่อนข้อความภายในช่อง (reply
+   ยาว) ได้ตามปกติ ไม่โดน touch-action:none ของ class ด้านบนลากไปด้วย (การ scroll
+   ในช่องจบที่ตัวช่องเองซึ่งเป็น scroll container — pointerdown ของ custom
+   selection ก็เริ่มบน .textLayer เท่านั้น ไม่ชนกัน) */
+.pdf-custom-select input,
+.pdf-custom-select textarea,
+.pdf-custom-select [contenteditable="true"] {
+  user-select: text;
+  -webkit-user-select: text;
+  -webkit-touch-callout: default;
+  touch-action: auto;
+}
+
+/* เส้นคั่นบางระหว่างแถวตั้งค่า (PanelRow) ที่ต่อกันในเมนู tool/แผง selection —
+   ระยะ/เส้นเท่ากับแทรก <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 #e8e8ec;
+}
+
+/* M6: safe-area — defensive (ค่าเป็น 0 จนกว่าจะใส่ viewport-fit=cover ใน meta
+   ของ layout — ยังไม่ใส่ตามขอบเขตงานนี้ ใส่ไว้ก่อนเพื่อไม่ต้องแก้ CSS ซ้ำ) */
+header {
+  padding-top: env(safe-area-inset-top);
+}
+.comment-composer {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* UX audit 2026-09-16 L7: เคารพ prefers-reduced-motion — ตัด transition ของ
+   sidebar, animation กระพริบของปุ่ม export และ smooth scroll ทุกจุด
+   (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;
+  }
+  .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,7 +1,43 @@
 import type { Metadata } from "next";
+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 ต้องเห็นอินเทอร์เน็ต)
+ *
+ * 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", "700"],
+  display: "swap",
+  variable: "--font-sarabun",
+});
+
 export const metadata: Metadata = {
   title: "Judge's Note",
   description: "ระบบ PDF Annotation สำหรับ e-Court",
@@ -13,8 +49,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="th">
-      <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/note/annotate/[id]/page.tsx

@@ -1,5 +1,5 @@
 import { asc, eq, inArray } from "drizzle-orm";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 
 import { db } from "@/db";
 import {
@@ -12,6 +12,8 @@ import {
   toReplyDTO,
 } from "@/db/schema";
 import PDFViewer from "@/components/pdf/PDFViewer";
+import DebugConsole from "@/components/DebugConsole"; // TEMP-DEBUG (ลบพร้อมไฟล์)
+import { getSessionUser } from "@/lib/session";
 
 const UUID_RE =
   /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
@@ -26,6 +28,10 @@ export default async function AnnotatePage({
   const { id } = params;
   if (!UUID_RE.test(id)) notFound();
 
+  // defense ซ้อน middleware — identity จาก cookie oacCase ส่งเข้า viewer ตั้งแต่ first paint
+  const user = getSessionUser();
+  if (!user) redirect("/note/login");
+
   const [file] = await db.select().from(files).where(eq(files.id, id));
   if (!file) notFound();
 
@@ -53,11 +59,16 @@ export default async function AnnotatePage({
     : [];
 
   return (
+    <>
+      {/* TEMP-DEBUG: อ่าน log บนจอ iPad ผ่าน Eruda เมื่อเปิดหน้าพร้อม ?debug */}
+      <DebugConsole />
       <PDFViewer
       file={{ id: file.id, title: file.title, pdfUrl: file.pdfUrl }}
       initialAnnotations={annotationRows.map(toAnnotationDTO)}
       initialBookmarks={bookmarkRows.map(toBookmarkDTO)}
       initialReplies={replyRows.map(toReplyDTO)}
+      user={user}
       />
+    </>
   );
 }

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

@@ -0,0 +1,69 @@
+import { readFile } from "node:fs/promises";
+
+import {
+  fileKindFromUrl,
+  imageContentTypeFromUrl,
+  SAMPLE_FILE_EXTENSIONS,
+} from "@/utils/file-kind";
+import { PdfPathError, resolvePublicPdfPath } from "@/lib/server-pdf";
+
+// 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/note/uploads/ หลัง server รันแล้วจึง GET ตรง ๆ ไม่ได้ (404)
+// ฝั่ง next dev ไม่ผ่าน branch นั้น เลยทำงานได้ — อาการคลาสสิก "local ได้ production พัง"
+// อ่านอย่างเดียว (invariant #1) + path guard ของ lib/server-pdf เหมือน /api/note/pdf (§5)
+
+// ชื่อไฟล์ต้องเป็น uuid + extension ใน whitelist เท่านั้น (ตรงรูปที่ uploadFile เขียน)
+// — ชื่ออื่น 404 กลับไป ไม่รู้จักก็ไม่เปิด (กัน path traversal โดยแบบชื่อเอง: อักขระ
+// นอก hex/ขีด/จุด ผ่าน regex นี้ไม่ได้)
+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 const dynamic = "force-dynamic";
+
+export async function GET(
+  _req: Request,
+  { params }: { params: { name: string } }
+) {
+  const dot = params.name.lastIndexOf(".");
+  if (dot <= 0) return new Response(null, { status: 404 });
+  const [id, ext] = [
+    params.name.slice(0, dot),
+    params.name.slice(dot).toLowerCase(),
+  ];
+  if (!UUID_RE.test(id)) return new Response(null, { status: 404 });
+  // ext ต้องอยู่ใน whitelist เดียวกับ uploadFile — ชื่ออื่น 404 ไม่เสิร์ฟ
+  if (!SAMPLE_FILE_EXTENSIONS.includes(ext)) {
+    return new Response(null, { status: 404 });
+  }
+
+  // helper เหล่านี้คาดชื่อไฟล์เต็ม (จุดต้องอยู่หลังอักขระตัวแรก) — ส่งชื่อเต็ม ไม่ใช่ bare ext
+  const contentType =
+    fileKindFromUrl(params.name) === "image"
+      ? imageContentTypeFromUrl(params.name)
+      : "application/pdf";
+
+  let bytes: Buffer;
+  try {
+    // guard: resolve แล้วต้องอยู่ใน public/ เท่านั้น (รูปแบบชื่อผ่าน regex อยู่แล้ว
+    // — ชั้นนี้กันไว้เผื่อมีคนเรียก helper นี้ซ้ำในอนาคตด้วย input อื่น)
+    const diskPath = resolvePublicPdfPath(`/uploads/${id}${ext}`);
+    bytes = await readFile(diskPath);
+  } catch (err) {
+    if (err instanceof PdfPathError) return new Response(null, { status: 404 });
+    if ((err as NodeJS.ErrnoException).code === "ENOENT") {
+      return new Response(null, { status: 404 });
+    }
+    throw err;
+  }
+
+  return new Response(new Uint8Array(bytes), {
+    headers: {
+      "Content-Type": contentType,
+      // ชื่อไฟล์เป็น uuid ต่อการอัปโหลดหนึ่งครั้ง ไม่มีการเขียนทับ — ค่าเดียวกันตลอดชีวิตไฟล์
+      "Cache-Control": "public, max-age=31536000, immutable",
+    },
+  });
+}

app/page.tsx

@@ -1,79 +1,33 @@
-import Link from "next/link";
-import { asc } from "drizzle-orm";
-import { FileText } from "lucide-react";
+import { redirect } from "next/navigation";
 
-import { db } from "@/db";
-import { files } from "@/db/schema";
-import UserPicker from "@/components/UserPicker";
+// หน้า 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";
-
-export default async function HomePage() {
-  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>
-
-      <UserPicker />
-
-      <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 text-slate-400">{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-400">
-            รัน /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">
-                <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-400">
-                  {new Date(f.createdAt).toLocaleString("th-TH")}
-                </span>
-              </span>
-              <Link
-                href={`/annotate/${f.id}`}
-                className="shrink-0 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white transition hover:opacity-90"
-              >
-                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

@@ -0,0 +1,58 @@
+import {
+  ArrowRight,
+  Circle,
+  EyeOff,
+  Highlighter,
+  MessageSquare,
+  Minus,
+  Pencil,
+  Square,
+  Stamp,
+  Strikethrough,
+  Type,
+  Underline,
+} from "lucide-react";
+
+import type {
+  AnnotationDTO,
+  DrawData,
+  HighlightData,
+  ShapeData,
+} from "@/db/schema";
+
+/** ไอคอนตามชนิด annotation — presentational ล้วน **ไม่มี "use client"** ให้หน้าสรุป
+ *  (server component, F15) ใช้ร่วมกับ sidebar (client) ได้: lucide icon เป็น SVG
+ *  component ล้วน render ฝั่ง server ได้ (ย้ายมาจาก AnnotationSidebar.tsx) */
+export function AnnotationTypeIcon({
+  type,
+  data,
+  className = "h-4 w-4 shrink-0 text-ink-soft",
+}: {
+  type: AnnotationDTO["type"];
+  data: AnnotationDTO["data"];
+  className?: string;
+}) {
+  if (type === "HIGHLIGHT") {
+    const style = (data as HighlightData).style ?? "highlight";
+    if (style === "underline") return <Underline className={className} />;
+    if (style === "strikethrough") return <Strikethrough className={className} />;
+    return <Highlighter className={className} />; // highlight / squiggle
+  }
+  if (type === "DRAW")
+    return (data as DrawData).pen === "highlighter" ? (
+      <Highlighter className={className} />
+    ) : (
+      <Pencil className={className} />
+    );
+  if (type === "REDACTION") return <EyeOff className={className} />;
+  if (type === "TEXTBOX") return <Type className={className} />;
+  if (type === "STAMP") return <Stamp className={className} />;
+  if (type === "SHAPE") {
+    const shape = (data as ShapeData).shape;
+    if (shape === "rect") return <Square className={className} />;
+    if (shape === "ellipse") return <Circle className={className} />;
+    if (shape === "line") return <Minus className={className} />;
+    return <ArrowRight className={className} />;
+  }
+  return <MessageSquare className={className} />;
+}

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect } from "react";
+
+/** TEMP-DEBUG: เปิด Eruda (devtools ลอยบนหน้าจอ — ปุ่ม gear มุมขวาล่าง) เมื่อเปิด
+ *  หน้าพร้อม ?debug ไว้อ่าน console.warn ของ log [debug] บน iPad จริง (ไม่มี Mac
+ *  ต่อ Safari Web Inspector) — โหลดสคริปต์จาก CDN เท่านั้น ไม่แตะ dependencies
+ *  ของ project — เคลียร์ debug เสร็จ = ลบไฟล์นี้ + บรรทัด import/render ใน
+ *  app/note/annotate/[id]/page.tsx */
+export default function DebugConsole() {
+  useEffect(() => {
+    if (!new URLSearchParams(window.location.search).has("debug")) return;
+    // React strict mode รัน effect สองรอบ — กัน append script ซ้ำ
+    if (document.getElementById("eruda-loader")) return;
+    const s = document.createElement("script");
+    s.id = "eruda-loader";
+    s.src = "https://cdn.jsdelivr.net/npm/eruda@3";
+    s.async = true;
+    s.onload = () => {
+      const w = window as unknown as { eruda?: { init: () => void; show: () => void } };
+      w.eruda?.init();
+      w.eruda?.show();
+    };
+    s.onerror = () => {
+      const b = document.createElement("div");
+      b.textContent =
+        "โหลด Eruda จาก CDN ไม่ได้ (iPad ต้องต่ออินเทอร์เน็ต) — แจ้งเพื่อเปลี่ยนเป็น bundle ใน project แทน";
+      b.style.cssText =
+        "position:fixed;top:0;left:0;right:0;z-index:99999;background:#dc2626;color:#fff;padding:8px;font-size:14px";
+      document.body.appendChild(b);
+    };
+    document.head.appendChild(s);
+  }, []);
+  return null;
+}

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

@@ -0,0 +1,143 @@
+"use client";
+
+// ฟอร์ม 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";
+
+import { login } from "@/app/actions/auth";
+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 =
+  "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 = "genesis-input block w-full text-base transition";
+
+export default function LoginForm({ next }: { next: string | null }) {
+  const router = useRouter();
+  const passwordRef = useRef<HTMLInputElement | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, startTransition] = useTransition();
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const form = e.currentTarget;
+    setError(null);
+    const usernameInput = form.elements.namedItem("username") as HTMLSelectElement;
+    const passwordInput = form.elements.namedItem("password") as HTMLInputElement;
+    startTransition(async () => {
+      try {
+        const result = await login(usernameInput.value, passwordInput.value);
+        if (result.ok) {
+          router.replace(next ?? "/note");
+        } else {
+          setError(result.error);
+          // คง username ไว้ (โอกาสพลาดอยู่ที่ password) — ล้างแล้วโฟกัสให้พิมพ์ทับได้ทันที
+          passwordInput.value = "";
+          passwordRef.current?.focus();
+          passwordRef.current?.select();
+        }
+      } catch {
+        setError("เข้าสู่ระบบไม่สำเร็จ — ลองใหม่อีกครั้ง");
+      }
+    });
+  };
+
+  return (
+    <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-lg bg-primary text-base font-bold text-white">
+          JN
+        </div>
+        <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="font-display mt-8 text-subhead text-ink">เข้าสู่ระบบ</h1>
+
+      <form onSubmit={onSubmit} className="mt-5">
+        <div>
+          <label htmlFor="username" className="block text-sm font-medium text-ink">
+            ชื่อผู้ใช้
+          </label>
+          <div className="mt-1">
+            <Select
+              id="username"
+              name="username"
+              autoComplete="username"
+              required
+              autoFocus
+              disabled={pending}
+              defaultValue=""
+              className={SELECT_CLASS}
+            >
+              {/* placeholder บังคับเลือก — ไม่ preselect คนแรก กันผู้ทดสอบ login ผิดคนโดยไม่ตั้งใจ */}
+              <option value="" disabled>
+                เลือกผู้ใช้
+              </option>
+              {MOCK_USERS.map((u) => (
+                <option key={u} value={u}>
+                  {u}
+                </option>
+              ))}
+            </Select>
+          </div>
+        </div>
+
+        <div className="mt-4">
+          <label htmlFor="password" className="block text-sm font-medium text-ink">
+            รหัสผ่าน
+          </label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+            disabled={pending}
+            aria-invalid={!!error || undefined}
+            ref={passwordRef}
+            className={INPUT_CLASS}
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={pending}
+          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 ไม่มีระบบสมัคร)
+            กล่อง 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-ink">Demo1234</span>
+        </p>
+
+        {error && (
+          <p role="alert" className="mt-3 text-xs text-error-ink">
+            {error}
+          </p>
+        )}
+      </form>
+    </div>
+  );
+}

components/LogoutButton.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+// ปุ่มออกจากระบบ — server action logout ลบ cookie oacCase แล้ว redirect /login เอง
+import { useTransition } from "react";
+import { LogOut } from "lucide-react";
+
+import { logout } from "@/app/actions/auth";
+
+export default function LogoutButton() {
+  const [pending, startTransition] = useTransition();
+
+  const onLogout = () => {
+    startTransition(async () => {
+      await logout();
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onLogout}
+      disabled={pending}
+      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 ? "กำลังออก…" : "ออกจากระบบ"}
+    </button>
+  );
+}

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-400" />
+      <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/UploadFileForm.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+// N4 — ฟอร์มอัปโหลดไฟล์เอกสารแบบง่ายบนหน้ารายการ (PDF/รูป รับพร้อมกัน)
+// เสร็จแล้วรายการโผล่เองจาก 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";
+
+const ACCEPT = ".pdf,.jpg,.jpeg,.png,.tif,.tiff";
+
+/** ขนาดสูงสุดตาม validator ของ uploadFile (app/actions/files.ts) — เช็คฝั่ง client
+ *  ก่อนอัปโหลด (M5, UX audit 2026-09-16): ไฟล์สแกนคดีที่เกินไม่ต้องรอส่งจนจบ
+ *  บนเน็ตช้าก่อนเจอ error ของ server */
+const MAX_BYTES = 100 * 1024 * 1024;
+
+export default function UploadFileForm() {
+  const [error, setError] = useState<string | null>(null);
+  const [pending, startTransition] = useTransition();
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const form = e.currentTarget;
+    setError(null);
+    const input = form.elements.namedItem("file") as HTMLInputElement | null;
+    const file = input?.files?.[0];
+    if (file && file.size > MAX_BYTES) {
+      setError("ไฟล์ใหญ่เกิน 100MB — เลือกไฟล์เล็กกว่า");
+      return;
+    }
+    startTransition(async () => {
+      try {
+        const result = await uploadFile(new FormData(form));
+        if (result.ok) {
+          form.reset();
+        } else {
+          setError(result.error);
+        }
+      } catch {
+        // action fail ที่ระดับ transport (เช่น body ใหญ่เกิน bodySizeLimit ของ next.config)
+        setError("อัปโหลดไม่สำเร็จ — ลองใหม่อีกครั้ง");
+      }
+    });
+  };
+
+  return (
+    <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="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="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="mt-3 text-xs leading-relaxed text-ink-soft">
+        รองรับ PDF, JPG, PNG, TIFF — ไม่เกิน 100MB ต่อไฟล์
+      </p>
+      {error && <p className="mt-2 text-xs text-error-ink">{error}</p>}
+    </form>
+  );
+}

components/UserPicker.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-// เลือก mock user ที่หน้าแรกก่อนเข้า annotate — เขียนลง localStorage key เดิม
-// ที่ getLocalUser() อ่าน (PDFViewer ไม่ต้องแก้อะไร)
-import { useEffect, useState } from "react";
-
-import Select from "./Select";
-import {
-  MOCK_USERS,
-  getStoredLocalUser,
-  setLocalUser,
-  type LocalUser,
-} from "@/utils/user";
-
-export default function UserPicker() {
-  const [current, setCurrent] = useState<LocalUser | null>(null);
-
-  // ต้องรันใน effect เพราะ SSR ไม่มี localStorage — ก่อน mount แสดงคนแรกไว้ก่อน
-  useEffect(() => {
-    const stored = getStoredLocalUser();
-    if (!stored) {
-      // ยังไม่เคยมี identity → เริ่มด้วย mock user คนแรก
-      setLocalUser(MOCK_USERS[0]);
-      setCurrent(MOCK_USERS[0]);
-      return;
-    }
-    setCurrent(stored);
-  }, []);
-
-  // identity สุ่มเดิมไม่อยู่ในรายการ mock → แสดงเป็น option ชั่วคราวให้เห็นว่าปัจจุบันคือใคร
-  const isMock = current !== null && MOCK_USERS.some((u) => u.userId === current.userId);
-
-  const select = (userId: string) => {
-    const user = MOCK_USERS.find((u) => u.userId === userId);
-    if (!user) return;
-    setLocalUser(user);
-    setCurrent(user);
-  };
-
-  return (
-    <section className="mt-6 rounded-lg border bg-white p-4 shadow-sm">
-      <h2 className="text-sm font-semibold text-primary">เลือกผู้ใช้ (mock)</h2>
-      <p className="mt-0.5 text-xs text-slate-400">
-        annotation ทั้งหมดจะบันทึกในชื่อผู้ใช้ที่เลือก
-      </p>
-      <Select
-        value={current ? (isMock ? current.userId : "") : MOCK_USERS[0].userId}
-        onChange={(e) => {
-          if (e.target.value) select(e.target.value);
-        }}
-        className="mt-3 block w-full rounded-md border bg-white py-2 pl-3 text-sm"
-      >
-        {current && !isMock && (
-          <option value="" disabled>
-            {current.userName} (สุ่มอัตโนมัติ)
-          </option>
-        )}
-        {MOCK_USERS.map((u) => (
-          <option key={u.userId} value={u.userId}>
-            {u.userName}
-          </option>
-        ))}
-      </Select>
-    </section>
-  );
-}

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,25 +6,84 @@ import {
   useState,
   type PointerEvent as ReactPointerEvent,
 } from "react";
-import { AlignCenter, AlignLeft, AlignRight, BookmarkPlus, 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 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 **เสมอ**
 //   เฉพาะ handle มุม (scale) / ขอบกรอบ (translate) / แถบเครื่องมือที่ auto
@@ -34,20 +93,29 @@ import { ColorSwatches, HIGHLIGHT_STYLE_BTNS, NumberCombo, PanelRow } from "./To
 
 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 และไม่เล็กกว่าขั้นต่ำ */
@@ -83,6 +151,8 @@ export default function AnnotationSelectionLayer({
   onCommit,
   onDelete,
   onBookmark,
+  onStartEdit,
+  onPatch,
 }: {
   annotation: AnnotationDTO;
   /** ขนาด px ของหน้า (จาก width/height ที่คำนวณจาก scale) */
@@ -101,14 +171,90 @@ export default function AnnotationSelectionLayer({
   onDelete: (id: string) => void;
   /** N2: ปุ่ม bookmark ในแผง — เปิด popup ที่ตำแหน่ง (yOffset %) ของ annotation นี้ */
   onBookmark: (yOffsetPct: number) => void;
+  /** 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 ชัด)
@@ -120,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;
@@ -133,6 +279,7 @@ export default function AnnotationSelectionLayer({
       origData: annotation.data,
       origBoxPct: boxPct,
       anchorPct,
+      ...(stampRot !== 0 ? { rot: stampRot } : null),
     };
     movedRef.current = false;
     latestRef.current = null;
@@ -144,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,
@@ -188,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(
@@ -228,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>) {
@@ -236,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;
@@ -245,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 */
@@ -305,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,
@@ -316,44 +492,62 @@ 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 ปรับความกว้างแทนการย้าย
   // และซ่อนมุม (scale ไม่มีความหมายกับกล่องกว้างคงที่) — ย้ายกล่องใช้ขอบบน/ล่าง
   const isFixedTextbox = textboxData?.width !== undefined;
 
-  // มุมทั้ง 4 — ตำแหน่งวางเป็น px, anchor มุมตรงข้ามเป็น % ตรง ๆ จาก boxPct
-  // (พิกัด % คำนวณผ่าน utils/coordinates เท่านั้น — invariant #2)
+  // แผงมี row ตัวควบคุมสไตล์หรือเหลือแค่ปุ่ม bookmark+ลบ (COMMENT/REDACTION) —
+  // กรณีหลังหุบเป็น w-fit ไม่คั่นเส้น และปุ่มติดกันแทน justify-between
+  const hasStyleControls = !!(highlightData || strokeData || stampData || textboxData);
+
+  // มุมทั้ง 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 }),
     },
   ];
 
@@ -383,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),
         }}
       />
 
@@ -398,15 +594,17 @@ export default function AnnotationSelectionLayer({
           สี/รูปแบบ/ลบได้อย่างเดียว) จึงไม่มี handle ขอบกรอบและมุม */}
       {editable && !disabled && !isHighlightMark && (
         <>
-          {/* ขอบกรอบ 4 ด้าน — ลาก = translate ทั้งกลุ่ม */}
+          {/* ขอบกรอบ 4 ด้าน — ลาก = translate ทั้งกลุ่ม (touch-none: จอสัมผัสลาก
+              ได้จริง ไม่ถูก browser ยึดเป็น scroll แล้วส่ง pointercancel) */}
           <div
-            className="absolute cursor-move"
+            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}
@@ -414,13 +612,14 @@ export default function AnnotationSelectionLayer({
             onPointerCancel={cancelDrag}
           />
           <div
-            className="absolute cursor-move"
+            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}
@@ -428,13 +627,14 @@ export default function AnnotationSelectionLayer({
             onPointerCancel={cancelDrag}
           />
           <div
-            className={`absolute ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
+            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 })
@@ -444,13 +644,14 @@ export default function AnnotationSelectionLayer({
             onPointerCancel={cancelDrag}
           />
           <div
-            className={`absolute ${isFixedTextbox ? "cursor-ew-resize" : "cursor-move"}`}
+            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 })
@@ -461,11 +662,13 @@ 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 rounded-sm border border-primary bg-primary/50"
+              className="absolute touch-none sel-handle rounded-sm border border-primary bg-primary/50"
               style={{
                 left: c.x - HANDLE_PX / 2,
                 top: c.y - HANDLE_PX / 2,
@@ -473,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}
@@ -481,18 +685,71 @@ 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 ย้าย/ขยาย แต่เปลี่ยนสี/รูปแบบ/ลบได้) — เฉพาะรายการของตัวเอง */}
+          (ไม่มี handle ย้าย/ขยาย แต่เปลี่ยนสี/รูปแบบ/ลบได้) — เฉพาะรายการของตัวเอง
+          clamp แนวนอน: รายการชิดขวาหน้า (จอแคบ fit-width) ต้องไม่ทำแผง w-60 ล้นขอบขวา
+          จนปุ่มลบ/ตัวควบคุมหลุดจอ (เจอตอน verify จอ 390px — ปุ่มลบครึ่งเดียวจิ้มได้ยาก)
+          กรณี w-fit ใช้ 240 เป็น upper bound ต่อ (แคบกว่า w-60 เสมอ — clamp หลวมเกินไม่มีผลร้าย) */}
       {editable && !disabled && (
         <div
           ref={panelRef}
-          className="absolute w-60 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: boxPx.x,
+            left: Math.max(0, Math.min(boxPx.x, size.width - 240 - 4)),
             top: openAbove ? boxPx.y - 6 : boxPx.y + boxPx.height + 4,
             transform: openAbove ? "translateY(-100%)" : undefined,
             pointerEvents: "auto",
@@ -500,7 +757,7 @@ export default function AnnotationSelectionLayer({
         >
           {highlightData && (
             <>
-              <PanelRow label="สี">
+              <PanelRow>
                 <ColorSwatches value={highlightData.color} onChange={commitColor} />
               </PanelRow>
               <PanelRow label="รูปแบบ">
@@ -512,10 +769,10 @@ export default function AnnotationSelectionLayer({
                       aria-label={label}
                       title={label}
                       aria-pressed={(highlightData.style ?? "highlight") === key}
-                      className={`flex h-6 w-6 items-center justify-center rounded-md transition ${
+                      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)}
                     >
@@ -538,7 +795,7 @@ export default function AnnotationSelectionLayer({
             </>
           )}
           {strokeData && (
-            <PanelRow label="สี">
+            <PanelRow>
               <ColorSwatches value={strokeData.strokeColor} onChange={commitColor} />
             </PanelRow>
           )}
@@ -556,7 +813,21 @@ export default function AnnotationSelectionLayer({
           )}
           {stampData && (
             <>
-              <PanelRow label="สี">
+              {/* ทางเข้า 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}
                   onChange={commitColor}
@@ -573,11 +844,35 @@ 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 && (
             <>
-              <PanelRow label="สี">
+              {/* M1: ทางเข้า editor นอกจาก double-click — แผงโผล่เฉพาะของตัวเองอยู่แล้ว
+                  (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={textboxData.color}
                   onChange={(c) => commitTextboxPatch({ color: c })}
@@ -611,10 +906,10 @@ export default function AnnotationSelectionLayer({
                   type="button"
                   aria-label="สลับตัวหนาทั้งกล่อง"
                   aria-pressed={!!textboxData.bold}
-                  className={`flex h-6 w-6 items-center justify-center rounded-md border transition ${
+                  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 })}
                 >
@@ -625,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, "ชิดซ้าย"],
@@ -638,10 +933,10 @@ export default function AnnotationSelectionLayer({
                       type="button"
                       aria-label={`จัดแนว${aLabel}`}
                       aria-pressed={(textboxData.align ?? "left") === a}
-                      className={`px-2 py-1 transition ${
+                      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 })}
                     >
@@ -652,23 +947,29 @@ export default function AnnotationSelectionLayer({
               </PanelRow>
             </>
           )}
-          <div className="my-1 border-t border-slate-100" />
-          <div className="flex items-center justify-between">
+          {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 items-center justify-center rounded text-slate-400 hover:bg-amber-50 hover:text-amber-500"
+              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-line" />
+            )}
             <button
               type="button"
               aria-label="ลบรายการนี้"
               title="ลบ"
-              className="flex h-5 w-5 items-center justify-center rounded text-red-500 hover:bg-red-50"
+              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,7 +20,9 @@ import {
   type Rect,
   type Size,
 } from "@/utils/coordinates";
-import { hitTestPath, hitTestShape } from "@/utils/geometry";
+import { measureStampText } from "@/utils/annotation-display";
+import { annotationBBox, hitTestPath, hitTestShape } from "@/utils/geometry";
+import type { InkStamp } from "./TextboxStampLayer";
 
 /** เส้นวาดที่เก็บใน DB — จุดทุกจุดเป็น % ของหน้า, strokeWidth เป็น % ของความกว้าง */
 export type InkStroke = {
@@ -79,6 +81,7 @@ export default function InkLayer({
   size,
   strokes,
   shapes,
+  stamps,
   redactions,
   active,
   nextStroke,
@@ -97,6 +100,8 @@ export default function InkLayer({
   strokes: InkStroke[];
   /** รูปทรงเดิมจาก DB (พิกัด %) */
   shapes: InkShape[];
+  /** ตรายางเดิมจาก DB (พิกัด %) — render ที่ TextboxStampLayer แต่ eraser hit-test ที่นี่ */
+  stamps: InkStamp[];
   /** ปิดพรางเดิมจาก DB (พิกัด %) — วาดทับบังข้อความจริงบนจอ (F8) */
   redactions: InkRedaction[];
   /** tool วาด/รูปทรง/eraser/redact → รับ pointer events */
@@ -289,11 +294,27 @@ export default function InkLayer({
     }
   }
 
-  /** hit-test ตำแหน่ง pointer กับเส้น/รูปทรง **ของตัวเอง** — โดนเมื่อไรลบทันทีทีละรายการ (F6) */
+  /** hit-test ตำแหน่ง pointer กับเส้น/รูปทรง/ตรายาง **ของตัวเอง** — โดนเมื่อไรลบทันทีทีละรายการ (F6) */
   function eraseAt(e: ReactPointerEvent<HTMLDivElement>) {
     if (!onErase || ownUserId === "") return;
-    const p = pointToPercent(toLocalPx(e), measured);
+    const lp = toLocalPx(e);
+    const p = pointToPercent(lp, measured);
     const pad = 6; // เผื่อความคาดหวังของผู้ใช้นอกเส้นจริง (px)
+    // ตรายาง render อยู่ layer บน (TextboxStampLayer) → เช็คก่อน ให้ตัวบนสุดชนะ
+    // (bbox = สูตรเดียวกับ render และกรอบ selection — annotationBBox)
+    for (const s of stamps) {
+      if (s.userId !== ownUserId) continue;
+      const b = annotationBBox({ type: "STAMP", data: s.data }, measured, measureStampText);
+      if (
+        lp.x >= b.x - pad &&
+        lp.x <= b.x + b.width + pad &&
+        lp.y >= b.y - pad &&
+        lp.y <= b.y + b.height + pad
+      ) {
+        onErase(s.id);
+        return;
+      }
+    }
     for (const s of strokes) {
       if (s.userId !== ownUserId) continue;
       const threshold = toPx(s.strokeWidthPct, measured.width) / 2 + 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,58 +29,15 @@ 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";
-let stampMeasureCtx: CanvasRenderingContext2D | null = null;
+// ฟอนต์ตรายางบนจอ + canvas measure ย้ายไป utils/annotation-display.ts แล้ว
+// (2026-09-28) ให้ preview ในเมนูของ tool ใช้ตัววัดเดียวกันกับตอน render จริง
 
-/** วัดความกว้างข้อความตรายางบนจอ — ไม่มี 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 };
-}
+/** typography audit 2026-09-16 (T4.4 + Option B): ฟอนต์กล่องข้อความบนจอ — pin ชัดทั้ง
+ *  editor และ render ไม่สืบทอดจาก body: กล่องกว้างเป็น % คงที่ ฟอนต์เปลี่ยนตามเครื่อง
+ *  จะทำให้ตัดบรรทัดไม่เท่ากัน — ผูกเข้า webfont Sarabun (var จาก next/font) ให้ wrap
+ *  ตรงกันทุกอุปกรณ์จริง (T1-C) พร้อม system ไทยเดิมเป็น fallback ตอนโหลดไม่ได้ */
+const TEXTBOX_FONT_STACK =
+  "var(--font-sarabun, 'Sarabun'), 'Leelawadee UI', 'Thonburi', sans-serif";
 
 /** กล่องแก้ไข/สร้างข้อความแบบ inline rich text — เลือกข้อความแล้วกด Ctrl/Cmd+B
  *  ทำตัวหนาเฉพาะส่วนที่เลือกได้ (สไตล์ทั้งกล่องจากตัวตั้งค่าของ tool/ของกล่อง) */
@@ -108,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(() => {
@@ -132,9 +109,11 @@ function TextboxEditor({
   const submit = () => {
     const el = ref.current;
     if (!el) return;
+    finish(() => {
       const { text, segments } = serializeEditor(el);
       if (text.trim()) onSave(text, segments);
       else onCancel();
+    });
   };
 
   return (
@@ -165,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) => {
@@ -187,8 +181,11 @@ 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),
           lineHeight: 1.5,
           color,
@@ -201,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,
@@ -244,7 +409,7 @@ export default function TextboxStampLayer({
   onSelect: (id: string) => void;
 }) {
   return (
-    <div className="pointer-events-none absolute inset-0 z-[4]">
+    <div className="no-callout pointer-events-none absolute inset-0 z-[4]">
       {textboxes.map((t) =>
         editingId === t.id ? (
           <TextboxEditor
@@ -267,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),
@@ -275,6 +444,7 @@ export default function TextboxStampLayer({
               // (แบบ Smallpdf กล่องไม่ขยับ) · maxWidth บีบตามพื้นที่ถึงขอบขวาเหมือนเดิม
               ...(t.data.width !== undefined ? { width: `${t.data.width}%` } : null),
               maxWidth: `${textboxMaxWidthPct(t.data.position.x)}%`,
+              fontFamily: TEXTBOX_FONT_STACK,
               fontSize: toPx(t.data.fontSize, size.width),
               lineHeight: 1.5,
               color: t.data.color,
@@ -284,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);
@@ -320,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,9 +5,17 @@ import { Check, ChevronDown, ChevronUp, Highlighter, Strikethrough, Underline }
 
 import type { HighlightStyle } from "@/db/schema";
 
+import { colorName } from "@/utils/annotation-display";
+
 // ตัวควบคุมที่ใช้ร่วมระหว่าง dropdown บนปุ่ม tool (PDFViewer) กับแผงเครื่องมือ
 // บนกรอบ selection (AnnotationSelectionLayer) — หน้าตา/พฤติกรรมเดียวกันทั้งสองที่
 
+/** UX audit 2026-09-16: focus ring คีย์บอร์ด — ค่าเดียวกับ FOCUS_RING_CLS ของ
+ *  PDFViewer/AnnotationSidebar (ประกาศแยกที่นี่เพราะ PDFViewer import ไฟล์นี้
+ *  อยู่แล้ว ห้ามวนกลับ) */
+const FOCUS_RING_CLS =
+  "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") ท้ายแถว */
 export const INK_COLORS = [
@@ -19,31 +27,37 @@ export const INK_COLORS = [
   "#3b82f6", // น้ำเงิน
   "#8b5cf6", // ม่วง
   "#ec4899", // ชมพู
+  "#b45309", // น้ำตาล
   "#111827", // ดำ (default textbox)
   "#6b7280", // เทา
 ];
 
-/** แถวตั้งค่าในเมนู/แผงเครื่องมือ — label ซ้าย + ตัวควบคุมขวา */
-export function PanelRow({ label, children }: { label: string; children: ReactNode }) {
+/** แถวตั้งค่าในเมนู/แผงเครื่องมือ — label ซ้าย (optional: แถวสีไม่ใส่ ให้ตารางกินเต็มแถว)
+ *  + ตัวควบคุมขวา */
+export function PanelRow({ label, children }: { label?: string; children: ReactNode }) {
   return (
-    <div className="flex items-start gap-2 px-1 py-1">
-      <span className="w-11 shrink-0 pt-1 text-[10px] font-medium text-slate-400">{label}</span>
+    <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-ink-soft">{label}</span>
+      ) : null}
       {children}
     </div>
   );
 }
 
-/** แถวปุ่มสีวงกลม preset + ปุ่มสีรุ้ง (color picker เลือกสีอื่นได้ไม่จำกัด) */
+/** แถวปุ่มสีวงกลม preset + ปุ่มสีรุ้งวงกลม (color picker เลือกสีอื่นได้ไม่จำกัด)
+ *  grid 4 ต่อแถว — 11 สี preset + สีรุ้ง = 12 วง เรียงจบพอดี 3 แถว (4+4+4)
+ *  ช่อง ~37px พ้นมาตรฐาน touch 36px เลยไม่ต้องปลด min ใน CSS จอสัมผัส */
 export function ColorSwatches({ value, onChange }: { value: string; onChange: (c: string) => void }) {
   return (
-    <div className="flex flex-1 flex-wrap items-center gap-1.5">
+    <div className="color-swatches grid flex-1 grid-cols-4 gap-1.5">
       {INK_COLORS.map((c) => (
         <button
           key={c}
           type="button"
-          aria-label={`เลือกสี ${c}`}
-          title={c}
-          className={`h-4 w-4 rounded-full border border-slate-300 transition ${
+          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 }}
@@ -52,7 +66,7 @@ export function ColorSwatches({ value, onChange }: { value: string; onChange: (c
       ))}
       <label
         title="เลือกสีอื่น"
-        className={`relative h-4 w-4 cursor-pointer rounded-full border border-slate-300 transition ${
+        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={{
@@ -120,6 +134,7 @@ export function NumberCombo({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- draft/value/onChange ใช้ค่าล่าสุดตอน timer ยิง
   }, [draft]);
 
+  // คลิกนอกตัวควบคุม = ปิด dropdown (คลิกใน dropdown เองไม่นับ — อยู่ใน rootRef)
   useEffect(() => {
     if (!open) return;
     const onMouseDown = (e: MouseEvent) => {
@@ -155,7 +170,7 @@ export function NumberCombo({
   return (
     <div
       ref={rootRef}
-      className="relative"
+      className="number-combo relative flex-1"
       onKeyDown={(e) => {
         // Esc ปิดแค่ dropdown นี้ก่อน (stopPropagation ไม่ให้ปิดทั้งเมนู/กรอบ)
         if (e.key === "Escape" && open) {
@@ -164,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}
@@ -174,40 +189,45 @@ export function NumberCombo({
           onChange={(e) => setDraft(e.target.value)}
           onBlur={commitDraft}
           onFocus={(e) => {
-            setOpen(true); // กดที่ช่อง = เปิดรายการให้เลือกเลย (ไม่ต้องมีปุ่มเปิดแยก)
+            setOpen(true); // กดที่ช่อง = เปิดรายการ preset ให้เลือกเลย (พิมพ์ค่าอื่นเองก็ได้)
             e.target.select(); // พิมพ์ทับค่าเดิมได้ทันที
           }}
           onKeyDown={(e) => {
             if (e.key !== "Escape") e.stopPropagation(); // พิมพ์ในช่องต้องไม่ชนคีย์ลัด F3 (Esc ปล่อยไหลไปปิดเมนู)
             if (e.key === "Enter") commitDraft(); // ยืนยันครั้งเดียวตรงนี้ ไม่ต้องรอ blur
           }}
-          className="w-14 border-0 px-1.5 py-1 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="flex flex-1 items-center justify-center px-1.5 text-slate-500 hover:bg-slate-100"
+            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-2.5 w-2.5" />
+            <ChevronUp className="h-3 w-3" />
           </button>
           <button
             type="button"
             aria-label="ลดค่า"
             onMouseDown={(e) => e.preventDefault()}
-            className="flex flex-1 items-center justify-center border-t border-slate-300 px-1.5 text-slate-500 hover:bg-slate-100"
+            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-2.5 w-2.5" />
+            <ChevronDown className="h-3 w-3" />
           </button>
         </div>
       </div>
       {open && (
         <div
           role="listbox"
-          className="absolute right-0 top-full z-[60] mt-1 w-16 overflow-hidden rounded-md border border-slate-200 bg-white py-0.5 shadow-lg"
+          // 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-line bg-white py-0.5 shadow-lg"
         >
           {options.map((opt) => (
             <button
@@ -216,19 +236,21 @@ export function NumberCombo({
               role="option"
               aria-selected={value === opt}
               onMouseDown={(e) => e.preventDefault()} // ไม่แย่ง focus จาก input ก่อนคลิก
-              className={`flex w-full items-center justify-end gap-1 px-2 py-1 text-right text-[11px] font-medium transition ${
+              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);
                 setOpen(false);
               }}
             >
+              <span className="flex-1">
                 {opt}
                 {suffix}
-              {value === opt && <Check className="h-3 w-3 shrink-0" />}
+              </span>
+              {value === opt && <Check className="h-3.5 w-3.5 shrink-0" />}
             </button>
           ))}
         </div>
@@ -260,7 +282,7 @@ export const HIGHLIGHT_STYLE_BTNS: {
   label: string;
   Icon: ComponentType<{ className?: string }>;
 }[] = [
-  { key: "highlight", label: "ไฮไลต์", Icon: Highlighter },
+  { key: "highlight", label: "ไฮไลต์ข้อความ", Icon: Highlighter },
   { key: "underline", label: "เส้นใต้", Icon: Underline },
   { key: "strikethrough", label: "ขีดฆ่า", Icon: Strikethrough },
   { key: "squiggle", label: "ขยุกขยิก", Icon: SquiggleIcon },

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/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", {
+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",
@@ -168,6 +191,9 @@ export const bookmarks = pgTable(
       .references(() => files.id, { onDelete: "cascade" }),
     pageIndex: integer("page_index").notNull(),
     userId: text("user_id").notNull(),
+    /** N6: ชื่อผู้บันทึก (mirror annotations — เดิมมีแค่ user_id จนกรองตามผู้บันทึกแล้วไม่มีชื่อแสดง);
+     *  '' = row เดิมก่อน backfill → UI แสดง "ไม่ทราบชื่อ" */
+    userName: text("user_name").notNull().default(""),
     title: text("title").notNull(),
     /** N2: bookmark แม่ (NULL = หมุดหัวข้อใหญ่ระดับบนสุด) — ไม่ทำ FK เพราะลบแม่ต้อง re-parent ลูกขึ้น root ก่อนใน tx เดียวกัน */
     parentId: uuid("parent_id"),
@@ -227,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;
@@ -254,6 +344,8 @@ export type BookmarkDTO = {
   fileId: string;
   pageIndex: number;
   userId: string;
+  /** N6 — '' = ไม่ทราบชื่อ (row เดิมก่อน backfill) */
+  userName: string;
   title: string;
   /** N2: NULL = ระดับบนสุด / มีค่า = sub ของ bookmark นั้น */
   parentId: string | null;
@@ -309,6 +401,7 @@ export function toBookmarkDTO(row: BookmarkRow): BookmarkDTO {
     fileId: row.fileId,
     pageIndex: row.pageIndex,
     userId: row.userId,
+    userName: row.userName,
     title: row.title,
     parentId: row.parentId,
     note: row.note,
@@ -342,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,19 +45,27 @@ 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
 # postgres.js โดน Next บีบ bundle เข้า server chunks — standalone node_modules ไม่มี package นี้
 # แต่ migrate.mjs import มันตรง ๆ → คัดลอกจาก stage deps (v3 ไม่มี dependency ย่อย โฟลเดอร์เดียวพอ)
 COPY --from=deps --chown=nextjs:nodejs /app/node_modules/postgres ./node_modules/postgres
+# สร้างโฟลเดอร์ uploads ให้ user nextjs เป็นเจ้าของ — named volume ที่ compose mount ทับ
+# (เก็บไฟล์อัปโหลดข้าม redeploy) จะได้ ownership จาก image ตอน init:
+# ไม่มี dir นี้ใน image = volume ถูกสร้างโดย root แล้ว action เขียนไฟล์ไม่ได้ (EACCES)
+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

@@ -0,0 +1,91 @@
+# แผน 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 ✅)
+> ตาม governance ของโปรเจกต์: implement ต้องเขียนสเปกลง `docs/PLAN-FEAT.md` §7 (**N7** รายงานรายการ bookmark เป็น PDF) + ขยาย whitelist ใน `CLAUDE.md` ก่อน — เป็น task ที่ 1 ของแผนนี้ แล้วรันผ่าน `/implement-feat N7`
+
+## Context
+
+- **5.3.15 (⚠️):** ตอนนี้มี export PDF ฝัง annotation + bookmark เป็น PDF outline (F8 — `app/api/annotations/export/route.ts`) + export CSV สรุป annotation (F16) — แต่ requirement ถามหา **"เอกสาร PDF ที่เป็นรายงานรายการ bookmark"** เอกสารแยกต่างหาก ไม่ใช่ไฟล์ต้นฉบับ
+- โครงสร้างพร้อมอยู่แล้วทั้งหมด: pdf-lib + fontkit (ใช้ใน F8), ฟอนต์ไทย `public/fonts/Sarabun-Regular.ttf` (embed ได้เลย), `BookmarkDTO` มี `userName` (N6) + โครงสร้างต้นไม้ `parentId` (N2) + ลำดับ N5 (`pageIndex → yOffset → createdAt`), `wrapTextByWidth`/`encodeRFC5987` ใน `utils/pdf-export.ts`
+
+## การตัดสินใจ (ยืนยันกับผู้ใช้แล้ว 2026-09-16)
+
+1. **Entry point:** ปุ่มไอคอนเล็กในแท็บ "ที่คั่นหน้า" ของ sidebar (ใน block ค้นหา N6) — จุดเดียว ไม่วางที่หน้าสรุป F15
+2. **เลย์เอาต์:** ต้นไม้ indent 3 ระดับ เหมือน sidebar เป๊ะ — เรียงตามลำดับหน้า (N5) แต่ละรายการ: ชื่อ + metadata (หน้า · ผู้บันทึก · วันที่บันทึก) + โน้ตใต้ชื่อ
+3. **ขอบเขตข้อมูล:** ทุก bookmark ของไฟล์เสมอ — ไม่ผูกกับเงื่อนไขค้นหา N6 ที่ผู้ใช้ทิ้งไว้
+
+## Design
+
+### D1 — Route `app/api/bookmarks/export/route.ts` (GET ?fileId=)
+
+สร้างเอกสาร PDF **ใหม่ล้วน** (`PDFDocument.create()`) — **ไม่โหลด/ไม่แตะไฟล์เอกสารต้นฉบับเลย** (invariant #1 โดยการสร้าง ไม่ใช่การก๊อป — ไม่เกี่ยว `readPublicPdf`):
+
+- **validate + query** ตาม pattern route export เดิม (F8/F16): `fileId` ผ่าน UUID → ไม่ผ่าน = 400 "fileId ไม่ถูกต้อง" · หา `files` ไม่เจอ = 404 "ไม่พบไฟล์นี้" · query `bookmarks` ทั้งไฟล์ `orderBy asc(pageIndex), asc(yOffset), asc(createdAt)` (ลำดับเดียวกับ `searchBookmarks`/N5)
+- **ต้นไม้:** build `childrenOf` + `roots` จาก array ที่เรียงแล้ว (เดินตามลำดับ = ลูกเรียงตาม N5 อัตโนมัติ) — orphan (`parentId` ไม่อยู่ใน set) → เลื่อนขึ้น root เหมือน sidebar/buildOutline · **cycle guard** (ข้อมูลถูกแก้ตรง DB หลุด guard ของ action): DFS ด้วย seen ชุดเดียวร่วมทุก root กันเดินซ้ำ/วนไม่รู้จบ แล้วเติมโหนดที่ไม่มี root เข้าถึงเป็นรายการระดับ 1 ท้ายรายการ — ครอบทั้งวงจรปน root ปกติ (ไม่หายเงียบ) และวงจรล้วนทั้งไฟล์ (ออกมาแบนระดับ 1 ทั้งหมด)
+- **ฟอนต์:** embed `public/fonts/Sarabun-Regular.ttf` ด้วย fontkit (`subset: true` เหมือน F8) — **จำเป็น** (รายงานเป็นข้อความล้วน): ไม่มีไฟล์ = 500 ข้อความชัด "ขาดไฟล์ฟอนต์ Sarabun-Regular.ttf" (ต่างจาก D5 ของ F8 ที่ optional เพราะ annotation ยังวาดรูปได้ — รายงานไม่มีฟอนต์ = ไร้ค่า) · ใช้ **Regular ตัวเดียว** — ลำดับชั้นทำด้วย indent + ขนาด ไม่ใช้ตัวหนา
+- **เลย์เอาต์** A4 portrait (595.28×841.89pt) margin 48pt:
+  - หัวรายงาน (หน้าแรกหน้าเดียว): "รายการที่คั่นหน้า" 16pt · ชื่อไฟล์ 12pt · "สร้างเมื่อ {วันที่ export} · N รายการ" 9pt สีเทา (#64748b) + เส้นคั่นใต้หัว
+  - แถว bookmark (DFS ตามต้นไม้): ชื่อ — indent 14pt ต่อระดับ, ระดับ 1 = 13pt / ระดับ 2–3 = 11pt, wrap ด้วย `wrapTextByWidth` (ชื่อยาว) → บรรทัด metadata 9pt เทา: "หน้า {pageIndex+1} · {userName || "ไม่ทราบชื่อ"} · {createdAt format วันที่}" → ถ้ามีโน้ต: "โน้ต: …" 9pt wrap ใต้ metadata
+  - วันที่: `toLocaleDateString("th-TH", { timeZone: "Asia/Bangkok" })` (แสดง พ.ศ. อัตโนมัติ — วันที่อย่างเดียว ไม่มีเวลา ต่างจาก CSV ที่เป็น report เชิงอ่าน)
+  - ระยะห่าง 8pt ต่อรายการ · 12pt ก่อนรายการระดับ 1 ที่ไม่ใช่ตัวแรก (แยกกลุ่มหัวข้อให้เห็น)
+  - **แบ่งหน้า:** y เลย bottom margin → `addPage` วาดต่อ (หัวรายงานไม่ซ้ำ) — guard: ถ้าเพิ่งขึ้นหน้าใหม่แล้วแถวยังสูงเกินหน้า วาดต่ออยู่ดี (กัน infinite loop กับโน้ตยาวเกินหน้า) · จบแล้ววาด footer "หน้า n จาก N" กลางล่าง 9pt ทุกหน้า
+  - **0 bookmark:** ยังสร้าง PDF หน้าเดียวพร้อมข้อความ "ยังไม่มีรายการที่คั่นหน้าในไฟล์นี้" (ไม่ 404 — ปุ่มทำงานเสมอ ทำนายผลได้)
+- **Response:** `content-type: application/pdf` + `content-disposition: attachment; filename="bookmarks.pdf"; filename*=UTF-8''${encodeRFC5987(file.title + "-bookmarks.pdf")}` (pattern เดียวกับ F8 `-annotated.pdf` / F16 `-summary.csv`)
+- **Read-only ล้วน:** ไม่ publish event ไม่ `revalidatePath` (เหมือน `searchBookmarks`/route export เดิม)
+
+### D2 — ปุ่มในแท็บ "ที่คั่นหน้า" ของ sidebar
+
+`components/sidebar/AnnotationSidebar.tsx` — ใน block ค้นหา N6 (แสดงเฉพาะ `tab === "bookmarks"`):
+
+- ปุ่มไอคอน `Download` (lucide) `shrink-0` วาดท้ายแถว toggle เงื่อนไข (ถัดจาก chevron) เป็น **`<a href={`/api/bookmarks/export?fileId=${fileId}`}>` ลิงก์ธรรมดา** — ไม่มี JS ไม่มี state (pattern เดียวกับปุ่ม Export CSV หน้าสรุป F16) — `fileId` เป็น prop อยู่แล้ว
+- `title` + `aria-label` = "ส่งออกทุกที่คั่นหน้าของไฟล์นี้เป็น PDF" (บอก scope ตามการตัดสินใจ #3 — ไม่ขึ้นกับเงื่อนไขค้นหา) + `FOCUS_RING_CLS` + class `coarse-36` (เป้าจิ้ม 36px บนจอสัมผัส — pattern ปุ่ม sidebar)
+- แสดงทุกมุมมองของแท็บ (ต้นไม้ / ผลการค้นหา) เพราะ block ค้นหาอยู่คงที่เหนือพื้นที่เนื้อหาเสมอ
+
+## Docs/rules sync (plan-first — ทำเป็น task แรก ก่อนแตะโค้ด)
+
+| ไฟล์ | สิ่งที่แก้ |
+|---|---|
+| `docs/PLAN-FEAT.md` §7 | หัวข้อใหม่ **N7 · รายงานรายการ bookmark เป็น PDF** (format ตาม N5/N6 + อ้างแผนฉบับเต็ม `docs/PLAN-BOOKMARK-PDF.md`) + ปรับ out of scope ของ N6 ที่อ้าง gap 5.3.15 ให้ชี้มา N7 |
+| `CLAUDE.md` | whitelist ฟีเจอร์เสริมหลังแผน เพิ่ม N7 + โครงสร้างไฟล์เพิ่ม `app/api/bookmarks/export/route.ts` (รายงาน PDF รายการ bookmark — N7) |
+
+- `docs/PLAN.md` **ไม่แตะ** (ไม่มี schema/column ใหม่, ไม่มี invariant ใหม่ — เป็น route อ่านอย่างเดียวสร้างไฟล์ใหม่)
+- `.claude/rules/*.md` **ไม่แตะ** (route read-only ไม่เขียน DB ไม่เกี่ยว data-layer rule ใหม่; ไม่แตะ viewer/coordinates/realtime)
+
+## ลำดับ task + verify (ทุก task: `npx tsc --noEmit` ผ่าน)
+
+| # | งาน | ไฟล์หลัก | Verify เพิ่มเติม |
+|---|---|---|---|
+| 1 | Docs sync N7 | `docs/PLAN-FEAT.md`, `CLAUDE.md` | สเปก §7 ครบตาม format N5/N6; whitelist + โครงสร้างไฟล์มี N7/route ใหม่ |
+| 2 | Route รายงาน PDF | `app/api/bookmarks/export/route.ts` | Playwright request: ไฟล์ที่มี bookmark ต้นไม้ 3 ระดับ → response `%PDF` + headers (filename* ไทย) + อ่านกลับด้วย pdf-lib ได้ page count ถูก; เนื้อหาตรวจด้วยการเปิดใน pdf.js viewer ชั่วคราว (วิธีเดิมที่ใช้ verify F8); เคส: fileId ไม่ผ่าน = 400, ไม่มีไฟล์ = 404, 0 bookmark = PDF หน้าเดียวข้อความว่าง, `userName = ''` = "ไม่ทราบชื่อ", ชื่อ/โน้ตยาว wrap + ขึ้นหน้าใหม่, footer หน้า n/N |
+| 3 | ปุ่ม sidebar | `components/sidebar/AnnotationSidebar.tsx` | Playwright: กดปุ่มเกิด download ชื่อไฟล์ถูก; ปุ่มโผล่ทั้งมุมมองต้นไม้และผลค้นหา; จอ touch เป้า 36px; **regression: ค้นหา N6 ยังทำงานครบ 4 เงื่อนไข** |
+| 4 | ปิดงาน | — | plan-reviewer ผ่านทุก invariant ที่ N7 แตะ (โดยเฉพาะ #1 non-destructive) + code-reviewer + vitest + `tsc` |
+
+## Edge cases (ออกแบบไว้ล่วงหน้า)
+
+1. **ชื่อ/โน้ตยาวเกินหน้า** → `wrapTextByWidth` ตัดทีละตัวอักษร (ไทยไม่มีช่องว่าง) + ขึ้นหน้าใหม่; แถวเดียวสูงเกินหน้าเปล่าทั้งหน้า → วาดต่อ (guard infinite loop)
+2. **orphan `parentId`** (แม่หาย) → เลื่อนขึ้น root เหมือน sidebar และ buildOutline
+3. **cycle ใน DB** (แก้ตรง ๆ หลุด guard ของ action) → seen ร่วมทุก root กันเดินซ้ำ + โหนดที่ไม่มี root เข้าถึงถูกเติมเป็นระดับ 1 ท้ายรายการ — ทั้งวงจรล้วนและวงจรปน root ปกติ ไม่พัง ไม่ซ้ำ ไม่หาย
+4. **`userName = ''`** (row เดิมก่อน backfill N6) → "ไม่ทราบชื่อ"
+5. **ลึกเกิน 3 ระดับใน DB** (แก้ตรง ๆ) → DFS วาดตามจริง indent ต่อเนื่อง — ไม่พัง แค่ยาว (action กัน ≤ 3 อยู่แล้ว)
+6. **0 bookmark** → PDF หน้าเดียว + "ยังไม่มีรายการที่คั่นหน้าในไฟล์นี้" (ปุ่มไม่เคย error)
+7. **ชื่อไฟล์/ชื่อ bookmark ภาษาไทย + อักขระพิเศษ** → `PDFHexString`/drawText กับ Sarabun embed (pattern เดียวกับ TEXTBOX export F8) + filename `filename*` RFC 5987
+8. **หน้าเอกสารเกินจริง** (pageIndex พ้น page count ของเอกสาร) → ไม่เกี่ยว — รายงานไม่ผูกเอกสารต้นฉบับ แสดงเลขหน้าจาก DB ตรง ๆ
+
+## Out of scope (ไม่ทำในแผนนี้)
+
+- export **ตามเงื่อนไขค้นหา N6** (ผู้ใช้เลือก: ทั้งไฟล์เสมอ)
+- รวม annotation ในรายงาน / เพิ่ม bookmark ลงหน้าสรุป F15 หรือ CSV (F15/F16 ทำหน้าที่สรุป annotation อยู่แล้ว)
+- ตัวหนา (`Sarabun-Bold.ttf`) — ใช้ Regular ตัวเดียว (repo ไม่มีไฟล์ Bold; ลำดับชั้นด้วย indent + ขนาด)
+- export ข้ามหลายไฟล์ / document set — gap **5.3.10** (กลุ่ม C)
+- ตัวเลือกหน้ากระดาษ/แนวนอน/config หน้ารายงาน
+
+## Verification (ภาพรวม end-to-end)
+
+1. `npm run dev` — เปิดไฟล์ที่มี bookmark ต้นไม้ 3 ระดับกระจัดกระจายหลายหน้า → กดปุ่มในแท็บที่คั่นหน้า → ได้ไฟล์ PDF ชื่อ `{title}-bookmarks.pdf`
+2. เปิดรายงานตรวจ: ลำดับ = N5 (หน้า → ตำแหน่งบนหน้า → เวลา), indent 3 ระดับ, metadata ครบ หน้า/ผู้บันทึก/วันที่, โน้ตใต้ชื่อ, footer เลขหน้า, ข้อความไทย render ถูกด้วย Sarabun
+3. Regression: ค้นหา N6 + ต้นไม้ bookmark + export PDF F8 + Export CSV F16 ยังทำงานเหมือนเดิม

docs/PLAN-BOOKMARK.md

@@ -0,0 +1,151 @@
+# แผน 5.3.11 + 5.3.12 — Bookmark เรียงตามลำดับหน้า + ค้นหาพร้อมเงื่อนไข (N5 + N6)
+
+> สถานะ: **implement เสร็จสมบูรณ์** (2026-09-16) — ครบทั้ง 6 task, `tsc` ผ่าน, vitest 120/120, plan-reviewer + code-reviewer ผ่าน (findings ทั้งหมดแก้แล้ว: **swap วันที่ต้องทำที่ string ก่อนคำนวณ Date boundary** — swap ที่ Date ทำให้ช่วงกลับด้านเหลือ 1 ms จนได้ 0 ผลเสมอ, แถววันที่ล้นแผงข้าง 288px ถูกตัด → stack แนวตั้ง + date คู่แบ่ง flex-1, ค่าช่วงหน้า invalid (0/1.5) หายเงียว → validate ก่อน submit + แสดง error จริงแทนกลืนเป็น "ไม่พบ", `dateBound` ส่งชื่อ field ใน error ให้ถูก) — Playwright ผ่าน 17/17 (เรียงต้นไม้ 1→4→4→9 + ซับใต้แม่, ค้นครบ 4 เงื่อนไข + ผสม AND, คลิกผลลัพธ์กระโดดหน้า, สร้างคีย์ B แล้ว `user_name` ลง DB, F14 regression, จอ tablet 820px)
+> อ้างอิง: requirement 5.3.11 / 5.3.12 (gap analysis `docs/requirement/gap-analysis.md` **กลุ่ม B** — "ฟังก์ชันที่มีอยู่แล้ว ต่อยอดเล็กน้อยได้เลย")
+> ตาม governance ของโปรเจกต์: implement ต้องเขียนสเปกลง `docs/PLAN-FEAT.md` §7 (**N5** เรียงตามหน้า, **N6** ค้นหา bookmark) + ขยาย whitelist ใน `CLAUDE.md` ก่อน — เป็น task ที่ 1 ของแผนนี้
+
+## Context
+
+- **5.3.11 (⚠️):** แท็บ Bookmarks แสดงเลขหน้าต่อรายการ แต่เรียงตาม**เวลาสร้าง** — query ที่ `app/annotate/[id]/page.tsx:43` (`orderBy asc(bookmarks.createdAt)`) และ sidebar render ตามลำดับ array ของ state (`AnnotationSidebar.tsx:764` roots, `:339` children ของแต่ละโหนด)
+- **5.3.12 (❌):** ช่องค้นหา F14 ครอบเฉพาะ annotations (`searchAnnotations` ใน `app/actions/annotations.ts:972`) — **ค้นหา bookmark ไม่ได้เลย** ยังไม่มีการกำหนดเงื่อนไข
+
+## การตัดสินใจ (ยืนยันกับผู้ใช้แล้ว 2026-09-16)
+
+1. **5.3.11 เรียงตามหน้าเสมอ** — ไม่มีปุ่มสลับโหมด; ทั้ง root และ sub ใช้เกณฑ์เดียวกัน: `pageIndex` → `yOffset` (ตำแหน่งบนหน้า บน→ล่าง) → `createdAt` (tiebreak ให้เสถียร)
+2. **5.3.12 UI อยู่ในแท็บ "ที่คั่นหน้า" เอง** — แยกจากช่องค้นหาหมายเหตุ F14 ที่อยู่เหนือแท็บ (ช่องเดียวค้นคนละอย่างตามแท็บ = สับสน)
+3. **เงื่อนไขครบ 4:** คำค้น (ชื่อ+โน้ต) + ช่วงหน้า + ผู้บันทึก + ช่วงวันที่บันทึก
+
+## หลักตั้งต้น (จากการสำรวจโค้ด)
+
+- **ตาราง `bookmarks` ไม่มี column `user_name`** (ต่างจาก `annotations` ที่มีคู่ `user_id`+`user_name`) — เงื่อนไข "ผู้บันทึก" ต้องแสดง**ชื่อ**ใน dropdown และผลลัพธ์ จึงต้องเพิ่ม column (จุดเดียวที่แตะ schema)
+- `users` ที่ sidebar ได้รับ (`PDFViewer.tsx:1257`) derive จาก annotations เท่านั้น และผูกกับ dropdown กรอง F4 — **ห้ามปน** รายชื่อผู้ทำ bookmark เข้าไป (option ที่กรองแล้วว่างเปล่า) → sidebar คำนวณรายชื่อจาก `bookmarks` prop เอง
+- จุดเรียก `createBookmark` มี 2 จุดใน `PDFViewer.tsx` — `handleSaveBookmark` (`:2111` popup 🔖/คีย์ B/ปุ่มในแผง selection) และ `handleAddSubBookmark` (`:2142` ปุ่ม + ที่หัวข้อ) — ทั้งคู่มี `user` ในมืออยู่แล้ว
+- realtime: `useAnnotationRealtime` แทรก/แทน row ตาม id ไม่คุมลำดับ → **ต้อง sort ตอน render ฝั่ง client** แล้วอย่าเชื่อลำดับจาก serverquery อย่างเดียว (realtime create จะต่อท้าย array)
+- `BookmarkDTO` ไหลไปเองทั้ง SSE event + optimistic append (PDFViewer ใช้ DTO ที่ action คืน) — เติม field แล้วไม่ต้องแก้ pipeline sync เลย
+
+## Design
+
+### D1 (N5) — เรียงต้นไม้ bookmark ตามลำดับหน้า
+
+`components/sidebar/AnnotationSidebar.tsx` — comparator เดียวใช้ทั้ง root และ children:
+
+```ts
+/** N5: เรียงตามลำดับหน้า — หน้า → ตำแหน่งบนหน้า (บน→ล่าง) → เวลาสร้าง (เสถียร) */
+function byPageOrder(a: BookmarkDTO, b: BookmarkDTO): number {
+  return (
+    a.pageIndex - b.pageIndex ||
+    a.yOffset - b.yOffset ||
+    a.createdAt.localeCompare(b.createdAt) // ISO string เทียบตามตัวอักษรได้
+  );
+}
+```
+
+- roots (`:764`): `bookmarks.filter((b) => !b.parentId).sort(byPageOrder)`
+- children ใน `renderBookmarkNode` (`:339`): `bookmarks.filter((x) => x.parentId === b.id).sort(byPageOrder)`
+- `filter()` คืน array ใหม่เสมอ → `.sort()` กลาง ๆ ไม่แตะ state (ปลอดภัยกับ React)
+- **ไม่แตะ** query ฝั่ง server (`page.tsx` เรียง createdAt ตามเดิม — client sort ทับเสมอ) และ**ไม่แตะ** export outline / F15 / CSV
+
+### D2 (N6 ตอนที่ 1) — schema: `bookmarks.user_name`
+
+- `db/schema.ts`: `userName: text("user_name").notNull().default("")` (mirror `annotations`; `default("")` เพื่อ drizzle push ผ่านกับ row เดิม) + `BookmarkDTO` เพิ่ม `userName: string` + `toBookmarkDTO` map เพิ่ม
+- `CreateBookmarkInput` + `createBookmark` เพิ่ม `userName` (validate `vString(raw?.userName, "userName", MAX_USER_NAME_CHARS)`) — `updateBookmark` ไม่แตะ (เจ้าของเปลี่ยนไม่ได้อยู่แล้ว)
+- ผู้เรียกทั้ง 2 จุดใน `PDFViewer.tsx` ส่ง `userName: user.userName`
+- **backfill รันครั้งเดียวหลัง `/sync-db`** (psql ที่ container `judes-note-db`):
+
+```sql
+UPDATE bookmarks b
+SET user_name = COALESCE((
+  SELECT a.user_name FROM annotations a
+  WHERE a.user_id = b.user_id AND a.user_name <> ''
+  ORDER BY a.created_at DESC LIMIT 1
+), '')
+WHERE b.user_name = '';
+```
+
+- แถวที่ backfill ไม่เจอชื่อ (ผู้ใช้ไม่เคยทำ annotation) เหลือ `''` → ฝั่ง UI แสดง fallback `"ไม่ทราบชื่อ"`
+
+### D3 (N6 ตอนที่ 2) — Server Action `searchBookmarks`
+
+ไว้ใน `app/actions/annotations.ts` (แถว actions bookmark เดิม) — **read-only: ไม่ publish event ไม่ revalidate** (ไม่เขียน DB):
+
+```ts
+export type SearchBookmarksInput = {
+  fileId: string;
+  q?: string;          // คำค้น ILIKE บน title + note (ว่างได้ถ้ามีเงื่อนไขอื่น)
+  pageFrom?: number;   // 1-based ตรงที่ผู้ใช้เห็น ("หน้า N")
+  pageTo?: number;
+  userId?: string;     // ผู้บันทึก
+  dateFrom?: string;   // YYYY-MM-DD (เขตเวลา +07:00 คงที่ — ไทยไม่มี DST)
+  dateTo?: string;
+};
+export async function searchBookmarks(input: SearchBookmarksInput): Promise<BookmarkDTO[]>;
+```
+
+- **validate:** fileId = `vUuid` · q ถ้ามี = `vString(q, "q", MAX_QUERY_CHARS)` + escape `%`/`_`/`\` เหมือน `searchAnnotations` · pageFrom/pageTo = integer ≥ 1 · userId = `vString` · date ผ่าน `^\d{4}-\d{2}-\d{2}$` + `new Date(`${d}T00:00:00+07:00`)` (dateTo ใช้ `T23:59:59.999+07:00`) แล้วตรวจ `!Number.isNaN(getTime())` · **อย่างน้อย 1 เงื่อนไข** ไม่งั้น throw (client ก็ disable ปุ่มอยู่แล้ว)
+- **คู่กลับด้าน swap เงียบ ๆ** (pageFrom>pageTo, dateFrom>dateTo) — ไม่ throw เพราะ UX งงน้อยกว่า
+- query: `WHERE file_id = ? AND (title ILIKE ? OR note ILIKE ?) AND page_index ≥ pageFrom-1 AND page_index ≤ pageTo-1 AND user_id = ? AND created_at ≥ ? AND created_at ≤ ?` — เฉพาะเงื่อนไขที่ส่งมา (AND รวมกัน), note เป็น NULL ไม่ match ILIKE แต่ยังเข้า OR ทาง title ได้ (SQL NULL semantics ถูกต้องอยู่แล้ว)
+- `orderBy asc(pageIndex), asc(yOffset), asc(createdAt)` — ลำดับเดียวกับที่แสดงบนจอ (D1)
+- imports เพิ่ม: `gte`, `lte`, `ilike` (จาก `drizzle-orm`)
+
+### D4 (N6 ตอนที่ 3) — UI ค้นหาในแท็บ "ที่คั่นหน้า"
+
+`AnnotationSidebar.tsx` — block `shrink-0 border-b border-slate-200 p-2` **แสดงเฉพาะ `tab === "bookmarks"`** วางระหว่างแถบแท็บกับพื้นที่ list (pattern เดียวกับฟอร์ม F14 — ไม่อยู่ใน scroll container จะได้ไม่หลุดจอเวลา scroll):
+
+```
+[🔍 ชื่อ/โน้ต…        ] [หา]  [เงื่อนไข ▾]   ← ปุ่มกาง/พับ + badge จำนวนเงื่อนไขที่ตั้ง
+┌ เมื่อกาง ────────────────────────────────┐
+│ หน้า [จาก]–[ถึง] · ผู้บันทึก [Select]        │
+│ บันทึกวันที่ [จาก date]–[ถึง date] [ล้างเงื่อนไข] │
+└──────────────────────────────────────────┘
+```
+
+- **ฟอร์ม + state local ทั้งหมด** (`bmQuery`, `bmConditions`, `bmResults: BookmarkDTO[] | null`, `bmSearching`) — submit จาก form (Enter ได้) เหมือน F14; `onKeyDown` ของ input ทุกตัว `stopPropagation` กันชนคีย์ลัด H/D/C/B
+- ปุ่ม "หา" disabled เมื่อ**ไม่มีเงื่อนไขเลย** (q ว่าง + ไม่มีเงื่อนไขใด) — ต่างจาก F14: q ว่างแต่ตั้งเงื่อนไขอื่น**ค้นได้**
+- ผู้บันทึก dropdown: unique จาก `bookmarks` prop (`Map<userId, userName || "ไม่ทราบชื่อ">` เรียงตามชื่อ — รวมตัวเอง ไม่มี option "ของฉัน" แยก) ใช้ `components/Select` เดิม
+- **ผลลัพธ์แสดงแทนต้นไม่** ขณะ `bmResults !== null`: list แบน — แถว = ไอคอน Bookmark + title + "หน้า N · ผู้บันทึก" + ถ้าเป็น sub บรรทัดบริบท `ใน: <ชื่อแม่>` (หาจาก `bookmarks.find(x => x.id === b.parentId)`) + โน้ต clamp; คลิก = `onGoToBookmark(b)`; หัว panel มี "ผลการค้นหา (n)" + ปุ่ม ✕ ปิดกลับต้นไม้; ไม่พบ = "ไม่พบ" เหมือน F14
+- จอเล็ก: แถบเงื่อนไข `flex-wrap`, ปุ่ม/input ขนาดเท่า F14 (แตะได้สบาย)
+
+## Docs/rules sync (plan-first — ทำเป็น task แรก ก่อนแตะโค้ด)
+
+| ไฟล์ | สิ่งที่แก้ |
+|---|---|
+| `docs/PLAN-FEAT.md` §7 | หัวข้อใหม่ **N5 เรียง bookmark ตามลำดับหน้า** + **N6 ค้นหา bookmark พร้อมเงื่อนไข** (format ตาม N1/N2) + แก้ bullet ท้าย N2 "เรียงตาม createdAt" → เรียงตามหน้า (อ้าง N5) |
+| `docs/PLAN.md` §3 | ตาราง `bookmarks` เพิ่ม column `user_name` (rule ห้ามเพิ่ม column ที่ไม่มีในแผน — ต้องแก้ที่นี่ก่อนเสมอ) |
+| `CLAUDE.md` | whitelist ฟีเจอร์เสริมหลังแผน เพิ่ม N5/N6 |
+| `.claude/rules/data-layer.md` | bookmarks `user_name` (create ส่งเสมอ + backfill ครั้งเดียว) + `searchBookmarks` เป็น read-only (ไม่ publish/revalidate เพราะไม่เขียน DB) |
+
+## ลำดับ task + verify (ทุก task: `npx tsc --noEmit` ผ่าน)
+
+| # | งาน | ไฟล์หลัก | Verify เพิ่มเติม |
+|---|---|---|---|
+| 1 | Docs sync N5/N6 | `docs/PLAN-FEAT.md`, `docs/PLAN.md`, `CLAUDE.md`, `.claude/rules/data-layer.md` | สเปกครบตาม format §7; PLAN.md §3 มี `user_name` |
+| 2 | Schema `user_name` + DTO + callers + `/sync-db` + backfill | `db/schema.ts`, `app/actions/annotations.ts`, `components/pdf/PDFViewer.tsx` | สร้าง bookmark บน UI → row มี `user_name`; แท็บที่ 2 เห็น SSE event มี `userName`; รายการเก่าถูก backfill (ตรวจด้วย psql); `tsc` + vitest ผ่าน |
+| 3 | N5 เรียงตามหน้า | `components/sidebar/AnnotationSidebar.tsx` | Playwright: สร้าง root หน้า 5→2→9 = แสดง 2/5/9; หน้าเดียวกันเรียกตาม yOffset; sub ในหัวข้อเรียงตามหน้า; สร้างผ่านแท็บที่ 2 (realtime) แทรกตำแหน่งถูก; regression: กาง/หุบหัวข้อ + ย้ายหัวข้อ + ปุ่ม + ยังทำงาน |
+| 4 | `searchBookmarks` action | `app/actions/annotations.ts` | ค้นผ่าน UI (ข้อ 5); คำค้นมี `%`/`_` ถูก escape; ผสมหลายเงื่อนไข = AND; q ว่าง + เฉพาะช่วงหน้าทำงาน; ไม่มีเงื่อนไขเลย = throw |
+| 5 | N6 UI ค้นหาในแท็บ bookmarks | `components/sidebar/AnnotationSidebar.tsx` | Playwright: ค้นคำในชื่อ/โน้ต; ช่วงหน้า; ผู้บันทึก; ช่วงวันที่; คลิกผลลัพธ์กระโดดหน้า + scroll ตำแหน่ง yOffset; ปิดผลลัพธ์กลับต้นไม้; ล้างเงื่อนไข; แถบเงื่อนไขพับ/กางบนจอ touch ไม่ทับต้นไม้; **regression: ช่อง F14 ยังค้น annotation ได้เหมือนเดิม** |
+| 6 | ปิดงาน | — | plan-reviewer ผ่านทุก invariant ที่ N5/N6 แตะ + code-reviewer + vitest + `tsc` |
+
+## Edge cases (ออกแบบไว้ล่วงหน้า)
+
+1. **หน้าเดียวกันหลาย bookmark** → tiebreak `yOffset` (บน→ล่างของหน้า) แล้ว `createdAt` — deterministic เสมอ
+2. **หัวข้อใหญ่อยู่หน้าท้าย แต่ sub อยู่หน้ากลาง** → root เรียงตามหน้าของตัวเอง sub ข้างในเรียงตามหน้าของ sub — พฤติกรรมนี้ตั้งใจ (โครงสร้างนำ ไม่ใช่ลำดับหน้านำ)
+3. **realtime ระหว่างดูผลลัพธ์** → ผลลัพธ์เป็น snapshot ตอนกดค้น (เหมือน F14); แถวที่ถูกลบไปแล้วยังกดได้ (แค่ scroll ไปหน้านั้น ไม่พัง)
+4. **`user_name = ''`** (ข้อมูลเก่าที่ backfill ไม่เจอ) → แสดง "ไม่ทราบชื่อ"
+5. **คู่ช่วงกลับด้าน** (from > to ทั้งหน้าและวันที่) → server swap เงียบ ๆ ไม่ throw
+6. **note เป็น NULL** → ไม่ match ILIKE ของโน้ต แต่ title ยังทำให้เข้าผลลัพธ์ได้ (SQL `OR` + NULL ถูกต้องอยู่แล้ว)
+7. **คำค้นภาษาไทย** → ILIKE ใช้ได้ (ไทยไม่มี case); escape `%`/`_`/`\` กัน wildcard หลุด
+8. **จำนวนผลลัพธ์** → ไม่ cap (bookmark ต่อไฟล์ระดับหลายสิบ และ F14 ก็ไม่ cap — เท่ากัน)
+
+## Out of scope (ไม่ทำในแผนนี้)
+
+- bookmark ในหน้าสรุป F15 / export CSV / รายงาน PDF ของ bookmark — คือ gap **5.3.15** (กลุ่ม B ข้ออื่น)
+- ชุดของเอกสาร/แสดง bookmark รวมหลายไฟล์ — gap **5.3.10** (กลุ่ม C)
+- ปุ่มสลับโหมดเรียง (ตามเวลาสร้าง) — ผู้ใช้เลือกไม่ทำ
+- แสดงชื่อผู้บันทึกในแถวของต้นไม้ bookmark ปกติ (มีเฉพาะในผลค้นหา — จุดที่ requirement ถาม)
+- drag จัดลำดับ bookmark (out of scope เดิมของ N2)
+
+## Verification (ภาพรวม end-to-end)
+
+1. `npm run dev` + `/sync-db` + backfill — รายการ/ข้อมูลเดิมไม่หาย (dev DB ผู้ใช้ใช้ร่วม — ห้าม reset)
+2. Playwright: เปิดไฟล์ที่มี bookmark กระจัดกระจาย → ตรวจลำดับตาม D1 → ค้นหาครบ 4 เงื่อนไข (รายเงื่อนไข + รวมกัน) → คลิกผลลัพธ์กระโดดหน้าถูก → แท็บที่ 2 สร้าง bookmark ใหม่ แทรกตำแหน่งถูกทั้งสองแท็บ
+3. Regression: F14 ค้นหาหมายเหตุ + ต้นไม้ bookmark (สร้าง/แก้/ย้าย/ลบ/+) + export PDF outline เรียงตามเดิม

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-IMAGE.md

@@ -0,0 +1,132 @@
+# แผน 5.3.4 — รองรับไฟล์รูปภาพ (jpg/jpeg/png/tif) + อัปโหลดไฟล์ (N3 + N4)
+
+> สถานะ: **implement เสร็จสมบูรณ์** (2026-09-15) — ทำครบทั้ง 6 task ตามลำดับ, `tsc` ผ่าน, vitest 120/120, plan-reviewer + code-reviewer ผ่าน (findings ทั้งหมดแก้แล้ว: blob revoke race, TIFF orientation 7 บนจอ, **EXIF 6/8 export anchor สลับที่ทำหน้าเปล่า** — re-verify ด้วยการ render ไฟล์ export กลับด้วย pdfjs แล้วภาพอยู่ในหน้าจริง, magic bytes ตอนอัปโหลด, unlink ไฟล์กำพร้าเมื่อ DB fail, EXIF parser ทนไฟล์เสี้ยว, cap ขนาด TIFF ฝั่ง server 4096px)
+> อ้างอิง: requirement 5.3.4 (gap analysis `docs/requirement/gap-analysis.md` กลุ่ม C) + คำขอเพิ่มอัปโหลดแบบง่าย
+> ตาม governance ของโปรเจกต์: implement ต้องเขียนสเปกลง `docs/PLAN-FEAT.md` §7 (N3/N4) + ขยาย whitelist ใน `CLAUDE.md` ก่อน — เป็น task ที่ 1 ของแผนนี้
+
+## Context
+
+Requirement 5.3.4 กำหนดรูปแบบเอกสาร: PDF + รูปภาพ (jpg, jpeg, png, tif) เป็นอย่างน้อย — ปัจจุบันรองรับ PDF เท่านั้น และไฟล์เข้าระบบได้ทางเดียวคือ seed script เป้าหมาย: อัปโหลด/เปิดไฟล์รูปภาพ → annotate ครบทุกชนิด → realtime → export PDF/CSV ได้ เหมือน PDF ทุกประการ
+
+## การตัดสินใจ (ยืนยันกับผู้ใช้แล้ว)
+
+1. **สถาปัตยกรรม "ไม่แปลงก่อนใช้":** รูปคือ "หน้าเอกสาร" — viewer แสดง `<img>` แทน canvas ของ pdfjs, layers ซ้อนบนรูปตรง ๆ, annotation เก็บเป็นพิกัด % ใน DB เหมือนเดิม — PDF เกิดจริงเฉพาะไฟล์ export (สร้างใหม่ใน memory ตาม invariant #1)
+2. **TIFF: รองรับเลยด้วย UTIF.js** (`utif2` — decode รันไทม์ฝั่ง client แสดงผล + ฝั่ง server transcode PNG ตอน export), TIFF หลายเฟรม = หลายหน้า
+3. **toolbar คงทุก tool** กับทุกเอกสาร — ไม่ซ่อน HIGHLIGHT บนรูป (no-op แบบเดียวกับ PDF สแกน มี hint "ภาพสแกน" โผล่เอง)
+4. **อัปโหลดแบบง่าย:** ฟอร์มเดียวบนหน้า `/` รับทั้ง PDF และรูป — ไม่มีหน้าจัดการ/ลบ/drag-drop/progress
+5. **EXIF-rotated JPEG:** จัดการตอน export ใน scope นี้ (parse APP1 orientation 5–8 → swap ขนาดหน้า + drawImage rotate — ไม่งั้น export ได้สัดส่วนบิดต่างจากจอ)
+6. **รับ `.tiff` (สะกดยาว) ด้วย**, หน้ารูป normalize กว้าง **595** (scale contract — zoom %/fit-width/fontSize% ทำงานเหมือนหน้า A4 ทุกประการ)
+
+## หลักตั้งต้น (จากการสำรวจโค้ด + spot-check)
+
+- ทุก layer เหนือ canvas เป็น generic ต่อ "หน้า W×H + พิกัด %" — สิ่งที่ PDF-specific มีแค่ 3 จุด: (1) load effect `PDFViewer.tsx:1320-1366` (2) canvas+textLayer ใน `PdfPage` 541-1075 (3) `PDFDocument.load` ที่ `app/api/annotations/export/route.ts:229` — แทรก branch เพียง 3 จุด ที่เหลือ reuse
+- spot-check แล้ว: `PDFViewer.tsx:3462` = `{mounted && pdfjs && doc ? (`, `seed-samples.mjs:18` = filter `.endsWith(".pdf")`, มี vitest tests ที่ `tests/utils/*.test.ts` (เพิ่ม test ตาม pattern นี้ได้)
+- `lib/server-pdf.ts` path guard เป็น path-containment ล้วน (ไม่เช็ค extension) — ใช้กับรูปได้เลย
+- pdf-lib ^1.17.1 มี `embedJpg`/`embedPng` แล้ว, ไม่มี TIFF embed → ต้อง transcode
+- deps ใหม่: `utif2` + `@types/utif`, `pngjs` + `@types/pngjs` (pure JS ทั้งคู่)
+
+## Design
+
+### D1. ชนิดไฟล์ — derive จาก extension (ไม่เพิ่ม DB column)
+
+ไฟล์ใหม่ `utils/file-kind.ts` (pure, ใช้ได้ทั้ง server/client):
+
+```ts
+export type FileKind = "pdf" | "image";
+export type ImageFormat = "jpeg" | "png" | "tiff";
+export function fileKindFromUrl(url: string): FileKind;      // .jpg/.jpeg/.png/.tif/.tiff → "image" (case-insensitive)
+export function imageFormatFromUrl(url: string): ImageFormat | null;
+export const SAMPLE_FILE_EXTENSIONS: readonly string[];      // [".pdf",".jpg",".jpeg",".png",".tif",".tiff"]
+export function imageContentTypeFromUrl(url: string): string; // image/jpeg | image/png | image/tiff
+```
+
+เหตุผล: extension เก็บอยู่ใน `pdf_url` อยู่แล้ว (single source of truth, seed idempotent อิง URL) — ไม่ต้อง migrate schema / drizzle push / backfill → `docs/PLAN.md` §3 ไม่ต้องแตะ ผู้ใช้ 4 จุด: PDFViewer (derive ใน client จาก `file.pdfUrl` — `app/annotate/[id]/page.tsx` ไม่ต้องแก้), `app/page.tsx` (badge), export route, seed script (.mjs duplicate list + comment ให้ sync)
+
+### D2. Viewer — `PageContent` union + branch 3 จุดใน `components/pdf/PDFViewer.tsx`
+
+```ts
+type PageContent =
+  | { kind: "pdf"; pdfjs: typeof import("pdfjs-dist"); doc: import("pdfjs-dist").PDFDocumentProxy }
+  | { kind: "image"; src: string | null };   // null = เฟรม decode ไม่ได้ (placeholder เทา)
+type ImagePage = { src: string | null; width: number; height: number }; // normalize กว้าง 595
+```
+
+1. **load effect (1320-1366):** state ใหม่ `imagePages: ImagePage[] | null` คู่ขนาน `doc`/`pdfjs` — branch บนสุดของ effect เดิม:
+   - jpeg/png: `new Image()` + `img.src = file.pdfUrl` + `await img.decode()` → pageSizes จาก `naturalWidth/Height` (browser คิด EXIF orientation แล้ว) → normalize 595
+   - tiff: `fetch(file.pdfUrl)` → **`await import("utif2")`** (dynamic import เฉพาะ tif ตาม pattern invariant #6) → `UTIF.decode` วนทุก IFD → `decodeImage`+`toRGBA8` → canvas → `toBlob("image/png")` → `URL.createObjectURL` ต่อเฟรม + **revoke ทุก blob URL ใน cleanup** (กัน leak ตอนสลับไฟล์); TIFF orientation tag 274 หมุนตอนวาง canvas; cap ด้านยาว decoded frame 4096px (resample ใน canvas — annotation เป็น % ไม่กระทบ)
+   - pdf: โค้ดเดิมไม่แตะ
+2. **mount condition (3462):** สร้าง `PageContent` จาก state ใด state หนึ่งแทน `pdfjs && doc`
+3. **PdfPage (541-1075):** prop `pdfjs`+`doc` รวมเป็น `content` — z-1: `kind==="pdf" ? <canvas> : <img className="absolute inset-0 z-[1] pointer-events-none" draggable={false}>` (**pointer-events:none เหมือน canvas ตาม invariant #3**); pdfjs render effect (644-701) guard `if (content.kind !== "pdf") return`; textLayer div render เฉพาะ pdf (conditional render ไม่ย้ายโหนด — DOM order คงเดิมตาม invariant #3); effect เล็ก `onTextLayerRendered(pageNumber-1, 0)` ให้ hint "ภาพสแกน" + `useCustomSelection` bail ทำงานเอง
+
+ไม่ต้องแตะเลย: virtualization, zoom/fit-width, `basePageWidth`, deep link `?page`/`?ann`, bookmark scroll, InkLayer/TextboxStampLayer/AnnotationSelectionLayer/pins/tooltip/hit-test, sidebar, Server Actions, SSE, summary, CSV
+
+### D3. `/api/pdf` — รูปโหลด static `pdfUrl` ตรง ๆ + defensive branch
+
+รูปไม่ต้องผ่าน `/api/pdf` (ไม่มี ToUnicode ให้ซ่อม, ได้ static cache ฟรี + Content-Type ถูก) — แต่เพิ่ม guard ใน `app/api/pdf/route.ts` หลัง `readPublicPdf`: ถ้า `fileKindFromUrl === "image"` คืน bytes ดิบ + content-type ถูก (กัน stray call หลุดเข้า `fixPdfActualText` ที่จะ throw)
+
+### D4. Export — branch ก่อน `PDFDocument.load` แล้ว reuse pipeline 100%
+
+ที่ `app/api/annotations/export/route.ts:229`:
+
+```ts
+const doc = fileKindFromUrl(file.pdfUrl) === "image"
+  ? await imageDocFromBytes(srcBytes, file.pdfUrl)
+  : await PDFDocument.load(srcBytes);
+```
+
+ไฟล์ใหม่ `utils/image-to-pdf.ts` (server-only): `PDFDocument.create()` → jpeg `embedJpg` / อื่น ๆ `embedPng` → `addPage([595, 595·h/w])` + `drawImage` เต็มหน้า → คืน doc แล้ววาด annotation + bookmark outline ด้วย pipeline เดิมทั้งหมด (rotation=0 → `displaySize`/`displayToPdfPoint`/`pxPoint` ใช้ได้ทันที, `doc.getPage(pageIndex)` map ตรง 1 เฟรม = 1 หน้า)
+
+- **JPEG EXIF orientation 5–8:** parse APP1 เอง ~30 บรรทัด → swap กว้าง-สูง + `drawImage` ด้วย `rotate` radians
+- **TIFF:** `tiffFramesToPng(bytes)` = utif2 decode ทุก IFD → toRGBA8 → pngjs `PNG.sync.write` → embedPng (เฟรม decode พัง = หน้าขาว + console.error เพื่อให้ pageIndex map ตรง)
+
+### D5. อัปโหลดแบบง่าย (N4)
+
+- **UI:** หน้า `app/page.tsx` — ฟอร์มเล็ก: `<input type="file" accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff">` + ปุ่ม "อัปโหลด" (client component แยกไฟล์ `components/UploadFileForm.tsx`, `useTransition` + ปุ่ม disabled ระหว่างอัป)
+- **Server Action `uploadFile`** ใน `app/actions/files.ts` (ไฟล์ใหม่): รับ `FormData` — validate extension (whitelist เดียวกับ `SAMPLE_FILE_EXTENSIONS`) + ขนาด ≤ 100MB + ไม่ว่าง → เขียน `public/uploads/<uuid>.<ext>` (ชื่อ random กันชน/กัน traversal — ใช้ชื่อจาก randomUUID ไม่ใช่ชื่อผู้ใช้) → insert `files (title = ชื่อไฟล์เดิมที่ sanitize, pdf_url = /uploads/<uuid>.<ext>)` → `revalidatePath("/")`
+- **`next.config.mjs`:** `experimental: { serverActions: { bodySizeLimit: "100mb" } }` (Next 14 default 1MB)
+- seed script จัดการเฉพาะ `/samples/%` → uploads ไม่โดน seed ลบ
+- Out of scope: ลบ/แก้ชื่อไฟล์ใน UI, drag-drop, progress bar, multi-file, auth ผูกเจ้าของไฟล์
+
+### D6. Seed + หน้ารายการ
+
+- `scripts/seed-samples.mjs:18`: filter เป็น `SAMPLE_FILE_EXTENSIONS.some(...)` + แก้ comment บรรทัด 2 ให้ตรง
+- `app/page.tsx`: ไอคอน `FileImage` (lucide, fallback `Image`) + badge `PDF/JPG/PNG/TIFF` ต่อ row
+
+## Docs/rules sync (plan-first — ทำเป็น task แรก ก่อนแตะโค้ด)
+
+| ไฟล์ | สิ่งที่แก้ |
+|---|---|
+| `docs/PLAN-FEAT.md` §7 | หัวข้อใหม่ **N3 รองรับไฟล์รูปภาพ** + **N4 อัปโหลดไฟล์แบบง่าย** (format ตาม N1/N2: ข้อมูล/การโหลด/การแสดง/Export/Realtime/Out of scope ต่อฟีเจอร์) |
+| `CLAUDE.md` | (1) whitelist ขอบเขตเพิ่ม N3/N4 (2) ลบข้อ "ไม่มีหน้า upload" ออกจาก Out of Scope (3) invariant #1 "ไฟล์ PDF ต้นฉบับ" → "ไฟล์ต้นฉบับ (PDF/รูปภาพ)" (4) โครงสร้างไฟล์เพิ่ม `utils/file-kind.ts`, `utils/image-to-pdf.ts`, `app/actions/files.ts`, `components/UploadFileForm.tsx` |
+| `docs/PLAN.md` | §3 ไม่แตะ (ไม่มี schema change); §0 A5 "ไม่มีหน้า upload" → อัปเดตเป็นมี upload แบบง่าย (N4) |
+| `.claude/rules/pdf-viewer.md` | แก้ bullet "โหลด PDF ผ่าน /api/pdf เสมอ" → เพิ่มข้อยกเว้นรูปโหลด static ตรง, `<img>` z-1 pointer-events:none, `onTextLayerRendered(pi, 0)`, normalize 595, utif2 dynamic import + revoke blob URL |
+| `.claude/rules/data-layer.md` | `files.pdf_url` เก็บ path รูปได้ — derive ชนิดผ่าน `utils/file-kind.ts` เท่านั้น (ไม่มี column kind), TIFF หลายเฟรม = pageIndex ต่อเฟรม, Server Action `uploadFile` เขียนไฟล์ใหม่ที่ `public/uploads/` เท่านั้น (ต้องไม่แตะไฟล์เดิม) |
+| `README.md` | ส่วน seed: extension ที่รับ + วิธีอัปโหลดผ่านหน้า `/` |
+
+## ลำดับ task + verify (ทุก task: `npx tsc --noEmit` ผ่าน + agent plan-reviewer)
+
+| # | งาน | ไฟล์หลัก | Verify เพิ่มเติม |
+|---|---|---|---|
+| 1 | Docs sync N3/N4 + `utils/file-kind.ts` + unit test | `docs/PLAN-FEAT.md`, `CLAUDE.md`, `docs/PLAN.md` §0, `utils/file-kind.ts`, `tests/utils/file-kind.test.ts` | vitest ผ่านทุก case (uppercase/ไม่มี extension/.tiff ยาว); N3/N4 spec ครบตาม format §7 |
+| 2 | Upload (Server Action + ฟอร์ม + next.config) | `app/actions/files.ts`, `components/UploadFileForm.tsx`, `app/page.tsx`, `next.config.mjs`, `.claude/rules/data-layer.md` | Playwright: อัปโหลด PDF + jpg → row ใหม่โผล่ + เปิด PDF ได้เหมือนเดิม; ไฟล์ >100MB ถูกปฏิเสธพร้อมข้อความ; ชื่อไฟล์พิเศษ (ภาษาไทย/`../`) ไม่หลุดออกนอก `public/uploads/` |
+| 3 | Viewer jpg/png (`PageContent`) + `/api/pdf` defensive branch | `components/pdf/PDFViewer.tsx`, `app/api/pdf/route.ts`, `.claude/rules/pdf-viewer.md` | อัปโหลด jpg/png แล้วเปิด: fit-width เต็มจอ, annotate ครบ DRAW/SHAPE/TEXTBOX/STAMP/REDACTION/COMMENT + bookmark, HIGHLIGHT ยังอยู่ + hint "ภาพสแกน", 2 แท็บ realtime, zoom 0.5-3 annotation ไม่เบี้ยว; **regression: PDF มี text highlight ได้เหมือนเดิม + PDF หลายสิบหน้า virtualization ปกติ**; จอ coarse (Playwright touch) วาดบนรูปได้ไม่กลายเป็น scroll |
+| 4 | TIFF ฝั่ง client (utif2) | `components/pdf/PDFViewer.tsx`, `utils/tiff-client.ts`, `package.json` (`utif2`, `@types/utif`) | อัปโหลด tif หลายเฟรม = หลายหน้า, เลื่อนลื่น, `?page=N` + bookmark กระโดดถูกเฟรม, สลับไฟล์หลายรอบ memory ไม่โต (blob revoke), เฟรมพัง = placeholder เทาแต่ไฟล์ไม่พังทั้งเล่ม |
+| 5 | Export PDF จากรูป + EXIF | `app/api/annotations/export/route.ts`, `utils/image-to-pdf.ts` | annotate ครบทุกชนิดบน jpg → export → เปิดด้วย pdf.js viewer: หน้า 595×สัดส่วนรูป, annotation ตรงตำแหน่ง, REDACTION ทึบ, COMMENT sticky เปิด popup, bookmark outline กระโดดถูกหน้า; JPEG เอียง 90° (fixture สร้างเอง) export ตรงกับจอ; **hash ต้นฉบับใน public/ ไม่เปลี่ยน** (`certutil -hashfile` ก่อน/หลัง); export PDF/CSV เดิมได้เหมือนเดิม (regression) |
+| 6 | TIFF ฝั่ง server ตอน export + ปิดงาน | `utils/image-to-pdf.ts` (`tiffFramesToPng`), `package.json` (`pngjs`, `@types/pngjs`) | export tif 3 เฟรม → PDF 3 หน้า + annotation บนเฟรม 2/3 ตกหน้าถูก + outline; hash ต้นฉบับไม่เปลี่ยน; plan-reviewer ผ่านทุก invariant ที่ N3/N4 แตะ |
+
+## Edge cases (ออกแบบไว้ล่วงหน้า)
+
+1. **EXIF JPEG:** viewer ปลอดภัยอัตโนมัติ (`<img>` ใช้ orientation เป็น default, `naturalWidth/Height` = หลังหมุน) — จุดรั่วคือ export (pdf-lib ฝัง JPEG ดิบ) → จัดการใน D4; PNG ไม่มีปัญหา
+2. **TIFF orientation tag 274:** UTIF ไม่หมุนให้ — หมุนเอง client (ตอนวาง canvas) + server (transpose RGBA ก่อน PNG encode) ให้สองฝั่งตรงกัน
+3. **Retina:** `<img>` browser render ที่ dpr เต็ม — เทียบเท่า canvas×dpr ของ pdfjs ไม่ต้องทำอะไร
+4. **รูปใหญ่ (สแกน 600dpi ~5000px):** normalize 595 ทำให้ zoom clamp 0.5-3 ใช้ได้ + cap 4096px ตอน decode กัน memory
+5. **TIFF compression ที่ utif2 ไม่รอง (CCITT G3/G4):** เฟรมนั้น placeholder เทาแต่เอาขนาดจาก IFD header → page count/scroll/bookmark เสถียร (จดไว้ใน out of scope ของ N3)
+6. **stray `/api/pdf?fileId=<รูป>`:** defensive branch คืน bytes ดิบ — ไม่หลุดเข้า `fixPdfActualText`
+7. **อัปโหลดชื่อซ้ำ/ชื่อแปลก:** uuid เป็นชื่อไฟล์บนดิสก์ + sanitize title — ไม่ชนกัน ไม่ traversal
+
+## Verification (ภาพรวม end-to-end)
+
+1. `npm run dev` + `npm run seed-samples` — รายการเดิมไม่หาย (dev DB ผู้ใช้ใช้ร่วม — ห้าม reset DB)
+2. Playwright: อัปโหลด `sample.jpg` → เปิด → ทดสอบเต็มวงจร (วาดเส้น/รูปทรง/TEXTBOX/STAMP/COMMENT/bookmark) → แท็บที่สองเห็น realtime → export PDF → เปิดด้วย pdf.js viewer ตรวจตำแหน่ง + `certutil -hashfile` ต้นฉบับก่อน/หลังเทียบกัน
+3. เช่นเดียวกับ `.tif` หลายเฟรม + `?page=2` deep link
+4. Regression PDF เดิม: highlight ข้อความ + export ได้เหมือนก่อนแก้

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

@@ -10,9 +10,9 @@
 |---|--------|---------|
 | A1 | **ตำแหน่งโปรเจกต์** | `D:\dms\judes-note\` — directory แยกต่างหาก (ไม่ใช่ subdirectory ของ dms-main) เพื่อไม่ชนกับโปรเจกต์ Nuxt ที่มีโฟลเดอร์ `app/` อยู่แล้ว |
 | A2 | **Framework** | Next.js 14 (App Router) + TypeScript strict |
-| A3 | **PDF Renderer** | `pdfjs-dist` เวอร์ชัน **v4** (`^4.10.38`) — ใช้ built-in `TextLayer` class; worker ตั้ง path ตรง ๆ: คัดลอก `pdf.worker.min.mjs` (จาก `node_modules/pdfjs-dist/build/`) มาไว้ที่ `public/` ด้วย **postinstall script** แล้วตั้ง `pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs"` — **ไม่ใช้** `new URL(..., import.meta.url)` เพราะ v4 เป็นไฟล์ `.mjs` และมักชนกับ Turbopack/webpack ใน Next 14 |
-| A4 | **Identity** | สเปกไม่ระบุระบบ auth → ใช้ **anonymous user** สร้างครั้งเดียวเก็บใน `localStorage` (`userId` = UUID, `userName` = "ผู้ใช้ XXXX") เพื่อเติม field `userId`/`userName` ในตาราง |
-| A5 | **ไม่มีไฟล์ปุ่ม Upload** | หน้า `/` อ่านรายการจาก DB เท่านั้น (ตามสเปก) — sample PDF เก็บใน `public/samples/` แล้ว seed ด้วย SQL ใน README (รายละเอียดด้านล่าง) |
+| A3 | **PDF Renderer** | `pdfjs-dist` เวอร์ชัน **v4** (`^4.10.38`) — ใช้ built-in `TextLayer` class; worker ตั้ง path ตรง ๆ: คัดลอก `pdf.worker.min.mjs` (จาก `node_modules/pdfjs-dist/build/`) มาไว้ที่ `public/` ด้วย **postinstall script** แล้วตั้ง `pdfjs.GlobalWorkerOptions.workerSrc = withBasePath("/pdf.worker.min.mjs")` (app serve ใต้ basePath `/docedit/note` — invariant #12 ของ CLAUDE.md) — **ไม่ใช้** `new URL(..., import.meta.url)` เพราะ v4 เป็นไฟล์ `.mjs` และมักชนกับ Turbopack/webpack ใน Next 14 |
+| A4 | **Identity (ปรับปรุง 2026-09-17 — mock login)** | หน้า `/login` mock e-Court (dropdown ผู้ใช้ `MOCK_USERS` user1–user5 + รหัสผ่านกลาง `Demo1234`) ตั้ง cookie `oacCase` เป็น query string ตาม format จริงของระบบศาล → identity อ่านจาก cookie: `userId` = `u_userid`, `userName` = `u_userlogin` (**ต่างกันต่อคน** = ชื่อผู้ใช้ เพื่อให้สิทธิ์ "แก้ไขได้เฉพาะของตัวเอง" แยกกันจริง) ผ่าน `lib/session.ts` + บังคับทุกหน้าด้วย `middleware.ts` (auth จริงเทียบระบบ e-Court + roles ยัง out of scope; เดิมเป็น anonymous user ใน `localStorage` — annotation ที่สร้างสมัย `mock-user-01`/UUID จึงไม่ใช่ของตัวเองอีก) |
+| A5 | **Upload แบบง่าย (ปรับปรุง 2026-09-15 — N4)** | หน้า `/` อ่านรายการจาก DB + ฟอร์มอัปโหลดไฟล์เดียว (PDF/jpg/jpeg/png/tif/tiff, ≤ 100MB) ผ่าน Server Action เขียนไฟล์**ใหม่**ที่ `public/uploads/<uuid>.<ext>` เท่านั้น (ไม่แตะไฟล์เดิม) — sample เก็บใน `public/samples/` แล้ว sync ด้วย `npm run seed-samples` (รายละเอียดด้านล่าง) |
 | A6 | **ทุก annotation ลบได้** | แสดงปุ่มลบเฉพาะรายการของตัวเอง (`userId` ตรงกัน) — ไม่มี role/permission ในเฟสนี้ |
 | A7 | **Database & Realtime (ปรับปรุง 2026-09-08)** | PostgreSQL แบบ **plain container เดียว** (`judes-note-db`, Docker, image `postgres:17-alpine`, พอร์ต 54322) — **เลิกใช้ Supabase stack ทั้งหมด** (ไม่มี CLI/Kong/realtime container) เพราะโปรเจกต์ใช้จริงแค่ DB + sync; realtime sync ใช้ **SSE (Server-Sent Events) + pub/sub in-process** แทน Supabase Realtime |
 | A8 | **Event ของ SSE เป็น DTO ตรง ๆ (2026-09-08)** | Server Actions publish event ผ่าน `lib/annotate-events.ts` หลังเขียน DB สำเร็จ — payload เป็น DTO (camelCase + ISO string) โดยตรง **ไม่มีการแปลง snake_case** เหมือนสมัยใช้ Supabase Realtime |
@@ -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`
@@ -102,7 +106,7 @@ Percent (จาก DB)  ──×size÷100──▶  Pixel (render ลง SVG/div
 | id | uuid PK | |
 | file_id | uuid FK → files ON DELETE CASCADE | |
 | page_index | integer NOT NULL | 0-based |
-| user_id | text NOT NULL | anonymous id จาก localStorage |
+| user_id | text NOT NULL | จาก cookie oacCase (`u_userid`) |
 | user_name | text NOT NULL | |
 | type | annotation_type NOT NULL | |
 | data | jsonb NOT NULL `$type<AnnotationData>()` | **strict typed union** (ด้านล่าง) |
@@ -117,6 +121,7 @@ Index: `(file_id, page_index)` สำหรับ query หลักตอนเ
 | file_id | uuid FK → files CASCADE | |
 | page_index | integer NOT NULL | |
 | user_id | text NOT NULL | |
+| user_name | text NOT NULL DEFAULT '' | ชื่อผู้บันทึก (N6 — row เดิม backfill จาก `annotations` ครั้งเดียว) |
 | title | text NOT NULL | |
 | y_offset | double precision NOT NULL | % ของความสูงหน้า (0–100) |
 | created_at | timestamptz | |
@@ -148,9 +153,9 @@ Client A วาด ──▶ Server Action createAnnotation() ──▶ INSERT P
 ```
 
 - **เขียน:** ผ่าน Server Actions เท่านั้น (ต่อ `DATABASE_URL` ตรง ๆ) — และ**หลังเขียนสำเร็จทุกครั้ง ต้อง publish event** ให้ `lib/annotate-events.ts`
-- **อ่าน/ sync:** `useAnnotationRealtime` hook เปิด `EventSource` ไปที่ SSE route `/api/annotations/stream?fileId=<id>` — payload เป็น DTO (camelCase + ISO string) จาก server ตรง ๆ ไม่ต้องแปลง; `EventSource` ต่อใหม่อัตโนมัติเมื่อ connection ขาด (ห้ามทำ retry เอง)
+- **อ่าน/ sync:** `useAnnotationRealtime` hook เปิด `EventSource` ไปที่ SSE route `withBasePath("/api/annotations/stream?fileId=<id>")` — payload เป็น DTO (camelCase + ISO string) จาก server ตรง ๆ ไม่ต้องแปลง; `EventSource` ต่อใหม่อัตโนมัติเมื่อ connection ขาด (ห้ามทำ retry เอง)
 - pub/sub เป็น **in-memory ของ Next.js process เดียว** (dev / `next start` ธรรมดา) — หากอนาคตรันหลาย instance ต้องเพิ่มตัวกลาง (Redis pub/sub หรือ Postgres `LISTEN/NOTIFY`) ก่อน
-- **Optimistic update ด้วย `useOptimistic` (React 18):** ตอนผู้ใช้ปล่อยเมาส์ → `startTransition(() => { addOptimistic(row ชั่วคราว); return createAnnotation(...) })` → React ถอด optimistic row ออกอัตโนมัติเมื่อ action เสร็จ และ **rollback ให้เองหาก action ล้มเหลว** (ไม่ต้องจัดการ id `temp-*` เอง) → หาก SSE event มาถึงก่อน action เสร็จ จะเห็น duplicate ชั่วขณะแล้วหายเองเมื่อ optimistic row ถูกถอด (self-healing) — hook ยัง dedupe ด้วย id กับ state ปัจจุบันอยู่
+- **Optimistic update ด้วย `useOptimistic` (React 18):** ตอนผู้ใช้ปล่อยเมาส์ → `startTransition(() => { addOptimistic(row ชั่วคราว); return createAnnotation(...) })` → React ถอด optimistic row ออกอัตโนมัติเมื่อ action เสร็จ และ **rollback ให้เองหาก action ล้มเหลว** (ไม่ต้องจัดการ id `temp-*` เอง) — client ส่ง id ของ optimistic row ให้ `createAnnotation` ใช้ซ้ำ (action validate เป็น UUID) เพื่อให้ SSE event ที่มาถึงก่อน action เสร็จ dedupe ด้วย id เดียวกันได้ทันที **ไม่เห็น duplicate ชั่วขณะ** (เดิม row จริงใช้ id ใหม่ทำให้แสดง 2 แถวแวบหนึ่งก่อน row ชั่วคราวถูกถอด)
 
 ---
 
@@ -170,7 +175,7 @@ judes-note/
 │   └── annotate-events.ts           ← pub/sub in-process (Server Actions publish → SSE route subscribe)
 ├── utils/
 │   ├── coordinates.ts               ← pixel⇄% (point/rect/path) + getPointerPercent + clamp + mergeRectsByLine (รวบ rects บรรทัดเดียวกันเหลือ 1 rect/บรรทัดก่อนบันทึก)
-│   └── user.ts                      ← anonymous user identity (localStorage)
+│   └── user.ts                      ← parse/build ค่า cookie oacCase → identity (mock login e-Court)
 ├── hooks/
 │   └── useAnnotationRealtime.ts     ← EventSource ต่อ SSE stream + dedupe + expose setters
 ├── app/
@@ -241,13 +246,13 @@ judes-note/
 - **Server component ส่ง Date ไม่ได้ตรง ๆ กับ realtime string** → normalize เป็น ISO string DTO ทั้งระบบ
 - **pdfjs บน SSR** → `dynamic import("pdfjs-dist")` ภายใน useEffect เท่านั้น (ไม่ import top-level ใน module scope ที่ server evaluate ด้วย)
 - **PDF ยาว (20–100+ หน้า): Page Virtualization** → `IntersectionObserver` ใน PDFViewer render เฉพาะหน้าใน viewport ± 1 หน้า (canvas + TextLayer + InkLayer); หน้าที่พ้นจอเก็บเป็น placeholder `div` **ขนาดจริง** (วัดจาก `pdfPage.getViewport()` ทุกหน้าตอนโหลดครั้งเดียว — cost ถูก) เพื่อไม่ให้ scroll jump และให้ bookmark ยังคำนวณ absolute scroll ได้ แล้ว unmount layer ทั้งหมดของหน้านั้นคืน memory — annotation ของหน้าที่ยังไม่ render อยู่ใน state ตามปกติ จะแสดงเมื่อหน้าเข้าจอ
-- **pdf.worker v4 เป็นไฟล์ `.mjs`** → คัดลอก `pdf.worker.min.mjs` จาก `node_modules/pdfjs-dist/build/` ไป `public/` ด้วย **postinstall script** (version ตรงกับ lockfile เสมอ) และตั้ง `pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs"` — อย่าใช้ `new URL(..., import.meta.url)` ซึ่งมักชน Turbopack/webpack ใน Next 14
+- **pdf.worker v4 เป็นไฟล์ `.mjs`** → คัดลอก `pdf.worker.min.mjs` จาก `node_modules/pdfjs-dist/build/` ไป `public/` ด้วย **postinstall script** (version ตรงกับ lockfile เสมอ) และตั้ง `pdfjs.GlobalWorkerOptions.workerSrc = withBasePath("/pdf.worker.min.mjs")` — อย่าใช้ `new URL(..., import.meta.url)` ซึ่งมักชน Turbopack/webpack ใน Next 14
 
 ---
 
 ## 9. ขอบเขตที่ **ไม่** ทำในเฟสนี้ (Out of Scope)
 
-- ระบบ login/roles (ใช้ anonymous identity)
+- auth จริงเทียบระบบ e-Court + roles/สิทธิ์ — login ปัจจุบันเป็น mock หน้า `/login` (ตั้ง cookie `oacCase` ตาม format จริง แต่ไม่ได้ตรวจกับระบบศาลจริง)
 - แก้ไข/ย้าย annotation ที่วาดแล้ว (มีเฉพาะสร้าง + ลบ) — **ข้อนี้ถูกขยายโดย `docs/PLAN-FEAT.md` F1**: อนุญาตแก้ไข `data` (ย้าย/ปรับขนาด/เปลี่ยนสี–ความหนา) ของตัวเอง ในหน้าเดียวกัน ผ่าน `updateAnnotation`
 - Undo/redo, export PDF ที่ฝัง annotation
 - แสดงรายชื่อ "ใครออนไลน์อยู่" (presence)