feat: multipart manga + chapter uploads with magic-byte MIME sniff

POST /api/v1/mangas and POST /api/v1/mangas/{id}/chapters now accept
multipart/form-data, gated by CurrentUser:

- /mangas: required `metadata` part (NewManga JSON) + optional `cover`
  image part.
- /mangas/{id}/chapters: required `metadata` (NewChapter JSON) + one or
  more `page` parts ordered by arrival. Returns 404 if the parent manga
  doesn't exist, 409 on duplicate (manga_id, number).

MIME is sniffed via the `infer` crate (magic bytes), not the
client-supplied filename or Content-Type. Whitelist:
jpeg / png / webp / gif / avif. Anything else → 415
unsupported_media_type. The stored key's extension is derived from the
sniffed type so a "page1.png" that's actually a JPEG lands as `.jpg`.

Size cap is two-layer:
- Request body cap (config.max_request_bytes, default 200 MiB) enforced
  by axum's DefaultBodyLimit before the handler sees the request.
- Per-image-part cap (config.max_file_bytes, default 20 MiB) enforced
  after reading the part, so a single oversized image can't pass even
  if the total request fits.

Storage keys follow the layout documented in CLAUDE.md:
- mangas/{manga_id}/cover.{ext}
- mangas/{manga_id}/chapters/{chapter_id}/pages/{nnnn}.{ext} (1-indexed).

AppError grows PayloadTooLarge/UnsupportedMediaType/ValidationFailed
(413 / 415 / 422). ValidationFailed carries a `details` JSON object the
client can use to highlight bad fields (e.g. {"title":"required"}).
Top-level matching in code() stays exhaustive.

Backend coverage in tests/api_uploads.rs (10 cases):
- create_manga_with_cover_stores_image — file is reachable via
  /api/v1/files/{key} with the right Content-Type.
- create_manga_without_cover_leaves_path_null.
- create_manga_rejects_non_image_cover_with_415 — PDF claimed as png.
- create_manga_rejects_oversized_cover_with_413.
- create_chapter_with_pages_stores_each — extension derived from
  sniffed MIME, files reachable in arrival order.
- create_chapter_rejects_when_no_pages_with_422 — details.page set.
- create_chapter_rejects_renamed_non_image_page → 415.
- create_chapter_returns_409_on_duplicate_number.
- create_chapter_requires_authentication → 401.
- create_chapter_under_unknown_manga_is_404.

Existing tests/api_mangas.rs is migrated to multipart; the create
response is now 201 Created. tests/common::MultipartBuilder builds the
body by hand so the test crate stays free of HTTP-client deps.

Frontend lib/api/mangas.ts: createManga now sends FormData (metadata +
optional cover Blob). Browser fills in the boundary header automatically.
Vitest asserts the FormData structure via FileReader (jsdom doesn't
implement Blob.text()).

E2E tests wait for the post-hydration nav-login link before
interacting with the login form, fixing a flake where pre-hydration
clicks would submit via the browser default and bypass our handler.

Lockstep version bump to 0.5.0.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/e2e/auth-flow.spec.ts

@@ -61,6 +61,12 @@ test('login then logout flips the layout between authenticated and anonymous', a
 
     // Log in.
     await page.goto('/login');
+    // Wait for hydration to finish before interacting — the nav-login link
+    // is only rendered once /me resolves, so it doubles as a hydration
+    // signal. Clicking before hydration would submit the form via the
+    // browser default (action="javascript:void(0)") and our handler would
+    // never run.
+    await expect(page.getByTestId('nav-login')).toBeVisible();
     await page.getByTestId('login-username').fill('alice');
     await page.getByTestId('login-password').fill('hunter2hunter2');
     await page.getByTestId('login-submit').click();
@@ -94,6 +100,7 @@ test('login surfaces the API error message on bad credentials', async ({ page })
     });
 
     await page.goto('/login');
+    await expect(page.getByTestId('nav-login')).toBeVisible();
     await page.getByTestId('login-username').fill('alice');
     await page.getByTestId('login-password').fill('wrongpassword');
     await page.getByTestId('login-submit').click();

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/lib/api/mangas.test.ts

@@ -70,7 +70,7 @@ describe('mangas api client', () => {
         expect(url).toContain('offset=20');
     });
 
-    it('createManga POSTs JSON to /v1/mangas', async () => {
+    it('createManga POSTs multipart with metadata to /v1/mangas', async () => {
         fetchSpy.mockResolvedValueOnce(
             ok({
                 id: 'abc',
@@ -88,8 +88,42 @@ describe('mangas api client', () => {
         expect(url).toMatch(/\/v1\/mangas$/);
         const init = fetchSpy.mock.calls[0][1] as RequestInit;
         expect(init.method).toBe('POST');
-        expect(init.headers).toMatchObject({ 'content-type': 'application/json' });
-        expect(JSON.parse(init.body as string)).toEqual({ title: 'Berserk', author: 'Miura' });
+        expect(init.body).toBeInstanceOf(FormData);
+        const form = init.body as FormData;
+        const metadata = form.get('metadata') as Blob;
+        expect(metadata).toBeInstanceOf(Blob);
+        expect(metadata.type).toBe('application/json');
+        // jsdom doesn't implement Blob.text(); read the bytes via FileReader.
+        const text = await new Promise<string>((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result as string);
+            reader.readAsText(metadata);
+        });
+        expect(text).toBe(JSON.stringify({ title: 'Berserk', author: 'Miura' }));
+        expect(form.get('cover')).toBeNull();
+        // The browser sets Content-Type with boundary automatically when body
+        // is a FormData — we must NOT set it ourselves.
+        expect(init.headers).toBeUndefined();
+    });
+
+    it('createManga attaches the cover Blob when supplied', async () => {
+        fetchSpy.mockResolvedValueOnce(
+            ok({
+                id: 'abc',
+                title: 'Berserk',
+                author: null,
+                description: null,
+                cover_image_path: 'mangas/abc/cover.png',
+                created_at: '2026-01-01T00:00:00Z',
+                updated_at: '2026-01-01T00:00:00Z'
+            })
+        );
+        const cover = new Blob([new Uint8Array([0x89, 0x50, 0x4e, 0x47])], { type: 'image/png' });
+        await createManga({ title: 'Berserk' }, cover);
+        const init = fetchSpy.mock.calls[0][1] as RequestInit;
+        const form = init.body as FormData;
+        const got = form.get('cover');
+        expect(got).toBeInstanceOf(Blob);
     });
 
     it('getManga throws ApiError carrying the envelope code on non-2xx', async () => {

frontend/src/lib/api/mangas.ts

@@ -30,12 +30,20 @@ export type NewManga = {
     description?: string | null;
 };
 
-export async function createManga(input: NewManga): Promise<Manga> {
-    return request<Manga>('/v1/mangas', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify(input)
-    });
+/**
+ * POST /api/v1/mangas is multipart. The metadata part is JSON; the cover
+ * part is the raw image bytes. The browser fills in the multipart boundary
+ * automatically when `body` is a FormData, so we deliberately do not set
+ * Content-Type ourselves.
+ */
+export async function createManga(input: NewManga, cover?: Blob): Promise<Manga> {
+    const form = new FormData();
+    form.append(
+        'metadata',
+        new Blob([JSON.stringify(input)], { type: 'application/json' })
+    );
+    if (cover) form.append('cover', cover);
+    return request<Manga>('/v1/mangas', { method: 'POST', body: form });
 }
 
 export type { Manga, Page };