docs(03): complete Phase 3 Images

- All 4 plans executed successfully
- 5/5 success criteria verified
- CameraCapture replaced with native file input for HTTP compatibility

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

.planning/ROADMAP.md

@@ -14,7 +14,7 @@ Decimal phases appear between their surrounding integers in numeric order.
 
 - [x] **Phase 1: Foundation** - Data model, repository layer, and project structure ✓
 - [x] **Phase 2: Core CRUD** - Entry management, quick capture, and responsive UI ✓
-- [ ] **Phase 3: Images** - Image attachments with mobile camera support
+- [x] **Phase 3: Images** - Image attachments with mobile camera support ✓
 - [ ] **Phase 4: Tags & Organization** - Tagging system with pinning and due dates
 - [ ] **Phase 5: Search** - Full-text search and filtering
 - [ ] **Phase 6: Deployment** - Docker containerization and production configuration
@@ -71,10 +71,10 @@ Plans:
 **Plans**: 4 plans
 
 Plans:
-- [ ] 03-01-PLAN.md — Database schema, file storage, thumbnail generation, and API endpoints
-- [ ] 03-02-PLAN.md — File upload form action and ImageUpload component with drag-drop
-- [ ] 03-03-PLAN.md — CameraCapture component with getUserMedia and preview/confirm flow
-- [ ] 03-04-PLAN.md — EntryCard integration with gallery, lightbox, and delete functionality
+- [x] 03-01-PLAN.md — Database schema, file storage, thumbnail generation, and API endpoints
+- [x] 03-02-PLAN.md — File upload form action and ImageUpload component with drag-drop
+- [x] 03-03-PLAN.md — CameraCapture component with getUserMedia and preview/confirm flow
+- [x] 03-04-PLAN.md — EntryCard integration with gallery, lightbox, and delete functionality
 
 ### Phase 4: Tags & Organization
 **Goal**: Users can organize entries with tags and quick access features
@@ -137,7 +137,7 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4 -> 5 -> 6
 |-------|----------------|--------|-----------|
 | 1. Foundation | 2/2 | Complete ✓ | 2026-01-29 |
 | 2. Core CRUD | 4/4 | Complete ✓ | 2026-01-29 |
-| 3. Images | 0/4 | Ready | - |
+| 3. Images | 4/4 | Complete ✓ | 2026-01-31 |
 | 4. Tags & Organization | 0/3 | Not started | - |
 | 5. Search | 0/3 | Not started | - |
 | 6. Deployment | 0/2 | Not started | - |

.planning/phases/03-images/03-VERIFICATION.md

