From 8deb26c07ebdf1490eb245c531b7c423e5a269b4 Mon Sep 17 00:00:00 2001
From: Aleksei Vesnin <aleksei@vesnin.me>
Date: Thu, 24 Sep 2026 17:16:34 +0300
Subject: [PATCH 1/3] feat(check-in): a portrait for the desk, and both
 pictures save and adjust with their forms

The avatar moves into Profile Information and the portrait into Check-in
details and About you; each is a pending edit sent after PATCH /user.
The picked file goes as picked with its crop, Adjust re-crops from the
stored original, and the check-in page shows the portrait in the picture
column instead of the avatar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 DECISIONS.md                                  |  78 +--
 README.md                                     |  15 +-
 src/app/privacy/page.tsx                      |  32 +-
 src/app/settings/page.tsx                     |   3 -
 .../auth/profile-completion-form.tsx          |   6 +-
 .../checkin-page-frame.render.test.tsx        |  69 ++-
 src/components/checkin/checkin-page-frame.tsx |  51 +-
 .../settings/avatar-card.render.test.tsx      | 274 ---------
 src/components/settings/avatar-card.tsx       | 236 --------
 .../settings/check-in-details-card.tsx        |  10 +-
 .../settings/data-export-card.render.test.tsx |   9 +-
 src/components/settings/data-export-card.tsx  |   7 +-
 .../delete-account-card.render.test.tsx       |   4 +-
 .../settings/delete-account-card.tsx          |   7 +-
 src/components/settings/profile-card.tsx      |   8 +-
 src/components/ui/image-crop-dialog.tsx       |  26 +-
 src/components/ui/user-avatar.render.test.tsx |  24 +-
 src/components/ui/user-avatar.tsx             |   2 +-
 src/components/user/picture-field.tsx         | 274 +++++++++
 src/components/user/picture-slot.tsx          | 271 +++++++++
 src/components/user/portrait-image.tsx        |  75 +++
 src/components/user/user-fields-dialog.tsx    |   5 +
 .../user/user-fields-form.render.test.tsx     | 547 ++++++++++++++++++
 src/components/user/user-fields-form.tsx      |  56 +-
 src/hooks/usePictureEdit.ts                   |  47 ++
 src/lib/api/auth.ts                           | 170 +++---
 src/lib/certification.ts                      |   6 +-
 src/lib/image-crop.test.ts                    |  22 +-
 src/lib/image-crop.ts                         |   2 +-
 src/lib/picture-edits.test.ts                 | 119 ++++
 src/lib/picture-edits.ts                      |  91 +++
 src/lib/picture.test.ts                       | 132 +++++
 src/lib/picture.ts                            | 157 +++++
 src/proxy.ts                                  |  14 +-
 34 files changed, 2121 insertions(+), 728 deletions(-)
 delete mode 100644 src/components/settings/avatar-card.render.test.tsx
 delete mode 100644 src/components/settings/avatar-card.tsx
 create mode 100644 src/components/user/picture-field.tsx
 create mode 100644 src/components/user/picture-slot.tsx
 create mode 100644 src/components/user/portrait-image.tsx
 create mode 100644 src/components/user/user-fields-form.render.test.tsx
 create mode 100644 src/hooks/usePictureEdit.ts
 create mode 100644 src/lib/picture-edits.test.ts
 create mode 100644 src/lib/picture-edits.ts
 create mode 100644 src/lib/picture.test.ts
 create mode 100644 src/lib/picture.ts

diff --git a/DECISIONS.md b/DECISIONS.md
index 3344fd2f..d83f67c6 100644
--- a/DECISIONS.md
+++ b/DECISIONS.md
@@ -865,20 +865,20 @@ would bury the rows that need attention, the same reasoning as `worstServiceStat
 for untracked gear. The window is 90 days, not gear's 30: renewing a rescue or first-aid card means
 booking a course with an instructor, not dropping a regulator at a shop.
 
-## Card images ride on the certification form's own save
+## Card images and both pictures ride on their form's own save
 
-The API takes card images on `PUT /certification/{uuid}/file/{side}`, not as multipart on create, so
-a card being created has no uuid to upload against until `createCertification` resolves. That is an
-ordering constraint, not a reason for a second dialog: `CertificationCardFiles` collects
-add/replace/delete per side into `CertificationCardEdits`, and `applyCertificationCardEdits` sends
-them after the details save — serially, in `CERTIFICATION_SIDES` order, `PUT` alone for a replace
-since it overwrites. Cancel therefore leaves the stored cards untouched, which the upload-on-pick
-dialog could not.
+Each is held as a pending edit and sent after the form's fields save, so Cancel leaves every stored
+image untouched. For cards the order is forced: `PUT /certification/{uuid}/file/{side}` needs a uuid
+a new card has only once `createCertification` resolves. `CertificationCardFiles` collects
+add/replace/delete per side and `applyCertificationCardEdits` sends them serially, in
+`CERTIFICATION_SIDES` order. The avatar (Profile Information) and the portrait (Check-in details,
+About you) each hold one `PictureEdit` — replace, adjust, remove, or the portrait's copy — which
+`applyPictureEdit` sends after `PATCH /user`. Rejected: a picture card saving on pick beside forms
+that wait for Save.
 
-A failed image does not fail the save: the details are written, and refilling the form to retry one
-picture costs more than the picture. One toast per side, and the certification is re-read whenever
-anything was sent — the embedded `files` the list and the check-in sheet draw from is stale either
-way, and only the API knows which sides landed.
+A failed image does not fail the save: the fields are written, and refilling the form to retry one
+picture costs more than the picture. One toast names the side or the picture. A certification is
+re-read whenever anything was sent, since only the API knows which sides landed.
 
 ## Every c-card is drawn in one shape, and cropped to it on the way in
 
@@ -4021,24 +4021,24 @@ variable a released artifact must document. Initials (`getUserInitials`) are the
 `flag()` stays for `WEB_HSTS` and `WEB_NOINDEX`; its doc comment and `runtime-config.test.ts`
 demonstrate the unrecognized-value warning on `WEB_NOINDEX`.
 
-## Avatars: The digest is the whole client contract
+## Pictures: The digest is the whole client contract
 
-`UserRead` carries `avatar_sha256`, one nullable string answering three questions: whether there is
-a picture, which version, and what to append as `?v=`. There is deliberately no URL. The bytes are
-owner-only behind an `Authorization` header and the access token lives in memory
-(`lib/api/client.ts`), so an `<img src>` at the API could never load them; `UserAvatar` fetches
-through the API client via `hooks/useAuthedBlobUrl.ts` and renders from an object URL. Its props are
-`{ name, avatarSha, size, className }` — no `email`. Radix's `AvatarFallback` renders until
-`AvatarImage` has loaded, so in-flight, failed and no-picture are one state drawn as initials, with
-no probe and no broken-image glyph. Staleness is handled by the URL: `?v={sha}` changes with the
-picture, the old entry ages out of the five-minute `max-age`, and after upload or remove the card
-calls `refreshUser()`, which re-reads `avatar_sha256` for every mounted `UserAvatar` in the same
-paint.
+`UserRead` carries `avatar_sha256` and `portrait_sha256`, each one nullable string answering three
+questions: whether there is a picture, which version, and what to append as `?v=`. Each
+`*_original_sha256` does the same for the original, and is what offers "Adjust". There is
+deliberately no URL: the bytes are owner-only and the access token lives in memory
+(`lib/api/client.ts`), so an `<img src>` could never load them. `UserAvatar` and `PortraitImage`
+fetch through `hooks/useAuthedBlobUrl.ts` and render from an object URL. Radix's `AvatarFallback`
+renders until `AvatarImage` has loaded, so in-flight, failed and no-picture are one state drawn as
+initials, with no broken-image glyph. Staleness is handled by the URL: `?v={sha}` changes with the
+picture, and after a save the form calls `refreshUser()`, which repaints every mounted picture in
+the same paint.
 
 ## The crop dialog's three traps
 
-Never JPEG: `canvas.toBlob("image/jpeg")` composites transparency onto black. The avatar exports PNG
-because `PUT /user/avatar` re-encodes anyway; a card exports WebP because its endpoint does not.
+Never JPEG: `canvas.toBlob("image/jpeg")` composites transparency onto black. A card exports WebP
+because its endpoint stores what it is given. The two pictures export nothing: the picked file goes
+as it is, with the crop beside it as numbers.
 
 `react-easy-crop` injects its own `<style>` by default, which the nonce-based production CSP drops
 (the dev CSP allows `'unsafe-inline'`). `disableAutomaticStylesInjection` plus
@@ -4053,25 +4053,25 @@ which reports the box after ancestor transforms, and nothing re-measures once `D
 `data-[state=open]:zoom-in-100 data-[state=closed]:zoom-out-100` on this one `DialogContent`; an
 explicit `cropSize` still derives media size from the scaled rect.
 
-## Avatars: The `accept` list is load-bearing, not decoration
+## Pictures: The `accept` list is load-bearing, not decoration
 
-`accept="image/jpeg,image/png,image/webp,image/gif"` is what makes iPhone photos work. Since WebKit
-bug 267277, iOS Safari transcodes a HEIC pick to JPEG only when the `accept` list restricts image
-types and excludes HEIC. `accept="image/*"` hands over raw HEIC, which no browser decodes into a
-canvas; adding `image/heic` is worse, since Safari 17+ then delivers the original and has a
-documented bug converting picked PNGs to HEIC. The constant lives in `lib/api/auth.ts` with the
-reasoning attached so nobody simplifies it inline. A Files-app pick bypasses `accept` entirely; the
-API sniffs bytes regardless, so this is not a security surface.
+`accept="image/jpeg,image/png"` is what makes iPhone photos work. Since WebKit bug 267277, iOS
+Safari transcodes a HEIC pick to JPEG only when the `accept` list restricts image types and excludes
+HEIC. `accept="image/*"` hands over raw HEIC, which the API keeps no original of; adding
+`image/heic` is worse, since Safari 17+ then delivers the original and has a documented bug
+converting picked PNGs to HEIC. The constant lives in `lib/picture.ts` with the reasoning attached
+so nobody simplifies it inline. A Files-app pick bypasses `accept` entirely; `readPictureType` and
+the API sniff bytes regardless, so this is not a security surface.
 
 ## The caller decodes the file before the cropper ever sees it
 
 `react-easy-crop` has no failure callback: `CropperProps` carry `onMediaLoaded` and `onCropComplete`
 and nothing for the other outcome, so a source that never decodes — a Files-app HEIC walking past
 `accept` — leaves the dialog with an empty frame, `croppedAreaPixels` never arriving and Save
-disabled forever. `AvatarCard.handlePick` and `CertificationCardFiles.handlePick` therefore decode
-the object URL themselves and mount `ImageCropDialog` only on success, toasting otherwise;
-`mediaProps={{ onError }}` would catch it a frame later with a half-open dialog to unwind. The
-second decode inside `cropToBlob` hits the browser cache.
+disabled forever. `PictureField` and `CertificationCardFiles` therefore decode the object URL
+themselves and mount `ImageCropDialog` only on success, toasting otherwise;
+`mediaProps={{ onError }}` would catch it a frame later with a half-open dialog to unwind. A card's
+second decode, inside `cropToBlob`, hits the browser cache.
 
 Failures raised in the browser are `ImageCropError` (`lib/image-crop.ts`), because
 `getApiErrorMessage` reads an axios response's `detail` and returns its `fallback` for everything
@@ -4904,7 +4904,7 @@ apart.
 The pins `reads the gear list once`, `reads the certification list once` and `reads the stats once`
 must use `mockImplementation`; with `mockResolvedValue` they pass despite the bug. The dashboard's
 waits a beat, since effects run on a task and `findByText` returns before the second pass.
-`avatar-card` and `units-card` do not loop but use identity-stable mocks too, so any copied
+`user-fields-form` and `units-card` do not loop but use identity-stable mocks too, so any copied
 neighbour is right.
 
 A shared `src/test/` helper is rejected: `vi.mock` factories hoist above imports, so it is reachable
diff --git a/README.md b/README.md
index 4adeb34b..0bb82ccd 100644
--- a/README.md
+++ b/README.md
@@ -70,17 +70,18 @@ one.
   snapshot of it**.
 - **Certifications** — keep photos of your c-cards on hand at the dive shop without digging out the
   plastic.
-- **Check-in** — the details a dive shop asks for at the desk, kept once: date of birth, phone, an
-  emergency contact and your dive insurance. One page gathers them with your c-cards, dive count and
-  last dive, and prints — your browser's save-as-PDF is the copy for a desk with no signal.
+- **Check-in** — the details a dive shop asks for at the desk, kept once: a portrait cropped like a
+  passport photo, date of birth, phone, an emergency contact and your dive insurance. One page
+  gathers them with your c-cards, dive count and last dive, and prints — your browser's save-as-PDF
+  is the copy for a desk with no signal.
 - **Courses** — the training itself, with the agency, instructor and shop: link the dives you did on
   it and the cards it issued, so a course is one record instead of a shape you have to remember.
 - **Full export** — one click to take _everything_ out in open formats: a **DiveJSON** document
   holding the whole logbook, a **UDDF** one other programs import, a **CSV** for a spreadsheet, or a
