Feat: Pre-generate WebP thumbnails on upload for faster library load

- Add Pillow dependency and thumbnail.py with generate_thumbnail() — produces
  WebP ≤400px, preserves aspect ratio, never upscales, handles GIF frame 0
- Alembic migration 002 adds nullable thumbnail_key column to images table
- Upload route generates thumbnail via asyncio.to_thread (non-blocking),
  stores at {hash}-thumb; failure is tolerated and upload succeeds with null key
- New GET /api/v1/images/{id}/thumbnail endpoint: serves WebP thumbnail or
  falls back to original for pre-feature images; ETag + immutable cache headers
- Delete route cleans up thumbnail storage object alongside original
- Library grid switches from /file to /thumbnail for all image src bindings
- 59 tests passing (46 existing + 13 new across unit, upload, serving, delete)

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

ui/src/app/detail/detail.component.spec.ts

@@ -16,6 +16,7 @@ const MOCK_IMAGE = {
   width: 10,
   height: 10,
   storage_key: 'abc',
+  thumbnail_key: null,
   created_at: '2026-01-01T00:00:00Z',
   tags: ['cat', 'funny'],
 };

ui/src/app/library/library.component.spec.ts

@@ -22,7 +22,7 @@ describe('LibraryComponent', () => {
     spyOn(imgSvc, 'list').and.returnValue(
       of({
         items: [
-          { id: '1', filename: 'a.jpg', tags: ['cat'], hash: '', mime_type: 'image/jpeg', size_bytes: 1, width: 1, height: 1, storage_key: '', created_at: '' },
+          { id: '1', filename: 'a.jpg', tags: ['cat'], hash: '', mime_type: 'image/jpeg', size_bytes: 1, width: 1, height: 1, storage_key: '', thumbnail_key: null, created_at: '' },
         ],
         total: 1,
         limit: 50,

ui/src/app/library/library.component.ts

@@ -48,7 +48,7 @@ import { TagService } from '../services/tag.service';
           class="image-card"
           (click)="router.navigate(['/images', img.id])"
         >
-          <img [src]="imageService.getFileUrl(img.id)" [alt]="img.filename" loading="lazy" />
+          <img [src]="imageService.getThumbnailUrl(img.id)" [alt]="img.filename" loading="lazy" />
           <div class="tag-row">
             <span *ngFor="let tag of img.tags" class="chip small">{{ tag }}</span>
           </div>

ui/src/app/services/image.service.ts

@@ -11,6 +11,7 @@ export interface ImageRecord {
   width: number;
   height: number;
   storage_key: string;
+  thumbnail_key: string | null;
   created_at: string;
   tags: string[];
   duplicate?: boolean;
@@ -54,6 +55,10 @@ export class ImageService {
     return `${this.base}/images/${id}/file`;
   }
 
+  getThumbnailUrl(id: string): string {
+    return `${this.base}/images/${id}/thumbnail`;
+  }
+
   updateTags(id: string, tags: string[]): Observable<ImageRecord> {
     return this.http.patch<ImageRecord>(`${this.base}/images/${id}/tags`, { tags });
   }

ui/src/app/upload/upload.component.spec.ts

@@ -11,7 +11,8 @@ describe('UploadComponent', () => {
   let component: UploadComponent;
 
   function makeImageService(overrides: Partial<ImageService> = {}): jasmine.SpyObj<ImageService> {
-    return jasmine.createSpyObj<ImageService>('ImageService', { upload: of({} as any), ...overrides });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return jasmine.createSpyObj<ImageService>('ImageService', { upload: of({} as any), ...overrides } as any);
   }
 
   beforeEach(async () => {