---
phase: 12-filled-document-preview
plan: 01
subsystem: api, ui
tags: [react-pdf, pdfjs-dist, next.js, pdf-preview, route-handler]

# Dependency graph
requires:
  - phase: 11-agent-saved-signature
    provides: preparePdf function with agentSignatureData and agentInitialsData params
  - phase: 11.1-agent-and-client-initials
    provides: agentInitialsData column on users table and 422 guard pattern
provides:
  - POST /api/documents/[id]/preview route — generates temp versioned PDF and returns bytes
  - PreviewModal component — renders ArrayBuffer PDF in react-pdf modal with pagination
affects: [12-02-PLAN.md, PreparePanel wiring, Send button gating]

# Tech tracking
tech-stack:
  added: []
  patterns:
    - try/finally for temp file cleanup (preparePdf writes, readFile reads, unlink in finally)
    - Versioned preview path (_preview_{timestamp}.pdf) prevents _prepared.pdf overwrite
    - Independent pdfjs worker configuration per module (not shared with PdfViewer)
    - ArrayBuffer passed directly to react-pdf Document file prop (stable useState reference)

key-files:
  created:
    - teressa-copeland-homes/src/app/api/documents/[id]/preview/route.ts
    - teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreviewModal.tsx
  modified: []

key-decisions:
  - "Preview route uses _preview_{timestamp}.pdf versioned path — never overwrites _prepared.pdf"
  - "try/finally ensures temp preview file deleted even if readFile throws"
  - "PreviewModal configures pdfjs.GlobalWorkerOptions.workerSrc independently — not inherited from PdfViewer module"
  - "ArrayBuffer passed directly as file prop to react-pdf Document — no Uint8Array wrapping"

patterns-established:
  - "Preview-only routes: no DB writes (no status/preparedFilePath updates), only bytes returned"
  - "422 guards mirrored from prepare route for agent-signature-missing and agent-initials-missing"

requirements-completed: [PREV-01]

# Metrics
duration: 5min
completed: 2026-03-21
---

# Phase 12 Plan 01: Filled Document Preview Summary

**POST /api/documents/[id]/preview route returning temp PDF bytes, plus PreviewModal react-pdf component with prev/next pagination — both independent of existing prepare route and PdfViewer**

## Performance

- **Duration:** ~5 min
- **Started:** 2026-03-21T21:29:16Z
- **Completed:** 2026-03-21T21:34:00Z
- **Tasks:** 2
- **Files modified:** 2 created

## Accomplishments
- Created auth-guarded preview API route that generates a versioned temp PDF, returns bytes, and cleans up in try/finally
- Mirrors all 422 guards from prepare route (agent-signature-missing, agent-initials-missing)
- Created PreviewModal client component with independent pdfjs worker config, ArrayBuffer file prop, and prev/next navigation

## Task Commits

Each task was committed atomically:

1. **Task 1: POST /api/documents/[id]/preview route** - `99205bc` (feat)
2. **Task 2: PreviewModal component** - `f458939` (feat)

## Files Created/Modified
- `teressa-copeland-homes/src/app/api/documents/[id]/preview/route.ts` - Next.js 15 route handler: auth guard, versioned temp path, 422 guards, preparePdf + readFile in try/finally, fire-and-forget unlink
- `teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreviewModal.tsx` - Client component: accepts ArrayBuffer + onClose, configures pdfjs worker, renders Document/Page with Prev/Next/Close controls

## Decisions Made
- Versioned preview path (`_preview_{timestamp}.pdf`) chosen over fixed name to prevent concurrent request collisions and avoid overwriting `_prepared.pdf`
- try/finally placement ensures unlink fires even on readFile failure
- PreviewModal declares its own `pdfjs.GlobalWorkerOptions.workerSrc` — not relying on PdfViewer module's side effect since module evaluation order is not guaranteed

## Deviations from Plan

None - plan executed exactly as written.

## Issues Encountered
None

## User Setup Required
None - no external service configuration required.

## Next Phase Readiness
- Both artifacts complete; Plan 02 can wire PreviewModal into PreparePanel and gate the Send button behind successful preview
- STATE.md blocker note about Vercel serverless filesystem still applies — write-to-disk preview pattern requires confirmation of deployment target before Plan 02 ships to production

---
*Phase: 12-filled-document-preview*
*Completed: 2026-03-21*

## Self-Check: PASSED

- FOUND: teressa-copeland-homes/src/app/api/documents/[id]/preview/route.ts
- FOUND: teressa-copeland-homes/src/app/portal/(protected)/documents/[docId]/_components/PreviewModal.tsx
- FOUND: .planning/phases/12-filled-document-preview/12-01-SUMMARY.md
- FOUND commit: 99205bc (Task 1)
- FOUND commit: f458939 (Task 2)