-  complete **archive** carrying all three alongside every dive-computer file you uploaded and every
-  c-card image you stored. [DiveJSON](https://divejson.org) is the open dive-log interchange format
-  this project maintains, and this app is its reference implementation. A data-ownership log without
-  an exit door is a contradiction.
+  complete **archive** carrying all three alongside every dive-computer file you uploaded, every
+  c-card image you stored, and your profile picture and portrait. [DiveJSON](https://divejson.org)
+  is the open dive-log interchange format this project maintains, and this app is its reference
+  implementation. A data-ownership log without an exit door is a contradiction.
 - **Logbook import** — and a door that only opens outwards is half a promise, so a whole logbook
   reads straight back in: the **DiveJSON** document and the **archive**, and — through the
   [DiveJSON converter](https://github.com/divejson/divejson-py) — **UDDF**, a **Subsurface** `.ssrf`
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
index a317df73..fa4eb754 100644
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -72,8 +72,8 @@ export default async function PrivacyPage() {
               In Cloudflare R2, created under Cloudflare&rsquo;s EU
               jurisdiction, which is its setting for keeping objects within the
               European Union. That covers the dive-computer files kept with a
-              dive, certification card images, profile pictures, and the species
-              photographs §4.6 says this copy downloads.
+              dive, certification card images, profile pictures and portraits,
+              and the species photographs §4.6 says this copy downloads.
             </OperatorAnswer>
             <OperatorAnswer question="How email is sent — §4.3, §6.3">
               Through Resend, with delivery routed through its EU region.
@@ -210,11 +210,12 @@ export default async function PrivacyPage() {
               </li>
               <li>
                 <strong>Check-in Details:</strong> What a dive shop asks for at
-                the desk, all of it optional: your date of birth and phone
-                number; an emergency contact, meaning somebody else&rsquo;s
-                name, phone number and relationship to you, which you enter; and
-                your dive insurance &mdash; the provider, the policy number and
-                when it expires
+                the desk, all of it optional: a portrait, meaning a photo of
+                your face cropped like a passport photo; your date of birth and
+                phone number; an emergency contact, meaning somebody
+                else&rsquo;s name, phone number and relationship to you, which
+                you enter; and your dive insurance &mdash; the provider, the
+                policy number and when it expires
               </li>
               <li>
                 <strong>Dive Logs:</strong> Dive location, depth, duration,
@@ -239,6 +240,16 @@ export default async function PrivacyPage() {
                 you give to reply to
               </li>
             </ul>
+            <p className="text-foreground mb-4">
+              Both pictures are kept as the file you picked, so that you can
+              change how either is cropped later, with the location and camera
+              details a phone photo carries removed by this server before the
+              file is stored; what the app shows is drawn from that file at the
+              crop you chose. Your portrait is shown to you where you edit it
+              and on your check-in page, and never where your profile picture
+              appears. The full archive export carries both files, and both are
+              deleted with your account.
+            </p>
             <p className="text-foreground mb-4">
               One thing arrives without you typing it. If you create your
               account by signing in with Google, your Google profile picture is
@@ -357,7 +368,7 @@ export default async function PrivacyPage() {
               2.3 Location Information
             </h3>
             <p className="text-foreground mb-4">
-              Location reaches this server three ways, and all three start with
+              Location reaches this server four ways, and all four start with
               you:
             </p>
             <ul className="list-disc list-inside text-foreground mb-4 space-y-2">
@@ -376,6 +387,11 @@ export default async function PrivacyPage() {
                 dive site is, and where a trip went, and those are written as
                 the file gives them
               </li>
+              <li>
+                GPS positions inside a photo you pick as your profile picture or
+                portrait, which travel with the upload and are removed by this
+                server before the photo is stored
+              </li>
             </ul>
             <p className="text-foreground mb-4">
               The app never asks your browser where you are. That is not a
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 0adcb75f..3406b1ba 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -4,7 +4,6 @@ import { Loader2 } from "lucide-react";
 
 import { useAuth } from "@/contexts/AuthContext";
 import { useAuthGuard } from "@/hooks/useAuthGuard";
-import { AvatarCard } from "@/components/settings/avatar-card";
 import { CheckInDetailsCard } from "@/components/settings/check-in-details-card";
 import { DataExportCard } from "@/components/settings/data-export-card";
 import { DataImportCard } from "@/components/settings/data-import-card";
@@ -49,8 +48,6 @@ export default function SettingsPage() {
       <div className="grid lg:grid-cols-2 gap-8">
         <ProfileCard />
 
-        <AvatarCard />
-
         <EmailChangeCard currentEmail={user.email} />
 
         <CheckInDetailsCard />
diff --git a/src/components/auth/profile-completion-form.tsx b/src/components/auth/profile-completion-form.tsx
index 702a8c51..03b28fc3 100644
--- a/src/components/auth/profile-completion-form.tsx
+++ b/src/components/auth/profile-completion-form.tsx
@@ -64,9 +64,9 @@ export function ProfileCompletionForm() {
     <Card className="w-full max-w-md">
       <CardHeader className="space-y-1 items-center text-center">
         {/* Initials, always: there is no account yet to fetch a picture from, and
-            no upload step here on purpose - see the avatar card in Settings. A
-            Google sign-up arrives at the dashboard with their Google picture
-            already imported by the API. */}
+            no upload step here on purpose - the profile picture is added with the
+            profile in Settings. A Google sign-up arrives at the dashboard with their
+            Google picture already imported by the API. */}
         <UserAvatar
           name={onboarding.name ?? onboarding.email}
           size={64}
diff --git a/src/components/checkin/checkin-page-frame.render.test.tsx b/src/components/checkin/checkin-page-frame.render.test.tsx
index bd105b4c..06e041d2 100644
--- a/src/components/checkin/checkin-page-frame.render.test.tsx
+++ b/src/components/checkin/checkin-page-frame.render.test.tsx
@@ -31,7 +31,7 @@ vi.mock("@/contexts/AuthContext", () => ({
 // `certificationFile` stay real - the summary's own rendering is built on them.
 vi.mock("@/lib/api/auth", async (importOriginal) => ({
   ...(await importOriginal<typeof import("@/lib/api/auth")>()),
-  authAPI: { updateProfile: vi.fn(), getAvatarBlob: vi.fn() },
+  authAPI: { updateProfile: vi.fn(), getPictureBlob: vi.fn() },
 }));
 
 vi.mock("@/lib/api/certifications", async (importOriginal) => ({
@@ -56,7 +56,7 @@ const { authAPI } = await import("@/lib/api/auth");
 const { coursesAPI } = await import("@/lib/api/courses");
 const updateProfile = vi.mocked(authAPI.updateProfile);
 
-// Both the avatar and a card thumbnail fetch their bytes through this, the endpoints
+// Both the portrait and a card thumbnail fetch their bytes through this, the endpoints
 // being owner-only. Answering with a URL is what puts an `<img>` on the page.
 vi.mock("@/hooks/useAuthedBlobUrl", () => ({
   useAuthedBlobUrl: (fetchBlob: unknown) => ({
@@ -104,6 +104,7 @@ beforeEach(() => {
   Object.assign(auth.user, {
     units: "metric",
     avatar_sha256: null,
+    portrait_sha256: null,
     date_of_birth: null,
     phone: null,
     emergency_contact_name: null,
@@ -440,23 +441,53 @@ describe("before the requests land", () => {
 });
 
 describe("the picture at the top", () => {
-  it("draws the one the diver stored", () => {
-    Object.assign(auth.user, { ...COMPLETE, avatar_sha256: "abc123" });
+  it("draws the portrait, and never the avatar", () => {
+    Object.assign(auth.user, {
+      ...COMPLETE,
+      avatar_sha256: "avatar1",
+      portrait_sha256: "portrait1",
+    });
     render(loaded({ certifications: [certification()] }));
 
-    // Radix holds `AvatarImage` back until the bytes have loaded, which jsdom never
-    // reports - so the initials standing in are the tile itself being on the page.
-    expect(screen.getByText("SR")).toBeInTheDocument();
+    const portrait = screen.getByAltText("Portrait of Sam Reef");
+    expect(portrait).toHaveAttribute("src", "blob:card");
+    // In the name's own column, 7:9, where the avatar used to sit.
+    const slot = screen.getByRole("heading", {
+      name: "Sam Reef",
+    }).previousElementSibling!;
+    expect(slot).toContainElement(portrait);
+    expect(portrait.parentElement).toHaveClass("aspect-[7/9]");
+    expect(screen.queryByAltText(/avatar/i)).toBeNull();
+    expect(screen.queryByText("SR")).toBeNull();
+  });
+
+  it("puts nothing on the sheet for a diver with no portrait, whatever the avatar", () => {
+    // The avatar does not stand in: a desk is looking for the diver's face, and the
+    // avatar is whatever the diver shows the app. Nor do initials, which identify
+    // nobody.
+    Object.assign(auth.user, { ...COMPLETE, avatar_sha256: "avatar1" });
+    render(loaded({ certifications: [certification()] }));
+
+    expect(screen.queryByRole("img")).toBeNull();
+    expect(screen.queryByText("SR")).toBeNull();
+    // What the screen offers instead never reaches the paper.
+    const add = screen.getByRole("button", { name: "Add a portrait" });
+    expect(add.closest(".aspect-\\[7\\/9\\]")).toHaveClass("print:hidden");
   });
 
-  it("leaves a monogram nobody chose off a sheet handed to a stranger", () => {
+  it("opens About you, portrait and all, from the empty frame", async () => {
     Object.assign(auth.user, COMPLETE);
     render(loaded({ certifications: [certification()] }));
 
+    await userEvent.click(
+      screen.getByRole("button", { name: "Add a portrait" }),
+    );
+
+    const dialog = await screen.findByRole("dialog", { name: "About you" });
     expect(
-      screen.getByRole("heading", { name: "Sam Reef" }),
+      within(dialog).getByLabelText("Choose a portrait"),
     ).toBeInTheDocument();
-    expect(screen.queryByText("SR")).toBeNull();
+    expect(within(dialog).getByLabelText("Phone number")).toBeInTheDocument();
   });
 });
 
@@ -483,7 +514,7 @@ describe("labels and values line up", () => {
     }
   });
   it("starts a name and the values under it on one edge", () => {
-    Object.assign(auth.user, { ...COMPLETE, avatar_sha256: "abc123" });
+    Object.assign(auth.user, { ...COMPLETE, portrait_sha256: "abc123" });
     const { container } = render(
       loaded({
         certifications: [certification({ certification_number: "1" })],
@@ -522,14 +553,16 @@ describe("labels and values line up", () => {
 
   it("holds the picture's column for a diver who stored none", () => {
     Object.assign(auth.user, COMPLETE);
-    const { container } = render(loaded({ certifications: [certification()] }));
+    render(loaded({ certifications: [certification()] }));
 
-    // No monogram on a sheet handed to a stranger, but the column stays - the name
-    // meets the same edge as its own two values either way.
-    expect(screen.queryByText("SR")).toBeNull();
+    // Nothing in it prints, but the column stays - the name meets the same edge as
+    // its own two values either way.
     const diverName = screen.getByRole("heading", { name: "Sam Reef" });
-    expect(diverName.previousElementSibling).toHaveClass("sm:w-24");
-    expect(diverName.previousElementSibling?.children).toHaveLength(0);
+    const slot = diverName.previousElementSibling!;
+    expect(slot).toHaveClass("sm:w-24");
+    for (const child of slot.children) {
+      expect(child).toHaveClass("print:hidden");
+    }
   });
 });
 
@@ -540,7 +573,7 @@ describe("editing from the sheet", () => {
 
     await userEvent.click(
       screen.getByRole("button", {
-        name: "Edit your name, date of birth and phone number",
+        name: "Edit your name, portrait, date of birth and phone number",
       }),
     );
 
diff --git a/src/components/checkin/checkin-page-frame.tsx b/src/components/checkin/checkin-page-frame.tsx
index c006da62..a0dc430f 100644
--- a/src/components/checkin/checkin-page-frame.tsx
+++ b/src/components/checkin/checkin-page-frame.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import { useEffect, useMemo, useState, type ReactNode } from "react";
-import { AlertTriangle, FileText, Printer, SquarePen } from "lucide-react";
+import {
+  AlertTriangle,
+  FileText,
+  Printer,
+  SquarePen,
+  UserSquare,
+} from "lucide-react";
 
 import { useAuth } from "@/contexts/AuthContext";
 import { useUnits } from "@/hooks/useUnits";
@@ -33,11 +39,11 @@ import { CertificationDialog } from "@/components/certifications/certification-d
 import { DivingFiguresDialog } from "@/components/checkin/diving-figures-dialog";
 import { Logo } from "@/components/logo";
 import { UserFieldsDialog } from "@/components/user/user-fields-dialog";
+import { PortraitFrame, PortraitImage } from "@/components/user/portrait-image";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { IconTooltip } from "@/components/ui/tooltip";
-import { UserAvatar } from "@/components/ui/user-avatar";
 
 // A printed page comes off a browser with background colours dropped and text
 // colours kept, so a summary printed from the dark theme would be near-white ink on
@@ -288,22 +294,34 @@ export function CheckInPageFrame({
                   NAME_BESIDE_PICTURE,
                 )}
               >
-                {/* Only a picture the diver actually stored. The initials Radix falls
-                    back to are a placeholder for a face on screen; printed at the top
-                    of a sheet handed to a stranger they are a monogram nobody chose,
-                    and a bare name reads better than a circle with "SR" in it.
+                {/* The portrait, never the avatar: a desk is looking at the diver's
+                    face, and the avatar is whatever the diver shows the app. With none
+                    stored, nothing prints - no initials, which identify nobody - and
+                    the screen offers the place to add one.
 
                     The column stays either way, so the name meets the same edge as
                     every certification's - and its own two values, which is what
-                    would give it away. The avatar is centred in it, being round and
-                    narrower than a card. */}
-                <div className={cn(SLOT, "flex justify-center")}>
-                  {user.avatar_sha256 && (
-                    <UserAvatar
+                    would give it away. */}
+                <div className={SLOT}>
+                  {user.portrait_sha256 ? (
+                    <PortraitImage
                       name={user.name}
-                      avatarSha={user.avatar_sha256}
-                      size={64}
+                      portraitSha={user.portrait_sha256}
+                      className="w-full"
                     />
+                  ) : (
+                    <PortraitFrame empty className="w-full print:hidden">
+                      <IconTooltip label="Add a portrait">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          className="h-full w-full rounded-none"
+                          onClick={() => setEditing("about")}
+                        >
+                          <UserSquare className="h-6 w-6 text-muted-foreground" />
+                        </Button>
+                      </IconTooltip>
+                    </PortraitFrame>
                   )}
                 </div>
                 <h2 className={`min-w-0 flex-1 text-2xl font-semibold ${INK}`}>
@@ -311,7 +329,7 @@ export function CheckInPageFrame({
                 </h2>
                 <EditControl
                   className="-my-1"
-                  label="Edit your name, date of birth and phone number"
+                  label="Edit your name, portrait, date of birth and phone number"
                   onClick={() => setEditing("about")}
                 />
               </div>
@@ -551,6 +569,7 @@ export function CheckInPageFrame({
         title="About you"
         description="Your own details, as a desk asks for them."
         groups={[{ fields: ["name", ...ABOUT_YOU_FIELDS] }]}
+        picture="portrait"
       />
       <UserFieldsDialog
         open={editing === "insurance"}
@@ -614,8 +633,8 @@ function CertificationSummary({
         )}
       >
         {/* The column stands even for a card whose picture the diver never stored,
-            for the same reason it stands over a missing avatar: the name beside it
-            has to meet the same edge as the values underneath it. */}
+            for the same reason it stands beside a diver with no portrait: the name
+            beside it has to meet the same edge as the values underneath it. */}
         <div className={SLOT}>
           {isPdf ? (
             <CertificationCardFrame
diff --git a/src/components/settings/avatar-card.render.test.tsx b/src/components/settings/avatar-card.render.test.tsx
deleted file mode 100644
index 3eff192d..00000000
--- a/src/components/settings/avatar-card.render.test.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { AvatarCard } from "./avatar-card";
-
-// The card's logic is the pipeline between a picked file and a saved picture: pick →
-// crop → PUT → re-read the user, with a toast at each end. A render is the only thing
-// that reaches it, and the two states a diver notices when it breaks are a picture
-// that saved but never appeared (no `refreshUser`) and a failure that says nothing.
-
-// The whole value is hoisted and returned by identity, `user` included. Nothing this
-// card renders depends on that today - the digest reaches `UserAvatar` as a string,
-// and the card's one effect is keyed on an object URL - but the real `AuthContext`
-// holds `user` in state and so keeps one identity across renders, and a mock that
-// rebuilds it per render is what put the new-dive page's test in an unbounded loop
-// with its own `form.reset`. Varying a field means writing to `auth.user`, which
-// leaves the identity alone. See "The new-dive render test was in a loop with
-// itself" in DECISIONS.md.
-const auth = vi.hoisted(() => ({
-  user: {
-    uuid: "user-1",
-    name: "Jane Doe",
-    avatar_sha256: null as string | null,
-  },
-  refreshUser: vi.fn(),
-}));
-
-vi.mock("@/contexts/AuthContext", () => ({
-  useAuth: () => auth,
-}));
-
-vi.mock("@/lib/api/auth", async (importOriginal) => ({
-  // The two constants the card reads are the real ones - the size guard below is
-  // asserting against the API's actual ceiling, not against a number this file made
-  // up.
-  ...(await importOriginal<typeof import("@/lib/api/auth")>()),
-  authAPI: {
-    uploadAvatar: vi.fn(),
-    removeAvatar: vi.fn(),
-    getAvatarBlob: vi.fn(),
-  },
-}));
-
-// jsdom has neither canvas nor an image decoder, so the two parts of the flow that
-// genuinely cannot run here stand in. `ImageCropError` is deliberately the real
-// class - the card branches on `instanceof` to decide whose message to show, and a
-// stubbed one would make that branch untestable.
-vi.mock("@/lib/image-crop", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("@/lib/image-crop")>()),
-  cropToBlob: vi.fn(),
-  decodeImage: vi.fn(),
-}));
-
-// The cropper is a gesture surface with no meaningful behaviour under jsdom (it
-// measures itself with a ResizeObserver that reports zeroes), so it stands in as the
-// one thing the card cares about: a Save that hands back a crop rectangle.
-vi.mock("@/components/ui/image-crop-dialog", () => ({
-  ImageCropDialog: ({
-    isSaving,
-    onCancel,
-    onSave,
-  }: {
-    isSaving: boolean;
-    onCancel: () => void;
-    onSave: (area: {
-      x: number;
-      y: number;
-      width: number;
-      height: number;
-    }) => void;
-  }) => (
-    <div role="dialog" aria-label="Adjust your photo">
-      <button
-        type="button"
-        disabled={isSaving}
-        onClick={() => onSave({ x: 10, y: 20, width: 300, height: 300 })}
-      >
-        Save photo
-      </button>
-      <button type="button" onClick={onCancel}>
-        Cancel
-      </button>
-    </div>
-  ),
-}));
-
-const toast = vi.fn();
-vi.mock("@/components/ui/use-toast", () => ({
-  useToast: () => ({ toast }),
-}));
-
-const { authAPI, AVATAR_EXPORT_SIZE, MAX_AVATAR_UPLOAD_SIZE } =
-  await import("@/lib/api/auth");
-const { ImageCropError, cropToBlob, decodeImage } =
-  await import("@/lib/image-crop");
-
-// The preview is a real `UserAvatar`, which fetches the current picture's bytes.
-const getAvatarBlob = vi.mocked(authAPI.getAvatarBlob);
-const uploadAvatar = vi.mocked(authAPI.uploadAvatar);
-const removeAvatar = vi.mocked(authAPI.removeAvatar);
-const crop = vi.mocked(cropToBlob);
-const decode = vi.mocked(decodeImage);
-
-const originalCreate = URL.createObjectURL;
-const originalRevoke = URL.revokeObjectURL;
-
-const croppedBlob = new Blob(["png"], { type: "image/png" });
-
-beforeEach(() => {
-  auth.user.avatar_sha256 = null;
-  auth.refreshUser.mockReset().mockResolvedValue(undefined);
-  getAvatarBlob.mockReset().mockResolvedValue(new Blob(["png"]));
-  uploadAvatar.mockReset().mockResolvedValue({ sha256: "newsha" });
-  removeAvatar.mockReset().mockResolvedValue(undefined);
-  crop.mockReset().mockResolvedValue(croppedBlob);
-  decode.mockReset().mockResolvedValue({} as HTMLImageElement);
-  toast.mockReset();
-
-  URL.createObjectURL = vi.fn(() => "blob:picked");
-  URL.revokeObjectURL = vi.fn();
-});
-
-afterEach(() => {
-  URL.createObjectURL = originalCreate;
-  URL.revokeObjectURL = originalRevoke;
-});
-
-const picker = () => screen.getByLabelText("Choose a profile picture");
-
-function photo(name = "me.jpg", bytes = 1000) {
-  return new File([new Uint8Array(bytes)], name, { type: "image/jpeg" });
-}
-
-describe("AvatarCard", () => {
-  it("offers a photo and no way to remove one that isn't there", () => {
-    render(<AvatarCard />);
-
-    expect(
-      screen.getByRole("button", { name: /Add a photo/ }),
-    ).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: /Remove/ })).toBeNull();
-  });
-
-  it("crops the picked file and uploads it, then re-reads the user", async () => {
-    render(<AvatarCard />);
-
-    await userEvent.upload(picker(), photo());
-    await userEvent.click(screen.getByRole("button", { name: "Save photo" }));
-
-    await waitFor(() =>
-      expect(crop).toHaveBeenCalledWith(
-        "blob:picked",
-        { x: 10, y: 20, width: 300, height: 300 },
-        // PNG rather than the card's WebP: the avatar endpoint re-encodes what it
-        // is given, so lossless here is free.
-        { maxWidth: AVATAR_EXPORT_SIZE, type: "image/png" },
-      ),
-    );
-    expect(uploadAvatar).toHaveBeenCalledWith(croppedBlob, "avatar.png");
-    // Without this the picture is stored and the header still shows initials: the
-    // digest on `user` is what every `UserAvatar` fetches from.
-    expect(auth.refreshUser).toHaveBeenCalled();
-    expect(toast).toHaveBeenCalledWith(
-      expect.objectContaining({ title: "Saved" }),
-    );
-    // The dialog closes on success, and the object URL behind it is released.
-    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
-    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:picked");
-  });
-
-  it("keeps the dialog open and says why when the upload fails", async () => {
-    uploadAvatar.mockRejectedValue(new Error("nope"));
-    render(<AvatarCard />);
-
-    await userEvent.upload(picker(), photo());
-    await userEvent.click(screen.getByRole("button", { name: "Save photo" }));
-
-    await waitFor(() =>
-      expect(toast).toHaveBeenCalledWith(
-        expect.objectContaining({ variant: "destructive" }),
-      ),
-    );
-    // Still open, so the crop that was just adjusted is not lost to a retry.
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-  });
-
-  it("refuses a file over the API's own ceiling without a round trip", async () => {
-    render(<AvatarCard />);
-
-    await userEvent.upload(
-      picker(),
-      photo("huge.jpg", MAX_AVATAR_UPLOAD_SIZE + 1),
-    );
-
-    expect(toast).toHaveBeenCalledWith(
-      expect.objectContaining({ variant: "destructive" }),
-    );
-    expect(screen.queryByRole("dialog")).toBeNull();
-    expect(uploadAvatar).not.toHaveBeenCalled();
-  });
-
-  it("refuses a file the browser cannot decode instead of opening a dead dialog", async () => {
-    // `react-easy-crop` has no failure callback, so a source it cannot decode
-    // would leave the dialog with a Save button that never enables and nothing
-    // said about why. The live case is a HEIC picked through the iOS Files app.
-    decode.mockRejectedValue(
-      new ImageCropError("That file could not be read."),
-    );
-    render(<AvatarCard />);
-
-    await userEvent.upload(picker(), photo("photo.heic"));
-
-    await waitFor(() =>
-      expect(toast).toHaveBeenCalledWith(
-        expect.objectContaining({
-          description: "That file could not be read.",
-          variant: "destructive",
-        }),
-      ),
-    );
-    expect(screen.queryByRole("dialog")).toBeNull();
-    // The object URL is released rather than held for a dialog that never opens.
-    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:picked");
-  });
-
-  it("shows a local failure's own message rather than the generic fallback", async () => {
-    // `getApiErrorMessage` reads an axios `detail` and returns its fallback for
-    // anything else, so a plain `Error` from the canvas would be silently
-    // replaced by "Failed to save your picture". `ImageCropError` is what keeps
-    // the precise message.
-    crop.mockRejectedValue(
-      new ImageCropError("This browser could not prepare the image."),
-    );
-    render(<AvatarCard />);
-
-    await userEvent.upload(picker(), photo());
-    await userEvent.click(screen.getByRole("button", { name: "Save photo" }));
-
-    await waitFor(() =>
-      expect(toast).toHaveBeenCalledWith(
-        expect.objectContaining({
-          description: "This browser could not prepare the image.",
-        }),
-      ),
-    );
-  });
-
-  it("removes an existing picture with no confirmation step", async () => {
-    auth.user.avatar_sha256 = "abc123";
-    render(<AvatarCard />);
-
-    await userEvent.click(screen.getByRole("button", { name: /Remove/ }));
-
-    await waitFor(() => expect(removeAvatar).toHaveBeenCalled());
-    expect(auth.refreshUser).toHaveBeenCalled();
-    expect(toast).toHaveBeenCalledWith(
-      expect.objectContaining({ title: "Removed" }),
-    );
-  });
-
-  it("says so when the remove fails", async () => {
-    auth.user.avatar_sha256 = "abc123";
-    removeAvatar.mockRejectedValue(new Error("nope"));
-    render(<AvatarCard />);
-
-    await userEvent.click(screen.getByRole("button", { name: /Remove/ }));
-
-    await waitFor(() =>
-      expect(toast).toHaveBeenCalledWith(
-        expect.objectContaining({ variant: "destructive" }),
-      ),
-    );
-  });
-});
diff --git a/src/components/settings/avatar-card.tsx b/src/components/settings/avatar-card.tsx
deleted file mode 100644
index 44909203..00000000
--- a/src/components/settings/avatar-card.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import type { Area } from "react-easy-crop";
-import { Camera, Trash2 } from "lucide-react";
-
-import { useAuth } from "@/contexts/AuthContext";
-import {
-  authAPI,
-  AVATAR_ACCEPT,
-  AVATAR_EXPORT_SIZE,
-  MAX_AVATAR_UPLOAD_SIZE,
-} from "@/lib/api/auth";
-import { getApiErrorMessage } from "@/lib/api/error";
-import { cropToBlob, decodeImage, ImageCropError } from "@/lib/image-crop";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { useToast } from "@/components/ui/use-toast";
-import { UserAvatar } from "@/components/ui/user-avatar";
-import { ImageCropDialog } from "@/components/ui/image-crop-dialog";
-
-/**
- * The diver's own picture: pick a photo, adjust the crop, save.
- *
- * Saves immediately rather than riding the profile form's submit, which is why it is
- * a card of its own and not a field in that form - the header avatar changes in the
- * same paint, and a Save button between the diver and a change they can already see
- * is the thing the units and notifications cards deleted too.
- *
- * Remove has no confirmation step. Re-uploading undoes it, and nothing is lost that
- * the diver does not still have on their phone.
- */
-export function AvatarCard() {
-  const { user, refreshUser } = useAuth();
-  const { toast } = useToast();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Object URL of the file being cropped; also what decides whether the dialog is
-  // mounted. Held rather than derived so it can be revoked - an object URL is kept
-  // alive by the document until it is released explicitly.
-  const [pickedUrl, setPickedUrl] = useState<string | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-  const [isRemoving, setIsRemoving] = useState(false);
-
-  useEffect(() => {
-    if (!pickedUrl) return;
-    return () => URL.revokeObjectURL(pickedUrl);
-  }, [pickedUrl]);
-
-  const showError = (err: unknown, fallback: string) => {
-    toast({
-      title: "Error",
-      // A failure raised in this browser carries its own message and has no
-      // response for `getApiErrorMessage` to read, which would swap it for the
-      // fallback. Only the API's failures go through that.
-      description:
-        err instanceof ImageCropError
-          ? err.message
-          : getApiErrorMessage(err, fallback),
-      variant: "destructive",
-    });
-  };
-
-  const handlePick = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    // Cleared unconditionally, so picking the *same* file again after a cancel
-    // still fires a change event.
-    event.target.value = "";
-    if (!file) return;
-
-    if (file.size > MAX_AVATAR_UPLOAD_SIZE) {
-      toast({
-        title: "That photo is too large",
-        description: `Pick one under ${MAX_AVATAR_UPLOAD_SIZE / (1024 * 1024)} MB.`,
-        variant: "destructive",
-      });
-      return;
-    }
-
-    const url = URL.createObjectURL(file);
-
-    // Decode before opening the dialog rather than discovering the problem
-    // inside it. `react-easy-crop` has no failure callback at all - bytes it
-    // cannot decode leave it showing an empty frame with a Save button that
-    // never enables and nothing said about why, and the only escape is Cancel.
-    // The live case is a HEIC picked through the iOS Files app, which bypasses
-    // `accept` entirely. The decoded image is cached against this object URL, so
-    // the crop's own decode later is free.
-    try {
-      await decodeImage(url);
-    } catch (err) {
-      URL.revokeObjectURL(url);
-      showError(err, "That file could not be read as an image.");
-      return;
-    }
-
-    setPickedUrl(url);
-  };
-
-  const closeDialog = () => setPickedUrl(null);
-
-  const handleSave = async (area: Area) => {
-    if (!pickedUrl) return;
-
-    setIsSaving(true);
-    try {
-      // PNG rather than WebP, unlike a card image: `PUT /user/avatar` re-encodes
-      // to WebP itself, so lossless here costs nothing but the upload and spends
-      // no quality on a picture the server is about to compress anyway.
-      const blob = await cropToBlob(pickedUrl, area, {
-        maxWidth: AVATAR_EXPORT_SIZE,
-        type: "image/png",
-      });
-      await authAPI.uploadAvatar(blob, "avatar.png");
-      // Re-reading the user is what changes the header: `avatar_sha256` is the new
-      // picture's version, and every `UserAvatar` fetches from a URL carrying it.
-      await refreshUser();
-      closeDialog();
-      toast({
-        title: "Saved",
-        description: "Your profile picture has been updated.",
-      });
-    } catch (err) {
-      showError(err, "Failed to save your picture");
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleRemove = async () => {
-    setIsRemoving(true);
-    try {
-      await authAPI.removeAvatar();
-      await refreshUser();
-      toast({
-        title: "Removed",
-        description: "Your profile picture is back to your initials.",
-      });
-    } catch (err) {
-      showError(err, "Failed to remove your picture");
-    } finally {
-      setIsRemoving(false);
-    }
-  };
-
-  if (!user) return null;
-
-  const hasAvatar = !!user.avatar_sha256;
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle as="h2" className="flex items-center gap-2">
-          <Camera className="h-5 w-5" />
-          Profile Picture
-        </CardTitle>
-        <CardDescription>
-          Shown in the account menu, and only to you until OpenDiving grows a
-          way to share a log.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="flex items-center gap-4">
-          <UserAvatar
-            name={user.name}
-            avatarSha={user.avatar_sha256}
-            size={80}
-            className="h-20 w-20"
-          />
-
-          <div className="space-y-2">
-            <div className="flex flex-wrap items-center gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => inputRef.current?.click()}
-                disabled={isRemoving}
-              >
-                <Camera className="h-4 w-4 mr-2" />
-                {hasAvatar ? "Change photo" : "Add a photo"}
-              </Button>
-
-              {hasAvatar && (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={handleRemove}
-                  disabled={isRemoving}
-                >
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  Remove
-                </Button>
-              )}
-            </div>
-
-            <p className="text-sm text-muted-foreground">
-              Stored on this instance, never sent anywhere else. It is
-              re-encoded when you save it, which strips the location and camera
-              details a phone photo carries.
-            </p>
-          </div>
-        </div>
-
-        <input
-          ref={inputRef}
-          type="file"
-          accept={AVATAR_ACCEPT}
-          className="hidden"
-          onChange={(event) => void handlePick(event)}
-          aria-label="Choose a profile picture"
-        />
-      </CardContent>
-
-      {pickedUrl && (
-        <ImageCropDialog
-          imageSrc={pickedUrl}
-          aspect={1}
-          cropShape="round"
-          title="Adjust your photo"
-          description="Drag to move, pinch or use the slider to zoom. Only the circle is saved."
-          saveLabel="Save photo"
-          savingLabel="Saving..."
-          isSaving={isSaving}
-          onCancel={closeDialog}
-          onSave={handleSave}
-        />
-      )}
-    </Card>
-  );
-}
diff --git a/src/components/settings/check-in-details-card.tsx b/src/components/settings/check-in-details-card.tsx
index 6db4bfbc..a774be9a 100644
--- a/src/components/settings/check-in-details-card.tsx
+++ b/src/components/settings/check-in-details-card.tsx
@@ -19,10 +19,11 @@ import {
   UserFieldsSubmitButton,
 } from "@/components/user/user-fields-form";
 
-// The settings home for the check-in details: three groups under one save, because a
-// diver filling this in is filling in all of it. `/checkin` opens the same groups one
-// at a time beside the sections that print them, which is where a diver already at a
-// desk corrects one of them - `UserFieldsForm` is both.
+// The settings home for the check-in details: the portrait and three groups under one
+// save, because a diver filling this in is filling in all of it. `/checkin` opens the
+// same groups one at a time beside the sections that print them, the portrait with
+// About you, which is where a diver already at a desk corrects one of them -
+// `UserFieldsForm` is both.
 export function CheckInDetailsCard() {
   return (
     <Card className="flex flex-col h-full">
@@ -46,6 +47,7 @@ export function CheckInDetailsCard() {
               fields: [...EMERGENCY_CONTACT_FIELDS],
             },
           ]}
+          picture="portrait"
           savedMessage="Your check-in details are up to date."
         >
           <UserFieldsSubmitButton className="w-full mt-4" />
diff --git a/src/components/settings/data-export-card.render.test.tsx b/src/components/settings/data-export-card.render.test.tsx
index bc82e714..ab2e93b8 100644
--- a/src/components/settings/data-export-card.render.test.tsx
+++ b/src/components/settings/data-export-card.render.test.tsx
@@ -81,12 +81,17 @@ describe("DataExportCard", () => {
     expect(downloadButton("Full archive")).toBeInTheDocument();
   });
 
-  it("says the archive carries the certification scans", () => {
+  it("says the archive carries the certification scans and the portrait", () => {
     // The one sentence here that is a warning rather than a description. It is on the
     // archive row specifically because that is the only file that contains them.
     render(<DataExportCard username="alex" />);
 
-    expect(screen.getByText(/personal documents/i)).toBeInTheDocument();
+    const warning = screen.getByText(/personal documents/i).textContent!;
+    expect(warning).toMatch(
+      /card scans and the portrait are personal documents/,
+    );
+    // In the archive, and - until an import can restore it - not put back by one.
+    expect(warning).toMatch(/portrait is in it too, though an import does not/);
   });
 
   it.each([
diff --git a/src/components/settings/data-export-card.tsx b/src/components/settings/data-export-card.tsx
index 095aea68..7af27aff 100644
--- a/src/components/settings/data-export-card.tsx
+++ b/src/components/settings/data-export-card.tsx
@@ -37,8 +37,9 @@ interface ExportRow {
 // it". Two of them can answer "all of it", and the difference between those two is the
 // only thing this copy has to get across: DiveJSON holds everything the account has as
 // data, the archive holds that plus the files that were uploaded into it. Which is also
-// why the archive is the row that mentions the certification scans - the one thing here
-// worth knowing *before* the file lands in a downloads folder, not after.
+// why the archive is the row that mentions the certification scans and the portrait -
+// the one thing here worth knowing *before* the file lands in a downloads folder, not
+// after.
 //
 // DiveJSON leads because it is the complete one and the app's own format; the two lossy
 // rows below it are for handing to something else.
@@ -80,7 +81,7 @@ const EXPORT_ROWS: ExportRow[] = [
     icon: FileArchive,
     title: "Full archive",
     description:
-      "Everything, as a zip: the DiveJSON, the UDDF, the full CSV set, every dive-computer file you uploaded — each under the recording it belongs to — and every certification card image you uploaded. This is the one to keep as a backup — it is also the only download that can put those files back, since the import card below can restore bytes it actually carries. Those card scans are personal documents, so treat the file as one.",
+      "Everything, as a zip: the DiveJSON, the UDDF, the full CSV set, every dive-computer file you uploaded — each under the recording it belongs to — and every certification card image you uploaded. This is the one to keep as a backup — it is also the only download that can put those files back, since the import card below can restore bytes it actually carries. Your portrait is in it too, though an import does not put that back yet. The card scans and the portrait are personal documents, so treat the file as one.",
   },
 ];
 
diff --git a/src/components/settings/delete-account-card.render.test.tsx b/src/components/settings/delete-account-card.render.test.tsx
index 5746c724..f3865568 100644
--- a/src/components/settings/delete-account-card.render.test.tsx
+++ b/src/components/settings/delete-account-card.render.test.tsx
@@ -170,8 +170,8 @@ describe("DeleteAccountCard", () => {
     );
 
     // The archive specifically: it is the only export carrying the dive-computer
-    // files and the card scans, which is what makes it the one to offer on the way
-    // out.
+    // files, the card scans and the portrait, which is what makes it the one to offer
+    // on the way out.
     await waitFor(() =>
       expect(download).toHaveBeenCalledWith("archive", "alex"),
     );
diff --git a/src/components/settings/delete-account-card.tsx b/src/components/settings/delete-account-card.tsx
index e6bd63a3..ab09164a 100644
--- a/src/components/settings/delete-account-card.tsx
+++ b/src/components/settings/delete-account-card.tsx
@@ -77,9 +77,10 @@ export function DeleteAccountCard({ username }: DeleteAccountCardProps) {
   };
 
   // The gentler thing the description points at, and the one export worth pointing a
-  // departing diver at: the archive is the only one carrying the dive-computer files
-  // and the certification scans. It goes through `exportAPI` rather than reinventing
-  // a download here - same call, same server-named file as the Your Data card above.
+  // departing diver at: the archive is the only one carrying the dive-computer files,
+  // the certification scans and the portrait. It goes through `exportAPI` rather than
+  // reinventing a download here - same call, same server-named file as the Your Data
+  // card above.
   //
   // The dialog stays open behind it. Someone who asked for their data before deleting
   // is mid-decision, and closing the thing they were reading to hand them a file is a
diff --git a/src/components/settings/profile-card.tsx b/src/components/settings/profile-card.tsx
index 10e365d3..b3d68f13 100644
--- a/src/components/settings/profile-card.tsx
+++ b/src/components/settings/profile-card.tsx
@@ -14,9 +14,10 @@ import {
   UserFieldsSubmitButton,
 } from "@/components/user/user-fields-form";
 
-// Name and username, on the same form module as the check-in details beside it and as
-// the dialogs `/checkin` opens - so the bounds, the messages and the "" -> null rule
-// are the ones in `validations/user-fields.ts` and not a second copy of them.
+// Name, username and the profile picture, on the same form module as the check-in
+// details beside it and as the dialogs `/checkin` opens - so the bounds, the messages
+// and the "" -> null rule are the ones in `validations/user-fields.ts` and not a second
+// copy of them, and the picture saves with the fields rather than on a Save of its own.
 //
 // Email is not here: changing it needs ownership of the new address confirmed first,
 // which is `EmailChangeCard`'s own flow.
@@ -35,6 +36,7 @@ export function ProfileCard() {
       <CardContent className="flex flex-col flex-1">
         <UserFieldsForm
           groups={[{ fields: ["name", "username"] }]}
+          picture="avatar"
           savedMessage="Your profile has been updated."
         >
           <UserFieldsSubmitButton className="w-full mt-4" />
diff --git a/src/components/ui/image-crop-dialog.tsx b/src/components/ui/image-crop-dialog.tsx
index 7e261d29..2db69f33 100644
--- a/src/components/ui/image-crop-dialog.tsx
+++ b/src/components/ui/image-crop-dialog.tsx
@@ -26,11 +26,17 @@ const MIN_ZOOM = 1;
 const MAX_ZOOM = 3;
 
 interface ImageCropDialogProps {
-  // Object URL of the picked file. The dialog is mounted only while there is one,
-  // so it is never null here.
+  // Object URL of the image being cropped. The dialog is mounted only while there is
+  // one, so it is never null here.
   imageSrc: string;
-  /** Width over height of the crop, and so of the exported bytes. */
+  /** Width over height of the crop. */
   aspect: number;
+  /**
+   * Where the crop opens, in natural pixels of the source - a stored picture's own
+   * crop, so adjusting it starts from what the diver chose last time rather than from
+   * the centre. Read once, when the image loads.
+   */
+  initialArea?: Area;
   /** `round` for an avatar, `rect` for anything drawn as itself. */
   cropShape?: "rect" | "round";
   title: string;
@@ -48,10 +54,11 @@ interface ImageCropDialogProps {
 /**
  * Pick the part of a picture that is kept: drag to move, zoom, save.
  *
- * Shared by the avatar and the certification card, which differ only in the shape
- * they crop to and the words around it. A round mask with `aspect={1}` is what an
- * avatar is drawn as everywhere in the app; a card crops to the standard card
- * shape, so what is saved is already the shape every mount draws it in.
+ * Shared by the two pictures and the certification card. Each crops to the shape it
+ * is drawn in - a round mask at `aspect={1}` for the avatar, 7:9 for the portrait,
+ * the standard card shape for a card - and each caller decides what the rectangle
+ * becomes: a card's is drawn onto a canvas and exported, a picture's is sent to the
+ * API as numbers beside the file itself.
  *
  * Zoom is a native `<input type="range">` rather than a Radix slider: it is one
  * value with no empty state, and the native control is keyboard- and
@@ -60,6 +67,7 @@ interface ImageCropDialogProps {
 export function ImageCropDialog({
   imageSrc,
   aspect,
+  initialArea,
   cropShape = "rect",
   title,
   description,
@@ -75,7 +83,8 @@ export function ImageCropDialog({
 
   // Fires on every gesture, so it has to be stable or the cropper re-subscribes
   // continuously. The *pixels* argument is the one worth keeping: it is in natural
-  // source pixels, which is what the canvas export draws from.
+  // source pixels, which is what the canvas export draws from and what the API's
+  // crop is measured in.
   const handleCropComplete = useCallback(
     (_percent: Area, pixels: Area) => setArea(pixels),
     [],
@@ -113,6 +122,7 @@ export function ImageCropDialog({
             crop={crop}
             zoom={zoom}
             aspect={aspect}
+            initialCroppedAreaPixels={initialArea}
             cropShape={cropShape}
             showGrid={false}
             minZoom={MIN_ZOOM}
diff --git a/src/components/ui/user-avatar.render.test.tsx b/src/components/ui/user-avatar.render.test.tsx
index 35bfd42c..06a79173 100644
--- a/src/components/ui/user-avatar.render.test.tsx
+++ b/src/components/ui/user-avatar.render.test.tsx
@@ -10,18 +10,18 @@ import { UserAvatar } from "./user-avatar";
 // worse than no picture at all.
 
 vi.mock("@/lib/api/auth", () => ({
-  authAPI: { getAvatarBlob: vi.fn() },
+  authAPI: { getPictureBlob: vi.fn() },
 }));
 
 const { authAPI } = await import("@/lib/api/auth");
-const getAvatarBlob = vi.mocked(authAPI.getAvatarBlob);
+const getPictureBlob = vi.mocked(authAPI.getPictureBlob);
 
 const originalImage = globalThis.Image;
 const originalCreate = URL.createObjectURL;
 const originalRevoke = URL.revokeObjectURL;
 
 beforeEach(() => {
-  getAvatarBlob.mockReset().mockResolvedValue(new Blob(["png"]));
+  getPictureBlob.mockReset().mockResolvedValue(new Blob(["png"]));
 
   URL.createObjectURL = vi.fn(() => "blob:avatar");
   URL.revokeObjectURL = vi.fn();
@@ -58,7 +58,7 @@ describe("UserAvatar", () => {
     expect(await screen.findByText("JD")).toBeInTheDocument();
     // The account without a picture must not cost a request per mount - the header
     // mounts this on every page.
-    expect(getAvatarBlob).not.toHaveBeenCalled();
+    expect(getPictureBlob).not.toHaveBeenCalled();
   });
 
   it("fetches the picture with its digest and renders it from an object URL", async () => {
@@ -66,7 +66,9 @@ describe("UserAvatar", () => {
 
     // The digest is the version: it becomes `?v=` on the request, which is what
     // gives each replacement a URL the browser has not cached.
-    await waitFor(() => expect(getAvatarBlob).toHaveBeenCalledWith("abc123"));
+    await waitFor(() =>
+      expect(getPictureBlob).toHaveBeenCalledWith("avatar", "abc123"),
+    );
 
     const image = await screen.findByAltText("Jane Doe's avatar");
     expect(image).toHaveAttribute("src", "blob:avatar");
@@ -76,18 +78,22 @@ describe("UserAvatar", () => {
     const { rerender } = render(
       <UserAvatar name="Jane Doe" avatarSha="abc123" />,
     );
-    await waitFor(() => expect(getAvatarBlob).toHaveBeenCalledWith("abc123"));
+    await waitFor(() =>
+      expect(getPictureBlob).toHaveBeenCalledWith("avatar", "abc123"),
+    );
 
     rerender(<UserAvatar name="Jane Doe" avatarSha="def456" />);
 
-    await waitFor(() => expect(getAvatarBlob).toHaveBeenCalledWith("def456"));
+    await waitFor(() =>
+      expect(getPictureBlob).toHaveBeenCalledWith("avatar", "def456"),
+    );
   });
 
   it("falls back to initials when the fetch fails", async () => {
-    getAvatarBlob.mockRejectedValue(new Error("nope"));
+    getPictureBlob.mockRejectedValue(new Error("nope"));
     render(<UserAvatar name="Jane Doe" avatarSha="abc123" />);
 
-    await waitFor(() => expect(getAvatarBlob).toHaveBeenCalled());
+    await waitFor(() => expect(getPictureBlob).toHaveBeenCalled());
 
     expect(await screen.findByText("JD")).toBeInTheDocument();
     expect(screen.queryByAltText("Jane Doe's avatar")).not.toBeInTheDocument();
diff --git a/src/components/ui/user-avatar.tsx b/src/components/ui/user-avatar.tsx
index 036f7e0a..e47d041c 100644
--- a/src/components/ui/user-avatar.tsx
+++ b/src/components/ui/user-avatar.tsx
@@ -43,7 +43,7 @@ export function UserAvatar({
   // render. Null when there is no picture, which is what keeps an account without one
   // from making a request at all.
   const fetchBlob = React.useCallback(
-    () => authAPI.getAvatarBlob(avatarSha ?? undefined),
+    () => authAPI.getPictureBlob("avatar", avatarSha ?? undefined),
     [avatarSha],
   );
 
diff --git a/src/components/user/picture-field.tsx b/src/components/user/picture-field.tsx
new file mode 100644
index 00000000..013eb45d
--- /dev/null
+++ b/src/components/user/picture-field.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { Area } from "react-easy-crop";
+
+import { useAuth } from "@/contexts/AuthContext";
+import { authAPI, type User } from "@/lib/api/auth";
+import { getApiErrorMessage } from "@/lib/api/error";
+import { decodeImage, ImageCropError } from "@/lib/image-crop";
+import {
+  MAX_PICTURE_UPLOAD_SIZE,
+  PICTURE_LABEL,
+  pictureAspect,
+  pictureSizeProblem,
+  readPictureType,
+  toPictureCrop,
+  type PictureCrop,
+  type PictureKind,
+} from "@/lib/picture";
+import type {
+  PictureEdit,
+  PictureEditWithSource,
+  PictureSource,
+} from "@/lib/picture-edits";
+import { ImageCropDialog } from "@/components/ui/image-crop-dialog";
+import { useToast } from "@/components/ui/use-toast";
+import { PictureSlot } from "./picture-slot";
+
+const CROP_DESCRIPTION: Record<PictureKind, string> = {
+  avatar:
+    "Drag to move, pinch or use the slider to zoom. Only the circle is shown.",
+  portrait:
+    "Drag to move, pinch or use the slider to zoom. Frame your head and shoulders, as for a passport photo.",
+};
+
+// The image a crop is being chosen on, and what the crop is for. `url` is the dialog's
+// own object URL, released whenever this changes - never the one a pending edit's
+// preview holds, which `usePictureEdit` owns.
+interface Cropping {
+  purpose: PictureEditWithSource["kind"];
+  source: PictureSource;
+  url: string;
+  filename?: string;
+  initial?: PictureCrop;
+}
+
+function storedPicture(user: User, kind: PictureKind) {
+  return kind === "avatar"
+    ? {
+        sha: user.avatar_sha256 ?? null,
+        originalSha: user.avatar_original_sha256 ?? null,
+        crop: user.avatar_crop ?? null,
+      }
+    : {
+        sha: user.portrait_sha256 ?? null,
+        originalSha: user.portrait_original_sha256 ?? null,
+        crop: user.portrait_crop ?? null,
+      };
+}
+
+interface PictureFieldProps {
+  picture: PictureKind;
+  edit: PictureEdit | null;
+  onChange: (edit: PictureEdit | null) => void;
+  disabled?: boolean;
+}
+
+/**
+ * One of the diver's two pictures, as a field of the form it is saved with: the
+ * picked file, the original fetched to adjust or copy, and the crop chosen on either.
+ * `PictureSlot` draws it.
+ *
+ * **Nothing is sent from here.** Picking, adjusting, removing and copying each end in
+ * an edit the form holds and sends after its fields (`applyPictureEdit`), so Cancel
+ * leaves the stored picture as it was - the certification form's card images work the
+ * same way.
+ *
+ * The file is refused here, before the crop dialog opens, for anything the API would
+ * refuse: a type other than JPEG or PNG, and a size over its caps. Found after Save,
+ * the fields beside it would already be saved.
+ */
+export function PictureField({
+  picture,
+  edit,
+  onChange,
+  disabled = false,
+}: PictureFieldProps) {
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const [cropping, setCropping] = useState<Cropping | null>(null);
+  // Which original is being fetched, so its button can say so.
+  const [loading, setLoading] = useState<"adjust" | "copy" | null>(null);
+
+  useEffect(() => {
+    if (!cropping) return;
+    return () => URL.revokeObjectURL(cropping.url);
+  }, [cropping]);
+
+  if (!user) return null;
+
+  const stored = storedPicture(user, picture);
+  const pending = edit && edit.kind !== "remove" ? edit : null;
+  const isRemoved = edit?.kind === "remove";
+
+  const refuse = (title: string, description: string) =>
+    toast({ title, description, variant: "destructive" });
+
+  const showError = (error: unknown, fallback: string) =>
+    refuse(
+      "Error",
+      // A failure raised in this browser carries its own message and has no response
+      // for `getApiErrorMessage` to read, which would swap it for the fallback.
+      error instanceof ImageCropError
+        ? error.message
+        : getApiErrorMessage(error, fallback),
+    );
+
+  const handlePick = async (file: File) => {
+    if (file.size > MAX_PICTURE_UPLOAD_SIZE) {
+      refuse(
+        "That photo is too large",
+        `Pick one under ${MAX_PICTURE_UPLOAD_SIZE / (1024 * 1024)} MB.`,
+      );
+      return;
+    }
+
+    // From the bytes: a pick through the iOS Files app walks past `accept`, and a
+    // HEIC the browser can display is still one the API refuses.
+    const type = await readPictureType(file);
+    if (!type) {
+      refuse("Pick a JPEG or a PNG", "Those are the two a picture is kept as.");
+      return;
+    }
+
+    const url = URL.createObjectURL(file);
+    // Decoded before the dialog opens: `react-easy-crop` has no failure callback, so
+    // bytes it cannot read would leave an empty frame and a Save that never enables.
+    let image: HTMLImageElement;
+    try {
+      image = await decodeImage(url);
+    } catch (error) {
+      URL.revokeObjectURL(url);
+      showError(error, "That file could not be read as an image.");
+      return;
+    }
+
+    const problem = pictureSizeProblem(
+      type,
+      image.naturalWidth,
+      image.naturalHeight,
+    );
+    if (problem) {
+      URL.revokeObjectURL(url);
+      refuse("That photo is too large", problem);
+      return;
+    }
+
+    setCropping({
+      purpose: "replace",
+      source: {
+        blob: file,
+        width: image.naturalWidth,
+        height: image.naturalHeight,
+      },
+      url,
+      filename: file.name,
+    });
+  };
+
+  // The dialog on an original the API holds: this picture's own, at its stored crop,
+  // or - for "Use profile picture" - the avatar's, at the portrait's default.
+  const openOriginal = async (purpose: "adjust" | "copy") => {
+    const from: PictureKind = purpose === "copy" ? "avatar" : picture;
+    const { originalSha, crop } = storedPicture(user, from);
+    setLoading(purpose);
+    let url: string | null = null;
+    try {
+      const blob = await authAPI.getPictureOriginalBlob(
+        from,
+        originalSha ?? undefined,
+      );
+      url = URL.createObjectURL(blob);
+      const image = await decodeImage(url);
+      setCropping({
+        purpose,
+        source: {
+          blob,
+          width: image.naturalWidth,
+          height: image.naturalHeight,
+        },
+        url,
+        initial: purpose === "adjust" ? (crop ?? undefined) : undefined,
+      });
+    } catch (error) {
+      if (url) URL.revokeObjectURL(url);
+      showError(error, `Your ${PICTURE_LABEL[from]} could not be loaded.`);
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  // A pending edit already has its image, so adjusting it again fetches nothing.
+  const handleAdjust = () => {
+    if (!pending) {
+      void openOriginal("adjust");
+      return;
+    }
+    setCropping({
+      purpose: pending.kind,
+      source: pending.source,
+      url: URL.createObjectURL(pending.source.blob),
+      filename: pending.kind === "replace" ? pending.filename : undefined,
+      initial: pending.crop,
+    });
+  };
+
+  const handleCropped = (area: Area) => {
+    if (!cropping) return;
+    const { purpose, source, filename } = cropping;
+    const crop = toPictureCrop(area, source, picture);
+    const previewUrl = URL.createObjectURL(source.blob);
+    onChange(
+      purpose === "replace"
+        ? {
+            kind: "replace",
+            source,
+            filename: filename ?? picture,
+            crop,
+            previewUrl,
+          }
+        : { kind: purpose, source, crop, previewUrl },
+    );
+    setCropping(null);
+  };
+
+  return (
+    <>
+      <PictureSlot
+        picture={picture}
+        name={user.name}
+        storedSha={stored.sha}
+        canAdjust={!!pending || (!isRemoved && !!stored.originalSha)}
+        canCopy={picture === "portrait" && !!user.avatar_original_sha256}
+        edit={edit}
+        loading={loading}
+        disabled={disabled || loading !== null}
+        onPick={(file) => {
+          handlePick(file).catch((error: unknown) =>
+            showError(error, "That file could not be read."),
+          );
+        }}
+        onAdjust={handleAdjust}
+        onCopy={() => void openOriginal("copy")}
+        onChange={onChange}
+      />
+
+      {cropping && (
+        <ImageCropDialog
+          imageSrc={cropping.url}
+          aspect={pictureAspect(picture)}
+          initialArea={cropping.initial}
+          cropShape={picture === "avatar" ? "round" : "rect"}
+          title="Adjust your photo"
+          description={CROP_DESCRIPTION[picture]}
+          saveLabel="Use this crop"
+          savingLabel="Saving..."
+          isSaving={false}
+          onCancel={() => setCropping(null)}
+          onSave={handleCropped}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/components/user/picture-slot.tsx b/src/components/user/picture-slot.tsx
new file mode 100644
index 00000000..4baef11e
--- /dev/null
+++ b/src/components/user/picture-slot.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import { useRef } from "react";
+import { Crop, Trash2, Undo2, Upload, UserSquare } from "lucide-react";
+
+import { PICTURE_ACCEPT, PICTURE_LABEL, type PictureKind } from "@/lib/picture";
+import type { PictureEdit, PictureEditWithSource } from "@/lib/picture-edits";
+import { Button } from "@/components/ui/button";
+import { ButtonSpinner } from "@/components/ui/button-spinner";
+import { IconTooltip } from "@/components/ui/tooltip";
+import { UserAvatar } from "@/components/ui/user-avatar";
+import { PortraitFrame, PortraitImage } from "./portrait-image";
+
+const HEADING: Record<PictureKind, string> = {
+  avatar: "Profile picture",
+  portrait: "Portrait",
+};
+
+const HELP: Record<PictureKind, string> = {
+  avatar:
+    "Shown in the account menu. The photo you pick is kept without its location data, so its crop can be adjusted later.",
+  portrait:
+    "Your face, as on a passport photo, for a dive shop's desk: shown on your check-in page and nowhere else. The photo you pick is kept without its location data.",
+};
+
+interface PictureSlotProps {
+  picture: PictureKind;
+  name: string;
+  /** The stored rendition's digest, or null when there is none. */
+  storedSha: string | null;
+  /** Whether "Adjust" has something to open: a pending edit, or a stored original. */
+  canAdjust: boolean;
+  /** Whether "Use profile picture" has an original to copy. */
+  canCopy: boolean;
+  edit: PictureEdit | null;
+  /** Which original is being fetched, so its button can say so. */
+  loading: "adjust" | "copy" | null;
+  disabled: boolean;
+  onPick: (file: File) => void;
+  onAdjust: () => void;
+  onCopy: () => void;
+  onChange: (edit: PictureEdit | null) => void;
+}
+
+/**
+ * One picture as its form shows it: what it holds, what saving will do to it, and the
+ * controls that change either.
+ *
+ * Presentation only - it neither fetches nor crops. `PictureField` owns that, the way
+ * `CertificationCardFiles` owns what `CertificationCardSlot` draws.
+ */
+export function PictureSlot({
+  picture,
+  name,
+  storedSha,
+  canAdjust,
+  canCopy,
+  edit,
+  loading,
+  disabled,
+  onPick,
+  onAdjust,
+  onCopy,
+  onChange,
+}: PictureSlotProps) {
+  // The picker has to be opened from a Button, which cannot be a file input.
+  const inputRef = useRef<HTMLInputElement>(null);
+  const label = PICTURE_LABEL[picture];
+  const pending = edit && edit.kind !== "remove" ? edit : null;
+  const isRemoved = edit?.kind === "remove";
+  const shown = isRemoved ? null : storedSha;
+  const showsSomething = !!pending || !!shown;
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm font-medium">{HEADING[picture]}</p>
+
+      <div className="flex items-start gap-4">
+        {pending ? (
+          <PendingPreview picture={picture} edit={pending} />
+        ) : picture === "avatar" ? (
+          <UserAvatar
+            name={name}
+            avatarSha={shown}
+            size={80}
+            className="h-20 w-20"
+          />
+        ) : shown ? (
+          <PortraitImage
+            name={name}
+            portraitSha={shown}
+            className="w-20 shrink-0"
+          />
+        ) : (
+          <PortraitFrame
+            empty
+            className="w-20 shrink-0"
+            role="img"
+            aria-label="No portrait"
+          >
+            <UserSquare className="h-6 w-6 text-muted-foreground" aria-hidden />
+          </PortraitFrame>
+        )}
+
+        <div className="min-w-0 space-y-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={disabled}
+              onClick={() => inputRef.current?.click()}
+            >
+              <Upload className="h-4 w-4 mr-2" />
+              {/* What the button does to what the slot is showing: a picked photo is
+                  as replaceable as a stored one. */}
+              {showsSomething ? "Replace" : "Upload"}
+            </Button>
+
+            {canAdjust && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={disabled}
+                onClick={onAdjust}
+              >
+                {loading === "adjust" ? (
+                  <ButtonSpinner className="mr-2" />
+                ) : (
+                  <Crop className="h-4 w-4 mr-2" />
+                )}
+                Adjust
+              </Button>
+            )}
+
+            {canCopy && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={disabled}
+                onClick={onCopy}
+              >
+                {loading === "copy" && <ButtonSpinner className="mr-2" />}
+                Use profile picture
+              </Button>
+            )}
+
+            {isRemoved ? (
+              <IconTooltip label={`Keep your ${label}`}>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  disabled={disabled}
+                  onClick={() => onChange(null)}
+                >
+                  <Undo2 className="h-4 w-4" />
+                </Button>
+              </IconTooltip>
+            ) : (
+              showsSomething && (
+                <IconTooltip
+                  label={
+                    pending
+                      ? `Discard the new ${label}`
+                      : `Remove your ${label}`
+                  }
+                >
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    disabled={disabled}
+                    // A pending edit is dropped rather than marked: the stored
+                    // picture it would have replaced comes back into view.
+                    onClick={() =>
+                      onChange(pending ? null : { kind: "remove" })
+                    }
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </IconTooltip>
+              )
+            )}
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            {caption(picture, edit, !!storedSha)}
+          </p>
+        </div>
+      </div>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept={PICTURE_ACCEPT}
+        className="hidden"
+        aria-label={`Choose a ${label}`}
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          // Cleared unconditionally, so picking the *same* file again after a
+          // cancelled crop still fires a change event.
+          event.target.value = "";
+          if (file) onPick(file);
+        }}
+      />
+    </div>
+  );
+}
+
+// What the slot will hold once the form is saved, in words - a preview alone cannot
+// tell a new picture from the stored one.
+function caption(
+  picture: PictureKind,
+  edit: PictureEdit | null,
+  hasStored: boolean,
+): string {
+  const label = PICTURE_LABEL[picture];
+  switch (edit?.kind) {
+    case "replace":
+      return hasStored
+        ? `Replaces your ${label} when you save.`
+        : "Added when you save.";
+    case "adjust":
+      return "Re-cropped when you save.";
+    case "copy":
+      return hasStored
+        ? "Your profile picture replaces your portrait when you save."
+        : "Your profile picture becomes your portrait when you save.";
+    case "remove":
+      return "Removed when you save.";
+    default:
+      return HELP[picture];
+  }
+}
+
+// A pending edit's crop over its source, drawn by positioning the whole image inside
+// the frame rather than by cropping it on a canvas: nothing here makes bytes, and the
+// preview shows exactly the rectangle the API will be sent.
+function PendingPreview({
+  picture,
+  edit,
+}: {
+  picture: PictureKind;
+  edit: PictureEditWithSource;
+}) {
+  const { source, crop, previewUrl } = edit;
+  const image = (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={previewUrl}
+      alt={`New ${PICTURE_LABEL[picture]}`}
+      className="absolute max-w-none"
+      style={{
+        width: `${(source.width / crop.width) * 100}%`,
+        left: `${(-crop.x / crop.width) * 100}%`,
+        top: `${(-crop.y / crop.height) * 100}%`,
+      }}
+    />
+  );
+
+  return picture === "avatar" ? (
+    <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-full bg-muted">
+      {image}
+    </div>
+  ) : (
+    <PortraitFrame className="w-20 shrink-0">{image}</PortraitFrame>
+  );
+}
diff --git a/src/components/user/portrait-image.tsx b/src/components/user/portrait-image.tsx
new file mode 100644
index 00000000..b9bee952
--- /dev/null
+++ b/src/components/user/portrait-image.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useCallback, type HTMLAttributes } from "react";
+
+import { authAPI } from "@/lib/api/auth";
+import { useAuthedBlobUrl } from "@/hooks/useAuthedBlobUrl";
+import { cn } from "@/lib/utils";
+
+interface PortraitFrameProps extends HTMLAttributes<HTMLDivElement> {
+  /** Dashed, for a place where a portrait could be and is not. */
+  empty?: boolean;
+}
+
+/**
+ * The one box a portrait is drawn in: 7:9, the proportion of a 35 x 45 mm passport
+ * photo, which is the shape the API renders it to. Its width is the caller's.
+ *
+ * `self-start` for the reason `CertificationCardFrame` has it: `aspect-ratio` applies
+ * only to a box whose height is auto, and a flex item stretches to its line.
+ */
+export function PortraitFrame({
+  empty = false,
+  className,
+  children,
+  ...rest
+}: PortraitFrameProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex aspect-[7/9] items-center justify-center self-start overflow-hidden rounded-md border bg-muted",
+        empty && "border-dashed",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * The diver's stored portrait, fetched through the API client as `UserAvatar` fetches
+ * the avatar - the bytes are owner-only. No fallback inside the frame: initials
+ * identify nobody, and this picture exists to identify somebody.
+ */
+export function PortraitImage({
+  name,
+  portraitSha,
+  className,
+}: {
+  name: string;
+  /** `User.portrait_sha256`: whether there is one, and which version. */
+  portraitSha?: string | null;
+  className?: string;
+}) {
+  const fetchBlob = useCallback(
+    () => authAPI.getPictureBlob("portrait", portraitSha ?? undefined),
+    [portraitSha],
+  );
+  const { url } = useAuthedBlobUrl(portraitSha ? fetchBlob : null);
+
+  return (
+    <PortraitFrame className={className}>
+      {url && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={url}
+          alt={`Portrait of ${name}`}
+          // Already 7:9, so this crops nothing.
+          className="h-full w-full object-cover"
+        />
+      )}
+    </PortraitFrame>
+  );
+}
diff --git a/src/components/user/user-fields-dialog.tsx b/src/components/user/user-fields-dialog.tsx
index 76e288aa..b84b5536 100644
--- a/src/components/user/user-fields-dialog.tsx
+++ b/src/components/user/user-fields-dialog.tsx
@@ -2,6 +2,7 @@
 
 import { useRef } from "react";
 
+import type { PictureKind } from "@/lib/picture";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -24,6 +25,8 @@ export interface UserFieldsDialogProps {
   description?: string;
   groups: UserFieldGroup[];
   savedMessage?: string;
+  /** A picture edited beside the fields and saved with them - see `UserFieldsForm`. */
+  picture?: PictureKind;
 }
 
 /**
@@ -40,6 +43,7 @@ export function UserFieldsDialog({
   description,
   groups,
   savedMessage,
+  picture,
 }: UserFieldsDialogProps) {
   const panel = useRef<HTMLDivElement>(null);
 
@@ -67,6 +71,7 @@ export function UserFieldsDialog({
         <UserFieldsForm
           groups={groups}
           savedMessage={savedMessage}
+          picture={picture}
           onSaved={() => onOpenChange(false)}
         >
           <DialogFooter className="mt-4">
diff --git a/src/components/user/user-fields-form.render.test.tsx b/src/components/user/user-fields-form.render.test.tsx
new file mode 100644
index 00000000..9f770e43
--- /dev/null
+++ b/src/components/user/user-fields-form.render.test.tsx
@@ -0,0 +1,547 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { User } from "@/lib/api/auth";
+import type { PictureKind } from "@/lib/picture";
+import { UserFieldsForm, UserFieldsSubmitButton } from "./user-fields-form";
+
+// A picture rides on its form's Save, so what a render reaches is the order of the
+// requests and what is *not* sent: nothing on a pick, an adjustment, a remove or a
+// copy; the fields first on Save, then exactly one picture request; nothing at all
+// on a cancelled crop. The picker's refusals are here too, because a picture the API
+// refuses after Save is a picture refused after the fields beside it have saved.
+
+// Hoisted and returned by identity, `user` included: the form resets itself from
+// `user` in an effect, and a mock rebuilding it per render resets it under every
+// click. See "The new-dive render test was in a loop with itself" in DECISIONS.md.
+const auth = vi.hoisted(() => ({
+  user: {
+    uuid: "user-1",
+    name: "Jane Doe",
+    username: "jane",
+    email: "jane@example.com",
+    units: "metric",
+    dive_form_hidden_fields: [],
+  } as User,
+  refreshUser: vi.fn(),
+}));
+
+vi.mock("@/contexts/AuthContext", () => ({
+  useAuth: () => auth,
+}));
+
+vi.mock("@/lib/api/auth", () => ({
+  authAPI: {
+    updateProfile: vi.fn(),
+    uploadPicture: vi.fn(),
+    adjustPicture: vi.fn(),
+    copyAvatarToPortrait: vi.fn(),
+    removePicture: vi.fn(),
+    getPictureBlob: vi.fn(),
+    getPictureOriginalBlob: vi.fn(),
+  },
+}));
+
+// jsdom has no image decoder. `ImageCropError` stays the real class: the slot
+// branches on `instanceof` to decide whose message to show.
+vi.mock("@/lib/image-crop", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/lib/image-crop")>()),
+  decodeImage: vi.fn(),
+}));
+
+// The cropper measures itself with a ResizeObserver that reports zeroes here, so it
+// stands in as what the slot cares about: the source and start it was opened on, and
+// a rectangle at the aspect it was asked for.
+vi.mock("@/components/ui/image-crop-dialog", () => ({
+  ImageCropDialog: ({
+    imageSrc,
+    aspect,
+    initialArea,
+    onCancel,
+    onSave,
+  }: {
+    imageSrc: string;
+    aspect: number;
+    initialArea?: object;
+    onCancel: () => void;
+    onSave: (area: object) => void;
+  }) => (
+    <div
+      role="dialog"
+      aria-label="Adjust your photo"
+      data-src={imageSrc}
+      data-aspect={aspect}
+      data-initial={initialArea ? JSON.stringify(initialArea) : ""}
+    >
+      <button
+        type="button"
+        onClick={() =>
+          onSave({ x: 0, y: 0, width: Math.round(900 * aspect), height: 900 })
+        }
+      >
+        Use this crop
+      </button>
+      <button type="button" onClick={onCancel}>
+        Cancel
+      </button>
+    </div>
+  ),
+}));
+
+const toast = vi.fn();
+vi.mock("@/components/ui/use-toast", () => ({
+  useToast: () => ({ toast }),
+}));
+
+const { authAPI } = await import("@/lib/api/auth");
+const { decodeImage, ImageCropError } = await import("@/lib/image-crop");
+const decode = vi.mocked(decodeImage);
+
+// Every request in the order it was made, so "the fields first" is an assertion
+// about order rather than about two mocks each having been called.
+let sent: string[] = [];
+const record =
+  <T,>(name: string, value: T) =>
+  async () => {
+    sent.push(name);
+    return value;
+  };
+
+const originalCreate = URL.createObjectURL;
+const originalRevoke = URL.revokeObjectURL;
+let urls = 0;
+
+const AVATAR_CROP = { x: 0, y: 0, width: 900, height: 900 };
+const PORTRAIT_CROP = { x: 0, y: 0, width: 700, height: 900 };
+
+beforeEach(() => {
+  sent = [];
+  urls = 0;
+  Object.assign(auth.user, {
+    avatar_sha256: null,
+    avatar_original_sha256: null,
+    avatar_crop: null,
+    portrait_sha256: null,
+    portrait_original_sha256: null,
+    portrait_crop: null,
+  });
+  auth.refreshUser.mockReset().mockResolvedValue(undefined);
+  vi.mocked(authAPI.updateProfile)
+    .mockReset()
+    .mockImplementation(record("patch /user", undefined));
+  vi.mocked(authAPI.uploadPicture)
+    .mockReset()
+    .mockImplementation(record("put", { sha256: "new" }));
+  vi.mocked(authAPI.adjustPicture)
+    .mockReset()
+    .mockImplementation(record("patch picture", { sha256: "new" }));
+  vi.mocked(authAPI.copyAvatarToPortrait)
+    .mockReset()
+    .mockImplementation(record("copy", { sha256: "new" }));
+  vi.mocked(authAPI.removePicture)
+    .mockReset()
+    .mockImplementation(record("delete", undefined));
+  vi.mocked(authAPI.getPictureBlob).mockReset().mockResolvedValue(new Blob());
+  vi.mocked(authAPI.getPictureOriginalBlob)
+    .mockReset()
+    .mockResolvedValue(new Blob(["original"]));
+  decode.mockReset().mockResolvedValue({
+    naturalWidth: 1000,
+    naturalHeight: 1000,
+  } as HTMLImageElement);
+  toast.mockReset();
+
+  URL.createObjectURL = vi.fn(() => `blob:${++urls}`);
+  URL.revokeObjectURL = vi.fn();
+});
+
+afterEach(() => {
+  URL.createObjectURL = originalCreate;
+  URL.revokeObjectURL = originalRevoke;
+});
+
+function renderForm(picture: PictureKind) {
+  return render(
+    <UserFieldsForm
+      groups={[{ fields: ["name", "username"] }]}
+      picture={picture}
+    >
+      <UserFieldsSubmitButton />
+    </UserFieldsForm>,
+  );
+}
+
+const JPEG = [0xff, 0xd8, 0xff, 0xe0];
+const PNG = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+
+function photo(
+  name = "me.jpg",
+  { head = JPEG, size = 1000 }: { head?: number[]; size?: number } = {},
+) {
+  const bytes = new Uint8Array(size);
+  bytes.set(head);
+  return new File([bytes], name, { type: "image/jpeg" });
+}
+
+const picker = (picture: PictureKind) =>
+  screen.getByLabelText(
+    picture === "avatar" ? "Choose a profile picture" : "Choose a portrait",
+  );
+const save = () =>
+  userEvent.click(screen.getByRole("button", { name: /save changes/i }));
+const useCrop = () =>
+  userEvent.click(screen.getByRole("button", { name: "Use this crop" }));
+
+describe("a picture rides on its form's Save", () => {
+  it("sends nothing on a pick, then the fields and then the picked file itself", async () => {
+    renderForm("avatar");
+    const file = photo();
+
+    await userEvent.upload(picker("avatar"), file);
+    await useCrop();
+
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(screen.getByText("Added when you save.")).toBeInTheDocument();
+    expect(sent).toEqual([]);
+
+    await save();
+
+    await waitFor(() => expect(sent).toEqual(["patch /user", "put"]));
+    // The file as it was picked - not a canvas re-encode of it - and its crop.
+    expect(authAPI.uploadPicture).toHaveBeenCalledWith(
+      "avatar",
+      file,
+      "me.jpg",
+      AVATAR_CROP,
+    );
+    // The re-read is what changes the header's avatar.
+    expect(auth.refreshUser).toHaveBeenCalled();
+    expect(toast).toHaveBeenCalledWith(
+      expect.objectContaining({ title: "Saved" }),
+    );
+  });
+
+  it("still saves when the picture is the only thing that changed", async () => {
+    // The fields go every time; a Save is never skipped for want of a dirty field.
+    auth.user.portrait_sha256 = "p1";
+    renderForm("portrait");
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Remove your portrait" }),
+    );
+    expect(screen.getByText("Removed when you save.")).toBeInTheDocument();
+    expect(sent).toEqual([]);
+
+    await save();
+
+    await waitFor(() => expect(sent).toEqual(["patch /user", "delete"]));
+    expect(authAPI.removePicture).toHaveBeenCalledWith("portrait");
+  });
+
+  it("sends nothing for a cancelled crop, and releases what it opened", async () => {
+    renderForm("avatar");
+
+    await userEvent.upload(picker("avatar"), photo());
+    await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    await save();
+
+    await waitFor(() => expect(sent).toEqual(["patch /user"]));
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:1");
+  });
+
+  it("takes a remove back with Undo, which sends nothing", async () => {
+    auth.user.avatar_sha256 = "a1";
+    renderForm("avatar");
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Remove your profile picture" }),
+    );
+    await userEvent.click(
+      screen.getByRole("button", { name: "Keep your profile picture" }),
+    );
+    await save();
+
+    await waitFor(() => expect(sent).toEqual(["patch /user"]));
+  });
+
+  it("clears the pending picture once it is sent", async () => {
+    renderForm("avatar");
+
+    await userEvent.upload(picker("avatar"), photo());
+    await useCrop();
+    await save();
+    await waitFor(() => expect(sent).toEqual(["patch /user", "put"]));
+
+    // The form repaints from the account, which knows nothing of the edit - and the
+    // preview it drew from is given back.
+    expect(screen.queryByText("Added when you save.")).toBeNull();
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:2");
+
+    await save();
+    await waitFor(() =>
+      expect(sent).toEqual(["patch /user", "put", "patch /user"]),
+    );
+  });
+
+  it("keeps the saved fields when the picture fails, and names the picture", async () => {
+    vi.mocked(authAPI.uploadPicture).mockRejectedValue(new Error("nope"));
+    renderForm("portrait");
+
+    await userEvent.upload(picker("portrait"), photo());
+    await useCrop();
+    await save();
+
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: "Saved, but your portrait did not",
+          variant: "destructive",
+        }),
+      ),
+    );
+    expect(authAPI.updateProfile).toHaveBeenCalled();
+    expect(auth.refreshUser).toHaveBeenCalled();
+    // Not the form's own error: the fields did save.
+    expect(screen.queryByText(/failed to save/i)).toBeNull();
+    expect(toast).not.toHaveBeenCalledWith(
+      expect.objectContaining({ title: "Saved" }),
+    );
+  });
+
+  it("sends no picture when the fields fail", async () => {
+    vi.mocked(authAPI.updateProfile).mockRejectedValue(new Error("nope"));
+    renderForm("avatar");
+
+    await userEvent.upload(picker("avatar"), photo());
+    await useCrop();
+    await save();
+
+    await waitFor(() =>
+      expect(screen.getByText(/failed to save/i)).toBeInTheDocument(),
+    );
+    expect(authAPI.uploadPicture).not.toHaveBeenCalled();
+    // Still pending, for the Save that follows.
+    expect(screen.getByText("Added when you save.")).toBeInTheDocument();
+  });
+});
+
+describe("Adjust", () => {
+  it("is absent while no original is held", () => {
+    // An avatar seeded from Google, or stored before originals were kept.
+    auth.user.avatar_sha256 = "a1";
+    renderForm("avatar");
+
+    expect(screen.queryByRole("button", { name: /adjust/i })).toBeNull();
+  });
+
+  it("opens the stored original at its stored crop, and sends only the crop", async () => {
+    Object.assign(auth.user, {
+      avatar_sha256: "a1",
+      avatar_original_sha256: "o1",
+      avatar_crop: { x: 10, y: 20, width: 300, height: 300 },
+    });
+    renderForm("avatar");
+
+    await userEvent.click(screen.getByRole("button", { name: /adjust/i }));
+
+    // The original's digest is its `?v=`, so a replaced original is never served
+    // from the browser's cache.
+    expect(authAPI.getPictureOriginalBlob).toHaveBeenCalledWith("avatar", "o1");
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveAttribute(
+      "data-initial",
+      JSON.stringify({ x: 10, y: 20, width: 300, height: 300 }),
+    );
+
+    await useCrop();
+    expect(screen.getByText("Re-cropped when you save.")).toBeInTheDocument();
+    expect(sent).toEqual([]);
+
+    await save();
+    await waitFor(() => expect(sent).toEqual(["patch /user", "patch picture"]));
+    expect(authAPI.adjustPicture).toHaveBeenCalledWith("avatar", AVATAR_CROP);
+    expect(authAPI.uploadPicture).not.toHaveBeenCalled();
+  });
+
+  it("reopens a picked photo at the crop just chosen, without fetching anything", async () => {
+    renderForm("avatar");
+
+    await userEvent.upload(picker("avatar"), photo());
+    await useCrop();
+    await userEvent.click(screen.getByRole("button", { name: /adjust/i }));
+
+    expect(await screen.findByRole("dialog")).toHaveAttribute(
+      "data-initial",
+      JSON.stringify(AVATAR_CROP),
+    );
+    expect(authAPI.getPictureOriginalBlob).not.toHaveBeenCalled();
+  });
+
+  it("says what went wrong when the original will not load", async () => {
+    Object.assign(auth.user, {
+      avatar_sha256: "a1",
+      avatar_original_sha256: "o1",
+      avatar_crop: AVATAR_CROP,
+    });
+    vi.mocked(authAPI.getPictureOriginalBlob).mockRejectedValue(
+      new Error("nope"),
+    );
+    renderForm("avatar");
+
+    await userEvent.click(screen.getByRole("button", { name: /adjust/i }));
+
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith(
+        expect.objectContaining({ variant: "destructive" }),
+      ),
+    );
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+});
+
+describe("Use profile picture", () => {
+  it("is absent while the avatar holds no original", () => {
+    auth.user.avatar_sha256 = "a1";
+    renderForm("portrait");
+
+    expect(
+      screen.queryByRole("button", { name: "Use profile picture" }),
+    ).toBeNull();
+  });
+
+  it("is never offered on the avatar itself", () => {
+    Object.assign(auth.user, {
+      avatar_sha256: "a1",
+      avatar_original_sha256: "o1",
+      avatar_crop: AVATAR_CROP,
+    });
+    renderForm("avatar");
+
+    expect(
+      screen.queryByRole("button", { name: "Use profile picture" }),
+    ).toBeNull();
+  });
+
+  it("opens the avatar's original at 7:9, and copies it on Save", async () => {
+    Object.assign(auth.user, {
+      avatar_sha256: "a1",
+      avatar_original_sha256: "o1",
+      avatar_crop: AVATAR_CROP,
+    });
+    renderForm("portrait");
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Use profile picture" }),
+    );
+
+    expect(authAPI.getPictureOriginalBlob).toHaveBeenCalledWith("avatar", "o1");
+    const dialog = await screen.findByRole("dialog");
+    expect(Number(dialog.getAttribute("data-aspect"))).toBeCloseTo(7 / 9);
+    // The avatar's square is no start for a 7:9 frame.
+    expect(dialog).toHaveAttribute("data-initial", "");
+
+    await useCrop();
+    expect(sent).toEqual([]);
+
+    await save();
+    await waitFor(() => expect(sent).toEqual(["patch /user", "copy"]));
+    expect(authAPI.copyAvatarToPortrait).toHaveBeenCalledWith(PORTRAIT_CROP);
+  });
+});
+
+describe("the picker refuses what the API would, before the dialog opens", () => {
+  it("refuses a file over the API's own ceiling", async () => {
+    renderForm("avatar");
+
+    await userEvent.upload(
+      picker("avatar"),
+      photo("huge.jpg", { size: 10 * 1024 * 1024 + 1 }),
+    );
+
+    expect(toast).toHaveBeenCalledWith(
+      expect.objectContaining({ variant: "destructive" }),
+    );
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("refuses anything that is not a JPEG or a PNG, naming both", async () => {
+    renderForm("portrait");
+
+    // A WebP: the browser would display it, and the API keeps no WebP original.
+    await userEvent.upload(
+      picker("portrait"),
+      photo("shot.webp", { head: [0x52, 0x49, 0x46, 0x46] }),
+    );
+
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: expect.stringMatching(/JPEG.*PNG/),
+          variant: "destructive",
+        }),
+      ),
+    );
+    expect(decode).not.toHaveBeenCalled();
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("refuses a PNG over the decode cap, naming the cap", async () => {
+    decode.mockResolvedValue({
+      naturalWidth: 5712,
+      naturalHeight: 4284,
+    } as HTMLImageElement);
+    renderForm("portrait");
+
+    await userEvent.upload(picker("portrait"), photo("big.png", { head: PNG }));
+
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          description: expect.stringMatching(/4032 × 3024/),
+        }),
+      ),
+    );
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:1");
+  });
+
+  it("refuses a file the browser cannot decode instead of opening a dead dialog", async () => {
+    // `react-easy-crop` has no failure callback: undecodable bytes would leave a
+    // Save that never enables and nothing said about why.
+    decode.mockRejectedValue(
+      new ImageCropError("That file could not be read."),
+    );
+    renderForm("avatar");
+
+    await userEvent.upload(picker("avatar"), photo());
+
+    await waitFor(() =>
+      expect(toast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          description: "That file could not be read.",
+          variant: "destructive",
+        }),
+      ),
+    );
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:1");
+  });
+});
+
+describe("preview URLs", () => {
+  it("gives one back when it is replaced, and the rest when the form goes", async () => {
+    const { unmount } = renderForm("avatar");
+
+    // Each pick: the dialog's URL (released as the dialog closes), then the preview's.
+    await userEvent.upload(picker("avatar"), photo());
+    await useCrop();
+    await userEvent.upload(picker("avatar"), photo("second.jpg"));
+    await useCrop();
+
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:2");
+    expect(URL.revokeObjectURL).not.toHaveBeenCalledWith("blob:4");
+
+    unmount();
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:4");
+  });
+});
diff --git a/src/components/user/user-fields-form.tsx b/src/components/user/user-fields-form.tsx
index 3a4aa6d7..26f69fc5 100644
--- a/src/components/user/user-fields-form.tsx
+++ b/src/components/user/user-fields-form.tsx
@@ -12,9 +12,12 @@ import { Save } from "lucide-react";
 
 import { useAuth } from "@/contexts/AuthContext";
 import { useEffectOnChange } from "@/hooks/useEffectOnChange";
+import { usePictureEdit } from "@/hooks/usePictureEdit";
 import { authAPI } from "@/lib/api/auth";
 import { getApiErrorMessage } from "@/lib/api/error";
 import { dialogFormSubmit } from "@/lib/dialog-form";
+import { PICTURE_LABEL, type PictureKind } from "@/lib/picture";
+import { applyPictureEdit } from "@/lib/picture-edits";
 import {
   EMPTY_USER_FIELDS,
   userFieldsFromUser,
@@ -38,6 +41,7 @@ import {
 import { FormApiError } from "@/components/ui/form-api-error";
 import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/ui/use-toast";
+import { PictureField } from "@/components/user/picture-field";
 
 // How each field is written on screen. A `Record` over the key union, like the
 // schemas it pairs with, so a field added to one and not the other is a type error
@@ -99,6 +103,11 @@ export interface UserFieldsFormProps {
   onSaved?: () => void;
   /** What the toast says on success. */
   savedMessage?: string;
+  /**
+   * One of the diver's pictures, edited above the fields and sent after them - the
+   * avatar with the profile, the portrait with the check-in details.
+   */
+  picture?: PictureKind;
 }
 
 /**
@@ -113,16 +122,23 @@ export interface UserFieldsFormProps {
  *
  * Only the fields in `groups` are sent (`userFieldsUpdate`), and an emptied optional
  * one goes as an explicit `null` so clearing it actually clears it.
+ *
+ * A `picture` rides on the same Save, the way a certification's card images ride on
+ * its form: the fields go first, then the one request the picture's pending edit
+ * needs, and a picture that fails leaves the saved fields saved and says which
+ * picture it was.
  */
 export function UserFieldsForm({
   groups,
   children,
   onSaved,
   savedMessage = "Your details are up to date.",
+  picture,
 }: UserFieldsFormProps) {
   const { user, refreshUser } = useAuth();
   const { toast } = useToast();
   const [error, setError] = useState<string | null>(null);
+  const [pictureEdit, setPictureEdit] = usePictureEdit();
 
   const fields = groups.flatMap((group) => group.fields);
 
@@ -148,6 +164,22 @@ export function UserFieldsForm({
     if (user) reset(userFieldsFromUser(user));
   }, [user, reset]);
 
+  // The picture, once the fields are stored. Cleared whether it landed or not: the
+  // form repaints from the re-read account, which knows nothing of an edit, and a
+  // picture that failed is picked again rather than retried from state.
+  const savePicture = async (kind: PictureKind) => {
+    if (!pictureEdit) return null;
+    try {
+      await applyPictureEdit(kind, pictureEdit);
+      return null;
+    } catch (error) {
+      console.error(`Failed to save the ${kind}:`, error);
+      return { picture: kind, error };
+    } finally {
+      setPictureEdit(null);
+    }
+  };
+
   const onSubmit = async () => {
     setError(null);
     try {
@@ -156,8 +188,22 @@ export function UserFieldsForm({
       // subset by a longer route, and this way the payload and the rendering are
       // built from one list.
       await authAPI.updateProfile(userFieldsUpdate(fields, form.getValues()));
+      const pictureFailure =
+        picture && pictureEdit ? await savePicture(picture) : null;
+      // Before the toast, so the header's avatar has changed by the time it says so.
       await refreshUser();
-      toast({ title: "Saved", description: savedMessage });
+      if (pictureFailure) {
+        toast({
+          title: `Saved, but your ${PICTURE_LABEL[pictureFailure.picture]} did not`,
+          description: getApiErrorMessage(
+            pictureFailure.error,
+            "Try picking the photo again.",
+          ),
+          variant: "destructive",
+        });
+      } else {
+        toast({ title: "Saved", description: savedMessage });
+      }
       onSaved?.();
     } catch (err) {
       setError(getApiErrorMessage(err, "Failed to save. Please try again."));
@@ -176,6 +222,14 @@ export function UserFieldsForm({
         className="flex flex-col flex-1"
       >
         <div className="space-y-6 flex-1">
+          {picture && (
+            <PictureField
+              picture={picture}
+              edit={pictureEdit}
+              onChange={setPictureEdit}
+              disabled={form.formState.isSubmitting}
+            />
+          )}
           {groups.map((group, at) => (
             <fieldset key={group.legend ?? at} className="space-y-4">
               {group.legend && (
diff --git a/src/hooks/usePictureEdit.ts b/src/hooks/usePictureEdit.ts
new file mode 100644
index 00000000..82915c2f
--- /dev/null
+++ b/src/hooks/usePictureEdit.ts
@@ -0,0 +1,47 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { pictureEditPreviewUrl, type PictureEdit } from "@/lib/picture-edits";
+
+/**
+ * A form's pending picture edit, and the object URL its preview is drawn from.
+ *
+ * The setter is the one place that URL changes hands: the edit it replaces gives its
+ * URL back unless the new one keeps it, so a slot re-picked three times holds one
+ * image rather than three for the life of the page - and clearing the edit after a
+ * save releases it the same way. Whatever is still held when the form unmounts is
+ * swept, as the certification form's card files are.
+ */
+export function usePictureEdit(): [
+  PictureEdit | null,
+  (next: PictureEdit | null) => void,
+] {
+  const [edit, setEditState] = useState<PictureEdit | null>(null);
+  // Read by the setter, which has to know what it is replacing without waiting for
+  // a render - two calls in one handler would otherwise both see the same `edit`.
+  const held = useRef<PictureEdit | null>(null);
+  const urls = useRef(new Set<string>());
+
+  useEffect(() => {
+    const outstanding = urls.current;
+    return () => {
+      for (const url of outstanding) URL.revokeObjectURL(url);
+      outstanding.clear();
+    };
+  }, []);
+
+  const setEdit = useCallback((next: PictureEdit | null) => {
+    const before = pictureEditPreviewUrl(held.current);
+    const after = pictureEditPreviewUrl(next);
+    if (before && before !== after) {
+      URL.revokeObjectURL(before);
+      urls.current.delete(before);
+    }
+    if (after) urls.current.add(after);
+    held.current = next;
+    setEditState(next);
+  }, []);
+
+  return [edit, setEdit];
+}
diff --git a/src/lib/api/auth.ts b/src/lib/api/auth.ts
index bbdf4bc9..f6ba13c2 100644
--- a/src/lib/api/auth.ts
+++ b/src/lib/api/auth.ts
@@ -6,20 +6,31 @@ import {
 } from "./client";
 import type { UnitSystem } from "@/lib/units";
 import type { DiveFormFieldKey } from "@/lib/dive-form-fields";
+import type { PictureCrop, PictureKind } from "@/lib/picture";
 
 export interface User {
   uuid: string;
   name: string;
   username: string;
   email: string;
-  // The stored avatar's digest, or null when this diver has no picture and the app
-  // draws initials. There is no URL here on purpose: the bytes are owner-only and an
-  // `<img src>` cannot carry a bearer token, so they are fetched through the API
-  // client (`getAvatarBlob`). The digest is also the version - it is the `ETag` on
-  // the download and the `?v=` token that gives each replacement its own cache
-  // entry, so a new picture is visible immediately and an unchanged one is never
-  // re-fetched. Optional for the same reason as `gear_service_emails` below.
+  // Each picture's rendition digest, or null when there is none - initials for the
+  // avatar, an empty frame for the portrait. There is no URL here on purpose: the
+  // bytes are owner-only and an `<img src>` cannot carry a bearer token, so they are
+  // fetched through the API client (`getPictureBlob`). The digest is also the version
+  // - it is the `ETag` on the download and the `?v=` token that gives each
+  // replacement its own cache entry, so a new picture is visible immediately and an
+  // unchanged one is never re-fetched. Optional for the same reason as
+  // `gear_service_emails` below.
   avatar_sha256?: string | null;
+  portrait_sha256?: string | null;
+  // The original each picture is rendered from and the crop it is rendered through,
+  // null together when no original is held: an avatar stored before originals were
+  // kept, or seeded from Google. The digest is what offers "Adjust" and the `?v=` of
+  // `getPictureOriginalBlob`; the crop is where the adjustment opens.
+  avatar_original_sha256?: string | null;
+  avatar_crop?: PictureCrop | null;
+  portrait_original_sha256?: string | null;
+  portrait_crop?: PictureCrop | null;
   // Whether to email this user when their gear is due for servicing. Opt-out, so it
   // defaults to true server-side; optional here so a response from an API that predates
   // the field still type-checks.
@@ -143,32 +154,10 @@ export interface UpdateProfileData {
 }
 
 /**
- * What the file picker offers for an avatar, mirroring the four formats the API can
- * decode.
- *
- * **Spelled out rather than `image/*`, and that is load-bearing.** Since WebKit's
- * 2024 change, iOS Safari transcodes a HEIC pick to JPEG only when the `accept` list
- * restricts image types and excludes HEIC; `image/*` hands over raw HEIC, which no
- * browser can decode into a canvas and the API rejects. Never add `image/heic` here
- * either - Safari then delivers the original HEIC and has a documented bug converting
- * picked PNGs *to* HEIC. A pick made through the Files app bypasses `accept`
- * entirely, so this is convenience, not validation: the API decodes the bytes and is
- * the only authority on what they are.
- */
-export const AVATAR_ACCEPT = "image/jpeg,image/png,image/webp,image/gif";
-
-/** The API's own upload ceiling, mirrored so an oversize file fails before the round trip. */
-export const MAX_AVATAR_UPLOAD_SIZE = 10 * 1024 * 1024; // 10 MB
-
-/**
- * The largest avatar the app ever sends. The API bounds what it stores to the same
- * 512 px, so anything bigger would be uploaded only to be thrown away; the biggest
- * mount is 80 px, so this is already x2 retina with room over.
+ * What every write to a picture answers: the new rendition's digest, which is also
+ * its version. The original's digest and the crop come with the next `GET /user`.
  */
-export const AVATAR_EXPORT_SIZE = 512;
-
-/** `PUT /user/avatar`'s body: the stored image's digest, which is also its version. */
-export interface AvatarUploadResult {
+export interface PictureWriteResult {
   sha256: string;
 }
 
@@ -356,52 +345,103 @@ export const authAPI = {
     await apiClient.patch("/user", profileData);
   },
 
-  // Set or replace the caller's avatar. `PUT`, because there is one avatar per
-  // account and uploading again overwrites it.
-  //
-  // What comes back out is not what goes in: the API decodes, orients from EXIF,
-  // crops square, bounds to 512 px and re-encodes as WebP - which is what strips the
-  // metadata a phone photo carries, GPS included. So the digest it returns describes
-  // the *stored* image, and nothing about the upload (size, type, filename) survives
-  // to be echoed back.
-  //
-  // `Content-Type: undefined` lets the browser set the multipart boundary; axios
-  // cannot know it. Same shape as the certification card upload.
-  async uploadAvatar(
+  /**
+   * Set or replace one of the caller's pictures. `PUT`, because there is one of each
+   * per account and uploading again overwrites it.
+   *
+   * The file goes as the diver picked it: the API keeps it as the original, stripped
+   * of its metadata (GPS included) without touching a pixel, and renders what the app
+   * shows from it through `crop` - so a later `adjustPicture` needs no upload. The
+   * crop travels as a JSON string in its own form field, which is how the route reads
+   * it.
+   *
+   * `Content-Type: undefined` lets the browser set the multipart boundary; axios
+   * cannot know it. Same shape as the certification card upload.
+   */
+  async uploadPicture(
+    kind: PictureKind,
     file: Blob,
     filename: string,
-  ): Promise<AvatarUploadResult> {
+    crop: PictureCrop,
+  ): Promise<PictureWriteResult> {
     const formData = new FormData();
     formData.append("file", file, filename);
+    formData.append("crop", JSON.stringify(crop));
 
-    const response = await apiClient.put<AvatarUploadResult>(
-      "/user/avatar",
+    const response = await apiClient.put<PictureWriteResult>(
+      `/user/${kind}`,
       formData,
       { headers: { "Content-Type": undefined } },
     );
     return response.data;
   },
 
-  // Remove the caller's avatar, leaving the account alone. 404 when there was none.
-  async removeAvatar(): Promise<void> {
-    await apiClient.delete("/user/avatar");
+  /**
+   * Re-crop a picture from the original the API holds, leaving the original alone.
+   * 404 when none is held, 409 if the picture changed while this rendered.
+   */
+  async adjustPicture(
+    kind: PictureKind,
+    crop: PictureCrop,
+  ): Promise<PictureWriteResult> {
+    const response = await apiClient.patch<PictureWriteResult>(
+      `/user/${kind}`,
+      { crop },
+    );
+    return response.data;
   },
 
-  // Fetch the caller's own avatar bytes as a Blob.
-  //
-  // Through the API client rather than an `<img src>` for the same reason as card
-  // images: the endpoint is owner-only and needs an `Authorization` header, which an
-  // `<img>` cannot send (the access token lives in memory, not in a cookie). Callers
-  // turn the Blob into an object URL - see `hooks/useAuthedBlobUrl.ts`.
-  //
-  // `version` is `User.avatar_sha256`, sent as a `v` query param the API ignores. Its
-  // job is to give each version of the picture its own URL: the response is cached
-  // with `max-age=300`, so without it the browser would keep serving the old bytes
-  // from its own cache for five minutes after a replace, however correctly the app
-  // refetches. Stable while the avatar is unchanged, so repeat mounts still hit the
-  // cache (and revalidate against the `ETag` after that).
-  async getAvatarBlob(version?: string): Promise<Blob> {
-    const response = await apiClient.get("/user/avatar", {
+  /**
+   * Make the avatar's original the portrait's too, cropped at 7:9. The API copies the
+   * bytes under keys of its own, so removing either picture later leaves the other
+   * whole. 404 while the avatar holds no original.
+   */
+  async copyAvatarToPortrait(crop: PictureCrop): Promise<PictureWriteResult> {
+    const response = await apiClient.post<PictureWriteResult>(
+      "/user/portrait/from-avatar",
+      { crop },
+    );
+    return response.data;
+  },
+
+  /** Remove a picture and its original. 404 when there was none. */
+  async removePicture(kind: PictureKind): Promise<void> {
+    await apiClient.delete(`/user/${kind}`);
+  },
+
+  /**
+   * Fetch one of the caller's own pictures as a Blob - the rendition every screen
+   * shows.
+   *
+   * Through the API client rather than an `<img src>` for the same reason as card
+   * images: the endpoint is owner-only and needs an `Authorization` header, which an
+   * `<img>` cannot send (the access token lives in memory, not in a cookie). Callers
+   * turn the Blob into an object URL - see `hooks/useAuthedBlobUrl.ts`.
+   *
+   * `version` is the picture's `*_sha256`, sent as a `v` query param the API ignores.
+   * Its job is to give each version of the picture its own URL: the response is
+   * cached with `max-age=300`, so without it the browser would keep serving the old
+   * bytes from its own cache for five minutes after a replace, however correctly the
+   * app refetches. Stable while the picture is unchanged, so repeat mounts still hit
+   * the cache (and revalidate against the `ETag` after that).
+   */
+  async getPictureBlob(kind: PictureKind, version?: string): Promise<Blob> {
+    const response = await apiClient.get(`/user/${kind}`, {
+      responseType: "blob",
+      params: version ? { v: version } : undefined,
+    });
+    return response.data;
+  },
+
+  /**
+   * Fetch the original a picture is rendered from, for adjusting its crop.
+   * `version` is its `*_original_sha256`, for the reason `getPictureBlob` gives.
+   */
+  async getPictureOriginalBlob(
+    kind: PictureKind,
+    version?: string,
+  ): Promise<Blob> {
+    const response = await apiClient.get(`/user/${kind}/original`, {
       responseType: "blob",
       params: version ? { v: version } : undefined,
     });
diff --git a/src/lib/certification.ts b/src/lib/certification.ts
index 1a2b9698..dac7c3de 100644
--- a/src/lib/certification.ts
+++ b/src/lib/certification.ts
@@ -40,9 +40,9 @@ export const CERTIFICATION_CARD_ASPECT = 1013 / 638;
 export const CERTIFICATION_CARD_ASPECT_CLASS = "aspect-[1013/638]";
 
 // The widest a cropped card is exported at, which is about what an agency issues
-// and twice the biggest mount in the app. Unlike an avatar, the API stores these
-// bytes as they arrive - it sniffs the type and never re-encodes - so this is the
-// only thing bounding what a diver's card costs.
+// and twice the biggest mount in the app. The API stores these bytes as they arrive
+// - it sniffs the type and never renders anything from them, as it does for the two
+// pictures - so this is the only thing bounding what a diver's card costs.
 export const CERTIFICATION_CARD_EXPORT_WIDTH = 1024;
 
 // How far ahead a certification counts as "expiring soon".
diff --git a/src/lib/image-crop.test.ts b/src/lib/image-crop.test.ts
index 0223b748..37a7bbff 100644
--- a/src/lib/image-crop.test.ts
+++ b/src/lib/image-crop.test.ts
@@ -1,38 +1,36 @@
 import { describe, expect, it } from "vitest";
 import { cropExportWidth } from "./image-crop";
-import { AVATAR_EXPORT_SIZE } from "./api/auth";
+import { CERTIFICATION_CARD_EXPORT_WIDTH as MAX_WIDTH } from "./certification";
 
 // Only the sizing rule is unit-tested. `cropToBlob` is canvas, and jsdom has no
 // canvas implementation at all - a test of it would be a test of the mock standing in
 // for the API under test.
 describe("cropExportWidth", () => {
   it("caps at the size the caller stores anyway", () => {
-    expect(cropExportWidth(4000, AVATAR_EXPORT_SIZE)).toBe(AVATAR_EXPORT_SIZE);
+    expect(cropExportWidth(4000, MAX_WIDTH)).toBe(MAX_WIDTH);
   });
 
   it("does not upscale a crop smaller than that", () => {
-    // A 200 px crop blown up to 512 costs bytes and invents detail; the API declines
-    // to upscale for the same reason, so a client that did would be undone anyway.
-    expect(cropExportWidth(200, AVATAR_EXPORT_SIZE)).toBe(200);
+    // A 200 px crop blown up to the card width costs bytes and invents detail, and the
+    // API stores a card's bytes as they arrive.
+    expect(cropExportWidth(200, MAX_WIDTH)).toBe(200);
   });
 
   it("rounds a fractional crop down", () => {
     // `croppedAreaPixels` is fractional, and a fractional canvas dimension is
     // silently truncated by the platform rather than rejected.
-    expect(cropExportWidth(199.7, AVATAR_EXPORT_SIZE)).toBe(199);
+    expect(cropExportWidth(199.7, MAX_WIDTH)).toBe(199);
   });
 
   it("never returns a dimension a canvas would reject", () => {
     // `canvas.width = 0` throws on `drawImage`, so a degenerate crop has to floor at
     // one pixel rather than at zero.
-    expect(cropExportWidth(0, AVATAR_EXPORT_SIZE)).toBe(1);
-    expect(cropExportWidth(0.4, AVATAR_EXPORT_SIZE)).toBe(1);
-    expect(cropExportWidth(-10, AVATAR_EXPORT_SIZE)).toBe(1);
+    expect(cropExportWidth(0, MAX_WIDTH)).toBe(1);
+    expect(cropExportWidth(0.4, MAX_WIDTH)).toBe(1);
+    expect(cropExportWidth(-10, MAX_WIDTH)).toBe(1);
   });
 
   it("falls back to the caller's full size for a non-finite crop", () => {
-    expect(cropExportWidth(Number.NaN, AVATAR_EXPORT_SIZE)).toBe(
-      AVATAR_EXPORT_SIZE,
-    );
+    expect(cropExportWidth(Number.NaN, MAX_WIDTH)).toBe(MAX_WIDTH);
   });
 });
diff --git a/src/lib/image-crop.ts b/src/lib/image-crop.ts
index c75bee5e..af917957 100644
--- a/src/lib/image-crop.ts
+++ b/src/lib/image-crop.ts
@@ -51,7 +51,7 @@ interface CropToBlobOptions {
    *
    * **Never `image/jpeg`.** `toBlob("image/jpeg")` has no alpha channel to put
    * transparency in and the canvas spec composites it onto **black**, so a card
-   * or an avatar with a transparent corner comes back with a black wedge in it.
+   * with a transparent corner comes back with a black wedge in it.
    *
    * A type the browser cannot encode is not an error: the canvas spec says to
    * fall back to `image/png`. That is why callers name the stored file from
diff --git a/src/lib/picture-edits.test.ts b/src/lib/picture-edits.test.ts
new file mode 100644
index 00000000..d51f1320
--- /dev/null
+++ b/src/lib/picture-edits.test.ts
@@ -0,0 +1,119 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/api/auth", () => ({
+  authAPI: {
+    uploadPicture: vi.fn(),
+    adjustPicture: vi.fn(),
+    copyAvatarToPortrait: vi.fn(),
+    removePicture: vi.fn(),
+  },
+}));
+
+const { authAPI } = await import("@/lib/api/auth");
+const { applyPictureEdit, pictureEditPreviewUrl } =
+  await import("./picture-edits");
+
+const crop = { x: 0, y: 0, width: 700, height: 900 };
+const file = new File(["jpeg"], "me.jpg", { type: "image/jpeg" });
+const source = { blob: file, width: 700, height: 900 };
+
+const calls = () => [
+  ...vi.mocked(authAPI.uploadPicture).mock.calls.map((c) => ["upload", ...c]),
+  ...vi.mocked(authAPI.adjustPicture).mock.calls.map((c) => ["adjust", ...c]),
+  ...vi
+    .mocked(authAPI.copyAvatarToPortrait)
+    .mock.calls.map((c) => ["copy", ...c]),
+  ...vi.mocked(authAPI.removePicture).mock.calls.map((c) => ["remove", ...c]),
+];
+
+beforeEach(() => {
+  vi.mocked(authAPI.uploadPicture)
+    .mockReset()
+    .mockResolvedValue({ sha256: "a" });
+  vi.mocked(authAPI.adjustPicture)
+    .mockReset()
+    .mockResolvedValue({ sha256: "a" });
+  vi.mocked(authAPI.copyAvatarToPortrait)
+    .mockReset()
+    .mockResolvedValue({ sha256: "a" });
+  vi.mocked(authAPI.removePicture).mockReset().mockResolvedValue(undefined);
+});
+
+describe("applyPictureEdit sends exactly the one request an edit needs", () => {
+  it("uploads the picked file itself, under its own name, with its crop", async () => {
+    await applyPictureEdit("portrait", {
+      kind: "replace",
+      source,
+      filename: "me.jpg",
+      crop,
+      previewUrl: "blob:p",
+    });
+    expect(calls()).toEqual([["upload", "portrait", file, "me.jpg", crop]]);
+  });
+
+  it("re-crops without sending the image again", async () => {
+    await applyPictureEdit("avatar", {
+      kind: "adjust",
+      source,
+      crop,
+      previewUrl: "blob:p",
+    });
+    expect(calls()).toEqual([["adjust", "avatar", crop]]);
+  });
+
+  it("copies the avatar's original on the server rather than uploading it", async () => {
+    await applyPictureEdit("portrait", {
+      kind: "copy",
+      source,
+      crop,
+      previewUrl: "blob:p",
+    });
+    expect(calls()).toEqual([["copy", crop]]);
+  });
+
+  it("refuses to copy onto the avatar, which has nothing to copy from", async () => {
+    await expect(
+      applyPictureEdit("avatar", {
+        kind: "copy",
+        source,
+        crop,
+        previewUrl: "blob:p",
+      }),
+    ).rejects.toThrow();
+    expect(calls()).toEqual([]);
+  });
+
+  it("removes", async () => {
+    await applyPictureEdit("avatar", { kind: "remove" });
+    expect(calls()).toEqual([["remove", "avatar"]]);
+  });
+
+  it("hands the API's refusal back for the form to name the picture in", async () => {
+    const refusal = new Error("415");
+    vi.mocked(authAPI.uploadPicture).mockRejectedValue(refusal);
+    await expect(
+      applyPictureEdit("avatar", {
+        kind: "replace",
+        source,
+        filename: "me.jpg",
+        crop,
+        previewUrl: "blob:p",
+      }),
+    ).rejects.toBe(refusal);
+  });
+});
+
+describe("pictureEditPreviewUrl", () => {
+  it("is the URL of an edit that shows a picture, and nothing otherwise", () => {
+    expect(
+      pictureEditPreviewUrl({
+        kind: "adjust",
+        source,
+        crop,
+        previewUrl: "blob:p",
+      }),
+    ).toBe("blob:p");
+    expect(pictureEditPreviewUrl({ kind: "remove" })).toBeNull();
+    expect(pictureEditPreviewUrl(null)).toBeNull();
+  });
+});
diff --git a/src/lib/picture-edits.ts b/src/lib/picture-edits.ts
new file mode 100644
index 00000000..cca4e895
--- /dev/null
+++ b/src/lib/picture-edits.ts
@@ -0,0 +1,91 @@
+import { authAPI } from "@/lib/api/auth";
+import type { PictureCrop, PictureKind } from "@/lib/picture";
+
+/**
+ * The image a pending edit is cropped from: a picked file, or an original fetched from
+ * the API. The size is the decoded, upright one the crop is measured in.
+ */
+export interface PictureSource {
+  blob: Blob;
+  width: number;
+  height: number;
+}
+
+/**
+ * What saving the form will do to its picture, or nothing at all when the diver has not
+ * touched it. Each carries what its one request needs, and the three that show a
+ * picture carry what the preview draws it from.
+ *
+ * `previewUrl` rides on the edit rather than being derived where it is drawn because an
+ * object URL has a lifetime somebody has to own: the document holds the bytes until it
+ * is revoked. `usePictureEdit` revokes it when the edit is replaced or dropped, and
+ * sweeps whatever is left when the form goes.
+ */
+export type PictureEdit =
+  | {
+      kind: "replace";
+      source: PictureSource;
+      /** What the original is stored under: the picked file's own name. */
+      filename: string;
+      crop: PictureCrop;
+      previewUrl: string;
+    }
+  | {
+      /** A new crop over the original the API already holds. */
+      kind: "adjust";
+      source: PictureSource;
+      crop: PictureCrop;
+      previewUrl: string;
+    }
+  | {
+      /** The portrait's only: the avatar's original, at a crop of its own. */
+      kind: "copy";
+      source: PictureSource;
+      crop: PictureCrop;
+      previewUrl: string;
+    }
+  | { kind: "remove" };
+
+/** The edits that put a picture on screen, as opposed to taking one off. */
+export type PictureEditWithSource = Exclude<PictureEdit, { kind: "remove" }>;
+
+export function pictureEditPreviewUrl(edit: PictureEdit | null): string | null {
+  return edit && edit.kind !== "remove" ? edit.previewUrl : null;
+}
+
+/**
+ * Sends the one request a form's picture edit needs, once the form's fields have saved.
+ *
+ * **Nothing here runs before the save**, which is the whole reason the form holds an
+ * edit rather than uploading on pick: a diver who cancels leaves the stored picture
+ * exactly as they found it. Throws what the API answered, for the caller to name the
+ * picture in.
+ */
+export async function applyPictureEdit(
+  picture: PictureKind,
+  edit: PictureEdit,
+): Promise<void> {
+  switch (edit.kind) {
+    case "replace":
+      // `PUT` replaces whatever is there, so it needs no delete in front of it.
+      await authAPI.uploadPicture(
+        picture,
+        edit.source.blob,
+        edit.filename,
+        edit.crop,
+      );
+      return;
+    case "adjust":
+      await authAPI.adjustPicture(picture, edit.crop);
+      return;
+    case "copy":
+      if (picture !== "portrait") {
+        throw new Error("Only the portrait is copied from another picture.");
+      }
+      await authAPI.copyAvatarToPortrait(edit.crop);
+      return;
+    case "remove":
+      await authAPI.removePicture(picture);
+      return;
+  }
+}
diff --git a/src/lib/picture.test.ts b/src/lib/picture.test.ts
new file mode 100644
index 00000000..9e6918cf
--- /dev/null
+++ b/src/lib/picture.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, it } from "vitest";
+import {
+  PICTURE_RATIO,
+  pictureSizeProblem,
+  readPictureType,
+  sniffPictureType,
+  toPictureCrop,
+  type PictureCrop,
+  type PictureKind,
+} from "./picture";
+
+const JPEG_HEAD = [0xff, 0xd8, 0xff, 0xe0];
+const PNG_HEAD = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+
+describe("the type is read off the bytes", () => {
+  it("knows a JPEG and a PNG by their signatures", () => {
+    expect(sniffPictureType(new Uint8Array(JPEG_HEAD))).toBe("image/jpeg");
+    expect(sniffPictureType(new Uint8Array(PNG_HEAD))).toBe("image/png");
+  });
+
+  it("refuses the formats the API keeps no original of", () => {
+    // RIFF....WEBP and GIF89a: both display in a browser, and both are a 415.
+    const webp = [0x52, 0x49, 0x46, 0x46, 0, 0, 0, 0, 0x57, 0x45, 0x42, 0x50];
+    const gif = [0x47, 0x49, 0x46, 0x38, 0x39, 0x61];
+    expect(sniffPictureType(new Uint8Array(webp))).toBeNull();
+    expect(sniffPictureType(new Uint8Array(gif))).toBeNull();
+    expect(sniffPictureType(new Uint8Array([]))).toBeNull();
+  });
+
+  it("reads a file's own bytes rather than its declared type", async () => {
+    // What a HEIC renamed `.jpg` looks like to `File.type`.
+    const disguised = new File([new Uint8Array([0, 0, 0, 0x18])], "a.jpg", {
+      type: "image/jpeg",
+    });
+    const undeclared = new File([new Uint8Array(PNG_HEAD)], "a", { type: "" });
+
+    expect(await readPictureType(disguised)).toBeNull();
+    expect(await readPictureType(undeclared)).toBe("image/png");
+  });
+});
+
+describe("what the API would refuse by size", () => {
+  it("passes a 12 MP phone photo either way round, as a JPEG or a PNG", () => {
+    for (const type of ["image/jpeg", "image/png"] as const) {
+      expect(pictureSizeProblem(type, 4032, 3024)).toBeNull();
+      expect(pictureSizeProblem(type, 3024, 4032)).toBeNull();
+    }
+  });
+
+  it("holds a PNG to the decode cap, and says what the cap is", () => {
+    // An iPhone screenshot passes; a 24 MP PNG does not.
+    expect(pictureSizeProblem("image/png", 1179, 2556)).toBeNull();
+    const problem = pictureSizeProblem("image/png", 5712, 4284);
+    expect(problem).toMatch(/4032 × 3024/);
+    expect(problem).toMatch(/5712 × 4284/);
+  });
+
+  it("passes a 24 MP JPEG, which the API decodes reduced", () => {
+    expect(pictureSizeProblem("image/jpeg", 5712, 4284)).toBeNull();
+    expect(pictureSizeProblem("image/jpeg", 8000, 6000)).toBeNull();
+  });
+
+  it("holds a JPEG to the 50 MP it may declare", () => {
+    expect(pictureSizeProblem("image/jpeg", 10000, 5001)).toMatch(
+      /50 megapixels/,
+    );
+  });
+
+  it("refuses a JPEG too narrow to be reduced and too large to decode whole", () => {
+    // A 15000 x 1000 panorama: its short edge is under twice 512, so the API decodes
+    // all 15 MP of it and refuses the lot.
+    expect(pictureSizeProblem("image/jpeg", 15000, 1000)).toMatch(
+      /too large to process/,
+    );
+    // The same width with a short edge of 1024 halves, to 3.75 MP.
+    expect(pictureSizeProblem("image/jpeg", 15000, 1024)).toBeNull();
+  });
+});
+
+describe("the crop the API is sent", () => {
+  const withinRatio = (crop: PictureCrop, kind: PictureKind) => {
+    const [width, height] = PICTURE_RATIO[kind];
+    return (
+      Math.abs(crop.width * height - crop.height * width) <=
+      Math.max(width, height)
+    );
+  };
+
+  it("passes the cropper's own rectangle through untouched", () => {
+    const area = { x: 0, y: 72, width: 3024, height: 3888 };
+    expect(
+      toPictureCrop(area, { width: 3024, height: 4032 }, "portrait"),
+    ).toEqual(area);
+  });
+
+  it("brings a rectangle one pixel over the edge back inside", () => {
+    const crop = toPictureCrop(
+      { x: 1, y: 0, width: 700, height: 900 },
+      { width: 700, height: 900 },
+      "portrait",
+    );
+    expect(crop.x + crop.width).toBeLessThanOrEqual(700);
+    expect(crop.y + crop.height).toBeLessThanOrEqual(900);
+    expect(withinRatio(crop, "portrait")).toBe(true);
+  });
+
+  it("puts a fractional, off-ratio rectangle on whole pixels at the ratio", () => {
+    for (const kind of ["avatar", "portrait"] as const) {
+      const crop = toPictureCrop(
+        { x: 10.4, y: 20.6, width: 333.3, height: 401.9 },
+        { width: 1000, height: 1000 },
+        kind,
+      );
+      for (const value of Object.values(crop)) {
+        expect(Number.isInteger(value)).toBe(true);
+      }
+      expect(withinRatio(crop, kind)).toBe(true);
+    }
+  });
+
+  it("shrinks a height the width cannot follow", () => {
+    // A 7:9 crop 900 high needs 700 wide, and this image has 650.
+    const crop = toPictureCrop(
+      { x: 0, y: 0, width: 700, height: 900 },
+      { width: 650, height: 900 },
+      "portrait",
+    );
+    expect(crop.width).toBeLessThanOrEqual(650);
+    expect(crop.height).toBeLessThan(900);
+    expect(withinRatio(crop, "portrait")).toBe(true);
+  });
+});
diff --git a/src/lib/picture.ts b/src/lib/picture.ts
new file mode 100644
index 00000000..9db2f07b
--- /dev/null
+++ b/src/lib/picture.ts
@@ -0,0 +1,157 @@
+import type { Area } from "react-easy-crop";
+
+/**
+ * The account's two pictures. The avatar is whatever the diver shows the app; the
+ * portrait is an identification photo, shown on the check-in page and nowhere else.
+ */
+export type PictureKind = "avatar" | "portrait";
+
+/**
+ * A rectangle in the **upright** original's pixels - after its EXIF orientation is
+ * applied, which is the space a browser decodes a picked file into and so the space
+ * `react-easy-crop` reports in. The API's `PictureCrop`.
+ */
+export interface PictureCrop {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** Width to height. 7:9 is 35 x 45 mm, the passport photo's proportion. */
+export const PICTURE_RATIO: Record<PictureKind, readonly [number, number]> = {
+  avatar: [1, 1],
+  portrait: [7, 9],
+};
+
+export function pictureAspect(kind: PictureKind): number {
+  const [width, height] = PICTURE_RATIO[kind];
+  return width / height;
+}
+
+/** How each picture is named in a sentence. */
+export const PICTURE_LABEL: Record<PictureKind, string> = {
+  avatar: "profile picture",
+  portrait: "portrait",
+};
+
+/**
+ * What the file picker offers for either picture: the two formats the API keeps as an
+ * original.
+ *
+ * **Spelled out rather than `image/*`, and that is load-bearing.** Since WebKit's
+ * 2024 change, iOS Safari transcodes a HEIC pick to JPEG only when the `accept` list
+ * restricts image types and excludes HEIC; `image/*` hands over raw HEIC, which the
+ * API refuses. Never add `image/heic` here either - Safari then delivers the original
+ * HEIC and has a documented bug converting picked PNGs *to* HEIC. A pick made through
+ * the Files app bypasses `accept` entirely, so this is convenience, not validation:
+ * `readPictureType` checks the bytes, and the API checks them again.
+ */
+export const PICTURE_ACCEPT = "image/jpeg,image/png";
+
+/** The API's upload ceiling, mirrored so an oversize file fails before the round trip. */
+export const MAX_PICTURE_UPLOAD_SIZE = 10 * 1024 * 1024; // 10 MB
+
+// The API's two pixel caps, mirrored so a picture it would refuse is refused at the
+// pick rather than after Save, when the form's fields have already saved. The first
+// judges what the file declares; the second what the API actually decodes, which for
+// a PNG is every pixel and for a JPEG is Pillow's reduced `draft` towards 512 px.
+export const MAX_PICTURE_PIXELS = 50_000_000;
+export const MAX_ORIGINAL_DECODE_PIXELS = 4032 * 3024;
+const JPEG_DRAFT_TARGET = 512;
+
+export type PictureType = "image/jpeg" | "image/png";
+
+const PNG_SIGNATURE = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+
+/** The type the first bytes of a file say it is, when it is one a picture may be. */
+export function sniffPictureType(head: Uint8Array): PictureType | null {
+  if (head[0] === 0xff && head[1] === 0xd8 && head[2] === 0xff) {
+    return "image/jpeg";
+  }
+  if (PNG_SIGNATURE.every((byte, at) => head[at] === byte)) {
+    return "image/png";
+  }
+  return null;
+}
+
+/**
+ * Reads the type off the file's own bytes, as the API does, rather than trusting
+ * `File.type` - which is the extension's guess, and empty for a pick from the iOS
+ * Files app.
+ */
+export async function readPictureType(file: Blob): Promise<PictureType | null> {
+  return sniffPictureType(new Uint8Array(await file.slice(0, 8).arrayBuffer()));
+}
+
+// What Pillow's `JpegImageFile.draft` rasterizes: the largest of 1/8, 1/4 and 1/2
+// that leaves both edges at least the target, rounded up. Orientation cannot change
+// it - the minimum and the product are both symmetric in the two edges.
+function jpegDecodedPixels(width: number, height: number): number {
+  const reduction = Math.min(
+    Math.floor(width / JPEG_DRAFT_TARGET),
+    Math.floor(height / JPEG_DRAFT_TARGET),
+  );
+  const scale = [8, 4, 2, 1].find((step) => reduction >= step) ?? 1;
+  return Math.ceil(width / scale) * Math.ceil(height / scale);
+}
+
+/**
+ * Why the API would refuse a picture of this type and size, or null when it would
+ * not. `width` and `height` are the decoded image's, in either orientation.
+ */
+export function pictureSizeProblem(
+  type: PictureType,
+  width: number,
+  height: number,
+): string | null {
+  const size = `${width} × ${height}`;
+  // A PNG is decoded whole, so the lower cap is the one that binds it.
+  if (type === "image/png") {
+    return width * height > MAX_ORIGINAL_DECODE_PIXELS
+      ? `A PNG can be at most 4032 × 3024 pixels, and this one is ${size}. A JPEG of it will do.`
+      : null;
+  }
+  if (width * height > MAX_PICTURE_PIXELS) {
+    return `A JPEG can be at most 50 megapixels, and this one is ${size}.`;
+  }
+  // Only a very wide JPEG reaches this: its short edge keeps the reduction from
+  // happening, so the API decodes it whole.
+  return jpegDecodedPixels(width, height) > MAX_ORIGINAL_DECODE_PIXELS
+    ? `A ${size} photo this wide is too large to process. Crop it a little first.`
+    : null;
+}
+
+/**
+ * The cropper's rectangle as the API takes it: whole pixels, inside the image, and at
+ * the picture's ratio to within the pixel the API allows.
+ *
+ * `react-easy-crop` already rounds and clamps, so this is normally the identity; it
+ * exists so that a rectangle one pixel over an edge or off the ratio - which the API
+ * answers with a 422, after the form's fields have saved - cannot be sent at all.
+ * The height leads, then the width follows it at the ratio, and the pair shrinks by a
+ * pixel until it fits.
+ */
+export function toPictureCrop(
+  area: Area,
+  image: { width: number; height: number },
+  kind: PictureKind,
+): PictureCrop {
+  const [ratioWidth, ratioHeight] = PICTURE_RATIO[kind];
+  let height = Math.max(1, Math.min(image.height, Math.round(area.height)));
+  let width = Math.max(1, Math.round((height * ratioWidth) / ratioHeight));
+  while (width > image.width && height > 1) {
+    height -= 1;
+    width = Math.max(1, Math.round((height * ratioWidth) / ratioHeight));
+  }
+
+  // Centred on the rectangle it was given, so a pixel taken off comes off both sides.
+  const x = Math.round(area.x + (area.width - width) / 2);
+  const y = Math.round(area.y + (area.height - height) / 2);
+  return {
+    x: Math.min(Math.max(0, x), image.width - width),
+    y: Math.min(Math.max(0, y), image.height - height),
+    width,
+    height,
+  };
+}
diff --git a/src/proxy.ts b/src/proxy.ts
index d72d35f0..559041bb 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -161,13 +161,13 @@ export function proxy(request: NextRequest) {
       ? "style-src 'self' 'unsafe-inline'"
       : `style-src 'self' 'nonce-${nonce}'`,
     "style-src-attr 'unsafe-inline'",
-    // `blob:` - certification card images and avatars are private, so they're
-    // fetched with an `Authorization` header and rendered from an object URL
-    // rather than pointed at directly (see `hooks/useAuthedBlobUrl.ts`). Blob URLs
-    // are *not* covered by `'self'`, so without this the `<img>` is blocked. It
-    // widens nothing an attacker could reach: a `blob:` URL can only name data
-    // this document already created. Avatars take that same path, which is why
-    // no avatar host is named here: they are served by this app's own API.
+    // `blob:` - certification card images and both of a diver's pictures are
+    // private, so they're fetched with an `Authorization` header and rendered from
+    // an object URL rather than pointed at directly (see `hooks/useAuthedBlobUrl.ts`).
+    // Blob URLs are *not* covered by `'self'`, so without this the `<img>` is
+    // blocked. It widens nothing an attacker could reach: a `blob:` URL can only name
+    // data this document already created. The pictures take that same path, which
+    // is why no avatar host is named here: they are served by this app's own API.
     //
     // Species photos are the one image kind that does *not* take that path - they
     // are public bytes on an unauthenticated route, so they are a plain `<img src>`

From 65a069ae5317f98e7638a91f786a8311f6fb1dba Mon Sep 17 00:00:00 2001
From: Aleksei Vesnin <aleksei@vesnin.me>
Date: Thu, 24 Sep 2026 17:38:43 +0300
Subject: [PATCH 2/3] docs: the review's three prose corrections

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 DECISIONS.md                                       | 14 +++++++-------
 .../checkin/checkin-page-frame.render.test.tsx     |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/DECISIONS.md b/DECISIONS.md
index d83f67c6..30eaff64 100644
--- a/DECISIONS.md
+++ b/DECISIONS.md
@@ -385,11 +385,12 @@ Figma's fallback `<path>` beside the `<foreignObject>` paints solid black over t
 ## Changing your account email is a request/confirm flow, not a plain field edit
 
 `USER_FIELDS` in `lib/validations/user-fields.ts` has no `email`, matching the API's `UserUpdate`;
-`ProfileCard` touches only name/username. Email lives in `components/settings/EmailChangeCard.tsx`:
-enter a new address, submit via `authAPI.requestEmailChange(newEmail)`, get the same generic "check
-your new email" message even for a taken address, and the change applies only once the emailed link
-is confirmed. `POST /user/email-change/request` always acts on the caller's own account, so there is
-no address to name but the new one.
+`ProfileCard` touches only name, username and the profile picture. Email lives in
+`components/settings/EmailChangeCard.tsx`: enter a new address, submit via
+`authAPI.requestEmailChange(newEmail)`, get the same generic "check your new email" message even for
+a taken address, and the change applies only once the emailed link is confirmed.
+`POST /user/email-change/request` always acts on the caller's own account, so there is no address to
+name but the new one.
 
 The field is always visible with one full-width "Send confirmation link" button — no edit toggle, no
 cancel — matching the Profile Information card beside it. Both cards use `flex flex-col h-full` /
@@ -4037,8 +4038,7 @@ the same paint.
 ## The crop dialog's three traps
 
 Never JPEG: `canvas.toBlob("image/jpeg")` composites transparency onto black. A card exports WebP
-because its endpoint stores what it is given. The two pictures export nothing: the picked file goes
-as it is, with the crop beside it as numbers.
+because its endpoint stores what it is given.
 
 `react-easy-crop` injects its own `<style>` by default, which the nonce-based production CSP drops
 (the dev CSP allows `'unsafe-inline'`). `disableAutomaticStylesInjection` plus
diff --git a/src/components/checkin/checkin-page-frame.render.test.tsx b/src/components/checkin/checkin-page-frame.render.test.tsx
index 06e041d2..c7c38e99 100644
--- a/src/components/checkin/checkin-page-frame.render.test.tsx
+++ b/src/components/checkin/checkin-page-frame.render.test.tsx
@@ -451,7 +451,7 @@ describe("the picture at the top", () => {
 
     const portrait = screen.getByAltText("Portrait of Sam Reef");
     expect(portrait).toHaveAttribute("src", "blob:card");
-    // In the name's own column, 7:9, where the avatar used to sit.
+    // In the name's own column, at 7:9.
     const slot = screen.getByRole("heading", {
       name: "Sam Reef",
     }).previousElementSibling!;

From 632d6360f5a7cc6c521bf0dd18c0db41d6ca5fa5 Mon Sep 17 00:00:00 2001
From: Aleksei Vesnin <aleksei@vesnin.me>
Date: Thu, 24 Sep 2026 17:41:30 +0300
Subject: [PATCH 3/3] docs: the email entry stays under the bar

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 DECISIONS.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/DECISIONS.md b/DECISIONS.md
index 30eaff64..17f3b151 100644
--- a/DECISIONS.md
+++ b/DECISIONS.md
@@ -384,9 +384,8 @@ Figma's fallback `<path>` beside the `<foreignObject>` paints solid black over t
 
 ## Changing your account email is a request/confirm flow, not a plain field edit
 
-`USER_FIELDS` in `lib/validations/user-fields.ts` has no `email`, matching the API's `UserUpdate`;
-`ProfileCard` touches only name, username and the profile picture. Email lives in
-`components/settings/EmailChangeCard.tsx`: enter a new address, submit via
+`USER_FIELDS` in `lib/validations/user-fields.ts` has no `email`, matching the API's `UserUpdate`.
+Email lives in `components/settings/EmailChangeCard.tsx`: enter a new address, submit via
 `authAPI.requestEmailChange(newEmail)`, get the same generic "check your new email" message even for
 a taken address, and the change applies only once the emailed link is confirmed.
 `POST /user/email-change/request` always acts on the caller's own account, so there is no address to