@@ -0,0 +1,125 @@
+---
+phase: 03-images
+verified: 2026-01-31T12:30:00Z
+status: passed
+score: 5/5 must-haves verified
+---
+
+# Phase 3: Images Verification Report
+
+**Phase Goal:** Users can attach, view, and manage images on entries from any device
+**Verified:** 2026-01-31T12:30:00Z
+**Status:** passed
+**Re-verification:** No - initial verification
+
+## Goal Achievement
+
+### Observable Truths
+
+| # | Truth | Status | Evidence |
+|---|-------|--------|----------|
+| 1 | User can attach images via file upload on desktop | VERIFIED | ImageUpload.svelte (164 lines) with drag-drop zone, uploadImage form action in +page.server.ts handles multipart upload, saves to filesystem |
+| 2 | User can attach images via camera capture on mobile | VERIFIED | EntryCard.svelte line 396-403 has file input with `capture="environment"` attribute triggering native OS camera picker |
+| 3 | User can view attached images inline with entry | VERIFIED | ImageGallery.svelte (89 lines) renders 80x80 thumbnails, ImageLightbox.svelte (132 lines) shows fullsize, EntryCard integrates both |
+| 4 | User can remove image attachments from an entry | VERIFIED | deleteImage form action in +page.server.ts (lines 198-224), handleDeleteImage in EntryCard.svelte, edit mode toggle reveals delete buttons |
+| 5 | Images are stored on filesystem (not in database) | VERIFIED | data/uploads/originals/ and data/uploads/thumbnails/ directories contain actual image files (7 images observed), database only stores metadata |
+
+**Score:** 5/5 truths verified
+
+### Required Artifacts
+
+| Artifact | Expected | Status | Details |
+|----------|----------|--------|---------|
+| `src/lib/server/db/schema.ts` | Images table definition | VERIFIED | Lines 24-38: images table with entryId FK, cascade delete |
+| `src/lib/server/db/repository.ts` | ImageRepository CRUD | VERIFIED | Lines 90-141: create, getById, getByEntryId, delete, deleteByEntryId |
+| `src/lib/server/images/storage.ts` | Filesystem utilities | VERIFIED | 61 lines: saveOriginal, saveThumbnail, deleteImage, path helpers |
+| `src/lib/server/images/thumbnails.ts` | Sharp thumbnail generation | VERIFIED | 23 lines: generateThumbnail with EXIF auto-rotation |
+| `src/routes/api/images/[id]/+server.ts` | Serve original images | VERIFIED | 40 lines: GET handler with proper MIME types and caching |
+| `src/routes/api/images/[id]/thumbnail/+server.ts` | Serve thumbnails | VERIFIED | 29 lines: GET handler for JPEG thumbnails |
+| `src/routes/+page.server.ts` | Upload/delete form actions | VERIFIED | uploadImage (lines 145-196), deleteImage (lines 198-224) |
+| `src/lib/components/ImageUpload.svelte` | Drag-drop upload | VERIFIED | 164 lines: drag/drop handlers, optimistic preview, upload via fetch |
+| `src/lib/components/ImageGallery.svelte` | Horizontal thumbnail scroll | VERIFIED | 89 lines: 80x80 thumbnails, edit mode with delete buttons |
+| `src/lib/components/ImageLightbox.svelte` | Fullscreen viewer | VERIFIED | 132 lines: keyboard navigation, image counter |
+| `src/lib/components/EntryCard.svelte` | Integration point | VERIFIED | 463 lines: imports Gallery/Upload, camera button, delete handler |
+| `data/uploads/originals/` | Filesystem storage | VERIFIED | Directory exists, contains 7 image files |
+| `data/uploads/thumbnails/` | Thumbnail storage | VERIFIED | Directory exists, contains 7 thumbnail files |
+
+### Key Link Verification
+
+| From | To | Via | Status | Details |
+|------|----|----|--------|---------|
+| +page.server.ts load | imageRepository | getByEntryId | WIRED | Line 19: images attached to each entry |
+| ImageUpload.svelte | uploadImage action | fetch('?/uploadImage') | WIRED | Line 63: FormData with image and entryId |
+| EntryCard.svelte | ImageGallery | Component import | WIRED | Lines 6, 359: Gallery receives images prop |
+| ImageGallery.svelte | ImageLightbox | Component import | WIRED | Lines 2, 75: Opens on thumbnail click |
+| ImageGallery.svelte | /api/images/[id]/thumbnail | img src | WIRED | Line 46: Thumbnail URLs constructed |
+| ImageLightbox.svelte | /api/images/[id] | img src | WIRED | Line 118: Full image URLs |
+| EntryCard camera | uploadImage action | file input + fetch | WIRED | Lines 396-403: capture="environment", lines 158-173: handleCameraInput |
+| EntryCard delete | deleteImage action | fetch('?/deleteImage') | WIRED | Lines 142-152: handleDeleteImage posts imageId |
+| deleteImage action | storage.deleteImage | Function call | WIRED | Lines 213-214: Deletes files from disk |
+| Database images table | entries table | Foreign key | WIRED | ON DELETE CASCADE verified in schema |
+
+### Requirements Coverage
+
+| Requirement | Status | Evidence |
+|-------------|--------|----------|
+| IMG-01 (File upload) | SATISFIED | ImageUpload component with drag-drop, uploadImage action |
+| IMG-02 (Camera capture) | SATISFIED | File input with capture="environment" in EntryCard |
+| IMG-03 (View images) | SATISFIED | ImageGallery thumbnails + ImageLightbox fullscreen |
+| IMG-04 (Remove images) | SATISFIED | Edit mode toggle, delete button, deleteImage action |
+
+### Anti-Patterns Found
+
+| File | Line | Pattern | Severity | Impact |
+|------|------|---------|----------|--------|
+| QuickCapture.svelte | 98,106 | "placeholder" (input placeholder attr) | Info | Not an anti-pattern - standard HTML attribute |
+| EntryCard.svelte | 328 | "placeholder" (input placeholder attr) | Info | Not an anti-pattern - standard HTML attribute |
+| repository.ts | 60 | "return undefined" | Info | Proper "not found" return for getById |
+
+No blocker or warning anti-patterns found. All "placeholder" matches are valid HTML input placeholder attributes, not stub content.
+
+### Orphaned Artifact Note
+
+| File | Status | Impact |
+|------|--------|--------|
+| `src/lib/components/CameraCapture.svelte` | ORPHANED | 313 lines, not imported anywhere. Was replaced with file input approach per 03-04-SUMMARY. No impact on functionality - file input with capture="environment" works over HTTP. |
+
+The CameraCapture component exists but is unused. This is documented as intentional in the 03-04 summary: the getUserMedia approach was replaced with native file input `capture="environment"` because getUserMedia requires HTTPS (except localhost), while the file input approach works over HTTP.
+
+### Human Verification Required
+
+The following items were implicitly verified during plan execution based on 03-04-SUMMARY checkpoint:
+
+1. **Camera button on mobile**
+   - **Test:** Tap camera button on mobile device
+   - **Expected:** Native camera app opens, photo can be captured and uploaded
+   - **Status:** Verified during 03-04 execution (commit a2f9183)
+
+2. **Drag-drop upload**
+   - **Test:** Drag image file onto upload zone
+   - **Expected:** Image uploads with optimistic preview
+   - **Status:** Verified during 03-02 execution
+
+3. **Lightbox navigation**
+   - **Test:** Open lightbox, use arrow keys
+   - **Expected:** Navigate between images, escape closes
+   - **Status:** Verified during 03-04 execution
+
+All human verification items were verified as part of plan execution checkpoints.
+
+## Summary
+
+Phase 3 (Images) goal fully achieved. All five success criteria verified:
+
+1. **Desktop file upload:** ImageUpload component with drag-drop, uploads via form action to filesystem
+2. **Mobile camera capture:** File input with `capture="environment"` triggers native camera, uploads via same action
+3. **View images inline:** ImageGallery shows thumbnails in expanded entry, ImageLightbox for fullscreen
+4. **Remove images:** Edit mode toggle reveals delete buttons, deleteImage action removes from DB and filesystem
+5. **Filesystem storage:** Images stored in data/uploads/{originals,thumbnails}/, database only stores metadata
+
+The implementation is substantive (1298 lines across core image files), properly wired through the entire stack (UI -> form actions -> repository -> filesystem), and has been exercised with real data (7 images observed in storage).
+
+---
+
+*Verified: 2026-01-31T12:30:00Z*
+*Verifier: Claude (gsd-verifier)*

Dockerfile.dev

@@ -0,0 +1,21 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+# Install better-sqlite3 build dependencies
+RUN apk add --no-cache python3 make g++
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy source
+COPY . .
+
+# Expose dev server port
+EXPOSE 5173
+
+# Run dev server bound to all interfaces
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

docker-compose.dev.yml

@@ -0,0 +1,15 @@
+services:
+  taskplaner-dev:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    ports:
+      - "5173:5173"
+    volumes:
+      # Mount source for hot reload
+      - ./src:/app/src
+      - ./static:/app/static
+      # Mount data directory for SQLite persistence
+      - ./data:/app/data
+    environment:
+      - NODE_ENV=development